/* styles/zero.css — v1662: the reader's own styles, moved out of zero.html as they were (same order, same place in the
   cascade: zero.html links this file where the inline <style> stood). Font url()s gain ../ (this file sits in styles/).
   Nothing was changed but the paths. */
  /* ── light-mode color tokens (audit theme 3, light half) — the dark theme's
     --d-* family has an --l-* mirror now. Values are EXACTLY the literals they
     replace (each var carries its fallback), so this pass changes nothing
     visually — it just gives light mode one place to edit. Modules still
     carry matching literals; convert them opportunistically. */

  /* ── v1077 · PLANNER 2 — a list of ayat you flagged ──────────────────────
     Owner: "it's for me to just say these two verses from this range are
     something I have to review. So simplify that way." Two panes, one list.
     Same numbers as everything else: 44px control, 12px control radius,
     52px row, accent once as a ring on the flagged thing. */
  .p2{ padding:4px 0 8px; }
  .p2-tabs{ display:flex; gap:8px; margin:0 0 14px; }
  .p2-tab{ flex:1 1 0; min-height:44px; border-radius:12px; cursor:pointer;
    border:1px solid rgba(60,50,20,.18); background:transparent; color:var(--l-mut,#6b6353);
    font:800 13px/1 "Manrope",-apple-system,sans-serif; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  .p2-tab.on{ color:var(--l-ink,#1b1812); border-color:var(--l-gold,#caa64b); box-shadow:inset 0 0 0 1px var(--l-gold,#caa64b); }
  body.theme-dark .p2-tab{ border-color:var(--d-line2,#4a4234); color:var(--d-ink3,#9a8f77); }
  body.theme-dark .p2-tab.on{ color:var(--d-ink,#ece3cf); border-color:var(--d-acc-txt,#d4b573); box-shadow:inset 0 0 0 1px var(--d-acc-txt,#d4b573); }
  .p2-c{ font:700 11px/1 "Manrope",sans-serif; font-variant-numeric:tabular-nums; opacity:.8; }
  .p2-pick{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
  .p2-fld{ display:flex; align-items:center; gap:10px; }
  .p2-fld > span{ flex:0 0 46px; font:700 10.5px/1 "Manrope",-apple-system,sans-serif;
    letter-spacing:.14em; text-transform:uppercase; color:var(--l-mut,#6b6353); }
  body.theme-dark .p2-fld > span{ color:var(--d-ink3,#9a8f77); }
  .p2-sel{ flex:1 1 auto; min-width:0; min-height:44px; padding:0 10px; border-radius:12px;
    border:1px solid rgba(60,50,20,.18); background:var(--l-card,#fff); color:var(--l-ink,#1b1812);
    font:600 14px/1 "Manrope",-apple-system,sans-serif; }
  .p2-sel.p2-a{ flex:0 0 92px; }
  body.theme-dark .p2-sel{ border-color:var(--d-line2,#4a4234); background:var(--d-surface,#201913); color:var(--d-ink,#ece3cf); }
  .p2-hint, .p2-empty{ font:500 12.5px/1.6 "Manrope",-apple-system,sans-serif; color:var(--l-mut,#6b6353); }
  .p2-hint{ margin:0 0 8px; }
  .p2-empty{ text-align:center; padding:26px 8px; }
  body.theme-dark .p2-hint, body.theme-dark .p2-empty{ color:var(--d-ink3,#9a8f77); }
  .p2-rows{ display:flex; flex-direction:column; }
  /* the row IS the control — tapping it flags the ayah */
  .p2-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:8px 12px;
    border:0; border-top:1px solid rgba(60,50,20,.13); background:transparent; cursor:pointer; text-align:start; }
  .p2-row:first-child{ border-top:0; }
  body.theme-dark .p2-row{ border-top-color:var(--d-line2,#4a4234); }
  .p2-row:hover{ background:rgba(60,50,20,.03); }
  body.theme-dark .p2-row:hover{ background:rgba(255,255,255,.03); }
  .p2-n{ flex:0 0 34px; text-align:center; font-family:var(--f-quran); font-size:14px;
    color:var(--l-mut,#6b6353); font-variant-numeric:tabular-nums; }
  body.theme-dark .p2-n{ color:var(--d-ink3,#9a8f77); }
  .p2-tx{ flex:1 1 auto; min-width:0; font-family:var(--f-quran); font-size:16px; line-height:1.9;
    color:var(--l-ink,#1b1812); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.theme-dark .p2-tx{ color:var(--d-ink,#ece3cf); }
  /* flagged reads as a ring on the mark, not a flood on the row */
  .p2-mk{ flex:0 0 18px; width:18px; height:18px; border-radius:50%;
    border:1px solid rgba(60,50,20,.20); background:transparent; }
  body.theme-dark .p2-mk{ border-color:var(--d-line2,#4a4234); }
  .p2-row.on .p2-mk{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b);
    box-shadow:0 0 0 3px rgba(202,166,75,.20); }
  body.theme-dark .p2-row.on .p2-mk{ background:var(--d-acc-txt,#d4b573); border-color:var(--d-acc-txt,#d4b573);
    box-shadow:0 0 0 3px rgba(212,181,115,.20); }
  /* the To-review row: tapping opens the ayah, ✕ removes it. Two jobs, two
     controls — before v1086 the row's only gesture destroyed it. */
  .p2-rowwrap{ display:flex; align-items:stretch; }
  .p2-rowwrap .p2-row{ flex:1 1 auto; min-width:0; }
  .p2-ref{ flex:0 0 auto; font:600 11px/1 "Manrope",-apple-system,sans-serif;
    font-variant-numeric:tabular-nums; color:var(--l-soft,#a89b80); margin-inline-start:8px; }
  body.theme-dark .p2-ref{ color:var(--d-soft,#8d8371); }
  .p2-rm{ flex:0 0 44px; min-height:52px; border:0; border-top:1px solid rgba(60,50,20,.13);
    background:transparent; color:var(--l-soft,#a89b80); font-size:15px; cursor:pointer; }
  .p2-rowwrap:first-child .p2-rm{ border-top:0; }
  body.theme-dark .p2-rm{ border-top-color:var(--d-line2,#4a4234); color:var(--d-soft,#8d8371); }
  /* ── v1095 · THE FLAGGED AYAH, OPENED ──────────────────────────────────
     Owner: "I just want to mark an Ayat and attach a rep count to it and I want
     to be able to tap words in that Ayat for myself for future reference."
     The card is a .li row that expands. Words are 44px controls in an RTL flow
     — NOT the mushaf renderer, plain Tanzil text, so wrapping is correct here
     and the sacred line layout is untouched. A marked word is a ring, never a
     flood, and it means nothing to any other tool: it is a note to yourself. */
  .p2-card{ border:1px solid var(--l-line); border-radius:12px; margin-bottom:8px; overflow:hidden; }
  body.theme-dark .p2-card{ border-color:var(--d-line2); }
  .p2-card.on{ box-shadow:inset 0 0 0 1px var(--l-gold); border-color:var(--l-gold); }
  body.theme-dark .p2-card.on{ box-shadow:inset 0 0 0 1px var(--d-acc-txt); border-color:var(--d-acc-txt); }
  .p2-card .p2-rowwrap{ border:0; margin:0; }
  .p2-card .p2-row{ border:0; background:transparent; }
  .p2-meta{ display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto; flex:0 0 auto; }
  .p2-tag{ font:800 11px/1 "Manrope",system-ui; color:var(--l-gold-txt); border:1px solid var(--l-gold);
    border-radius:12px; padding:5px 8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
  body.theme-dark .p2-tag{ color:var(--d-acc-txt); border-color:var(--d-acc-txt); }

  .p2-detail{ padding:4px 12px 14px; border-top:1px solid var(--l-line); }
  body.theme-dark .p2-detail{ border-top-color:var(--d-line2); }
  .p2-words{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; padding:12px 0 4px; }
  /* min-WIDTH too: a one-word tap target like وَ is 30px wide at this padding,
     and the floor is 44 on both axes, not just the one that is easy to measure. */
  .p2-w{ min-height:44px; min-width:44px; justify-content:center; padding:0 12px; border:1px solid var(--l-line); border-radius:12px;
    background:transparent; color:var(--l-ink); cursor:pointer;
    font-family:var(--f-quran); font-size:21px; line-height:1.9;
    display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent; }
  .p2-w.on{ color:var(--l-gold-txt); border-color:var(--l-gold); box-shadow:inset 0 0 0 1px var(--l-gold); }
  body.theme-dark .p2-w{ border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .p2-w.on{ color:var(--d-acc-txt); border-color:var(--d-acc-txt); box-shadow:inset 0 0 0 1px var(--d-acc-txt); }

  .p2-dlab{ font:800 10px/1 "Manrope",system-ui; letter-spacing:.14em; text-transform:uppercase;
    color:var(--l-soft); margin:14px 0 8px; }
  body.theme-dark .p2-dlab{ color:var(--d-soft); }
  .p2-repset{ display:flex; flex-wrap:wrap; gap:6px; }
  .p2-repn{ min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--l-line); border-radius:12px;
    background:transparent; color:var(--l-mut); font:700 13px/1 "Manrope",system-ui; cursor:pointer;
    font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; }
  .p2-repn.on{ color:var(--l-gold-txt); border-color:var(--l-gold); box-shadow:inset 0 0 0 1px var(--l-gold); }
  body.theme-dark .p2-repn{ border-color:var(--d-line2); color:var(--d-soft); }
  body.theme-dark .p2-repn.on{ color:var(--d-acc-txt); border-color:var(--d-acc-txt); box-shadow:inset 0 0 0 1px var(--d-acc-txt); }

  .p2-dacts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .p2-dact{ min-height:44px; padding:0 16px; border:1px solid var(--l-gold); box-shadow:inset 0 0 0 1px var(--l-gold);
    border-radius:12px; background:transparent; color:var(--l-gold-txt); font:800 13px/1 "Manrope",system-ui;
    cursor:pointer; display:inline-flex; align-items:center; }
  .p2-dact.ghost{ border-color:var(--l-line); box-shadow:none; color:var(--l-mut); font-weight:700; }
  body.theme-dark .p2-dact{ border-color:var(--d-acc-txt); box-shadow:inset 0 0 0 1px var(--d-acc-txt); color:var(--d-acc-txt); }
  body.theme-dark .p2-dact.ghost{ border-color:var(--d-line2); box-shadow:none; color:var(--d-soft); }
  .p2-reps{ flex:0 0 auto; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--l-gold);
    box-shadow:inset 0 0 0 1px var(--l-gold); border-radius:12px; background:transparent;
    color:var(--l-gold-txt); font:800 13px/1 "Manrope",system-ui; cursor:pointer;
    font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; }
  body.theme-dark .p2-reps{ border-color:var(--d-acc-txt); box-shadow:inset 0 0 0 1px var(--d-acc-txt); color:var(--d-acc-txt); }
  .p2-rm:hover{ color:#c0392b; }

  .p2-sec{ margin:0 0 16px; }
  .p2-sec-h{ display:flex; align-items:center; gap:8px; margin:0 0 4px;
    font:800 10.5px/1 "Manrope",-apple-system,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--l-mut,#6b6353); }
  body.theme-dark .p2-sec-h{ color:var(--d-ink3,#9a8f77); }
  .p2-sec-n{ font-variant-numeric:tabular-nums; opacity:.75; }

  /* ── v1076 · RECEIPT 2 — the wizard ──────────────────────────────────────
     Three questions, then one plain summary. Built on the language's numbers
     (44px control, 12px control radius, 16px surface) rather than a fourth
     private dialect; the accent is worn ONCE, on the step you are on. */
  .r2{ padding:4px 0 8px; }
  .r2-steps{ display:flex; gap:6px; justify-content:center; margin:2px 0 16px; }
  .r2-dot{ width:7px; height:7px; border-radius:50%; background:rgba(60,50,20,.16); }
  .r2-dot.done{ background:rgba(60,50,20,.32); }
  .r2-dot.on{ background:var(--l-gold,#caa64b); box-shadow:0 0 0 3px rgba(202,166,75,.20); }
  body.theme-dark .r2-dot{ background:rgba(214,196,158,.18); }
  body.theme-dark .r2-dot.done{ background:rgba(214,196,158,.34); }
  body.theme-dark .r2-dot.on{ background:var(--d-acc-txt,#d4b573); box-shadow:0 0 0 3px rgba(212,181,115,.20); }
  .r2-q{ margin:0 0 16px; text-align:center; font:800 19px/1.3 "Manrope",-apple-system,sans-serif;
    letter-spacing:-.01em; color:var(--l-ink,#1b1812); text-wrap:balance; }
  body.theme-dark .r2-q{ color:var(--d-ink,#ece3cf); }
  .r2-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 14px; }
  .r2-chip{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px;
    border-radius:12px; border:1px solid rgba(60,50,20,.18); background:var(--l-card,#fff);
    font:600 13px/1 "Manrope",-apple-system,sans-serif; color:var(--l-ink2,#2b2415); cursor:pointer; }
  body.theme-dark .r2-chip{ border-color:var(--d-line2,#4a4234); background:var(--d-surface,#201913); color:var(--d-ink2,#d8cdb4); }
  .r2-x{ display:inline-flex; align-items:center; color:var(--l-mut,#6b6353); }
  body.theme-dark .r2-x{ color:var(--d-ink3,#9a8f77); }
  /* v1109 — Back is a quiet sibling of Add; only Next wears the accent */
  .r2-back{ flex:none; }
  .r2-pick{ display:flex; flex-direction:column; gap:10px; }
  .r2-fld{ display:flex; align-items:center; gap:10px; }
  .r2-fld > span{ flex:0 0 46px; font:700 10.5px/1 "Manrope",-apple-system,sans-serif;
    letter-spacing:.14em; text-transform:uppercase; color:var(--l-mut,#6b6353); }
  body.theme-dark .r2-fld > span{ color:var(--d-ink3,#9a8f77); }
  .r2-sel{ flex:1 1 auto; min-width:0; min-height:44px; padding:0 10px; border-radius:12px;
    border:1px solid rgba(60,50,20,.18); background:var(--l-card,#fff); color:var(--l-ink,#1b1812);
    font:600 14px/1 "Manrope",-apple-system,sans-serif; }
  .r2-sel.r2-a{ flex:0 0 92px; }
  body.theme-dark .r2-sel{ border-color:var(--d-line2,#4a4234); background:var(--d-surface,#201913); color:var(--d-ink,#ece3cf); }
  .r2-acts{ display:flex; gap:10px; margin-top:16px; }
  .r2-btn{ flex:1 1 0; min-height:44px; padding:0 14px; border-radius:12px; cursor:pointer;
    border:1px solid rgba(60,50,20,.18); background:var(--l-card,#fff); color:var(--l-ink2,#2b2415);
    font:800 14px/1 "Manrope",-apple-system,sans-serif; }
  .r2-btn.r2-pri{ border-color:var(--l-gold,#caa64b); box-shadow:inset 0 0 0 1px var(--l-gold,#caa64b); }
  body.theme-dark .r2-btn{ border-color:var(--d-line2,#4a4234); background:var(--d-surface,#201913); color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .r2-btn.r2-pri{ border-color:var(--d-acc-txt,#d4b573); box-shadow:inset 0 0 0 1px var(--d-acc-txt,#d4b573); }
  .r2-skip{ margin-top:12px; text-align:center; font:500 12.5px/1.5 "Manrope",-apple-system,sans-serif; color:var(--l-mut,#6b6353); }
  body.theme-dark .r2-skip{ color:var(--d-ink3,#9a8f77); }
  /* the summary */
  .r2-sum-h{ text-align:center; margin:0 0 18px; }
  .r2-sum-t{ font:800 22px/1.2 "Manrope",-apple-system,sans-serif; color:var(--l-ink,#1b1812); }
  body.theme-dark .r2-sum-t{ color:var(--d-ink,#ece3cf); }
  .r2-sum-d{ margin-top:3px; font:600 12px/1 "Manrope",-apple-system,sans-serif; color:var(--l-mut,#6b6353); }
  body.theme-dark .r2-sum-d{ color:var(--d-ink3,#9a8f77); }
  .r2-sec{ margin:0 0 18px; }
  .r2-sec-h{ display:flex; align-items:center; gap:8px; margin:0 0 8px;
    font:800 10.5px/1 "Manrope",-apple-system,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--l-mut,#6b6353); }
  body.theme-dark .r2-sec-h{ color:var(--d-ink3,#9a8f77); }
  .r2-sec-n{ font-variant-numeric:tabular-nums; opacity:.75; }
  .r2-card{ border:1px solid rgba(60,50,20,.13); border-radius:16px; padding:12px 14px; margin:0 0 10px; }
  body.theme-dark .r2-card{ border-color:var(--d-line2,#4a4234); }
  .r2-card-h{ font:700 13px/1.3 "Manrope",-apple-system,sans-serif; color:var(--l-ink,#1b1812); margin:0 0 10px; }
  body.theme-dark .r2-card-h{ color:var(--d-ink,#ece3cf); }
  /* THE PREVIEW — first ayah, the counter's ornament, last ayah. The ornament
     itself is .mz-orn (memorize.js's, defined once around line 2547): the same
     component, so restyling it moves both surfaces. Only the ayah line is
     local. Replaced the old .r2-end "Started/Stopped" pair, whose classes now
     have zero emitters. */
  .r2-pvbox{ margin-top:12px; }
  .r2-pv{ padding:2px 0; }
  .r2-pv-a{ display:block; text-align:right; font-family:var(--f-quran);
    font-size:17px; line-height:2; color:var(--l-ink,#1b1812); }
  body.theme-dark .r2-pv-a{ color:var(--d-ink,#ece3cf); }
  .r2-pv-a .r2-num{ margin-inline-start:8px; }
  .r2-num{ font-family:var(--f-quran); font-size:14px; color:var(--l-gold-deep,#8a7340); }
  body.theme-dark .r2-num{ color:var(--d-acc-txt,#d4b573); }

  /* ── v1417 · PLAIN TEXT, the Calm list (modules/tools/plain-reader.js) ─────
     The plain reader draws and styles itself now (Mithlayn.style("plain-reader")):
     āyah cards under a glass sūrah bar, rendered in windows. What stays here is
     what other surfaces share: the two faces below and the marked-word box
     (.pr-w.mk is also the confusion picker's). #book and the rail are hidden
     while it is up; the page pill and the Menu key stay (they float over it). */
  body.plain-read #book, body.plain-read #rules{ display:none; }
  /* ── v1075 · the reader wears the mushaf's own hand ──────────────────────
     Every .pr-* Arabic rule named 'Amiri Quran' first and NOTHING loaded it:
     the fonts link (line 73) requests only Amiri and Manrope, and there is no
     @font-face for it anywhere zero.html reaches. Measured by advance width —
     the basmala set at 100px came out 691.50px both as declared and as plain
     Amiri, against 990.44px for a deliberately bogus family. The reader has
     been rendering in the fallback since it was built, which is a large part
     of why it never looked like the rest of the app.
     The honest fix was already in the repo, wired to nothing:
     KFGQPC Uthman Taha's flowing-text face, 87,760 bytes, SAME ORIGIN — so
     the reader keeps its letterforms offline, where the Google-hosted Amiri
     would drop to a system serif. It cannot threaten the SACRED line layout:
     #book is display:none while the reader is up, so .qcf-line is not even in
     the layout tree. It is NOT the per-page QCF and must never be — those
     encode one page's justification in their advance widths. */
  @font-face{ font-family:'UthmanicHafs'; font-display:swap;
    src:url('../mithlayn-assets/fonts/mushaf/uthmanic-hafs/UthmanicHafs1Ver18.woff2') format('woff2'); }

  /* ── v1143 · the sūrah name as a single drawn glyph ──────────────────────
     KFGQPC's sūrah-name face: 88 KB, same origin, in the repo since v694 and
     referenced by NOTHING until now. It is the honest square for a Qurʾān
     player's Now Playing plate — there is no album cover for a sūrah, and a
     reciter portrait is both assetless and wrong for this audience.
     ENCODING, verified from the font's own cmap (136 glyphs, 116 PUA
     entries, gaps at every ...9 → ...0): the codepoints are DECIMAL-CODED
     into the PUA — sūrah 1 is U+E001, sūrah 10 is U+E010, sūrah 99 is
     U+E099, sūrah 114 is U+E114. So the map is
        0xE000 + parseInt(String(n), 16)
     — the decimal digits read as hex. Guessing 0xE000 + n would land sūrah
     10 on U+E00A, which the font does not carry at all. */
  @font-face{ font-family:'SuraNames'; font-display:swap;
    src:url('../mithlayn-assets/fonts/mushaf/surah-names/sura_names.woff2') format('woff2'); }

  /* ── v1136 · the marked word ─────────────────────────────────────────────
     Owner: "the box would be, like, light light deep sky blue." Deep sky blue
     is #00BFFF; at 14% over paper it reads as a wash the Arabic still sits
     comfortably on, with the full hue kept for the underline so the mark has
     an edge without a hard outline around every word. It is the one non-gold
     accent in the reader, and it means exactly one thing: you said this word
     trips you. */
  .pr-w{ display:inline; border-radius:6px; padding:0 1px; }
  .pr-w.mk{ background:var(--pr-mk); box-shadow:inset 0 -2px 0 var(--pr-mk-line); }

  /* ── v1136 · THE CONFUSION PICKER (modules/tools/mine-picker.js) ─────────
     Two āyāt, every word a 44px target, one note, one flag. Fluid per H5:
     it is a window on a tablet and the full width of a phone, and the two
     āyāt sit side by side only when there is room for both to stay readable. */
  .mp-scrim{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
    padding:max(12px,env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(24,20,12,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .mp-scrim.show{ display:flex; }
  /* audit D3-11: in the new look's tokens (styles/ql/tokens.css): text 16 and up, sentence case, the accent for
     the refs and the chosen tab, Save the one dark capsule, corners on the scale. The marked words keep the owner's
     "light light deep sky blue" box (v1136). */
  .mp-win{ width:min(96vw,760px); max-height:92vh; overflow:auto; -webkit-overflow-scrolling:touch;
    background:var(--q-page); border:0; border-radius:var(--q-r-sheet); box-shadow:var(--q-sh-sheet);
    padding:20px; color:var(--q-ink); }
  .mp-top{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
  .mp-ttl{ font:600 var(--q-t-head)/1.3 var(--f-ui); }
  .mp-x{ margin-inline-start:auto; flex:none; width:44px; height:44px; border-radius:var(--q-r-circle); cursor:pointer;
    border:0; background:var(--q-fill); color:var(--q-ink); display:grid; place-items:center; padding:0; }
  .mp-lede{ font:400 var(--q-t-min)/1.5 var(--f-ui); color:var(--q-ink2); margin-bottom:12px; }
  .mp-pair{ display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:700px){ .mp-pair{ grid-template-columns:1fr 1fr; } }
  .mp-side{ border:0; border-radius:var(--q-r-group); padding:14px; background:var(--q-group); }
  .mp-sh{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
  .mp-ref{ font:600 var(--q-t-min)/1.2 var(--f-ui); color:var(--q-acc); font-variant-numeric:tabular-nums; }
  .mp-n{ font:400 var(--q-t-min)/1.3 var(--f-ui); color:var(--q-ink2); }
  .mp-clr{ margin-inline-start:auto; min-height:44px; padding:0 16px; border-radius:var(--q-r-cap); cursor:pointer;
    border:0; background:var(--q-fill); color:var(--q-ink); font:600 var(--q-t-min)/1 var(--f-ui); }
  .mp-clr + .mp-clr{ margin-inline-start:0; }
  .mp-words{ display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start; }
  .mp-w{ min-height:44px; min-width:44px; padding:2px 8px; border-radius:var(--q-r-ctl); cursor:pointer;
    border:1px solid transparent; background:transparent; color:inherit;
    font-family:var(--f-quran); font-size:var(--q-ar-22); line-height:1.95; }
  .mp-w.on{ background:rgba(0,191,255,.14); border-color:rgba(0,150,210,.55); }
  body.theme-dark .mp-w.on{ background:rgba(0,191,255,.17); border-color:rgba(120,210,255,.6); }
  .mp-en{ font:400 var(--q-t-min)/1.5 var(--f-ui); color:var(--q-ink2); margin-top:8px; }
  .mp-why{ display:block; margin:16px 0 12px; }
  .mp-why span{ display:block; font:600 var(--q-t-min)/1.3 var(--f-ui); color:var(--q-ink); margin-bottom:8px; }
  .mp-why input{ width:100%; min-height:44px; padding:0 14px; border-radius:var(--q-r-ctl);
    border:0; background:var(--q-fill); color:var(--q-ink); font:400 var(--q-t-body)/1.3 var(--f-ui); }
  .mp-att{ min-height:44px; padding:0 16px; border-radius:var(--q-r-cap); cursor:pointer;
    border:0; background:var(--q-fill); color:var(--q-ink); font:600 var(--q-t-min)/1 var(--f-ui); }
  /* on: the accent's wash and ring, the label in ink (the accent on its own wash is 4.3:1 by day — audit D3-11) */
  .mp-att.on{ background:var(--q-acc-soft); color:var(--q-ink); box-shadow:inset 0 0 0 1.5px var(--q-acc); }
  .mp-acts{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 12px; }
  .mp-save{ min-height:44px; padding:0 22px; border-radius:var(--q-r-cap); cursor:pointer; border:0;
    background:var(--q-strong); color:var(--q-strong-ink); font:600 var(--q-t-body)/1 var(--f-ui); }
  .mp-del{ min-height:44px; padding:0 16px; border-radius:var(--q-r-cap); cursor:pointer; border:0;
    background:var(--q-fill); color:var(--q-danger); font:600 var(--q-t-min)/1 var(--f-ui); }
  .mp-hint{ font:400 var(--q-t-min)/1.5 var(--f-ui); color:var(--q-ink2); margin-bottom:8px; }
  /* ── v1137 · the chooser — naming the other āyah without going to find it ── */
  .mp-ctabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
  .mp-ctabs button{ min-height:44px; padding:0 16px; border-radius:var(--q-r-cap); cursor:pointer;
    border:0; background:var(--q-fill); color:var(--q-ink); font:600 var(--q-t-min)/1 var(--f-ui); }
  .mp-ctabs button.on{ background:var(--q-acc-soft); color:var(--q-ink); box-shadow:inset 0 0 0 1.5px var(--q-acc); }   /* as .mp-att.on */
  .mp-ctabs button i{ font-style:normal; opacity:.6; margin-inline-start:6px; }
  .mp-count{ font:600 var(--q-t-min)/1.3 var(--f-ui); color:var(--q-ink2); margin:12px 0 8px; }
  .mp-hits{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto;
    -webkit-overflow-scrolling:touch; }
  .mp-hit{ flex:none; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:baseline;   /* flex:none — the scrolling list must not squeeze a row onto its preview (audit D3-11) */
    width:100%; min-height:52px; padding:10px 14px; border-radius:var(--q-r-ctl); cursor:pointer; text-align:start;
    border:0; background:var(--q-group); color:inherit; }
  .mp-hr{ font:600 var(--q-t-min)/1.2 var(--f-ui); color:var(--q-acc); font-variant-numeric:tabular-nums; }
  .mp-hs{ font:400 var(--q-t-min)/1.2 var(--f-ui); color:var(--q-ink2); }
  .mp-ha{ grid-column:1/-1; font-family:var(--f-quran); font-size:17px; line-height:2;
    text-align:right; color:var(--q-ink); margin-top:3px;
    --pr-mk:rgba(0,191,255,.14); --pr-mk-line:rgba(0,150,210,.55); }
  body.theme-dark .mp-ha{ --pr-mk:rgba(0,191,255,.17); --pr-mk-line:rgba(120,210,255,.6); }
  .mp-none{ font:400 var(--q-t-min)/1.5 var(--f-ui); color:var(--q-ink2); padding:12px 0; }

  /* ── v1063 · the View control, bottom-left, opening UPWARD ───────────────
     Owner: "put the view button on the bottom left which opens as a dropdown
     up button that will have easy access." It leaves the top rail (where it
     competed with six other pills for a thumb that cannot reach the top of a
     13-inch iPad) and becomes a standing control at the bottom-left corner —
     the same 44px/12px control as every other, just parked. */
  #hub-view.vw-corner{ position:fixed; z-index:46;
    inset-inline-start:calc(12px + env(safe-area-inset-left,0px));
    bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
  /* v1074 — but NOT in reader mode. The counter's tap surface is
     '#strip .slot .mushaf-page', which lives inside the display:none #book, so
     a session in reader mode cannot be fed at all — and this rule then removed
     the only reachable control on the surface. Measured: every pill buried,
     #hub-view display:none, #pill display:none — zero reachable chrome and no
     exit but ending the session. The counter owns the bottom of the MUSHAF; it
     does not own a surface it cannot count on. */
  body.ctr-counting:not(.plain-read) #hub-view.vw-corner{ display:none; }   /* the counter owns the bottom */
  /* v1269 (owner crossed the corner out): the standing View control leaves the page; View is a row in the Menu (tool-hubs.js) */
  #hub-view.vw-corner{ display:none; }
  /* the sheet rises FROM the button instead of sitting centred */
  .sh-scrim.vw-up{ align-items:flex-end; justify-content:flex-start;
    padding:0 0 calc(64px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px)); }
  .sh-scrim.vw-up .sheet, .sh-scrim.vw-up .al-sheet{ animation:vwup .16s ease-out; transform-origin:bottom left; }
  @keyframes vwup{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
  @media (prefers-reduced-motion:reduce){ .sh-scrim.vw-up .sheet, .sh-scrim.vw-up .al-sheet{ animation:none; } }

  /* ── v1062 · THE MUSHAF PAGE'S OWN TOKENS ────────────────────────────────
     styles/mushaf.css is written against an --ms-* token family, and NOTHING
     in zero.html ever defined it — styles/tokens.css holds those names but is
     not linked here (and could not be: it is the RETIRED index.html app's
     DARK palette, --ms-bg:#0E1418, so linking it would paint the light reader
     dark). So every --ms-* resolved to nothing, which made
     `background: var(--mu-paper, var(--ms-paper))` invalid at computed-value
     time. The muSHaf page had NO PAPER: transparent ground, fallback border,
     and its whole box-shadow declaration dropped to `none` because one term
     in the list was undefined.

     That is the grey slab the owner circled — the page was not a sheet on a
     desk, it was a hole in the desk.

     Defined here rather than by linking tokens.css, and sourced from the LIVE
     ground tokens, so the page is real paper under all 19 palettes instead of
     one hardcoded cream. --ms-rim is a COLOUR here, not a shadow: mushaf.css
     uses it as `0 1px 0 var(--ms-rim)`. */
  /* v1262 — ALL tokens moved to styles/al.css (Arm's Length II, PROPOSAL §2.1):
     the --ms-* shim (v1062 note above still explains WHY it is var()-sourced
     and why styles/tokens.css must never be linked), the --al-* roles (now
     derived from the five --k-* knobs), the --trap-* kinds (data register) and
     the light default ground. Nothing in this file may define a token again. */

  /* ══ v1189 · THE STRUCTURE LAYER — v1262: its tokens (--r-*, --hit*, --sh-*, --warn-*, --ease*, --dur-*) live in styles/al.css (stratum 4, the alias table). The component rules below still read them. */
  /* the ONE label voice (D9) — every eyebrow/caption in the app is this spec.
     The counter's RECITE/ADJUST captions already speak it; §3's section heading
     converges here as surfaces are touched. */
  .lbl{ font:700 11px/1 "Manrope",-apple-system,sans-serif; letter-spacing:.14em;
    text-transform:uppercase; color:var(--l-mut,#6b6353); }
  body.theme-dark .lbl{ color:var(--d-ink3,#9a8f77); }
  /* the one warn banner (D5) */
  .banner-warn{ background:var(--warn-bg); color:var(--warn-ink); border-radius:var(--r-ctl,12px);
    padding:11px 14px; font:600 13.5px/1.45 "Manrope",-apple-system,sans-serif; }
  /* the sanctioned attention pulse (D12) — a single 2s expanding gold ring for
     things that genuinely demand a human (the adhān window opening, a missed
     checkpoint). Used like a fire alarm: rarely. JS adds .pulse-attn, removes
     it on animationend. Reduced motion gets a static ring instead. */
  .pulse-attn{ animation:attn-ring 2s var(--ease-out,ease-out) 1; }
  @keyframes attn-ring{ 0%{ box-shadow:0 0 0 0 rgba(202,166,75,.50); }
    100%{ box-shadow:0 0 0 26px rgba(202,166,75,0); } }
  body.theme-dark .pulse-attn{ animation-name:attn-ring-d; }
  @keyframes attn-ring-d{ 0%{ box-shadow:0 0 0 0 rgba(212,181,115,.50); }
    100%{ box-shadow:0 0 0 26px rgba(212,181,115,0); } }
  @media (prefers-reduced-motion:reduce){
    .pulse-attn{ animation:none; box-shadow:0 0 0 2px var(--l-gold,#caa64b); }
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  /* ── Text-selection policy ────────────────────────────────────────────────
     This is touch chrome, not a document: long-pressing or rapid-tapping
     buttons, pills, the game canvas, lists or labels should NOT pop a text-
     selection / copy-callout box (it surfaced in Flappy, the focus-page input
     surroundings, and at random). So selection is OFF by default and re-enabled
     only where it's genuinely useful — form fields you type in, and readable
     commentary you might want to copy. The mushaf stays off (its glyphs are
     PUA-encoded and copy as garbage), and word-tap tools use pointer events,
     so disabling selection there doesn't affect them. */
  html, body {
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  input, textarea, select, [contenteditable], [contenteditable="true"],
  .aio-taf, .aio-tr, .aio-ar, .selectable, [data-selectable] {
    -webkit-user-select: text; -moz-user-select: text; user-select: text;
    -webkit-touch-callout: default;
  }
  html, body { height:100%; background:var(--l-bg,#faf6ec); overscroll-behavior:none; touch-action:manipulation; }
  /* v1267 app mode (modules/shared/native.js sets html.app inside the shell / standalone): no rubber-band on the
     shell, no link previews or callouts on chrome, the compiled page's words stay tappable, text selection only on prose */
  html.app, html.app body { overscroll-behavior:none; }
  html.app-native a, html.app-native button, html.app-native .al-row, html.app-native .r-pill { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  /* disable iOS double-tap-to-zoom on every tap surface (pinch-zoom still works) */
  #book, #strip, .slot, #rules, .r-pill, .dk-win, .ctr-hud, .mz-scrim, .dk-scrim { touch-action:manipulation; }
  /* ── ribbon ── */
  #book { position:fixed; inset:0; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; scrollbar-width:none; container-type:size;
    /* scroll anchoring must never adjust scrollLeft on slot fills — scroll
       position is the single source of truth (§4). NOTE: stable iOS Safari
       has NO scroll anchoring (it arrives in Safari 27), so this line is
       future-proofing there, not the fix for the on-device swipe drift —
       that was iOS retargeting an in-flight snap when the snap-area set
       changed mid-scroll; cured at the source by the STATIC slot lattice
       (all 604 slots persist from boot; see the lattice block in the JS). */
    overflow-anchor:none; }
  #book::-webkit-scrollbar { display:none; }
  /* ?pager=1: kill native horizontal scroll on #book and let the JS pager translate
     #strip instead (no native snap → no iOS momentum-settle drift, K7). Vertical
     mode (body.vscroll) keeps native scroll, so it is excluded. */
  html[data-pager] body:not(.vscroll) #book { overflow-x:hidden; scroll-snap-type:none; }
  html[data-pager] body:not(.vscroll) #strip { touch-action:none; }
  html[data-pager] body:not(.vscroll) .slot { scroll-snap-align:none; scroll-snap-stop:normal; }
  /* v1157 · owner's page-fit tuner: size multiplier rides --w above; the
     free-range nudge translates the PAGE inside its slot (never the slot —
     slots are the snap areas, rule K7). */
  .mushaf-page { translate: var(--fit-x, 0px) var(--fit-y, 0px); }
  /* --pad: half-gutter at each end so pages 1 and 604 can CENTER when the
     viewport is wider than one slot (desktop/tablet). 0 on phones. */
  #book { --dock-top:0px; --dock-bottom:0px;   /* vertical reservations (future modes set these) */
          /* v1156: 720px "compile reference" cap removed (owner: mushaf too
             small on iPad). All compiled coords are relative; the page
             upscales losslessly — host width/height are the only bounds. */
          /* v1297 · THE INK FRAME (owner: "the Mushaf is too tiny on my iPad") — see CLAUDE.md K8.
             The page BOX carries the print's white paper around the text: measured on 40 pages
             (verify: scratchpad ctr/ink.js), the glyph frame starts 4.47% down the box and ends
             6.57% above its foot, on every page. When the height is the binding side (a portrait
             tablet) that paper was what fit the screen, not the text. So the box is now sized so
             that its INK spans the reserved height: the box is taller than the gap by --ink-crop
             and the page below (.slot > .mushaf-page) is slid so the cropped paper lies off the top
             and under the bottom band. Nothing of the glyph frame is ever off screen: the crop
             keeps ≥1.2% of paper above the ink and ≥1% below it (the glyph ink overhangs its box).
             Width-bound screens (a phone) are untouched: there --ovf is 0 and nothing moves. */
          --ink-t:0.032; --ink-b:0.056;
          --ink-crop:calc(var(--ink-t) + var(--ink-b));
          --ink-shift:calc(0.5 - var(--ink-t) / max(0.001, var(--ink-t) + var(--ink-b)));   /* of the overflow: the page slides DOWN, since more paper is cropped below the ink than above it */
          --w: calc(min(100cqi, calc((100cqb - var(--dock-top) - var(--dock-bottom)) / (1 - var(--ink-crop)) * 600 / 917)) * var(--fit-s, 1));
          --pad: max(0px, (100cqi - var(--w)) / 2); }
  /* v1298 · EVERY EDITION HAS ITS OWN INK FRAME (K8, second paragraph). The paper each edition
     carries around its text is its own: v2/v4 sit under K1's smaller scales, the scans were cropped
     by whoever scanned them. Each pair is the SMALLEST paper margin measured across sample pages
     (glyph boxes for v1/v2/v4 — scratchpad ctr/ink2.js; mask pixels for the image editions —
     scratchpad eds/inkfrac.js) LESS 0.012, so no page's text can leave the screen. body[data-ed]
     is the edition (syncEdBtn). An edition with a margin under 0.012 keeps 0 — it is full already. */
  body[data-ed="v2"] #book{ --ink-t:0.068; --ink-b:0.064; }
  body[data-ed="v4"] #book{ --ink-t:0.077; --ink-b:0.100; }
  body[data-ed="warsh"] #book{ --ink-t:0.025; --ink-b:0.024; }
  @media (min-width:744px) and (min-height:501px){ body[data-ed="warsh"] #book{ --ink-t:0.015; --ink-b:0.014; } }   /* audit Q5-01 (owner 2026-10-17, "Show every mark"): iPad windows (the iPad tier less a phone on its side, ql.css's max-height:500px), re-measured on all 604 restored stencils; every phone, either way up, keeps the pair above, which shows every mark there */
  body[data-ed="warsh2"] #book{ --ink-t:0.013; --ink-b:0; }
  body[data-ed="qalun"] #book{ --ink-t:0.010; --ink-b:0; }
  body[data-ed="duri"] #book{ --ink-t:0.006; --ink-b:0; --ed-y:-4px; }   /* v1659 (owner: "A"): its scan has no paper under the last line, so its foot came 8px from the pill; 4px up clears 12 */
  body[data-ed="shuba"] #book{ --ink-t:0.003; --ink-b:0; }
  body[data-ed="bazzi"] #book, body[data-ed="susi"] #book{ --ink-t:0.024; --ink-b:0.024; }
  body[data-ed="khalaf"] #book, body[data-ed="qunbul"] #book, body[data-ed="m1439"] #book{ --ink-t:0; --ink-b:0; }
  /* v1690 (owner, 2026-10-19: "the mushaf in 2 page view landscape ipad pro 13 inch its too tiny" → the 1439, "Fill the height",
     "Up to 18 px from top"): its frame is ink to the scan's edge and already ends ~5 px above the bar, so the spread can only grow
     upward — the box takes 0.065 of its height above the top band (dock-top 78) and slides up by all of it (--ink-b 0): at
     1366×1024 the page is 925 px tall from 18 px (was 864 from 79); on smaller iPads the top lands lower (11″: ~31 px). */
  @media (min-width:744px) and (min-height:501px){ body.dual[data-ed="m1439"] #book{ --ink-t:0.065; --ink-b:0; } }
  body[data-ed="hisham"] #book, body[data-ed="dhakwan"] #book{ --ink-t:0.079; --ink-b:0.079; }
  body[data-ed="idris"] #book{ --ink-t:0.011; --ink-b:0.012; }
  body[data-ed="jammaz"] #book, body[data-ed="wardan"] #book{ --ink-t:0.015; --ink-b:0.009; }
  body[data-ed="khallad"] #book{ --ink-t:0.114; --ink-b:0.111; }
  body[data-ed="ruways"] #book{ --ink-t:0.015; --ink-b:0.018; }
  body[data-ed="rawh"] #book{ --ink-t:0.022; --ink-b:0.021; }
  body[data-ed="ishaq"] #book{ --ink-t:0.019; --ink-b:0.011; }
  body[data-ed="abuharith"] #book{ --ink-t:0.077; --ink-b:0.077; }
  body[data-ed="durik"] #book{ --ink-t:0.009; --ink-b:0.001; }
  /* dual-page (spread) mode: two pages per screen, half --w, spread-centred --pad */
  body.dual #book { --w: calc(min(calc((100cqi - 2px) / 2), calc((100cqb - var(--dock-top) - var(--dock-bottom)) / (1 - var(--ink-crop)) * 600 / 917)) * var(--fit-s, 1));
          --pad: max(0px, (100cqi - 2 * var(--w)) / 2); }
  /* v1297 · the glyph page takes the slot's full width even when that makes it taller than the gap
     (mushaf.css caps it at 100cqb — the paper-fits rule this replaces for glyph editions), and slides
     by --ink-shift of the overflow so the ink frame, not the paper, sits between the bands. */
  body:not(.vscroll) .slot > .mushaf-page{   /* v1298: every edition — an image page is contain-fitted into this same box, so its frame maps the same way */
    width:100cqi; height:auto; max-height:none;
    --pg-ovf: max(0px, calc(100cqi * 917 / 600 - 100cqb));
    translate: calc(var(--fit-x, 0px) + var(--sp-x, 0px)) calc(var(--fit-y, 0px) + var(--pg-ovf) * var(--ink-shift) + var(--ed-y, 0px) + var(--ph-y, 0px) + var(--sp-y, 0px)); }   /* v1659: --ed-y, an edition's own nudge (al-Dūrī below); v1662: --ph-y, the full-screen iPhone's 10px down (zero.html phoneGain) */
  /* v1576 (owner, iPad in full screen: "Mushaf is a bit too far up in full screen, can't you make rules, full screen, safari mode, add
     to Home Screen"): three rules, one per way the app is shown on an iPad held upright —
       · Safari (its bars above): unchanged, the K8 pin (text 18px under Safari's bar);
       · full screen (the Aa sheet's switch, html.is-fs) and the Home Screen app (html.is-app): nothing above the page but the
         clock, which iPadOS lays over it (~24px), so the page keeps 24px clear at its top (--dock-top, the reader's own top
         reservation): it starts below the clock and gives those 24px of height back (about 2% smaller), so no edition's foot comes
         nearer the island. Only the 13-inch proportions need it: a narrower iPad already keeps 40–60px there (styles/al.css).
         verify/probes/page-size.js pins both rows. */
  @media (min-width:744px) and (orientation:portrait) and (min-aspect-ratio:7/10){ html.is-fs body.dock-bar:not(.dual):not(.vscroll) #book, html.is-app body.dock-bar:not(.dual):not(.vscroll) #book { --dock-top:24px; } }
  /* ── side rails: the --pad slack as first-class elements ─────────────
     The rails own everything beside the page. Swap body[data-rail]:
       curtain → opaque paper, hides peeking neighbor pages (default)
       fade    → neighbors ghost through a gradient
       panel   → rail becomes an interactive sidebar host: put content
                 in #rail-l/#rail-r (each has .rail-slot), they take taps
       off     → rails gone (the old continuous-strip look)
     Width is var(--pad): 0 on phones (rails vanish), ~350px on iPad 13"
     landscape — same element, different device = different sidebar. */
  .rail { position:fixed; top:0; bottom:0; width:var(--pad); z-index:4; pointer-events:none; }
  #rail-l { left:0; } #rail-r { right:0; }
  body[data-rail=off] .rail { display:none; }
  body[data-rail=curtain] .rail { background:var(--l-bg,#faf6ec); }
  body[data-rail=fade] #rail-l { background:linear-gradient(90deg,var(--l-bg,#faf6ec) 45%,rgba(var(--l-bg-rgb,250,246,236),0)); }
  body[data-rail=fade] #rail-r { background:linear-gradient(270deg,var(--l-bg,#faf6ec) 45%,rgba(var(--l-bg-rgb,250,246,236),0)); }
  body[data-rail=panel] .rail { background:var(--l-bg,#faf6ec); pointer-events:auto; }
  body[data-rail=panel] #rail-l { border-right:1px solid rgba(60,50,20,.12); }
  body[data-rail=panel] #rail-r { border-left:1px solid rgba(60,50,20,.12); }
  .rail-slot { position:absolute; inset:12px 10px; overflow:auto; }
  /* docks reserve vertical space: slots pad, the page re-centers between */
  .slot { padding-top:var(--dock-top); padding-bottom:var(--dock-bottom); }
  #strip { position:relative; height:100%;
    width:calc(604 * var(--w) + 2 * var(--pad)); }
  .slot { position:absolute; top:0; bottom:0; width:var(--w);
    left:calc(var(--pad) + var(--i) * var(--w)); display:grid; place-items:center;
    scroll-snap-align:center; scroll-snap-stop:always;
    content-visibility:auto; contain-intrinsic-size:auto 100cqb; }
  /* The gutter line is the SEAM between two facing pages, so it shows in two-page
     spread mode only — in single-page view a lone left rule reads as a stray,
     unbalanced line (there's no matching right border). We keep a 1px transparent
     border on EVERY slot for box width (no layout shift; slots mount in DOM order
     ≠ visual order, so `.slot + .slot` flickered on scroll) and PAINT the visible
     seam with ::before. The pseudo spans only the content region (between the
     --dock-top / --dock-bottom reservations) so the line stops at the mushaf and
     never bleeds down through an open dock (e.g. the transparent Audio Test dock). */
  .slot { border-inline-start:1px solid transparent; }
  body.dual .slot::before { content:''; position:absolute; left:0; width:1px; pointer-events:none;
    top:var(--dock-top,0px); bottom:var(--dock-bottom,0px); background:rgba(60,50,20,.12); }
  /* v1680 (owner: two pages on an upright iPad, "C · Book spine", "Keep today's size"; mockup
     https://claude.ai/artifact/5zaTam71T75kbLScumYEc7): no edge lines; a soft shadow down the middle like a printed muṣḥaf's fold,
     drawn as two halves (the right page's ::before at its left edge, the left page's at its right edge), as tall as the text and 20
     beyond it (--spine-t / --spine-h, zero.html spineFit); each page moves 1% of its width toward the middle, so the space beside and
     between the two texts evens out (measured 18 · 35 · 18 → ~23 · 25 · 23 at 1024); --sp-y (spineFit) seats the text in three
     equal bands: above it, from it to the island, under the island. Sideways spreads and single pages are untouched. */
  @media (min-width:744px) and (orientation:portrait) {
    body.dual:not(.vscroll) .slot::before { width:18px; top:var(--spine-t, var(--dock-top,0px)); bottom:auto; height:var(--spine-h, calc(100% - var(--dock-top,0px) - var(--dock-bottom,0px)));
      background:linear-gradient(90deg, color-mix(in srgb, var(--q-ink) 10%, transparent), color-mix(in srgb, var(--q-ink) 3.5%, transparent) 45%, transparent); }
    body.dual:not(.vscroll) .slot:is([data-p$="0"], [data-p$="2"], [data-p$="4"], [data-p$="6"], [data-p$="8"])::before { left:auto; right:0; background:linear-gradient(270deg, color-mix(in srgb, var(--q-ink) 10%, transparent), color-mix(in srgb, var(--q-ink) 3.5%, transparent) 45%, transparent); }
    body.dual.theme-dark:not(.vscroll) .slot::before { background:linear-gradient(90deg, color-mix(in srgb, var(--q-black) 42%, transparent), color-mix(in srgb, var(--q-black) 16%, transparent) 45%, transparent); }
    body.dual.theme-dark:not(.vscroll) .slot:is([data-p$="0"], [data-p$="2"], [data-p$="4"], [data-p$="6"], [data-p$="8"])::before { background:linear-gradient(270deg, color-mix(in srgb, var(--q-black) 42%, transparent), color-mix(in srgb, var(--q-black) 16%, transparent) 45%, transparent); }
    body.dual:not(.vscroll) .slot:is([data-p$="1"], [data-p$="3"], [data-p$="5"], [data-p$="7"], [data-p$="9"]) > .mushaf-page:is([data-edition="v1"], [data-edition="v2"], [data-edition="v4"]) { --sp-x:-1%; }   /* a printed image page keeps its place: its frames meet as a book's do */
    /* the right page's 1px spacer border (the box-width keeper above) IS the seam: it takes the shadow's darkest tone, only as tall
       as the shadow (a gradient clipped to the border), so the two halves meet with no light line */
    body.dual:not(.vscroll) .slot:is([data-p$="1"], [data-p$="3"], [data-p$="5"], [data-p$="7"], [data-p$="9"]) { border-inline-start-color:transparent; background:linear-gradient(color-mix(in srgb, var(--q-ink) 10%, transparent), color-mix(in srgb, var(--q-ink) 10%, transparent)) no-repeat 0 var(--spine-t, 0px) / 1px var(--spine-h, 0px); background-origin:border-box; background-clip:border-box; }
    body.dual.theme-dark:not(.vscroll) .slot:is([data-p$="1"], [data-p$="3"], [data-p$="5"], [data-p$="7"], [data-p$="9"]) { background-image:linear-gradient(color-mix(in srgb, var(--q-black) 42%, transparent), color-mix(in srgb, var(--q-black) 42%, transparent)); }
    body.dual:not(.vscroll) .slot:is([data-p$="0"], [data-p$="2"], [data-p$="4"], [data-p$="6"], [data-p$="8"]) > .mushaf-page:is([data-edition="v1"], [data-edition="v2"], [data-edition="v4"]) { --sp-x:1%; }   /* a printed image page keeps its place: its frames meet as a book's do */
  }
  /* dual mode: snapping moves from per-page slots to per-spread spine targets
     (a 2px marker at each spread's centre); the slot positions are unchanged. */
  .snap { position:absolute; top:0; bottom:0; width:2px; pointer-events:none;
    left:calc(var(--pad) + var(--si) * var(--w) - 1px); }
  body.dual .slot { scroll-snap-align:none; scroll-snap-stop:normal; }
  body.dual .snap { scroll-snap-align:center; scroll-snap-stop:always; }
  /* page rendering is owned ENTIRELY by styles/mushaf.css (the proven
     SACRED block) — zero.html adds only the ribbon + slot + pill. */
  .slot { container-type:size; }
  /* M3-R6: the picture of the page you were reading, held over the book while its new look is drawn (zero.html lookChange) */
  .mo-pic { position:fixed; z-index:3; pointer-events:none; overflow:visible; transition:opacity var(--dur-2) var(--ease-out); }
  .mo-pic.out { opacity:0; }  .mo-pic.mo-pic-top { z-index:29; }   /* Plain text's column (#pr-root, 30) rises over it */
  .mo-pic > .slot { container-type:size; }
  /* ── Vertical reader mode (continuous scroll) — additive; default stays the
     horizontal page-flip. Pages keep their SACRED inner layout; only the
     container axis changes: pages stack top→bottom in one centred column. */
  body.vscroll #book { overflow-x:hidden; overflow-y:auto; scroll-snap-type:none;
    --w: calc(100cqi * var(--fit-s, 1)); --ph: calc(var(--w) * 917 / 600); } /* v1156: 720px cap removed */
  body.vscroll #strip { width:100%; height:calc(604 * var(--ph)); }
  body.vscroll .slot { top:calc((var(--p) - 1) * var(--ph)); bottom:auto;
    left:50%; transform:translateX(-50%); width:var(--w); height:var(--ph);
    scroll-snap-align:none; }
  /* v1492 audit #81: the dock bands (--dock-top / --dock-bottom) are a screen's reservation for page-flip; padded into
     EVERY slot of the scroll column they shrank each page to two-thirds width with 190px of blank paper between pages.
     In Scroll mode the pages run full width, and the column ends one band past the last page so it can clear the keys. */
  body.vscroll .slot { padding-top:0; padding-bottom:0; }
  body.vscroll #strip { height:calc(604 * var(--ph) + var(--dock-bottom)); }
  body.vscroll .snap { display:none; }   /* horizontal spread-snap markers, dormant here */
  /* THE LOADING SHIMMER IS A REAL ELEMENT, NOT A PSEUDO (v1101).
     It used to be `.slot.loading::after`, and WebKit does not reliably tear a
     pseudo-element down when the class that gated it is removed: the class went
     (querySelectorAll('.slot.loading') === 0), no rule in the CSSOM matched the
     pseudo any more, and getComputedStyle(slot,'::after') STILL returned the
     shimmer gradient — a stale pseudo painting a grey slab over a page that had
     finished rendering. Proved by bisection: injecting any rule that so much as
     MENTIONS .slot::after cleared it, while an unrelated rule and a forced
     reflow did not, so it was a style-invalidation failure, not layout.
     A node cannot go stale: mount() replaces the slot's innerHTML, which
     removes this outright. Nothing to un-style, nothing to invalidate. */
  /* v1542 (audit #11): the note in a slot whose page could not load — its own class, a status line, never the page's */
  .slot-note { position:absolute; left:14%; right:14%; top:42%; display:grid; gap:var(--sp-1, 4px); padding:var(--sp-3, 12px) var(--sp-4, 16px); border:0; border-radius:var(--r-ctl); background:var(--c-card, var(--al-card)); color:var(--c-ink, var(--al-ink)); font:var(--fw-med, 500) var(--fs-body, 16px)/1.35 var(--ds-font, var(--f-ui, system-ui)); text-align:center; box-shadow:0 1px 0 var(--c-hair); }
  .slot-note b { font-weight:var(--fw-bold, 600); }
  .slot-note span { color:var(--c-ink2, var(--al-ink2)); font-size:var(--fs-call, 14px); }
  .slot-ph { position:absolute; inset:12% 8%; border-radius:var(--r-icon); pointer-events:none;   /* audit D1-15: the scale's corner; the theme's ink, so night shows it too */
    background:linear-gradient(90deg, color-mix(in srgb, var(--c-ink, var(--al-ink)) 4%, transparent), color-mix(in srgb, var(--c-ink, var(--al-ink)) 9%, transparent), color-mix(in srgb, var(--c-ink, var(--al-ink)) 4%, transparent));
    background-size:200% 100%; visibility:hidden; animation:sh 1.1s linear .35s infinite; }
  /* v1534 (owner: "If I download the muṣḥaf I shouldn't see pages loading"): the shimmer is hidden until its animation starts,
     0.35 s in, so a page that comes from the device (downloaded, or kept) appears with no loading flash; a slow network still shows it */
  @keyframes sh { from { visibility:visible; } to { background-position:-200% 0; visibility:visible; } }
  /* Warsh scanned-image edition: the page is a single image, full-bleed in the
     slot. No glyph/text layers, so word-level tools don't apply. */
  .slot .mushaf-page[data-edition="warsh"] { width:100%; height:100%; }
  /* processed Warsh page: a transparent stencil masked over theme-ink so the
     text colour follows light/dark, with the page frame already removed */
  .warsh-clean { position:absolute; inset:0; -webkit-mask-size:contain; mask-size:contain;   /* v1298: inset:0, not 100%/100% — WebKit resolved that height 25px past the aspect-ratio box, drawing the text under the page's foot */
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
    background:var(--l-ink,#1b1812); }
  body.theme-dark .warsh-clean { background:var(--d-ink, #ded6c4); }
  /* COLOUR scanned edition (Khalaf), HYBRID of two stacked layers. Paper is
     transparent (theme shows through) and the ink follows light/dark like warsh:
       .cp-ink  — a FULL alpha stencil (text + marks + gold + frame) used as a CSS
                  mask, painted with the theme ink (dark in light, off-white in dark).
       .cp-mark — a fixed-colour overlay (red marks + gold medallions + red frame)
                  on top. Shown in LIGHT mode (page is in colour); HIDDEN in dark
                  contexts, where the full stencil alone gives a clean monotone page.
     Both layers share identical geometry and contain-fit/centre → pixel-for-pixel.
     (.color-page kept below for any pure as-is edition.) */
  .color-page { width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center; }
  .cp-wrap { position:absolute; inset:0; }   /* v1298: the page's box exactly (see .warsh-clean) */
  .cp-ink, .cp-mark { position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:center; }
  .cp-ink { -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; background:var(--l-ink,#1b1812); }
  body.theme-dark .cp-ink,
  .mushaf-shell[data-paper-theme="M-night"] .cp-ink,
  .mushaf-shell[data-paper-theme="M-navy-luxe"] .cp-ink,
  .mushaf-shell[data-paper-theme="M-forest-gold"] .cp-ink,
  .mushaf-shell[data-paper-theme="M-blueprint"] .cp-ink { background:var(--d-ink, #ded6c4); }
  /* v1683: a hidden word drawn again blurred (.cp-wh > i, zero.html imgHidePaint) wears the same ink */
  .cp-wh > i { background:var(--l-ink); }
  body.theme-dark .cp-wh > i,
  .mushaf-shell[data-paper-theme="M-night"] .cp-wh > i,
  .mushaf-shell[data-paper-theme="M-navy-luxe"] .cp-wh > i,
  .mushaf-shell[data-paper-theme="M-forest-gold"] .cp-wh > i,
  .mushaf-shell[data-paper-theme="M-blueprint"] .cp-wh > i { background:var(--d-ink); }
  /* dark mode → monotone: drop the colour overlay, leaving just the themed stencil */
  body.theme-dark .cp-mark,
  .mushaf-shell[data-paper-theme="M-night"] .cp-mark,
  .mushaf-shell[data-paper-theme="M-navy-luxe"] .cp-mark,
  .mushaf-shell[data-paper-theme="M-forest-gold"] .cp-mark,
  .mushaf-shell[data-paper-theme="M-blueprint"] .cp-mark { display:none; }
  /* v1680 · an image edition with a word map (IMG_ED.map, the Madinah 1439): Listen's āyah — the INK of its words turns the
     accent (owner: "The ink changes colour: the printed letters of that āyah turn the accent colour … Nothing covers the page").
     .cp-hl is last in .cp-wrap, over .cp-ink and over .cp-mark (shown in light); each .cp-hlb is the āyah on one line (the map's
     band) and clips its <i>, a copy of the page's ink mask placed exactly as .cp-ink's, painted in the accent. In dark .cp-mark
     is hidden and the accent ink still shows. It comes and goes at once: no transition. */
  .cp-hl { position:absolute; inset:0; pointer-events:none; }
  .cp-hlb { position:absolute; overflow:hidden; }
  .cp-hlb > i { position:absolute; display:block; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; background:var(--al-acc); }
  /* v1681 · words in colour on a scan with a word map (zero.html imgDecoPaint: tajwīd "like 1405", Mark āyāt's word colours):
     .cp-wb is first in .cp-wrap — the soft bands, the lām rings and the underlines lie on the paper, under the ink; right after
     .cp-ink, one .cp-wc per colour: a copy of the page's ink stencil (the mask .cp-ink draws with) painted that colour and clipped
     (inline clip-path: path()) to the union of its words' boxes, so only the printed letters inside a box take it (v1680's clip
     method); .cp-wi is the canvas fallback where path() is missing; .cp-mark (the print's red and gold) and Listen's .cp-hl stay
     over them. The ring is the glyph pages' (1.4px; its corner Test me's, --q-r-icon). .cp-tl holds Test me's boxes (tajwid-test.css draws their
     underline, band and ring), under the
     ink; each box takes taps. .cp-crop is a word cut from the scan (Test me's card). */
  .cp-wb, .cp-tl { position:absolute; inset:0; pointer-events:none; }
  .cp-wb > b { position:absolute; display:block; }
  .cp-wb > b.cp-wr { box-sizing:border-box; border:1.4px solid; border-radius:var(--q-r-icon); }
  .cp-wc { position:absolute; inset:0; pointer-events:none;
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
  .cp-wi { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
  .cp-tl > .img-tw { position:absolute; display:block; pointer-events:auto; }
  .cp-crop { display:inline-block; position:relative; overflow:hidden; vertical-align:middle; }
  .cp-crop > i { position:absolute; display:block; background:currentColor; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
  /* v1683 · the scan's word layers (zero.html imgShadow; owner: "Ok go do blur and the rest"): a glyph page's three layers built from
     the word map — .img-cl (overlays) and .img-gl (an empty .word-glyph per word, .verse-end per marker) under .cp-wrap, .img-tx (a
     transparent .word per word, its Tanzil text) over it. Placed by left/top/width/height in % of the page: no translate, no
     print-margin scale (a scan is its own paper). The words' letters are drawn by the painter from their computed style. */
  .mushaf-page > .img-cl, .mushaf-page > .img-gl, .mushaf-page > .img-tx { transform:none; }
  .mushaf-page > .img-gl > .word-glyph, .mushaf-page > .img-gl > .verse-end { transform:none; display:block; min-height:0; box-sizing:border-box; }
  .mushaf-page > .img-gl > .img-ref { left:0; top:0; width:0; height:0; visibility:hidden; }
  /* v1687 · the scan's word boxes draw nothing, so they never ease: the painter reads a blur or fade at its end at once (it waited
     for each 0.22–0.35 s ease to end), and an ease under the scan no longer makes WebKit draw the whole page again every frame
     (measured, 1024×1240: Blur on + 3 reveals drew 4 frames in 5.6 s). !important: overrides every tool's eased rule on .word-glyph. */
  .mushaf-page > .img-gl > .word-glyph, .mushaf-page > .img-gl > .verse-end { transition:none !important; }
  .mushaf-page > .img-tx > .word { transform:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .cp-wh { position:absolute; inset:0; pointer-events:none; }
  /* v1695 · a hide or reveal on a mapped scan cross-fades: the old word layers (zero.html imgFadeFrom) fade out over the new ones */
  .cp-fade { position:absolute; display:block; pointer-events:none; opacity:1; will-change:opacity; transition:opacity var(--q-d-220, .22s) var(--q-ease, ease); }
  @media (prefers-reduced-motion: reduce) { .cp-fade { transition-duration:var(--q-d-150, .15s); } }
  body.reduce-motion .cp-fade { transition-duration:var(--q-d-150, .15s); }
  .cp-wh > i { position:absolute; inset:0; display:block;
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
  /* a mapped scan offers the two styles it can draw: ink and marker (glow and gradient draw as ink there) */
  body.img-map #tj-panel .tj-seg span:is([data-hl=glow], [data-hl=grad]), body.img-map .vwt-st:is([data-vwt-style=glow], [data-vwt-style=grad]) { display:none; }
  /* dim word-level tool pills while the image edition is showing (v1681/v1683: not on a scan with a word map) */
  body.warsh-ed:not(.img-map) #rules .r-pill[data-mode], body.warsh-ed:not(.img-map) #tj-pill, body.warsh-ed:not(.img-map) #blur-pill, body.warsh-ed:not(.img-map) #luq-pill { opacity:.4; }   /* v1683: a scan with a word map runs them all */
  /* reader chrome buttons (top-left): ← = surah list, ⌂ = home page */
  #back, #to-app, #layout, #theme, #edition, #settings-wrench { position:fixed; top:calc(10px + env(safe-area-inset-top,0px)); z-index:6;
    display:grid; place-items:center; width:44px; height:44px; border-radius:12px; text-decoration:none; cursor:pointer;   /* v1044: ONE shape — 12px, not a circle */
    /* v1046: FLAT. The pebble gradient, the drop shadow and the
       inset 0 1px 0 rgba(255,255,255,.6) top highlight came from
       emerald-chrome.css — a DIFFERENT tournament's material, kept by accident
       when v1044 changed only the radius. The picked design's .pill is one
       border and one solid fill. No gradient, no shadow, no bevel, no blur. */
    background:var(--l-card,#fffdf7); border:1px solid rgba(60,50,20,.13); color:var(--l-ink2,#3d3829);
    font:600 20px/1 -apple-system, sans-serif; }
  body.theme-dark #back, body.theme-dark #to-app, body.theme-dark #layout,
  body.theme-dark #theme, body.theme-dark #edition, body.theme-dark #settings-wrench {
    background:var(--d-surface,#201913); border-color:var(--d-line2,#4a4234); color:var(--d-ink2,#d8cdb4); }
  #back { left:10px; }   /* 44px buttons, 50px pitch (H3: ≥44px tap targets) */
  #to-app { left:60px; font-size:19px; }
  #layout { left:110px; font-size:16px; font-weight:700; transition:opacity .15s; }
  #layout.inert { opacity:.38; }   /* landscape: the orientation toggle is a no-op */
  #settings-wrench { left:160px; }   /* quick Settings, next to the orientation toggle */
  #settings-wrench svg { display:block; }
  /* (v710: the tiny icon descriptors were removed by request; theme + edition
     get extra breathing room from the wrench/divider on their left) */
  #theme { left:222px; font-size:16px; }
  /* reading-mode toggle (page-flip ⇄ vertical scroll) — floating, bottom-left */
  #reader { position:fixed; bottom:calc(12px + env(safe-area-inset-bottom,0px)); left:12px; z-index:6;
    display:grid; place-items:center; width:44px; height:44px; border-radius:12px; cursor:pointer;
    background:rgba(var(--l-paper-rgb,255,253,246),.9); border:1px solid rgba(60,50,20,.15); color:var(--l-mut,#6b6353);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:600 18px/1 -apple-system, sans-serif; }
  #reader.on { background:#4f7d62; border-color:#4f7d62; color:#fff; }
  body.theme-dark #reader { background:var(--d-glass); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark #reader.on { background:#4f7d62; border-color:#4f7d62; color:#fff; }
  body.audio-blur #reader { display:none; }
  /* 110px is the slot #layout used to occupy: Layout folded into the View sheet
     and is hidden, so Edition takes its place. Its old 282px seat now sits under
     the #rules strip (which reserves only 290px for this cluster) — putting the
     book back there would collide with the pills. Cluster right edge stays 266px. */
  #edition { left:110px; }
  #edition svg { display:block; }
  /* single-page mode: shade the page of the icon that matches the current page's
     side in the physical spread (odd = right, even = left). See updateEditionSide. */
  #edition path.ed-fill { fill:currentColor; fill-opacity:.34; }
  /* iPhone: nest the secondary controls; keep only Back · ☰ · Mushaf up top, and
     drop the tool pills to their own row so nothing overlaps. */
  @media (max-width:600px) {
    /* v1045: the phone fork is GONE. It existed only to push the rail onto a
       second row below the floating left cluster; there is no cluster now, so
       the rail is one row at every width — identical membership, identical
       position, no muscle memory that is wrong on a different screen. */
    /* dropdown panels hang BELOW the pill row instead of burying their own
       trigger (audit): pill row 60+42px → panels at 108. html-prefix outranks
       the base and standalone panel rules later in the file. */
    html #tj-panel, html #blur-panel, html #tools-panel, html #learn-panel, html #dhikrpro-panel, html #audiogroup-panel {
      top:calc(108px + env(safe-area-inset-top,0px)); max-height:calc(100dvh - 124px - env(safe-area-inset-top,0px)); }
    #rules::-webkit-scrollbar { display:none; }
    #rules .r-pill { flex:none; }
  }
  /* v1266 · GLASS CAPSULE (the owner's pick, seg-pill 3): Apple Books' translucent
     page bubble in iOS-26 glass — the page ghosts through an 18px blur, one top
     highlight, the sūrah name in the Qurʾānic face, the number in the muted ink,
     and the caret its own round bead at the trailing end. Every value a token;
     the mini player still docks above it (bottom 66 / 74 in mini-player.js
     against the capsule's 14 + 48 / 20 + 48). */
  #pill { position:fixed; bottom:calc(14px + env(safe-area-inset-bottom,0px)); left:50%;
    transform:translateX(-50%); background:color-mix(in srgb, var(--al-glass) 72%, transparent);
    border:1px solid color-mix(in srgb, var(--al-line2) 60%, transparent); border-radius:var(--al-rsurf);
    -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
    box-shadow:var(--al-sh-2), inset 0 1px 0 rgba(255,255,255,.6);
    /* v1045: it measured 195x54 and WRAPPED onto two lines at 390px. nowrap +
       a viewport cap makes that impossible at any string length, and min-height
       brings the box into H3 compliance instead of relying on padding. */
    white-space:nowrap; max-width:calc(100vw - 24px); min-height:48px;
    display:flex; align-items:center; gap:calc(var(--al-u) * 2 + var(--al-u2)); padding:0 calc(var(--al-u) * 2) 0 calc(var(--al-u) * 5);
    font:600 var(--al-floor)/1 var(--f-num); color:var(--al-mut); font-variant-numeric:tabular-nums;
    cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  #pill .pill-sn { font-family:var(--f-quran); font-size:17px; line-height:1.6; font-weight:700; color:var(--al-ink);
    overflow:hidden; text-overflow:ellipsis; min-width:0; direction:rtl; unicode-bidi:isolate; }   /* line-height guards the harakat from clipping; audit D1-03: rtl, so a cut name keeps its start and loses its end */
  #pill .pill-car { width:32px; height:32px; margin:0; opacity:1; border-radius:var(--al-rpill); flex:none;
    display:inline-flex; align-items:center; justify-content:center; background:var(--al-card2); color:var(--al-mut); }
  #pill .pill-car svg { width:18px; height:18px; }
  body.theme-dark #pill { background:color-mix(in srgb, var(--al-glass) 72%, transparent); border-color:color-mix(in srgb, var(--al-line2) 60%, transparent); color:var(--al-mut);
    box-shadow:var(--al-sh-2), inset 0 1px 0 rgba(255,255,255,.09); }
  body.theme-dark #pill .pill-car { background:color-mix(in srgb, var(--al-ink) 14%, transparent); color:var(--al-ink2); }
  @media (min-width:744px) { #pill { bottom:calc(20px + env(safe-area-inset-bottom,0px)); } }
  /* during an audio drill the page number is part of "don't see it" — blur it too */
  body.audio-blur #pill { filter:blur(5px); opacity:.6; pointer-events:none; }
  /* v790 (owner): the mini player now sits ABOVE the page pill — the pill
     keeps its normal bottom-centre spot and the mini docks just above it
     (see #mini-player bottom in mini-player.js). No push-up needed; they no
     longer share a band, so the pill stays visible AND tappable (audit sev-4). */
  #pill { transition:bottom .25s ease; }
  /* Preview pills — bottom-right design-review entry points (temporary). Stack
     vertically so they never collide with the centred page pill. */
  #pv-pills { position:fixed; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    left:auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end; z-index:30; }
  .pv-pill { background:rgba(var(--l-paper-rgb,255,253,246),.9); border:1px solid rgba(60,50,20,.15);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:99px; padding:8px 14px;
    font:600 12px/1 -apple-system, sans-serif; color:var(--l-mut,#6b6353); cursor:pointer; }
  body.theme-dark .pv-pill { background:var(--d-glass); border-color:var(--d-line2); color:var(--d-ink2); }
  /* hide alongside the page pill whenever a dock/drill takes over the bottom */
  body.rb-on #pv-pills, body.audio-blur #pv-pills { display:none; }
  /* THE BASMALA — quran.com's own drawing (owner, 2026-10-12: "Do a", the comparison page's box A). img/bismillah.svg is
     https://quran.com/bismillah.svg byte for byte (sha256 cd373a60…; never edit it): drawBasmalas() puts the file itself, as
     an inline <svg class="bm-art">, into each basmala box. Its one path is filled with currentColor, so it takes the words'
     own ink and follows light, dark and every paper exactly as the āyāt do. It is NOT a CSS mask: a mask drew it ~1% narrower
     and ~2% taller in Safari on iPad page 2; the SVG keeps its own 176:36 shape (preserveAspectRatio "meet") whatever its
     box, so it is never stretched. It replaces the ﷽ ligature that was set in Amiri (fetched from Google Fonts). The box
     itself is untouched: its compiled seat, and its Tanzil text (font-size:0) for reading aloud and copying; sūrahs 1 and 9
     have no box. Page 2 is drawn like every other page.
     SIZE, as quran.com draws it (box A): 220 px wide on the screen, 148 px under 768 px, never scaled with the page —
     / --mu-page-scale undoes the page's own scale so it lands at those on-screen px — and never wider than 48cqi (48% of
     the page's width), so a smaller page (a narrow phone, a spread, the View sheet's copies) draws it smaller in step.
     PLACE: centred in the box. --bm-lift (set per page by seatBasmalas, % of the box's height) raises it only where
     the compiled box sits too near line 1 (53 v2/v4 pages whose header rows were compiled ~2% low); the banner
     is then seated above the drawing's real ink (growSurahBanners / seatBaked), so it never touches either. */
  /* left:0/right:0 force the box FULL-WIDTH, so justify-content:center puts the drawing on the page centre. */
  .mushaf-page .basmala{ font-size:0 !important; display:flex !important; align-items:center; justify-content:center; overflow:visible; left:0; right:0; }
  .mushaf-page .basmala::before{ content:none !important; }
  .mushaf-page .basmala > svg.bm-art{ display:block; flex:none; aspect-ratio:176 / 36; height:auto;
    width:min(calc(220px / var(--mu-page-scale, 1)), 48cqi);
    color:inherit;   /* the box's colour is the glyph layer's (mushaf.css: var(--mu-ink, var(--ms-ink-4))) */
    position:relative; top:calc(var(--bm-lift, 0) * -1%); overflow:visible; pointer-events:none; }
  @media (max-width:767px){ .mushaf-page .basmala > svg.bm-art{ width:min(calc(148px / var(--mu-page-scale, 1)), 48cqi); } }
  /* the words' ink under the āyah styles that set it on the words themselves (the rules at body[data-hl=…] below) */
  body[data-hl=ink] .mushaf-page .basmala > svg.bm-art{ color:var(--mu-ink, var(--l-ink)); }
  body[data-hl=grad] .mushaf-page .basmala > svg.bm-art{ color:var(--grad-ink, var(--mu-ink, var(--l-ink))); }
  /* Minimalist sura header: drop the framed box + double inset frame + ❋
     ornaments; just the centred name. Pure styling — the box keeps its position,
     so the SACRED line layout is untouched. !important beats the per-page
     fragment ([data-page][data-edition], 0,4,0) and mushaf.css's !important. */
  /* v1158 — ORNATE surah banner (owner picked 'B': taller framed cartouche
     with the calligraphic sura_names font, filigree band + floral rosettes,
     like quranwbw). The name glyph + banner growth are set per-mount in JS
     (setSurahBanners) from data-surah; geometry growth is centred on the
     reserved line so the SACRED line layout is untouched. */
  @font-face{font-family:'sura-names';src:url('../mithlayn-assets/fonts/mushaf/surah-names/sura_names.woff2') format('woff2');font-display:block}
  /* ORNATE surah cartouche — ornaments follow the site accent (--sb). The
     filigree bands and rosettes are painted as CSS masks so a single accent
     colour tints every gold element; the cartouche fill stays a warm parchment
     (a whisper of the accent) so the dark calligraphy always reads. */
  /* v1269 (owner: "the box looks too overdone — same design, minimalistic and
     flush; every sūrah's header and basmala in a set place, never touching the
     text"). The cartouche is now a slim hairline ribbon: no fill, no inner rims,
     one 1px line in the accent, the calligraphic name, a small star at each end.
     Its HEIGHT is fixed (SB_H below) so all 114 read alike; its seat is centred
     in the free band above the basmala (growSurahBanners / seatBaked). */
  /* THE SŪRAH BOX (owner, 2026-10-17: "C and a and b in settings"; the options page https://claude.ai/artifact/1bMjRMTa66Qvtw4MaJBXun).
     Replaces the v1269 hairline ribbon. Three looks, chosen in Settings › Muṣḥaf › Sūrah box (html[data-sbox], stamped before
     paint from 'mithlayn.mushaf.surahBox'):
       c (the default) — the King Fahd Complex's digital sūrah-header frame: character U+FC20 of its basmala font QCF_BSML
         (fonts/kfgqpc/QCF_BSML.ttf, v5.10, sha256 6a6f234e…, byte for byte; the Complex's terms: free for websites and apps),
         holding the word "sūrah" (U+FB8C) and the name from the same font, at 1/1.8 of the frame (quran.com-images' ratio).
       b — the Complex's lettering alone, no frame, at the page's word size.
       a — quran.com's name alone (sura_names, the font the app already had), larger: 10.68% of the box's width.
     The box itself is untouched: its seat (growSurahBanners / seatBaked) and size (SB_H) are the same in every look, and
     every look draws INSIDE it (fitted to its height and width), so nothing is ever closer to the text or the basmala than
     the box is. Each sūrah's lettering is centred by its INK, from the font files' own outlines (setSurahBanners: SBX / SBA,
     em offsets). The Complex's names sit at U+FB8D…FC1F in sūrah order (checked: all 114 drawn and matched to quran.com's
     names, closest wrong match 0.50 against ≥ 0.88). Until QCF_BSML has loaded (html.sbx-ok), c and b draw as a, so no
     fallback font can ever draw those code points as stray Arabic letters. Colour: the page's ink, day and night. */
  @font-face{font-family:'qcf-bsml';src:url('../fonts/kfgqpc/QCF_BSML.ttf') format('truetype');font-display:block}
  .mushaf-page .surah-banner{ container-type:size !important; background:none !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; padding:0 !important; overflow:visible !important; position:relative !important; display:block !important; }
  .mushaf-page .surah-banner::before, .mushaf-page .surah-banner::after, .mushaf-page .surah-banner .name{
    position:absolute !important; left:50% !important; top:50% !important; right:auto !important; width:auto !important; height:0 !important;
    margin:0 !important; padding:0 !important; line-height:0 !important; white-space:nowrap !important; letter-spacing:0 !important;
    direction:ltr !important; unicode-bidi:bidi-override !important; font-weight:normal !important; font-style:normal !important;
    color:var(--mu-ink,#1c1206) !important; background:none !important; -webkit-mask:none !important; mask:none !important;
    opacity:1 !important; pointer-events:none !important; }
  .mushaf-page .surah-banner::before, .mushaf-page .surah-banner::after{ content:none !important; font-family:'qcf-bsml' !important; }
  /* a — and c / b until their font is in */
  .mushaf-page .surah-banner .name{ font-family:'sura-names',serif !important; z-index:3 !important;
    font-size:min(10.682cqw, calc(100cqh / 0.92)) !important; transform:translate(calc(var(--sax, -1) * 1em), calc(var(--say, 0) * 1em)) !important; }
  /* c — the frame, then the word and the name inside it */
  html.sbx-ok[data-sbox=c] .mushaf-page .surah-banner{ --sbF:min(calc(100cqh / 0.9800), calc(100cqw / 7.9521)); }
  html.sbx-ok[data-sbox=c] .mushaf-page .surah-banner::before{ content:'\FC20' !important; font-size:var(--sbF) !important;
    transform:translate(-3.9902em, -0.0459em) !important; z-index:1 !important; }
  html.sbx-ok[data-sbox=c] .mushaf-page .surah-banner::after{ content:attr(data-sbq) !important; font-size:calc(var(--sbF) / 1.8) !important;
    transform:translate(calc(var(--sbx, -2) * 1em), calc(var(--sby, 0) * 1em)) !important; z-index:2 !important; }
  /* b — the word and the name, no frame */
  html.sbx-ok[data-sbox=b] .mushaf-page .surah-banner::after{ content:attr(data-sbq) !important; font-size:min(6.268cqw, calc(100cqh / 1.05)) !important;
    transform:translate(calc(var(--sbx, -2) * 1em), calc(var(--sby, 0) * 1em)) !important; z-index:2 !important; }
  html.sbx-ok[data-sbox=c] .mushaf-page .surah-banner .name, html.sbx-ok[data-sbox=b] .mushaf-page .surah-banner .name{ visibility:hidden !important; }
  /* Print-margin correction per edition. mushaf.css scales the page contents by
     --mu-page-scale (0.92) to add the print white-margin — a value tuned for the
     v1 compile. The v2 (1421 H) and v4 (1440 H) pages were normalised tighter
     (their text block sits ~3-4% closer to the edge), so 0.92 leaves almost no
     margin and the ink touches / clips the sides. Pull them in further so their
     margins match v1 (~6.5% each side). Uniform scale → no distortion, banners
     and glyphs stay aligned, SACRED line layout untouched. */
  /* ── v1068 · THE PAGE IS FLUSH — regression fix, owner-reported ──────────
     "Why is the Mushaf not flush anymore and has borders."
     MY BUG, from v1062. styles/mushaf.css:385 draws the page as a card:
         background:   var(--mu-paper, var(--ms-paper));
         border:       1px solid var(--mu-accent, var(--ms-gold-rim));
         border-radius: 4px;
         box-shadow:   0 1px 0 var(--ms-rim), 0 24px 64px -16px rgba(0,0,0,.45);
     Every one of those references a token that this file never defined and
     that mushaf-papers.css (never linked) never supplied — so all four
     declarations were INVALID AT COMPUTED-VALUE TIME and fell to their
     initial values: transparent background, border-style:none, no shadow.
     The page had no card BECAUSE the tokens were missing. Edge-to-edge
     (v770) was standing on that accident.
     v1062 defined the --ms-* family — chasing a "veil" that did not exist —
     which made all four declarations VALID and switched the card ON: cream
     paper #fffdf6 against the app's #faf6ec, a gold hairline, a 4px radius
     and a heavy drop shadow. That is the border and the inset the owner is
     seeing, and it has been live since v1062.
     The --ms-* block stays: ~24 other mushaf.css rules (chrome, pickers,
     rails) legitimately consume it. Only the four page-card properties are
     put back to what they computed to before. Paper themes still work — a
     real --mu-paper from a paper theme is a colour, not a token miss, and
     the rule below is overridden by the K2 per-edition blocks that set one.
     DO NOT "restore" these four by deleting this block: without a paper
     theme active they draw a card the owner has twice asked not to see. */
  .mushaf-page{ background:transparent; border:0; border-radius:0; box-shadow:none; }

  .mushaf-page[data-edition="v2"]{ --mu-page-scale:0.84; }
  .mushaf-page[data-edition="v4"]{ --mu-page-scale:0.80; }
  /* v1646 — edge to edge on a phone: --mu-gain is set by the reader's measure() (phoneGain), 1 everywhere else */
  @media (max-width:743px){
    body:not(.dual) .mushaf-page[data-edition="v1"]{ --mu-page-scale:calc(0.92 * var(--mu-gain, 1)); }
    body:not(.dual) .mushaf-page[data-edition="v2"]{ --mu-page-scale:calc(0.84 * var(--mu-gain, 1)); }
    body:not(.dual) .mushaf-page[data-edition="v4"]{ --mu-page-scale:calc(0.80 * var(--mu-gain, 1)); }
  }
  /* iOS-WebKit side-clip fix (v2/v4): mushaf.css gives .glyph-layer
     `contain: layout paint`, which clips glyph ink to the layer's box in its
     LOCAL (pre-transform) space. v2/v4 were compiled wider than v1, so their
     edge glyphs' ink overhangs that box and iOS clips it BEFORE the page-scale
     transform pulls it back inside — letters shave off at the sides (desktop
     WebKit is lenient and doesn't show it). Drop paint containment for these
     editions so the ink isn't clipped at the layer edge; the page's own
     `overflow:hidden` (with the scale's margin) still bounds any real bleed. */
  .mushaf-page[data-edition="v2"] .glyph-layer,
  .mushaf-page[data-edition="v4"] .glyph-layer{ contain:layout; }
  /* v1538 (audit #1): while a v4 page's dark face is missing (not downloaded, offline, a failed load) the light face is drawn
     on light paper, so its black base is readable until the dark face lands — never loose system-font letters */
  body.theme-dark .mushaf-page[data-edition="v4"].v4-dark-miss{ background:white; --mu-ink:black; border-radius:var(--r-icon); }
  /* v4 dark mode: qcf-v4 is a COLR/CPAL colour font whose base letters are baked
     BLACK (the Tajwid marks are baked colours). CSS `color` can't relight a
     colour-font glyph, and WebKit ignores `font-palette`/`override-colors`, so
     the black base is invisible on a transparent dark page. Instead we swap in a
     dark-mode font variant (qcf-v4-dark/r2/pN.woff2) whose DEFAULT palette has the
     black base entries (indices 0/14) recoloured to light — every other
     palette entry (the Tajwid colours, and entry 13: the āyah number, black on
     its pale medallion — audit Q2-06) is byte-for-byte identical. So in dark
     mode the page is transparent (like v1/v2), the base reads light, and the
     Tajwid colours are untouched. The font swap is wired in JS (per page +
     theme); this block just keeps the page transparent in dark. */
  /* blur the basmala + surah-name banner (they live in .chrome-layer, not the
     glyph layer) so the whole page is "heard, not seen" during the drill */
  body.audio-blur .mushaf-page .chrome-layer { filter:blur(var(--mu-blur-radius,14px)); transition:filter .22s ease; }
  /* ── tajwid review layer (rule walk) ──────────────────────────────
     Anti-sprawl architecture: RULES set a hue (one line each), STYLES
     consume it (one block each) — selector count grows R+S, never R×S.
     A word paints only while its rule's body switch is on; otherwise
     every style block no-ops through the transparent var() fallback.
     All blocks share one specificity level: no !important, ever. */
  /* v1266 · HAIRLINE RAIL (the owner's pick, seg-topbar 3): the rail stops
     being a floating cluster of glass squares and becomes the top of the
     shell — one full-width opaque strip on --al-surf, closed by one hairline,
     60px tall on the phone and 64 from 744, safe-area aware. Menu sits at the
     left edge and Search at the right; the per-page tools (Blur · Tajwīd ·
     Traps) are bare 44px buttons centred between them, and a 2px accent
     underline names the active one. The .r-gap spacer collapses (the two auto
     margins centre the tools instead) and the .r-hr hairline still parts the
     tools from Search (rail-menu.js). Everything about the strip is a token. */
  #rules { position:fixed; top:0; left:0; right:0; height:calc(60px + env(safe-area-inset-top,0px));
    display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:0;
    padding:env(safe-area-inset-top,0px) calc(var(--al-u) * 2) 0; box-sizing:border-box;
    background:var(--al-paper); border-bottom:1px solid var(--al-line2);   /* v1268 flush: the strip is the page's own ground, only the hairline draws it */
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    /* ONE horizontally-scrollable strip — never wraps. A wrapped 2nd row slid UP
       behind the browser toolbar on iPad (pills looked cut off). The box still
       shrinks to its content (so it stays right-aligned when everything fits);
       once the pills exceed max-width it scrolls left↔right instead of wrapping.
       The 290px reserve keeps the strip clear of the LEFT icon cluster. Layout and
       Reader were folded into the rail "View" pill (hidden in place by
       tool-hubs.js); Edition stayed — it opens the qiraat hub, which the View row
       does not — and moved into Layout's vacated 110px slot. Either way the
       cluster still ends at #theme (right edge ≈266px) — strip starts at ~280px
       (266 + 14). <600px keeps its own full-width override. */
    max-width:none; }
  #rules::-webkit-scrollbar { display:none; }
  #rules .r-pill { flex:none; }   /* never shrink pills — they scroll instead */
  /* the strip's buttons: bare, 44px tall, at least 48 wide, in the muted ink;
     the door and the search in the second ink; the active tool underlined */
  #rules .r-pill { position:relative; min-height:44px; height:44px; min-width:48px; padding:0 calc(var(--al-u) * 3); gap:calc(var(--al-u) + var(--al-u2));
    border:0; border-radius:var(--al-rctl); background:none; box-shadow:none; color:var(--al-mut);
    font:700 var(--al-floor)/1 var(--f-ui); letter-spacing:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  #rules .r-pill.r-icon { width:48px; padding:0; }
  #rules #hub-menu, #rules .r-pill.r-icon { color:var(--al-ink2); }
  #rules #hub-menu { margin-right:auto; }
  #rules .r-pill.on { color:var(--al-acc-txt); border:0; box-shadow:none; background:none; }
  #rules .r-pill.on::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:var(--al-rpill); background:var(--al-acc); }
  #rules .r-pill.r-icon.on { color:var(--al-acc-txt); }
  body.theme-dark #rules { border-bottom-color:var(--al-line); }
  body.theme-dark #rules .r-pill { background:none; border:0; color:var(--al-mut); }
  body.theme-dark #rules #hub-menu, body.theme-dark #rules .r-pill.r-icon { color:var(--al-ink2); }
  body.theme-dark #rules .r-pill.on, body.theme-dark #rules .r-pill.r-icon.on { color:var(--al-acc-txt); background:none; box-shadow:none; border:0; }
  @media (min-width:744px) { #rules { height:calc(64px + env(safe-area-inset-top,0px)); padding-left:calc(var(--al-u) * 4); padding-right:calc(var(--al-u) * 4); } }
  /* ── v1138 · the rail FITS on a phone ────────────────────────────────────
     Owner, with a screenshot: "on mobile they fit all on the screen because
     there's a little bit of space where it can all fit."
     Measured before touching anything, at 390/393/430/440 with a flow drill
     live: the strip needs 532px and the widest phone gives it 420 — 162px of
     overflow at 390, with Tajwīd, Luqma, the hairline and Search all past the
     right edge. It scrolls, so nothing was lost; it just could not be SEEN,
     which is the same thing to a thumb reaching for Tajwīd.
     The words go, the controls stay. font-size:0 collapses the bare text node
     inside each pill without touching a single builder — the icon and the
     badge get their size back explicitly, and the 44px tap floor is untouched
     because it was always a HEIGHT. #blur-pill is the one exemption: its label
     is the only one reporting a changing state ("Blur · Forward Flow"), and it
     is the pill the owner was looking at when he asked. */
  @media (max-width:479px){
    /* 8px margins and a 5px gap, not 10/8: giving Tajwīd its word back put the
       strip 2px over at 390, and the two px belong to the gutter rather than to
       a control. Measured after: 366px of pills in 374px. */
    #rules .r-pill { font-size:0; gap:0; padding:0 14px; }   /* v1266: 20px icon + 14px each side = the strip's 48px button */
    #rules .r-pill svg { width:20px; height:20px; }
    /* The badge stops being a word beside the icon and becomes a corner mark
       ON it. Measured with Tajwīd showing "10" — the state in the owner's
       screenshot — the badge widened that pill 44→73 and put the strip 24px
       over again; the first measurement missed it because headless had no
       rules switched on. Absolute costs zero width. It stays INSIDE the pill
       (not hung off a negative offset) because #rules is overflow-y:hidden and
       would shear anything above its top edge. Padding is NOT the lever here:
       these pills are 44px wide only because of it, and the tap floor is a
       square, not a height. */
    #rules .r-pill { position:relative; }
    #rules .r-pill .badge { position:absolute; top:2px; inset-inline-end:3px;
      margin:0; min-width:0; padding:1px 4px; font:600 9px/1 -apple-system, sans-serif; }
    #rules .r-pill .caret { font-size:9px; }
    /* v1139 (owner) — "make tajwid say tajwid not the tear drop". Two pills
       keep their words: Blur, because its text reports which flow is running,
       and Tajwīd, because a drop is not a word. The space comes back from the
       flex spacer (which only exists to push the right-hand group apart, and
       on a phone there is nothing to push) and from the flow label, which
       drops the noun: "Reverse" and "Forward" are the only two values it ever
       takes, and "Flow" is the same word in both. */
    #rules #blur-pill, #rules #tj-pill { font-size:var(--al-floor); gap:var(--al-u); padding:0 calc(var(--al-u) * 2); }   /* v1266: the two words that stay read at the floor, never under it */
    #rules #blur-pill .bp-pre { display:none; }   /* the icon already says it */
    #rules #blur-pill .bp-noun { display:none; }
  }
  /* v1045: #back lives IN the rail now, as the mockup draws it — one row, one
     shape, nothing floating separately. Its fixed positioning is cancelled. */
  #rules #back { position:static; top:auto; left:auto; width:44px; height:44px; }
  .r-pill { background:var(--l-card,#fffdf7); border:1px solid rgba(60,50,20,.13); border-radius:12px;
    min-height:44px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font:700 13.5px/1 "Manrope",-apple-system, sans-serif; letter-spacing:-.005em; color:var(--l-ink2,#3d3829);
    cursor:pointer; user-select:none; }   /* v1046: flat — no gradient, shadow, bevel or blur */
  body.theme-dark .r-pill { background:var(--d-surface,#201913); border-color:var(--d-line2,#4a4234); color:var(--d-ink2,#d8cdb4); }
  .r-pill.on { color:var(--l-ink,#1b1812); border-color:var(--l-gold,#caa64b); box-shadow:inset 0 0 0 1px var(--l-gold,#caa64b); }   /* v1044: one accent, a RING — not 26 saturated floods */
  body.theme-dark .r-pill.on { color:var(--d-ink,#ece3cf); border-color:var(--d-acc,#d4b573); box-shadow:inset 0 0 0 1px var(--d-acc,#d4b573); }
  .r-pill.parent { cursor:pointer; } .r-pill .caret { font-size:9px; opacity:.75; margin-inline-start:3px; }
  .r-pill .badge { display:inline-block; min-width:15px; text-align:center; margin-inline-start:5px;
    /* v1139 — white on --l-gold measured 2.32:1. The deep gold is the same
       accent one step down and carries white at AA. */
    background:var(--l-gold-deep,#8a7340); color:#fff; border-radius:99px; font:600 10px/1 -apple-system, sans-serif; padding:2px 5px; }
  .r-pill .badge[hidden] { display:none; }
  /* thin divider in the control strip (separates search from the rest) */
  .r-div { width:1px; align-self:stretch; min-height:24px; flex:none; margin:0 3px;
    background:rgba(60,50,20,.18); }
  /* search as a minimalistic glass icon (line-art magnifier on the glass pill) */
  .r-pill.r-icon { padding:0; width:44px; height:44px; display:inline-grid; place-items:center; color:var(--l-ink2,#3d3829); }
  .r-pill.r-icon svg { display:block; }
  .r-pill.r-icon.on { color:var(--l-gold-deep,#8a7340); }
  body.theme-dark .r-pill.r-icon.on { color:var(--d-acc,#d4b573); }
  /* Tajwid + Blur dropdown panels (share the look) */
  #tj-panel, #blur-panel, #tools-panel, #learn-panel, #dhikrpro-panel, #audiogroup-panel { position:fixed; top:calc(58px + env(safe-area-inset-top,0px)); right:10px; z-index:7;
    background:rgba(var(--l-paper-rgb,255,253,246),.98); border:1px solid rgba(60,50,20,.16); border-radius:14px; padding:8px;
    display:none; flex-direction:column; gap:2px; min-width:210px; max-height:78dvh; overflow-y:auto;
    box-shadow:0 14px 36px -14px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  #tj-panel.open, #blur-panel.open, #tools-panel.open, #learn-panel.open, #dhikrpro-panel.open, #audiogroup-panel.open { display:flex; }
  /* Installed / web-app mode: no browser top bar, so the OS status bar can sit
     where our controls are. On notch devices env(safe-area-inset-top) handles it;
     on the rest it's 0, so add a little extra clearance only in standalone. */
  @media all and (display-mode: standalone), all and (display-mode: fullscreen) {
    #back, #to-app, #layout, #theme, #edition, #settings-wrench { top: calc(16px + env(safe-area-inset-top,0px)); }   /* v1266: #rules is the strip now and carries the inset itself */
    #tj-panel, #blur-panel, #tools-panel, #learn-panel, #dhikrpro-panel, #audiogroup-panel { top: calc(56px + env(safe-area-inset-top,0px)); }
  }
  /* The reading-tool proxies inside the Tools dropdown are for phones only. */
  .tools-reading { display:none; }
  /* ── iPhone / small-screen adaptations (≤480px) ──────────────────────────────
     The top strip can't hold the four reading pills (Tajwid/Blur/Dhikr/Highlight)
     next to the nav cluster, so we fold them into the Tools dropdown (shown via
     .tools-reading) and hide their top-level pills. We also bump touch targets to
     ~44px, let the Mutashabihat tab bar wrap instead of overscroll, tuck the
     prayer mini under the toolbar, and — in Audio Test — let the mushaf render at
     full width and scroll vertically instead of being squished to fit. */
  @media (max-width: 480px) {
    .tools-reading { display:block; }
    /* the chip gets its own row BELOW the pills — never on top of them (audit) */
    /* NO padding shrink here: it dropped every rail pill to 39px and the search
       icon to 42px, both under the 44px minimum (rule H3). The base rule's
       min-height:44px + flex centring now holds the target by construction. */
    #tools-panel .gh-row, #hl-panel .gh-row, #audiogroup-panel .gh-row, #learn-panel .gh-row { min-height:44px; }
    .hl-chip { padding:12px 13px; }
  }
  .tj-hdr { font:700 9.5px/1 -apple-system, sans-serif; letter-spacing:.09em; text-transform:uppercase;
    color:var(--l-gold-txt,#a08a4e); padding:8px 8px 4px; }
  .tj-seg { display:flex; gap:2px; margin:0 8px 4px; background:rgba(60,50,20,.05); border-radius:9px; padding:2.5px; }
  .tj-seg span { flex:1; text-align:center; padding:6px 3px; border-radius:7px; cursor:pointer; user-select:none;
    font:600 10.5px/1 -apple-system, sans-serif; color:#8a8064; }
  .tj-seg span.on { color:var(--l-ink2,#2b2415); background:var(--l-card,#fff); box-shadow:0 1px 4px rgba(0,0,0,.1); }
  .gh-row { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px;
    font:600 12px/1 -apple-system, sans-serif; color:var(--l-mut,#6b6353); cursor:pointer; user-select:none; }
  .gh-row.on { background:var(--pc,#007FFF); color:#fff; }
  .gh-dot { width:9px; height:9px; border-radius:50%; background:var(--pc,#007FFF); flex:none; }
  .gh-row.on .gh-dot { background:var(--l-card,#fff); }
  .gh-cap { margin-inline-start:auto; font:500 10.5px/1.3 -apple-system, sans-serif; color:#7d7157; }
  .gh-row.on .gh-cap { color:rgba(255,255,255,.82); }
  .gh-sep { height:1px; background:rgba(60,50,20,.09); margin:5px 8px 3px; }
  .tj-clear { margin:5px 0 0; padding:9px 8px 3px; text-align:center; cursor:pointer; user-select:none;
    border-top:1px solid rgba(60,50,20,.08);
    font:700 9.5px/1 -apple-system, sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--l-soft2,#9a8c73); }
  .tj-clear.dim { opacity:.35; pointer-events:none; }
  /* ── Tajwid panel v745 layout: header + Rules⇄Letters tabs + chip rows ── */
  .tj-head { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 8px 10px; }
  .tj-title { font:700 14px/1 -apple-system, sans-serif; color:var(--l-ink3,#3d3829); }
  .tj-head .tj-clear { margin:0; padding:7px 11px; border:none; border-radius:8px;
    background:rgba(60,50,20,.06); letter-spacing:.05em; }
  .tj-tabs { display:flex; gap:0; margin:0 8px 8px; padding:3px; border-radius:11px; background:rgba(60,50,20,.07); }
  .tj-tabs button { flex:1; padding:8px 4px; border:none; border-radius:8px; background:none; cursor:pointer;
    font:600 12px/1 -apple-system, sans-serif; color:#8a8064; }
  .tj-tabs button.on { background:var(--l-card,#fff); color:var(--l-ink2,#2b2415); box-shadow:0 1px 4px rgba(30,25,14,.18); }
  .tj-pane { display:none; flex-direction:column; gap:2px; }
  .tj-pane.on { display:flex; }
  /* rule/mode rows as bordered chips inside .tj-cols grids (tajwid + blur
     panels; .gh-row elsewhere keeps its flat look) */
  .tj-cols .gh-row { border:1px solid rgba(60,50,20,.13); background:var(--l-card,#fff);
    border-radius:10px; padding:9px 10px; font-size:11.5px; }
  /* the chip #fff above outranks base .gh-row.on — restate the active fill */
  .tj-cols .gh-row.on { background:var(--pc,#007FFF); color:#fff; border-color:var(--pc,#007FFF); }
  .tj-cols .gh-row.wide { grid-column:1 / -1; }
  /* two-line chip: label over caption (blur modes) */
  #blur-panel { min-width:330px; max-width:min(92vw,380px); }
  #tj-probslot .gh-row { margin:0 8px 6px; border:1px solid rgba(194,59,59,.3); background:var(--l-card,#fff);
    border-radius:10px; padding:9px 10px; }
  /* letter highlighter — pick letters, highlight every word that contains one */
  .lh-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:0 8px 4px; }
  .lh-chip { font-family:var(--f-ar); font-size:17px; line-height:1; text-align:center;
    padding:6px 0; border:1px solid rgba(60,50,20,.18); border-radius:7px; background:var(--l-card,#fff); color:var(--l-ink3,#3d3829);
    cursor:pointer; user-select:none; }
  .lh-chip.on { background:rgba(124,91,20,.16); border-color:#7c5b14; color:#5a420e; }
  /* v1488: the Heavy letters switch above the heavy grid */
  .lh-heavy { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; margin:6px 8px 2px; padding:8px 12px; border:1px solid rgba(60,50,20,.18); border-radius:10px; background:var(--l-card,#fff); color:var(--l-ink3,#3d3829); font:inherit; text-align:left; cursor:pointer; }
  .lh-heavy b { font:700 13px/1.2 var(--f-ui, -apple-system, sans-serif); }
  .lh-heavy small { font:500 11px/1.2 var(--f-ui, -apple-system, sans-serif); color:var(--l-soft,#a89b80); }
  .lh-heavy::after { content:''; flex:none; width:38px; height:22px; border-radius:999px; background:rgba(60,50,20,.18); box-shadow:inset 18px 0 0 -2px #fff, inset 0 0 0 0 transparent; transition:background .2s, box-shadow .2s; }
  .lh-heavy.on { border-color:#7c5b14; }
  .lh-heavy.on::after { background:#7c5b14; box-shadow:inset -18px 0 0 -2px #fff; }
  body.theme-dark .lh-heavy { background:var(--d-surface,#2a251c); border-color:var(--d-line2,#4a4234); color:var(--d-ink2,#c9bfa8); }
  /* outline marker: full word width, vertically tight so the whole word is framed.
     QCF glyph INK overhangs its layout box (~4%, K1) and Arabic's FIRST letter
     sits on the RIGHT — so the frame extends past the box, right side most
     (v745, owner screenshot: the old right:0 sliced through initial letters). */
  /* v1588: a blur MODE switch lands at once (applyBlur adds .bl-snap for two frames); a single word's reveal keeps the fade */
  .mushaf-page .glyph-layer.bl-snap .word-glyph, .mushaf-page .glyph-layer.bl-snap .verse-end { transition:none; }
  .glyph-layer .word-glyph.lh-hit::after { content:''; position:absolute;
    left:-0.06em; right:-0.16em; top:0.2em; bottom:0.2em;
    border:0.085em solid var(--lh-c, rgba(124,91,20,.9)); border-radius:0.3em; pointer-events:none; }
  /* #home: the door Go to (ql-nav.js) watches; v1664: its old Sūrah / Juzʾ / Ḥizb lists and their styles are deleted */
  #home { position:fixed; inset:0; z-index:21; background:var(--l-bg,#faf6ec); display:none; flex-direction:column; direction:rtl; }
  #home.open { display:flex; }
  /* Native clear ✕ on every search field — bigger, always available while there's text */
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none;
    height:17px; width:17px; margin-left:7px; border-radius:50%; cursor:pointer;
    background:rgba(120,108,86,.85);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 0 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z"/></svg>') center/14px no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 0 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z"/></svg>') center/14px no-repeat; }
  body.theme-dark input[type="search"]::-webkit-search-cancel-button { background:rgba(190,178,150,.8); }

  .hc-no { flex:none; min-width:30px; text-align:center; font:400 13px -apple-system, sans-serif; color:#bcae90; }
  .hc-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; direction:ltr; text-align:right; }
  .hc-meta b { font:500 14.5px -apple-system, sans-serif; color:#2e2a20; }
  .hc-meta small { font:11px -apple-system, sans-serif; color:#aaa291; }
  .hc-ar { font:400 24px/1 var(--f-ar); color:var(--l-ink,#1b1812); direction:rtl; white-space:nowrap; }

  /* ── Entry hub (Quran | Arabic) — diptych, mushaf palette ───────────── */
  #hub{ position:fixed; inset:0; z-index:25; background:var(--l-bg,#faf6ec); display:none; flex-direction:column; }
  #hub.open{ display:flex; }
  .hub-half{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent; padding:24px; text-align:center; }
  .hub-half.q{ background:radial-gradient(120% 80% at 50% 32%, rgba(202,166,75,.17), rgba(202,166,75,.05)); }
  .hub-half.a{ background:radial-gradient(120% 80% at 50% 68%, rgba(91,124,168,.15), rgba(91,124,168,.04)); border-top:1px solid rgba(60,50,20,.14); }
  .hub-half:active{ filter:brightness(.985); }
  .hub-ar{ font-family:var(--f-ar); font-size:clamp(42px,12vw,62px); color:var(--l-ink,#1b1812); line-height:1.28; }
  .hub-en{ font:700 14px/1 -apple-system,sans-serif; letter-spacing:.22em; text-transform:uppercase; }
  .hub-half.q .hub-en{ color:var(--l-gold-deep,#8a7340); } .hub-half.a .hub-en{ color:var(--l-blue,#5b7ca8); }
  .hub-desc{ font:400 12.5px/1.5 -apple-system,sans-serif; color:#9a8f76; max-width:260px; }
  .hub-orn{ font-family:var(--f-ar); font-size:18px; opacity:.55; }
  .hub-half.q .hub-orn{ color:var(--l-gold,#caa64b); } .hub-half.a .hub-orn{ color:var(--l-blue,#5b7ca8); }
  /* Arabic-mode placeholder (blank page, mushaf style) */
  #arabic-stub{ position:fixed; inset:0; z-index:26; background:var(--l-bg,#faf6ec); display:none; flex-direction:column; }
  #arabic-stub.open{ display:flex; }
  .as-top{ display:flex; align-items:center; padding:calc(12px + env(safe-area-inset-top,0px)) 14px 8px; }
  .as-back{ width:40px; height:40px; flex:none; border:none; background:rgba(60,50,20,.06); border-radius:11px; color:#8a8475; font:400 22px/1 -apple-system,sans-serif; cursor:pointer; }
  .as-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
  .as-ar{ font-family:var(--f-quran); font-size:54px; color:var(--l-ink,#1b1812); line-height:1.2; }
  .as-en{ font:700 13px/1 -apple-system,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--l-blue,#5b7ca8); }
  .as-note{ font:400 13px/1.6 -apple-system,sans-serif; color:#9a8f76; max-width:280px; }

  /* ── Arabic learning course (book → chapter → steps) ─────────────────── */
  /* v1105 — converted. It shipped TWO accents on purpose: gold for the Qasas
     path and blue for the Madinah path, plus a green "done" and a red "hard".
     Four hues ranked what one accent and a weight change say better. Every
     colour below is one of these aliases; nothing under #ar-app names a hex. */
  #ar-app{ --ac-a:var(--l-gold,#caa64b); --ac-ai:var(--l-gold-deep,#8a7340);
    --ac-ink:var(--l-ink,#1b1812); --ac-ink2:var(--l-ink2,#2b2415); --ac-mut:var(--l-mut,#6b6353);
    --ac-soft:var(--l-soft,#a89b80); --ac-card:var(--l-paper,#fffdf6); --ac-card2:var(--l-paper2,#fffefa);
    --ac-line:rgba(60,50,20,.16); --ac-hair:rgba(60,50,20,.1); --ac-tint:rgba(202,166,75,.14);
    --ac-bg:var(--l-bg,#faf6ec); --ac-glass:rgba(var(--l-paper-rgb,255,253,246),.85);
    --ac-ok:#256145; --ac-no:#7a242c; }
  body.theme-dark #ar-app{ --ac-a:var(--d-acc,#d4b573); --ac-ai:var(--d-acc-txt,#d4b573);
    --ac-ink:var(--d-ink,#ded6c4); --ac-ink2:var(--d-ink2,#d8cdb4); --ac-mut:var(--d-ink3,#a59a80);
    --ac-soft:var(--d-soft,#a89a7e); --ac-card:var(--d-surface,#201913); --ac-card2:var(--d-panel,#241d15);
    --ac-line:var(--d-line2,#4a4234); --ac-hair:var(--d-line,rgba(214,196,158,.12)); --ac-tint:rgba(202,166,75,.18);
    --ac-bg:var(--d-bg,#14100a); --ac-glass:var(--d-glass,rgba(28,22,15,.9));
    --ac-ok:#8fd0a6; --ac-no:#e2a0a4; }
  #ar-app{ position:fixed; inset:0; z-index:27; background:var(--ac-bg); display:none; flex-direction:column;
    font:14px/1.5 'Manrope',-apple-system,sans-serif; color:var(--ac-ink2); }
  #ar-app.open{ display:flex; }
  .arc-head{ flex:none; display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;
    border-bottom:1px solid var(--ac-hair); background:var(--ac-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .arc-back{ width:44px; height:44px; flex:none; border:none; background:rgba(60,50,20,.06); border-radius:12px; color:var(--ac-mut); font:400 22px/1 'Manrope',-apple-system; cursor:pointer; }
  .arc-title{ flex:1; min-width:0; text-align:center; }
  .arc-title b{ display:block; font:700 14px/1.2 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-title small{ display:block; font:11px/1.2 'Manrope',-apple-system; color:var(--ac-soft); margin-top:2px; }
  .arc-title .arc-ar{ font-family:var(--f-quran); font-size:18px; color:var(--ac-ink); line-height:1.6; padding-top:2px; }
  .arc-spacer{ width:44px; flex:none; }
  .arc-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 16px calc(28px + env(safe-area-inset-bottom,0px)); }
  .arc-wrap{ max-width:560px; margin:0 auto; }

  /* book select */
  .arc-book{ display:block; width:100%; text-align:right; direction:rtl; background:var(--ac-card); border:1px solid var(--ac-line);
    border-radius:16px; padding:18px 18px 16px; margin-bottom:14px; cursor:pointer; position:relative; overflow:hidden; }
  .arc-book::before{ content:''; position:absolute; inset:6px; border:1px solid var(--ac-hair); border-radius:12px; pointer-events:none; }
  .arc-book .b-ar{ font-family:var(--f-ar); font-size:30px; color:var(--ac-ink); line-height:1.5; }
  .arc-book .b-en{ direction:ltr; text-align:left; font:600 12.5px/1.3 'Manrope',-apple-system; color:var(--ac-ai); letter-spacing:.04em; margin-top:6px; text-transform:uppercase; }
  .arc-book .b-sub{ direction:ltr; text-align:left; font:400 12px/1.3 'Manrope',-apple-system; color:var(--ac-mut); margin-top:3px; }
  .arc-book.soon{ opacity:.55; }
  .arc-badge{ position:absolute; top:12px; inset-inline-start:14px; direction:ltr; font:700 10px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 9px; border-radius:12px; background:rgba(60,50,20,.06); color:var(--ac-mut); }
  .arc-badge.go{ color:var(--ac-ai); box-shadow:inset 0 0 0 1px var(--ac-a); } .arc-badge.soon{ opacity:.7; }
  /* Arabic shelf — Refined Craft (v888): resume badge, gold done check, quiet
     64px progress bar under each active book */
  .arc-badge.fin{ background:var(--ac-tint); color:var(--ac-ai); }
  .b-prog{ display:block; width:64px; height:4px; border-radius:12px; background:rgba(60,50,20,.12); margin-top:9px; overflow:hidden; direction:ltr; }
  .b-prog i{ display:block; height:100%; border-radius:12px; background:var(--ac-a); }
  body.theme-dark .b-prog{ background:rgba(255,255,255,.14); }

  /* unit grid */
  .arc-units{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .arc-unit{ background:var(--ac-card); border:1px solid var(--ac-line); border-radius:16px; min-height:64px; padding:14px 13px 13px; cursor:pointer; position:relative; text-align:center; }
  .arc-unit .u-no{ font:700 11px/1 'Manrope',-apple-system; color:var(--ac-soft); }
  .arc-unit .u-ar{ font-family:var(--f-ar); font-size:22px; color:var(--ac-ink); margin:6px 0 2px; line-height:1.5; }
  .arc-unit .u-en{ font:600 11.5px/1.3 'Manrope',-apple-system; color:var(--ac-ai); }
  .arc-unit .u-bar{ height:5px; border-radius:12px; background:rgba(60,50,20,.1); margin-top:10px; overflow:hidden; }
  .arc-unit .u-fill{ height:100%; background:var(--ac-a); border-radius:12px; width:0; transition:width .3s; }
  .arc-unit.done{ border-color:var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); }
  .arc-unit .u-done{ position:absolute; top:8px; inset-inline-end:9px; color:var(--ac-ai); font-size:14px; display:none; }
  .arc-unit.done .u-done{ display:block; }

  /* generic tile grid (series / books), vocab list, loading */
  .arc-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  .arc-grid .arc-book, .arc-grid .arc-series{ margin-bottom:0; }
  .arc-loading{ text-align:center; color:var(--ac-soft); font:500 13px/1 'Manrope',-apple-system; padding:34px 0; }
  .arc-vlist{ display:grid; grid-template-columns:1fr; gap:10px; align-items:start; }
  .arc-vlist .arc-vcard{ margin-bottom:0; }

  /* series hub tiles (hub palette) */
  .arc-series{ display:block; width:100%; text-align:center; cursor:pointer; position:relative; overflow:hidden;
    border:1px solid var(--ac-line); border-radius:16px; padding:30px 20px 26px; min-height:190px; background:var(--ac-card); }
  .arc-series .hub-orn{ font-family:var(--f-ar); font-size:18px; opacity:.55; color:var(--ac-ai); }
  .arc-series .se-ar{ font-family:var(--f-ar); font-size:32px; color:var(--ac-ink); line-height:1.5; margin-top:6px; }
  .arc-series .se-en{ font:700 13px/1.3 'Manrope',-apple-system; letter-spacing:.14em; text-transform:uppercase; color:var(--ac-ai); margin-top:8px; }
  .arc-series .se-sub{ font:400 12px/1.45 'Manrope',-apple-system; color:var(--ac-mut); margin-top:6px; max-width:320px; margin-inline:auto; }

  /* Hard-word flag on vocab */
  .vh-flag{ display:none; flex:none; font-size:11px; }
  .arc-vcard.hard .vh-flag{ display:inline; }
  .arc-vcard.hard{ border-color:var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); }
  .vd-hard{ display:block; width:100%; margin-top:13px; min-height:44px; padding:0 12px; border:1px solid var(--ac-line);
    background:none; border-radius:12px; font:700 12px/1 'Manrope',-apple-system; color:var(--ac-mut); cursor:pointer; }
  .vd-hard.on{ border-color:var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); color:var(--ac-ai); }

  /* tappable dialogue words + per-word lex card (v898 tournament port):
     gold underline on the tapped word; card = gloss + honest recall note +
     a gold dashed Qur'an tie-in quoting a real ayah with the same form */
  .l-w{ cursor:pointer; border-radius:4px; padding:0 1px; -webkit-tap-highlight-color:transparent; }
  .l-w:active{ background:var(--ac-tint); }
  .l-w.sel{ color:var(--ac-ai); border-bottom:2px solid var(--ac-a); }
  .l-gloss{ direction:ltr; display:flex; flex-direction:column; gap:6px; margin-top:9px; padding:10px 13px;
    background:var(--ac-card2); border:1px solid var(--ac-line); border-radius:12px; }
  .lg-top{ display:flex; gap:12px; align-items:baseline; }
  .l-gloss .lg-ar{ font-family:var(--f-quran); font-size:21px; color:var(--ac-ink); direction:rtl; line-height:1.6; }
  .l-gloss .lg-en{ font:600 13.5px/1.45 'Manrope',-apple-system; color:var(--ac-ink2); }
  .lg-note{ font:600 10.5px/1.3 'Manrope',-apple-system; color:var(--ac-soft); }
  .lg-quran{ display:flex; flex-direction:column; gap:3px; border:1px solid var(--ac-a); border-radius:12px;
    padding:8px 11px; background:var(--ac-tint); }
  .lg-quran[hidden]{ display:none; }
  .lgq-ar{ font-family:var(--f-quran); font-size:19px; line-height:1.9; color:var(--ac-ink); direction:rtl; text-align:right; }
  .lgq-hit{ color:var(--ac-ai); border-bottom:2px solid var(--ac-a); }
  .lgq-ref{ font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-ai); }
  /* v898 — the drill session's honest mirror */
  .arc-mirror{ display:flex; justify-content:center; gap:18px; margin-top:12px; font:600 12.5px/1 'Manrope',-apple-system; color:var(--ac-mut); }
  .arc-mirror b{ font-weight:800; color:var(--ac-ink2); font-variant-numeric:tabular-nums; }
  .arc-mir-missed{ margin-top:14px; border-top:1px solid var(--ac-hair); padding-top:12px; }
  .amm-h{ font:800 10px/1 'Manrope',-apple-system; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-soft); margin-bottom:8px; }
  .amm-ws{ display:flex; flex-wrap:wrap; gap:7px; direction:rtl; justify-content:center; }
  .amm-w{ font-family:var(--f-quran); font-size:19px; line-height:1.5; color:var(--ac-ink);
    background:var(--ac-card2); border:1px solid var(--ac-line); border-radius:12px; min-height:44px; padding:0 12px; cursor:pointer; }
  .amm-w.on{ background:var(--ac-tint); border-color:var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); color:var(--ac-ai); }
  .amm-note{ font:600 10.5px/1.4 'Manrope',-apple-system; color:var(--ac-soft); margin-top:8px; }

  /* ── wide screens (iPad / desktop) — use the space ─────────────────── */
  @media (min-width:760px){
    .arc-body{ padding:26px 32px calc(34px + env(safe-area-inset-bottom,0px)); }
    .arc-wrap{ max-width:1000px; }
    .arc-grid{ grid-template-columns:1fr 1fr; gap:18px; }
    .arc-units{ grid-template-columns:1fr 1fr 1fr; gap:16px; }
    .arc-vlist{ grid-template-columns:1fr 1fr; gap:14px; }
    .arc-passage{ font-size:27px; }
    .arc-series{ min-height:230px; }
  }
  @media (min-width:1120px){
    .arc-wrap{ max-width:1140px; }
    .arc-units{ grid-template-columns:repeat(4,1fr); }
    .arc-grid{ grid-template-columns:repeat(3,1fr); }
    .arc-vlist{ grid-template-columns:1fr 1fr 1fr; }
  }

  /* chapter step rail */
  .arc-rail{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; margin-bottom:6px; -webkit-overflow-scrolling:touch; }
  .arc-stepchip{ flex:none; padding:10px 12px; min-height:34px; border-radius:99px; border:1px solid rgba(60,50,20,.14); background:var(--l-paper,#fffdf6);
    font:600 11.5px/1 -apple-system; color:#8a8475; cursor:pointer; white-space:nowrap; }
  .arc-stepchip.cur, .arc-stepchip.cur.ok{ background:var(--l-blue,#5b7ca8); border-color:var(--l-blue,#5b7ca8); color:#fff; }   /* .cur wins over .ok green (audit) */
  .arc-stepchip.ok{ color:#2d6a4f; border-color:rgba(45,106,79,.4); }
  .arc-stepchip.lock{ opacity:.4; }
  .arc-steptitle{ font:700 15px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); margin:6px 0 2px; display:flex; align-items:center; gap:8px; }
  .arc-steptitle .s-ar{ font-family:var(--f-quran); font-weight:400; color:var(--ac-ai); margin-inline-start:6px; line-height:1.6; flex:1; }
  .arc-reset{ flex:none; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--ac-line); background:none;
    font:600 11px/1 'Manrope',-apple-system; color:var(--ac-mut); cursor:pointer; }
  .arc-reset:hover{ background:rgba(60,50,20,.06); }
  .arc-stepsub{ font:400 12px/1.4 'Manrope',-apple-system; color:var(--ac-soft); margin-bottom:14px; }
  .arc-stepsub .gl-x, .gl-x{ font-style:normal; color:var(--ac-mut); font-weight:400; }
  /* plain-English glosses inside grammar/affix prose */
  .arc-card .gl-x{ color:var(--ac-mut); }
  /* affix kind tag + body */
  .af-kind{ display:inline-block; margin-inline-start:8px; padding:2px 8px; border-radius:12px; background:var(--ac-tint);
    font:600 10.5px/1.5 'Manrope',-apple-system; color:var(--ac-ai); vertical-align:middle; }
  .arc-affix p{ font:400 13px/1.65 'Manrope',-apple-system; color:var(--ac-ink2); margin:8px 0; }
  /* conversation sub-tabs */
  .arc-diatabs{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; }
  .arc-diatab{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 14px; border-radius:12px;
    border:1px solid var(--ac-line); background:var(--ac-card); cursor:pointer; min-height:44px; }
  .arc-diatab .dt-ar{ font-family:var(--f-quran); font-size:16px; color:var(--ac-mut); line-height:1.5; }
  .arc-diatab .dt-en{ font:600 11px/1.2 'Manrope',-apple-system; color:var(--ac-mut); white-space:nowrap; }
  .arc-diatab.on{ border-color:var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); }
  .arc-diatab.on .dt-ar, .arc-diatab.on .dt-en{ color:var(--ac-ink); }

  /* step content */
  .arc-recap{ background:linear-gradient(180deg,var(--ac-tint),var(--ac-tint)); border:1px solid var(--ac-line);
    border-radius:16px; padding:13px 15px; margin-bottom:14px; }
  .arc-recap .rc-h{ font:700 11px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-ai); margin-bottom:6px; }
  .arc-recap p{ font:400 13px/1.6 'Manrope',-apple-system; color:var(--ac-ink2); }
  .rc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .rc-chip{ font:400 12px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); background:var(--ac-card); border:1px solid rgba(60,50,20,.14); border-radius:12px; padding:5px 10px; }
  .rc-chip b{ font-family:var(--f-quran); font-weight:400; font-size:15px; color:var(--ac-ink); margin-inline-end:3px; }
  .arc-passage{ direction:rtl; font-family:var(--f-quran); font-size:24px; line-height:2.1; color:var(--ac-ink);
    background:var(--ac-card); border:1px solid rgba(60,50,20,.12); border-radius:16px; padding:18px 18px; }
  .arc-trans{ font:400 13px/1.7 'Manrope',-apple-system; color:var(--ac-mut); margin-top:12px; }
  .arc-vrow{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid rgba(60,50,20,.08); }
  .arc-vrow .v-ar{ font-family:var(--f-quran); font-size:24px; color:var(--ac-ink); direction:rtl; flex:none; min-width:96px; text-align:right; }
  .arc-vrow .v-mid{ flex:1; min-width:0; }
  .arc-vrow .v-tr{ font:600 12px/1.2 'Manrope',-apple-system; color:var(--ac-mut); font-style:italic; }
  .arc-vrow .v-en{ font:500 13.5px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); margin-top:2px; }
  .arc-flip{ flex:none; border:none; background:var(--ac-tint); color:var(--ac-ai); border-radius:12px; padding:6px 9px; font:600 11px/1 'Manrope',-apple-system; cursor:pointer; }
  .arc-vrow.hide .v-en, .arc-vrow.hide .v-tr{ visibility:hidden; }
  /* deep vocab cards */
  .arc-vcard{ background:var(--ac-card); border:1px solid rgba(60,50,20,.13); border-radius:16px; margin-bottom:10px; overflow:hidden; }
  .arc-vhead{ width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; background:none; border:none; cursor:pointer; text-align:right; }
  .vh-ar{ flex:1; font-family:var(--f-quran); font-size:25px; color:var(--ac-ink); direction:rtl; min-width:0; line-height:1.5; }
  .vh-pos{ flex:none; font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.06em; text-transform:uppercase; color:var(--ac-ai); background:var(--ac-tint); border-radius:12px; padding:5px 8px; }
  .vh-x{ flex:none; font:400 18px/1 'Manrope',-apple-system; color:var(--ac-soft); width:20px; text-align:center; }
  .arc-vdet{ display:none; padding:0 14px 14px; }
  .arc-vcard.open .arc-vdet{ display:block; }
  .vd-mean{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-top:4px; border-top:1px solid rgba(60,50,20,.08); }
  .vd-tr{ font:600 12.5px/1.3 'Manrope',-apple-system; font-style:italic; color:var(--ac-mut); }
  .vd-en{ font:600 14.5px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); }
  .vd-wbw{ margin-top:11px; border:1px solid var(--ac-line); border-radius:12px; overflow:hidden; }
  .vd-wbw-h{ font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-ai); background:var(--ac-tint); padding:7px 12px; }
  .vd-wbw-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-top:1px solid var(--ac-tint); }
  .vd-wbw-row:first-of-type{ border-top:none; }
  .wbw-ar{ font-family:var(--f-quran); font-size:22px; color:var(--ac-ink); direction:rtl; line-height:1.55; }
  .wbw-en{ font:500 13px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-dots{ letter-spacing:2px; color:var(--ac-ai); font-size:12px; }
  .vd-type{ font:400 12.5px/1.5 'Manrope',-apple-system; color:var(--ac-mut); margin-top:8px; }
  .vd-type b{ color:var(--ac-ai); }
  .vd-insight{ margin-top:11px; background:var(--ac-tint); border-inline-start:3px solid var(--ac-a); border-radius:12px; padding:9px 12px; }
  .vd-insight-h{ font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-ai); margin-bottom:5px; }
  .vd-insight p{ font:400 12.5px/1.65 'Manrope',-apple-system; color:var(--ac-ink2); }
  .vd-hook{ display:flex; gap:8px; margin-top:11px; background:var(--ac-tint); border:1px solid var(--ac-a); border-radius:12px; padding:10px 12px; }
  .vd-hook-i{ flex:none; }
  .vd-hook span:last-child{ font:400 12.5px/1.55 'Manrope',-apple-system; color:var(--ac-ink2); }
  .vd-ex{ margin-top:11px; background:rgba(60,50,20,.035); border:1px solid rgba(60,50,20,.1); border-radius:12px; padding:10px 12px; }
  .vd-ex-h{ font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-ai); margin-bottom:6px; }
  .vd-ex-ar{ direction:rtl; font-family:var(--f-quran); font-size:22px; color:var(--ac-ink); line-height:1.8; }
  .vd-ex-en{ font:400 12px/1.5 'Manrope',-apple-system; color:var(--ac-mut); margin-top:3px; }
  .vd-ctx{ margin-top:11px; background:var(--ac-tint); border:1px solid var(--ac-line); border-radius:12px; padding:10px 12px; }
  .vd-ctx-h{ font:700 9.5px/1 'Manrope',-apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-ai); margin-bottom:6px; }
  .vd-ctx-ar{ direction:rtl; font-family:var(--f-quran); font-size:21px; color:var(--ac-ink); line-height:1.7; }
  .vd-ctx-en{ font:400 12px/1.5 'Manrope',-apple-system; color:var(--ac-mut); margin-top:3px; }

  /* Chapter-0 banner on the book hub */
  .arc-ch0{ display:block; width:100%; text-align:right; direction:rtl; cursor:pointer; margin-bottom:16px; position:relative;
    background:var(--ac-card); border:1px solid var(--ac-line); box-shadow:inset 0 0 0 1px var(--ac-a); border-radius:16px; padding:16px 16px 14px; }
  .arc-ch0 .c0-tag{ position:absolute; top:12px; inset-inline-start:14px; direction:ltr; font:800 10px/1 'Manrope',-apple-system; letter-spacing:.07em; text-transform:uppercase; color:var(--ac-ai); }
  .arc-ch0.done .c0-tag{ color:var(--ac-ai); }
  .arc-ch0 .c0-ar{ font-family:var(--f-quran); font-size:26px; color:var(--ac-ink); line-height:1.5; }
  .arc-ch0 .c0-en{ direction:ltr; text-align:left; font:700 13px/1.3 'Manrope',-apple-system; color:var(--ac-mut); margin-top:6px; }
  .arc-ch0 .c0-sub{ direction:ltr; text-align:left; font:400 11.5px/1.3 'Manrope',-apple-system; color:var(--ac-mut); margin-top:3px; }

  /* Daily Review banner on the book-select screen */
  .arc-review{ display:block; width:100%; text-align:right; direction:rtl; cursor:pointer; margin-bottom:14px; position:relative;
    background:var(--ac-card); border:1px solid var(--ac-line); box-shadow:inset 0 0 0 1px var(--ac-a); border-radius:16px; padding:15px 16px 13px; }
  .arc-review .rv-tag{ position:absolute; top:12px; inset-inline-start:14px; direction:ltr; font:800 10px/1 'Manrope',-apple-system; letter-spacing:.07em; text-transform:uppercase; color:var(--ac-ai); }
  .arc-review .rv-ar{ font-family:var(--f-quran); font-size:24px; color:var(--ac-ink); line-height:1.5; }
  .arc-review .rv-en{ direction:ltr; text-align:left; font:700 12.5px/1.3 'Manrope',-apple-system; color:var(--ac-ai); margin-top:5px; }
  .arc-review .rv-sub{ direction:ltr; text-align:left; font:400 11.5px/1.3 'Manrope',-apple-system; color:var(--ac-mut); margin-top:3px; }

  /* foundations accordion */
  .arc-sec{ background:var(--ac-card); border:1px solid rgba(60,50,20,.12); border-radius:16px; margin-bottom:11px; overflow:hidden; }
  .arc-sec-h{ width:100%; display:flex; align-items:center; gap:11px; padding:14px 14px; background:none; border:none; cursor:pointer; text-align:left; }
  .arc-sec-h .sec-no{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--ac-tint); color:var(--ac-ai); font:700 13px/26px 'Manrope',-apple-system; text-align:center; }
  .arc-sec-h .sec-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .arc-sec-h .sec-t b{ font:700 14px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-sec-h .sec-t i{ font-family:var(--f-quran); font-style:normal; font-size:14px; color:var(--ac-soft); direction:rtl; line-height:1.6; }
  .arc-sec-h .sec-x{ flex:none; color:var(--ac-soft); transition:transform .2s; }
  .arc-sec.open .arc-sec-h .sec-x{ transform:rotate(180deg); }
  .arc-sec-b{ display:none; padding:0 15px 14px; }
  .arc-sec.open .arc-sec-b{ display:block; }
  .arc-sec-intro{ font:400 13px/1.7 'Manrope',-apple-system; color:var(--ac-ink2); padding:4px 0 10px; border-top:1px solid rgba(60,50,20,.08); }
  .arc-concept{ background:var(--ac-tint); border:1px solid rgba(60,50,20,.08); border-radius:12px; padding:12px 13px; margin-bottom:10px; }
  .arc-concept .cn-term{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
  .cn-ar{ font-family:var(--f-quran); font-size:20px; color:var(--ac-ink); line-height:1.55; }
  .cn-en{ font:700 13px/1.3 'Manrope',-apple-system; color:var(--ac-ai); }
  .cn-tr{ font:600 11.5px/1.3 'Manrope',-apple-system; font-style:italic; color:var(--ac-soft); }
  .arc-concept p{ font:400 12.5px/1.65 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-cex{ display:flex; gap:12px; align-items:baseline; padding:8px 0 0; margin-top:7px; border-top:1px solid rgba(60,50,20,.07); }
  .arc-cex .e-ar{ font-family:var(--f-quran); font-size:19px; color:var(--ac-ink); direction:rtl; flex:none; max-width:55%; line-height:1.6; }
  .arc-cex .e-r{ flex:1; min-width:0; }
  .arc-cex .e-en{ font:400 12px/1.45 'Manrope',-apple-system; color:var(--ac-mut); }
  .arc-cex .e-note{ font:400 11px/1.4 'Manrope',-apple-system; color:var(--ac-soft); font-style:italic; margin-top:2px; }
  .arc-diahead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:16px 0 4px; padding-bottom:6px; border-bottom:2px solid var(--ac-line); }
  .arc-diahead b{ font:700 13px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-diahead span{ font-family:var(--f-quran); font-size:17px; color:var(--ac-ai); direction:rtl; }
  .arc-gnote{ margin-top:10px; background:var(--ac-tint); border-inline-start:3px solid var(--ac-a); border-radius:12px; padding:9px 12px; font:400 12.5px/1.6 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-gnote b{ color:var(--ac-ai); }
  .arc-card p + p{ margin-top:9px; }
  .arc-dia{ direction:rtl; }
  .arc-line{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid rgba(60,50,20,.07); cursor:pointer; }
  .arc-line .l-sp{ font:700 11px/1 'Manrope',-apple-system; color:var(--ac-ai); direction:rtl; }
  .arc-line .l-ar{ font-family:var(--f-quran); font-size:22px; color:var(--ac-ink); line-height:1.7; }
  .arc-line .l-en{ direction:ltr; text-align:left; font:400 12.5px/1.5 'Manrope',-apple-system; color:var(--ac-mut); display:none; }
  .arc-line.show .l-en{ display:block; }
  .arc-card{ background:var(--ac-card); border:1px solid rgba(60,50,20,.12); border-radius:16px; padding:15px 16px; margin-bottom:13px; }
  .arc-card h4{ font:700 13.5px/1.3 'Manrope',-apple-system; color:var(--ac-ink2); margin-bottom:3px; }
  .arc-card h4 .h-ar{ font-family:var(--f-quran); font-weight:400; color:var(--ac-ai); margin-inline-end:6px; line-height:1.6; }
  .arc-card p{ font:400 13px/1.65 'Manrope',-apple-system; color:var(--ac-ink2); }
  .arc-ex{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:8px 0; border-top:1px solid rgba(60,50,20,.07); margin-top:8px; }
  .arc-ex .e-ar{ font-family:var(--f-quran); font-size:20px; color:var(--ac-ink); direction:rtl; line-height:1.6; }
  .arc-ex .e-en{ font:400 12px/1.4 'Manrope',-apple-system; color:var(--ac-mut); text-align:left; flex:none; max-width:50%; }

  /* drills / test (MCQ) */
  .arc-q{ background:var(--ac-card); border:1px solid rgba(60,50,20,.12); border-radius:16px; padding:16px 16px 14px; }
  .arc-prog{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font:600 11px/1 'Manrope',-apple-system; color:var(--ac-soft); }
  .arc-progbar{ flex:1; height:6px; border-radius:12px; background:rgba(60,50,20,.1); overflow:hidden; }
  .arc-progfill{ height:100%; background:var(--ac-a); border-radius:12px; transition:width .3s; }
  .arc-qprompt{ font:600 14px/1.5 'Manrope',-apple-system; color:var(--ac-ink2); margin-bottom:6px; }
  .arc-qar{ direction:rtl; font-family:var(--f-quran); font-size:30px; color:var(--ac-ink); text-align:center; margin:10px 0 16px; line-height:1.8; }
  .arc-choices{ display:flex; flex-direction:column; gap:9px; }
  .arc-choice{ width:100%; text-align:center; padding:13px 14px; border:1px solid rgba(60,50,20,.16); background:var(--ac-card);
    border-radius:12px; font:600 13.5px/1.35 'Manrope',-apple-system; color:var(--ac-ink2); cursor:pointer; }
  .arc-choice.ar{ font-family:var(--f-quran); font-size:24px; direction:rtl; line-height:1.55; }
  .arc-choice.correct{ border-color:var(--ac-ok); box-shadow:inset 0 0 0 1px var(--ac-ok); color:var(--ac-ok); }
  .arc-choice.wrong{ border-color:var(--ac-no); box-shadow:inset 0 0 0 1px var(--ac-no); color:var(--ac-no); }
  .arc-choice:disabled{ cursor:default; }
  .arc-next{ display:block; width:100%; margin-top:16px; min-height:44px; padding:14px; border:1px solid var(--ac-a); border-radius:12px;
    background:var(--ac-card); box-shadow:inset 0 0 0 1px var(--ac-a); color:var(--ac-ink);
    font:700 14px/1 'Manrope',-apple-system; cursor:pointer; }
  .arc-next.ghost{ background:rgba(60,50,20,.07); color:var(--ac-mut); }
  .arc-result{ text-align:center; padding:14px 8px; }
  .arc-result .r-score{ font:800 40px/1 'Manrope',-apple-system; color:var(--ac-ink); font-variant-numeric:tabular-nums; }
  .arc-result .r-msg{ font:500 14px/1.5 'Manrope',-apple-system; margin:10px 0 4px; }
  .arc-result .r-pass{ color:var(--ac-ok); } .arc-result .r-fail{ color:var(--ac-no); }
  .arc-foot{ display:flex; gap:10px; margin-top:18px; }
  .arc-foot button{ flex:1; padding:13px; border:none; border-radius:12px; font:700 13.5px/1 'Manrope',-apple-system; cursor:pointer; }
  .arc-foot .primary{ background:var(--ac-card); border:1px solid var(--ac-a); box-shadow:inset 0 0 0 1px var(--ac-a); color:var(--ac-ink); } .arc-foot .ghost{ background:rgba(60,50,20,.07); color:var(--ac-mut); }
  /* flashcards (v717 — the whole-lexicon deck before the Conversation) */
  .arc-fcard{ position:relative; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    border:1px solid rgba(60,50,20,.16); background:var(--ac-card); border-radius:16px; padding:26px 18px; margin:14px 0;
    cursor:pointer; box-shadow:0 2px 10px rgba(40,30,10,.06); user-select:none; }
  /* Word Drills — Refined Craft (v889): Amiri with breathing room for harakat,
     54px thumb targets on every drill control */
  .arc-fcard .fc-ar{ font:500 42px/1.9 var(--f-quran); color:var(--ac-ink); direction:rtl; text-align:center; }
  .arc-fcard .fc-en{ display:none; font:600 17px/1.5 'Manrope',-apple-system; color:var(--ac-ai); text-align:center; }
  .arc-fcard .fc-hint{ font:600 10.5px/1 'Manrope',-apple-system; letter-spacing:.06em; text-transform:uppercase; color:var(--ac-soft); }
  .arc-fcard.flip .fc-en{ display:block; }
  .arc-fcard.flip .fc-hint{ display:none; }
  .arc-fcard{ min-height:220px; }
  #ar-app .arc-wrap button.ghost, #ar-app .arc-wrap button.primary{ min-height:54px; }
  /* The Study Window (v890, tournament pick): one shared shell for the four
     study tools — teal ‹ Tools return, bold title with a quiet fact line */
  /* THE SHELL'S TOKENS, NAMED ONCE (rule A2 — no hex outside the token file).
     Every rule below reaches for one of these, so converting this surface added
     no new colour literals at all. */
  .study-hd, .study-back, .study-seg, .study-seg button, .stw-card, .stw-lbl, .stw-ayah,
  .stw-lt, .stw-pt, .stw-en, .stw-meta, .stw-ar, .stw-pn, .stw-pd, .stw-p, .stw-src, .stw-hl, .stw-dot, .stw-chev {
    --st-a:var(--l-gold,#caa64b); --st-ink:var(--l-ink,#1b1812); --st-ink2:var(--l-ink2,#2b2415);
    --st-mut:var(--l-mut,#6b6353); --st-card:var(--l-card,#fff); --st-line:rgba(60,50,20,.18); --st-hair:rgba(60,50,20,.13); }
  body.theme-dark .study-hd, body.theme-dark .study-back, body.theme-dark .study-seg, body.theme-dark .study-seg button,
  body.theme-dark .stw-card, body.theme-dark .stw-lbl, body.theme-dark .stw-ayah, body.theme-dark .stw-lt,
  body.theme-dark .stw-pt, body.theme-dark .stw-en, body.theme-dark .stw-meta, body.theme-dark .stw-ar,
  body.theme-dark .stw-pn, body.theme-dark .stw-pd, body.theme-dark .stw-p, body.theme-dark .stw-src,
  body.theme-dark .stw-hl, body.theme-dark .stw-dot, body.theme-dark .stw-chev {
    --st-a:var(--d-acc,#d4b573); --st-ink:var(--d-ink,#ded6c4); --st-ink2:var(--d-ink2,#d8cdb4);
    --st-mut:var(--d-ink3,#a59a80); --st-card:var(--d-panel,#241d15); --st-line:var(--d-line2,#4a4234); --st-hair:var(--d-line2,#4a4234); }
  /* v1104 — the Study Window converted. It shipped 40/34/28px controls, a
     999px segmented control that filled white with a shadow, 34px letter tiles
     and dashed rules. The chip also said "Tools", a hub that no longer exists. */
  .study-back{ flex:none; min-height:44px; font:700 13.5px/1 "Manrope",-apple-system,sans-serif;
    color:var(--st-ink2); background:var(--st-card);
    border:1px solid var(--st-line); border-radius:12px; padding:0 13px; cursor:pointer; margin-right:4px; }
  .study-fact{ display:block; font:600 10.5px/1.35 -apple-system, sans-serif; letter-spacing:.02em;
    color:var(--l-soft,#a89b80); text-transform:none; margin-top:3px; }
  /* v893 — Study Window full port: header grammar (back + Read/Drill segment
     top row, 21px title with sub-line below), the shared card language
     (region/rule cards, dashed point rows, letter tiles, gold-underlined
     ayah), and the drill card (tap-to-reveal, two 48px self-grades) */
  .study-hd{ flex-wrap:wrap; row-gap:9px; padding:14px 18px 12px; }
  .study-top{ display:flex; align-items:center; gap:8px; width:100%; }
  .study-top .dk-x{ margin-inline-start:0; }
  .study-seg{ display:flex; gap:6px; margin-left:auto; }
  .study-seg button{ min-height:44px; min-width:44px; border:1px solid var(--st-line); background:var(--st-card);
    font:700 13.5px/1 'Manrope',-apple-system,sans-serif; color:var(--st-mut); padding:0 14px; border-radius:12px; cursor:pointer; }
  .study-seg button.on{ background:var(--st-card); color:var(--st-ink);
    border-color:var(--st-a); box-shadow:inset 0 0 0 1px var(--st-a); }
  /* v1058: was 800 21px — a second window-title size, used by makharij, pdfs,
     quiz and tajweed. One type scale: .dk-ttl / .sh-hd .ttl are both 16px. */
  .study-hd .dk-ttl{ width:100%; font:800 16px/1.15 'Manrope',-apple-system; letter-spacing:-.01em; }
  .study-hd .study-fact{ font:500 11.5px/1.4 -apple-system,sans-serif; color:var(--st-mut); margin-top:3px; }
  body.theme-dark .study-seg button.on{ background:var(--st-card); color:var(--st-ink);
    border-color:var(--st-a); box-shadow:inset 0 0 0 1px var(--st-a); }
  .stw-lbl{ font:800 10.5px/1 'Manrope',-apple-system,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--st-mut); padding:16px 4px 8px; }
  .stw-card{ background:var(--st-card); border:1px solid var(--st-hair); border-radius:16px; padding:14px 16px; margin-bottom:10px; }
  .stw-ch{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; cursor:pointer; }
  .stw-en{ font:700 14.5px/1.2 'Manrope',-apple-system,sans-serif; color:var(--st-ink); margin:0; }
  .stw-meta{ font:500 11.5px/1.35 -apple-system,sans-serif; color:var(--st-mut); margin:2px 0 0; }
  .stw-grp{ display:flex; align-items:center; gap:10px; flex:none; }
  .stw-ar{ font-family:var(--f-quran); font-size:23px; color:var(--st-ink); line-height:1.6; white-space:nowrap; }
  .stw-chev{ color:var(--st-mut); opacity:.55; font-size:19px; font-weight:600; transition:transform .15s; }
  .stw-card.open > .stw-ch .stw-chev{ transform:rotate(90deg); }
  .stw-pts{ margin-top:10px; }
  .stw-pt{ display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 0; border-top:1px solid var(--st-hair); }
  .stw-dot{ width:6px; height:6px; border-radius:50%; background:var(--st-a); flex:none; }
  .stw-pn{ font:700 14.5px/1.2 'Manrope',-apple-system,sans-serif; margin:0; color:var(--st-ink); }
  .stw-pd{ font:500 11.5px/1.35 -apple-system,sans-serif; color:var(--st-mut); margin:2px 0 0; }
  .stw-lts{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
  .stw-lt{ width:44px; height:44px; border:1px solid var(--st-line); border-radius:12px; display:grid; place-items:center;
    font-family:var(--f-quran); font-size:21px; line-height:1.6; background:var(--st-card); cursor:pointer; color:var(--st-ink); padding:0; }
  .stw-strip{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; direction:rtl; }
  .stw-strip .stw-lt{ width:44px; height:44px; font-size:19px; border-radius:12px; cursor:default; }
  .stw-p{ font:500 13.5px/1.6 -apple-system,sans-serif; color:var(--st-ink2); margin:12px 0 0; }
  .stw-ayah{ direction:rtl; text-align:right; font-family:var(--f-quran); font-size:27px; line-height:1.9;
    background:var(--st-card); border:1px solid var(--st-hair); border-radius:16px; padding:12px 16px 9px; margin-top:12px; }
  .stw-hl{ color:var(--st-ink); border-bottom:2px solid var(--st-a); padding-bottom:1px; }
  .stw-src{ display:flex; justify-content:space-between; font:500 11.5px/1.4 -apple-system,sans-serif; color:var(--st-mut); margin-top:9px; }
  .stw-drill{ text-align:center; padding:24px 18px 18px; cursor:pointer; }
  .stw-q{ font:800 10.5px/1 'Manrope',-apple-system; letter-spacing:.14em; text-transform:uppercase; color:#8a7f66; margin:0; }
  .stw-big{ font-family:var(--f-quran); font-size:64px; line-height:1.6; margin:6px 0 2px; color:var(--l-ink,#1b1812); }
  .stw-big.word{ font-size:38px; line-height:1.9; }
  .stw-div{ border:0; border-top:1px dashed rgba(60,50,20,.18); margin:16px 24px; }
  .stw-aar{ font-family:var(--f-quran); font-size:29px; color:var(--l-ink,#1b1812); margin:0; line-height:1.6; }
  .stw-drill .stw-p{ max-width:290px; margin:8px auto 0; }
  .stw-acts{ display:flex; gap:10px; margin-top:16px; }
  .stw-btn{ flex:1; min-height:48px; border-radius:14px; font:800 14.5px/1 'Manrope',-apple-system; display:grid; place-items:center;
    border:1.5px solid rgba(60,50,20,.18); color:#3d3627; background:var(--l-card,#fffdf8); cursor:pointer; }
  .stw-pri{ background:#2bb6a6; border-color:#2bb6a6; color:#fff; box-shadow:0 8px 16px -8px rgba(43,182,166,.6); }
  .stw-quiet{ font:600 11.5px/1.5 -apple-system; color:#8a7f66; text-align:center; margin:8px 0 0; }
  body.theme-dark .stw-card{ background:var(--d-surface); border-color:var(--d-line2); }
  body.theme-dark .stw-en, body.theme-dark .stw-pn, body.theme-dark .stw-big, body.theme-dark .stw-aar{ color:var(--d-ink); }
  body.theme-dark .stw-ar{ color:var(--d-acc-txt,#d4b573); }
  body.theme-dark .stw-lt{ background:var(--d-bg); border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .stw-pt{ border-top-color:var(--d-line); }
  body.theme-dark .stw-p{ color:var(--d-ink2); }
  body.theme-dark .stw-ayah{ background:var(--d-bg); border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .stw-hl{ color:var(--d-acc-txt); border-bottom-color:var(--d-acc-txt); }
  body.theme-dark .stw-btn{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark .stw-pri{ background:var(--d-acc); border-color:var(--d-acc); color:var(--d-acc-ink); box-shadow:none; }
  .arc-fbtns{ display:flex; gap:10px; }
  .arc-fbtns button{ flex:1; padding:13px; border:none; border-radius:12px; font:700 13.5px/1 -apple-system; cursor:pointer; }
  .arc-fbtns .primary{ background:var(--l-blue,#5b7ca8); color:#fff; } .arc-fbtns .ghost{ background:rgba(60,50,20,.07); color:var(--l-mut,#6b6353); }
  .arc-fbtns .fc-hardb{ flex:0 0 auto; padding:13px 14px; } .arc-fbtns .fc-hardb.on{ background:rgba(178,58,58,.12); color:#a03030; }
  /* ── Arabic course dark skin (audit: whole course rendered bright cream in
     theme-dark). Cards/inputs to --d-surface, ink/soft tokens for text. */
  body.theme-dark #ar-app{ background:var(--d-bg,#14100a); color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .arc-book, body.theme-dark .arc-unit, body.theme-dark .arc-card,
  body.theme-dark .arc-q, body.theme-dark .arc-stepchip{ background:var(--d-surface,#201913); border-color:var(--d-line2,#3a3122); }
  body.theme-dark .arc-stepchip.cur, body.theme-dark .arc-stepchip.cur.ok{ background:var(--l-blue,#5b7ca8); border-color:var(--l-blue,#5b7ca8); color:#fff; }
  body.theme-dark .arc-book .b-ar, body.theme-dark .arc-unit .u-ar, body.theme-dark .arc-ex .e-ar,
  body.theme-dark .arc-steptitle, body.theme-dark .arc-card h4, body.theme-dark .arc-qprompt{ color:var(--d-ink,#ece3cf); }
  body.theme-dark .arc-book .b-sub, body.theme-dark .arc-unit .u-no, body.theme-dark .arc-stepsub,
  body.theme-dark .arc-ex .e-en, body.theme-dark .arc-prog{ color:var(--d-soft,#a89a7e); }
  body.theme-dark .arc-book .b-en, body.theme-dark .arc-unit .u-en{ color:var(--d-acc-txt,#c9b277); }
  body.theme-dark .arc-card p{ color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .arc-unit .u-bar, body.theme-dark .arc-progbar{ background:rgba(214,196,158,.14); }
  body.theme-dark .arc-ex{ border-top-color:var(--d-line,rgba(214,196,158,.14)); }
  body.theme-dark .arc-reset{ background:rgba(176,69,47,.12); border-color:rgba(224,138,116,.35); color:#e08a74; }
  body.theme-dark .arc-fcard{ background:var(--d-surface,#201913); border-color:var(--d-line2,#3a3122); box-shadow:none; }
  body.theme-dark .arc-fcard .fc-ar{ color:var(--d-ink,#ece3cf); }
  body.theme-dark .arc-fcard .fc-en{ color:#8fd0ae; }
  /* rules → paint. Each rule sets --on ONLY when its own switch is on, so a
     word carrying several rules shows the colour of an ACTIVE rule, never an
     inactive one. When >1 enabled rule lands on the same word, CSS source
     order below is the priority (last wins). Add a rule = ONE line. */
  body.on-iqlab           .word-glyph.tj-iqlab           { --on:#6C5CE7; --grad-ink:transparent; }
  body.on-izhar_halqi     .word-glyph.tj-izhar_halqi     { --on:#00A86B; --grad-ink:transparent; }
  body.on-idghaam_ghunnah .word-glyph.tj-idghaam_ghunnah { --on:#00BCD4; --grad-ink:transparent; }
  body.on-ikhfa           .word-glyph.tj-ikhfa           { --on:#007FFF; --grad-ink:transparent; }
  body.on-idghaam_shafawi .word-glyph.tj-idghaam_shafawi { --on:#9575CD; --grad-ink:transparent; }
  body.on-ikhfa_shafawi   .word-glyph.tj-ikhfa_shafawi   { --on:#00838F; --grad-ink:transparent; }
  body.on-ghunnah         .word-glyph.tj-ghunnah         { --on:#1565C0; --grad-ink:transparent; }
  body.on-madd_muttasil   .word-glyph.tj-madd_muttasil   { --on:#FF0000; --grad-ink:transparent; }
  body.on-madd_munfasil   .word-glyph.tj-madd_munfasil   { --on:#FF7F00; --grad-ink:transparent; }
  body.on-madd_6          .word-glyph.tj-madd_6          { --on:#C2185B; --grad-ink:transparent; }
  body.on-madd_arid       .word-glyph.tj-madd_arid       { --on:#B8651B; --grad-ink:transparent; }
  body.on-madd_lin        .word-glyph.tj-madd_lin        { --on:#E0A43A; --grad-ink:transparent; }
  body.on-madd_small      .word-glyph.tj-madd_small      { --on:#CE9E00; --grad-ink:transparent; }
  body.on-idghaam_no_ghunnah .word-glyph.tj-idghaam_no_ghunnah { --on:#8C8C8C; --grad-ink:transparent; }
  body.on-silent          .word-glyph.tj-silent          { --on:#A5A5A5; --grad-ink:transparent; }
  body.on-hamzat_wasl     .word-glyph.tj-hamzat_wasl     { --on:#78909C; --grad-ink:transparent; }
  body.on-qalqala         .word-glyph.tj-qalqala         { --on:#BF00FF; --grad-ink:transparent; }
  /* Ra rules are OUTLINES — a ring around the word, independent of the
     highlight-style control (no --on ink). Colours overridable from
     Settings → More → Tajwid colours (#tj-hue-overrides wins, later in head).
     v710: `outline` with a NEGATIVE offset instead of box-shadow — the QCF
     word box is wider than the ink, so a box-edge ring "spilled out"; -3px
     pulls the ring in tight against the glyph. */
  /* v712 tajwid-menu declutter: WIDE panel, rows flow in two columns —
     everything visible at once, half the scroll. */
  #tj-panel { min-width:470px; max-width:min(92vw, 540px); }
  .tj-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 8px 4px; }
  .tj-cols .gh-row { min-width:0; }
  @media (max-width:560px) { #tj-panel { min-width:0; width:calc(100vw - 20px); } .tj-cols { grid-template-columns:1fr; } }
  /* Tajwid panel — Refined Legend (v875, tournament pick): the colour swatch IS
     the rule's sample glyph, two-line labels carry the meaning, state is a
     switch, off rules grey out instead of disappearing, presets are one tap. */
  #tj-panel .tj-cols .gh-dot { display:none; }
  #tj-panel .tj-cols .gh-row { gap:11px; padding:7px 10px; min-height:54px; }
  #tj-panel .tj-g { width:38px; height:38px; border-radius:calc(var(--al-rctl) / 2); flex:none; display:flex; align-items:center; justify-content:center;
    font-family:var(--f-quran); font-weight:700; font-size:19px; line-height:1;
    color:var(--pc,#007FFF); background:color-mix(in srgb, var(--pc,#007FFF) 12%, transparent); transition:filter .18s, opacity .18s; }
  #tj-panel .tj-tg::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(30,24,8,.3); transition:left .18s; }
  /* on = white card with a coloured ring + live switch (no more full-colour fill) */
  #tj-panel .tj-cols .gh-row.on { background:var(--l-card,#fff); color:inherit;
    border-color:color-mix(in srgb, var(--pc,#007FFF) 50%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc,#007FFF) 35%, transparent); }
  .tj-pre { display:flex; gap:6px; flex-wrap:wrap; margin:0 8px 8px; }
  .tj-pre span { font:700 11.5px/1 -apple-system, sans-serif; color:var(--l-ink3,#5c543f); padding:8px 12px;
    border-radius:999px; border:1px solid rgba(60,50,20,.16); background:var(--l-card,#fff); cursor:pointer; user-select:none; }
  .tj-pre span:active { background:rgba(60,50,20,.08); }
  body.theme-dark #tj-panel .tj-cols .gh-row.on { background:var(--d-surface,#2a251c); }
  body.theme-dark .tj-pre span { background:var(--d-surface,#2a251c); border-color:var(--d-line2,#4a4234); color:var(--d-ink2,#c9bfa8); }
  /* Blur panel — Refined Craft (v875, tournament pick): every mode card carries
     a specimen strip of word-bars showing exactly which words it hides; the
     current state reads as one sentence under the header. */
  #blur-panel { min-width:470px; max-width:min(92vw, 540px); }
  @media (max-width:560px) { #blur-panel { min-width:0; width:calc(100vw - 20px); } }
  #blur-panel .tj-cols .gh-dot { display:none; }
  /* v1039 — the tall two-line chip (column flex, absolute dot, "ON" pill badge)
     is GONE. A mode is one row now. What survives is the specimen strip, which
     earns its place: for a spatial mode ("page top + bottom", "after last waqf")
     five little bars showing exactly which words go fuzzy say more than the
     caption can. It shrinks from a full-width band to a 46px trailing figure. */
  .bm-spec { display:flex; direction:rtl; gap:3px; width:46px; }
  .bm-spec u, .bm-spec s { display:block; height:5px; flex:1; border-radius:3px; background:var(--l-ink3,#4a4433); opacity:.35; text-decoration:none; }
  .bm-spec :nth-child(2n) { flex:1.6; }
  .bm-spec s { background:var(--pc,#888); filter:blur(1.4px); opacity:.85; }
  .bm-state { margin:0 8px 6px; padding:9px 11px; border-radius:12px; font:600 11px/1.5 -apple-system, sans-serif;
    background:rgba(60,50,20,.05); border:1px solid rgba(60,50,20,.1); color:var(--l-ink3,#6a6150); }
  .bm-state.on { background:rgba(43,182,166,.08); border-color:rgba(43,182,166,.28); color:#186c60; }
  .bm-state b { font-weight:800; }
  /* invert row keeps a horizontal switch */
  #blur-panel .gh-row.wide { min-height:46px; }
  #blur-panel .gh-row.wide .tj-tg::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(30,24,8,.3); transition:left .18s; }
  #blur-panel .tj-cols .gh-row.wide.on { background:var(--l-card,#fff); color:inherit; border-color:rgba(176,106,42,.5); }
  #blur-panel .tj-cols .gh-row.wide.on .gh-dot { background:var(--pc,#b06a2a); }
  /* Hold popup — Refined Hold & Panel (v877, tournament pick): real header,
     Translation/Tafsir as an "understand" tile pair, 46px drill rows */
  /* v1248 — the hold menu in Arm's Length: a stage of five things (the āyah, Play, Mark, Understand,
     Drill), four pages behind it; one pane on the phone, two side by side from 744px. Nothing under 15px. */
  /* v1266 — RISE (the owner's sheet pick, seg-sheet 1) on the hold menu: full-bleed
     to both edges, a grabber, the page dimmed behind it by the sheet's own spread
     shadow (the dim is paint only — the page stays reachable, as before). From
     744 the two-pane menu keeps its centred 880px geometry (AL.5: the page opens
     BESIDE the stage), with the modal lift instead of the scrim and no grabber. */
  #ayah-pop { position:fixed; z-index:62; display:none; flex-direction:column; left:50%; transform:translateX(-50%); bottom:0;
    width:100vw; max-height:min(90dvh, 780px); background:var(--al-surf); color:var(--al-ink); border:0;
    border-radius:var(--al-rsurf) var(--al-rsurf) 0 0; box-shadow:0 0 0 100vh color-mix(in srgb, var(--al-ink) 26%, transparent);
    padding:calc(var(--al-u) * 3) 0 env(safe-area-inset-bottom,0px); overflow:hidden; }
  #ayah-pop::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); }
  #ayah-pop.show, #ayah-pop.leaving { display:flex; }   /* v1620: it rises on the spring (rise()); v1621: it drops and fades (drop()), taking no taps */
  #ayah-pop.leaving { pointer-events:none; }
  @media (prefers-reduced-motion:reduce) { #ayah-pop.show { animation:none; } }
  body.theme-dark #ayah-pop { background:var(--al-surf); color:var(--al-ink); box-shadow:0 0 0 100vh rgba(0,0,0,.58); }
  #ayah-pop .ayp-word { display:none; }
  /* v1262 — the generic .al-* component rules (Sheet, Row, Verse, Head …) live in styles/al.css stratum 6; only the #ayah-pop-scoped tiers stay here */
  /* v1258 — the āyah a tool jumped you to, lit until you touch the page.
     v1263 — E7: the wash is an .al-lit overlay in the page's chrome layer
     (styles/al.css), positioned by window.__alLit from the compiled glyph
     boxes; the .word-glyph.jump-lit rule that painted a word box is gone. */
  #ayah-pop .ayp-ref { font:700 var(--al-act)/var(--lh-ui) var(--f-ui); color:inherit; letter-spacing:0; text-align:left; padding:0; border:0; }
  #ayah-pop .ayp-sub { font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); }
  /* the rows restate the layer's CARD (v1266, seg-row 3) at this id's weight: the card fill, the hairline ring plus the resting lift, 12px vertical padding; the lead the filled card with the deeper lift */
  #ayah-pop .al-row { display:flex; align-items:center; gap:calc(var(--al-u) * 3); width:100%; min-height:var(--al-row); padding:calc(var(--al-u) * 3) calc(var(--al-u) * 3) calc(var(--al-u) * 3) var(--al-gut);
    border:0; border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 1px var(--al-line), var(--al-sh-1); color:inherit; cursor:pointer; text-align:left; font:inherit; box-sizing:border-box; }
  #ayah-pop .al-row svg.ic { flex:none; width:24px; height:24px; margin:0; color:var(--al-ink2); }
  #ayah-pop .al-row.lead { background:var(--al-acc); color:var(--al-acc-ink); box-shadow:var(--al-sh-2); }
  #ayah-pop .al-row.lead svg.ic { color:inherit; }
  #ayah-pop .al-row.lead .al-m, #ayah-pop .al-row.lead .al-tail { color:inherit; opacity:.85; }
  #ayah-pop .al-row.cur { box-shadow:0 0 0 2px var(--al-acc), var(--al-sh-1); }
  /* the menu builds its tail as the bare chevron (no .ch wrapper), so the Card's disc sits on the tail itself; a Go's disc wears the accent wash */
  #ayah-pop .al-row .al-tail { width:28px; height:28px; justify-content:center; border-radius:var(--al-rpill); background:var(--al-card2); color:var(--al-mut); }
  #ayah-pop .al-row.al-go .al-tail { background:var(--al-acc-soft); color:var(--al-acc-txt); }
  #ayah-pop .al-row.lead .al-tail { background:none; color:inherit; opacity:1; }   /* the filled row: a plain chevron, no disc */
  body.theme-dark #ayah-pop .al-row:not(.lead):not(.cur) { box-shadow:0 0 0 1px var(--al-line2); }
  #ayah-pop .al-row:active { filter:brightness(.96); }
  @media (min-width:744px) { #ayah-pop[data-pane="stage"] { width:min(92vw, 480px); } #ayah-pop[data-pane="stage"] .al-panes { grid-template-columns:minmax(0, 1fr); } }   /* front only: one column */
  @media (min-width:744px) { #ayah-pop:is(.show, .leaving) { box-shadow:var(--al-sh-modal), 0 0 0 100vmax color-mix(in srgb, var(--al-ink) 22%, transparent); } body.theme-dark #ayah-pop:is(.show, .leaving) { box-shadow:var(--al-sh-modal), 0 0 0 100vmax rgba(0,0,0,.5); } }   /* Lift: the page dims behind on a tablet too */
  @media (min-width:744px) { #ayah-pop[data-pane="stage"] .al-pane.al-stage { border-right:0; } }
  @media (min-width:744px) {
    #ayah-pop { bottom:24px; width:min(92vw,880px); max-height:calc(100dvh - 48px); border-radius:var(--al-rsurf); box-shadow:var(--al-sh-modal); padding-top:0; padding-bottom:0; }
    #ayah-pop::before { display:none; }
    body.theme-dark #ayah-pop { box-shadow:var(--al-sh-modal); }
  }
  body.theme-dark .bm-state { background:rgba(255,255,255,.05); border-color:var(--d-line2,#4a4234); color:var(--d-ink2,#c9bfa8); }
  body.theme-dark .bm-state.on { background:rgba(43,182,166,.1); border-color:rgba(43,182,166,.3); color:#5fd0bf; }
  body.theme-dark #blur-panel .tj-cols .gh-row[data-mode].on,
  body.theme-dark #blur-panel .tj-cols .gh-row.wide.on { background:var(--d-surface,#2a251c); }
  body.theme-dark .bm-spec u, body.theme-dark .bm-spec s { background:var(--d-ink3,#a59a80); }
  body.theme-dark .bm-spec s { background:var(--pc,#888); }

  /* ══ THE TRANSPORT (v1110) ═══════════════════════════════════════════════
     ONE play control, defined once, used by the Player and by the mini player.
     Three surfaces used to carry three different ones: a 58px gold-ringed
     circle with a filled triangle, a 24px filled triangle in a 40px square,
     and a third in the page-audio bar — different sizes, different glyph
     weights, and two of the five qplayer controls were the text characters
     '<' and '>' sitting next to real SVG.

     The play button is a genuine circle (§8 "instruments"), 60px, wearing the
     accent as a RING and never as a fill. The four skips are 44px at 12px with
     a caption under each, so what a skip does is written rather than guessed.
     Play and pause are drawn at the same optical weight — a filled triangle
     next to a hairline pause is the single thing that made these read wrong. */
  .pl-tp { display:flex; align-items:flex-start; justify-content:center; gap:8px; }
  .pl-sk { flex:none; width:44px; min-height:44px; padding:4px 0 0; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border:1px solid rgba(60,50,20,.16); border-radius:12px; background:none;
    color:var(--l-ink2,#2b2415); cursor:pointer; }
  .pl-sk .lb { font:600 10.5px/1 "Manrope",-apple-system,sans-serif; color:var(--l-mut,#6b6353);
    letter-spacing:.02em; }
  .pl-sk:disabled { opacity:.35; cursor:default; }
  .pl-sk:active { background:rgba(60,50,20,.07); }
  body.theme-dark .pl-sk { border-color:var(--d-line2,#4a4234); color:var(--d-ink,#ded6c4); }
  body.theme-dark .pl-sk .lb { color:var(--d-ink3,#a59a80); }

  .pl-play { flex:none; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
    border:1px solid var(--l-gold,#caa64b); box-shadow:inset 0 0 0 1px var(--l-gold,#caa64b);
    background:none; color:var(--l-ink,#1b1812); cursor:pointer; margin:0 4px; }
  .pl-play:active { background:rgba(202,166,75,.12); }
  body.theme-dark .pl-play { border-color:var(--d-acc,#2bb6a6); box-shadow:inset 0 0 0 1px var(--d-acc,#2bb6a6);
    color:var(--d-ink,#ece3cf); }
  /* the triangle's mass sits left of its bounding box; nudge it so the control
     reads centred, which is why an untouched play glyph always looks off */
  .pl-play svg { display:block; }
  .pl-play[data-st="play"] svg { transform:translateX(1.5px); }

  /* ── v1143 · .pl-tp.hero — the Now Playing size variant ──────────────────
     ONE new variant so there is still exactly one play glyph in the app.
     Three bare buttons: 68/74/68 hit boxes, 30/40px glyphs, 22px gaps → a
     232px row. NO RING, NO PLINTH behind play. Apple Music's Now Playing
     transport is three unadorned glyphs, and the house "accent as a ring,
     never a fill" rule is deliberately SUSPENDED for this one row — a gold
     ring here is the second-clearest non-Apple tell after text labels. The
     rule still governs every other transport in the app, including the
     captioned five-up that survives unchanged in the Mark Āyāt view. */
  .pl-tp.hero { align-items:center; gap:22px; }
  .pl-tp.hero .pl-sk { width:68px; height:68px; min-height:68px; padding:0;
    border:0; border-radius:50%; background:none; opacity:.82;
    transition:transform .09s, opacity .09s; }
  .pl-tp.hero .pl-sk .lb { display:none; }   /* no text below the qārī line */
  .pl-tp.hero .pl-sk:active { transform:scale(.94); opacity:.55; background:none; }
  .pl-tp.hero .pl-play { width:74px; height:74px; margin:0; border:0;
    box-shadow:none; background:none; transition:transform .09s, opacity .09s; }
  .pl-tp.hero .pl-play:active { transform:scale(.94); opacity:.55; background:none; }
  body.theme-dark .pl-tp.hero .pl-sk { border:0; }
  body.theme-dark .pl-tp.hero .pl-play { border:0; box-shadow:none; }
  @media (min-width:744px){
    .pl-tp.hero { gap:26px; }
    .pl-tp.hero .pl-sk { width:76px; height:76px; min-height:76px; }
    .pl-tp.hero .pl-play { width:82px; height:82px; }
  }

  /* ══ THE MENU'S FOUR SQUARES (v1108 · relaid v1111) ══════════════════════
     The top level of the Menu is four square tiles, not a list. Same data as a
     row — icon, name, count — and the same 16px surface and hairline every
     other surface uses. Below the grid the sheet goes back to .li rows.

     v1111 measured the v1108 grid and it was mostly nothing. From 744 up, the
     sheet's 520px went to two 238px squares per row, each holding a 24px icon
     and one word: 3.2% of the tile was ink, and the grid alone cost 502px of
     sheet height. A square is the right shape; a square that grows without
     limit is a poster.

     So the column count follows the room — two on a phone, four in one row as
     soon as the sheet can hold them at a legible size. Four across is NOT
     possible on a phone, measured twice: 78px tiles leave 52px of inner width
     and 'Memorize' (the longest name) needs 57px even at 12px; and because a
     bare `1fr` floors at min-content, the columns refuse to shrink and the grid
     silently overflows the sheet sideways instead. Hence minmax(0,1fr), which
     lets a column go below its content, and hence the breakpoint. */
  .sh-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,165px)); justify-content:center; gap:calc(var(--al-u) * 2);
    padding:calc(var(--al-u) * 3) var(--al-gut) var(--al-u); }   /* v1266 Rise: the phone sheet is full-bleed (374 inner); the square stays thumb-sized, capped at 165 */
  /* v1262: inside the kit's list the gutter is the list's — a second one shrank the phone square from 150 to 135 */
  .al-list .sh-tiles { padding-left:0; padding-right:0; }
  .sh-tiles .tile { aspect-ratio:1 / 1; min-height:var(--al-tap); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 3);
    border:1px solid var(--al-line); border-radius:var(--al-rctl); background:var(--al-card);
    cursor:pointer; text-align:center; color:inherit; }   /* v1262: reads the layer (the Menu is a hub) */
  /* NOT flex:1 — that spacer is what pinned the icon to the top of a 238px
     square and manufactured the gap the tile was mostly made of */
  .sh-tiles .tile .ic { display:flex; align-items:center; color:var(--al-mut); }
  .sh-tiles .tile .n { font:800 var(--al-act)/var(--lh-ui) var(--f-ui); letter-spacing:0; color:var(--al-ink); }
  .sh-tiles .tile .rt { font:500 var(--al-floor)/1 var(--f-num); color:var(--al-mut); font-variant-numeric:tabular-nums; }
  .sh-tiles .tile:hover { border-color:var(--al-acc); }
  .sh-tiles .tile:active { background:var(--al-card2); }
  .sh-tiles .tile:focus-visible { outline:2px solid var(--al-focus); outline-offset:-2px; }
  /* four in one row the moment the sheet is wide enough to hold them legibly.
     540px of viewport is 518px of sheet is a 114px tile with 92px of inner
     width — 'Memorize' at 14.5px measures 69px, so the tightest name still
     clears its box by 23px. */
  @media (min-width:540px) {
    /* v1262: the column count follows the room, and the square never inflates — four squares capped at 140px,
       centred; the tablet tier of --al-sheet (820 / 940) would otherwise grow them to 200px of nothing */
    .sh-tiles { grid-template-columns:repeat(4,minmax(0,140px)); justify-content:center; }
    .sh-tiles .tile { padding:calc(var(--al-u) * 3); gap:calc(var(--al-u) + var(--al-u2)); }
  }
  /* v1266 Rise: from 744 the Menu is the side pane (clamp(380px,46vw,520px)), not a
     viewport-wide sheet — four across would leave 55px of inner width for
     'Memorize' (79px in Source Sans 3). Back to two across, squares capped at 170. */
  @media (min-width:744px) { .sh-tiles { grid-template-columns:repeat(2,minmax(0,170px)); } }
  /* a square is square until the sheet is too short for it to be. Scoped to the
     two-column case: a landscape phone is 844x390, which is wide enough for the
     one-row layout, and un-squaring that row would leave 114x76 rectangles. */
  @media (max-height:620px) and (max-width:539px) { .sh-tiles .tile { aspect-ratio:auto; min-height:76px; } }

  /* ══ THE LIST ROW · THE FORM VOCABULARY — v1262: moved to styles/al.css stratum 6
     (Row · Head · Field · the sheet's action Bar), tokenised: 64px rows, 18px
     names, 15px meanings, 14/28 radii, no uppercase. .li outside a sheet keeps
     its hairline-list tier; inside .sh-body it is a card like .al-row. */
  /* ── the two rail panels use the same row, with their own state marks ──── */
  #tj-panel, #blur-panel { min-width:322px; max-width:min(92vw,392px); }
  @media (max-width:560px) { #tj-panel, #blur-panel { min-width:0; width:calc(100vw - 20px); } }
  #tj-panel .tj-cols, #blur-panel .tj-cols { display:block; margin:0; gap:0; }
  /* v1264 (wave 5) — the two panels' rows wear the CONTROL radius. A filled row
     with square corners inside a rounded panel is rule 8 read backwards, and it
     was also the reason the knob probe could not measure a single corner on
     either panel: nothing inside them had a radius to halve. */
  #tj-panel .li, #blur-panel .li { border-radius:var(--al-rctl); }
  /* an .on row is washed in the single accent — no per-rule flood, no card */
  #tj-panel .li.on, #blur-panel .li.on { background:color-mix(in srgb, var(--l-gold,#caa64b) 10%, transparent); }
  body.theme-dark #tj-panel .li.on, body.theme-dark #blur-panel .li.on {
    background:color-mix(in srgb, var(--d-acc,#d4b573) 13%, transparent); }
  /* TAJWID: the glyph tile IS the switch — hairline off, real ink on. This is
     the only honest preview a colour control can give: it shows the ink the
     page is about to get. Outline rules (Ra, Lam) draw a RING on the word, so
     their swatch is a ring too. */
  #tj-panel .li .tj-g { width:34px; height:34px; border-radius:calc(var(--al-rctl) / 2); flex:none; display:flex;
    align-items:center; justify-content:center; font-size:15px; background:transparent;
    border:1px solid rgba(60,50,20,.2); color:var(--l-mut,#6b6353);
    transition:background .16s, color .16s, border-color .16s; }
  #tj-panel .li.on .tj-g { background:var(--pc); border-color:var(--pc); color:#fff; }
  #tj-panel .li.on[data-outline] .tj-g { background:transparent; color:var(--pc); border-color:var(--pc); border-width:2px; }
  #tj-panel .li:not(.on) .n { color:var(--l-mut,#7a725c); }
  body.theme-dark #tj-panel .li .tj-g { border-color:rgba(255,255,255,.2); color:var(--d-ink3,#a59a80); }
  body.theme-dark #tj-panel .li.on .tj-g { color:var(--d-bg,#14100a); }
  body.theme-dark #tj-panel .li:not(.on) .n { color:var(--d-ink3,#a59a80); }
  /* BLUR: a ring that fills — radio, because exactly one mode can be live */
  #blur-panel .li .pl-r { width:17px; height:17px; border-radius:50%; flex:none;
    border:1.7px solid rgba(60,50,20,.26); transition:border-color .16s, box-shadow .16s; }
  #blur-panel .li.on .pl-r { border-color:var(--pc); box-shadow:inset 0 0 0 4px var(--pc); }
  body.theme-dark #blur-panel .li .pl-r { border-color:rgba(255,255,255,.26); }
  /* Invert is a MODIFIER, not a fifth mode — square check, deliberately unlike
     the modes' radio rings, so the list never implies you could pick it instead */
  #blur-panel .li .pl-c { width:18px; height:18px; border-radius:calc(var(--al-rctl) / 2); flex:none; display:inline-grid;
    place-items:center; border:1.7px solid rgba(60,50,20,.26); color:transparent;
    transition:background .16s, border-color .16s, color .16s; }
  #blur-panel .li.on .pl-c { background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:#fff; }
  body.theme-dark #blur-panel .li.on .pl-c { background:var(--d-acc,#d4b573); border-color:var(--d-acc,#d4b573); color:var(--d-bg,#14100a); }
  body.theme-dark #blur-panel .li .pl-c { border-color:rgba(255,255,255,.26); }
  /* the specimen strip stays: for a spatial mode ("page top + bottom", "after
     last waqf") five bars showing which words go fuzzy say more than words can */
  #blur-panel .li .bm-spec { flex:none; margin-inline-start:2px; }

  /* v1040 — the count IS the readout: how many words on THIS page the rule hits */
  .tj-ct { flex:none; min-width:22px; text-align:right; font:700 11px/1 -apple-system, sans-serif;
    font-variant-numeric:tabular-nums; color:var(--l-soft,#a2997e); }
  #tj-panel .li.on .tj-ct { color:var(--l-ink2,#2b2415); }
  body.theme-dark .tj-ct { color:var(--d-ink3,#8e846c); }
  body.theme-dark #tj-panel .li.on .tj-ct { color:var(--d-ink,#ded6c4); }

  /* two views of ONE list — the readout, or all fifteen by family */
  .tj-vseg { margin:2px 6px 0; }
  .tj-note { padding:10px 12px 2px; font:500 10.5px/1.4 -apple-system, sans-serif; color:var(--l-soft,#a2997e); }
  body.theme-dark .tj-note { color:var(--d-ink3,#8e846c); }
  /* Invert: a square check, not a ring — it is a modifier, not a fifth mode */
  #blur-panel .tj-cols .gh-row .pl-c { width:18px; height:18px; border-radius:calc(var(--al-rctl) / 2); flex:none;
    display:inline-grid; place-items:center; border:1.7px solid rgba(60,50,20,.26);
    color:transparent; transition:background .16s, border-color .16s, color .16s; }
  #blur-panel .tj-cols .gh-row.on .pl-c { background:var(--pc,#b06a2a); border-color:var(--pc,#b06a2a); color:#fff; }
  body.theme-dark #blur-panel .tj-cols .gh-row .pl-c { border-color:rgba(255,255,255,.26); }
  /* BLUR: a ring that fills — radio, because exactly one mode can be live */
  #blur-panel .tj-cols .gh-row .pl-r { width:17px; height:17px; border-radius:50%; flex:none;
    border:1.7px solid rgba(60,50,20,.26); transition:border-color .16s, box-shadow .16s; }
  #blur-panel .tj-cols .gh-row.on .pl-r { border-color:var(--pc); box-shadow:inset 0 0 0 4px var(--pc); }
  body.theme-dark #blur-panel .tj-cols .gh-row .pl-r { border-color:rgba(255,255,255,.26); }
  /* the specimen strip stays — for a spatial mode it says more than words can */
  #blur-panel .tj-cols .gh-row .bm-spec { flex:none; margin-inline-start:2px; }
  /* section headings: quiet, and they now carry the count they head */
  #tj-panel .tj-hdr, #blur-panel .tj-hdr { display:flex; align-items:baseline; gap:7px;
    padding:12px 12px 5px; margin:0; border:0; background:none; }
  #tj-panel .tj-hdr::after, #blur-panel .tj-hdr::after { content:''; flex:1; height:1px;
    background:rgba(60,50,20,.11); }
  body.theme-dark #tj-panel .tj-hdr::after, body.theme-dark #blur-panel .tj-hdr::after { background:rgba(255,255,255,.1); }
  /* v1370: Record & Compare's rules moved to styles/rec-compare.css with its rebuild */
  .lh-sub { font:700 10px/1 -apple-system; letter-spacing:.06em; text-transform:uppercase; color:var(--l-soft,#a89b80); margin:8px 2px 6px; }
  /* v721: ra rules render as a MARKER band (same shape as the marker
     highlight style at body[data-hl=marker]) instead of the old outline ring.
     Hue overrides set --ra-hv / --ra-lv on these same selectors. */
  body.on-ra_tafkhim .glyph-layer .word-glyph.tj-ra_tafkhim { --ra-hv:#c23b3b; background:linear-gradient(color-mix(in srgb, var(--ra-hv) 30%, transparent) 0 0) center / 100% 62% no-repeat; }
  body.on-ra_tarqiq  .glyph-layer .word-glyph.tj-ra_tarqiq  { --ra-lv:#3b7ac2; background:linear-gradient(color-mix(in srgb, var(--ra-lv) 30%, transparent) 0 0) center / 100% 62% no-repeat; }
  /* word in BOTH sets (multi-ra word, e.g. مِدْرَارًا): two stacked half-bands */
  body.on-ra_tafkhim.on-ra_tarqiq .glyph-layer .word-glyph.tj-ra_tafkhim.tj-ra_tarqiq { background:linear-gradient(color-mix(in srgb, var(--ra-hv, #c23b3b) 30%, transparent) 0 50%, color-mix(in srgb, var(--ra-lv, #3b7ac2) 30%, transparent) 50% 100%) center / 100% 62% no-repeat; }
  /* Lam of ٱللَّه — same outline treatment (derive-lam.py; heavy after
     fatha/damma, light after kasra) */
  body.on-lam_tafkhim .glyph-layer .word-glyph.tj-lam_tafkhim { outline:1.4px solid #b8860b; outline-offset:-3px; border-radius:6px; }
  body.on-lam_tarqiq  .glyph-layer .word-glyph.tj-lam_tarqiq  { outline:1.4px solid #2e8b8b; outline-offset:-3px; border-radius:6px; }
  /* styles → paint (the owner's 6 picks from Preview 1: 1,2,3,4,5,7) */
  /* base (no active rule): -webkit-text-fill-color uses a bare var(--on) with no
     fallback, so when --on is unset the declaration is invalid and the glyph
     falls through to `color` — which repaints on theme change (iOS WebKit does
     NOT repaint a var-based -webkit-text-fill-color, leaving dark ink in dark
     mode). Rule words have --on set, so they still get their colour. */
  body[data-hl=ink]    .glyph-layer .word-glyph { color:var(--on, var(--mu-ink, var(--l-ink,#1b1812))); -webkit-text-fill-color:var(--on); }
  body[data-hl=marker] .glyph-layer .word-glyph { background:linear-gradient(color-mix(in srgb, var(--on, transparent) 26%, transparent) 0 0) center / 100% 62% no-repeat; }
  body[data-hl=glow]   .glyph-layer .word-glyph { text-shadow:0 0 2px var(--on, transparent), 0 0 9px var(--on, transparent), 0 0 18px var(--on, transparent); }
  body[data-hl=under]  .glyph-layer .word-glyph { background:linear-gradient(transparent calc(100% - .13em), var(--on, transparent) 0); }
  body[data-hl=frame]  .glyph-layer .word-glyph { box-shadow:0 0 0 1.5px var(--on, transparent); border-radius:4px; }
  body[data-hl=grad]   .glyph-layer .word-glyph { color:var(--grad-ink, var(--mu-ink, var(--l-ink,#1b1812)));
    background:linear-gradient(160deg, var(--on, transparent) 20%, color-mix(in srgb, var(--on, transparent) 55%, #2b1c05) 80%);
    -webkit-background-clip:text; background-clip:text; }
  /* multi-rule words (2+ enabled rules): the SAME highlight mode, segmented —
     one colour band per active rule. The selected style chip drives this too,
     so single + multi always share a look. Specificity (0,4,1) > the single
     style rules (0,3,1) above; no !important. Text-fill modes (ink/grad) clip
     to the glyphs; the rest reset to border-box and keep mushaf ink. */
  body[data-hl=ink]    .glyph-layer .word-glyph.tj-multi { color:transparent; -webkit-text-fill-color:transparent;
    background:var(--multiRep); -webkit-background-clip:text; background-clip:text; }
  body[data-hl=grad]   .glyph-layer .word-glyph.tj-multi { color:transparent; -webkit-text-fill-color:transparent;
    background:var(--multiS); -webkit-background-clip:text; background-clip:text; }
  body[data-hl=marker] .glyph-layer .word-glyph.tj-multi { color:var(--mu-ink, var(--l-ink,#1b1812)); -webkit-text-fill-color:var(--mu-ink, var(--l-ink,#1b1812));
    -webkit-background-clip:border-box; background-clip:border-box; background:var(--multiSoft) center / 100% 62% no-repeat; }
  body[data-hl=under]  .glyph-layer .word-glyph.tj-multi { color:var(--mu-ink, var(--l-ink,#1b1812)); -webkit-text-fill-color:var(--mu-ink, var(--l-ink,#1b1812));
    -webkit-background-clip:border-box; background-clip:border-box; background:var(--multi) bottom / 100% .16em no-repeat; }
  /* glow: no multi-colour treatment — a multi-rule word keeps the single
     glow (one colour via --on, source-order last active rule). */
  body[data-hl=frame]  .glyph-layer .word-glyph.tj-multi { color:var(--mu-ink, var(--l-ink,#1b1812)); -webkit-text-fill-color:var(--mu-ink, var(--l-ink,#1b1812));
    -webkit-background-clip:border-box; background-clip:border-box;
    background:linear-gradient(var(--c1) 0 0) left / .16em 100% no-repeat, linear-gradient(var(--c2) 0 0) right / .16em 100% no-repeat; }
  /* ════════════════════════════════════════════════════════════════════
     LUQMA (لقمة · "the morsel") — the words you had to be fed ──────────
     modules/tools/luqma.js. One pill, no menu: ON dims the page, a tap
     marks the word that tripped you, OFF leaves the page untouched.
     Uses OPACITY, never `filter` — the blur system owns `filter` on
     .word-glyph, and the two must not fight over one property. The
     medallions and the banner recede with the words so the dim reads as
     one surface rather than words-only. Marks show ONLY inside the mode:
     they are notes to yourself, not an annotation layer on the Book. */
  body.luq-on .glyph-layer .word-glyph,
  body.luq-on .glyph-layer .verse-end,
  body.luq-on .surah-banner{ opacity:.26; transition:opacity .18s ease; }
  /* v1124 — bare, as asked. A marked word is simply at full ink against a page
     at .26; there is no underline, no wash, no mark of any kind. The gold rule
     that used to live here was insurance against a contrast that turned out not
     to need it — 1.0 against .26 is already unmistakable. Consequence worth
     knowing: with tajwīd on, a marked word now keeps its tajwīd colour instead
     of having a gold rule painted over it, which is the more honest result. */
  body.luq-on .glyph-layer .word-glyph.luq-hit{ opacity:1; }
  /* icon + count side by side. A corner badge on a 44px icon pill overlapped
     the pin and clipped itself; the number is a sibling now, so neither can
     cover the other. tabular-nums stops the pill twitching in width as the
     count changes between pages. The count is what is on THIS page — 0 shows
     as 0, dimmed, because "nothing marked here" is itself the answer. */
  #luq-pill{ padding:0 11px; gap:6px; }
  #luq-pill .luq-n{ font:800 13px/1 "Manrope",sans-serif; font-variant-numeric:tabular-nums;
    min-width:8px; text-align:center; }
  #luq-pill:not(.on) .luq-n{ opacity:.45; }
  /* Flow (modules/tools/flow-s1.js): the range's words blur; .revealed clears the blur. */
  .glyph-layer[data-blur~="reverse"] .word-glyph.rb-on:not(.revealed){
    filter: blur(var(--mu-blur-radius,14px)); transition: filter .22s ease; }
  body.rb-on #pill{ display:none; }   /* hide the page pill during the reverse drill */

  /* ── Memorize tool (ADDITIVE) ───────────────────────────────────────────
     A "Counter" pill (#rules) opens a FLOATING popup (scrim + centered card,
     above the mushaf — NOT the bottom --dock-bottom dock). Two-step wizard
     ported from previews/p1.html. On Start it hides and shows a slim movable
     capsule that sits ON the mushaf (no dock reserved). Classes mz-*. */
  #mz-pill.on{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); }
  .mz-scrim{ position:fixed; inset:0; z-index:48; background:rgba(20,17,12,.52);   /* v1214: above .ctr-hud (47) — the docked HUD was eating the Apply button's clicks */
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; padding:40px 14px;
    color:var(--l-ink3,#3d3829); font:14px/1.5 -apple-system, sans-serif; }
  .mz-scrim.show{ display:flex; }
  .mz-scrim [hidden]{ display:none !important; }
  .mz-row{ display:flex; align-items:center; gap:8px; }
  .mz-sech{ font:800 8.5px/1 -apple-system; letter-spacing:.12em; text-transform:uppercase; color:var(--l-soft,#a89b80); margin:13px 0 7px; }
  .mz-sel{ border:1px solid rgba(60,50,20,.2); border-radius:10px; padding:9px 11px; background:var(--l-card,#fff);
    font:600 13px/1 -apple-system; color:var(--l-ink3,#3d3829); width:100%; }
  .mz-sel.ay{ width:84px; flex:none; text-align:center; }
  /* Traps ayah preview dropdown: grows to show "N · first words" */
  .mz-sel.aysel{ width:auto; flex:1 1 0; min-width:120px; text-align:left; }
  .mz-ayah-inline{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .mz-ayah-inline .mz-sel:not(.ay):not(.aysel){ flex:0 1 auto; min-width:0; }
  .mz-mzlab{ flex:1; font:800 9.5px/1 -apple-system; letter-spacing:.13em; text-transform:uppercase; color:var(--l-soft,#a89b80); }
  /* the āyah preview block — Arabic CONTENT, a documented exception to the
     row grammar. Shared by the Counter sheet and the Planner. */
  .mz-prev{ margin:0 16px 12px; background:var(--l-paper2,#fffefa); border:1px solid rgba(60,50,20,.1);
    border-radius:16px; padding:14px; }
  body.theme-dark .mz-prev{ background:var(--d-panel,#241d15); border-color:var(--d-line2,#4a4234); }
  /* v1209 · D17 (takes the room): the Counter sheet grows with the tablet —
     .sheet.mz-sheet out-specifies tool-hubs' kit .sheet 520px cap. Found by
     the molecular run's both-sizes lens (measured 520 at 1024; law ~881). */
  @media (min-width:744px){ .sheet.mz-sheet{ width:min(90vw,820px); max-height:min(90vh,940px); } }
  @media (min-width:1000px){ .sheet.mz-sheet{ width:min(86vw,940px); } }
  /* v1210: the Counter's break card. v1215 (owner: D3 "the Ring"): the card is
     a dhikr counter — Amiri phrase, gold ring draining with the break clock,
     the tally inside it; the WHOLE card is the tap target. */
  .mz-brkscrim{ position:fixed; inset:0; z-index:60; background:rgba(20,16,8,.42);
    display:flex; align-items:center; justify-content:center; padding:14px; cursor:pointer;
    -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
  /* v1225 scorecard · v1226 reskinned to D2 "Two Bars" (owner's pick): par is
     the muted bar, you are the gold one — see the gap, don't read it. The
     dhikr get their own pair. Hugs its content (no break-card stretch). */
  /* .mz-brkscrim.mz-scscrim (0-4-0) — must BEAT the break card's later 84vh
     stretch rule (0-3-0), which shares the scrim class; equal specificity
     lost by source order and stretched the scorecard into an empty tower
     (molecular run; likely the owner's "this is no d2") */
  .mz-brkscrim.mz-scscrim .sheet.mz-sheet{ min-height:0; max-height:min(88vh,760px); }
  .mz-sc-sec{ margin:12px 16px 2px; }
  .mz-sc-sec + .mz-sc-sec{ border-top:1px solid rgba(60,50,20,.12); padding-top:12px; margin-top:14px; }
  .mz-sc-cap{ font:700 10.5px/1 "Manrope",-apple-system,sans-serif; letter-spacing:.14em;
    text-transform:uppercase; color:var(--l-mut,#6b6353); margin-bottom:6px; }
  .mz-sc-row{ display:flex; align-items:center; gap:10px; margin:7px 0;
    font:600 13px/1.2 "Manrope",-apple-system,sans-serif; }
  .mz-sc-row .k{ flex:0 0 74px; color:var(--l-ink3,#3d3829); overflow:hidden; white-space:nowrap; }
  .mz-sc-row .k .ar{ font-family:var(--f-quran); font-size:15px; }
  .mz-sc-row .track{ flex:1 1 auto; height:16px; border-radius:8px; background:rgba(60,50,20,.08);
    overflow:hidden; display:block; }
  .mz-sc-row .fill{ display:block; height:100%; width:0; border-radius:8px;
    background:var(--l-gold,#caa64b); transition:width .9s cubic-bezier(.2,.7,.2,1); }
  .mz-sc-row .fill.mut{ background:rgba(60,50,20,.26); }
  .mz-sc-row .v{ flex:0 0 52px; text-align:right; color:var(--l-ink,#1b1812);
    font-variant-numeric:tabular-nums; }
  .mz-sc-gap{ text-align:right; font:700 13px/1.2 "Manrope",-apple-system,sans-serif;
    font-variant-numeric:tabular-nums; margin-top:2px; }
  .mz-sc-gap.under{ color:#5d7d4e; } .mz-sc-gap.over{ color:#a05a5a; }
  .mz-sc-fine{ font:500 11.5px/1.5 "Manrope",-apple-system,sans-serif;
    font-variant-numeric:tabular-nums; color:var(--l-mut,#6b6353); margin-top:6px; }
  body.theme-dark .mz-sc-sec + .mz-sc-sec{ border-top-color:var(--d-line2,#4a4234); }
  body.theme-dark .mz-sc-cap, body.theme-dark .mz-sc-fine{ color:var(--d-ink3,#9a8f77); }
  body.theme-dark .mz-sc-row .k{ color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .mz-sc-row .v{ color:var(--d-ink,#e8dcc0); }
  body.theme-dark .mz-sc-row .track{ background:rgba(222,214,196,.10); }
  body.theme-dark .mz-sc-row .fill.mut{ background:rgba(222,214,196,.28); }
  body.theme-dark .mz-sc-gap.under{ color:#9db487; } body.theme-dark .mz-sc-gap.over{ color:#c98a8a; }
  @media (min-width:744px){
    .mz-sc-row{ font-size:15px; margin:9px 0; } .mz-sc-row .k{ flex-basis:96px; }
    .mz-sc-row .k .ar{ font-size:17px; } .mz-sc-row .track{ height:18px; }
    .mz-sc-row .v{ flex-basis:60px; } .mz-sc-gap{ font-size:14.5px; } .mz-sc-fine{ font-size:12.5px; }
  }
  /* v1224: the left-off strip — pinned under the wizard header on every step,
     whatever door opened the sheet. One row, one action. */
  .mz-lo{ display:flex; align-items:center; gap:10px; min-height:44px; margin:10px 16px 0;
    padding:8px 14px; border-radius:12px; cursor:pointer;
    background:rgba(202,166,75,.10); border:1px solid rgba(202,166,75,.30); }
  .mz-lo .ic{ display:inline-flex; color:var(--l-gold-deep,#8a7340); }
  .mz-lo .tx{ flex:1 1 auto; font:500 14px/1.4 "Manrope",-apple-system,sans-serif;
    color:var(--l-ink2,#2b2415); font-variant-numeric:tabular-nums; }
  .mz-lo .tx b{ font-weight:800; }
  .mz-lo .go{ font:700 13px/1 "Manrope",-apple-system,sans-serif; color:var(--l-gold-deep,#8a7340);
    border:1px solid rgba(202,166,75,.45); border-radius:999px; padding:8px 14px; white-space:nowrap; }
  .mz-lo:active{ transform:scale(.99); }
  body.theme-dark .mz-lo{ background:rgba(212,185,106,.10); border-color:rgba(212,185,106,.28); }
  body.theme-dark .mz-lo .tx{ color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .mz-lo .ic, body.theme-dark .mz-lo .go{ color:#d4b96a; border-color:rgba(212,185,106,.4); }
  @media (min-width:744px){ .mz-lo{ margin:12px 24px 0; } .mz-lo .tx{ font-size:15.5px; } }
  .mz-dh-intro{ margin:10px 16px 0; padding:12px 16px; border-radius:12px;
    background:rgba(202,166,75,.10); border:1px solid rgba(202,166,75,.30);
    font:500 14px/1.55 "Manrope",-apple-system,sans-serif; color:var(--l-ink2,#2b2415); text-align:center; }
  body.theme-dark .mz-dh-intro{ background:rgba(212,185,106,.10); border-color:rgba(212,185,106,.28);
    color:var(--d-ink2,#d8cdb4); }
  @media (min-width:744px){ .mz-dh-intro{ font-size:15.5px; margin:12px 24px 0; } }
  .mz-dh-ph{ font-family:var(--f-quran); font-size:24px; line-height:1.7; direction:rtl; text-align:center;
    color:var(--l-ink,#1b1812); margin:4px 16px 0; }
  .mz-dh-ring{ position:relative; width:min(200px,52vw); aspect-ratio:1/1; margin:8px auto 2px; }
  .mz-dh-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
  .mz-dh-ring .tr{ fill:none; stroke:rgba(60,50,20,.12); stroke-width:5; }
  .mz-dh-ring .rn{ fill:none; stroke:var(--l-gold,#caa64b); stroke-width:5; stroke-linecap:round;
    transition:stroke-dashoffset 1s linear; }
  .mz-dh-ring.hit{ animation:mzdh-pulse .25s; }
  @keyframes mzdh-pulse{ 40%{ transform:scale(1.035); } }
  .mz-dh-in{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; }
  .mz-dh-num{ font:800 54px/1 "Manrope",-apple-system,sans-serif; font-variant-numeric:tabular-nums;
    color:var(--l-ink,#1b1812); }
  .mz-brkcount{ font:700 15px/1 "Manrope",-apple-system,sans-serif; font-variant-numeric:tabular-nums;
    color:var(--l-mut,#6b6353); }
  .mz-dh-chips{ display:flex; justify-content:center; gap:8px; margin:8px 12px 8px; flex-wrap:wrap; }
  .mz-dh-chip{ min-height:44px; padding:8px 16px; border-radius:12px; border:1px solid rgba(60,50,20,.18);
    background:transparent; font-family:var(--f-quran); font-size:16px; color:var(--l-mut,#6b6353); cursor:pointer; }
  .mz-dh-chip.on{ border-color:var(--l-gold,#caa64b); color:var(--l-gold-deep,#8a7340);
    background:rgba(202,166,75,.10); font-weight:700; }
  body.theme-dark .mz-dh-ph{ color:var(--d-ink,#e8dcc0); }
  body.theme-dark .mz-dh-ring .tr{ stroke:var(--d-line2,#4a4234); }
  body.theme-dark .mz-dh-num{ color:var(--d-ink,#e8dcc0); }
  body.theme-dark .mz-brkcount{ color:var(--d-ink3,#9a8f77); }
  body.theme-dark .mz-dh-chip{ border-color:var(--d-line2,#4a4234); color:var(--d-ink3,#9a8f77); }
  body.theme-dark .mz-dh-chip.on{ border-color:#d4b96a; color:#d4b96a; background:rgba(212,185,106,.14); }
  /* D17 · takes the room: the ring and its figures step UP with the sheet */
  @media (min-width:744px){
    .mz-dh-ring{ width:min(250px,36vw); } .mz-dh-num{ font-size:64px; }
    .mz-dh-ph{ font-size:28px; } .mz-dh-chip{ font-size:18px; } .mz-brkcount{ font-size:17px; }
  }
  @media (min-width:1000px){
    .mz-dh-ring{ width:280px; } .mz-dh-num{ font-size:72px; } .mz-dh-ph{ font-size:30px; }
  }
  /* v1216 (owner: "expand vertically", arrow up the screen): the rest takes
     the VERTICAL room too — the card stretches on tall screens (out-specifying
     the kit's 760px cap), the dhikr cluster centres in the opened space via
     the two auto margins, and the plan keeps the foot above Continue. */
  .mz-brkscrim .sheet.mz-sheet{ min-height:min(84vh,1100px); max-height:min(92vh,1200px); }
  .mz-brkscrim .sh-body{ flex:1 1 auto; display:flex; flex-direction:column; }
  .mz-brkscrim .mz-dh-ph{ margin-top:auto; }
  .mz-brkscrim .mz-pl{ margin-top:auto; }
  @media (min-height:900px){
    .mz-dh-ring{ width:min(300px,52vw); } .mz-dh-num{ font-size:76px; }
    .mz-dh-ph{ font-size:32px; } .mz-brkcount{ font-size:18px; } .mz-dh-chip{ font-size:19px; }
  }
  @media (min-height:1200px){
    .mz-dh-ring{ width:min(340px,50vw); } .mz-dh-num{ font-size:88px; } .mz-dh-ph{ font-size:38px; }
  }
  /* v1211: the sets/breaks breakdown — wizard preview + break-card window */
  .mz-pl{ margin:4px 16px 14px; display:flex; flex-direction:column; gap:2px; }
  .mz-pl-row{ display:flex; align-items:center; justify-content:space-between; min-height:30px;
    padding:0 12px; border-radius:var(--r-sm,10px); background:rgba(60,50,20,.06);
    font:600 13px/1.2 "Manrope",-apple-system,sans-serif; color:var(--l-ink2,#2b2415); }
  .mz-pl-row b{ font:800 13px/1 "Manrope",-apple-system,sans-serif; font-variant-numeric:tabular-nums; }
  .mz-pl-brk{ background:transparent; border:1px dashed rgba(60,50,20,.18); color:var(--l-mut,#6b6353); min-height:24px; }
  .mz-pl-done{ opacity:.45; }
  .mz-pl-now{ font-weight:800; color:var(--l-ink,#1b1812); border-style:solid; border-color:rgba(60,50,20,.35); }
  .mz-pl-fold{ background:transparent; color:var(--l-mut,#6b6353); justify-content:center; }
  body.theme-dark .mz-pl-row{ background:rgba(214,196,158,.07); color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .mz-pl-brk{ background:transparent; border-color:var(--d-line2,#4a4234); color:var(--d-ink3,#9a8f77); }
  body.theme-dark .mz-pl-now{ color:var(--d-ink,#e8dcc0); border-color:var(--d-ink3,#9a8f77); }
  body.theme-dark .mz-prev-ar{ color:var(--d-ink,#ded6c4); }
  body.theme-dark .mz-prev-ref{ border-bottom-color:var(--d-line2,#4a4234); color:#d4b96a; }
  body.theme-dark .mz-anum{ background:rgba(212,185,106,.18); color:#d4b96a; }
  body.theme-dark .mz-orn .ln{ background:var(--d-line2,#4a4234); }
  body.theme-dark .mz-orn-meta{ color:var(--d-soft,#8d8371); }
  body.theme-dark .mz-orn-meta b{ color:#d4b96a; }
  .mz-prev-ref{ text-align:center; font:600 10px/1 -apple-system; letter-spacing:.16em; text-transform:uppercase;
    color:var(--l-gold-txt,#a08a4e); margin-bottom:10px; padding-bottom:8px; border-bottom:.5px solid rgba(60,50,20,.12); }
  .mz-prev-ref .sep{ color:#bca96f; margin:0 7px; }
  .mz-prev-ar{ font-family:var(--f-quran); font-size:20px; line-height:1.8; color:var(--l-ink,#1b1812); direction:rtl; text-align:center; }
  .mz-anum{ display:inline-block; direction:ltr; font:500 9px/1 'Manrope',sans-serif; color:#7a6322;
    background:rgba(202,166,75,.18); padding:3px 6px; border-radius:8px; margin:0 4px; vertical-align:middle; letter-spacing:.04em; }
  .mz-clamp{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
  .mz-orn{ display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0; direction:ltr; }
  .mz-orn .ln{ flex:1; height:.5px; background:rgba(60,50,20,.14); max-width:90px; }
  .mz-orn .star{ color:var(--l-gold,#caa64b); font-size:11px; }
  .mz-orn-meta{ text-align:center; direction:ltr; font:500 10px/1 'Manrope',sans-serif; color:var(--l-soft,#a89b80); letter-spacing:.06em; margin-bottom:8px; }
  .mz-orn-meta b{ color:#7a6322; font-weight:700; }
  .mz-btn{ background:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); border:0; border-radius:12px; padding:13px 16px; font:800 14px/1 -apple-system; cursor:pointer; }
  .mz-btn.wide{ width:100%; text-align:center; }
  .mz-btn.ghost{ background:rgba(60,50,20,.06); color:var(--l-mut,#6b6353); }
  /* kill the gray tap-highlight box that flashed on press (Counter + Planner) */
  .mz-scrim, .mz-scrim *, .ctr-hud, .ctr-hud * { -webkit-tap-highlight-color:transparent; }
  /* Rapid-tapping a counter must not trigger native text selection (double/triple
     tap selecting the number). Kill selection on every counter's tap surface. */
  .ctr-hud, .ctr-hud *, .dk-bigring, .dk-bigring *, .dk-bignum {
    -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .mz-btn:focus, .sh-btn:focus, .stp button:focus, .ctr-hud .acts button:focus,
  .mz-tab:focus, .mz-swap:focus, .mz-lock:focus, .mz-move:focus { outline:none; }
  .mz-btn:focus-visible, .sh-btn:focus-visible, .stp button:focus-visible, .ctr-hud .acts button:focus-visible {
    outline:2px solid rgba(202,166,75,.7); outline-offset:2px; }   /* keep keyboard focus visible */
  /* ── Planner (ADDITIVE) — a floating popup (same #mz-scrim chrome as
     the Memorize setup) listing saved ayah ranges. Tap a row → launches the
     Counter armed on that range via window.__mz.startRange. Classes pl-*. */
  #pl-pill.on{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); }
  /* The Planner's card. It inherited the Memorize setup's .mz-dock chrome; that
     card is gone (v1050 converted Memorize to .sheet), so the chrome lives here
     now, with one owner. The Planner itself is still on the conversion list. */
  .pl-dock{ width:min(560px, 94vw); max-width:none; max-height:88dvh; overflow-y:auto;
    background:var(--l-paper,#fffdf6); border:1px solid rgba(60,50,20,.16); border-radius:16px;
    padding:14px 16px 16px; color:var(--l-ink3,#3d3829); display:flex; flex-direction:column; }
  body.theme-dark .pl-dock{ background:var(--d-surface,#1c1710); border-color:var(--d-line2,#4a4234); color:var(--d-ink,#ece3cf); }
  .pl-due{ margin:8px 0 4px; }
  .pl-due-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
  .pl-due-chip{ display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid rgba(202,166,75,.45); background:rgba(202,166,75,.08);
    color:var(--l-ink2,#5c4d24); font:800 12px/1 -apple-system; border-radius:10px; padding:7px 10px; cursor:pointer; }
  .pl-due-chip small{ font:700 9px/1 -apple-system; opacity:.7; }
  .pl-due-chip.st-sabaq{ border-color:rgba(216,96,79,.45); background:rgba(216,96,79,.08); color:var(--data-bad); }
  .pl-due-chip.st-manzil{ border-color:rgba(60,50,20,.18); background:rgba(60,50,20,.04); color:var(--l-soft2,#7a6f58); }
  .pl-due-chip.trap{ border-color:rgba(194,59,59,.4); background:rgba(194,59,59,.06); color:#c23b3b; }
  .pl-due-more{ align-self:center; font:800 11px/1 -apple-system; color:var(--l-soft,#a89b80); }
  body.theme-dark .pl-due-chip{ background:rgba(214,181,120,.1); color:var(--d-ink,#ded6c4); }
  body.theme-dark .pl-due-chip.st-manzil{ background:rgba(214,196,158,.06); color:var(--d-ink2,#a99e88); }
  .pl-tabs{ display:flex; gap:4px; background:rgba(60,50,20,.06); border-radius:11px; padding:3px; margin:8px 0 12px; }
  .pl-tab{ flex:1; border:0; background:transparent; color:var(--l-soft2,#9a8c73); font:700 12px/1 -apple-system; padding:9px 8px; border-radius:8px; cursor:pointer; }
  .pl-tab.on{ background:var(--l-paper,#fffdf6); color:var(--l-ink2,#2b2415); box-shadow:0 1px 4px -1px rgba(0,0,0,.18); }
  .pl-tab.pl-tab-pulse{ animation:pl-pulse .42s ease; color:var(--l-ink2,#2b2415); background:var(--l-paper,#fffdf6); }
  @keyframes pl-pulse{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.14); } }
  .pl-fly{ position:fixed; z-index:60; pointer-events:none; box-sizing:border-box; text-align:center;
    background:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); font:800 12px/1 -apple-system; padding:10px 12px; border-radius:10px;
    box-shadow:0 10px 22px -8px rgba(40,30,5,.6); transform:translate(0,0); opacity:1;
    transition:transform .52s cubic-bezier(.4,0,.2,1), opacity .52s ease; }
  .pl-empty{ font:600 12px/1.5 -apple-system; color:var(--l-soft,#a89b80); background:rgba(43,182,166,.06);
    border:1px dashed rgba(43,182,166,.4); border-radius:12px; padding:16px 14px; text-align:center; }
  .pl-list{ display:flex; flex-direction:column; gap:7px; max-height:46dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .pl-row{ display:flex; align-items:stretch; gap:6px; }
  .pl-go{ flex:1; min-width:0; text-align:left; border:1px solid rgba(60,50,20,.12); background:var(--l-paper2,#fffefa);
    border-radius:12px; padding:11px 13px; cursor:pointer; display:flex; flex-direction:column; gap:3px; color:var(--l-ink3,#3d3829);
    transition:border-color .15s, box-shadow .15s, transform .1s, background .15s; }
  .pl-go:hover{ border-color:rgba(43,182,166,.4); box-shadow:0 3px 12px -6px rgba(43,182,166,.4); }
  .pl-go:active{ transform:scale(.99); background:rgba(43,182,166,.08); }
  .pl-ref{ font:800 14px/1 'Manrope',sans-serif; color:var(--l-ink2,#2b2415); }
  .pl-name{ font:600 11px/1.25 -apple-system; color:var(--l-gold-deep,#8a7340); }
  .pl-meta{ font:700 9px/1 -apple-system; color:var(--l-soft,#a89b80); letter-spacing:.05em; text-transform:uppercase; margin-top:1px; }
  .pl-metarow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:2px; }
  .pl-metarow .pl-meta{ margin-top:0; }
  .pl-tchip{ font:700 9px/1 -apple-system; color:#a08a4e; letter-spacing:.03em; }
  .pl-tchip b{ color:#8a6d24; font-weight:800; }
  .pl-tsub{ opacity:.75; }
  body.theme-dark .pl-tchip{ color:#d4b578; } body.theme-dark .pl-tchip b{ color:#e6cf9a; }
  .pl-prev{ font-family:var(--f-quran); font-size:15px; line-height:1.6; color:#8a8064; direction:rtl;
    text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:3px; }
  .pl-del{ flex:none; width:40px; border:1px solid rgba(60,50,20,.12); background:transparent; color:var(--l-soft,#a89b80);
    font:700 14px/1 -apple-system; border-radius:12px; cursor:pointer; }
  .pl-del:active{ background:rgba(176,106,106,.12); color:#a05a5a; }
  .pl-cont{ flex:none; width:44px; border:1px solid rgba(43,182,166,.5); background:rgba(43,182,166,.12); color:#1c7a6e;
    font:700 13px/1 -apple-system; border-radius:12px; cursor:pointer; transition:background .15s, color .15s; }
  .pl-cont:hover{ background:rgba(43,182,166,.2); }
  .pl-cont:active{ background:#2bb6a6; color:#fff; }
  .pl-hint{ font:600 10.5px/1.4 -apple-system; color:var(--l-soft,#a89b80); margin-top:7px; }
  /* v1049: the slim-rail capsule (.mz-cap / .mzc-*) and the session line
     (#mz-session) are DELETED — the Focus counter is the standard now and
     lives in the .ctr-* block below. Only the setup wizard's auto-count rows
     survive from this region. */

  /* ── Dhikr / Tasbih (ADDITIVE) — a large 85% floating window: category tiles
     → dhikr card lists → tap-to-count tasbih. Own design (cream/gold reader
     aesthetic); Quranic items pull Arabic from Tanzil. Classes dk-*. */
  /* #dd-pill (Islam) uses the STANDARD pill treatment so it follows the current
     theme like every sibling — --pc in light, --d-acc in dark (no bespoke rule). */
  .dk-scrim{ position:fixed; inset:0; z-index:42; background:rgba(20,17,12,.55);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center;
    /* owner report: the window header was clipped a little at the top — the old
       7.5vh padding ignored the notch, and the fixed-height win overflowed the
       flex cross-axis (centered = clipped equally top+bottom). Safe-area padding
       + max-height on .dk-win pin the header fully on-screen. */
    padding:calc(16px + env(safe-area-inset-top,0px)) 6vw calc(16px + env(safe-area-inset-bottom,0px));
    color:var(--l-ink3,#3d3829); font:14px/1.5 -apple-system, sans-serif; }
  .dk-scrim.show{ display:flex; }
  .dk-scrim.show .dk-win{ animation:dkin .18s ease-out; }
  @keyframes dkin{ from{ opacity:0; transform:translateY(6px) scale(.985); } }
  /* ── v1058 · THE .dk-* RETUNE ────────────────────────────────────────────
     Nineteen modules still open their window with this legacy shell while only
     five use .sheet — the design language was the minority dialect in its own
     codebase. Rather than convert 19 modules one at a time (which is how this
     app grew 40 dialects in the first place), the shell itself is retuned to
     the language's numbers, so every .dk-win inherits them with zero JS
     touched. The target is tool-hubs.js's .sheet, class for class:
       .dk-win  ↔ .sheet    16px surface radius, one hairline, NO shadow
       .dk-head ↔ .sh-hd    15/16/13 padding, .13 hairline
       .dk-ttl  ↔ .sh-hd .ttl   800 16px Manrope, -.01em
       .dk-x    ↔ .sh-hd .x     44px control, 12px radius, ring not fill
       .dk-back ↔ .sh-bk
     .dk-back was also below the 44px tap floor (rule H3) at ~31px; it is the
     Quiz window's back arrow (quiz.js is its only emitter) and is fixed here.
     .dk-subtab / .dk-subtabs had NO emitter anywhere and were deleted rather
     than retuned — measuring first is what turned "fix the tap target" into
     "this rule has been dead for some time". */
  .dk-win{ width:min(94vw,680px); height:min(93vh,1040px); max-height:100%; background:var(--l-paper,#fffdf6); border:1px solid rgba(60,50,20,.13);
    border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
  .dk-head{ flex:none; display:flex; align-items:center; gap:10px; padding:15px 16px 13px; border-bottom:1px solid rgba(60,50,20,.13); }
  .dk-back{ flex:none; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; background:rgba(60,50,20,.06);
    color:var(--l-mut,#6b6353); font:800 17px/1 -apple-system; cursor:pointer; border-radius:12px; padding:0 14px; }
  .dk-ttl{ font:800 16px/1.1 'Manrope', -apple-system; letter-spacing:-.01em; color:var(--l-ink2,#2b2415); }
  .dk-x{ margin-inline-start:auto; width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(60,50,20,.13); border-radius:12px; background:none; color:var(--l-soft,#a89b80); font:700 20px/1 -apple-system; cursor:pointer;
    margin-block:-4px; margin-inline-end:-4px; /* the ring hangs off the header padding, as .sh-hd .x does */ }
  .dk-x:active{ background:rgba(60,50,20,.08); }
  .dk-body{ flex:1; min-height:0; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }

  /* ── Quiz tool (ADDITIVE) — floating popup, same 85% size as Islam ───────── */
  #qz-pill.on{ background:#6e8fbf; border-color:#6e8fbf; color:#fff; }
  /* window chrome comes from the shared dk-* family (audit theme 5) — the
     drifted qz-scrim/win/head/ttl/x/back/body fork was deleted; quiz.js now
     emits dk-* classes and only quiz CONTENT keeps qz-* names. */
  /* setup */
  .qz-setup{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
  .qz-row{ display:flex; flex-direction:column; gap:9px; }
  .qz-label{ font:800 10.5px/1 -apple-system; letter-spacing:.08em; text-transform:uppercase; color:#7e93b4; }
  .qz-opts{ display:flex; flex-wrap:wrap; gap:8px; }
  .qz-opt{ border:1px solid rgba(60,50,20,.16); background:var(--l-paper2,#fffefa); color:#5a4f3a; font:700 13px/1.1 -apple-system; border-radius:12px; padding:11px 15px; cursor:pointer; transition:background .15s,border-color .15s,color .15s,box-shadow .15s; }
  .qz-opt:hover{ border-color:rgba(110,143,191,.5); }
  .qz-opt.on{ background:#6e8fbf; border-color:#6e8fbf; color:#fff; box-shadow:0 4px 12px rgba(110,143,191,.28); }
  .qz-opt:disabled{ opacity:.4; cursor:default; }
  .qz-rng{ display:flex; flex-direction:column; gap:11px; padding:15px; border:1px solid rgba(110,143,191,.28); background:rgba(110,143,191,.05); border-radius:15px; }
  .qz-rngrow{ display:flex; align-items:center; gap:10px; }
  .qz-rngrow label{ font:700 12px/1 -apple-system; color:var(--l-mut,#6b6353); min-width:54px; }
  .qz-sel{ flex:1; border:1px solid rgba(60,50,20,.16); background:var(--l-card,#fff); border-radius:11px; padding:11px 12px; font:600 14px/1 -apple-system; color:var(--l-ink2,#2b2415); outline:none; transition:border-color .15s,box-shadow .15s; }
  .qz-sel:focus, .qz-num:focus{ border-color:#6e8fbf; box-shadow:0 0 0 3px rgba(110,143,191,.14); }
  .qz-num{ width:66px; border:1px solid rgba(60,50,20,.16); background:var(--l-card,#fff); border-radius:11px; padding:11px 8px; font:700 14px/1 -apple-system; text-align:center; color:var(--l-ink2,#2b2415); outline:none; transition:border-color .15s,box-shadow .15s; }
  .qz-help{ font:600 11.5px/1.3 -apple-system; color:#8ea0bd; }
  .qz-start{ margin-top:6px; border:0; background:linear-gradient(145deg,#85a3cd,#5e80b4); color:#fff; font:800 15px/1 'Manrope',-apple-system; border-radius:14px; padding:16px; cursor:pointer; box-shadow:0 8px 20px -6px rgba(110,143,191,.55); transition:transform .1s,filter .15s; }
  .qz-start:hover{ filter:brightness(1.05); }
  .qz-start:active{ transform:scale(.99); }
  .qz-start:disabled{ opacity:.45; cursor:default; box-shadow:none; }
  /* question */
  .qz-q{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
  .qz-prog{ display:flex; align-items:center; gap:10px; font:800 12px/1 -apple-system; color:#7e93b4; }
  .qz-progbar{ flex:1; height:7px; border-radius:99px; background:rgba(60,50,20,.09); overflow:hidden; }
  .qz-progfill{ height:100%; background:linear-gradient(90deg,#85a3cd,#5e80b4); border-radius:99px; transition:width .25s ease; }
  .qz-prompt{ font:700 14px/1.4 -apple-system; color:var(--l-mut,#6b6353); text-align:center; }
  .qz-context{ font-family:var(--f-quran); font-size:27px; line-height:2.1; color:var(--l-ink,#1b1812); direction:rtl; text-align:center; padding:14px 12px; background:#fbf8f0; border:1px solid rgba(60,50,20,.08); border-radius:16px; }
  .qz-w{ display:inline-block; margin:0 4px; }
  .qz-blank{ display:inline-block; min-width:72px; height:1.1em; border-bottom:3px solid #6e8fbf; border-radius:2px; margin:0 8px; vertical-align:-0.2em; background:rgba(110,143,191,.12); }
  .qz-chunk{ font-family:var(--f-quran); font-size:40px; line-height:1.8; color:var(--l-ink,#1b1812); direction:rtl; text-align:center; }
  .qz-choices{ display:flex; flex-direction:column; gap:10px; }
  .qz-choice{ width:100%; text-align:center; border:1.5px solid rgba(60,50,20,.14); background:var(--l-paper2,#fffefa); border-radius:14px; padding:15px; cursor:pointer; color:var(--l-ink,#1b1812); transition:border-color .15s,background .15s,transform .1s; }
  .qz-choice:hover:not(:disabled){ border-color:rgba(110,143,191,.5); }
  .qz-choice:active:not(:disabled){ transform:scale(.99); }
  .qz-choice.ar{ font-family:var(--f-quran); font-size:26px; direction:rtl; }
  .qz-choice.en{ font:600 15px/1.4 -apple-system; }
  .qz-choice.correct{ background:rgba(91,140,110,.16); border-color:#5b8c6e; }
  .qz-choice.wrong{ background:rgba(182,69,47,.12); border-color:var(--data-bad); }
  .qz-choice:disabled{ cursor:default; }
  .qz-qfoot{ display:flex; gap:10px; justify-content:center; }
  .qz-tag{ border:1px solid rgba(60,50,20,.18); background:transparent; color:var(--l-mut,#6b6353); font:700 12px/1 -apple-system; border-radius:99px; padding:10px 16px; cursor:pointer; transition:all .15s; }
  .qz-tag.on{ background:#6e8fbf; border-color:#6e8fbf; color:#fff; }
  .qz-tag.hard.on{ background:var(--data-bad); border-color:var(--data-bad); color:#fff; }
  .qz-next{ margin-top:6px; border:0; background:linear-gradient(145deg,#85a3cd,#5e80b4); color:#fff; font:800 15px/1 'Manrope',-apple-system; border-radius:14px; padding:15px; cursor:pointer; box-shadow:0 8px 20px -6px rgba(110,143,191,.55); }
  /* results */
  .qz-result{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:18px; text-align:center; }
  .qz-score{ font:800 46px/1 'Manrope'; color:var(--l-ink2,#2b2415); }
  .qz-scoresub{ font:700 13px/1 -apple-system; color:#7e93b4; }
  .qz-missed{ display:flex; flex-direction:column; gap:7px; text-align:right; }
  .qz-missed-h{ font:800 10.5px/1 -apple-system; letter-spacing:.06em; text-transform:uppercase; color:#7e93b4; text-align:left; }
  .qz-missed-r{ display:flex; justify-content:space-between; gap:10px; border:1px solid rgba(60,50,20,.1); border-radius:12px; padding:11px 13px; background:var(--l-paper2,#fffefa); }
  .qz-missed-ar{ font-family:var(--f-quran); font-size:21px; color:var(--l-ink,#1b1812); }
  .qz-missed-en{ font:600 12px/1.4 -apple-system; color:var(--l-gold-deep,#8a7340); direction:ltr; }
  .qz-loading{ display:flex; align-items:center; justify-content:center; min-height:180px; color:var(--l-soft,#a89b80); font:600 14px/1 -apple-system; }

  .dk-loading{ display:flex; align-items:center; justify-content:center; min-height:200px; color:var(--l-soft,#a89b80); font:600 14px/1 -apple-system; }
  /* bleeds to the .dk-body edge — the offsets MUST equal .dk-body's padding
     (16px since v1058); they were -20px against the old 20px gutter. */
  .dk-searchbar{ position:sticky; top:-16px; z-index:3; margin:-16px -16px 16px; padding:14px 16px 12px; background:var(--l-paper,#fffdf6); border-bottom:1px solid rgba(60,50,20,.08); display:flex; align-items:center; gap:8px; }
  .dk-clear{ flex:none; border:0; background:rgba(60,50,20,.1); color:var(--l-mut,#6b6353); width:30px; height:30px; border-radius:50%; font:700 13px/1 -apple-system; cursor:pointer; }
  .dk-clear[hidden]{ display:none; }
  .dk-search{ flex:1; min-width:0; box-sizing:border-box; border:1px solid rgba(60,50,20,.16); background:rgba(60,50,20,.03); border-radius:12px; padding:11px 15px; font:600 14px/1.2 -apple-system; color:var(--l-ink2,#2b2415); outline:none; -webkit-appearance:none; }
  .dk-search:focus{ border-color:rgba(176,138,46,.55); background:var(--l-card,#fff); }
  .dk-search::placeholder{ color:var(--l-soft,#a89b80); }
  .dk-results-n{ font:700 10.5px/1 -apple-system; letter-spacing:.05em; text-transform:uppercase; color:var(--l-soft,#a89b80); max-width:760px; margin:2px auto 14px; }
  .dk-card-cat{ font:700 9.5px/1 -apple-system; letter-spacing:.05em; text-transform:uppercase; color:#b0a079; margin-inline-start:8px; }
  .dk-empty{ text-align:center; color:var(--l-soft,#a89b80); font:600 14px/1.6 -apple-system; padding:46px 20px; }
  .dk-group-hdr{ font:800 12px/1 'Manrope', -apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin:22px 2px 11px; padding-bottom:7px; border-bottom:1px solid rgba(176,138,46,.22); }
  .dk-group-hdr:first-child{ margin-top:2px; }
  .dk-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .dk-grid + .dk-group-hdr{ margin-top:24px; }
  .dk-tile{ position:relative; display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; justify-content:center; min-height:104px;
    border:1px solid rgba(60,50,20,.12); background:rgba(202,166,75,.06); border-radius:16px; padding:15px 12px 13px; cursor:pointer; transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease; }
  .dk-tile:hover{ border-color:rgba(176,138,46,.4); box-shadow:0 4px 14px -6px rgba(176,138,46,.4); }
  .dk-tile:active{ transform:scale(.99); background:rgba(202,166,75,.14); }
  .dk-pin{ position:absolute; top:8px; inset-inline-end:9px; font-size:15px; line-height:1; color:rgba(60,50,20,.22); cursor:pointer; padding:2px 3px; -webkit-tap-highlight-color:transparent; }
  .dk-pin.on{ color:var(--l-gold,#caa64b); }
  /* Asma al-Husna list */
  .dk-names-intro{ font:500 13px/1.5 -apple-system; color:#9a8f76; margin:0 2px 14px; }
  .dk-names{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
  .dk-name{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid rgba(60,50,20,.1); border-radius:13px; background:rgba(202,166,75,.05); transition:border-color .15s ease, box-shadow .15s ease; }
  .dk-name:hover{ border-color:rgba(176,138,46,.32); box-shadow:0 3px 12px -6px rgba(176,138,46,.36); }
  .dk-name-no{ flex:none; width:24px; text-align:center; font:800 12px/1 'Manrope', -apple-system; color:#bcae90; }
  .dk-name-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .dk-name-en{ font:800 14px/1.15 'Manrope', -apple-system; color:var(--l-ink2,#2b2415); }
  .dk-name-tr{ font:500 11.5px/1.3 -apple-system; color:#9a8f76; }
  .dk-name-ar{ flex:none; font-family:var(--f-ar); font-size:23px; line-height:1; color:var(--l-gold-deep,#8a7340); direction:rtl; }
  .dk-tile-ar{ font-family:var(--f-ar); font-size:24px; line-height:1.4; color:var(--l-gold-deep,#8a7340); direction:rtl; }
  .dk-tile-en{ font:800 13.5px/1.2 'Manrope', -apple-system; color:var(--l-ink2,#2b2415); }
  .dk-tile-n{ font:700 9.5px/1.3 -apple-system; color:var(--l-soft,#a89b80); letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
  .dk-tile-prog{ width:72%; height:4px; border-radius:99px; background:rgba(60,50,20,.1); overflow:hidden; margin-top:6px; }
  .dk-tile-prog i{ display:block; height:100%; background:var(--l-gold,#caa64b); border-radius:99px; }
  .dk-tile-prog.done i{ background:#5b8c6e; }

  .dk-acc-host{ max-width:760px; margin:0 auto; }
  .dk-acc-row{ border:1px solid rgba(60,50,20,.12); background:#fbf6ea; border-radius:12px; margin-bottom:8px; overflow:hidden; }
  .dk-acc-row.open{ border-color:rgba(176,138,46,.45); }
  .dk-acc-head{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:0; background:transparent; cursor:pointer; padding:13px 15px; }
  .dk-acc-title{ font:700 14px/1.3 -apple-system; color:var(--l-ink2,#2b2415); flex:1; }
  .dk-acc-ar{ font-family:var(--f-quran); font-size:16px; color:var(--l-gold-deep,#8a7340); }
  .dk-acc-cat{ font:700 9.5px/1 -apple-system; letter-spacing:.04em; text-transform:uppercase; color:#b0a079; }
  .dk-acc-chev{ color:var(--l-gold-txt,#a08a4e); font:700 13px/1 -apple-system; transition:transform .15s ease; }
  .dk-acc-row.open .dk-acc-chev{ transform:rotate(180deg); }
  .dk-acc-body{ display:none; padding:0 15px 15px; }
  .dk-acc-body.show{ display:block; }
  .dk-acc-text{ font-family:var(--f-quran); font-size:19px; line-height:2.0; color:var(--l-ink,#1b1812); direction:rtl; text-align:right; white-space:pre-wrap; padding:10px 0; border-top:.5px solid rgba(60,50,20,.1); }
  .dk-acc-en{ font:600 13px/1.6 -apple-system; color:#5a4f3a; margin-top:6px; }
  .dk-listctrls{ display:flex; align-items:center; gap:10px; max-width:760px; margin:0 auto 14px; }
  .dk-wbwtog{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(176,138,46,.5); background:transparent; color:var(--l-gold-txt,#a08a4e); font:700 12px/1 -apple-system; border-radius:99px; padding:9px 15px; cursor:pointer; }
  .dk-wbwtog .dk-tog-dot{ width:9px; height:9px; border-radius:50%; background:rgba(176,138,46,.4); transition:background .15s; }
  .dk-wbwtog.on{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); }
  .dk-wbwtog.on .dk-tog-dot{ background:var(--l-ink,#1b1812); }
  .dk-resetcat{ margin-inline-start:auto; border:1px solid rgba(60,50,20,.16); background:rgba(var(--l-paper-rgb,255,253,246),.6); color:var(--l-gold-deep,#8a7340); font:700 12px/1 -apple-system; border-radius:99px; padding:9px 15px; cursor:pointer; }
  .dk-resetcat.off{ opacity:.4; cursor:default; }
  .dk-sessprog{ align-self:center; font:700 12px/1 'Manrope',-apple-system; color:var(--l-mut,#6b6353); font-variant-numeric:tabular-nums; }
  .dk-undo{ border:1px solid rgba(91,124,168,.5); background:rgba(91,124,168,.08); color:#41618c; font:700 12px/1 -apple-system; border-radius:99px; padding:9px 15px; cursor:pointer; }
  .dk-undo.off{ opacity:.4; cursor:default; }
  .dk-sessdone{ max-width:760px; margin:0 auto 14px; background:rgba(91,140,110,.12); border:1px solid rgba(91,140,110,.4); color:#3c6b50; font:700 13px/1.45 -apple-system; border-radius:14px; padding:13px 16px; text-align:center; }
  .dk-list{ display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto; }
  .dk-card{ border:1px solid rgba(60,50,20,.12); background:#fbf6ea; border-radius:18px; padding:16px 18px 14px; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease; }
  .dk-card:hover{ border-color:rgba(176,138,46,.32); box-shadow:0 5px 18px -8px rgba(176,138,46,.4); }
  .dk-card.done{ background:rgba(91,140,110,.1); border-color:rgba(91,140,110,.4); }
  .dk-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .dk-card-en{ font:700 11.5px/1.2 -apple-system; color:var(--l-gold-deep,#8a7340); letter-spacing:.02em; }
  .dk-card-badge{ margin-inline-start:auto; font:800 12px/1 'Manrope'; color:#7a6322; background:rgba(202,166,75,.18); border-radius:99px; padding:5px 11px; }
  .dk-fav{ flex:none; border:0; background:transparent; font-size:17px; line-height:1; color:rgba(60,50,20,.25); cursor:pointer; padding:12px; margin:-10px -8px -10px -4px; -webkit-tap-highlight-color:transparent; }
  .dk-fav.on{ color:var(--l-gold,#caa64b); }
  .dk-ar{ font-family:var(--f-quran); font-size:25px; line-height:2.05; color:var(--l-ink,#1b1812); direction:rtl; text-align:center; }
  /* word-by-word interlinear: each Arabic word stacked over its gloss */
  .dk-wbw{ display:flex; flex-wrap:wrap; direction:rtl; justify-content:center; gap:14px 20px; padding:4px 0; }
  .dk-w{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  .dk-w-ar{ font-family:var(--f-quran); font-size:25px; line-height:1.5; color:var(--l-ink,#1b1812); }
  .dk-w-en{ font:600 10.5px/1.25 -apple-system; color:var(--l-gold-deep,#8a7340); direction:ltr; max-width:96px; text-align:center; }
  .dk-meta{ margin-top:11px; padding-top:11px; border-top:.5px solid rgba(60,50,20,.1); text-align:center; }
  .dk-vbtn{ display:inline-block; margin-top:11px; border:1px solid rgba(176,138,46,.45); background:rgba(202,166,75,.1); color:var(--l-gold-txt,#a08a4e); font:700 11px/1 -apple-system; border-radius:99px; padding:7px 14px; cursor:pointer; }
  .dk-virtue{ display:none; margin-top:11px; padding:13px 15px; background:rgba(202,166,75,.07); border-radius:12px; border-inline-start:3px solid rgba(176,138,46,.5); text-align:left; }
  .dk-virtue.show{ display:block; }
  .dk-vlabel{ font:800 9.5px/1 -apple-system; letter-spacing:.07em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin-bottom:6px; }
  .dk-incentive{ margin-bottom:12px; }
  .dk-itext{ font:700 13px/1.5 -apple-system; color:#5a4f3a; }
  .dk-virtblock + .dk-vnote, .dk-incentive + .dk-virtblock{ margin-top:12px; }
  .dk-vtext{ font:600 12.5px/1.55 -apple-system; color:#5a4f3a; }
  .dk-nbtn{ display:inline-block; margin-top:9px; margin-inline-start:8px; border:1px solid rgba(110,90,150,.4); background:rgba(110,90,150,.08); color:#6b5a96; font:700 11px/1 -apple-system; border-radius:99px; padding:7px 14px; cursor:pointer; }
  .dk-nawawi{ display:none; margin-top:11px; padding:13px 15px; background:rgba(110,90,150,.06); border-radius:12px; border-inline-start:3px solid rgba(110,90,150,.5); text-align:left; }
  .dk-nawawi.show{ display:block; }
  .dk-nar{ font-family:var(--f-ar); font-size:18px; line-height:2.0; color:#332d44; direction:rtl; text-align:right; white-space:pre-wrap; margin-bottom:10px; }
  .dk-ntext{ font:600 12.5px/1.6 -apple-system; color:#4a4458; white-space:pre-wrap; }
  .dk-nvbtn{ display:inline-block; margin-top:10px; border:1px solid rgba(176,138,46,.4); background:rgba(202,166,75,.08); color:var(--l-gold-txt,#a08a4e); font:700 10.5px/1 -apple-system; border-radius:99px; padding:6px 12px; cursor:pointer; }
  .dk-nvirtue{ display:none; margin-top:10px; padding-top:10px; border-top:.5px solid rgba(110,90,150,.2); }
  .dk-nvirtue.show{ display:block; }
  .dk-nsrc{ font:800 9.5px/1 -apple-system; letter-spacing:.06em; text-transform:uppercase; color:#8a7aad; margin-top:9px; }
  .dk-vnote{ font:600 12px/1.55 -apple-system; color:#7a6a45; margin-top:9px; }
  .dk-vnote::before{ content:'Scholarly note — '; font-weight:800; color:var(--l-gold-txt,#a08a4e); }
  .dk-mean{ font:500 13px/1.6 -apple-system; color:#5d5546; }
  .dk-src{ font:700 10px/1 -apple-system; letter-spacing:.06em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin-top:6px; }
  .dk-card-foot{ display:flex; align-items:center; gap:12px; margin-top:13px; }
  .dk-prog-track{ flex:1; height:8px; border-radius:99px; background:rgba(60,50,20,.1); overflow:hidden; }
  .dk-plus{ flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(176,138,46,.5); background:rgba(202,166,75,.12); color:#7a6322; font:300 27px/1 -apple-system, sans-serif; display:grid; place-items:center; }
  .dk-card:active .dk-plus{ background:rgba(202,166,75,.28); transform:scale(.95); }
  .dk-prog-fill{ height:100%; background:var(--l-gold,#caa64b); width:0%; transition:width .15s ease; }
  .dk-card.done .dk-prog-fill{ background:#5b8c6e; }
  .dk-count{ font:800 15px/1 'Manrope'; color:var(--l-ink2,#2b2415); font-variant-numeric:tabular-nums; }
  .dk-check{ color:#3c6b50; font:800 20px/1 -apple-system; }

  .dk-tasbih{ display:flex; flex-direction:column; align-items:center; gap:20px; padding-top:8px; }
  .dk-phrases{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .dk-phrase{ border:1px solid rgba(176,138,46,.5); background:transparent; color:var(--l-gold-txt,#a08a4e); font-family:var(--f-quran); font-size:18px; border-radius:99px; padding:7px 15px; cursor:pointer; transition:background .15s,color .15s,transform .1s; }
  .dk-phrase:hover{ background:rgba(202,166,75,.12); }.dk-phrase:active{ transform:scale(.96); }
  .dk-phrase.on{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); }
  .dk-phrase.custom{ border-style:dashed; }
  .dk-phrase-x{ margin-inline-start:8px; font:700 12px/1 -apple-system; color:var(--data-bad); }
  .dk-tbmode{ display:flex; gap:6px; }
  .dk-tbmodebtn{ border:1px solid rgba(176,138,46,.5); background:transparent; color:var(--l-gold-txt,#a08a4e); font:700 12px/1 -apple-system; border-radius:99px; padding:7px 16px; cursor:pointer; }
  .dk-tbmodebtn.on{ background:var(--l-gold,#caa64b); border-color:var(--l-gold,#caa64b); color:var(--l-ink,#1b1812); }
  .dk-tbmsg{ font:600 11px/1.2 -apple-system; color:var(--l-gold-txt,#a08a4e); min-height:14px; }
  /* ══ v1049 THE COUNTER — one surface, everywhere ═══════════════════════════
     The owner's ruling: "the way the counter works in focus mode is what I want
     to be the standard." So the draggable capsule (.mz-cap) and the session
     line (#mz-session) are DELETED and this — the Focus counter of v771/v778 —
     is the only counter the app has. The muṣḥaf page is the tap surface (+1),
     a hairline traces the page edge toward the rep target, and a docked bottom
     HUD reads in three zones: recite countdown LEFT · pace + ±1 + End CENTER ·
     the count RIGHT (tap = adjust). Rendered by modules/tools/counter-hud.js.
     Geometry is the design language: 44px controls, 12px radius, Manrope,
     one accent spent as a ring. */
  /* ══ COUNTER BAR — three zones (recite timer · keys · count) reading as one
     object. Controls are the site's standard flat 44px/12px pills, one gold
     accent (the pause-key ring), following light + dark. The v1172 "hardware
     slab / raised-and-depressing squircle keys" dialect is gone. v1138 safe-area
     floor preserved. Surface is the pre-redesign fade blend — see v1186 below. */
  /* v1186 (owner: "make it the way it was before the redesign, because before
     it used to blend it with the Mushaf"). The bar is not a card sitting ON the
     page — it IS the bottom of the page. A transparent→paper fade dissolves the
     muṣḥaf into the paper the controls rest on: no rounded card, no top hairline,
     no drop shadow, nothing to draw an edge. The content sits low (align-items:
     flex-end) with tall top padding so the gradient has real room to blend. */
  .ctr-hud{ position:fixed; left:0; right:0; bottom:0; z-index:47;
    /* v1276: three columns — the recite figure on the page's left text edge, the keys dead-centre,
       the count on the right text edge (the edges are --ctr-l/--ctr-r, seated by counter-hud.js) */
    display:grid; grid-template-columns:1fr auto 1fr; align-items:end; column-gap:16px;
    padding:26px var(--ctr-r, 18px) max(28px, calc(14px + env(safe-area-inset-bottom,0px))) var(--ctr-l, 18px);   /* v1297: 28, so PAUSED has its line under the keys */
    background:linear-gradient(180deg,
      rgba(var(--l-paper-rgb,255,253,246),0) 0%,
      rgba(var(--l-paper-rgb,255,253,246),.74) 46%,
      rgba(var(--l-paper-rgb,255,253,246),.96) 100%); }
  /* v1185 (owner: "make the bottom bar flush and inline"): the three zones
     size to content and sit as ONE tight centred inline row — timer · keys ·
     count — instead of each flex-growing to strand at the screen edges.
     v1187 ("balanced trio") — the two readouts are a MATCHED PAIR of ink
     numerals bracketing the keys, not a big count and a small timer. Both
     bottom-seat on a shared caption baseline so the bar reads as one composed
     line: RECITE ‖ keys ‖ ADJUST, not three stranded clusters. */
  .ctr-l, .ctr-r{ min-width:0; }
  .ctr-l{ justify-self:start; }
  .ctr-c{ justify-self:center; }
  .ctr-r{ justify-self:end; }
  /* ── v1073 · the recite window is adjustable in place ────────────────────
     Owner: "Add a way I can adjust the time on counter mode for rep pace."
     − and + flank the countdown, so the figure you are changing sits between
     the two controls that change it. They are 44px tall like every other
     control (H3) but narrow, because the left zone is capped at 150px and a
     third full-width button there would push the figure off the bar. */
  .ctr-l{ display:flex; align-items:flex-end; justify-content:center; gap:6px; }
  .ctr-l .rep-f{ display:flex; flex-direction:column; align-items:center; min-width:0; gap:3px; }
  /* Chunky squircle keys — fixed squares with no padding so the match cannot
     drift with font metrics or locale. Scoped to the RUNNING trio only
     ([data-act="end"]:not(.pri) excludes the DONE-state wide "End & record"
     button): −1 and End are 48px squircles, the play/pause key is a bigger 58px
     squircle. Both clear the 44px floor (H3). */
  /* v1268 (owner: "the buttons for the counter are off") — the three keys are ONE size:
     52px squares on the control radius, a hairline each, seated on one baseline; the
     play/pause key alone wore the 2px accent ring until v1284 — no ring now, see THE FAN
     below. Every value is a token — no gold literal, no 13px label, no Manrope. */
  .ctr-hud .acts{ display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 3); }
  .ctr-hud .acts [data-act="dec"],
  .ctr-hud .acts button[data-act="end"]:not(.pri),
  .ctr-hud .ctr-key,   /* v1273: the Adjust key, to the right of the count — the same round key */
  .ctr-hud .acts .ctr-more,   /* v1279: the dots key at the centre */
  .ctr-hud .acts .ctr-pause{ padding:0; width:56px; flex:0 0 56px; height:56px; min-height:56px; margin:0;
    border-radius:50%;   /* v1269 (owner: "change the shape of the buttons"): round keys, like Back and Close */
    /* v1274 (owner: "the buttons are white when they should blend in with the theme") — the keys are
       Back and Close's fill: the ink at 8% over whatever ground is under them, no card white, no hairline */
    border:0; background:color-mix(in srgb, var(--al-ink) 8%, transparent); color:var(--al-ink2); box-shadow:none;
    display:inline-flex; align-items:center; justify-content:center; font:700 var(--al-floor)/1 var(--f-ui); letter-spacing:0; }
  /* ── v1285 · THE FAN — option 1 of the counter-key options, built fresh (owner: "remove the
     circle around the circle, implement #1 fresh") ──────────────────────────────────────────
     AT REST: one round key in the centre with three dots. Nothing around it — no capsule, no
       ring; the same ink-8% fill as every key on this bar.
     TAPPED: −1 and End spring out to either side as their own round keys, and the dots become
       the pause glyph in the same key. Tap the page and they stay out while you count; they
       fold back after a moment of stillness. While paused they stay out and the key shows play.
     HOW: three cells in a row. The centre cell (.k-mid) is always 1 key wide and holds the dots
       key and the pause key stacked, cross-fading. The side cells (.k-dec, .k-end) grow from
       0 to 1 key wide (ease-out; a width never overshoots) while the key inside slides out from
       under the centre on a spring (the overshoot lives on transform). The .open class is
       toggled on the live element by counter-hud.js, so every motion runs and is interruptible;
       folded cells go visibility:hidden once the fold ends, so assistive tech skips them. */
  /* ── v1302 · THE FAN, IMPLEMENTED FRESH (owner: "don't reskin, full implementation fresh" —
     "why is there a mini circle inside the outline?"). The keys inside the capsule had been
     inheriting five generations of counter-key rules (v1268 squares, v1274 fills, v1279 dots,
     v1285 sleeve, v1297 layers) plus the DONE-state button rule below, whose dark-theme
     variant painted each key its own faint fill and hairline — the circle inside the outline.
     This block is the fan's ONLY stylesheet: every property of the capsule, the cells and the
     three keys is stated here, at the weight of the fan itself, in both themes through tokens;
     the legacy key rules are scoped away from it (.acts:not(.ctr-fan)).
     THE MOTION — Stretch (owner's pick of four, "The Counter Fan"): the one round key stretches
     into a capsule and the three keys surface inside it; folding, the words vanish at the first
     frame and only then the capsule shrinks ("have the text instadisappear and then the
     animation proceeds"). Nothing rotates or scales into a glyph. */
  .ctr-hud .acts.ctr-fan{ position:relative; display:flex; align-items:center; justify-content:center; gap:0; padding:0; margin:0;
    background:none; border:0; box-shadow:none; --fk:56px; --fg:8px; }
  /* the capsule: one shape whose width moves */
  .ctr-hud .acts.ctr-fan::before{ content:''; position:absolute; left:50%; top:50%; width:var(--fk); height:var(--fk); transform:translate(-50%, -50%);
    border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 8%, transparent);
    transition:width var(--al-d3, .36s) var(--al-eo, cubic-bezier(.2,.8,.2,1)); }
  .ctr-hud .acts.ctr-fan.open::before{ width:calc(var(--fk) * 3 + var(--fg) * 6); }
  /* the cells: three, the centre always one key wide, the sides growing from nothing */
  .ctr-hud .acts.ctr-fan .kw{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:var(--fk); height:var(--fk); margin:0 var(--fg); padding:0; overflow:visible;
    transition:width var(--al-d3, .36s) var(--al-eo, cubic-bezier(.2,.8,.2,1)), margin var(--al-d3, .36s) var(--al-eo, cubic-bezier(.2,.8,.2,1)); }
  .ctr-hud .acts.ctr-fan:not(.open) .kw:not(.k-mid){ width:0; margin:0; visibility:hidden; pointer-events:none;
    transition-property:width, margin, visibility; transition-delay:0s, 0s, var(--al-d3, .36s); }
  /* the keys: a round target with NO fill, NO border, NO shadow of its own, in either theme — the capsule is the fill */
  .ctr-hud .acts.ctr-fan .kw > button, body.theme-dark .ctr-hud .acts.ctr-fan .kw > button{ -webkit-appearance:none; appearance:none; flex:none; width:var(--fk); height:var(--fk); min-width:0; min-height:0; margin:0; padding:0;
    border:0; border-radius:50%; background:transparent; box-shadow:none; outline:0; color:var(--al-ink);
    display:inline-flex; align-items:center; justify-content:center; font:700 var(--al-floor)/1 var(--f-ui); letter-spacing:0; cursor:pointer;
    will-change:transform, opacity; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-tap-highlight-color:transparent; }
  .ctr-hud .acts.ctr-fan .kw > button:active, body.theme-dark .ctr-hud .acts.ctr-fan .kw > button:active{ background:color-mix(in srgb, var(--al-ink) 12%, transparent); transform:scale(.96); }
  .ctr-hud .acts.ctr-fan .kw > button:focus-visible{ outline:2px solid var(--al-focus); outline-offset:2px; }
  .ctr-hud .acts.ctr-fan .kw > button svg{ display:block; width:18px; height:18px; pointer-events:none; }
  /* the side keys: up a beat after the capsule starts to grow; gone at the first frame when it folds */
  .ctr-hud .acts.ctr-fan .kw:not(.k-mid) > button{ opacity:1; transform:none;
    transition:opacity var(--al-d2, .24s) ease .12s, transform var(--al-d3, .36s) cubic-bezier(.2,.9,.25,1.1) .1s; }
  .ctr-hud .acts.ctr-fan:not(.open) .kw:not(.k-mid) > button{ opacity:0; transform:scale(.7); transition:none; }
  /* the centre: the dots key and the pause key stacked, cross-fading; pause goes at once on the fold, the dots fade back */
  .ctr-hud .acts.ctr-fan .k-mid > button{ transition:opacity var(--al-d1, .18s) ease; }
  .ctr-hud .acts.ctr-fan .k-mid > .ctr-pause{ position:absolute; inset:0; margin:auto; }
  .ctr-hud .acts.ctr-fan.open .k-mid > .ctr-more{ opacity:0; pointer-events:none; }
  .ctr-hud .acts.ctr-fan:not(.open) .k-mid > .ctr-pause{ opacity:0; pointer-events:none; transition:none; }
  @media (max-width:520px){ .ctr-hud .acts.ctr-fan{ --fk:48px; --fg:5px; } }   /* the phone tier, as the bar's own keys */
  /* audit OR-reader-G01: the note above was never closed, so it swallowed the rules down to the v1297 note's end. The two
     :active presses that sat here stay out (never live since; the shared press, AL.10, answers every key) */
  @media (min-width:744px){ .ctr-hud .acts.ctr-fan{ --fk:64px; --fg:10px; } }
  @media (prefers-reduced-motion:reduce){ .ctr-hud .acts.ctr-fan::before, .ctr-hud .acts.ctr-fan .kw, .ctr-hud .acts.ctr-fan .kw > button{ transition:opacity var(--q-d-150, 150ms) var(--q-ease); } }   /* v1649: live again since OR-reader-G01 closed the note above; Reduce Motion keeps a short fade (motion lock) */
  .ctr-c{ flex:0 0 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
  /* v1297 (owner: "when you press pause the word PAUSED comes up, which is good, but it moves the 3 dots —
     it should just spawn underneath and that's that") — the meta line is out of the keys' flow: it hangs
     from the keys' foot into the bar's bottom padding, so the keys never move when it comes or goes. */
  .ctr-hud .ctr-c > .meta{ position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); width:max-content; max-width:min(92vw, 360px); }
  /* v1273: the count zone is a row — the figure (with its set caption beneath) and the Adjust key */
  .ctr-r{ display:flex; flex-direction:row; align-items:center; gap:calc(var(--al-u) * 3); }
  .ctr-r[data-act]{ cursor:pointer; }
  .ctr-rf{ display:flex; flex-direction:column; align-items:center; gap:3px; }
  .ctr-fig{ display:flex; align-items:baseline; gap:4px; }
  /* v1187 — matched to the recite figure at 34px so the count and the timer
     read as ONE pair of bookends, not a headline and a footnote. */
  /* v1273 (owner: "the 0 should be the same font as the 15") — the count, its denominator and
     the recite figure are ONE face at ONE size, the UI face; the denominator is the muted ink. */
  .ctr-hud .n, .ctr-hud .rep, .ctr-hud .of{ font:700 34px/1 var(--f-ui); color:var(--al-ink); font-variant-numeric:tabular-nums; letter-spacing:0; }
  .ctr-hud.armed .n{ font-size:22px; letter-spacing:0; }
  /* v1139 — these captions measured 2.54:1 on paper (verify/tiles.js caught it
     on the very first sweep; no probe had ever asserted contrast here). Rule H1
     is 4.5:1 for body text, no exceptions, and these are the labels the owner
     circled as hard to read. --l-mut is the muted ink that already passes; the
     soft tone stays for ornament, not for words. */
  .ctr-hud .of{ color:var(--al-mut); }
  /* v1187 — the recite figure is the LEFT bookend, matched to the count on the
     right: same 34px weight, same plain ink. Gold is still spent only on the
     pause-key ring, so both figures sit at equal typographic rank. */
  .ctr-hud .rep-f.zero .rep{ color:var(--al-mut); }   /* v1303: the window is over — the figure holds at 0:00, quiet */
  .ctr-hud .rep-k, .ctr-adj{ display:block; font:500 var(--al-floor)/1 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--al-mut); }   /* v1273: the kit's meaning line, never uppercase */
  .ctr-adj{ color:var(--trap-ayah); font-weight:600; }
  .ctr-adj .ctr-set{ color:var(--al-mut); font-weight:500; }   /* v1281: the set count reads in the caption's grey; only the tappable word is red */   /* v1278 (owner: "make the adjust text red") — the one tappable caption, in the red the layer already holds (the trap-ayah token, day and night) */
  /* v1187 — spacing to the caption now lives in the rep-f column gap (3px), matched
     to the count's zone, so both figures seat on the same baseline. */
  /* Responsive steps sit AFTER the base type rules on purpose: the base .n/.rep/.of
     use the `font:` shorthand, so a media override of font-size only wins if it is
     LATER in source order (same specificity). Keep these two blocks last. */
  /* v1185 — the base inline cluster is ~490px: it fits a tablet/desktop but
     overflows a phone. Below 520px the zones become shrinkable and distribute
     across the width (timer left · keys centred · count right) so the whole row
     stays on screen, with the figures a touch smaller. */
  @media (max-width:520px){
    .ctr-hud{ column-gap:6px; }
    .ctr-r{ gap:6px; }
    .ctr-hud .acts{ gap:6px; }
    /* v1273: five keys and two figures on a 375 phone — 48px keys, a 44px Adjust, figures at 24/22 */
    .ctr-hud .acts [data-act="dec"],
    .ctr-hud .acts button[data-act="end"]:not(.pri),
    .ctr-hud .acts .ctr-more,
    .ctr-hud .acts .ctr-pause{ width:48px; flex-basis:48px; height:48px; min-height:48px; font-size:14px; }
    .ctr-hud .n, .ctr-hud .of{ font-size:24px; }
    .ctr-hud .rep{ font-size:22px; }
    .ctr-hud .ctr-key{ width:44px; flex-basis:44px; height:44px; min-height:44px; font-size:12px; }
  }
  /* v1188 (owner: "account for 13 inch iPad as well") — rule H5: a component
     must GROW on tablets, not float as a phone-sized cluster centred in a huge
     bar. From 700px up (iPad mini · 11″ · 13″ · desktop) the whole trio scales
     — both figures, the denominator, the three keys and the nudgers — and the
     zone gaps open, so the composed line keeps proportional presence on a 13″
     screen instead of reading as a shrunken toolbar. Still one centred line. */
  @media (min-width:700px){
    .ctr-hud{ column-gap:32px; padding-top:30px; }
    .ctr-hud .n, .ctr-hud .rep, .ctr-hud .of{ font-size:42px; }
    .ctr-hud .acts{ gap:16px; }
    /* v1268: the three keys stay ONE size on the tablet too — 60px squares, the End label on the floor */
    .ctr-hud .acts [data-act="dec"],
    .ctr-hud .acts button[data-act="end"]:not(.pri),
    .ctr-hud .ctr-key,
    .ctr-hud .acts .ctr-more,
    .ctr-hud .acts .ctr-pause{ width:64px; flex-basis:64px; height:64px; min-height:64px; font-size:var(--al-floor); }
  }
  /* v1054: a caption, not a headline — matched to .rep-k / .ctr-adj, the two
     labels it now shares a baseline with.
     v1057: INSTRUCTIONS ONLY (begin / paused / auto / complete). While a session
     simply runs there is nothing to instruct, so counter-hud.js emits no .meta
     at all — the bar is the countdown, the two controls and the count. */
  .ctr-hud .meta{ font:700 10.5px/1 "Manrope",-apple-system,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--l-mut,#6b6353); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .ctr-hud.done .n{ color:var(--l-gold-deep,#8a7340); }
  .ctr-hud .acts{ display:flex; align-items:center; gap:12px; }
  /* Flat site-standard keys: 1px hairline, paper face, 12px control radius, a
     subtle scale on :active (no raised drop, no hardware depress). Applies to
     the DONE-state .pri / .ghost text buttons too; the running trio just gets
     the fixed-square sizing above. */
  .ctr-hud .acts:not(.ctr-fan) button{ min-height:44px; min-width:44px; padding:0 16px; border-radius:12px; font:800 15px/1 "Manrope",-apple-system,sans-serif; cursor:pointer;
    border:1px solid rgba(60,50,20,.16); background:var(--l-paper,#fffdf6); color:var(--l-ink2,#2b2415); }
  .ctr-hud .acts:not(.ctr-fan) button:active{ transform:scale(.96); }
  .ctr-hud .acts .pri{ border-color:var(--l-gold,#caa64b); box-shadow:inset 0 0 0 1px var(--l-gold,#caa64b); }
  .ctr-hud .acts .ghost{ border-color:transparent; background:transparent; color:var(--l-mut,#6b6353); }
  body.theme-dark .ctr-hud{ background:linear-gradient(180deg,
    rgba(18,14,10,0) 0%,
    rgba(18,14,10,.7) 46%,
    rgba(18,14,10,.95) 100%); }
  body.theme-dark .ctr-hud .n{ color:var(--d-ink,#e8dcc0); }
  body.theme-dark .ctr-hud.done .n{ color:#d4b573; }
  body.theme-dark .ctr-hud .of, body.theme-dark .ctr-hud .rep-k, body.theme-dark .ctr-adj{ color:var(--d-ink3,#9a8f77); }
  body.theme-dark .ctr-hud .meta{ color:var(--d-ink3,#9a8f77); }
  body.theme-dark .ctr-hud .rep{ color:var(--d-ink,#e8dcc0); }
  body.theme-dark .ctr-hud .acts:not(.ctr-fan) button{ border-color:var(--d-line2,#4a4234); background:rgba(255,253,246,.045); color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .ctr-hud .acts .pri{ border-color:var(--d-acc,#2bb6a6); box-shadow:inset 0 0 0 1px var(--d-acc,#2bb6a6); }
  body.theme-dark .ctr-hud .acts .ghost{ border-color:transparent; background:transparent; color:var(--d-soft,#8d8371); }
  /* while counting, lift the page pill clear of the HUD band */
  /* v1056 (owner): the page pill is HIDDEN while a session runs — same as the
     reverse drill (body.rb-on) and the old audio dock. It stops the
     three-version argument over where it should sit, and the bar drops back to
     ~102px because it no longer reserves a band for it. */
  body.ctr-counting #pill{ display:none; }

  .ctr-plus1{ position:fixed; z-index:48; color:var(--l-gold-txt,#a08a4e); font:800 17px "Manrope",-apple-system; pointer-events:none;
    transform:translate(-50%,-50%); animation:ctrp1 .5s ease-out forwards; }
  body.theme-dark .ctr-plus1{ color:var(--d-acc,#2bb6a6); }
  @keyframes ctrp1{ to{ opacity:0; transform:translate(-50%,-160%); } }
  @media (prefers-reduced-motion: reduce){ .ctr-plus1{ animation:none; opacity:0; } }
  /* ── v776 Hub Mirror: the Browse floor (lead card · one search · three doors) ── */
  .dk-browse{ display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto; }
  .dk-lead{ display:flex; align-items:center; gap:10px; width:100%; border:1px solid rgba(176,139,43,.35); border-radius:15px;
    background:rgba(176,139,43,.06); padding:14px 16px; cursor:pointer; text-align:left; }
  body.theme-dark .dk-lead{ border-color:rgba(212,181,115,.3); background:rgba(212,181,115,.06); }
  .dk-lead-cap{ flex:none; font:700 10px/1 -apple-system; letter-spacing:.12em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); }
  body.theme-dark .dk-lead-cap{ color:var(--d-acc-txt,#d4b573); }
  .dk-lead-t{ flex:1; font:700 15px/1.3 -apple-system; color:var(--l-ink,#1b1812); }
  body.theme-dark .dk-lead-t{ color:var(--d-ink,#ece3cf); }
  .dk-doors{ display:flex; flex-direction:column; gap:9px; }
  .dk-door{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; position:relative; width:100%;
    border:1px solid rgba(60,50,20,.13); border-radius:15px; background:var(--l-paper,#fffdf6); padding:16px 40px 16px 17px; cursor:pointer; text-align:left; }
  body.theme-dark .dk-door{ border-color:var(--d-line); background:rgba(214,196,158,.04); }
  .dk-door-t{ font:800 16px/1.15 -apple-system; color:var(--l-ink,#1b1812); }
  body.theme-dark .dk-door-t{ color:var(--d-ink,#ece3cf); }
  .dk-door-s{ font:600 12px/1.35 -apple-system; color:var(--l-soft,#a89b80); }
  .dk-door .dh-chev, .dk-lead .dh-chev{ position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--l-soft,#a89b80); font:600 20px/1 -apple-system; }
  .dk-lead .dh-chev{ position:static; transform:none; }
  /* ── Dua hub (Design C, v765): Now card · favorites rail · struggles · player ── */
  .dh-hub{ display:flex; flex-direction:column; gap:14px; max-width:560px; margin:0 auto; }
  .dh-now{ border-radius:16px; background:var(--l-paper,#fffdf6); border:1px solid rgba(27,24,18,.09); padding:16px 17px; box-shadow:0 1px 2px rgba(27,24,18,.04); }
  .dh-now-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .dh-now-cap{ font:800 10.5px/1.3 -apple-system, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); }
  .dh-now-cap em{ font-style:normal; color:var(--l-soft,#a89b80); text-transform:none; letter-spacing:0; font-weight:700; }
  .dh-miniring{ position:relative; width:54px; height:54px; flex:none; }
  .dh-mini-lbl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 11px/1 -apple-system; color:var(--l-gold-deep,#8a7340); }
  .dh-now-ar{ font-family:var(--f-quran); font-size:24px; line-height:1.9; color:var(--l-ink,#1b1812); direction:rtl; text-align:center; margin:10px 0 12px; }
  .dh-cta{ width:100%; border:0; border-radius:13px; background:#2bb6a6; color:#fff; font:800 14.5px/1 'Manrope',-apple-system; padding:15px; cursor:pointer; min-height:48px; }
  .dh-cta:active{ transform:scale(.99); }
  .dh-cta.ghost{ background:transparent; border:1.5px solid rgba(43,182,166,.5); color:#1c7a6e; }
  .dh-next-big{ font:800 19px/1.3 'Manrope',-apple-system; color:var(--l-ink2,#2b2415); margin:8px 0 12px; }
  .dh-next-big em{ font-style:normal; color:var(--l-soft,#a89b80); font-weight:700; font-size:14px; }
  .dh-receipt{ display:flex; align-items:center; gap:9px; font:700 14px/1.4 -apple-system; color:#3c6b50; margin:10px 0 12px; }
  .dh-again{ border:0; background:transparent; color:var(--l-gold-txt,#a08a4e); font:700 12.5px/1 -apple-system; cursor:pointer; padding:8px 0; }
  .dh-rowhd{ font:800 10.5px/1 -apple-system; letter-spacing:.1em; text-transform:uppercase; color:var(--l-soft,#a89b80); margin:2px 2px -6px; }
  .dh-favrail{ display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent); }
  .dh-fav{ flex:none; width:158px; border-radius:16px; background:var(--l-paper,#fffdf6); border:1px solid rgba(27,24,18,.09); padding:13px 14px 12px; box-shadow:0 1px 2px rgba(27,24,18,.05); cursor:pointer; text-align:left; }
  .dh-fav-star{ color:var(--l-gold,#caa64b); font-size:14px; display:block; margin-bottom:7px; }
  .dh-fav-ar{ font-family:var(--f-quran); font-size:19px; line-height:1.5; color:var(--l-ink,#1b1812); direction:rtl; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dh-fav-nm{ font:700 12px/1.25 -apple-system; color:var(--l-ink2,#2b2415); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dh-fav-ct{ font:700 11px/1 -apple-system; color:var(--l-soft,#a89b80); margin-top:3px; }
  .dh-sgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
  .dh-sgpill{ border-radius:16px; background:var(--l-paper,#fffdf6); border:1px solid rgba(27,24,18,.09); padding:13px 6px; text-align:center; font:800 12px/1.2 -apple-system; color:var(--l-ink2,#2b2415); cursor:pointer; min-height:48px; box-shadow:0 1px 2px rgba(27,24,18,.04); }
  .dh-sgpill:active{ background:rgba(202,166,75,.12); }
  .dh-foot{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
  .dh-footrow{ display:flex; align-items:center; justify-content:space-between; border-radius:14px; border:1px solid rgba(27,24,18,.09); background:var(--l-paper,#fffdf6); padding:14px 15px; font:700 13.5px/1 -apple-system; color:var(--l-ink2,#2b2415); cursor:pointer; min-height:48px; }
  .dh-chev{ color:var(--l-soft,#a89b80); font-size:17px; }
  /* sheet */
  .dh-sheet-scrim{ position:absolute; inset:0; background:rgba(20,17,12,.35); z-index:4; border-radius:22px; }
  .dh-sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--l-paper,#fffdf6); border-radius:22px 22px 0 0; box-shadow:0 -18px 50px -12px rgba(27,24,18,.35); padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px)); z-index:5; animation:dhup .22s ease-out; }
  @keyframes dhup{ from{ transform:translateY(24px); opacity:0; } }
  .dh-grab{ width:40px; height:5px; border-radius:99px; background:rgba(27,24,18,.14); margin:0 auto 12px; }
  .dh-sheet h4{ font:800 18px/1.2 'Manrope',-apple-system; color:var(--l-ink,#1b1812); display:flex; align-items:baseline; gap:9px; margin:0 0 4px; }
  .dh-sheet h4 small{ font:800 11px/1 -apple-system; color:#2bb6a6; letter-spacing:.06em; text-transform:uppercase; }
  .dh-sheet-dua{ position:relative; border-top:1px solid rgba(27,24,18,.08); padding:12px 0 10px; }
  .dh-sheet-ar{ font-family:var(--f-quran); font-size:22px; line-height:1.9; color:var(--l-ink,#1b1812); direction:rtl; text-align:right; }
  .dh-sheet-tr{ font:500 12.5px/1.55 -apple-system; color:var(--l-mut,#6b6353); margin-top:6px; }
  .dh-sheet-ct{ position:absolute; top:12px; left:0; font:800 11.5px/1 'Manrope'; color:#7a6322; background:rgba(202,166,75,.18); border-radius:99px; padding:5px 10px; }
  .dh-sheet-go{ margin-top:12px; }
  .dh-sheet-more{ width:100%; border:0; background:transparent; color:var(--l-gold-txt,#a08a4e); font:700 12.5px/1 -apple-system; padding:12px 0 2px; cursor:pointer; }
  /* player */
  .dh-play{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 20px; overflow:hidden; min-height:100%; }
  .dh-play-pos{ font:800 11px/1 -apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--l-soft,#a89b80); }
  .dh-ringwrap{ position:relative; width:288px; height:288px; margin-top:6px; transition:transform .09s ease; }
  .dh-ringwrap.dh-press{ transform:scale(.97); }
  .dh-ringwrap svg circle:last-child{ transition:stroke-dashoffset .18s ease; }
  .dh-ringcenter{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 34px; text-align:center; }
  .dh-play-ar{ font-family:var(--f-quran); font-size:25px; line-height:1.6; color:var(--l-ink,#1b1812); direction:rtl; max-height:150px; overflow:hidden; }
  .dh-left{ font:800 64px/1 'Manrope',-apple-system; letter-spacing:-2px; color:var(--l-ink,#1b1812); margin-top:2px; font-variant-numeric:tabular-nums; }
  .dh-of{ font:800 11.5px/1 -apple-system; letter-spacing:.1em; text-transform:uppercase; color:var(--l-soft,#a89b80); }
  .dh-play-tr{ font:500 13px/1.6 -apple-system; color:var(--l-mut,#6b6353); text-align:center; max-width:330px; padding:0 14px; }
  .dh-upnext{ font:700 11.5px/1 -apple-system; color:var(--l-soft,#a89b80); margin-top:4px; }
  .dh-ripple{ position:absolute; width:120px; height:120px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(circle,rgba(43,182,166,.22) 0%,rgba(43,182,166,.08) 46%,transparent 70%); animation:dhrip .5s ease-out forwards; }
  @keyframes dhrip{ from{ opacity:1; scale:.4; } to{ opacity:0; scale:1.6; } }
  .dh-float{ position:absolute; font:800 17px/1 'Manrope'; color:#1c7a6e; pointer-events:none; animation:dhfloat .7s ease-out forwards; }
  @keyframes dhfloat{ to{ transform:translateY(-34px); opacity:0; } }
  .dh-wash{ position:absolute; inset:0; background:rgba(43,182,166,.16); display:flex; align-items:center; justify-content:center; color:#1c7a6e; animation:dhwash .3s ease-out; border-radius:16px; }
  @keyframes dhwash{ from{ opacity:0; } }
  .dh-flood{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; color:#1c7a6e; text-align:center; }
  .dh-flood-t{ font:800 20px/1.2 'Manrope'; color:var(--l-ink,#1b1812); }
  .dh-flood-s{ font:600 13px/1 -apple-system; color:var(--l-soft,#a89b80); margin-bottom:10px; }
  /* reminders */
  .dh-remwrap{ display:flex; flex-direction:column; gap:10px; max-width:560px; margin:0 auto; }
  .dh-remnote{ font:500 12.5px/1.55 -apple-system; color:var(--l-mut,#6b6353); background:rgba(202,166,75,.08); border:1px solid rgba(202,166,75,.25); border-radius:12px; padding:11px 13px; }
  .dh-remrow{ display:flex; align-items:center; gap:13px; border-radius:16px; background:var(--l-paper,#fffdf6); border:1px solid rgba(27,24,18,.09); padding:14px 15px; }
  .dh-rem-t{ flex:1; min-width:0; }
  .dh-rem-t b{ display:block; font:800 14.5px/1.2 -apple-system; color:var(--l-ink2,#2b2415); }
  .dh-rem-t span{ display:block; font:700 11.5px/1.6 -apple-system; color:var(--l-soft,#a89b80); margin-top:3px; }
  .dh-rem-t em{ font-style:normal; color:var(--l-gold-txt,#a08a4e); }
  .dh-rem-off{ border:1px solid rgba(27,24,18,.14); border-radius:8px; background:var(--l-paper,#fffdf6); font:700 11.5px/1 -apple-system; color:var(--l-ink2,#2b2415); padding:4px 6px; }
  .dh-rem-tog{ flex:none; width:52px; height:32px; border-radius:99px; border:0; background:rgba(60,50,20,.14); position:relative; cursor:pointer; transition:background .18s; }
  .dh-rem-tog i{ position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--l-card,#fff); box-shadow:0 1px 4px rgba(0,0,0,.2); transition:left .18s; }
  .dh-rem-tog.on{ background:#2bb6a6; }
  .dh-rem-tog.on i{ left:23px; }
  .dh-banner{ position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); left:12px; right:12px; max-width:430px; margin:0 auto; z-index:60;
    background:var(--l-paper,#fffdf6); border:1px solid rgba(202,166,75,.4); border-radius:14px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    box-shadow:0 10px 30px -10px rgba(27,24,18,.4); cursor:pointer; font:700 13px/1.3 -apple-system; color:var(--l-ink2,#2b2415); animation:dhup .25s ease-out; }
  .dh-banner span{ color:#1c7a6e; flex:none; }
  /* dark */
  body.theme-dark .dh-now, body.theme-dark .dh-fav, body.theme-dark .dh-sgpill, body.theme-dark .dh-footrow,
  body.theme-dark .dh-remrow, body.theme-dark .dh-sheet, body.theme-dark .dh-banner{ background:var(--d-surface,#201913); border-color:var(--d-line2,#3a3122); box-shadow:none; }
  body.theme-dark .dh-now-ar, body.theme-dark .dh-fav-ar, body.theme-dark .dh-play-ar, body.theme-dark .dh-left,
  body.theme-dark .dh-sheet-ar, body.theme-dark .dh-sheet h4, body.theme-dark .dh-next-big, body.theme-dark .dh-flood-t{ color:var(--d-ink,#ece3cf); }
  body.theme-dark .dh-fav-nm, body.theme-dark .dh-sgpill, body.theme-dark .dh-footrow, body.theme-dark .dh-rem-t b, body.theme-dark .dh-banner{ color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .dh-now-cap, body.theme-dark .dh-mini-lbl, body.theme-dark .dh-fav-star, body.theme-dark .dh-sheet-more, body.theme-dark .dh-rem-t em, body.theme-dark .dh-again{ color:var(--d-acc-txt,#d4b573); }
  body.theme-dark .dh-play-tr, body.theme-dark .dh-sheet-tr, body.theme-dark .dh-remnote{ color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .dh-remnote{ background:rgba(214,196,158,.07); border-color:var(--d-line2,#3a3122); }
  body.theme-dark .dh-ring-track{ stroke:rgba(214,196,158,.14); }
  body.theme-dark .dh-rem-off{ background:var(--d-surface,#201913); border-color:var(--d-line2,#3a3122); color:var(--d-ink2,#d8cdb4); }
  body.theme-dark .dh-rem-tog{ background:rgba(214,196,158,.18); }
  body.theme-dark .dh-rem-tog.on{ background:var(--d-acc,#2bb6a6); }
  .dk-tbcfg{ margin-top:14px; width:min(440px,90%); }
  .dk-tbcfg-sum{ list-style:none; cursor:pointer; font:700 12.5px/1 -apple-system, sans-serif; color:#7a6f59;
    border:1.5px dashed rgba(60,50,20,.22); border-radius:12px; padding:12px 14px; text-align:center;
    -webkit-user-select:none; user-select:none; }
  .dk-tbcfg-sum::-webkit-details-marker{ display:none; }
  .dk-tbcfg[open] .dk-tbcfg-sum{ margin-bottom:10px; }
  body.theme-dark .dk-tbcfg-sum{ color:var(--d-soft); border-color:var(--d-line2); }
  .dk-tbcfg .dk-tbset{ width:100%; }
  .dk-tbset{ display:flex; gap:8px; width:min(440px,90%); align-items:center; }
  .dk-tbinput{ flex:1; min-width:0; border:1px solid rgba(60,50,20,.18); background:rgba(60,50,20,.03); border-radius:10px; padding:9px 12px; font-family:var(--f-quran); font-size:17px; color:var(--l-ink,#1b1812); outline:none; }
  .dk-tbinput:focus{ border-color:rgba(176,138,46,.55); background:var(--l-card,#fff); }
  .dk-tbcount{ width:58px; border:1px solid rgba(60,50,20,.18); background:rgba(60,50,20,.03); border-radius:10px; padding:9px 6px; font:700 14px/1 -apple-system; text-align:center; color:var(--l-ink,#1b1812); outline:none; }
  .dk-bigring{ width:min(260px, 64vw); height:min(260px, 64vw); border-radius:50%; border:2px solid rgba(176,138,46,.4);
    background:radial-gradient(circle at 50% 38%, rgba(202,166,75,.14), rgba(202,166,75,.05) 70%); box-shadow:0 12px 34px -14px rgba(176,138,46,.55), inset 0 0 0 7px rgba(202,166,75,.06);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .15s ease; }
  .dk-bigring:active{ background:radial-gradient(circle at 50% 38%, rgba(202,166,75,.26), rgba(202,166,75,.1) 70%); transform:scale(.97); box-shadow:0 8px 22px -14px rgba(176,138,46,.6), inset 0 0 0 7px rgba(202,166,75,.12); }
  .dk-bignum{ font:800 66px/.9 'Manrope'; color:var(--l-ink2,#2b2415); font-variant-numeric:tabular-nums; }
  .dk-bigtarget{ font:700 14px/1 -apple-system; color:var(--l-soft,#a89b80); }
  .dk-bigphrase{ font-family:var(--f-quran); font-size:26px; line-height:1.9; color:#5a420e; direction:rtl; text-align:center; max-width:min(560px,92%); }
  .dk-tbtn{ border:1px solid rgba(60,50,20,.16); background:rgba(var(--l-paper-rgb,255,253,246),.6); color:var(--l-mut,#6b6353); font:700 13px/1 -apple-system; border-radius:99px; padding:11px 20px; cursor:pointer; }

  /* ── Study panel (ADDITIVE · aids 25/29/30/31/34/37 in one pill) ───────── */
  .ins-root{ max-width:720px; margin:0 auto; }
  .ins-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px; }
  .ins-nav button{ border:1px solid rgba(60,50,20,.16); background:var(--l-paper,#fffdf6); color:var(--l-mut,#6b6353); font:800 17px/1 -apple-system; border-radius:10px; padding:7px 14px; cursor:pointer; }
  .ins-nav button:active{ background:rgba(60,50,20,.05); }
  .ins-ref{ text-align:center; min-width:160px; }
  .ins-ref .nm{ font:800 15px/1.2 'Manrope',-apple-system; color:var(--l-ink2,#2b2415); }
  .ins-ref .nm small{ font-family:var(--f-quran); font-weight:400; font-size:18px; color:var(--l-gold-deep,#8a7340); margin-inline-start:7px; }
  .ins-ref .rf{ font:700 10.5px/1 -apple-system; letter-spacing:.06em; color:var(--l-soft,#a89b80); margin-top:4px; }
  .ins-ar{ font-family:var(--f-quran); font-size:27px; line-height:2.1; direction:rtl; text-align:center; color:var(--l-ink,#1b1812); margin:16px 0 2px; }
  .ins-sec{ border-top:1px solid rgba(60,50,20,.1); padding:14px 2px 2px; margin-top:8px; }
  .ins-lbl{ font:800 10px/1 -apple-system; letter-spacing:.09em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin-bottom:9px; display:flex; align-items:center; gap:7px; }
  .ins-lbl .ic{ font-size:12px; opacity:.8; }
  .ins-theme{ font:600 14.5px/1.55 -apple-system; color:var(--l-ink3,#3d3829); }
  .ins-mun{ font:500 13.5px/1.6 -apple-system; color:#4a4234; }
  .ins-item{ display:flex; gap:12px; padding:8px 0; align-items:baseline; }
  .ins-item + .ins-item{ border-top:.5px solid rgba(60,50,20,.07); }
  .ins-w{ font-family:var(--f-quran); font-size:21px; line-height:1.5; color:var(--l-ink,#1b1812); flex:none; min-width:80px; text-align:right; direction:rtl; }
  .ins-name{ font:800 12px/1.35 -apple-system; color:#6b5a96; flex:none; min-width:80px; }
  .ins-note{ font:500 13px/1.55 -apple-system; color:#5a4f3a; }
  .ins-empty{ text-align:center; color:var(--l-soft,#a89b80); padding:30px 12px; font-size:14px; }
  .ins-empty small{ display:block; margin-top:6px; color:#bcae93; font-size:12px; }
  .ins-loading{ text-align:center; color:var(--l-soft,#a89b80); padding:44px 10px; }
  .ins-taf{ font-family:var(--f-quran); font-size:18.5px; line-height:2.0; direction:rtl; text-align:right; color:var(--l-ink3,#3d3829); }
  .ins-src{ font:700 9.5px/1.2 -apple-system; letter-spacing:.04em; text-transform:uppercase; color:#bcae93; margin-top:8px; direction:ltr; }

  /* ── Drill panel (ADDITIVE · aids 10 reverse-recall + 11 listen-continue) ── */
  .dr-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
  .dr-tab{ border:1px solid rgba(60,50,20,.16); background:var(--l-paper,#fffdf6); color:var(--l-mut,#6b6353); font:700 13px/1 -apple-system; border-radius:99px; padding:9px 16px; cursor:pointer; }
  .dr-tab.on{ background:#3f8a86; border-color:#3f8a86; color:#fff; }
  .dr-host{ max-width:640px; margin:0 auto; }
  .dr-intro{ color:var(--l-mut,#6b6353); font-size:13px; line-height:1.5; margin:0 2px 14px; text-align:center; }
  .dr-card{ border:1px solid rgba(60,50,20,.14); background:#fffdf9; border-radius:16px; padding:18px; }
  .dr-meta{ font:700 11px/1 -apple-system; letter-spacing:.06em; text-transform:uppercase; color:var(--l-soft,#a89b80); text-align:center; }
  .dr-line{ font-family:var(--f-quran); font-size:24px; line-height:2.0; direction:rtl; text-align:center; color:var(--l-ink,#1b1812); margin:10px 0; }
  .dr-line.q{ color:#41618c; }
  .dr-hidden{ filter:blur(8px); user-select:none; opacity:.6; }
  .dr-dots{ text-align:center; color:var(--data-none); font-size:20px; letter-spacing:.3em; margin:2px 0; }
  .dr-ctrls{ display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; align-items:center; }
  .dr-btn{ border:1px solid rgba(60,50,20,.16); background:var(--l-paper,#fffdf6); color:var(--l-ink,#1b1812); font:700 13px/1 -apple-system; border-radius:99px; padding:11px 17px; cursor:pointer; }
  .dr-btn:active{ transform:translateY(1px); }
  .dr-btn.go{ background:#3f8a86; border-color:#3f8a86; color:#fff; }
  .dr-btn.ghost{ background:transparent; color:#41618c; border-color:rgba(91,124,168,.5); }
  .dr-btn.off{ opacity:.4; pointer-events:none; }
  .dr-score{ margin-inline-start:auto; font:800 13px/1 'Manrope'; color:var(--l-mut,#6b6353); font-variant-numeric:tabular-nums; }
  .dr-fb{ margin-top:11px; font:700 13px/1.4 -apple-system; min-height:16px; }
  .dr-fb.ok{ color:var(--data-ok); } .dr-fb.no{ color:var(--data-bad); }
  .dr-status{ font:600 11.5px/1 -apple-system; color:var(--l-soft,#a89b80); }

  /* ── Strength panel (ADDITIVE · aid #44 page strength + one-tap review log) ── */
  #strength-pill.on{ background:#b0685a; border-color:#b0685a; color:#fff; }
  .st-root{ max-width:600px; margin:0 auto; }
  .st-cur{ text-align:center; }
  .st-pg{ font:800 14px/1 'Manrope'; color:var(--l-ink2,#2b2415); }
  .st-ring{ position:relative; width:128px; height:128px; margin:8px auto 2px; }
  .st-ring .v{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .st-ring .v b{ font:800 34px/1 'Manrope'; } .st-ring .v span{ font:700 9px/1 -apple-system; letter-spacing:.1em; text-transform:uppercase; color:var(--l-soft,#a89b80); margin-top:3px; }
  .st-rate-l{ font:700 11px/1 -apple-system; letter-spacing:.04em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin-top:12px; }
  .st-rate{ display:flex; gap:8px; justify-content:center; margin-top:9px; }
  .st-rb{ border:1px solid rgba(60,50,20,.16); background:var(--l-paper,#fffdf6); color:var(--l-mut,#6b6353); font:700 12.5px/1 -apple-system; border-radius:99px; padding:10px 16px; cursor:pointer; }
  .st-rb.shaky.on{ background:var(--data-bad); color:#fff; border-color:var(--data-bad); }
  .st-rb.good.on{ background:var(--data-owed); color:#fff; border-color:var(--data-owed); }
  .st-rb.solid.on{ background:var(--data-ok); color:#fff; border-color:var(--data-ok); }
  .st-logged{ font:600 12px/1 -apple-system; color:var(--data-ok); min-height:15px; margin-top:9px; }
  .st-formula{ font:600 11px/1.5 -apple-system; color:var(--l-soft,#a89b80); background:rgba(176,104,90,.07); border-radius:10px; padding:9px 12px; margin-top:12px; text-align:center; }
  .st-sec{ font:800 10px/1 -apple-system; letter-spacing:.08em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); margin:18px 2px 2px; }
  .st-row{ display:flex; align-items:center; gap:11px; padding:11px 6px; border-top:1px solid rgba(60,50,20,.1); cursor:pointer; }
  .st-row:active{ background:rgba(60,50,20,.04); }
  .st-row .pg{ font:800 13px/1 'Manrope'; color:var(--l-ink2,#2b2415); min-width:64px; }
  .st-row .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
  .st-row .sc{ font:800 14px/1 'Manrope'; min-width:28px; }
  .st-row .tag{ font:800 9px/1 -apple-system; letter-spacing:.04em; text-transform:uppercase; border-radius:99px; padding:3px 8px; }
  .st-row .ago{ margin-inline-start:auto; font:600 11px/1 -apple-system; color:var(--l-soft,#a89b80); }
  .st-empty{ text-align:center; color:var(--l-soft,#a89b80); padding:22px 10px; font-size:13.5px; }
  /* expanded 100→0 decile rater + per-page insights + whole-sura mark */
  .st-rate.deciles{ flex-wrap:wrap; gap:6px; max-width:420px; margin:9px auto 0; }
  .st-rb.lvl{ padding:9px 0; min-width:50px; flex:0 0 50px; text-align:center; }
  .st-rb.lvl.on{ color:#fff; }
  .st-sura{ display:block; margin:13px auto 0; border:1px solid rgba(176,138,46,.5); background:rgba(176,138,46,.07);
    color:var(--l-gold-txt,#a08a4e); font:700 12.5px/1.2 -apple-system; border-radius:99px; padding:10px 18px; cursor:pointer; }
  .st-sura:active{ background:rgba(176,138,46,.16); }
  .st-confirm{ display:block; width:100%; max-width:420px; margin:14px auto 0; border:0; background:var(--data-ok); color:#fff;
    font:800 14px/1 'Manrope', -apple-system; border-radius:12px; padding:13px; cursor:pointer; }
  .st-confirm:disabled{ opacity:.4; cursor:default; }
  .st-resets{ display:flex; gap:8px; max-width:420px; margin:10px auto 0; }
  .st-reset{ flex:1; border:1px solid rgba(176,69,47,.4); background:rgba(176,69,47,.06); color:var(--data-bad);
    font:700 12px/1 -apple-system; border-radius:10px; padding:10px; cursor:pointer; }
  .st-reset:active{ background:rgba(176,69,47,.14); }
  .st-ins{ margin:14px auto 0; max-width:420px; background:rgba(176,104,90,.06); border-radius:12px; padding:12px 14px; }
  .st-ins-row{ display:flex; align-items:center; gap:8px; font:600 12px/1.4 -apple-system; color:var(--l-mut,#6b6353); }
  .st-ins-row + .st-ins-row{ margin-top:7px; }
  .st-ins-row b{ font-weight:800; color:var(--l-ink2,#2b2415); }
  .st-ins-row .lbl{ font:700 9px/1 -apple-system; letter-spacing:.07em; text-transform:uppercase; color:var(--l-gold-txt,#a08a4e); min-width:78px; }
  .st-hist{ display:flex; gap:4px; align-items:center; }
  .st-hist .h{ width:10px; height:10px; border-radius:3px; flex:none; }
  .st-trend{ font:800 11px/1 -apple-system; }
  .r-pill .badge.st-b{ background:var(--bc,#b0685a); color:#fff; }
  /* ── Dark / light theme (additive) — toggled via body.theme-dark. The mushaf
     page is transparent with currentColor ink, so flipping the body background
     + .mushaf-page colour reskins the reader; the rest retints the chrome. ── */
  body.theme-dark{ background:var(--d-bg); }   /* v1262 — the --d-* tokens live in styles/al.css (stratum 2); only the chrome rule stays */
  /* v1262 — the nine dark grounds live in styles/al.css (stratum 2). */
  /* v789 — the html element is the overscroll/rubber-band ground and body's
     class can't lift --d-* up to it, so it stayed cream in dark mode. The boot
     script + theme toggle now stamp .theme-dark/[data-dark] on <html> too;
     these literals mirror each dark palette's --d-bg. */
  :root.theme-dark{ background:#1b1812; }   /* v1266: the default night ground is Qirāʾa Red's — the page's ink (al.css stratum 2) */
  :root.theme-dark[data-dark="navy"]{ background:#0d1220; }
  :root.theme-dark[data-dark="forest"]{ background:#0a1712; }
  :root.theme-dark[data-dark="charcoal"]{ background:#131313; }
  :root.theme-dark[data-dark="plum"]{ background:#150f18; }
  :root.theme-dark[data-dark="ink"]{ background:#12151a; }
  :root.theme-dark[data-dark="ocean"]{ background:#0b1616; }
  :root.theme-dark[data-dark="wine"]{ background:#190f13; }
  :root.theme-dark[data-dark="olive"]{ background:#12140b; }
  /* v1262 — the ten light grounds live in styles/al.css (stratum 2). */
  body.theme-dark #book, body.theme-dark #strip{ background:var(--d-bg); }
  /* v1504 (owner: grey bands at the top and bottom on iPhone, again): iOS 26 Safari tints its bars from the fixed layer on the screen's
     edge, and by day that layer (#book) was see-through, so Safari drew its own grey. It carries the day paper, as it carries the night's. */
  body:not(.theme-dark) #book{ background:var(--l-bg); }
  /* v1512 — THE EDGE BANDS (owner: the grey strip under the clock and around Safari's bar; found in WebKit's own source,
     LocalFrameView::fixedContainerEdges + Page::updateFixedContainerEdges). iOS 26 Safari colours those strips from the fixed
     layer it hit-tests 4px inside the top and bottom edges, and only re-reads it when a fixed layer is added or removed (or
     its bars resize). #book is viewport-sized, and for a viewport-sized layer or a dim scrim WebKit KEEPS the colour it stored
     before ("preferExistingColor") — so Go to's dim (--q-scrim, black at .20 over sepia = #BEB8A9) was stored when it opened
     and never left. A full-width band thicker than 10px is an ordinary edge bar to WebKit: it is read fresh every time, so the
     strips take the paper again whenever the bands are re-read (they are re-added after taps, theme changes and returning to
     the tab: zero.html's edgeBands script). Paper-coloured, above the page, under every tool, never takes a tap. */
  #edge-t, #edge-b{ position:fixed; left:0; right:0; height:12px; background:var(--l-bg); }   /* no z-index: painted by tree order, just above #book */
  /* v1516 (owner's iPhone: the strips stayed Sepia on White, Sage and Sand): the bands TAKE touches. WebKit's first pass ignores
     pointer-events, but when it lands on an unseen full-screen layer with pointer-events:none (Settings' dim, opacity 0, stays once
     opened) it samples again honouring them: a pointer-events:none band was skipped, #book (viewport-sized) was hit and the old colour
     kept. A touch in the screen's outer 12px now lands on a band (nothing there takes taps: the island and the search key sit inside). */
  #edge-t{ top:0; }
  #edge-b{ bottom:0; }
  body.theme-dark :is(#edge-t, #edge-b){ background:var(--d-bg); }
  body.theme-dark .mushaf-page{ color:var(--d-ink); --mu-ink:var(--d-ink); }
  body.dual.theme-dark .slot::before{ background:var(--d-line); }
  /* sura-name banner + basmala follow the dark paper (basmala via --mu-ink above).
     The per-page fragment scopes the banner with [data-page][data-edition] (0,4,0),
     so these need !important to win. */
  /* v1158 — the ornate cartouche stays cream in dark mode too (like a printed
     banner on the page), so the dark-ink calligraphy reads. Overrides the old
     translucent dark treatment. */
  /* dark mode: ornaments follow the dark palette accent (--d-acc); the cartouche
     stays a warm cream so the dark-ink calligraphy keeps its contrast. */
  body.theme-dark .mushaf-page .surah-banner, body.theme-dark .mushaf-page .surah-banner::before, body.theme-dark .mushaf-page .surah-banner::after,
  body.theme-dark .mushaf-page .surah-banner .name{ color:var(--mu-ink,#ece3cf) !important; }   /* the sūrah box in the page's ink, night included */
  body.theme-dark[data-rail=curtain] .rail, body.theme-dark[data-rail=panel] .rail{ background:var(--d-bg); }
  body.theme-dark[data-rail=panel] #rail-l{ border-right-color:var(--d-line); }
  body.theme-dark[data-rail=panel] #rail-r{ border-left-color:var(--d-line); }
  body.theme-dark[data-rail=fade] #rail-l{ background:linear-gradient(90deg,var(--d-bg) 45%,rgba(12,21,31,0)); }
  body.theme-dark[data-rail=fade] #rail-r{ background:linear-gradient(270deg,var(--d-bg) 45%,rgba(12,21,31,0)); }
  body.theme-dark #back, body.theme-dark #to-app, body.theme-dark #layout, body.theme-dark #theme, body.theme-dark #edition, body.theme-dark #settings-wrench{
    background:var(--d-glass); border-color:var(--d-line2); color:var(--d-ink2); }   /* v1266: #pill's night rule sits with the pill (the Glass capsule) */
  body.theme-dark .r-pill{ background:var(--d-glass); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark .r-pill.r-icon{ color:var(--d-ink2); }
  /* active bottom-bar pills → teal (per-rule Tajwid .gh-row.on colours kept) */
  body.theme-dark .r-pill.parent.on{ background:transparent; border-color:var(--d-acc); color:var(--d-ink,#ece3cf); box-shadow:inset 0 0 0 1px var(--d-acc); }   /* v1044: a ring, matching light — this used to flood the pill with the ground accent */
  body.theme-dark #tj-panel, body.theme-dark #blur-panel, body.theme-dark #tools-panel, body.theme-dark #learn-panel, body.theme-dark #dhikrpro-panel, body.theme-dark #audiogroup-panel{ background:var(--d-panel); border-color:var(--d-line2); }
  body.theme-dark .tj-hdr{ color:var(--d-acc-txt); }
  body.theme-dark .tj-seg{ background:rgba(214,196,158,.07); }
  body.theme-dark .tj-seg span{ color:var(--d-soft); }
  body.theme-dark .tj-seg span.on{ color:var(--d-ink); background:rgba(214,196,158,.16); box-shadow:none; }
  body.theme-dark .gh-row{ color:var(--d-ink); }
  body.theme-dark .tj-title{ color:var(--d-ink); }
  body.theme-dark .tj-head .tj-clear{ background:rgba(214,196,158,.08); color:var(--d-soft); }
  body.theme-dark .tj-tabs{ background:rgba(214,196,158,.07); }
  body.theme-dark .tj-tabs button{ color:var(--d-soft); }
  body.theme-dark .tj-tabs button.on{ background:rgba(214,196,158,.16); color:var(--d-ink); border:1px solid var(--d-line2); box-shadow:none; }
  body.theme-dark .gh-cap{ color:var(--d-soft); }
  body.theme-dark .tj-cols .gh-row, body.theme-dark #tj-probslot .gh-row{ background:var(--d-surface); border-color:var(--d-line2); }
  body.theme-dark .tj-cols .gh-row.on{ background:var(--pc,#007FFF); color:#fff; border-color:var(--pc,#007FFF); }
  body.theme-dark .gh-sep{ background:var(--d-line); }
  body.theme-dark .lh-chip{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark #home, body.theme-dark #hub, body.theme-dark #arabic-stub{ background:var(--d-bg); }

  body.theme-dark .hub-ar, body.theme-dark .as-ar{ color:var(--d-ink); }

  body.theme-dark .hc-meta b{ color:var(--d-ink); }
  body.theme-dark .hc-ar{ color:var(--d-acc-txt); }
  body.theme-dark .hub-half.a{ border-top-color:var(--d-line); }

  body.theme-dark .dk-win{ background:var(--d-surface,#201913); border-color:var(--d-line2); }
  body.theme-dark .dk-body{ color:var(--d-ink); }
  body.theme-dark .dk-head{ border-bottom-color:var(--d-line); }
  body.theme-dark .dk-ttl{ color:var(--d-ink); }
  body.theme-dark .dk-back{ background:rgba(214,196,158,.08); color:var(--d-ink2); }
  /* v1058: .dk-x gained a ring, so it needs the dark line colour like .sh-hd .x */
  body.theme-dark .dk-x{ border-color:var(--d-line2,#4a4234); color:var(--d-ink3,#9a8f77); }
  body.theme-dark .dk-x:active{ background:rgba(255,255,255,.05); }
  body.theme-dark .dk-searchbar{ background:var(--d-surface,#201913); border-bottom-color:var(--d-line); }
  body.theme-dark .dk-search{ background:rgba(214,196,158,.06); color:var(--d-ink); }
  body.theme-dark .dk-search:focus{ background:rgba(214,196,158,.1); }
  body.theme-dark .dk-group-hdr{ color:var(--d-acc-txt); border-bottom-color:rgba(212,181,115,.24); }
  body.theme-dark .dk-tile, body.theme-dark .dk-name{ border-color:var(--d-line2); }
  body.theme-dark .dk-tile-en, body.theme-dark .dk-name-en{ color:var(--d-ink); }
  body.theme-dark .dk-tile-ar, body.theme-dark .dk-name-ar, body.theme-dark .dk-card-en{ color:var(--d-acc-txt); }
  body.theme-dark .dk-card, body.theme-dark .dk-acc-row{ background:var(--d-surface); }
  body.theme-dark .dk-ar, body.theme-dark .dk-w-ar, body.theme-dark .dk-acc-text, body.theme-dark .dk-acc-title,
  body.theme-dark .dk-count, body.theme-dark .dk-bignum, body.theme-dark .dk-bigphrase{ color:var(--d-ink); }
  body.theme-dark .dk-names-intro{ color:var(--d-soft); }
  body.theme-dark .dk-prog-fill{ background:var(--d-acc); }
  body.theme-dark .dk-phrase.on, body.theme-dark .dk-wbwtog.on, body.theme-dark .dk-tbmodebtn.on{ background:var(--d-acc); border-color:var(--d-acc); color:var(--d-acc-ink); }
  body.theme-dark .dk-vbtn, body.theme-dark .dk-resetcat, body.theme-dark .dk-phrase, body.theme-dark .dk-wbwtog{ color:var(--d-acc-txt); }
  body.theme-dark .st-pg{ color:var(--d-ink); }
  body.theme-dark .st-rate-l, body.theme-dark .st-sec{ color:var(--d-acc-txt); }
  body.theme-dark .st-rb{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark .fp-card{ background:var(--d-surface); border-color:var(--d-line2); }
  body.theme-dark .fp-lbl{ color:var(--d-acc-txt); }
  body.theme-dark .fp-go.prim{ background:var(--d-acc); border-color:var(--d-acc); color:var(--d-acc-ink); }
  body.theme-dark .fp-go:not(.prim){ background:var(--d-surface); color:var(--d-ink2); border-color:var(--d-acc); }
  body.theme-dark .fp-pin{ color:var(--d-acc-txt); border-color:rgba(212,181,115,.4); }
  body.theme-dark .dk-pin, body.theme-dark .dk-fav{ color:rgba(214,196,158,.32); }
  body.theme-dark .dk-plus{ border-color:var(--d-line2); background:rgba(214,196,158,.08); color:var(--d-acc-txt); }
  body.theme-dark .dk-tile-prog{ background:rgba(214,196,158,.14); }
  body.theme-dark .dk-tile-prog i{ background:var(--d-acc); }
  body.theme-dark .dk-mean{ color:var(--d-ink2); }
  body.theme-dark .pl-prev{ color:var(--d-soft); }
  /* v1107 — SEVEN dark rules for Time Split used to live HERE, outside the
     module. One flooded a selected mode with --d-acc while the module's own
     light rule had become a ring, and the base pair (body.theme-dark .ts-mode,
     0,2,1) outspecified the module's .ts-mode.on (0,2,0), so the ring never
     applied at all. Two files owned one control. The module owns both themes
     now; every property these set is token-driven and flips on its own. */
  body.theme-dark .qz-chunk, body.theme-dark .qz-missed-ar, body.theme-dark .qz-score{ color:var(--d-ink); }
  body.theme-dark .qz-opt{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink2); }
  body.theme-dark .qz-opt.on, body.theme-dark .qz-tag.on{ background:#6e8fbf; border-color:#6e8fbf; color:#fff; }
  body.theme-dark .qz-rng{ background:rgba(110,143,191,.12); border-color:rgba(110,143,191,.42); }
  body.theme-dark .qz-rngrow label, body.theme-dark .qz-prompt{ color:var(--d-ink2); }
  body.theme-dark .qz-sel, body.theme-dark .qz-num{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .qz-context{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .qz-choice{ background:var(--d-surface); border-color:var(--d-line2); color:var(--d-ink); }
  body.theme-dark .qz-choice.correct{ background:rgba(91,140,110,.22); border-color:#5b8c6e; }
  body.theme-dark .qz-choice.wrong{ background:rgba(182,69,47,.2); border-color:var(--data-bad); }
  body.theme-dark .qz-missed-r{ background:var(--d-surface); border-color:var(--d-line2); }
  body.theme-dark .qz-tag{ color:var(--d-ink2); border-color:var(--d-line2); }