/* Culture, people and data family (cu-): /muslim-countries, /islamic-history-timeline and the art, architecture and scholars posts. */
/* ---- Muslim countries ---- */
.cu_stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}
.cu_stat{display:grid;gap:.3rem;padding:1rem 1.125rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.cu_stat b{font:600 1.5rem/1.15 var(--display);color:var(--lapis-deep);font-variant-numeric:tabular-nums}
.cu_stat span{font-size:.8125rem;line-height:1.4;color:var(--muted)}
.cu_bar{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.cu_bar{grid-template-columns:minmax(0,1fr) 13rem auto;align-items:end}}
.cu_views{margin-block-start:.25rem}
.cu_tbl{overflow-x:auto;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line);background:var(--page)}
.cu_tbl table{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.cu_tbl th,.cu_tbl td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line-soft);line-height:1.4;vertical-align:middle}
.cu_tbl thead th{position:sticky;top:0;background:var(--surface);font-weight:500;color:var(--muted);white-space:nowrap}
.cu_tbl thead button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;color:inherit}
.cu_tbl thead button:focus-visible{outline:2px solid var(--lapis);outline-offset:2px;border-radius:3px}
.cu_tbl thead button::after{content:"";width:.5rem;height:.5rem;opacity:.35;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l3 3H1zM4 8l3-3H1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l3 3H1zM4 8l3-3H1z'/%3E%3C/svg%3E") center/contain no-repeat}
.cu_tbl th[aria-sort] button{color:var(--lapis-deep)}
.cu_tbl th[aria-sort] button::after{opacity:1}
.cu_tbl td.n,.cu_tbl th.n{text-align:right}
.cu_tbl tbody tr:hover{background:var(--surface)}
.cu_tbl .cu_rk{color:var(--faint);width:2.5rem}
.cu_tbl .cu_ct{font-weight:500}
.cu_tbl .cu_rg{color:var(--muted);font-size:.8125rem}
.cu_tbl .up{color:#15803D}.cu_tbl .down{color:#B42318}
.cu_sh{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.cu_sh i{display:block;width:3.5rem;height:.4rem;border-radius:999px;background:var(--raised);overflow:hidden}
.cu_sh i::before{content:"";display:block;height:100%;width:var(--w);background:var(--lapis)}
.cu_maj{display:inline-block;margin-inline-start:.35rem;padding:0 .35rem;border-radius:999px;font-size:.6875rem;line-height:1.35;background:var(--gold-tint);color:var(--gold-ink);vertical-align:1px}
@media (max-width:640px){.cu_tbl .cu_hide{display:none}.cu_sh i{display:none}.cu_tbl th,.cu_tbl td{padding:.55rem .5rem}}
.cu_count{font-size:.875rem;color:var(--muted)}
@media (min-width:760px){[data-cu-countries] .tools_filter,[data-cu-timeline] .tools_filter{flex-wrap:wrap}}
/* shaded tiles by region */
.cu_map{display:grid;gap:1.25rem;margin-block-start:1rem}
.cu_reg h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;font:600 1.0625rem/1.3 var(--display);margin:0 0 .6rem}
.cu_reg h3 small{font:400 .8125rem/1.3 var(--font);color:var(--muted)}
.cu_tiles{display:flex;flex-wrap:wrap;gap:4px}
.cu_tile{display:flex;align-items:center;min-height:2rem;padding:.3rem .5rem;border-radius:4px;font-size:.75rem;line-height:1.2;color:var(--text);background:#F1F3F8;box-shadow:inset 0 0 0 1px rgba(16,36,102,.06)}
.cu_tile[data-b="1"]{background:#DCE4F6}.cu_tile[data-b="2"]{background:#B4C3EA}.cu_tile[data-b="3"]{background:#8EA2DA}
.cu_tile[data-b="4"]{background:#3552B0;color:#fff}.cu_tile[data-b="5"]{background:#102466;color:#fff}
.cu_key{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.8125rem;color:var(--muted)}
.cu_key span{display:inline-flex;align-items:center;gap:.35rem}
.cu_key i{width:.9rem;height:.9rem;border-radius:3px;background:#F1F3F8;box-shadow:inset 0 0 0 1px rgba(16,36,102,.1)}
.cu_key i[data-b="1"]{background:#DCE4F6}.cu_key i[data-b="2"]{background:#B4C3EA}.cu_key i[data-b="3"]{background:#8EA2DA}.cu_key i[data-b="4"]{background:#3552B0}.cu_key i[data-b="5"]{background:#102466}
/* ranked bars */
.cu_bars{display:grid;gap:.45rem;margin:0;padding:0;list-style:none;counter-reset:b}
.cu_bars li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 6.5rem;gap:.6rem;align-items:center;font-size:.875rem}
.cu_bars .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu_bars .t{height:.875rem;border-radius:3px;background:var(--raised);overflow:hidden}
.cu_bars .t::before{content:"";display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--lapis),var(--lapis-hi))}
.cu_bars .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
@media (max-width:480px){.cu_bars li{grid-template-columns:6.5rem minmax(0,1fr) 5rem;font-size:.8125rem}}
/* ---- Timeline ---- */
.cu_eras{display:flex;width:100%;height:2.75rem;border-radius:var(--r2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cu_eras button{all:unset;box-sizing:border-box;flex:var(--f) 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:0 .25rem;font-size:.6875rem;line-height:1.1;text-align:center;cursor:pointer;color:#fff;overflow:hidden;border-inline-end:1px solid rgba(255,255,255,.5)}
.cu_eras button:last-child{border:0}
.cu_eras button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cu_eras button[aria-pressed="false"]{opacity:.35}
.cu_axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-block-start:.3rem}
.cu_tl{position:relative;display:grid;gap:0;margin:0;padding:0;list-style:none}
.cu_tl::before{content:"";position:absolute;top:.5rem;bottom:.5rem;left:6.4rem;width:2px;background:var(--line)}
.cu_ev{position:relative;display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:1.4rem;padding:.9rem 0}
.cu_ev[hidden]{display:none}
.cu_ev::before{content:"";position:absolute;left:calc(6.4rem - 5px);top:1.25rem;width:12px;height:12px;border-radius:50%;background:var(--c,var(--lapis));box-shadow:0 0 0 3px var(--page)}
.cu_when{text-align:right;line-height:1.25}
.cu_when b{display:block;font:600 1.0625rem/1.2 var(--display);font-variant-numeric:tabular-nums;color:var(--lapis-deep)}
.cu_when span{display:block;margin-block-start:.15rem;font-size:.8125rem;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.cu_tl.is-hijri .cu_when b{order:2}
.cu_when{display:flex;flex-direction:column}
.cu_tl.is-hijri .cu_when span{order:1;font:600 1.0625rem/1.2 var(--display);color:var(--gold-ink)}
.cu_tl.is-hijri .cu_when b{font:400 .8125rem/1.3 var(--font);color:var(--muted)}
.cu_what h3{margin:0;font:600 1.0625rem/1.35 var(--display)}
.cu_what p{margin:.3rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--text)}
.cu_what .cu_src{font-size:.8125rem;color:var(--muted)}
.cu_era_t{display:inline-block;margin-block-end:.3rem;padding:0 .45rem;border-radius:999px;font-size:.6875rem;line-height:1.5;color:#fff;background:var(--c,var(--lapis))}
.cu_what a{color:var(--lapis);text-underline-offset:2px}
@media (max-width:560px){
  .cu_tl::before{left:4.6rem}
  .cu_ev{grid-template-columns:4rem minmax(0,1fr);gap:1.25rem}
  .cu_ev::before{left:calc(4.6rem - 5px)}
  .cu_when b{font-size:.9375rem}.cu_when span{font-size:.75rem}
  .cu_eras{height:2.5rem}.cu_eras button{font-size:0}
}
.cu_legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.8125rem;color:var(--muted)}
.cu_legend span{display:inline-flex;align-items:center;gap:.35rem}
.cu_legend i{width:.75rem;height:.75rem;border-radius:50%;background:var(--c)}
/* ---- Posts ---- */
.cu_fig{margin:1.75rem 0}
.cu_fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r3);background:var(--surface)}
.cu_fig figcaption{margin-block-start:.55rem;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.cu_fig figcaption a{color:inherit;text-decoration:underline;text-decoration-color:rgba(86,91,110,.4);text-underline-offset:2px}
.cu_people{display:grid;gap:.75rem;margin:1rem 0;padding:0;list-style:none}
.cu_people li{display:grid;gap:.2rem;padding:.9rem 1rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cu_people b{font:600 1rem/1.35 var(--display)}
.cu_people .d{font-size:.8125rem;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.cu_people p{margin:0;font-size:.9375rem;line-height:1.55}
.cu_people .s{font-size:.8125rem;color:var(--muted)}
@media print{.cu_bar,.cu_views,.cu_eras,.cu_axis,[data-cu-tools]{display:none!important}.cu_ev[hidden]{display:grid!important}}
/* 31 Oct audit: on phones the table fits the screen, so the share column is not hidden off to the right */
@media (max-width:640px){
  .cu_tbl table{font-size:.8125rem}
  .cu_tbl thead th{white-space:normal;vertical-align:bottom}
  .cu_tbl th,.cu_tbl td{padding:.5rem .35rem}
  .cu_tbl .cu_rk{width:1.6rem;padding-inline-start:.5rem}
  .cu_tbl td.n{white-space:nowrap}
  .cu_maj{display:block;width:max-content;margin:.15rem 0 0}
}
.cu_short{display:none}
@media (max-width:640px){.cu_full{display:none}.cu_short{display:inline}}
@media (max-width:400px){.cu_tbl .cu_rk{display:none}.cu_tbl th[data-k="c"],.cu_tbl td:nth-child(2){padding-inline-start:.6rem}}
@media (max-width:640px){.cu_tbl thead button{min-height:2.75rem}}