:root{--bg:#EFE7DA;--fg:#0D1522;--mut:#5A6270;--card:#F9F5EE;--line:#DFD5C3;--acc:#8A5F20;--gold:#A6752B;--ar:#0D1522;--soft:#EADFC9;--ink:#0D1522;--muted:#5A6270;--accent:#8A5F20;--accent-soft:#EADFC9;--surface:#F9F5EE;--paper:#EFE7DA;--shadow:0 1px 2px rgba(13,21,34,.05),0 12px 34px -14px rgba(13,21,34,.20);--serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--arabic:"Amiri Quran","Amiri","Scheherazade New","Noto Naskh Arabic","Traditional Arabic",serif}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0D1522;--fg:#EFE8DA;--mut:#9AA3B4;--card:#141D2E;--line:#243049;--acc:#D2A45C;--gold:#C99A4E;--ar:#EFE8DA;--soft:#1D2A40;--ink:#EFE8DA;--muted:#9AA3B4;--accent:#D2A45C;--accent-soft:#1D2A40;--surface:#141D2E;--paper:#0D1522;--shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.6)}}
:root[data-theme=dark]{--bg:#0D1522;--fg:#EFE8DA;--mut:#9AA3B4;--card:#141D2E;--line:#243049;--acc:#D2A45C;--gold:#C99A4E;--ar:#EFE8DA;--soft:#1D2A40;--ink:#EFE8DA;--muted:#9AA3B4;--accent:#D2A45C;--accent-soft:#1D2A40;--surface:#141D2E;--paper:#0D1522;--shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.6)}
:root[data-theme=light]{--bg:#EFE7DA;--fg:#0D1522;--mut:#5A6270;--card:#F9F5EE;--line:#DFD5C3;--acc:#8A5F20;--gold:#A6752B;--ar:#0D1522;--soft:#EADFC9;--ink:#0D1522;--muted:#5A6270;--accent:#8A5F20;--accent-soft:#EADFC9;--surface:#F9F5EE;--paper:#EFE7DA;--shadow:0 1px 2px rgba(13,21,34,.05),0 12px 34px -14px rgba(13,21,34,.20)}

  .sb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .sb-mark{display:block;border-radius:50%;flex-shrink:0}
  .sb-name{display:flex;flex-direction:column;line-height:1.15}
  .sb-name b{font-family:var(--sans);font-size:12.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.15em;color:var(--fg,var(--ink))}
  .sb-name i{font-family:var(--sans);font-style:normal;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.19em;color:var(--acc,var(--accent))}
  @media (max-width:560px){ .sb-name b{font-size:11.5px} .sb-name i{font-size:9.5px} }

  .brand-rule{display:block;width:64px;height:2px;border:0;margin:0 0 18px;
    background:var(--gold);opacity:.9}

  :where(a):not([class]){color:var(--acc);text-decoration:underline;
    text-underline-offset:2px;text-decoration-thickness:1px;
    text-decoration-color:color-mix(in srgb,var(--acc) 45%,transparent)}
  :where(a):not([class]):hover{text-decoration-color:var(--acc)}

  .wrap p, .wrap li, .wrap blockquote, .wrap dd{font-family:var(--serif)}
  .wrap h1, .wrap h2, .wrap h3{font-family:var(--serif); letter-spacing:-.012em}
  .wrap .ph-no, .wrap .crumbs, .wrap .sx-e, .wrap .sc-meta,
  .wrap .fc-meta, .wrap .stats{font-family:var(--sans)}

  :root{--bar-h:56px}
  [id]{scroll-margin-top:calc(var(--bar-h) + 12px)}
  /* the UA's [hidden]{display:none} loses to any class that sets display, so
     `el.hidden = true` silently fails; this makes the attribute reliable */
  [hidden]{display:none!important}

  .sitebar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
    flex-wrap:wrap;padding:9px clamp(14px,4vw,26px);background:var(--card);
    border-bottom:1px solid var(--line)}
  .sitebar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
  .sitebar nav a{font-family:var(--sans);font-size:11px;text-decoration:none;color:var(--mut);
    padding:6px 10px;border-radius:6px;white-space:nowrap;
    text-transform:uppercase;letter-spacing:.12em;font-weight:600}
  .sitebar nav a:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
  .sitebar nav a[aria-current=page]{color:var(--acc);font-weight:600;
    background:color-mix(in srgb,var(--acc) 12%,transparent)}
  .sitefoot{border-top:1px solid var(--line);margin-top:44px;
    padding:22px clamp(14px,4vw,26px) 40px;background:var(--card)}
  .sitefoot .sf-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
  .sitefoot a{font-size:13px;color:var(--mut);text-decoration:none}
  .sitefoot a:hover{color:var(--acc);text-decoration:underline}
  .sitefoot .sf-note{font-size:12px;color:var(--mut);line-height:1.6;max-width:70ch;margin:0}
  @media (max-width:560px){
    .sitebar{gap:8px}
    .sitebar nav{margin-left:0;width:100%}
    .sitebar nav a{padding:5px 9px}
  }

  /* ---------- audio ---------- */
  .spk{display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    background:none; border:none; color:var(--muted); font-size:13px; line-height:1;
    padding:3px 5px; border-radius:6px}
  .spk:hover{color:var(--accent); background:var(--accent-soft)}
  .spk:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .spk.on{color:var(--accent)}
  .spk[disabled]{opacity:.4; cursor:default}
  .a-playing{background:var(--accent-soft)!important; border-radius:6px}
  .a-note{margin:8px 0; padding:9px 12px; border-radius:9px; font-size:12.5px; line-height:1.5;
    background:color-mix(in srgb,#c2410c 12%,transparent);
    border:1px solid color-mix(in srgb,#c2410c 35%,transparent); color:var(--ink)}
  .a-note b{font-weight:600}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:22px clamp(14px,4vw,26px) 70px}
a{color:var(--acc)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;
  color:var(--mut);margin-bottom:14px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--acc);text-decoration:underline}
.crumbs .cur{color:var(--fg);font-weight:600}
.page-head{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ph-no{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  margin-bottom:6px}
.page-head h1{margin:0 0 7px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  font-size:clamp(23px,3.2vw,31px);letter-spacing:-.015em}
.page-head .ar{font-size:1.25em;color:var(--ar)}
.ph-sub{margin:0;color:var(--mut);font-size:13.5px}
.intro{margin:0 0 22px;max-width:66ch}
.intro p{font-size:14.5px;line-height:1.7;color:var(--fg);margin:0 0 12px}

/* ---- controls ---- */
/* sticks below the site bar, not underneath it — see BAR_H_CSS in site_chrome */
.ctl{position:sticky;top:var(--bar-h);z-index:8;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 16px;padding:10px 12px;margin:0 0 18px;background:var(--card);
  border:1px solid var(--line);border-radius:11px}
.ctl-t,.ctl-s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.ctl select{font:inherit;font-size:12.5px;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:4px 7px;max-width:190px}
.btn{font:inherit;font-size:12.5px;color:var(--fg);background:var(--bg);cursor:pointer;
  border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.sm{margin-left:auto}

/* ---- verses ---- */
.v{padding:16px 0;border-bottom:1px solid var(--line)}
.vh{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.vn{font-size:12px;color:var(--mut);text-decoration:none;font-variant-numeric:tabular-nums;
  background:var(--soft);border-radius:20px;padding:3px 10px}
.vn:hover{color:var(--acc)}
.spk.pw{font-size:11px;gap:4px}
.ws{display:flex;flex-wrap:wrap;gap:6px 4px;margin-bottom:11px}
.w{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:5px 7px;border-radius:9px;border:1px solid transparent;min-width:0}
.w:hover{background:var(--soft);border-color:var(--line)}
.w:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.w.on{background:var(--accent-soft);border-color:var(--acc)}
.w b{font-weight:400;font-size:26px;line-height:1.9;color:var(--ar);
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif}
.w i{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--mut);direction:ltr;
  text-align:center;max-width:15ch}
.w u{display:none;text-decoration:none;font-size:11px;color:var(--acc);direction:ltr;
  font-style:italic}
body.no-gloss .w i{display:none}
body.show-tl .w u{display:block}
body.no-trans .tr{display:none}
.tr{margin:0;font-size:14.5px;line-height:1.7;color:var(--fg);max-width:74ch}
.pager{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pn{font-size:13px;text-decoration:none;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:7px 14px}
.pn:hover{border-color:var(--acc);color:var(--acc)}

/* ---- word popover ---- */
.pop{position:absolute;z-index:30;max-width:270px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  box-shadow:0 12px 30px rgba(20,25,22,.16)}
.pop-ar{font-size:27px;line-height:1.8;color:var(--ar);direction:rtl;
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif}
.pop-tl{font-size:12.5px;color:var(--acc);font-style:italic;margin-bottom:5px}
.pop-gl{font-size:14px;line-height:1.5;margin-bottom:9px}
.pop-r{font-size:12.5px;color:var(--mut);margin-bottom:10px}
.pop-r a{text-decoration:none;font-size:16px;color:var(--acc);direction:rtl;
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif}
.pop-rs{display:block;font-size:12.5px;color:var(--fg);line-height:1.45;margin-top:3px}
.pop-act{display:flex;gap:7px;flex-wrap:wrap}
.pop-x{position:absolute;top:6px;right:8px;background:none;border:none;cursor:pointer;
  color:var(--mut);font-size:15px;line-height:1}

/* ---- surah index ---- */
.sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.sx{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .15s,transform .15s}
.sx:hover{border-color:var(--acc);transform:translateY(-2px)}
.sx-n{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:2ch;
  text-align:right}
.sx-b{display:flex;flex-direction:column;min-width:0}
.sx-ar{font-size:19px;color:var(--ar);line-height:1.7;
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif}
.sx-t{font-size:13.5px;font-weight:600}
.sx-e{font-size:11.5px;color:var(--mut)}
@media (max-width:560px){
  .w b{font-size:23px}
  .ctl{gap:7px 12px;padding:9px 10px}
}