/* ═══════════════════════════════════════════════════════════════════════
   Mushaf · Tajwīd highlights · Phase 4c pass 1
   ─────────────────────────────────────────────────────────────────────
   Companion to modules/mushaf/tajwid.js. Each rule's visual is a class
   added to .word AND .word-glyph (mirror). The glyph-layer carries the
   actual visible glyph, so most tints target .word-glyph. The text-layer
   is invisible but receives the same class so the data-tj~="X" gate is
   symmetric.

   Colors are intentionally hardcoded here (rgba over neutrals) — matches
   the catalog mockup. They will be re-tokenized to --tj-* variables in
   a follow-up pass (memory: project_tajwid_theme_aware).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── R-lam-jalala · every Allāh word, gold/bronze ─────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-lam-jalala"] .word-glyph.tj-lam-jalala {
  color: #7a4f10;
  background: rgba(140, 90, 30, 0.16);
  border-radius: 3px;
}

/* ── R-madd · four sub-types · each its own color ─────────────────────
   Color logic:
     · tabīʿī  = soft red       — the baseline 2-ḥaraka madd
     · muttaṣil = deep red       — the more emphatic 4-5
     · munfaṣil = clay/amber     — pause-related, distinct hue
     · lāzim    = purple         — the 6-ḥaraka outlier, most visually striking
   */
/* Selectors fixed v220 — were using [data-tj~="R-madd"] which never matched
   the actual per-sub-type mode IDs (R-madd-tabii, R-madd-muttasil, etc.).
   Toggling a madd sub-type SET the right data-tj but the CSS didn't bind. */
/* v225y · fix #11 from perf audit. Color + bg now read user-overridable
   CSS variables; defaults remain the hex literals via var() fallback.
   tajwid-colors.js writes the user values to `:root`; no <style> injection,
   no !important. */
.mushaf-page .glyph-layer[data-tj~="R-madd-tabii"] .word-glyph.tj-madd-tabii {
  color: var(--user-tj-madd-tabii-color, #b03737);
  background: var(--user-tj-madd-tabii-bg, rgba(200, 56, 56, 0.10));
  border-radius: 3px;
}
.mushaf-page .glyph-layer[data-tj~="R-madd-muttasil"] .word-glyph.tj-madd-muttasil {
  color: var(--user-tj-madd-muttasil-color, #8a1818);
  background: var(--user-tj-madd-muttasil-bg, rgba(200, 56, 56, 0.24));
  border-radius: 3px;
  font-weight: 600;
}
.mushaf-page .glyph-layer[data-tj~="R-madd-munfasil"] .word-glyph.tj-madd-munfasil {
  color: var(--user-tj-madd-munfasil-color, #8a4a14);
  background: var(--user-tj-madd-munfasil-bg, rgba(220, 140, 60, 0.20));
  border-radius: 3px;
}
.mushaf-page .glyph-layer[data-tj~="R-madd-lazim"] .word-glyph.tj-madd-lazim {
  color: var(--user-tj-madd-lazim-color, #5a1c7a);
  background: var(--user-tj-madd-lazim-bg, rgba(140, 60, 160, 0.22));
  border-radius: 3px;
  font-weight: 700;
}

/* ── R-qalqala · qutb-jad letters with sukūn · blue ───────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-qalqala"] .word-glyph.tj-qalqala {
  color: var(--user-tj-qalqala-color, #1f3a72);
  background: var(--user-tj-qalqala-bg, rgba(46, 108, 196, 0.14));
  font-weight: 600;
  border-radius: 3px;
}

/* ── R-shadda · every nasal-humming context · green ───────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-shadda"] .word-glyph.tj-shadda {
  color: var(--user-tj-shadda-color, #1f6b3a);
  background: var(--user-tj-shadda-bg, rgba(47, 156, 90, 0.18));
  font-weight: 600;
  border-radius: 3px;
}

/* ── R-ra-heavy · tafkhīm · deep brown bold ───────────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-ra-heavy"] .word-glyph.tj-ra-heavy {
  color: #6a3010;
  background: rgba(160, 80, 30, 0.26);
  font-weight: 700;
  border-radius: 3px;
}

/* ── R-ra-light · tarqīq · slate blue italic ──────────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-ra-light"] .word-glyph.tj-ra-light {
  color: #3a5a8a;
  background: rgba(80, 130, 180, 0.22);
  font-style: italic;
  border-radius: 3px;
}

/* ── R-izhar · clear nūn sākinah · sage green ─────────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-izhar"] .word-glyph.tj-izhar {
  color: #4a7a4a;
  background: rgba(100, 160, 100, 0.22);
  border-radius: 3px;
}

/* ── R-ikhfa · concealment · teal ─────────────────────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-ikhfa"] .word-glyph.tj-ikhfa {
  color: var(--user-tj-ikhfa-color, #176b6b);
  background: var(--user-tj-ikhfa-bg, rgba(40, 160, 160, 0.18));
  border-radius: 3px;
}

/* ── R-iqlab · n→m conversion before b · magenta ──────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-iqlab"] .word-glyph.tj-iqlab {
  color: var(--user-tj-iqlab-color, #8a2773);
  background: var(--user-tj-iqlab-bg, rgba(180, 80, 150, 0.18));
  font-weight: 600;
  border-radius: 3px;
}

/* ── R-idgham-ghunna · merging WITH ghunna · olive ────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-idgham-ghunna"] .word-glyph.tj-idgham-ghunna {
  color: var(--user-tj-idgham-ghunna-color, #5a6618);
  background: var(--user-tj-idgham-ghunna-bg, rgba(120, 140, 40, 0.22));
  border-radius: 3px;
}

/* ── R-idgham-no-ghunna · merging WITHOUT ghunna · tan ────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-idgham-no-ghunna"] .word-glyph.tj-idgham-no-ghunna {
  color: var(--user-tj-idgham-no-ghunna-color, #6a5a30);
  background: var(--user-tj-idgham-no-ghunna-bg, rgba(160, 130, 60, 0.22));
  border-radius: 3px;
}

/* ── R-idgham-shafawi · labial m→m merging · forest green ─────────────── */
.mushaf-page .glyph-layer[data-tj~="R-idgham-shafawi"] .word-glyph.tj-idgham-shafawi {
  color: var(--user-tj-idgham-shafawi-color, #2a663a);
  background: var(--user-tj-idgham-shafawi-bg, rgba(70, 130, 80, 0.22));
  border-radius: 3px;
}

/* ── R-ikhfa-shafawi · labial m hidden before b · teal-green ──────────── */
.mushaf-page .glyph-layer[data-tj~="R-ikhfa-shafawi"] .word-glyph.tj-ikhfa-shafawi {
  color: var(--user-tj-ikhfa-shafawi-color, #2a7a6a);
  background: var(--user-tj-ikhfa-shafawi-bg, rgba(70, 160, 140, 0.22));
  border-radius: 3px;
}

/* ── R-hamzat-wasl · silent connecting alif · subtle gray ─────────────── */
.mushaf-page .glyph-layer[data-tj~="R-hamzat-wasl"] .word-glyph.tj-hamzat-wasl {
  color: var(--user-tj-hamzat-wasl-color, #6a6a6a);
  background: var(--user-tj-hamzat-wasl-bg, rgba(120, 120, 120, 0.10));
  border-radius: 3px;
}

/* ── R-lam-shamsiyyah · silent lām · light gray ───────────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-lam-shamsiyyah"] .word-glyph.tj-lam-shamsiyyah {
  color: var(--user-tj-lam-shamsiyyah-color, #7a7a7a);
  background: var(--user-tj-lam-shamsiyyah-bg, rgba(150, 150, 150, 0.10));
  font-style: italic;
  border-radius: 3px;
}

/* ── R-silent · terminal silent alif (struck through) ────────────────── */
.mushaf-page .glyph-layer[data-tj~="R-silent"] .word-glyph.tj-silent {
  color: var(--user-tj-silent-color, #8a8275);
  text-decoration: line-through 1px solid #8a8275;
  text-decoration-skip-ink: none;
}

/* When two rules hit the same word, the more recent class wins on color
   but both backgrounds layer. Acceptable for a first pass; we'll add a
   priority table once we see real combos. */


/* ═══════════════════════════════════════════════════════════════════════
   Tajwīd Hub modal · mirrors .bh-* in mushaf-blur-modes.css
   ═══════════════════════════════════════════════════════════════════════ */

.tj-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.tj-modal.is-open { display: flex; pointer-events: auto; }

.tj-back {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.tj-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;
  overscroll-behavior: contain;
}

.tj-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ms-hair-2);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.tj-head h3 {
  font: 500 22px/1.2 "Cormorant Garamond", serif;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--ms-ink);
}
.tj-head h3 em { color: var(--ms-mint); font-style: italic; }
.tj-kicker {
  font: 500 9.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-ink-4);
}
.tj-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;
}
.tj-close:hover { color: var(--ms-ink); }

/* Tab strip · "Rules" + "Highlighter" sit under the header */
.tj-tabs {
  display: flex; gap: 0;
  padding: 0 14px; margin-top: -4px;
  border-bottom: 1px solid var(--ms-rule, #d8d2c0);
  background: var(--ms-paper, #fbf8f0);
}
.tj-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 16px; font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a); cursor: pointer; min-height: 36px;
}
.tj-tab:hover { color: var(--ms-ink, #1a1815); }
.tj-tab[aria-selected="true"] {
  color: var(--ms-ink, #1a1815);
  border-bottom-color: var(--ms-mint, #0a7460);
}

/* Wrapper that scrolls the categorized card sections */
.tj-grid-wrap {
  flex: 1; overflow: auto;
  padding: 12px 14px;
  overscroll-behavior: contain;
}
.tj-grid-wrap[hidden] { display: none; }

/* ── Highlighter tab body (pools) ────────────────────────────── */
.tj-pools-wrap {
  flex: 1; overflow: auto;
  padding: 12px 14px;
  overscroll-behavior: contain;
}
.tj-pools-wrap[hidden] { display: none; }
.tjp-empty {
  padding: 18px 12px; text-align: center;
  color: var(--ms-ink-soft, #5a544a);
  font: 400 12.5px/1.5 'Manrope', system-ui, sans-serif;
  font-style: italic;
}
.tjp-pools { display: flex; flex-direction: column; gap: 5px; }
.tjp-pool {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; cursor: pointer;
  background: var(--ms-paper, #fbf8f0);
  border: 1px solid var(--ms-rule, #d8d2c0);
  border-radius: 9px;
}
.tjp-pool:hover { background: var(--ms-paper-2, #efeadb); }
.tjp-pool.is-active {
  border-color: var(--ms-mint, #0a7460);
  box-shadow: 0 0 0 2px rgba(10, 116, 96, 0.15);
}
.tjp-pool[data-vis="false"] { opacity: 0.5; }
.tjp-pool .sw {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tjp-pool .meta { flex: 1; min-width: 0; }
.tjp-pool .name {
  font: 600 13px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink, #1a1815);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tjp-pool .desc {
  font: 500 10.5px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.tjp-pool .vis {
  background: transparent; border: 0;
  color: var(--ms-ink-soft, #5a544a);
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  min-height: 32px; min-width: 32px;
}
.tjp-pool .vis:hover { background: var(--ms-paper-2, #efeadb); color: var(--ms-ink, #1a1815); }
.tjp-add {
  margin-top: 8px; width: 100%; min-height: 38px;
  background: transparent;
  border: 1px dashed var(--ms-rule, #d8d2c0);
  color: var(--ms-ink-soft, #5a544a);
  border-radius: 9px; cursor: pointer;
  font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
}
.tjp-add:hover { background: var(--ms-paper, #fbf8f0); color: var(--ms-ink, #1a1815); }

/* Pool editor */
.tjp-editor {
  display: none;
  margin-top: 14px;
  padding: 12px;
  background: var(--ms-paper, #fbf8f0);
  border: 1px solid var(--ms-mint, #0a7460);
  border-radius: 11px;
}
.tjp-editor.is-open { display: block; }
.tjp-editor-h {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.tjp-editor-h h4 {
  margin: 0;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink, #1a1815);
}
.tjp-editor-h .acts { display: flex; gap: 4px; }
.tjp-editor-h .acts button {
  background: transparent; border: 0;
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a);
  padding: 5px 9px; border-radius: 7px; cursor: pointer; min-height: 28px;
}
.tjp-editor-h .acts button:hover { background: var(--ms-paper-2, #efeadb); color: var(--ms-ink, #1a1815); }
.tjp-editor-h .acts .danger { color: #a23a2c; }
.tjp-editor-h .acts .danger:hover { background: rgba(162, 58, 44, 0.1); }
.tjp-editor .row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.tjp-editor .row label {
  font: 500 11px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a);
  min-width: 48px;
}
.tjp-editor input[type="text"] {
  flex: 1; min-width: 0;
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  padding: 6px 10px;
  background: var(--ms-bg, #f6f3eb);
  border: 1px solid var(--ms-rule, #d8d2c0);
  border-radius: 7px; color: var(--ms-ink, #1a1815);
}
.tjp-editor .swatches { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.tjp-editor .swatches button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; padding: 0; min-height: 24px;
  cursor: pointer;
}
.tjp-editor .swatches button[aria-pressed="true"] {
  border-color: var(--ms-ink, #1a1815);
  outline: 1px solid var(--ms-bg, #f6f3eb); outline-offset: -3px;
}
.tjp-editor .swatches input[type="color"] {
  width: 28px; height: 24px; padding: 1px;
  border: 1px solid var(--ms-rule, #d8d2c0);
  border-radius: 6px; background: var(--ms-bg, #f6f3eb); cursor: pointer;
}
.tjp-editor .scopes { display: flex; gap: 4px; flex: 1; }
.tjp-editor .scopes button {
  flex: 1; padding: 6px 8px; min-height: 32px;
  font: 500 11.5px/1 'Manrope', system-ui, sans-serif;
  background: var(--ms-bg, #f6f3eb);
  border: 1px solid var(--ms-rule, #d8d2c0);
  color: var(--ms-ink-soft, #5a544a);
  border-radius: 7px; cursor: pointer;
}
.tjp-editor .scopes button[aria-pressed="true"] {
  background: var(--ms-mint, #0a7460); color: #fff;
  border-color: var(--ms-mint, #0a7460);
}
.tjp-editor .hint {
  font: 500 12px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--ms-mint, #0a7460);
  background: rgba(10, 116, 96, 0.10);
  text-align: center; padding: 7px 10px;
  border-radius: 7px; margin-top: 6px;
}
.tjp-editor .members {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ms-rule, #d8d2c0);
}
.tjp-editor .members .ttl {
  font: 600 10.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ms-ink-soft, #5a544a);
  margin-bottom: 6px;
}
.tjp-editor .members .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tjp-editor .members .chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--ms-bg, #f6f3eb);
  border: 1px solid var(--ms-rule, #d8d2c0);
  font: 500 14px/1.1 'Amiri Quran', 'Amiri', serif;
  direction: rtl; color: var(--ms-ink, #1a1815);
  cursor: pointer;
}
.tjp-editor .members .chip .x {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a); font-size: 11px;
}
.tjp-editor .members .chip:hover .x { color: #a23a2c; }
.tjp-editor .members .empty {
  font: italic 400 11.5px/1 'Manrope', system-ui, sans-serif;
  color: var(--ms-ink-soft, #5a544a);
  text-align: center; padding: 6px;
}

/* Pool-painted words on the glyph layer use inline styles set by the
   pools module. No CSS needed for the colors themselves — the module
   uses !important to win over the rule layer. We only add cursor here
   so it's clear the word is interactive when a pool is active. */
.mushaf-page .glyph-layer .word-glyph[data-pool] { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════
   Word-actions menu (modules/mushaf/word-actions.js)
   Variant 1 — hold-ring progress + popover menu.
   ════════════════════════════════════════════════════════════════ */

/* Hold-ring progress overlay */
.wa-ring {
  position: absolute;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
  transition: opacity .15s ease;
}
.wa-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.wa-ring .wa-ring-bg {
  fill: none;
  stroke: rgba(10, 116, 96, 0.18);
  stroke-width: 4;
}
.wa-ring .wa-ring-fill {
  fill: none;
  stroke: #0a7460;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 289.03;   /* 2 * π * 46 ≈ 289 */
  stroke-dashoffset: 289.03;
}
.wa-ring.is-active { opacity: 1; }
.wa-ring.is-active .wa-ring-fill {
  animation: wa-ring-fill 400ms linear forwards;
}
@keyframes wa-ring-fill {
  to { stroke-dashoffset: 0; }
}
.wa-ring.is-fading   { opacity: 0; }
.wa-ring.is-consumed .wa-ring-fill { animation: wa-ring-pop 220ms ease forwards; }
@keyframes wa-ring-pop {
  to { stroke-width: 8; stroke: rgba(10, 116, 96, 0.6); }
}

/* Popover menu */
.wa-menu {
  position: absolute;
  z-index: 2147483647;
  min-width: 280px; max-width: 92vw;
  background: rgba(28, 26, 22, 0.97);
  color: #f1ede0;
  border-radius: 14px;
  box-shadow: 0 24px 56px -12px rgba(0,0,0,.55), 0 4px 14px -4px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px) scale(.96);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  font-family: 'Manrope', system-ui, sans-serif;
}
.wa-menu.is-open {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.wa-menu .wa-arrow {
  position: absolute;
  top: -7px; left: 28px;
  width: 14px; height: 14px;
  background: rgba(28, 26, 22, 0.97);
  transform: rotate(45deg);
  border-radius: 2px;
}
.wa-menu[data-arrow="bottom"] .wa-arrow {
  top: auto; bottom: -7px;
}
.wa-menu .wa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.wa-menu .wa-pin-text {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 22px; color: #d5b157; direction: rtl;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-menu .wa-close {
  background: transparent; border: 0;
  color: rgba(255,255,255,.5);
  font: 600 16px/1 'Manrope', system-ui, sans-serif;
  width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; padding: 0;
}
.wa-menu .wa-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.wa-menu .wa-body { padding: 6px; }
.wa-menu .wa-row {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: #f1ede0;
  width: 100%; padding: 10px 10px; border-radius: 8px;
  cursor: pointer; text-align: left;
  font: 500 13px/1.2 'Manrope', system-ui, sans-serif;
}
.wa-menu .wa-row:hover { background: rgba(255,255,255,.08); }
.wa-menu .wa-row .wa-ic { font-size: 16px; width: 22px; text-align: center; }
.wa-menu .wa-row .wa-lbl { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wa-menu .wa-row .wa-lbl b { font-weight: 600; }
.wa-menu .wa-row .wa-lbl i {
  font-style: normal; font-size: 11px;
  color: rgba(241,237,224,.55);
}
.wa-menu .wa-row .wa-chev { color: rgba(255,255,255,.4); font-size: 14px; }
.wa-menu .wa-sep {
  height: 1px; background: rgba(255,255,255,.08); margin: 4px 8px;
}

.wa-menu .wa-section-h {
  padding: 6px 12px 2px;
  font: 600 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(241,237,224,.55);
}
/* v225 · inline marker list inside word-actions main pane */
.wa-menu .wa-marker-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto;
  padding: 0 6px;
}
/* v225c · rule group (folder containing markers) */
.wa-menu .wa-rule-group {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 6px 4px 4px;
}
.wa-menu .wa-rule-h {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px 6px;
}
.wa-menu .wa-rule-chev { color: rgba(241,237,224,.6); font-size: 12px; }
.wa-menu .wa-rule-name {
  flex: 1; font: 600 11.5px/1 'Manrope', sans-serif;
  letter-spacing: .04em;
  color: rgba(241,237,224,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-menu .wa-rule-add {
  appearance: none; border: 0;
  width: 28px; height: 28px; min-width: 28px; border-radius: 7px;
  background: rgba(10,116,96,.18); color: #6ee0c0;
  font: 700 14px/1 'Manrope', sans-serif; cursor: pointer;
}
.wa-menu .wa-rule-add:hover { background: rgba(10,116,96,.32); }
.wa-menu .wa-rule-empty {
  padding: 8px 8px; font-size: 11px; font-style: italic;
  color: rgba(241,237,224,.4); text-align: center;
}
.wa-menu .wa-btn-row { display: flex; gap: 6px; padding: 0 6px; }
.wa-menu .wa-btn-row .wa-btn { margin: 6px 0; flex: 1; }

.wa-menu .wa-marker-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  min-height: 44px;
}
.wa-menu .wa-marker-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.wa-menu .wa-marker-name {
  flex: 1; font-size: 13px; color: #f1ede0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-menu .wa-marker-actions { display: flex; gap: 4px; flex-shrink: 0; }
.wa-menu .wa-marker-actions button {
  appearance: none;
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border-radius: 7px;
  background: rgba(255,255,255,.06); color: #f1ede0; border: 0;
  font: 700 11px/1 'Manrope', sans-serif; cursor: pointer;
}
.wa-menu .wa-marker-actions button:hover {
  background: rgba(10,116,96,.5); color: #fff;
}
.wa-menu .wa-btn {
  width: calc(100% - 12px); margin: 6px;
  min-height: 44px; border-radius: 10px;
  background: rgba(10,116,96,.18); color: #6ee0c0;
  border: 1px solid rgba(10,116,96,.36);
  font: 600 13px/1 'Manrope', sans-serif; cursor: pointer;
}
.wa-menu .wa-btn:hover { background: rgba(10,116,96,.30); }
.wa-menu .wa-btn-quiet {
  background: transparent; border-style: dashed;
  color: rgba(241,237,224,.62); border-color: rgba(255,255,255,.14);
}
.wa-menu .wa-empty {
  padding: 14px 12px; font-size: 12px;
  color: rgba(241,237,224,.5); font-style: italic; text-align: center;
}

/* Per-word halo override (toggled from word-actions menu) */
.word-glyph[data-word-halo="1"] {
  text-shadow:
    0 0 6px  rgba(255, 215, 110, .85),
    0 0 14px rgba(255, 215, 110, .55),
    0 0 22px rgba(255, 215, 110, .28);
  filter: drop-shadow(0 0 4px rgba(255, 215, 110, .6));
}

.wa-menu .wa-memberships { padding: 4px 8px 2px; }
.wa-menu .wa-mem-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  margin: 4px 0;
}
.wa-menu .wa-mem-sw {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18);
}
.wa-menu .wa-mem-name {
  flex: 1 1 auto;
  font: 500 12px/1.25 'Manrope', system-ui, sans-serif;
  color: #f1ede0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-menu .wa-mem-scope {
  flex: 0 0 auto;
  font: 700 9px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 99px;
  background: rgba(255,255,255,.08); color: rgba(241,237,224,.78);
}
.wa-menu .wa-mem-scope[data-scope="verbatim"] { background: rgba(184,138,42,.28); color: #ffd884; }
.wa-menu .wa-mem-scope[data-scope="here"]     { background: rgba(10,116,96,.32);  color: #6ee0c0; }
.wa-menu .wa-mem-scope[data-scope="root"]     { background: rgba(90,28,122,.34);  color: #d3a4ec; }
.wa-menu .wa-mem-x {
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(162,58,44,.18); color: #f5a89a;
  border: 0; cursor: pointer;
  font: 700 14px/1 system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-menu .wa-mem-x:hover { background: rgba(162,58,44,.42); color: #fff; }
.wa-menu .wa-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
}
.wa-menu .wa-grid.wa-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.wa-menu .wa-q {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 0; color: #f1ede0;
  padding: 10px 8px; border-radius: 8px; cursor: pointer;
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
}
.wa-menu .wa-q:hover { background: rgba(10,116,96,.65); }
.wa-menu .wa-q .wa-ic { font-size: 14px; }

/* Sub-panes (add-pool, new-rule, color) */
.wa-menu .wa-pane-h {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 8px;
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  color: rgba(241,237,224,.7);
  letter-spacing: .06em; text-transform: uppercase;
}
.wa-menu .wa-back {
  background: transparent; border: 0; color: #d5b157;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.wa-menu .wa-back:hover { background: rgba(213,177,87,.12); }

.wa-pool-list { padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.wa-pool {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.wa-pool-sw {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.wa-pool-name { flex: 1; font: 500 13px/1.1 'Manrope', system-ui, sans-serif; }
.wa-pool-scopes { display: flex; gap: 3px; }
.wa-pool-scopes button {
  background: rgba(255,255,255,.10); border: 0; color: #f1ede0;
  padding: 6px 10px; border-radius: 6px;
  font: 600 10.5px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer; min-height: 28px;
  white-space: nowrap;
}
.wa-pool-scopes button:hover {
  background: rgba(10,116,96,.65); transform: scale(1.04);
}

.wa-empty {
  padding: 16px 10px; text-align: center;
  color: rgba(241,237,224,.5);
  font: italic 400 11.5px/1.4 'Manrope', system-ui, sans-serif;
}
.wa-empty b { color: #d5b157; font-style: normal; font-weight: 600; }

.wa-row-input {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
}
.wa-row-input label {
  font: 500 11px/1 'Manrope', system-ui, sans-serif;
  color: rgba(241,237,224,.6);
  min-width: 44px;
}
.wa-row-input input[type="text"] {
  flex: 1;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: #f1ede0;
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  padding: 6px 10px; border-radius: 7px;
}
.wa-row-actions {
  display: flex; gap: 6px; padding: 8px 10px 6px;
}
.wa-cancel, .wa-create {
  flex: 1; min-height: 34px;
  background: rgba(255,255,255,.10); border: 0;
  color: #f1ede0;
  font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
  border-radius: 8px; cursor: pointer;
}
.wa-cancel:hover { background: rgba(255,255,255,.16); }
.wa-create.primary { background: #0a7460; }
.wa-create.primary:hover { background: #0c8a73; }

.wa-swatches {
  display: flex; flex-direction: column; gap: 6px; padding: 4px 10px;
}
.wa-swatches button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; padding: 0; min-height: 24px;
  cursor: pointer;
}
.wa-swatches button[aria-pressed="true"] {
  border-color: #fff; outline: 1px solid rgba(0,0,0,.6); outline-offset: -3px;
}
/* v225e · per-tier swatch groups */
.wa-swatch-tier { display: flex; flex-direction: column; gap: 3px; }
.wa-swatch-tier-label {
  font: 600 9px/1 'Manrope', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(241,237,224,.46);
}
.wa-swatch-row {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.wa-swatch-row button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; padding: 0;
  cursor: pointer;
}
.wa-swatch-row button[aria-pressed="true"] {
  border-color: #fff; outline: 1px solid rgba(0,0,0,.6); outline-offset: -3px;
}
.wa-swatches input[type="color"] {
  width: 26px; height: 22px; padding: 1px;
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px; cursor: pointer;
}
.wa-scopes {
  display: flex; gap: 4px; padding: 4px 10px; flex: 1;
}
.wa-scopes button {
  flex: 1; padding: 6px; min-height: 30px;
  background: rgba(255,255,255,.08); border: 0; color: #f1ede0;
  font: 500 11.5px/1 'Manrope', system-ui, sans-serif;
  border-radius: 6px; cursor: pointer;
}
.wa-scopes button[aria-pressed="true"] {
  background: #0a7460;
}

/* Toast */
.wa-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(4px);
  background: rgba(28,26,22,.97); color: #f1ede0;
  padding: 8px 14px; border-radius: 999px;
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  box-shadow: 0 12px 28px -6px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483647;
}
.wa-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Mode-pill contrast fix (was almost invisible on light mushaf themes
   — gray text on light bg). v222: bump default contrast and ensure pills
   work against both light and dark sidebar backgrounds. */
.mu-v3-pill {
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(0, 0, 0, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}
.mu-v3-pill:hover {
  background: rgba(0, 0, 0, 0.48) !important;
}
.mu-v3-pill .mu-v3-dot { background: rgba(255, 255, 255, 0.4) !important; }
.mu-v3-pill.is-on {
  color: #f5d97a !important;
  background: rgba(213, 177, 87, 0.18) !important;
  border-color: rgba(213, 177, 87, 0.62) !important;
}
.mu-v3-pill.is-on .mu-v3-dot { background: #f5d97a !important; }
.tj-cat { margin-bottom: 14px; }
.tj-cat-head {
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ms-ink-4);
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--ms-hair-2);
  margin-bottom: 10px;
}
.tj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Inline color swatch on the top-right of each card */
.tj-card-swatch {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px;
  border-radius: 5px;
  border: 1px solid var(--ms-hair-2);
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;
}
.tj-card-swatch::after {
  content: "✏︎";
  font-size: 10px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 2px rgba(0,0,0,.6);
}
.tj-card-color {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%; padding: 0; border: 0;
}

.tj-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;
  position: relative;
}
.tj-card:hover,
.tj-card:active {
  border-color: var(--ms-mint-rim);
  transform: translateY(-1px);
}
.tj-card.is-staged {
  border-color: var(--ms-mint);
  background: var(--ms-mint-soft);
  box-shadow: 0 0 0 1px var(--ms-mint) inset;
}
.tj-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;
}
.tj-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.tj-card-title {
  font: 600 14px/1.2 "Manrope", sans-serif;
  color: var(--ms-ink);
}
.tj-card-hint {
  font: 400 11.5px/1.4 "Manrope", sans-serif;
  color: var(--ms-ink-3);
}

/* Mini Arabic preview line inside each card — reuses .tj-* mode classes
   so the preview uses the same paint pipeline as the live mushaf. */
.tj-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;
}
.tj-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 6px;
  font-size: 18px; line-height: 1.5;
}
.tj-w { padding: 0 2px; border-radius: 3px; }

/* Apply each preview-card mode class without the data-tj layer gate, so
   the demo tints render even when the rule is off in the live mushaf.
   v225y · same --user-tj-* CSS variables as the live rules — when the
   user picks a custom color, both the preview swatch and the live mushaf
   word stay in sync automatically (no <style> injection needed). */
.tj-preview .tj-w.tj-lam-jalala     { color: var(--user-tj-lam-jalala-color, #7a4f10); background: var(--user-tj-lam-jalala-bg, rgba(140, 90, 30, 0.16)); font-weight: 700; }
.tj-preview .tj-w.tj-qalqala        { color: var(--user-tj-qalqala-color, #1f3a72); background: var(--user-tj-qalqala-bg, rgba(46, 108, 196, 0.14)); font-weight: 600; }
.tj-preview .tj-w.tj-shadda         { color: var(--user-tj-shadda-color, #1f6b3a); background: var(--user-tj-shadda-bg, rgba(47, 156, 90, 0.18)); font-weight: 600; }
.tj-preview .tj-w.tj-ikhfa          { color: var(--user-tj-ikhfa-color, #176b6b); background: var(--user-tj-ikhfa-bg, rgba(40, 160, 160, 0.18)); }
.tj-preview .tj-w.tj-iqlab          { color: var(--user-tj-iqlab-color, #8a2773); background: var(--user-tj-iqlab-bg, rgba(180, 80, 150, 0.18)); font-weight: 600; }
.tj-preview .tj-w.tj-idgham-ghunna    { color: var(--user-tj-idgham-ghunna-color, #5a6618); background: var(--user-tj-idgham-ghunna-bg, rgba(120, 140, 40, 0.22)); }
.tj-preview .tj-w.tj-idgham-no-ghunna { color: var(--user-tj-idgham-no-ghunna-color, #6a5a30); background: var(--user-tj-idgham-no-ghunna-bg, rgba(160, 130, 60, 0.22)); }
.tj-preview .tj-w.tj-idgham-shafawi   { color: var(--user-tj-idgham-shafawi-color, #2a663a); background: var(--user-tj-idgham-shafawi-bg, rgba(70, 130, 80, 0.22)); }
.tj-preview .tj-w.tj-ikhfa-shafawi    { color: var(--user-tj-ikhfa-shafawi-color, #2a7a6a); background: var(--user-tj-ikhfa-shafawi-bg, rgba(70, 160, 140, 0.22)); }
.tj-preview .tj-w.tj-ra-heavy       { color: #6a3010; background: rgba(160, 80, 30, 0.26); font-weight: 700; }
.tj-preview .tj-w.tj-ra-light       { color: #3a5a8a; background: rgba(80, 130, 180, 0.22); font-style: italic; }
.tj-preview .tj-w.tj-izhar          { color: #4a7a4a; background: rgba(100, 160, 100, 0.22); }
.tj-preview .tj-w.tj-hamzat-wasl    { color: var(--user-tj-hamzat-wasl-color, #6a6a6a); background: var(--user-tj-hamzat-wasl-bg, rgba(120, 120, 120, 0.10)); }
.tj-preview .tj-w.tj-lam-shamsiyyah { color: var(--user-tj-lam-shamsiyyah-color, #7a7a7a); background: var(--user-tj-lam-shamsiyyah-bg, rgba(150, 150, 150, 0.10)); font-style: italic; }
.tj-preview .tj-w.tj-silent         { color: var(--user-tj-silent-color, #8a8275); text-decoration: line-through 1px solid #8a8275; }
.tj-preview .tj-w.tj-madd-tabii     { color: var(--user-tj-madd-tabii-color, #b03737); background: var(--user-tj-madd-tabii-bg, rgba(200, 56, 56, 0.10)); }
.tj-preview .tj-w.tj-madd-muttasil  { color: var(--user-tj-madd-muttasil-color, #8a1818); background: var(--user-tj-madd-muttasil-bg, rgba(200, 56, 56, 0.24)); font-weight: 600; }
.tj-preview .tj-w.tj-madd-munfasil  { color: var(--user-tj-madd-munfasil-color, #8a4a14); background: var(--user-tj-madd-munfasil-bg, rgba(220, 140, 60, 0.20)); }
.tj-preview .tj-w.tj-madd-lazim     { color: var(--user-tj-madd-lazim-color, #5a1c7a); background: var(--user-tj-madd-lazim-bg, rgba(140, 60, 160, 0.22)); font-weight: 700; }
.tj-preview .tj-w.tj-madd-arid      { color: #7a3a52; background: rgba(200, 90, 130, 0.18); font-style: italic; }

.tj-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;
}
.tj-foot-hint {
  font: 400 11px/1.4 "Manrope", sans-serif;
  color: var(--ms-ink-4);
  flex: 1;
}
.tj-foot-actions { display: flex; gap: 8px; }
.tj-clear, .tj-apply {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  border: 1px solid var(--ms-hair-2);
}
.tj-clear { background: transparent; color: var(--ms-ink-3); }
.tj-clear:hover, .tj-clear:active { color: var(--ms-ink); background: var(--ms-bg-3); }
.tj-apply {
  background: var(--ms-mint);
  color: var(--ms-paper);
  border-color: var(--ms-mint);
  font-weight: 600;
}
.tj-apply:hover { filter: brightness(1.05); }


/* ═══════════════════════════════════════════════════════════════════════
   Tajwīd pill · sits next to the blur pill in the topbar
   ═══════════════════════════════════════════════════════════════════════ */

.ed-tj-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 11px;
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ms-ink-2);
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ed-tj-pill:hover,
.ed-tj-pill:active {
  color: var(--ms-mint);
  border-color: var(--ms-mint-rim);
}
.ed-tj-pill.is-on {
  background: var(--ms-mint-soft);
  color: var(--ms-mint);
  border-color: var(--ms-mint);
}
.ed-tj-lbl { letter-spacing: 0.14em; }
.ed-tj-count {
  font: 500 9.5px/1 "JetBrains Mono", monospace;
  padding: 3px 6px;
  border-radius: 99px;
  background: var(--ms-mint);
  color: var(--ms-paper);
  min-width: 16px;
  text-align: center;
}
.ed-tj-pill:not(.is-on) .ed-tj-count { display: none; }
.ed-tj-caret { opacity: 0.55; font-size: 10px; }

/* Halo pill · same base as tajwīd but colors the active state with the
   user's chosen halo hex (--halo-stop-1) so the topbar matches the glow.
   Falls back to amber-gold when no override is set. */
.ed-halo-pill.is-on {
  background: color-mix(in srgb, var(--halo-stop-1, #ffc437) 12%, transparent);
  color: var(--halo-stop-1, #ffc437);
  border-color: color-mix(in srgb, var(--halo-stop-1, #ffc437) 50%, transparent);
}
.ed-halo-pill.is-on .ed-tj-count {
  background: var(--halo-stop-1, #ffc437);
  color: #1a1207;
}

/* ═══════════════════════════════════════════════════════════════════════
   Modes cluster · variant A · manuscript serif (shipped 2026-05-17)
   ─────────────────────────────────────────────────────────────────────
   Drops the pill chrome entirely. Blur · Tajwīd · Halo render as rubric
   tokens — uppercase letterspaced labels with a small colored state dot
   and a tiny number badge when active. A tatweel-swirl hairline ornament
   sits beneath as a manuscript-style separator (banner-D vocabulary).
   ═══════════════════════════════════════════════════════════════════════ */

/* Vertical wrap: rubric row on top, swirl-rule beneath */
.ed-modes-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* The cluster is a flat flex row · no chrome, no border, no padding */
.ed-modes-cluster {
  display: inline-flex;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 18px;
  min-height: 44px;       /* WCAG H3 tap-target floor preserved */
  align-items: center;
  padding-right: 6px;
}

/* Each segment · the legacy pill-pill classes (.ed-blur-pill etc.) get
   their chrome stripped here. They become uppercase letterspaced rubric
   labels. The 44 px tap target is maintained via padding even though
   the visible chrome is gone. */
.ed-modes-cluster .ed-modes-seg,
.ed-modes-cluster .ed-modes-seg.ed-blur-pill,
.ed-modes-cluster .ed-modes-seg.ed-tj-pill,
.ed-modes-cluster .ed-modes-seg.ed-halo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ms-ink-3);
  font: 600 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease;
  user-select: none;
  box-shadow: none;
}
.ed-modes-cluster .ed-modes-seg:hover {
  color: var(--ms-ink);
  background: transparent;
}
.ed-modes-cluster .ed-modes-seg:focus-visible {
  outline: 2px solid var(--ms-mint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Active rubric · token brightens to its mode's color. No background. */
.ed-modes-cluster .ed-modes-seg.is-on {
  color: var(--ms-ink);
  background: transparent;
  box-shadow: none;
}
.ed-modes-cluster .ed-blur-pill.is-on { color: var(--ms-mint); }
.ed-modes-cluster .ed-tj-pill.is-on   { color: var(--ms-mint); }
.ed-modes-cluster .ed-halo-pill.is-on { color: var(--halo-stop-1, #ffc437); }

/* Mode-state dot · always visible; brightens when on */
.ed-modes-cluster .ed-modes-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.16s ease;
}
.ed-modes-cluster .ed-modes-seg.is-on .ed-modes-dot { opacity: 1; }
.ed-modes-cluster .ed-modes-dot[data-c="blur"]   { background: #6ea8ff; }
.ed-modes-cluster .ed-modes-dot[data-c="tajwid"] { background: #74d3a0; }
.ed-modes-cluster .ed-modes-dot[data-c="halo"]   { background: var(--halo-stop-1, #ffc437); }
/* Memorize pill lives in the top bar outside the cluster, but reuses
   the same dot color slot for visual cohesion. */
.ed-memo-pill .ed-modes-dot[data-c="memo"] { background: #7c5b14; }
.ed-memo-pill.is-on .ed-modes-dot[data-c="memo"] { background: #f7f1de; }
.ed-memo-pill.is-on {
  background: #7c5b14;
  border-color: #7c5b14;
  color: #f7f1de;
}
.ed-memo-pill { color: #7c5b14; border-color: rgba(124,91,20,0.32); }
.ed-memo-pill:hover { color: #7c5b14; background: rgba(124,91,20,0.06); }

/* Count badge · tiny bronze-tinted pill (no pill chrome elsewhere, but
   the count needs to read as a number, so it gets a quiet pill of its
   own). Hidden via [hidden] attr when the segment is off. */
.ed-modes-cluster .ed-modes-num {
  font: 700 9.5px/14px "JetBrains Mono", monospace;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 99px;
  background: rgba(124,91,20,0.16);
  color: rgba(124,91,20,0.85);
  text-align: center;
  letter-spacing: 0;
}
.ed-modes-cluster .ed-tj-pill.is-on   .ed-modes-num { background: rgba(116,211,160,0.28); color: #1f6b3a; }
.ed-modes-cluster .ed-halo-pill.is-on .ed-modes-num { background: var(--halo-stop-1, #ffc437); color: #1a1207; }

/* Tatweel-swirl hairline · manuscript-mushaf vocabulary. A horizontal
   hairline rule with a central curl ornament. Sits directly beneath the
   rubric row. Inherits color from currentColor; muted bronze in light
   themes, faint white in dark. */
.ed-modes-swirl {
  width: 100%;
  height: 14px;
  display: block;
  color: rgba(124, 91, 20, 0.45);
  pointer-events: none;
  overflow: visible;
}
html[data-ui*="night"] .ed-modes-swirl,
html[data-ui*="dark"]  .ed-modes-swirl,
html[data-ui*="cosmic"] .ed-modes-swirl {
  color: rgba(255, 255, 255, 0.28);
}

/* A subtle vertical hairline before the utility icons gives them a
   group identity without using pill chrome — mirrors the manuscript
   marginalia separator vocabulary. */
.ed-row-right > .ed-modes-wrap + .ed-peek-v3::before {
  content: "";
  display: inline-block;
  width: 1px; height: 22px;
  background: rgba(124,91,20,0.32);
  margin-right: 10px;
  vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════════
   Tajwīd color picker · lives in the mushaf settings wrench panel.
   ═══════════════════════════════════════════════════════════════════════ */

.ed-tj-reset-all {
  align-self: flex-start;
  margin: 4px 0 6px;
  background: var(--ms-bg-2);
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  border-radius: 6px;
  padding: 7px 12px;
  font: 500 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ed-tj-reset-all:hover {
  color: var(--ms-mint);
  border-color: var(--ms-mint-rim);
}

.ed-tj-color-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.ed-tj-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 6px;
}
.ed-tj-color-name {
  flex: 1;
  font: 500 12px/1.25 "Manrope", sans-serif;
  color: var(--ms-ink-2);
}
.ed-tj-color-swatch {
  position: relative;
  width: 36px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--ms-hair-2);
  cursor: pointer;
  padding: 0;
  font: 600 11px/1 "Amiri Quran", "Amiri", serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  overflow: hidden;
}
.ed-tj-color-swatch::after {
  content: "ا";  /* alif inside the swatch as a "preview" letter */
  font: 600 14px/1 "Amiri Quran", "Amiri", serif;
}
.ed-tj-color-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;  /* parent button drives the click */
}
.ed-tj-color-reset {
  background: transparent;
  border: 0;
  color: var(--ms-ink-4);
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
}
.ed-tj-color-reset:hover {
  color: var(--ms-mint);
}


/* ═══════════════════════════════════════════════════════════════════════
   Multi-color rule picker · settings wrench
   ═══════════════════════════════════════════════════════════════════════ */

.ed-tj-mc-desc {
  font: 400 11px/1.45 "Manrope", sans-serif;
  color: var(--ms-ink-4);
  margin: 4px 0 8px;
}
.ed-tj-mc-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ed-tj-mc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--ms-bg-1);
  border: 1px solid var(--ms-hair-2);
  border-radius: 6px;
  cursor: pointer;
}
.ed-tj-mc-row:hover { border-color: var(--ms-mint-rim); }
.ed-tj-mc-row.is-on {
  background: var(--ms-mint-soft);
  border-color: var(--ms-mint);
}
.ed-tj-mc-input {
  width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: var(--ms-mint);
  cursor: pointer;
}
.ed-tj-mc-swatch {
  width: 22px; height: 16px;
  border-radius: 3px;
  border: 1px solid transparent;
  flex: 0 0 auto;
}
.ed-tj-mc-name {
  flex: 1;
  font: 500 12px/1.25 "Manrope", sans-serif;
  color: var(--ms-ink-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   Sub-view chrome · back arrow in header · sub-config chip on Madd card
   ═══════════════════════════════════════════════════════════════════════ */

.tj-head { gap: 10px; }
.tj-head-text { flex: 1; }

.tj-back-arrow {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--ms-hair-2);
  color: var(--ms-ink-3);
  border-radius: 6px;
  font: 500 18px/1 "Manrope", sans-serif;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0 2px 0;
}
.tj-back-arrow[hidden] { display: none; }
.tj-back-arrow:hover,
.tj-back-arrow:active {
  color: var(--ms-mint);
  border-color: var(--ms-mint-rim);
}

.tj-sub-chip {
  font: 500 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 99px;
  background: var(--ms-bg-2);
  color: var(--ms-ink-3);
  border: 1px solid var(--ms-hair-2);
  flex: 0 0 auto;
}
.tj-card.is-staged .tj-sub-chip {
  background: var(--ms-mint);
  color: var(--ms-paper);
  border-color: var(--ms-mint);
}

/* wa-menu · Tajwīd rule-picker pane (v228ac) */
.wa-body-tj-rules { padding: 6px 10px 10px; }
.wa-tj-rules-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  max-height: 260px;
  overflow-y: auto;
}
.wa-tj-rules-empty {
  padding: 14px 4px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.55);
  text-align: center;
}
.wa-tj-rule-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 7px;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.wa-tj-rule-row:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.wa-tj-rule-row:active { transform: scale(.99); }
.wa-tj-rule-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.wa-tj-rule-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wa-tj-rule-label {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-tj-rule-count {
  font-size: 10px;
  letter-spacing: .3px;
  opacity: .55;
  text-transform: uppercase;
}