/* ═══════════════════════════════════════════════════════════════════════════
   styles/al.css — ARM'S LENGTH II · THE LAYER                        (v1264)

   CALLED BY: the first <link rel=stylesheet> of all five shells (zero.html,
     zero-audio, zero-bank, zero-confusion, zero-memorize), always AFTER the
     <style id="al-slot"> anchor that module CSS is injected into by
     Mithlayn.style(id, css) — so the layer wins every equal-specificity tie.
   OWNS: every colour, size, radius, duration and font name in the app.
     Nothing else in the repo may define --k-*, --l-*, --d-*, --al-*, --f-*,
     --lh-*, --w-* or --data-*. A module may only var(); it may not define
     (DESIGN-LANGUAGE.md, rule 14).
   STRATA, in this order: 1 the five knobs · 2 the 19 grounds (moved byte for
     byte from zero.html, v1262) · 3 the roles every component reads · 4 the
     alias table that re-points the older token families AND holds the six
     private palettes their modules used to define (v1264, wave 4) · 5 the data
     register (colour that is content: the differing-word wash, the arrival
     light, the three verdict inks and the strength ramp) · 6 the eight
     components (from v1262 wave 1 on).
   WRITING A LANGUAGE: one of the seven muṣḥaf-derived token sets is applied by
     writing strata 1, 2 and 5 of THIS FILE and nothing else — the grounds
     (--l-* / --d-*), the five knobs, and the data register. Every role in
     stratum 3, every family in stratum 4 and every component in stratum 6
     derives from those three, so the write reaches the whole app.
   SAFE TO DELETE: NO — the app has no other colour or size source.
   LAST AUDIT: 2026-09-07 (v1264 — wave 4: the private palettes moved in, the
     three literal roles derived, the data register wired; wave 5: one Arabic class)

   ── THE MUṢḤAF-SACRED EXCLUSIONS (CLAUDE.md §K · DESIGN-LANGUAGE.md E1–E8) ──
   The design language stops at the page edge. This file must NEVER select into
   the compiled page:
     .mushaf-page .mushaf-page-host .glyph-layer .text-layer .chrome-layer
     .word-glyph .word .qcf-line .verse-end .surah-banner .basmala .slot
     .warsh-clean .cp-wrap .cp-ink .cp-mark
   E2  the page's only resize is transform:scale(); --mu-page-scale (0.92 v1 ·
       0.84 v2 · 0.80 v4, K1) is owned by mushaf.css + zero.html and is never
       derived from --k-type, --k-density or any knob.
   E3  .mushaf-page-host's padding feeds 100cqi and therefore the rendered page
       width: it is an Instrument, its padding is NOT calc(var(--al-u) * n).
   E4  v2/v4 need contain:layout (not layout paint) on the glyph layer or iOS
       shaves the sides off before the scale transform; headless never shows it.
   E5  v4 dark = the per-page dark COLR face swap in zero.html, not a light card.
   E6  mithlayn-assets/** is never tokenised (#7c5b14 gilt · #f7f1de paper ·
       #1b1812 ink are the page's own palette).
   E7  a jump lights an āyah on the overlay layer (--data-lit, which is the
       accent's own wash), never a
       style on a word box: .al-lit, one class, positioned by the caller from
       the compiled glyph boxes and appended to the page's .chrome-layer
       (zero.html litJump, pairs.js litPage — v1263). This file styles the
       overlay by its own class only; it never names the layer it sits in.
   E8  the receipt canvas is not theme-aware; --data-tj-* is content, never
       swept.
   verify/probes/knob.js asserts all of this on every knob write.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · THE FIVE KNOBS ═════════════════════════════════════════════════════
   Written only by Mithlayn.knob.set() (modules/shared/style.js) — on BOTH
   <html> and <body> inline, because the dark accent default lives on
   body.theme-dark and an inline value on body is what beats it. Persisted as
   mithlayn.ui.knobs, applied pre-paint by style.js the way data-light/-dark
   are. Ranges are clamped in the setter, never in CSS; --k-type only goes up. */
:root{
  --k-type:1;                                  /* 1 -> 1.4  · every size in stratum 3 */
  --k-radius:1;                                /* 0 -> 1.6  · both radii, ratio locked 1:2 */
  --k-density:1;                               /* .85 -> 1.25 · the unit and the row; never the tap floor */
  --k-acc:var(--l-gold-deep);                  /* any ground accent, or a hex · the one accent everywhere */
  --k-ar:"Amiri","Amiri Quran",serif;          /* the Qurʾānic face — everywhere except the compiled page */
}
body.theme-dark{ --k-acc:var(--d-acc); }


/* ═══ 2 · THE 19 GROUNDS — moved byte for byte from zero.html (v1262) ═══════
   Ten light (:root[data-light]) and nine dark (body.theme-dark[data-dark]).
   The owner's grounds are the colour source; no value changed in this move.
   The picker sets html[data-light] / body[data-dark] (persisted as
   mithlayn.lightPalette / mithlayn.darkPalette, applied pre-paint by the boot
   script in each shell). The html-element background mirrors that follow each
   dark ground stay in zero.html — they are chrome, not tokens. */
  :root{ --l-ink:#1b1812; --l-ink2:#2b2415; --l-ink3:#3d3829; --l-mut:#6b6353; --l-soft:#a89b80; --l-soft2:#9a8c73; --l-gold:#caa64b; --l-gold-txt:#a08a4e; --l-gold-deep:#8a7340; --l-blue:#5b7ca8; --l-paper:#fffdf6; --l-bg:#faf6ec;
    /* v788 — full light-ground token set so palettes re-tint EVERY surface:
       the -rgb triplets feed the alpha-glass chrome (pills/menus keep their
       exact translucency), paper2 = the whiter card cream, card = the pure-
       white list/tile/input surface. Each palette block overrides all six. */
    --l-paper-rgb:255,253,246; --l-bg-rgb:250,246,236; --l-paper2:#fffefa; --l-card:#fff; }
  /* v1262 — --l-line, named in DESIGN-LANGUAGE §2 since v1077 and defined for
     the first time here (it had 0 definitions and 12 reads; the Planner 2 cards
     read it with no fallback and drew their hairline in currentColor). The
     value is the hairline the app already ships as --al-line. */
  :root{ --l-line:rgba(60,50,20,.12); }
  /* v1264 (wave 4) — the two light ground slots the roles were reading as
     literals. --l-line2 is the firmer rule (--al-line2's shipped value) and
     --l-acc-ink is the ink that goes ON the accent; dark has carried --d-line
     and --d-acc-ink since v782, so light had the only role in stratum 3 with
     nowhere on the ground to read from. Values are the ones that shipped, so
     nothing moves; what changes is that a ground — or one of the seven
     muṣḥaf-derived languages — can now set them. */
  :root{ --l-line2:rgba(60,50,20,.2); --l-acc-ink:var(--l-paper); }
  /* the dark default ("warm"). --d-ink3 is the muted ink; it follows --d-soft
     of whichever ground is active. */
  body.theme-dark{
    --d-ink3:var(--d-soft);
    --d-bg:#14100a; --d-surface:#201913; --d-glass:rgba(28,22,15,.9); --d-panel:rgba(26,21,14,.98);
    --d-ink:#ece3cf; --d-ink2:#d8cdb4; --d-soft:#a89a7e;
    --d-line:rgba(214,196,158,.12); --d-line2:rgba(214,196,158,.22);
    --d-acc:#2bb6a6; --d-acc-ink:#03201c; --d-acc-txt:#d4b573;   /* v753 warm dark (audit theme 3): same paper at night — TEXT accents go gold like light mode; fills stay teal (accent-2) */
  }
  /* v782 — dark-mode palette presets (Settings -> More -> Dark mode colour).
     Each overrides only the --d-* tokens; the picker sets body[data-dark] and
     persists mithlayn.darkPalette (applied pre-paint by the boot script). The
     default (no attribute / "warm") is the block above. */
  body.theme-dark[data-dark="navy"]{
    --d-bg:#0d1220; --d-surface:#161d2e; --d-glass:rgba(18,26,44,.9); --d-panel:rgba(13,18,32,.98);
    --d-ink:#e6ebf4; --d-ink2:#c6cfe0; --d-soft:#8b96ab;
    --d-line:rgba(190,205,235,.12); --d-line2:rgba(190,205,235,.22);
    --d-acc:#2f9ec4; --d-acc-ink:#04141d; --d-acc-txt:#cbb583;
  }
  body.theme-dark[data-dark="forest"]{
    --d-bg:#0a1712; --d-surface:#12271e; --d-glass:rgba(16,36,27,.9); --d-panel:rgba(9,23,17,.98);
    --d-ink:#eaf1e8; --d-ink2:#ccdbcd; --d-soft:#8ba593;
    --d-line:rgba(186,224,200,.13); --d-line2:rgba(186,224,200,.24);
    --d-acc:#34c191; --d-acc-ink:#032018; --d-acc-txt:#d3bd78;
  }
  body.theme-dark[data-dark="charcoal"]{
    --d-bg:#131313; --d-surface:#1f1f1f; --d-glass:rgba(28,28,28,.9); --d-panel:rgba(19,19,19,.98);
    --d-ink:#ebe8e2; --d-ink2:#d1cdc5; --d-soft:#9b968d;
    --d-line:rgba(222,218,210,.12); --d-line2:rgba(222,218,210,.22);
    --d-acc:#2bb6a6; --d-acc-ink:#03201c; --d-acc-txt:#d4b573;
  }
  body.theme-dark[data-dark="plum"]{
    --d-bg:#150f18; --d-surface:#221827; --d-glass:rgba(32,22,38,.9); --d-panel:rgba(21,15,24,.98);
    --d-ink:#efe6f2; --d-ink2:#d6c9dd; --d-soft:#a495ab;
    --d-line:rgba(220,200,232,.12); --d-line2:rgba(220,200,232,.22);
    --d-acc:#b483c8; --d-acc-ink:#1c0f21; --d-acc-txt:#d8b77a;
  }
  /* v892 — four more night grounds (Ink, Ocean, Wine, Olive) */
  body.theme-dark[data-dark="ink"]{
    --d-bg:#12151a; --d-surface:#1c2027; --d-glass:rgba(24,29,37,.9); --d-panel:rgba(17,20,25,.98);
    --d-ink:#e4e9ef; --d-ink2:#c8cfd9; --d-soft:#8e97a4;
    --d-line:rgba(200,214,232,.12); --d-line2:rgba(200,214,232,.22);
    --d-acc:#4f95b8; --d-acc-ink:#08141c; --d-acc-txt:#c9b283;
  }
  body.theme-dark[data-dark="ocean"]{
    --d-bg:#0b1616; --d-surface:#132422; --d-glass:rgba(17,33,31,.9); --d-panel:rgba(10,21,20,.98);
    --d-ink:#e6efec; --d-ink2:#c9dbd6; --d-soft:#8aa59e;
    --d-line:rgba(184,224,214,.13); --d-line2:rgba(184,224,214,.24);
    --d-acc:#35b9a9; --d-acc-ink:#032019; --d-acc-txt:#d2bc79;
  }
  body.theme-dark[data-dark="wine"]{
    --d-bg:#190f13; --d-surface:#271a20; --d-glass:rgba(35,23,29,.9); --d-panel:rgba(24,14,18,.98);
    --d-ink:#f0e6e9; --d-ink2:#dcc9cf; --d-soft:#a8929a;
    --d-line:rgba(230,200,210,.12); --d-line2:rgba(230,200,210,.22);
    --d-acc:#c66a7d; --d-acc-ink:#220d14; --d-acc-txt:#d8b77a;
  }
  body.theme-dark[data-dark="olive"]{
    --d-bg:#12140b; --d-surface:#1e2114; --d-glass:rgba(27,30,18,.9); --d-panel:rgba(17,19,10,.98);
    --d-ink:#ecefe0; --d-ink2:#d5dabf; --d-soft:#a0a687;
    --d-line:rgba(214,224,180,.12); --d-line2:rgba(214,224,180,.22);
    --d-acc:#a3b155; --d-acc-ink:#14170a; --d-acc-txt:#d4bd73;
  }
  /* v783/v788 — light-mode ground presets (Settings -> More -> Light mode colour).
     Each re-grounds the full six-token surface set (bg, paper, their -rgb
     triplets for the alpha-glass chrome, paper2, card); ink and gold stay put
     so contrast matches the shipped default. v788: scoped to :root (the
     attribute lives on <html>) so the html element itself — the overscroll
     ground — re-tints too; dark mode is unaffected because dark surfaces read
     --d-* tokens. The default (no attribute / "ivory") is the :root block. */
  :root[data-light="sepia"]{ --l-bg:#f1e7d3; --l-paper:#f9f1e0;
    --l-bg-rgb:241,231,211; --l-paper-rgb:249,241,224; --l-paper2:#fbf5e7; --l-card:#fdf8ec; }
  :root[data-light="sage"]{ --l-bg:#eaf0e8; --l-paper:#f7fbf4;
    --l-bg-rgb:234,240,232; --l-paper-rgb:247,251,244; --l-paper2:#f9fcf6; --l-card:#fcfefa; }
  :root[data-light="mist"]{ --l-bg:#eaeef4; --l-paper:#fafcff;
    --l-bg-rgb:234,238,244; --l-paper-rgb:250,252,255; --l-paper2:#fbfdff; --l-card:#fdfeff; }
  :root[data-light="blush"]{ --l-bg:#f8eeea; --l-paper:#fff9f7;
    --l-bg-rgb:248,238,234; --l-paper-rgb:255,249,247; --l-paper2:#fffbf9; --l-card:#fffdfc; }
  /* v892 — four more daytime grounds (Sand, Dawn, Mint, Lavender) */
  :root[data-light="sand"]{ --l-bg:#faf3e2; --l-paper:#fdf8ec;
    --l-bg-rgb:250,243,226; --l-paper-rgb:253,248,236; --l-paper2:#fefaf0; --l-card:#fffcf4; }
  :root[data-light="dawn"]{ --l-bg:#fdf5ee; --l-paper:#fffaf5;
    --l-bg-rgb:253,245,238; --l-paper-rgb:255,250,245; --l-paper2:#fffbf7; --l-card:#fffcf9; }
  :root[data-light="mint"]{ --l-bg:#f1faf5; --l-paper:#fbfefc;
    --l-bg-rgb:241,250,245; --l-paper-rgb:251,254,252; --l-paper2:#fcfefd; --l-card:#fdfffe; }
  :root[data-light="lavender"]{ --l-bg:#edeaf3; --l-paper:#faf9fd;
    --l-bg-rgb:237,234,243; --l-paper-rgb:250,249,253; --l-paper2:#fbfafd; --l-card:#fdfcfe; }
  /* v905 — pure White ground (crisp daylight paper) */
  :root[data-light="white"]{ --l-bg:#ffffff; --l-paper:#ffffff;
    --l-bg-rgb:255,255,255; --l-paper-rgb:255,255,255; --l-paper2:#ffffff; --l-card:#ffffff; }


/* ═══ 3 · THE ROLES — what the components read ═══════════════════════════════
   Every component rule in the app reads from here and from nowhere else. All
   seven size rungs derive from --k-type; adding an eighth is a design
   decision, not a CSS edit. */
:root{
  /* size — seven rungs; nothing on a surface is smaller than the floor (rule 1) */
  --al-floor:calc(15px * var(--k-type));       /* meanings, meta, heads, page numbers, previews */
  --al-act:calc(18px * var(--k-type));         /* every tappable label, every row value */
  --al-title:calc(22px * var(--k-type));       /* sheet and pane titles */
  --al-hero:calc(28px * var(--k-type));        /* the one big Latin figure per surface */
  --al-ar:calc(28px * var(--k-type));          /* the āyah hero */
  --al-ar2:calc(22px * var(--k-type));         /* Arabic on cards */
  --al-ar3:calc(18px * var(--k-type));         /* Arabic inside a --al-floor line (previews, provenance) */
  /* weight — closed, mapped to the four Manrope instances actually loaded */
  --w-body:400; --w-med:600; --w-bold:700; --w-black:800;
  /* leading — keyed to script; Arabic leading is load-bearing */
  --lh-ui:1.25; --lh-meta:1.35;
  --lh-ar:1.6;                                 /* the Arabic floor — nothing below this may be written anywhere */
  --lh-ar-card:1.75; --lh-ar-hero:1.8;
  /* family — four names */
  --f-ui:"Manrope",-apple-system,system-ui,sans-serif;
  --f-ar:"Amiri",serif;                        /* Arabic prose: sūrah names, duʿāʾ, scholar names */
  --f-quran:var(--k-ar);                       /* Qurʾānic text */
  --f-num:var(--f-ui);                         /* always with font-variant-numeric:tabular-nums */
  /* space, row, tap — from --k-density, except the two that never scale */
  --al-u:calc(4px * var(--k-density));         /* the unit; every gap and padding is calc(var(--al-u) * n) */
  --al-u2:calc(var(--al-u) / 2);               /* the one sanctioned half-step */
  --al-gut:calc(var(--al-u) * 4);              /* the row / body gutter */
  --al-row:max(48px, calc(64px * var(--k-density)));   /* the row; a lead row is the same height, filled */
  --al-tap:44px;                               /* never scales (H3) */
  --al-tap-hard:56px;                          /* never scales — mid-recitation controls (D8) */
  /* radius — two, and a pill; the surface is always twice the control (rule 8) */
  --al-rctl:calc(14px * var(--k-radius));
  --al-rsurf:calc(var(--al-rctl) * 2);
  --al-rpill:999px;                            /* switches and genuinely round buttons only */
  /* colour roles — light */
  --al-paper:var(--l-bg); --al-surf:var(--l-paper); --al-card:var(--l-card);
  --al-card2:color-mix(in srgb, var(--al-line) 37.5%, transparent);   /* the quiet row fill — the hairline at three-eighths: rgba(60,50,20,.045), the shipped value, now following the ground's line (v1264) */
  --al-glass:rgba(var(--l-paper-rgb),.9);
  --al-ink:var(--l-ink); --al-ink2:var(--l-ink2); --al-mut:var(--l-mut); --al-soft:var(--l-soft);
  --al-line:var(--l-line);                     /* the hairline — the ground token, same value */
  --al-line2:var(--l-line2);                   /* the firmer rule — likewise */
  --al-acc:var(--k-acc); --al-acc-ink:var(--l-acc-ink); --al-acc-txt:var(--l-gold-txt);
  --al-acc-soft:color-mix(in srgb, var(--al-acc) 20%, transparent);   /* the wash on a differing word / the arrival light: the ONE accent at 20%, so --k-acc reaches it (v1264; it was a fixed gold that did not follow the knob) */
  --al-acc-ring:color-mix(in srgb, var(--al-acc) 45%, transparent);
  --al-warn-bg:#f7ecd8; --al-warn-ink:#7a5d18;  /* 5.2:1 (H1), as shipped */
  --al-scrim:rgba(30,25,14,.28);
  --al-focus:var(--al-acc);
  /* shadow, motion, elevation */
  --al-sh-1:0 1px 3px rgba(30,25,14,.10);
  --al-sh-2:0 6px 18px -8px rgba(30,25,14,.20);
  --al-sh-modal:0 18px 50px -12px rgba(30,25,14,.30);
  --al-d1:120ms; --al-d2:240ms; --al-d3:360ms;  /* ring & hover · a pane pushing · a sheet rising */
  --al-eo:cubic-bezier(.2,.7,.2,1); --al-eio:cubic-bezier(.6,0,.2,1);
  --al-z-scrim:30; --al-z-sheet:40; --al-z-dock:50;
  /* the responsive width — a token, not an instruction (rule 13). The tablet
     tier arrives for every sheet-shaped surface through this one line. */
  --al-sheet:min(96vw,520px); --al-sheet-h:min(88vh,760px);
}
body.theme-dark{
  /* every role that derives from a theme-scoped knob is re-declared here, on
     the element that carries the override, or the inherited light value wins */
  --al-paper:var(--d-bg); --al-surf:var(--d-surface); --al-card:var(--d-panel);
  --al-card2:color-mix(in srgb, var(--al-line) 31.8182%, transparent);   /* = rgba(214,196,158,.07) on the warm ground, the shipped value; on the other eight night grounds the fill now follows that ground's line instead of staying warm (v1264) */
  --al-glass:var(--d-glass);
  --al-ink:var(--d-ink); --al-ink2:var(--d-ink2); --al-mut:var(--d-ink3); --al-soft:var(--d-soft);
  --al-line:var(--d-line2); --al-line2:var(--d-line);
  --al-acc:var(--k-acc); --al-acc-ink:var(--d-acc-ink); --al-acc-txt:var(--d-acc-txt);
  --al-acc-soft:color-mix(in srgb, var(--al-acc) 22%, transparent);      /* = rgba(43,182,166,.22) on the warm ground; the accent knob reaches it now */
  --al-acc-ring:color-mix(in srgb, var(--al-acc) 45%, transparent);
  --al-warn-bg:rgba(212,181,115,.12); --al-warn-ink:#d4b573;
  --al-scrim:rgba(0,0,0,.5);
  --al-sh-1:0 1px 3px rgba(0,0,0,.5); --al-sh-2:0 6px 18px -8px rgba(0,0,0,.55); --al-sh-modal:0 18px 50px -12px rgba(0,0,0,.65);
}
@media (prefers-reduced-motion:reduce){ :root{ --al-d1:0ms; --al-d2:0ms; --al-d3:0ms; } }
@media (min-width:744px){  :root{ --al-sheet:min(90vw,820px); } }
@media (min-width:1000px){ :root{ --al-sheet:min(86vw,940px); } }


/* ═══ 4 · THE ALIAS TABLE — how the older families convert without a module edit
   zero.html:862 proved this in v1062: 13 lines re-pointed the whole --ms-*
   family at the live grounds and mushaf.css's 1,347 reads followed unedited.
   Moved here verbatim (v1262). Rule: a value here equals what shipped unless a
   wave says otherwise — the first re-pointing that changes a pixel is wave 1. */
  /* --ms-* — styles/mushaf.css's chrome family. tokens.css (the retired app's
     DARK palette) must never be linked to supply these: "the page had no paper,
     it was a hole in the desk" (zero.html v1062 note). --ms-rim is a COLOUR. */
  :root{
    --ms-paper:#fffdf6; --ms-bg:var(--l-bg,#faf6ec); --ms-bg-1:var(--l-paper2,#fffefa);
    --ms-bg-2:var(--l-card,#fff); --ms-bg-3:rgba(60,50,20,.05);
    --ms-ink:var(--l-ink,#1b1812); --ms-ink-2:var(--l-ink2,#2b2415);
    --ms-ink-3:var(--l-mut,#6b6353); --ms-ink-4:var(--l-soft,#a89b80);
    --ms-hair:rgba(60,50,20,.07); --ms-hair-2:rgba(60,50,20,.13); --ms-hair-3:rgba(60,50,20,.2);
    --ms-gold:var(--l-gold,#caa64b); --ms-gold-soft:rgba(202,166,75,.10);
    --ms-gold-rim:rgba(202,166,75,.28); --ms-gold-glow:0 0 0 1px rgba(202,166,75,.28);
    --ms-mint:#5fb594; --ms-mint-2:#7dc9a8; --ms-mint-soft:rgba(95,181,148,.10);
    --ms-mint-rim:rgba(95,181,148,.28); --ms-mint-glow-ring:0 0 0 1px rgba(95,181,148,.28);
    --ms-rose:#c46a6a; --ms-rose-rim:rgba(196,106,106,.3);
    --ms-rim:rgba(255,255,255,.6);
  }
  body.theme-dark{
    --ms-bg:var(--d-bg,#14100a); --ms-bg-1:var(--d-surface,#201913);
    --ms-bg-2:var(--d-panel,#241d15); --ms-bg-3:rgba(214,196,158,.06);
    --ms-ink:var(--d-ink,#ece3cf); --ms-ink-2:var(--d-ink2,#d8cdb4);
    --ms-ink-3:var(--d-ink3,#9a8f77); --ms-ink-4:var(--d-soft,#8d8371);
    --ms-hair:rgba(214,196,158,.07); --ms-hair-2:rgba(214,196,158,.13); --ms-hair-3:rgba(214,196,158,.2);
    --ms-gold:var(--d-acc-txt,#d4b573); --ms-gold-soft:rgba(212,181,115,.10);
    --ms-gold-rim:rgba(212,181,115,.30);
    --ms-rim:rgba(255,255,255,.06);
  }
  /* the structure layer (v1189, DESIGN-LANGUAGE Part II D6–D8, D11). Read by
     zero.html (.banner-warn, .lbl, .pulse-attn) and rep-planner.js. The hit
     ladder, shadows and the warn pair ARE the roles; the radius ladder and the
     two motion pairs keep their shipped values until wave 1 re-points them. */
  :root{
    --r-xs:6px; --r-sm:10px; --r-ctl:12px; --r-srf:16px; --r-tile:20px;   /* wave 1: -> --al-rctl / --al-rsurf */
    --hit:var(--al-tap); --hit-hard:var(--al-tap-hard); --row-h:var(--al-row);
    --sh-1:var(--al-sh-1); --sh-2:var(--al-sh-2); --sh-modal:var(--al-sh-modal);
    --warn-bg:var(--al-warn-bg); --warn-ink:var(--al-warn-ink);
    --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
    --ease-enter:cubic-bezier(.2,.8,.3,1); --dur-1:160ms; --dur-2:320ms;      /* wave 3: -> --al-eo / --al-d* */
  }
  /* ── v1264 · WAVE 4 — THE PRIVATE PALETTES, MOVED IN ────────────────────────
     Six families used to be DEFINED by their own module on its own root, which
     is rule 14 inverted: a module may only var(). They are defined here now, so
     the layer is the only place a colour value is written and one edit — or one
     of the seven muṣḥaf-derived language token sets — reaches them. Where the
     shipped value already equalled a role, the alias reads the role and nothing
     moves; where it did not, the value came across unchanged and the comment
     names the wave that converts it. Selectors are the module's own roots, so
     specificity is what it was; this file is loaded after the al-slot anchor, so
     these win the tie against anything the module still injects. */

  /* --mx-* · the Mutashābihāt dossier (modules/tools/mtx.js, #mtx-pop, ~150
     reads). Wave 6 converts the shell and ranks by type weight; until then the
     dossier's purple/blue taxonomy keeps its values. --mx-blue was already
     exactly --l-blue and now says so; --mx-teal was an orphan (0 definitions,
     read once with a hardcoded fallback) and is defined here for the first time
     at the value that fallback painted. */
  #mtx-pop{
    --mx-card:#fdf9ee; --mx-card2:#faf5e6; --mx-muted:#57492a; --mx-faint:#7d6f52;
    --mx-line:rgba(60,50,20,.14);
    --mx-gold:#b8860b; --mx-goldd:#8a6a24; --mx-goldbg:rgba(184,134,11,.08); --mx-goldbg2:rgba(184,134,11,.16);
    --mx-purple:#5b4a86; --mx-purple2:#8a5ba8; --mx-purplebg:rgba(91,74,134,.07);
    --mx-blue:var(--l-blue); --mx-bluebg:rgba(91,124,168,.12);
    --mx-diffbg:rgba(184,134,11,.17); --mx-diffink:#6d5310;
    --mx-teal:#1d7d70;
  }
  body.theme-dark #mtx-pop{
    --mx-card:#1d1811; --mx-card2:#231d13; --mx-muted:#cfc2a0; --mx-faint:#a89a74;
    --mx-line:rgba(214,196,158,.16);
    --mx-gold:#d3a63a; --mx-goldd:#c39a3a; --mx-goldbg:rgba(211,166,58,.1); --mx-goldbg2:rgba(211,166,58,.2);
    --mx-purple:#a993d6; --mx-purple2:#b78ad0; --mx-purplebg:rgba(169,147,214,.09);
    --mx-blue:#8aa8cc; --mx-bluebg:rgba(138,168,204,.14);
    --mx-diffbg:rgba(211,166,58,.24); --mx-diffink:#f0cf7d;
    /* --mx-teal is deliberately NOT re-declared here: it inherits the light value,
       which is what the orphan's fallback painted in both themes. */
  }

  /* --x* · mtx's extras strip (modules/tools/mtx-extras.js, .mtx-extras). The
     module shipped this twice — once behind @media(prefers-color-scheme:dark),
     which §2 bans and which paints the wrong colours for an OS-dark user on a
     light ground — and the duplicate is deleted with the move. */
  .mtx-extras{ --xg:#b5852f; --xgb:#f6ecd6; --xln:#e2d9c6; --xink:#2b2620; --xink2:#6a6152; --xcard:#fbf7ee; --xbg:#f3eee2; }
  body.theme-dark .mtx-extras{ --xg:#d8ad5c; --xgb:#2e2618; --xln:#332b21; --xink:#ece3d2; --xink2:#a99f8c; --xcard:#25201a; --xbg:#1a1611; }

  /* --qh-* · the qirāʾāt hub (styles/qiraat-hub.css, #qh-scrim). Every one of
     these now reads a ROLE, so the hub follows the ground and the accent knob.
     Four of them — card, paper, line, hair — were written `var(--qh-card)` and
     so on: a custom property that reads ITSELF is cyclic, therefore invalid at
     computed-value time, so in light mode the hub's cards and rules painted
     nothing at all. That is repaired here, which is the one deliberate paint
     change in this family. The ten-hue PAL in qiraat-hub.js is wave 4.4 and is
     NOT touched. */
  #qh-scrim{
    --qh-a:var(--al-acc); --qh-ai:var(--al-acc-txt);
    --qh-ink:var(--al-ink); --qh-ink2:var(--al-ink2); --qh-mut:var(--al-mut); --qh-soft:var(--al-soft);
    --qh-card:var(--al-surf); --qh-paper:var(--al-card);
    --qh-line:var(--al-line); --qh-hair:var(--al-line2);
    --qh-tint:color-mix(in srgb, var(--qh-a) 12%, transparent);   /* the hub's wash is its own accent, not a second gold */
  }
  body.theme-dark #qh-scrim{ --qh-tint:color-mix(in srgb, var(--qh-a) 18%, transparent); }

  /* the duʿāʾ hub (modules/tools/dhikr-dua.css, #dd-scrim). The family is
     unprefixed — --paper/--ink/--gold/--line/--card — and scoped to the hub's
     root, which is why it never collided; it is still a module defining, so it
     comes here. The teal names have aliased gold since v1092 (one accent). */
  #dd-scrim{
    --paper:var(--al-surf); --paper-2:var(--l-bg); --paper-3:var(--l-bg);
    --ink:var(--al-ink); --ink-2:var(--al-mut); --ink-3:var(--al-soft);
    --gold:var(--al-acc-txt); --gold-2:var(--l-gold);
    --gold-soft:color-mix(in srgb,var(--l-gold) 26%,transparent);
    --teal:var(--al-acc-txt); --teal-2:var(--l-gold);
    --teal-soft:color-mix(in srgb,var(--l-gold) 26%,transparent);
    --line:color-mix(in srgb,var(--al-ink) 10%,transparent);
    --line-2:color-mix(in srgb,var(--al-ink) 17%,transparent);
    --card:var(--al-card);
    --card-edge:color-mix(in srgb,var(--al-ink) 14%,transparent);
    --shadow:0 12px 28px -16px color-mix(in srgb,var(--al-ink) 40%,transparent), 0 2px 6px -3px color-mix(in srgb,var(--al-ink) 22%,transparent);
  }
  body.theme-dark #dd-scrim{
    --paper:var(--d-bg); --paper-2:var(--d-surface); --paper-3:var(--d-panel);
    --ink-2:var(--al-ink2);
    --gold-2:var(--al-acc-txt); --gold-soft:color-mix(in srgb,var(--al-acc-txt) 22%,transparent);
    --teal-2:var(--al-acc-txt); --teal-soft:color-mix(in srgb,var(--al-acc-txt) 22%,transparent);
    --line-2:var(--al-line);
    --card:var(--d-panel);
    --card-edge:var(--al-line);
    --shadow:0 14px 30px -18px rgba(0,0,0,.75), 0 2px 8px -4px rgba(0,0,0,.6);
  }

  /* --cp-* · the "palette" mtx skin (modules/tools/mtx-skin-palette.js). The ten
     mtx skins are DEFERRED by owner decision 5 (§7b) — the set is trimmed before
     the shell is converted — so this family moves at its shipped values; what it
     buys today is rule 14 (the module only var()s) and one place to edit. */
  .skin-palette .cp-root{
    --cp-paper:#f5efe1; --cp-paper2:#efe7d5; --cp-card:#fbf6ea; --cp-card2:#f3ead8;
    --cp-ink:#2c2620; --cp-ink-soft:#5c5344; --cp-ink-faint:#8b7f6c;
    --cp-line:#e2d6be; --cp-line-soft:#ece2cd; --cp-field:#fffdf6; --cp-field-line:#d9cbac;
    --cp-green:#3f7a4e; --cp-green-ink:#2c5a38; --cp-green-bg:#e9f1e6; --cp-green-line:#bcd6bd;
    --cp-amber:#9a6d12; --cp-amber-bg:#f4e6bf; --cp-amber-line:#e2c98b;
    --cp-a:#4f6b8a; --cp-a-bg:#e6ecf3; --cp-a-line:#c4d3e4;
    --cp-b:#6f5b8e; --cp-b-bg:#ece7f2; --cp-b-line:#d3c8e2;
    --cp-c:#2f7d72; --cp-c-bg:#e3f0ec; --cp-c-line:#bfe0d6;
    --cp-d:#a5645a; --cp-d-bg:#f2e6e2; --cp-d-line:#e2c9c0;
    --cp-ref:#8a7a56; --cp-ref-bg:#efe8d6; --cp-ref-line:#ddd0b0;
    --cp-kbd:#efe6d2; --cp-kbd-line:#d5c6a4; --cp-kbd-ink:#5c5344;
  }
  body.theme-dark .skin-palette .cp-root{
    --cp-paper:#1c1813; --cp-paper2:#171310; --cp-card:#241f18; --cp-card2:#1f1a14;
    --cp-ink:#ece3d2; --cp-ink-soft:#b6ab95; --cp-ink-faint:#8a7f69;
    --cp-line:#352d22; --cp-line-soft:#2a231b; --cp-field:#100d0a; --cp-field-line:#3c3225;
    --cp-green:#7cb389; --cp-green-ink:#9fce9f; --cp-green-bg:#1c2a1e; --cp-green-line:#33502f;
    --cp-amber:#d8b25e; --cp-amber-bg:#3a2f16; --cp-amber-line:#5f4c22;
    --cp-a:#8aa8cc; --cp-a-bg:#1b2430; --cp-a-line:#33445b;
    --cp-b:#b39fd0; --cp-b-bg:#241d30; --cp-b-line:#40355a;
    --cp-c:#6fbdad; --cp-c-bg:#132824; --cp-c-line:#264a42;
    --cp-d:#d29488; --cp-d-bg:#2c1d19; --cp-d-line:#4d332c;
    --cp-ref:#c3b184; --cp-ref-bg:#26200f; --cp-ref-line:#463b1f;
    --cp-kbd:#2a2318; --cp-kbd-line:#443a29; --cp-kbd-ink:#c3b694;
  }

  /* the FACE families — five names for three roles, defined once here (wave 5).
     --serif/--sans were dhikr-dua's and mtx-skin-editorial's private pair; --ar
     was books.js's and two mtx skins'; --font/--font-ar/--font-quran are the
     retired app's three, read with no fallback at 15 sites in revision.js and
     defined only in shared-themes.css, which the reader never loads (the split
     brain: the same āyah was Scheherazade on six pages and Amiri Quran in the
     reader). One definition, three roles, so --k-ar moves every Qurʾānic face. */
  :root{
    --serif:var(--f-ar); --sans:var(--f-ui); --ar:var(--f-quran);
    --font:var(--f-ui); --font-ar:var(--f-ar); --font-quran:var(--f-quran);
  }


/* ═══ 5 · THE DATA REGISTER — colour that is content, not chrome ═════════════
   Excluded from every sweep and every knob. A wrong tajwīd hue is a teaching
   error; a trap kind IS its colour (the owner's rule, v1240). --data-gilt is
   the printed page's gilt and never the chrome accent: if they were one token,
   changing the UI accent would recolour the muṣḥaf. */
  :root{ --trap-forgot:#c98a1a; --trap-ayah:#c23b3b; --trap-word:#2b8f86; --trap-skip:#5b7ca8; --trap-tajwid:#3f8f4a; --trap-hesit:#7a6fa8; }   /* v1240 Traps: a kind is a colour, by the owner’s rule — a pair is red on both */
  body.theme-dark{ --trap-forgot:#e0a63a; --trap-ayah:#e06060; --trap-word:#4fb6ac; --trap-skip:#7f9fcb; --trap-tajwid:#63b56f; --trap-hesit:#a396cf; }
  :root{
    --data-trap-forgot:var(--trap-forgot); --data-trap-ayah:var(--trap-ayah); --data-trap-word:var(--trap-word);
    --data-trap-skip:var(--trap-skip); --data-trap-tajwid:var(--trap-tajwid); --data-trap-hesit:var(--trap-hesit);
    --data-diff:var(--al-acc-soft);            /* the differing-word wash — the accent's wash, so --k-acc reaches it */
    --data-lit:var(--al-acc-soft);             /* the arrival light on the overlay layer (E7) — the same wash, named for what it means, so a language can part them */
    --data-gilt:#7c5b14;                       /* the printed page's gilt — never the chrome accent */
  }
  /* v1264 (wave 4) — THE THREE VERDICT INKS AND THE STRENGTH RAMP.
     These are not chrome: green means "held", red means "lost", amber means
     "owed". They were three hex literals repeated 120 times across twelve
     shipping files (zero.html ×30, dunya ×23, strength ×20, whiteboard,
     progress, hifz, receipt, speech, akhlaq, wizard, hifz2, save-all); the
     values here are exactly those, so nothing repaints — what changes is that
     one edit now moves all of them, and modules/tools/strength.js reads the
     three anchors back out of this file instead of holding its own copies.
     The ramp is the strength gauge's five rungs, 0% to 100%.
     Not swept, not knob-driven; a language token set writes them (data.ok /
     .bad / .owed in pt2/lang-*.json). */
  :root{
    --data-ok:#3f7d5a; --data-bad:#b6452f; --data-owed:#c0892a; --data-none:#cbbfa3;
    --data-strength-0:var(--data-bad);
    --data-strength-1:color-mix(in srgb, var(--data-bad) 50%, var(--data-owed));
    --data-strength-2:var(--data-owed);
    --data-strength-3:color-mix(in srgb, var(--data-owed) 50%, var(--data-ok));
    --data-strength-4:var(--data-ok);
  }
  /* --data-tj-<rule> ×16 arrives with the wave that converts the tajwīd panel's
     sixteen rule hues (they are ʿilm, not taste, and are not invented here). */


/* ═══ 6 · THE EIGHT COMPONENTS ═══════════════════════════════════════════════
   Sheet · Row · Verse · Choice · Head · Field · Bar · Instrument — emitted by
   Mithlayn.ui (modules/shared/ui-kit.js), each carrying data-probe="<role>".
   Every rule here reads stratum 3 and nothing else. The LEGACY names the
   eight sheet-shaped modules still emit (.sheet .sh-hd .sh-body .sec .li .fld
   .stp .sh-act .sh-btn …) are styled beside their component as aliases of the
   same rules — moved here from tool-hubs.js's injected <style> and from
   zero.html's .li / form-vocabulary blocks (v1262, wave 1) — so those modules
   inherit the language unedited. A module is CONVERTED only when it emits the
   kit; verify/probes/knob.js tells the two apart.
   Selectors stay at one class deep wherever possible: the runtime-linked
   module sheets (pairs.css, traps-*.css, recite-session.css) come later in the
   document and must keep winning their ties. */

/* ── 1 · Sheet ─────────────────────────────────────────────────────────────── */
.al-sheet, .sheet{ width:var(--al-sheet); max-height:var(--al-sheet-h); display:flex; flex-direction:column;
  background:var(--al-surf); color:var(--al-ink); border:1px solid var(--al-line); border-radius:var(--al-rsurf); overflow:hidden; }
/* the two-pane sheet (the hold menu): one pane on a phone, .on marks it; side by side from 744 */
.al-panes{ flex:1; min-height:0; display:flex; flex-direction:column; }
.al-pane{ display:none; flex-direction:column; min-height:0; }
.al-pane.on{ display:flex; animation:alpush var(--al-d2) var(--al-eo); }
@keyframes alpush{ from{ opacity:.5; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .al-pane.on{ animation:none; } }
.al-bar, .sh-hd{ flex:none; display:flex; align-items:center; gap:calc(var(--al-u) * 2); min-height:var(--al-row);
  padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3) 0 var(--al-gut); }
.sh-hd .sh-l{ flex:1; min-width:0; display:flex; align-items:center; gap:calc(var(--al-u) * 2); }
.al-tt, .sh-tt{ flex:1; min-width:0; }
.al-title, .sh-hd .ttl{ flex:1; min-width:0; font:800 var(--al-title)/var(--lh-ui) var(--f-ui); color:inherit; letter-spacing:0; text-transform:none; padding:0; }
.al-sub, .sh-hd .sub2{ font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); margin-top:var(--al-u2); }
.al-back, .al-x, .sh-bk, .sh-hd .x{ flex:none; width:var(--al-tap); height:var(--al-tap); margin:0; padding:0; border-radius:50%;   /* round buttons: a circle */
  border:1px solid var(--al-line); background:none; color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.al-back:active, .al-x:active, .sh-bk:active, .sh-hd .x:active{ background:var(--al-card2); }
.al-list, .sh-body{ flex:1; min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.al-list{ padding:0 var(--al-gut) calc(var(--al-u) * 3); display:flex; flex-direction:column; gap:calc(var(--al-u) * 2); }
.sh-body{ padding-bottom:calc(var(--al-u) * 3); }
@media (min-width:744px){
  .al-panes{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
  .al-pane{ min-width:0; }
  .al-pane.al-stage{ display:flex; border-right:1px solid var(--al-line); }
  .al-pane .al-back{ display:none; }
  /* v1257: a page two levels deep (Pairs -> Pair) keeps its Back beside the stage */
  .al-pane:not([data-back="stage"]) .al-back{ display:inline-flex; }
}

/* ── 2 · Row ───────────────────────────────────────────────────────────────── */
/* inside a sheet a row is a CARD (fill, radius, a gap between rows); in a rail
   panel or a window body a bare .li is a hairline list line — the same object,
   a tier (D15). Type, height and icon are shared. */
.al-row, .li{ display:flex; align-items:center; gap:calc(var(--al-u) * 3); width:100%; min-height:var(--al-row);
  padding:calc(var(--al-u) * 2) var(--al-gut); border:0; background:none; color:inherit; cursor:pointer;
  text-align:left; font:inherit; box-sizing:border-box; }
.al-row{ padding-right:calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card2); }
.sh-body .li{ width:auto; margin:0 var(--al-gut) calc(var(--al-u) * 2); padding-right:calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card2); border-top:0; }
.li{ border-top:1px solid var(--al-line); }
.sec + .li, .li:first-child{ border-top:0; }
.li:hover{ background:color-mix(in srgb, var(--al-ink) 3.5%, transparent); }
.li:active{ background:color-mix(in srgb, var(--al-ink) 7%, transparent); }
.al-row:active, .sh-body .li:active{ filter:brightness(.96); }
.al-row:focus-visible, .li:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }
.al-row .al-ic, .li .ic{ flex:none; width:calc(var(--al-u) * 6); color:var(--al-mut); display:flex; align-items:center; }
.al-row svg.ic, .al-row .al-ic svg{ flex:none; width:24px; height:24px; margin:0; }
.li .ic .ic{ width:auto; }
.al-tx, .li .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--al-u2); }
.al-n, .li .n{ font:700 var(--al-act)/var(--lh-ui) var(--f-ui); color:var(--al-ink); display:block; }
.al-m, .li .m{ font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Arabic inside a row: the ḥarakāt need the Arabic floor, once, here — not in nine modules */
.li .m .ari, .li .n .ari, .al-m .ari, .al-n .ari{ font-family:var(--f-quran); font-size:var(--al-ar3); line-height:var(--lh-ar); text-align:inherit; }   /* Arabic inside a --al-floor line is --al-ar3, the rung AL.1 names for it — the ḥarakāt need it, and 12.5px (zero.html's old guard) was under the floor */
.al-m .dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--trp-c, var(--al-acc)); vertical-align:-1px; margin-right:calc(var(--al-u) + var(--al-u2)); }   /* the kind dot: a real circle */
.al-tail, .li .rt{ flex:none; display:flex; align-items:center; gap:calc(var(--al-u) * 2); color:var(--al-mut);
  font:500 var(--al-floor)/1 var(--f-num); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.al-tail .ch, .li .ch{ width:20px; height:20px; flex:none; opacity:.55; display:flex; align-items:center; }
/* rank by type weight, never by hue — and the accent exactly once, filled, on the lead */
.al-row.lead, .li.lead{ background:var(--al-acc); color:var(--al-acc-ink); }
.al-row.lead .al-n, .al-row.lead .al-m, .al-row.lead .al-tail, .al-row.lead .al-ic,
.li.lead .n, .li.lead .m, .li.lead .rt, .li.lead .ic, .li.lead .ch{ color:inherit; }
.al-row.lead .al-m, .al-row.lead .al-tail, .li.lead .m, .li.lead .rt{ opacity:.85; }
.al-row.cur, .li.cur{ box-shadow:inset 0 0 0 2px var(--al-acc); }
.li.cur .ic{ color:var(--al-acc); }
.al-row.quiet .al-n, .li.quiet .n{ font-weight:600; color:var(--al-ink2); }
.al-split{ display:flex; gap:2px; }
.al-split .al-row{ flex:1; border-radius:var(--al-rctl) 0 0 var(--al-rctl); }
.al-more{ flex:none; width:calc(var(--al-tap) + var(--al-u) * 3); min-height:var(--al-row); border:0; border-radius:0 var(--al-rctl) var(--al-rctl) 0;
  background:var(--al-acc); color:var(--al-acc-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.al-row.wide, .li.wide{ flex-direction:column; align-items:stretch; gap:var(--al-u2); padding-bottom:calc(var(--al-u) * 3); }
/* ── the three Go-and-return variants (v1263, wave 2 — the pair screens are the reference) ── */
/* .go — promises before it acts: the name says where, the .al-m says what will
   happen («Page 119 · lit on arrival · one tap back»); its tail is the jump
   glyph in the accent — a ring's worth of accent, never a fill */
.al-row.go .al-tail{ color:var(--al-acc); }
.al-row.go .al-tail .ch{ width:24px; height:24px; opacity:1; }
/* .fold — a quiet disclosure («Scholars · 8 lines · in Arabic · tap to open»):
   the name at --w-med, the chevron turns when the fold is open; what it
   discloses sits in the .al-fold box under it, hidden until then */
.al-row.fold .al-n{ font-weight:var(--w-med); color:var(--al-ink2); }
.al-row.fold .al-tail .ch svg{ transition:transform var(--al-d1) var(--al-eo); }
.al-row.fold[aria-expanded="true"] .al-tail .ch svg{ transform:rotate(90deg); }
.al-fold{ display:flex; flex-direction:column; gap:calc(var(--al-u) * 2); }
.al-fold[hidden]{ display:none; }
/* .return — the same Row docked over the muṣḥaf after a jump: the accent
   fill (it is the one filled thing on the page), the sequence in its .al-m
   («2 of 3 · next الحج 17»); its tails share the fill's shape */
.al-row.return{ flex:1; min-width:0; background:var(--al-acc); color:var(--al-acc-ink); border-radius:var(--al-rctl) 0 0 var(--al-rctl); }
.al-row.return .al-n, .al-row.return .al-m, .al-row.return .al-tail, .al-row.return .al-ic{ color:inherit; }
.al-row.return .al-m{ opacity:.85; }
/* the tail of a card that goes (design 7): outline while the card is read,
   .return (filled) while the page it opened is showing beside it (tablet) */
.al-more.go{ background:var(--al-surf); color:var(--al-acc); box-shadow:inset 0 0 0 1px var(--al-line); }
.al-more.return{ background:var(--al-acc); color:var(--al-acc-ink); box-shadow:none; }
.al-more.quiet{ background:var(--al-surf); color:var(--al-mut); box-shadow:inset 0 0 0 1px var(--al-line); }
.al-more:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }

/* ── the Arabic role, as ONE class (rule 10) ────────────────────────────────
   v1264 (wave 5). `.ari` is the guard DESIGN-LANGUAGE §8 points converters at,
   and until now it was forked three ways: zero.html styled `.li .m .ari` at
   12.5px (under the floor), recite-session.css declared a bare `.ari` at 19px
   on a 1.7 line, traps-ui.css declared `.trp-in.ari` at 18px on a 1.3 line.
   One declaration now carries the whole role — face, leading, direction, bidi
   isolation, alignment — so no surface has to remember six properties and none
   of them can drift apart again; the modules keep only their tier. The face is
   --f-quran (Qurʾānic text), so --k-ar reaches every one of them; `.prose` is
   the opt-out for a name, a duʿāʾ or a scholar, which reads --f-ar and is what
   the knob must NOT move. This selector never names the compiled page (E1). */
.ari{ font-family:var(--f-quran); font-size:var(--al-ar3); line-height:var(--lh-ar); direction:rtl; unicode-bidi:isolate; text-align:right; }
.ari.card{ font-size:var(--al-ar2); line-height:var(--lh-ar-card); }
.ari.hero{ font-size:var(--al-ar); line-height:var(--lh-ar-hero); }
.ari.prose{ font-family:var(--f-ar); }

/* ── 3 · Verse ─────────────────────────────────────────────────────────────── */
.al-verse{ flex:none; padding:calc(var(--al-u) * 2) var(--al-gut) var(--al-u); }
.al-ar{ font-family:var(--f-quran); font-size:var(--al-ar); line-height:var(--lh-ar-hero); direction:rtl; unicode-bidi:isolate; text-align:right; color:inherit;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.al-ar .al-w{ display:inline; }
.al-ar .al-w.cur{ box-shadow:inset 0 -2px 0 var(--al-acc); }
.al-ref{ display:flex; align-items:baseline; flex-wrap:wrap; gap:calc(var(--al-u) * 2); margin-top:var(--al-u); }
.al-verse .ayp-ref{ font:700 var(--al-act)/var(--lh-ui) var(--f-ui); color:inherit; }
.al-verse .ayp-sub{ font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); }
.al-verse.card .al-ar{ font-size:var(--al-ar2); line-height:var(--lh-ar-card); -webkit-line-clamp:unset; }
.al-verse.card{ border-radius:var(--al-rctl); background:var(--al-card2); cursor:pointer; }
.al-verse .diff{ background:var(--data-diff); border-radius:var(--al-rctl); padding:0 var(--al-u2); }   /* the wash wears the control radius: two radii and no third (rule 8), and the radius knob reaches it */
.al-verse.cur{ box-shadow:inset 0 0 0 2px var(--al-acc); }
@media (min-width:744px){ .al-ar{ -webkit-line-clamp:3; } }
/* .preview — the twin āyah as ONE long line, windowed by the caller at the
   first differing word, cut with a mask fade where the line is cut — never an
   ellipsis (v1261, the owner's pick). Inside a Row it is the row's own line
   at --al-ar2; .inline drops it to --al-ar3 inside a --al-floor line.
   data-lead=1 means the window starts after the first word (the right end
   fades); data-cut=1 means the line overflows (the left end fades). */
.al-verse.preview{ padding:0; min-width:0; }
.al-verse.preview .al-ar{ display:block; white-space:nowrap; overflow:hidden; text-overflow:clip; font-size:var(--al-ar2); line-height:var(--lh-ar); -webkit-line-clamp:unset; }
.al-verse.preview.inline .al-ar{ font-size:var(--al-ar3); }
.al-verse.preview[data-cut="1"] .al-ar{ -webkit-mask-image:linear-gradient(to right, transparent 0, black 22%); mask-image:linear-gradient(to right, transparent 0, black 22%); }
.al-verse.preview[data-lead="1"] .al-ar{ -webkit-mask-image:linear-gradient(to left, transparent 0, black 16%); mask-image:linear-gradient(to left, transparent 0, black 16%); }
.al-verse.preview[data-lead="1"][data-cut="1"] .al-ar{ -webkit-mask-image:linear-gradient(to right, transparent 0, black 22%, black 84%, transparent 100%); mask-image:linear-gradient(to right, transparent 0, black 22%, black 84%, transparent 100%); }
.al-verse .al-w{ display:inline; }
/* the card tier inside a split (a place on the pair screen): the card is read,
   the .al-more beside it goes — the two share one fill's shape */
.al-verse.card{ display:flex; flex-direction:column; justify-content:center; gap:var(--al-u); min-height:var(--al-row); padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3) calc(var(--al-u) * 2) var(--al-gut); min-width:0; }
.al-verse.card .al-ref{ margin-top:0; flex-wrap:nowrap; }
.al-verse.card .al-ref .ayp-ref{ min-width:0; }
.al-verse.card .al-ref .ayp-sub{ margin-left:auto; flex:none; white-space:nowrap; font-family:var(--f-num); font-variant-numeric:tabular-nums; }
.al-verse.card .al-ar{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.al-verse.card .al-tr{ font:500 var(--al-floor)/var(--lh-meta) var(--f-ui); color:var(--al-mut); }
.al-split .al-verse.card{ flex:1; border-radius:var(--al-rctl) 0 0 var(--al-rctl); }
.al-verse.card:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }
/* .al-lit — the arrival wash (E7): an overlay box positioned from the same
   compiled coordinates as the glyphs, appended to the page's chrome layer by
   its caller; never a property on a word box. pointer-events none. */
.al-lit{ position:absolute; pointer-events:none; background:var(--data-lit); border-radius:var(--al-rctl); transition:opacity var(--al-d2) var(--al-eo); }

/* ── 4 · Choice ────────────────────────────────────────────────────────────── */
.al-choice, .vw-seg{ display:flex; gap:calc(var(--al-u) * 2); padding:0 var(--al-gut) calc(var(--al-u) * 2); }
.al-list .al-choice{ padding:0; }
.al-choice.tiles, .vw-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.al-opt, .vw-seg-b{ flex:1; min-width:0; min-height:var(--al-tap); border:1px solid var(--al-line); border-radius:var(--al-rctl); background:none; color:inherit;
  font:700 var(--al-act)/var(--lh-ui) var(--f-ui); cursor:pointer; opacity:.6; padding:0 calc(var(--al-u) * 2);
  display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); }
.al-opt.on, .vw-seg-b.on{ opacity:1; border-color:var(--opt-c, var(--al-acc)); box-shadow:inset 0 0 0 1px var(--opt-c, var(--al-acc)); }
.al-opt:focus-visible, .vw-seg-b:focus-visible, .vw-tile:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }
.al-opt .dot{ width:12px; height:12px; border-radius:50%; background:var(--opt-c, var(--al-acc)); flex:none; }
/* the tile tier: an option whose shape is worth drawing (Page: muṣḥaf vs reader) */
.al-choice.tiles .al-opt, .vw-tile{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:0; overflow:hidden; opacity:1;
  border:1px solid var(--al-line); border-radius:var(--al-rctl); background:var(--al-card); color:inherit; cursor:pointer; text-align:start; }
.al-choice.tiles .al-opt.on, .vw-tile.on{ border-color:var(--opt-c, var(--al-acc)); box-shadow:inset 0 0 0 1px var(--opt-c, var(--al-acc)); }
.vw-pv{ height:70px; display:grid; place-content:center; justify-items:center; gap:var(--al-u); background:var(--al-card2); }
.vw-pv i{ display:block; width:56px; height:3px; border-radius:2px; background:currentColor; opacity:.3; }
.vw-pv-reader i:nth-child(2), .vw-pv-reader i:nth-child(4){ width:34px; height:2px; opacity:.16; }
.al-choice.tiles .al-n, .vw-cap{ display:block; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3) 0; font:700 var(--al-act)/var(--lh-ui) var(--f-ui); }
.al-choice.tiles .al-m, .vw-cap small{ display:block; padding:0 calc(var(--al-u) * 3) calc(var(--al-u) * 3); font:500 var(--al-floor)/var(--lh-meta) var(--f-ui); color:var(--al-mut); white-space:normal; }
.vw-cap small{ padding:0; margin-top:var(--al-u2); }
.vw-cap{ padding-bottom:calc(var(--al-u) * 3); }

/* ── 5 · Head ──────────────────────────────────────────────────────────────── */
/* a --al-floor row with no fill and no tap. NEVER uppercase, never tracked. */
.al-head, .sec, .vw-lbl{ display:flex; align-items:center; min-height:calc(var(--al-u) * 10); padding:calc(var(--al-u) * 2) var(--al-u) 0;
  font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); letter-spacing:0; text-transform:none; }
.sec, .vw-lbl{ padding-left:var(--al-gut); padding-right:var(--al-gut); }
.al-head.ar{ font-family:var(--f-ar); font-size:var(--al-ar3); line-height:var(--lh-ar); direction:rtl; unicode-bidi:isolate; justify-content:flex-end; text-align:right; }

/* ── 6 · Field ─────────────────────────────────────────────────────────────── */
.al-field{ display:flex; align-items:center; gap:var(--al-u); min-height:var(--al-tap); }
.al-field input:not([type=range]), .al-field select, .al-field textarea, .li .fld{ min-height:var(--al-tap); border-radius:var(--al-rctl); padding:0 calc(var(--al-u) * 3);
  border:1px solid var(--al-line2); background:var(--al-card); color:var(--al-ink); font:700 var(--al-act)/var(--lh-ui) var(--f-ui); }
.al-field input, .al-field select, .al-field textarea{ flex:1; min-width:0; }
.al-field textarea{ padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3); line-height:var(--lh-meta); }
.al-field.num input, .li .fld.num{ width:calc(var(--al-tap) + var(--al-u) * 8); flex:none; text-align:center; }
.li .fld{ max-width:44vw; cursor:pointer; }
.al-send{ flex:none; min-width:var(--al-tap); height:var(--al-tap); border-radius:var(--al-rctl); border:1px solid var(--al-line2); background:var(--al-card); color:var(--al-ink);
  font:700 var(--al-act)/1 var(--f-ui); padding:0 calc(var(--al-u) * 3); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.al-send.on{ background:var(--al-acc); color:var(--al-acc-ink); border-color:var(--al-acc); }
.al-field .al-ic{ flex:none; width:24px; color:var(--al-mut); display:flex; align-items:center; }
.al-field input:focus-visible, .al-field select:focus-visible, .al-field textarea:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }
/* the search tier: one row-height field on the quiet fill, its input Arabic
   (typed words of an āyah are content-as-control) and its placeholder English */
.al-field.search{ min-height:var(--al-row); padding:calc(var(--al-u) * 2) var(--al-gut); border-radius:var(--al-rctl); background:var(--al-card2); gap:calc(var(--al-u) * 2); }
.al-field.search input, .al-field.ask input{ min-height:var(--al-tap); border:0; border-radius:0; background:transparent; padding:0; color:inherit; outline:none; }
.al-field.search input{ font-family:var(--f-quran); font-size:var(--al-ar2); line-height:var(--lh-ar); text-align:right; direction:rtl; font-weight:var(--w-body); }
.al-field.search input::placeholder, .al-field.ask input::placeholder{ font:500 var(--al-act)/var(--lh-ui) var(--f-ui); color:var(--al-mut); direction:ltr; text-align:left; }
.al-field.search input:focus-visible, .al-field.ask input:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--al-focus); border-radius:var(--al-rctl); }
/* the Ask door (v1263): the field, one filled Row, two suggested questions,
   then the loading line or the answer with its --al-floor provenance — all on
   one quiet card; the rows inside sit on paper so the door reads as one thing */
.al-field.ask{ flex:none; flex-direction:column; align-items:stretch; gap:var(--al-u); padding:calc(var(--al-u) * 2); border-radius:var(--al-rctl); background:var(--al-card2); }   /* flex:none — a Field's min-height would let the list shrink the door under its rows */
.al-field.ask .al-ask-in{ display:flex; align-items:center; gap:calc(var(--al-u) * 2); min-height:var(--al-tap); padding-left:calc(var(--al-u) * 2); }
.al-field.ask input{ flex:1; min-width:0; font:500 var(--al-act)/var(--lh-meta) var(--f-ui); }
.al-field.ask .al-row:not(.lead){ background:var(--al-surf); }
.al-field.ask .al-sug{ display:flex; flex-direction:column; gap:var(--al-u); }
.al-field.ask .al-sug:empty{ display:none; }
.al-field.ask .al-sug .al-row{ min-height:calc(var(--al-u) * 12); }
.al-field.ask .al-sug .al-n{ font-weight:var(--w-med); white-space:normal; }
.al-field.ask .al-answer:empty{ display:none; }
.al-field.ask .al-answer{ padding:calc(var(--al-u) * 2) var(--al-gut); border-radius:var(--al-rctl); background:var(--al-surf); }
.al-field.ask .al-q{ font:500 var(--al-floor)/var(--lh-meta) var(--f-ui); color:var(--al-mut); margin-bottom:calc(var(--al-u) * 2); }
.al-field.ask .al-a{ display:block; font:500 var(--al-act)/var(--lh-ar) var(--f-ui); }
.al-field.ask .al-prov{ margin-top:calc(var(--al-u) * 3); font:500 var(--al-floor)/var(--lh-meta) var(--f-ui); color:var(--al-mut); }
/* the stepper — a tier of Field */
.stp{ display:flex; align-items:center; gap:var(--al-u); flex:none; }
.al-field.step .al-step, .stp button{ width:var(--al-tap); height:var(--al-tap); flex:none; border-radius:var(--al-rctl); cursor:pointer; padding:0;
  border:1px solid var(--al-line2); background:var(--al-card); color:var(--al-ink2); font:700 var(--al-title)/1 var(--f-ui); display:flex; align-items:center; justify-content:center; }
.al-field.step .al-step:active, .stp button:active{ background:var(--al-card2); }
.al-field.step .v, .stp .v{ min-width:calc(var(--al-u) * 14); text-align:center; font:800 var(--al-title)/1 var(--f-num); color:var(--al-ink); font-variant-numeric:tabular-nums; }
/* the BIG tier (D15): the wizard's headline steppers read at arm's length */
.stp.big{ gap:calc(var(--al-u) * 2); }
.stp.big button{ width:var(--al-tap-hard); height:var(--al-tap-hard); font-size:var(--al-title); }
.stp.big .v{ min-width:calc(var(--al-u) * 24); font-size:calc(var(--al-hero) * 1.57); }
@media (min-width:744px){ .stp.big .v{ font-size:calc(var(--al-hero) * 1.86); } }
/* the two state marks a row may carry: a radio ring that fills, a square check for a modifier */
.li .rad, .li .sqk, .al-row .rad, .al-row .sqk{ width:22px; height:22px; flex:none; position:relative; border:1.7px solid var(--al-line2); background:none; }
.li .rad, .al-row .rad{ border-radius:50%; }
.li .sqk, .al-row .sqk{ border-radius:calc(var(--al-rctl) / 2); }
.li.on .rad, .li.on .sqk, .al-row.on .rad, .al-row.on .sqk{ border-color:var(--al-acc); }
.li.on .rad::after, .al-row.on .rad::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--al-acc); }
.li.on .sqk::after, .al-row.on .sqk::after{ content:''; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid var(--al-acc); border-width:0 2.2px 2.2px 0; transform:rotate(42deg); }
/* the range — a full-width slider under its label in a .wide row */
.sh-range, .al-range{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; outline:none; cursor:pointer; }
.sh-range::-webkit-slider-runnable-track, .al-range::-webkit-slider-runnable-track{ height:6px; border-radius:var(--al-rpill);
  background:linear-gradient(90deg, var(--al-acc) var(--p,55%), var(--al-line2) var(--p,55%)); }
.sh-range::-webkit-slider-thumb, .al-range::-webkit-slider-thumb{ -webkit-appearance:none; margin-top:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--al-card); border:1.7px solid var(--al-acc); cursor:pointer; }

/* ── 7 · Bar ───────────────────────────────────────────────────────────────── */
/* the ONLY docked surface: three centred zones; one on screen at a time */
.al-bar-dock{ position:fixed; left:0; right:0; bottom:0; z-index:var(--al-z-dock); display:grid; grid-template-columns:minmax(0,150px) minmax(0,420px) minmax(0,150px);
  justify-content:center; align-items:center; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 2) var(--al-gut) calc(var(--al-u) * 2 + env(safe-area-inset-bottom,0px));
  background:var(--al-glass); border-top:1px solid var(--al-line); color:var(--al-ink); }
.al-bar-l, .al-bar-c, .al-bar-r{ min-width:0; display:flex; align-items:center; gap:calc(var(--al-u) * 2); }
.al-bar-l{ justify-content:flex-start; } .al-bar-c{ justify-content:center; } .al-bar-r{ justify-content:flex-end; }
body.al-docked #pill{ display:none; }
/* the floating tier (v1263): the Return — a Row.return and its tails, docked
   over the page as one shape, not full-bleed; from 744 it is centred at the
   sheet's phone width. It waits until it is used (no timer, no fade). */
.al-bar-dock.float{ left:var(--al-gut); right:var(--al-gut); bottom:calc(var(--al-u) * 6 + env(safe-area-inset-bottom,0px)); z-index:var(--al-z-dock);
  display:flex; gap:2px; padding:0; background:none; border:0; border-radius:var(--al-rctl); box-shadow:var(--al-sh-modal); }
.al-bar-dock.float:not([hidden]){ animation:alpush var(--al-d2) var(--al-eo); }
.al-bar-dock[hidden]{ display:none; }
.al-bar-dock.float .al-bar-l, .al-bar-dock.float .al-bar-r{ flex:none; gap:2px; }
.al-bar-dock.float .al-bar-l:empty, .al-bar-dock.float .al-bar-r:empty{ display:none; }
.al-bar-dock.float .al-bar-c{ flex:1; min-width:0; }
.al-bar-dock.float .al-bar-c .al-row{ width:100%; }
.al-bar-dock.float .al-more{ border-radius:0; }
.al-bar-dock.float .al-bar-r .al-more:last-child{ border-radius:0 var(--al-rctl) var(--al-rctl) 0; }
@media (min-width:744px){ .al-bar-dock.float{ left:50%; right:auto; transform:translateX(-50%); width:min(92vw, 560px); } }
@media (prefers-reduced-motion:reduce){ .al-bar-dock.float:not([hidden]){ animation:none; } }
/* the sheet's action bar — a Bar that is not docked */
.sh-act{ flex:none; display:flex; align-items:center; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 3) var(--al-gut) calc(var(--al-u) * 3 + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--al-line); }
.sh-btn{ min-height:var(--al-tap); padding:0 calc(var(--al-u) * 4); border-radius:var(--al-rctl); cursor:pointer; border:1px solid var(--al-line2); background:var(--al-card); color:var(--al-ink2); font:700 var(--al-act)/1 var(--f-ui); }
.sh-btn.grow{ flex:1; }
.sh-btn.pri{ border-color:var(--al-acc); box-shadow:inset 0 0 0 1px var(--al-acc); color:var(--al-ink); }
.sh-btn:active{ background:var(--al-card2); }

/* ── 8 · Instrument ────────────────────────────────────────────────────────── */
/* a marker, not a style: an instrument is exempt from the row, type and radius
   rules inside its own box and gets the roles by inheritance. It must not set
   anything a page host could inherit (E1/E3) — the boxed tier is opt-in. */
.al-inst.boxed{ border-radius:var(--al-rsurf); background:var(--al-card); color:var(--al-ink); }
