/* ═══════════════════════════════════════════════════════════════════════════
   styles/mushaf-blur-modes.css — Phase 4a · expanded blur catalog
   ─────────────────────────────────────────────────────────────────────────
   25 additional visual blur modes on top of the 5 foundation modes in
   styles/mushaf.css. Each mode is keyed via [data-blur="MODE_ID"] on the
   .glyph-layer (the visible QCF raster) and the .text-layer (so existing
   hit-test selectors keep working).

   MODES (added here):
     · Encoding:      E-cloze, E-progressive, E-retrograde, E-staircase,
                      E-cumulative, E-shadow
     · Mutashābihāt:  M-pair-recall, M-pair-diff, M-kirmani-pos,
                      M-kirmani-trig, M-iskafi-gram, M-iskafi-particle,
                      M-mudhish-ruku, M-mudhish-cycle
     · Warrāqī:       W-acronym, W-grid
     · Recitation:    R-iqlab, R-tartil, R-fasila, R-breath
     · Scale:         S-juz-map, S-hizb-pulse
     · Time:          T-speed, T-confusion, T-leitner

   Data-dependent modes (Mutashābihāt, R-iqlab, T-confusion, T-leitner)
   degrade to "blur everything" until their data layer ships. blur.js
   sets the corresponding data-* attributes on word-glyph spans when the
   data is available; CSS targets those flags.

   LOAD ORDER (in <head>, after styles/mushaf.css):
       <link rel="stylesheet" href="styles/mushaf.css">
       <link rel="stylesheet" href="styles/mushaf-blur-modes.css">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Shared blur baseline — used by most "blur all except X" modes
   ───────────────────────────────────────────────────────────────────────── */
.mushaf-page .glyph-layer[data-blur^="E-"] .word-glyph:not(.revealed),
.mushaf-page .glyph-layer[data-blur^="M-"] .word-glyph:not(.revealed),
.mushaf-page .glyph-layer[data-blur^="W-"] .word-glyph:not(.revealed),
.mushaf-page .glyph-layer[data-blur^="R-"] .word-glyph:not(.revealed),
.mushaf-page .glyph-layer[data-blur^="S-"] .word-glyph:not(.revealed),
.mushaf-page .glyph-layer[data-blur^="T-"] .word-glyph:not(.revealed) {
  filter: blur(var(--mu-blur-radius, 14px));
  transition: filter 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER A · ENCODING
   ═══════════════════════════════════════════════════════════════════════ */

/* E-cloze — random ~20% of words blurred (marked .is-cloze by blur.js);
   the rest stay sharp. Reveal a clozed word by tapping it. */
.mushaf-page .glyph-layer[data-blur="E-cloze"] .word-glyph:not(.is-cloze) {
  filter: none;
}
.mushaf-page .glyph-layer[data-blur="E-cloze"] .word-glyph.is-cloze:not(.revealed) {
  filter: blur(var(--mu-blur-radius, 14px));
  background: rgba(212, 175, 55, 0.05);
}

/* E-progressive — blur all; state machine reveals word-by-word forward.
   blur.js adds .revealed to words at indices ≤ state.progressive.idx */
/* Uses shared baseline above. */

/* E-retrograde — blur all; state machine reveals word-by-word backward.
   Same revealed mechanism as progressive. */
/* Uses shared baseline. */

/* E-staircase — pass N reveals first N words of each verse.
   blur.js sets .revealed accordingly. */
/* Uses shared baseline. */

/* E-cumulative — verses ≤ state.cumulative.verseIdx have .revealed; the
   next verse's words have data-cum="pending" and stay blurred until
   the user advances. */
/* Uses shared baseline. */

/* E-shadow — replace blur with ink-silhouette aesthetic. */
.mushaf-page .glyph-layer[data-blur="E-shadow"] .word-glyph:not(.revealed) {
  filter: blur(5px) brightness(0) !important;
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER B · MUTASHĀBIHĀT (data-dependent · graceful fallback)
   When the corresponding data layer hasn't tagged words, ALL words blur
   (the shared baseline) so the mode is at least visually consistent.
   Once data ships, word-glyphs get attributes like data-sakhawi-pair,
   data-kirmani-recur, data-iskafi-particle, etc., and the rules below
   take over to spotlight just the target words.
   ═══════════════════════════════════════════════════════════════════════ */

/* M-pair-recall — show ONE half of a Sakhāwī pair (data-sakhawi-pair="A"),
   hide the other (data-sakhawi-pair="B"). */
.mushaf-page .glyph-layer[data-blur="M-pair-recall"] .word-glyph[data-sakhawi-pair="A"] {
  filter: none;
}

/* M-pair-diff — show both pair halves but highlight the differing words
   (.is-diff). Differing words are sharp, contextually-shared words
   are faded. */
.mushaf-page .glyph-layer[data-blur="M-pair-diff"] .word-glyph[data-sakhawi-pair] {
  filter: blur(4px);
  opacity: 0.55;
}
.mushaf-page .glyph-layer[data-blur="M-pair-diff"] .word-glyph.is-diff {
  filter: none !important;
  opacity: 1;
  background: rgba(214, 138, 98, 0.18);
  box-shadow: 0 0 6px rgba(214, 138, 98, 0.45);
}

/* M-kirmani-pos — hide ordinal markers; recurring phrases shown faintly. */
.mushaf-page .glyph-layer[data-blur="M-kirmani-pos"] .word-glyph[data-kirmani-recur] {
  filter: blur(8px);
  background: rgba(200, 130, 80, 0.10);
}
.mushaf-page .glyph-layer[data-blur="M-kirmani-pos"] .word-glyph:not([data-kirmani-recur]) {
  filter: none;
}

/* M-kirmani-trig — preceding verse shown; trigger verse blurred. */
.mushaf-page .glyph-layer[data-blur="M-kirmani-trig"] .word-glyph[data-kirmani-trigger] {
  filter: blur(var(--mu-blur-radius, 14px));
}
.mushaf-page .glyph-layer[data-blur="M-kirmani-trig"] .word-glyph:not([data-kirmani-trigger]) {
  filter: none;
}

/* M-iskafi-gram — hide case-ending diacritic only (data-iskafi-ending). */
.mushaf-page .glyph-layer[data-blur="M-iskafi-gram"] .word-glyph[data-iskafi-ending] {
  filter: blur(4px);
}
.mushaf-page .glyph-layer[data-blur="M-iskafi-gram"] .word-glyph:not([data-iskafi-ending]) {
  filter: none;
}

/* M-iskafi-particle — blur particles (data-iskafi-particle), content
   words sharp. */
.mushaf-page .glyph-layer[data-blur="M-iskafi-particle"] .word-glyph[data-iskafi-particle] {
  filter: blur(var(--mu-blur-radius, 14px));
}
.mushaf-page .glyph-layer[data-blur="M-iskafi-particle"] .word-glyph:not([data-iskafi-particle]) {
  filter: none;
}

/* M-mudhish-ruku — reveal one rukūʿ block at a time (data-ruku attr +
   state.mudhish.activeRuku). blur.js sets .revealed on matching words. */
/* Uses shared baseline. */

/* M-mudhish-cycle — cycle through zoom levels via state machine. */
/* Uses shared baseline; visual depends on .revealed flag the state writes. */

/* ═══════════════════════════════════════════════════════════════════════
   TIER C · WARRĀQĪ
   ═══════════════════════════════════════════════════════════════════════ */

/* W-acronym — show only the first word of each verse (Warrāqī's
   letter-acronym mnemonic; at word-glyph scale we approximate by
   showing only the opening word of each āyah). */
.mushaf-page .glyph-layer[data-blur="W-acronym"] .word-glyph[data-p="1"] {
  filter: none;
  background: rgba(95, 181, 148, 0.10);
}

/* W-grid — words become empty position-boxes. */
.mushaf-page .glyph-layer[data-blur="W-grid"] .word-glyph:not(.revealed) {
  color: transparent !important;
  filter: none;
}
.mushaf-page .text-layer[data-blur="W-grid"] .word {
  border: 1px dashed var(--ms-hair-3, rgba(0, 0, 0, 0.22));
  border-radius: 3px;
  background: rgba(95, 181, 148, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER D · RECITATION
   ═══════════════════════════════════════════════════════════════════════ */

/* R-iqlab — show only words tagged with a tajwīd rule (data-tajwid). */
.mushaf-page .glyph-layer[data-blur="R-iqlab"] .word-glyph[data-tajwid] {
  filter: none;
  background: rgba(214, 138, 98, 0.12);
}

/* R-tartil — show only words adjacent to a waqf sign (.is-near-waqf,
   tagged by blur.js from pages.json's t:'p' pause entries). */
.mushaf-page .glyph-layer[data-blur="R-tartil"] .word-glyph.is-near-waqf {
  filter: none;
  background: rgba(95, 181, 148, 0.10);
}

/* R-fasila — show only the last word of each verse (rhyme word).
   blur.js marks the .last-of-verse word (same machinery as F-last). */
.mushaf-page .glyph-layer[data-blur="R-fasila"] .word-glyph.last-of-verse {
  filter: none;
  background: rgba(212, 175, 55, 0.10);
}

/* R-breath — pointer-hold reveals up to the next waqf. blur.js's
   pointer handlers set .revealed on the swept words. */
/* Uses shared baseline + per-word .revealed; no extra CSS. */

/* ═══════════════════════════════════════════════════════════════════════
   TIER E · SCALE
   ═══════════════════════════════════════════════════════════════════════ */

/* S-juz-map — show only sūrah-opening words (= first word of each
   sūrah's first verse). blur.js marks these with .is-sura-open. */
.mushaf-page .glyph-layer[data-blur="S-juz-map"] .word-glyph.is-sura-open {
  filter: none;
}

/* S-hizb-pulse — one hizb segment glows at a time, the rest are blurred.
   blur.js's timer toggles .is-hizb-pulse on the active segment's words. */
.mushaf-page .glyph-layer[data-blur="S-hizb-pulse"] .word-glyph.is-hizb-pulse {
  filter: none;
  background: rgba(95, 181, 148, 0.10);
  transition: background 0.6s ease, filter 0.6s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER G · TIME / spacing / gamified
   ═══════════════════════════════════════════════════════════════════════ */

/* T-speed — state machine toggles .revealed on all words in a cycling
   timer; the cycle accelerates each pass. */
/* Uses shared baseline + .revealed; no extra CSS. */

/* T-confusion — FSRS-due words (.is-fsrs-due) heavily blurred; stable
   words faintly blurred. */
.mushaf-page .glyph-layer[data-blur="T-confusion"] .word-glyph.is-fsrs-due {
  filter: blur(var(--mu-blur-radius, 14px));
  background: rgba(214, 138, 98, 0.12);
}
.mushaf-page .glyph-layer[data-blur="T-confusion"] .word-glyph:not(.is-fsrs-due) {
  filter: blur(4px);
  opacity: 0.45;
}

/* T-leitner — color-code by Leitner box (data-leitner-box="1..5"). */
.mushaf-page .glyph-layer[data-blur="T-leitner"] .word-glyph[data-leitner-box="1"] {
  filter: blur(var(--mu-blur-radius, 14px));
  background: rgba(160, 68, 68, 0.14);
}
.mushaf-page .glyph-layer[data-blur="T-leitner"] .word-glyph[data-leitner-box="2"] {
  filter: blur(9px);
  background: rgba(200, 130, 80, 0.14);
}
.mushaf-page .glyph-layer[data-blur="T-leitner"] .word-glyph[data-leitner-box="3"] {
  filter: blur(5px);
  background: rgba(180, 160, 80, 0.14);
}
.mushaf-page .glyph-layer[data-blur="T-leitner"] .word-glyph[data-leitner-box="4"] {
  filter: blur(2px);
  background: rgba(95, 181, 148, 0.10);
}
.mushaf-page .glyph-layer[data-blur="T-leitner"] .word-glyph[data-leitner-box="5"] {
  filter: none;
  background: rgba(95, 181, 148, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   Hint banner — shows above the page when a data-dependent mode is
   active but its data hasn't been tagged yet. blur.js inserts a small
   floating .mu-blur-hint element with the message.
   ═══════════════════════════════════════════════════════════════════════ */
.mu-blur-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  font: 500 11px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.10em;
  background: var(--ms-bg-1);
  color: var(--ms-ink-2);
  border: 1px solid var(--ms-hair-2);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 10;
  pointer-events: none;
  opacity: 0.92;
  text-transform: uppercase;
}
.mu-blur-hint b { color: var(--ms-mint); font-weight: 700; }

/* ── Picker tier headers (Phase 4a expansion) ────────────────────────────
   The blur picker now groups modes by tier. Headers are tiny mono labels
   between mode groups. */
.ed-blur-pop .mu-pop-list .ed-blur-tier {
  padding: 12px 14px 4px;
  font: 600 9.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-4);
  border-top: 1px solid var(--ms-hair-2);
  margin-top: 2px;
}
.ed-blur-pop .mu-pop-list .ed-blur-tier:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 8px;
}
/* Tighten the blur popover so all 30 modes fit without feeling cramped. */
.ed-blur-pop { width: min(360px, 92vw); }
.ed-blur-pop .ed-blur-item {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 14px;
  min-height: 44px;
}
.ed-blur-pop .ed-blur-item .ed-blur-name {
  font: 600 13px/1.2 "Manrope", system-ui, sans-serif;
}
.ed-blur-pop .ed-blur-item .ed-blur-hint {
  font: 400 11px/1.3 "Manrope", system-ui, sans-serif;
  color: var(--ms-ink-3);
}
.ed-blur-pop .ed-blur-item.is-on {
  background: var(--ms-mint-soft);
  border-color: var(--ms-mint-rim);
  color: var(--ms-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   top-of-page · blur the top-line verses (+ their continuations)
   ═══════════════════════════════════════════════════════════════════════ */
.mushaf-page .glyph-layer[data-blur~="top-of-page"] .word-glyph.is-top-blur:not(.revealed) {
  filter: blur(var(--mu-blur-radius, 14px));
}

/* ═══════════════════════════════════════════════════════════════════════
   B-wordbank · the blur effect itself
   ═══════════════════════════════════════════════════════════════════════ */
.mushaf-page .glyph-layer[data-blur~="B-wordbank"] .word-glyph.is-in-bank:not(.revealed) {
  filter: blur(var(--mu-blur-radius, 14px));
  background: rgba(214, 138, 98, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════
   Word-bank modal · V3 split-pane
   ═══════════════════════════════════════════════════════════════════════ */
.wb-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.wb-modal.is-open {
  display: flex;
  pointer-events: auto;
}
.wb-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  /* backdrop-filter removed for perf · see .bh-back note. */
}
.wb-shell {
  position: relative;
  width: min(880px, 100%);
  max-height: min(680px, 92vh);
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 14px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wb-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ms-hair-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wb-head h3 {
  font: 500 20px/1.2 "Cormorant Garamond", serif;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--ms-ink);
}
.wb-close {
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: 14px;
  cursor: pointer;
}
.wb-close:hover {
  border-color: var(--ms-hair);
  color: var(--ms-ink);
}
.wb-kicker {
  font: 500 9.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ms-ink-4);
}
.wb-kicker b {
  color: var(--ms-mint);
  font-weight: 700;
}
.wb-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(280px, 360px);
  min-height: 0;
}
.wb-left {
  padding: 14px 16px;
  border-right: 1px solid var(--ms-hair-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.wb-right {
  padding: 14px 16px;
  background: var(--ms-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.wb-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--ms-hair-2);
  background: var(--ms-bg);
  color: var(--ms-ink);
  font: 500 16px/1 "Amiri Quran", "Amiri", serif;
  direction: rtl;
  outline: none;
}
.wb-search:focus {
  border-color: var(--ms-mint-rim);
}
.wb-tabs {
  display: flex;
  gap: 6px;
}
.wb-tabs button {
  flex: 1;
  font: 500 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ms-bg-2);
  color: var(--ms-ink-3);
  border: 1px solid var(--ms-hair-2);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
}
.wb-tabs button.is-on {
  background: var(--ms-mint-soft);
  color: var(--ms-mint);
  border-color: var(--ms-mint-rim);
}
.wb-results {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--ms-hair-2);
  border-radius: 8px;
  background: var(--ms-bg);
  min-height: 0;
}
.wb-row {
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  direction: rtl;
  border-bottom: 1px solid var(--ms-hair-2);
}
.wb-row:last-child { border-bottom: none; }
.wb-row:hover { background: var(--ms-bg-2); }
.wb-row .wb-w {
  font: 500 16px/1 "Amiri Quran", "Amiri", serif;
  color: var(--ms-ink);
}
.wb-row .wb-meta {
  font: 500 10px/1 "JetBrains Mono", monospace;
  color: var(--ms-ink-4);
  direction: ltr;
}
.wb-empty {
  padding: 24px 12px;
  text-align: center;
  font: 400 12.5px/1.5 "Manrope", sans-serif;
  color: var(--ms-ink-4);
}
.wb-ayah-head {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 11px/1.2 "JetBrains Mono", monospace;
  color: var(--ms-ink-3);
  border-bottom: 1px solid var(--ms-hair-2);
}
.wb-ayah-head b {
  color: var(--ms-mint);
  font-weight: 700;
}
.wb-back-to-list {
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.10em;
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
}
.wb-ayah-words {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  direction: rtl;
}
.wb-aw {
  font: 500 18px/1 "Amiri Quran", "Amiri", serif;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1.5px solid transparent;
  color: var(--ms-ink);
}
.wb-aw:hover { background: var(--ms-bg-2); border-color: var(--ms-hair-2); }
.wb-aw.is-picked,
.wb-aw.is-picked-w {
  background: var(--ms-mint-soft);
  border-color: var(--ms-mint);
  color: var(--ms-mint);
  font-weight: 700;
}
.wb-aw.is-picked-r {
  background: var(--ms-gold-soft, rgba(212, 175, 55, 0.10));
  border-color: var(--ms-gold);
  color: var(--ms-gold);
  font-weight: 700;
}

/* ── Word-popover · viewport-fixed portal · sits above wb-modal ─────── */
.wb-aw-pop {
  position: fixed;
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  z-index: 10000;
  max-width: min(360px, calc(100vw - 16px));
}
.wb-aw-pop button {
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ms-ink-2);
  border: 1px solid transparent;
  padding: 12px 14px;
  border-radius: 5px;
  cursor: pointer;
  min-height: 44px;            /* WCAG-AA tap target */
}
.wb-aw-pop button:hover,
.wb-aw-pop button:active {
  background: var(--ms-bg-2);
  color: var(--ms-ink);
}
.wb-aw-pop button.is-verb { color: var(--ms-mint); }
.wb-aw-pop button.is-root { color: var(--ms-gold); }
.wb-aw-pop .sep {
  width: 1px;
  background: var(--ms-hair-2);
  margin: 2px 0;
}

/* ── Search-clear button + hint + ayah/page action rows ─────────────── */
.wb-search-row { position: relative; display: flex; align-items: center; }
.wb-search-clear {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ms-bg-2);
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  font: 600 11px/1 "Manrope", sans-serif;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wb-search-clear:hover {
  color: var(--ms-ink);
  background: var(--ms-bg-3);
}
.wb-search-clear.is-shown { display: inline-flex; }
.wb-search { padding-left: 38px; }   /* room for the clear button */
.wb-hint {
  font: 400 11px/1.4 "Manrope", sans-serif;
  color: var(--ms-ink-4);
  padding: 0 2px;
}
.wb-hint code {
  background: var(--ms-bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ms-ink-3);
  font-size: 10.5px;
}

/* ── Ayah / page result-pane header & action buttons ────────────────── */
.wb-ayah-head {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font: 500 11px/1.2 "JetBrains Mono", monospace;
  color: var(--ms-ink-3);
  border-bottom: 1px solid var(--ms-hair-2);
  flex-wrap: wrap;
}
.wb-ayah-head b { color: var(--ms-mint); font-weight: 700; }
.wb-ayah-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.wb-ayah-actions button {
  font: 500 9.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  padding: 6px 9px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 32px;
}
.wb-ayah-actions button:hover {
  background: var(--ms-bg-2);
  color: var(--ms-ink);
}
.wb-ayah-actions .add-all-w {
  color: var(--ms-mint);
  border-color: var(--ms-mint-rim);
}
.wb-ayah-actions .add-all-r {
  color: var(--ms-gold);
  border-color: var(--ms-gold-rim, rgba(212, 175, 55, 0.28));
}

/* ── Page-view per-verse section header ─────────────────────────────── */
.wb-page-verse {
  border-top: 1px solid var(--ms-hair-2);
  background: var(--ms-bg);
}
.wb-page-verse:first-child { border-top: none; }
.wb-page-verse-head {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--ms-bg-1);
  font: 500 10px/1.2 "JetBrains Mono", monospace;
  color: var(--ms-ink-3);
  letter-spacing: 0.10em;
  border-bottom: 1px solid var(--ms-hair-2);
}
.wb-page-verse-head b { color: var(--ms-mint); font-weight: 700; }
.wb-page-verse-head .verse-acts { display: flex; gap: 4px; }
.wb-page-verse-head .verse-acts button {
  font: 500 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  padding: 4px 7px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 28px;
}
.wb-page-verse-head .verse-acts button:hover {
  background: var(--ms-bg-2);
  color: var(--ms-ink);
}
.wb-page-verse-head .verse-acts .va-w { color: var(--ms-mint); border-color: var(--ms-mint-rim); }
.wb-page-verse-head .verse-acts .va-r { color: var(--ms-gold); border-color: var(--ms-gold-rim, rgba(212, 175, 55, 0.28)); }

/* ── Chip variants (root vs word vs ayah) ───────────────────────────── */
.wb-chip.root-chip {
  background: var(--ms-gold-soft, rgba(212, 175, 55, 0.10));
  border-color: var(--ms-gold-rim, rgba(212, 175, 55, 0.28));
  color: var(--ms-gold);
}
.wb-chip.root-chip::before {
  content: "ROOT ";
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ms-gold);
  opacity: 0.85;
  margin-inline-end: 4px;
  direction: ltr;
}
.wb-chip.word-chip::before {
  content: "WORD ";
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ms-mint);
  opacity: 0.85;
  margin-inline-end: 4px;
  direction: ltr;
}
.wb-chip.ayah-chip {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  direction: ltr;
}
.wb-chip.ayah-chip::before {
  content: "ĀYAH ";
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ms-mint);
  opacity: 0.85;
  margin-inline-end: 4px;
  direction: ltr;
}
.wb-holding {
  flex: 1;
  border: 1px dashed var(--ms-hair-2);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  background: var(--ms-bg-1);
  min-height: 0;
  overflow: auto;
}
.wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--ms-mint-soft);
  border: 1px solid var(--ms-mint-rim);
  border-radius: 99px;
  font: 500 13px/1 "Amiri Quran", "Amiri", serif;
  color: var(--ms-mint);
  direction: rtl;
}
.wb-chip--ayah {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  direction: ltr;
}
.wb-chip .wb-x {
  font-family: "Manrope", sans-serif;
  color: var(--ms-ink-3);
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
}
.wb-chip .wb-x:hover { color: var(--ms-ink); }
.wb-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.wb-foot button {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.wb-clear {
  background: var(--ms-bg-2);
  color: var(--ms-ink-3);
  border: 1px solid var(--ms-hair-2);
}
.wb-clear:hover { color: var(--ms-ink); }
.wb-commit {
  background: var(--ms-mint);
  color: var(--ms-paper);
  border: 1px solid var(--ms-mint);
  flex: 1;
}
.wb-commit:hover { filter: brightness(1.1); }
/* ═══════════════════════════════════════════════════════════════════════
   Mobile-friendly stack · ≤720px viewport
   ─────────────────────────────────────────────────────────────────────
   Stacks the two columns vertically, makes buttons larger taps,
   gives the holding pad a max-height so it doesn't dominate the screen,
   and tightens paddings.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .wb-modal { padding: 0; }
  .wb-shell {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .wb-head { padding: 10px 14px; }
  .wb-head h3 { font-size: 18px; }
  .wb-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;       /* search/results take available; holding pinned bottom */
    overflow: hidden;
  }
  .wb-left {
    border-right: none;
    border-bottom: 1px solid var(--ms-hair-2);
    padding: 10px 12px;
    min-height: 0;
  }
  .wb-right {
    padding: 10px 12px;
    max-height: 42vh;                   /* don't let the bank pad cover everything */
  }
  .wb-search {
    font-size: 16px;                    /* iOS won't auto-zoom inputs ≥16px */
    padding: 12px 38px 12px 14px;
  }
  .wb-tabs button {
    padding: 10px 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .wb-results { max-height: none; min-height: 200px; }
  .wb-aw {
    font-size: 22px;                    /* bigger tap targets on Arabic words */
    padding: 8px 12px;
    line-height: 1.2;
  }
  .wb-holding {
    min-height: 0;
    max-height: 28vh;
  }
  .wb-foot button {
    padding: 12px 14px;
    min-height: 44px;
  }
  .wb-aw-pop button { padding: 12px 14px; min-height: 44px; }
  .wb-ayah-actions button { padding: 8px 10px; min-height: 36px; }
  .wb-page-verse-head .verse-acts button { padding: 7px 9px; min-height: 30px; }
  .wb-search-clear { width: 28px; height: 28px; }

  /* Blur-hub also responsive · cards stack to one column */
  .bh-modal { padding: 0; }
  .bh-shell {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .bh-head { padding: 10px 14px; }
  .bh-head h3 { font-size: 20px; }
  .bh-grid {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .bh-card { min-height: 110px; padding: 10px; }
  .bh-preview { padding: 8px; }
  .bh-line { font-size: 16px; }
}

/* Even tighter for narrow phones (≤420px) */
@media (max-width: 420px) {
  .wb-head h3, .bh-head h3 { font-size: 16px; }
  .wb-aw { font-size: 20px; }
  .wb-tabs { flex-wrap: wrap; }
  .wb-tabs button { flex: 1 1 calc(50% - 4px); }   /* 2-up tab grid */
}

/* ═══════════════════════════════════════════════════════════════════════
   Blur hub · richer mode picker with live preview cards
   ═══════════════════════════════════════════════════════════════════════ */
.bh-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.bh-modal.is-open { display: flex; pointer-events: auto; }
.bh-back {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  /* backdrop-filter removed · was causing visible lag on open/close because
     the browser had to blur every rendered glyph behind the modal each
     frame. A heavier solid scrim does the same visual job for free. */
}
.bh-shell {
  position: relative;
  width: min(960px, 100%);
  max-height: min(720px, 92vh);
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 14px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Block iOS rubber-band leak so scrolling the modal doesn't bounce the
     page underneath. */
  overscroll-behavior: contain;
}
.bh-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ms-hair-2);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.bh-head h3 {
  font: 500 22px/1.2 "Cormorant Garamond", serif;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--ms-ink);
}
.bh-head h3 em { color: var(--ms-mint); font-style: italic; }
.bh-kicker {
  font: 500 9.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-ink-4);
}
.bh-close {
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: 14px; cursor: pointer;
}
.bh-close:hover { color: var(--ms-ink); }

.bh-grid {
  flex: 1; overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
  overscroll-behavior: contain;
}
.bh-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-hair-2);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  min-height: 130px;
}
.bh-card:hover,
.bh-card:active {
  border-color: var(--ms-mint-rim);
  transform: translateY(-1px);
}
.bh-card.is-on,
.bh-card.is-staged {
  border-color: var(--ms-mint);
  background: var(--ms-mint-soft);
  box-shadow: 0 0 0 1px var(--ms-mint) inset;
}
.bh-card.is-staged::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ms-mint);
  color: var(--ms-paper);
  font: 600 11px/18px "Manrope", sans-serif;
  text-align: center;
}
.bh-card { position: relative; }
.bh-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.bh-card-title {
  font: 600 14px/1.2 "Manrope", sans-serif;
  color: var(--ms-ink);
}
.bh-pill {
  font: 500 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 99px;
  background: var(--ms-gold-soft, rgba(212, 175, 55, 0.10));
  color: var(--ms-gold);
  border: 1px solid var(--ms-gold-rim, rgba(212, 175, 55, 0.28));
}
.bh-card-hint {
  font: 400 11.5px/1.4 "Manrope", sans-serif;
  color: var(--ms-ink-3);
}

/* Mini preview line inside each card */
.bh-preview {
  background: var(--ms-paper, #f7f1de);
  color: var(--mu-ink, #1a1408);
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--mu-rim, var(--ms-paper-rim, #c9b985));
  font-family: "Amiri Quran", "Amiri", serif;
  direction: rtl;
}
.bh-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 6px;
  font-size: 18px; line-height: 1.5;
}
.bh-w { padding: 0 2px; border-radius: 3px; transition: filter 0.25s; }
.bh-end {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--mu-medallion, #b88c2e);
  direction: ltr;
}

/* Per-mode preview effects · uses opacity instead of filter:blur for
   ~10× cheaper paint cost. Visual intent still reads — blurred words
   become semi-transparent ghosts. (Real mushaf still uses filter:blur
   on the actual page.) */
.bh-preview[data-mode="none"]       .bh-w { opacity: 1; }
.bh-preview[data-mode="verse"]      .bh-w:not(.revealed) { opacity: 0.18; }
.bh-preview[data-mode="word-swipe"] .bh-w:not(.revealed) { opacity: 0.18; }
.bh-preview[data-mode="word-swipe"] .bh-w.revealed { background: var(--ms-mint-soft); }
.bh-preview[data-mode="first"] .bh-w:not(.revealed) { opacity: 0.18; }
.bh-preview[data-mode="first"] .bh-w.revealed { background: var(--ms-mint-soft); }
.bh-preview[data-mode="last"]  .bh-w.after-last-waqf { opacity: 0.20; }
.bh-preview[data-mode="last"]  .bh-w.revealed { }
.bh-preview[data-mode="B-wordbank"] .bh-w.is-in-bank { opacity: 0.20; background: rgba(214, 138, 98, 0.14); }
.bh-preview[data-mode="top-of-page"] .bh-w.is-top-blur { opacity: 0.20; }

.bh-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--ms-hair-2);
  background: var(--ms-bg-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bh-foot-hint {
  font: 400 11px/1.4 "Manrope", sans-serif;
  color: var(--ms-ink-4);
  flex: 1;
}
.bh-foot-actions {
  display: flex;
  gap: 8px;
}
.bh-clear,
.bh-apply {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
  border: 1px solid var(--ms-hair-2);
}
.bh-clear {
  background: transparent;
  color: var(--ms-ink-3);
}
.bh-clear:hover {
  color: var(--ms-ink);
  background: var(--ms-bg-3);
}
.bh-apply {
  background: var(--ms-mint);
  color: var(--ms-paper);
  border-color: var(--ms-mint);
  font-weight: 600;
}
.bh-apply:hover {
  filter: brightness(1.05);
}