*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
color-adjust:exact!important;box-sizing:border-box}
:root{--bg:#FBF9F4;--card:#FFFEFB;--ink:#1B1815;--soft:#433D34;--mute:#736B5E;
--rule:#E3DCCC;--hair:#EFE9DB;--gold:#8A6714;--lapis:#1F3F68;--well:#F4EFE2;
--warn:#9C4A1A;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
--ar:"Sakkal Majalla","Traditional Arabic","Arabic Typesetting","Segoe UI",serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#14150F;--card:#1B1C16;--ink:#EDE9DF;--soft:#BCB6A8;--mute:#8B8578;
--rule:#33342B;--hair:#26271F;--gold:#D9B25E;--lapis:#8FB0E6;--well:#1F201A;
--warn:#E08B54}}
:root[data-theme="dark"]{--bg:#14150F;--card:#1B1C16;--ink:#EDE9DF;--soft:#BCB6A8;
--mute:#8B8578;--rule:#33342B;--hair:#26271F;--gold:#D9B25E;--lapis:#8FB0E6;
--well:#1F201A;--warn:#E08B54}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;
line-height:1.62;margin:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:clamp(26px,5vw,64px) clamp(16px,4vw,40px) 90px}
a{color:var(--lapis)}
h1{font-size:clamp(27px,5vw,44px);line-height:1.08;margin:0 0 6px;font-weight:600;
letter-spacing:-.02em;text-wrap:balance}
h2{font-size:20px;margin:38px 0 12px;font-weight:600}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--mute)}
.rule{height:2px;background:var(--ink);opacity:.82;margin:18px 0 24px}
.lede{font-size:clamp(16px,2vw,19px);color:var(--soft);max-width:68ch}
.ayah{background:var(--card);border:1px solid var(--hair);border-left:3px solid var(--gold);
border-radius:3px;padding:20px 22px;margin:0 0 14px}
.num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold);
text-transform:uppercase;margin-bottom:10px}
.num a{color:var(--mute);text-decoration:none;font-size:10px;margin-left:10px}
.num a:hover{color:var(--lapis)}
.bism{font-family:var(--ar);font-size:clamp(20px,3.2vw,26px);line-height:2.1;
direction:rtl;text-align:center;color:var(--gold);margin:0 0 20px;padding:14px 10px;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ar{font-family:var(--ar);font-size:clamp(21px,3vw,27px);line-height:2.05;direction:rtl;
text-align:right;color:var(--ink);margin:0 0 14px}
.tr{color:var(--soft);font-size:15.5px;margin:0 0 6px}
.tr b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--mute);font-weight:400;margin-right:7px}
.reading{background:var(--well);border-radius:3px;padding:14px 16px;margin-top:13px;
font-size:16.5px;line-height:1.66}
.reading .tag{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
text-transform:uppercase;color:var(--gold);display:block;margin-bottom:7px}
.reading.rtl{direction:rtl;text-align:right;font-family:var(--ar);font-size:19px;line-height:2}
.badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;background:var(--lapis);color:#fff;border-radius:2px;
padding:2px 7px;margin-left:8px}
.nav{display:flex;flex-wrap:wrap;gap:5px;margin:22px 0 34px}
.nav a{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:5px 9px;
background:var(--card);border:1px solid var(--hair);border-radius:2px;
text-decoration:none;color:var(--soft)}
.nav a:hover{border-color:var(--gold);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin:16px 0}
.st{background:var(--card);border:1px solid var(--hair);border-radius:2px;padding:12px 14px}
.st b{display:block;font-size:22px;color:var(--gold);font-family:var(--mono);line-height:1.2}
.st span{font-size:12px;color:var(--mute)}
.box{background:var(--card);border:1px solid var(--hair);border-radius:3px;
padding:22px 24px;margin:16px 0}
.box.warn{border-left:3px solid var(--warn)}
.box h3{margin:0 0 10px;font-size:17px}
ol,ul{max-width:68ch;color:var(--soft)}
li{margin-bottom:9px}
table{border-collapse:collapse;width:100%;font-size:14.5px;margin:14px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair);
vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--mute);font-weight:400}
td.n{font-family:var(--mono);color:var(--mute);white-space:nowrap}
footer{border-top:1px solid var(--rule);margin-top:52px;padding-top:20px;
color:var(--mute);font-size:13px}
.scroll{overflow-x:auto}
@media print{.nav{display:none}.ayah{break-inside:avoid}}

/* spine_ui.py's sheet is written against surah_engine's variable names.
   Aliasing them - rather than copying colour values - means a theme
   change in one place still reaches both, and the dark-mode block does
   not have to be maintained twice. */
:root{--sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
--ink2:var(--soft);--dim:var(--mute);--line:var(--rule);
--gold-line:var(--gold);--gold-soft:var(--well);--lapis-soft:var(--well);
--arfs:1.9rem}

/* ---- spine + presets ------------------------------------------- */
.spine,.presets{display:flex;flex-wrap:wrap;gap:.4rem;
justify-content:center;margin:1.1rem 0 .3rem}
.spine button,.presets button{font:inherit;font-family:var(--sans);
font-size:.8rem;padding:.36rem .9rem;cursor:pointer;background:var(--card);
color:var(--ink2);border:1px solid var(--line);border-radius:999px}
.spine button[lang="ar"],.spine button[lang="ur"]{font-family:var(--ar);
font-size:1.05rem;padding:.2rem .9rem}
.spine button:hover,.presets button:hover{border-color:var(--lapis);
color:var(--lapis)}
.spine button[aria-pressed="true"],.presets button[aria-pressed="true"]{
background:var(--lapis);color:var(--bg);border-color:var(--lapis);
font-weight:700}
.predesc{font-family:var(--sans);font-size:.76rem;color:var(--dim);
text-align:center;margin:.35rem 0 0}

/* ---- right-to-left spines --------------------------------------- */
body.sp-ar,body.sp-ur{direction:rtl}
body.sp-all{direction:ltr}
/* text-align:START, not right. A block carrying dir="ltr" - the English
   agreed reading, an English translation - must stay LEFT-aligned even
   inside an RTL page. Forcing `right` gave English prose hanging off the
   wrong margin; `start` resolves against each element's OWN direction, so
   Urdu goes right and English goes left with one rule. */
body.sp-ar .sub,body.sp-ur .sub,body.sp-ar .salah,body.sp-ur .salah,
body.sp-ar .note,body.sp-ur .note,body.sp-ar .predesc,body.sp-ur .predesc{
text-align:right}
body.sp-ar .tr,body.sp-ur .tr,body.sp-ar .reading,body.sp-ur .reading{
text-align:start}
body.sp-ar .reading,body.sp-ur .reading{border-left:none;
border-right:3px solid var(--gold-line)}
body.sp-ar .note,body.sp-ur .note{border-left:none;
border-right:3px solid var(--lapis)}
body.sp-ar .ev,body.sp-ur .ev{border-left:none;
border-right:3px solid var(--line)}
body.sp-ar .ev.pd,body.sp-ur .ev.pd{border-right-color:var(--lapis)}
/* the transliteration is Latin and must stay left-to-right even in an
   RTL spine, or the syllables reorder on screen */
body.sp-ar p.tl,body.sp-ur p.tl{direction:ltr;text-align:left}
body.sp-ar .q.en,body.sp-ur .q.en{direction:ltr;text-align:left}
body.sp-ar .copy,body.sp-ur .copy{margin-left:0;margin-right:auto}

/* ---- one plain-meaning line per spine ---------------------------- */
/* An Urdu reader was shown Pickthall. Each spine now gets the meaning in
   its own language: English readers Pickthall and Yusuf Ali, Urdu readers
   Junagarhi, Arabic readers al-Muyassar - a plain-Arabic paraphrase, which
   is what an Arab reader wants where a translation makes no sense. */
.sp-only-en,.sp-only-ur,.sp-only-ar{display:none}
/* the English report is shown in every spine EXCEPT Urdu, where an Urdu
   translation of the same report exists and is shown instead */
body.sp-ur .sp-not-ur{display:none}
body.sp-en .sp-only-en,body.sp-ur .sp-only-ur,body.sp-ar .sp-only-ar{
display:block}
/* ALL THREE AT ONCE - nothing is hidden, and each block keeps its own
   dir and alignment because those live on the element, not on the body */
body.sp-all .sp-only-en,body.sp-all .sp-only-ur,body.sp-all .sp-only-ar{
display:block}
body.sp-all .sp-not-ur{display:block}
body.sp-all .reading.fallback{display:none}
body.sp-all .reading+.reading{margin-top:.5rem}

/* The agreed reading is still English in every spine until it is derived
   from Arabic and Urdu sources. Say so, in the reader's own language,
   rather than let them meet English prose under an Urdu heading. */
.notyet{display:none}
body.sp-ar .notyet,body.sp-ur .notyet{display:block;font-family:var(--sans);
font-size:.72rem;color:var(--gold);margin-top:.5rem;direction:rtl;
text-align:right}

/* ---- presets: hide layers, never the body ----------------------- */
body.pre-listen .tlist,body.pre-listen details,body.pre-listen .wordbox,
body.pre-listen .bar,body.pre-listen .chrono,body.pre-listen .tr,
body.pre-listen .silent,body.pre-listen #context{display:none}
body.pre-listen .line{font-size:calc(var(--arfs) * 1.1)}

body.pre-read details,body.pre-read .wordbox,body.pre-read .chrono,
body.pre-read .silent,body.pre-read #context{display:none}
/* ONE translation, not two. `.tr:nth-of-type(n+2)` looked right and was
   wrong: nth-of-type counts among ALL <p> siblings, and .line and .tl sit
   between the translations, so it matched the FIRST .tr as well and the
   reader got none. `.tr ~ .tr` means "a .tr with a .tr before it", which
   is what was meant and holds however the siblings are arranged. */
/* Read shows ONE translation. Only the English spine has two, so the
   sibling rule is scoped to it - otherwise it would hide the Urdu or the
   Arabic line, which are the only one their spine has. */
body.pre-read.sp-en p.tr ~ p.tr{display:none}

/* Study is for a student, not a researcher: the words, the reports and
   the commentaries, but not the 55-language comparison table or the
   chronology instrument - those are what Everything is for. */
body.pre-study .chrono,body.pre-study .tlist{display:none}
body.pre-study.sp-en p.tr ~ p.tr{display:none}

.playbar{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
margin:.9rem 0 .2rem}
.playbar button{font:inherit;font-family:var(--sans);font-size:.82rem;
padding:.42rem 1.1rem;cursor:pointer;background:var(--lapis-soft);
color:var(--lapis);border:1px solid var(--lapis);border-radius:999px;
font-weight:700}
.playbar button:hover{filter:brightness(1.05)}
.playbar button[aria-pressed="true"]{background:var(--lapis);color:var(--bg)}
.spokenby{font-family:var(--sans);font-size:.72rem;color:var(--dim);
text-align:center;margin:.3rem 0 0}
/* the ayah being recited, so a listener can follow without reading */
.ayah.now{background:var(--gold-soft);border-radius:6px;
box-shadow:0 0 0 3px var(--gold-soft)}

.attest{font-family:var(--sans);font-size:.76rem;color:var(--dim);
border-top:1px dotted var(--line);padding-top:.7rem;margin-top:1rem;
max-width:44rem}

/* pre-all shows everything - no rules needed, which is the point */
/* PRINT lives in PRINT_CSS below, in ONE block. It used to be two
   @media print rules stranded in the middle of the screen sheet,
   which is how a print stylesheet ends up half-maintained: someone
   adds a control and hides it in the block they happened to see. */

/* ---- the hadith layer ------------------------------------------- */
/* Nine open blocks bury the reading the page exists for, so the layer
   is a disclosure. It is CONTENT on these pages, not apparatus: the
   rule below out-specifies body.pre-listen/pre-read details{display:none}
   (0,2,1 against 0,1,1) so it wins wherever it sits in the cascade, and
   the page also pins the preset. Belt and braces, because a preset
   remembered from another page is invisible until the layer is gone. */
.hanch{margin:6px 0 2px;font-size:1.05rem;color:var(--gold);
line-height:1.9}
.hwhy,.hlim{margin:4px 0;font-size:.92rem;color:var(--soft);
line-height:1.55}
.hlim{border-left:2px solid var(--gold);padding-left:9px}
details.hl{display:block;margin:13px 0 0;border-top:1px solid var(--hair);
padding-top:11px}
body.pre-listen details.hl,body.pre-read details.hl,
body.pre-study details.hl,body.pre-all details.hl{display:block}
.hsum{cursor:pointer;font-family:var(--mono);font-size:11px;
letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
list-style:none}
.hsum::-webkit-details-marker{display:none}
.hsum::before{content:"\25B8\00A0";display:inline-block;
transition:transform .12s}
details.hl[open] .hsum::before{transform:rotate(90deg)}
.hsum:hover{color:var(--lapis)}
/* the count spans are hidden and shown by sp-only-* alone. A
   .hcount{display:none} used to sit here as well - redundant,
   because sp-only-* already hides them, and exactly the shape of
   the collision that blanked this corpus once: a second rule
   hiding the same element, which nobody remembers when the first
   one changes. */
.hsum span[lang="ar"],.hsum span[lang="ur"]{font-family:var(--ar);
font-size:14px;letter-spacing:0;text-transform:none}

.hrep{border-left:2px solid var(--hair);padding:0 0 0 13px;margin:15px 0 0}
.hrep+.hrep{margin-top:19px}
body.sp-ar .hrep,body.sp-ur .hrep{border-left:none;
border-right:2px solid var(--hair);padding:0 13px 0 0}
.hprov{margin:0 0 3px;font-size:13.5px;color:var(--soft);font-style:italic}
.hprov[lang="ar"],.hprov[lang="ur"]{font-family:var(--ar);font-size:15px;
font-style:normal}
.hcite{margin:0 0 7px;font-family:var(--mono);font-size:11.5px;
color:var(--mute)}
.hcite a{color:var(--lapis);text-decoration:none}
.hcite a:hover{text-decoration:underline}
.hgrade{margin:0 0 7px;font-family:var(--mono);font-size:10.5px;
color:var(--mute)}
.hgrade[lang="ar"],.hgrade[lang="ur"]{font-family:var(--ar);font-size:13px}
.hq{margin:0 0 8px}
.har{font-family:var(--ar);font-size:19px;line-height:1.95;direction:rtl;
text-align:right;color:var(--ink)}
.hen{font-size:14.5px;line-height:1.6;color:var(--soft)}
.hur{font-family:var(--ar);font-size:17px;line-height:1.95;direction:rtl;
text-align:right;color:var(--soft)}
.hnote{margin:-4px 0 8px;font-family:var(--ar);font-size:12px;
color:var(--mute)}
.hdup,.hmore{margin:0 0 4px;font-size:12.5px;color:var(--mute)}
.hdup[lang="ar"],.hdup[lang="ur"],.hmore[lang="ar"],.hmore[lang="ur"]{
font-family:var(--ar);font-size:14px}
.hmore a,.hdup a{color:var(--lapis);text-decoration:none}
.hmore a:hover,.hdup a:hover{text-decoration:underline}

/* the report's own page */
.hwhere{width:100%;border-collapse:collapse;font-size:14px}
.hwhere th,.hwhere td{text-align:left;padding:7px 9px;
border-bottom:1px solid var(--hair);vertical-align:top}
body.sp-ar .hwhere th,body.sp-ur .hwhere th,
body.sp-ar .hwhere td,body.sp-ur .hwhere td{text-align:right}
.hwhere th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--mute);font-weight:400}
.hwhere td.k{font-family:var(--mono);white-space:nowrap;color:var(--lapis)}
.hwhere td.k a{color:inherit;text-decoration:none}
.hwhere td.k a:hover{text-decoration:underline}
.hcols{columns:2 260px;column-gap:26px;font-size:14px}
.hcols a{display:block;padding:2px 0;text-decoration:none}

@media print{
  details.hl{break-inside:auto}
  .hrep{break-inside:avoid}
  .hmore{display:none}
}