/* styles/topbar-pills.css · v225j
   ─────────────────────────────────────────────────────────────────────
   Topbar pills (Letters · Tajwīd · Blur · Halo) + their popovers.
   Mounted by modules/mushaf/topbar-pills.js into the .ed-row-right
   column of the .mushaf-chrome toolbar.

   Hides the legacy mode-cluster + bookmark UI built by chrome.js — the
   new pills replace them. The JS that wires those elements still runs;
   only the visual is suppressed.
   ───────────────────────────────────────────────────────────────────── */

/* ── Hide legacy mode-cluster + bookmarks ─────────────────────────── */
.mushaf-chrome .ed-modes-wrap,
.mushaf-chrome .ed-modes-pill-v1,
.mushaf-chrome .ed-modes-pop,
.mushaf-chrome .ed-bmk-btn,
.mushaf-chrome .ed-bmk-list-btn,
.mushaf-chrome .mu-bmk { display: none !important; }

/* v225q · pills moved to sidebar cards. Hide the topbar pills so the
   sidebar is the single source of truth for Letters / Tajwīd / Blur /
   Halo / Problems. The JS in topbar-pills.js still runs (it powers
   refresh callbacks via the same engine APIs) but the buttons are
   visually suppressed. */
.mushaf-chrome .ed-pill { display: none !important; }
.ed-pillpop { display: none !important; }

/* ── New pills ────────────────────────────────────────────────────── */
.mushaf-chrome .ed-pill {
  appearance: none; background: transparent;
  border: 1px solid rgba(124,91,20,0.34);            /* v225k · darker border for contrast */
  color: var(--ms-ink, #2d2a23);                     /* v225k · full ink (was --ms-ink-2, ~3:1 on cream) */
  cursor: pointer; border-radius: 999px;
  padding: 9px 14px 9px 11px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px/1 'Manrope', system-ui, sans-serif;
  transition: background .12s, color .12s, border-color .12s;
  position: relative;
}
.mushaf-chrome .ed-pill:hover {
  background: rgba(124,91,20,.10);
  color: var(--ms-gilt, #7c5b14);
  border-color: rgba(124,91,20,.5);
}
.mushaf-chrome .ed-pill.is-on {
  background: var(--ms-gilt, #7c5b14);
  color: var(--ms-paper, #faf3df);
  border-color: var(--ms-gilt, #7c5b14);
}
.mushaf-chrome .ed-pill-ic   { font: 600 14px/1 'Manrope', system-ui, sans-serif; }
.mushaf-chrome .ed-pill-lbl  { letter-spacing: .02em; }
.mushaf-chrome .ed-pill-val  {
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .06em;
  padding-left: 7px; margin-left: 4px;
  border-left: 1px solid rgba(124,91,20,.32);        /* v225k · stronger divider */
  color: var(--ms-gilt, #7c5b14);
}
.mushaf-chrome .ed-pill.is-on .ed-pill-val {
  color: var(--ms-paper, #faf3df);
  border-left-color: rgba(255,255,255,.32);
}
.mushaf-chrome .ed-pill-chev { font-size: 9px; opacity: .7; margin-left: 2px; }

/* iPad portrait — slightly tighter so all 4 pills + 3 icons fit one row */
@media (max-width: 900px) {
  .mushaf-chrome .ed-pill { padding: 9px 12px 9px 10px; gap: 5px; font-size: 11.5px; }
  .mushaf-chrome .ed-pill-val { padding-left: 6px; margin-left: 3px; font-size: 10px; }
}

/* ── Popover ──────────────────────────────────────────────────────── */
.ed-pillpop {
  position: fixed;
  background: var(--ms-paper-2, #f4eedf);
  color: var(--ms-ink, #2d2a23);
  border: 1px solid rgba(124,91,20,.5);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  min-width: 280px; max-width: 380px;
  max-height: 560px; overflow-y: auto;
  z-index: 2147483600;
  display: none;
  font: 13px/1.4 'Manrope', system-ui, sans-serif;
}
.ed-pillpop.is-open { display: block; }
.ed-pillpop h4 {
  margin: 0; padding: 6px 8px 4px;
  font: 700 10.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-gilt, #7c5b14);
}
.ed-pillpop p {
  margin: 0; padding: 4px 8px 8px;
  font: 500 11px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-3, rgba(45,42,35,.5));
}
.ed-pillpop .ed-pillpop-tier {
  margin: 10px 0 4px; padding: 0 8px;
  font: 600 9.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-ink-3, rgba(45,42,35,.5));
  display: flex; align-items: center; gap: 6px;
}
.ed-pillpop .ed-pillpop-tier::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(124,91,20,.18); margin-left: 6px;
}
.ed-pillpop .ed-pillpop-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; min-height: 44px;
  border-radius: 8px; cursor: pointer; gap: 10px;
  font: 600 12.5px/1.3 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink, #2d2a23);
}
.ed-pillpop .ed-pillpop-row:hover:not(.is-disabled) {
  background: rgba(124,91,20,.10);
  color: var(--ms-gilt, #7c5b14);
}
.ed-pillpop .ed-pillpop-row.is-on {
  background: var(--ms-gilt, #7c5b14);
  color: var(--ms-paper, #faf3df);
}
.ed-pillpop .ed-pillpop-row.is-disabled { opacity: .42; cursor: not-allowed; }
.ed-pillpop .ed-pillpop-l {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.ed-pillpop .ed-pillpop-stack {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ed-pillpop .ed-pillpop-stack .nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-pillpop .ed-pillpop-stack .ds {
  font: 500 10.5px/1.3 'Manrope', system-ui, sans-serif;
  color: rgba(45,42,35,.74);                          /* v225k · was .5 (failing AA) */
}
.ed-pillpop .ed-pillpop-row.is-on .ed-pillpop-stack .ds {
  color: rgba(255,255,255,.72);
}
.ed-pillpop .ed-pillpop-sw {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.ed-pillpop .ed-pillpop-check {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid rgba(124,91,20,.32);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ed-pillpop .ed-pillpop-row.is-on .ed-pillpop-check {
  background: var(--ms-paper, #faf3df);
  border-color: var(--ms-paper, #faf3df);
}
.ed-pillpop .ed-pillpop-row.is-on .ed-pillpop-check::after {
  content: "✓";
  font: 700 13px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-gilt, #7c5b14);
}
.ed-pillpop .ed-pillpop-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(124,91,20,.32);
  flex-shrink: 0; position: relative;
}
.ed-pillpop .ed-pillpop-row.is-on .ed-pillpop-radio {
  border-color: var(--ms-paper, #faf3df);
}
.ed-pillpop .ed-pillpop-row.is-on .ed-pillpop-radio::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--ms-paper, #faf3df);
}
.ed-pillpop .ed-pillpop-tag {
  font: 700 9px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ms-gilt, #7c5b14);
  padding-left: 6px;
}
.ed-pillpop .ed-pillpop-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 6px 2px; gap: 6px; margin-top: 8px;
  border-top: 1px solid rgba(124,91,20,.18);
}
.ed-pillpop .ed-pillpop-foot button {
  appearance: none; background: transparent;
  color: var(--ms-ink-3, rgba(45,42,35,.5));
  border: 1px solid rgba(124,91,20,.18);
  border-radius: 8px; padding: 9px 14px;
  font: 600 10.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .08em; cursor: pointer; min-height: 36px;
}
.ed-pillpop .ed-pillpop-foot button:hover {
  color: var(--ms-gilt, #7c5b14);
  border-color: rgba(124,91,20,.5);
}
.ed-pillpop .ed-pillpop-foot button.danger {
  color: #c0392b;
}

/* ── Letters grid · v225k · n × 4 columns ─────────────────────────── */
.ed-pillpop .ed-lh-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 6px 8px 4px;
}
.ed-pillpop .ed-lh-grid button {
  appearance: none;
  background: var(--ms-paper, #faf3df);
  border: 1px solid rgba(124,91,20,.32);
  color: var(--ms-ink, #2d2a23);
  border-radius: 10px;
  aspect-ratio: 1; min-height: 56px;                   /* bigger tap target with fewer columns */
  font: 500 28px/1 'Amiri Quran', serif;
  cursor: pointer; transition: all .12s; direction: rtl;
}
.ed-pillpop .ed-lh-grid button:hover {
  background: rgba(124,91,20,.10);
  border-color: rgba(124,91,20,.5);
}
.ed-pillpop .ed-lh-grid button.is-on {
  background: var(--ms-gilt, #7c5b14);
  color: var(--ms-paper, #faf3df);
  border-color: var(--ms-gilt, #7c5b14);
}

/* ── Letter highlight paint (target words) ──────────────────────────
   v225w · per-letter colors. The word inherits its hit color via the
   inline `--lh-color` custom property set by letter-highlight.js when
   it tags the word — paint stays the same shape (tint fill + 3 px
   underline) but recolors freely per picked letter. */
.mushaf-page .word-glyph.mu-lh-hit,
.mushaf-page .text-layer .word.mu-lh-hit {
  background: color-mix(in srgb, var(--lh-color, #7c5b14) 30%, transparent);
  box-shadow: inset 0 -3px 0 var(--lh-color, #7c5b14);
  border-radius: 4px;
}

/* ═══════════════════ v225m · Random mode + Reverse-blur ════════════ */

/* Shared modal (used by both random-mode.js and reverse-blur.js) */
.rm-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 2147483700;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.rm-modal.is-open { display: flex; }
.rm-card {
  background: var(--ms-paper, #faf3df); color: var(--ms-ink, #2d2a23);
  border-radius: 16px; width: 100%; max-width: 480px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden;
  display: flex; flex-direction: column;
  font: 13px/1.4 'Manrope', system-ui, sans-serif;
}
.rm-h {
  padding: 14px 18px; border-bottom: 1px solid rgba(124,91,20,.18);
  display: flex; align-items: center; gap: 10px;
}
.rm-h h3 {
  margin: 0; font: 700 13px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-gilt, #7c5b14);
}
.rm-x {
  margin-left: auto; appearance: none; background: transparent;
  border: 0; font-size: 18px; color: rgba(45,42,35,.5); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
}
.rm-x:hover { background: rgba(124,91,20,.10); color: var(--ms-gilt, #7c5b14); }
.rm-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rm-foot {
  padding: 12px 18px; border-top: 1px solid rgba(124,91,20,.18);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.rm-lbl { font: 700 10px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-gilt, #7c5b14); }
.rm-field { display: flex; align-items: center; gap: 8px; }
.rm-field input[type="number"] {
  flex: 1; min-width: 60px; padding: 10px 12px; min-height: 44px;
  border: 1px solid rgba(124,91,20,.32); border-radius: 10px;
  background: var(--ms-paper, #faf3df); color: var(--ms-ink, #2d2a23);
  font: 600 13px/1 'Manrope', sans-serif;
  font-variant-numeric: tabular-nums;
}
.rm-surah-name {
  font: 500 12px/1 'Manrope', sans-serif; color: var(--ms-gilt, #7c5b14);
  padding: 0 6px;
}
.rm-note {
  margin: 0; font: 500 11.5px/1.4 'Manrope', sans-serif;
  color: rgba(45,42,35,.74);
}
.rm-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-diff-card {
  appearance: none; background: rgba(124,91,20,.06);
  border: 1px solid rgba(124,91,20,.18);
  color: var(--ms-ink, #2d2a23); cursor: pointer;
  border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 80px; text-align: left;
  font: inherit;
}
.rm-diff-card:hover { background: rgba(124,91,20,.14); border-color: rgba(124,91,20,.5); }
.rm-diff-card.is-on {
  background: var(--ms-gilt, #7c5b14); color: var(--ms-paper, #faf3df);
  border-color: var(--ms-gilt, #7c5b14);
}
.rm-diff-card .nm { font: 700 13px/1 'Manrope', sans-serif; letter-spacing: .04em; }
.rm-diff-card .ds { font: 500 10.5px/1.3 'Manrope', sans-serif; opacity: .78; }
.rm-sub { padding-top: 4px; border-top: 1px dashed rgba(124,91,20,.18); }
.rm-btn {
  appearance: none; padding: 10px 16px; min-height: 44px;
  border-radius: 10px; border: 1px solid rgba(124,91,20,.18);
  background: transparent; color: var(--ms-ink, #2d2a23);
  font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .06em;
  cursor: pointer;
}
.rm-btn:hover { background: rgba(124,91,20,.10); border-color: rgba(124,91,20,.5); }
.rm-btn.is-primary {
  background: var(--ms-gilt, #7c5b14); color: var(--ms-paper, #faf3df);
  border-color: var(--ms-gilt, #7c5b14); font-weight: 700;
}
.rm-btn.is-primary:hover { background: #8e6916; }
.rm-btn:disabled { opacity: .42; cursor: not-allowed; }

/* Random-mode running pill (top-of-body floater) */
.rm-running-bar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 2147483600; display: none;
  align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--ms-paper, #faf3df); color: var(--ms-ink, #2d2a23);
  border: 1px solid rgba(124,91,20,.32); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font: 600 12px/1 'Manrope', sans-serif;
  max-width: 92vw;
}
.rm-running-bar.is-on { display: inline-flex; }
.rm-running-lbl { color: var(--ms-gilt, #7c5b14); letter-spacing: .08em; }
.rm-running-ref { font-variant-numeric: tabular-nums; font-weight: 700; }
.rm-running-mode { font: 600 10px/1 'Manrope', sans-serif; color: rgba(45,42,35,.74); letter-spacing: .06em; }
.rm-running-btn {
  appearance: none; min-height: 36px; padding: 8px 14px;
  border: 0; border-radius: 99px;
  background: var(--ms-gilt, #7c5b14); color: var(--ms-paper, #faf3df);
  font: 700 12px/1 'Manrope', sans-serif; letter-spacing: .06em;
  cursor: pointer;
}
.rm-running-btn:hover { background: #8e6916; }
.rm-running-x {
  appearance: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(192,57,43,.12); color: #c0392b; border: 0;
  font: 700 16px/1 'Manrope', sans-serif; cursor: pointer;
}
.rm-running-x:hover { background: rgba(192,57,43,.32); color: #fff; }

/* ═══════════════════ v225n · Problems pill dropdown ════════════════ */
.ed-pillpop-problems h4 { margin-bottom: 8px; }
.ed-pillpop .ed-pp-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 4px 8px;
  max-height: 360px; overflow-y: auto;
}
.ed-pillpop .ed-pp-empty {
  padding: 14px 12px; text-align: center;
  font: 500 11.5px/1.4 'Manrope', sans-serif;
  color: rgba(45,42,35,.74); font-style: italic;
}
.ed-pillpop .ed-pp-row {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: rgba(124,91,20,.06);
  border-radius: 8px;
  min-height: 44px;
}
.ed-pillpop .ed-pp-row-body {
  flex: 1; appearance: none; background: transparent; border: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 4px 6px; border-radius: 6px;
  cursor: pointer; min-width: 0;
}
.ed-pillpop .ed-pp-row-body:hover { background: rgba(124,91,20,.10); }
.ed-pillpop .ed-pp-ref {
  font: 700 13px/1.2 'Manrope', sans-serif;
  color: var(--ms-gilt, #7c5b14);
  font-variant-numeric: tabular-nums;
}
.ed-pillpop .ed-pp-label {
  font: 500 10.5px/1.2 'Manrope', sans-serif;
  color: rgba(45,42,35,.74);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ed-pillpop .ed-pp-counts {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font: 700 11px/1 'Manrope', sans-serif;
  color: var(--ms-ink, #2d2a23);
  font-variant-numeric: tabular-nums;
}
.ed-pillpop .ed-pp-bar {
  grid-column: 1 / -1;
  height: 4px; background: rgba(124,91,20,.18);
  border-radius: 99px; overflow: hidden;
  margin-top: 2px;
}
.ed-pillpop .ed-pp-bar-fill {
  height: 100%; background: var(--ms-gilt, #7c5b14);
  border-radius: 99px;
  transition: width .22s ease;
}
.ed-pillpop .ed-pp-tick,
.ed-pillpop .ed-pp-x {
  appearance: none; flex: 0 0 auto;
  width: 32px; height: 32px; min-width: 32px;
  border: 0; border-radius: 50%;
  background: rgba(124,91,20,.10); color: var(--ms-gilt, #7c5b14);
  font: 700 11px/1 'Manrope', sans-serif;
  cursor: pointer;
}
.ed-pillpop .ed-pp-tick:hover {
  background: var(--ms-gilt, #7c5b14); color: var(--ms-paper, #faf3df);
}
.ed-pillpop .ed-pp-x {
  background: rgba(192,57,43,.12); color: #c0392b; font-size: 16px;
}
.ed-pillpop .ed-pp-x:hover { background: rgba(192,57,43,.32); color: #fff; }
.ed-pillpop .ed-pp-add {
  width: calc(100% - 8px); margin: 4px;
  min-height: 40px; padding: 8px 12px;
  border: 1px dashed rgba(124,91,20,.32);
  border-radius: 8px;
  background: transparent; color: var(--ms-ink, #2d2a23);
  font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .04em;
  cursor: pointer;
}
.ed-pillpop .ed-pp-add:hover {
  background: rgba(124,91,20,.10); border-style: solid;
}
.ed-pillpop .ed-pp-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; margin: 4px;
  background: var(--ms-paper-2, #f4eedf);
  border: 1px solid var(--ms-gilt-soft, rgba(124,91,20,.5));
  border-radius: 10px;
}
.ed-pillpop .ed-pp-form-ref,
.ed-pillpop .ed-pp-form-label,
.ed-pillpop .ed-pp-form-goal {
  width: 100%; padding: 8px 10px; min-height: 36px;
  border: 1px solid rgba(124,91,20,.32); border-radius: 7px;
  background: var(--ms-paper, #faf3df);
  color: var(--ms-ink, #2d2a23);
  font: 600 12px/1 'Manrope', sans-serif;
  box-sizing: border-box;
}
.ed-pillpop .ed-pp-form-row {
  display: flex; align-items: center; gap: 6px;
}
.ed-pillpop .ed-pp-form-row span {
  flex: 1; font: 500 11px/1 'Manrope', sans-serif;
  color: rgba(45,42,35,.74);
}
.ed-pillpop .ed-pp-form-row .ed-pp-form-goal {
  width: 64px; flex: 0 0 64px; text-align: center;
}
.ed-pillpop .ed-pp-form-actions {
  display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px;
}
.ed-pillpop .ed-pp-form-cancel,
.ed-pillpop .ed-pp-form-save {
  min-height: 36px; padding: 8px 14px;
  border-radius: 7px; cursor: pointer;
  font: 700 11px/1 'Manrope', sans-serif;
  letter-spacing: .06em;
  border: 1px solid rgba(124,91,20,.18);
}
.ed-pillpop .ed-pp-form-cancel {
  background: transparent; color: rgba(45,42,35,.74);
}
.ed-pillpop .ed-pp-form-save {
  background: var(--ms-gilt, #7c5b14);
  color: var(--ms-paper, #faf3df);
  border-color: var(--ms-gilt, #7c5b14);
}
.ed-pillpop .ed-pp-form-save:hover { background: #8e6916; }

/* Reverse-blur · paint */
.mushaf-page .text-layer .word.rb-blurred,
.mushaf-page .glyph-layer .word-glyph.rb-blurred {
  filter: blur(7px);
  transition: filter .25s;
}

/* v225s · the floating bottom bar built by reverse-blur.js is hidden.
   The sidebar's Reverse-blur card (← Reveal next · Stop drill) is the
   sole UI now. JS still mounts the bar internally; CSS suppresses it. */
.rb-bar { display: none !important; }

/* ═══════════════════ v225s · No-zoom + no-scroll on muṣḥaf ═════════════
   Disable iOS double-tap-zoom + pinch-zoom on the muṣḥaf surface so
   word-taps register cleanly (random mode reveal, marker hold-ring,
   tajwid/blur tap interactions). The muṣḥaf is a fixed-page document —
   you flip pages, you don't scroll within one — so vertical scrolling
   inside .mushaf-page is also disabled. Content past the viewport
   bottom is cut, matching the printed page metaphor.
   ═════════════════════════════════════════════════════════════════════ */
/* v229l-fix-scroll · .mushaf-shell + .mushaf-page-host + .mushaf-host
   REMOVED from this selector. They were setting touch-action:none which,
   per CSS spec, intersects with descendants → blocks ALL touch on the
   sidebar (.sb-root)'s pan-y. The page-level layers still get
   touch-action:none below (correct: per-page is not vertically
   scrollable), but the shell + scroll containers must let pan-y reach
   the sidebar. */
.mushaf-page,
.mushaf-page .text-layer,
.mushaf-page .glyph-layer {
  touch-action: none;             /* v225s · no scroll, no zoom */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overflow: hidden !important;    /* v225s · clip what falls past page bottom */
  -webkit-overflow-scrolling: auto;
}

/* v225u · CSS containment limits browser layout/paint invalidation to the
   mushaf page sub-tree on each renderer rebuild. Without contain, a page
   flip triggers a global style recalc + paint of the whole document; with
   it, the cost stays inside the page. The MutationObserver cascade from
   8+ modules listening to .mushaf-page-host benefits the most. */
.mushaf-page {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 720px 1024px;   /* hint so contained content reserves space */
}
.mushaf-page-host {
  contain: layout style;
}
.mushaf-page .text-layer .word,
.mushaf-page .glyph-layer .word-glyph {
  touch-action: manipulation;   /* no double-tap zoom, no 300 ms delay */
}

/* v225t · iPad-wide tap responsiveness for every popup/modal control.
   Without this, iOS treats the first tap as hover (showing the hover
   background) and demands a second tap to fire the actual click. */
.ed-pillpop,
.ed-pillpop button,
.ed-pillpop input,
.ed-pillpop select,
.rm-modal,
.rm-modal button,
.rm-modal input,
.rm-modal select,
.rb-bar button,
.rm-running-bar button,
.wb-modal button,
.wb-modal input,
.mu-pop button,
.mu-pop input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
  .ed-pillpop .ed-pillpop-row:hover:not(.is-on) { background: transparent; color: var(--ms-ink, #2d2a23); }
  .ed-pillpop .ed-pp-row-body:hover { background: transparent; }
  .rm-modal .rm-btn:hover { background: transparent; }
  .rm-modal .rm-diff-card:hover:not(.is-on) { background: rgba(124,91,20,.06); border-color: rgba(124,91,20,.18); }
}

/* ═══════════════════ v225n · Random mode · cross-sūra blur ═════════════
   v225v · the blur fog on light cream ink + dark paper read as a *brighter*
   smear than the target — the user wrote "text is too light in dark mode".
   We dim the blurred words so the target reads as the brightest, sharpest
   element on the page. Dark paper themes get a stronger dim (cream on black
   blurs into a near-white fog otherwise). */
.mushaf-page .text-layer .word.rm-blurred,
.mushaf-page .glyph-layer .word-glyph.rm-blurred {
  filter: blur(7px);
  opacity: .55;
  transition: filter .22s, opacity .22s;
  cursor: pointer;
}
.mushaf-shell[data-paper-theme="M-night"] .mushaf-page .text-layer .word.rm-blurred,
.mushaf-shell[data-paper-theme="M-night"] .mushaf-page .glyph-layer .word-glyph.rm-blurred,
.mushaf-shell[data-paper-theme="M-navy-luxe"] .mushaf-page .text-layer .word.rm-blurred,
.mushaf-shell[data-paper-theme="M-navy-luxe"] .mushaf-page .glyph-layer .word-glyph.rm-blurred,
.mushaf-shell[data-paper-theme="M-forest-gold"] .mushaf-page .text-layer .word.rm-blurred,
.mushaf-shell[data-paper-theme="M-forest-gold"] .mushaf-page .glyph-layer .word-glyph.rm-blurred,
.mushaf-shell[data-paper-theme="M-blueprint"] .mushaf-page .text-layer .word.rm-blurred,
.mushaf-shell[data-paper-theme="M-blueprint"] .mushaf-page .glyph-layer .word-glyph.rm-blurred {
  filter: blur(8px);
  opacity: .32;
}
.mushaf-page .text-layer .word.rm-line-revealed,
.mushaf-page .glyph-layer .word-glyph.rm-line-revealed,
.mushaf-page .text-layer .word.rm-ayah-revealed,
.mushaf-page .glyph-layer .word-glyph.rm-ayah-revealed {
  filter: none;
  opacity: 1;
}

/* Cross-sūra range picker · 2-column layout */
.rm-range-cross {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
}
.rm-range-side {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(124,91,20,.06); padding: 12px;
  border-radius: 12px; border: 1px solid rgba(124,91,20,.18);
}
.rm-range-arrow {
  font: 700 22px/1 'Manrope', system-ui, sans-serif;
  color: rgba(124,91,20,.5);
  text-align: center;
}
.rm-range-side .rm-lbl {
  font: 700 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-gilt, #7c5b14);
  margin-bottom: 2px;
}
.rm-range-side .rm-field {
  display: flex; align-items: center; gap: 8px;
}
.rm-range-side .rm-field input[type="number"] {
  flex: 1; min-height: 44px; padding: 10px 12px;
  border: 1px solid rgba(124,91,20,.32); border-radius: 10px;
  background: var(--ms-paper, #faf3df); color: var(--ms-ink, #2d2a23);
  font: 600 13px/1 'Manrope', sans-serif;
  font-variant-numeric: tabular-nums;
}
.rm-range-side .rm-field input.rm-sm { max-width: 72px; }
.rm-range-side .rm-surah-name {
  flex: 1; font: 500 11.5px/1 'Manrope', sans-serif;
  color: var(--ms-gilt, #7c5b14);
}
.rm-range-side .rm-lbl-mini {
  font: 600 10px/1 'Manrope', sans-serif;
  color: rgba(45,42,35,.74); letter-spacing: .08em;
}
.rm-range-side .rm-note-mini {
  font: 500 10.5px/1 'Manrope', sans-serif;
  color: rgba(45,42,35,.5);
}

/* Reverse-blur · bottom bar */
.rb-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 2147483650; display: none;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--ms-paper, #faf3df); color: var(--ms-ink, #2d2a23);
  border: 1px solid rgba(124,91,20,.32); border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  font: 600 12px/1 'Manrope', sans-serif;
}
.rb-bar.is-on { display: flex; }
.rb-bar-lbl { color: var(--ms-gilt, #7c5b14); letter-spacing: .12em; text-transform: uppercase; font: 700 10.5px/1 'Manrope', sans-serif; }
.rb-bar-ref { font-variant-numeric: tabular-nums; font-weight: 700; padding: 0 6px; }
.rb-bar-progress { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rb-bar-progress-track { height: 5px; background: rgba(124,91,20,.18); border-radius: 99px; overflow: hidden; }
.rb-bar-progress-fill { height: 100%; background: var(--ms-gilt, #7c5b14); border-radius: 99px; width: 0%; transition: width .22s; }
.rb-bar-progress-num { font: 500 10.5px/1 'Manrope', sans-serif; color: rgba(45,42,35,.74); font-variant-numeric: tabular-nums; }
.rb-bar-progress-num b { color: var(--ms-ink, #2d2a23); }
.rb-bar-stop {
  appearance: none; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(192,57,43,.12); color: #c0392b; border: 0;
  font: 700 16px/1 'Manrope', sans-serif; cursor: pointer;
}
.rb-bar-stop:hover { background: rgba(192,57,43,.32); color: #fff; }
.rb-bar-cursor {
  appearance: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ms-gilt, #7c5b14); color: var(--ms-paper, #faf3df);
  border: 0; cursor: pointer; font: 700 22px/1 'Manrope', sans-serif;
  box-shadow: 0 6px 16px rgba(124,91,20,.36);
}
.rb-bar-cursor:hover { background: #8e6916; }