/* ============================================== English edition (site/i18n.py) -- EN-1 type */
:root{
/* Charter/Sitka/Cambria/Georgia: warm oldstyle text faces, moderate contrast and a generous
   x-height, which is what sits evenly beside Noto Naskh Arabic at 19-20px. */
--font-body:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Noto Naskh Arabic","Noto Naskh Arabic Fallback","Noto Naskh Arabic Fallback SUI","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif;
/* Iowan/Palatino: humanist, calligraphic oldstyle -- the Latin analogue of Amiri. */
--font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,Amiri,"Noto Naskh Arabic","Noto Naskh Arabic Fallback","Geeza Pro",serif;
/* Optima/Candara: humanist sans with a flared stroke, for the labels Reem Kufi inscribes. */
--font-kufi:Optima,Candara,"Gill Sans","Gill Sans MT","Trebuchet MS","Reem Kufi",Amiri,"Noto Naskh Arabic","Noto Naskh Arabic Fallback",sans-serif}

/* ------------------------------------------------------------------------- EN-2 direction
   Everything else in the stylesheet is already a logical property; the breadcrumb separator
   is the one glyph the design draws for one direction only. */
body{direction:ltr}
.Breadcrumbs li+li::before{content:"\203A"}

/* ------------------------------------------------------------------------- EN-3 scripture
   Owner's decision 2026-09-21: the English scripture reads like the Arabic edition's. The
   translation stands where the Arabic stands -- inside the sentence, in the same ink, at the
   weight of the prose around it -- and a click on it reveals the Arabic. Everything down to
   the translation lays out inline; the element is a `div` for validity (a `<details>` may not
   sit inside a `<span>`) and inline for reading. No block, no rule, no italic, no tint panel.
   Contrast on --sheet: --aaya 6.65:1, --hadith 6.52:1, --muted 5.52:1, all AA at body size. */
.aaya,.hadith,details.Original,details.Original>summary,.meaning{display:inline}
/* A closed <details> still lays out its hidden content slot as a block, which broke the line
   after every passage (owner, 2026-09-21: no new line after a verse or hadith). The slot is
   taken out while closed and inline while open; a long original is a block of its own inside.
   ponytail: needs ::details-content (Chrome 131, Safari 18.4, Firefox 143). An older engine
   keeps the line break and works otherwise; spans plus a script would remove it there too. */
details.Original:not([open])::details-content{display:none}
details.Original[open]::details-content{display:inline}
.aaya,.aaya .meaning,.aaya a{color:var(--aaya)}
.hadith,.hadith .meaning,.hadith a{color:var(--hadith)}
.meaning{font-family:var(--font-body);font-weight:inherit;font-style:normal}
/* The verse face is the Arabic edition's display face; the translation is Latin, so the stack
   resolves to the Latin serif and the revealed Arabic to Amiri, out of the one token. */
.aaya{font-family:var(--font-display)}

/* The affordance: a dashed underline in the passage's own ink, at reduced strength so the
   line does not shout, going solid on hover and on focus. Every clickable translation takes
   the same one: the page does not say, passage by passage, whose English it is. */
details.Original>summary{cursor:pointer;list-style:none;text-decoration:underline dashed currentColor 1px;text-underline-offset:4px;text-decoration-thickness:1px}
details.Original>summary::-webkit-details-marker{display:none}
details.Original>summary::marker{content:""}
details.Original>summary:hover{text-decoration-style:solid}
details.Original>summary:focus-visible{text-decoration-style:solid;outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
/* The revealed Arabic: the Arabic face, the passage's ink, isolated so it cannot reorder the
   English on either side of it. A short original follows the translation in the line; a long
   one takes its own line, right-aligned as Arabic is. */
.OriginalText{direction:rtl;unicode-bidi:isolate;font-family:var(--font-body)}
.aaya .OriginalText{font-family:var(--font-display);font-size:1.06em}
.OriginalText.Inline{display:inline;margin-inline-start:.35em}
.OriginalText:not(.Inline){display:block;margin:4px 0;text-align:start}

/* The reference follows the translation in the line, small and muted. */
.ref{font-family:var(--font-body);font-size:.78em;font-weight:500;color:var(--muted);margin-inline-start:.35em}
.ref a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ref a:hover{color:var(--ink)}
.RefMeta::before{content:"\00B7";margin:0 6px}
/* Verse numbers of a multi-verse quote. `sup` already raises them; this only keeps the
   raised digits from opening up the 200% line. */
.VerseNo{font-size:.7em;line-height:0}

/* A span the disclosure could not take -- nested, inside a <p>, or with no translation to be
   the summary -- keeps the always-visible form: Arabic, then the English after it. Same ink,
   so it does not read as a different thing. */
span.aaya,span.hadith{direction:rtl;unicode-bidi:isolate}
span.aaya .meaning,span.hadith .meaning,span.aaya .ref,span.hadith .ref{direction:ltr;unicode-bidi:isolate;margin-inline-start:.35em}
@media (prefers-reduced-motion: no-preference){
details.Original>summary{transition:text-decoration-color 140ms ease}
}

/* ------------------------------------------------------------------------- EN-4 notes
   The disclosure under the byline. */
.EditionLine{margin-top:6px;font-size:15px;line-height:1.7;color:var(--muted)}
.EditionLine a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px}
.EditionLine a:hover{color:var(--ink)}