@import url("/static/fonts.css");
/* ===========================================================================
The Contextual Qur'an — Design Specification v1, implemented.
/root/DESIGNSPEC.md · 2026-08-24.
A critical edition, not an app. Colour is semantic and never decorative:
each interpretive layer owns one manuscript pigment, everywhere, always.
Fonts are the four self-hosted OFL families already in /static/fonts
(RIGHTS-AUDIT.md Phase 7). The spec's Google Fonts is deliberately
NOT used — this site makes no external request, by standing decision.
The spec anticipates that fallback in its own §2.
=========================================================================== */
/* ── BREAKPOINTS — A CONVENTION ENFORCED BY READING, NOT BY THE CASCADE ─────
CSS custom properties DO NOT RESOLVE INSIDE @media. `@media (min-width:
var(--bp-wide))` is invalid and never matches — it fails silently, which is
worse than failing loudly. So the nine breakpoints below CANNOT be tokens,
and this table is not a token block. It is a list, kept beside :root because
that is where a reader looks for values.
THE RULE THIS TABLE CARRIES: no @media in this stylesheet may use a width
that is not in this list. Nothing enforces that. The cascade cannot; no gate
does today. It holds only for as long as it is read and obeyed, and it is
recorded here as a convention rather than as a guarantee because a rule that
cannot be kept must not be recorded as kept.
max-width : 26rem narrow phone — Arabic lead size steps down
max-width : 52rem below the two-column split
min-width : 30rem morphology grid, 2 columns
min-width : 34rem
min-width : 38rem divergence and account grids, 2 columns
min-width : 40rem apart-pair splits
min-width : 46rem morphology grid, 3 columns
min-width : 48rem
min-width : 64rem the shell becomes a rail-plus-main grid
Element max-widths ARE tokenised (--shell-max, --shell-max-wide) because they
are ordinary declarations, not media conditions. Only the nine above resist.
────────────────────────────────────────────────────────────────────────── */
:root{
/* ground. READING POLISH 2026-09-14 - ONE COLOUR SET. The ground, ink and rule
values are the prototype's, which the Phase 1 shell already painted the page
with, so the panels and the page no longer disagree (reconciliation finding
18). redesign.css now aliases its rd ground, ink and border names to these
tokens instead of carrying its own hex. The pigments and their washes are NOT
prototype values and do not move: F3 ruling 1 made the shipped four the
reserved provenance accents. The DESIGNSPEC originals were F8F5EC, FFFFFF,
F1ECDD, 221D15, 6B6152, 756D61, E3DBC8 and C9BEA4, in this block's order. */
--paper:#F7F6F1; --paper-raised:#FFFEFA; --paper-inset:#EEECE3;
--ink:#17201D; --ink-soft:#585F5A;
/* DESIGNSPEC gives --ink-faint:#9A9080. Measured at 2.89:1 on --paper it
fails even the 3:1 non-text floor, on small meta lines. Darkened on the
same warm cast to 4.68:1 (AA small text) by board decision 2026-08-24. */
--ink-faint:#646A65;
--line:#D9D6CB; --line-strong:#CBC8BD;
/* pigments */
--madder:#A2382B; --lapis:#26468F; --bronze:#7E6021; --verd:#0C6355;
--graphite:#4A4338;
--madder-wash:#F6E9E6; --lapis-wash:#E9EDF7; --bronze-wash:#F3EDDD; --verd-wash:#E4F0EC;
/* type */
--f-display:'Spectral',Georgia,serif;
--f-body:'Source Serif 4','Iowan Old Style',Georgia,serif;
--f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
/* 'Scheherazade New' was struck 2026-08-26: not self-hosted, unfetchable by
standing decision, and shipped by no mainstream OS — a fallback that could
never fire. Naming it implied a safety net that did not exist. See D11. */
--f-arabic:'Amiri',serif;
/* scale (1.25 ratio, 17px base) */
--t-xs:.72rem; --t-sm:.85rem; --t-base:1.0625rem; --t-md:1.33rem;
--t-lg:1.66rem; --t-xl:2.07rem; --t-2xl:2.59rem;
--leading:1.65; --measure:68ch;
--r:6px; --r-lg:10px;
/* divergence bands: paper-inset -> bronze, five steps, ink >= 9:1 on every one */
--band1:#F4F0E3; --band2:#EFE5C9; --band3:#E7D9AE; --band4:#DFCC93; --band5:#D5BE79;
--s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
/* ── ARABIC: THE LOAD-BEARING PAIR ──────────────────────────────────────
Every Arabic size on this site is currently drawn from the LATIN scale,
which is why swapping --f-arabic is a fourteen-place change: at an
identical 42px the rendered line box is 74px in Amiri and 58px in Source
Serif 4, a 51% swing from family alone, and nothing today localises that.
These four tokens are that single place. They are defined as the Latin
values they replace, so today's rendering is byte-identical and NOTHING IS
RE-BASELINED — the decoupling is structural, not visual. When Amiri Quran
is ruled on, the ruling lands here and in --f-arabic, and nowhere else. */
--t-arabic-lead:var(--t-xl); --lh-arabic-lead:2.2;
--t-arabic-body:var(--t-md); --lh-arabic-body:2;
/* ── SANS: UNRULED, AND THEREFORE A TOKEN ───────────────────────────────
Inter vs IBM Plex Sans is with Anwar. NEITHER IS SELF-HOSTED — only Amiri,
Source Serif 4, Spectral and IBM Plex Mono are, and this site makes no
external request by standing decision. So this ships as a system stack
that asks nothing of the network, and his ruling arrives as this value
plus a .woff2 and a licence file beside it. No component rule names a
sans family; they read this token or they get nothing. */
--f-sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
/* ── LAYER HUE: THE MECHANISM ALREADY EXISTS — SEE .layer-* BELOW ───────
layers.hue is CHECK-constrained to madder|lapis|bronze|verd and carries a
NAME, never a hex. The chain is already built and already correct:
ledger layers.hue → class="layer-{hue}" → the .layer-* map below
→ components read var(--hue) / var(--wash)
(That arrow deliberately does not spell the map's declaration out. A
comment in this block that contains a token name followed by a colon is
PARSED AS A DECLARATION by verify/theme_parity_gate.py, which does not
strip comments — see D11b. Writing the example longhand added a phantom
token to the gate's count, which is how D11b was found.)
The four .layer-* rules are the ONLY place a pigment may be named: they
are a name-to-value map, not component rules, and CSS cannot read the
database so the map has to live somewhere. Everything downstream reads
--hue. A palette rewrite is a :root edit; a re-assignment of pigment to
layer is a ledger UPDATE; verify/palette_gate.py resolves --{hue} out of
this block and measures both without being edited.
NO TOKEN IS DEFINED HERE. An earlier pass in this session added
--layer-hue/--layer-wash before checking, which would have been a second
mechanism for a job already done. Removed. --hue is deliberately left
UNDEFINED at :root so that an element outside a .layer-* context has no
hue at all rather than a default one — see D11 for what the var()
fallbacks currently do with that. */
/* ── BORDER WEIGHTS, NAMED BY ROLE ──────────────────────────────────────
73 occurrences of 1px, 22 of 2px, 15 of 3px currently sit in component
rules. The rule weight of a critical edition is a design decision. */
--bw-hair:1px; --bw-rule:2px; --bw-mark:3px;
/* Radii: --r and --r-lg already existed and were bypassed by stray
5/6/7/10px. --r-sm absorbs the small end. */
--r-sm:3px;
/* ── THE SUB-8px BAND ───────────────────────────────────────────────────
--s1 is .5rem, so roughly ninety declarations between .1rem and .45rem sat
below the scale entirely and the scale governed nothing under 8px. */
--s-quarter:.125rem; --s-half:.25rem; --s0:.375rem;
/* Weights, previously implicit. */
--w-body:400; --w-strong:600;
/* Shell widths — ordinary declarations, so these tokenise cleanly. */
--shell-max:1080px; --shell-max-wide:71.25rem;
/* Names the templates already use, kept as aliases so no markup depends on
this file's internal naming. */
--plate:var(--paper-raised); --rule:var(--line); --soft:var(--ink-soft);
--serif:var(--f-body); --display:var(--f-display);
--mono:var(--f-mono); --arabic:var(--f-arabic);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--paper:#161310; --paper-raised:#1F1B16; --paper-inset:#131009;
--ink:#EDE5D6; --ink-soft:#A99E8C; --ink-faint:#7A7161;
--line:#3A342A; --line-strong:#544C3D;
--madder:#E2907F; --lapis:#93ACEC; --bronze:#D3B267; --verd:#5FC3B1;
--graphite:#C9BFAE;
--madder-wash:#2A1B17; --lapis-wash:#171D2C; --bronze-wash:#262013; --verd-wash:#12211D;
--band1:#1B1710; --band2:#241E13; --band3:#2E2617; --band4:#392E1B; --band5:#463820;
}}
:root[data-theme="dark"]{
--paper:#161310; --paper-raised:#1F1B16; --paper-inset:#131009;
/* --ink-faint was #7A7161, which measured 3.84:1 on --paper and 3.56:1 on
--paper-raised — below the 4.5:1 floor for the small meta text it carries.
The light theme was corrected on 2026-08-24 and the dark theme was not
touched in the same pass; D3 records how that survived. Board-approved
value applied 2026-08-25: 4.95:1 and 4.58:1, measured, not assumed. */
--ink:#EDE5D6; --ink-soft:#A99E8C; --ink-faint:#8D8370;
--line:#3A342A; --line-strong:#544C3D;
--madder:#E2907F; --lapis:#93ACEC; --bronze:#D3B267; --verd:#5FC3B1;
--graphite:#C9BFAE;
--madder-wash:#2A1B17; --lapis-wash:#171D2C; --bronze-wash:#262013; --verd-wash:#12211D;
--band1:#1B1710; --band2:#241E13; --band3:#2E2617; --band4:#392E1B; --band5:#463820;
}
/* ── base ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{ background:var(--paper); color:var(--ink);
font:400 var(--t-base)/var(--leading) var(--f-body);
-webkit-font-smoothing:antialiased; margin:0;
text-rendering:optimizeLegibility; }
a{color:var(--lapis);text-underline-offset:.15em}
h1,h2,h3{font-family:var(--f-display);line-height:1.2;text-wrap:balance}
h1{font-size:var(--t-2xl);font-weight:400;letter-spacing:-.015em;margin:0 0 var(--s2)}
h2{font-size:var(--t-md);font-weight:500;margin:var(--s3) 0 var(--s1)}
h3{font-size:var(--t-base);font-weight:600;margin:var(--s2) 0 var(--s1)}
p{margin:.65em 0}
blockquote{margin:var(--s1) 0;max-width:var(--measure)}
strong{font-weight:600}
/* Every prose block caps at the measure; grids and tables do not. */
main p,main li,main dl,main blockquote{max-width:var(--measure)}
/* Focus, everywhere, one rule. */
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px;border-radius:2px}
/* Motion: one rule, opt-in only. A critical edition does not perform. */
@media (prefers-reduced-motion:no-preference){
.card,.vgrid a,.diverge-cell,.morph-tok,.account{
transition:border-color .15s ease,transform .15s ease}
}
/* ── page container ──────────────────────────────────────────────────────── */
main{max-width:1080px;margin:0 auto;
padding:var(--s4) clamp(1rem,4vw,2.5rem) var(--s5)}
main.reading{max-width:calc(var(--measure) + 8rem)}
/* ── masthead: a print running-head, not a toolbar ───────────────────────── */
header.top{background:var(--paper);border-bottom:1px solid var(--line)}
header.top .inner{max-width:1080px;margin:0 auto;
padding:var(--s3) clamp(1rem,4vw,2.5rem) var(--s2)}
/* ── THE BRAND MARK ───────────────────────────────────────────────────────
THE REDUCED WORDMARK, per the pack README: "Use aalamin-logo-reduced-*.svg
in the global masthead." The full lockup was here and came out - at 208px in
a 240px rail its descriptor rendered at 2.4px and its Arabic at 4.8px, which
is a scale failure no larger file can fix.
CLEAR SPACE, DERIVED BY MEASUREMENT. manifest.json defines it as 1A, "one cap
height of the A in the AALAMIN wordmark". Measured off
aalamin-logo-reduced-light.png (1800x340) by scanning the alpha channel: the
first glyph A spans 178px of the 340px-tall image.
1A = 178 / 340 = 0.5235 x the mark's rendered height
Note this is a DIFFERENT ratio from the full lockup's 0.2430, because the
reduced mark is mostly wordmark while the full lockup carries Arabic, a rule
and a descriptor above and below it. A ratio measured on one asset does not
transfer to another, and reusing the old number would have halved the clear
space silently.
At 200px wide the mark is 37.8px tall, its letters ~20px, and clear space is
19.8px a side - 239.6px in a 240px rail. It fits, and it fits exactly. */
.wordmark{display:block;text-decoration:none;color:var(--ink);
/* 196px, not 200. At 200 the rail measured 19.77px of clear space against a
19.77px requirement - passing on a rounding epsilon, which is the same
fragility the runtime assertion was added to catch. 196px leaves ~2.6px of
real slack in a 240px rail and costs 0.4px of cap height. A rule should
pass because it holds, not because the float landed kindly. */
--brand-w:196px; --brand-clear:calc(var(--brand-w) * 0.5235 / 5.2941);
/* The clear space IS this padding. No negative margin by default: pulling the
mark out to align its optical edge with the text below also pulled it past
the container, so the 200px mark overflowed a 192px content box and ate
into the right-hand padding. Measured 24.00px left / 16.00px right against
a 19.77px requirement - a violation the masthead rendered as if correct.
Caught by the runtime assertion in verify/brand_hue_gate.py, which is
exactly the change that assertion exists for. */
padding:var(--brand-clear)}
.brandmark{display:block;width:var(--brand-w);height:auto}
/* The descriptor, LIVE TEXT rather than artwork - see base.html. Authored in
sentence case and presented as caps, so assistive technology and a
copy-paste both receive ordinary case. */
.brand-descriptor{display:block;font-family:var(--f-mono);font-size:.6rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
margin-top:.45rem;line-height:1.4}
.tagline{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-soft);margin-top:.35rem}
nav.main{display:flex;flex-wrap:wrap;gap:.2rem var(--s3);margin-top:var(--s2)}
nav.main a{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
padding-bottom:.15rem;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink);border-bottom-color:var(--bronze)}
footer{border-top:1px solid var(--line);background:var(--paper);margin-top:var(--s5)}
footer .inner{max-width:1080px;margin:0 auto;
padding:var(--s3) clamp(1rem,4vw,2.5rem) var(--s5);
font-size:var(--t-sm);color:var(--ink-soft)}
footer p{max-width:var(--measure)}
/* ── shared apparatus type ───────────────────────────────────────────────── */
.label,.dot-key,.sig,th{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.lede{font-size:var(--t-md);line-height:1.45;color:var(--ink-soft);
margin:0 0 var(--s3);max-width:var(--measure)}
.sep{color:var(--ink-faint);margin:0 .45em}
.mono{font-family:var(--f-mono);font-size:var(--t-sm)}
.nowrap{white-space:nowrap}
.break{overflow-wrap:anywhere}
.crumbs{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
color:var(--ink-faint);margin:0 0 var(--s2)}
.crumbs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.note{font-size:var(--t-sm);line-height:1.55;color:var(--ink-soft);margin:var(--s1) 0}
.derived{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft);font-style:normal}
/* Attribution — rendered only from database rows. */
.attrib{font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.6;
letter-spacing:.01em;text-transform:none;color:var(--ink-soft);margin:var(--s1) 0 0}
.attrib .k{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);
margin-right:.5em}
.attrib a{color:var(--ink-soft)}
/* THE LICENCE NOTICE. white-space:pre-line because the stored text carries its
own line structure — a framing line, then the two lines QUOTED from Tanzil's
copyright block, then the source line — separated by blank lines. Without it
HTML collapses the newlines and "Tanzil Project" runs straight into
"License:", merging two quoted lines into one. Collapsing a quoted notice is
a modification of it, which its own terms forbid.
pre-line and not : the break must live in the stored text, because the
stored text is what the copy_approvals digest is taken over. Markup inserted
around it would let the rendered form drift from the signed form. */
.attrib-notice{font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.6;
color:var(--ink-faint);margin:.25rem 0 0;white-space:pre-line}
.attrib-block{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
/* THE CREDIT SUMMARY. It now carries the author's name as well as the rights
basis, which makes it long enough to wrap - so it is styled in the .attrib
family rather than left at body defaults, and allowed to wrap instead of
being clipped. A truncated name is not an attribution. */
details.attrib-fold>summary{font-family:var(--f-mono);font-size:var(--t-xs);
line-height:1.6;letter-spacing:.01em;color:var(--ink-soft);cursor:pointer;
white-space:normal;overflow-wrap:anywhere}
details.attrib-fold>summary .k{text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-faint);margin-right:.5em}
details.attrib-fold>summary .sep{margin:0 .4em;color:var(--ink-faint)}
.ref{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);margin-top:.4rem}
/* ── plates and panels ───────────────────────────────────────────────────── */
.panel{background:var(--paper-raised);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--s3);margin:var(--s4) 0}
.panel>h2:first-child{margin-top:0}
.panel h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
justify-content:space-between}
/* ── layer identity: one pigment each, everywhere, always ────────────────── */
.layer-madder{--hue:var(--madder);--wash:var(--madder-wash)}
.layer-lapis {--hue:var(--lapis); --wash:var(--lapis-wash)}
.layer-bronze{--hue:var(--bronze);--wash:var(--bronze-wash)}
.layer-verd {--hue:var(--verd); --wash:var(--verd-wash)}
.lname{font-family:var(--f-display);font-weight:500;font-size:var(--t-md);
color:var(--ink)}
.layer .lname{color:var(--hue)}
.tier-tag{float:none;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
/* The pigment rule sits on top: the layer exists even when it holds nothing. */
.panel.layer{border-top:3px solid var(--hue,var(--line-strong))}
/* ── F3 · THE SIX EVIDENCE LABELS, AND THE STATE MARKERS SPLIT FROM THEM ─────
Board rulings 1-5 on design/F3-RECON-AND-PROPOSAL-01.md. A .tier-tag now
carries exactly one of six classes and one of six governed strings; the
templates reach it only through the tier macros in _framing.html, and
verify/evidence_label_gate.py closes the vocabulary at six.
Source fact .t-source lapis
Traditional literature .t-tradlit madder
Academic history .t-academic bronze
Metadata .t-metadata verd
Derived .t-derived unhued (ink-soft)
Editorial .t-editorial unhued (ink-soft)
The four pigments mark PROVENANCE, NEVER JUDGEMENT, so nothing else in this
block names one: not the state markers, not the CARE/GATED tag treatment,
not the featured band. The unhued pair takes ink-soft rather than the bare
tag's ink-faint because ink-faint falls below 4.5:1 on paper-inset.
A BARE .tier-tag (no t- class) KEEPS ITS OLD INK-FAINT, deliberately: /ask
still carries five of them and is the bands-cleanup lane's page, not this
one's, so its rendering must not move. The selectors repeat the
.panel > h2 context because that older rule outranks a bare class. */
.tier-tag.t-source,.panel > h2 .tier-tag.t-source{color:var(--lapis)}
.tier-tag.t-tradlit,.panel > h2 .tier-tag.t-tradlit{color:var(--madder)}
.tier-tag.t-academic,.panel > h2 .tier-tag.t-academic{color:var(--bronze)}
.tier-tag.t-metadata,.panel > h2 .tier-tag.t-metadata{color:var(--verd)}
.tier-tag.t-derived,.panel > h2 .tier-tag.t-derived,
.tier-tag.t-editorial,.panel > h2 .tier-tag.t-editorial{color:var(--ink-soft)}
/* State and relationship markers - method, scope, unsigned, signed with it and
the rest. Same type as a tier label, and NO ACCENT AT ALL. */
.state-tag{float:none;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.panel > h2 .state-tag{margin-left:auto}
.zone-c>.panel .state-tag{display:block;margin-top:.15rem}
/* The legend on /how-to-read: the four in use, then the two the site does not
carry (board ruling (a)). An absent tier is MUTED: its accent would say the
material is here. The selector outranks .tier-tag.t-tradlit / .t-academic. */
.label-legend{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(13rem,100%),1fr));gap:.4rem 1rem}
.label-legend-h{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:400;
letter-spacing:.14em;font-variant-caps:all-small-caps;color:var(--ink-soft);
margin:var(--s4) 0 var(--s1)} /* no rule: a line-strong rule measured 1.84:1 */
.label-legend .tier-tag.tier-absent{color:var(--ink-soft)}
/* Taxonomy tags (schema/047) on /studies and /study. A CARE or GATED tag is
told apart by a dashed outline - SHAPE, not colour, and never a pigment. An
untiered tag arrives here already resolved to CARE (reader._read_tag_map). */
.ftags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.ftag{display:inline-block;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.02em;line-height:1.35;color:var(--ink-soft);
background:var(--paper-raised);border:1px solid var(--line-strong);
border-radius:var(--r-sm);padding:.16rem .5rem}
.ftag[data-tier="CARE"],.ftag[data-tier="GATED"]{border-style:dashed;
border-color:var(--ink-soft)}
.ftag[data-tier="GATED"]{border-width:2px}
.rd-status .ftags{margin:0}
/* /studies: the standing review-status line, and the featured band. */
.review-standing{max-width:none;margin:var(--s2) 0 var(--s3);padding:.55rem .8rem;
background:var(--paper-raised);border:1px solid var(--line);
border-left:3px solid var(--ink-soft);font-size:var(--t-sm);color:var(--ink)}
.featured{margin:var(--s3) 0 var(--s5,3rem);padding:var(--s3);
background:var(--paper-raised);border:1px solid var(--line);
border-top:3px solid var(--ink-soft);border-radius:var(--r-lg)}
.featured-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;
margin:0 0 var(--s1)}
.featured-head h2{margin:0}
.featured-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft);
font-variant-numeric:tabular-nums}
.featured-note{max-width:none;margin:0 0 var(--s2);color:var(--ink-soft);
font-size:var(--t-sm)}
.featured-list{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:1px;
background:var(--line);border:1px solid var(--line)}
.featured-list li{background:var(--paper-raised);min-width:0}
.featured-list a{display:block;height:100%;padding:.65rem .8rem;text-decoration:none;
color:var(--ink);font-size:var(--t-sm);line-height:1.35;overflow-wrap:anywhere}
.featured-list a:hover{background:var(--paper)}
.featured-list a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.studies-rest-h{margin:var(--s4) 0 var(--s2)}
/* ── Arabic ──────────────────────────────────────────────────────────────── */
.ar{font-family:var(--f-arabic);font-size:var(--t-md);line-height:2;
margin:var(--s1) 0;font-style:normal;font-weight:400}
.ar.big{font-size:var(--t-xl);line-height:2.2;text-align:center;margin:var(--s3) 0}
.tr{font-size:var(--t-base);margin:var(--s1) 0}
.tr.big{font-size:var(--t-md);line-height:1.5}
.byline{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
color:var(--ink-soft);margin:.2rem 0 var(--s2)}
/* ── empty states: one pattern everywhere ────────────────────────────────── */
.empty{font-style:italic;color:var(--ink-soft);margin:var(--s1) 0}
/* D11c, fixed 2026-08-26 by Anwar's ruling. These fallbacks were
var(--hue,var(--bronze)) and var(--hue,var(--lapis)) — an unhued element
rendered in ANOTHER LAYER'S PIGMENT. Colour is semantic here, so that is a
false claim of layer membership, not a cosmetic default. It was LIVE: five
rights notices on /canon wore the academic-historical bronze, on the one
page whose job is provenance. NEVER fall back to a pigment. Absence of hue
is absence of layer membership, so an unhued element reads as unclassified —
neutral rule, neutral ink. */
.blocked{font-family:var(--f-body);font-size:var(--t-sm);line-height:1.6;
background:var(--paper-inset);border-left:3px solid var(--hue,var(--line-strong));
border-radius:0 var(--r) var(--r) 0;padding:var(--s2) var(--s3);
margin:var(--s2) 0;max-width:var(--measure);color:var(--ink-soft)}
.badge{display:inline-block;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;
border:1px solid currentColor;border-radius:3px;margin-right:.6em;
background:transparent}
.badge.rights,.badge.closed,.badge.fault{color:var(--madder)}
.badge.planned,.badge.pending{color:var(--bronze)}
.badge.cleared{color:var(--verd)}
/* A superseded request is closed but NOT refused: it takes the neutral grey,
not the madder that .closed carries, because red would read as a refusal and
nothing was refused. */
.badge.unresolved,.badge.superseded{color:var(--ink-soft)}
/* D4's two states, signed 2026-08-25. A gap is an absence and takes the colour
the site gives a blocked layer; a shared row is a fact about a printing and
takes the apparatus colour, because nothing is missing there. */
.badge.nogap{color:var(--madder)}
.badge.shares{color:var(--bronze)}
/* ── Staged, unapproved: the reading release ──────────────────────────────
Every rule here styles a string that Anwar has not approved. It renders only
under PENDING_COPY=1, for screenshots, and never in the deployment. */
.big-phrase{font-size:var(--t-md);color:var(--ink);line-height:1.45;
margin:0 0 var(--s1)}
details.measure>summary{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
cursor:pointer}
details.measure>summary:hover{color:var(--ink-soft)}
details.measure[open]>summary{margin-bottom:var(--s1)}
details.measure.inline{display:inline-block;margin-left:.4em}
/* The lead-rendering chooser and the sparse margin signals. */
.toggle.leads{margin:0 0 var(--s3);align-items:baseline;flex-wrap:wrap}
.toggle.leads .lead-prompt{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
padding:.35rem .7rem;border-right:1px solid var(--line-strong)}
.signals{display:flex;flex-wrap:wrap;gap:.4rem .8rem;margin:.2rem 0 .4rem}
.sig-mark,.sig-mark>summary{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;text-decoration:none;cursor:pointer}
a.sig-mark{border-bottom:1px solid var(--line-strong);color:var(--ink-soft)}
a.sig-mark:hover{color:var(--ink);border-bottom-color:var(--bronze)}
.sig-mark.diverge>summary{color:var(--lapis)}
.sig-mark.plain{color:var(--verd)}
.sig-mark.study{color:var(--bronze)}
.sig-mark.diverge .tr.small{font-size:var(--t-sm);margin:.3rem 0;
max-width:var(--measure)}
.sig-mark.diverge .who{font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);margin-right:.5em}
details.others>summary{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
cursor:pointer;margin-top:var(--s1)}
details.others[open]{border-left:1px solid var(--line);padding-left:var(--s2);
margin-top:var(--s1)}
/* ── The front door ───────────────────────────────────────────────────────── */
/* One signed statement. Wider leading than the apparatus pages carry, because
this is the only page on the site that is read straight through. */
.statement{max-width:var(--measure);margin:0 0 var(--s4)}
.statement p{margin:0 0 var(--s2);line-height:1.72}
.statement p.lede{font-size:var(--t-md);color:var(--ink);line-height:1.5}
.first-tap{margin:calc(-1 * var(--s2)) 0 var(--s3)}
.first-tap a{border-bottom:1px solid var(--line-strong);text-decoration:none}
table.probes td{vertical-align:top;padding:var(--s1) var(--s2) var(--s1) 0}
table.probes .mono{color:var(--ink-soft);word-break:break-word}
.sig-panel{margin-top:var(--s3)}
/* ── Library ─────────────────────────────────────────────────────────────── */
.toggle{display:inline-flex;border:1px solid var(--line-strong);
border-radius:var(--r);overflow:hidden;margin:0 0 var(--s3);
background:transparent}
.toggle a{padding:.4rem .9rem;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
color:var(--ink-soft);border-right:1px solid var(--line)}
.toggle a:last-child{border-right:0}
.toggle a:hover{color:var(--ink)}
.toggle a[aria-current]{background:var(--paper-inset);color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line-strong)}
.dot-key{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 var(--s2);
text-transform:none;letter-spacing:0}
.dot-key span{display:inline-flex;align-items:center;gap:.45rem;
font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
color:var(--ink-soft);padding-bottom:.35rem;
border-bottom:2px solid var(--hue,var(--line-strong))}
.dot-key span span{border-bottom:0;padding-bottom:0}
/* The honesty paragraph under the legend is an apparatus note. */
.dot-key + .note{background:var(--paper-inset);border-left:3px solid var(--bronze);
border-radius:0 var(--r) var(--r) 0;padding:var(--s2) var(--s3);
margin:0 0 var(--s4);max-width:var(--measure)}
.dots{display:flex;gap:.4rem;margin-top:var(--s2)}
.dot{width:10px;height:10px;border-radius:50%;
border:1.5px solid var(--hue);background:transparent;flex:none}
.dot.filled{background:var(--hue)}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3);
grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cards li{max-width:none}
.card{background:var(--paper-raised);border:1px solid var(--line);
border-radius:var(--r-lg)}
.card a{display:block;padding:var(--s3);text-decoration:none;color:inherit;
border-radius:var(--r-lg);height:100%}
.card:hover{border-color:var(--line-strong)}
.card .top-row{display:flex;align-items:baseline;gap:.6rem}
.card .n{order:-1;font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);flex:none}
.card .tn{font-family:var(--f-display);font-weight:500;font-size:var(--t-md);
color:var(--ink)}
.card .ar{margin:0 0 0 auto;font-size:var(--t-lg);line-height:1.4;color:var(--ink);
text-align:right}
.card .meta{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
color:var(--ink-faint);margin-top:.45rem;max-width:none}
.card .meta .sep{color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
.card:hover{transform:translateY(-1px)}
}
/* The index page's plain list: same identity, no card chrome. */
.surah-list{list-style:none;padding:0;margin:var(--s3) 0}
.surah-list li{border-bottom:1px solid var(--line);max-width:none}
.surah-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;
padding:var(--s2) 0;text-decoration:none;color:inherit}
.surah-list .num{font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);min-width:2.5ch}
.surah-list .names{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.surah-list .tn{font-family:var(--f-display);font-size:var(--t-base)}
.surah-list .meta{font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);margin-left:auto}
.surah-list a:hover{background:var(--paper-inset)}
/* ── Sūrah page ──────────────────────────────────────────────────────────── */
.surah-head{margin-bottom:var(--s4)}
.surah-head h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.surah-head .num{font-family:var(--f-mono);font-size:var(--t-sm);
color:var(--ink-faint);font-weight:400}
.surah-head .ar{font-size:var(--t-2xl);line-height:1.6;margin:0}
.surah-head .sub{font-family:var(--f-display);font-size:var(--t-md);
color:var(--ink);margin:0}
.surah-head .meta{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;color:var(--ink-faint);margin:.3rem 0 0}
.verse{border-bottom:1px solid var(--line);padding:var(--s3) var(--s2)}
.verse:hover{background:var(--paper-inset)}
.verse .vnum,.sig{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;color:var(--ink-faint);text-decoration:none}
.verse .vnum:hover{color:var(--ink)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));
gap:.4rem;margin:var(--s3) 0}
.vgrid a{display:flex;align-items:center;justify-content:center;
padding:.55rem .2rem;font-family:var(--f-mono);font-size:var(--t-xs);
text-decoration:none;color:var(--ink);background:var(--paper-raised);
border:1px solid var(--line);border-radius:var(--r)}
.vgrid a:hover{border-color:var(--line-strong);background:var(--paper-inset)}
.vgrid a.d0{color:var(--ink-faint)}
/* ── Verse study ─────────────────────────────────────────────────────────── */
.vtitle{font-family:var(--f-mono);font-size:var(--t-md);font-weight:400;
letter-spacing:.1em;color:var(--ink-soft);margin-bottom:var(--s3)}
.plate{padding:var(--s4) var(--s3)}
.plate .ar.bism{font-size:var(--t-lg);line-height:2;text-align:center;
color:var(--ink-soft);margin:0 0 var(--s1);border-bottom:0;padding:0}
.plate .ar.bism + .note{text-align:center;font-family:var(--f-mono);
font-size:var(--t-xs);color:var(--ink-faint);margin:0 auto var(--s3);
padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
/* In plain words — the signature is a feature; give it air. */
.editorial{background:var(--paper-inset);border:1px solid var(--line);
border-left:3px solid var(--verd)}
.editorial .lname{color:var(--verd);font-family:var(--f-mono);
font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
.ed-warning{font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.6;
letter-spacing:.02em;text-transform:none;color:var(--ink-soft);
margin:0 0 var(--s2);max-width:var(--measure)}
.editorial .tr.big{font-family:var(--f-body);font-size:var(--t-md);
line-height:1.5;color:var(--ink);margin:0 0 var(--s2)}
.editorial .byline{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;color:var(--ink-soft);margin:0;white-space:normal}
/* Translations, side by side. */
.rendering{border-top:1px solid var(--line);padding:var(--s3) 0}
.rendering:first-of-type{border-top:0;padding-top:var(--s1)}
/* A rendering that is not there. It keeps the slot, so the reader sees the
name and the absence in the place the words would have been, and the text
sits at reading colour rather than whispering in faint grey. */
.rendering.absent .note{color:var(--ink-soft);max-width:var(--measure)}
.tr.placeholder,.rend-note.placeholder{color:var(--ink-soft);font-style:italic}
.rend-note.placeholder{background:var(--madder-wash);border-left-color:var(--madder)}
.rend-note{background:var(--bronze-wash);border-left:3px solid var(--bronze);
border-radius:0 var(--r) var(--r) 0;padding:var(--s2);margin:0 0 var(--s2);
font-size:var(--t-sm);max-width:var(--measure)}
.rend-head{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline}
.rend-head .who{font-family:var(--f-display);font-weight:500;font-size:var(--t-base)}
.rend-head .when{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.04em;color:var(--ink-faint)}
.purpose{background:var(--bronze-wash);border-left:3px solid var(--bronze);
border-radius:0 var(--r) var(--r) 0;padding:var(--s2) var(--s3);
margin:var(--s2) 0;max-width:var(--measure)}
.purpose blockquote{margin:.3rem 0;font-style:italic}
.purpose .k{margin:0;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.diverge-grid{display:grid;gap:var(--s2);grid-template-columns:1fr;
margin:var(--s3) 0}
@media(min-width:38rem){.diverge-grid{grid-template-columns:1fr 1fr}}
.diverge-cell{border:1px solid var(--line);border-radius:var(--r);
padding:var(--s2);background:var(--paper-inset);max-width:none}
.diverge-cell:hover{border-color:var(--line-strong)}
.diverge-cell .tr{font-size:var(--t-sm);margin:.2rem 0 0}
.diverge-cell .byline{margin:0 0 .3rem}
/* Accounts differ: siblings, never ranked. */
.account-grid{display:grid;gap:var(--s2);grid-template-columns:1fr;margin:var(--s2) 0}
@media(min-width:38rem){.account-grid{grid-template-columns:1fr 1fr}}
.account{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
background:var(--paper-raised);max-width:none}
.account blockquote{margin:.4rem 0;padding-left:var(--s2);
border-left:2px solid var(--line-strong)}
/* Coverage bars */
.bar{position:relative;height:.7rem;background:var(--paper-inset);
border:1px solid var(--line);border-radius:4px;overflow:hidden;
margin:var(--s1) 0;max-width:var(--measure)}
.bar .fill{position:absolute;inset:0 auto 0 0;background:var(--hue,var(--ink-soft))}
.bar.unknown{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px)}
.cov-row{margin:var(--s3) 0}
.cov-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.cov-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft)}
/* ── tables: row hairlines only, generous cells ──────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);
margin:var(--s2) 0}
th{text-align:left;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
border-bottom:1px solid var(--line-strong);padding:.5rem .7rem .4rem;
white-space:nowrap}
td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:var(--paper-inset)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
dl.kv{display:grid;grid-template-columns:11rem 1fr;gap:.35rem var(--s2);
font-size:var(--t-sm);margin:var(--s2) 0;max-width:var(--measure)}
dl.kv dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-soft);padding-top:.15rem}
dl.kv dd{margin:0;color:var(--ink)}
/* ── the source drawer: native , styled, never scripted ─────────── */
details.drawer,details.variant{margin:var(--s2) 0;border:1px solid var(--line);
border-radius:var(--r);background:var(--paper-inset)}
details.drawer>summary,details.variant>summary{cursor:pointer;
padding:.55rem var(--s2);font-family:var(--f-mono);font-size:var(--t-sm);
color:var(--ink-soft);letter-spacing:.02em;list-style:none}
details.drawer>summary::-webkit-details-marker,
details.variant>summary::-webkit-details-marker{display:none}
details.drawer>summary::before,details.variant>summary::before{
content:"\25B8";display:inline-block;margin-right:.6em;color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
details.drawer>summary::before,details.variant>summary::before{
transition:transform .15s ease}
}
details.drawer[open]>summary::before,details.variant[open]>summary::before{
transform:rotate(90deg)}
details.drawer>summary:hover,details.variant>summary:hover{color:var(--ink)}
details.drawer[open]>summary,details.variant[open]>summary{
border-bottom:1px solid var(--line)}
details.drawer dl.kv,details.drawer .note{padding:0 var(--s2)}
details.drawer dl.kv{padding-top:var(--s2)}
details.drawer .note:last-child{padding-bottom:var(--s2)}
details.variant .ar,details.variant .attrib{padding:0 var(--s2)}
details.variant .ar{margin-top:var(--s2)}
details.variant .attrib{padding-bottom:var(--s2)}
/* ── Language card: candidates, never ranked ─────────────────────────────── */
.morph-grid{display:grid;gap:var(--s2);grid-template-columns:1fr;margin:var(--s2) 0}
@media(min-width:30rem){.morph-grid{grid-template-columns:1fr 1fr}}
@media(min-width:46rem){.morph-grid{grid-template-columns:1fr 1fr 1fr}}
.morph-tok{border:1px solid var(--line);border-radius:var(--r);
padding:var(--s2);background:var(--paper-inset);max-width:none}
.morph-tok:hover{border-color:var(--line-strong)}
.morph-tok.unmatched{border-style:dashed}
.morph-tok .ar.tok{font-size:var(--t-lg);line-height:1.8;margin:0 0 var(--s1);
border-bottom:1px solid var(--line);padding-bottom:.3rem;text-align:right}
.morph-tok .an{font-size:var(--t-sm);line-height:1.5;margin:.3rem 0;
padding-left:.6rem;border-left:2px solid var(--verd);max-width:none}
.morph-tok .pos{font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.08em;color:var(--verd);margin-right:.45em}
.morph-tok .root{font-family:var(--f-arabic);font-size:var(--t-base);margin-right:.45em}
/* An absent root is an outcome, not a root. It takes the interface face rather
than the Arabic one, sits at the faint ink the other empty states use, and is
never mistaken for a value: nothing here is right-to-left, because there is no
Arabic in it. */
.morph-tok .root.absent{font-family:var(--f-body);font-size:var(--t-xs);
color:var(--ink-faint);font-style:italic}
.morph-tok .gloss{color:var(--ink-soft)}
.empty.small,.note.small{font-size:var(--t-xs);margin:.25rem 0}
/* ── pager ───────────────────────────────────────────────────────────────── */
.pager{display:flex;justify-content:space-between;gap:var(--s2);
margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em}
.pager .next{margin-left:auto}
.pager a{color:var(--ink-soft);text-decoration:none}
.pager a:hover{color:var(--ink)}
/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:26rem){
h1{font-size:var(--t-xl)}
.ar.big{font-size:var(--t-lg)}
.surah-head .ar{font-size:var(--t-xl)}
.cards{grid-template-columns:1fr}
dl.kv{grid-template-columns:1fr}
dl.kv dt{margin-top:var(--s1)}
.plate{padding:var(--s3) var(--s2)}
.panel{padding:var(--s2)}
}
/* Reading rows carry the full verse: Arabic at reading size, not label size.
DESIGNSPEC §5 names --t-md here; §9 sets a 1.35x floor over the Latin
context, which --t-md (1.25x) misses. The floor wins and the deviation is
filed in design/DEVIATIONS.md. */
.verse .ar{font-size:var(--t-lg);line-height:2.1;margin:var(--s2) 0}
.verse .tr{margin:.3rem 0 0}
.verse .byline{margin:.15rem 0 0}
.verse .empty{font-size:var(--t-sm)}
/* Grid items default to min-width:auto, so one unbreakable string (a gloss
like "favor;grace;mann_(weight_measure)") widens its column and pushes the
whole grid past the container. Measured at 768px: scrollWidth 905 > 768.
Grid children get min-width:0 and long tokens wrap. */
.cards li,.morph-tok,.diverge-cell,.account,.morph-tok .an{min-width:0}
.morph-tok .gloss,.morph-tok .an{overflow-wrap:anywhere}
/* ═══════════════════════════════════════════════════════════════════════════
TRANCHE 2 — divergence as a first-class signal, and the pages that use it.
Every number these components show is read from verse_divergence, derived
by ingest/derive_divergence.py and gated by verify/divergence_gate.py.
═══════════════════════════════════════════════════════════════════════════ */
/* ── the facts panel ─────────────────────────────────────────────────────── */
.facts .fact-grid{display:grid;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
gap:var(--s2) var(--s3);margin:var(--s2) 0 var(--s3);max-width:none}
.facts .fact{min-width:0;padding-bottom:var(--s1);
border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.facts dd{margin:0;font-size:var(--t-base);color:var(--ink)}
.fact-caveat{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);letter-spacing:.02em;margin-top:.1rem}
/* An inline letter-cluster must not wrap: inside a grid cell with min-width:0
an inline-block shrinks to its minimum content width and breaks the cluster
one glyph per line. Measured at 17px wide before this rule. */
.ar.inline{font-size:var(--t-md);line-height:1.3;margin:0;display:inline-block;
vertical-align:-.1em;white-space:nowrap}
.provenance{font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.7;
color:var(--ink-faint);letter-spacing:.01em;margin:0;padding-top:var(--s2);
border-top:1px solid var(--line);max-width:var(--measure)}
/* Amiri renders the disconnected letters as a stacked Quranic ligature —
alif-lam-mim sits as one mark, not three side-by-side letters. That is the
font doing the right thing, so it is left alone and given room instead. */
.facts .fact .ar.inline{font-size:var(--t-xl);line-height:1.7}
.card-derived .ar.inline{font-size:var(--t-md);line-height:1.6}
.facts dd{margin-top:.15rem}
/* ── "where the translators pull apart" ──────────────────────────────────── */
.apart{border-top:1px solid var(--line);padding:var(--s3) 0;max-width:none}
.apart:first-of-type{border-top:0}
.apart-list{list-style:none;padding:0;margin:var(--s3) 0}
.apart-list .apart{max-width:none}
.apart-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem var(--s2);
margin-bottom:var(--s1)}
.apart-verse{font-family:var(--f-mono);font-size:var(--t-md);letter-spacing:.06em;
color:var(--ink);text-decoration:none;border-bottom:2px solid var(--lapis)}
.apart-verse:hover{color:var(--lapis)}
.apart-surah{font-family:var(--f-display);font-size:var(--t-base);color:var(--ink-soft)}
.apart-score{margin-left:auto;font-size:var(--t-md);color:var(--ink)}
.apart-band{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-faint)}
.apart-pair{display:grid;gap:var(--s2);grid-template-columns:1fr;margin:var(--s1) 0}
@media(min-width:40rem){.apart-pair{grid-template-columns:1fr 1fr;gap:var(--s3)}}
.apart-side{min-width:0}
.apart-side blockquote{margin:.2rem 0 0;padding-left:var(--s2);
border-left:2px solid var(--line-strong);font-size:var(--t-sm);
line-height:1.6;max-width:none}
.apart-side .byline{margin:0}
/* ── the verse index as a heat map ───────────────────────────────────────── */
.vgrid.heat a{border-color:var(--line)}
.vgrid a.b0{background:var(--paper-raised);color:var(--ink-faint)}
/* two wording states (2026-09-11): a shaded cell is a verse above the derived cut.
A STATE INDICATOR, so its fill must reach 3:1 on the ground (WCAG 1.4.11) - the
quintile fills it replaces did not (band5 1.69:1). F3 RULING 2 (2026-09-12) moved
the fill off lapis: lapis is now Source fact's provenance accent, and the verdict
is derived, so it takes the unhued --graphite (light 8.96:1 on paper, figures
9.76:1; dark 10.18:1 on paper, figures 9.41:1). Selectors carry .heat so they
outrank the medallion rules below. */
.vgrid.heat a.wd{background:var(--graphite);color:var(--paper-raised);border-color:var(--graphite);
outline-color:var(--ink)} /* the focus ring must not inherit the white figures (1.08:1) */
.vgrid.heat a.wd:hover{background:var(--graphite);color:var(--paper-raised);border-color:var(--ink)}
.scale-key span.wd{width:2.2rem;height:.7rem;border:1px solid var(--graphite);
display:inline-block;background:var(--graphite)}
.vgrid.heat a:hover{border-color:var(--ink);background:var(--paper-raised)}
.scale-key{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint);
margin:0 0 var(--s4);max-width:none}
.scale-key span[class^="b"]{width:2.2rem;height:.7rem;border:1px solid var(--line);
display:inline-block}
.scale-label{margin-left:.6rem}
.scale-label.right{margin-left:auto}
.swatch{display:inline-block;width:1.6rem;height:.7rem;border:1px solid var(--line);
vertical-align:-.05em;margin-right:.4em}
/* ── library: the derived line on each card, and the second way in ───────── */
.card-derived{font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.7;
color:var(--ink-soft);margin-top:.5rem;padding-top:.5rem;
border-top:1px solid var(--line)}
.cd-item{display:block}
.cd-item .ar.inline{font-size:var(--t-base)}
.ways-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem var(--s2);
margin:0 0 var(--s3);max-width:var(--measure)}
.ways-in a{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;color:var(--lapis);
border-bottom:2px solid var(--lapis);padding-bottom:.15rem}
.ways-in .note{margin:0;flex:1 1 20ch}
/* ── verse study: translations as stacked rows with a mono gutter ────────── */
@media (min-width:40rem){
.rendering{display:grid;grid-template-columns:16ch 1fr;column-gap:var(--s3)}
.rend-head{display:block;padding-top:.15rem}
.rendering>*:not(.rend-head){grid-column:2}
}
.rend-head .who{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
font-weight:400;letter-spacing:.06em;line-height:1.5;color:var(--ink)}
.rend-head .when{display:block;color:var(--ink-faint)}
.rendering .tr.big{font-family:var(--f-body);font-size:var(--t-base);
line-height:var(--leading);margin:0 0 var(--s1);max-width:var(--measure)}
/* ── verse study: one bar per pair ───────────────────────────────────────── */
.pair-bars{display:grid;gap:.45rem;margin:var(--s2) 0 var(--s1);max-width:var(--measure)}
.pair-row{display:grid;grid-template-columns:1fr;gap:.15rem;align-items:center}
@media(min-width:34rem){
.pair-row{grid-template-columns:22ch 1fr 4ch;gap:var(--s2)}
}
.pair-who{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft);
letter-spacing:.02em;overflow-wrap:anywhere}
.pair-track{display:block;height:.55rem;background:var(--paper-inset);
border:1px solid var(--line);border-radius:3px;overflow:hidden}
.pair-fill{display:block;height:100%;background:var(--lapis);opacity:.85}
.pair-n{font-size:var(--t-xs);color:var(--ink-soft);text-align:right}
/* ── verse study: the title bar carries navigation at the top too ────────── */
.verse-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
margin-bottom:var(--s3)}
.verse-bar .vtitle{margin:0}
.pager.top{margin:0 0 0 auto;padding:0;border-top:0;gap:var(--s3)}
details.drawer.tokens{background:transparent;border:0;margin:.25rem 0 0}
details.drawer.tokens>summary{padding:.2rem 0;font-size:var(--t-xs);
letter-spacing:.04em}
details.drawer.tokens .an{margin-left:.2rem}
/* ═══════════════════════════════════════════════════════════════════════════
TRANCHE 3 — the screen. Geometry only: not one word moves in the DOM, so
the rendered text is byte-identical to tranche 2. Everything below is
placement, size, grouping and disclosure state.
═══════════════════════════════════════════════════════════════════════════ */
/* ── the frame: rail + content, from 1024 up ─────────────────────────────── */
@media (min-width:64rem){
body{display:grid;
grid-template-columns:15rem minmax(0,1fr);
grid-template-areas:"rail main" "rail foot";
align-items:start}
header.top{grid-area:rail;position:relative;height:100%;
border-bottom:0;border-right:1px solid var(--line);
background:var(--paper)}
/* No sticky anything this tranche (spec §4): the rail is a column, not a
floating chrome, and position:sticky with RTL content is a surprise
nobody asked for. */
header.top .inner{display:flex;flex-direction:column;gap:var(--s3);
max-width:none;margin:0;padding:var(--s4) var(--s3);min-height:100vh}
/* THE RAIL IS THE TIGHT CASE. 200px + 2x19.77px clear space is 239.6px in a
240px rail: derived, not lucky, and the margin is 0.4px. The mark's padded
box therefore has to use the rail's full width, so it is pulled out by
exactly the rail's own horizontal padding token - not by a hard-coded
figure, which would silently decouple if that padding ever changed.
verify/brand_hue_gate.py measures the actual space either side in a browser
and goes red if it drops under 1A, because a rule satisfied by 0.4px is a
rule an unrelated change will break while everything still looks right. */
.wordmark{margin-inline:calc(var(--s3) * -1)}
/* The epigraph belongs at the rail foot. Order only — the DOM is untouched,
and it is two lines inside one header, so reading order barely moves. */
.tagline{order:3;margin-top:auto;padding-top:var(--s3);
border-top:1px solid var(--line);line-height:1.6}
nav.main{order:2;flex-direction:column;gap:.1rem;margin:0}
nav.main a{padding:.3rem 0;border-bottom-width:0;border-left:2px solid transparent;
padding-left:.7rem;margin-left:-.7rem}
nav.main a[aria-current]{border-bottom-color:transparent;
border-left-color:var(--bronze)}
main{grid-area:main;max-width:71.25rem;
padding:var(--s4) var(--s4) var(--s5);margin:0}
main.reading{max-width:71.25rem}
footer{grid-area:foot;margin-top:0;border-top:1px solid var(--line)}
footer .inner{max-width:71.25rem;margin:0;padding:var(--s3) var(--s4) var(--s4)}
/* Density: an instrument, not a brochure. */
.panel{padding:var(--s3) var(--s3);margin:var(--s3) 0}
.plate{padding:var(--s5) var(--s4)}
}
/* ── zone A · verse study: the plate, and a locator beside it ───────────── */
@media (min-width:64rem){
.zone-a{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:var(--s3);align-items:start}
.zone-a>.plate{grid-column:1;grid-row:1;margin-top:0}
.zone-a>.locator{grid-column:2;grid-row:1;background:var(--paper-raised);
border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s3);margin-top:var(--s3)}
.locator .crumbs{margin:0 0 var(--s2)}
.locator .verse-bar{display:block;margin:0}
.locator .vtitle{font-size:var(--t-lg);margin:0 0 var(--s2)}
.locator .pager.top{margin:0;flex-direction:column;gap:.35rem;align-items:flex-start}
.locator .pager.top .next{margin-left:0}
/* The plate is the one ornamented surface in the product. */
.zone-a>.plate{box-shadow:inset 0 0 0 1px var(--paper),
inset 0 0 0 2px var(--line)}
.zone-a>.plate .ar.big{font-size:var(--t-2xl);line-height:2.2}
}
/* ── zone C · the four layers as one row ─────────────────────────────────── */
@media (min-width:48rem){
.zone-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s3);align-items:start}
.zone-c>.layer-apparatus{grid-column:1/-1}
}
@media (min-width:64rem){
.zone-c{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.zone-c>.panel{margin:var(--s3) 0 0;min-width:0}
.zone-c>.panel h2{display:block}
.zone-c>.panel .lname{font-size:var(--t-base);display:block}
.zone-c>.panel .tier-tag{display:block;margin-top:.15rem}
.layer-apparatus{min-width:0}
/* A hollow layer states its condition and keeps its reasons one click away. */
details.blocked{background:var(--paper-inset);
border-left:3px solid var(--hue,var(--line-strong));
border-radius:0 var(--r) var(--r) 0;padding:0;margin:var(--s2) 0 0;
max-width:var(--measure);color:var(--ink-soft);font-size:var(--t-sm);
line-height:1.6}
details.blocked>summary{cursor:pointer;list-style:none;padding:var(--s2);
display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
details.blocked>summary::-webkit-details-marker{display:none}
details.blocked>summary::after{content:"\25B8";color:var(--ink-faint);
display:inline-block;margin-left:auto}
details.blocked[open]>summary::after{transform:rotate(90deg)}
details.blocked[open]>summary{padding-bottom:0}
details.blocked>summary .badge{margin-right:0}
details.blocked>:not(summary){padding:var(--s1) var(--s2) var(--s2)}
@media (prefers-reduced-motion:no-preference){
details.blocked>summary::after{transition:transform .15s ease}
}
/* ── zone D · the renderings, and the measure beside them ────────────────── */
@media (min-width:64rem){
.zone-d{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
gap:var(--s3);align-items:start}
.zone-d>.panel{margin-top:var(--s3)}
.zone-d .pair-bars,.zone-d .rendering .tr.big{max-width:none}
.zone-d .rendering{grid-template-columns:12ch 1fr}
}
/* ── surah page · the facts are a sidebar by nature ──────────────────────── */
@media (min-width:64rem){
.zone-a{display:block} /* the surah page floats instead */
/* The rail carries APPARATUS only. It used to carry the signed plain-words
card too, stacked under the facts by clear:right, and that is what stranded
the page: the rail ran facts + introduction while the main column ran only
the pull-apart panel, so on any surah where the rail was taller the main
column ended and the introduction floated on beside nothing. Surah 3 is the
worst case of it. A signed restatement is READING MATTER and belongs in the
column a person reads down; moving it there shortens the rail and lengthens
the main column at the same time, which is the whole fix. */
.zone-a>.facts{float:right;clear:right;
width:min(34%,24rem);margin:var(--s3) 0 var(--s3) var(--s4)}
.zone-a>.editorial{float:none;width:auto;margin:0 0 var(--s3);display:flow-root}
/* And where there is no pull-apart panel there is no main column to speak of,
so the rail stops pretending to be one and takes the full width. */
.zone-a:not(:has(>.layer-lapis))>.facts{float:none;width:auto;
margin:var(--s3) 0}
.zone-a>.facts .fact-grid{grid-template-columns:1fr}
/* A block box would slide UNDER the float and paint its card behind it.
Establishing a block formatting context makes it sit beside instead. */
.zone-a>.layer-lapis,.zone-a>.panel:not(.facts):not(.editorial){display:flow-root}
.zone-a::after{content:"";display:block;clear:both}
/* the verse study keeps its two-column grid */
.zone-a:has(>.locator){display:grid}
}
/* Library card: the first sentence of a signed introduction, under the signer's
name. Rendered only where a signature exists - there is no empty variant of
this element, by design. */
/* Visually hidden, exposed to assistive technology. General utility: the
timeline's mini strip uses it too. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
/* An unwritten introduction. NOT a dot and never a fifth layer: different
shape, different slot, no layer hue, and the mono-faint apparatus voice that
every other "the platform talking about itself" string on this site uses. */
.card-intro.is-unwritten{font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);letter-spacing:.08em}
.card-intro{margin:.45rem 0 0;font-size:var(--t-sm);color:var(--ink-soft);
border-top:1px solid var(--rule);padding-top:.45rem}
.card-intro .who{display:block;margin-top:.2rem;font-family:var(--f-mono);
font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.02em}
/* ── REVELATION-ORDER STRIP ────────────────────────────────────────────────
One cell per positioned surah, in the selected ordering's order. Meccan and
Medinan are separated by tone using pigment washes that already exist; no
new colour is introduced, and the distinction never carries meaning on its
own — the place label renders as text beside it. */
.tl-wrap{margin:var(--s2) 0}
.timeline{display:flex;flex-wrap:wrap;gap:2px;list-style:none;padding:0;margin:0}
.tl-cell a{display:flex;align-items:center;justify-content:center;
min-width:2.15rem;height:1.9rem;padding:0 .2rem;
font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink);
text-decoration:none;border:1px solid var(--line);border-radius:3px}
.tl-cell a:hover{border-color:var(--line-strong)}
.place-meccan a{background:var(--bronze-wash)}
.place-medinan a{background:var(--lapis-wash)}
.place-unrecorded a{background:var(--paper-inset)}
.tl-cell.is-current a{box-shadow:inset 0 -2px 0 0 var(--bronze);font-weight:600}
.tl-legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin:.5rem 0 0;
font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft)}
.tl-key{display:flex;align-items:center;gap:.35rem}
.tl-swatch{width:.8rem;height:.8rem;border:1px solid var(--line);border-radius:2px}
.place-meccan .tl-swatch{background:var(--bronze-wash)}
.place-medinan .tl-swatch{background:var(--lapis-wash)}
.place-unrecorded .tl-swatch{background:var(--paper-inset)}
/* Miniature: the same strip, sized for a sidebar. The number stays in the
document for screen readers and for the text extractor; only its box shrinks
out of sight. Nothing is removed. */
.timeline.mini{gap:1px}
.timeline.mini .tl-cell a{min-width:.5rem;width:.5rem;height:1.05rem;padding:0;
border-radius:2px;overflow:hidden}
.timeline.mini .tl-cell.is-current a{box-shadow:inset 0 -3px 0 0 var(--bronze);
border-color:var(--bronze)}
/* ── LENSES ────────────────────────────────────────────────────────────────
A lens reorders zones and sets disclosure state. It adds nothing and hides
nothing: every element is in the document under every lens. */
.toggle.lenses{flex-wrap:wrap}
/* The compare lens leads with the measure inside the translations/measure
pair. The pair's DOM order is untouched; only its visual order flips, so
the two columns of tranche 3 keep their geometry. */
.zone-d.lead-measure > :first-child{order:2}
.zone-d.lead-measure > :last-child{order:1}
.apparatus > summary{cursor:pointer;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
padding:.35rem 0;list-style:none}
.apparatus > summary::-webkit-details-marker{display:none}
.apparatus > summary::before{content:"▸ ";color:var(--ink-faint)}
.apparatus[open] > summary::before{content:"▾ "}
/* ── ASK: a search, and it must not look like an oracle ────────────────────
The form is plain, the method panel sits above the results, and a result is
a reference and a count - never an extract chosen to stand for a verse. */
.ask-form{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;margin:var(--s3) 0}
.ask-form label{flex:0 0 100%;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ask-form input{flex:1 1 24rem;padding:.6rem .7rem;font-family:var(--f-body);
font-size:var(--t-base);color:var(--ink);background:var(--paper-raised);
border:1px solid var(--line-strong);border-radius:var(--r)}
.ask-form button{padding:.6rem 1rem;font-family:var(--f-mono);font-size:var(--t-sm);
color:var(--paper-raised);background:var(--ink);border:0;border-radius:var(--r);cursor:pointer}
.panel.method{background:var(--paper-inset)}
.terms{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0}
.term{font-family:var(--f-mono);font-size:var(--t-xs);padding:.1rem .4rem;
background:var(--paper-raised);border:1px solid var(--line);border-radius:3px}
.results{list-style:none;padding:0;margin:var(--s2) 0}
.result{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;
padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.result .ref{font-size:var(--t-base);text-decoration:none;border-bottom:2px solid var(--bronze)}
.result .matched,.result .in{font-size:var(--t-sm);color:var(--ink-soft)}
.result .wording-tag{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint)}
.hit{margin:.5rem 0;padding-left:.7rem;border-left:2px solid var(--line-strong)}
.hit .who{display:block;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint)}
.count strong{font-family:var(--f-mono)}
/* ── The signature disclosure: beside a signature, never above the text ──── */
.sig-note{display:block;margin:.3rem 0 0}
.sig-note>summary{cursor:pointer;font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint);list-style:none}
.sig-note>summary::-webkit-details-marker{display:none}
.sig-note>summary::before{content:"▸ "}
.sig-note[open]>summary::before{content:"▾ "}
.sig-note p{margin:.4rem 0 0;font-size:var(--t-sm);color:var(--ink-soft);
max-width:var(--measure)}
/* ── In a signed study — the verse page's door ────────────────────────────
Bronze, matching the reading view's .sig-mark.study, so "signed study" is
the same colour wherever a reader meets it. It is a .panel and deliberately
NOT a .panel.layer: no pigment rule on top, because this is not one of the
four interpretive layers and must not join their row. Set apart from the
clause-under-study note in zone D, which is an ordinary .note in the
divergence section and stays that way. */
.study-door{border-left:3px solid var(--bronze)}
.study-door .lname{color:var(--bronze);font-family:var(--f-mono);
font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
.study-door .door{border-top:1px solid var(--line);padding:var(--s3) 0 var(--s2)}
.study-door .door:first-of-type{border-top:0;padding-top:var(--s1)}
.study-door .door-q{display:inline-block;font-family:var(--f-display);
font-size:var(--t-md);line-height:1.35;color:var(--ink);text-decoration:none;
max-width:var(--measure);border-bottom:2px solid var(--bronze);
padding-bottom:.1rem}
.study-door .door-q:hover{color:var(--bronze)}
.study-door .reason{margin:var(--s2) 0 var(--s1);font-size:var(--t-sm);
line-height:1.6;color:var(--ink-soft);max-width:var(--measure)}
.study-door .reason .k{display:block;font-family:var(--f-mono);
font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-faint)}
.study-door .byline{font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;color:var(--ink-soft);margin:0;white-space:normal}
.study-door .not-clause{background:var(--paper-inset);border-radius:var(--r);
padding:var(--s2);margin:var(--s3) 0 0;max-width:var(--measure)}
/* The anatomy panel: a numbered method, not a marketing list. */
ol.anatomy{margin:var(--s2) 0 var(--s3);padding-left:1.4rem;max-width:var(--measure);
display:flex;flex-direction:column;gap:.65rem;font-size:var(--t-sm);
line-height:1.6;color:var(--ink-soft)}
ol.anatomy b{color:var(--ink);font-weight:600}
/* ── Studies ──────────────────────────────────────────────────────────────── */
.card .q{margin:0;font-family:var(--f-display);font-size:var(--t-md);color:var(--ink)}
h1.q{max-width:var(--measure)}
.passage h3{margin:0 0 .3rem}
.passage .reason{margin:0 0 var(--s2);font-size:var(--t-sm);color:var(--ink-soft);
max-width:var(--measure)}
.passage .reason .k{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.verse-block{padding:var(--s2) 0;border-top:1px solid var(--line)}
.based{max-width:var(--measure);font-size:var(--t-sm);color:var(--ink-soft)}
/* ═══════════════════════════════════════════════════════════════════════════
THE ILLUMINATION LAYER — Anwar's design tranche, 2026-08-25.
A contemporary illuminated manuscript. The pigments were already the
manuscript's own; this layer uses them the way the tradition did — to honour
the text and steer the eye — and never to decorate.
THE LAW OF THIS LAYER, in order of precedence:
1. Nothing out-weighs the Arabic on any page. Ornament sits under it.
2. Epistemic hierarchy IS visual hierarchy. A reader should sense what KIND
of sentence they are reading before they read it: source text largest and
calmest; renderings subordinate under their translator plates; derived
evidence in the instrument register — mono, quieter, boxed; the signed
editorial voice in its warm card; the disclosure smallest of that family.
3. Ornament frames content and never competes with it. Every device below is
drawn in CSS from the existing tokens. No image, no font, no script.
4. NOT ONE WORD MOVES. This layer is presentation only and a byte-wise text
diff proves it.
═══════════════════════════════════════════════════════════════════════════ */
/* ── The lozenge: this layer's one ornamental atom ────────────────────────────
A rotated square on a hairline — the geometric seed of a manuscript rosette,
and the only shape introduced. Everything else is rule, ring and frame. */
.ill-rule,
.statement > p:last-child::before,
.panel.facts > h2::after{
--lz:6px;
}
/* ── Section openers ─────────────────────────────────────────────────────────
A panel heading stops being a line of text and becomes an opener: pigment
hairline above, the layer's own name in small caps, a lozenge closing it. */
.panel > h2{
position:relative; padding-top:var(--s2); margin-bottom:var(--s2);
display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
}
.panel > h2::before{
content:""; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
var(--hue,var(--line-strong)) 0, var(--hue,var(--line-strong)) 3.2rem,
var(--line) 3.2rem, var(--line) 100%);
}
.panel > h2 .lname{
font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.14em;
/* SMALL CAPS, NOT UPPERCASE. text-transform rewrites the rendered characters,
which a screen reader speaks and a copy-paste carries - a copy change by
any honest definition, and this tranche moves no words. font-variant-caps
changes the GLYPHS and leaves the text exactly as signed. */
font-variant-caps:all-small-caps; color:var(--hue,var(--ink-soft));
}
.panel > h2 .tier-tag{margin-left:auto; color:var(--ink-faint)}
/* ── Panels: framed, with the corner ticks of a ruled page ─────────────────── */
.panel{
position:relative;
background:
/* four corner ticks, drawn in gradients so no image is fetched */
linear-gradient(var(--line-strong),var(--line-strong)) 0 0/10px 1px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 0 0/1px 10px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 100% 0/10px 1px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 100% 0/1px 10px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 0 100%/10px 1px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 0 100%/1px 10px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 100% 100%/10px 1px no-repeat,
linear-gradient(var(--line-strong),var(--line-strong)) 100% 100%/1px 10px no-repeat,
var(--paper-raised);
}
/* ── The front door ──────────────────────────────────────────────────────────
A wall of nine equal paragraphs was the defect. The remedy is rhythm and two
plates: the lede opens, the closing line is set as a plate rather than left
as a paragraph tail. No sentence is added, removed or reordered. */
.statement{max-width:none}
/* One left edge for the whole page: the lede, the body and the plate all hang
off it. Centring the body under a left-aligned lede is what made the first
pass read as a column adrift. */
.statement > p{
max-width:68ch; margin:0 0 var(--s4);
line-height:1.8; font-size:var(--t-base); color:var(--ink);
}
/* The paragraph mark. A manuscript breaks a wall of text with a mark in the
margin, not with a heading it does not have - and this tranche has no words
to spend. A lozenge on the first line of every paragraph but the lede and the
plate gives the eye somewhere to land and adds nothing to read. */
.statement > p:not(.lede):not(:last-child){position:relative; padding-left:2rem}
.statement > p:not(.lede):not(:last-child)::before{
content:""; position:absolute; left:0; top:.62em;
width:7px; height:7px; background:var(--bronze); opacity:.75;
transform:rotate(45deg);
}
.statement > p.lede{
font-size:var(--t-lg); line-height:1.42; color:var(--ink);
font-family:var(--f-display); font-weight:400; letter-spacing:-.01em;
margin-bottom:var(--s4); padding-bottom:var(--s3);
border-bottom:1px solid var(--line);
}
/* The closing plate: rules above and below, a lozenge between them, the text
set in display at reading weight. It is the last thing a reader meets and it
was previously indistinguishable from the paragraph before it. */
.statement > p:last-child{
position:relative; margin-top:var(--s5); padding:var(--s4) var(--s3) var(--s3);
border-top:2px solid var(--bronze); border-bottom:1px solid var(--line-strong);
font-family:var(--f-display); font-size:var(--t-md); line-height:1.5;
color:var(--ink); text-align:center; max-width:52ch;
}
.statement > p:last-child::before{
content:""; position:absolute; top:calc(var(--lz) * -1); left:50%;
width:calc(var(--lz)*2); height:calc(var(--lz)*2); margin-left:calc(var(--lz)*-1);
background:var(--bronze); transform:rotate(45deg);
}
/* ── The instrument register ─────────────────────────────────────────────────
Derived evidence never wears the reading face. Mono, inset, ruled — it looks
like an instrument because it is one, and a reader can tell at a glance that
these numbers were computed rather than written. */
table.probes,
table.kv,
.panel table{
border-collapse:collapse; width:100%; font-size:var(--t-sm);
background:var(--paper-inset);
}
table.probes tr:first-child th,
.panel table tr:first-child th{
font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-faint); text-align:left;
padding:var(--s1) var(--s2); border-bottom:1px solid var(--line-strong);
white-space:nowrap;
}
table.probes td,
.panel table td{
padding:var(--s2); border-bottom:1px solid var(--line);
vertical-align:top; line-height:1.6;
}
table.probes tr:last-child td,
.panel table tr:last-child td{border-bottom:0}
table.probes .mono{font-size:var(--t-xs); color:var(--ink-soft)}
/* ── Medallions ──────────────────────────────────────────────────────────────
A number that names a verse is not body text. It gets the ring a manuscript
gives an ayah marker: circular, hairline, tabular figures, calm. */
.vgrid.heat a{
display:grid; place-items:center; aspect-ratio:1; border-radius:50%;
font-family:var(--f-mono); font-variant-numeric:tabular-nums;
font-size:var(--t-xs); letter-spacing:0; text-decoration:none;
border:1px solid var(--line-strong); color:var(--ink);
transition:border-color .15s, transform .15s;
}
.vgrid.heat a:hover{border-color:var(--bronze); transform:scale(1.08)}
.vgrid.heat{gap:.4rem}
/* ── The frontispiece ────────────────────────────────────────────────────────
A sūrah opening is a moment in a manuscript, not a stacked heading. Double
rule above, the transliteration in display, the Arabic beside it at the size
it deserves — and the Arabic is the largest thing in the block, as the law
of this layer requires. */
.zone-a > h1{
position:relative; padding:var(--s4) 0 var(--s2);
border-top:3px double var(--bronze);
align-items:baseline;
}
/* The Arabic outweighs the transliteration beside it, because the law of this
layer says nothing may out-weigh the Arabic and a script with shorter
x-height reads smaller at the same rem. Set at 1.35x the title. */
.zone-a > h1 .ar{
font-family:var(--f-arabic);
font-size:calc(var(--t-2xl) * 1.35) !important; line-height:1.35;
color:var(--ink);
}
.zone-a > h1 + .lede{
font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.14em;
font-variant-caps:all-small-caps; color:var(--ink-soft);
padding-bottom:var(--s3); border-bottom:1px solid var(--line);
margin-bottom:var(--s4);
}
/* ── The facts panel: a colophon, not a sidebar ────────────────────────────── */
.facts dt{letter-spacing:.12em}
.facts dd{font-family:var(--f-display); font-size:var(--t-md); line-height:1.25;
color:var(--ink)}
.facts .fact-caveat{font-family:var(--f-body); font-size:var(--t-xs);
color:var(--ink-faint); display:block; margin-top:.2rem; line-height:1.5}
.facts .fact{border-bottom:1px solid var(--line); padding-bottom:var(--s2)}
/* ── The shelf ───────────────────────────────────────────────────────────────
Library cards read as spines: the pigment edge, the number in its medallion,
the name in display with the Arabic beside it. */
.cards .card{
position:relative; border-left:3px solid var(--line-strong);
transition:border-left-color .15s, transform .15s;
}
.cards .card:hover{border-left-color:var(--bronze); transform:translateX(2px)}
.cards .card .n{
display:inline-grid; place-items:center; width:2.1rem; height:2.1rem;
border-radius:50%; border:1px solid var(--line-strong);
font-family:var(--f-mono); font-variant-numeric:tabular-nums;
font-size:var(--t-xs); color:var(--ink-soft); background:var(--paper);
}
.cards .card .tn{font-family:var(--f-display); font-size:var(--t-md);
letter-spacing:-.01em}
.cards .card .ar{font-family:var(--f-arabic);
font-size:var(--t-md); color:var(--ink-soft)}
/* ── The signed editorial voice, refined ─────────────────────────────────────
Warm card, unchanged in kind. What changes is the family's internal order:
the restatement reads at display size, the byline drops to mono, and the
disclosure is the smallest thing in the signed family — as it should be,
because it is the least of the claims on the page. */
.editorial .tr.big{font-family:var(--f-display); font-size:var(--t-lg);
line-height:1.42; font-weight:400; letter-spacing:-.005em}
.editorial .byline{font-size:var(--t-xs); letter-spacing:.08em}
.sig-note>summary{font-size:calc(var(--t-xs) * .95); letter-spacing:.06em}
/* ── Renderings: the translator plate ───────────────────────────────────────
A rendering is subordinate to the Arabic and says so: the translator's name
is a plate above the words, the words themselves sit at reading size behind a
pigment-free rule, and no rendering is ever styled above another. */
.rendering{border-top:1px solid var(--line)}
.rend-head{padding-bottom:.35rem; margin-bottom:.6rem;
border-bottom:1px solid var(--line)}
.rend-head .who{font-family:var(--f-display); font-size:var(--t-base);
font-weight:500; letter-spacing:-.005em}
.rend-head .when{font-family:var(--f-mono); font-size:var(--t-xs);
letter-spacing:.08em; color:var(--ink-faint)}
/* ── Empty states are designed, not defaulted ──────────────────────────────── */
.empty{font-style:normal; font-family:var(--f-body); color:var(--ink-soft);
padding-left:var(--s2); border-left:2px solid var(--line-strong)}
/* ── The study page's passages ─────────────────────────────────────────────── */
.passage h3{font-family:var(--f-mono); font-size:var(--t-sm);
letter-spacing:.14em; font-variant-caps:all-small-caps; color:var(--bronze)}
.card .q,h1.q{letter-spacing:-.01em; line-height:1.3}
/* ── Narrow widths: the ornament yields first ──────────────────────────────── */
@media (max-width:52rem){
.statement > p.lede{font-size:var(--t-md)}
.statement > p:last-child{font-size:var(--t-base); padding:var(--s3) var(--s2)}
.zone-a > h1{padding-top:var(--s3)}
.zone-a > h1 .ar{font-size:calc(var(--t-xl) * 1.2) !important}
}
/* ── /studies THEME INDEX ────────────────────────────────────────────────────
Sections, chips and a client-side search over the signed studies. Built from
the tokens already declared above; no new colour is introduced. Every rule
here styles something that is present and usable with JavaScript off. */
.idx-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
flex-wrap:wrap;margin:var(--s3) 0 var(--s2)}
.idx-count{font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.04em;
color:var(--ink-soft);margin:0}
.idx-count b{color:var(--ink);font-weight:500}
.idx-count .sep{color:var(--ink-faint);margin:0 .5em}
.idx-q{font-family:var(--f-body);font-size:var(--t-base);color:var(--ink);
background:var(--paper-raised);border:1px solid var(--line-strong);
border-radius:var(--r);padding:.5rem .75rem;min-width:min(30ch,100%);
-webkit-appearance:none;appearance:none}
.idx-q::placeholder{color:var(--ink-faint)}
.idx-q:focus-visible{outline:2px solid var(--lapis);outline-offset:2px;
border-color:var(--lapis)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--s3);padding:0}
.chip{display:inline-flex;align-items:baseline;gap:.45em;font-family:var(--f-mono);
font-size:var(--t-xs);letter-spacing:.03em;line-height:1;color:var(--ink-soft);
background:var(--paper-inset);border:1px solid var(--line);border-radius:999px;
padding:.42rem .7rem;text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip .cn{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.chip.on{background:var(--bronze-wash);border-color:var(--bronze);color:var(--ink)}
.chip.on .cn{color:var(--bronze)}
.chip:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.chip-unfiled{border-style:dashed}
.theme-sec{margin:0 0 var(--s4);scroll-margin-top:var(--s3)}
.theme-sec[hidden]{display:none}
.theme-head{display:flex;align-items:baseline;gap:.6rem;margin:0 0 var(--s2);
padding-bottom:.4rem;border-bottom:1px solid var(--line);
font-family:var(--f-display);font-weight:500;font-size:var(--t-md);color:var(--ink)}
.theme-name{flex:1 1 auto;min-width:0}
.theme-n{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:0 0 auto}
.theme-n.partial{color:var(--bronze)}
.idx-live{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
color:var(--ink-faint);margin:0 0 var(--s2);min-height:1em}
.idx-empty{margin:var(--s3) 0}
.card[hidden]{display:none}
@media (max-width:640px){
.idx-bar{align-items:stretch;flex-direction:column;gap:var(--s1)}
.idx-q{width:100%;min-width:0}
/* chips stay on one scrollable row rather than eating the first screen */
.chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
padding-bottom:.35rem;scrollbar-width:thin}
.chip{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
.chip{transition:none}
}
/* ── STUDIES INDEX: theme sections, chips, filter ──────────────────────────
Colour discipline: this block uses ONLY neutrals - --line, --ink-faint,
--paper-inset. It deliberately borrows NO evidence pigment. madder, lapis,
bronze and verd each identify an interpretive layer everywhere on this
platform, and a chip drawn in one would assert layer membership from a
navigation control. */
.studies-controls{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;
align-items:baseline;gap:var(--s2);padding:var(--s2) 0 var(--s1);
background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.studies-search{flex:1;min-width:15rem;font:400 var(--t-base)/1.4 var(--f-body);
color:var(--ink);background:var(--paper-raised);border:1px solid var(--line-strong);
border-radius:var(--r);padding:.5rem .7rem}
.studies-search:focus{outline:2px solid var(--ink-faint);outline-offset:1px}
.studies-live{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft);
letter-spacing:.06em;margin:0}
.studies-live b{color:var(--ink);font-variant-numeric:tabular-nums}
.studies-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 var(--s3)}
.chip{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-soft);background:var(--paper-inset);
border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;
cursor:pointer;line-height:1.5}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums;color:var(--ink-faint);margin-left:.35em}
.chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.is-on .n{color:var(--paper)}
.chip-unfiled{border-style:dashed}
/* A chip never overflows the row (2026-09-13). At 390px the longest uppercase theme
name is wider than the column and ran 29px past it; a chip may break its own text
onto a second line instead. */
.studies-chips .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.studies-surah-pages{margin:var(--s3) 0 0;font-size:var(--t-sm)}
.theme-sec{margin-top:var(--s4);scroll-margin-top:5rem}
.theme-head{display:flex;align-items:baseline;gap:var(--s2);
padding-bottom:.4rem;border-bottom:1.5px solid var(--line-strong)}
.theme-head h2{margin:0;font:600 var(--t-md)/1.2 var(--f-display)}
.theme-head .tc{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint);
font-variant-numeric:tabular-nums;margin-left:auto}
.theme-blurb{font-size:var(--t-sm);color:var(--ink-soft);margin:.5rem 0 0;
max-width:64ch;font-style:italic}
.theme-unfiled .theme-head{border-bottom-style:dashed}
.studies-empty{text-align:center;padding:var(--s5) var(--s2);color:var(--ink-soft);
font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.06em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:40rem){
.studies-controls{position:static;gap:var(--s1)}
.studies-search{min-width:0;width:100%}
.theme-head h2{font-size:var(--t-base)}
}
/* ── PROGRESSIVE DISCLOSURE, PROPOSED (overview lens) ──────────────────────
design/verse-overview-PROPOSAL.md. Reached only by ?lens=overview, so none
of this touches any page a reader sees today.
A zone fold is DELIBERATELY heavier than details.drawer. A drawer hides
apparatus inside a panel; this hides a whole zone of the page, and a reader
must be able to see at a glance that there is more below and what it is.
Same disclosure triangle and the same reduced-motion guard as the drawers,
so the two read as one family and not as two conventions. */
details.zone-fold{margin:var(--s3) 0;border:1px solid var(--line-strong);
border-radius:var(--r-lg);background:var(--paper)}
details.zone-fold>summary{cursor:pointer;padding:var(--s2) var(--s3);
font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink);
letter-spacing:.02em;list-style:none;
/* 44px minimum touch target, stated rather than inherited by accident */
min-height:44px;display:flex;align-items:center}
details.zone-fold>summary::-webkit-details-marker{display:none}
details.zone-fold>summary::before{content:"\25B8";display:inline-block;
margin-right:.7em;color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
details.zone-fold>summary::before{transition:transform .15s ease}
}
details.zone-fold[open]>summary::before{transform:rotate(90deg)}
details.zone-fold>summary:hover{background:var(--paper-inset)}
details.zone-fold[open]>summary{border-bottom:1px solid var(--line)}
/* The zone keeps its own panel chrome inside the fold, so the fold itself must
not add a second inset around it. */
details.zone-fold>div[class^="zone-"]{padding:0 var(--s3) var(--s3)}
/* The lead chooser sits above the renderings; the compare fold below them. */
details.compare-all{margin:var(--s3) 0 0}
details.compare-all>summary{min-height:44px;display:flex;align-items:center}
/* The mid-page pager is the boundary between what is open and what is folded,
so it carries a rule above it rather than floating between two blocks. */
.pager.mid{margin:var(--s3) 0;padding-top:var(--s3);
border-top:1px solid var(--line)}
/* ── PHASE 1 FRAMING SPINE ─────────────────────────────────────────────────
The hero's two doors, the trust statement and the context box. All three are
layout only: every word in them comes from app/templates/_framing.html and
none is written here. */
/* TWO DOORS, NEITHER A DEFAULT. The secondary is not a weaker version of the
primary - it is a different way in - so it is outlined rather than faded. */
.rd-hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}
.rd-btn{display:inline-flex;align-items:center;justify-content:center;
padding:.7rem 1.35rem;border-radius:2px;text-decoration:none;
font-size:var(--t-sm);line-height:1.2;border:1px solid transparent;
transition:background-color .15s ease,border-color .15s ease}
.rd-btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rd-btn--primary:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.rd-btn--secondary{background:transparent;color:var(--ink);
border-color:var(--line-strong)}
.rd-btn--secondary:hover{border-color:var(--ink)}
/* THE TRUST STATEMENT. Wide measure, quiet weight: it is a disclaimer, and a
disclaimer set louder than the thing it qualifies reads as a boast. */
/* THE TRUST BLOCK. One contained panel with its own frame, replacing a pair of
rules that fenced the two statements without containing them. Tinted rather
than outlined-only so it reads as a block on the page at a glance, and
themed through --paper-inset so it inverts with everything else.
BOTH LINES ARE var(--ink) AT THE SAME WEIGHT. The qualifier was --ink-soft
at --t-sm, which is the site's fine-print setting: it made the sentence that
disclaims fatwas and scholarship look like a footnote. Size carries the
hierarchy; colour and weight do not. */
.rd-trust{max-width:74ch;margin:var(--s4) 0 0;padding:var(--s3);
background:var(--paper-inset);border:1px solid var(--line);
border-left:3px solid var(--bronze);border-radius:2px}
.rd-trust-eyebrow{margin:0 0 var(--s2);font-family:var(--f-mono);
font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-faint);font-weight:400}
.rd-trust-primary{max-width:62ch;margin:0;color:var(--ink);
font-size:var(--t-md);line-height:1.5}
.rd-trust-qualifier{max-width:62ch;margin:var(--s2) 0 0;color:var(--ink);
font-size:1rem;line-height:1.65}
/* Still used by /how-to-read, which keeps its own inline treatment. */
.rd-trust-text{max-width:62ch;margin:0;color:var(--ink-soft);
font-size:var(--t-sm);line-height:1.7}
.rd-trust-text--inline{margin:var(--s2) 0 var(--s3);padding-left:var(--s2);
border-left:2px solid var(--bronze)}
/* THE CONTEXT BOX. The five items are a definition, so they are a list and not
prose - a reader checking what "context" covers should be able to scan it. */
.rd-context-box{margin:var(--s4) 0 0}
.rd-context-box h2{font-size:var(--t-lg);margin:0 0 var(--s2)}
.rd-context-list{max-width:62ch;margin:0;padding-left:1.1rem}
.rd-context-list li{margin:.35rem 0;color:var(--ink-soft);line-height:1.7}
/* SET APART, not a sixth item: it is the guarantee under all five, so it sits
outside the list and carries the gold rule the estate uses for a structural
statement rather than a listed one. */
.rd-context-apart{max-width:62ch;margin:var(--s3) 0 0;padding:var(--s2) 0 var(--s2) var(--s2);
border-left:2px solid var(--bronze);color:var(--ink);line-height:1.7}
/* A heading that names a region for assistive tech without printing a label
the design does not want. Not display:none - that would remove it. */
.rd-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Phase 2 · the spine echo and the editorial-orientation sub-line. */
/* .rd-spine is retained for any surface that echoes the spine outside the
trust block. The homepage now sets it as .rd-trust-primary. */
.rd-spine{max-width:62ch;margin:var(--s2) 0 0;color:var(--ink);
font-size:var(--t-sm);line-height:1.7}
.rd-gloss-sub{margin:.35rem 0 0;color:var(--ink-faint);
font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.6}
/* Phase 2 · the trust pages. Prose measure, an honest empty state, an FAQ. */
.rd-prose{max-width:70ch;padding:var(--s4) 0}
.rd-prose h1{margin:0 0 var(--s2)}
.rd-prose h2{font-size:var(--t-lg);margin:var(--s4) 0 var(--s2)}
.rd-prose p{line-height:1.75;color:var(--ink-soft)}
.rd-lead{font-size:var(--t-md);color:var(--ink)!important;line-height:1.7}
.rd-notdecide{margin:var(--s4) 0 0;padding:var(--s3) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rd-faq{margin:var(--s2) 0 0}
.rd-faq dt{margin:var(--s3) 0 .35rem;font-weight:600;color:var(--ink)}
.rd-faq dd{margin:0;color:var(--ink-soft);line-height:1.75}
/* THE EMPTY STATE IS DESIGNED, not a bare paragraph: it has to read as a
deliberate statement that the page is unwritten, never as a page that failed
to load. */
.rd-pending{margin:var(--s3) 0 0;padding:var(--s3);
border:1px solid var(--line);border-left:3px solid var(--bronze);
background:var(--paper-inset)}
.rd-pending-badge{margin:0 0 var(--s2);font-family:var(--f-mono);
font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-faint)}
.rd-pending-note{margin:var(--s2) 0 0;font-size:var(--t-sm);
color:var(--ink-faint)}
.rd-page-links{display:flex;flex-wrap:wrap;gap:var(--s2);
margin:var(--s4) 0 0;padding-top:var(--s2);border-top:1px solid var(--line)}
.rd-page-links a{font-size:var(--t-sm)}
/* ── STUDY PAGE SHELL ──────────────────────────────────────────────────────
Slots, not content. Every block below is a container the signing lane fills;
the styles say "built and waiting", never "empty because something broke". */
.rd-study-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--s3) 0 var(--s3)}
.rd-study-nav a{padding:.45rem .85rem;border:1px solid var(--line-strong);
border-radius:2px;background:var(--paper);color:var(--ink);
text-decoration:none;font-size:var(--t-sm)}
.rd-study-nav a[aria-current="page"]{background:var(--ink);color:var(--paper);
border-color:var(--ink)}
/* AT A GLANCE is the dark panel: it is the first thing read and the only block
on the page set on ink, so it cannot be mistaken for one more section. */
.rd-glance{margin:0 0 var(--s3);padding:var(--s3);background:#191816;
color:#F1ECDD;border-radius:2px}
.rd-glance h2{margin:0 0 var(--s2);color:#F1ECDD;font-size:var(--t-lg)}
.rd-glance .rd-slot-badge{color:var(--bronze)}
.rd-glance .rd-slot-note{color:#C9C1AE}
.rd-slot{padding:var(--s3);border:1px dashed var(--line-strong);
border-radius:2px;margin:0 0 var(--s3)}
.rd-slot-badge{margin:0 0 .4rem;font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)}
.rd-slot-note{margin:0;color:var(--ink-soft);font-size:var(--t-sm);
line-height:1.65;max-width:62ch}
.rd-findings{margin:var(--s2) 0;padding:0;list-style:none}
.rd-finding{display:flex;gap:var(--s2);align-items:baseline;
padding:.55rem 0;border-bottom:1px solid var(--line)}
.rd-finding-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--bronze)}
.rd-finding-slot{flex:1 1 auto;height:1.1em;background:var(--paper-inset);
border-radius:2px}
/* A FILLED FINDING. The title carries the weight and the line explains it, so
the two are one flow rather than two columns: a finding read aloud is one
heading and one sentence, and a grid would make a screen reader announce a
structure the page does not actually have. */
.rd-finding-text{flex:1 1 auto;max-width:62ch}
.rd-finding-t{display:block;font-size:var(--t-sm);line-height:1.45}
.rd-finding-l{display:block;margin-top:.15rem;color:var(--ink-soft);
font-size:var(--t-sm);line-height:1.65}
/* At a glance is set on ink, so its own prose takes the panel's paper colour
rather than inheriting the page's. */
.rd-glance-p{margin:0 0 var(--s2);max-width:62ch;line-height:1.7;color:#F1ECDD}
.rd-glance-p:last-child{margin-bottom:0}
.rd-evidence-map{margin:0 0 var(--s3)}
.rd-map-list{margin:var(--s2) 0 0;padding-left:1.2rem}
.rd-map-list li{margin:.45rem 0;line-height:1.65}
.rd-map-reason{color:var(--ink-soft)}
.rd-anchor{display:block;height:0;scroll-margin-top:90px}
/* The per-verse folds: compare, pronunciation, receipts, context. */
.rd-ev>summary{display:inline-block;cursor:pointer;font-size:var(--t-sm);
color:var(--lapis,#31556b);text-decoration:underline;text-underline-offset:3px;
list-style:none;margin:.35rem 0}
.rd-ev>summary::-webkit-details-marker{display:none}
.rd-ev-body{margin:.4rem 0 0}
.rd-sources-method,.rd-editorial-status{margin:var(--s4) 0 0;padding-top:var(--s3);
border-top:1px solid var(--line)}
.rd-status{display:grid;grid-template-columns:auto 1fr;gap:.3rem var(--s2);
margin:var(--s2) 0 0;font-size:var(--t-sm)}
.rd-status dt{font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.rd-status dd{margin:0;color:var(--ink)}
.rd-status-by{margin:var(--s2) 0 0;font-family:var(--f-mono);
font-size:var(--t-xs);color:var(--ink-faint)}
.rd-sm-link{margin:var(--s2) 0 0;display:flex;gap:var(--s3);flex-wrap:wrap;
font-size:var(--t-sm)}
.rd-rail-sticky{position:sticky;top:var(--s3)}
.rd-rail-progress{margin:.2rem 0 .4rem;font-family:var(--f-mono);
font-size:var(--t-xs);color:var(--ink-faint)}
.rd-progress-bar{height:2px;background:var(--line);border-radius:2px;
overflow:hidden;margin-bottom:var(--s2)}
.rd-progress-bar>span{display:block;height:100%;background:var(--bronze);
transition:width .18s ease}
@media (max-width:1023px){ .rd-rail-sticky{position:static} }
/* The reader's default-opener note. Quiet but not fine print: it explains a
choice the platform made, so it has to be readable, and it sits directly
under the bar it explains rather than floating. */
.lead-note{max-width:62ch;margin:.5rem 0 var(--s3);color:var(--ink-soft);
font-size:var(--t-sm);line-height:1.65}
/* ── THE CONTINUOUS READER ─────────────────────────────────────────────────
One narrow central measure. The Arabic is centred and dominant with its
translation directly beneath it: they were a right column and a left column,
which made the eye cross the page between a verse and its rendering.
NO justify, NO kashida, NO transform on the Qur'anic text. `text-align:
center` places the block; it stretches no glyph and substitutes none. */
.rd-reader{padding:0}
/* TWO MEASURES, DELIBERATELY DIFFERENT. The reading column is narrow because a
long line is hard to read; the header and the control bar are not reading
matter and are set wider, as the mock has them, so the modes and the
translation picker sit on one line instead of wrapping onto two. */
.rdr-wrap{max-width:1060px;margin:0 auto;padding:0 var(--s3)}
.rdr-column>.rdr-wrap{max-width:860px}
.rdr-head{background:var(--paper-inset);border-bottom:1px solid var(--line);
padding:var(--s4) 0 var(--s3)}
.rdr-eyebrow{margin:0 0 .35rem;font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.12em;color:var(--bronze)}
.rdr-head-row{display:flex;flex-wrap:wrap;gap:var(--s2);
align-items:flex-start;justify-content:space-between}
.rdr-title h1{margin:0;display:flex;align-items:baseline;gap:var(--s3);
flex-wrap:wrap}
.rdr-title-ar{font-size:.8em;color:var(--ink-soft)}
.rdr-meta{margin:.25rem 0 0;color:var(--ink-faint);font-size:var(--t-sm)}
.rdr-head-actions{display:flex;gap:.5rem}
.rdr-btn{display:inline-flex;align-items:center;padding:.5rem .9rem;
border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);
color:var(--ink);text-decoration:none;font-size:var(--t-sm);cursor:pointer}
.rdr-btn:hover{border-color:var(--ink)}
/* `hidden` must win over display:inline-flex, or a script-revealed control shows
with scripting off (the reader's transliteration toggle, 2026-09-15). */
.rdr-btn[hidden]{display:none}
.rdr-controls{background:var(--paper-inset);border-bottom:1px solid var(--line);
padding:var(--s2) 0}
/* THE DISCOVERABILITY HINT (amendment M3, order c0fc0213): as lightweight as
the row it sits above - one line, the row's own inset background one
shade lighter (paper-raised) so it reads as a note, not an alert; a
single dismiss control, no icon, no colour coding. */
.rdr-hint{display:flex;align-items:center;justify-content:space-between;
gap:var(--s2);margin:0 0 var(--s2);padding:.5rem var(--s3);
background:var(--paper-raised);border:1px solid var(--line);border-radius:2px}
.rdr-hint[hidden]{display:none}
.rdr-hint-text{margin:0;font-size:var(--t-sm);color:var(--ink-soft)}
.rdr-hint-x{border:0;background:transparent;color:var(--ink-faint);
font-size:1.1rem;line-height:1;padding:.2rem .5rem;cursor:pointer}
.rdr-hint-x:hover{color:var(--ink)}
/* align-items:flex-end (order c0fc0213, amendment M2, was center): .rdr-picker's
three groups are now label-above/control-below and taller than .rdr-modes'
single-height tabs - flex-end lines up the tabs with the groups' controls,
the same visual baseline, instead of centering a short row against a
taller one. */
.rdr-controls-row{display:flex;flex-wrap:wrap;gap:var(--s2);
align-items:flex-end;justify-content:space-between}
.rdr-modes{display:flex;gap:.4rem}
.rdr-mode{padding:.5rem .9rem;border:1px solid var(--line-strong);
border-radius:2px;background:var(--paper);color:var(--ink);
text-decoration:none;font-size:var(--t-sm)}
.rdr-mode[aria-current="page"]{background:var(--ink);color:var(--paper);
border-color:var(--ink)}
/* M2: was a single inline row (align-items:center, one shared gap) - now
three .rdr-ctl groups sit side by side, each its own label-above/
control-below column. */
/* align-items:flex-start, not flex-end: Transliteration's caption makes its
own group taller than Translation's or Lead-with's - flex-end would align
the three groups' BOTTOMS, pushing the shorter groups' labels down out of
line with Transliteration's. flex-start keeps all three labels on one
shared top line instead - found by screenshot, not assumed. */
.rdr-picker{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.3rem;margin:0}
/* A SELECT, NOT A ROW OF NAMES. A dropdown has no first item on the page, only
a current value, so no translator sits at the head of the bar on every page
in the corpus. */
.rdr-select{padding:.5rem 1.9rem .5rem .7rem;border:1px solid var(--line-strong);
border-radius:2px;background:var(--paper);color:var(--ink);
font-size:var(--t-sm);font-family:inherit;-webkit-appearance:none;
appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lead-note{max-width:860px;margin:var(--s2) auto 0;padding:0 var(--s3);
color:var(--ink-faint);font-size:var(--t-sm);line-height:1.6}
.rdr-column{padding:var(--s4) 0 var(--s5,3rem)}
/* NO PER-VERSE HIGHLIGHT. Every verse carries the same ground; the tint that
used to band alternate verses made an arbitrary half of the text look
marked. A rule separates them instead, and only a verse the reader has
actually targeted is highlighted. */
.rdr-verse{max-width:860px;margin:0 auto;padding:var(--s3) var(--s3) var(--s4);
border-bottom:1px solid var(--line);background:none}
.rdr-verse:target{background:var(--bronze-wash)}
.rdr-verse-top{display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:var(--s2)}
.rdr-ref{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--bronze);
text-decoration:none}
.rdr-ref:hover{text-decoration:underline}
.rdr-copy{border:0;background:none;padding:0;cursor:pointer;
font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint)}
.rdr-copy:hover{color:var(--ink)}
.rdr-ar{margin:0 0 var(--s2);text-align:center;font-size:2rem;line-height:2.1;
color:var(--ink);text-align-last:center}
.rdr-tr{margin:.6rem 0 .2rem;font-size:1.15rem;line-height:1.7;color:var(--ink)}
.rdr-tr.small{font-size:1rem}
.rdr-by{margin:0;font-family:var(--f-mono);font-size:var(--t-xs);
color:var(--ink-faint)}
.rdr-tr.placeholder{color:var(--ink-faint);font-style:italic}
/* THE TRANSLITERATION IS ONE GLOBAL TOGGLE, not a label under every verse. */
.rdr-verse .tl{margin:0 0 .4rem}
/* THE TRANSLITERATION SITS JUST UNDER THE TRANSLATION, not at footnote size.
It was var(--t-sm) - 13.6px against an 18.4px translation, 74% - which is
this site's caption setting, and it read as a label rather than as something
anyone would follow along in. It is a reading aid, so it has to be readable.
IT MUST NOT REACH THE TRANSLATION. The hierarchy is Arabic first, the chosen
translation as the main line, the romanisation beneath it: 1.05rem against
18.4px is 91% - close enough to read comfortably, far enough to stay
subordinate. Italic and --ink-faint are kept, and they carry the
subordination now that size no longer does it alone.
line-height is set here because redesign.css's .tl-track supplies
var(--rd-lh-snug), 1.375 - tight enough at 13.6px and cramped at 16.8. */
.rdr-verse .tl-track{margin:0;font-style:italic;color:var(--ink-faint);
font-size:1.05rem;line-height:1.55}
:root[data-translit-show="off"] .rdr-verse .tl{display:none}
/* THE SECOND POSITION, RAISED - REMOVED (order c0fc0213, amendment M, M1).
Board order 540bb98d amendment G/H raised transliteration's font-size
whenever it occupied the default state's second position. M1 (below)
moves transliteration to THIRD in the default state - the position it
already occupied, at a smaller size, when Translation led (amendment E3).
After M1 there is no state left where transliteration occupies second
position at all (Easy-read leads puts Arabic second, not transliteration)
- amendment G/H's whole premise is gone, not just its value. Folded into
E3's third-position rule instead, below, at the same size, rather than
left as a dead selector nothing can ever match. */
/* ── VERSE LINE ORDER, READER-CHOSEN (board order 540bb98d) ─────────────────
Three lines - Arabic, transliteration, translation - lead a verse. The
markup is NEVER reordered: verify/layer_type_gate.py's L6 check reads
compareDocumentPosition, the actual DOM tree, which CSS can never affect;
a template reorder would break the wording-verdict adjacency it proves,
and CSS `order` cannot (board 540bb98d amendment A). Every direct child of
`.rdr-verse` gets an explicit order, not just the three lines - a child
left out defaults to `order:0` and jumps to the front. The six: the action
row (.va), Arabic (.rdr-ar), transliteration (.tl, absent on a verse with
no transliteration row), the wording verdict (.L-verdict, absent below the
divergence cut), the translation(s) (.rdr-tr + .rdr-by, one pair per
translator shown at this position, or .empty when none is recorded), and
the evidence row (.rdr-evidence). Driven by [data-verse-lead] on ,
set before first paint by base.html precisely as data-translit is; absent
(or "arabic") is the DEFAULT state - changed by order c0fc0213 amendment
M1, below.
POSITION CONVENTION:
Arabic leads (DEFAULT - changed by M1, order c0fc0213):
Arabic, translation, transliteration
Easy-read leads (unchanged, amendment E):
transliteration, Arabic, translation
Translation leads (unchanged, amendment E):
lead translation, Arabic, transliteration,
then the remaining translations (D3)
M1: Anwar's ruling, after looking at the live reader - amendment G/H's
larger transliteration meant a reader who came for the meaning met the
pronunciation aid first AND larger. Fixed by moving translation to
second and transliteration to third, IN THE DEFAULT STATE ONLY - this
supersedes amendment E's "transliteration always adjacent to Arabic"
reasoning for this one state; the other two states are unchanged (both
still keep Arabic second and transliteration adjacent to it, exactly as
amendment E ruled). Translation now occupies second position for the
first time under this feature - see the font-size note further down. */
:root .rdr-verse{display:flex;flex-direction:column}
:root .rdr-verse>.va{order:0}
:root .rdr-verse>.rdr-ar{order:10}
:root .rdr-verse>.L-verdict{order:19}
:root .rdr-verse>.rdr-tr,:root .rdr-verse>.rdr-by,:root .rdr-verse>.empty{order:20}
:root .rdr-verse>.tl{order:30}
:root .rdr-verse>.rdr-evidence{order:40}
/* DEFAULT STATE ONLY (Arabic leads), M1 REWRITE (order c0fc0213). The rules
this replaced were DOM-sibling selectors (`.tl + X`), safe only because
DOM order and visual order were identical in the old default. M1 breaks
that: `.tl` now visually moves past the whole translation cluster while
staying in the SAME place in the markup (between Arabic and the verdict/
translations) - a DOM-sibling selector tuned for "the gap after a
visible .tl" would now fire on the wrong visual pair and misapply its
value, the exact class of bug amendment D's C2 fix closed once already
(see that comment, below). Flat rules instead, scoped to this state,
the same pattern the Easy-read-leads block already uses for the
identical reason (its own comment, below): Arabic (order 10) is the
verdict/translation cluster's only possible visual predecessor here,
regardless of whether `.tl` renders in the DOM between them or not.
`.rdr-ar`'s own native, non-zero bottom margin supplies the whole gap -
unedited, the same value the old default used whenever `.tl` was
DOM-absent, now used unconditionally, proved not assumed (B1's control,
re-aimed). `.tl`'s own margin-top supplies the gap AFTER the cluster; its
margin-bottom stays zeroed by the universal rule below, so the gap before
evidence is unchanged (24px, evidence's own margin-top alone) whether
`.tl` renders there or is hidden. */
:root:not([data-verse-lead]) .rdr-verse>.L-verdict,
:root:not([data-verse-lead]) .rdr-verse>.rdr-tr,
:root:not([data-verse-lead]) .rdr-verse>.empty,
:root[data-verse-lead="arabic"] .rdr-verse>.L-verdict,
:root[data-verse-lead="arabic"] .rdr-verse>.rdr-tr,
:root[data-verse-lead="arabic"] .rdr-verse>.empty{margin-top:0}
:root:not([data-verse-lead]) .rdr-verse>.rdr-tr ~ .rdr-tr,
:root[data-verse-lead="arabic"] .rdr-verse>.rdr-tr ~ .rdr-tr{margin-top:.6rem}
:root:not([data-verse-lead]) .rdr-verse>.tl,
:root[data-verse-lead="arabic"] .rdr-verse>.tl{margin-top:1rem}
:root .rdr-verse>.tl{margin-bottom:0}
:root .rdr-verse>.empty{margin-bottom:0}
/* AMENDMENT D2 (D4/D5), CLOSED: transliteration hidden
(:root[data-translit-show="off"] .rdr-verse .tl{display:none}, style.css above)
removes .tl from the flex flow the SAME WAY display:none always has, but
without changing which DOM element is .tl's next sibling - so the three
rules above keyed to ".tl + X" fired with the "transliteration shown" number
even when it contributed nothing. These three mirror them for exactly that
case, and WIN: an attribute selector is more specific than the unconditional
one above, regardless of source order. Proved in D4's before/after capture. */
:root[data-translit-show="off"] .rdr-verse>.tl + .L-verdict{margin-top:0}
:root[data-translit-show="off"] .rdr-verse>.tl + .rdr-tr{margin-top:0}
:root[data-translit-show="off"] .rdr-verse>.tl + .empty{margin-top:0}
/* AMENDMENT E2, RE-DERIVED (was D5): Arabic's own native bottom margin
(1rem) is zeroed whenever Arabic is not leading, in BOTH non-default
states, but for two DIFFERENT reasons now that Arabic is never last:
lead=translit: Arabic sits BETWEEN transliteration and the wording
verdict/translation - zeroing it lets the verdict/translation's own
margin-top (below) be the whole gap, undoubled. Arabic is never
adjacent to the evidence row in this state at all.
lead=translation: Arabic sits between the lead translation and
transliteration for the same reason - AND, when transliteration is
hidden (display:none) AND no second translation is shown, Arabic
becomes the evidence row's direct predecessor. Both reasons need the
same zero, so one rule still covers both.
Proved for all six (state x translit-show) combinations in amendment E's
report, not assumed from amendment D's now-outdated reasoning. */
:root[data-verse-lead="translit"] .rdr-verse>.rdr-ar{margin-bottom:0}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-ar{margin-bottom:0}
/* EASY-READ LEADS: (transliteration, Arabic, translation). Arabic is a new
pair on both sides here (nothing preceded or followed it before amendment
E), so it gets the same "not leading" 1rem this whole design already uses.
Verdict and translation are given FLAT margins, not DOM-sibling
selectors: Arabic (order 20) is their only possible visual predecessor
when verdict is present, or when it is absent and translation follows
Arabic directly - true regardless of whether transliteration rendered,
because transliteration sits at order 10, before Arabic, never between
Arabic and what follows it. A DOM-sibling selector here would silently
pick up transliteration as Arabic's stand-in on a verse where it exists
but isn't visually adjacent to what it precedes - the exact bug amendment
D's C2 fix had to close once already; flat rules for this state avoid it
from the start. The verdict-present override IS a DOM selector
(.L-verdict + .rdr-tr), and safely so: verdict's DOM adjacency to
translation never depends on transliteration at all. */
:root[data-verse-lead="translit"] .rdr-verse>.tl{order:10}
:root[data-verse-lead="translit"] .rdr-verse>.rdr-ar{order:20;margin-top:1rem}
:root[data-verse-lead="translit"] .rdr-verse>.L-verdict{order:29;margin-top:1rem}
/* Order 29/30 restated explicitly here (M1, order c0fc0213): the base rule
two blocks up changed to put the translation cluster at order 20 for the
new default, so this state can no longer fall through to it - unchanged
visual result, just no longer borrowed from a value M1 repurposed. */
:root[data-verse-lead="translit"] .rdr-verse>.rdr-tr,
:root[data-verse-lead="translit"] .rdr-verse>.rdr-by,
:root[data-verse-lead="translit"] .rdr-verse>.empty{order:30}
:root[data-verse-lead="translit"] .rdr-verse>.rdr-tr,
:root[data-verse-lead="translit"] .rdr-verse>.empty{margin-top:1rem}
:root[data-verse-lead="translit"] .rdr-verse>.L-verdict + .rdr-tr,
:root[data-verse-lead="translit"] .rdr-verse>.L-verdict + .empty{margin-top:0}
/* A repeat translation ("all" mode, more than one shown) is not the first
occupant of this slot and must not get the general rule's 1rem - found
by measurement, not assumed, the same way D3's equivalent gap was found
in amendment C: the general rule above has no `~` distinction, so without
this it silently applied the "first" margin to every one shown. */
:root[data-verse-lead="translit"] .rdr-verse>.rdr-tr ~ .rdr-tr{margin-top:.6rem}
/* TRANSLATION LEADS: (lead translation, Arabic, transliteration, then any
remaining translations - D3 below). Verdict and the lead translation both
sit in the leading slot (whichever of them DOM-renders there gets
margin-top:0; both do, so there is nothing to choose between). Arabic and
transliteration are both "not leading" 1rem pairs, and both are FLAT for
the same reason as the Easy-read state above: nothing else can sit
between Arabic and transliteration once ordered 20 and 30, regardless of
what else is on the page (a repeated translation is a full tier below
both, at order 30 tied with transliteration, sorted after it by DOM
order - see D3). */
:root[data-verse-lead="translation"] .rdr-verse>.L-verdict{order:9;margin-top:0}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-tr,
:root[data-verse-lead="translation"] .rdr-verse>.empty{order:10;margin-top:0;font-size:2rem;line-height:1.35}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-by{order:10}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-ar{order:20;margin-top:1rem}
:root[data-verse-lead="translation"] .rdr-verse>.tl{order:30;margin-top:1rem}
/* D3, UNCHANGED IN RULE, RENUMBERED IN CONTEXT: on a verse with more than one
translation shown unfolded ("all" mode), leading with Translation must
promote only ONE of them - "the lead translation" for THIS purpose is
purely mechanical (whichever renders first, today newest-publication-
first; the platform still ranks nothing editorially) - never every one.
`.rdr-tr ~ .rdr-tr` matches a translation preceded by ANOTHER translation
sibling: exactly the second and later ones, never the first. Reset to
order 30 - tied with transliteration, sorted after it because the
translation loop is always DOM-later than .tl in the template - native
margin (.6rem, unedited) and native 1.15rem size. Easy-read leads needs no
equivalent reset: translation is already third there by the unconditional
base rule two blocks up, never promoted, so there is nothing to undo. */
:root[data-verse-lead="translation"] .rdr-verse>.rdr-tr ~ .rdr-tr{
order:30;margin-top:.6rem;font-size:1.15rem;line-height:1.7}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-tr ~ .rdr-tr + .rdr-by{order:30}
/* D2, THE ARABIC FLOOR: 1.45rem, in both themes and at both widths, unchanged
by amendment E (E4: position changed, not size) - it is not a guess, but
the exact size this platform already ships and has accepted for Arabic
today, at the narrowest width, on the longest verses in the corpus (the
mobile rdr-ar-long value above, 2026-09-14 reading-polish). It wins over
the one raw tier Arabic could otherwise land on now that it is never
third (second would be 1.05rem, well under the floor) - so Arabic never
renders below 1.45rem in ANY lead state, desktop or phone. */
:root[data-verse-lead="translit"] .rdr-verse>.rdr-ar,
:root[data-verse-lead="translation"] .rdr-verse>.rdr-ar{font-size:1.45rem;line-height:1.8}
/* D1, THE LEAD TIER, RESTATED FOR THIS STATE: transliteration leading gets
the same 2rem Arabic itself leads at by default - size follows position,
not identity (unchanged from amendment D). */
:root[data-verse-lead="translit"] .rdr-verse>.tl .tl-track{font-size:2rem;line-height:1.3}
/* E3, THE TIERS FALL WITH POSITION - per element, not per raw position
number, EXTENDED TO THE DEFAULT STATE BY M1 (order c0fc0213), RAISED BY
AMENDMENT P (order c0fc0213, Anwar's ruling: Modest, 1.05rem/.95rem).
Transliteration is the one line that visits all three positions - 2rem
leading, 1.05rem second (amendment D - the SAME number, not a
coincidence: Anwar's ruling here is "the size third position already
used to be, second position's own old value, applied to third" -
confirmed still clears the ceiling below), 1.15rem third (the amendment D
bug: BIGGER than second, borrowed from translation's own third-position
identity) - fixed in amendment E with its own, smaller value, now raised
again here. M1 moved the default state's transliteration to this SAME
third position (Translation leads and the new default share the shape
"transliteration demoted, nothing else needs to accommodate it"), so it
keeps the identical, shared value rather than a separate tier - the rule
is deliberately NOT split: Translation-leads' own transliteration rises
with it, Anwar's ruling, same line/same job/same position. Still smaller
than translation's own second-position size in the default state (native/
fluid, ~19px desktop / ~17.17px phone, unedited by this order) - confirmed
by measurement in amendment P's report, not assumed. */
:root:not([data-verse-lead]) .rdr-verse>.tl .tl-track,
:root[data-verse-lead="arabic"] .rdr-verse>.tl .tl-track,
:root[data-verse-lead="translation"] .rdr-verse>.tl .tl-track{font-size:1.05rem;line-height:1.4}
/* THE CONTROL ROW, RESTRUCTURED (order c0fc0213, amendment M2). Anwar's
complaint after looking at the live reader: four different control
shapes in one row with no shared structure - a dropdown, a toggle
button, a loose caption, and a ragged three-button group; "Lead with"
wrapping onto two lines at the row's squeezed right edge; the selected
state reading as a thin outline against the "Read" tab's filled block
two rows above. Replaces .rdr-lead-line/.rdr-lead-line-k/.lll-btn below.
Three groups now, each the same shape - label above (.rdr-ctl-k, same
caption style as TRANSLATION already used), control below - so
Translation, Transliteration and Lead-with read as equal, not as one
designed control and two later ones bolted on. */
.rdr-ctl{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.rdr-ctl-k{font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);
white-space:nowrap}
/* The caveat moves here, under the control it qualifies, as its caption -
not reworded, per the order; it no longer floats loose mid-row. */
.rdr-ctl-caption{margin:0;max-width:14rem;font-family:var(--f-sans);
font-size:.75rem;line-height:1.3;color:var(--ink-soft)}
/* THE LEAD-WITH GROUP: one bordered box, not three separate buttons, so
"equal-width buttons in the group" is structural, not three independent
widths that happen to look close. Selected state uses --ink/--paper - the
EXACT pair .rdr-mode[aria-current="page"] already uses for the Read tab,
not --paper-raised (the near-identical but not-identical token the old
.lll-btn used) - so there is no longer any token-level difference from
the site's own established selected pattern to measure, not just a
visual approximation of it.
FIX (order 7be33ae6 amendment A): flex:1 1 0 alone does NOT divide the
box evenly - flex items default to min-width:auto, which combined with
white-space:nowrap floors each button at its own text's natural width
("Arabic" narrower than "Easy-read" or "Translation"), and nothing here
forced .rdr-ctl-group wider than the sum of those floors (its parent,
.rdr-ctl, uses align-items:flex-start, so nothing stretches it) - so
flex-grow never had slack to distribute. Measured live: 66/91/96px, not
equal. width:19.5rem on the group gives flex-grow something to work
with; min-width:0 on the buttons removes the content floor so growth
actually reaches all three.
SECOND BUG, FOUND WHILE VERIFYING THE FIRST FIX (still this order, not
yet deployed): the group's own 1px border consumes 2px from its content
box (1px each side) before that content reaches the flex children -
312px (19.5rem) minus that 2px is 310px, which does not divide evenly
by 3, so the browser's own remainder rounding gave two buttons ~104px
and the third ~103px - closer than the original bug, but still
measurably not equal (confirmed by getBoundingClientRect and
offsetWidth both, not assumed). A first attempt moved the border to an
inset box-shadow (no layout footprint) - that fixed the width, but an
auto-height box's rendered height includes its border, so removing the
border also removed 2px of HEIGHT, moving the control row and the verse
below it - a regression this order explicitly says to halt on, caught
by measuring the row and the verse block, not just the buttons. Kept
the real border (height unchanged, exactly as before) and sized the
width to already account for what it consumes instead: 314px (19.625rem)
outer, minus the 2px border, is 312px of content - divisible by 3 with
nothing left over. */
.rdr-ctl-group{display:flex;border:1px solid var(--line-strong);
border-radius:2px;overflow:hidden;width:19.625rem}
.rdr-ctl-btn{flex:1 1 0;min-width:0;padding:.5rem .7rem;border:0;
border-right:1px solid var(--line-strong);background:var(--paper);
color:var(--ink);font-family:var(--f-sans);font-size:var(--t-sm);
text-align:center;white-space:nowrap;cursor:pointer}
/* THIRD BUG, found verifying the second fix (still this order, still not
deployed): even at 312px (evenly divisible by 3) with min-width:0, the
three buttons still measured 104.33/104.34/103.33px, not equal -
isolated by testing one variable at a time to the LAST button's
border-right:0 (the other two keep their divider at 1px). An item with
1px LESS border than its siblings gets 1px MORE of the grown space
under flex-basis:0 - border-box or not, Chromium's flex distribution
still weighs it in. Fixed by keeping border-right at 1px on every
button, transparent (not 0) on the last - same layout contribution,
invisible paint, so the drawn result is identical to before (no visible
line after the last button) while the flex math sees three equal
boxes. Confirmed exactly equal (104/104/104, 85/85/85 at phone) by
getBoundingClientRect, not merely close. */
.rdr-ctl-btn:last-child{border-right:1px solid transparent}
.rdr-ctl-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);
border-color:var(--ink)}
/* THE EVIDENCE ROW: below the verse, closed until asked for. */
.rdr-evidence{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}
.rdr-ev{flex:1 1 100%}
.rdr-ev>summary{display:inline-block;cursor:pointer;font-size:var(--t-sm);
color:var(--lapis,#31556b);text-decoration:underline;
text-underline-offset:3px;list-style:none}
.rdr-ev>summary::-webkit-details-marker{display:none}
.rdr-evidence>.rdr-ev{flex:0 0 auto}
.rdr-ev[open]{flex:1 1 100%}
.rdr-ev-body{margin:var(--s2) 0 0}
.rdr-ed{padding:var(--s2) var(--s3);background:var(--paper-inset);
border-left:3px solid var(--lapis,#31556b)}
.rdr-ed-k{margin:0 0 .4rem;font-family:var(--f-mono);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)}
.rdr-ed-note{margin:0 0 .5rem;color:var(--ink-soft);font-size:var(--t-sm)}
.rdr-ed-link{margin:0;font-size:var(--t-sm)}
.rdr-src-line{margin:0 0 .4rem;font-size:var(--t-sm);color:var(--ink-soft)}
.rdr-src-list{margin:0;padding-left:1.1rem;font-size:var(--t-sm);
color:var(--ink-faint)}
@media (max-width:720px){
.rdr-ar{font-size:1.6rem;line-height:1.95}
.rdr-tr{font-size:1.05rem}
/* The translation drops to 16.8px here, so the romanisation drops with it:
1.05rem would have EQUALLED the translation on mobile and collapsed the
hierarchy the desktop value exists to keep. */
.rdr-verse .tl-track{font-size:.95rem}
.rdr-controls-row{align-items:stretch}
/* .rdr-picker's own flex-wrap:wrap is now unconditional (M2, order c0fc0213)
- the mobile-only duplicate this line used to be is removed. */
.rdr-ctl-group{width:100%}
/* D1/D2/D3/E3, MOBILE (board order 540bb98d, amendment E). The desktop
tier rules above carry no media condition, so at this width they would
win by specificity over the two bare rules just above and apply their
DESKTOP numbers unchanged - wrong for the lead tier (2rem does not
belong at 390px, any more than Arabic's own 2rem does) and wrong for
D3's repeats, whose "native" size on THIS width is 1.05rem, not the
desktop 1.15rem the un-scoped D3 rule assumes. Every rule here only
needs to beat its OWN desktop counterpart, which shares its exact
selector, so it wins by being later in the cascade, not by added
specificity. The floor (1.45rem) is deliberately NOT restated here:
D2's whole claim is that it holds at every width, so it is written once,
unconditionally, above.
Easy-read leads needs only its own lead-tier rule: translation is
third there under amendment E and was never given a desktop override
either (D1's comment above - it uses its native 1.15rem/1.05rem, which
is already the right number at every width, nothing to restate).
Translation leads needs its lead-tier rule AND transliteration's E3
value - smaller than its own second-position mobile size (.95rem, D1
above), not equal to it, so .875rem, not .95rem: the same bug D1's tiers
had would reappear at this width otherwise. */
:root[data-verse-lead="translit"] .rdr-verse>.tl .tl-track{font-size:1.6rem;line-height:1.15}
:root[data-verse-lead="translation"] .rdr-verse>.rdr-tr,
:root[data-verse-lead="translation"] .rdr-verse>.empty{font-size:1.6rem;line-height:1.2}
/* M1 (order c0fc0213): the default state's transliteration joins Translation-
leads' third-position value at this width too - same reasoning as the
desktop rule above. RAISED BY AMENDMENT P (Anwar's ruling: Modest,
1.05rem/.95rem) - .95rem here, not .875rem, mirroring the desktop raise. */
:root:not([data-verse-lead]) .rdr-verse>.tl .tl-track,
:root[data-verse-lead="arabic"] .rdr-verse>.tl .tl-track,
:root[data-verse-lead="translation"] .rdr-verse>.tl .tl-track{font-size:.95rem}
/* D3's reset, restated for this width: same higher-specificity selector as
the desktop version (one more .rdr-tr than the general rule just above),
so it wins here for the same structural reason, at the width's own
native translation size (1.05rem here, not desktop's 1.15rem). Easy-read
leads needs no equivalent: nothing promotes translation there, so there
is nothing to reset (D3's own comment, desktop block above). */
:root[data-verse-lead="translation"] .rdr-verse>.rdr-tr ~ .rdr-tr{font-size:1.05rem}
}
/* READING PROGRESS. Sticky, because an indicator that scrolls away cannot
indicate anything on scroll. Quiet: it is orientation, not content, and must
never compete with the verse beneath it. */
.rdr-progress{position:sticky;top:0;z-index:5;background:var(--paper);
border-bottom:1px solid var(--line);padding:.55rem 0}
.rdr-progress-row{display:flex;align-items:center;gap:var(--s2)}
.rdr-progress-k,.rdr-progress-pct{margin:0;font-family:var(--f-mono);
font-size:var(--t-xs);color:var(--ink-faint);white-space:nowrap}
.rdr-progress-bar{flex:1 1 auto;height:2px;background:var(--line);
border-radius:2px;overflow:hidden}
.rdr-progress-bar>span{display:block;height:100%;background:var(--bronze);
transition:width .18s ease}
@media (max-width:720px){
.rdr-progress-row{gap:.6rem}
}
/* ── EDITORIAL LEAD ─────────────────────────────────────────────────────────
A verbatim span of the study's signed editorial, promoted to the top. It is
deliberately QUIETER than the findings block below it: the evidence still
leads the page, and this is an orientation the reader may take or skip. Not
a summary and not a verdict - see the template comment and
app/editorial_lead.py for why the distinction is load-bearing. */
.rd-ed-lead{margin:var(--s3) 0 var(--s4);padding:0 0 0 var(--s3);
border-left:3px solid var(--line-strong)}
.rd-ed-lead .rd-eyebrow{margin:0 0 .3rem;font-size:.78rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-soft)}
.rd-ed-lead-q{margin:0;border:0;padding:0}
.rd-ed-lead-q p{margin:0;font-size:1.12rem;line-height:1.5;color:var(--ink)}
.rd-ed-lead-by{margin:.5rem 0 0;font-size:.86rem;color:var(--ink-soft)}
.rd-ed-lead-by a{white-space:nowrap}
@media (max-width:640px){
.rd-ed-lead{padding-left:var(--s2)}
.rd-ed-lead-q p{font-size:1.04rem}
}
/* THE SURAH LANDING'S ENTRY POINT ON /library. Additive only: app/static is read from
disk on every request, so it goes live at the MERGE, before the templates do. A rule
that only styles a class no served template yet emits is inert until the reload. */
.card-about{display:block;margin:-.35rem .9rem .9rem;font:400 .8125rem/1.3 var(--sans);
color:var(--lapis);text-decoration:none;border-top:1px solid var(--rule);padding-top:.55rem}
.card-about:hover,.card-about:focus-visible{text-decoration:underline}
.card-about:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ── EDITORIAL-MODEL SCAFFOLD (branch editorial-model, 2026-09-13) ────────────
Chrome for the 7-part core, the sublabel, the collapsed editorial record and the
sidebar conclusion. Rendered only for a study with an app/study_model.json record.
NO PIGMENT: the parts are editorial structure, not provenance. NO BORDER RULES: a
line-strong rule on white measured 1.84:1 in F3, so separation here is space and
type. Ink tokens only - ink on paper-raised 15.9:1, ink-soft 6.07:1. */
.rd-model-sub{display:block;margin-top:.15rem;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.06em;color:var(--ink-soft)}
.rd-part{margin:var(--s3) 0 0}
.rd-part-h{margin:0 0 .3rem;font-family:var(--f-mono);font-size:var(--t-sm);font-weight:400;
letter-spacing:.12em;font-variant-caps:all-small-caps;color:var(--ink-soft)}
.rd-part .tr{margin-top:0}
.rd-ed-record{margin:var(--s3) 0 var(--s2)}
.rd-ed-record>summary{cursor:pointer;font-family:var(--f-mono);font-size:var(--t-xs);
letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.rd-ed-record>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rd-ed-record-dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:var(--s1) 0 0;
font-size:var(--t-sm)}
.rd-ed-record-dl dt{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft)}
.rd-ed-record-dl dd{margin:0;color:var(--ink)}
.rd-rail-conclusion-t{margin:.35rem 0 .5rem;font-size:var(--t-sm);line-height:1.5;color:var(--ink)}
.rd-rail-conclusion-link{margin:0;font-size:var(--t-xs)}
/* ── READER CHROME BATCH (branch editorial-model, 2026-09-13) ───────────────────
Board order items 3-10. Ink tokens only; the one rule that draws a line on a
pressed Save uses ink-soft (6.07:1), never line-strong (1.84:1 measured in F3). */
/* 4 · THE ACTION ROW: 44px targets at body size, one position on both surfaces. */
.va{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0 0 var(--s2)}
.va-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
padding:0 .75rem;font-family:var(--f-sans);font-size:var(--t-base);line-height:1.2;color:var(--ink);
background:transparent;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
text-decoration:none}
.va-btn:hover{text-decoration:underline}
.va-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.va-btn[aria-pressed="true"]{border-color:var(--ink-soft)}
.va-ref{font-family:var(--f-mono)}
.va-count{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
/* ONE ROW AT PHONE WIDTH TOO. At 390px the first build wrapped Save to a second line
(captures, 2026-09-13). Tighter side padding keeps every target >= 44px. */
@media (max-width:720px){ .va{gap:0 .1rem} .va-btn{padding:0 .5rem} }
/* 7 · ONE AXIS FOR ARABIC AND ENGLISH on the reader: every block in a verse shares the
68ch measure, centred. On main the English stopped 132px short of the Arabic at 1280. */
.rdr-verse>.va,.rdr-verse>.rdr-ar,.rdr-verse>.tl,.rdr-verse>.rdr-tr,.rdr-verse>.rdr-by,
.rdr-verse>.rdr-evidence,.rdr-verse>.empty{max-width:42.5rem;margin-left:auto;margin-right:auto}
:root .rdr-verse>.L-verdict.L-verdict{max-width:42.5rem;margin-left:auto;margin-right:auto}
/* A ROOT-RELATIVE WIDTH, NOT 68ch. `ch` is measured in each element's own font, so on
40px Arabic 68ch is wider than the column and the cap did nothing - the first build
centred the English and left the Arabic 132px wider (reader_chrome_gate, 2026-09-13).
42.5rem is the 680px the English column already had. */
/* 8 · LONG VERSES, CONTINUOUS READER ONLY: line-height 2.0 and a lower size cap. */
/* THE LAYER SYSTEM SIZES ARABIC FROM layers.css, which loads after this file with a
:root-anchored selector, so a plain class rule loses. This selector outranks it.
SCOPED TO ARABIC LEADING (board order 540bb98d, D1/D2): this reduction exists to
ease line-height on a long ayah at the LEAD size (2rem); it never applied to any
other size before this order, and Arabic not leading is already at the D2 floor
(1.45rem) - lower than this rule's own mobile value - so extending it there would
fight the floor rather than help it. */
:root:not([data-verse-lead]) .rdr-verse>.rdr-ar.rdr-ar-long.L-ar.L-ar,
:root[data-verse-lead="arabic"] .rdr-verse>.rdr-ar.rdr-ar-long.L-ar.L-ar{font-size:1.75rem;line-height:2}
@media (max-width:720px){
:root:not([data-verse-lead]) .rdr-verse>.rdr-ar.rdr-ar-long.L-ar.L-ar,
:root[data-verse-lead="arabic"] .rdr-verse>.rdr-ar.rdr-ar-long.L-ar.L-ar{font-size:1.45rem;line-height:2}
}
/* 3 · the all-mode link that replaces the duplicate fold */
.rdr-ev-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-sm)}
/* 9 · open/close arrows on the reader's bottom folds, as on "Analysis details" */
.rdr-ev>summary::before{content:"\25B8";display:inline-block;width:1.1em;color:var(--ink-soft)}
.rdr-ev[open]>summary::before{content:"\25BE"}
/* 10 · the verse page's context panel, folded closed */
.rd-context-fold>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;min-height:44px;
cursor:pointer;list-style:none}
.rd-context-fold>summary::-webkit-details-marker{display:none}
.rd-context-fold>summary::before{content:"\25B8";color:var(--ink-soft)}
.rd-context-fold[open]>summary::before{content:"\25BE"}
.rd-context-fold>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* THE CARE RESOURCE LINE (eval ruling 11; board rulings 2026-09-13). A quiet supportive note, not an alarm: the
note's own size and ink, a thin neutral rule on the left, no fill, no bold, no warning colour, no icon. It sits
under a signed-study group's explanatory note when that group holds a GATED/CARE Mental wellbeing or Death & dying
study. The link keeps the text's colour and is marked by its underline alone. */
.care-line{font-size:var(--t-sm);line-height:1.55;color:var(--ink-soft);
margin:var(--s1) 0 var(--s2);padding:.1rem 0 .1rem .75rem;
border-left:2px solid var(--line-strong);max-width:var(--measure)}
/* A COMFORTABLE TAP TARGET without moving a word: vertical padding on an inline box does not change the line box, so
the text sits exactly where it did, while the link's hit area grows to at least 44px tall on a phone. */
.care-line a{color:inherit;text-decoration:underline;text-underline-offset:3px;padding:.875rem 0}
.care-line a:hover{color:var(--ink)}
/* CANON-WRAP-01 (board, 5 Oct 2026): on /canon a sha256 digest in a source note and a download URL in a blocked item are single
unbreakable runs, which widened the page to 546px at a 390 phone (pre-existing). They may now break anywhere, in the notes and the
blocked-item lines of this page only. Styling only: no text, digest or URL changes. */
main.canon .note, main.canon .blocked { overflow-wrap: anywhere; }