/* ═══════════════════════════════════════════════════════════════════════════
   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-20 (v1266 — THE OWNER'S PICKS ported from the segment
     configurator (scratchpad cfg/PICKS.json): colour = The Green Cover by day
     and Qirāʾa Red's night set by night (strata 1, 2, 5 + the roles those
     languages state); type = Scholar's Reader (Source Sans 3 + Scheherazade
     New, self-hosted under fonts/, rungs 16/18/22, Arabic leading 1.9+);
     shape = Glass (the radius knob at 1.1429, the .55 glass, the specular
     shadows, the softer rule); the components Sheet = Rise · Head = Leader ·
     Row = Card · Verse = Slip · Choice = Thumb · Field = Search bar · Bar =
     Capsule in stratum 6. Motion, tiles and signals unchanged.)

   ── 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.1429;                           /* 0 -> 1.6  · both radii, ratio locked 1:2 · v1266 Glass (seg-shape 5): 16 / 32 */
  --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:"Scheherazade New","Amiri Quran","Amiri",serif;   /* the Qurʾānic face — everywhere except the compiled page · v1266 Scholar's Reader (seg-type 2) */
}
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. */
  /* v1266 — THE DEFAULT LIGHT GROUND IS "THE GREEN COVER" (the owner's pick,
     pt2/lang-2.json · cfg/segments/seg-colour.css block 2): the app is the
     binding and the page is the book. Warm paper derived from the compiled
     page's paper (#f7f1de mixed toward white), the page ink mixed toward the
     paper for the four inks, the Madina muṣḥaf's cover green #1c5a3c as the
     one accent with the page paper as the ink ON it, the hairlines the cover
     green at 14 / 24%. --l-gold stays the page's printed gilt #7c5b14 (the
     reader chrome that echoes the page reads it through --ms-gold); the two
     accent slots keep their old names and hold the green. The nine named
     light presets below override only the six surface tokens, as before. */
  :root{ --l-ink:#1b1812; --l-ink2:#2d2922; --l-ink3:#47433b; --l-mut:#6f6a60; --l-soft:#757166; --l-soft2:#807c70; --l-gold:#7c5b14; --l-gold-txt:#1c5a3c; --l-gold-deep:#1c5a3c; --l-blue:#3f48e6; --l-paper:#fdfcf7; --l-bg:#fbf8ee;
    /* 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:253,252,247; --l-bg-rgb:251,248,238; --l-paper2:#fefdfa; --l-card:#fefefc; }
  /* 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). */
  :root{ --l-line:rgba(28,90,60,.14); }
  /* v1264 (wave 4) — the two light ground slots the roles were reading as
     literals. --l-line2 is the firmer rule and --l-acc-ink is the ink that goes
     ON the accent; dark has carried --d-line and --d-acc-ink since v782.
     v1266: the Green Cover states them — the firmer rule is the cover green at
     24%, the ink on the green fill is the compiled page's own paper #f7f1de
     (7.2:1), the scrim the cover pulled toward black at 18%, and the warn pair
     the madd orange of the v4 page font on its own wash. */
  :root{ --l-line2:rgba(28,90,60,.24); --l-acc-ink:#f7f1de; --l-scrim:rgba(11,36,24,.18); --l-warn-bg:rgba(255,123,0,.12); --l-warn-ink:#ad5400; }
  /* THE DARK DEFAULT (no attribute / "warm") — v1266: QIRĀʾA RED'S NIGHT SET
     (pt2/lang-3.json · seg-colour.css block 3, dark half). The desk is the
     page's ink #1b1812; the surfaces are that ink lifted 6 / 4% toward the
     paper; the paper #f7f1de is the ink AND the one fill (--d-acc), with the
     ink on it; the Khalaf edition's red qirāʾa ink, lifted until it clears
     4.5:1 on the row fill (#e47d80), is the text accent, and the stated red
     #e06a6e is the ring. --d-ink3 is the muted ink; it follows --d-soft of
     whichever ground is active. The eight named night presets below are
     untouched; the extras this language states beyond the --d-* set (the
     ring, the wash, the night blue, the warn pair) are scoped to this default
     ground in strata 3 and 5 so a preset keeps deriving its own. */
  body.theme-dark{
    --d-ink3:var(--d-soft);
    --d-bg:#1b1812; --d-surface:#28251e; --d-glass:rgba(27,24,18,.9); --d-panel:rgba(36,33,26,.98);
    --d-ink:#f7f1de; --d-ink2:#e3dcc8; --d-soft:#a89b80;
    --d-line:rgba(247,241,222,.12); --d-line2:rgba(247,241,222,.22);
    --d-acc:#f7f1de; --d-acc-ink:#1b1812; --d-acc-txt:#e47d80;
  }
  body.theme-dark:not([data-dark]), body.theme-dark[data-dark="warm"]{
    --d-acc-ring:#e06a6e; --d-acc-wash:rgba(224,106,110,.24); --l-blue:#7b9bdb;   /* the night blue: the page font's qalqala navy lifted 39 L (4.5:1 on the tile card) — the layer had no night value for --l-blue */
    --d-warn-bg:rgba(212,181,115,.12); --d-warn-ink:#d4b573;
  }
  /* 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. */
/* ── THE FACES, SELF-HOSTED (v1266 — Scholar's Reader, seg-type 2) ──────────
   The app is an offline PWA, so the two faces the type pick names live under
   fonts/ (latin + arabic woff2 subsets, the weights the pick uses, precached
   by sw.js) — never a Google Fonts link. Source Sans 3 is one variable file
   (400–800); Scheherazade New is four static weights, arabic and latin each.
   The compiled muṣḥaf page keeps its own per-page QCF faces (E1). */
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/SourceSans3-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ScheherazadeNew-400-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ScheherazadeNew-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/ScheherazadeNew-500-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/ScheherazadeNew-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/ScheherazadeNew-600-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/ScheherazadeNew-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/ScheherazadeNew-700-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face{ font-family:"Scheherazade New"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/ScheherazadeNew-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  /* size — seven rungs; nothing on a surface is smaller than the floor (rule 1)
     v1266 (Scholar's Reader): Source Sans is compact, so the floor rises to 16;
     act and title stay at 18 / 22 */
  --al-floor:calc(16px * 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 instances actually loaded (Source Sans 3 is one 400–800 variable file) */
  --w-body:400; --w-med:600; --w-bold:700; --w-black:800;
  /* leading — keyed to script; Arabic leading is load-bearing. v1266 (Scholar's
     Reader): Scheherazade's stacked marks want air — 1.9 / 2 / 2.05, the
     loosest of the seven type systems; the UI line opens to 1.3 / 1.4 */
  --lh-ui:1.3; --lh-meta:1.4;
  --lh-ar:1.9;                                 /* the Arabic floor is 1.6 — nothing below that may be written anywhere; this language sits at 1.9 */
  --lh-ar-card:2; --lh-ar-hero:2.05;
  /* family — four names. v1266: Source Sans 3 for every control, Scheherazade
     New for all Arabic, prose and Qurʾān alike (--k-ar, stratum 1); the Arabic
     face sits SECOND in --f-ui so the Arabic inside a Latin line («adds
     وَٱلصَّٰبِـُٔونَ», «البقرة 62 · 3 places») takes the paired face, not the OS
     fallback; every stack ends in system-ui + a generic */
  --f-ui:"Source Sans 3","Scheherazade New",-apple-system,system-ui,"Segoe UI",sans-serif;
  --f-ar:"Scheherazade New","Amiri",system-ui,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-rin:calc(var(--al-rctl) * .8125);       /* the concentric inner corner of a shape seated 3px inside a control (= 16 − 3 at the default knob; kept as a proportion so the radius knob moves it with the outer) — the Thumb's card, the Field's send (v1266); derived, not a third radius */
  --al-seat:calc(var(--al-u) * .75);           /* the 3px seat a thumb sits in (the track's padding and gap) — a fraction of the unit, so the density knob reaches it */
  --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-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 and --al-glass: below, with the shadows — the shape pick owns them (v1266) */
  --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) 16%, transparent);   /* the wash on a differing word / the arrival light: the ONE accent at 16% (v1266, the Green Cover's stated wash; it was 20%), so --k-acc reaches it */
  --al-acc-ring:var(--l-acc-ring, color-mix(in srgb, var(--al-acc) 45%, transparent));
  --al-warn-bg:var(--l-warn-bg, #f7ecd8); --al-warn-ink:var(--l-warn-ink, #7a5d18);  /* the ground's warn pair; the fallbacks are the pair that shipped before v1266 (5.2:1, H1) */
  --al-scrim:var(--l-scrim, rgba(30,25,14,.28));
  --al-focus:var(--al-acc);
  /* shadow, motion, elevation — v1266 GLASS (seg-shape 5): a one-pixel paper
     specular on the top edge of anything that rests, then a wide soft fall-off
     in the ground's own ink; the firm rule at 55% (glass has no drawn edge);
     the glass itself paper at .55 so the page shows through the blur */
  --al-line2:color-mix(in srgb, var(--l-line2) 55%, transparent);
  --al-glass:rgba(var(--l-paper-rgb),.55);
  --al-sh-1:inset 0 1px 0 rgba(var(--l-paper-rgb),.85), 0 4px 16px -4px color-mix(in srgb, var(--l-ink) 16%, transparent);
  --al-sh-2:inset 0 1px 0 rgba(var(--l-paper-rgb),.85), 0 10px 28px -8px color-mix(in srgb, var(--l-ink) 22%, transparent);
  --al-sh-modal:inset 0 1px 0 rgba(var(--l-paper-rgb),.7), 0 24px 64px -14px color-mix(in srgb, var(--l-ink) 32%, transparent);
  --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(100vw,100%); --al-sheet-h:min(90vh,780px);   /* v1266 RISE (seg-sheet 1): full-bleed on the phone (never wider than the container it rises in); the right-side pane from 744 */
}
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);   /* = the paper at 7% on the default night ground (rgba(247,241,222,.07), the value Qirāʾa Red states); on the eight presets the fill follows that ground's line (v1264) */
  --al-glass:color-mix(in srgb, var(--d-glass) 62%, transparent);   /* Glass: the night glass at 62% */
  --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:color-mix(in srgb, var(--d-line) 70%, transparent);   /* Glass: the firmer night rule at 70% */
  --al-acc:var(--k-acc); --al-acc-ink:var(--d-acc-ink); --al-acc-txt:var(--d-acc-txt);
  /* the wash and the ring: a night ground may state them (--d-acc-wash /
     --d-acc-ring — Qirāʾa Red holds its red to the ring, the differing word
     and the lit wash while the one fill is the paper); the eight presets fall
     through to their own accent at 22% / 45%, so the accent knob reaches them */
  --al-acc-soft:var(--d-acc-wash, color-mix(in srgb, var(--al-acc) 22%, transparent));
  --al-acc-ring:var(--d-acc-ring, color-mix(in srgb, var(--al-acc) 45%, transparent));
  --al-warn-bg:var(--d-warn-bg, rgba(212,181,115,.12)); --al-warn-ink:var(--d-warn-ink, #d4b573);
  --al-scrim:rgba(0,0,0,.5);
  --al-sh-1:inset 0 1px 0 color-mix(in srgb, var(--d-ink) 10%, transparent), 0 4px 16px -4px rgba(0,0,0,.55);
  --al-sh-2:inset 0 1px 0 color-mix(in srgb, var(--d-ink) 10%, transparent), 0 10px 28px -8px rgba(0,0,0,.65);
  --al-sh-modal:inset 0 1px 0 color-mix(in srgb, var(--d-ink) 8%, transparent), 0 24px 64px -14px rgba(0,0,0,.75);
}
@media (prefers-reduced-motion:reduce){ :root{ --al-d1:0ms; --al-d2:0ms; --al-d3:0ms; } }
@media (min-width:744px){  :root{ --al-sheet:clamp(380px,46vw,520px); --al-sheet-h:none; } }   /* v1266: the pane never drops under 380 on the smallest tablet */


/* ═══ 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:color-mix(in srgb, var(--data-gilt) 18%, transparent);   /* v1266 (the Green Cover) parts them: the arrival light on the overlay layer (E7) is the PAGE'S OWN gilt at 18% — the chrome accent never lands on the paper */
    --data-gilt:#7c5b14;                       /* the printed page's gilt — never the chrome accent */
  }
  /* the default night ground (Qirāʾa Red, v1266): the wash and the light are
     the red at 24% (--d-acc-wash, stratum 2), stated on the body so they do
     not inherit the light values substituted on :root */
  body.theme-dark:not([data-dark]), body.theme-dark[data-dark="warm"]{ --data-diff:var(--al-acc-soft); --data-lit:var(--al-acc-soft); }
  /* 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). */
  /* v1266 — the three verdict inks are the languages' own: by day the v4 page
     font's tajwīd hues scaled to AA on the Green Cover's paper (ghunna green,
     madd red, madd orange, fitted for the row fill); by night Qirāʾa Red's —
     the shadda/ghunna green and the madd-lāzim purple lifted, and the app's
     shipped night gilt for owed. Scoped to the default night ground; the
     eight presets keep the day inks as they did before. */
  :root{
    --data-ok:#078100; --data-bad:#b50000; --data-owed:#b15500; --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);
  }
  body.theme-dark:not([data-dark]), body.theme-dark[data-dark="warm"]{ --data-ok:#6dbf7f; --data-bad:#b990d6; --data-owed:#d4b573; }
  /* --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 ─────────────────────────────────────────────────────────────── */
/* v1266 RISE (seg-sheet 1, the owner's pick): the iOS resizable sheet — full-bleed
   to both edges, a grabber, the page dimmed behind it by the sheet's own spread
   shadow (the scrim is the sheet's, so the hub container stops painting one),
   Back and Close as filled ink-8% circles with heavier strokes. From 744 the
   sheet is a pane at the right edge, 72px down and flush with the foot, no
   grabber, the modal shadow instead of the scrim. */
.al-sheet, .sheet{ position:relative; width:var(--al-sheet); max-height:var(--al-sheet-h); display:flex; flex-direction:column;
  background:var(--al-surf); color:var(--al-ink); border:0; border-radius:var(--al-rsurf) var(--al-rsurf) 0 0; overflow:hidden;
  padding-top:calc(var(--al-u) * 3); box-shadow:var(--al-sh-modal); }
/* the sheet's own scrim, in the hub container that stops painting one; the
   module scrims (the Trap sheet's, Recite's, the Traps hub's) still dim
   themselves, so their sheets carry only the lift */
.sh-scrim .al-sheet, .sh-scrim .sheet{ box-shadow:0 0 0 100vh color-mix(in srgb, var(--al-ink) 26%, transparent); }
body.theme-dark .sh-scrim .al-sheet, body.theme-dark .sh-scrim .sheet{ box-shadow:0 0 0 100vh rgba(0,0,0,.58); }
.al-sheet::before, .sheet::before{ content:''; position:absolute; top:calc(var(--al-u) * 2); left:50%; width:36px; height:5px; margin-left:-18px;
  border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 24%, transparent); }
/* the hub container (tool-hubs.js's #hub-menu-scrim: .dk-scrim.sh-scrim): the
   sheet rises from the foot; the container's own dim and blur come off because
   the sheet carries the scrim. The View tier (.vw-up) keeps rising from its
   corner button, all four corners rounded. */
.dk-scrim.sh-scrim{ align-items:flex-end; justify-content:center; padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  z-index:47; }   /* above the standing View corner (zero.html #hub-view.vw-corner, 46) that a full-bleed sheet now rises over; still under the dock (--al-z-dock) and the hold menu */
.dk-scrim.sh-scrim.vw-up{ padding:0 0 calc(64px + env(safe-area-inset-bottom,0px)); }
.dk-scrim.sh-scrim.vw-up .al-sheet, .dk-scrim.sh-scrim.vw-up .sheet{ border-radius:var(--al-rsurf); }
/* 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:var(--al-u) 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:0; background:color-mix(in srgb, var(--al-ink) 8%, transparent); color:var(--al-ink2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.al-back:active, .al-x:active, .sh-bk:active, .sh-hd .x:active{ background:color-mix(in srgb, var(--al-ink) 16%, transparent); }
.al-back svg, .al-x svg, .sh-bk svg, .sh-hd .x svg{ width:20px; height:20px; stroke-width:2.2; }
.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) * 3); }   /* the gap grew to 12 with the Card rows (v1266) so their lifts do not meet */
.sh-body{ padding-bottom:calc(var(--al-u) * 3); }
@media (min-width:744px){
  .al-sheet, .sheet{ padding-top:0; box-shadow:var(--al-sh-modal); }
  body.theme-dark .al-sheet, body.theme-dark .sheet{ box-shadow:var(--al-sh-modal); }
  .al-sheet::before, .sheet::before{ display:none; }
  .al-bar, .sh-hd{ padding-top:calc(var(--al-u) * 3); }
  /* v1271 (owner: "the menu opens weird, it's not floating"): from 744 the sheet FLOATS —
     a card 72px down and 16px off the trailing edge, detached from the foot too, all four
     corners rounded, sized to its rows up to the room left, the modal lift under it */
  .dk-scrim.sh-scrim{ justify-content:center; align-items:center; padding:72px 16px calc(16px + env(safe-area-inset-bottom,0px)); }   /* v1272: centred on the screen (owner) */
  .dk-scrim.sh-scrim .al-sheet, .dk-scrim.sh-scrim .sheet{ max-height:calc(100vh - 88px - env(safe-area-inset-bottom,0px)); border-radius:var(--al-rsurf); }
  .dk-scrim.sh-scrim.vw-up{ justify-content:flex-start; align-items:flex-end; padding:72px 0 calc(64px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px)); }
  .dk-scrim.sh-scrim.vw-up .al-sheet, .dk-scrim.sh-scrim.vw-up .sheet{ max-height:calc(100vh - 136px - env(safe-area-inset-bottom,0px)); }
  .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; }
/* v1266 CARD (seg-row 3, the owner's pick): every row is its own card on the
   surface — the card fill, a hairline rim drawn as a ring plus the resting
   lift, 12px of vertical padding — with the chevron set in a small disc; the
   lead is the filled card with the deeper lift. Every variant below restates
   the lead / return fill, because a variant's own selector outscores the
   layer's `.al-row.lead`. In dark the lift goes and the rim firms to line2. */
.al-row{ padding:calc(var(--al-u) * 3) calc(var(--al-u) * 3) calc(var(--al-u) * 3) var(--al-gut); border-radius:var(--al-rctl); background:var(--al-card);
  box-shadow:0 0 0 1px var(--al-line), var(--al-sh-1); }
.sh-body .li{ width:calc(100% - var(--al-gut) * 2); margin:0 var(--al-gut) calc(var(--al-u) * 3); padding:calc(var(--al-u) * 3) calc(var(--al-u) * 3) calc(var(--al-u) * 3) var(--al-gut); border-radius:var(--al-rctl); background:var(--al-card);   /* a real width: a <button class="li"> at width:auto shrank to its label (the Trap sheet's kinds) */
  box-shadow:0 0 0 1px var(--al-line), var(--al-sh-1); border-top:0; }
body.theme-dark .al-row:not(.lead):not(.return):not(.cur), body.theme-dark .sh-body .li:not(.lead):not(.cur){ box-shadow:0 0 0 1px var(--al-line2); }
.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-ink2); display:flex; align-items:center; }   /* Card: the glyph in the second ink, not the muted one */
.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; }
/* the chevron sits in a small disc (Card): the quiet fill under a muted glyph; the accent wash under a Go's */
.al-tail .ch, .li .ch{ width:28px; height:28px; flex:none; opacity:1; display:flex; align-items:center; justify-content:center; border-radius:var(--al-rpill); background:var(--al-card2); color:var(--al-mut); }   /* a genuinely round disc */
/* 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); box-shadow:var(--al-sh-2); }
.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.lead .al-tail .ch, .li.lead .ch{ background:none; color:inherit; }   /* on the filled rows the tail is a plain chevron in the accent ink — no disc, no border, no divider (the Card disc is for unfilled rows) */
.al-row.cur, .li.cur{ box-shadow:0 0 0 2px var(--al-acc), var(--al-sh-1); }
.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:0; border-radius:var(--al-rctl); box-shadow:var(--al-sh-2); }   /* v1266: the split is ONE shape — no seam (the 2px gap drew a light line through the filled Play row) and one lift on the container, so the halves' shadows never overlap at the join */
.al-split .al-row:not(.cur), .al-split .al-more:not(.go):not(.quiet){ box-shadow:none; }
.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); box-shadow:var(--al-sh-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }   /* shares the lead's lift (Card) */
.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{ background:var(--al-acc-soft); color:var(--al-acc-txt); }
/* .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); box-shadow:var(--al-sh-2); }
.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; }
.al-row.return .al-tail .ch{ background:none; color:inherit; }
/* 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; color:var(--al-ink2); }
/* v1266 SLIP (seg-verse 4, the owner's pick): a raised paper slip — the card
   fill, the surface radius, a hairline and a real two-layer shadow in the
   ground's ink; the āyah in the second ink and the differing words in full
   bold ink, no wash — the difference is what is darkest. The lit card wears
   the accent ring; the preview is cut by a strip of paper folded over its end. */
.al-verse.card{ border:1px solid var(--al-line); border-radius:var(--al-rsurf); background:var(--al-card); color:var(--al-ink2); cursor:pointer;
  box-shadow:0 1px 2px color-mix(in srgb, var(--al-ink) 6%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--al-ink) 22%, transparent); }
body.theme-dark .al-verse.card{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 22px -10px rgba(0,0,0,.6); }
.al-verse .diff{ background:none; border-radius:0; padding:0; font-weight:700; color:var(--al-ink); }
.al-verse.card.lit{ border-color:var(--al-acc-ring); box-shadow:0 0 0 3px var(--al-acc-soft), 0 10px 24px -10px color-mix(in srgb, var(--al-ink) 26%, transparent); }
body.theme-dark .al-verse.card.lit{ box-shadow:0 0 0 3px var(--al-acc-soft), 0 10px 24px -10px rgba(0,0,0,.6); }
.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-fold:var(--al-surf); }   /* the fold is the paper it lies on: the surface, or the card of the Row it sits in */
.al-row .al-verse.preview{ --al-fold:var(--al-card); }
.al-verse.preview .al-ar{ position:relative; 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); }
/* Slip: the cut end (the left, where the RTL line overflows) is covered by a strip
   of paper folded over it — a hairline edge and a cast shadow, never a fade; the
   led end (the right, where the window starts after the first word) keeps its mask */
.al-verse.preview[data-cut="1"] .al-ar::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:calc(var(--al-u) * 6); pointer-events:none;
  border-right:1px solid var(--al-line2); background:linear-gradient(to right, var(--al-fold) 55%, color-mix(in srgb, var(--al-ink) 7%, var(--al-fold)));
  box-shadow:5px 0 8px -3px color-mix(in srgb, var(--al-ink) 28%, transparent); }
body.theme-dark .al-verse.preview[data-cut="1"] .al-ar::after{ background:linear-gradient(to right, var(--al-fold) 55%, color-mix(in srgb, var(--al-ink) 9%, var(--al-fold))); box-shadow:5px 0 8px -3px rgba(0,0,0,.75); }
.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 .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:calc(var(--al-u) * 2); min-height:var(--al-row); padding:calc(var(--al-u) * 3) var(--al-gut) calc(var(--al-u) * 2); 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 ────────────────────────────────────────────────────────────── */
/* v1266 THUMB (seg-choice 1, the owner's pick): the options live in one tinted
   track and the chosen one is a raised card sliding inside it — the iOS
   segmented control. Hairline dividers stand between unchosen segments and
   vanish beside the thumb. The tile tier (.tiles) keeps its own shape. */
.al-choice, .vw-seg{ display:flex; gap:0; margin:0 var(--al-gut) calc(var(--al-u) * 2); padding:var(--al-seat); border-radius:var(--al-rctl); background:var(--al-card2); }
.al-list .al-choice{ margin:0; }
body.theme-dark .al-choice, body.theme-dark .vw-seg{ background:color-mix(in srgb, var(--al-ink) 9%, transparent); }
.al-choice.tiles, .vw-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--al-u) * 2); padding:0; background:none; }
.al-opt, .vw-seg-b{ position:relative; flex:1; min-width:0; min-height:var(--al-tap); border:0; border-radius:var(--al-rin); background:none; color:var(--al-mut);
  font:600 var(--al-act)/var(--lh-ui) var(--f-ui); cursor:pointer; opacity:1; padding:0 calc(var(--al-u) * 2);
  display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2);
  transition:background-color var(--al-d1) var(--al-eo), color var(--al-d1) var(--al-eo), box-shadow var(--al-d1) var(--al-eo); }
.al-opt.on, .vw-seg-b.on{ background:var(--al-card); color:var(--al-ink); font-weight:700; box-shadow:var(--al-sh-1), 0 0 0 .5px var(--al-line); }
body.theme-dark .al-opt.on, body.theme-dark .vw-seg-b.on{ background:color-mix(in srgb, var(--al-ink) 14%, var(--al-surf)); box-shadow:var(--al-sh-1); }
.al-opt + .al-opt::before, .vw-seg-b + .vw-seg-b::before{ content:""; position:absolute; left:-.5px; top:25%; height:50%; width:1px; background:var(--al-line2); }
.al-opt.on::before, .al-opt.on + .al-opt::before, .vw-seg-b.on::before, .vw-seg-b.on + .vw-seg-b::before{ background:transparent; }
/* the Mark page's six kinds (zero.html .ayp-kinds, styled by traps-ui.css at
   id weight) are a Choice: the same track and thumb, on their two-column grid */
#ayah-pop .ayp-kinds{ gap:var(--al-seat); padding:var(--al-seat); border-radius:var(--al-rctl); background:var(--al-card2); }
body.theme-dark #ayah-pop .ayp-kinds{ background:color-mix(in srgb, var(--al-ink) 9%, transparent); }
#ayah-pop .ayp-kinds .ayp-kind{ border-radius:var(--al-rin); background:none; color:var(--al-mut); font-weight:600;
  transition:background-color var(--al-d1) var(--al-eo), color var(--al-d1) var(--al-eo), box-shadow var(--al-d1) var(--al-eo); }
#ayah-pop .ayp-kinds .ayp-kind.on{ background:var(--al-card); color:var(--al-ink); font-weight:700; box-shadow:var(--al-sh-1), 0 0 0 .5px var(--al-line); }
body.theme-dark #ayah-pop .ayp-kinds .ayp-kind.on{ background:color-mix(in srgb, var(--al-ink) 14%, var(--al-surf)); box-shadow:var(--al-sh-1); }
.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; font-weight:700; box-shadow:none; }
.al-choice.tiles .al-opt::before{ display:none; }
.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.
   v1266 LEADER (seg-head 7, the owner's pick): the head is written on the
   reading line and the line runs on to the margin — a leader from the label
   to the edge, like a table of contents; weighted like a name (--w-med, the
   second ink). The Arabic head reads from the right, its leader runs leftward. */
.al-head, .sec, .vw-lbl{ display:flex; align-items:center; min-height:calc(var(--al-u) * 11); padding:calc(var(--al-u) * 3) 0 0;
  font:var(--w-med) var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-ink2); letter-spacing:0; text-transform:none; }
.al-head::after, .sec::after, .vw-lbl::after{ content:""; flex:1; height:1px; margin-inline-start:calc(var(--al-u) * 3); background:var(--al-line); }
body.theme-dark .al-head::after, body.theme-dark .sec::after, body.theme-dark .vw-lbl::after{ background:var(--al-line2); }
.sec, .vw-lbl{ padding-left:var(--al-gut); padding-right:var(--al-gut); }
.al-head.ar{ font-family:var(--f-quran); font-weight:400; font-size:var(--al-ar3); line-height:var(--lh-ar); direction:rtl; unicode-bidi:isolate; justify-content:flex-start; text-align:right; color:var(--al-ink); }

/* ── 6 · Field ─────────────────────────────────────────────────────────────── */
/* v1266 SEARCH BAR (seg-field 2, the owner's pick): asking is searching — one
   filled bar on the quiet fill with the input borderless inside it and the
   send a ghost square that lights the text accent on press; the focus ring is
   an inset 2px rule on the bar. The stepper, the number field and the range
   keep their own tiers (they are form controls, not a bar). */
.al-field{ display:flex; align-items:center; gap:var(--al-u); min-height:52px; padding:0 var(--al-u) 0 calc(var(--al-u) * 4); border-radius:var(--al-rctl); background:var(--al-card2); }
.al-field:focus-within{ box-shadow:inset 0 0 0 2px var(--al-focus); }
.al-field.step, .al-field.range, .al-field.num{ min-height:var(--al-tap); padding:0; background:none; border-radius:0; }
.al-field.step:focus-within, .al-field.range:focus-within, .al-field.num:focus-within{ box-shadow:none; }
.al-field input:not([type=range]), .al-field select, .al-field textarea{ min-height:var(--al-tap); border:0; border-radius:0; padding:0;
  background:transparent; color:var(--al-ink); font:500 var(--al-act)/var(--lh-meta) var(--f-ui); }
.al-field input::placeholder, .al-field textarea::placeholder{ color:var(--al-mut); }
.li .fld, .al-field.num input{ 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) 0; 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; width:var(--al-tap); min-width:var(--al-tap); height:var(--al-tap); border-radius:var(--al-rin); border:0; background:transparent; color:var(--al-mut);
  font:700 var(--al-act)/1 var(--f-ui); padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.al-send:active{ background:var(--al-card); color:var(--al-acc-txt); }
.al-send.on{ background:var(--al-acc); color:var(--al-acc-ink); }
.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:none; }
.al-field.num input:focus-visible{ outline:2px solid var(--al-focus); outline-offset:-2px; }
/* the search tier: the bar at row height, 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-u) calc(var(--al-u) * 2) var(--al-gut); 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:none; }
/* 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); min-height:0; 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; }

/* ── 6b · Switch (v1299) ────────────────────────────────────────────────── */
/* the kit's one toggle: a pill track on the quiet fill, the knob a raised
   card; on, the track is the accent and the knob rides right. It sits in a
   Row's tail and the Row is the target — the switch shows the state. */
.al-sw{ position:relative; flex:none; width:52px; height:32px; padding:0; border:0; border-radius:var(--al-rpill); cursor:pointer;
  background:color-mix(in srgb, var(--al-ink) 16%, transparent); transition:background-color var(--al-d1) var(--al-eo); }
.al-sw .al-sw-k{ position:absolute; top:2px; left:2px; width:28px; height:28px; border-radius:50%; background:var(--al-card); box-shadow:var(--al-sh-1);
  transition:transform var(--al-d1) var(--al-eo); }
.al-sw[aria-checked="true"]{ background:var(--al-acc); }
.al-sw[aria-checked="true"] .al-sw-k{ transform:translateX(20px); }
.al-sw:focus-visible{ outline:2px solid var(--al-focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .al-sw, .al-sw .al-sw-k{ transition:none; } }
/* Settings (modules/tools/settings.js, v1299): its rows are the kit's; these are the few shapes it adds */
.al-row.info{ cursor:default; }
.al-row.info .al-m{ white-space:normal; }
.al-row.danger .al-n{ color:var(--al-warn-ink); }
.al-row .al-tail .al-field.step{ margin:0; }
.al-row.wide .al-field.range{ width:100%; margin-top:var(--al-u); }
.al-row.wide .al-field.range input{ width:100%; accent-color:var(--al-acc); }
.al-row.wide .al-field{ margin-top:var(--al-u); }
.al-row .al-tail .al-sw{ margin-left:var(--al-u); }
.st-meter{ display:flex; height:10px; border-radius:var(--al-rpill); overflow:hidden; background:var(--al-card2); margin-top:var(--al-u); }
.st-meter i{ display:block; height:100%; }
.st-meter .st-audio{ background:var(--al-acc); }
.st-meter .st-app{ background:color-mix(in srgb, var(--al-ink) 30%, transparent); }
.st-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.al-row .al-swatch{ flex:none; width:44px; height:32px; padding:0; border:0; background:none; border-radius:var(--al-rctl); cursor:pointer; }
/* ── the next-prayer chip (modules/tools/salah.js #prayer-mini, v1299) ───────
   Owner: "figure out where to put it — it was awkward and had no place to go due
   to it being movable." It is FIXED now, in the Search key's material. On a phone it
   sits at the top left, in the head band the page leaves above its text (the Search
   key is its twin at the top right). From 744 it sits at the bottom left, in the
   foot band, mirroring the dock key at the bottom right. Never over Qurʾān text;
   hidden with the same company as the Search key. Tap: Worship › Salah. */
#prayer-mini{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:calc(14px + env(safe-area-inset-left,0px)); z-index:46;
  display:none; align-items:center; gap:8px; height:44px; padding:0 14px 0 12px; border:1px solid var(--al-line); border-radius:var(--al-rpill); cursor:pointer;
  background:color-mix(in srgb, var(--al-surf) 82%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--al-sh-2);
  color:var(--al-ink); font:700 var(--al-floor)/1 var(--f-ui); letter-spacing:0; user-select:none; -webkit-user-select:none;
  transition:opacity var(--al-d2) ease; }
#prayer-mini.show{ display:inline-flex; }
#prayer-mini .pm-ic{ display:inline-flex; align-items:center; color:var(--al-mut); }
#prayer-mini .pm-n{ color:var(--al-ink); }
#prayer-mini .pm-c{ font:500 var(--al-floor)/1 var(--f-num); color:var(--al-mut); font-variant-numeric:tabular-nums; }
#prayer-mini .pm-n2{ padding-left:8px; border-left:1px solid var(--al-line); }
#prayer-mini:active{ background:color-mix(in srgb, var(--al-ink) 16%, transparent); }
#prayer-mini:focus-visible{ outline:2px solid var(--al-focus); outline-offset:2px; }
@media (min-width:744px){ #prayer-mini{ top:auto; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:calc(20px + env(safe-area-inset-left,0px)); height:48px; } }
body.card-open #prayer-mini, body.panel-open #prayer-mini, body.ctr-counting #prayer-mini, body.plain-read #prayer-mini, body.al-docked #prayer-mini, body.nav-open #prayer-mini,
body:has(#home.open) #prayer-mini, body:has(#hub.open) #prayer-mini, body:has(#arabic-stub.open) #prayer-mini, body:has(#ar-app.open) #prayer-mini,
body:has(#dd-scrim.show) #prayer-mini, body:has(.sh-scrim.show) #prayer-mini, body:has(.dk-scrim.show) #prayer-mini, body:has(#qplayer-scrim.show) #prayer-mini, body.rf-live #prayer-mini{ display:none; }
@media (prefers-reduced-motion:reduce){ #prayer-mini{ transition:none; } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after{ transition-duration:.001s !important; animation-duration:.001s !important; }   /* the Settings' Reduce motion, for a device that does not say so itself */

/* ── Listen (v1304, modules/audio/listen.js + listen-ui.js) ─────────────────────────────────
   "On the page": the recitation plays over the muṣḥaf. THE LIGHTS — the āyah being recited
   wears a soft accent band under its glyphs, the word being recited a stronger one; drawn as a
   background band (never a box, never layout). THE CARD — a glass capsule in the foot band,
   the Search key's material, taking the page pill's place while a recitation is live. */
.glyph-layer .word-glyph.ls-ayah{ background:linear-gradient(color-mix(in srgb, var(--al-acc) 12%, transparent) 0 0) center/100% 70% no-repeat; border-radius:4px; }
.glyph-layer .word-glyph.ls-word{ background:linear-gradient(color-mix(in srgb, var(--al-acc) 30%, transparent) 0 0) center/100% 70% no-repeat; }
body.theme-dark .glyph-layer .word-glyph.ls-ayah{ background:linear-gradient(color-mix(in srgb, var(--al-acc) 20%, transparent) 0 0) center/100% 70% no-repeat; }
body.theme-dark .glyph-layer .word-glyph.ls-word{ background:linear-gradient(color-mix(in srgb, var(--al-acc) 42%, transparent) 0 0) center/100% 70% no-repeat; }
.ls-card{ position:fixed; z-index:45; left:calc(14px + env(safe-area-inset-left,0px)); right:calc(14px + 48px + 10px + env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px));
  height:56px; display:none; align-items:center; gap:2px; padding:0 6px 0 16px; overflow:hidden; box-sizing:border-box;
  border:1px solid var(--al-line); border-radius:var(--al-rpill); color:var(--al-ink);
  background:color-mix(in srgb, var(--al-surf) 88%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--al-sh-2); }
.ls-card.show{ display:flex; }
.ls-card .ls-main{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.ls-card .ls-t{ font:700 var(--al-floor)/1.2 var(--f-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ls-card .ls-m{ font:500 13px/1.25 var(--f-ui); color:var(--al-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ls-card.lost .ls-m{ color:var(--al-acc-txt); font-weight:700; }
.ls-card.warn .ls-m{ color:var(--al-warn-ink); }
.ls-k{ flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--al-ink); display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ls-k svg{ width:20px; height:20px; display:block; }
.ls-k:active{ background:color-mix(in srgb, var(--al-ink) 12%, transparent); }
.ls-k:focus-visible, .ls-card .ls-main:focus-visible{ outline:2px solid var(--al-focus); outline-offset:2px; }
.ls-k.ls-play{ background:var(--al-acc); color:var(--al-acc-ink); }
.ls-k.ls-play:active{ filter:brightness(.92); }
.ls-card.loading .ls-play{ opacity:.6; }
.ls-card .ls-prog{ position:absolute; left:18px; right:18px; bottom:4px; height:2px; border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 10%, transparent); overflow:hidden; pointer-events:none; }
.ls-card .ls-prog i{ position:absolute; inset:0; background:var(--al-acc); transform-origin:left center; transform:scaleX(0); transition:transform .25s linear; }
body.ls-on #pill{ opacity:0; pointer-events:none; }   /* the card takes the pill's place */
body.ctr-counting .ls-card, body.card-open .ls-card, body.panel-open .ls-card, body.nav-open .ls-card, body.dock-open .ls-card, body.ls-sheet .ls-card, body.al-docked .ls-card{ display:none; }
@media (min-width:744px){ .ls-card{ left:50%; right:auto; transform:translateX(-50%); width:min(560px, calc(100vw - 2 * (20px + 52px + 12px))); bottom:calc(20px + env(safe-area-inset-bottom,0px)); height:60px; } }
@media (prefers-reduced-motion:reduce){ .ls-card .ls-prog i{ transition:none; } }
/* the sheet's transport — the one instrument in it */
.ls-tr{ display:flex; flex-direction:column; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 2) 0 0; }
.ls-tr-k{ display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 6); }
.ls-tr .ls-k{ width:52px; height:52px; background:var(--al-card2); }
.ls-tr .ls-k.ls-play{ width:64px; height:64px; background:var(--al-acc); color:var(--al-acc-ink); }
.ls-tr .ls-k svg{ width:22px; height:22px; }
.ls-tr .al-field.range{ width:100%; }
.ls-tr .al-field.range input{ width:100%; accent-color:var(--al-acc); }
.ls-tr-t{ display:flex; justify-content:space-between; gap:12px; font:500 13px/1.3 var(--f-ui); color:var(--al-mut); font-variant-numeric:tabular-nums; }
.ls-tr-t .ls-d{ text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 7 · Bar ───────────────────────────────────────────────────────────────── */
/* the ONLY docked surface: three zones; one on screen at a time.
   v1266 CAPSULE (seg-bar 2, the owner's pick): a floating capsule above the
   foot — the iOS 26 bottom accessory / mini-player shape — opaque card, the
   modal lift, round buttons inside (.al-db, the accent on .acc); the zones
   re-templated auto · 1fr · auto so the centre gets the room. Inset 12px on
   the phone; centred at the sheet's phone width from 744. */
.al-bar-dock{ position:fixed; left:calc(var(--al-u) * 3); right:calc(var(--al-u) * 3); bottom:calc(var(--al-u) * 3 + env(safe-area-inset-bottom,0px)); z-index:var(--al-z-dock);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; justify-content:stretch; align-items:center; gap:var(--al-u); padding:calc(var(--al-u) * 2);
  background:var(--al-card); border:1px solid var(--al-line); border-radius:var(--al-rpill); box-shadow:var(--al-sh-modal); color:var(--al-ink); }
@media (min-width:744px){ .al-bar-dock{ left:50%; right:auto; transform:translateX(-50%); width:min(92vw, 560px); bottom:calc(var(--al-u) * 4 + env(safe-area-inset-bottom,0px)); } }
.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-r{ justify-content:flex-end; }
.al-bar-c{ flex-direction:column; justify-content:center; gap:0; text-align:center; padding:0 var(--al-u); }
.al-bar-c .ar, .al-bar-c .ari{ font:400 var(--al-ar3)/var(--lh-ar) var(--f-ar); color:var(--al-ink); }
.al-bar-c small{ display:block; font:500 var(--al-floor)/var(--lh-meta) var(--f-ui); color:var(--al-mut); }
.al-db{ min-height:48px; padding:0 calc(var(--al-u) * 4); border:1px solid var(--al-line2); border-radius:var(--al-rpill); background:var(--al-surf); color:var(--al-ink2);
  font:700 var(--al-act)/1 var(--f-ui); white-space:nowrap; cursor:pointer; transition:transform var(--al-d1) var(--al-eo); }
.al-db:active{ transform:scale(.97); }
.al-db.acc{ background:var(--al-acc); color:var(--al-acc-ink); border-color:var(--al-acc); }
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:0; padding:0; background:none; border:0; border-radius:var(--al-rctl); box-shadow:var(--al-sh-modal); }
.al-bar-dock.float .al-bar-c{ flex-direction:row; padding:0; text-align:left; }
.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:0; }
.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); bottom:calc(var(--al-u) * 6 + env(safe-area-inset-bottom,0px)); } }
@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); }

/* ── THE DOCK · v1280 "#1" · v1282 one key at the right · v1287 lettered · v1289 (owner: "I like
   the one where it was opening horizontally and the navigator disappearing — revert it; names
   on the buttons; the search button up top right; horizontal only") ───────────────────────────
   At rest: ONE accent key at the bottom right. Open: the capsule unfolds to its LEFT along the
   foot band — Blur · Tajwīd · | · Menu, lettered pills — each in a cell whose width grows from
   0, the key's glyph turning from menu to ×; the page pill (the sūrah navigator) steps aside
   while the tools are out and returns when they fold. Search is its own round key at the TOP
   right. The page reserves a foot band for the key and the pill, and — where the page would
   reach under the search key (a phone, a spread) — a head band too. */
body.dock-bar #rules{ display:none; }
body.dock-bar #book{ --dock-bottom:calc(74px + env(safe-area-inset-bottom,0px)); }   /* v1294 (owner: "as large as possible — from the top to a bit above the sūrah navigator, on every screen"): the pill's top (14 + 48) plus 12 */
body.dock-bar #pill{ transition:bottom .25s ease, opacity .22s ease, transform .3s cubic-bezier(.2,.9,.3,1.1); }
body.dock-bar.card-open #pill, body.dock-bar.dock-open #pill{ opacity:0; transform:translate(-50%, 18px); pointer-events:none; }
.al-dock{ position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:46;
  display:flex; flex-direction:row; align-items:center; gap:0; padding:6px; margin:0 -6px -6px 0; border-radius:var(--al-rpill);
  background:color-mix(in srgb, var(--al-surf) 82%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--al-line); box-shadow:var(--al-sh-2);
  transition:padding var(--al-d3) var(--al-eo), margin var(--al-d3) var(--al-eo), background-color var(--al-d2) ease, border-color var(--al-d2) ease, box-shadow var(--al-d2) ease; }
.al-dock.fold{ padding:0; margin:0; background:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }   /* the negative margin open = the padding, so the key you pressed does not move */
.al-dock .dk-keys{ display:flex; flex-direction:row; align-items:center; }
.al-dock .dk-cell{ display:flex; align-items:center; justify-content:center; height:48px; width:54px; margin:0 2px; overflow:hidden; opacity:1;   /* v1296: six cells on a 375 phone — 4×54 + 44 + 1 + gaps 24 + the key 48 + 6 + padding 12 + 2 = 353 */
  transition:width var(--al-d3) var(--al-eo), margin var(--al-d3) var(--al-eo), opacity var(--al-d2) ease; }
.al-dock .dk-cell.dk-sepcell{ width:1px; margin:0 4px; }   /* v1290: outranks the tablet tier's cell width — the hairline was an 84px cell there (owner: "disproportionately not spaced") */
.al-dock .dk-cell.ico{ width:44px; }   /* v1295: a round glyph key's cell (Settings) — 44 on a phone, the floor */
.al-dock .dk-cell.ico .dk-key{ width:44px; height:44px; }
.al-dock.fold .dk-cell{ width:0; margin:0; opacity:0; visibility:hidden; pointer-events:none; transition-property:width, margin, opacity, visibility; transition-delay:0s, 0s, 0s, var(--al-d3); }   /* folded: gone to layout, to pointers and to assistive tech (visibility waits for the fold to finish) */
.al-dock .dk-cell:nth-child(6){ transition-delay:0s; } .al-dock .dk-cell:nth-child(5){ transition-delay:.01s; } .al-dock .dk-cell:nth-child(4){ transition-delay:.02s; } .al-dock .dk-cell:nth-child(3){ transition-delay:.03s; } .al-dock .dk-cell:nth-child(2){ transition-delay:.05s; } .al-dock .dk-cell:nth-child(1){ transition-delay:.07s; }   /* from the key outward */
.al-dock .dk-key, .al-dock-search{ position:relative; width:48px; height:48px; flex:none; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--al-ink) 8%, transparent); color:var(--al-ink2); display:grid; place-items:center;
  transition:background-color var(--al-d1) var(--al-eo), box-shadow var(--al-d1) var(--al-eo); }
.al-dock .dk-key svg, .al-dock-search svg{ width:22px; height:22px; }
.al-dock .dk-key:active, .al-dock-search:active{ background:color-mix(in srgb, var(--al-ink) 16%, transparent); }
.al-dock .dk-key.on, .al-dock-search.on{ box-shadow:inset 0 0 0 2px var(--al-acc-ring); color:var(--al-ink); }
.al-dock .dk-key.txt{ width:100%; border-radius:var(--al-rpill); font:700 13px/1 var(--f-ui); letter-spacing:0; text-transform:none; padding:0 3px; }
.al-dock .dk-key.txt .dk-t{ white-space:nowrap; }
.al-dock .dk-key.primary{ background:var(--al-acc); color:var(--al-acc-ink); box-shadow:var(--al-sh-2); }
.al-dock .dk-key.primary:active{ background:color-mix(in srgb, var(--al-acc) 84%, var(--al-ink)); }
.al-dock .dk-fab{ margin-left:6px; }
.al-dock.fold .dk-fab{ margin-left:0; }
.al-dock .dk-fab .dk-g{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity var(--al-d2) ease, transform var(--al-d3) var(--al-eo); }
.al-dock.fold .dk-fab .dk-g-x, .al-dock.open .dk-fab .dk-g-menu{ opacity:0; transform:scale(.6) rotate(-90deg); }
.al-dock .dk-key:focus-visible, .al-dock-search:focus-visible{ outline:2px solid var(--al-focus); outline-offset:2px; }
.al-dock .dk-sep{ width:1px; height:28px; background:var(--al-line2); }
.al-dock .dk-n{ position:absolute; right:-3px; top:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--al-rpill);
  background:var(--al-acc); color:var(--al-acc-ink); font:700 11px/18px var(--f-ui); font-variant-numeric:tabular-nums; }
/* Search: its own key at the top right (Apple puts search top-trailing on the iPad); glass under it */
.al-dock-search{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:calc(14px + env(safe-area-inset-right,0px)); z-index:46;
  background:color-mix(in srgb, var(--al-surf) 82%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--al-line); box-shadow:var(--al-sh-2);
  transition:opacity var(--al-d2) ease, background-color var(--al-d1) var(--al-eo); }
body.dock-bar.card-open .al-dock-search, body.dock-bar.panel-open .al-dock-search{ opacity:0; pointer-events:none; }
body.dock-bar #book{ --dock-top:calc(66px + env(safe-area-inset-top,0px)); }   /* the head band (14 + 48 + 4): the page ends below the search key where it would reach it (a phone); lifted on a tablet below */
body.ctr-counting .al-dock, body.plain-read .al-dock, body.al-docked .al-dock, body.nav-open .al-dock,
body.ctr-counting .al-dock-search, body.plain-read .al-dock-search, body.al-docked .al-dock-search, body.nav-open .al-dock-search{ display:none; }   /* not over the counter, the plain reader, a docked bar or the sūrah navigator */
@media (min-width:744px){ .al-dock{ padding:calc(var(--al-u) * 2); margin:0 calc(var(--al-u) * -2) calc(var(--al-u) * -2) 0; } .al-dock .dk-key, .al-dock-search{ width:52px; height:52px; } .al-dock .dk-cell{ height:52px; width:84px; margin:0 4px; } .al-dock .dk-cell.dk-sepcell{ width:1px; margin:0 6px; } .al-dock .dk-cell.ico{ width:52px; } .al-dock .dk-cell.ico .dk-key{ width:52px; height:52px; } .al-dock.fold .dk-cell, .al-dock.fold .dk-cell.dk-sepcell, .al-dock.fold .dk-cell.ico{ width:0; margin:0; } .al-dock .dk-key.txt{ font-size:var(--al-floor); padding:0 10px; }
  .al-dock{ right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); } .al-dock-search{ top:calc(20px + env(safe-area-inset-top,0px)); right:calc(20px + env(safe-area-inset-right,0px)); }
  body.dock-bar #book{ --dock-bottom:calc(80px + env(safe-area-inset-bottom,0px)); --dock-top:0px; }   /* v1294: the pill's top (20 + 48) plus 12; a portrait tablet's page sits clear of the corner key, so no head band — the page runs from the top */
  body.dock-bar.dual #book{ --dock-top:calc(78px + env(safe-area-inset-top,0px)); } }   /* a spread fills the width: the head band again (20 + 52 + 6) */
@media (prefers-reduced-motion:reduce){ .al-dock, .al-dock .dk-cell, .al-dock .dk-fab .dk-g, .al-dock-search{ transition:none; } }
/* the Menu card: centred on the screen on every size (the dock's sheet is a card, not a
   rising sheet), all four corners rounded, the page dimmed behind it */
.dk-scrim.sh-scrim.card{ justify-content:center; align-items:center; padding:72px 16px calc(16px + env(safe-area-inset-bottom,0px)); }
.dk-scrim.sh-scrim.card .al-sheet, .dk-scrim.sh-scrim.card .sheet{ border-radius:var(--al-rsurf); max-height:calc(100vh - 88px - env(safe-area-inset-bottom,0px)); padding-top:0;
  box-shadow:var(--al-sh-modal), 0 0 0 100vh color-mix(in srgb, var(--al-ink) 26%, transparent); }
body.theme-dark .dk-scrim.sh-scrim.card .al-sheet{ box-shadow:var(--al-sh-modal), 0 0 0 100vh rgba(0,0,0,.58); }
.dk-scrim.sh-scrim.card .al-sheet::before{ display:none; }
.dk-scrim.sh-scrim.card .al-bar{ padding-top:calc(var(--al-u) * 3); }
.al-choice.hub-tabs{ margin:0 0 var(--al-u); }
/* the two dropdowns that hung under the rail (Tajwīd, Blur) now rise from the dock:
   anchored above the capsule, centred, the same panel otherwise. html-prefixed to
   outrank zero.html's own html-prefixed placement. */
html body.dock-bar #tj-panel, html body.dock-bar #blur-panel{ top:auto; bottom:calc(90px + env(safe-area-inset-bottom,0px)); right:auto; left:50%; transform:translateX(-50%);
  width:min(92vw, 420px); max-width:none; max-height:calc(100dvh - 124px - env(safe-area-inset-bottom,0px)); }   /* clear of the open capsule (14 + 66 + 10); v1290: one sheet width */
@media (min-width:744px){ html body.dock-bar #tj-panel, html body.dock-bar #blur-panel{ bottom:calc(100px + env(safe-area-inset-bottom,0px)); } }   /* 20 + 70 + 10 */