/* A267 (seat A3, 462f1c5f) - a page rendered with a chosen language (CLAUDE.md Rule 9b).
   Linked by base.html ONLY when the page carries a chosen language, so an English page never loads it,
   and never loads any font named here. The fonts are in fonts-<script>.css, linked the same way.

   THE TEXT IS NOT TOUCHED. Nothing here transforms, justifies, re-cases or reflows a translator's words:
   the rules choose a typeface, a size and a line height, and draw the note box. */

/* ── TYPEFACES, BY LANGUAGE ────────────────────────────────────────────────
   The serif the site already uses (Source Serif 4) carries Latin and Latin-ext; fonts-cyrillic.css and
   fonts-greek.css add its Cyrillic and Greek subsets under the same family name. The four scripts it has
   no glyphs for get a Noto face first. After the serif: Amiri (the site's own Arabic face, fonts.css) for
   Arabic words quoted inside other languages' notes, then 'A267 Fallback' (fonts-fallback.css) for the 21
   characters nothing else on the page draws - Fulani's hooked letters, Lithuanian combining marks, Greek
   extended, one Ethiopic comma. tests/a267_glyph_coverage.py reads these stacks from this file and proves
   every character of all 18 texts and their notes is drawn by a face the page loads.
   SPECIFICITY: layers.css sets every translation's face with `:root .L-tr.L-tr` (three classes). These rules
   match it (`:root .tr-lang.tr-lang`) and win by loading later, or outrank it with :lang(); a plain
   `.tr-lang:lang(ur)` lost, and the browser check caught it (Urdu computed to Source Serif 4). */
:root { --lang-stack: 'Source Serif 4', 'Amiri', 'A267 Fallback', Georgia, serif; }
:root .tr-lang.tr-lang, :root .tr-note-body.tr-note-body { font-family: 'Source Serif 4', 'Amiri', 'A267 Fallback', Georgia, serif; }
:root .tr-lang.tr-lang:lang(bn), :root .tr-note-body.tr-note-body:lang(bn) { font-family: 'Noto Serif Bengali', var(--lang-stack); }
:root .tr-lang.tr-lang:lang(hi), :root .tr-note-body.tr-note-body:lang(hi) { font-family: 'Noto Serif Devanagari', var(--lang-stack); }
:root .tr-lang.tr-lang:lang(ka), :root .tr-note-body.tr-note-body:lang(ka) { font-family: 'Noto Serif Georgian', var(--lang-stack); }
:root .tr-lang.tr-lang:lang(ur), :root .tr-note-body.tr-note-body:lang(ur) { font-family: 'Noto Naskh Arabic', var(--lang-stack); }

/* ── RIGHT TO LEFT (Urdu) ──────────────────────────────────────────────────
   The paragraph and its note carry dir="rtl" in the markup; the page around them stays left to right.
   `unicode-bidi: isolate` keeps the RTL run from reordering anything outside it; `text-align: start`
   follows the element's own direction. URDU IS SET IN NASKH (Anwar, 2 Oct 2026, A272): Noto Naskh Arabic carries every code
   point of the staged Urdu, the Arabic presentation forms included, where the Nastaliq faces did not; a taller line than
   Latin text still. */
.tr-lang[dir="rtl"], .tr-note-body[dir="rtl"] { unicode-bidi: isolate; text-align: start; }
:root .tr-lang.tr-lang:lang(ur) { font-size: 1.25rem; line-height: 2.1; }
:root .tr-note-body.tr-note-body:lang(ur) { line-height: 2.0; }

/* ── THE NOTE BOX: the translator's note, open, under the verse ────────────
   Its own box, headed "Translator's note" (approved), smaller type, separate from the verse. Never
   collapsed and never behind a tap. `white-space: pre-line` shows the line breaks QuranEnc supplies -
   several notes in one field stay several lines - without altering a character. */
.tr-note {
  margin: .5rem 0 .9rem; padding: .55rem .8rem .65rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper-inset);
  font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}
.tr-note-h {
  margin: 0 0 .25rem; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .02em; color: var(--ink-faint);
}
.tr-note-body { white-space: pre-line; }

/* The marker in the verse text, linked to its note box. Same characters, a quiet link. */
.tr-mark { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.tr-mark:hover, .tr-mark:focus { text-decoration-style: solid; }

/* The "Show English alongside" switch sits with the chooser. */
.rdr-lang-en { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }

/* ── THE READER'S LEAD-LINE ORDERING (board order 540bb98d) ────────────────
   style.css reorders a verse's lines with `order`: Arabic, translation and transliteration take 10/20/30 in some order,
   and the evidence row ("Compare translations") is 40. THE NOTE BOX SITS AFTER EVERYTHING THAT BELONGS TO THE VERSE AND
   ABOVE "Compare translations" (A272 item 3): 35, in every lead state. */
:root .rdr-verse>.tr-note,
:root[data-verse-lead="translation"] .rdr-verse>.tr-note,
:root[data-verse-lead="translit"] .rdr-verse>.tr-note { order: 35; }

/* ── EASY-READ IN THE READER'S SCRIPT (A272, each behind its own switch, default off) ─────────────
   The line is Arabic written in another script (lang="ar-Beng" etc.). It takes that script's face, and it is set upright:
   the faces have no italic, and a slant faked onto Bengali, Devanagari or Georgian reads badly. Cyrillic needs no rule -
   the site serif carries it (fonts-cyrillic.css). */
:root .L-tl.L-tl:lang(ar-Beng) { font-family: 'Noto Serif Bengali', var(--lang-stack); font-style: normal; }
:root .L-tl.L-tl:lang(ar-Deva) { font-family: 'Noto Serif Devanagari', var(--lang-stack); font-style: normal; }
:root .L-tl.L-tl:lang(ar-Geor) { font-family: 'Noto Serif Georgian', var(--lang-stack); font-style: normal; }