/* ═══════════════════════════════════════════════════════════════════════════
   THE LAYER TYPE-SYSTEM · 2026-09-11 · reader-accessibility verse view
   One treatment per content layer, applied the SAME way on the reader
   (/surah/N/read), the in-depth analysis (/surah/N/V) and the studies
   (/study/slug), so a reader learns it once.

     ARABIC       source     primary: naskh (Amiri), largest, calm, RTL
     TRANSLIT     guide      subordinate: smaller, muted, italic, tagged
     TRANSLATION  meaning    prominent, readable upright serif
     EDITORIAL    our voice  a SANS face on the warm accent ground, ruled and
                             labelled, so it never reads as the text
     META         labels     small sans, muted

   DIFFERENT BY SEVERAL CHANNELS, NEVER BY COLOUR ALONE. Every pair of layers
   differs in at least two of face, size, style and weight before colour is
   counted, and the editorial layer adds a ground, a rule and a label. A reader
   who cannot tell bronze from ink - or who prints in greyscale - still sees
   four different things. verify/layer_type_gate.py measures this on the served
   pages, in both themes, rather than trusting this comment.

   THE FIVE TRANSLATIONS ARE EQUAL. .L-tr has one size, face, style, weight and
   colour wherever it is used - the lead rendering, the four in a compare fold,
   the verse page's list - and the legacy `.small` step inside the reader's
   compare fold no longer shrinks the other four. Layers differ from each other;
   translations never differ from each other. Context neighbours (.L-compact)
   scale the whole layer down together, all five renderings alike.

   HOW IT WINS WITHOUT EDITING A LEGACY RULE. Loaded last (base.html), and every
   selector is written `:root .L-x.L-x` - specificity (0,3,0), raised the same
   way on every rule - so it beats the per-surface rules it sits over
   (`.editorial .tr.big`, `.rendering .tr.big`, `.rdr-verse .tl-track`) by order
   and weight together. REMOVING THIS FILE AND ITS <link> RETURNS EVERY SURFACE
   TO ITS PRIOR LOOK; no rule in style.css or redesign.css was changed.

   NO COLOUR LITERAL. Every colour is an existing style.css token, which already
   carries both themes (its dark block and :root[data-theme="dark"]), so the
   system follows the theme without a second palette to drift.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --L-ar-size:  clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --L-ar-lh:    2.15;
  --L-tr-size:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --L-tr-lh:    1.65;
  --L-tl-size:  calc(var(--L-tr-size) * .84);
  --L-ed-size:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --L-meta-size:.8125rem;
  --L-compact:  .62;            /* the Arabic of a context neighbour */
  --L-compact-tr:.9;            /* the renderings of a context neighbour */
}

/* ── ARABIC · the source ─────────────────────────────────────────────────── */
:root .L-ar.L-ar{
  font-family:var(--f-arabic); font-size:var(--L-ar-size);
  line-height:var(--L-ar-lh); font-weight:400; font-style:normal;
  color:var(--ink); direction:rtl;
}
:root .L-ar.L-sub{ font-size:calc(var(--L-ar-size) * .72) }
:root .L-ar.L-compact{ font-size:calc(var(--L-ar-size) * var(--L-compact)); line-height:2 }

/* ── TRANSLITERATION · a pronunciation guide ─────────────────────────────── */
:root .L-tl.L-tl{
  font-family:var(--f-body); font-size:var(--L-tl-size); line-height:1.55;
  font-style:italic; font-weight:400; color:var(--ink-soft);
}
:root .L-tl-tag.L-tl-tag{
  display:inline-block; margin:0 0 .15rem;
  font-family:var(--f-sans); font-size:.75rem; line-height:1.3;
  font-style:normal; font-weight:500; letter-spacing:.02em; color:var(--ink-soft);
}
:root .rdr-tl-tag.L-tl-tag{ align-self:center; margin:0 }
/* The scheme key inside a track ("a simplified pronunciation", "DIN 31635") is a
   LABEL, not part of the guide: it keeps the meta treatment rather than
   inheriting the track's serif italic, so the line reads tag, key, guide. */
:root .L-tl .tl-k.tl-k{ font-family:var(--f-sans); font-style:normal; color:var(--ink-soft) }

/* ── TRANSLATION · the meaning, each rendering an equal ──────────────────── */
:root .L-tr.L-tr{
  font-family:var(--f-body); font-size:var(--L-tr-size); line-height:var(--L-tr-lh);
  font-style:normal; font-weight:400; color:var(--ink);
}
:root .L-tr.L-compact{ font-size:calc(var(--L-tr-size) * var(--L-compact-tr)) }
/* A placeholder row is not a rendering, it is a note about one: it takes the
   META treatment, so it cannot be mistaken for a translation or - italic and
   muted - for a transliteration. */
:root .L-tr.placeholder{
  font-family:var(--f-sans); font-size:var(--L-meta-size); font-style:normal;
  color:var(--ink-soft);
}

/* ── EDITORIAL · "In plain words", the platform's own voice ──────────────── */
:root .L-ed.L-ed{
  background:var(--bronze-wash);
  border:0; border-left:4px solid var(--bronze);
  border-radius:var(--r-sm, 3px);
  padding:.9rem 1rem .9rem 1.1rem;
}
:root .L-ed .L-ed-k.L-ed-k{
  font-family:var(--f-sans); font-size:var(--L-meta-size); font-weight:700;
  font-style:normal; letter-spacing:.03em; color:var(--bronze);
  text-decoration:none;
}
/* THE FAINT INK IS RE-POINTED INSIDE THE BLOCK, NOT PATCHED LABEL BY LABEL.
   --ink-faint measures 4.37:1 on this warm ground - under the 4.5 floor for
   12px text - and contrast_gate found it twice, first on the tier tag and then
   on the signature's separator. Redefining the token for the block's subtree
   fixes every faint label inside it, including ones not yet written, and
   --ink-soft is the meta layer's own ink. */
:root .L-ed.L-ed{ --ink-faint:var(--ink-soft) }
:root .L-ed .L-ed-text.L-ed-text{
  font-family:var(--f-sans); font-size:var(--L-ed-size); line-height:1.6;
  font-style:normal; font-weight:400; color:var(--ink);
}

/* ── META · labels, bylines, the surface name ────────────────────────────── */
:root .L-meta.L-meta,
:root .L-meta.L-meta .who,
:root .L-meta.L-meta .when{
  font-family:var(--f-sans); font-size:var(--L-meta-size); font-style:normal;
  font-weight:500; letter-spacing:.01em; color:var(--ink-soft);
}
/* ONE WEIGHT FOR THE WHOLE LAYER. The translator's name is not emphasised over
   the year beside it, and the reader's byline and the verse page's are the same
   label - a weight that varied by surface would be two meta layers. */
:root .vv-eyebrow.L-meta{ margin:0 0 .1rem }

/* ── THE WORDING VERDICT · two states, beside the renderings ─────────────── */
:root .L-verdict.L-verdict{
  font-family:var(--f-sans); font-size:.9375rem; line-height:1.45;
  font-weight:600; font-style:normal; color:var(--ink);
  margin:.35rem 0 .75rem;
}
:root .L-verdict-fold > summary .L-verdict.L-verdict{ margin:0; display:inline }
/* THE VERDICT IS A SENTENCE, NOT A SHORT LABEL, AND THE READER'S FOLD ROW WAS
   BUILT FOR SHORT LABELS. `.rdr-evidence > .rdr-ev` is `flex:0 0 auto` and its
   summary is inline-block, so on a phone the sentence could not wrap and pushed
   the page to 482px at 320 and 390 wide (overflow_gate, 2026-09-11). The fold
   that carries the verdict takes the whole row and its summary wraps; the
   approved "Compare N translations" folds are untouched. */
:root .rdr-evidence > .L-verdict-fold.L-verdict-fold{ flex:1 1 100%; min-width:0 }
:root .L-verdict-fold.L-verdict-fold > summary{ display:block; white-space:normal; max-width:100% }

/* ── ANALYSIS DETAILS · the verse page's one expander for every figure ───── */
.vv-analysis-details > summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem;
  cursor:pointer; list-style:none;
}
.vv-analysis-details > summary::-webkit-details-marker{ display:none }
.vv-analysis-details > summary::before{
  content:"▸"; font-family:var(--f-sans); color:var(--ink-soft); width:1ch;
}
.vv-analysis-details[open] > summary::before{ content:"▾" }
.vv-analysis-details > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.vv-analysis-details > .note,
.vv-analysis-details > .kv,
.vv-analysis-details > .pair-bars{ max-width:var(--measure) }
.vv-analysis-plain{ margin-top:.6rem }

/* ── THE ABSENCE OF AN EDITORIAL NOTE · verse-nav follow-up, 2026-09-11 ─────
   On the overview lens a verse with no plain-words note says so in one line,
   "In plain words — none yet for this verse" ('plain_absent'). Its leading words
   are the editorial layer's own LABEL and take the label treatment, so the reader
   sees the layer's name and then a plain statement that it is empty.

   IT IS NOT AN EDITORIAL BLOCK, SO IT TAKES NO GROUND AND NO RULE. The label
   rule above is scoped to `.L-ed .L-ed-k`, which lives inside the ruled, washed
   block; an absence line inside that block would look like signed content. So
   the label's five declarations are repeated here for `.L-absent`, on the page
   ground. If `.L-ed .L-ed-k` changes, change this with it.

   The sentence after the label is the META layer: sans, meta size, soft ink. The
   two differ in weight and colour, and the label's letter-spacing, so the name
   and the statement never run together as one phrase. */
:root .L-absent .L-ed-k.L-ed-k{
  font-family:var(--f-sans); font-size:var(--L-meta-size); font-weight:700;
  font-style:normal; letter-spacing:.03em; color:var(--bronze);
  text-decoration:none;
}
:root .L-absent.L-absent{
  font-family:var(--f-sans); font-size:var(--L-meta-size); font-style:normal;
  font-weight:500; letter-spacing:.01em; color:var(--ink-soft);
}

/* ── THE INLINE GLOSSARY · release, 2026-09-11 ─────────────────────────────
   A glossary term is the signed word itself, as a button: same face, same size,
   same colour as the sentence around it, marked only by a dotted underline so it
   never reads as an emphasis the editors did not write. Its definition opens as
   a popover card in the editorial treatment - the platform's own voice - and the
   source note under it in meta. Browsers without the popover API never see the
   card or the underline: the sentence stays plain text rather than a control
   that does nothing. */
.gl-term{
  font:inherit; color:inherit; letter-spacing:inherit; background:none; border:0;
  padding:0; margin:0; cursor:help; text-align:inherit;
  text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:.22em;
}
.gl-term:hover{ text-decoration-style:solid }
.gl-term:focus-visible{ outline:2px solid var(--rd-gold, #8a6a2a); outline-offset:2px; border-radius:2px }
.gl-pop{
  box-sizing:border-box; width:min(30rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem);
  margin:auto; padding:1rem 1.125rem 1.05rem; overflow:auto;
  border:1px solid var(--rd-border, #d9cfbd); border-radius:.625rem;
  background:var(--rd-card, #fffdf8); color:var(--rd-ink, #2a241c);
  box-shadow:0 .75rem 2.25rem rgba(20,14,4,.22);
}
.gl-pop::backdrop{ background:rgba(20,14,4,.18) }
.gl-pop p{ margin:0 0 .45rem }
.gl-pop p:last-child{ margin-bottom:0 }
.gl-pop .gl-def{ margin-bottom:.7rem }
@supports not selector(:popover-open){
  .gl-defs{ display:none }
  .gl-term{ cursor:auto; text-decoration:none }
}