/* ============================================================================
   Quraan Journey v2 — cinematic
   ----------------------------------------------------------------------------
   Full-bleed generated scenes, type set large over them, and content that rises
   out of the artwork rather than sitting in boxes beside it.

   Two earlier attempts were rejected: the first kept main's architecture and
   only repainted it; the second stripped everything back to a bare app shell
   with no imagery. This one is built the other way round — the artwork comes
   first and the layout is arranged around it.

   The scenes are original SVG (a seeded star field, layered mosque skylines,
   gradient skies). They stay vector, so they are sharp at any size, cost a few
   kilobytes, and never call a third party.
   ========================================================================= */

@import url('/assets/fonts/fonts.css');

@font-face {
    font-family: 'Amiri Quran V2';
    src: url('/assets/fonts/amiri-quran.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
    /* night, deepest to lightest */
    --n0: #03060f;
    --n1: #071228;
    --n2: #0e2540;
    --n3: #16324b;

    --gold: #e8b54d;
    --gold-lit: #f5d38a;
    --gold-deep: #9a6f22;
    --ember: #c4703a;

    --cream: #f7f1e3;
    --cream-2: #efe6d2;
    --paper: #fffdf7;

    --ink: #0a1018;
    --ink-2: #3a4453;
    --muted: #5f6b7c;
    --muted-night: #a9b6c9;      /* 7.6:1 on --n1 */
    --line: #e0d6c0;
    --line-night: rgba(232, 181, 77, .22);

    --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
    --body: 'Source Serif 4', Georgia, serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --arabic: 'Amiri Quran V2', 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif;

    --t-micro: .6875rem;
    --t-label: .8125rem;
    --t-small: .9375rem;
    --t-body: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --t-lead: clamp(1.2rem, 1.05rem + .8vw, 1.7rem);
    --t-h4: clamp(1.125rem, 1.02rem + .45vw, 1.4rem);
    --t-h3: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
    --t-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem);
    --t-hero: clamp(2.6rem, 1.4rem + 6.4vw, 8rem);
    --t-arabic: clamp(1.6rem, 1.15rem + 2.2vw, 2.7rem);

    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --ease: cubic-bezier(.2,.65,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    margin: 0;
    background: var(--n0);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--t-body);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.04; margin: 0; }
h1 { font-size: var(--t-hero); letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.18; }
p { margin: 0 0 var(--s4); }
a { color: inherit; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, 1280px); margin-inline: auto; }
.narrow { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); z-index: 300; padding: var(--s3) var(--s4); background: var(--n0); color: var(--cream); }

/* ==================================================================== nav === */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    display: flex; align-items: center; gap: var(--s5);
    padding: var(--s4) var(--gutter);
    color: var(--cream);
    transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
    border-bottom: 1px solid transparent;
}
.nav.stuck {
    background: color-mix(in srgb, var(--n0) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line-night);
}
.brand { display: flex; align-items: center; gap: var(--s3); font-family: var(--display); font-size: 1.15rem; text-decoration: none; color: var(--cream); flex: 0 1 auto; min-width: 0; }
.brand em { color: var(--gold); font-style: italic; }
.nav-links { display: flex; gap: var(--s5); margin-inline: auto; }
.nav-links a { position: relative; font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-decoration: none; color: rgba(247,241,227,.78); padding-block: var(--s2); }
.nav-links a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--cream); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6ch;
    min-height: 46px; padding: var(--s3) var(--s5);
    font-family: var(--body); font-size: var(--t-label); font-weight: 600; letter-spacing: .02em;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 2px;
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn-gold { background: var(--gold); color: var(--n0); }
.btn-gold:hover { background: var(--gold-lit); }
.btn-line { border-color: rgba(247,241,227,.36); color: var(--cream); }
.btn-line:hover { border-color: var(--cream); background: rgba(247,241,227,.08); }
.btn-ink { background: var(--n1); color: var(--cream); }
.btn-ink:hover { background: var(--n2); }
.btn-quiet { border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink); }

.menu-btn { display: none; width: 46px; height: 46px; place-items: center; background: transparent; border: 1px solid rgba(247,241,227,.36); border-radius: 2px; color: var(--cream); cursor: pointer; }

@media (max-width: 900px) {
    .nav-links { display: none; }
    .menu-btn { display: grid; }
    .nav-right .btn-line { display: none; }
    .nav-links.open {
        display: grid; gap: var(--s2);
        position: absolute; inset: calc(100% + var(--s2)) var(--gutter) auto var(--gutter);
        padding: var(--s4);
        background: color-mix(in srgb, var(--n0) 96%, transparent);
        border: 1px solid var(--line-night);
    }
    .nav-links.open a { padding: var(--s3); font-size: 1rem; }
}

/* ================================================================= scenes === */
.scene {
    position: relative; isolation: isolate;
    display: grid; align-items: end;
    min-height: min(94svh, 900px);
    padding: calc(var(--s9) + var(--s7)) 0 var(--s9);
    overflow: hidden;
    color: var(--cream);
}
.scene-sm { min-height: min(62svh, 620px); padding-block: calc(var(--s8) + var(--s7)) var(--s8); }

.scene::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: var(--scene, url('/assets/art/night.svg'));
    background-size: cover; background-position: center bottom;
    transform: scale(1.04);
}
/* a veil so type stays legible wherever the artwork is brightest */
.scene::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(3,6,15,.72) 0%, rgba(3,6,15,.30) 34%, rgba(3,6,15,.55) 72%, rgba(3,6,15,.94) 100%);
}
.scene > * { position: relative; }

.scene h1 em { font-style: italic; color: var(--gold-lit); }
.scene-lead { max-width: 46ch; font-size: var(--t-lead); color: rgba(247,241,227,.86); margin-block: var(--s5) var(--s6); }
.scene-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s3);
    margin: 0 0 var(--s4);
    font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--gold-deep); }

/* figures floating over the artwork */
.plate {
    display: grid; gap: var(--s4);
    max-width: 30rem; padding: clamp(var(--s5), 3vw, var(--s6));
    background: rgba(3,6,15,.42);
    border: 1px solid var(--line-night);
    backdrop-filter: blur(6px);
}
.plate-ayah { font-family: var(--arabic); font-size: var(--t-arabic); line-height: 2.05; text-align: center; direction: rtl; color: var(--cream); margin: 0; }
.plate-ref { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* Was flex: items sized themselves by content, so one long label ("Meccan ·
   revealed before the migration") grew wide enough to wrap alone onto a second
   row with dead space beside it. A grid gives every stat an equal track. */
.stats { display: flex; flex-wrap: wrap;
    gap: clamp(var(--s5), 4vw, var(--s7)); margin-top: var(--s8); }
/* flex-grow on every stat means a row that isn't full stretches to fill itself
   — an orphaned fourth stat spans the row instead of sitting beside dead space.
   Below 900px the basis pins them two-up, so four stats read as a 2x2. */
.stats div { flex: 1 1 clamp(9rem, 20%, 14rem); display: grid; gap: .15rem;
    align-content: start; min-width: 0; }
@media (max-width: 900px) { .stats div { flex-basis: calc(50% - var(--s7)); } }
@media (max-width: 380px) { .stats div { flex-basis: 100%; } }
.stats b { font-family: var(--display); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 500; color: var(--cream); }
.stats span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: rgba(247,241,227,.62); }
.stats small { font-size: var(--t-micro); color: rgba(247,241,227,.48); line-height: 1.5;
    text-transform: none; letter-spacing: normal; max-width: 20ch; }

/* ================================================================ content === */
.band { position: relative; background: var(--cream); color: var(--ink); padding-block: clamp(var(--s8), 8vw, var(--s9)); }
.band-paper { background: var(--paper); }
.band-night { background: var(--n1); color: var(--cream); }
.band-night h2, .band-night h3 { color: var(--cream); }
.band-night p { color: var(--muted-night); }

/* khatam watermark, barely there */
.band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url('/assets/art/khatam-dark.svg');
    background-size: 200px; opacity: .13;
}
.band-night::before { background-image: url('/assets/art/khatam.svg'); opacity: .16; }
.band > * { position: relative; }

.head { display: grid; gap: var(--s4); max-width: none; margin-bottom: var(--s7); }
/* nowrap keeps the rule-and-label on one line, but a long eyebrow at .22em
   letter-spacing ("Keep the distinctions clear" measures 481px) then cannot
   wrap and drags the whole page wider than the viewport. Allow wrapping on
   narrow screens; the flex line-break keeps the leading rule attached. */
/* Wrapping is unconditional: a 620px breakpoint still left
   "Look · read · practice with a grown-up" overflowing a 768px tablet. An
   eyebrow is a label, not a rule that must stay on one line. */
.head .eyebrow { max-width: none; white-space: normal; flex-wrap: wrap; }
@media (max-width: 620px) {
    .eyebrow, .head .eyebrow { letter-spacing: .14em; }
    .eyebrow::before { width: 1.5rem; }
}
.head h2 { max-width: 18ch; }
.head p { max-width: 44ch; }
@media (min-width: 900px) {
    .head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); align-items: end; }
    .head .eyebrow { grid-column: 1 / -1; }
}
.head p { margin: 0; font-size: var(--t-lead); color: var(--muted); }
.band-night .head p { color: var(--muted-night); }

/* ------------------------------------------------------------------ grids -- */
.grid { display: grid; gap: clamp(var(--s4), 2vw, var(--s5)); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* .grid-2/-3/-4 were used across the views but never defined, so every one of
   them silently fell back to the auto-fill rule above — which is why three
   equal cards could break onto two lines instead of sharing one. Fixed column
   counts on wide screens, halving then stacking as space runs out. */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Cards in a row should end level regardless of copy length. */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card .go { margin-top: auto; padding-top: var(--s3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
    position: relative; display: flex; flex-direction: column; gap: var(--s3);
    padding: clamp(var(--s4), 2vw, var(--s5));
    background: var(--paper); border: 1px solid var(--line);
    text-decoration: none; min-width: 0; overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 20px 44px rgba(10,16,24,.13); }
.card .num { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; color: var(--gold-deep); }
.card .ar { font-family: var(--arabic); font-size: 1.6rem; direction: rtl; color: var(--ink-2); }
.card p { margin: 0; font-size: var(--t-label); color: var(--muted); }
.card .go { margin-top: auto; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }

.card-night { background: rgba(247,241,227,.05); border-color: var(--line-night); color: var(--cream); }
.card-night p { color: var(--muted-night); }
.card-night .num, .card-night .go { color: var(--gold); }
a.card-night:hover { background: rgba(247,241,227,.09); }

.card-media { overflow: hidden; background: var(--cream-2); }
.card-media img { transition: transform .5s var(--ease); width: 100%; }
a.card:hover .card-media img { transform: scale(1.04); }

/* --------------------------------------------------------------- features -- */
.split { display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } }
.split img { width: 100%; }

/* ---------------------------------------------------------------- reader --- */
.verse { display: grid; grid-template-columns: 2.4rem minmax(0,1fr); gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--line); direction: rtl; }
.verse-n { direction: ltr; align-self: start; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-family: var(--mono); font-size: var(--t-micro); color: var(--gold-deep); border: 1px solid var(--line); border-radius: 50%; }
.verse-t { font-family: var(--arabic); font-size: var(--t-arabic); line-height: 2.2; text-align: right; }

/* --------------------------------------------------------------- long form - */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose blockquote { margin: var(--s6) 0; padding-inline-start: var(--s5); border-inline-start: 2px solid var(--gold); font-family: var(--display); font-size: var(--t-lead); font-style: italic; }
.prose [lang="ar"], .prose .ar { font-family: var(--arabic); font-size: 1.45em; line-height: 2; direction: rtl; }
.prose img { border: 1px solid var(--line); }

.tag { display: inline-flex; align-items: center; padding: .3rem .7rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; background: rgba(232,181,77,.16); color: var(--gold-deep); }
.tag-night { background: rgba(232,181,77,.18); color: var(--gold-lit); }

table { width: 100%; border-collapse: collapse; font-size: var(--t-label); }
th, td { padding: var(--s3); text-align: start; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.scroll-x { overflow-x: auto; }

.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field label { font-size: var(--t-label); font-weight: 600; }
.field input, .field select, .field textarea { min-height: 48px; padding: var(--s3) var(--s4); font: inherit; font-family: var(--body); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.field input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(232,181,77,.22); }

/* ---------------------------------------------------------------- footer --- */
.foot { position: relative; background: var(--n0); color: var(--muted-night); padding-block: var(--s9) var(--s6); overflow: hidden; }
.foot::before { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: url('/assets/art/arch.svg') bottom center / cover no-repeat; opacity: .5; }
.foot-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); padding-bottom: var(--s6); border-bottom: 1px solid var(--line-night); }
.foot h4 { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.foot a { text-decoration: none; font-size: var(--t-label); }
.foot a:hover { color: var(--cream); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-top: var(--s5); font-family: var(--mono); font-size: var(--t-micro); }

/* ------------------------------------------------- narrow-width guards ----- */
.wrap, .narrow, .grid, .card, .verse, .prose, .scene > * { min-width: 0; }
.card, .prose, .verse-t, .scene h1, .plate-ayah { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ============================================================ tool buttons ==
   Prayer times and the qibla are things you reach for rather than places you
   browse, so they sit as marks beside the search control instead of joining the
   word links. */
.tools { display: flex; align-items: center; gap: var(--s2); }
.tool {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none;
    color: var(--gold); background: rgba(247,241,227,.06);
    border: 1px solid rgba(232,181,77,.34); border-radius: 50%;
    text-decoration: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tool:hover { background: rgba(232,181,77,.16); border-color: var(--gold); color: var(--gold-lit); }
.tool[aria-current] { background: var(--gold); color: var(--n0); border-color: var(--gold); }
.tool svg { width: 22px; height: 22px; }

@media (max-width: 560px) {
    .tool { width: 42px; height: 42px; }
    .tool svg { width: 20px; height: 20px; }
    .nav { gap: var(--s3); padding-inline: var(--s4); }
    .nav-right .btn-gold { padding-inline: var(--s4); }
    .brand span { display: none; }          /* the mark alone carries it */
}
@media (max-width: 400px) {
    .nav-right .btn-gold { display: none; } /* the hero has the same call */
}


/* A scene that carries cards needs the height of a full one, and its content
   aligns to the top rather than the baseline. */
.scene-sm:has(.grid) { min-height: min(88svh, 860px); align-items: center; }


/* ============================================== muṣḥaf, guides, tools ====== */
.panel { padding: clamp(var(--s5), 3vw, var(--s6)); background: var(--paper); border: 1px solid var(--line); }
.panel .field select, .panel .field input { width: 100%; }

.reader-bar { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.reader-jump { display: flex; gap: var(--s2); align-items: center; }
.reader-jump input { width: 6rem; min-height: 44px; padding: var(--s2) var(--s3); font: inherit; font-family: var(--mono); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.reader-listen { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.reader-listen select { min-height: 44px; max-width: 100%; padding: var(--s2) var(--s3); font: inherit; font-family: var(--body); font-size: var(--t-label); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.reader-nav { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); }

.mushaf-page { padding: clamp(var(--s5), 4vw, var(--s7)) 0; direction: rtl; text-align: justify; text-align-last: center; }
.mushaf-surah { font-family: var(--arabic); font-size: 1.5rem; text-align: center; color: var(--gold-deep); margin: var(--s5) 0 var(--s4); padding-block: var(--s2); border-block: 1px solid var(--line); }
/* Leftover from the first v2 muṣḥaf: a fixed font-size here beat inheritance,
   so the A-/A/A+ buttons resized .mushaf-text while every visible word stayed
   put. The āyah must inherit so one control drives the whole page. */
.mushaf-ayah { font-family: var(--arabic); font-size: inherit; line-height: inherit;
    transition: background .3s var(--ease); }
.mushaf-ayah.on { background: rgba(232,181,77,.28); border-radius: 3px; }
.mushaf-n { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-inline: .25em; font-family: var(--mono); font-size: .42em; color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 50%; vertical-align: middle; }

.times { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-top: var(--s5); }
.time { display: grid; gap: .15rem; padding: var(--s4); background: var(--paper); border: 1px solid var(--line); }
.time span { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.time b { font-family: var(--display); font-size: 1.6rem; font-weight: 500; }

.qibla-dial { max-width: 340px; margin-inline: auto; width: 100%; }
.qibla-facts { display: grid; gap: var(--s3); margin: var(--s5) 0 0; }
.qibla-facts div { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.qibla-facts dt { font-size: var(--t-label); color: var(--muted); }
.qibla-facts dd { margin: 0; font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--s5); }
.step-n { align-self: start; font-family: var(--display); font-size: 1.6rem; color: var(--gold-deep); padding-top: .1em; border-top: 2px solid var(--gold); }
.step-body h3 { margin-bottom: var(--s2); }
.step-body p { margin: 0; color: var(--muted); }
.say { margin-top: var(--s4); padding: var(--s4) var(--s5); background: var(--cream); border-inline-start: 2px solid var(--gold); }
.say-ar { font-family: var(--arabic); font-size: 1.7rem; line-height: 2; direction: rtl; margin: 0 0 var(--s2); color: var(--ink); }
.say-tr { margin: 0; font-style: italic; color: var(--ink-2); }
.say-en { margin: var(--s1) 0 0; font-size: var(--t-label); color: var(--muted); }
.closing { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-family: var(--display); font-size: var(--t-lead); font-style: italic; color: var(--ink-2); }

/* the three-step path on the home page: a real sequence, not three equal cards */
.path { display: grid; gap: 0; counter-reset: step; }
.path a {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--s5);
    align-items: center; padding: var(--s5) var(--s4);
    text-decoration: none; border-top: 1px solid var(--line);
    transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
.path a:last-child { border-bottom: 1px solid var(--line); }
.path a:hover { background: var(--paper); padding-inline-start: var(--s5); }
.path .p-n { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); color: var(--gold); line-height: 1; }
.path .p-b h3 { margin-bottom: var(--s1); }
.path .p-b p { margin: 0; color: var(--muted); font-size: var(--t-label); }
.path .p-go { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
@media (max-width: 620px) {
    .path a { grid-template-columns: 3rem minmax(0, 1fr); }
    .path .p-go { grid-column: 2; }
}


/* ------------------------------------------------------ article apparatus -- */
.refs { margin-top: var(--s8); padding: clamp(var(--s5), 3vw, var(--s6)); background: var(--cream); border-inline-start: 2px solid var(--gold); }
.refs .prose { font-size: var(--t-label); }
.refs .prose p { margin: 0 0 var(--s2); }
.refs-note { margin: var(--s4) 0 0; font-size: var(--t-micro); color: var(--muted); }

.art-nav { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }
.art-nav a { display: grid; gap: var(--s1); padding: var(--s4); text-decoration: none; border: 1px solid var(--line); background: var(--paper); transition: border-color .2s var(--ease); }
.art-nav a:hover { border-color: var(--gold); }
.art-nav span { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.art-nav b { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }


/* ------------------------------------------------------------ guide steps -- */
.guide-hero { width: 100%; max-width: 560px; margin-block: var(--s6); border: 1px solid var(--line); }
.step-figure { margin: var(--s4) 0 0; }
.step-figure picture { display: block; width: 100%; max-width: 380px; }
.step-figure img {
    /* These are portrait photographs. Forcing 16/9 with object-fit:cover cropped
       a band out of the middle — which on a tall frame is wall and sink, with the
       child cropped out entirely. Let the natural ratio stand and cap the width. */
    width: 100%; max-width: 380px; height: auto;
    border: 1px solid var(--line); background: var(--cream);
}
.step-figure picture img { max-width: none; }
@media (min-width: 700px) {
    .step-figure img,
    .step-figure picture { max-width: 420px; }
}
@media (max-width: 399px) {
    .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
    .step-n { width: 3.2rem; }
}


/* ------------------------------------------------- guide chain + questions -- */
.chain { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; counter-reset: c; }
.chain li {
    position: relative; padding: var(--s3) var(--s5);
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-lit); border: 1px solid var(--line-night);
}
.chain li + li::before { content: "→"; position: absolute; inset-inline-start: -1.15rem; top: 50%; transform: translateY(-50%); color: var(--gold); }

.faqs { display: grid; gap: var(--s2); }
.faqs details { border: 1px solid var(--line); background: var(--paper); }
.faqs summary {
    cursor: pointer; list-style: none; padding: var(--s4) var(--s5);
    font-family: var(--display); font-size: 1.05rem; display: flex; justify-content: space-between; gap: var(--s4);
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--gold-deep); font-family: var(--mono); }
.faqs details[open] summary::after { content: "−"; }
.faqs details p { margin: 0; padding: 0 var(--s5) var(--s5); color: var(--muted); font-size: var(--t-label); }


/* ---------------------------------------------------------------- learn --- */
.compass { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.compass li { padding: var(--s5); border: 1px solid var(--line-night); display: grid; gap: var(--s2); background: rgba(247,241,227,.04); }
.compass span { font-size: var(--t-micro); letter-spacing: .14em; color: var(--gold); }
.compass strong { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: var(--cream); }

.source-pair { display: flex; gap: var(--s3); align-items: center; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s5); }
.source-pair a { color: var(--gold-deep); }
.source-pair span { color: var(--muted); }

.inline-link { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--s5); align-items: center; margin-top: var(--s6); padding: var(--s5); text-decoration: none; border: 1px solid var(--line-night); background: rgba(247,241,227,.04); transition: border-color .2s var(--ease); }
.inline-link:hover { border-color: var(--gold); }
.inline-link > span:first-child { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.inline-link strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 500; color: var(--cream); }
.inline-link small { color: var(--muted-night); font-size: var(--t-label); }
.inline-link em { font-style: normal; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
@media (max-width: 700px) { .inline-link { grid-template-columns: 1fr; gap: var(--s3); } }

.read-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.read-list a { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--s4); align-items: center; padding: var(--s3); text-decoration: none; border: 1px solid var(--line); background: var(--paper); transition: border-color .2s var(--ease); }
.read-list a:hover { border-color: var(--gold); }
.read-art img { width: 92px; height: 62px; object-fit: cover; }
.read-list strong { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.read-list small { color: var(--muted); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; }


/* ----------------------------------------------------------------- forms -- */
.panel { padding: clamp(var(--s5), 4vw, var(--s7)); background: var(--paper); border: 1px solid var(--line); }
.panel .field input, .panel .field select, .panel .field textarea { width: 100%; font-family: var(--body); }
.panel textarea { min-height: 8rem; resize: vertical; }
.check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); align-items: start; margin-bottom: var(--s3); font-size: var(--t-label); color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--gold-deep); }
.card .go { display: inline-block; margin-top: var(--s3); text-decoration: none; }


/* --------------------------------------------------------------- ledger --- */
.ledger { display: grid; gap: var(--s3); margin: var(--s3) 0 0; }
.ledger div { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.ledger dt { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ledger dd { margin: 0; font-size: var(--t-label); }
.ledger .hash { word-break: break-all; font-size: var(--t-micro); color: var(--ink-2); }
@media (max-width: 520px) { .ledger div { grid-template-columns: 1fr; gap: var(--s1); } }


/* the children's hub: picture-led route cards */
.path-card .card-media img { width: 100%; height: 260px; object-fit: cover; object-position: center 28%; display: block; }
@media (max-width: 600px) { .path-card .card-media img { height: 200px; } }

/* ------------------------------------------------- kids' picture guides --- */
/* The label sits inside the circle, so it must be padded off the curve and
   allowed to wrap — "farḍ rakʿahs each day" overflowed the ring at every size.
   Padding is a share of the seal's own width so it scales with it. */
/* aspect-ratio alone was not enough: the seal is a grid/flex child, so the
   parent stretched it to the column height (211x329 instead of a circle).
   An explicit equal width+height plus align-self keeps it round at every size. */
.kids-seal { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--s1); text-align: center; line-height: 1.2;
    width: clamp(190px, 44vw, 224px); height: clamp(190px, 44vw, 224px);
    flex: none; align-self: center; justify-self: center; padding: 9%;
    margin-inline: auto; border: 1px solid var(--gold); border-radius: 50%;
    background: rgba(232,181,77,.07); text-align: center; }
.kids-seal span { font-family: var(--display); font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
    line-height: 1; color: var(--gold-lit); }
/* `overflow-wrap: break-word` shattered "farḍ rakʿahs each day" into single
   letters once the content box got narrow — it fit, but was unreadable. Words
   must stay whole; the ring is sized to hold them instead. */
.kids-seal strong { font-family: var(--mono); font-size: clamp(.58rem, .44rem + .28vw, .72rem);
    letter-spacing: .06em; line-height: 1.45; text-transform: uppercase; color: var(--gold);
    overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: balance; }

.source-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s4); }
.source-strip small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.source-strip strong { display: block; margin-top: var(--s1); font-size: var(--t-label); color: var(--ink); }

.kids-path-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--s5); }
.kids-count { display: flex; align-items: baseline; gap: var(--s2); flex: none; }
.kids-count strong { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--gold-deep); }
.kids-count span { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* The "What to say" panel. Carries the full Arabic, transliteration and meaning
   for every step — the same array main renders, so the two never diverge. */
.say-box { margin-top: var(--s4); padding: var(--s5); background: var(--cream);
    border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); }
.say-box-label { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.say-box-note { margin: var(--s3) 0 0; color: var(--ink-2); font-size: var(--t-label); }
.say-block { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.say-block:first-of-type { border-top: 0; padding-top: 0; }
.say-when { display: block; font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin-bottom: var(--s2); }
.say-box .say-ar { font-family: var(--arabic); font-size: 1.6rem; line-height: 2.1; direction: rtl;
    margin: 0 0 var(--s3); color: var(--ink); }
.say-box .say-tr { margin: 0; font-style: italic; color: var(--ink-2); }
.say-box .say-en { margin: var(--s2) 0 0; font-size: var(--t-label); color: var(--muted); }
.step-source { margin: var(--s4) 0 0; font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); }

.rakahs-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s6); padding: var(--s6); border: 1px solid var(--line-night);
    background: rgba(232,181,77,.05); color: inherit; text-decoration: none; transition: border-color .2s; }
.rakahs-cta:hover { border-color: var(--gold); }
.rakahs-cta > div { flex: 1 1 22rem; min-width: 0; }
.rakahs-cta p { color: var(--muted-night); margin-top: var(--s3); max-width: 46ch; }
.rakahs-cta .go { display: inline-block; margin-top: var(--s4); }
.rakahs-figures { display: flex; flex-wrap: wrap; gap: var(--s4); }
.rakahs-figures span { display: grid; justify-items: center; gap: var(--s1); min-width: 3.6rem; }
.rakahs-figures b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--gold-lit); }
.rakahs-figures i { font-style: normal; font-size: var(--t-micro); letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-night); }

@media (max-width: 640px) {
    /* Tighter ring padding so the label still fits the smaller circle. */
    .kids-seal { padding: 8%; }
    .say-box { padding: var(--s4); }
    .say-box .say-ar { font-size: 1.35rem; }
    .rakahs-cta { padding: var(--s5); }
}

/* --------------------------------------------- adult prayer guide extras --- */
.calm-seal { display: grid; place-items: center; gap: var(--s2); flex: none; align-self: center;
    width: clamp(160px, 40vw, 220px); height: clamp(160px, 40vw, 220px);
    margin-inline: auto; border: 1px solid var(--gold); border-radius: 50%;
    background: rgba(232,181,77,.07); text-align: center; }
.calm-seal .mono { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.calm-seal strong { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; color: var(--gold-lit); }
.audience-switch { flex: 0 1 auto; min-width: 0; max-width: 100%; text-decoration: none;
    color: inherit; padding: var(--s4) var(--s5);
    border: 1px solid var(--line); transition: border-color .2s; }
.audience-switch:hover { border-color: var(--gold-deep); }
.audience-switch .mono { display: block; font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); }
.audience-switch strong { display: block; margin-top: var(--s1); color: var(--gold-deep); }
@media (max-width: 640px) { .calm-seal { max-width: 160px; } }

/* The three-source band above the wuḍūʾ steps. */
.source-band > div { padding: var(--s4) var(--s5); border: 1px solid var(--line); min-width: 0; }
.source-band small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.source-band strong { display: block; margin-top: var(--s2); font-size: var(--t-label); }

/* --------------------------------------------------------- rakʿah counter --- */
.counter { border: 1px solid var(--line-night); background: rgba(232,181,77,.04); }
.counter-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-night); }
.counter-tabs button { flex: 1 1 7rem; padding: var(--s4) var(--s3); background: none; border: 0;
    border-inline-end: 1px solid var(--line-night); color: var(--muted-night); cursor: pointer;
    font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; transition: all .2s; }
.counter-tabs button:last-child { border-inline-end: 0; }
.counter-tabs button:hover { color: var(--gold-lit); }
.counter-tabs button.is-active { background: rgba(232,181,77,.12); color: var(--gold-lit); }
.counter-panel { padding: var(--s6); }
.counter-stats { display: flex; flex-wrap: wrap; gap: var(--s6); }
.counter-stats div { display: grid; gap: var(--s1); }
.counter-stats strong { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--cream); }
.counter-stats .is-gold strong { color: var(--gold-lit); }
.counter-stats small { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-night); }
.counter-units { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.counter-unit { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line-night);
    min-width: 8rem; }
.counter-unit b { font-family: var(--display); font-size: 1.5rem; color: var(--gold-lit); }
.counter-unit i, .counter-unit em { font-style: normal; font-size: var(--t-micro); color: var(--muted-night); }
.counter-note { margin: var(--s5) 0 0; color: var(--muted-night); }
@media (max-width: 640px) {
    .counter-panel { padding: var(--s4); }
    .counter-stats { gap: var(--s4); }
    .counter-stats strong { font-size: 2rem; }
}

/* Two consecutive plain bands share a background, so their adjoining padding
   reads as one large empty gap (visible between "How to use these" and "Choose
   a picture path" on the kids hub). Collapse the seam; tinted bands keep theirs
   because the colour change justifies the breathing room. */
.band + .band:not(.band-night):not(.band-paper) { padding-block-start: 0; }
/* Same reasoning for the tinted variants: two band-paper sections in a row
   (How it works -> Your reading place on the home page) share one background,
   so their adjoining padding reads as a single oversized gap. */
.band-paper + .band-paper, .band-night + .band-night { padding-block-start: 0; }

/* The parent/caregiver note beside the promise on hub pages. */
.grown-up-note { padding: var(--s5); border: 1px solid var(--line-night);
    border-inline-start: 3px solid var(--gold); background: rgba(232,181,77,.05); }
.grown-up-note p:last-child { margin: var(--s3) 0 0; color: var(--muted-night);
    font-size: var(--t-label); line-height: 1.75; }

.faq-note { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
    font-size: var(--t-label); color: var(--muted); }

/* ------------------------------------------------------------ form fields --- */
.field { display: grid; gap: var(--s2); min-width: 0; }
.field label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); }
.field small { font-size: var(--t-micro); color: var(--muted); line-height: 1.6; }
.field input, .field select, .field textarea {
    width: 100%; padding: var(--s3) var(--s4); font: inherit; font-size: var(--t-label);
    color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0;
    transition: border-color .2s;
}
.field select { appearance: none; padding-inline-end: var(--s7);
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
                      linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
    background-position: right 1.35rem center, right 1rem center;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field-submit { align-self: end; }
.field-submit .btn { width: 100%; justify-content: center; }
.notice-bad { padding: var(--s4) var(--s5); margin-bottom: var(--s5); border: 1px solid #b3452f;
    border-inline-start: 3px solid #b3452f; background: rgba(179,69,47,.07); color: var(--ink); }

.times-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s5); align-items: start; }
@media (max-width: 560px) { .times-form { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- timetable --- */
.times-head { display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.clock-switch { display: flex; border: 1px solid var(--line-night); flex: none; }
.clock-switch button { padding: var(--s2) var(--s4); background: none; border: 0; cursor: pointer;
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    color: var(--muted-night); transition: all .2s; }
.clock-switch button.is-active { background: rgba(232,181,77,.14); color: var(--gold-lit); }
.next-prayer { display: inline-flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s5);
    padding: var(--s2) var(--s4); border: 1px solid var(--gold); background: rgba(232,181,77,.07); }
.next-prayer .mono { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold); }
.next-prayer strong { color: var(--gold-lit); }

.times-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
    border-top: 1px solid var(--line-night); }
.times-list li { display: grid; grid-template-columns: 7rem minmax(0,1fr) auto auto; gap: var(--s4);
    align-items: baseline; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line-night); }
.times-list li.is-next { background: rgba(232,181,77,.07); }
.times-when { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-night); }
.times-name { font-family: var(--display); font-size: 1.25rem; color: var(--cream); }
.times-list li.is-next .times-name { color: var(--gold-lit); }
.times-value { font-size: 1.35rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.times-flag { font-style: normal; font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold); }
@media (max-width: 560px) {
    .times-list li { grid-template-columns: minmax(0,1fr) auto; row-gap: var(--s1); }
    .times-when { grid-column: 1 / -1; }
    .times-flag { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ qibla --- */
.privacy-note { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s5) 0;
    padding: var(--s4); border: 1px solid var(--line-night); background: rgba(232,181,77,.05); }
.privacy-note svg { color: var(--gold); flex: none; margin-top: 2px; }
.privacy-note strong { display: block; color: var(--cream); }
.privacy-note small { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--muted-night); }

.qibla-instrument { display: grid; gap: var(--s5); justify-items: center; }
.qibla-compass { position: relative; width: min(320px, 78vw); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid var(--line-night); background:
        radial-gradient(circle at 50% 45%, rgba(232,181,77,.10), transparent 62%), rgba(3,6,15,.55);
    display: grid; place-items: center; }
.qibla-compass[data-state="aligned"] { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232,181,77,.12); }
.qibla-hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.qibla-hold-progress { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round;
    stroke-dasharray: 295.3; stroke-dashoffset: calc(295.3 - (295.3 * var(--qibla-hold, 0))); }
.qibla-cardinal { position: absolute; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; color: var(--muted-night); }
.cardinal-n { top: 10px; } .cardinal-s { bottom: 10px; }
.cardinal-e { right: 12px; } .cardinal-w { left: 12px; }
.cardinal-n { color: var(--gold); }
.qibla-needle { position: absolute; inset: 0; display: grid; place-items: center;
    transform: rotate(var(--qibla-rotation, 0deg)); transition: transform .35s ease-out; }
.qibla-needle-point { position: absolute; top: 8%; display: block; }
.qibla-needle-point i { display: block; width: 0; height: 0; border-inline: 9px solid transparent;
    border-bottom: 26px solid var(--gold-lit); }
.qibla-needle-tail { position: absolute; bottom: 8%; width: 2px; height: 34%;
    background: linear-gradient(to bottom, rgba(232,181,77,.5), transparent); }
.qibla-center { display: grid; justify-items: center; gap: 2px; text-align: center; z-index: 1; }
.qibla-center small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold); }
.qibla-center strong { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--cream); }
.qibla-center span { font-size: var(--t-micro); color: var(--muted-night); max-width: 14ch; }
.qibla-hold-count { position: absolute; bottom: 16%; font-family: var(--mono); color: var(--gold-lit); }
.qibla-readout { display: grid; gap: var(--s1); text-align: center; }
.qibla-readout span { color: var(--cream); }
.qibla-readout small { font-size: var(--t-micro); color: var(--muted-night); }
@media (prefers-reduced-motion: reduce) { .qibla-needle { transition: none; } }

.qibla-status { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5);
    border: 1px solid var(--line); background: var(--cream); }
.qibla-status-icon { color: var(--gold-deep); flex: none; }
.qibla-status small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.qibla-status strong { display: block; margin-top: var(--s1); font-family: var(--display); font-size: 1.25rem; }
.qibla-status p { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-label); }

.qibla-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--s4); margin-top: var(--s5); }
.qibla-results div { padding: var(--s4); border: 1px solid var(--line); }
.qibla-results small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qibla-results strong { display: block; margin-top: var(--s2); font-family: var(--mono); font-size: 1.2rem; }

.qibla-retry { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
    justify-content: space-between; margin-top: var(--s5); padding: var(--s5);
    border: 1px solid var(--line); background: rgba(232,181,77,.06); }
.qibla-retry > div { flex: 1 1 24rem; min-width: 0; }
.qibla-retry p { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-label); }

.qibla-manual { margin-top: var(--s5); border: 1px solid var(--line); }
.qibla-manual summary { cursor: pointer; padding: var(--s4) var(--s5); }
.qibla-manual summary span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); margin-inline-end: var(--s3); }
.qibla-manual summary strong { color: var(--gold-deep); }
.qibla-manual form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--s4); padding: 0 var(--s5) var(--s5); }
.qibla-manual form p { grid-column: 1 / -1; margin: 0; font-size: var(--t-micro); color: var(--muted); }

/* ---------------------------------------------------------- contact form --- */
.contact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s5); }
.contact-form .field-wide { grid-column: 1 / -1; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
.check { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer;
    padding: var(--s4); border: 1px solid var(--line); background: var(--cream); }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 2px; accent-color: var(--gold-deep); }
.check span { font-size: var(--t-label); color: var(--muted); line-height: 1.7; }
.check strong { display: block; color: var(--ink); }
.contact-submit { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
    justify-content: space-between; }
.privacy-inline { margin: 0; }
.privacy-inline strong { display: block; font-size: var(--t-label); }
.privacy-inline small { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--muted); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Narrow-width guards for the sections added in this pass. */
.qibla-compass { max-width: 100%; }
.times-list, .counter, .contact-form, .source-band, .qibla-results { min-width: 0; }
.scene-actions { flex-wrap: wrap; }
.scene-actions .btn { max-width: 100%; }

/* A <select> refuses to shrink below its widest option, so the reciter picker
   pushed the Muṣḥaf page past a 320px viewport. Let it shrink and ellipsise. */
select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.reader-listen { flex-wrap: wrap; min-width: 0; }
.reader-listen > * { min-width: 0; max-width: 100%; }

/* The footer sits after full-bleed .scene sections whose decorative layers are
   absolutely positioned. Give it its own stacking context so nothing can ever
   float over its links. */
.foot { position: relative; z-index: 1; }
.foot a { position: relative; z-index: 1; }

/* ---------------------------------------------------------- sūrah reader --- */
.reader-note { display: grid; gap: var(--s1); padding: var(--s4) var(--s5); margin-bottom: var(--s5);
    border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); background: var(--cream); }
.reader-note strong { font-size: var(--t-label); }
.reader-note span { font-size: var(--t-label); color: var(--muted); line-height: 1.7; }

.tafsir-bar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center;
    padding: var(--s4) var(--s5); margin-bottom: var(--s6); border: 1px solid var(--line);
    background: var(--cream); }
.tafsir-bar-label { display: inline-flex; align-items: center; gap: var(--s2);
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold-deep); }
.tafsir-bar select { flex: 1 1 16rem; min-width: 0; padding: var(--s2) var(--s3); font: inherit;
    font-size: var(--t-label); background: var(--paper); border: 1px solid var(--line); }
.tafsir-bar small { flex: 1 1 100%; font-size: var(--t-micro); color: var(--muted); }

.ayah-card { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.ayah-toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
    justify-content: space-between; margin-bottom: var(--s3); }
.ayah-key { display: inline-flex; align-items: baseline; gap: var(--s2); text-decoration: none;
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); }
.ayah-key strong { color: var(--gold-deep); }
.ayah-actions { display: flex; gap: var(--s2); }
.ayah-action { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
    transition: all .18s; }
.ayah-action:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.ayah-action.is-active, .ayah-action.is-current { border-color: var(--gold);
    background: rgba(232,181,77,.12); color: var(--gold-deep); }
.ayah-arabic { font-family: var(--arabic); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    line-height: 2.2; direction: rtl; margin: 0; color: var(--ink); }
.ayah-end { font-size: .7em; color: var(--gold-deep); margin-inline-start: .3em; }
.ayah-feedback { display: block; margin-top: var(--s2); font-size: var(--t-micro); color: var(--gold-deep); }
.ayah-tafsir { margin-top: var(--s3); }
.ayah-tafsir-toggle { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
    background: none; border: 1px solid var(--line); cursor: pointer; font-family: var(--mono);
    font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ayah-tafsir-toggle:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.ayah-tafsir-body { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--line);
    background: var(--cream); font-size: var(--t-label); line-height: 1.8; color: var(--ink-2); }

/* Pull-quote: for a single lead paragraph that would otherwise float alone in
   a band with no design around it. */
.pull-quote { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s5);
    align-items: start; margin: 0; padding: var(--s6); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--gold); background: var(--cream); }
.pull-quote-mark { color: var(--gold-deep); flex: none; }
.pull-quote p { margin: 0; font-family: var(--display); font-size: var(--t-lead);
    line-height: 1.65; color: var(--ink); }
.pull-quote em { font-style: italic; color: var(--gold-deep); }
@media (max-width: 560px) {
    .pull-quote { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5); }
}

/* Section standfirst: the opening sentence of a section, set larger than body
   copy and tied to the heading above it rather than floating on its own. */
.head-lede { max-width: 58ch; font-family: var(--display); font-size: var(--t-lead);
    line-height: 1.6; color: var(--ink-2); }
.head-lede em { font-style: italic; color: var(--gold-deep); }
.band-night .head-lede { color: var(--muted-night); }

/* ------------------------------------------------------- articles index --- */
.feature-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    text-decoration: none; color: inherit; border: 1px solid var(--line);
    background: var(--cream); transition: border-color .2s; }
.feature-card:hover { border-color: var(--gold-deep); }
.feature-media { display: block; overflow: hidden; }
.feature-media img { display: block; width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 16/9; }
.feature-body { display: flex; flex-direction: column; gap: var(--s3);
    padding: clamp(var(--s5), 3vw, var(--s7)); justify-content: center; }
.feature-body h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }
.feature-body p { color: var(--muted); }
@media (max-width: 820px) { .feature-card { grid-template-columns: 1fr; } }

.article-controls { display: flex; flex-wrap: wrap; gap: var(--s4);
    align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.topic-chips { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.chip { display: inline-flex; align-items: baseline; gap: var(--s2);
    padding: var(--s2) var(--s4); background: none; border: 1px solid var(--line);
    color: var(--muted); cursor: pointer; font: inherit; font-size: var(--t-label);
    transition: all .18s; }
.chip span { font-family: var(--mono); font-size: var(--t-micro); color: var(--gold-deep); }
.chip:hover { border-color: var(--gold-deep); color: var(--ink); }
.chip.is-active { border-color: var(--gold); background: rgba(232,181,77,.12); color: var(--ink); }
.article-search { flex: 0 1 18rem; min-width: 0; }
.article-search input { width: 100%; padding: var(--s3) var(--s4); font: inherit;
    font-size: var(--t-label); background: var(--paper); border: 1px solid var(--line); }
.article-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.article-count { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 var(--s5); }
.empty-state { display: grid; gap: var(--s2); padding: var(--s7); text-align: center;
    border: 1px solid var(--line); }
.empty-state span { color: var(--muted); }
/* A note that belongs to the block above it, not a section of its own. */
.grid-footnote { margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
    font-size: var(--t-label); color: var(--muted); max-width: 72ch; }

/* -------------------------------------------- sūrah reading tools + legend --- */
.reader-tools { padding: var(--s5); margin-bottom: var(--s5); border: 1px solid var(--line);
    background: var(--cream); }
.reader-tools label { display: block; font-size: var(--t-label); color: var(--muted);
    margin-bottom: var(--s2); }
.reader-tools input[type="range"] { width: 100%; accent-color: var(--gold-deep); }
.tool-links { display: grid; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4);
    border-top: 1px solid var(--line); }
.tool-links a { display: grid; gap: 2px; padding: var(--s3) var(--s4); text-decoration: none;
    color: inherit; border: 1px solid var(--line); transition: border-color .2s; }
.tool-links a:hover { border-color: var(--gold-deep); }
.tool-links strong { color: var(--gold-deep); }
.tool-links small { color: var(--muted); font-size: var(--t-micro); }
@media (min-width: 900px) { .tool-links { grid-template-columns: 1fr 1fr; } }

.action-guide { padding: var(--s5); margin-bottom: var(--s6); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--gold); background: var(--cream); }
.action-guide-intro small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.action-guide-intro strong { display: block; margin-top: var(--s1); font-family: var(--display);
    font-size: 1.15rem; }
.action-guide-intro p { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-label); }
.action-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.action-legend > span { display: flex; gap: var(--s3); align-items: flex-start; min-width: 0; }
.action-legend svg { color: var(--gold-deep); flex: none; margin-top: 2px; }
.action-legend strong { display: block; font-size: var(--t-label); }
.action-legend small { display: block; color: var(--muted); font-size: var(--t-micro); }

/* Tafsīr body: it inherited the small card type, which is unreadable for a long
   commentary — and unusable for the Arabic editions, which need a larger size,
   looser leading and RTL alignment. */
.ayah-tafsir-body { font-size: 1.02rem; line-height: 1.95; color: var(--ink); }
.ayah-tafsir-body .tafsir-text { max-width: 68ch; }
.ayah-tafsir-body .tafsir-text p { margin: 0 0 var(--s3); }
.ayah-tafsir-body .tafsir-text p:last-child { margin-bottom: 0; }
.ayah-tafsir-body[dir="rtl"] { text-align: right; }
.ayah-tafsir-body[dir="rtl"] .tafsir-text { font-family: var(--arabic); font-size: 1.5rem;
    line-height: 2.35; max-width: none; }
.ayah-tafsir-body .tafsir-attribution { margin: var(--s4) 0 0; padding-top: var(--s3);
    border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .08em; color: var(--muted); }
.ayah-tafsir-body .tafsir-loading, .ayah-tafsir-body .tafsir-empty { margin: 0; color: var(--muted); }
@media (max-width: 560px) {
    .ayah-tafsir-body { font-size: .98rem; line-height: 1.85; }
    .ayah-tafsir-body[dir="rtl"] .tafsir-text { font-size: 1.3rem; line-height: 2.15; }
}
/* Owner story / provider background prose on the journey page. */
.prose { font-size: 1.02rem; line-height: 1.9; color: var(--ink-2); max-width: 70ch; }
.prose p { margin: 0 0 var(--s4); }
.source-body h2, .source-body h3 { font-family: var(--display); margin: var(--s5) 0 var(--s2); }


/* ================================================================= muṣḥaf === */
.page-facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0; }
.page-facts div { display: grid; gap: 2px; }
.page-facts dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted-night); }
.page-facts dd { margin: 0; color: var(--cream); font-size: var(--t-label); }

.mushaf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
    padding: var(--s4); margin-bottom: var(--s4); border: 1px solid var(--line);
    background: var(--cream); }
.bar-turn { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
    text-decoration: none; color: var(--ink); border: 1px solid var(--line); flex: none; }
.bar-turn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.bar-turn.is-disabled { opacity: .4; }
.bar-turn small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; }
.is-reverse { display: inline-flex; transform: scaleX(-1); }

.jump-surah, .jump-page { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.jump-surah { flex: 1 1 15rem; }
.jump-surah select { width: 100%; min-width: 0; padding: var(--s2) var(--s3); font: inherit;
    font-size: var(--t-label); background: var(--paper); border: 1px solid var(--line); }
.jump-page span { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); }
.jump-page input { width: 4.5rem; padding: var(--s2); font: inherit; text-align: center;
    background: var(--paper); border: 1px solid var(--line); }
.jump-page button, .type-scale button, .focus-toggle, .recite-play, .recite-from-place {
    padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-micro); letter-spacing: .08em;
    text-transform: uppercase; background: none; border: 1px solid var(--line);
    color: var(--ink); cursor: pointer; transition: all .18s; }
.jump-page button:hover, .type-scale button:hover, .focus-toggle:hover,
.recite-play:hover, .recite-from-place:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.type-scale { display: inline-flex; align-items: center; gap: var(--s2); }
.type-scale > span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); }
.type-scale button[aria-pressed="true"] { border-color: var(--gold); background: rgba(232,181,77,.14); }
.focus-toggle { display: inline-flex; align-items: center; gap: var(--s2); }

.recite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); flex: 1 1 100%;
    min-width: 0; max-width: 100%;
    padding-top: var(--s3); border-top: 1px solid var(--line); }
.recite-play { display: inline-flex; align-items: center; gap: var(--s2);
    border-color: var(--gold); background: rgba(232,181,77,.1); color: var(--gold-deep); }
.recite-icon-play { width: 0; height: 0; border-inline-start: 9px solid currentColor;
    border-block: 6px solid transparent; }
.recite-icon-pause { width: 9px; height: 12px; border-inline: 3px solid currentColor; }
.recite-picker { flex: 1 1 15rem; min-width: 0; max-width: 100%; }
.recite-picker select { width: 100%; min-width: 0; padding: var(--s2) var(--s3); font: inherit;
    font-size: var(--t-label); background: var(--paper); border: 1px solid var(--line); max-width: 100%; }
.recite-continuous { display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--t-label); color: var(--muted); cursor: pointer; }
.recite-continuous input { accent-color: var(--gold-deep); }
.recite-from-place { display: inline-flex; align-items: center; gap: var(--s2); }
.recite-status { font-size: var(--t-micro); color: var(--gold-deep); }

.quiet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s3); margin-bottom: var(--s5); }
.save-hint { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
    font-size: var(--t-label); color: var(--muted); }
.save-hint svg { color: var(--gold-deep); }
.reader-status { color: var(--gold-deep); }
.resume-chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
    text-decoration: none; color: inherit; border: 1px solid var(--gold);
    background: rgba(232,181,77,.08); font-size: var(--t-label); }

.mushaf-page { position: relative; padding: clamp(var(--s5), 4vw, var(--s8));
    border: 1px solid var(--line); background: var(--paper);
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(3,6,15,.5); }
.paper-head, .paper-foot { display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
.paper-head { padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.paper-foot { padding-top: var(--s4); margin-top: var(--s5); border-top: 1px solid var(--line); }
.paper-foot strong { font-family: var(--display); font-size: 1.1rem; color: var(--gold-deep); }

/* app.js writes data-text-size on the reader; these are the three steps. */
.mushaf-text { font-family: var(--arabic); direction: rtl; text-align: justify;
    font-size: var(--ms, 2rem); line-height: 2.5; color: var(--ink); }
[data-text-size="small"] .mushaf-text { --ms: 1.6rem; line-height: 2.35; }
[data-text-size="large"] .mushaf-text { --ms: 2.5rem; line-height: 2.65; }
@media (max-width: 640px) {
    .mushaf-text { --ms: 1.6rem; line-height: 2.3; text-align: start; }
    [data-text-size="large"] .mushaf-text { --ms: 2rem; }
}
.mushaf-surah-title { display: flex; align-items: center; justify-content: center; gap: var(--s3);
    margin: var(--s6) 0 var(--s5); padding: var(--s4); border-block: 1px solid var(--gold);
    background: rgba(232,181,77,.06); font-size: .8em; }
.mushaf-surah-title strong { color: var(--gold-deep); }
.mushaf-basmala { display: block; text-align: center; margin-bottom: var(--s4); }
.mushaf-ayah { cursor: pointer; }
.mushaf-ayah.on { background: rgba(232,181,77,.16); border-radius: 4px; }
.mushaf-word { cursor: pointer; border-radius: 4px; transition: background-color .12s, color .12s; }
.mushaf-word:hover { color: var(--gold-deep); }
/* Follows the recitation word by word. */
.mushaf-word.is-spoken { background: var(--gold); color: var(--n0); }
.mushaf-ayah.is-reciting { background: rgba(232,181,77,.10); border-radius: 6px;
    box-shadow: 0 0 0 .3em rgba(232,181,77,.10); }
.mushaf-marker { display: inline-flex; align-items: center; justify-content: center;
    width: 2.15em; height: 2.15em; padding: 0; margin-inline: .3em; vertical-align: middle;
    font-family: var(--arabic); line-height: 1; text-align: center;
    /* A <button> does not inherit font-size, so `em` here resolved against the
       wrong base and the numeral never tracked A-/A/A+. --ms is set on
       .mushaf-text and inherits down, so this always follows the control. */
    /* Explicit per state: neither `em` nor the --ms custom property resolved
       predictably inside the button, so each size is declared outright. */
    font-size: 1.15rem;
    color: var(--gold-deep); background: rgba(232,181,77,.1); border: 1px solid var(--gold);
    border-radius: 50%; cursor: pointer; transition: all .18s; flex: none;
    /* Arabic-Indic digits carry extra ascent; nudge the optical centre. */
    padding-block-start: .08em; }
.mushaf-marker:hover { background: rgba(232,181,77,.24); }
.mushaf-marker.is-current { background: var(--gold); color: var(--n0); }

.turn-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line);
    background: var(--cream); font-size: var(--t-label); color: var(--muted); }
.turn-hint p { margin: 0; }
.turn-hint button { background: none; border: 0; color: var(--muted); cursor: pointer; }

/* Mobile turns were visible on desktop because nothing hid them. */
.mobile-turns { display: none; }
@media (max-width: 760px) {
    .mobile-turns { display: flex; align-items: center; justify-content: space-between;
        gap: var(--s3); margin-top: var(--s5); padding: var(--s4); border: 1px solid var(--line);
        background: var(--cream); }
    .mobile-turns a, .mobile-turns > span { display: inline-flex; align-items: center; gap: var(--s2);
        text-decoration: none; color: inherit; }
    .mobile-turns .is-disabled { opacity: .4; }
    .mobile-turns small { display: block; font-family: var(--mono); font-size: var(--t-micro);
        letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .mobile-turns strong { font-family: var(--display); font-size: 1.1rem; }
}

.reader-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s5); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }

.focus-exit { display: none; }
body.mushaf-focus-active .mushaf-bar,
body.mushaf-focus-active .quiet-row,
body.mushaf-focus-active .reader-end,
body.mushaf-focus-active .mobile-turns,
body.mushaf-focus-active .nav,
body.mushaf-focus-active .foot,
body.mushaf-focus-active .scene { display: none; }
body.mushaf-focus-active .focus-exit { display: inline-flex; align-items: center; gap: var(--s2);
    position: fixed; inset-block-end: var(--s5); inset-inline-end: var(--s5); z-index: 20;
    padding: var(--s3) var(--s4); background: var(--n1); color: var(--cream);
    border: 1px solid var(--gold); cursor: pointer; }

/* Every descendant of the page text scales from .mushaf-text alone. */
.mushaf-text .mushaf-ayah, .mushaf-text .mushaf-word,
.mushaf-text .mushaf-basmala, .mushaf-text .mushaf-mark { font-size: inherit; }

[data-text-size="small"] .mushaf-marker { font-size: .95rem; }
[data-text-size="large"] .mushaf-marker { font-size: 1.45rem; }


/* ------------------------------------------------- surah index cards --- */
.place-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.surah-card { display: flex; flex-direction: column; gap: var(--s2); min-width: 0;
    padding: var(--s5); border: 1px solid var(--line); background: var(--paper);
    transition: border-color .2s, transform .2s; }
.surah-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.surah-card-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); }
.surah-card-head .num { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
    color: var(--muted); }
.surah-card-head .ar { font-family: var(--arabic); font-size: 1.6rem; line-height: 1.4;
    color: var(--gold-deep); }
.surah-card h3 { font-family: var(--display); font-size: 1.2rem; margin: 0; }
.surah-card > p { margin: 0; color: var(--muted); font-size: var(--t-label); }
.surah-card-meta { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); }

/* Two destinations per sūrah, as on main: the reader and the revelation story. */
.surah-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
    margin-top: auto; padding-top: var(--s4); }
.surah-card-actions a { display: block; padding: var(--s2) var(--s3); text-align: center;
    text-decoration: none; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line);
    transition: all .18s; }
.sc-read { background: rgba(232,181,77,.12); border-color: var(--gold) !important;
    color: var(--gold-deep); }
.sc-read:hover { background: var(--gold); color: var(--n0); }
.sc-story { color: var(--muted); }
.sc-story:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* The `hidden` attribute hides via `display:none` in the user-agent stylesheet,
   which ANY author `display` rule outranks. Cards are flex, so every filter on
   the site set .hidden = true, updated its count, and changed nothing on screen
   — the sūrah filter, the article filter and the empty states all looked dead.
   This restores the attribute's meaning site-wide. */
[hidden] { display: none !important; }


/* ============================================== surah journey (story) === */
.journey-hero { padding-block: clamp(var(--s8), 9vw, var(--s9)); }
.journey-title { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); line-height: 1.02;
    letter-spacing: -.02em; margin: 0 0 var(--s5); }
.journey-title em { display: block; font-style: italic; color: var(--gold-lit); }
.journey-h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); margin: 0 0 var(--s5); }

/* Concentric rings around the sūrah's Arabic name. */
.journey-seal { position: relative; display: grid; place-items: center; flex: none;
    align-self: center; justify-self: center;
    width: clamp(230px, 38vw, 380px); height: clamp(230px, 38vw, 380px); }
.js-ring { position: absolute; border-radius: 50%; border: 1px solid var(--gold);
    opacity: .28; }
.js-ring-1 { inset: 0; opacity: .14; }
.js-ring-2 { inset: 12%; opacity: .22; }
.js-ring-3 { inset: 26%; opacity: .34;
    background: radial-gradient(circle at 50% 45%, rgba(232,181,77,.10), transparent 70%); }
.js-core { display: grid; justify-items: center; gap: var(--s2); text-align: center; z-index: 1;
    padding: 0 12%; }
.js-core small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .24em;
    text-transform: uppercase; color: var(--gold); }
.js-core strong { font-family: var(--arabic); font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
    line-height: 1.5; color: var(--cream); font-weight: 400; }
.js-core i { font-style: normal; font-size: var(--t-micro); letter-spacing: .1em;
    color: var(--muted-night); }
@media (max-width: 820px) { .journey-seal { width: 210px; height: 210px; } }

/* Three facts, divided rather than boxed — quieter than cards. */
.fact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line); background: var(--cream); }
.fact-row > div { padding: clamp(var(--s5), 3vw, var(--s7));
    border-inline-start: 1px solid var(--line); }
.fact-row > div:first-child { border-inline-start: 0; }
.fact-mark { display: block; color: var(--gold-deep); font-size: .8rem; margin-bottom: var(--s3); }
.fact-row small { display: block; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.fact-row strong { display: block; margin-top: var(--s2); font-family: var(--display);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 500; color: var(--ink); }
.fact-row p { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-label);
    line-height: 1.7; }
@media (max-width: 780px) {
    .fact-row { grid-template-columns: 1fr; }
    .fact-row > div { border-inline-start: 0; border-block-start: 1px solid var(--line); }
    .fact-row > div:first-child { border-block-start: 0; }
}

.story-standfirst { font-family: var(--display); font-size: var(--t-lead); line-height: 1.6;
    color: var(--cream); max-width: 62ch; margin: 0 0 var(--s6); }

/* The background opens clamped: a long provider text should not bury the page. */
.story-panel { position: relative; padding: clamp(var(--s5), 3vw, var(--s7));
    border: 1px solid var(--line-night); background: rgba(247,241,227,.04); }
.story-body { max-height: 22rem; overflow: hidden; color: var(--cream); max-width: none; }
.story-body p { color: rgba(247,241,227,.82); }
.story-panel.is-open .story-body { max-height: none; }
.story-fade { position: absolute; inset-inline: 0; inset-block-end: 0; height: 11rem;
    pointer-events: none; background: linear-gradient(to bottom, transparent, var(--n1) 92%); }
.story-panel.is-open .story-fade { display: none; }
.story-toggle { margin-top: var(--s5); }

.story-source { display: grid; gap: 2px; margin: var(--s6) 0 0; padding-top: var(--s4);
    border-top: 1px solid var(--line-night); }
.story-source span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold); }
.story-source strong { color: var(--cream); font-size: var(--t-label); }
.story-source em { font-style: normal; font-size: var(--t-micro); color: var(--muted-night); }


/* Arabic inside the provider background was rendering at body size, which is
   too small to read comfortably alongside the English. */
.source-body .ar-line, .story-body .ar-line,
.source-body [lang="ar"], .story-body [lang="ar"] {
    font-family: var(--arabic); font-size: 1.85rem; line-height: 2.3;
    direction: rtl; text-align: right; color: var(--gold-lit);
    margin: var(--s4) 0; display: block;
}
.band-paper .source-body .ar-line { color: var(--gold-deep); }
@media (max-width: 560px) {
    .source-body .ar-line, .story-body .ar-line { font-size: 1.45rem; line-height: 2.1; }
}

/* ---------------------------------------------- hadith reference list --- */
.ref-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ref-group { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s5);
    align-items: start; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.ref-ayah { display: grid; gap: 2px; }
.ref-ayah small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); }
.ref-ayah strong { font-family: var(--display); font-size: 1.6rem; line-height: 1;
    color: var(--gold-deep); }
.ref-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ref-chip { display: inline-flex; align-items: baseline; gap: var(--s2);
    padding: var(--s2) var(--s4); text-decoration: none; color: var(--ink);
    border: 1px solid var(--line); background: var(--paper); transition: all .18s; }
.ref-chip b { font-weight: 500; font-size: var(--t-label); }
.ref-chip span { font-family: var(--mono); font-size: var(--t-micro); color: var(--gold-deep); }
a.ref-chip:hover { border-color: var(--gold); background: rgba(232,181,77,.12); }
.ref-chip.is-plain { opacity: .7; }
.ref-toggle { margin-top: var(--s5); }
@media (max-width: 620px) {
    .ref-group { grid-template-columns: 1fr; gap: var(--s3); }
    .ref-ayah { display: flex; align-items: baseline; gap: var(--s2); }
    .ref-ayah strong { font-size: 1.25rem; }
}

/* Auth link beside the primary action in the header. */
.nav-auth { display: inline-flex; align-items: center; padding: var(--s2) var(--s3);
    text-decoration: none; color: var(--cream); font-size: var(--t-label);
    border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; }
.nav-auth:hover { color: var(--gold-lit); border-bottom-color: var(--gold); }
@media (max-width: 900px) { .nav-auth { display: none; } }


/* ============================================== integrity ledger ======== */
.verify-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
    padding: var(--s5); margin-bottom: var(--s6); border: 1px solid var(--gold);
    background: rgba(232,181,77,.08); }
.verify-tick { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
    border-radius: 50%; background: var(--gold); color: var(--n0); font-size: 1.1rem; }
.verify-banner > div { flex: 1 1 22rem; min-width: 0; }
.verify-banner strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.verify-banner p { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-label); }

.badge { display: inline-flex; align-items: center; gap: var(--s2); flex: none;
    padding: var(--s1) var(--s3); font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor;
    border-radius: 999px; }
.badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%;
    background: currentColor; }
.badge-ok   { color: #3f7d4e; }
.badge-feed { color: var(--gold-deep); }
.badge-ref  { color: #6a6152; }
.badge-live { color: #2f6f86; }
.badge-gate { color: #8a5a2b; }

.ledger-list { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .ledger-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger-card { display: flex; flex-direction: column; min-width: 0;
    padding: clamp(var(--s5), 3vw, var(--s6)); border: 1px solid var(--line);
    background: var(--paper); }
.ledger-card header { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.ledger-card header .eyebrow { margin: 0; }
.ledger-card h2 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 var(--s4); }

.ledger-rows { display: grid; gap: 0; margin: 0; }
.ledger-rows > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s4);
    padding: var(--s3) 0; border-top: 1px solid var(--line); }
.ledger-rows dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
.ledger-rows dd { margin: 0; font-size: var(--t-label); line-height: 1.7; }
.ledger-rows .hash { font-size: var(--t-micro); word-break: break-all; color: var(--ink-2); }
@media (max-width: 560px) {
    .ledger-rows > div { grid-template-columns: 1fr; gap: var(--s1); }
}

.ledger-note { margin: var(--s4) 0 0; padding: var(--s4); background: var(--cream);
    border-inline-start: 2px solid var(--gold); font-size: var(--t-label); color: var(--muted);
    line-height: 1.7; }
.ledger-links { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 0 0;
    padding-top: var(--s4); border-top: 1px solid var(--line); margin-top: auto; }
.ledger-links a { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--gold-deep); text-decoration: none; }
.ledger-links a:hover { text-decoration: underline; }

.licence-note { margin-top: var(--s7); padding: var(--s5); border: 1px dashed var(--line);
    background: var(--cream); }
.licence-note p:last-child { margin: 0; color: var(--muted); font-size: var(--t-label);
    line-height: 1.75; max-width: 78ch; }

/* ----------------------------------------------- methodology steps --- */
.method-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.method-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s5);
    padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.method-list li:first-child { padding-top: 0; }
.method-list li:last-child { border-bottom: 0; }
.method-n { font-size: 1.6rem; line-height: 1; color: var(--gold-deep); letter-spacing: .04em; }
.method-list h2 { font-family: var(--display); font-size: 1.45rem; margin: 0 0 var(--s3); }
.method-list p { margin: 0; color: var(--ink-2); line-height: 1.85; max-width: 68ch; }
.method-list a { color: var(--gold-deep); text-underline-offset: 3px; }
@media (max-width: 560px) {
    .method-list li { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s5) 0; }
}

/* Invitation into the revelation story, at the end of the sūrah. */
.journey-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
    margin-top: var(--s7); padding: var(--s5); text-decoration: none; color: inherit;
    border: 1px solid var(--gold); background: rgba(232,181,77,.07); transition: background .2s; }
.journey-invite:hover { background: rgba(232,181,77,.14); }
.ji-mark { color: var(--gold-deep); flex: none; }
.ji-body { flex: 1 1 20rem; min-width: 0; display: grid; gap: 2px; }
.ji-body small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-deep); }
.ji-body strong { font-family: var(--display); font-size: 1.3rem; }
.ji-body em { font-style: normal; color: var(--muted); font-size: var(--t-label); line-height: 1.7; }
.ji-go { flex: none; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-deep); }

/* Journey foot: richer next-step cards and the practice-guide cross-link. */
.art-nav small { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--muted); }
.learn-crosslink { margin: var(--s6) 0 0; padding: var(--s4) var(--s5);
    border: 1px dashed var(--line); background: var(--cream);
    font-size: var(--t-label); color: var(--muted); line-height: 1.8; }
.learn-crosslink a { color: var(--gold-deep); text-underline-offset: 3px; }

/* Admin section tabs. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6);
    padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.admin-tabs a { padding: var(--s2) var(--s4); text-decoration: none; color: var(--muted);
    border: 1px solid var(--line); font-size: var(--t-label); transition: all .18s; }
.admin-tabs a:hover { border-color: var(--gold-deep); color: var(--ink); }
.admin-tabs a.is-active { border-color: var(--gold); background: rgba(232,181,77,.12); color: var(--ink); }
.ledger-card header .badge { flex: none; }


/* -------------------------------------------- country picker (listbox) --- */
.country-field, .city-field { position: relative; }
.country-button { display: flex; align-items: center; gap: var(--s3); width: 100%;
    padding: var(--s3) var(--s4); font: inherit; font-size: var(--t-label); text-align: start;
    background: var(--paper); border: 1px solid var(--line); cursor: pointer; }
.country-button:hover { border-color: var(--gold-deep); }
.country-button [data-country-label] { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.country-button i { font-style: normal; color: var(--gold-deep); flex: none; }

.country-menu { position: absolute; z-index: 30; inset-inline: 0; margin-top: 4px;
    background: var(--paper); border: 1px solid var(--gold);
    box-shadow: 0 18px 40px -24px rgba(3,6,15,.55); }
.country-search { padding: var(--s3); border-bottom: 1px solid var(--line); }
.country-search input { width: 100%; padding: var(--s2) var(--s3); font: inherit;
    font-size: var(--t-label); background: var(--cream); border: 1px solid var(--line); }
.country-options { max-height: 17rem; overflow-y: auto; }
.country-options button { display: flex; align-items: baseline; gap: var(--s3); width: 100%;
    padding: var(--s2) var(--s4); font: inherit; text-align: start; background: none;
    border: 0; cursor: pointer; }
.country-options button:hover { background: rgba(232,181,77,.14); }
.country-options button[aria-selected="true"] { background: rgba(232,181,77,.2); }
.country-options strong { font-weight: 500; font-size: var(--t-label); }
.country-options small { color: var(--muted); font-size: var(--t-micro); margin-inline-start: auto; }
.country-empty { margin: 0; padding: var(--s4); text-align: center; color: var(--muted);
    font-size: var(--t-label); }
.city-menu .country-options:empty { display: none; }


/* Teaching / safeguarding notes: a marked panel, not loose text at the foot. */
.teaching-note { display: flex; gap: var(--s4); align-items: flex-start; margin: 0;
    padding: var(--s5); border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
    background: var(--cream); }
.tn-mark { color: var(--gold-deep); flex: none; margin-top: 2px; }
.teaching-note p { margin: 0; color: var(--muted); font-size: var(--t-label); line-height: 1.8;
    max-width: 76ch; }
.teaching-note strong { color: var(--ink); }
.band-night .teaching-note { background: rgba(232,181,77,.05); border-color: var(--line-night); }
.band-night .teaching-note p { color: var(--muted-night); }
.band-night .teaching-note strong { color: var(--cream); }

/* Flag glyphs need a font that actually carries them; the display and mono
   faces do not, so the picker rendered country codes as blank boxes. */
.country-options button > span:first-child,
.country-button [data-country-flag],
.field select {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", var(--body), sans-serif;
}
.country-options button > span:first-child,
.country-button [data-country-flag] { font-size: 1.15rem; line-height: 1; flex: none; }


/* Country code chip. Windows has no flag emoji at all, so a styled ISO code is
   the only mark that renders the same on every platform. */
.cc { display: inline-grid; place-items: center; min-width: 2.2rem; padding: 2px 6px;
    font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em;
    color: var(--gold-deep); background: rgba(232,181,77,.14); border: 1px solid var(--gold);
    border-radius: 3px; flex: none; }
.country-button .cc { margin-inline-end: var(--s1); }


/* main's markup arrives with every class stripped, so this styles plain tags. */
.inherited > h2 { font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
    line-height: 1.25; margin: var(--s7) 0 var(--s3); color: var(--ink); max-width: 30ch; }
.inherited > h2:first-child { margin-top: 0; }
.inherited h3 { font-family: var(--display); font-size: 1.2rem; margin: var(--s5) 0 var(--s2); }
.inherited h4 { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.inherited p { color: var(--ink-2); line-height: 1.85; margin: 0 0 var(--s4); max-width: 74ch; }
.inherited ul, .inherited ol { margin: 0 0 var(--s5); padding-inline-start: 1.3rem; }
.inherited li { color: var(--ink-2); line-height: 1.8; margin-bottom: var(--s2); max-width: 72ch; }
.inherited a { color: var(--gold-deep); text-underline-offset: 3px; }
.inherited strong { color: var(--ink); }
.inherited hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
.inherited table { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s6); }
.inherited th, .inherited td { padding: var(--s3); border-bottom: 1px solid var(--line);
    text-align: start; font-size: var(--t-label); }
.inherited th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
.inherited small { color: var(--muted); font-size: var(--t-micro); }
.inherited span + span { margin-inline-start: var(--s2); }
.inherited svg { display: none; }

/* The "on this page" contents list arrives as bare links; give it structure. */
.inherited nav { display: grid; gap: var(--s1); padding: var(--s5); margin-bottom: var(--s6);
    border: 1px solid var(--line); background: var(--cream); }
.inherited nav a { display: block; padding: var(--s1) 0; text-decoration: none;
    color: var(--muted); font-size: var(--t-label); border-bottom: 1px solid transparent; }
.inherited nav a:hover { color: var(--gold-deep); }
.inherited nav > span:first-child { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
    margin-bottom: var(--s2); }

/* ============================ legal notices + hadith references =========== */
.legal-grid { display: grid; gap: clamp(var(--s5), 4vw, var(--s7)); align-items: start; }
@media (min-width: 980px) { .legal-grid { grid-template-columns: 17rem minmax(0, 1fr); } }

.legal-rail { position: sticky; top: 6.5rem; padding: var(--s5);
    border: 1px solid var(--line); background: var(--cream); }
.legal-rail ol { list-style: none; margin: var(--s3) 0 0; padding: 0; counter-reset: none; }
.legal-rail li { border-top: 1px solid var(--line); }
.legal-rail li:first-child { border-top: 0; }
.legal-rail a { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: var(--s2);
    align-items: baseline; padding: var(--s3) 0; text-decoration: none; color: var(--muted);
    font-size: var(--t-label); line-height: 1.45; transition: color .18s; }
.legal-rail a:hover { color: var(--gold-deep); }
.legal-rail .mono { font-size: var(--t-micro); color: var(--gold-deep); letter-spacing: .06em; }
@media (max-width: 979px) { .legal-rail { position: static; } }

.legal-block { padding: clamp(var(--s5), 3vw, var(--s7)) 0;
    border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.legal-block:first-of-type { border-top: 0; padding-top: 0; }
.legal-block > header { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: var(--s3); align-items: baseline; margin-bottom: var(--s4); }
.legal-n { font-size: 1.35rem; line-height: 1; color: var(--gold-deep); }
.legal-block h2 { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
    line-height: 1.25; margin: 0; max-width: 26ch; }

.legal-prose { padding-inline-start: 3.5rem; }
@media (max-width: 620px) { .legal-prose { padding-inline-start: 0; } }
.legal-prose p { color: var(--ink-2); line-height: 1.85; margin: 0 0 var(--s4); max-width: 72ch; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose h3 { font-family: var(--display); font-size: 1.05rem; margin: var(--s5) 0 var(--s2);
    color: var(--ink); }
.legal-prose ul, .legal-prose ol { margin: 0 0 var(--s4); padding-inline-start: 1.2rem; }
.legal-prose li { color: var(--ink-2); line-height: 1.8; margin-bottom: var(--s2); max-width: 70ch; }
.legal-prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.legal-prose strong { color: var(--ink); }
.legal-prose small { display: block; margin-top: var(--s1); color: var(--muted);
    font-size: var(--t-micro); }

/* Main numbers its clauses with a bare "01" line; set it as a marker. */
.legal-prose p:only-child { margin-bottom: 0; }
.legal-prose table { width: 100%; border-collapse: collapse; margin: var(--s3) 0 var(--s5); }
.legal-prose th, .legal-prose td { padding: var(--s3); border-bottom: 1px solid var(--line);
    text-align: start; font-size: var(--t-label); }
.legal-prose th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }

/* Self-hosted flag images: no platform emoji involved, so they render on
   Windows too (Segoe UI Emoji ships no country flags at all). */
.flag { display: block; width: 24px; height: 18px; object-fit: cover; flex: none;
    border: 1px solid var(--line); border-radius: 2px; background: var(--cream); }
.country-options button > span:first-child,
.country-button [data-country-flag] { display: inline-flex; flex: none; }

/* Main's legal markup uses nested <div>/<dl> rows to separate providers and
   definitions. With its classes gone, give the structure visible separation. */
.legal-prose > div { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.legal-prose > div:first-child { border-top: 0; padding-top: 0; }
.legal-prose div > strong:first-child,
.legal-prose div > b:first-child { display: block; font-family: var(--display);
    font-size: 1.02rem; color: var(--ink); margin-bottom: 2px; }
.legal-prose div > span, .legal-prose div > small { display: block; color: var(--muted);
    font-size: var(--t-label); line-height: 1.7; }
.legal-prose dl { display: grid; gap: 0; margin: var(--s3) 0 var(--s5); }
.legal-prose dl > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.legal-prose dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); }
.legal-prose dd { margin: 0; font-size: var(--t-label); line-height: 1.7; color: var(--ink-2); }
@media (max-width: 620px) { .legal-prose dl > div { grid-template-columns: 1fr; gap: var(--s1); } }

/* Password policy checklist on registration. */
.pw-policy { list-style: none; margin: var(--s3) 0 0; padding: var(--s4);
    border: 1px solid var(--line); background: var(--cream); display: grid; gap: var(--s2); }
.pw-policy li { position: relative; padding-inline-start: 1.7rem; font-size: var(--t-label);
    color: var(--muted); line-height: 1.5; transition: color .18s; }
.pw-policy li::before { content: ""; position: absolute; inset-inline-start: 0; top: .28em;
    width: .95rem; height: .95rem; border: 1px solid var(--line); border-radius: 50%;
    transition: all .18s; }
.pw-policy li.is-met { color: var(--ink); }
.pw-policy li.is-met::before { background: var(--gold); border-color: var(--gold); }
.pw-policy li.is-met::after { content: "✓"; position: absolute; inset-inline-start: .17rem;
    top: .1em; font-size: .7rem; color: var(--n0); line-height: 1.4; }
.pw-policy.is-complete { border-color: var(--gold); background: rgba(232,181,77,.1); }

/* Show / hide password control. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-inline-end: 3rem; }
.pw-eye { position: absolute; inset-inline-end: 0; inset-block: 0; width: 2.9rem;
    display: grid; place-items: center; background: none; border: 0; cursor: pointer;
    color: var(--muted); transition: color .18s; }
.pw-eye:hover, .pw-eye.is-shown { color: var(--gold-deep); }
.pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.pw-eye.is-shown .pw-slash { opacity: 1; }

/* Blocks lifted from main's list/definition markup. */
.legal-prose .legal-term { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--gold-deep); margin: var(--s4) 0 var(--s1); }
.legal-prose .legal-item { position: relative; padding-inline-start: 1.4rem; }
.legal-prose .legal-item::before { content: ""; position: absolute; inset-inline-start: .25rem;
    top: .72em; width: .38rem; height: .38rem; background: var(--gold); border-radius: 50%; }

.age-note { margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
    font-size: var(--t-label); color: var(--muted); line-height: 1.75; max-width: 62ch; }


/* ================================================= account ("Your journey") */
.acct-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.acct-card { display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
    padding: clamp(var(--s5), 2.5vw, var(--s6)); border: 1px solid var(--line);
    background: var(--paper); }
.acct-card > header { display: grid; gap: var(--s1); padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line); }
.acct-card > header .eyebrow { margin: 0; }
/* Card headings sit inside a form: display scale here is far too loud. */
.acct-card h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 500;
    line-height: 1.3; margin: 0; max-width: none; }
.acct-card > footer { margin-top: auto; padding-top: var(--s4);
    border-top: 1px solid var(--line); }
.acct-card .btn { width: 100%; justify-content: center; }

.acct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.acct-note { margin: 0; color: var(--muted); font-size: var(--t-label); line-height: 1.75; }
.acct-divider { height: 1px; background: var(--line); margin: var(--s2) 0; }
.acct-inline { margin: 0; }
.acct-inline .btn { width: 100%; justify-content: center; }

/* Deletion stays folded away and visually separated from everything reversible. */
.acct-danger { border: 1px solid #b3452f; background: rgba(179,69,47,.05); padding: var(--s4); }
.acct-danger > summary { cursor: pointer; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: #b3452f; }
.acct-danger p { margin: var(--s3) 0; color: var(--muted); font-size: var(--t-label);
    line-height: 1.7; }
.acct-danger .field { margin-bottom: var(--s4); }
.btn-danger { background: #b3452f; color: #fff; border: 1px solid #b3452f; width: 100%;
    justify-content: center; }
.btn-danger:hover { background: #97341f; border-color: #97341f; }

/* The policy list is dense inside a card; tighten it. */
.acct-card .pw-policy { padding: var(--s3) var(--s4); gap: var(--s1); }
.acct-card .pw-policy li { font-size: var(--t-micro); }

/* ------------------------------------------------ admin email-MFA screen --- */
.mfa-band { padding-block: clamp(var(--s7), 8vw, var(--s9)); }
.mfa-shell {
    width: min(34rem, calc(100% - var(--gutter) * 2));
    margin-inline: auto;
    display: grid;
    gap: var(--s5);
}
.mfa-card {
    width: 100%;
    padding: clamp(var(--s5), 5vw, var(--s7));
    border-block-start: 3px solid var(--gold);
    box-shadow: 0 1.5rem 4rem -2.5rem rgba(3,6,15,.45);
}
.mfa-card > header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
}
.mfa-lock {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-deep);
    background: rgba(232,181,77,.09);
}
.mfa-lock svg { width: 1.35rem; height: 1.35rem; }
.mfa-code-field { margin-bottom: 0; }
.mfa-code-field input {
    min-height: 3.8rem;
    font-family: var(--mono);
    font-size: clamp(1.15rem, 4vw, 1.45rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .34em;
    text-align: center;
    text-indent: .34em;
}
.mfa-trust {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    background: var(--cream);
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}
.mfa-trust:hover { border-color: var(--gold); }
.mfa-trust input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.mfa-switch {
    position: relative;
    width: 2.8rem;
    height: 1.55rem;
    margin-top: .1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    transition: border-color .18s, background-color .18s;
}
.mfa-switch > span {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: calc(1.55rem - 8px);
    height: calc(1.55rem - 8px);
    border-radius: 50%;
    background: var(--muted);
    transition: transform .2s var(--ease), background-color .18s;
}
.mfa-trust input:checked + .mfa-switch {
    border-color: var(--gold-deep);
    background: var(--gold);
}
.mfa-trust input:checked + .mfa-switch > span {
    transform: translateX(1.25rem);
    background: var(--n0);
}
.mfa-trust input:focus-visible + .mfa-switch {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
}
.mfa-trust-copy { display: grid; gap: var(--s1); min-width: 0; }
.mfa-trust-copy strong { color: var(--ink); font-size: var(--t-label); line-height: 1.45; }
.mfa-trust-copy small { color: var(--muted); font-size: var(--t-micro); line-height: 1.6; }
.mfa-card > footer { display: grid; gap: var(--s3); }
.mfa-card > footer p {
    margin: 0;
    color: var(--muted);
    font-size: var(--t-micro);
    line-height: 1.55;
    text-align: center;
}
.mfa-support { width: 100%; }
.mfa-support .resend-line { justify-content: center; margin-block-start: 0; }
.mfa-support .grid-footnote { margin-block-start: var(--s4); text-align: center; }
@media (max-width: 340px) {
    .mfa-shell { width: calc(100% - var(--s4) * 2); }
    .mfa-card { padding: var(--s4); }
    .mfa-card > header { align-items: start; }
    .mfa-lock { width: 2.35rem; height: 2.35rem; }
    .mfa-trust { padding: var(--s3); }
}

/* ------------------------------------------------------------- flashes --- */
/* Sits inside the page, not clamped to the navigation bar. Generous space above
   and below so it reads as a message about the page, not part of the header. */
/* --max does not exist in this stylesheet; referencing it made the whole width
   declaration invalid, so the banner rendered full-bleed against the nav.
   Match .wrap, which is what every other page section uses. */
/* A cream card floating in the dark gap between the fixed header and the hero
   always read as detached, however much margin it had. This is a full-bleed
   strip flush under the header instead — it reads as a system message about the
   page rather than an object hovering over it. */
/* In the flow, inside the page column — not fixed, not full-bleed. A floating
   card in the corner is far from the form that produced it; this sits with the
   work it is reporting on, and the JS below moves it under the open panel's
   title so it lands exactly where you were looking. */
.v2-flash-area { width: min(100% - var(--gutter) * 2, 1280px);
    margin: 0 auto var(--s5); display: grid; gap: var(--s3); }
.v2-flash { position: relative; display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s4); background: var(--cream); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--gold); }
.v2-flash > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.v2-flash-label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-deep); }
.v2-flash p { margin: 0; color: var(--ink); line-height: 1.6; font-size: var(--t-label);
    overflow-wrap: anywhere; }
.v2-flash.is-success { border-inline-start-color: #3f7d4e; }
.v2-flash.is-success .v2-flash-label { color: #3f7d4e; }
.v2-flash.is-error { border-inline-start-color: #b3452f; background: rgba(179,69,47,.06); }
.v2-flash.is-error .v2-flash-label { color: #b3452f; }
.v2-flash-x { flex: none; background: none; border: 0; cursor: pointer; padding: 2px;
    color: var(--muted); line-height: 0; }
.v2-flash-x:hover { color: var(--ink); }
/* A thin bar showing the time left, so nothing vanishes without warning.
   Purely decorative: with no JS it simply sits full-width and the message
   stays until dismissed. */
.v2-flash-life { position: absolute; inset-block-end: 0; inset-inline-start: 0;
    height: 2px; width: 100%; background: var(--gold); opacity: .5; }
.v2-flash.is-error .v2-flash-life { display: none; }

/* Inside a panel or a form it is already within the column, so it spans its
   host instead of re-applying the page gutter. */
.acct-card > .v2-flash-area,
form > .v2-flash-area,
[data-acct-panel] > .v2-flash-area { width: auto; margin-inline: 0; }

/* The no-JS fallback. While the message is still a direct child of <main> it
   would sit under the fixed header, so it clears it here. Once the script moves
   it into a form this selector stops matching and the offset goes with it —
   which is why the rule is written against the position rather than the class. */
main > .v2-flash-area { margin-block-start: calc(5rem + var(--s4)); }
@media (max-width: 900px) { main > .v2-flash-area { margin-block-start: calc(4.5rem + var(--s4)); } }

/* Motion fails safe: the message is fully visible with no script at all. */
.v2-flash.is-going { opacity: 0; transition: opacity .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .v2-flash.is-going { transition: none; } }
}
.v2-flash.is-error .v2-flash-label { color: #b3452f; }

/* Sign out sat beside a gold button as bare text, which read as a stray word
   in the nav rather than a control. It is the secondary action to "Your
   journey", so it takes the outlined treatment on the dark header. */
.nav-signout { display: inline-flex; margin: 0; }
.btn-nav { min-height: 40px; padding: var(--s2) var(--s4);
    color: var(--paper); border-color: rgba(255, 255, 255, .28); background: transparent; }
.btn-nav:hover, .btn-nav:focus-visible { color: var(--ink); background: var(--paper);
    border-color: var(--paper); }
@media (max-width: 900px) { .nav-signout { display: none; } }

/* Account tabs: one panel at a time, so the page is never a wall of forms. */
.acct-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6);
    padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.acct-tabs button { padding: var(--s2) var(--s4); font: inherit; font-size: var(--t-label);
    color: var(--muted); background: none; border: 1px solid var(--line); cursor: pointer;
    transition: all .18s; }
.acct-tabs button:hover { border-color: var(--gold-deep); color: var(--ink); }
.acct-tabs button.is-active { border-color: var(--gold); background: rgba(232,181,77,.12);
    color: var(--ink); }
.acct-panels > [data-acct-panel] { max-width: 44rem; }

/* When a banner is present the section below it has already been pushed down,
   so it should not add its own full hero padding on top. */


/* ------------------------------------------------ owner inbox · /review --- */
.inbox-list { display: grid; gap: var(--s5); }
.inbox-item { border: 1px solid var(--line); background: var(--paper);
    padding: var(--s5) var(--s6); display: grid; gap: var(--s3);
    border-inline-start: 3px solid var(--line); }
.inbox-item.is-high { border-inline-start-color: var(--gold); }
.inbox-item.is-critical { border-inline-start-color: #b3452f; }
.inbox-head { display: flex; flex-wrap: wrap; gap: var(--s3);
    align-items: center; justify-content: space-between; }
.inbox-marks { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.inbox-priority, .inbox-status, .inbox-cat { font-family: var(--mono);
    font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
    padding: .28em .7em; border: 1px solid var(--line); color: var(--muted); }
.inbox-priority.is-critical { color: #b3452f; border-color: #b3452f; }
.inbox-priority.is-high { color: var(--gold-deep); border-color: var(--gold); }
.inbox-status.is-pending { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.inbox-cat.is-member { color: var(--gold-deep); border-color: var(--gold); }
.inbox-time { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); }
.inbox-subject { margin: 0; font-size: var(--t-h4); line-height: 1.3; }
.inbox-quote { margin: 0; padding: var(--s3) var(--s4); background: var(--cream);
    border-inline-start: 2px solid var(--gold); font-style: italic; color: var(--ink-2); }
.inbox-body { margin: 0; color: var(--ink-2); line-height: 1.75;
    max-width: 68ch; overflow-wrap: anywhere; }
.inbox-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
    margin: 0; padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }
.inbox-meta div { display: grid; gap: 2px; }
.inbox-meta dt { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.inbox-meta dd { margin: 0; font-size: var(--t-small); color: var(--ink); }
.inbox-actions { display: grid; gap: var(--s3); margin: 0;
    padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }
.inbox-actions .btn { justify-self: start; }
.inbox-hint { margin: 0; font-size: var(--t-small); color: var(--muted); }
.inbox-btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.inbox-empty { border: 1px dashed var(--line); padding: var(--s7) var(--s6);
    text-align: center; display: grid; gap: var(--s2); }
.inbox-empty h3 { margin: 0; font-size: var(--t-h4); }
.inbox-empty p { margin: 0 auto; max-width: 46ch; color: var(--muted); }

.audit-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.audit-trail li { padding-inline-start: var(--s5); border-inline-start: 1px solid rgba(255,255,255,.16); }
.audit-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; }
.audit-action { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.audit-target, .audit-trail time { font-family: var(--mono);
    font-size: var(--t-micro); color: var(--muted-night); }
.audit-note { margin: var(--s2) 0 0; color: rgba(255,255,255,.86); max-width: 62ch; }
.audit-by { margin: 2px 0 0; font-size: var(--t-small); color: var(--muted-night); }

/* -------------------------------------------- source guide · /guide ------- */
.guide-ask { display: grid; gap: var(--s4); max-width: 44rem; }
.guide-ask .btn { justify-self: start; }
.guide-status { min-height: 1.5rem; margin-block-start: var(--s4); color: var(--ink-2); }
.guide-status.is-working::before { content: ""; display: inline-block; width: .8rem; height: .8rem;
    margin-inline-end: .55rem; border: 2px solid var(--line); border-top-color: var(--gold-deep);
    border-radius: 50%; animation: guide-spin .75s linear infinite; }
.guide-results { display: grid; gap: var(--s3); margin-block-start: var(--s3); }
.guide-message { padding: var(--s4); border-inline-start: 3px solid var(--green);
    background: rgba(17,88,74,.08); color: var(--ink-2); }
.guide-message.needs-scholar { border-inline-start-color: var(--gold-deep);
    background: rgba(184,128,41,.1); }
.guide-result { display: grid; grid-template-columns: minmax(7rem,.3fr) minmax(0,1fr) auto;
    gap: var(--s4); align-items: center; padding: var(--s4); color: inherit;
    background: var(--paper); border: 1px solid var(--line); text-decoration: none; }
.guide-result:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.guide-result > div { display: grid; gap: .2rem; }
.guide-result > div span { color: var(--gold-deep); font-family: var(--mono);
    font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; }
.guide-result > div small, .guide-result p small { display: block; color: var(--muted); }
.guide-result p { margin: 0; font-family: var(--arabic); font-size: 1.65rem;
    line-height: 1.8; text-align: end; }
.guide-result.is-knowledge p { display: grid; gap: .25rem; font-family: inherit;
    font-size: inherit; line-height: 1.55; text-align: start; }
.guide-result > strong { color: var(--gold-deep); white-space: nowrap; }
@keyframes guide-spin { to { transform: rotate(360deg); } }
.guide-pending { display: flex; gap: var(--s5); align-items: flex-start;
    border: 1px solid var(--line); background: var(--paper); padding: var(--s6); }
.guide-pending-mark { flex: none; color: var(--gold-deep); }
.guide-pending h2 { margin: var(--s1) 0 var(--s3); font-size: var(--t-h3); }
.guide-pending p { margin: 0 0 var(--s3); color: var(--ink-2); max-width: 62ch; line-height: 1.75; }
.guide-pending p:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
    .inbox-item { padding: var(--s4); }
    .inbox-head { align-items: flex-start; }
    .inbox-btn-row .btn { width: 100%; justify-content: center; }
    .guide-pending { flex-direction: column; gap: var(--s4); padding: var(--s5); }
    .guide-result { grid-template-columns: 1fr; }
    .guide-result p { text-align: end; }
    .guide-result > strong { justify-self: start; }
}

/* ------------------------------------------------------- article editor --- */
.admin-list-head { display: flex; flex-wrap: wrap; gap: var(--s3);
    align-items: center; justify-content: space-between; margin-block-end: var(--s4); }
.row-edit { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.art-editor { display: grid; gap: var(--s6); align-items: start;
    grid-template-columns: minmax(0, 1fr); }
.art-editor-main { display: grid; gap: var(--s5); min-width: 0; }
.art-editor-side { display: grid; gap: var(--s5); align-content: start; }
.art-editor textarea { font-family: inherit; line-height: 1.7; resize: vertical; }
#ar-body { font-size: var(--t-body); min-height: 24rem; }
.slug-wrap { display: flex; align-items: stretch; border: 1px solid var(--line);
    background: var(--paper); }
.slug-prefix { display: flex; align-items: center; padding-inline: var(--s3);
    font-family: var(--mono); font-size: var(--t-micro); color: var(--muted);
    background: var(--cream); border-inline-end: 1px solid var(--line); white-space: nowrap; }
.slug-wrap input { border: 0; flex: 1 1 auto; min-width: 0; background: transparent; }
.slug-wrap input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.art-editor-danger { margin-block-start: var(--s6); border-color: rgba(179,69,47,.35); }

@media (min-width: 60rem) {
    .art-editor { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* --------------------------------------------------------- admin people --- */
.people-list { display: grid; gap: var(--s5); }
.person { border: 1px solid var(--line); background: var(--paper);
    padding: var(--s5); display: grid; gap: var(--s4); }
.person-head { display: flex; flex-wrap: wrap; gap: var(--s3);
    align-items: flex-start; justify-content: space-between; }
.person-head h3 { margin: 0; font-size: var(--t-h4); display: flex;
    align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.person-you { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.person-mail { margin: 2px 0 0; font-size: var(--t-small); color: var(--muted); overflow-wrap: anywhere; }
.person-marks { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.person-joined { font-size: var(--t-micro); color: var(--muted); }
.person-actions { display: flex; flex-wrap: wrap; gap: var(--s4);
    padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
.person-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.person-form label { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.person-form select { padding: .4em .6em; }
/* Size is not a colour scheme: .btn-quiet is the light-surface outline, and
   bolting compact sizing onto it meant every quiet button shrank. */
.btn-sm { min-height: 34px; padding: .45em .9em; font-size: var(--t-micro); }
.person-danger > summary { cursor: pointer; font-family: var(--mono);
    font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); padding-block-start: var(--s3);
    border-block-start: 1px solid var(--line); }
.person-danger[open] > summary { color: #b3452f; margin-block-end: var(--s4); }
.person-pw { display: grid; gap: var(--s3); max-width: 26rem; margin-block-end: var(--s4); }
.person-pw .btn { justify-self: start; }

/* ------------------------------------------------------ email templates --- */
.tpl-list { display: grid; gap: var(--s3); }
.tpl { border: 1px solid var(--line); background: var(--paper); }
.tpl > summary { cursor: pointer; padding: var(--s4) var(--s5); display: grid; gap: 2px; }
.tpl[open] > summary { border-block-end: 1px solid var(--line); }
.tpl-name { font-weight: 600; }
.tpl-desc { font-size: var(--t-small); color: var(--muted); }
.tpl form { display: grid; gap: var(--s4); padding: var(--s5); }
.tpl textarea { font-family: var(--mono); font-size: var(--t-small); line-height: 1.7; }
.switch-form { display: grid; gap: var(--s3); margin-block-start: var(--s4);
    padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
.switch-form .btn { justify-self: start; }

/* ------------------------------------------------------- content editor --- */
.story-edit { display: grid; gap: var(--s4); }
.story-edit .btn { justify-self: start; }
.story-edit textarea { font-family: inherit; line-height: 1.8; resize: vertical; }
.hadith-edit-list { display: grid; gap: var(--s5); }
.hadith-edit { border: 1px solid var(--line); background: var(--paper);
    padding: var(--s5); display: grid; gap: var(--s4); }
.hadith-edit.is-new { border-style: dashed; background: transparent; }
.hadith-edit form { display: grid; gap: var(--s4); }
.hadith-edit-head { display: flex; gap: var(--s3); align-items: baseline;
    justify-content: space-between; }
.hadith-edit-head h3 { margin: 0; font-size: var(--t-h4); }
.hadith-edit-foot { display: flex; gap: var(--s3); }
.edit-ar { font-family: var(--ar); font-size: 1.35rem; line-height: 2.1; }

@media (max-width: 40rem) {
    .person-actions { flex-direction: column; gap: var(--s3); }
    .person-form { width: 100%; }
    .person-form select { flex: 1 1 auto; }
}

/* .kids-path-head carries no bottom margin — the Learn grids that follow it
   supply their own. The admin blocks below do not, so the heading collided
   with the first field label. Scoped so Learn spacing is untouched. */
.kids-path-head + .story-edit,
.kids-path-head + .hadith-edit-list,
.kids-path-head + .inbox-list,
.kids-path-head + .inbox-empty,
.kids-path-head + .tpl-list,
.kids-path-head + .guide-ask { margin-block-start: var(--s6); }

/* An RTL block inside an LTR column aligns to its own start edge — which put
   the sūrah name at the far right of the hero, adrift from the title above it. */
.hero-ar { display: block; text-align: left; }

/* Grid items stretch by default, so a field whose neighbour carries a hint line
   grew its input to match — the two boxes in a pair ended up different heights. */
.acct-pair > .field { align-content: start; }

/* ------------------------------------------------------- cover picker ----- */
.cover-note { display: flex; gap: var(--s3); align-items: center; margin: 0 0 var(--s3);
    padding: var(--s3); background: var(--cream); border: 1px solid var(--line); }
.cover-note img { flex: none; border: 1px solid var(--line); }
.cover-note span { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.cover-pick { display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.cover { position: relative; display: block; cursor: pointer; border: 2px solid var(--line);
    background: var(--paper); aspect-ratio: 16 / 10; overflow: hidden; }
.cover input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover:hover { border-color: var(--gold); }
.cover:has(input:checked) { border-color: var(--gold-deep); box-shadow: 0 0 0 2px var(--gold); }
.cover:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.cover-none { display: grid; place-content: center; height: 100%; font-family: var(--mono);
    font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------- people search/pager --- */
.people-search { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
    margin-block-end: var(--s4); }
.people-search label { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.people-search input { flex: 1 1 16rem; min-width: 0; }
.pager { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
    justify-content: center; margin-block-start: var(--s6);
    padding-block-start: var(--s5); border-block-start: 1px solid var(--line); }
.pager-count { font-size: var(--t-micro); letter-spacing: .1em; color: var(--muted); }

.consent-form { display: grid; gap: var(--s3); margin: 0; }
.consent-form .btn { justify-self: start; margin-block-start: var(--s2); }
.svc-form { display: grid; gap: var(--s3); margin-block-start: var(--s4);
    padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
.svc-form .btn { justify-self: start; }
.svc-form.is-locked { opacity: .5; }
.ledger-card.is-awaiting { border-style: dashed; }

/* ---------------------------------------------- account: place & marks --- */
.place-card { display: flex; flex-direction: column; gap: var(--s3); }
.place-card h3 { margin: 0; font-size: var(--t-h4); line-height: 1.25; }
.place-ayah { font-family: var(--mono); font-size: var(--t-label); color: var(--gold-deep); }
.place-coords { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; }
.place-coords span { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.place-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: auto;
    padding-block-start: var(--s3); }
.mark-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
    background: var(--line); border: 1px solid var(--line); }
.mark-list a { display: flex; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) var(--s3); background: var(--paper); text-decoration: none; }
.mark-list a:hover { background: var(--cream); }
.mark-list .mono { font-size: var(--t-micro); color: var(--muted); }
.mark-more { margin: 0; font-size: var(--t-small); color: var(--muted); }

@media (max-width: 52rem) { .place-links .btn { width: 100%; justify-content: center; } }

/* ------------------------------------------------- account: the planner --- */
.acct-panel-plain { display: grid; gap: var(--s5); }
.tracker-grid { display: grid; gap: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* A reading someone chose for themselves must never be dressed as a sunnah,
   so the basis is a visible label, not a note in the database. */
.basis { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; padding: .22em .6em; border: 1px solid var(--line);
    color: var(--muted); white-space: nowrap; }
.basis-sunnah { color: var(--gold-deep); border-color: var(--gold); }
.basis-quran { color: #3f7d4e; border-color: rgba(63,125,78,.4); }

.plan-group { border: 1px solid var(--line); background: var(--paper); }
.plan-group > summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 600; }
.plan-group[open] > summary { border-block-end: 1px solid var(--line); }
.plan-options { display: grid; gap: 1px; background: var(--line); }
.plan-option { display: block; position: relative; background: var(--paper);
    padding: var(--s3) var(--s4); cursor: pointer; }
.plan-option:hover { background: var(--cream); }
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option-body { display: grid; gap: 2px; padding-inline-start: 1.6rem; position: relative; }
.plan-option-body::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .28em;
    width: 1rem; height: 1rem; border: 1px solid var(--line); border-radius: 50%; }
.plan-option input:checked + .plan-option-body::before {
    border-color: var(--gold-deep); box-shadow: inset 0 0 0 3px var(--gold); }
.plan-option input:focus-visible + .plan-option-body::before { outline: 2px solid var(--gold); outline-offset: 2px; }
.plan-option-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.plan-option-note { font-size: var(--t-small); color: var(--muted); line-height: 1.55; }

.day-pick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.day input { position: absolute; opacity: 0; pointer-events: none; }
.day span { display: inline-flex; align-items: center; justify-content: center;
    min-width: 3.4rem; padding: var(--s2) var(--s3); border: 1px solid var(--line);
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer; color: var(--muted); }
.day input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.day input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.plan-live header { display: grid; gap: var(--s2); justify-items: start; }
.plan-today { display: flex; align-items: baseline; gap: var(--s3); }
.plan-today-n { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--gold-deep); }
.plan-today-u { font-size: var(--t-lead); color: var(--ink-2); }
.plan-bar { height: 6px; background: var(--line); overflow: hidden; }
.plan-bar span { display: block; height: 100%; background: var(--gold); }
.plan-facts { display: grid; gap: var(--s3) var(--s5); margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.plan-facts dt { font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plan-facts dd { margin: 0; color: var(--ink); }
.plan-note { margin: 0; font-size: var(--t-small); color: var(--muted); line-height: 1.7; max-width: 60ch; }
.plan-paused { margin: 0; padding: var(--s3); background: var(--cream);
    border-inline-start: 3px solid var(--gold); font-size: var(--t-label); }
.plan-controls { display: flex; flex-wrap: wrap; gap: var(--s3); }
.plan-card-live { border-inline-start: 3px solid var(--gold); }

/* Forms read best in a narrow column, but the tracker is a dashboard — the
   44rem cap meant to keep inputs legible was squashing it into two columns. */
.acct-panels > [data-acct-panel="tracker"],
.acct-panels > [data-acct-panel="goal"] { max-width: none; }
.acct-panels > [data-acct-panel="goal"] > .acct-card { max-width: 48rem; }

/* A thin countdown so the toast visibly reads as temporary rather than stuck.
   It is decorative: with no JS it simply never moves, and the close button and
   the message itself are unaffected. */
.v2-flash { position: relative; }
.v2-flash-life { position: absolute; inset-block-end: 0; inset-inline-start: 0;
    height: 2px; width: 100%; background: var(--gold); opacity: .55; }
.v2-flash.is-error .v2-flash-life { display: none; }

.plan-pick-hint { margin: 0; font-size: var(--t-small); color: var(--muted); }
.plan-pick-hint.is-set { color: var(--gold-deep); font-weight: 600; }
.plan-pick-hint.is-warn { color: #b3452f; font-weight: 600; }

/* A locked day reads as settled, not broken: it keeps its "on" colour but
   stops inviting a click. */
.day input:disabled + span { cursor: default; opacity: .75; }
.day input:disabled:not(:checked) + span { opacity: .4; }
.acct-note.is-locked { color: var(--gold-deep); }

/* Resend controls. Quiet by default — most people never need them, and a
   prominent "email not arrived?" box on a sign-in form invites doubt. */
.resend-help { margin-block-start: var(--s5); border: 1px solid var(--line);
    background: var(--paper); }
.resend-help > summary { cursor: pointer; padding: var(--s3) var(--s4);
    font-size: var(--t-small); color: var(--muted); }
.resend-help[open] > summary { border-block-end: 1px solid var(--line); color: var(--ink); }
.resend-help form { display: grid; gap: var(--s3); padding: var(--s4); }
.resend-help .btn { justify-self: start; }
.resend-line { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
    margin-block-start: var(--s5); }
.resend-line p { margin: 0; font-size: var(--t-small); color: var(--muted); }

/* An unconfirmed inbox is a blocker, not a neutral state — it is the reason
   someone cannot sign in, so it reads as a warning rather than a tag. */
.inbox-status.is-unverified { color: #b3452f; border-color: #b3452f; }

/* The confirm-your-email walk-through. Only rendered for someone actually
   blocked by it, so it can afford to be prominent rather than tucked away. */
.verify-walk { margin-block-start: var(--s6); padding: var(--s6);
    background: var(--cream); border: 1px solid var(--gold);
    border-inline-start: 3px solid var(--gold-deep); display: grid; gap: var(--s3); }
.verify-walk h2 { margin: 0; font-size: var(--t-h4); }
.verify-walk p { margin: 0; color: var(--ink-2); line-height: 1.7; max-width: 58ch; }
.verify-steps { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: var(--s2);
    color: var(--ink-2); line-height: 1.6; }
.verify-steps li::marker { font-family: var(--mono); font-size: var(--t-micro); color: var(--gold-deep); }
.verify-walk form { margin: 0; }
.verify-note { font-size: var(--t-small); color: var(--muted); }

/* ======================================= evidence library + records ======== */
.evidence-hero::after,
.record-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 42%, rgba(232,181,77,.14), transparent 24rem),
        linear-gradient(90deg, rgba(3,6,15,.18), rgba(3,6,15,.66));
}
.evidence-hero-copy,
.record-hero-inner { position: relative; z-index: 1; }
.evidence-hero h1,
.record-hero h1 { max-width: 15ch; }

.evidence-standard {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: var(--s5);
    align-items: center;
    padding: clamp(var(--s5), 5vw, var(--s7));
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--gold);
    background: var(--paper);
    box-shadow: 0 1.2rem 3.5rem rgba(18,28,33,.08);
}
.evidence-standard-mark,
.record-review-mark {
    display: grid;
    place-items: center;
    width: 3.4rem;
    aspect-ratio: 1;
    color: var(--gold-deep);
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: rgba(232,181,77,.09);
}
.evidence-standard-mark svg,
.record-review-mark svg { width: 1.4rem; height: 1.4rem; }
.evidence-standard h2 { margin: var(--s1) 0 var(--s2); font-size: var(--t-h3); }
.evidence-standard p { margin-block: 0; max-width: 66ch; }
.evidence-standard-link {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-width: 13rem;
    padding: var(--s3) 0 var(--s3) var(--s4);
    border-inline-start: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
.evidence-standard-link strong { color: var(--gold-deep); font-size: 1.4rem; }

.evidence-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s6);
    margin-block-end: var(--s7);
}
.evidence-heading h2 { margin: var(--s2) 0; }
.evidence-heading p { margin: 0; max-width: 62ch; }
.evidence-count {
    flex: none;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--paper);
}
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--s4);
}
.evidence-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(var(--s5), 4vw, var(--s6));
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(232,181,77,.055), transparent 45%),
        var(--paper);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.evidence-card:hover {
    transform: translateY(-3px);
    border-color: rgba(154,111,34,.6);
    box-shadow: 0 1.2rem 2.6rem rgba(18,28,33,.09);
}
.evidence-card-top,
.record-citation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding-block-end: var(--s4);
    border-block-end: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.evidence-card-top > span,
.record-citation-top > span { color: var(--gold-deep); }
.evidence-card-scope {
    margin: var(--s4) 0 var(--s2);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.evidence-card h3 { margin: 0 0 var(--s3); font-size: var(--t-h4); }
.evidence-card h3 a { color: var(--ink); text-decoration: none; }
.evidence-card > p:not(.evidence-card-scope) { margin: 0 0 var(--s5); }
.evidence-card-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin-block-start: auto;
    padding-block: var(--s4);
    border-block-start: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--muted);
}
.evidence-card-proof span { display: inline-flex; align-items: center; gap: .4rem; }
.evidence-card-proof svg { width: .95rem; height: .95rem; color: var(--gold-deep); }
.evidence-card-open {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
.evidence-card-open strong { color: var(--gold-deep); font-size: 1.2rem; }
.evidence-empty {
    display: grid;
    justify-items: center;
    max-width: 48rem;
    margin-inline: auto;
    padding: clamp(var(--s6), 8vw, var(--s9));
    border: 1px solid var(--line);
    text-align: center;
    background: var(--paper);
}
.evidence-empty-mark {
    display: grid;
    place-items: center;
    width: 4.6rem;
    aspect-ratio: 1;
    margin-block-end: var(--s4);
    color: var(--gold-deep);
    border: 1px solid var(--gold);
    border-radius: 50%;
}
.evidence-empty-mark svg { width: 1.8rem; height: 1.8rem; }
.evidence-empty h2 { max-width: 18ch; margin: var(--s2) 0 var(--s3); }
.evidence-empty > p:not(.eyebrow) { max-width: 62ch; margin: 0; }
.evidence-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-block-start: var(--s5); }

.record-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block-end: var(--s5);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-night);
}
.record-crumbs a { color: inherit; text-decoration: none; }
.record-crumbs a:hover { color: var(--cream); }
.record-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin-block-start: var(--s5);
}
.record-proof span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(245,211,138,.28);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .06em;
    color: var(--cream);
    background: rgba(3,6,15,.28);
}
.record-proof svg { width: 1rem; height: 1rem; color: var(--gold); }

.record-layout {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(18rem,.75fr);
    gap: clamp(var(--s5), 6vw, var(--s8));
    align-items: start;
}
.record-main { display: grid; gap: var(--s6); min-width: 0; }
.record-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border: 1px solid var(--line);
    background: var(--cream);
}
.record-scope > div { display: grid; gap: .2rem; }
.record-scope small,
.record-review small {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.record-scope a {
    flex: none;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-decoration: none;
}
.record-labels { display: flex; flex-wrap: wrap; gap: var(--s2); }
.record-labels span {
    padding: .4rem .65rem;
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.record-claim {
    position: relative;
    margin: 0;
    padding: clamp(var(--s5), 5vw, var(--s7));
    border: 1px solid var(--gold);
    border-inline-start-width: 4px;
    background:
        linear-gradient(135deg, rgba(232,181,77,.12), transparent 68%),
        var(--paper);
}
.record-claim small {
    display: block;
    margin-block-end: var(--s3);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.record-claim p {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.42;
    color: var(--ink);
}
.record-difference {
    padding: var(--s4) var(--s5);
    border-inline-start: 3px solid var(--gold-deep);
    background: var(--cream);
}
.record-difference p { margin: var(--s2) 0 0; }
.record-prose {
    font-size: var(--t-lead);
    line-height: 1.9;
    color: var(--ink-2);
}
.record-review {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--line);
    background: var(--paper);
}
.record-review h2 { margin: var(--s2) 0; font-size: var(--t-h4); }
.record-review p { margin: 0 0 var(--s3); }
.record-review-scope {
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--line);
    color: var(--muted);
}
.record-review a {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.record-boundary {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: var(--s4);
    padding: var(--s5);
    color: var(--cream);
    background: var(--n1);
}
.record-boundary > span { color: var(--gold); }
.record-boundary svg { width: 1.4rem; height: 1.4rem; }
.record-boundary p { margin: var(--s2) 0 0; color: var(--muted-night); }

.record-ledger {
    position: sticky;
    top: calc(var(--s7) + var(--s5));
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--paper);
}
.record-ledger-head { padding: var(--s5); border-block-end: 1px solid var(--line); }
.record-ledger-head h2 { margin: var(--s2) 0; font-size: var(--t-h3); }
.record-ledger-head > p:last-child { margin: 0; }
.record-citations { display: grid; }
.record-citations > article { padding: var(--s5); border-block-end: 1px solid var(--line); }
.record-citations h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-h4); }
.record-citation-arabic {
    margin: var(--s2) 0;
    font-family: 'Amiri Quran V2', serif;
    font-size: 1.35rem;
    color: var(--ink);
}
.record-citation-author { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-small); }
.record-citations dl { display: grid; gap: 0; margin: var(--s4) 0; }
.record-citations dl > div {
    display: grid;
    grid-template-columns: minmax(6.5rem,.7fr) minmax(0,1fr);
    gap: var(--s3);
    padding-block: var(--s2);
    border-block-start: 1px solid var(--line);
}
.record-citations dt {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.record-citations dd { margin: 0; overflow-wrap: anywhere; font-size: var(--t-small); }
.record-citations > article > a {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.record-concern {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: var(--s3);
    align-items: center;
    padding: var(--s4) var(--s5);
    color: var(--cream);
    background: var(--n1);
    text-decoration: none;
}
.record-concern > span:first-child { color: var(--gold); }
.record-concern svg { width: 1.2rem; height: 1.2rem; }
.record-concern > span:nth-child(2) { display: grid; gap: .1rem; }
.record-concern small { color: var(--muted-night); }
.record-concern b { color: var(--gold); }

@media (max-width: 880px) {
    .evidence-standard { grid-template-columns: auto minmax(0,1fr); }
    .evidence-standard-link {
        grid-column: 1 / -1;
        min-width: 0;
        padding: var(--s4) 0 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--line);
    }
    .evidence-grid,
    .record-layout { grid-template-columns: 1fr; }
    .record-ledger { position: static; }
}
@media (max-width: 620px) {
    .evidence-heading { align-items: start; flex-direction: column; gap: var(--s4); }
    .evidence-standard { grid-template-columns: 1fr; }
    .evidence-standard-mark { width: 3rem; }
    .record-scope { align-items: start; flex-direction: column; }
    .record-review { grid-template-columns: 1fr; }
    .record-citations dl > div { grid-template-columns: 1fr; gap: .2rem; }
}