/* ════════════════════════════════════════════════════════════════════════
   styles/main.css — Mithlayn site spine styles
   ───────────────────────────────────────────────────────────────────────
   ⚠ KNOWN DUPLICATE SELECTORS (intentional layering — DO NOT blind-merge)
   ───────────────────────────────────────────────────────────────────────
   Each pair below has TWO definitions in this file. The second is loaded
   later, so for any property declared in both, the second WINS. If you
   edit the first and see no effect, check the second one.
                                                first       second
     .verse-tr ............................... L1131      L2043
     .verse-card ............................. L2024      L2858
     .v-top .................................. L235       L3568
     .twin-chip / .twin-chip-sm .............. L314/341   L2800/2805
     .tell-legend ............................ L1163      L2867
     .sparkle-btn ............................ L250       L2798
     .sak-cluster ............................ L534       L3101 (Mod-2 overlay)
     .sak-master-wrap / -btn ................. L548/549   L3133/3134
     .sak-lede / -label / -item .............. L568/544/587  L3110/3106/3123
     .sak-group / -groups-v3 / -group-hdr-en . L577/572/579  L3116/3114/3119
     .sak-footer / -bayt-box ................. L596/597   L3129/3130
     .mushaf-chip ............................ L347       L2809
     .mode-tab ............................... L1990      L2010
     .loading ................................ L1534      L2147
     .ip-row / .ip-fill / .ip-bar / .info-progress  L423/431/430/421  L2934/2937/2936/2932
   The .sak-* dupes are the original Pattern-B styling (L534+) being
   overlaid by the Sakhāwī Mod-2 universal styling block (L3093+) —
   functionally intentional. The other 11 pairs are likely historical
   accidents that consolidation passes can collapse one-by-one.
   ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);font-size:15px;line-height:1.6;color:var(--cream);background:var(--bg);min-height:100vh;}

/* HEADER — layout owned by styles/topbar.css (header.hdr rule at L305).
   v188-isk2 · removed the duplicate `.hdr` rule that used to live here.
   topbar.css's `header.hdr` is more specific (0,1,1 vs 0,1,0) and covers
   every property this rule set: background, border-bottom, box-shadow,
   position:sticky, top:0, z-index:100. Single source of truth = topbar.css. */
.hdr-top{display:flex;align-items:center;justify-content:flex-start;padding:9px 22px;gap:10px;}
.brand{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:6px 8px;border-radius:8px;} /* v229-fix-tap-brand: was 97x25 — added padding + min-height since this <div> is wired to onclick="goHome()" at index.html:531 */
.brand-ar{font-family:var(--font-ar);font-size:1.55rem;color:var(--gold-lt);font-weight:700;line-height:1;}
.brand-sep{color:rgba(212,148,14,0.4);font-size:1.2rem;}
.brand-en{font-size:0.78rem;color:var(--cream-faint);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.user-strip{display:flex;align-items:center;gap:8px;}
.user-chip{display:flex;align-items:center;gap:7px;padding:6px 12px;background:var(--bg-2);border:1px solid var(--border-mid);border-radius:18px;font-size:0.78rem;color:var(--cream);cursor:pointer;}
.user-chip:hover{border-color:var(--gold-bdr);}
.user-chip .avatar{width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--bg);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:0.78rem;}
.hdr-bot{display:flex;align-items:center;justify-content:space-between;padding:0 22px 7px;gap:10px;flex-wrap:wrap;}
.nav{display:flex;gap:4px;flex-wrap:wrap;}
.nav-btn{background:transparent;border:1px solid transparent;color:var(--cream-dim);padding:10px 14px;min-height:44px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);font-size:0.88rem;font-weight:600;transition:all 0.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;} /* v229-fix-tap-nav-btn: 6→10 padding, min-height 44 */
.nav-btn:hover{background:var(--bg-2);color:var(--cream);}
.nav-btn.active{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.nav-btn .ic{font-size:1rem;}
.nav-link{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:7px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s;font-weight:600;}
.nav-link:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
.nav-link.drill{background:rgba(212,148,14,0.14);border-color:var(--gold-bdr);color:var(--gold-lt);}

.app{display:flex;height:calc(100vh - 110px);}
.sidebar{width:260px;min-width:260px;background:var(--bg-1);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;}
.sb-hdr{padding:14px 16px 10px;font-size:0.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid var(--border);}
/* v160-wip-16: Mushaf ribbon — vertical line down the rail, glowing nodes per surah.
   Visualizes progression through the Qur'an as a single thread. Replaces the dual-text-row layout
   that previously split AR right and EN left and created a visual seam. */
.sb-list{padding:14px 12px 14px 0;display:flex;flex-direction:column;position:relative;}
.sb-list::before{content:'';position:absolute;top:14px;bottom:14px;left:42px;width:2px;background:linear-gradient(180deg,var(--gold) 0%,var(--teal) 50%,var(--border) 100%);border-radius:1px;pointer-events:none;}
/* v188-isk2 · sb-ar is still emitted by the V3 renderer (renderSidebar
   in index.html L2450 ships `<div class="ms-ar sb-ar">…</div>`) so its
   rule survives the legacy purge below. */
.sb-ar{font-family:var(--font-ar);font-size:1.18rem;color:var(--cream);direction:rtl;text-align:left;display:block;line-height:1.15;}
/* v188-isk2 · removed legacy sidebar classes:
     .sb-item / .sb-item:hover / .sb-item.active / .sb-item.locked
     .sb-num  · .sb-node  · .sb-item.mem|partial|active .sb-node
     .sb-names · .sb-en · .sb-item.active .sb-ar
     .sb-badge · .sb-range-badge · .sb-mastered · .sb-cnt(.mast) · .sb-add
     .sb-dots · .sb-dot-group · .sb-dot{.conf|.clust|.mast|.merged} · .sb-dot-n
   The V3 sidebar renderer (index.html:2382-2473) emits .ms-row.sb-r3
   rows with .sb-r3-meta / .sb-r3-bar / .sb-r3-fill instead. The Juzʾ/
   Hizb mode that used these classes lives in modules/sidebar-juz-hizb-
   archive.js, which is not script-loaded. Verified no JS template
   string or HTML attribute still emits any of these names. The 3-tier
   !important stack in .ms-surah-list li.sb-r3 (main.css L3177-3340)
   was previously needed to defeat these legacy rules; with them gone,
   a future session can remove those !important markers. */

.main{flex:1;overflow-y:auto;}
.view{display:none;padding:22px 26px calc(96px + env(safe-area-inset-bottom, 0px)) 26px;}
.view.active{display:block;animation:view-fade-in 220ms cubic-bezier(.2,.9,.2,1);}
/* v227k3 · subtle cross-fade between Hub/Reader/Mushaf/etc. Gives
   transitions a buttery feel · matches the printed-book "page turn"
   metaphor. Mushaf has its own fade-in (.is-entering) so we only
   animate the surrounding view chrome here, not the page. */
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .view.active{animation:none;}
}
/* wip-27h: extra bottom space so the FAB (~50px circle + 24px offset) and the
   iPhone home indicator don't cover the last verse / last setting / last
   revision tile. Was: padding:22px 26px. */

/* v160-wip-24: surah-hdr is NO LONGER STICKY. The wip-23 sticky strip blocked
   verse text on scroll. Surah identity now appears as a breadcrumb in the brand
   bar (.brand-surah) after the original header scrolls past, and a Jump FAB
   floats over the page. Both are user-configurable in Settings → Reading layout. */
/* v188-isk11 · Surah hero — Variant 4 (continuous flow). Centered
   stack with theme-aware glow on the Arabic name + basmala. The
   basmala has 32px margin-top so it doesn't kiss the Arabic above
   it. Glow tints reference --ms-mint-rim / --ms-mint (per-theme in
   themes.css), falling back to --gold-bdr / --gold-lt.
   v188-isk16 · AURORA BAND halo (variant D from preview-surah-halos-v4).
   A wide shallow ellipse anchored at top:65% of the hero (so its
   brightest point sits between the basmala and verse 1). Height 140%
   spills the bleed past the hero's bottom edge into the first verse
   row. NO bottom border on the hero — the natural color falloff
   serves as the visual division. Theme-aware via --ms-mint-rim /
   --ms-mint-soft. */
.surah-hdr{
  position:relative;
  text-align:center;
  padding:48px 0 36px;
  margin-bottom:0;
  /* border-bottom removed at v188-isk16 — would break the halo bleed */
  isolation:isolate;
  /* v188-isk35 · scroll-margin-top so scrollIntoView({block:'start'})
     (used by the continuous-scroll snap + click-to-top from sidebar)
     leaves room for the sticky brand bar instead of burying the hero
     behind it. */
  scroll-margin-top:80px;
}
.surah-hdr::before{
  content:'';
  position:absolute;
  left:50%;
  top:65%;                     /* anchored low so bleed extends DOWN */
  transform:translate(-50%, -50%);
  width:180%;
  height:140%;
  pointer-events:none;
  z-index:-1;
  /* v207 · Hero halo is now keyed off --hero-glow / --hero-glow-soft.
     Default chain: per-theme override → existing mint-rim → gold fallback.
     Light themes can set --hero-glow to a softer, complementary tint to
     avoid the muddy-yellow-smudge look on cream/white backgrounds. */
  background:radial-gradient(ellipse 50% 70% at 50% 50%,
    var(--hero-glow,      var(--ms-mint-rim,  var(--gold-bdr, rgba(216,200,154,0.28)))) 0%,
    var(--hero-glow-soft, var(--ms-mint-soft, var(--gold-bg,  rgba(216,200,154,0.14)))) 40%,
    transparent 85%);
  filter:blur(30px);
}
/* v188-isk16 · First verse gets generous top-padding so the v1 number
   doesn't sit on top of the halo's brightest stretch. Per
   project_basmala_rendering, surah 1 (Al-Fātiḥah) renders basmala AS
   verse 1, so this padding also lifts that line into the halo's afterglow. */
.verse-list .verse-row:first-child{
  padding-top:24px;
}
.surah-hdr .sh-eyebrow{
  font:500 10.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.24em;
  color:var(--cream-faint);
  text-transform:uppercase;
  margin:0 0 22px;
}
.surah-hdr .sh-title{
  font:300 56px/1 'Fraunces',Georgia,serif;
  color:var(--cream);
  margin:0 0 20px;
  letter-spacing:-0.018em;
  /* v207 · Title glow keyed off --hero-glow with mint-rim/gold fallbacks
     so per-theme overrides flow through to the text-shadow too. */
  text-shadow:0 0 36px var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.45)))),
              0 0 16px var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.45)))),
              0 0 4px  var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.30))));
}
.surah-hdr .sh-title i{
  font-style:italic;
  font-weight:400;
  color:var(--ms-mint, var(--gold-lt));
}
.surah-hdr .sh-ar{
  font-family:'Amiri Quran','Amiri',var(--font-ar);
  font-size:40px;
  font-weight:400;
  line-height:1;
  color:var(--cream);
  direction:rtl;
  margin:0;
  text-shadow:0 0 32px var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.45)))),
              0 0 14px var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.45)))),
              0 0 4px  var(--hero-glow, var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.30))));
}
.surah-hdr .sh-basmala{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:26px;
  line-height:1.5;
  color:var(--cream-dim);
  direction:rtl;
  margin:32px 0 0;       /* ← 32px breathing room above */
  opacity:0.96;
  text-shadow:0 0 24px var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.40))),
              0 0 10px var(--ms-mint-rim, var(--gold-bdr, rgba(216,200,154,0.30)));
}
.surah-hdr .sh-sub{
  font:italic 400 14px/1.6 'Cormorant Garamond',Georgia,serif;
  color:var(--cream-faint);
  letter-spacing:0.01em;
  margin:24px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v190 · BASIC INFINITE-SCROLL READER · stacked surahs with a static
   3-dot divider between adjacent pairs. Reverts v189's hard-boundary
   nav cards + back FAB + hero-pulse animation. Reader = native browser
   scroll, JS only stitches the next/prev surah onto the ends.
   ═══════════════════════════════════════════════════════════════════════════ */

.surah-page{ position:relative }

/* Static 3-dot divider between every pair of adjacent loaded surahs.
   Emitted at the end of every surah with sid < 114, sits just below
   the verse-list close and just above the next surah's hero. Three
   theme-accent dots in a row, faint glow. Purely visual. */
/* v207 · User wants NO dot dividers. Surah-divider hidden but kept in
   DOM as a tall spacer between surahs so the tail of the previous
   surah is well below the viewport when landing on the next hero. */
.surah-divider{
  display:block;
  margin:96px auto 120px;
}
.surah-divider .sd-dot{ display:none; }
@media (max-width:720px){
  .surah-divider{ margin:72px auto 96px; }
}
/* Land the surah hero BELOW the sticky topbar (header.hdr is ~88 px
   tall: 47 px hdr-top + 41 px hdr-bot). 120 px clears it + leaves a
   ~30 px breathing buffer so the eyebrow doesn't kiss the topbar. */
.surah-hdr{ scroll-margin-top:120px; }
@media (max-width:720px){ .surah-hdr{ scroll-margin-top:104px; } }

/* Legacy .surah-hdr-ar / .surah-hdr-meta retained for any non-Reader
   call sites + per-theme overrides in shared-themes.css that still
   target them. The new template doesn't emit these classes. */
.surah-hdr-ar{font-family:var(--font-ar);font-size:2rem;color:var(--gold-lt);direction:rtl;line-height:1.1;}
.surah-hdr-meta{font-size:0.8rem;color:var(--cream-faint);margin-top:5px;}

@media(max-width:700px){
  .surah-hdr{padding:24px 0 22px;margin-bottom:18px}
  .surah-hdr .sh-title{font-size:42px}
  .surah-hdr .sh-ar{font-size:34px}
  .surah-hdr .sh-basmala{font-size:22px;margin-top:24px}
  .surah-hdr .sh-sub{font-size:13px;margin-top:18px}
}

/* v160-wip-24: Brand-bar breadcrumb. Default "after-scroll" mode is hidden until
   the page surah-hdr scrolls past; when html[data-crumb-mode="always"] is set it
   stays visible whenever a surah is loaded. */
/* v188-isk2 · Intentional kill-switch — DO NOT remove !important.
   v160-wip-24 wired the brand-bar breadcrumb to show on scroll via a
   .show class added by JS. v160-wip-27b scrapped the feature visually
   but left the JS in place (boot.js still toggles .show). Both rules
   below pin display:none with !important so the dead JS can't bring
   the element back. To revive the breadcrumb: remove the .show line
   AND restore the v160-wip-24 transition rules. */
.brand-surah{display:none !important;}
.brand-surah.show{display:none !important;}
/* v160-wip-27b: surah breadcrumb removed per spec. JS still updates it
   harmlessly; CSS keeps it hidden in all states. The breadcrumb-mode
   setting was also removed from Settings. */
.brand-surah .bs-ar{font-family:var(--font-ar);font-size:1.1rem;color:var(--gold-lt);direction:rtl;line-height:1;white-space:nowrap;}
.brand-surah .bs-meta{font-size:0.74rem;color:var(--cream-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
@media (max-width:560px){
  .brand-surah{padding-left:8px;margin-left:4px;}
  .brand-surah .bs-ar{font-size:0.95rem;}
  .brand-surah .bs-meta{display:none;}
}

/* v160-wip-27: Floating Jump-to-verse entry point. THREE STYLE VARIANTS,
   driven by html[data-jump-style="A"|"B"|"C"] (default: B). Same #float-jump
   button is restyled for each variant. The pill-shaped wip-24 design has been
   superseded by these three from previews-r19/r20.
     A = thin edge tab on right viewport edge (vertical "Jump" label)
     B = circular FAB at bottom-right (default — replaces wip-24 pill)
     C = compact rail on right edge with current-verse pointer + draggable scrubber
   Configurable in Settings → Reading layout → Jump-to-verse style. */

/* Base .float-jump — common state. Each variant below overrides geometry. */
.float-jump{position:fixed;z-index:60;display:none;cursor:pointer;
  font-family:var(--font);
  transition:transform 0.22s cubic-bezier(0.2,1.4,0.4,1),opacity 0.22s ease,box-shadow 0.18s ease,background 0.18s ease;
  border:none;background:transparent;color:inherit;padding:0;
  opacity:0;}
.float-jump.show{display:inline-flex;opacity:1;}
.float-jump .fj-rng{display:none;}
/* fj-rng was a verse-range badge on the wip-24 pill. Removed in wip-27 — the range
   is shown inside the drawer header instead. The element is kept in markup so
   _updateSurahCrumbAndFab() can still write to it harmlessly. */

/* ─── VARIANT A · EDGE TAB ─────────────────────────────────────── */
html[data-jump-style="A"] .float-jump{
  right:0;top:50%;transform:translateY(-50%) translateX(20px);
  flex-direction:column;align-items:center;gap:10px;
  padding:18px 9px 18px 11px;
  background:linear-gradient(180deg,rgba(212,148,14,0.22) 0%,rgba(212,148,14,0.14) 100%);
  border:1px solid var(--gold-bdr);border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);
  color:var(--gold-lt);
  box-shadow:-4px 0 20px rgba(0,0,0,0.4),inset 1px 0 0 rgba(255,255,255,0.05);
  font-size:0.74rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
}
html[data-jump-style="A"] .float-jump.show{transform:translateY(-50%) translateX(0);}
html[data-jump-style="A"] .float-jump:hover{
  padding-right:12px;
  background:linear-gradient(180deg,rgba(212,148,14,0.32) 0%,rgba(212,148,14,0.20) 100%);
  box-shadow:-6px 0 24px rgba(212,148,14,0.20),-4px 0 20px rgba(0,0,0,0.4);
}
html[data-jump-style="A"] .float-jump .fj-glyph{
  width:auto;height:auto;background:transparent;font-size:1.1rem;line-height:1;
}
html[data-jump-style="A"] .float-jump .fj-lbl{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 0.74rem/1 var(--font);letter-spacing:0.08em;text-transform:uppercase;
}

/* ─── VARIANT B · CIRCULAR FAB (DEFAULT) ───────────────────────── */
html[data-jump-style="B"] .float-jump,
html:not([data-jump-style]) .float-jump{
  right:18px;bottom:20px;
  width:50px;height:50px;border-radius:50%;
  align-items:center;justify-content:center;
  /* v160-wip-27j: smaller + translucent — was opaque gold gradient at 60×60.
     Now 50×50 with semi-transparent gold and reduced shadow weight. */
  background:linear-gradient(180deg,
    rgba(228,162,28,0.78) 0%,
    rgba(212,148,14,0.78) 100%);
  border:1px solid rgba(255,200,80,0.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#15110a;font-size:1.25rem;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,0.4),0 2px 6px rgba(212,148,14,0.3),inset 0 1px 0 rgba(255,255,255,0.22);
  transform:translateY(20px);
  opacity:0.85;
}
html[data-jump-style="B"] .float-jump.show,
html:not([data-jump-style]) .float-jump.show{transform:translateY(0);opacity:0.85;}
html[data-jump-style="B"] .float-jump:hover,
html:not([data-jump-style]) .float-jump:hover{
  transform:translateY(-2px);
  opacity:1;
  background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);
  box-shadow:0 10px 26px rgba(0,0,0,0.5),0 4px 12px rgba(212,148,14,0.5),inset 0 1px 0 rgba(255,255,255,0.3);
}
html[data-jump-style="B"] .float-jump:active,
html:not([data-jump-style]) .float-jump:active{transform:translateY(0);opacity:1;}
html[data-jump-style="B"] .float-jump .fj-glyph,
html:not([data-jump-style]) .float-jump .fj-glyph{
  width:auto;height:auto;background:transparent;font-size:1.25rem;line-height:1;
}
html[data-jump-style="B"] .float-jump .fj-lbl,
html:not([data-jump-style]) .float-jump .fj-lbl{display:none;}

/* ─── VARIANT C · COMPACT RAIL ─────────────────────────────────── */
html[data-jump-style="C"] .float-jump{
  right:0;top:120px;bottom:24px;
  width:56px;height:auto;
  flex-direction:column;align-items:center;
  padding:14px 0;gap:10px;
  background:linear-gradient(180deg,var(--bg-1) 0%,rgba(28,24,16,0.96) 100%);
  border-left:1px solid var(--gold-bdr);
  border-top:1px solid var(--border-mid);border-bottom:1px solid var(--border-mid);
  border-radius:var(--radius) 0 0 var(--radius);
  box-shadow:-6px 0 18px rgba(0,0,0,0.4);
  color:var(--cream);
  transform:translateX(20px);
}
html[data-jump-style="C"] .float-jump.show{transform:translateX(0);}
html[data-jump-style="C"] .float-jump:hover{
  box-shadow:-10px 0 24px rgba(212,148,14,0.12),-6px 0 18px rgba(0,0,0,0.4);
}
html[data-jump-style="C"] .float-jump .fj-glyph{
  width:34px;height:34px;border-radius:50%;
  background:var(--gold-bg);border:1px solid var(--gold-bdr);
  color:var(--gold-lt);font-size:1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
html[data-jump-style="C"] .float-jump .fj-lbl{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 0.66rem/1 var(--font);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--cream-dim);
}

@media (max-width:560px){
  html[data-jump-style="A"] .float-jump{padding:14px 7px 14px 9px;}
  html[data-jump-style="B"] .float-jump,html:not([data-jump-style]) .float-jump{
    width:44px;height:44px;font-size:1.1rem;right:14px;bottom:14px;
  }
  html[data-jump-style="B"] .float-jump .fj-glyph,
  html:not([data-jump-style]) .float-jump .fj-glyph{font-size:1.1rem;}
  html[data-jump-style="C"] .float-jump{width:48px;}
}

.hdr-actions{display:flex;gap:8px;flex-wrap:wrap;}
.edit-btn,.filter-btn{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.78rem;font-family:var(--font);transition:all 0.15s;}
.edit-btn:hover,.filter-btn:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
/* v160-wip-27: .jump-pill removed. Jump-to-verse entry now via configurable
   floating control (.float-jump) with three style variants: A=edge tab,
   B=circular FAB (default), C=compact rail. See Settings → Jump-to-verse style. */
.filter-btn.on{background:var(--green-bg);border-color:var(--green-bdr);color:#90d0a0;}

/* v207 · Verse rows breathe. No hairline divider, no 3-dot ornament —
   just generous gap + padding so neighbouring āyāt have breathing room
   without any visible divider artwork between them. */
.verse-list{display:flex;flex-direction:column;gap:28px;}
.verse-row{transition:background 0.12s;position:relative;padding-left:38px}

/* v207 · Per-verse memorize marker (m4 · gold gutter rail).
   Each verse-row has an invisible 38 px gutter on its left. Clicking
   the gutter toggles "I've memorized this single āyah". A 3 px gold
   rail lights up when on. The rail glows faintly on hover too so the
   gutter is discoverable. */
.verse-row .v-gut-toggle{
  position:absolute;left:0;top:0;bottom:0;width:38px;
  background:transparent;border:none;padding:18px 0;
  cursor:pointer;z-index:5;
  display:flex;align-items:stretch;justify-content:center;
}
.verse-row .v-gut-toggle .rail{
  width:3px;border-radius:2px;background:transparent;
  transition:background .25s, box-shadow .25s;
}
.verse-row .v-gut-toggle:hover .rail{background:rgba(255,208,112,0.20)}
.verse-row.is-memorized .v-gut-toggle .rail{
  background:linear-gradient(180deg, #ffd070, #e07a30);
  box-shadow:0 0 8px color-mix(in srgb, #ffd070 50%, transparent);
}
.verse-row.is-memorized .v-gut-toggle:hover .rail{
  background:linear-gradient(180deg, #ffe890, #f5a060);
  box-shadow:0 0 12px color-mix(in srgb, #ffd070 65%, transparent);
}
/* v207 · Greyed-out (outside the user's memorized range) verses are
   now clickable — tap anywhere on the row to add that āyah to your
   individually-memorized list. The opacity lifts on hover so the user
   knows it's interactive. */
.verse-row.outside-range{
  opacity:0.32;
  cursor:pointer;
  transition:opacity .18s, background .15s;
}
.verse-row.outside-range:hover{
  opacity:0.7;
  background:rgba(255,208,112,0.025);
}
.verse-row.outside-range .v-top::after{
  content:"+ tap to add";
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font:500 9px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.20em;text-transform:uppercase;
  color:var(--gold-lt,#e7b035);
  background:rgba(255,208,112,0.10);
  padding:5px 10px;border-radius:5px;
  border:0.5px solid rgba(255,208,112,0.25);
  opacity:0;transition:opacity .15s;
  pointer-events:none;
}
.verse-row.outside-range:hover .v-top::after{opacity:1}
.verse-row.outside-range .v-top{position:relative}
.verse-row.has-conflict{border-right:2px solid rgba(212,148,14,0.4);}
.verse-row.has-kirmani{border-right:2px solid rgba(208,88,148,0.4);}
.verse-row.has-iskafi{border-right:2px solid rgba(62,201,138,0.4);}
.verse-row.all-mastered{border-right:2px solid rgba(26,128,64,0.5);}

.v-top{display:flex;flex-direction:column;align-items:center;padding:40px 28px 36px;cursor:pointer;gap:20px;}
.v-top:hover{background:rgba(255,255,255,0.02);}
.v-meta-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;}
.v-num{font-size:0.7rem;color:var(--cream-faint);background:var(--bg-2);border:1px solid var(--border);padding:2px 10px;border-radius:10px;}
/* Tappable verse number when page-position data is available — opens page preview */
.v-num-pos{cursor:pointer;position:relative;padding-right:14px;transition:all 0.12s;}
.v-num-pos:hover{border-color:var(--gold-bdr);color:var(--cream);background:rgba(212,148,14,0.08);}
.v-num-pos .v-num-mark{position:absolute;top:50%;right:5px;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);}
.v-num-pos.zone-top .v-num-mark{background:#f0d08c;}
.v-num-pos.zone-upper .v-num-mark{background:#f0c078;}
.v-num-pos.zone-middle .v-num-mark{background:#e0a068;}
.v-num-pos.zone-lower .v-num-mark{background:#c89060;}
.v-num-pos.zone-bottom .v-num-mark{background:#b08060;}

/* ═══ Sparkle trigger — gold circle, soft glow ═══ */
.sparkle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(240,176,48,0.32),rgba(212,148,14,0.14) 70%);
  border:1px solid rgba(240,176,48,0.55);
  color:var(--gold-lt);
  cursor:pointer;
  transition:all 0.2s;
  padding:0;
  font-family:var(--font);
  line-height:1;
  flex-shrink:0;
  vertical-align:middle;
  animation:sparkle-glow 3s ease-in-out infinite;
  text-align:center;
}
.sparkle-btn:hover{
  transform:scale(1.08) rotate(8deg);
  background:radial-gradient(circle at 35% 30%,rgba(250,200,80,0.45),rgba(240,176,48,0.2) 70%);
  box-shadow:0 0 14px rgba(240,176,48,0.45);
}
@keyframes sparkle-glow{
  0%,100%{box-shadow:0 0 3px 0 rgba(240,176,48,0.3);}
  50%{box-shadow:0 0 10px 1px rgba(240,176,48,0.45);}
}

/* ═══ Expand trigger — green chevron circle, soft glow ═══ */
.expand-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  padding:0;
  font-family:var(--font);
  line-height:0;
  flex-shrink:0;
  vertical-align:middle;
  transition:transform 0.25s ease,box-shadow 0.2s,background 0.2s;
  background:radial-gradient(circle at 35% 30%,rgba(120,210,160,0.3),rgba(60,140,100,0.14) 70%);
  border:1px solid rgba(90,180,130,0.55);
  color:#a8dcbe;
  animation:emerald-glow 3s ease-in-out infinite;
  width:32px;height:32px;
}
.expand-btn:hover{
  background:radial-gradient(circle at 35% 30%,rgba(140,230,180,0.42),rgba(80,170,120,0.22) 70%);
  box-shadow:0 0 14px rgba(120,210,160,0.45);
  color:#c4ecd4;
}
.expand-btn svg{
  display:block;
  width:14px;height:14px;
  transition:transform 0.25s ease;
}
.conflict-item.open .expand-btn svg{transform:rotate(180deg);}
@keyframes emerald-glow{
  0%,100%{box-shadow:0 0 3px 0 rgba(90,180,130,0.28);}
  50%{box-shadow:0 0 10px 1px rgba(120,210,160,0.45);}
}

/* ═══ Legacy twin-chip — kept for any other callers still using it ═══ */
.twin-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(120,210,160,0.3),rgba(60,140,100,0.14) 70%);
  border:1px solid rgba(90,180,130,0.55);
  color:#a8dcbe;
  cursor:pointer;
  padding:0;
  font-family:var(--font);
  line-height:1;
  flex-shrink:0;
  vertical-align:middle;
  transition:all 0.2s;
  text-decoration:none;
  text-align:center;
  width:38px;height:38px;
  font-size:1.32rem;
}
.twin-chip:hover{
  transform:scale(1.08) rotate(8deg);
  background:radial-gradient(circle at 35% 30%,rgba(140,230,180,0.42),rgba(80,170,120,0.22) 70%);
  box-shadow:0 0 14px rgba(120,210,160,0.42);
  color:#c4ecd4;
}
.twin-chip .tw-glyph{line-height:1;display:inline-block;}
.twin-chip-sm{width:32px;height:32px;font-size:1.12rem;}

/* Legacy v-loc fallback */
.v-loc{font-size:0.6rem;color:var(--gold-lt);background:var(--gold-bg);border:1px solid var(--gold-bdr);padding:1px 7px;border-radius:8px;}

/* Legacy inline Mushaf chip (used outside the modal) */
.mushaf-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.68rem;padding:3px 9px;border-radius:10px;
  background:rgba(104,144,192,0.1);color:#a0b8d0;
  border:1px solid rgba(104,144,192,0.3);
  font-weight:600;cursor:pointer;transition:all 0.15s;
  font-family:var(--font);
}
.mushaf-chip:hover{background:rgba(104,144,192,0.2);color:#c0d4e8;}
.mushaf-chip .mushaf-dot-color{width:6px;height:6px;border-radius:50%;display:inline-block;}
.mushaf-chip.zone-u .mushaf-dot-color{background:#d4940e;}
.mushaf-chip.zone-m .mushaf-dot-color{background:#86c1b9;}
.mushaf-chip.zone-l .mushaf-dot-color{background:#c06c40;}

/* Old page-position chip retained (hidden in favor of circle, but kept so legacy refs don't break) */
.v-pagepos{display:none !important;}

/* Page-preview modal: shows first line of the page + the ayah that leads into it */
.pp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:350;padding:20px;}
.pp-modal-overlay.open{display:flex;}
.pp-modal{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:20px 22px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.6);}
.pp-modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border-mid);gap:10px;}
.pp-modal-title{font-size:1.05rem;color:var(--gold-lt);font-weight:700;letter-spacing:0.04em;}
.pp-modal-meta{font-size:0.72rem;color:var(--cream-faint);}
.pp-modal-close{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:4px 12px;border-radius:14px;cursor:pointer;font-size:0.75rem;font-family:var(--font);}
.pp-section{margin-bottom:14px;}
.pp-section-label{font-size:0.66rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.pp-verse-box{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.pp-verse-box.topline{border-left:3px solid var(--cream-faint);opacity:0.65;}
.pp-verse-box.topline .pp-verse-ar{color:var(--cream-dim);}
.pp-verse-box.bridge{border-left:3px solid var(--blue);}
.pp-verse-box.first{border-left:3px solid var(--gold);}
.pp-verse-box.focus{border-left:3px solid var(--gold);background:rgba(212,148,14,0.08);box-shadow:0 0 0 1px var(--gold-bdr);}
.pp-verse-ref{font-size:0.74rem;color:var(--cream-faint);margin-bottom:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.pp-verse-ar{font-family:var(--font-quran);font-size:1.4rem;line-height:2.1;color:var(--cream);direction:rtl;text-align:right;margin-bottom:6px;}
.pp-verse-tr{font-size:0.78rem;color:var(--cream-dim);line-height:1.6;font-style:italic;}
.pp-bridge-arrow{text-align:center;color:var(--cream-faint);font-size:0.72rem;margin:4px 0;letter-spacing:0.08em;}
.pp-surah-break{background:rgba(212,148,14,0.06);border:1px dashed var(--gold-bdr);border-radius:6px;padding:7px 11px;margin:10px 0;font-size:0.78rem;color:var(--gold-lt);text-align:center;}
.pp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.pp-btn{padding:7px 14px;border-radius:8px;font-size:0.8rem;cursor:pointer;border:1px solid;font-family:var(--font);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.pp-btn.primary{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.pp-btn.secondary{background:transparent;color:var(--cream-dim);border-color:var(--border-mid);}

/* ═══ Page-preview: Header ═══ */
.pp-hd-block{flex:1;min-width:0;}
.pp-hd-ar{font-family:var(--font-ar);font-size:1.85rem;font-weight:700;color:var(--gold-lt);direction:rtl;line-height:1.15;margin-bottom:4px;}
.pp-hd-sub{font-size:0.78rem;color:var(--cream-dim);font-weight:500;letter-spacing:0.02em;}
.pp-hd-sub b{color:var(--cream);font-weight:600;}
/* Legacy header classes retained for any stale references */
.pp-hd-ref{font-family:var(--font-ar);font-size:1.15rem;color:var(--gold-lt);font-weight:700;}
.pp-hd-ref-en{font-family:var(--font);font-size:0.82rem;color:var(--cream-dim);font-weight:500;margin-left:4px;}

/* ═══ Page-preview: Schematic diagram ═══ */
/* ═══ Info pack: hero + progress bars ═══ */
.info-pack{
  background:linear-gradient(135deg,rgba(212,148,14,0.05),rgba(212,148,14,0.01));
  border:1px solid var(--gold-bdr);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:16px;
}
.info-hero{
  text-align:center;
  padding:4px 0 14px;
  margin-bottom:12px;
  border-bottom:1px dashed rgba(212,148,14,0.2);
}
.info-hero-ar{
  font-family:var(--font-ar);font-size:2rem;color:var(--gold-lt);
  font-weight:700;direction:rtl;line-height:1.2;
}
/* Legacy bits kept so any other code that reads them doesn't break */
.info-hero-left,.info-hero-right{display:none;}
.info-hero-label,.info-hero-num,.info-hero-num-label{display:none;}
.info-progress{margin-top:10px;}
.info-progress:first-of-type{margin-top:0;}
.ip-row{
  display:flex;justify-content:space-between;
  font-size:0.68rem;color:var(--cream-faint);
  text-transform:uppercase;letter-spacing:0.06em;font-weight:600;
  margin-bottom:4px;
}
.ip-row b{color:var(--cream);font-weight:700;text-transform:none;letter-spacing:0;font-size:0.74rem;}
.ip-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}
.ip-fill{height:100%;background:linear-gradient(to right,rgba(212,148,14,0.6),var(--gold-lt));border-radius:2px;transition:width 0.4s ease;}

.pp-schem{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.pp-schem-title{font-size:0.62rem;font-weight:700;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:10px;}
.pp-schem-side{color:var(--gold-lt);font-weight:700;letter-spacing:0.04em;}
.pp-schem-diagram{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:200px;margin:0 auto 8px;}
.pp-schem-page{background:var(--bg-1);border:1.5px solid var(--border-mid);border-radius:5px;aspect-ratio:3/4;display:flex;flex-direction:column;overflow:hidden;position:relative;opacity:0.55;transition:opacity 0.2s;}
.pp-schem-page.focus{border-color:var(--gold-bdr);background:linear-gradient(to bottom,rgba(212,148,14,0.10),rgba(212,148,14,0.18));opacity:1;box-shadow:0 0 0 1px rgba(212,148,14,0.3);}
.pp-schem-page.empty{opacity:0.25;}
.pp-schem-pgnum{position:absolute;top:4px;font-size:0.54rem;color:var(--cream-dim);font-weight:600;background:var(--bg-2);padding:1px 4px;border-radius:3px;z-index:2;}
.pp-schem-page:nth-child(1) .pp-schem-pgnum{right:4px;}
.pp-schem-page:nth-child(2) .pp-schem-pgnum{left:4px;}
.pp-schem-zone{flex:1;border-bottom:1px dashed rgba(255,255,255,0.08);position:relative;}
.pp-schem-zone:last-child{border-bottom:none;}
.pp-schem-zone.active::before{content:'';position:absolute;inset:2px;background:var(--gold);border-radius:2px;animation:pp-pulse 2s infinite;box-shadow:0 0 10px rgba(212,148,14,0.5);}
.pp-schem-zone.active.merge-top::before{bottom:-2px;border-radius:2px 2px 0 0;}
.pp-schem-zone.active.merge-bottom::before{top:-2px;border-radius:0 0 2px 2px;}
.pp-schem-zone.active.merge-middle::before{top:-2px;bottom:-2px;border-radius:0;}
@keyframes pp-pulse{0%,100%{opacity:0.75;}50%{opacity:1;}}
.pp-schem-caption{text-align:center;font-size:0.78rem;color:var(--cream-dim);padding-top:8px;border-top:1px dashed var(--border);}
.pp-schem-caption b{color:var(--gold-lt);}

/* ═══ Page-preview: Reading flow ═══ */
.pp-flow{margin-bottom:16px;}
.pp-flow-title{font-size:0.62rem;font-weight:700;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:10px;}
.pp-flow-step{padding:10px 0 10px 14px;margin-left:8px;position:relative;border-left:2px solid var(--border-mid);}
.pp-flow-step::before{content:'';position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--border-mid);}
.pp-flow-step.focus{border-left-color:var(--gold);}
.pp-flow-step.focus::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-bg);}
.pp-flow-step.before,.pp-flow-step.after{opacity:0.7;}
.pp-flow-step-label{font-size:0.62rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.pp-flow-step.focus .pp-flow-step-label{color:var(--gold-lt);}
.pp-flow-step-ref{font-size:0.66rem;color:var(--cream-dim);font-weight:500;text-transform:none;letter-spacing:0;}
.pp-flow-step-ar{font-family:var(--font-quran);font-size:1.1rem;line-height:1.85;direction:rtl;text-align:right;color:var(--cream);}
.pp-flow-step.focus .pp-flow-step-ar{font-size:1.3rem;font-weight:500;}
.pp-flow-step.before .pp-flow-step-ar,.pp-flow-step.after .pp-flow-step-ar{font-size:1rem;color:var(--cream-dim);}
.pp-flow-pagebreak{font-size:0.6rem;color:var(--cream-faint);text-align:center;padding:4px 0;letter-spacing:0.12em;margin-left:8px;}
.pp-flow-pagebreak::before{content:'─ ─ page turn ─ ─';padding:2px 8px;}

/* ═══ Page-preview: Collapsible anchors ═══ */
.pp-toggle-anchors{
  display:block;width:100%;
  font-size:0.72rem;color:var(--cream-faint);
  text-align:center;padding:10px;margin-top:12px;
  border:1px dashed var(--border);border-radius:8px;
  cursor:pointer;letter-spacing:0.04em;
  font-family:var(--font);background:transparent;
  transition:all 0.15s;
}
.pp-toggle-anchors:hover{border-color:var(--border-mid);color:var(--cream-dim);}
.pp-anchors{margin-top:8px;padding:10px 12px;background:rgba(104,144,192,0.04);border:1px dashed rgba(104,144,192,0.2);border-radius:8px;}
.pp-anchor-line{padding:7px 0;border-top:1px dashed rgba(104,144,192,0.12);}
.pp-anchor-line:first-child{border-top:none;padding-top:0;}
.pp-anchor-line:last-child{padding-bottom:0;}
.pp-anchor-line-label{font-size:0.6rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:3px;}
.pp-anchor-line-ar{font-family:var(--font-quran);font-size:0.95rem;line-height:1.7;direction:rtl;text-align:right;color:var(--cream-dim);}

/* Mushaf spread layout — two facing pages side by side */
.pp-spread-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;direction:rtl;}
@media(max-width:600px){
  .pp-spread-grid{grid-template-columns:1fr;direction:ltr;}
  .pp-spread-card.focus{order:-1;}
}
.pp-spread-card{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;opacity:0.62;transition:opacity 0.2s;direction:ltr;}
.pp-spread-card.focus{opacity:1;border-color:var(--gold-bdr);background:linear-gradient(135deg,var(--bg-1),var(--bg-2));box-shadow:0 0 0 1px var(--gold-bdr);}
.pp-spread-card.empty{opacity:0.35;display:flex;align-items:center;justify-content:center;min-height:120px;}
.pp-spread-empty{font-size:0.78rem;color:var(--cream-faint);font-style:italic;}
.pp-spread-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.pp-spread-pgnum{font-size:0.95rem;color:var(--gold-lt);font-weight:700;}
.pp-spread-card:not(.focus) .pp-spread-pgnum{color:var(--cream-dim);}
.pp-spread-side{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;}
.pp-spread-surahs{font-family:var(--font-quran);font-size:0.95rem;color:var(--cream-dim);direction:rtl;text-align:right;margin-bottom:8px;padding-bottom:7px;border-bottom:1px dashed var(--border);}
.pp-spread-card.focus .pp-spread-surahs{color:var(--cream);}
.pp-spread-ellipsis{text-align:center;font-size:0.7rem;color:var(--cream-faint);padding:4px 0;letter-spacing:0.15em;}
.pp-spread-legend{font-size:0.7rem;color:var(--cream-faint);text-align:center;padding:4px 0 2px;letter-spacing:0.04em;}
.v-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(255,194,26,0.7);}
.v-dot.mastered{background:var(--green);box-shadow:0 0 8px rgba(26,128,64,0.5);}
.v-dot-sak{width:7px;height:7px;border-radius:50%;background:var(--sch-sak);box-shadow:0 0 10px rgba(79,195,255,0.7);}
.v-dot-kir{width:7px;height:7px;border-radius:50%;background:var(--sch-kir);box-shadow:0 0 10px rgba(228,120,176,0.7);}
.v-dot-isk{width:7px;height:7px;border-radius:50%;background:var(--sch-isk);box-shadow:0 0 10px rgba(62,201,138,0.7);}
.v-dot-group{display:flex;flex-direction:column;gap:4px;align-items:center;}
.v-check{width:18px;height:18px;border-radius:50%;background:var(--green-bg);color:var(--mast-light);border:1px solid var(--green-bdr);display:inline-flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;}
.v-arabic{font-family:var(--font-quran);font-size:1.85rem;line-height:2.3;color:var(--cream);text-align:center;direction:rtl;width:100%;}

/* v189 · WBW per-verse panel. Lives inside the .v-detail tab system
   alongside Memorization Aids / Confusions / Commentary. The global
   .v-arabic.wbw-active overlay is gone — WBW now renders inline below
   the verse's translation when the WBW sub-tab is active. */
.wbw-panel{ padding:6px 0 14px }

/* v96 · subscript-inline WBW · the WBW lives INSIDE .v-arabic itself.
   When the per-surah JSON is loaded, each Arabic word is wrapped in
   <span class="wbw-w"><Arabic><span class="wbw-en">gloss</span></span>.
   .v-arabic.has-wbw is a flex-wrap grid (NOT inline text-flow) — each
   .wbw-w is a flex column tile (Arabic on top, gloss below). The
   container's `gap` puts explicit space between WRAPPED rows so a long
   ayah (12+ words → multi-line wrap) never has its glosses crash into
   the next row of Arabic. This is the long-ayah rule: never rely on
   line-box stacking for WBW spacing — always use flex `gap`. The
   sidebar dot toggles body.qur-only — when on, glosses + the English
   translation are hidden (Arabic-only mode). */
.v-arabic.has-wbw{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;       /* direction:rtl on .v-arabic flows items R→L */
  justify-content:center;
  align-items:flex-start;
  gap:18px 18px;            /* row-gap 18px + column-gap 18px between Arabic words */
  line-height:1.2;
}
.v-arabic .wbw-w{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  padding:0 8px;            /* extra horizontal buffer around each word tile */
}
.v-arabic.has-wbw .wbw-w .wbw-en{
  display:block;
  margin-top:6px;
  max-width:200px;
  font:500 15.5px/1.3 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--cream-faint, rgba(239,231,213,0.55));
  direction:ltr;
  letter-spacing:0.005em;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  pointer-events:none;
}
/* Arabic-only mode — sidebar dot OFF (default). Glosses + translation
   hidden. Row-gap stays generous (long verses that wrap need vertical
   room so diacritics don't collide). Column-gap AND per-tile padding
   collapse so adjacent Arabic words sit close, like natural reading. */
body.qur-only .v-arabic.has-wbw{ gap:22px 2px; }
body.qur-only .v-arabic.has-wbw .wbw-w{ padding:0 2px; }
body.qur-only .v-arabic.has-wbw .wbw-w .wbw-en{ display:none; }
body.qur-only .v-translation{ display:none; }
.wbw-hdr{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:0 0 12px;padding:0 4px;
}
.wbw-hdr-lbl{
  font:500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:0.22em;
  color:var(--ms-mint, #a7d7c5);
  text-transform:uppercase;
}
.wbw-hdr-meta{
  font:500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:0.04em;
  color:var(--cream-faint, rgba(239,231,213,0.55));
}
.wbw-loading{
  font:italic 400 12.5px/1.5 'Cormorant Garamond', Georgia, serif;
  color:var(--cream-faint, rgba(239,231,213,0.55));
  text-align:center;
  padding:24px 0;
}
.wbw-grid{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row-reverse;     /* RTL flow */
  justify-content:center;
  align-items:flex-start;
  gap:10px 18px;
  line-height:1.25;
  min-width:0;
  max-width:100%;
  padding:4px 4px 8px;
}
.wbw-root{
  font:500 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:0.12em;
  color:var(--ms-mint-2, #85c4ad);
  margin-top:5px;
  text-transform:uppercase;
  opacity:0.7;
}
/* v188-isk43 · WBW tile sizing.
   - min-width 70 px floor so 3-word English phrases like
     "the One Who" / "from both of them" never cram below readable
     width.
   - max-width 200 px ceiling so a single long compound never blows
     out the row's flex layout.
   - flex-shrink:0 — never shrink below the floor; instead wrap.
   - padding 6 × 10 px for breathing room.
   - Both Arabic and English wrap at WORD boundaries only
     (overflow-wrap:break-word), not mid-grapheme.  */
.wbw-word{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  vertical-align:top;
  padding:8px 12px;
  min-width:90px;
  max-width:220px;
  flex-shrink:0;
}
.wbw-word .wbw-ar{
  font-family:var(--font-quran),'Amiri Quran','Amiri',serif;
  font-size:1.7rem;
  line-height:1.4;
  color:var(--cream);
  direction:rtl;
  overflow-wrap:break-word;
  word-break:normal;
  max-width:100%;
}
.wbw-word .wbw-en{
  font-family:'Inter Tight','Inter',-apple-system,sans-serif;
  font-size:10.5px;
  font-weight:400;
  line-height:1.3;
  color:color-mix(in srgb, var(--cream) 50%, transparent);
  letter-spacing:0.01em;
  margin-top:7px;
  direction:ltr;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
  min-width:0;
  max-width:100%;
}
@media(max-width:700px){
  .v-arabic.wbw-active{gap:8px 12px}
  .wbw-word{padding:4px 7px;min-width:58px;max-width:160px}
  .wbw-word .wbw-ar{font-size:1.4rem}
  .wbw-word .wbw-en{font-size:9.5px;margin-top:6px}
}
/* v207 · v-hint color is now theme-aware. Defaults to currentColor at
   ~35 % opacity so it auto-adapts to light AND dark themes (was a hard-
   coded 12 % white, invisible on every light theme). Themes may set
   --v-hint to override. */
.v-hint{font-size:0.63rem;color:var(--v-hint, color-mix(in srgb, currentColor 35%, transparent));letter-spacing:0.06em;}
.verse-row:hover .v-hint{color:var(--v-hint-hover, color-mix(in srgb, currentColor 65%, transparent));}
/* v187-isk15-hint-bottom · hint moved out of the verse body into a centered
   footer row at the bottom of the card. */
.v-hint-row{
  text-align:center;
  padding:2px 0 12px;
  cursor:pointer;
  user-select:none;
}
.v-hint-row:hover .v-hint{color:var(--v-hint-hover, color-mix(in srgb, currentColor 70%, transparent));}

.v-detail{display:none;}
.v-detail.open{display:block;}
/* v97 · Translation legibility + spacing (restored). */
.v-translation{
  padding:22px 18px 18px;
  font-size:1rem;
  line-height:1.7;
  color:var(--cream-faint, rgba(239,231,213,0.55));
  font-style:italic;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
/* v97 · Verse box must grow with content, never clamp/clip. Defensive
   overflow:visible on the verse body + the .v-arabic (so glosses can
   sit slightly outside the immediate Arabic-word bounding box without
   getting clipped by an ancestor with overflow:hidden). */
.verse-row, .v-top, .v-body-col, .v-arabic{ overflow:visible; }

.v-conflict-zone{padding:14px 16px 16px;background:rgba(0,0,0,0.15);}
.cp-label{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;color:var(--gold-lt);}

/* ═══ Sakhāwī (Ḥaydarah) cluster card — Pattern B ═══ */
.sak-cluster{
  background:linear-gradient(135deg,rgba(64,196,204,0.06),rgba(64,196,204,0.02));
  border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);
  padding:14px 14px 12px;position:relative;margin-bottom:14px;
}
.sak-cluster::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(to bottom,var(--gold-lt),var(--gold));
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
.sak-label{font-size:0.62rem;color:var(--gold-lt);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sak-label .sak-bayt{background:var(--gold-bg);padding:1px 8px;border-radius:8px;border:1px solid var(--gold-bdr);font-weight:600;}

/* ─── Sakhāwī cluster Mastered button (matches .master-btn used on conflict pairs) ─── */
.sak-master-wrap{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.sak-master-btn{
  width:100%;padding:9px 10px;
  background:transparent;border:1px solid var(--green-bdr);
  color:#90d0a0;
  border-radius:var(--radius-sm);
  font-family:var(--font);font-size:0.8rem;font-weight:600;
  cursor:pointer;transition:background 0.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,0.15);
}
.sak-master-btn:hover{background:var(--green-bg);}
.sak-master-btn.is-mastered{background:var(--green-bg);}

/* Card left-border color when mastered */
.sak-cluster.is-master::before{background:linear-gradient(to bottom,#1a8040,#2aa060);}
.sak-cluster.is-master{background:linear-gradient(135deg,rgba(26,128,64,0.05),rgba(26,128,64,0.02));}


/* ─── V3 card body: lede + numbered groups + footer ─── */
.sak-lede{font-size:0.88rem;color:var(--cream);line-height:2.5;margin-bottom:12px;padding:12px 14px;background:rgba(0,0,0,0.2);border-radius:8px;border:1px solid var(--border);}
.sak-lede .phrase{background:rgba(64,196,204,0.14);color:var(--gold-lt);padding:4px 8px;border-radius:6px;font-weight:600;font-family:var(--font-quran);font-size:1.5em;display:inline-block;vertical-align:middle;line-height:1.1;}
.sak-lede .ar-inline{font-family:var(--font-quran);color:var(--cream);font-weight:500;font-size:1.5em;display:inline-block;vertical-align:middle;line-height:1;padding:1px 0;}

.sak-groups-v3{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.sak-groups-v3{grid-template-columns:1fr;}}
/* Single-group clusters (e.g. الم opening 6 sūrahs) span full width — no empty column 2 */
.sak-groups-v3:has(> .sak-group:only-child){grid-template-columns:1fr;}
.sak-groups-v3.sak-single{grid-template-columns:1fr;}
.sak-group{background:rgba(0,0,0,0.22);border:1px solid var(--border);border-radius:8px;padding:11px 12px 12px;}
.sak-group-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;line-height:1.4;}
.sak-group-hdr-en{font-size:0.64rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;}
.sak-group-sep{color:var(--cream-faint);opacity:0.4;font-size:0.8rem;}
.sak-group-hdr-ar{font-family:var(--font-quran);font-size:1.25em;color:var(--cream);font-weight:500;line-height:1;}
.sak-group-hdr-count{margin-left:auto;font-size:0.64rem;color:var(--cream-faint);font-weight:600;letter-spacing:0.04em;}
.sak-group.sak-g-without{border-left:3px solid #86c1b9;}
.sak-group.sak-g-without .sak-group-hdr-en{color:#86c1b9;}
.sak-group.sak-g-with{border-left:3px solid #d4a268;}
.sak-group.sak-g-with .sak-group-hdr-en{color:#d4a268;}
.sak-item{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:baseline;padding:4px 0;font-size:0.84rem;cursor:pointer;transition:background 0.15s;border-radius:4px;}
.sak-item:hover{background:rgba(255,255,255,0.03);}
.sak-item .sak-item-n{color:var(--cream-faint);font-weight:600;font-size:0.74rem;font-variant-numeric:tabular-nums;text-align:right;}
.sak-item .sak-item-surah{color:var(--cream);font-weight:500;min-width:0;}
.sak-item .sak-item-vref{color:var(--cream-faint);font-size:0.72rem;font-family:ui-monospace,Menlo,monospace;}
.sak-item.self .sak-item-surah{color:var(--gold-lt);font-weight:700;}
.sak-item.self .sak-item-vref{color:var(--gold-lt);}
.sak-item.self{background:var(--gold-bg);}

.sak-footer{font-size:0.82rem;color:var(--cream);line-height:1.7;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.sak-bayt-box{display:block;margin:10px 0 0;padding:10px 0;border-top:1px dashed rgba(79,195,255,0.4);border-bottom:1px dashed rgba(79,195,255,0.4);font-family:'Scheherazade New','Amiri',serif;font-size:1.1rem;text-align:center;color:var(--cream);line-height:2;direction:rtl;}
.sak-bayt-box .caesura{color:var(--gold);margin:0 8px;opacity:0.6;}

/* Violet source sparkle — same DNA as gold mushaf sparkle, recolored */
.sak-sparkle{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--sch-sak-glow), rgba(26,163,255,0.25) 70%);
  border:1px solid rgba(79,195,255,0.6);
  color:var(--sch-sak);cursor:pointer;transition:all 0.2s;padding:0;font-family:inherit;line-height:1;
  vertical-align:middle;animation:sak-glow 3s ease-in-out infinite;text-align:center;
  font-size:1.05rem;text-shadow:0 0 4px var(--sch-sak-glow);
  margin-left:auto;flex-shrink:0;
  -webkit-tap-highlight-color:rgba(79,195,255,0.3);touch-action:manipulation;
}
.sak-sparkle:hover{
  transform:scale(1.08) rotate(8deg);
  background:radial-gradient(circle at 35% 30%, rgba(79,195,255,0.75), rgba(26,163,255,0.35) 70%);
  box-shadow:0 0 16px rgba(79,195,255,0.5);
}
.sak-sparkle.active{
  transform:scale(1.05) rotate(8deg);
  background:radial-gradient(circle at 35% 30%, rgba(79,195,255,0.85), rgba(26,163,255,0.45) 70%);
  box-shadow:0 0 18px rgba(79,195,255,0.6);animation:none;
}
@keyframes sak-glow{
  0%,100%{box-shadow:0 0 3px 0 rgba(26,163,255,0.35);}
  50%{box-shadow:0 0 11px 1px rgba(26,163,255,0.5);}
}

/* ═══ V5: Anchored popover — SBS 1 classic split ═══ */
.sak-modal-bd{position:fixed;inset:0;background:transparent;display:none;z-index:90;}
.sak-modal-bd.open{display:block;}
.sak-modal{
  position:fixed;
  width:min(94vw, 560px);
  max-height:70vh;
  background:var(--bg-1);
  border:1px solid rgba(79,195,255,0.6);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.6), 0 0 22px rgba(26,163,255,0.2);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(0.95);
  transform-origin:top right;
  transition:opacity 0.2s, transform 0.2s;
  /* v188-isk3 · z-index:105 (was 100). Lifts the Sakhāwī modal panel
     one rung above the sticky topbar (header.hdr at z-index:100 in
     topbar.css) so a long modal can't be visually clipped by the
     header. The srcwin (z-index:200) still wins over us — Sakhāwī →
     Source button stack layering is preserved. */
  z-index:105;overflow:hidden;
}
.sak-modal.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}

.sak-modal-hdr{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg, rgba(26,163,255,0.12), transparent);
  border-radius:12px 12px 0 0;
  flex-shrink:0;
}
.sak-modal-ic{width:22px;height:22px;border-radius:50%;background:rgba(26,163,255,0.2);border:1px solid rgba(79,195,255,0.5);display:flex;align-items:center;justify-content:center;font-size:0.72rem;flex-shrink:0;}
.sak-modal-txt{flex:1;min-width:0;}
.sak-modal-src{font-size:0.56rem;color:var(--sch-sak);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.sak-modal-cite{font-size:0.7rem;color:var(--cream);font-weight:500;margin-top:1px;}
.sak-modal-cite .sub{color:var(--cream-faint);font-weight:400;margin-left:6px;}
.sak-modal-close{width:26px;height:26px;border:none;background:var(--bg-3);color:var(--cream);border-radius:50%;font-size:1rem;cursor:pointer;line-height:1;padding:0;flex-shrink:0;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.sak-modal-close:hover{background:var(--bg-2);}

/* ═══ Verse tabs — Sakhāwī + Kirmānī toggle ═══ */
.v-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border);padding:0 2px;}
.v-tab{flex:1;padding:10px 12px;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--cream-faint);font-family:var(--font);font-size:0.76rem;font-weight:600;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.02em;text-transform:none;}
.v-tab:hover{color:var(--cream-dim);}
.v-tab-count{font-size:0.68rem;padding:1px 7px;border-radius:8px;background:rgba(255,255,255,0.06);color:var(--cream-faint);font-weight:700;font-variant-numeric:tabular-nums;}
.v-tab.active-sak{color:var(--sch-sak);border-bottom-color:var(--sch-sak);}
.v-tab.active-sak .v-tab-count{background:rgba(79,195,255,0.15);color:var(--sch-sak);}
.v-tab.active-kir{color:var(--sch-kir);border-bottom-color:var(--sch-kir);}
.v-tab.active-kir .v-tab-count{background:rgba(228,120,176,0.15);color:var(--sch-kir);}
.v-tab.active-isk{color:var(--sch-isk);border-bottom-color:var(--sch-isk);}
.v-tab.active-isk .v-tab-count{background:rgba(62,201,138,0.15);color:var(--sch-isk);}
.v-tab-panel{display:none;}
.v-tab-panel.active{display:block;}

/* ═══ Kirmānī card ═══ */
.kir-card{background:var(--bg-1);border:1px solid rgba(228,120,176,0.35);border-radius:var(--radius-sm);margin-bottom:12px;padding:14px 16px 12px;position:relative;}
.kir-hdr{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px dashed rgba(228,120,176,0.3);margin-bottom:14px;}
.kir-label{font-size:0.62rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;display:flex;align-items:center;gap:6px;}
.kir-src{font-size:0.64rem;color:var(--cream-faint);background:rgba(228,120,176,0.08);border:1px solid rgba(228,120,176,0.28);padding:1px 8px;border-radius:8px;font-weight:600;}
.kir-sparkle{margin-left:auto;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sch-kir-glow),var(--sch-kir-2) 70%);border:1px solid rgba(228,120,176,0.6);color:var(--sch-kir);cursor:pointer;transition:all 0.2s;padding:0;font-family:inherit;line-height:1;display:flex;align-items:center;justify-content:center;font-size:1.05rem;text-shadow:0 0 4px var(--sch-kir-glow);flex-shrink:0;-webkit-tap-highlight-color:rgba(228,120,176,0.3);touch-action:manipulation;}
.kir-sparkle:hover{background:radial-gradient(circle at 35% 30%,rgba(228,120,176,0.75),rgba(208,88,148,0.35) 70%);box-shadow:0 0 16px rgba(228,120,176,0.5);}
.kir-phrase{font-family:var(--font-quran);font-size:1.55rem;color:var(--cream);direction:rtl;text-align:center;line-height:1.8;padding:8px 0 14px;border-bottom:1px dashed rgba(228,120,176,0.3);margin-bottom:14px;}
.kir-phrase-quote{color:var(--sch-kir);margin:0 8px;font-size:1.1em;opacity:0.8;}
.kir-topic{font-family:'Lora','Georgia',serif;font-style:italic;font-size:0.95rem;color:var(--cream-dim);line-height:1.55;margin-bottom:12px;}
.kir-topic .topic-label{display:inline-block;font-family:var(--font);font-style:normal;font-size:0.58rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;margin-right:8px;vertical-align:middle;}
.kir-body{font-size:0.88rem;line-height:1.7;color:var(--cream-dim);}
.kir-body p{margin-bottom:10px;}
.kir-body p:last-child{margin-bottom:0;}
.kir-body .ar,.kir-topic .ar{font-family:var(--font-quran);color:var(--cream);font-weight:500;font-size:1.2em;padding:0 2px;font-style:normal;}
.kir-body .ar-tech,.kir-topic .ar-tech{font-family:var(--font-quran);color:var(--sch-kir);font-weight:500;font-size:1.05em;padding:0 1px;font-style:normal;}
.kir-opinions{margin-top:12px;border-top:1px dashed rgba(228,120,176,0.25);padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.kir-opinions-lbl{font-size:0.62rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.kir-scholar{background:rgba(228,120,176,0.08);border:1px solid rgba(228,120,176,0.3);color:var(--cream);padding:3px 10px;border-radius:10px;font-family:var(--font);font-size:0.76rem;letter-spacing:0.01em;}
.kir-parallel{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(228,120,176,0.25);display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.kir-parallel-lbl{font-size:0.62rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.kir-chip{background:var(--bg-2);border:1px solid rgba(228,120,176,0.3);color:var(--cream);padding:4px 10px;border-radius:12px;font-family:var(--font);font-size:0.76rem;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;}
.kir-chip:hover{border-color:var(--sch-kir);background:rgba(228,120,176,0.08);}
.kir-chip-ar{font-family:var(--font-ar);color:var(--cream-faint);font-size:0.85em;}

/* ═══ Kirmānī ✦ modal (stacked Arabic + English) ═══ */
/* Kirmānī sparkle modal — centered overlay, side-by-side EN/AR on wide screens */
.kir-modal-bd{position:fixed;inset:0;background:rgba(10,7,6,0.72);display:none;z-index:90;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow-y:auto;backdrop-filter:blur(2px);}
.kir-modal-bd.open{display:flex;}
.kir-modal{position:relative;width:min(96vw,900px);max-height:92vh;background:var(--bg-1);border:1px solid rgba(228,120,176,0.6);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.6),0 0 22px rgba(208,88,148,0.2);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(-4px) scale(0.97);transition:opacity 0.2s,transform 0.2s;overflow:hidden;}
.kir-modal.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.kir-modal-hdr{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(208,88,148,0.12),transparent);flex-shrink:0;}
.kir-modal-ic{width:22px;height:22px;border-radius:50%;background:rgba(208,88,148,0.2);border:1px solid rgba(228,120,176,0.5);display:flex;align-items:center;justify-content:center;font-size:0.72rem;flex-shrink:0;color:var(--sch-kir);}
.kir-modal-txt{flex:1;min-width:0;}
.kir-modal-src{font-size:0.56rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.kir-modal-cite{font-size:0.7rem;color:var(--cream);font-weight:500;margin-top:1px;}
.kir-modal-cite .sub{color:var(--cream-faint);font-weight:400;margin-left:6px;direction:rtl;unicode-bidi:isolate;}
.kir-modal-close{width:26px;height:26px;border:none;background:var(--bg-3);color:var(--cream);border-radius:50%;font-size:1rem;cursor:pointer;line-height:1;padding:0;flex-shrink:0;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.kir-modal-close:hover{background:var(--bg-2);}
.kir-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.kir-modal-split{flex-direction:row;}
.kir-modal-col{flex:1 1 0;min-width:0;padding:14px 16px;overflow-y:auto;}
.kir-modal-col-en{border-right:1px dashed rgba(228,120,176,0.22);}
.kir-modal-col-ar{background:rgba(228,120,176,0.03);}
@media (max-width:720px){
  .kir-modal-split{flex-direction:column;}
  .kir-modal-col-en{border-right:none;border-bottom:1px dashed rgba(228,120,176,0.22);}
  .kir-modal{max-height:94vh;}
}
.kir-modal-lbl{font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-faint);font-weight:700;margin-bottom:8px;}
.kir-modal-ar{font-family:var(--font-quran);direction:rtl;text-align:right;font-size:1.08rem;line-height:2;color:var(--cream);padding:10px 12px;border:1px dashed rgba(228,120,176,0.25);border-radius:6px;background:rgba(228,120,176,0.03);}
.kir-modal-en{font-size:0.86rem;line-height:1.7;color:var(--cream-dim);padding:4px 2px;}
.kir-modal-en p{margin-bottom:10px;}
.kir-modal-en p:last-child{margin-bottom:0;}
.kir-modal-en .ar{font-family:var(--font-quran);color:var(--cream);font-weight:500;font-size:1.15em;padding:0 2px;}
.kir-modal-en .ar-tech{font-family:var(--font-quran);color:var(--sch-kir);font-weight:500;font-size:1.05em;padding:0 1px;}
.kir-modal-en em{color:var(--cream);font-style:italic;}
.kir-modal-placeholder{font-style:italic;color:var(--cream-faint);}
.kir-topic-pending,.kir-body-pending{color:var(--cream-faint);font-style:italic;}

/* ═══ Kirmānī inline source panel (NEW — "source inside the sparkle") ═══ */
.kir-source-panel{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(228,120,176,0.3);animation:kirReveal 0.25s ease-out;}
.kir-source-panel[hidden]{display:none;}
.kir-source-panel .kir-src-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.kir-src-lbl{font-size:0.58rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.kir-src-close{width:22px;height:22px;border-radius:50%;background:var(--bg-3);color:var(--cream);border:none;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.kir-src-variant-btn{width:22px;height:22px;border-radius:50%;background:rgba(228,120,176,0.15);color:var(--sch-kir);border:1px solid rgba(228,120,176,0.4);cursor:pointer;font-size:0.82rem;line-height:1;padding:0;margin-right:4px;transition:all 0.15s;-webkit-tap-highlight-color:rgba(228,120,176,0.3);touch-action:manipulation;}
.kir-src-variant-btn:hover{background:rgba(228,120,176,0.3);}
.kir-src-body{padding:12px 14px;border:1px dashed rgba(228,120,176,0.25);border-radius:6px;background:rgba(228,120,176,0.03);}
.kir-src-ar{font-family:var(--font-quran);direction:rtl;text-align:right;font-size:1.05rem;line-height:2;color:var(--cream);}
.kir-src-en-divider{font-size:0.58rem;color:var(--sch-kir);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;text-align:center;margin:12px 0 8px;padding-top:10px;border-top:1px dashed rgba(228,120,176,0.25);}
.kir-src-en{font-size:0.85rem;color:var(--cream-dim);line-height:1.75;}
.kir-src-en p{margin:0 0 8px;}
.kir-src-en p:last-child{margin-bottom:0;}
.kir-src-en .ar{font-family:var(--font-quran);color:var(--cream);font-size:1.15em;padding:0 3px;}
.kir-src-en .ar-tech{font-family:var(--font-quran);color:var(--sch-kir);font-size:1em;padding:0 2px;}
.kir-src-body.kir-variant-sbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kir-src-body.kir-variant-sbs .kir-src-en-divider{display:none;}
.kir-src-body.kir-variant-sbs .kir-src-ar{border-left:1px dashed rgba(228,120,176,0.2);padding-left:12px;}
@media(max-width:520px){.kir-src-body.kir-variant-sbs{grid-template-columns:1fr;}.kir-src-body.kir-variant-sbs .kir-src-en-divider{display:block;}.kir-src-body.kir-variant-sbs .kir-src-ar{border-left:0;padding-left:0;}}
.kir-src-body.kir-variant-ar-only .kir-src-en-divider,
.kir-src-body.kir-variant-ar-only .kir-src-en{display:none;}
.kir-sparkle.is-open{transform:rotate(45deg);box-shadow:0 0 14px rgba(228,120,176,0.5);}
@keyframes kirReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ═══════════════════════════════════════════════════════════════════════
   ISKĀFĪ (Durrat al-Tanzīl) — verse-attached card · v161
   Mirror of Kirmānī card silhouette, recoloured emerald.
   Body region is height-capped at 520px with internal scroll.
   ═══════════════════════════════════════════════════════════════════════ */
.isk-card{background:var(--bg-1);border:1px solid rgba(62,201,138,0.35);border-radius:var(--radius-sm);margin-bottom:12px;padding:14px 16px 12px;position:relative;}
.isk-hdr{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px dashed rgba(62,201,138,0.3);margin-bottom:14px;flex-wrap:wrap;}
.isk-label{font-size:0.62rem;color:var(--sch-isk);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;display:flex;align-items:center;gap:6px;}
.isk-src{font-size:0.64rem;color:var(--cream-faint);background:rgba(62,201,138,0.08);border:1px solid rgba(62,201,138,0.28);padding:1px 8px;border-radius:8px;font-weight:600;}
.isk-cat{font-size:0.62rem;color:var(--cream-faint);font-weight:600;letter-spacing:0.04em;text-transform:lowercase;}
.isk-actions{margin-left:auto;display:flex;gap:6px;align-items:center;}
.isk-iconbtn{width:26px;height:26px;border-radius:50%;border:1px solid rgba(62,201,138,0.5);background:transparent;color:var(--sch-isk);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.92rem;line-height:1;padding:0;font-family:inherit;transition:all 0.18s;-webkit-tap-highlight-color:rgba(62,201,138,0.3);touch-action:manipulation;}
.isk-iconbtn:hover{background:var(--sch-isk-soft);box-shadow:0 0 10px rgba(62,201,138,0.45);}
.isk-iconbtn.active{background:var(--sch-isk-soft);box-shadow:0 0 12px rgba(62,201,138,0.45);}
.isk-iconbtn.isk-sparkle{background:radial-gradient(circle at 35% 30%,var(--sch-isk-glow),var(--sch-isk-2) 70%);text-shadow:0 0 4px var(--sch-isk-glow);border-color:rgba(62,201,138,0.6);}
.isk-iconbtn.isk-sparkle:hover{background:radial-gradient(circle at 35% 30%,rgba(62,201,138,0.75),rgba(42,156,102,0.35) 70%);}
.isk-iconbtn.isk-sparkle.is-open{transform:rotate(45deg);box-shadow:0 0 14px rgba(62,201,138,0.5);}

.isk-phrase{font-family:var(--font-quran);font-size:1.55rem;color:var(--cream);direction:rtl;text-align:center;line-height:1.8;padding:8px 0 14px;border-bottom:1px dashed rgba(62,201,138,0.3);margin-bottom:14px;}
.isk-phrase-quote{color:var(--sch-isk);font-weight:400;}
.isk-topic{font-size:0.92rem;color:var(--cream);line-height:1.7;margin-bottom:12px;padding:10px 12px;background:rgba(62,201,138,0.04);border-left:2px solid var(--sch-isk-rim);border-radius:0 8px 8px 0;}
.isk-topic .topic-label{display:inline-block;font-size:0.6rem;color:var(--sch-isk);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin-right:8px;vertical-align:0.18em;}
.isk-topic .ar{font-family:var(--font-quran);font-size:1.18em;color:var(--cream);font-weight:500;}

/* Body cap + scroll — only the body region scrolls; header/phrase/topic/footer pinned */
.isk-body-region{position:relative;}
.isk-body{font-size:0.9rem;color:var(--cream-dim);line-height:1.78;
  max-height:520px;overflow-y:auto;
  padding-right:8px;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to bottom,black calc(100% - 14px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,black calc(100% - 14px),transparent 100%);
}
.isk-body.no-cap{max-height:none;mask-image:none;-webkit-mask-image:none;padding-right:0;overflow:visible;}
.isk-body-region::after{
  content:'scroll · ↓';
  position:absolute;right:10px;bottom:8px;
  font-size:0.6rem;letter-spacing:0.1em;color:var(--sch-isk);
  background:var(--bg-1);border:1px solid var(--sch-isk-rim);
  padding:3px 8px;border-radius:6px;
  pointer-events:none;opacity:0;transition:opacity 0.2s;
}
.isk-body-region.is-overflowing::after{opacity:0.85;}
.isk-body::-webkit-scrollbar{width:6px;}
.isk-body::-webkit-scrollbar-track{background:transparent;}
.isk-body::-webkit-scrollbar-thumb{background:rgba(62,201,138,0.3);border-radius:3px;}
.isk-body::-webkit-scrollbar-thumb:hover{background:rgba(62,201,138,0.5);}

.isk-body p{margin-bottom:10px;}
.isk-body p.lead::first-letter{font-family:'Lora',serif;font-size:2.4em;float:left;line-height:0.95;padding-right:8px;padding-top:4px;color:#5dd8a0;font-weight:700;}
.isk-body .ar{font-family:var(--font-quran);font-size:1.06em;color:var(--cream);font-weight:500;direction:rtl;display:inline-block;}
.isk-body em{font-style:italic;color:var(--cream);}
.isk-body .div-block{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font-size:0.7rem;}
.isk-body .div-num{color:var(--sch-isk);font-weight:700;letter-spacing:0.06em;font-size:0.74rem;}
.isk-body .div-ttl{color:var(--cream);text-transform:uppercase;letter-spacing:0.12em;font-weight:700;}
.isk-body .div-rule{flex:1;height:1px;background:rgba(62,201,138,0.2);}
.isk-body ol.masala-list{list-style:none;counter-reset:m;padding-left:0;margin:10px 0;}
.isk-body ol.masala-list li{counter-increment:m;padding:8px 12px 8px 38px;position:relative;background:rgba(255,255,255,0.015);border-left:2px solid rgba(62,201,138,0.18);border-radius:0 6px 6px 0;margin-bottom:6px;}
.isk-body ol.masala-list li::before{content:counter(m);position:absolute;left:10px;top:8px;width:20px;height:20px;border-radius:50%;background:var(--sch-isk-soft);border:1px solid var(--sch-isk-rim);color:var(--sch-isk);font-size:0.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.isk-body blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid rgba(62,201,138,0.35);background:rgba(62,201,138,0.04);border-radius:0 6px 6px 0;color:var(--cream-dim);}
.isk-body blockquote em{color:var(--cream);font-style:italic;}

/* "Also engaged" footer — verse cross-refs as chips */
.isk-parallel{margin-top:12px;padding:10px 12px;background:rgba(255,255,255,0.02);border:1px dashed rgba(62,201,138,0.22);border-radius:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.isk-parallel-lbl{font-size:0.66rem;color:var(--sch-isk);font-weight:700;letter-spacing:0.06em;}
.isk-chip{background:var(--bg-2);border:1px solid var(--sch-isk-rim);color:var(--cream);padding:4px 10px;border-radius:8px;font-size:0.74rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;transition:background 0.15s;}
.isk-chip:hover{background:var(--sch-isk-soft);}
.isk-chip-role{font-size:0.6rem;color:var(--cream-faint);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;background:var(--bg-3);padding:1px 5px;border-radius:4px;}
.isk-chip-name{color:var(--cream);font-weight:500;}
.isk-chip-ar{font-family:var(--font-quran);color:var(--cream-dim);font-size:0.86em;}
.isk-chip-vr{font-family:ui-monospace,Menlo,monospace;color:var(--cream-faint);font-size:0.7rem;background:var(--bg-3);padding:1px 5px;border-radius:4px;}

/* Iskāfī inline Arabic source panel */
.isk-source-panel{margin-top:14px;padding:12px 14px;background:rgba(62,201,138,0.04);border:1px solid var(--sch-isk-rim);border-radius:8px;animation:iskReveal 0.25s ease-out;}
.isk-source-panel[hidden]{display:none;}
.isk-src-hdr{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px dashed rgba(62,201,138,0.3);margin-bottom:10px;}
.isk-src-lbl{font-size:0.62rem;color:var(--sch-isk);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.isk-src-close{margin-left:auto;width:22px;height:22px;border:none;background:var(--bg-3);color:var(--cream);border-radius:50%;font-size:0.9rem;cursor:pointer;line-height:1;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.isk-src-ar{font-family:var(--font-quran);direction:rtl;font-size:1.18rem;line-height:2.2;color:var(--cream);text-align:justify;}
.isk-src-pending{font-family:var(--font);direction:ltr;font-size:0.84rem;color:var(--cream-faint);font-style:italic;display:block;text-align:center;padding:8px 4px;line-height:1.6;}
.isk-src-pending code{background:var(--bg-3);padding:1px 5px;border-radius:4px;font-style:normal;font-size:0.92em;color:var(--cream-dim);}
@keyframes iskReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ═══ Iskāfī fullscreen modal — R1 (locked) ═══ */
.isk-modal-bd{position:fixed;inset:0;background:rgba(10,7,6,0.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;z-index:120;align-items:stretch;justify-content:stretch;}
.isk-modal-bd.open{display:flex;}
.isk-modal{
  background:var(--bg);border:none;border-radius:0;
  width:100vw;height:100vh;max-width:none;max-height:none;
  display:flex;flex-direction:column;
  box-shadow:none;
}
.isk-modal-hdr{
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-bottom:1px solid var(--sch-isk-rim);
  background:linear-gradient(90deg,rgba(62,201,138,0.08),transparent);
  flex-shrink:0;
}
.isk-modal-ic{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sch-isk-glow),var(--sch-isk-2) 70%);border:1px solid rgba(62,201,138,0.6);color:var(--sch-isk);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;text-shadow:0 0 4px var(--sch-isk-glow);}
.isk-modal-txt{flex:1;min-width:0;}
.isk-modal-src{font-size:0.6rem;color:var(--sch-isk);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.isk-modal-cite{font-size:0.78rem;color:var(--cream);font-weight:500;margin-top:1px;}
.isk-modal-cite .sub{color:var(--cream-faint);font-weight:400;margin-left:6px;}
.isk-modal-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.isk-modal-close{width:32px;height:32px;border:none;background:var(--bg-2);color:var(--cream);border-radius:50%;font-size:1.2rem;cursor:pointer;line-height:1;flex-shrink:0;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.isk-modal-close:hover{background:var(--bg-3);}
.isk-modal-body{flex:1;overflow-y:auto;padding:22px 28px 40px;max-width:880px;margin:0 auto;width:100%;}
.isk-modal-body .isk-phrase{font-size:1.85rem;}
.isk-modal-body .isk-topic{font-size:1rem;}
.isk-modal-body .isk-body{font-size:0.96rem;}
.isk-modal-body::-webkit-scrollbar{width:8px;}
.isk-modal-body::-webkit-scrollbar-track{background:transparent;}
.isk-modal-body::-webkit-scrollbar-thumb{background:rgba(62,201,138,0.25);border-radius:4px;}
@media(max-width:540px){
  .isk-modal-hdr{padding:12px 14px;}
  .isk-modal-body{padding:16px 16px 30px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   v161-isk4 — 3-TAB Iskāfī card (Bullets · Answer · Source)
   Underline-tab pattern (variant 2). Per-card tab is session-only.
   Global default lives in localStorage:'mithlayn.iskCardView' = 'bullets'|'answer'|'source'.
   The Source pane re-uses the existing srcwin-style AR+EN side-by-side treatment.
   ═══════════════════════════════════════════════════════════════════════ */
.isk-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-mid);margin:0 0 14px;-webkit-overflow-scrolling:touch;}
.isk-tab{padding:7px 14px 9px;background:transparent;border:none;color:var(--cream-faint);font-size:0.72rem;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:0.06em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.15s,border-color 0.15s;-webkit-tap-highlight-color:rgba(62,201,138,0.20);touch-action:manipulation;}
.isk-tab.active{color:var(--sch-isk);border-bottom-color:var(--sch-isk);}
.isk-tab:hover:not(.active){color:var(--cream);}
@media(max-width:520px){
  .isk-tabs{overflow-x:auto;flex-wrap:nowrap;}
  .isk-tab{flex-shrink:0;padding:7px 11px 9px;font-size:0.7rem;}
}

.isk-pane{display:none;}
.isk-pane.active{display:block;animation:iskPaneIn 0.18s ease-out;}
@keyframes iskPaneIn{from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:translateY(0);}}

/* Bullets pane — kid voice */
.isk-bullets{list-style:none;padding:4px 0 0;margin:0;counter-reset:b;}
.isk-bullets li{counter-increment:b;position:relative;padding:9px 12px 9px 38px;margin-bottom:6px;background:rgba(62,201,138,0.03);border-left:2px solid rgba(62,201,138,0.22);border-radius:0 8px 8px 0;font-size:0.9rem;color:var(--cream);line-height:1.62;}
.isk-bullets li::before{content:counter(b);position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--sch-isk-soft);border:1px solid var(--sch-isk-rim);color:var(--sch-isk);font-size:0.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.isk-bullets li .ar{font-family:var(--font-quran);font-size:1.1em;color:var(--cream);font-weight:500;}
.isk-bullets li em{font-style:italic;color:var(--cream);}
.isk-bullets li b,.isk-bullets li strong{color:var(--sch-isk);font-weight:700;}

/* Answer pane — kid voice, single tinted box */
.isk-answer{padding:11px 14px;border:1px solid var(--sch-isk-rim);background:rgba(62,201,138,0.06);border-radius:8px;}
.isk-answer-text{font-size:0.93rem;color:var(--cream);line-height:1.75;font-family:'Lora',Georgia,serif;}
.isk-answer-text .ar{font-family:var(--font-quran);font-size:1.12em;}
.isk-answer-text em{color:var(--cream);font-style:italic;}

/* Source pane — raw AR + academic EN side-by-side */
.isk-source{display:grid;grid-template-columns:1fr;gap:10px;}
.isk-source-col{padding:10px 12px;background:var(--bg-2);border:1px solid var(--border-mid);border-radius:8px;}
.isk-source-lbl{display:inline-block;font-size:0.58rem;color:var(--cream-faint);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:6px;}
.isk-source-ar{font-family:var(--font-quran);font-size:1.08rem;color:var(--cream);direction:rtl;text-align:right;line-height:2.05;max-height:380px;overflow-y:auto;padding-right:4px;}
.isk-source-ar .q{color:var(--sch-isk);}
.isk-source-en{font-size:0.86rem;color:var(--cream-dim);line-height:1.72;font-family:'Lora',serif;max-height:380px;overflow-y:auto;padding-right:4px;}
.isk-source-en .ar{font-family:var(--font-quran);font-size:1.06em;color:var(--cream);}
.isk-source-en em{color:var(--cream);font-style:italic;}
.isk-source-en p{margin-bottom:8px;}
.isk-source-en .lead::first-letter{font-family:'Lora',serif;font-size:2.4em;float:left;line-height:0.95;padding-right:8px;padding-top:4px;color:#5dd8a0;font-weight:700;}
.isk-source-en .div-block{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px;}
.isk-source-en .div-num{font-size:0.7rem;color:var(--sch-isk);font-weight:700;letter-spacing:0.06em;}
.isk-source-en .div-ttl{font-family:'Lora',serif;font-size:0.88rem;color:var(--cream);font-weight:600;font-style:italic;}
.isk-source-en .div-rule{flex:1;height:1px;background:var(--border-mid);}
.isk-source-en .masala-list{list-style:none;padding:0;margin:6px 0 8px;}
.isk-source-en .masala-list > li{padding:6px 0 6px 20px;position:relative;font-size:0.84rem;color:var(--cream-dim);line-height:1.7;}
.isk-source-en .masala-list > li::before{content:'·';position:absolute;left:6px;color:var(--sch-isk);font-weight:700;}
.isk-source-en .masala-list > li strong{color:var(--cream);font-weight:600;}
.isk-source-en .tnote{font-size:0.78rem;color:var(--cream-faint);background:var(--bg-2);border-left:3px solid #d4940e;padding:8px 12px;margin:10px 0;border-radius:0 6px 6px 0;font-style:italic;}
.isk-source-en .tnote strong{color:var(--warn-amber);font-style:normal;display:block;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:3px;}
.isk-source-ar::-webkit-scrollbar,.isk-source-en::-webkit-scrollbar{width:4px;}
.isk-source-ar::-webkit-scrollbar-thumb,.isk-source-en::-webkit-scrollbar-thumb{background:var(--sch-isk-rim);border-radius:4px;}
.isk-source-pending{font-style:italic;color:var(--cream-faint);font-size:0.85rem;text-align:center;padding:18px 8px;}
@media(min-width:600px){.isk-source{grid-template-columns:1fr 1fr;}}

/* Global default bar (sits above the first Iskāfī card in a verse cluster) */
.isk-global-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(62,201,138,0.05);border:1px solid rgba(62,201,138,0.28);border-radius:9px;margin-bottom:10px;flex-wrap:wrap;font-size:0.7rem;}
.isk-global-bar-lbl{color:var(--cream-dim);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-size:0.62rem;}
.isk-global-bar-status{font-size:0.66rem;color:var(--cream-faint);margin-left:auto;font-style:italic;}
.isk-global-bar-status b{color:var(--sch-isk);font-style:normal;}
.isk-global-toggle{display:inline-flex;background:var(--bg-1);border:1px solid var(--sch-isk-rim);border-radius:7px;padding:2px;}
.isk-global-toggle button{padding:4px 10px;background:transparent;border:none;color:var(--cream-dim);font-size:0.68rem;font-weight:600;cursor:pointer;border-radius:5px;font-family:inherit;letter-spacing:0.04em;text-transform:uppercase;-webkit-tap-highlight-color:rgba(62,201,138,0.20);touch-action:manipulation;}
.isk-global-toggle button.active{background:var(--sch-isk-soft);color:var(--sch-isk);}
@media(max-width:520px){
  .isk-global-bar-status{display:none;}
  .isk-global-bar{justify-content:space-between;}
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED SOURCE-POPUP WINDOW — used by all three sparkles (sak/kir/isk)
   v161-isk3 — replaces the inline source-panel pattern. Palette-themed
   via data-scholar="sak"|"kir"|"isk". Body-scroll-locked while open.
   ═══════════════════════════════════════════════════════════════════════ */
.srcwin-bd{position:fixed;inset:0;background:rgba(10,7,6,0.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;z-index:200;align-items:center;justify-content:center;padding:24px;animation:srcwinFadeIn 0.18s ease-out;}
.srcwin-bd.open{display:flex;}
.srcwin{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:14px;width:min(720px,94vw);max-height:min(720px,88vh);display:flex;flex-direction:column;overflow:hidden;animation:srcwinIn 0.22s cubic-bezier(.4,.6,.3,1.05);}
.srcwin[data-scholar="sak"]{border-color:var(--sch-sak-rim);box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 60px rgba(79,195,255,0.18);}
.srcwin[data-scholar="kir"]{border-color:var(--sch-kir-rim);box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 60px rgba(228,120,176,0.18);}
.srcwin[data-scholar="isk"]{border-color:var(--sch-isk-rim);box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 60px rgba(62,201,138,0.18);}

.srcwin-hdr{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}
.srcwin[data-scholar="sak"] .srcwin-hdr{border-bottom-color:var(--sch-sak-rim);background:linear-gradient(90deg,var(--sch-sak-soft),transparent);}
.srcwin[data-scholar="kir"] .srcwin-hdr{border-bottom-color:var(--sch-kir-rim);background:linear-gradient(90deg,var(--sch-kir-soft),transparent);}
.srcwin[data-scholar="isk"] .srcwin-hdr{border-bottom-color:var(--sch-isk-rim);background:linear-gradient(90deg,var(--sch-isk-soft),transparent);}
.srcwin-glyph{width:30px;height:30px;border-radius:50%;border:1px solid;display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;}
.srcwin[data-scholar="sak"] .srcwin-glyph{background:radial-gradient(circle at 35% 30%,var(--sch-sak-glow),var(--sch-sak-2) 70%);border-color:rgba(79,195,255,0.6);color:var(--sch-sak);text-shadow:0 0 4px var(--sch-sak-glow);}
.srcwin[data-scholar="kir"] .srcwin-glyph{background:radial-gradient(circle at 35% 30%,var(--sch-kir-glow),var(--sch-kir-2) 70%);border-color:rgba(228,120,176,0.6);color:var(--sch-kir);text-shadow:0 0 4px var(--sch-kir-glow);}
.srcwin[data-scholar="isk"] .srcwin-glyph{background:radial-gradient(circle at 35% 30%,var(--sch-isk-glow),var(--sch-isk-2) 70%);border-color:rgba(62,201,138,0.6);color:var(--sch-isk);text-shadow:0 0 4px var(--sch-isk-glow);}
.srcwin-txt{flex:1;min-width:0;}
.srcwin-lbl{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.14em;font-weight:700;}
.srcwin[data-scholar="sak"] .srcwin-lbl{color:var(--sch-sak);}
.srcwin[data-scholar="kir"] .srcwin-lbl{color:var(--sch-kir);}
.srcwin[data-scholar="isk"] .srcwin-lbl{color:var(--sch-isk);}
.srcwin-cite{font-size:0.78rem;color:var(--cream);font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.srcwin-cite .sub{color:var(--cream-faint);font-weight:400;margin-left:6px;}
.srcwin-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.srcwin-btn{width:30px;height:30px;border:1px solid var(--border-mid);background:transparent;color:var(--cream);border-radius:50%;font-size:1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all 0.15s;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;padding:0;}
.srcwin-btn:hover{background:var(--bg-2);}
.srcwin[data-scholar="sak"] .srcwin-btn:hover{border-color:var(--sch-sak-rim);color:var(--sch-sak);}
.srcwin[data-scholar="kir"] .srcwin-btn:hover{border-color:var(--sch-kir-rim);color:var(--sch-kir);}
.srcwin[data-scholar="isk"] .srcwin-btn:hover{border-color:var(--sch-isk-rim);color:var(--sch-isk);}
.srcwin-close{background:var(--bg-2);}

.srcwin-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 22px 22px;}
.srcwin-body::-webkit-scrollbar{width:8px;}
.srcwin-body::-webkit-scrollbar-track{background:transparent;}
.srcwin[data-scholar="sak"] .srcwin-body::-webkit-scrollbar-thumb{background:rgba(79,195,255,0.25);border-radius:4px;}
.srcwin[data-scholar="kir"] .srcwin-body::-webkit-scrollbar-thumb{background:rgba(228,120,176,0.25);border-radius:4px;}
.srcwin[data-scholar="isk"] .srcwin-body::-webkit-scrollbar-thumb{background:rgba(62,201,138,0.25);border-radius:4px;}

.srcwin-ar{font-family:var(--font-quran);direction:rtl;font-size:1.22rem;line-height:2.3;color:var(--cream);text-align:justify;}
.srcwin-ar p{margin-bottom:14px;}
.srcwin-ar p:last-child{margin-bottom:0;}
.srcwin-ar .phrase{font-weight:500;}
.srcwin[data-scholar="sak"] .srcwin-ar .phrase{color:var(--sch-sak);}
.srcwin[data-scholar="kir"] .srcwin-ar .phrase{color:var(--sch-kir);}
.srcwin[data-scholar="isk"] .srcwin-ar .phrase{color:var(--sch-isk);}

.srcwin-en{font-size:0.92rem;line-height:1.78;color:var(--cream-dim);direction:ltr;text-align:left;}
.srcwin-en p{margin-bottom:12px;}
.srcwin-en .ar,.srcwin-en .ar-tech,.srcwin-en .phrase{font-family:var(--font-quran);color:var(--cream);font-weight:500;}
.srcwin-en em{font-style:italic;color:var(--cream);}
.srcwin-en b{color:var(--cream);}

.srcwin-divider{font-size:0.6rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.16em;font-weight:700;text-align:center;margin:14px 0 10px;display:flex;align-items:center;gap:10px;}
.srcwin-divider::before,.srcwin-divider::after{content:'';flex:1;height:1px;background:var(--border-mid);}

.srcwin[data-view="sbs"] .srcwin-body{padding:0;}
.srcwin[data-view="sbs"] .srcwin-grid{display:grid;grid-template-columns:1fr 1fr;}
.srcwin[data-view="sbs"] .srcwin-grid > div{padding:16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:calc(min(720px,88vh) - 60px);}
.srcwin[data-view="sbs"] .srcwin-grid .col-en{border-left:1px dashed var(--border-mid);}
.srcwin[data-view="sbs"] .srcwin-divider{display:none;}
.srcwin[data-view="ar"] .col-en,.srcwin[data-view="ar"] .srcwin-divider{display:none;}
.srcwin[data-view="stacked"] .srcwin-grid > div{padding:0;}

@media(max-width:540px){
  .srcwin[data-view="sbs"] .srcwin-grid{grid-template-columns:1fr;}
  .srcwin[data-view="sbs"] .srcwin-grid .col-en{border-left:0;border-top:1px dashed var(--border-mid);}
  .srcwin-hdr{padding:12px 14px;}
  .srcwin-body{padding:14px 16px 20px;}
}

.srcwin-view-pill{font-size:0.62rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;background:var(--bg-2);border:1px solid var(--border-mid);padding:3px 9px;border-radius:8px;font-weight:600;font-family:inherit;}

@keyframes srcwinFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes srcwinIn{from{opacity:0;transform:translateY(8px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ═══ Sakhāwī inline source panel (NEW) ═══ */
.sak-source-panel{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(64,196,204,0.3);animation:sakReveal 0.25s ease-out;}
.sak-source-panel[hidden]{display:none;}
.sak-src-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.sak-src-lbl{font-size:0.58rem;color:var(--gold-lt);text-transform:uppercase;letter-spacing:0.14em;font-weight:700;flex:1;min-width:0;}
.sak-src-pages{font-size:0.64rem;color:var(--cream-faint);background:var(--bg-2);padding:1px 7px;border-radius:6px;border:1px solid var(--border);font-family:ui-monospace,Menlo,monospace;}
.sak-src-close{width:22px;height:22px;border-radius:50%;background:var(--bg-3);color:var(--cream);border:none;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0.15);touch-action:manipulation;}
.sak-src-variant-btn{width:22px;height:22px;border-radius:50%;background:rgba(64,196,204,0.15);color:var(--gold-lt);border:1px solid rgba(64,196,204,0.4);cursor:pointer;font-size:0.82rem;line-height:1;padding:0;margin-right:4px;transition:all 0.15s;-webkit-tap-highlight-color:rgba(64,196,204,0.3);touch-action:manipulation;}
.sak-src-variant-btn:hover{background:rgba(64,196,204,0.3);}
.sak-src-body[data-variant="compact"] .sak-src-pair{display:grid;grid-template-columns:22px 1fr 1fr;gap:10px;}
.sak-src-body[data-variant="compact"] .sak-src-pair-body{display:contents;}
.sak-src-body[data-variant="compact"] .sak-src-en{border-left:1px dashed rgba(64,196,204,0.2);padding-left:10px;padding-top:0;}
@media(max-width:520px){.sak-src-body[data-variant="compact"] .sak-src-pair{grid-template-columns:22px 1fr;}.sak-src-body[data-variant="compact"] .sak-src-pair-body{display:flex;flex-direction:column;gap:4px;}}
.sak-src-body[data-variant="ar-only"] .sak-src-en{display:none;}
.sak-src-body[data-variant="ar-only"] .sak-src-bayt-lbl{display:block;}
.sak-src-body{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px dashed rgba(64,196,204,0.25);border-radius:6px;background:rgba(64,196,204,0.03);}
.sak-src-pair{display:flex;gap:10px;align-items:flex-start;}
.sak-src-pair-n{font-size:0.7rem;color:var(--gold-lt);background:var(--gold-bg);border:1px solid var(--gold-bdr);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;margin-top:2px;}
.sak-src-pair-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.sak-src-ar{font-family:var(--font-quran);direction:rtl;text-align:right;font-size:1rem;line-height:1.9;color:var(--cream);}
.sak-src-ar .phrase{background:rgba(64,196,204,0.14);color:var(--gold-lt);padding:2px 6px;border-radius:4px;font-weight:600;}
.sak-src-en{font-size:0.8rem;color:var(--cream-dim);line-height:1.6;border-left:2px solid rgba(64,196,204,0.2);padding-left:10px;}
.sak-src-en .phrase{background:rgba(64,196,204,0.14);color:var(--gold-lt);padding:1px 5px;border-radius:4px;font-weight:600;font-family:var(--font-quran);font-size:1.15em;}
.sak-src-en b{color:var(--cream);}
.sak-src-bayt-lbl{font-size:0.62rem;color:var(--gold-lt);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;text-align:center;margin-top:6px;padding-top:8px;border-top:1px dashed rgba(64,196,204,0.2);}
.sak-src-bayt{font-family:'Scheherazade New','Amiri',serif;font-size:1.05rem;text-align:center;color:var(--cream);line-height:2;direction:rtl;padding:6px 0;}
.sak-src-bayt .caesura{color:var(--gold);margin:0 8px;opacity:0.6;}
.sak-sparkle.is-open{transform:rotate(45deg);box-shadow:0 0 14px rgba(64,196,204,0.45);}
@keyframes sakReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* Classic split body: two columns, each scrolls independently */
.sak-sbs-cols{flex:1;display:flex;overflow:hidden;}
.sak-sbs-col{flex:1;overflow-y:auto;padding:12px 13px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.sak-sbs-col-ar{border-right:1px dashed var(--border);background:rgba(212,148,14,0.03);}
.sak-sbs-col-en{background:rgba(64,196,204,0.03);}
.sak-sbs-lbl{font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-faint);font-weight:700;margin-bottom:8px;position:sticky;top:0;background:var(--bg-1);padding:2px 0 6px;z-index:1;}

/* Phone: stack columns vertically */
@media (max-width:520px){
  .sak-sbs-cols{flex-direction:column;}
  .sak-sbs-col-ar{border-right:none;border-bottom:1px dashed var(--border);}
}

.sak-sbs-ar{font-family:var(--font-quran);direction:rtl;text-align:right;font-size:1.08rem;line-height:2.05;color:var(--cream);}
.sak-sbs-ar .phrase{background:rgba(64,196,204,0.14);color:var(--gold-lt);padding:1px 5px;border-radius:4px;font-weight:600;}
.sak-sbs-ar .caesura{color:var(--gold);margin:0 8px;opacity:0.6;}
.sak-sbs-en{font-size:0.82rem;line-height:1.6;color:var(--cream);}
.sak-sbs-en .phrase{font-family:var(--font-quran);font-size:1.3em;background:rgba(64,196,204,0.12);color:var(--gold-lt);padding:1px 4px;border-radius:4px;display:inline-block;vertical-align:middle;line-height:1.15;margin:0 2px;font-weight:600;}
.sak-sbs-en b{color:var(--gold-lt);font-weight:600;}

.sak-sbs-bayt{
  margin-top:10px;padding:10px 8px;
  border:1px dashed rgba(79,195,255,0.4);
  border-radius:8px;
  background:rgba(26,163,255,0.04);
  font-family:var(--font-quran);
  direction:rtl;text-align:center;
  font-size:0.98rem;line-height:2;color:var(--cream);
}
.sak-sbs-bayt .caesura{color:var(--gold);margin:0 6px;opacity:0.6;}
.sak-sbs-bayt-lbl{font-size:0.56rem;text-align:center;letter-spacing:0.14em;color:var(--sch-sak);text-transform:uppercase;margin:12px 0 6px;font-weight:700;}


.conflict-item{background:var(--bg-2);border:1px solid var(--border-mid);border-left:3px solid var(--gold);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.18);}
.conflict-item:last-child{margin-bottom:4px;}
.conflict-item.forward{border-left-color:var(--rust);}
.conflict-item.reversion{border-left-color:var(--blue);}
.conflict-item.mastered{border-left-color:var(--green);background:rgba(26,128,64,0.03);}
.ci-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;transition:background 0.12s;}
.ci-hdr:hover{background:var(--bg-3);}
.ci-badge{font-size:0.68rem;color:var(--cream-faint);font-weight:600;}

/* ═══ Eyebrow strip — conflict type above the collapsed row ═══ */
.ci-eyebrow{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px 0;
  font-size:0.64rem;color:var(--cream-faint);
  text-transform:uppercase;letter-spacing:0.1em;font-weight:600;
}
.ci-eyebrow-dot{width:4px;height:4px;border-radius:50%;background:rgba(212,148,14,0.6);flex-shrink:0;}

/* ═══ Collapsed row — gold sparkle LEFT, name+ref centre, green chevron RIGHT ═══ */
.ci-name-group{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;}
.ci-surah-name{font-family:var(--font);font-size:1.05rem;color:var(--cream);font-weight:600;letter-spacing:0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ci-verse-ref{font-size:0.82rem;color:#90d0a8;font-weight:700;font-family:var(--font);letter-spacing:0.03em;flex-shrink:0;}
.ci-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ═══ Expanded body — descriptor + shared-phrase + verse blocks ═══ */
.descriptor-strip{font-size:0.78rem;color:var(--cream-faint);margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--border-mid);}
.descriptor-strip strong{color:var(--cream);font-weight:600;}

.shared-phrase-block{background:rgba(212,148,14,0.06);border:1px solid var(--gold-bdr);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.shared-phrase-label{font-size:0.64rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:6px;}
.shared-phrase-ar{font-family:var(--font-quran);font-size:1.4rem;color:var(--gold-lt);direction:rtl;text-align:right;line-height:1.8;}

.verse-block{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;}
.verse-block.self{border-left:2px solid var(--gold);}
.verse-block.twin{border-left:2px solid var(--rust);}
.verse-tag{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.verse-tag .ref-ltr{color:#90d0a8;font-family:var(--font);letter-spacing:0.04em;text-transform:none;}
.verse-ar{font-family:var(--font-quran);font-size:1.35rem;line-height:2;color:var(--cream);direction:rtl;text-align:right;}
.verse-tr{font-size:0.78rem;color:var(--cream-dim);line-height:1.6;font-style:italic;margin-top:6px;}
.verse-highlight{background:rgba(212,148,14,0.25);color:var(--gold-lt);border-radius:3px;padding:1px 2px;}

/* Legacy — retained so any other callers still render */
.ci-ref-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;}
.ci-badges-group{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.ci-type-pill{font-size:0.64rem;color:#8fb9d4;background:rgba(140,180,220,0.14);border:1px solid rgba(140,180,220,0.3);padding:2px 8px;border-radius:8px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;}
.ci-phrase-row{font-family:var(--font-ar);font-size:1.3rem;color:var(--gold-lt);direction:rtl;text-align:right;border-top:1px dashed rgba(90,180,130,0.2);margin-top:4px;padding-top:10px;line-height:1.6;}
.ci-ref{font-family:var(--font-ar);font-size:0.94rem;color:var(--cream);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ci-type-label{font-size:0.72rem;color:var(--gold-lt);}
.ci-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px;}
.ci-tag{font-size:0.6rem;background:rgba(255,255,255,0.05);color:var(--cream-dim);padding:1px 6px;border-radius:8px;border:1px solid var(--border);}
.ci-prox{display:inline-block;font-size:0.62rem;font-weight:700;background:rgba(220,80,40,0.15);color:var(--conf-light);border:1px solid rgba(220,80,40,0.35);padding:1px 6px;border-radius:8px;margin-left:4px;}

.ci-body{display:none;padding:12px 14px 14px;border-top:1px solid var(--border);background:rgba(0,0,0,0.2);}
.ci-body.open{display:block;}

.ending-box{background:rgba(212,148,14,0.04);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px;}
.ending-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);display:block;margin-bottom:4px;}
.ending-type{font-size:0.72rem;color:var(--cream-dim);display:block;margin-bottom:6px;line-height:1.5;}
.ending-text{font-family:var(--font-ar);font-size:1.2rem;color:var(--gold-lt);direction:rtl;text-align:right;line-height:1.8;}

.twin-verse{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:10px;}
.twin-verse.self{border-left:2px solid var(--gold);}
.twin-verse.twin{border-left:2px solid var(--rust);}
.twin-label{font-size:0.7rem;color:var(--cream-faint);margin-bottom:6px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;}
.twin-ar{font-family:var(--font-quran);font-size:1.4rem;line-height:2.1;color:var(--cream);direction:rtl;text-align:right;margin-bottom:6px;}
.mlh-word{border-radius:3px;transition:background 0.15s;cursor:help;display:inline;}
.mlh-word:hover{background:rgba(255,255,255,0.05);}
.mlh-word.mlh-haraka{color:var(--cream);}
.mlh-char{background:rgba(200,156,64,0.2);border-radius:2px;}
.twin-tr{font-size:0.78rem;color:var(--cream-dim);line-height:1.55;font-style:italic;}
.tell-legend{font-size:0.65rem;color:var(--cream-faint);margin:6px 0 10px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.tell-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px;}
.hl-shared{color:var(--cream);background:rgba(212,148,14,0.08);border-radius:3px;padding:0 2px;text-shadow:0 0 6px rgba(212,148,14,0.45),0 0 12px rgba(212,148,14,0.25);display:inline;}
.hl-diverge{color:var(--gold-lt);font-weight:700;text-shadow:0 0 8px rgba(212,148,14,0.45);display:inline;}

.action-row{display:flex;gap:6px;flex-wrap:wrap;}
.portal-btn,.master-btn,.drill-btn,.comm-link{flex:1;min-width:120px;padding:8px;border-radius:var(--radius-sm);font-size:0.77rem;font-family:var(--font);cursor:pointer;transition:all 0.15s;border:1px solid;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;}
.portal-btn{background:var(--gold-bg);border-color:var(--gold-bdr);color:var(--gold-lt);}
.portal-btn:hover{background:rgba(212,148,14,0.18);}
.master-btn{background:transparent;border-color:var(--green-bdr);color:#90d0a0;}
.master-btn:hover{background:var(--green-bg);}
.master-btn.is-mastered{background:var(--green-bg);}
.drill-btn{background:transparent;border-color:var(--border-mid);color:var(--cream-dim);}
.drill-btn:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
.comm-link{background:transparent;border:1px dashed var(--gold-bdr);color:var(--gold-lt);}
.comm-link:hover{background:var(--gold-bg);}

.srs-badge{font-size:0.6rem;padding:1px 6px;border-radius:8px;font-weight:600;}
.srs-badge.due{background:var(--rust-bg);color:var(--conf-light);border:1px solid var(--rust-bdr);}
.srs-badge.scheduled{background:var(--blue-bg);color:#90c0f0;border:1px solid var(--blue-bdr);}
.srs-badge.mastered{background:var(--green-bg);color:var(--mast-light);border:1px solid var(--green-bdr);}
.locked-note{font-size:0.68rem;color:var(--cream-faint);text-align:center;padding:6px;border:1px dashed var(--border);border-radius:var(--radius-sm);margin-top:4px;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:22px;max-width:380px;width:100%;}

/* v160-wip-27: range-modal now slides in from the right as a drawer.
   We override the centered .modal-overlay/.modal pair so #range-modal becomes
   a fixed full-viewport overlay (for the dim) plus a fixed right-edge panel.
   Other modal-overlays (e.g. pp-modal) are unaffected — only #range-modal is
   targeted here.
   wip-27 fix: explicit position/inset on the overlay (don't rely on inheriting
   from the base rule when display is overridden), and a clean transform path
   so iOS Safari doesn't get confused. */
#range-modal.modal-overlay{
  position:fixed;inset:0;
  display:block;align-items:initial;justify-content:initial;padding:0;
  background:rgba(0,0,0,0);pointer-events:none;
  transition:background 0.22s ease;
  visibility:visible;
}
#range-modal.modal-overlay.open{
  background:rgba(0,0,0,0.5);pointer-events:auto;
}
#range-modal .modal{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:380px;max-width:92vw;height:100%;
  margin:0;
  border-radius:0;border:none;border-left:1px solid var(--gold-bdr);
  background:var(--bg-1);
  padding:22px 22px 26px;
  box-shadow:-24px 0 60px rgba(0,0,0,0.5);
  transform:translate3d(100%,0,0);
  transition:transform 0.32s cubic-bezier(0.22,0.61,0.36,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
#range-modal.open .modal{transform:translate3d(0,0,0);}
@media (max-width:420px){
  #range-modal .modal{width:100%;max-width:100%;}
}
.modal-title{font-size:1.1rem;font-weight:700;color:var(--gold-lt);margin-bottom:6px;}
.modal-sub{font-size:0.82rem;color:var(--cream-faint);margin-bottom:16px;}
.nav-row{display:flex;gap:8px;align-items:center;margin-bottom:14px;}
.nav-input{flex:1;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:12px 14px;border-radius:var(--radius-sm);font-size:1.1rem;font-family:var(--font-mono);font-weight:600;text-align:center;outline:none;transition:border-color 0.15s;}
.nav-input::-webkit-outer-spin-button,.nav-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.nav-input:focus{border-color:var(--gold-bdr);box-shadow:0 0 0 3px var(--gold-bg);}
.nav-input::placeholder{color:var(--cream-faint);font-weight:400;font-size:0.92rem;}
.nav-go{background:var(--gold);color:var(--bg);border:0;padding:12px 18px;min-height:44px;border-radius:var(--radius-sm);font-weight:600;font-size:0.92rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;} /* v229-fix-tap-nav-go: min-height 44 */
.nav-go:hover{background:var(--gold-lt);}
.nav-scrubber{margin-top:8px;}
.nav-scrubber-lbl{font-size:0.68rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;display:flex;justify-content:space-between;}
.nav-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;background:var(--bg-2);border-radius:3px;outline:none;}
.nav-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--gold-bdr);}
.nav-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--bg);}
.nav-track-marks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.66rem;color:var(--cream-faint);margin-top:6px;}
.nav-preview{margin-top:14px;padding:14px 14px 16px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;}
.nav-preview .label{font-size:0.7rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;}
.nav-preview .verse-num{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--gold-lt);margin:4px 0;}
.nav-preview .ar-snippet{font-family:var(--font-ar);font-size:1.5rem;color:var(--cream);direction:rtl;line-height:1.9;margin-top:6px;}
.nav-hint{font-size:0.72rem;color:var(--cream-faint);margin-top:10px;text-align:center;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.m-btn{padding:12px 14px;min-height:44px;border-radius:var(--radius-sm);font-size:0.83rem;cursor:pointer;background:var(--bg-2);color:var(--cream);border:1px solid var(--border-mid);font-family:var(--font);display:inline-flex;align-items:center;justify-content:center;} /* v229-fix-tap-m-btn: 8→12 padding, min-height 44 */
.m-btn:hover{background:var(--bg-3);}
.m-btn.primary{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.m-btn.danger{color:var(--conf-light);border-color:var(--rust-bdr);}
.modal-input{width:100%;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:10px 12px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.95rem;margin-bottom:10px;}

/* v160-wip-16: multipurpose Range/Jump modal — mode toggle, status pill, range editor panel.
   Same modal opens from sidebar tile, Progress tile, and Browse "Jump to verse" button.
   Default mode = Jump; Set range is one toggle away. */
.m-status{display:inline-flex;align-items:center;gap:6px;font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:3px 9px;border-radius:8px;margin-top:8px;}
.m-status.unmem{background:rgba(192,72,40,0.14);color:var(--conf-light);border:1px solid rgba(192,72,40,0.35);}
.m-status.full{background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);}
.m-status.partial{background:var(--teal-bg);color:#80e0d0;border:1px solid var(--teal-bdr);}
.m-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.m-mode{display:flex;background:var(--bg);border:1px solid var(--border-mid);border-radius:10px;padding:3px;margin:14px 0 16px;}
.m-mode-btn{flex:1;padding:12px 10px;min-height:44px;background:transparent;border:none;color:var(--cream-faint);font-size:0.78rem;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:8px;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:6px;} /* v229-fix-tap-m-mode-btn: 8→12 padding, min-height 44 */
.m-mode-btn:hover{color:var(--cream);}
.m-mode-btn.active{background:var(--gold-bg);color:var(--gold-lt);box-shadow:inset 0 0 0 1px var(--gold-bdr);}
.m-mode-btn[disabled]{opacity:0.4;cursor:not-allowed;}
.m-mode-btn .glyph{font-size:0.95em;line-height:1;}
.m-pane{display:none;}
.m-pane.active{display:block;}
.m-rng-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap;}
.m-rng-fld{flex:1;min-width:90px;}
.m-rng-lbl{font-size:0.62rem;font-weight:700;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;display:block;}
.m-rng-inp{width:100%;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:9px 11px;border-radius:8px;font-family:var(--font);font-size:0.95rem;font-weight:600;text-align:center;outline:none;transition:border-color 0.15s;}
.m-rng-inp:focus{border-color:var(--gold-bdr);box-shadow:0 0 0 3px var(--gold-bg);}
.m-rng-inp::-webkit-outer-spin-button,.m-rng-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.m-rng-dash{padding-bottom:10px;color:var(--cream-faint);font-size:1.1rem;}
.m-rng-summary{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-top:8px;font-size:0.78rem;color:var(--cream-dim);text-align:center;}
.m-rng-summary b{color:var(--cream);font-weight:700;}
.m-actions-split{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.m-actions-split .right{display:flex;gap:8px;}
.m-btn.gold{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.m-btn.danger-solid{background:rgba(192,72,40,0.12);color:var(--conf-light);border-color:rgba(192,72,40,0.35);}
.m-btn.green{background:var(--green-bg);color:var(--mast-light);border-color:var(--green-bdr);font-weight:700;}

/* PRIORITIES */
.pri-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.pri-title{font-size:1.35rem;font-weight:700;color:var(--cream);}
.pri-actions{display:flex;gap:6px;flex-wrap:wrap;}
.pri-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.pri-stat{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;flex:1;min-width:108px;}
.pri-stat-n{font-size:1.4rem;font-weight:700;color:var(--gold-lt);display:block;}
.pri-stat-l{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;}
.pri-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.pri-bulk{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;background:var(--bg-1);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);}
.pri-bulk-lbl{font-size:0.72rem;color:var(--cream-faint);margin-right:4px;}
.pri-bulk-btn{padding:6px 12px;background:rgba(212,148,14,0.12);border:1px solid var(--gold-bdr);color:var(--gold-lt);border-radius:var(--radius-sm);cursor:pointer;font-size:0.78rem;font-family:var(--font);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.pri-bulk-btn:hover{background:rgba(212,148,14,0.2);}
.pri-item{background:var(--bg-1);border:1px solid var(--border-mid);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;}
.pri-item:hover{background:var(--bg-2);border-left-color:var(--gold-lt);}
.pri-item.due{border-left-color:var(--rust);}
.pri-item.mastered{border-left-color:var(--green);background:rgba(26,128,64,0.04);}
.pri-item-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap;cursor:pointer;}
.pri-refs{font-family:var(--font-ar);font-size:1rem;color:var(--cream);}
.pri-meta{display:flex;gap:6px;align-items:center;font-size:0.7rem;color:var(--cream-faint);flex-wrap:wrap;}
.pri-phrase{font-family:var(--font-ar);font-size:1.12rem;color:var(--gold-lt);direction:rtl;text-align:right;margin-top:4px;cursor:pointer;}
.pri-type{font-size:0.7rem;color:var(--cream-faint);}
.pri-item-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.pri-expand{display:none;}
.pri-expand.open{display:block;animation:priExpandIn 0.18s ease-out;}
@keyframes priExpandIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.pri-act{padding:5px 10px;border-radius:var(--radius-sm);font-size:0.72rem;cursor:pointer;border:1px solid;font-family:var(--font);text-decoration:none;display:inline-flex;align-items:center;gap:3px;}
.pri-act.drill{background:rgba(212,148,14,0.1);color:var(--gold-lt);border-color:var(--gold-bdr);}
.pri-act.drill:hover{background:rgba(212,148,14,0.2);}
.pri-act.open{background:transparent;color:var(--cream-dim);border-color:var(--border-mid);}
.pri-act.unmark{background:transparent;color:var(--mast-light);border-color:var(--green-bdr);}
.pri-act.unmark:hover{background:var(--green-bg);}

.pv-title{font-size:1.35rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.pv-sub{font-size:0.8rem;color:var(--cream-faint);margin-bottom:18px;}
.stats-row{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.stat-card{flex:1;min-width:108px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.stat-n{font-size:1.5rem;font-weight:700;color:var(--gold-lt);display:block;}
.stat-l{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;}
.sg-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;}
.sg-item:hover{border-color:var(--gold-bdr);}
.sg-item.mem{background:var(--gold-bg);border-color:var(--gold-bdr);}
.sg-item.partial{background:var(--teal-bg);border-color:var(--teal-bdr);}
.sg-num{font-size:0.68rem;color:var(--cream-faint);min-width:22px;}
.sg-ar{font-family:var(--font-ar);font-size:0.9rem;color:var(--cream);direction:rtl;}
.sg-check{font-size:0.75rem;color:var(--gold-lt);}
.sg-range{font-size:0.6rem;color:var(--cream-faint);margin-left:6px;}

.search-bar{display:flex;gap:8px;margin-bottom:16px;margin-top:6px;}
.search-inp{flex:1;background:var(--bg-1);border:1px solid var(--border-mid);color:var(--cream);padding:9px 12px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;}
.search-btn{padding:9px 18px;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;}

/* Search v2 — section headers, result cards, match highlighting */
.sr-section-h{font-size:0.78rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin:18px 2px 8px;padding-bottom:5px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
.sr-section-h:first-child{margin-top:6px;}
.sr-section-h .sr-h-ar{font-family:var(--font-quran);font-size:1.05rem;color:var(--cream);font-weight:600;letter-spacing:0;}
.sr-section-h .sr-h-meta{font-size:0.72rem;color:var(--cream-faint);font-weight:400;text-transform:none;letter-spacing:0;}
.sr-card{background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--gold-bdr);border-radius:8px;padding:11px 14px;margin-bottom:7px;cursor:pointer;transition:all 0.12s;}
.sr-card:hover{background:var(--bg-2);border-left-color:var(--gold);}
.sr-card.outside-mem{border-left-color:var(--cream-faint);opacity:0.78;}
.sr-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.sr-ref{font-size:0.74rem;color:var(--cream-faint);font-weight:600;}
.sr-ref .n{color:var(--cream);}
.sr-card-actions{display:flex;gap:5px;}
.sr-act{font-size:0.66rem;padding:2px 8px;border-radius:10px;border:1px solid var(--border-mid);color:var(--cream-faint);background:transparent;cursor:pointer;font-family:var(--font);text-decoration:none;display:inline-flex;align-items:center;}
.sr-act:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
.sr-ar{font-family:var(--font-quran);font-size:1.3rem;line-height:2.1;direction:rtl;text-align:right;color:var(--cream);margin-bottom:5px;}
.sr-tr{font-size:0.78rem;color:var(--cream-dim);font-style:italic;line-height:1.6;}
.sr-card mark{background:rgba(212,148,14,0.28);color:var(--cream);padding:0 2px;border-radius:2px;}
.sr-card mark.ar{background:rgba(212,148,14,0.22);}
.sr-no-results{text-align:center;padding:40px 20px;color:var(--cream-faint);}
.sr-no-results-icon{font-size:2rem;opacity:0.3;margin-bottom:10px;}
.sr-result-count{font-size:0.78rem;color:var(--cream-faint);margin-bottom:10px;}
.sr-jump-ref{background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:2px solid var(--gold);border-radius:10px;padding:14px 16px;margin-bottom:12px;cursor:pointer;}
.sr-jump-ref:hover{border-color:var(--gold-lt);}
.sr-jump-h{font-size:0.7rem;color:var(--gold-lt);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:6px;}
.sr-jump-ar{font-family:var(--font-quran);font-size:1.5rem;color:var(--cream);direction:rtl;text-align:right;line-height:2.1;margin-bottom:6px;}
.sr-jump-meta{font-size:0.78rem;color:var(--cream-dim);}

/* SETTINGS */
/* v160-wip-27b: accordion-grouped settings layout. Replaces the previous
   13-section flat list with 6 collapsible categories. The legacy
   .settings-section rules below still apply for any stragglers, but the
   primary structure is now <details class="acc-group">. */
.acc-group{
  margin-bottom:10px;border:1px solid var(--border-mid);
  border-radius:var(--radius);background:var(--bg-1);overflow:hidden;
}
.acc-group summary{
  list-style:none;cursor:pointer;
  padding:14px 18px;display:flex;align-items:center;gap:14px;
  user-select:none;-webkit-user-select:none;
}
.acc-group summary::-webkit-details-marker{display:none;}
.acc-group summary:hover{background:rgba(255,255,255,0.02);}
.acc-icn{
  width:36px;height:36px;border-radius:10px;
  background:var(--gold-bg);border:1px solid var(--gold-bdr);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--gold-lt);flex-shrink:0;
}
.acc-meta{flex:1;min-width:0;}
.acc-meta .acc-t{font:700 0.98rem var(--font);color:var(--cream);}
.acc-meta .acc-d{font-size:0.78rem;color:var(--cream-dim);margin-top:2px;}
.acc-chev{color:var(--cream-faint);font-size:0.95rem;transition:transform 0.2s;flex-shrink:0;}
.acc-group[open] .acc-chev{transform:rotate(90deg);color:var(--gold-lt);}
.acc-body{padding:0 18px 18px;border-top:1px solid var(--border);}
.acc-group[open] .acc-body{padding-top:14px;}
.acc-sub{margin-top:18px;}
.acc-sub:first-child{margin-top:0;}
.acc-sub-h{font:700 0.74rem var(--font);text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);margin-bottom:6px;}
.acc-sub-d{font-size:0.78rem;color:var(--cream-dim);margin-bottom:10px;line-height:1.55;}
.settings-title{font-size:1.35rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.settings-sub{font-size:0.82rem;color:var(--cream-faint);margin-bottom:18px;}

/* ═════════════════════════════════════════════════════════════════════
   v187-isk18 · Responsive Settings shell
   ─────────────────────────────────────────────────────────────────────
   Desktop/iPad (≥820 px) — variant A: left-rail nav + content pane.
   iPhone (<820 px)       — variant C: horizontal chip strip + body.
   The wrapSettingsResponsive() JS builds both navigators; CSS shows
   the right one for the viewport. The same JS click handler runs both.
   ═════════════════════════════════════════════════════════════════════ */
.settings-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:22px;
  align-items:start;
}
.settings-rail{
  display:flex;flex-direction:column;gap:2px;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  position:sticky;top:12px;
}
.settings-rail button{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;text-align:left;
  background:transparent;border:0;border-radius:var(--radius-sm);
  color:var(--cream-dim);
  font:inherit;cursor:pointer;
  border-left:2px solid transparent;
  transition:background 0.14s,color 0.14s,border-color 0.14s;
}
.settings-rail button:hover{background:var(--bg-2);color:var(--cream);}
.settings-rail button.on{
  background:var(--bg-2);color:var(--gold-lt);
  border-left-color:var(--gold);
}
.settings-rail-icn{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;
}
.settings-rail-lbl{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.settings-rail-lbl b{font-size:0.86rem;font-weight:600;letter-spacing:-0.005em;}
.settings-rail-lbl i{
  font-size:0.7rem;font-style:normal;color:var(--cream-faint);font-weight:400;
  line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.settings-rail button.on .settings-rail-lbl b{color:var(--gold-lt);}
.settings-chips{display:none;}
.settings-pane{min-width:0;}
.settings-pane .set-section{
  background:transparent;border:0;padding:0;margin:0;
}
.settings-pane .set-section .acc-body{
  padding:0;
  border:0;
}

/* iPhone — switch to chip-strip layout */
@media (max-width: 819px){
  .settings-shell{grid-template-columns:1fr;}
  .settings-rail{display:none;}
  .settings-chips{
    display:flex;gap:6px;overflow-x:auto;
    padding:4px 0 14px;margin:0 -4px 4px;
    scrollbar-width:none;
    position:sticky;top:0;z-index:5;
    background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 75%, transparent 100%);
  }
  .settings-chips::-webkit-scrollbar{display:none;}
  .settings-chip{
    flex:0 0 auto;padding:8px 14px;border-radius:99px;
    background:var(--bg-1);border:1px solid var(--border);
    color:var(--cream-dim);font:inherit;font-size:0.84rem;font-weight:500;
    white-space:nowrap;cursor:pointer;
    transition:background 0.14s,color 0.14s,border-color 0.14s;
  }
  .settings-chip:hover{color:var(--cream);}
  .settings-chip.on{
    background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);
  }
}

.settings-section{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:18px;margin-bottom:14px;}
.settings-h{font-size:0.78rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:12px;}
.settings-note{font-size:0.74rem;color:var(--cream-faint);margin-top:8px;line-height:1.5;}
.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.preset-chip{padding:7px 14px;border:1px solid var(--border-mid);border-radius:var(--radius-sm);cursor:pointer;font-size:0.82rem;color:var(--cream);background:var(--bg-2);display:flex;align-items:center;gap:8px;font-family:var(--font);}
.preset-chip:hover{border-color:var(--gold-bdr);}
.preset-swatch{display:flex;gap:2px;}
.preset-swatch i{width:10px;height:10px;border-radius:2px;display:inline-block;}
.color-row{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.color-label{font-size:0.82rem;color:var(--cream-dim);min-width:110px;}
.color-inp{width:50px;height:34px;border:1px solid var(--border-mid);border-radius:var(--radius-sm);cursor:pointer;padding:2px;background:var(--bg-2);}
.color-hex{flex:1;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:7px 10px;border-radius:var(--radius-sm);font-family:monospace;font-size:0.85rem;max-width:130px;}
.preview-box{border:1px solid var(--border-mid);border-radius:var(--radius);padding:14px;background:var(--bg);}
.preview-label{font-size:0.68rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.preview-verse{font-family:var(--font-quran);font-size:1.95rem;color:var(--cream);direction:rtl;text-align:center;line-height:2.1;margin-bottom:10px;}
.preview-tr{font-size:0.82rem;color:var(--cream-dim);font-style:italic;text-align:center;margin-bottom:12px;}
.preview-actions{display:flex;gap:6px;flex-wrap:wrap;}
.preview-btn{padding:7px 14px;border-radius:var(--radius-sm);font-size:0.78rem;cursor:pointer;border:1px solid;}
.preview-btn.primary{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.preview-btn.secondary{background:transparent;color:var(--cream-dim);border-color:var(--border-mid);}
.settings-reset{margin-top:12px;padding:8px 14px;background:transparent;border:1px solid var(--rust-bdr);color:var(--conf-light);border-radius:var(--radius-sm);cursor:pointer;font-size:0.8rem;font-family:var(--font);}
.settings-row{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.settings-input{flex:1;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:9px 12px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;}
.settings-btn{padding:9px 16px;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;font-family:var(--font);}

/* PROFILE / LOGIN PAGE */
.profile-screen{position:fixed;inset:0;background:linear-gradient(180deg,var(--bg-1),var(--bg));z-index:500;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.profile-screen.open{display:flex;}
.profile-card{max-width:480px;width:100%;background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:30px;}
.profile-brand{text-align:center;margin-bottom:24px;}
.profile-brand-ar{font-family:var(--font-ar);font-size:2.4rem;color:var(--gold-lt);}
.profile-brand-en{font-size:0.78rem;color:var(--cream-faint);letter-spacing:0.12em;text-transform:uppercase;margin-top:4px;font-weight:600;}
.profile-tagline{font-size:0.85rem;color:var(--cream-dim);text-align:center;margin-bottom:24px;line-height:1.6;}
.profile-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.profile-tile{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;}
.profile-tile:hover{border-color:var(--gold-bdr);background:var(--bg-3);}
.profile-avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--bg);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.profile-info{flex:1;min-width:0;}
.profile-name{font-size:1rem;font-weight:600;color:var(--cream);}
.profile-meta{font-size:0.72rem;color:var(--cream-faint);}
.profile-delete{background:transparent;border:none;color:var(--cream-faint);font-size:1rem;cursor:pointer;padding:4px 8px;}
.profile-delete:hover{color:var(--conf-light);}
.profile-create{padding:14px;background:transparent;border:1.5px dashed var(--gold-bdr);color:var(--gold-lt);border-radius:var(--radius-sm);cursor:pointer;font-size:0.92rem;font-weight:600;font-family:var(--font);width:100%;margin-top:6px;}
.profile-create:hover{background:var(--gold-bg);}
.profile-form{display:none;}
.profile-form.open{display:block;}
.profile-disclaimer{font-size:0.7rem;color:var(--cream-faint);margin-top:14px;line-height:1.6;text-align:center;font-style:italic;}

.empty{text-align:center;padding:60px 20px;}
.empty-icon{font-size:2rem;opacity:0.3;margin-bottom:10px;}
.empty-text{font-size:0.85rem;color:var(--cream-faint);}
.loading{text-align:center;padding:40px 20px;color:var(--cream-faint);}
.loading-spinner{font-size:1.5rem;animation:spin 1s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ═══ HIFZ TAB ═══ */
.hz-hero{background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:1px solid var(--border-mid);border-left:3px solid var(--gold);border-radius:10px;padding:16px 18px;margin-bottom:16px;}
.hz-hero-title{font-size:1.25rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.hz-hero-sub{font-size:0.82rem;color:var(--cream-faint);line-height:1.55;}
.hz-block{background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:14px 16px;margin-bottom:12px;}
.hz-block.sabaq{border-left-color:var(--rust);}
.hz-block.sabqi{border-left-color:var(--gold);}
.hz-block.manzil{border-left-color:var(--teal);}
.hz-block.focus{border-left-color:var(--purple);}
.hz-block.bedtime{border-left-color:var(--blue);}
.hz-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.hz-block-head.toggle{cursor:pointer;user-select:none;margin-bottom:0;}
.hz-block-head.toggle:active{opacity:0.7;}
.hz-chev{font-size:0.7rem;color:var(--cream-faint);transition:transform 0.15s;margin-left:2px;}
.hz-block.collapsed .hz-chev{transform:rotate(-90deg);}
.hz-block-summary{font-size:0.78rem;color:var(--cream-dim);margin-top:4px;line-height:1.4;display:none;font-family:var(--font);}
.hz-block.collapsed .hz-block-summary{display:block;}
.hz-collapsible{margin-top:10px;}
.hz-block.collapsed .hz-collapsible{display:none;}
.hz-block-title{font-size:1.05rem;font-weight:700;color:var(--cream);display:flex;align-items:center;gap:8px;}
.hz-block-title .hz-tag{font-size:0.58rem;text-transform:uppercase;letter-spacing:0.1em;padding:2px 7px;border-radius:8px;font-weight:700;}
.hz-block.sabaq .hz-tag{background:var(--rust-bg);color:var(--conf-light);border:1px solid var(--rust-bdr);}
.hz-block.sabqi .hz-tag{background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);}
.hz-block.manzil .hz-tag{background:var(--teal-bg);color:#80e0d0;border:1px solid var(--teal-bdr);}
.hz-block.focus .hz-tag{background:var(--purple-bg);color:#c8a0f0;border:1px solid var(--purple-bdr);}
.hz-block.bedtime .hz-tag{background:var(--blue-bg);color:#90c0f0;border:1px solid var(--blue-bdr);}
.hz-block-meta{font-size:0.75rem;color:var(--cream-faint);}
.hz-block-body{font-size:0.85rem;color:var(--cream-dim);line-height:1.65;}
.hz-verse-ref{font-family:var(--font-ar);font-size:1rem;color:var(--cream);}
.hz-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.hz-btn{padding:8px 14px;border-radius:8px;font-size:0.82rem;cursor:pointer;border:1px solid;font-family:var(--font);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.hz-btn.primary{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:700;}
.hz-btn.primary:hover{opacity:0.9;}
.hz-btn.secondary{background:transparent;color:var(--cream-dim);border-color:var(--border-mid);}
.hz-btn.secondary:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
.hz-btn.ghost{background:transparent;color:var(--cream-faint);border-color:transparent;}
.hz-btn.ghost:hover{color:var(--cream-dim);}
.hz-setup{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.hz-setup-label{font-size:0.66rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;display:block;}
.hz-input{background:var(--bg-1);border:1px solid var(--border-mid);color:var(--cream);padding:8px 10px;border-radius:6px;font-family:var(--font);font-size:0.88rem;width:100%;max-width:220px;}
.hz-input[type=number]{max-width:90px;}
.hz-toggle{display:inline-flex;align-items:center;gap:6px;font-size:0.84rem;color:var(--cream-dim);cursor:pointer;padding:5px 10px;border:1px solid var(--border-mid);border-radius:16px;background:var(--bg-1);}
.hz-toggle.on{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
/* Page heatmap */
.hz-heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:3px;margin-top:10px;}
.hz-pg{aspect-ratio:1;border-radius:3px;font-size:0.6rem;color:var(--cream-faint);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;font-family:var(--font);font-weight:600;}
.hz-pg:hover{border-color:var(--cream-faint);}
.hz-pg.not-mem{background:rgba(255,255,255,0.02);color:var(--cream-faint);opacity:0.35;}
.hz-pg.strong{background:rgba(26,128,64,0.35);color:#c0ecc8;}
.hz-pg.ok{background:rgba(212,148,14,0.3);color:#f0d08c;}
.hz-pg.shaky{background:rgba(200,110,40,0.4);color:#f4c488;}
.hz-pg.weak{background:rgba(192,72,40,0.5);color:#ffb890;}
.hz-pg.untested{background:rgba(255,255,255,0.05);color:var(--cream-dim);border:1px dashed var(--border-mid);}
.hz-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:0.7rem;color:var(--cream-faint);margin-top:10px;align-items:center;}
.hz-legend i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle;}
/* Focus Mode overlay */
.hz-focus-overlay{position:fixed;inset:0;background:var(--bg);z-index:400;display:none;flex-direction:column;padding:18px;overflow-y:auto;}
.hz-focus-overlay.open{display:flex;}
.hz-focus-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border-mid);}
.hz-focus-title{font-size:1rem;color:var(--gold-lt);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
.hz-focus-close{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:7px 14px;border-radius:18px;cursor:pointer;font-size:0.8rem;font-family:var(--font);}
.hz-focus-pair{display:flex;flex-direction:column;gap:18px;max-width:720px;margin:0 auto;width:100%;}
.hz-focus-v{background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:18px 20px;}
.hz-focus-v.twin{border-left-color:var(--rust);}
.hz-focus-ref{font-size:0.76rem;color:var(--cream-faint);margin-bottom:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.hz-focus-ar{font-family:var(--font-quran);font-size:1.8rem;line-height:2.4;color:var(--cream);direction:rtl;text-align:right;margin-bottom:10px;}
.hz-focus-tr{font-size:0.88rem;color:var(--cream-dim);line-height:1.65;font-style:italic;}
.hz-focus-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;justify-content:center;}
.hz-focus-note{background:rgba(212,148,14,0.05);border:1px solid var(--gold-bdr);border-radius:8px;padding:12px 14px;margin-top:16px;font-size:0.86rem;color:var(--cream-dim);line-height:1.65;}
/* Recite ratings */
.hz-rate{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.hz-rate-btn{padding:6px 12px;border-radius:18px;font-size:0.78rem;cursor:pointer;border:1px solid;font-family:var(--font);background:transparent;}
.hz-rate-btn.strong{border-color:var(--green-bdr);color:var(--mast-light);}
.hz-rate-btn.strong:hover,.hz-rate-btn.strong.active{background:var(--green-bg);}
.hz-rate-btn.ok{border-color:var(--gold-bdr);color:var(--gold-lt);}
.hz-rate-btn.ok:hover,.hz-rate-btn.ok.active{background:var(--gold-bg);}
.hz-rate-btn.shaky{border-color:rgba(200,110,40,0.4);color:#f4c488;}
.hz-rate-btn.shaky:hover,.hz-rate-btn.shaky.active{background:rgba(200,110,40,0.1);}
.hz-rate-btn.weak{border-color:var(--rust-bdr);color:var(--conf-light);}
.hz-rate-btn.weak:hover,.hz-rate-btn.weak.active{background:var(--rust-bg);}
/* Bedtime mode */
.hz-bedtime-display{background:var(--bg-1);border-radius:10px;padding:24px 20px;margin-top:12px;}
.hz-bedtime-verse{font-family:var(--font-quran);font-size:1.9rem;line-height:2.4;color:var(--cream);direction:rtl;text-align:right;margin-bottom:8px;}
.hz-bedtime-ref{font-size:0.76rem;color:var(--cream-faint);text-align:left;}

/* v190 · Mobile breakpoint raised 720 → 1000 px. Below 1000 the sidebar
   collapses to a slide-in drawer and the ☰ FAB appears (was 720, which
   left a dead zone 720-900 where the sidebar squeezed up against the
   reader content). Common laptop split-screen panes are 800-1200 each,
   so 1000 covers all the "scrunched window" cases without affecting
   normal desktop viewports. */
@media(min-width:1001px){
  .sb-backdrop{display:none !important;}
}
@media(max-width:1000px){
  .app{flex-direction:column;height:auto;}
  /* Sidebar becomes a slide-in drawer on phone */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:120;
    width:86%;max-width:340px;min-width:0;max-height:100vh;
    background:#141e2e;
    background-color:#141e2e;
    border-right:1px solid var(--border-mid);border-bottom:none;
    transform:translateX(-100%);transition:transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
    box-shadow:4px 0 32px rgba(0,0,0,0.7);
    padding-top:8px;
    overflow-y:auto;
  }
  body.sb-open .sidebar{transform:translateX(0);}
  .sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:110;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
  body.sb-open .sb-backdrop{display:block;}
  body.sb-open{overflow:hidden;}
  .sb-hdr{padding:16px 18px 12px;font-size:0.72rem;}
  .sb-list{padding:16px 14px 16px 0;}
  .sb-list::before{left:42px;}
  .sb-item{padding:8px 14px 8px 0;gap:12px;}
  .sb-num{font-size:0.74rem;width:30px;}
  .sb-node{width:16px;height:16px;}
  .sb-ar{font-size:1.15rem;}
  .sb-en{font-size:0.7rem;margin-top:2px;}
  .sb-badge,.sb-range-badge,.sb-mastered{font-size:0.64rem;padding:2px 7px;}
  .sb-cnt{font-size:0.66rem;}
  .sb-add{font-size:0.66rem;}
  .sb-dot-group{padding:3px 7px;}
  .sb-dot-n{font-size:0.64rem;}
  /* v190 · Round 56 × 56 icon-only FAB · Variant 02. Hamburger glyph,
     theme-aware mint accent, fixed bottom-left, hidden when drawer
     is open. */
  .sb-toggle{
    position:fixed;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    left:14px;
    z-index:135;
    width:56px;
    height:56px;
    padding:0;
    border-radius:50%;
    background:var(--bg-1, #11141a);
    border:1px solid color-mix(in srgb, var(--ms-mint, #a7d7c5) 40%, transparent);
    color:var(--ms-mint, #a7d7c5);
    font:600 22px/1 'Inter Tight', Inter, -apple-system, sans-serif;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,0.55),
               0 0 0 1px rgba(0,0,0,0.4) inset;
    transition:all .15s ease;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
  }
  .sb-toggle:hover, .sb-toggle:active{
    background:color-mix(in srgb, var(--ms-mint, #a7d7c5) 14%, var(--bg-1, #11141a));
    border-color:var(--ms-mint, #a7d7c5);
    color:var(--cream, #efe7d5);
    transform:translateY(-1px);
  }
  body.sb-open .sb-toggle{display:none;}
  .view{padding:16px 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px;}
  .v-arabic{font-size:1.55rem;line-height:2.1;}
  .hdr-top{padding:10px 12px;}
  .hdr-bot{padding:0 12px 10px;}
  .nav-btn{padding:7px 10px;font-size:0.8rem;}
  .brand-ar{font-size:1.3rem;}
  .brand-en,.brand-sep{display:none;}
}
@media(min-width:1001px){
  .sb-toggle{display:none;}
}

/* UI tile picker in Settings */
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.ui-tile{background:var(--bg-2);border:1.5px solid var(--border-mid);border-radius:var(--radius-sm);padding:11px 13px;cursor:pointer;text-align:left;font-family:var(--font);transition:all 0.15s;color:var(--cream);}
.ui-tile:hover{border-color:var(--gold-bdr);background:var(--bg-3);}
.ui-tile.active{background:var(--gold-bg);border-color:var(--gold-bdr);}
.ui-tile-name{font-size:0.88rem;font-weight:700;color:var(--cream);margin-bottom:3px;}
.ui-tile.active .ui-tile-name{color:var(--gold-lt);}
.ui-tile-desc{font-size:0.72rem;color:var(--cream-faint);line-height:1.45;}

/* ═══ v160-wip-27j: PALETTE PICKER ═══════════════════════════════════════
   Curated 4-color palettes + Build-your-own HSL editor + saved palettes.
   Each palette = {bg, accent, text, border}. applyPalette() writes to
   --bg, --gold, --cream, --border-mid CSS vars and persists. ═════════ */
.pal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
  margin-bottom:14px;
}
.pal-tile{
  position:relative;
  background:var(--bg-2);
  border:1.5px solid var(--border-mid);
  border-radius:12px;
  padding:0;overflow:hidden;
  cursor:pointer;
  transition:all 0.18s ease;
  font-family:var(--font);
  text-align:left;
  color:var(--cream);
  display:flex;flex-direction:column;
}
.pal-tile:hover{
  border-color:var(--gold-bdr);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.pal-tile.active{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(212,148,14,0.3),0 6px 16px rgba(0,0,0,0.4);
}
.pal-tile-swatch{
  display:flex;height:46px;
}
.pal-tile-swatch span{flex:1;}
.pal-tile-meta{padding:8px 11px 10px;}
.pal-tile-name{
  font-size:0.84rem;font-weight:700;color:var(--cream);
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  margin-bottom:2px;
}
.pal-tile-name .pal-check{
  color:var(--gold-lt);font-size:0.78rem;
}
.pal-tile-desc{
  font-size:0.7rem;color:var(--cream-faint);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.pal-tile-tag{
  position:absolute;top:6px;right:6px;
  background:rgba(0,0,0,0.4);color:var(--cream-faint);
  font-size:0.62rem;font-weight:600;
  padding:2px 6px;border-radius:6px;
  letter-spacing:0.04em;text-transform:uppercase;
}
.pal-tile.saved .pal-tile-tag{
  background:var(--gold-bg);color:var(--gold-lt);
}
.pal-tile-del{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,0.5);color:#ff8a8a;
  border:1px solid rgba(255,138,138,0.3);
  font-size:0.85rem;line-height:1;font-weight:700;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  padding:0;
}
.pal-tile.saved:hover .pal-tile-del{display:inline-flex;}
.pal-tile.saved:hover .pal-tile-tag{display:none;}

/* Build-your-own editor */
.pal-editor{
  background:var(--bg-2);
  border:1px solid var(--border-mid);
  border-radius:12px;
  padding:14px 16px;
  margin-top:12px;
}
.pal-editor-h{
  font:700 0.78rem var(--font);
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--gold-lt);
  margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;
}
.pal-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  border-bottom:1px dashed var(--border);
}
.pal-row:last-of-type{border-bottom:none;}
.pal-row-lbl{
  flex:0 0 80px;
  font-size:0.76rem;color:var(--cream);font-weight:600;
}
.pal-row-lbl small{
  display:block;font-size:0.64rem;color:var(--cream-faint);font-weight:500;
}
.pal-swatch-btn{
  width:34px;height:34px;border-radius:8px;
  border:2px solid rgba(255,255,255,0.18);
  cursor:pointer;flex-shrink:0;
  background:var(--c, #888);
  position:relative;
  padding:0;
}
.pal-swatch-btn input[type=color]{
  position:absolute;inset:0;
  opacity:0;cursor:pointer;
  width:100%;height:100%;
}
.pal-hex{
  flex:1;background:var(--bg);
  border:1px solid var(--border-mid);
  color:var(--cream);
  font:600 0.84rem var(--font-mono, ui-monospace, monospace);
  padding:7px 10px;border-radius:6px;
  outline:none;text-transform:uppercase;
  letter-spacing:0.04em;min-width:0;
}
.pal-hex:focus{border-color:var(--gold-bdr);}
.pal-preview{
  margin-top:14px;padding:14px;
  border-radius:10px;
  border:1px solid var(--pp-border, var(--border-mid));
  background:var(--pp-bg, var(--bg));
  color:var(--pp-text, var(--cream));
  font-family:var(--font);
  position:relative;overflow:hidden;
}
.pal-preview-ar{
  font-family:var(--font-quran, var(--font-ar));
  font-size:1.4rem;color:var(--pp-accent, var(--gold-lt));
  text-align:center;margin-bottom:6px;
  direction:rtl;
}
.pal-preview-en{
  font-size:0.78rem;color:var(--pp-text, var(--cream));
  text-align:center;
  opacity:0.85;
}
.pal-preview-row{
  margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;
}
.pal-preview-row span{
  padding:5px 10px;border-radius:14px;
  background:var(--pp-accent-bg, rgba(212,148,14,0.15));
  color:var(--pp-accent, var(--gold-lt));
  border:1px solid var(--pp-accent-bdr, rgba(212,148,14,0.4));
  font-size:0.72rem;font-weight:600;
}
.pal-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;
}
.pal-btn{
  background:var(--gold-bg);
  color:var(--gold-lt);
  border:1px solid var(--gold-bdr);
  padding:8px 14px;border-radius:8px;
  font:600 0.82rem var(--font);
  cursor:pointer;flex:1;min-width:0;
  transition:all 0.15s;
}
.pal-btn:hover{background:rgba(212,148,14,0.22);}
.pal-btn.ghost{
  background:transparent;color:var(--cream-dim);border-color:var(--border-mid);
}
.pal-btn.ghost:hover{border-color:var(--gold-bdr);color:var(--cream);}
.pal-btn.danger{color:#ff8a8a;border-color:rgba(255,138,138,0.3);background:rgba(255,138,138,0.06);}
.pal-name-inp{
  flex:1;min-width:0;
  background:var(--bg);
  border:1px solid var(--border-mid);
  color:var(--cream);
  padding:8px 12px;border-radius:8px;
  font:600 0.82rem var(--font);outline:none;
}
.pal-name-inp:focus{border-color:var(--gold-bdr);}
.pal-contrast-warn{
  margin-top:8px;font-size:0.72rem;
  color:#ff8a8a;
  background:rgba(255,138,138,0.08);
  border:1px solid rgba(255,138,138,0.25);
  border-radius:6px;
  padding:6px 9px;
  display:none;
}
.pal-contrast-warn.show{display:block;}
.pal-contrast-ok{
  margin-top:8px;font-size:0.72rem;
  color:#9be8b5;
}

/* 25 design-system themes live in shared-themes.css (linked in <head>). */

/* ═══ Today tab — Clean B (verse-led, big spacious cards) ═══ */
.t2-greet{font-size:0.8rem;color:var(--cream-dim);margin-bottom:20px;}
.t2-greet b{color:var(--gold-lt);font-weight:700;}

.t2-card{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:16px;text-decoration:none;color:inherit;display:block;}
.t2-card-l{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream-dim);font-weight:700;margin-bottom:12px;}

/* Hero card — verse-led */
.t2-hero{background:linear-gradient(135deg,rgba(64,196,204,0.07),rgba(212,148,14,0.04));border-color:var(--gold-bdr);padding:28px 24px;}
.t2-hero-l{color:var(--gold-lt);margin-bottom:16px;}
.t2-verse-ar{font-family:var(--font-ar,'Scheherazade New','Amiri',serif);font-size:1.7rem;direction:rtl;text-align:right;line-height:2.15;color:var(--cream);margin-bottom:14px;}
.t2-verse-en{font-size:0.92rem;color:var(--cream-dim);font-style:italic;line-height:1.65;margin-bottom:8px;}
.t2-verse-ref{font-size:0.74rem;color:var(--cream-faint);margin-bottom:18px;}
.t2-hero-work{font-size:0.84rem;color:var(--cream);padding:12px 14px;background:rgba(0,0,0,0.2);border:1px solid var(--border);border-radius:9px;margin-bottom:14px;line-height:1.5;}
.t2-hero-work b{color:var(--gold-lt);font-weight:700;}
.t2-hero-cta{display:block;padding:14px;background:var(--gold);color:var(--bg-1);border-radius:10px;font-weight:700;font-size:0.92rem;text-decoration:none;text-align:center;}

/* Stats — 3 across, spacious */
.t2-stats{display:flex;gap:10px;margin-bottom:16px;}
.t2-stat{flex:1;padding:16px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;text-align:center;text-decoration:none;color:inherit;}
.t2-stat-n{font-size:1.5rem;font-weight:700;line-height:1;color:var(--cream);}
.t2-stat-l{font-size:0.6rem;color:var(--cream-dim);margin-top:6px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;}
.t2-s-streak .t2-stat-n{color:#f4b344;}
.t2-s-master .t2-stat-n{color:var(--mast-light);}
.t2-s-hifz .t2-stat-n{color:#40c4cc;}

/* Duʿāʾ card */
.t2-dua{background:linear-gradient(135deg,rgba(212,148,14,0.05),transparent);border-color:var(--gold-bdr);}
.t2-dua-ar{font-family:var(--font-ar,'Scheherazade New','Amiri',serif);font-size:1.3rem;direction:rtl;text-align:right;color:var(--cream);line-height:1.85;margin-bottom:8px;}
.t2-dua-tr{font-size:0.78rem;color:var(--cream-dim);font-style:italic;}

/* Prayer card — slim */
.t2-prayer{background:linear-gradient(135deg,rgba(26,163,255,0.06),transparent);border:1px dashed var(--border-mid);padding:16px 20px;}
.t2-prayer-txt{font-size:0.9rem;color:var(--cream-dim);line-height:1.6;}
.t2-prayer-txt b{color:var(--sch-sak);font-weight:700;}
.t2-prayer-txt em{color:var(--cream);font-style:normal;font-weight:500;}

/* Memorization bar */
.t2-mem-n{font-size:1.1rem;color:var(--cream);margin-bottom:14px;}
.t2-mem-n b{color:var(--gold-lt);font-weight:700;font-size:1.3rem;}
.t2-mem-bar{height:8px;background:var(--bg-3);border-radius:5px;overflow:hidden;display:flex;margin-bottom:10px;}
.t2-mem-m{background:#1a8040;height:100%;}
.t2-mem-learn{background:var(--gold);height:100%;}
.t2-mem-legend{font-size:0.72rem;color:var(--cream-dim);}

/* Weak spots */
.t2-weak-item{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.85rem;}
.t2-weak-item:last-child{border-bottom:none;padding-bottom:0;}
.t2-weak-ref{color:var(--cream-faint);font-size:0.74rem;min-width:50px;font-variant-numeric:tabular-nums;}
.t2-weak-ar{font-family:var(--font-ar,'Scheherazade New','Amiri',serif);font-size:1.2em;flex:1;color:var(--cream);}
.t2-weak-miss{font-size:0.7rem;color:var(--conf-light);font-weight:700;padding:2px 8px;background:rgba(212,104,46,0.12);border-radius:6px;}

/* Achievements */
.t2-ach-row{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:0.88rem;}
.t2-ach-row:first-of-type{padding-top:0;}
.t2-ach-row:last-child{padding-bottom:0;}
.t2-ach-ic{width:32px;height:32px;border-radius:50%;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;}
.t2-ach-txt{flex:1;color:var(--cream);}
.t2-ach-when{font-size:0.7rem;color:var(--cream-faint);}

/* Hadith/wisdom */
.t2-hadith{background:linear-gradient(135deg,rgba(26,163,255,0.05),transparent);border-color:rgba(79,195,255,0.3);}
.t2-hadith-q{font-size:0.95rem;color:var(--cream);line-height:1.7;font-style:italic;margin-bottom:8px;}
.t2-hadith-src{font-size:0.72rem;color:var(--cream-faint);}


/* ════════════════════════════════════════════════════════════════════════
   ARABIC SUB-MODE STYLES (ported from arabic.html v154 → v155 in-app)
   Chrome rules (.hdr, .brand, .main, .view) stripped — index has its own.
   ════════════════════════════════════════════════════════════════════════ */
/* Arabic-specific additions to :root — base vars come from shared-themes.css */
:root{
  --bg-4:#2d3f5c;
  --border-strong:rgba(255,255,255,0.2);
  /* word status colors (lingq-inspired) */
  --st-new:transparent;
  --st-learning:rgba(240,176,48,0.18);
  --st-known:rgba(26,144,128,0.16);
  --st-mastered:transparent;

  /* v187-isk41 · Mudhish A2 palette · jade + ruby on slate.
     Promoted from per-component hardcoded values to root tokens so the
     palette can be tuned in one place and reused across the Qurʾan-tab
     Memorization Aids panel, the commentary.html Mudhish reader, and
     any future Mudhish-adjacent UI. Theme-independent (Mudhish keeps
     this look regardless of the active site theme). */
  --mud-bg:           #070708;                       /* near-black · card surface (P3 cream) */
  --mud-jade:         #d8c89a;                       /* cream · default canonical phrase */
  --mud-jade-lt:      #ece0bc;                       /* cream-light · active text */
  --mud-jade-bg:      rgba(216,200,154,0.12);
  --mud-jade-bdr:     rgba(216,200,154,0.34);
  --mud-jade-glow:    rgba(216,200,154,0.50);
  --mud-jade-glow-2:  rgba(216,200,154,0.40);
  --mud-ruby:         #c44a64;                       /* variant · exceptions */
  --mud-ruby-lt:      #dc7088;
  --mud-amber:        #f5cc75;                       /* primary anchor · star */
  --mud-amber-glow:   rgba(245,204,117,0.50);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{overscroll-behavior:none;}
/* ========== HEADER ========== */
.back-btn:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
/* Mode tabs */
.mode-tabs{display:flex;gap:2px;padding:0 8px 8px;overflow-x:auto;scrollbar-width:none;}
.mode-tabs::-webkit-scrollbar{display:none;}
.mode-tab{background:transparent;border:none;color:var(--cream-faint);padding:7px 14px;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;flex-shrink:0;}
.mode-tab.active{background:var(--gold-bg);color:var(--gold-lt);}
.mode-tab.locked{opacity:0.35;}
.mode-tab .lbl-short{display:none;}
@media (max-width:520px){
  .mode-tabs{padding:0 4px 8px;gap:1px;justify-content:space-between;}
  .mode-tab{padding:7px 6px;font-size:0.74rem;flex:1;min-width:0;text-align:center;}
  .mode-tab .lbl-full{display:none;}
  .mode-tab .lbl-short{display:inline;}
}
/* v160-wip-27q: surah-bar replaced with inline ghost row. No band. */
.surah-inline{display:flex;align-items:center;gap:10px;padding:10px 14px 6px;background:transparent;border-bottom:none;}
.surah-chip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--gold-bdr);color:var(--cream);padding:5px 12px;border-radius:16px;font-size:0.82rem;cursor:pointer;flex-shrink:0;transition:background 0.15s;}
.surah-chip:hover{background:var(--gold-bg);}
.surah-chip .ar{font-family:var(--font-ar);color:var(--gold-lt);font-weight:700;}
.surah-chip .chev{color:var(--cream-faint);font-size:0.7rem;}
.ayah-counter{font-size:0.72rem;color:var(--cream-faint);margin-left:auto;white-space:nowrap;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;}
/* ========== MAIN ========== */
/* Respect reduced-motion — skip the entrance animation entirely */
/* Mode tab press feedback — matches iOS segmented-control feel */
.mode-tab{
  transition:background 0.18s ease,color 0.18s ease,transform 0.16s cubic-bezier(0.2,1.4,0.4,1);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.mode-tab:active{transform:scale(0.96);}
.mode-tab.active{transform:scale(1);}
/* ========== READ MODE ==========
   v160-wip-27q: Read sub-mode supports 4 selectable layouts (A/B/C/D)
   driven by html[data-read-layout]. A is the default (tightened cards).
   B/C/D selectable in Settings → Reading. .word-tile per-word taps and
   status colors preserved identically across all four. */

/* ── Layout A — Tightened cards (DEFAULT) ──────────────────────────── */
.verse-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;}
.verse-num{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--border);background:rgba(212,148,14,0.04);}
.verse-num-badge{display:inline-flex;align-items:center;gap:7px;font-size:0.7rem;color:var(--cream-faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.verse-num-badge .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--gold-bg);color:var(--gold-lt);border-radius:50%;font-size:0.66rem;font-family:'JetBrains Mono',monospace;font-weight:700;border:1px solid var(--gold-bdr);}
.verse-actions{display:flex;gap:4px;}
.vbtn{background:transparent;border:1px solid var(--gold-bdr);color:var(--gold-lt);padding:3px 8px;border-radius:5px;font-size:0.66rem;cursor:pointer;font-family:var(--font);letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.vbtn:hover{background:var(--gold-bg);}
.vbtn.on{background:var(--gold-bg);}
.word-grid{direction:rtl;padding:12px 12px 8px;display:flex;flex-wrap:wrap;column-gap:6px;row-gap:18px;justify-content:flex-start;}
.word-tile{display:flex;flex-direction:column;align-items:center;padding:10px 11px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background 0.1s;border:1px solid transparent;min-width:56px;overflow:visible;}
.word-tile:active{background:var(--bg-3);}
.word-tile:hover{background:var(--bg-2);}
.word-tile.selected{background:var(--gold-bg);border-color:var(--gold-bdr);}
.word-tile.st-learning{background:var(--st-learning);}
.word-tile.st-known{background:var(--st-known);}
.word-tile.st-mastered{opacity:0.55;}
.word-ar{font-family:var(--font-quran);font-size:1.55rem;color:var(--cream);line-height:1.4;}
.word-en{font-size:0.66rem;color:var(--cream-dim);margin-top:14px;text-align:center;direction:ltr;max-width:130px;line-height:1.4;word-break:normal;overflow-wrap:break-word;}
.word-tile.st-mastered .word-en{display:none;}
.verse-tr{padding:8px 14px 12px;font-size:0.84rem;color:var(--cream-dim);font-style:italic;line-height:1.6;border-top:1px solid var(--border);}
.verse-tafsir{padding:12px 14px 14px;border-top:1px solid var(--border);background:rgba(26,144,128,0.04);display:none;}
.verse-tafsir.open{display:block;}
.tafsir-label{font-size:0.64rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;}
.tafsir-body{font-family:var(--font-ar);font-size:1.2rem;color:var(--cream);direction:rtl;text-align:right;line-height:2.1;}
.tafsir-en-label{font-size:0.72rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:0.1em;margin-top:16px;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.tafsir-en-label .src{color:var(--cream-faint);font-weight:500;text-transform:none;letter-spacing:0;font-size:0.74rem;font-style:italic;}
.tafsir-en-body{font-size:1.02rem;color:var(--cream);line-height:1.85;}

/* ── Layout B — Chromeless rhythm ─────────────────────────────────── */
html[data-read-layout="B"] .verse-card{background:transparent;border:none;border-radius:0;margin-bottom:22px;overflow:visible;}
html[data-read-layout="B"] .verse-num{padding:0 0 4px;background:transparent;border-bottom:none;position:relative;}
html[data-read-layout="B"] .verse-num::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold-bdr),transparent);}
html[data-read-layout="B"] .verse-num-badge .n{background:transparent;}
html[data-read-layout="B"] .word-grid{padding:6px 0 4px;}
html[data-read-layout="B"] .verse-tr{padding:6px 0 6px 14px;border-top:none;border-left:2px solid var(--gold-bdr);font-size:0.92rem;line-height:1.7;max-width:90%;margin:6px 0 0;}
html[data-read-layout="B"] .verse-tafsir{margin-top:8px;border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);}

/* ── Layout C — Verse-as-page (focus mode) ─────────────────────────── */
html[data-read-layout="C"] #av-read{padding:0 8px;}
html[data-read-layout="C"] .verse-card{background:transparent;border:none;border-radius:0;margin-bottom:0;}
html[data-read-layout="C"] .verse-card:not([data-active="1"]){padding:6px 0;text-align:center;cursor:pointer;opacity:0.4;transition:opacity 0.2s;}
html[data-read-layout="C"] .verse-card:not([data-active="1"]):hover{opacity:0.7;}
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-num{padding:0;background:transparent;border-bottom:none;justify-content:center;}
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-num-badge{font-size:0.62rem;color:var(--cream-faint);}
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-num-badge .n{display:none;}
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-actions,
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .word-grid,
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-tr,
html[data-read-layout="C"] .verse-card:not([data-active="1"]) .verse-tafsir{display:none;}
html[data-read-layout="C"] .verse-card[data-active="1"]{padding:14px 8px 18px;border-top:1px solid var(--gold-bdr);border-bottom:1px solid var(--gold-bdr);background:linear-gradient(180deg,rgba(212,148,14,0.04),transparent 80%);margin:8px 0;}
html[data-read-layout="C"] .verse-card[data-active="1"] .verse-num{padding:0 6px 10px;background:transparent;border-bottom:none;justify-content:space-between;}
html[data-read-layout="C"] .verse-card[data-active="1"] .verse-num-badge .n{width:24px;height:24px;font-size:0.72rem;}
html[data-read-layout="C"] .verse-card[data-active="1"] .word-grid{justify-content:center;column-gap:10px;row-gap:24px;padding:14px 8px 8px;}
html[data-read-layout="C"] .verse-card[data-active="1"] .word-tile{padding:12px 14px 14px;}
html[data-read-layout="C"] .verse-card[data-active="1"] .word-ar{font-size:1.7rem;}
html[data-read-layout="C"] .verse-card[data-active="1"] .word-en{font-size:0.7rem;margin-top:16px;}
html[data-read-layout="C"] .verse-card[data-active="1"] .verse-tr{text-align:center;font-size:0.95rem;color:var(--cream);padding:14px 22px 4px;border-top:none;max-width:560px;margin:0 auto;}
.read-c-pos{display:none;}
html[data-read-layout="C"] .read-c-pos{display:flex;justify-content:center;align-items:center;gap:10px;padding:14px 0 4px;font-size:0.7rem;color:var(--cream-faint);font-family:'JetBrains Mono',monospace;}
html[data-read-layout="C"] .read-c-pos .nav{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border-mid);background:var(--bg-1);color:var(--cream-dim);border-radius:50%;cursor:pointer;font-family:var(--font);}
html[data-read-layout="C"] .read-c-pos .nav:hover:not(.dim){border-color:var(--gold-bdr);color:var(--gold-lt);}
html[data-read-layout="C"] .read-c-pos .nav.dim{opacity:0.35;cursor:not-allowed;}

/* ── Layout D — Running list ───────────────────────────────────────── */
html[data-read-layout="D"] .verse-card{background:transparent;border:none;border-radius:0;margin-bottom:0;border-bottom:1px solid var(--border);padding:6px 0 8px;}
html[data-read-layout="D"] .verse-card:last-child{border-bottom:none;}
html[data-read-layout="D"] .verse-num{padding:8px 4px 4px;background:transparent;border-bottom:none;}
html[data-read-layout="D"] .verse-num-badge .n{border-radius:6px;width:24px;height:24px;font-size:0.72rem;}
html[data-read-layout="D"] .word-grid{padding:4px 0 4px;row-gap:16px;}
html[data-read-layout="D"] .verse-tr{padding:4px 4px 4px;border-top:none;font-size:0.82rem;color:var(--cream-faint);}
/* ========== WORD DETAIL SHEET ========== */
.sheet-bkd{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:90;opacity:0;pointer-events:none;transition:opacity 0.22s;}
.sheet-bkd.open{opacity:1;pointer-events:auto;}
/* v188-isk3 · z-index:105 (was 100). Same rationale as .sak-modal —
   the bottom sheet sits one rung above the sticky topbar so a full-
   height drag doesn't get visually clipped by the header. */
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg-1);border-top:1px solid var(--border-mid);border-radius:20px 20px 0 0;z-index:105;max-height:85vh;transform:translateY(100%);transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1);display:flex;flex-direction:column;box-shadow:0 -8px 32px rgba(0,0,0,0.5);}
.sheet.open{transform:translateY(0);}
.sheet-grip{width:40px;height:4px;background:var(--border-mid);border-radius:4px;margin:8px auto 0;flex-shrink:0;}
.sheet-hdr{padding:10px 18px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-shrink:0;}
.sheet-word{font-family:var(--font-quran);font-size:2.6rem;color:var(--gold-lt);direction:rtl;line-height:1.1;}
.sheet-gloss{font-size:0.92rem;color:var(--cream);margin-top:6px;}
.sheet-close{background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream-dim);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;} /* v229-fix-tap-sheet-close: 32×32 → 44×44 */
.sheet-body{overflow-y:auto;padding:14px 18px 24px;flex:1;}
.info-row{display:flex;gap:10px;padding:10px 12px;background:var(--bg-2);border-radius:var(--radius-sm);margin-bottom:8px;align-items:flex-start;}
.info-k{font-size:0.68rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;min-width:60px;padding-top:2px;flex-shrink:0;}
.info-v{font-family:var(--font-ar);font-size:1.1rem;color:var(--cream);flex:1;direction:rtl;text-align:right;}
.info-v.ltr{direction:ltr;text-align:left;font-family:var(--font);font-size:0.92rem;}
.info-v .root-btn{background:var(--gold-bg);border:1px solid var(--gold-bdr);color:var(--gold-lt);padding:4px 10px;border-radius:6px;cursor:pointer;font-family:var(--font-ar);font-size:1rem;font-weight:700;}
.info-v .root-btn:hover{background:rgba(212,148,14,0.2);}
.seg-list{margin-top:8px;}
.seg-label{font-size:0.66rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;margin:16px 0 8px;}
.seg-item{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;}
.seg-ar{font-family:var(--font-ar);font-size:1.25rem;color:var(--cream);direction:rtl;text-align:right;font-weight:700;}
.seg-desc{font-size:0.84rem;color:var(--cream-dim);direction:ltr;text-align:left;margin-top:4px;font-family:var(--font);font-style:italic;}
.seg-meta{font-size:0.72rem;color:var(--cream-faint);margin-top:4px;font-family:var(--font);}
.status-row{display:flex;gap:6px;margin:14px 0 6px;}
.status-btn{flex:1;padding:10px 6px;border:1px solid var(--border-mid);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg-2);color:var(--cream-dim);font-size:0.76rem;font-weight:600;font-family:var(--font);text-align:center;}
.status-btn .em{display:block;font-size:1.1rem;margin-bottom:2px;}
.status-btn.active[data-s="new"]{background:var(--bg-3);color:var(--cream);border-color:var(--border-strong);}
.status-btn.active[data-s="learning"]{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.status-btn.active[data-s="known"]{background:var(--teal-bg);color:#80e0d0;border-color:var(--teal-bdr);}
.status-btn.active[data-s="mastered"]{background:var(--green-bg);color:var(--mast-light);border-color:var(--green-bdr);}
.status-hint{font-size:0.72rem;color:var(--cream-faint);text-align:center;margin-top:4px;font-style:italic;}
/* ========== SURAH PICKER MODAL ========== */
.picker-bkd{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.picker-bkd.open{display:flex;}
.picker{background:var(--bg);border-top:1px solid var(--gold-bdr);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 -8px 32px rgba(0,0,0,0.5);}
.picker-grip{width:40px;height:4px;background:var(--border-mid);border-radius:4px;margin:8px auto 0;}
.picker-hdr{padding:10px 14px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.picker-title{font-size:0.92rem;font-weight:700;color:var(--cream);flex:1;}
.picker-search{flex:1;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:8px 12px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.88rem;}
.picker-body{overflow-y:auto;padding:6px;}
.surah-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;}
.surah-row:hover{background:var(--bg-2);}
.surah-row.active{background:var(--gold-bg);border-color:var(--gold-bdr);}
.surah-row-n{font-size:0.72rem;color:var(--cream-faint);width:26px;text-align:center;font-weight:600;}
.surah-row-ar{font-family:var(--font-ar);font-size:1.1rem;color:var(--cream);direction:rtl;flex:1;}
.surah-row-en{font-size:0.8rem;color:var(--cream-dim);}
.surah-row-cnt{font-size:0.68rem;color:var(--cream-faint);}
/* ========== PLACEHOLDERS FOR OTHER MODES ========== */
.coming-soon{text-align:center;padding:60px 20px;color:var(--cream-dim);}
.cs-icon{font-size:3rem;margin-bottom:14px;opacity:0.5;}
.cs-title{font-size:1.1rem;font-weight:700;color:var(--cream);margin-bottom:6px;}
.cs-desc{font-size:0.85rem;line-height:1.7;max-width:320px;margin:0 auto;}
/* ========== LOADING ========== */
.loading{text-align:center;padding:40px;color:var(--cream-faint);font-size:0.88rem;}
.loading .sp{display:inline-block;width:24px;height:24px;border:2px solid var(--border-mid);border-top-color:var(--gold);border-radius:50%;animation:sp 0.8s linear infinite;margin-bottom:10px;}
@keyframes sp{to{transform:rotate(360deg);}}
/* ========== ROOT EXPLORER ========== */
.roots-hdr{margin-bottom:14px;}
.roots-title{font-size:1.1rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.roots-sub{font-size:0.82rem;color:var(--cream-faint);margin-bottom:12px;line-height:1.5;}
.roots-search{width:100%;background:var(--bg-1);border:1px solid var(--border-mid);color:var(--cream);padding:10px 14px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;margin-bottom:10px;}
.roots-search::placeholder{color:var(--cream-faint);}
.roots-search.ar{font-family:var(--font-ar);font-size:1.1rem;direction:rtl;}
.root-section-label{font-size:0.68rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin:14px 0 8px;}
.root-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.root-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:all 0.12s;}
.root-card:hover{border-color:var(--gold-bdr);}
.root-card-ar{font-family:var(--font-ar);font-size:1.15rem;color:var(--gold-lt);direction:rtl;font-weight:700;}
.root-card-cnt{font-size:0.7rem;color:var(--cream-faint);}
.root-detail-hdr{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.root-detail-back{background:transparent;border:none;color:var(--cream-faint);font-size:0.82rem;cursor:pointer;padding:0;margin-bottom:8px;}
.root-detail-back:hover{color:var(--gold-lt);}
.root-detail-ar{font-family:var(--font-ar);font-size:2rem;color:var(--gold-lt);direction:rtl;font-weight:700;letter-spacing:0.1em;}
.root-detail-meta{font-size:0.8rem;color:var(--cream-dim);margin-top:4px;}
.lem-group{margin-bottom:16px;}
.lem-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;}
.lem-header-ar{font-family:var(--font-ar);font-size:1.1rem;color:var(--cream);direction:rtl;font-weight:700;}
.lem-count{font-size:0.7rem;color:var(--cream-faint);}
.occ-list{display:flex;flex-direction:column;gap:4px;}
.occ-row{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.1s;}
.occ-row:hover{border-color:var(--gold-bdr);background:var(--bg-2);}
.occ-ref{font-size:0.7rem;color:var(--cream-faint);font-weight:600;min-width:62px;}
.occ-ar{font-family:var(--font-quran);font-size:1.1rem;color:var(--cream);direction:rtl;flex:1;text-align:right;}
/* ========== FLASHCARDS ========== */
.fc-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.fc-title{font-size:1.05rem;font-weight:700;color:var(--cream);}
.fc-stats{font-size:0.78rem;color:var(--cream-faint);display:flex;gap:10px;}
.fc-stats span{display:inline-flex;align-items:center;gap:3px;}
.fc-stats .due{color:var(--gold-lt);}
.fc-card{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:24px 18px;min-height:280px;display:flex;flex-direction:column;gap:14px;}
.fc-ayah-ctx{font-family:var(--font-quran);font-size:1.2rem;color:var(--cream-dim);direction:rtl;text-align:center;line-height:1.9;padding:10px 6px;background:var(--bg-2);border-radius:var(--radius-sm);}
.fc-ayah-ctx .tgt{color:var(--gold-lt);font-weight:700;padding:2px 6px;background:var(--gold-bg);border-radius:4px;}
.fc-word{font-family:var(--font-quran);font-size:3rem;color:var(--gold-lt);direction:rtl;text-align:center;font-weight:700;line-height:1.2;}
.fc-reveal-btn{background:var(--bg-3);border:1px solid var(--border-mid);color:var(--cream-dim);padding:10px 20px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.88rem;font-family:var(--font);font-weight:600;align-self:center;}
.fc-reveal-btn:hover{border-color:var(--gold-bdr);color:var(--gold-lt);}
.fc-answer{display:none;text-align:center;}
.fc-answer.open{display:block;}
.fc-gloss{font-size:1.1rem;color:var(--cream);font-weight:600;margin-bottom:6px;}
.fc-morph{font-size:0.82rem;color:var(--cream-dim);font-style:italic;margin-bottom:4px;}
.fc-root{font-family:var(--font-ar);font-size:0.95rem;color:var(--gold-lt);}
.fc-grade-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.fc-grade{padding:10px 4px;border:1px solid var(--border-mid);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg-2);color:var(--cream);font-size:0.82rem;font-weight:600;font-family:var(--font);text-align:center;}
.fc-grade:hover{background:var(--bg-3);}
.fc-grade .interval{display:block;font-size:0.66rem;color:var(--cream-faint);margin-top:2px;font-weight:500;}
.fc-grade.again{background:rgba(192,72,40,0.12);border-color:rgba(192,72,40,0.3);color:var(--conf-light);}
.fc-grade.hard{background:rgba(240,176,48,0.10);border-color:rgba(240,176,48,0.3);color:var(--gold-lt);}
.fc-grade.good{background:rgba(26,144,128,0.12);border-color:rgba(26,144,128,0.3);color:#80e0d0;}
.fc-grade.easy{background:rgba(26,128,64,0.14);border-color:rgba(26,128,64,0.4);color:var(--mast-light);}
.fc-empty{text-align:center;padding:50px 20px;color:var(--cream-dim);}
.fc-empty .ico{font-size:2.5rem;opacity:0.5;margin-bottom:14px;}
/* Word Bank Game tiles — two-column matching layout */
.wbg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:600px;margin:0 auto;}
.wbg-col{display:flex;flex-direction:column;gap:8px;}
.wbg-col-h{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;text-align:center;padding-bottom:5px;border-bottom:1px solid var(--border);}
.wbg-tile{background:var(--bg-1);border:1px solid var(--border-mid);color:var(--cream);padding:14px 12px;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.92rem;transition:all 0.15s;text-align:center;min-height:54px;display:flex;align-items:center;justify-content:center;}
.wbg-tile.ar{font-family:var(--font-quran);font-size:1.3rem;direction:rtl;}
.wbg-tile:hover:not(.matched){background:var(--bg-2);border-color:var(--gold-bdr);}
.wbg-tile.selected{background:var(--gold-bg);border-color:var(--gold);color:var(--gold-lt);}
.wbg-tile.matched{opacity:0.25;cursor:default;background:rgba(26,128,64,0.1);border-color:#5fa888;color:var(--mast-light);}
.wbg-tile.wrong{background:rgba(192,72,40,0.18);border-color:#c04828;animation:wbgShake 0.4s;}
@keyframes wbgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* ========== GAMES ========== */
.gm-hdr{margin-bottom:14px;}
.gm-title{font-size:1.1rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.gm-sub{font-size:0.82rem;color:var(--cream-faint);line-height:1.5;}
/* v160 Turn 8: Single flat grid (Vocab/Grammar section split removed) and a
   data-game-view attribute on #av-games drives three layouts:
     • rows    — wide horizontal cards (default, fixes the flex-wrap overlap
                  bug from wip-9 where .desc with flex-basis:100% sat on top
                  of .name because the parent had no flex-wrap)
     • squares — compact 2×2 tiles, name only
     • list    — single-line rows, max density
   Each view scopes itself with [data-game-view="..."] so the variants are
   fully independent. The chevron node is shared markup but only visible in
   the list view. The Lantern + Astrolabe theme overrides in shared-themes.css
   stay scoped under [data-game-view="rows"] so the new variants come through
   the same on every theme. */
.gm-grid{display:flex;flex-direction:column;gap:8px;}

/* ─── default tile reset (so view-specific rules can fully control) ─── */
.gm-tile{
  position:relative;background:var(--bg-1);border:1px solid var(--border-mid);
  border-radius:var(--radius);cursor:pointer;
  transition:all 0.2s ease;
  display:flex;align-items:center;
}
.gm-tile:hover{border-color:var(--gold-bdr);}
.gm-tile .ico{flex-shrink:0;}
.gm-tile .name{color:var(--cream);}
.gm-tile .desc{font-size:0.78rem;color:var(--cream-faint);line-height:1.4;}
.gm-tile .best{font-size:0.66rem;color:var(--gold-lt);font-weight:600;letter-spacing:0.04em;}
.gm-tile .chev{display:none;color:var(--cream-faint);font-size:1.1rem;line-height:1;flex-shrink:0;}

/* ════ View: ROWS (default) ════ */
[data-game-view="rows"] .gm-grid{display:flex;flex-direction:column;gap:8px;}
[data-game-view="rows"] .gm-tile{
  flex-wrap:wrap;column-gap:14px;row-gap:4px;padding:12px 14px;
  align-items:center;
}
[data-game-view="rows"] .gm-tile:hover{transform:translateY(-1px);}
[data-game-view="rows"] .gm-tile .ico{
  width:44px;height:44px;border-radius:12px;
  background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
[data-game-view="rows"] .gm-tile .name{
  flex:1;min-width:0;font-size:1rem;font-weight:700;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
[data-game-view="rows"] .gm-tile .best{
  flex-shrink:0;background:var(--gold-bg);border:1px solid var(--gold-bdr);
  padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:0.06em;
}
[data-game-view="rows"] .gm-tile .desc{
  flex-basis:100%;margin-left:58px;     /* aligns under the name, past the icon */
}

/* ════ View: SQUARES ════ */
[data-game-view="squares"] .gm-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media (min-width:520px){
  [data-game-view="squares"] .gm-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}
[data-game-view="squares"] .gm-tile{
  flex-direction:column;justify-content:center;align-items:center;
  padding:18px 12px;text-align:center;gap:10px;aspect-ratio:1.35/1;overflow:hidden;
}
[data-game-view="squares"] .gm-tile:hover{transform:translateY(-2px);}
[data-game-view="squares"] .gm-tile .ico{
  width:46px;height:46px;border-radius:14px;background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
[data-game-view="squares"] .gm-tile .name{
  font-size:0.98rem;font-weight:700;line-height:1.2;
}
[data-game-view="squares"] .gm-tile .name .ar-inline{
  display:block;margin-left:0;margin-top:3px;font-size:0.82rem;
}
[data-game-view="squares"] .gm-tile .desc{display:none;}
[data-game-view="squares"] .gm-tile .best{
  position:absolute;top:8px;right:8px;
  background:var(--bg-2);border:1px solid var(--gold-bdr);
  padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:0.06em;
}

/* ════ View: LIST ════ */
[data-game-view="list"] .gm-grid{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
[data-game-view="list"] .gm-tile{
  background:transparent;border:none;border-radius:0;
  border-bottom:1px solid var(--border);
  padding:12px 4px;gap:14px;
}
[data-game-view="list"] .gm-tile:last-child{border-bottom:none;}
[data-game-view="list"] .gm-tile:hover{background:var(--gold-bg);transform:none;}
[data-game-view="list"] .gm-tile .ico{
  width:36px;height:36px;border-radius:10px;background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
[data-game-view="list"] .gm-tile .name{
  flex:1;min-width:0;font-size:1rem;font-weight:700;
}
[data-game-view="list"] .gm-tile .desc{display:none;}
[data-game-view="list"] .gm-tile .best{
  flex-shrink:0;background:transparent;border:none;padding:0;
  font-variant-numeric:tabular-nums;
}
[data-game-view="list"] .gm-tile .chev{display:block;}

.gm-back{background:transparent;border:none;color:var(--cream-faint);font-size:0.82rem;cursor:pointer;padding:0;margin-bottom:14px;}
.gm-back:hover{color:var(--gold-lt);}
.gm-hud{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:14px;}
.gm-hud-stat{font-size:0.78rem;color:var(--cream-faint);}
.gm-hud-stat b{color:var(--cream);font-size:0.88rem;font-weight:700;margin-right:3px;}
.gm-hud-stat.score b{color:var(--gold-lt);}
.gm-hud-stat.streak b{color:var(--mast-light);}
.gm-hud-stat.time b{color:#80e0d0;}
/* Match game */
.match-board{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.match-col-label{font-size:0.68rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;text-align:center;}
.match-col{display:flex;flex-direction:column;gap:6px;}
.match-tile{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:14px 10px;cursor:pointer;text-align:center;transition:all 0.15s;min-height:54px;display:flex;align-items:center;justify-content:center;}
.match-tile.ar{font-family:var(--font-quran);font-size:1.4rem;color:var(--cream);direction:rtl;}
.match-tile.en{font-size:0.9rem;color:var(--cream-dim);}
.match-tile:hover{border-color:var(--gold-bdr);}
.match-tile.selected{background:var(--gold-bg);border-color:var(--gold-bdr);color:var(--gold-lt);}
.match-tile.correct{background:var(--green-bg);border-color:var(--green-bdr);color:var(--mast-light);pointer-events:none;opacity:0.65;}
.match-tile.wrong{background:var(--rust-bg);border-color:var(--rust-bdr);animation:shake 0.3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
/* Cloze / Pattern */
.qz-card{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:18px;margin-bottom:14px;}
.qz-prompt{font-size:0.82rem;color:var(--cream-faint);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.qz-ayah{font-family:var(--font-quran);font-size:1.4rem;color:var(--cream);direction:rtl;text-align:center;line-height:2;padding:14px 6px;background:var(--bg-2);border-radius:var(--radius-sm);}
.qz-blank{display:inline-block;min-width:60px;padding:2px 10px;background:var(--gold-bg);border:2px dashed var(--gold-bdr);border-radius:6px;color:var(--gold-lt);font-weight:700;margin:0 4px;}
.qz-focus{font-family:var(--font-quran);font-size:3rem;color:var(--gold-lt);font-weight:700;text-align:center;padding:18px 0 6px;}
.qz-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.qz-choice{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:14px 10px;cursor:pointer;text-align:center;transition:all 0.15s;min-height:56px;display:flex;align-items:center;justify-content:center;}
.qz-choice.ar{font-family:var(--font-quran);font-size:1.3rem;color:var(--cream);direction:rtl;}
.qz-choice:not(.locked):hover{border-color:var(--gold-bdr);}
.qz-choice.correct{background:var(--green-bg);border-color:var(--green-bdr);color:var(--mast-light);}
.qz-choice.wrong{background:var(--rust-bg);border-color:var(--rust-bdr);color:var(--conf-light);}
.qz-choice.locked{pointer-events:none;}
.qz-feedback{margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm);font-size:0.88rem;display:none;}
.qz-feedback.show{display:block;}
.qz-feedback.right{background:var(--green-bg);color:var(--mast-light);border:1px solid var(--green-bdr);}
.qz-feedback.wrong{background:var(--rust-bg);color:var(--conf-light);border:1px solid var(--rust-bdr);}
.qz-next{width:100%;padding:12px;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);cursor:pointer;font-size:0.9rem;font-weight:700;font-family:var(--font);margin-top:10px;}
.qz-next:hover{background:rgba(212,148,14,0.18);}
/* Results */
.gm-results{text-align:center;padding:40px 20px;}
.gm-results .hero{font-size:3rem;margin-bottom:14px;}
.gm-results .title{font-size:1.3rem;font-weight:700;color:var(--cream);margin-bottom:6px;}
.gm-results .score-big{font-size:2.2rem;font-weight:700;color:var(--gold-lt);margin:14px 0;}
.gm-results .stat-row{display:flex;justify-content:center;gap:18px;color:var(--cream-dim);font-size:0.88rem;margin-bottom:18px;}
.gm-results .stat-row b{color:var(--cream);font-weight:700;}
/* ========== PROGRESS ========== */
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;}
.pg-stat{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 10px;text-align:center;}
.pg-stat .n{font-size:1.4rem;font-weight:700;color:var(--cream);line-height:1;margin-bottom:4px;}
.pg-stat .l{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.pg-stat.learning .n{color:var(--gold-lt);}
.pg-stat.known .n{color:#80e0d0;}
.pg-stat.mastered .n{color:var(--mast-light);}
.pg-heat-label{font-size:0.68rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;}
.pg-heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:3px;margin-bottom:16px;}
.pg-cell{aspect-ratio:1;border-radius:4px;background:var(--bg-1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.64rem;font-weight:600;color:var(--cream-faint);cursor:pointer;transition:all 0.1s;}
.pg-cell:hover{transform:scale(1.15);z-index:2;position:relative;border-color:var(--gold);}
.pg-legend{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--cream-faint);justify-content:center;margin-top:4px;}
.pg-legend .scale{display:flex;gap:2px;}
.pg-legend .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--border);}
/* ========== TOAST ========== */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg-1);border:1px solid var(--gold-bdr);color:var(--gold-lt);padding:10px 16px;border-radius:20px;font-size:0.84rem;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,0.5);z-index:150;transition:transform 0.3s;}
.toast.open{transform:translateX(-50%) translateY(0);}
/* ========== RESPONSIVE ========== */
@media (max-width:520px){
  .mode-tab{padding:6px 10px;font-size:0.76rem;}
  .mode-tabs{gap:0;padding:0 6px 8px;}
  .hdr-top{padding:8px 10px;}
  .back-btn{padding:6px 10px;font-size:0.78rem;}
  .brand-ar{font-size:1.05rem;}
  .brand-en{font-size:0.64rem;}
  .hdr-spacer{width:56px;}
  .surah-inline{padding:8px 10px 4px;}
  .main{padding:10px;}
  .word-ar{font-size:1.45rem;}
  .word-en{font-size:0.65rem;max-width:110px;}
  .verse-num{padding:8px 10px;}
  .word-grid{padding:14px 10px 8px;gap:5px;row-gap:10px;}
  .verse-tr{padding:0 10px 12px;}
  .verse-tr{margin:0 10px;}
}
@media (min-width:640px){
  .word-ar{font-size:1.9rem;}
  .word-en{font-size:0.72rem;max-width:130px;}
  .sheet{left:auto;right:20px;bottom:20px;top:auto;width:420px;max-height:calc(100vh - 40px);border-radius:var(--radius);border:1px solid var(--border-mid);transform:translateY(calc(100% + 40px));}
  .sheet.open{transform:translateY(0);}
}
/* 25 design-system themes live in shared-themes.css (linked in <head>). */

/* ════════════════════════════════════════════════════════════════════════
   PATTERN D SUBNAV (Reading / Study / Practice toggle)
   ════════════════════════════════════════════════════════════════════════ */
.subnav-arabic{display:none;background:rgba(64,196,204,0.04);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.subnav-arabic.show{display:block;}
.subnav-toggle-row{display:flex;justify-content:center;padding:8px 14px 0;}
.subnav-toggle-pill{display:inline-flex;background:var(--bg-1);border:1px solid var(--border-mid);border-radius:99px;padding:3px;gap:0;}
.subnav-toggle-btn{background:transparent;border:none;color:var(--cream-faint);padding:6px 18px;border-radius:99px;font-size:0.78rem;font-weight:600;cursor:pointer;font-family:var(--font);letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent;}
.subnav-toggle-btn.active{background:var(--gold-bg);color:var(--gold-lt);}
.subnav-toggle-btn.theory.active{background:var(--gold-bg);color:var(--gold-lt);}
.subnav-toggle-btn .ar{font-family:var(--font-ar);font-size:0.88rem;}
.subnav-tabs{display:flex;gap:2px;padding:6px 14px 8px;overflow-x:auto;scrollbar-width:none;justify-content:center;flex-wrap:wrap;}
.subnav-tabs::-webkit-scrollbar{display:none;}
.subnav-tab{background:transparent;border:none;color:var(--cream-faint);padding:6px 12px;border-radius:var(--radius-sm);font-size:0.78rem;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent;}
.subnav-tab.active{background:var(--gold-bg);color:var(--gold-lt);}
.subnav-tab.theory.active{background:var(--gold-bg);color:var(--gold-lt);}
.subnav-tab .ar{font-family:var(--font-ar);font-size:0.86rem;}
.subnav-tab .badge{font-size:0.6rem;color:var(--cream-faint);background:var(--bg-2);padding:1px 5px;border-radius:8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
@media (max-width:520px){
  .subnav-toggle-btn{padding:6px 12px;font-size:0.72rem;}
  .subnav-tab{padding:6px 8px;font-size:0.72rem;}
  .subnav-tab .ar{display:none;}
}

/* AV-VIEW: arabic sub-views, separate from .view to avoid showView() collision */
.av-view{display:none;max-width:720px;margin:0 auto;padding:14px;}
.av-view.active{display:block;animation:av-view-enter 0.26s cubic-bezier(0.22,0.61,0.36,1);}
@keyframes av-view-enter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.av-view.active{animation:none;}}

/* Context strip — shown when arrived from Hifz word-study link */
.av-ctx-strip{display:none;background:var(--bg-2);border-bottom:1px solid var(--border);padding:8px 14px;font-size:0.78rem;color:var(--cream-dim);max-width:720px;margin:0 auto;border-radius:0 0 var(--radius-sm) var(--radius-sm);}
.av-ctx-strip.show{display:flex;align-items:center;gap:10px;}
.av-ctx-strip a{color:var(--gold-lt);text-decoration:none;font-weight:600;}
.av-ctx-strip a:hover{text-decoration:underline;}

/* Surah-bar inside the merged shell — was sticky under old header, now lives inside view-arabic */
/* v160-wip-27q: full-bleed margin removed — bar is gone, replaced by inline .surah-row */

/* Theory mode placeholder bodies */
.av-theory-placeholder{padding:40px 20px;text-align:center;color:var(--cream-faint);}
.av-theory-placeholder .ico{font-size:2.2rem;margin-bottom:12px;opacity:0.6;}
.av-theory-placeholder h3{font-size:1.1rem;color:var(--cream);font-weight:700;margin-bottom:8px;}
.av-theory-placeholder p{font-size:0.9rem;line-height:1.7;max-width:380px;margin:0 auto 6px;}
.av-theory-placeholder .ar{font-family:var(--font-ar);font-size:1.4rem;color:var(--gold-lt);margin-bottom:10px;display:block;}

/* v160-wip-10: proper "coming soon" pages for Morphology + Grammar.
   These replace the bare three-line placeholders with: a halo'd hero,
   a "what's coming" card, a "in the meantime" CTA strip pointing to
   tabs that DO work today, and a small footer note. Designed to feel
   like a planned chapter, not a 404. Uses existing theme tokens so it
   inherits Cliffs/Lantern/Astrolabe + every color preset. */
.av-soon{padding:22px 8px 36px;text-align:center;color:var(--cream-dim);max-width:540px;margin:0 auto;}
.av-soon-ar{display:block;font-family:var(--font-ar);font-size:1.6rem;color:var(--gold);margin-bottom:8px;letter-spacing:0.02em;}
.av-soon-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-bg) 0%, transparent 70%);
  font-size:2rem;margin-bottom:14px;position:relative;
}
.av-soon-ico::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed var(--gold-bdr);opacity:0.5;
}
.av-soon-h{font-size:1.25rem;color:var(--cream);font-weight:700;margin:0 0 8px;letter-spacing:0.005em;}
.av-soon-lede{font-size:0.92rem;line-height:1.6;color:var(--cream-dim);max-width:440px;margin:0 auto 22px;}

.av-soon-card{
  background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);
  padding:16px 18px;text-align:left;margin:0 auto 18px;
}
.av-soon-card-h{
  font-size:0.72rem;font-weight:700;color:var(--gold-lt);
  text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;
}
.av-soon-list{list-style:none;padding:0;margin:0;}
.av-soon-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:0.86rem;line-height:1.55;color:var(--cream-dim);
  padding:5px 0;
}
.av-soon-list li em{color:var(--cream);font-style:italic;font-weight:500;}
.av-soon-bullet{color:var(--gold);font-weight:700;flex-shrink:0;font-size:1rem;line-height:1.4;}

.av-soon-meanwhile{margin:0 auto 16px;text-align:left;}
.av-soon-meanwhile-h{
  font-size:0.72rem;font-weight:700;color:var(--cream-faint);
  text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;text-align:center;
}
.av-soon-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.av-soon-btn{
  background:var(--gold-bg);border:1px solid var(--gold-bdr);color:var(--gold-lt);
  padding:9px 14px;border-radius:999px;font-size:0.85rem;font-weight:600;
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all 0.18s ease;
}
.av-soon-btn:hover{background:var(--gold);color:#1a1208;border-color:var(--gold);transform:translateY(-1px);}
.av-soon-btn .ar{font-family:var(--font-ar);font-size:0.92rem;font-weight:400;opacity:0.85;}
.av-soon-btn-ghost{background:transparent;border-color:var(--border-mid);color:var(--cream-dim);}
.av-soon-btn-ghost:hover{background:var(--bg-2);color:var(--cream);border-color:var(--border-mid);}

.av-soon-foot{
  font-size:0.74rem;color:var(--cream-faint);margin-top:18px;
  font-style:italic;letter-spacing:0.02em;
}

/* v160: .drill-* CSS rules removed (DOM referencing them deleted in Turn 3). */

/* ═══════════════════════════════════════════════════════════════════
   v160-wip-12 · MORPHOLOGY (ṣarf) + GRAMMAR (naḥw) tab styles
   All tokens reference the shared theme system — never hardcoded.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared section header (mirrors .roots-hdr in voice) ─────────── */
.mg-hdr{margin-bottom:14px;}
.mg-hdr-title{font-size:1.1rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.mg-hdr-sub{font-size:0.82rem;color:var(--cream-faint);margin-bottom:12px;line-height:1.5;}

/* ── Morphology view-switcher (3 modes) ───────────────────────────── */
.morph-modes{display:flex;gap:6px;margin-bottom:14px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;}
.morph-mode-btn{flex:1;background:transparent;border:none;color:var(--cream-dim);font-family:var(--font);font-size:0.8rem;font-weight:600;padding:8px 6px;border-radius:8px;cursor:pointer;transition:all 0.15s;letter-spacing:0.01em;}
.morph-mode-btn:hover{color:var(--cream);}
.morph-mode-btn.active{background:var(--bg-1);color:var(--gold-lt);box-shadow:0 1px 2px rgba(0,0,0,0.05);}

/* ── Word card grid (surah-morph view) ────────────────────────────── */
.morph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.morph-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 12px 10px;cursor:pointer;transition:all 0.12s;display:flex;flex-direction:column;gap:6px;}
.morph-card:hover{border-color:var(--gold-bdr);transform:translateY(-1px);}
.morph-card-form{font-family:var(--font-ar);font-size:1.55rem;color:var(--cream);direction:rtl;line-height:1.2;text-align:right;font-weight:500;}
.morph-card-root{display:inline-block;font-family:var(--font-ar);font-size:0.78rem;color:var(--gold-lt);background:var(--gold-bg);border:1px solid var(--gold-bdr);padding:2px 9px;border-radius:10px;direction:rtl;align-self:flex-start;letter-spacing:0.04em;}
.morph-card-lemma{font-family:var(--font-ar);font-size:0.92rem;color:var(--cream-dim);direction:rtl;text-align:right;}
.morph-card-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.morph-chip{font-size:0.66rem;color:var(--cream-faint);background:var(--bg-2);border:1px solid var(--border);padding:1px 7px;border-radius:8px;letter-spacing:0.04em;text-transform:uppercase;font-weight:600;}
.morph-chip.case-nom{color:var(--gold-lt);background:var(--gold-bg);border-color:var(--gold-bdr);}
.morph-chip.case-acc{color:#d97a7a;background:rgba(217,122,122,0.08);border-color:rgba(217,122,122,0.28);}
.morph-chip.case-gen{color:#7aa8d9;background:rgba(122,168,217,0.08);border-color:rgba(122,168,217,0.28);}
.morph-chip.verb{color:#d9a07a;background:rgba(217,160,122,0.08);border-color:rgba(217,160,122,0.28);}

/* ── Ayah groups inside surah-morph view ──────────────────────────── */
.morph-ayah-group{margin-bottom:18px;}
.morph-ayah-label{font-size:0.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin:8px 0 8px;display:flex;align-items:center;gap:8px;}
.morph-ayah-label .num{background:var(--gold-bg);border:1px solid var(--gold-bdr);color:var(--gold-lt);padding:1px 8px;border-radius:8px;font-size:0.7rem;}
.morph-ayah-label .jump{margin-left:auto;font-size:0.66rem;color:var(--cream-faint);background:transparent;border:1px solid var(--border-mid);padding:2px 9px;border-radius:8px;cursor:pointer;letter-spacing:0;text-transform:none;font-weight:500;}
.morph-ayah-label .jump:hover{color:var(--cream);border-color:var(--gold-bdr);}

/* ── Verb-form explorer ───────────────────────────────────────────── */
.morph-vf-tabs{display:flex;gap:5px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;}
.morph-vf-tab{background:var(--bg-2);border:1px solid var(--border);color:var(--cream-dim);font-size:0.78rem;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;flex-shrink:0;transition:all 0.12s;letter-spacing:0.04em;}
.morph-vf-tab:hover{color:var(--cream);}
.morph-vf-tab.active{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.morph-vf-pattern{background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:14px;}
.morph-vf-pattern-h{font-size:0.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;font-weight:700;}
.morph-vf-pattern-ar{font-family:var(--font-ar);font-size:1.5rem;color:var(--cream);direction:rtl;text-align:right;line-height:1.4;}
.morph-vf-pattern-meta{font-size:0.78rem;color:var(--cream-faint);margin-top:6px;line-height:1.5;}
.morph-vf-list{display:flex;flex-direction:column;gap:6px;}
.morph-vf-row{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.12s;}
.morph-vf-row:hover{border-color:var(--gold-bdr);}
.morph-vf-row .ref{font-size:0.72rem;color:var(--cream-faint);min-width:90px;font-weight:500;}
.morph-vf-row .ar{font-family:var(--font-ar);font-size:1.15rem;color:var(--cream);direction:rtl;flex:1;text-align:right;}
.morph-vf-row .tense{font-size:0.62rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.06em;background:var(--bg-2);padding:1px 6px;border-radius:6px;border:1px solid var(--border);font-weight:600;}

/* ── Empty state shared across morph views ────────────────────────── */
.morph-empty{text-align:center;padding:32px 16px;color:var(--cream-faint);background:var(--bg-1);border:1px dashed var(--border-mid);border-radius:var(--radius-sm);}
.morph-empty .ar{font-family:var(--font-ar);font-size:1.6rem;color:var(--gold-lt);display:block;margin-bottom:8px;}
.morph-empty .msg{font-size:0.84rem;line-height:1.6;}

/* ═══════════════════════════════════════════════════════════════════
   GRAMMAR (naḥw)
   ═══════════════════════════════════════════════════════════════════ */
.nahw-list{display:flex;flex-direction:column;gap:6px;}
.nahw-row{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all 0.12s;}
.nahw-row:hover{border-color:var(--gold-bdr);transform:translateY(-1px);}
.nahw-row-num{font-size:0.7rem;color:var(--cream-faint);min-width:22px;font-weight:700;font-variant-numeric:tabular-nums;}
.nahw-row-main{flex:1;min-width:0;}
.nahw-row-ar{font-family:var(--font-ar);font-size:1.1rem;color:var(--cream);direction:rtl;text-align:right;line-height:1.3;font-weight:500;margin-bottom:2px;}
.nahw-row-en{font-size:0.85rem;color:var(--cream-dim);font-weight:600;}
.nahw-row-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.nahw-level{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;padding:2px 7px;border-radius:8px;font-weight:700;}
.nahw-level.beginner{color:var(--gold-lt);background:var(--gold-bg);border:1px solid var(--gold-bdr);}
.nahw-level.intermediate{color:#d9a07a;background:rgba(217,160,122,0.1);border:1px solid rgba(217,160,122,0.3);}
.nahw-draft-badge{font-size:0.6rem;color:var(--cream-faint);background:var(--bg-2);border:1px dashed var(--border-mid);padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;}

/* Detail view */
.nahw-detail-back{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:5px 11px;border-radius:8px;cursor:pointer;font-size:0.74rem;font-family:var(--font);font-weight:600;margin-bottom:12px;transition:all 0.12s;}
.nahw-detail-back:hover{color:var(--cream);border-color:var(--gold-bdr);}
.nahw-detail-hdr{margin-bottom:18px;}
.nahw-detail-ar{font-family:var(--font-ar);font-size:1.7rem;color:var(--gold-lt);direction:rtl;text-align:right;line-height:1.3;margin-bottom:4px;font-weight:600;}
.nahw-detail-en{font-size:1.05rem;color:var(--cream);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nahw-detail-summary{font-size:0.92rem;color:var(--cream-dim);line-height:1.65;margin-top:10px;font-style:italic;border-left:3px solid var(--gold-bdr);padding-left:12px;}

.nahw-section{margin-bottom:20px;}
.nahw-section-h{font-size:0.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.nahw-section-h .author-edit{margin-left:auto;background:transparent;border:1px solid var(--border-mid);color:var(--cream-faint);padding:2px 8px;border-radius:8px;font-size:0.66rem;font-family:var(--font);cursor:pointer;letter-spacing:0;text-transform:none;font-weight:500;}
.nahw-section-h .author-edit:hover{color:var(--gold-lt);border-color:var(--gold-bdr);}
.nahw-explanation{font-size:0.92rem;color:var(--cream);line-height:1.7;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;}
.nahw-explanation p{margin:0 0 10px;}
.nahw-explanation p:last-child{margin-bottom:0;}
.nahw-explanation strong{color:var(--gold-lt);}
.nahw-explanation em{color:var(--cream-dim);}
.nahw-explanation code{font-family:var(--font-ar);font-size:1.04em;background:var(--bg-2);padding:1px 5px;border-radius:5px;color:var(--cream);}
.nahw-explanation .nahw-empty-prose{color:var(--cream-faint);font-style:italic;font-size:0.86rem;}

/* Key terms table */
.nahw-terms{display:grid;grid-template-columns:auto 1fr;gap:0;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.nahw-term-ar,.nahw-term-en{padding:10px 14px;border-bottom:1px solid var(--border);font-size:0.88rem;}
.nahw-term-ar{font-family:var(--font-ar);color:var(--cream);direction:rtl;text-align:right;font-weight:500;background:var(--bg-2);min-width:130px;}
.nahw-term-en{color:var(--cream-dim);}
.nahw-term-en .note{font-size:0.78rem;color:var(--cream-faint);display:block;margin-top:2px;}
.nahw-terms > div:nth-last-child(-n+2){border-bottom:none;}

/* Examples */
.nahw-example{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all 0.12s;}
.nahw-example:hover{border-color:var(--gold-bdr);}
.nahw-ex-ref{font-size:0.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nahw-ex-ref .actions{margin-left:auto;display:flex;gap:6px;}
.nahw-ex-ref .actions .btn{font-size:0.64rem;color:var(--cream-faint);background:transparent;border:1px solid var(--border-mid);padding:2px 8px;border-radius:8px;cursor:pointer;letter-spacing:0;text-transform:none;font-weight:500;font-family:var(--font);}
.nahw-ex-ref .actions .btn:hover{color:var(--cream);border-color:var(--gold-bdr);}
.nahw-ex-ar{font-family:var(--font-ar);font-size:1.5rem;color:var(--cream);direction:rtl;text-align:right;line-height:1.7;margin-bottom:6px;}
.nahw-ex-ar .hl{color:var(--gold-lt);border-bottom:2px solid var(--gold);padding-bottom:1px;cursor:pointer;font-weight:600;}
.nahw-ex-tr{font-size:0.84rem;color:var(--cream-dim);line-height:1.5;}
.nahw-ex-note{font-size:0.8rem;color:var(--cream-faint);margin-top:8px;line-height:1.5;border-top:1px dashed var(--border);padding-top:8px;font-style:italic;}

/* See-also pills + morph links */
.nahw-pills{display:flex;flex-wrap:wrap;gap:6px;}
.nahw-pill{font-size:0.76rem;color:var(--cream-dim);background:var(--bg-2);border:1px solid var(--border);padding:5px 12px;border-radius:14px;cursor:pointer;transition:all 0.12s;font-weight:600;}
.nahw-pill:hover{color:var(--gold-lt);border-color:var(--gold-bdr);background:var(--gold-bg);}
.nahw-pill.morph::before{content:"⇄ ";color:var(--gold);font-weight:700;}

/* Author-mode editor */
.nahw-author{background:var(--bg-1);border:2px dashed var(--gold-bdr);border-radius:var(--radius-sm);padding:14px 16px;margin-top:16px;}
.nahw-author-h{font-size:0.74rem;color:var(--gold-lt);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.08em;}
.nahw-author-textarea{width:100%;min-height:240px;background:var(--bg-2);border:1px solid var(--border-mid);border-radius:8px;color:var(--cream);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.78rem;padding:10px 12px;resize:vertical;line-height:1.55;box-sizing:border-box;}
.nahw-author-actions{display:flex;gap:8px;margin-top:10px;}
.nahw-author-btn{background:var(--gold-bg);border:1px solid var(--gold-bdr);color:var(--gold-lt);padding:7px 14px;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.82rem;font-weight:700;}
.nahw-author-btn:hover{background:var(--gold);color:var(--bg-1);}
.nahw-author-btn.ghost{background:transparent;color:var(--cream-dim);border-color:var(--border-mid);font-weight:500;}
.nahw-author-btn.ghost:hover{color:var(--cream);border-color:var(--gold-bdr);background:var(--bg-2);}
.nahw-author-help{font-size:0.74rem;color:var(--cream-faint);margin-top:8px;line-height:1.5;}

/* Draft notice for stub concepts */
.nahw-draft-notice{background:var(--bg-2);border:1px dashed var(--border-mid);border-radius:var(--radius-sm);padding:14px 16px;font-size:0.84rem;color:var(--cream-dim);line-height:1.6;}
.nahw-draft-notice strong{color:var(--gold-lt);}

/* ─── Reference guide pills (Study Guide, Arabic Grammar Guide) ── */
.nahw-guides{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.nahw-guide{background:var(--bg-1);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);overflow:hidden;transition:all 0.15s;}
.nahw-guide:hover{border-color:var(--gold);}
.nahw-guide-pill{width:100%;background:var(--gold-bg);border:none;color:var(--gold-lt);padding:11px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:0.92rem;font-weight:700;text-align:left;transition:background 0.12s;}
.nahw-guide-pill:hover{background:transparent;}
.nahw-guide-pill .ico{font-size:1.15rem;flex-shrink:0;}
.nahw-guide-pill .title{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
.nahw-guide-pill .title .en{color:var(--cream);font-weight:700;font-size:0.95rem;}
.nahw-guide-pill .title .ar{font-family:var(--font-ar);font-size:0.86rem;color:var(--gold-lt);direction:rtl;text-align:left;font-weight:500;}
.nahw-guide-pill .caret{color:var(--cream-faint);font-size:0.8rem;transition:transform 0.2s;flex-shrink:0;}
.nahw-guide.open .nahw-guide-pill .caret{transform:rotate(180deg);color:var(--gold-lt);}
.nahw-guide-body{display:none;padding:6px 18px 18px;border-top:1px solid var(--border);background:var(--bg-1);}
.nahw-guide.open .nahw-guide-body{display:block;animation:nahw-guide-fade 0.22s ease;}
@keyframes nahw-guide-fade{from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:none;}}
.nahw-guide-body p{margin:10px 0;font-size:0.9rem;color:var(--cream);line-height:1.7;}
.nahw-guide-body h4{margin:18px 0 6px;font-size:0.78rem;font-weight:700;color:var(--gold-lt);text-transform:uppercase;letter-spacing:0.08em;}
.nahw-guide-body h4:first-of-type{margin-top:8px;}
.nahw-guide-body strong{color:var(--gold-lt);}
.nahw-guide-body em{color:var(--cream-dim);font-style:italic;}
.nahw-guide-body code{font-family:var(--font-ar),ui-monospace,monospace;background:var(--bg-2);padding:1px 6px;border-radius:5px;color:var(--cream);font-size:0.95em;border:1px solid var(--border);}

/* ═══════════════════════════════════════════════════════════════════
   REVISION MODULE CSS  (inlined from revision.html, v160-wip-14)
   All revision-specific class names prefixed `rv-` to avoid collision.
   .pp-modal-*, .pp-anchors, .pp-btn rules omitted — index.html provides them.
   ═══════════════════════════════════════════════════════════════════ */
.rv-screen{display:none;flex:1;width:100%;max-width:760px;margin:0 auto;padding:24px 18px;}
.rv-screen.active{display:flex;flex-direction:column;}
.rv-picker-title{font-size:1.4rem;font-weight:700;color:var(--cream);margin-bottom:4px;}
.rv-picker-sub{font-size:0.86rem;color:var(--cream-faint);margin-bottom:18px;line-height:1.55;}
@media(max-width:600px){
  .rv-picker-title{font-size:1rem;margin-bottom:2px;}
  .rv-picker-sub{font-size:0.74rem;margin-bottom:10px;line-height:1.45;}
}
/* v160-wip-19: in-page Practice picker — three layout variants (rows / squares /
   list) selected via data-game-view on #rv-screen-picker, mirroring the standalone
   revision.html picker. View choice persists to localStorage under the SAME key
   ('mithlayn_picker_view') so the user's preference is consistent across both
   surfaces. Section headers (Mutashābihāt / Continuity / Internal precision /
   Recall & orientation / Mixed) appear only in rows view. */
.rv-mode-grid{display:flex;flex-direction:column;gap:8px;}
.rv-mode-section-lbl{font-size:0.62rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.14em;padding:14px 4px 8px;display:flex;align-items:center;gap:8px;}
.rv-mode-section-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
.rv-mode-section-lbl:first-child{padding-top:4px;}
/* Base tile — shared structure across all three views. */
.rv-mode-tile{position:relative;background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;}
.rv-mode-tile:hover{border-color:var(--gold-bdr);}
.rv-mode-tile .ico{flex-shrink:0;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gold-lt);}
.rv-mode-tile .name{color:var(--cream);font-weight:700;}
.rv-mode-tile .tag{flex-shrink:0;font-size:0.56rem;background:rgba(212,148,14,0.2);color:var(--gold-lt);padding:1px 6px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.rv-mode-tile .count{flex-shrink:0;font-size:0.66rem;color:var(--gold-lt);font-weight:600;background:var(--gold-bg);border:1px solid var(--gold-bdr);padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:0.06em;font-variant-numeric:tabular-nums;}
.rv-mode-tile .desc{font-size:0.78rem;color:var(--cream-faint);line-height:1.45;}
.rv-mode-tile .chev{display:none;color:var(--cream-faint);font-size:1.1rem;line-height:1;flex-shrink:0;}

/* — ROWS (default) — wide cards with description below the name row. */
#rv-screen-picker[data-game-view="rows"] .rv-mode-grid{display:flex;flex-direction:column;gap:8px;}
#rv-screen-picker[data-game-view="rows"] .rv-mode-tile{flex-wrap:wrap;column-gap:14px;row-gap:4px;padding:12px 14px;}
#rv-screen-picker[data-game-view="rows"] .rv-mode-tile:hover{transform:translateY(-1px);}
#rv-screen-picker[data-game-view="rows"] .rv-mode-tile .ico{width:44px;height:44px;border-radius:12px;font-size:1.2rem;}
#rv-screen-picker[data-game-view="rows"] .rv-mode-tile .name{flex:1;min-width:0;font-size:1rem;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
#rv-screen-picker[data-game-view="rows"] .rv-mode-tile .desc{flex-basis:100%;margin-left:58px;}
@media(min-width:720px){
  #rv-screen-picker[data-game-view="rows"] .rv-mode-tile{padding:14px 16px;}
}

/* — SQUARES — 2×N grid, name only, count + tag float to corners. */
#rv-screen-picker[data-game-view="squares"] .rv-mode-section-lbl{display:none;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:520px){#rv-screen-picker[data-game-view="squares"] .rv-mode-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile{flex-direction:column;justify-content:center;align-items:center;padding:18px 12px;text-align:center;gap:10px;aspect-ratio:1.35/1;overflow:hidden;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile:hover{transform:translateY(-2px);}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile .ico{width:46px;height:46px;border-radius:14px;font-size:1.4rem;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile .name{font-size:0.95rem;line-height:1.2;text-align:center;flex-direction:column;gap:4px;display:flex;align-items:center;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile .desc{display:none;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile .count{position:absolute;top:8px;right:8px;background:var(--bg-2);font-size:0.6rem;padding:2px 6px;}
#rv-screen-picker[data-game-view="squares"] .rv-mode-tile .tag{position:absolute;top:8px;left:8px;}

/* — LIST — single-line dense rows, no description, no group headers. */
#rv-screen-picker[data-game-view="list"] .rv-mode-section-lbl{display:none;}
#rv-screen-picker[data-game-view="list"] .rv-mode-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile{background:transparent;border:none;border-radius:0;border-bottom:1px solid var(--border);padding:12px 4px;gap:14px;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile:last-child{border-bottom:none;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile:hover{background:var(--gold-bg);transform:none;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile .ico{width:36px;height:36px;border-radius:10px;font-size:1.1rem;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile .name{flex:1;min-width:0;font-size:0.98rem;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile .desc{display:none;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile .count{background:transparent;border:none;padding:0;color:var(--cream-faint);text-transform:none;letter-spacing:0;font-size:0.72rem;font-weight:600;}
#rv-screen-picker[data-game-view="list"] .rv-mode-tile .chev{display:block;}

/* — view toggle pill — sits above the grid, mirrors Arabic-tab style. */
.rv-view-toggle{display:flex;background:var(--bg);border:1px solid var(--border-mid);border-radius:10px;padding:3px;margin-bottom:14px;width:fit-content;}
.rv-view-toggle button{padding:5px 11px;background:transparent;border:none;color:var(--cream-faint);font-size:0.74rem;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:7px;transition:color 0.15s,background 0.15s;}
.rv-view-toggle button:hover{color:var(--cream);}
.rv-view-toggle button.active{background:var(--gold-bg);color:var(--gold-lt);box-shadow:inset 0 0 0 1px var(--gold-bdr);}

.rv-setup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.rv-setup-title{font-size:1.25rem;font-weight:700;color:var(--cream);display:flex;align-items:center;gap:8px;}
.rv-setup-sub{font-size:0.84rem;color:var(--cream-faint);margin-bottom:18px;line-height:1.55;}
.rv-option-group{margin-bottom:16px;}
.rv-option-label{font-size:0.72rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;display:block;}
.rv-option-row{display:flex;gap:6px;flex-wrap:wrap;}
.rv-opt-btn{padding:7px 14px;border:1px solid var(--border-mid);border-radius:18px;cursor:pointer;font-size:0.82rem;color:var(--cream-dim);background:var(--bg-1);transition:all 0.15s;font-family:var(--font);}
.rv-opt-btn:hover{color:var(--cream);}
.rv-opt-btn.active{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.range-input-row{display:flex;gap:8px;align-items:center;}
.range-input-row select,.range-input-row input{flex:1;background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream);padding:8px 10px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;}
.range-input-row label{font-size:0.78rem;color:var(--cream-dim);}
.rv-count-note{font-size:0.84rem;color:var(--cream-faint);margin-bottom:12px;}
.rv-start-btn{width:100%;padding:14px;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;font-weight:700;font-family:var(--font);transition:all 0.15s;}
.rv-start-btn:hover{background:rgba(212,148,14,0.18);}
.rv-start-btn:disabled{opacity:0.3;cursor:default;}

.rv-progress-bar-wrap{margin-bottom:12px;}
.rv-progress-meta{display:flex;justify-content:space-between;font-size:0.76rem;color:var(--cream-faint);margin-bottom:5px;}
.rv-progress-bar{height:4px;background:var(--bg-2);border-radius:2px;overflow:hidden;}
.rv-progress-fill{height:100%;background:var(--gold);transition:width 0.3s;}
.rv-score-row{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap;}
.rv-score-pill{font-size:0.8rem;padding:5px 13px;border-radius:12px;font-weight:600;}
.rv-score-pill.correct{background:var(--green-bg);color:#90d0a0;border:1px solid var(--green-bdr);}
.rv-score-pill.review{background:var(--rust-bg);color:var(--conf-light);border:1px solid var(--rust-bdr);}
.rv-score-pill.skip{background:var(--bg-2);color:var(--cream-faint);border:1px solid var(--border-mid);}
.rv-score-pill.lives{background:var(--rust-bg);color:var(--conf-light);border:1px solid var(--rust-bdr);font-size:1rem;}
.rv-score-pill.streak{background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);}
.rv-timer-bar-wrap{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin-bottom:12px;}
.rv-timer-bar{height:100%;background:linear-gradient(to right,var(--green),var(--gold),var(--rust));transition:width 0.1s linear;width:100%;}
.rv-mode-indicator{font-size:0.74rem;color:var(--cream-faint);margin-left:auto;}

.rv-card{background:var(--bg-1);border:1px solid var(--border-mid);border-radius:var(--radius);padding:18px;flex:1;display:flex;flex-direction:column;}
.card-type-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.type-badge{font-size:0.7rem;background:var(--bg-2);color:var(--gold-lt);padding:3px 10px;border-radius:10px;font-weight:600;border:1px solid var(--border-mid);}
.danger-bar-sm{height:3px;flex:1;border-radius:2px;min-width:60px;opacity:0.6;}
.danger-label{font-size:0.74rem;color:var(--cream-faint);}
.streak-pill{font-size:0.65rem;padding:2px 8px;border-radius:8px;background:var(--bg-2);color:var(--cream-dim);border:1px solid var(--border);}
.loc-pill{font-size:0.65rem;padding:2px 8px;border-radius:8px;background:var(--purple-bg);color:#c8a0f0;border:1px solid var(--purple-bdr);}

/* ═══ Sparkle trigger (v99 design, slightly larger) ═══ */
.sparkle-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(135deg,rgba(212,148,14,0.22),rgba(240,176,48,0.12));border:1px solid var(--gold-bdr);color:var(--gold-lt);cursor:pointer;transition:all 0.2s;padding:0;font-family:var(--font);line-height:1;flex-shrink:0;vertical-align:middle;animation:sparkle-glow 2.8s ease-in-out infinite;text-align:center;}
.sparkle-btn:hover{transform:scale(1.08) rotate(8deg);background:linear-gradient(135deg,rgba(240,176,48,0.35),rgba(212,148,14,0.2));box-shadow:0 0 14px rgba(240,176,48,0.4);}
.twin-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border-radius:14px;background:rgba(90,180,130,0.15);border:1px solid rgba(90,180,130,0.42);color:#8ed0a8;cursor:pointer;font-family:var(--font);font-size:0.74rem;font-weight:600;letter-spacing:0.02em;line-height:1;flex-shrink:0;transition:all 0.15s;animation:emerald-glow 2.6s ease-in-out infinite;vertical-align:middle;white-space:nowrap;text-decoration:none;}
.twin-chip:hover{background:rgba(90,180,130,0.24);transform:translateY(-1px);box-shadow:0 2px 10px rgba(90,180,130,0.3);color:#a8dcbe;}
.twin-chip .tw-glyph{font-size:0.88rem;line-height:1;display:inline-block;}
.twin-chip:hover .tw-glyph{animation:tw-bloom 0.6s ease;}
@keyframes tw-bloom{50%{transform:rotate(60deg) scale(1.2);}}
.twin-chip-sm{font-size:0.68rem;padding:3px 9px 3px 7px;gap:5px;}
.twin-chip-sm .tw-glyph{font-size:0.8rem;}
@keyframes emerald-glow{0%,100%{box-shadow:0 0 0 0 rgba(90,180,130,0.18);}50%{box-shadow:0 0 8px 1px rgba(90,180,130,0.3);}}
@keyframes sparkle-glow{0%,100%{box-shadow:0 0 0 0 rgba(240,176,48,0.3);}50%{box-shadow:0 0 10px 1px rgba(240,176,48,0.35);}}
.mushaf-chip{display:inline-flex;align-items:center;gap:5px;font-size:0.68rem;padding:3px 9px;border-radius:10px;background:rgba(104,144,192,0.1);color:#a0b8d0;border:1px solid rgba(104,144,192,0.3);font-weight:600;cursor:pointer;transition:all 0.15s;font-family:var(--font);}
.mushaf-chip:hover{background:rgba(104,144,192,0.2);color:#c0d4e8;}
.mushaf-chip .mushaf-dot-color{width:6px;height:6px;border-radius:50%;display:inline-block;}
.mushaf-chip.zone-u .mushaf-dot-color{background:#d4940e;}
.mushaf-chip.zone-m .mushaf-dot-color{background:#86c1b9;}
.mushaf-chip.zone-l .mushaf-dot-color{background:#c06c40;}

.prompt-label{font-size:0.74rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.09em;font-weight:700;display:block;margin-bottom:6px;}
.shared-phrase{font-family:var(--font-quran);font-size:1.65rem;color:var(--gold-lt);direction:rtl;text-align:center;line-height:2;padding:10px 8px;}
.prompt-sub{font-size:0.82rem;color:var(--cream-dim);line-height:1.55;margin:4px 0 8px;text-align:center;}
.target-ref{font-family:var(--font-ar);font-size:1.12rem;color:var(--cream);text-align:center;margin-top:8px;padding:8px;background:var(--bg-2);border-radius:var(--radius-sm);border:1px solid var(--border);}
.target-ref .en{font-family:var(--font);font-size:0.72rem;color:var(--cream-faint);display:block;margin-top:2px;}

.context-block{background:rgba(128,96,192,0.06);border:1px solid var(--purple-bdr);border-radius:var(--radius-sm);padding:10px 12px;margin:10px 0;}
.context-label{font-size:0.66rem;color:#c8a0f0;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;margin-bottom:6px;}
.context-verse{font-family:var(--font-quran);font-size:1.15rem;color:var(--cream-dim);direction:rtl;text-align:right;line-height:1.85;margin-bottom:4px;}
.context-ref{font-size:0.66rem;color:var(--cream-faint);text-align:right;}

.choices{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.choice-btn{background:var(--bg-2);border:2px solid var(--border-mid);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all 0.15s;text-align:right;font-family:var(--font-ar);font-size:1.35rem;color:var(--cream);direction:rtl;line-height:1.95;width:100%;letter-spacing:0.01em;}
.choice-btn:hover:not(:disabled){border-color:var(--gold-bdr);background:var(--bg-3);}
.choice-btn.loc{font-family:var(--font);font-size:1rem;text-align:left;direction:ltr;}
.choice-btn:disabled{cursor:default;}
.choice-btn.correct{background:var(--green-bg);border-color:var(--green);color:#b8e8c8;}
.choice-btn.wrong{background:var(--rust-bg);border-color:var(--rust);color:#f0a890;}
.choice-btn.revealed{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset;}
.choice-label{display:block;font-family:var(--font);font-size:0.62rem;color:var(--cream-faint);margin-bottom:6px;text-align:left;text-transform:uppercase;letter-spacing:0.08em;}

.cloze-verse{font-family:var(--font-quran);font-size:1.55rem;color:var(--cream);direction:rtl;text-align:center;line-height:2.2;padding:14px 10px;background:var(--bg-2);border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:14px;}
.cloze-blank{display:inline-block;min-width:80px;padding:2px 10px;margin:0 4px;background:var(--gold-bg);border:1px dashed var(--gold-bdr);border-radius:var(--radius-sm);color:var(--gold-lt);}
.cloze-blank.filled{background:var(--bg-3);border-style:solid;color:var(--cream);}
.cloze-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.cloze-opt{background:var(--bg-2);border:1.5px solid var(--border-mid);border-radius:var(--radius-sm);padding:14px 18px;cursor:pointer;font-family:var(--font-ar);font-size:1.45rem;color:var(--cream);direction:rtl;transition:all 0.15s;text-align:center;letter-spacing:0.04em;line-height:1.8;}
.cloze-opt:hover:not(:disabled){border-color:var(--gold-bdr);background:var(--bg-3);}
.cloze-opt:disabled{cursor:default;}
.cloze-opt.correct{background:var(--green-bg);border-color:var(--green);color:#b8e8c8;}
.cloze-opt.wrong{background:var(--rust-bg);border-color:var(--rust);color:#f0a890;}
.cloze-opt.revealed{border-color:var(--green);}

.scramble-answer{min-height:60px;padding:12px;background:var(--bg-2);border:1.5px dashed var(--border-mid);border-radius:var(--radius-sm);margin-bottom:14px;direction:rtl;text-align:right;line-height:2.2;}
.scramble-answer.filled{border-style:solid;background:var(--bg-3);}
.scramble-bank{display:flex;gap:6px;flex-wrap:wrap;direction:rtl;}
.word-chip{background:var(--bg-2);border:1.5px solid var(--border-mid);border-radius:16px;padding:7px 15px;cursor:pointer;font-family:var(--font-ar);font-size:1.25rem;color:var(--cream);transition:all 0.12s;user-select:none;letter-spacing:0.02em;}
.word-chip:hover{border-color:var(--gold-bdr);background:var(--bg-3);}
.word-chip.placed{opacity:0.3;pointer-events:none;}
.word-chip.in-answer{background:var(--gold-bg);border-color:var(--gold-bdr);color:var(--gold-lt);}

.card-reveal{display:none;margin-top:12px;}
.card-reveal.open{display:block;}
.verse-card{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;}
.verse-card.correct-reveal{border-left:3px solid var(--green);}
.verse-card.wrong-reveal{border-left:3px solid var(--rust);}
.verse-card-ref{font-size:0.72rem;color:var(--cream-faint);margin-bottom:6px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;}
.verse-card-ar{font-family:var(--font-quran);font-size:1.4rem;color:var(--cream);direction:rtl;text-align:right;line-height:2.1;margin-bottom:4px;}
.verse-card-tr{font-size:0.78rem;color:var(--cream-dim);font-style:italic;line-height:1.5;}
.hl-shared{color:var(--cream-faint);opacity:0.55;}
.hl-diverge{color:var(--gold-lt);font-weight:700;}

.tell-legend{font-size:0.66rem;color:var(--cream-faint);margin:8px 0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.tell-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px;}

.feedback{margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);font-size:0.88rem;text-align:center;display:none;line-height:1.55;}
.feedback.show{display:block;}
.feedback.correct{background:var(--green-bg);color:#b8e8c8;border:1px solid var(--green-bdr);}
.feedback.wrong{background:var(--rust-bg);color:#f0a890;border:1px solid var(--rust-bdr);}
.feedback .headline{font-weight:700;display:block;margin-bottom:3px;}
.feedback .sub{font-size:0.78rem;color:var(--cream-dim);}

.hint-box{margin-top:10px;padding:10px 12px;background:rgba(58,112,192,0.08);border:1px solid var(--blue);border-radius:var(--radius-sm);font-size:0.85rem;color:#b0d0f0;display:none;}
.hint-box.open{display:block;}
.hint-box .ar{font-family:var(--font-ar);color:var(--gold-lt);font-size:1.1rem;direction:rtl;display:inline-block;margin:0 4px;}

.card-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.action-btn{flex:1;padding:15px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.95rem;font-weight:600;transition:all 0.15s;border:1px solid;min-width:100px;font-family:var(--font);pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:rgba(212,148,14,0.3);}
.btn-reveal,.btn-check,.btn-next{background:var(--gold-bg);color:var(--gold-lt);border-color:var(--gold-bdr);}
.btn-next:active{background:rgba(212,148,14,0.25);}
.card-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;}
.btn-got{background:var(--green-bg);color:#b8e8c8;border-color:var(--green-bdr);}
.btn-review{background:var(--rust-bg);color:#f0a890;border-color:var(--rust-bdr);}
.btn-skip{background:transparent;color:var(--cream-faint);border-color:var(--border-mid);max-width:90px;flex:0 0 auto;}
.btn-hint{background:transparent;color:#90c0f0;border-color:var(--blue);max-width:100px;flex:0 0 auto;}
.btn-check:disabled{opacity:0.35;cursor:default;}

.rv-results{display:none;max-width:500px;margin:0 auto;padding:36px 20px;text-align:center;}
.rv-results.active{display:block;}
.rv-results-title{font-size:1.4rem;color:var(--gold-lt);margin-bottom:6px;}
.rv-results-sub{font-size:0.9rem;color:var(--cream-dim);margin-bottom:20px;}
.result-stat{display:flex;justify-content:space-between;padding:11px 16px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;}
.stat-label{font-size:0.84rem;color:var(--cream-dim);}
.stat-val{font-weight:700;color:var(--cream);}
.rv-restart-btn{margin-top:14px;padding:11px 22px;background:var(--gold-bg);color:var(--gold-lt);border:1px solid var(--gold-bdr);border-radius:var(--radius-sm);cursor:pointer;font-size:0.9rem;font-weight:600;font-family:var(--font);}

.rv-loading{text-align:center;padding:40px 20px;color:var(--cream-faint);}
.rv-loading-spinner{font-size:1.5rem;animation:spin 1s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:560px){
  .shared-phrase{font-size:1.4rem;}
  .choice-btn{font-size:1.25rem;}
  .verse-card-ar{font-size:1.3rem;}
  .cloze-verse{font-size:1.4rem;}
  .cloze-opt{font-size:1.35rem;padding:12px 14px;}
  .word-chip{font-size:1.15rem;}
  .hdr-inner{padding:0 12px;height:56px;}
  .brand-en{display:none;}
}
/* 25 design-system themes live in shared-themes.css (linked in <head>). */

/* Madinah mushaf page-location label — tappable for page-context preview */
.loc-pill.pagepos{cursor:pointer;transition:all 0.12s;color:#d4b87d;background:rgba(138,112,64,0.12);border-color:rgba(138,112,64,0.32);}
.loc-pill.pagepos:hover{background:rgba(138,112,64,0.22);border-color:rgba(212,148,14,0.5);color:#f0d08c;}

/* Page preview modal for games */


.info-pack{background:linear-gradient(135deg,rgba(212,148,14,0.05),rgba(212,148,14,0.01));border:1px solid var(--gold-bdr);border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.info-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px dashed rgba(212,148,14,0.2);}
.info-hero-left{flex:1;min-width:0;}
.info-hero-label{font-size:0.68rem;color:var(--gold-lt);font-weight:700;text-transform:uppercase;letter-spacing:0.14em;margin-bottom:4px;}
.info-hero-ar{font-family:var(--font-ar);font-size:1.55rem;color:var(--gold-lt);font-weight:700;direction:rtl;line-height:1.2;}
.info-hero-right{text-align:right;flex-shrink:0;}
.info-hero-num{font-size:1.4rem;font-weight:700;color:var(--gold-lt);line-height:1;}
.info-hero-num-label{font-size:0.62rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;}
.info-progress{margin-top:10px;}
.info-progress:first-of-type{margin-top:0;}
.ip-row{display:flex;justify-content:space-between;font-size:0.68rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-bottom:4px;}
.ip-row b{color:var(--cream);font-weight:700;text-transform:none;letter-spacing:0;font-size:0.74rem;}
.ip-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}
.ip-fill{height:100%;background:linear-gradient(to right,rgba(212,148,14,0.6),var(--gold-lt));border-radius:2px;transition:width 0.4s ease;}
@keyframes pp-pulse{0%,100%{opacity:0.75;}50%{opacity:1;}}



/* Mushaf spread layout */
@media(max-width:600px){
}

/* Two-player Guess-the-Ayah game */
.guess-mystery{background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:2px solid var(--gold);border-radius:12px;padding:24px 22px;margin-bottom:14px;}
.guess-label{font-size:0.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.12em;font-weight:700;margin-bottom:10px;text-align:center;}
.guess-ar{font-family:var(--font-quran);font-size:2rem;line-height:2.5;color:var(--cream);direction:rtl;text-align:right;}
.guess-tr{font-size:0.86rem;color:var(--cream-dim);font-style:italic;line-height:1.65;margin-top:8px;display:none;}
.guess-tr.show{display:block;}
.guess-hints{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;}
.guess-hint-btn{background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream-dim);padding:10px 12px;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.86rem;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;transition:all 0.15s;}
.guess-hint-btn:hover:not(.revealed){background:var(--bg-3);border-color:var(--gold-bdr);color:var(--gold-lt);}
.guess-hint-btn.revealed{background:rgba(212,148,14,0.06);border-color:var(--gold-bdr);color:var(--cream-faint);cursor:default;}
.guess-hint-icon{font-size:1.1rem;}
.guess-hint-display{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px;padding:11px 14px;margin-bottom:8px;}
.guess-hint-display.top{border-left-color:#90c0f0;}
.guess-hint-display.bottom{border-left-color:#a060c8;}
.guess-hint-display.before{border-left-color:var(--warn-amber);}
.guess-hint-display.after{border-left-color:#80e0d0;}
.guess-hint-tag{font-size:0.66rem;color:var(--cream-faint);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:5px;}
.guess-hint-ar{font-family:var(--font-quran);font-size:1.2rem;line-height:2.0;color:var(--cream);direction:rtl;text-align:right;}
.guess-hint-meta{font-size:0.7rem;color:var(--cream-faint);margin-top:4px;}
.guess-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.guess-reveal-btn{flex:1;background:var(--gold);color:var(--bg);border:none;padding:12px 16px;border-radius:10px;font-weight:700;font-family:var(--font);font-size:0.95rem;cursor:pointer;}
.guess-skip-btn{background:transparent;border:1px solid var(--border-mid);color:var(--cream-dim);padding:12px 16px;border-radius:10px;cursor:pointer;font-family:var(--font);font-size:0.88rem;}
.guess-answer{background:rgba(26,128,64,0.08);border:1px solid var(--green);border-radius:10px;padding:14px 16px;margin-top:14px;display:none;}
.guess-answer.show{display:block;}
.guess-answer-label{font-size:0.7rem;color:var(--mast-light);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:6px;}
.guess-answer-ref{font-size:1.1rem;color:var(--cream);font-weight:700;margin-bottom:6px;}
.guess-answer-meta{font-size:0.78rem;color:var(--cream-dim);}
.guess-score-row{display:flex;gap:10px;justify-content:center;margin-bottom:14px;}
.guess-score-pill{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:20px;padding:6px 14px;font-size:0.84rem;color:var(--cream-dim);display:flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--font);}
.guess-score-pill .n{color:var(--gold-lt);font-weight:700;font-size:1rem;}
.guess-credit{display:flex;gap:6px;justify-content:center;margin-top:12px;}
.guess-credit-btn{background:var(--bg-2);border:1px solid var(--border-mid);color:var(--cream-dim);padding:7px 14px;border-radius:18px;cursor:pointer;font-family:var(--font);font-size:0.82rem;}
.guess-credit-btn:hover{background:var(--bg-3);border-color:var(--gold-bdr);color:var(--gold-lt);}

/* ═══ end revision module CSS ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   v185-isk28-versezone · 3-tab verse zone (Sakhāwī / Confusions / Commentary)
   ─────────────────────────────────────────────────────────────────────────
   Confusions: variant-B grouped pill rail. Each subgroup (Beginning, Middle,
   Ending) carries its own type-color accent. Tap a pill → swap an inline
   body that shows the FULL partner ayah with a halo-glow on the shared
   phrase. Commentary: H1 hub with two scholar cards; tap to drill.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-confusions{ margin-bottom:14px; padding-bottom:12px; border-bottom:0.5px solid var(--border); }
.v-confusions-hdr{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.v-confusions-icon{ color:var(--gold-lt); font-size:13px; }
.v-confusions-count{ font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-lt); }
.v-confusions-summary{ font-style:italic; font-size:12.5px; color:var(--cream-faint); margin-left:auto; }

.v-confusions-rail{ display:flex; flex-direction:column; gap:20px; padding:4px 0 8px; }
.v-pill-group{ display:flex; flex-direction:column; gap:10px; }
.v-pill-group-label{ display:flex; align-items:baseline; gap:10px; font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--pc); padding:0 2px 8px; position:relative; }
.v-pill-group-label::after{ content:''; position:absolute; left:0; bottom:0; width:36px; height:1.5px; background:var(--pc); opacity:.55; border-radius:1px; }
.v-pill-group-count{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; color:var(--cream-faint); font-weight:500; opacity:.75; padding:1px 7px; border:0.5px solid var(--border); border-radius:999px; letter-spacing:0.08em; }
.v-pill-group-pills{ display:flex; flex-wrap:wrap; gap:6px 4px; }

/* v185-isk28f · Dot-led pill: no fill, no border — the dot carries the
   active state. Surah name bumped to 15.5px for legibility. */
.v-pill{ display:inline-flex; flex-direction:row; align-items:center; gap:11px; padding:9px 18px; border:none; background:transparent; cursor:pointer; position:relative; min-width:0; border-radius:10px; transition:background .18s; touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,255,255,0.05); font-family:var(--font); }
.v-pill .v-pill-dot{ width:6px; height:6px; border-radius:50%; background:var(--pc); opacity:.75; transition:all .18s; flex-shrink:0; }
.v-pill .v-pill-ref{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--cream); letter-spacing:0.04em; font-weight:500; transition:color .15s; }
.v-pill .v-pill-name{ font-style:italic; font-size:15.5px; color:var(--cream-faint); line-height:1; transition:color .15s; }
.v-pill:hover .v-pill-dot{ opacity:1; transform:scale(1.4); box-shadow:0 0 6px color-mix(in oklab, var(--pc) 40%, transparent); }
.v-pill:hover .v-pill-name{ color:var(--cream-dim); }
.v-pill.active .v-pill-dot{ width:8px; height:8px; opacity:1; box-shadow:0 0 10px color-mix(in oklab, var(--pc) 70%, transparent), 0 0 18px color-mix(in oklab, var(--pc) 40%, transparent); }
.v-pill.active .v-pill-ref{ color:var(--cream); }
.v-pill.active .v-pill-name{ color:color-mix(in oklab, var(--pc) 50%, var(--cream)); }

.v-pill-detail{ }
.v-pill-body{ display:none; padding:18px 20px 16px; margin-top:18px; background:rgba(255,255,255,0.014); border-radius:12px; overflow:hidden; }
.v-pill-body.active{ display:block; }
.cb-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cb-dot{ width:7px; height:7px; border-radius:50%; }
.cb-tlbl{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-faint); }
.cb-name{ font-family:'Fraunces',Georgia,serif; color:var(--cream); font-style:italic; }
.cb-num{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--cream-faint); letter-spacing:0.04em; }
.cb-dist{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; color:var(--cream-faint); padding:2px 7px; border:0.5px solid var(--border); border-radius:999px; opacity:.7; }
.cb-master{ margin-left:auto; font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream-faint); padding:5px 12px; border:0.5px solid var(--border); border-radius:999px; background:transparent; cursor:pointer; transition:all .15s; }
.cb-master:hover{ color:var(--gold-lt); border-color:var(--gold-bdr); }
.cb-master.is-mastered{ color:#9bd0a8; border-color:rgba(155,208,168,0.4); background:rgba(155,208,168,0.06); }

.cb-verse{ font-family:var(--font-quran); font-size:1.4rem; color:var(--cream-dim); text-align:right; direction:rtl; line-height:2.15; padding:14px 2px; letter-spacing:0.005em; overflow-wrap:anywhere; word-break:break-word; max-width:100%; box-sizing:border-box; }
/* v185-isk28e · halo: no box, strong layered glow, sparkle twinkle */
.halo{
  background:transparent; padding:0;
  color:var(--cream);
  text-shadow:
    0 0 6px  color-mix(in oklab, var(--pc) 85%, transparent),
    0 0 14px color-mix(in oklab, var(--pc) 60%, transparent),
    0 0 28px color-mix(in oklab, var(--pc) 35%, transparent);
  animation:halo-sparkle 3s ease-in-out infinite;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
@keyframes halo-sparkle{
  0%, 100% {
    text-shadow:
      0 0 6px  color-mix(in oklab, var(--pc) 85%, transparent),
      0 0 14px color-mix(in oklab, var(--pc) 60%, transparent),
      0 0 28px color-mix(in oklab, var(--pc) 35%, transparent);
  }
  30% {
    text-shadow:
      0 0 10px color-mix(in oklab, var(--pc) 100%, transparent),
      0 0 22px color-mix(in oklab, var(--pc) 80%, transparent),
      0 0 44px color-mix(in oklab, var(--pc) 55%, transparent),
      3px -3px 6px color-mix(in oklab, var(--pc) 70%, transparent);
  }
  70% {
    text-shadow:
      0 0 8px  color-mix(in oklab, var(--pc) 92%, transparent),
      0 0 18px color-mix(in oklab, var(--pc) 70%, transparent),
      0 0 36px color-mix(in oklab, var(--pc) 45%, transparent),
      -3px 3px 6px color-mix(in oklab, var(--pc) 70%, transparent);
  }
}

.v-tab.active-conf{ color:#d4a268; border-bottom-color:#d4a268; }
.v-tab.active-conf .v-tab-count{ background:rgba(212,162,104,0.15); color:#d4a268; }
.v-tab.active-comm{ color:#cda5f0; border-bottom-color:#cda5f0; }
.v-tab.active-comm .v-tab-count{ background:rgba(205,165,240,0.15); color:#cda5f0; }

.comm-hub{ display:block; }
.comm-hub .comm-eyebrow{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.comm-hub .comm-eyebrow .lbl{ font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-lt); }
.comm-hub .comm-eyebrow .meta{ font-style:italic; font-size:12.5px; color:var(--cream-faint); margin-left:auto; }
.comm-hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:680px){ .comm-hub-grid{ grid-template-columns:1fr; } }
.comm-hub-card{ display:block; padding:18px 18px; border:0.5px solid var(--border); border-radius:var(--radius-sm); background:rgba(255,255,255,0.014); cursor:pointer; transition:all .2s cubic-bezier(.2,.7,.2,1); position:relative; text-align:left; width:100%; font-family:var(--font); color:inherit; }
.comm-hub-card:hover{ border-color:var(--pc); background:rgba(255,255,255,0.025); transform:translateY(-2px); box-shadow:0 8px 22px -10px color-mix(in oklab, var(--pc) 30%, rgba(0,0,0,.5)); }
.comm-hub-card .ch-tier{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.comm-hub-card .ch-tier-dot{ width:6px; height:6px; border-radius:50%; background:var(--pc); }
.comm-hub-card .ch-tier-lbl{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream-faint); }
.comm-hub-card .ch-name{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-size:22px; color:var(--cream); margin-bottom:4px; line-height:1.15; }
.comm-hub-card .ch-work{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--cream-faint); letter-spacing:0.06em; margin-bottom:12px; }
.comm-hub-card .ch-snip{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13.5px; color:var(--cream-dim); line-height:1.6; margin-bottom:14px; }
.comm-hub-card .ch-cta{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--pc); display:inline-flex; align-items:center; gap:6px; }
.comm-detail{ display:none; }
.comm-hub.detail-active .comm-hub-grid{ display:none; }
.comm-hub.detail-active .comm-eyebrow{ display:none; }
.comm-hub.detail-active .comm-detail.active{ display:block; }
.comm-back{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border:0.5px solid var(--border); border-radius:999px; background:transparent; cursor:pointer; font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-faint); transition:all .15s; margin-bottom:14px; }
.comm-back:hover{ color:var(--gold-lt); border-color:var(--gold-bdr); }

/* ═══════════════════════════════════════════════════════════════════════════
   v185-isk28a-sakhawi-mod2 · Universal Mod-2 styling for Sakhāwī cards
   ─────────────────────────────────────────────────────────────────────────
   Applies to BOTH the existing Ḥaydarah .sak-cluster rich card AND any
   future full-corpus slim card emitted with the same .sak-* classes (also
   carries through to commentary.html which links this stylesheet).
   Strips the gold gradient bar + cyan tint background; centres the meta
   strip, headword, lede, and bayt; replaces the WITH/WITHOUT 2-column
   group grid with stacked rows that carry a left-edge color accent in
   their group color (mint = without, peach = with). Pure CSS-side override.
   ═══════════════════════════════════════════════════════════════════════════ */
.sak-cluster{ background:transparent; border:0.5px solid transparent; border-radius:10px; padding:24px 24px 20px; transition:background .2s, border-color .2s; }
.sak-cluster::before{ display:none; }
.sak-cluster:hover{ background:rgba(255,255,255,0.014); border-color:var(--border); }
.sak-cluster.is-master{ background:rgba(155,208,168,0.04); border-color:rgba(155,208,168,0.25); }

.sak-label{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--cream-faint); margin-bottom:18px; position:relative; }
.sak-label .sak-bayt{ background:transparent; border:none; padding:0; color:var(--cream-faint); font-weight:500; letter-spacing:0.22em; border-radius:0; }
.sak-label .sak-sparkle{ margin-left:0 !important; position:absolute; right:0; top:50%; transform:translateY(-50%); }

.sak-lede{ background:transparent; border:none; padding:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:15.5px; line-height:1.75; color:var(--cream-dim); text-align:center; max-width:58ch; margin:0 auto 20px; }
.sak-lede .phrase{ background:transparent; padding:0 4px; border-radius:0; color:var(--cream); font-style:normal; font-family:var(--font-quran); font-size:1.18em; font-weight:500; vertical-align:baseline; line-height:inherit; display:inline; }
.sak-lede .ar-inline{ font-family:var(--font-quran); color:var(--cream); font-style:normal; font-size:1.18em; font-weight:500; padding:0 4px; vertical-align:baseline; line-height:inherit; display:inline; }

.sak-groups-v3{ grid-template-columns:1fr; gap:14px; }
.sak-groups-v3:has(> .sak-group:only-child), .sak-groups-v3.sak-single{ grid-template-columns:1fr; }
.sak-group{ background:rgba(255,255,255,0.012); border:none; border-left:2px solid var(--gc, #86c1b9); border-radius:0 6px 6px 0; padding:12px 14px 12px 18px; }
.sak-group.sak-g-without{ --gc:#86c1b9; border-left-color:#86c1b9; }
.sak-group.sak-g-with{ --gc:#d4a268; border-left-color:#d4a268; }
.sak-group-hdr-en{ color:var(--gc, var(--cream-faint)); }
.sak-group.sak-g-without .sak-group-hdr-en{ color:#86c1b9; }
.sak-group.sak-g-with .sak-group-hdr-en{ color:#d4a268; }

.sak-item{ padding:6px 6px; border-radius:4px; }
.sak-item .sak-item-vref{ opacity:.6; transition:opacity .15s; }
.sak-item:hover .sak-item-vref{ opacity:1; }
.sak-item.self{ background:var(--gold-bg); }
.sak-item.self .sak-item-vref{ opacity:1; }

.sak-footer{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:12.5px; color:var(--cream-faint); text-align:center; line-height:1.55; border-top:none; padding-top:0; margin-top:14px; }
.sak-bayt-box{ background:transparent; border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); padding:16px 0 14px; margin:8px 0 0; font-family:var(--font-quran); font-weight:500; font-size:1.32rem; text-align:center; color:var(--cream); direction:rtl; line-height:2.1; letter-spacing:0.005em; }
.sak-bayt-box .caesura{ color:var(--accent, var(--gold-lt)); margin:0 12px; opacity:.6; font-size:.85em; }

.sak-master-wrap{ border-top:none; padding-top:0; margin-top:18px; text-align:center; }
.sak-master-btn{ display:inline-block; width:auto; padding:7px 18px; font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-faint); border:0.5px solid var(--border); border-radius:999px; background:transparent; }
.sak-master-btn:hover{ color:#9bd0a8; border-color:rgba(155,208,168,0.35); background:transparent; }
.sak-master-btn.is-mastered{ color:#9bd0a8; border-color:rgba(155,208,168,0.45); background:rgba(155,208,168,0.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   v185-isk28c-rail-refine · Boxed confusion rail with active-label footer
   ─────────────────────────────────────────────────────────────────────────
   Replaces the bare-flow rail with a contained surface: rounded box,
   hairline border, subtle bg tint, header inside the box, group rail
   stacked, and a "↓ ACTIVE: ref · NAME" label at the bottom of the box
   that updates dynamically via setVPill. Body (.v-pill-detail and below)
   is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-confusions-rail-box{ border:0.5px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.014); padding:16px 18px 14px; margin-bottom:16px; }
.v-confusions-rail-box .v-confusions-hdr{ margin-bottom:14px; }
.v-confusions-rail-box .v-confusions-rail{ gap:18px; padding:0; }
.v-confusions-rail-box .v-pill-group{ gap:8px; }
.v-confusions-rail-box .v-pill-group-label{ padding:0 2px 6px; }
.v-confusions-rail-box .v-pill-group-label::after{ width:32px; }
.v-confusions-rail-box .v-pill-group-pills{ gap:5px 4px; }
.v-confusions-rail-box .v-pill{ padding:7px 14px; gap:9px; border-radius:8px; }
.v-confusions-rail-box .v-pill .v-pill-dot{ width:5px; height:5px; }
.v-confusions-rail-box .v-pill .v-pill-ref{ font-size:11.5px; }
.v-confusions-rail-box .v-pill .v-pill-name{ font-size:14.5px; }
.v-confusions-rail-box .v-pill.active .v-pill-dot{ box-shadow:0 0 10px color-mix(in oklab, var(--pc) 70%, transparent), 0 0 18px color-mix(in oklab, var(--pc) 40%, transparent); }

.v-active-label{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream-faint); margin-top:14px; padding-top:12px; border-top:0.5px dashed var(--border); }
.v-active-label .v-active-text{ color:var(--cream-faint); }
.v-active-label b{ color:var(--cream); font-weight:600; padding:0 4px 0 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v185-isk29-sidebar-v3 · Memorized-only sidebar, V3 row layout
   ─────────────────────────────────────────────────────────────────────────
   renderSidebar now filters to surahs in `progress` and emits each row
   as: sūra-num + (English on top + Arabic right) + 2px progress bar.
   Mint fill for 100%, gold for in-progress. Active state shifts the en
   color to gold-lt; complete rows shift the num color to mint.
   ═══════════════════════════════════════════════════════════════════════════ */
.sb-empty{ padding:14px 18px; font-family:var(--font); font-style:italic; font-size:12.5px; color:var(--cream-faint); line-height:1.55; }

/* Inscribed two-line row · big Arabic, italic meta beneath, hairline progress */
/* v188-isk18 · Sidebar rows · Gradient Mesh (v2 A1 port). Each row is
   a small rounded pill with hover + active states using gradient
   backdrop. English-first / Arabic-secondary order kept from v188-isk17.
   All gradients reference --ms-mint* so they tint per theme:
     · mushaf → green mesh
     · medina → wine mesh
     · muslimpro → gold mesh
     · qcom-dark → cyan mesh
   Active row gets a soft "halo" via box-shadow using --ms-mint-soft. */
.ms-surah-list{padding:6px 8px !important;}
.ms-surah-list li.sb-r3{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
  padding:10px 14px !important;
  margin:2px 0 !important;
  cursor:pointer;
  transition:background .14s, box-shadow .14s;
  border:none !important;
  border-radius:10px !important;
}
.ms-surah-list li.sb-r3:hover{
  background:rgba(255,255,255,0.04);
}
.ms-surah-list li.sb-r3.active{
  background:linear-gradient(135deg,
    var(--ms-mint-soft, var(--gold-bg, rgba(255,255,255,0.10))) 0%,
    var(--ms-mint-rim, var(--gold-bdr, rgba(255,255,255,0.04))) 60%,
    transparent 100%);
  box-shadow:0 4px 20px -10px var(--ms-mint-rim, var(--gold-bdr, rgba(0,0,0,0.30)));
}
/* English primary line */
.ms-surah-list li.sb-r3 .sb-r3-en{
  font-family:'Inter Tight','Inter',-apple-system,sans-serif;
  font-weight:500;
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:-0.005em;
  color:var(--cream);
}
.ms-surah-list li.sb-r3.active .sb-r3-en{
  color:var(--ms-mint-2, var(--gold-lt));
  font-weight:600;
}
.ms-surah-list li.sb-r3.complete .sb-r3-en{ color:var(--ms-mint, var(--gold-lt)); }
/* Meta row */
.ms-surah-list li.sb-r3 .sb-r3-meta{
  display:flex !important;
  justify-content:space-between;
  align-items:baseline;
  font-size:11.5px;
  color:var(--cream-faint);
  gap:8px;
}
.ms-surah-list li.sb-r3 .sb-r3-meta .left{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
  flex:1 1 auto;
  /* v188-isk28 · overflow:hidden was clipping long Arabic names like
     آل عمران / الأنعام. The right-pill has flex-shrink:0 so allowing
     visible overflow can't push it out of view. */
  overflow:visible;
}
.ms-surah-list li.sb-r3 .sb-r3-meta .left .num{
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.04em;
  color:var(--cream-faint);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.ms-surah-list li.sb-r3 .sb-r3-meta .left .sb-ar{
  font-family:var(--ms-quran),'Amiri Quran','Amiri',serif !important;
  font-size:14px;
  /* line-height:1 was clipping Amiri Quran diacritics (sukūn, shaddah,
     tanwīn) that sit below the baseline. 1.25 gives the marks room. */
  line-height:1.25;
  color:var(--cream-dim) !important;
  direction:rtl !important;
  display:inline-block !important;
  font-weight:400 !important;
  white-space:nowrap;
  /* Faint padding-bottom so descenders don't collide with the bar below. */
  padding-bottom:1px;
}
.ms-surah-list li.sb-r3.active .sb-r3-meta .left .sb-ar{ color:var(--ms-mint, var(--gold-lt)) !important; }
/* Right-side count gets a quiet pill on active */
.ms-surah-list li.sb-r3 .sb-r3-meta .right{
  font:500 10.5px/1 'JetBrains Mono',ui-monospace,monospace;
  color:var(--cream-dim);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  letter-spacing:0.02em;
  padding:3px 7px;
  border-radius:6px;
  background:rgba(255,255,255,0.03);
}
.ms-surah-list li.sb-r3.active .sb-r3-meta .right{
  color:var(--ms-mint-2, var(--gold-lt));
  background:var(--ms-mint-soft, var(--gold-bg, rgba(255,255,255,0.06)));
}
/* v207 · Reworked progress bar.
   Was: 1 px hairline at 5 % opacity — invisible.
   Now: 3 px rounded capsule track with a gradient theme-accent fill.
   100 %-complete rows get a richer success-green fill + a soft glow so
   "this sūrah is done" reads instantly. Active row gets brighter track. */
.ms-surah-list li.sb-r3 .sb-r3-bar{
  height:3px;
  background:color-mix(in srgb, currentColor 12%, transparent);
  border-radius:3px;
  overflow:hidden;
  position:relative;
  margin-top:6px;
}
.ms-surah-list li.sb-r3.active .sb-r3-bar{
  background:color-mix(in srgb, currentColor 20%, transparent);
}
.ms-surah-list li.sb-r3 .sb-r3-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--ms-mint-2, var(--gold-lt)) 0%,
    var(--ms-mint,   var(--gold))    100%);
  border-radius:3px;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.ms-surah-list li.sb-r3.complete .sb-r3-fill{
  background:linear-gradient(90deg,
    var(--acc-success, #86d0a8) 0%,
    color-mix(in srgb, var(--acc-success, #86d0a8) 80%, white) 100%);
  box-shadow:0 0 8px color-mix(in srgb, var(--acc-success, #86d0a8) 50%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v185-isk30-vnum-stack · Big italic verse-number with zone-coloured glow
   ─────────────────────────────────────────────────────────────────────────
   Replaces the compact .v-num-pos pill in the verse-row meta. The number
   itself becomes the page-context control: 30px italic Fraunces, glow
   tinted by the page zone (mint = top, peach = mid, violet = bot/bottom).
   Page info conveyed implicitly via the glow color + tooltip; the full
   page-preview modal opens on tap.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-num-big{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:30px; line-height:1;
  color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums;
  background:transparent; border:none;
  padding:4px 10px; border-radius:10px; min-width:48px;
  cursor:pointer;
  text-shadow:
    0 0 6px  color-mix(in oklab, var(--pc, var(--gold-lt)) 60%, transparent),
    0 0 14px color-mix(in oklab, var(--pc, var(--gold-lt)) 40%, transparent),
    0 0 24px color-mix(in oklab, var(--pc, var(--gold-lt)) 25%, transparent);
  transition:text-shadow .25s, color .15s, background .18s;
  -webkit-tap-highlight-color:rgba(255,255,255,0.05);
}
/* v185-isk33-vnum-uniform · all verse numbers glow the theme accent
   (previously per-zone mint/peach/violet — confusing & inconsistent in
   light mode; uniform reads cleaner). Page zone still encoded in
   data-zone for tooltip + future use. */
.v-num-big[data-zone]{ --pc:var(--gold-lt); }
.v-num-big:hover{
  background:rgba(255,255,255,0.022);
  color:color-mix(in oklab, var(--pc, var(--gold-lt)) 30%, var(--cream));
  text-shadow:
    0 0 9px  color-mix(in oklab, var(--pc, var(--gold-lt)) 80%, transparent),
    0 0 18px color-mix(in oklab, var(--pc, var(--gold-lt)) 60%, transparent),
    0 0 32px color-mix(in oklab, var(--pc, var(--gold-lt)) 40%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v186-light-consolidate · single source of truth for light mode
   ─────────────────────────────────────────────────────────────────────────
   Replaces 9 stacked override blocks (v185-isk28b → isk38) that grew
   reactively over a week of iteration. All light-mode tokens now derive
   from a small set at the top of this block; component-specific rules
   sit in one organized section below.

   To retune light mode:
     • Page bg / paper tone     →  --ms-bg (in :root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"])) and per-data-ui --bg
     • Primary text colour      →  --ms-ink + per-data-ui --cream
     • Verse-number / accent    →  light-mode --gold-lt = #92400E (bronze)
     • Card edge strength       →  per-data-ui --border alpha
     • Card recession depth     →  --ms-bg-1/-2/-3 step
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Universal accent palette (used by JS-emitted inline styles + many CSS rules).
   Dark-mode defaults; light-mode overrides darker for AA contrast. ────────── */
:root{
  --acc-end:    #86c1b9;   /* shared ending · mint */
  --acc-mid:    #cda5f0;   /* mid-verse echo · violet */
  --acc-prox:   #d4a268;   /* proximate ending · peach */
  --acc-cyan:   #7eccd0;   /* compound · cyan / top zone */
  --acc-iskafi: #86d0a8;   /* Iskāfī · emerald */
  --acc-success:#9bd0a8;   /* mastery checkmark · mint-fade */
}

/* ── LIGHT MODE TOKENS — surfaces, ink, hairlines, accents ─────────────── */
/* ── PER-DATA-UI THEMES (light mode) — page hue, ink, border in one row ── */
/* Catch-all for any data-ui not enumerated above */
/* v187-isk4 · light-mode catch-all dropped (themes are enumerated via data-ui) */

/* ── COMPONENT RULES (light mode) ──────────────────────────────────────── */

/* Verse number — clean stamped, no halo, accent on hover */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big[data-zone],
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big:hover,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big[data-zone]:hover{ text-shadow:none !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big[data-zone]{ --pc:#92400E; color:var(--ms-ink); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big[data-zone]:hover{ color:#92400E; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-num-big:hover{ background:rgba(58,32,16,0.05) !important; }

/* Brand + verse text — espresso primary, ink-2 secondary */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .brand-name,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .brand-surah,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-arabic,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .verse-ar{ color:var(--ms-ink) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-translation,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tr{ color:var(--ms-ink-2) !important; }

/* Sūrah list — active row in mint-soft, inactive in espresso */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active{
  background:rgba(21, 80, 51, 0.16) !important;
  box-shadow:inset 0 0 0 0.5px rgba(21, 80, 51, 0.4) !important;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .ms-en,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .sb-en{ color:#0f3d24 !important; font-weight:700 !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .ms-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .sb-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .ms-ar,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .sb-ar{ color:#155033 !important; font-weight:700 !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-en,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .sb-en,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-ar,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .sb-ar{ color:var(--ms-ink) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .sb-num{ color:var(--ms-ink-2) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li:hover{ background:rgba(58,32,16,0.06) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.sb-r3{ border-bottom-color:rgba(58,32,16,0.10) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.sb-r3 .sb-r3-bar{ background:rgba(58,32,16,0.10) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sb-item.sb-r3.complete .sb-r3-fill,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.sb-r3.complete .sb-r3-fill{ background:var(--acc-success); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sb-item.sb-r3.complete .sb-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.sb-r3.complete .ms-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.sb-r3.complete .sb-num{ color:var(--acc-success) !important; }

/* Tabs — proximal accent for confusions, mid accent for commentary */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tab.active-conf{ color:var(--acc-prox); border-bottom-color:var(--acc-prox); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tab.active-conf .v-tab-count{ background:color-mix(in oklab, var(--acc-prox) 14%, transparent); color:var(--acc-prox); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tab.active-comm{ color:var(--acc-mid); border-bottom-color:var(--acc-mid); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tab.active-comm .v-tab-count{ background:color-mix(in oklab, var(--acc-mid) 14%, transparent); color:var(--acc-mid); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-tab-count{ background:rgba(58,32,16,0.10); color:var(--ms-ink-2); }

/* Sakhāwī */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-cluster:hover{
  background:rgba(58,32,16,0.04) !important;
  border-color:rgba(58,32,16,0.18) !important;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-cluster.is-master{
  background:rgba(21,80,51,0.08) !important;
  border-color:rgba(21,80,51,0.28) !important;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-group{ background:rgba(58,32,16,0.035) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-group.sak-g-without{ --gc:var(--acc-end); border-left-color:var(--acc-end); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-group.sak-g-without .sak-group-hdr-en{ color:var(--acc-end); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-group.sak-g-with{ --gc:var(--acc-prox); border-left-color:var(--acc-prox); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-group.sak-g-with .sak-group-hdr-en{ color:var(--acc-prox); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-item:hover{ background:rgba(58,32,16,0.06) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-master-btn:hover{ color:var(--acc-success); border-color:color-mix(in oklab, var(--acc-success) 35%, transparent); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-master-btn.is-mastered{ color:var(--acc-success); border-color:color-mix(in oklab, var(--acc-success) 45%, transparent); background:color-mix(in oklab, var(--acc-success) 8%, transparent); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .cb-master.is-mastered{ color:var(--acc-success); border-color:color-mix(in oklab, var(--acc-success) 35%, transparent); background:color-mix(in oklab, var(--acc-success) 8%, transparent); }

/* Confusion rail */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-confusions-rail-box{
  background:rgba(58,32,16,0.04) !important;
  border-color:rgba(58,32,16,0.22) !important;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ci-tag{
  background:rgba(58,32,16,0.07);
  color:var(--ms-ink-2);
  border-color:rgba(58,32,16,0.22);
}

/* Hub feature card — warm-paper gradient (was hardcoded near-white) */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-hub-card.feature{
  background:linear-gradient(135deg, rgba(218,200,165,0.62) 0%, rgba(208,188,150,0.78) 70%) !important;
}

/* Hifz cells */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .hz-pg.not-mem{ background:rgba(58,32,16,0.04); color:var(--ms-ink-3); }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .hz-pg.untested{ background:rgba(58,32,16,0.06); color:var(--ms-ink-2); }

/* Iskāfī masala */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .isk-body ol.masala-list li{ background:rgba(58,32,16,0.04) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .isk-parallel{ background:rgba(58,32,16,0.04) !important; }

/* Misc interactives — uniform warm-ink hover overlay */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-top:hover,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .acc-group summary:hover,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .mlh-word:hover,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sb-item:hover{ background:rgba(58,32,16,0.06) !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sb-dot-group{ background:rgba(58,32,16,0.07); }

/* Promote 0.5px hairlines to 1px in light mode (sub-pixel rounds to 0
   on most displays once bg is light, so they never render). */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-confusions-rail-box,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-pill-group-count,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .cb-dist,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .cb-master,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .comm-hub-card,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .comm-back,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-master-btn,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-active-label{ border-width:1px !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-confusions{ border-bottom-width:1px !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sak-bayt-box{ border-top-width:1px !important; border-bottom-width:1px !important; }

/* Font-weight bumps — manuscript.css ships ~16 font-weight:100 rules
   that read washed-out on cream regardless of color contrast. */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .brand-surah,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .brand-ar,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-en,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-ar,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list .ms-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-hd-title,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-mode-btn,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-arabic,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .verse-ar,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-grp-btn .ar{ font-weight:500 !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-surah-list li.active .ms-en{ font-weight:700 !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-hd, :root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-hd-row,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) [class*="ms-meta"], :root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) [class*="ms-hub"],
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .sg-item.locked,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .surah-hdr-sub, :root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-list-sub,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .surah-meta{ font-weight:400 !important; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .surah-hdr-sub,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .ms-list-sub,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .surah-meta{ color:var(--ms-ink-2) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v186-isk1-ppmodal · refined-B page-preview modal
   ─────────────────────────────────────────────────────────────────────────
   Drop-in styles for the new openPagePreview() body (.ppm-* layer).
   Old .pp-* classes kept above for backward compat (still used by a few
   helpers e.g. .pp-modal-close + .pp-btn). The ppm-* layer covers:
     • Eyebrow strip with hizb (mentioned ONCE)
     • Mushaf 2-page spread (15-line grid · paper styling · active line range)
     • Caption · vertical chronological verse stack · page-turn delimiters
     • Coord pills
   Uses site CSS tokens (--bg, --bg-1, --cream, --gold-lt, --border, --ms-hair)
   so it adapts to both light + dark modes through the existing cascade.
   Paper itself is hardcoded warm cream — mushafs stay paper-coloured in
   both modes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Eyebrow */
.ppm-eye{
  display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;
  padding-bottom:14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10px; font-weight:700; letter-spacing:0.20em; text-transform:uppercase;
  color:var(--cream-faint);
}
.ppm-eye::before, .ppm-eye::after{
  content:''; flex:0 0 30px; height:1px; background:var(--border);
}
.ppm-eye b{ color:var(--gold-lt); font-weight:700; padding:0 2px; }
.ppm-eye .ar{
  font-family:'Amiri Quran','Amiri',serif; font-weight:600; font-size:14px;
  letter-spacing:0; text-transform:none; line-height:1; padding:0 4px;
  color:var(--gold-lt);
}

/* Mushaf 2-page spread — paper colours hardcoded (mushafs are cream regardless of mode) */
.ppm-spread{
  --paper-1: #f5e9d0;
  --paper-2: #ead7b0;
  --paper-edge: rgba(146, 64, 14, 0.30);
  --paper-rule: rgba(58, 32, 16, 0.13);
  --paper-ink: #4a3320;
  --paper-gold: #d4a268;
  display:flex; align-items:stretch; margin:0 auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,0.40));
  max-width:230px; height:155px;
}
.ppm-page{
  flex:1; position:relative;
  background:linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 100%);
  border:1px solid var(--paper-edge);
  padding:9px 9px 5px;
  display:flex; flex-direction:column;
  font-family:'Amiri',serif;
  color:var(--paper-ink);
}
.ppm-page.left{
  border-radius:4px 2px 2px 4px;
  border-right:1px solid rgba(58,32,16,0.40);
  box-shadow: inset -8px 0 12px -8px rgba(0,0,0,0.45);
}
.ppm-page.right{
  border-radius:2px 4px 4px 2px;
  border-left:1px solid rgba(58,32,16,0.40);
  box-shadow: inset 8px 0 12px -8px rgba(0,0,0,0.45);
}
.ppm-page.dim{ opacity:0.55; filter:grayscale(0.20); }
.ppm-page.empty{ visibility:hidden; }
.ppm-page::before{
  content:''; position:absolute; top:0; left:5px; right:5px; height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(146,64,14,0.55) 18%, rgba(146,64,14,0.55) 82%, transparent 100%);
}
.ppm-lines{ flex:1; display:flex; flex-direction:column; padding-top:2px; padding-bottom:2px; }
.ppm-ln{ flex:1; border-bottom:1px solid var(--paper-rule); position:relative; }
.ppm-ln:last-child{ border-bottom:none; }
.ppm-ln.active{
  background:linear-gradient(90deg, transparent 0%, rgba(212,162,104,0.42) 12%, rgba(212,162,104,0.50) 50%, rgba(212,162,104,0.42) 88%, transparent 100%);
  border-bottom-color:rgba(212,162,104,0.55);
}
.ppm-ln.active.first::before{
  content:'★'; position:absolute; right:-2px; top:50%;
  transform:translate(50%, -50%);
  color:var(--paper-gold); font-size:7px; line-height:1;
  text-shadow:0 0 5px rgba(236,194,138,0.7);
}
.ppm-page-num{
  font-family:'Amiri',serif; font-weight:600;
  font-size:11px; color:rgba(146,64,14,0.80);
  text-align:center; line-height:1;
  border-top:1px solid rgba(146,64,14,0.22);
  padding-top:3px; margin-top:3px;
}
.ppm-page.dim .ppm-page-num{ color:rgba(146,64,14,0.55); }

/* Caption */
.ppm-cap{
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13px;
  color:var(--cream-dim);
  text-align:center; margin-top:12px; line-height:1.4;
}
.ppm-cap b{ color:var(--gold-lt); font-style:normal; font-weight:600; padding:0 3px; }

/* Vertical verse stack */
.ppm-stack{ margin-top:20px; display:flex; flex-direction:column; gap:6px; }
.ppm-verse{
  padding:13px 16px; border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-1);
  position:relative;
}
.ppm-verse.dim{ opacity:0.55; filter:grayscale(0.10); }
.ppm-verse.dim:hover{ opacity:0.85; transition:opacity .25s; }
.ppm-verse.focus{
  opacity:1; filter:none;
  border:1px solid var(--gold-bdr);
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg, var(--gold-bg) 0%, transparent 100%);
  padding:18px 18px 18px 19px;
  margin:6px 0;
}
.ppm-verse-lbl{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:9.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:7px;
}
.ppm-verse.focus .ppm-verse-lbl{ color:var(--gold-lt); font-size:10.5px; }
.ppm-verse-lbl b{ color:var(--cream); font-weight:700; padding:0 2px; }
.ppm-verse.focus .ppm-verse-lbl b{ color:var(--gold-lt); }
.ppm-verse-ar{
  font-family:'Amiri Quran','Amiri',serif;
  direction:rtl; text-align:right; font-weight:500;
  font-size:1.0rem; line-height:1.85;
  color:var(--cream);
}
.ppm-verse.focus .ppm-verse-ar{ font-size:1.30rem; line-height:2.0; }

/* Page-turn delimiter */
.ppm-turn{
  display:flex; align-items:center; gap:10px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:9px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold);
  padding:4px 12px; margin:2px 0;
}
.ppm-turn::before, .ppm-turn::after{ content:''; flex:1; height:1px; background:var(--gold-bdr); }

/* Coord pills */
.ppm-pills{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; padding:18px 0 4px; }
.ppm-pill{
  font-family:ui-monospace,Menlo,monospace;
  font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cream-faint);
  padding:3px 9px; border-radius:999px;
  background:var(--gold-bg);
  border:0.5px solid var(--border);
}
.ppm-pill b{ color:var(--cream); font-weight:700; padding:0 2px; }
.ppm-pill.now{ color:var(--gold-lt); border-color:var(--gold-bdr); background:var(--gold-bg); }
.ppm-pill.now b{ color:var(--gold-lt); }

/* ═══════════════════════════════════════════════════════════════════════════
   v186-isk2-vnum-center · centre the page-context verse number with the row
   ─────────────────────────────────────────────────────────────────────────
   Verse-row was: meta-row (number + locBadge + dots) on top, Arabic below.
   New: number sits in its own column (.v-num-col), vertically centred with
   the body column (.v-body-col) which holds meta-row + Arabic + hint.
   The verse number now reads as the visual anchor of the row, lined up
   with the centre of the Arabic.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-top{
  display:flex !important;
  /* v187-isk11-vnum-row · the base .v-top rule at line ~237 sets
     flex-direction:column, which stacked the verse number on top of the
     Arabic body. Forcing row direction restores the intended v186-isk2
     layout: number on the LEFT (in .v-num-col), body in the centre, dots
     on the RIGHT (margin-left:auto on .v-dot-col), all vertically centred. */
  flex-direction:row !important;
  align-items:center;
  gap:14px;
}
.v-num-col{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.v-body-col{ flex:1; min-width:0; }
.v-body-col .v-meta-row{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  margin-bottom:6px;
}
.v-body-col .v-meta-row:empty{ display:none; }
/* v186-isk4 · scholar dots column on the RIGHT, vertically centred with the row */
.v-dot-col{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-left:auto;
}
.v-dot-col:empty{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   v186-isk4-contrast · light-mode contrast bump
   ─────────────────────────────────────────────────────────────────────────
   Per user feedback: bump borders, muted text, and card-edge tones harder
   so the parchment view reads with more separation.
     • Borders alpha:    0.55 → 0.70  (--border)
     • Border-mid alpha: 0.70 → 0.85  (--border-mid)
     • Hairlines:        0.18/0.30/0.45 → 0.30/0.45/0.60
     • Muted text:       --ms-ink-2/3 pushed further toward black
     • Card recession:   --ms-bg-1/2/3 deepened a touch (~3% darker each)
     • White scholar dot: stronger ink rim so it reads on parchment
   Dark mode untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Beef up the white Mudhish dot on parchment — thicker rim. */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .v-dot-mud{
  border-width:1.5px;
  border-color:var(--ms-ink, #2A1810);
  box-shadow:0 0 0 1px rgba(58,32,16,0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v186-isk3-mudhish · Memorization Aids hub + al-Mudhish (Ibn al-Jawzī) card
   ─────────────────────────────────────────────────────────────────────────
   Tab restructure: the old "🪶 Sakhāwī" tab becomes "🪶 Memorization Aids".
   When BOTH Sakhāwī and al-Mudhish have entries on a verse → mem-hub
   (mirrors comm-hub for Kirmānī + Iskāfī). When only one has entries →
   render that scholar's card directly.

   al-Mudhish drilled card uses .M3-* layer (marginalia notebook style)
   with a NEW "In plain terms" highlighter section that explains the
   memorization difference in everyday language. Every Mudhish entry
   carries this section.

   Colour family: WHITE (warm-white card surface, dark-on-white numerals,
   white scholar dot with thin dark border).

   Data placeholders: data/mudhish/mudhish_en.json (entries) +
   mudhish_verse_index.json (S:V → entry_id[]). Architecture is wired;
   tab + dot + hub appear once entries are added to those files.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── White scholar dot (al-Mudhish) ─────────────────────────────────────── */
.v-dot-mud{
  width:7px; height:7px; border-radius:50%;
  background:#faf6e8;
  border:1px solid var(--cream);
  box-shadow:0 0 6px rgba(255,251,240,0.65);
}

/* ── Memorization-Aids hub (mirrors .comm-hub) ─────────────────────────── */
.mem-hub{ display:block; }
.mem-hub .mem-eyebrow{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.mem-hub .mem-eyebrow .lbl{ font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-lt); }
.mem-hub .mem-eyebrow .meta{ font-style:italic; font-size:12.5px; color:var(--cream-faint); margin-left:auto; }
.mem-hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:680px){ .mem-hub-grid{ grid-template-columns:1fr; } }

.mem-card{
  position:relative;
  display:flex; flex-direction:column; gap:9px;
  padding:18px 18px 16px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.014);
  cursor:pointer;
  transition:all .2s cubic-bezier(.2,.7,.2,1);
  text-align:left; width:100%;
  font-family:var(--font); color:inherit;
}
.mem-card:hover{
  border-color:var(--pc, var(--gold-lt));
  background:rgba(255,255,255,0.025);
  transform:translateY(-2px);
  box-shadow:0 8px 22px -10px color-mix(in oklab, var(--pc, var(--gold-lt)) 30%, rgba(0,0,0,.5));
}
.mem-card .mc-num{
  font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:0.20em; text-transform:uppercase; color:var(--cream-faint);
}
.mem-card .mc-num b{ color:var(--cream); font-weight:700; padding:0 2px; }
.mem-card h3{
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:300;
  font-size:30px; line-height:1.05; margin:0; color:var(--cream);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.mem-card h3 .ar{ font-family:'Amiri',serif; font-size:21px; font-weight:600; font-style:normal; color:var(--cream); }
.mem-card .mc-work{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--cream-faint); letter-spacing:0.06em; }
.mem-card .mc-desc{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13.5px; color:var(--cream-dim); line-height:1.6; }
.mem-card .mc-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:10px; border-top:0.5px dashed var(--border);
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600;
  letter-spacing:0.10em; color:var(--cream-faint);
}
.mem-card .mc-meta b{ color:var(--cream); font-weight:700; padding:0 2px; }
.mem-card .mc-arrow{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--pc, var(--gold-lt)); display:inline-flex; align-items:center; gap:6px; }

/* Sakhāwī hub-card · MINT primary */
.mem-card.sak-card-hub{
  --pc:var(--acc-end);
  background:linear-gradient(135deg, color-mix(in oklab, var(--acc-end) 8%, transparent) 0%, transparent 80%);
  border-color:color-mix(in oklab, var(--acc-end) 32%, transparent);
}
.mem-card.sak-card-hub .mc-num{ color:var(--acc-end); }
.mem-card.sak-card-hub .mc-num b{ color:var(--cream); }

/* al-Mudhish hub-card · WHITE accent */
.mem-card.mud-card-hub{
  --pc:#faf6e8;
  background:linear-gradient(135deg, rgba(250,246,232,0.10) 0%, rgba(250,246,232,0.02) 100%);
  border-color:rgba(250,246,232,0.32);
}
.mem-card.mud-card-hub .mc-num{ color:rgba(250,246,232,0.85); }
.mem-card.mud-card-hub .mc-arrow{ color:#faf6e8; }
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .mem-card.mud-card-hub{
  background:linear-gradient(135deg, #faf6e8 0%, rgba(255,251,240,0.20) 100%);
  border-color:var(--cream-faint);
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .mem-card.mud-card-hub .mc-num,
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .mem-card.mud-card-hub .mc-arrow{ color:var(--cream-faint); }

/* mem-detail — same drill-in pattern as comm-detail */
.mem-detail{ display:none; }
.mem-hub.detail-active .mem-hub-grid{ display:none; }
.mem-hub.detail-active .mem-eyebrow{ display:none; }
.mem-hub.detail-active .mem-detail.active{ display:block; }
.mem-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 8px; border:0.5px solid var(--border); border-radius:999px;
  background:transparent; cursor:pointer;
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-faint);
  transition:all .15s; margin-bottom:14px;
}
.mem-back:hover{ color:var(--gold-lt); border-color:var(--gold-bdr); }

/* ═══════════════════════════════════════════════════════════════════════
   v187-isk31-mudhish-quran · Mudhish A2 cluster ported to Qurʾan tab.
   Palette: jade + ruby on slate (the C6/A2 ship from preview).
   Rendered by modules/scholars/render.js (renderMudhishEntries) inside
   the 🪶 Memorization Aids panel. Same .mc grammar as commentary.html.
   ═══════════════════════════════════════════════════════════════════════ */
.mc{
  position:relative;
  background:var(--mud-bg);
  border:1px solid var(--mud-jade-bdr);
  border-radius:12px;
  padding:16px 18px 14px;
  margin:0 0 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.mc:last-child{margin-bottom:0;}
/* v187-isk44 · L4 strip · gradient rail removed. The .mc::before is kept
   as a no-op so any theme override can re-enable it. */
.mc::before{ content:none; }

/* v187-isk45 · View-switcher pill · top-right corner of .mc cluster.
   Floats above the lede via absolute positioning. The cluster's lede
   gets a right-padding adjustment so its text doesn't run under the pill. */
.mc-view-switcher{
  position:absolute;top:10px;right:12px;z-index:3;
}
.mc-fab{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 11px;
  background:var(--mud-jade-bg);
  border:0.5px solid var(--mud-jade-bdr);border-radius:99px;
  color:var(--mud-jade-lt);font:inherit;
  font-size:10.5px;font-weight:500;letter-spacing:0;
  cursor:pointer;transition:all 0.14s;
}
.mc-fab:hover{ background:rgba(216,200,154,0.20);border-color:var(--mud-jade); }
.mc-fab-chev{ font-size:9px;color:var(--cream-faint); }
.mc-fab-menu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:10;
  display:flex;flex-direction:column;gap:1px;min-width:200px;
  background:var(--bg-1);
  border:0.5px solid var(--hair-2);border-radius:8px;
  padding:5px;
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
}
.mc-fab-menu[hidden]{ display:none; }
.mc-fab-opt{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:5px;
  background:transparent;border:0;
  color:var(--cream-dim);font:inherit;font-size:12px;
  cursor:pointer;text-align:left;width:100%;
  transition:background 0.14s, color 0.14s;
}
.mc-fab-opt:hover{ background:rgba(255,255,255,0.04);color:var(--cream); }
.mc-fab-opt.on{ background:var(--mud-jade-bg);color:var(--mud-jade-lt); }
.mc-fab-opt .k{
  margin-left:auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;color:var(--cream-faint);letter-spacing:0.06em;
  background:rgba(0,0,0,0.30);padding:1px 6px;border-radius:99px;
}
.mc-fab-opt.on .k{ color:var(--mud-jade);background:rgba(216,200,154,0.15); }
/* Disabled view options (coming soon) — visible but inert */
.mc-fab-opt.disabled,
.mc-fab-opt:disabled{
  opacity:0.45;cursor:not-allowed;
  color:var(--cream-faint-2);
}
.mc-fab-opt.disabled:hover,
.mc-fab-opt:disabled:hover{ background:transparent;color:var(--cream-faint-2); }
.mc-fab-opt .k.soon{
  font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cream-faint-2);background:transparent;
}

/* Padding adjustment so the first child (lede) doesn't run under the pill */
.mc:has(.mc-view-switcher){ padding-top:38px; }

/* v187-isk46 · View A · flat list · each verse shown with full Arabic visible */
.mc-flat{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.mc-flat-item{
  padding:10px 12px;
  background:rgba(0,0,0,0.30);
  border:0.5px solid rgba(255,255,255,0.04);
  border-left:3px solid var(--mud-jade);
  border-radius:8px;
  display:flex;flex-direction:column;gap:6px;
  transition:background 0.14s, opacity 0.14s, filter 0.2s;
}
.mc-flat-item.self{box-shadow:inset 0 0 0 0.5px var(--mud-jade);}
.mc-flat-item.not-mem{filter:blur(2.5px);opacity:0.55;}
.mc-flat-item.not-mem:hover{filter:blur(0);opacity:1;}
.mc-flat-meta{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:11px;
}
.mc-flat-meta .mc-item-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--cream-faint);}
.mc-flat-meta .ref-pill{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;
  color:var(--mud-jade);background:var(--mud-jade-bg);
  border:1px solid var(--mud-jade-bdr);
  padding:1px 8px;border-radius:99px;letter-spacing:0.04em;
}
.mc-flat-meta .sn-text{color:var(--cream-faint);font-size:11px;font-style:italic;font-family:'Fraunces',Georgia,serif;}
.mc-flat-meta .pg-mini{margin-left:auto;}
.mc-flat-ar{
  font-family:'Amiri Quran','Amiri',serif;direction:rtl;text-align:right;
  font-size:20px;line-height:1.95;color:var(--cream);
}
.mc-flat-ar mark.mud-subject{
  background:transparent;
  color:var(--mud-jade-lt);font-weight:500;
  text-shadow:0 0 12px var(--mud-jade-glow), 0 0 4px var(--mud-jade-glow-2);
  padding:0 2px;
}
.mc-label{
  font-size:0.62rem;color:var(--mud-jade-lt);text-transform:uppercase;letter-spacing:0.14em;
  font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.mc-bayt{
  background:var(--mud-jade-bg);padding:1px 8px;border-radius:8px;
  border:1px solid var(--mud-jade-bdr);font-weight:600;
}
.mc-pages{
  margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px;color:var(--cream-faint);font-weight:400;letter-spacing:0.06em;text-transform:none;
}
.mc-lede{
  font-size:0.88rem;color:var(--cream-dim);line-height:1.65;
  padding:10px 13px;background:rgba(0,0,0,0.30);
  border-radius:8px;border:0.5px solid var(--mud-jade-bdr);
  margin-bottom:10px;
}
.mc-lede .ar{
  font-family:'Amiri Quran','Amiri',serif;
  color:var(--mud-jade-lt);font-weight:500;font-style:normal;
  text-shadow:0 0 12px var(--mud-jade-glow), 0 0 4px var(--mud-jade-glow-2);
  font-size:1.18em;line-height:1.4;
}
.mc-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:580px){.mc-groups{grid-template-columns:1fr;}}
.mc-groups.single{grid-template-columns:1fr;}
.mc-group{
  background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;padding:10px 12px 11px;
}
.mc-group.g-default{border-left:3px solid var(--mud-jade);}
.mc-group.g-default .mc-group-hdr-en{color:var(--mud-jade-lt);}
.mc-group.g-variant{border-left:3px solid var(--mud-ruby);}
.mc-group.g-variant .mc-group-hdr-en{color:var(--mud-ruby-lt);}
.mc-group-hdr{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap;line-height:1.4;}
.mc-group-hdr-en{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.10em;}
.mc-group-sep{color:var(--cream-faint);opacity:0.4;}
.mc-group-hdr-count{
  margin-left:auto;font-size:0.60rem;color:var(--cream-faint);
  font-weight:600;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.04em;
}
.mc-item{
  display:grid;grid-template-columns:18px 1fr auto auto;gap:9px;
  align-items:baseline;padding:5px 6px;font-size:0.84rem;
  cursor:pointer;transition:all 0.15s;border-radius:4px;
}
.mc-item:hover{background:rgba(255,255,255,0.04);}
.mc-item.active{background:rgba(216,200,154,0.10);box-shadow:inset 2px 0 0 var(--mud-jade);}
.mc-group.g-variant .mc-item.active{box-shadow:inset 2px 0 0 var(--mud-ruby);}
.mc-item-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--cream-faint);text-align:right;}
.mc-item-surah{color:var(--cream-dim);font-style:italic;font-family:'Fraunces',Georgia,serif;}
.mc-item-vref{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--mud-jade);font-size:11px;font-weight:600;}
.mc-group.g-variant .mc-item-vref{color:var(--mud-ruby);}

/* V5 · mini-mushaf page-context icon — 32×22 two-page spread + position dot */
.pg-mini{
  width:32px;height:22px;cursor:pointer;
  background:transparent;border:0.5px solid var(--mud-jade-bdr);
  border-radius:3px;display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;padding:0;flex-shrink:0;
  transition:all 0.14s;
}
.pg-mini-page{background:rgba(245,236,214,0.05);border-right:0.5px solid rgba(255,255,255,0.06)}
.pg-mini-page:last-child{border-right:none;border-left:0.5px solid rgba(255,255,255,0.06)}
.pg-mini-dot{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--mud-jade);box-shadow:0 0 6px var(--mud-jade-lt);
}
.pg-mini:hover{border-color:var(--mud-jade);box-shadow:0 0 0 1px var(--mud-jade-glow);}
.mc-item.not-mem .pg-mini-dot{background:rgba(216,200,154,0.55);}

/* β bottom ayah pane — populated when .mc-item is clicked */
.ayah-pane{
  margin-top:12px;padding:14px 16px;
  background:rgba(216,200,154,0.04);
  border-radius:10px;border:0.5px solid rgba(216,200,154,0.30);
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  transition:all 0.2s;min-height:50px;
}
.ayah-pane.is-empty{align-items:center;justify-content:center;padding:14px;}
.ayah-pane-hint{font-size:11px;color:var(--cream-faint);font-style:italic;}
.ayah-pane-hdr{display:flex;justify-content:space-between;width:100%;align-items:baseline;direction:ltr;}
.ayah-pane .ref-pill{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:600;
  color:var(--mud-jade);background:var(--mud-jade-bg);
  border:1px solid var(--mud-jade-bdr);
  padding:2px 9px;border-radius:99px;letter-spacing:0.04em;
}
.ayah-pane .sn-text{color:var(--cream-faint);font-size:12px;font-style:italic;font-family:'Fraunces',Georgia,serif;}
.ayah-pane-ar{
  font-family:'Amiri Quran','Amiri',serif;direction:rtl;text-align:right;
  font-size:22px;line-height:1.95;color:var(--cream);width:100%;
}
/* v187-isk44 · Subject-phrase glow inside the bottom ayah-pane · same
   treatment as the lede phrase (jade with soft text-shadow halo). */
.ayah-pane-ar mark.mud-subject{
  background:transparent;
  color:var(--mud-jade-lt);font-weight:500;
  text-shadow:0 0 12px var(--mud-jade-glow), 0 0 4px var(--mud-jade-glow-2);
  padding:0 2px;
}

/* Folded extras (dabit / mulahada) */
.mc-extra{margin-top:8px;}
.mc-extra summary{
  cursor:pointer;font-size:11px;color:var(--cream-faint);
  text-transform:uppercase;letter-spacing:0.12em;font-weight:600;
  padding:6px 10px;background:rgba(0,0,0,0.20);border-radius:6px;
  user-select:none;list-style:none;display:flex;align-items:center;gap:8px;
}
.mc-extra summary::-webkit-details-marker{display:none;}
.mc-extra summary::before{content:'▸';color:var(--mud-jade-lt);font-size:10px;transition:transform 0.2s;}
.mc-extra[open] summary::before{transform:rotate(90deg);}
.mc-extra summary:hover{background:rgba(0,0,0,0.30);color:var(--cream-dim);}
.mc-extra-body{
  padding:10px 12px;font-size:0.86rem;color:var(--cream-dim);
  line-height:1.7;background:rgba(0,0,0,0.18);
  border-radius:0 0 6px 6px;border-left:2px solid rgba(216,200,154,0.30);
  margin-left:6px;
}
.mc-extra-body .ar{
  font-family:'Amiri Quran','Amiri',serif;color:var(--cream);
  font-size:1.05em;padding:0 2px;
}
.mc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:10.5px;color:var(--cream-faint);font-style:italic;
  margin-top:10px;padding-top:8px;border-top:0.5px dashed rgba(255,255,255,0.06);
}
/* "↑ Back to index" pill — scrolls the .mud-aids-index back into view */
.mc-back-to-index{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;background:rgba(216,200,154,0.08);
  border:0.5px solid rgba(216,200,154,0.32);border-radius:99px;
  color:var(--mud-jade-lt);font-size:10.5px;font-weight:500;
  font-style:normal;cursor:pointer;
  font-family:inherit;letter-spacing:0;text-transform:none;
  transition:all 0.14s;
}
.mc-back-to-index:hover{background:rgba(216,200,154,0.16);border-color:var(--mud-jade);color:#fff;}
.mc-back-to-index .arr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;}

/* V1 mobile · floating "↑ verse-key" pill — bottom-right · fades in
   when the parent .verse-row's .v-top is out of viewport. Hidden on
   ≥780 px (the desktop two-pane layout makes it redundant). */
.mud-verse-fab{
  position:fixed;bottom:20px;right:20px;z-index:40;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px 8px 12px;
  background:rgba(22,28,34,0.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:0.5px solid rgba(216,200,154,0.34);
  border-radius:99px;
  color:var(--mud-jade-lt);font-size:11.5px;font-weight:500;cursor:pointer;
  font-family:inherit;letter-spacing:0;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform 0.22s ease, opacity 0.22s ease, background 0.14s, border-color 0.14s;
}
.mud-verse-fab.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.mud-verse-fab:hover{background:rgba(28,36,44,1);border-color:var(--mud-jade);}
.mud-verse-fab .arr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--mud-jade);}

/* ═══════════════════════════════════════════════════════════════════════
   v187-isk34-mudhish-index · Unified index + single-active-card pattern.
   Used by renderMudhishEntries when a verse has 2+ Mudhish entries
   anchored to it. Index rows on top · active .mc cluster below.
   ═══════════════════════════════════════════════════════════════════════ */
/* V1 mobile · stacked · sticky index pinned at top of scroll container.
   V8 desktop · 2-column grid (300 px index + flexible active) · index sticky in left column. */
.mud-aids{ display:flex; flex-direction:column; gap:10px; position:relative; }
.mud-aids.single .mud-aids-hdr,
.mud-aids.single .mud-aids-index{ display:none; }
.mud-aids-hdr{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--cream-faint); letter-spacing:0.14em;
  text-transform:uppercase; font-weight:600;
}
.mud-aids-icon{ font-size:14px; }
.mud-aids-title{ flex:1; }
.mud-aids-title b{ color:var(--mud-jade-lt); font-weight:700; }
.mud-aids-index{
  display:flex; flex-direction:column; gap:2px;
  max-height:240px; overflow-y:auto;
  background:rgba(0,0,0,0.18);
  border:0.5px solid rgba(216,200,154,0.18);
  border-radius:10px;
  padding:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(216,200,154,0.32) transparent;
  position:sticky; top:8px; z-index:5;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.mud-aids-index::-webkit-scrollbar{ width:5px; }
.mud-aids-index::-webkit-scrollbar-thumb{ background:rgba(216,200,154,0.32); border-radius:99px; }

/* v187-isk40 · Tier 2 tabs · 2-3 entries get a horizontal tab strip
   instead of the unified index. Each tab shows the entry's Arabic phrase
   + verse count. Active tab is jade-tinted; primary anchor gets an
   amber underline. Tabs sit above the .mud-aids-active card. */
.mud-aids-tabs{
  display:flex;gap:4px;
  background:rgba(0,0,0,0.18);
  border:0.5px solid rgba(216,200,154,0.18);
  border-radius:10px;padding:4px;
  overflow-x:auto;scrollbar-width:thin;
}
.mud-aids-tabs::-webkit-scrollbar{height:3px}
.mud-aids-tabs::-webkit-scrollbar-thumb{background:rgba(216,200,154,0.32);border-radius:99px}
.mud-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:7px;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--cream-dim);font:inherit;cursor:pointer;
  transition:background 0.14s, color 0.14s, border-color 0.14s;
  white-space:nowrap;flex:1;min-width:0;justify-content:space-between;
}
.mud-tab:hover{background:rgba(255,255,255,0.04);color:var(--cream);}
.mud-tab.active{
  background:rgba(216,200,154,0.12);
  color:var(--cream);
  border-bottom-color:var(--mud-jade);
}
.mud-tab.primary{ border-bottom-color:var(--mud-amber); }
.mud-tab.active.primary{ border-bottom-color:var(--mud-amber); }
.mud-tab-ar{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:15px;line-height:1.4;
  color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  direction:rtl;text-align:right;min-width:0;flex:1;
}
.mud-tab.active .mud-tab-ar{ color:var(--mud-jade-lt); text-shadow:0 0 8px rgba(216,200,154,0.40); }
.mud-tab-ct{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;font-weight:600;color:var(--cream-faint);
  background:rgba(0,0,0,0.30);padding:2px 7px;border-radius:99px;
  letter-spacing:0.04em;flex-shrink:0;
}
.mud-tab.active .mud-tab-ct{ background:rgba(216,200,154,0.20); color:var(--mud-jade-lt); }

/* v187-isk42 · Carousel-into-tabs · minimalistic ‹ › chevrons that flank
   the tab strip. No circles, no borders — just bare characters that step
   to the previous/next entry. Disabled at start/end of list. */
.mud-tab-arr{
  background:transparent;border:0;padding:0 10px;cursor:pointer;
  color:var(--cream-faint);font-size:18px;line-height:1;
  align-self:center;flex-shrink:0;
  transition:color 0.14s, opacity 0.14s;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:400;
}
.mud-tab-arr:hover{ color:var(--mud-jade-lt); }
.mud-tab-arr:active{ color:var(--mud-jade); }
/* Disabled · JS clamps; this is the visual hint */
.mud-aids-tabs:has(.mud-tab:first-of-type.active) .mud-tab-prev,
.mud-aids-tabs:has(.mud-tab:last-of-type.active) .mud-tab-next{
  opacity:0.25;cursor:not-allowed;
}

/* V8 · two-pane at ≥780 px · index left, active card right */
@media (min-width: 780px){
  .mud-aids:not(.single){
    display:grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    row-gap: 8px;
    align-items:start;
  }
  .mud-aids:not(.single) .mud-aids-hdr{
    grid-column: 1 / -1;
  }
  .mud-aids:not(.single) .mud-aids-index{
    grid-column: 1;
    grid-row: 2;
    max-height: calc(100vh - 120px);
    top: 64px;
  }
  .mud-aids:not(.single) .mud-aids-active{
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  /* Desktop hides the floating verse pill — the sticky index already keeps everything in reach */
  .mud-aids:not(.single) .mud-verse-fab{ display:none !important; }
}
/* V9 row · vertical accent bar lead, Arabic phrase body, count tail.
   No emoji, no catalog id. Jade bar = active. Amber bar = primary anchor. */
.mud-idx-row{
  display:grid;grid-template-columns:4px 1fr auto;align-items:stretch;gap:14px;
  padding:0;border-radius:6px;background:transparent;border:0;cursor:pointer;
  color:var(--cream-dim);font:inherit;text-align:left;width:100%;
  transition:background 0.14s, color 0.14s;overflow:hidden;
}
.mud-idx-row + .mud-idx-row{margin-top:2px;}
.mud-idx-row:hover{background:rgba(255,255,255,0.04);}
.mud-idx-row.active{background:rgba(216,200,154,0.10);color:var(--cream);}
.mud-idx-bar{background:transparent;border-radius:99px;margin:8px 0;}
.mud-idx-row.active .mud-idx-bar{background:var(--mud-jade);}
.mud-idx-row.primary .mud-idx-bar{background:var(--mud-amber);}
.mud-idx-body{
  padding:10px 0 10px 4px;
  display:flex;flex-direction:column;gap:1px;min-width:0;
}
.mud-idx-ar{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:19px;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  direction:rtl;text-align:right;line-height:1.4;
}
.mud-idx-row.active .mud-idx-ar{
  color:var(--mud-jade-lt);
  text-shadow:0 0 8px rgba(216,200,154,0.40);
}
.mud-idx-sub{
  font-size:10.5px;color:var(--cream-faint);
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;
}
.mud-idx-row.active .mud-idx-sub{color:var(--cream-dim);}
.mud-idx-count{
  padding:10px 14px 10px 0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;color:var(--cream-faint);
  letter-spacing:0.04em;align-self:center;
}
.mud-idx-row.active .mud-idx-count{color:var(--mud-jade-lt);}
.mud-aids-active{
  /* Just a passthrough container — the .mc cluster carries the chrome */
}

/* The .self class on .mc-item marks the verse the user is currently
   reading inside any entry's verse-list. Jade left-rail. */
.mc-item.self{
  background:rgba(216,200,154,0.10);
  box-shadow:inset 2px 0 0 var(--mud-jade);
}

/* ── al-Mudhish drilled card · M3 marginalia layout (legacy — kept for fallback) ─────────────────────── */
.M3-wrap{
  padding:8px 4px 8px 18px;
  background:transparent;
  border-left:2px solid #faf6e8;
  margin-bottom:6px;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .M3-wrap{ border-left-color:var(--cream-faint); }
.M3-tag{
  font-family:ui-monospace,Menlo,monospace;
  font-size:9px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:10px; opacity:0.85;
}
.M3-tag b{ color:var(--cream); font-weight:700; padding:0 3px; }
.M3-lede{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:14px; line-height:1.7; color:var(--cream);
  margin-bottom:14px;
}
.M3-lede em{ color:var(--cream); font-style:normal; font-weight:600; padding:0 2px; }
.M3-list{ list-style:none; padding:0; margin:0; counter-reset:m3; }
.M3-list li{
  counter-increment:m3;
  padding:6px 0 6px 30px; position:relative;
  line-height:1.65; font-size:13.5px; color:var(--cream-dim);
}
.M3-list li::before{
  content:counter(m3);
  position:absolute; left:0; top:7px;
  width:18px; height:18px; border-radius:50%;
  background:#faf6e8; color:var(--ms-ink, #2A1810);
  font-family:ui-monospace,Menlo,monospace;
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cream-faint);
}
.M3-list li b{
  color:var(--cream);
  font-family:'Amiri Quran','Amiri',serif;
  font-size:1.05em; font-weight:500; padding:0 2px;
}
.M3-list li .ref{
  font-family:ui-monospace,Menlo,monospace;
  font-size:9.5px; font-weight:700; padding:0 4px;
  color:var(--cream-faint);
}
.M3-list li .par{
  color:var(--cream-faint); font-size:0.92em; font-style:italic;
}

/* "In plain terms" highlighter section — every Mudhish card carries this */
.M3-plain{
  margin-top:16px;
  padding:11px 14px 13px;
  background:rgba(250, 246, 232, 0.10);
  border-left:3px solid var(--cream-faint);
  border-radius:0 6px 6px 0;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .M3-plain{ background:rgba(255, 251, 240, 0.62); border-left-color:var(--ms-ink-2, #5a4a35); }
.M3-plain-tag{
  display:inline-block;
  font-family:ui-monospace,Menlo,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:6px;
  padding:2px 8px;
  background:rgba(255,255,255,0.06);
  border-radius:3px;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .M3-plain-tag{ background:rgba(58,32,16,0.08); }
.M3-plain p{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:14px; line-height:1.75;
  color:var(--cream); margin:0;
}
.M3-plain p b{ color:var(--cream); font-style:normal; font-weight:600; padding:0 2px; }
.M3-plain p .pat{
  display:inline-block;
  font-family:ui-monospace,Menlo,monospace;
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:0.10em;
  color:var(--cream); padding:1px 6px;
  background:rgba(255,255,255,0.10);
  border:1px solid var(--cream-faint);
  border-radius:4px; margin:0 2px;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .M3-plain p .pat{ background:#fff; color:var(--ms-ink, #2A1810); border-color:var(--ms-ink-3, #7a6d4e); }

.M3-mnem{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:14px; color:var(--cream);
  margin-top:14px; padding:8px 0 0;
  border-top:1px dashed var(--cream-faint);
  opacity:0.95;
}
.M3-mnem em{ font-style:normal; font-weight:600; }
.M3-foot{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:12px; color:var(--cream-faint);
  margin-top:14px; opacity:0.85;
}

/* v186-isk5-mudhish-data · inline Arabic spans + note section + plain-body
   spacing. The .ar class is used inside dabit_en / translation / mawdu_en
   for inline Arabic phrases; render in Quran font, no italic. */
.M3-lede .ar,
.M3-list .ar,
.M3-plain .ar,
.M3-plain-body .ar,
.M3-note .ar,
.M3-note-body .ar{
  font-family:'Amiri Quran','Amiri',serif;
  font-style:normal; font-weight:500;
  color:var(--cream);
  padding:0 2px;
  letter-spacing:0;
}
.M3-plain-body{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; line-height:1.75; color:var(--cream); }
.M3-plain-body p{ margin:0 0 8px; }
.M3-plain-body p:last-child{ margin-bottom:0; }
.M3-plain-body em{ font-style:italic; font-weight:600; color:var(--cream); }
.M3-plain-body b, .M3-plain-body strong{ color:var(--cream); font-weight:600; font-style:normal; }
.M3-note{
  margin-top:12px;
  padding:10px 14px 11px;
  background:rgba(255,255,255,0.025);
  border-left:2px solid var(--cream-faint);
  border-radius:0 6px 6px 0;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .M3-note{ background:rgba(58,32,16,0.04); border-left-color:var(--ms-ink-2, #5a4a35); }
.M3-note-tag{
  display:inline-block;
  font-family:ui-monospace,Menlo,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:4px;
}
.M3-note-body{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:13.5px; line-height:1.7; color:var(--cream-dim);
}
.M3-note-body p{ margin:0 0 6px; }
.M3-note-body p:last-child{ margin-bottom:0; }

/* v186-isk6-not-mem-blur · grey out cross-referenced verses outside the
   user's memorized range. Variant E from preview-mudhish-not-mem.html:
   slight blur + dim, sharpens to full clarity on hover. The number circle
   stays unblurred so the row is still scannable.
   .not-mem class is added by renderMudhishEntries when inRange(s,v) is false. */
.M3-list li.not-mem{
  filter:blur(1.2px) opacity(0.70);
  transition:filter .25s, opacity .25s;
  cursor:help;
}
.M3-list li.not-mem:hover,
.M3-list li.not-mem:focus-within{
  filter:blur(0) opacity(1);
}
.M3-list li.not-mem::before{
  filter:blur(0);
  opacity:0.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v207 · Progress tab — v1 (hero) + v9 (working-on cards) + v3 (coverage grid)
   merge, plus a miniature v1-style hero inside the sidebar memorize widget
   with a WBW-style dot that opens the full Progress tab.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero · v4 nebula backdrop + v4a Manrope numeral ──────────────────── */
.pg-hero{
  text-align:center;
  padding:24px 0 28px;
  border-bottom:none;
  margin-bottom:16px;
  position:relative;
  overflow:visible;
}
.pg-hero::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* Larger ellipse area + soft blur so the leak feels gradual, not
     like a vignette with a sharp edge. */
  width:160%;height:260%;pointer-events:none;
  background:
    radial-gradient(ellipse 38% 30% at 50% 32%, rgba(93,171,232,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 50% 70%, rgba(255,208,112,0.22) 0%, rgba(224,122,48,0.12) 35%, transparent 75%);
  filter:blur(34px);
  z-index:0;
}
.pg-hero > *{position:relative;z-index:1}
.pg-hero .pg-eyebrow{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.32em;color:var(--gold-lt, #e7b035);text-transform:uppercase;margin-bottom:14px}
/* v207 · v4a · Manrope 200 geometric hero numeral on the nebula
   backdrop. Tall column-aligned digits, very tight letter-spacing,
   no flourish — quiet certainty over a glowing cosmic field. */
.pg-hero .pg-big{
  font:200 200px/0.88 'Manrope', -apple-system, sans-serif;
  letter-spacing:-0.04em;
  color:var(--cream);
  text-shadow:0 0 80px rgba(255,208,112,0.30),
              0 0 30px rgba(255,208,112,0.15);
  font-variant-numeric:tabular-nums;
}
.pg-hero .pg-big .sl{
  font-weight:200;
  color:var(--gold-lt,#e7b035);
  font-size:0.5em;vertical-align:0.40em;margin:0 0.10em;
}
.pg-hero .pg-big .tot{
  font-weight:200;
  color:var(--cream-faint);
  font-size:0.45em;
}
@media (max-width:720px){
  .pg-hero .pg-big{font-size:120px}
}
.pg-hero .pg-cap{font:italic 300 20px/1.4 'Fraunces',Georgia,serif;color:var(--cream-dim);margin-top:10px}
.pg-hero .pg-cap i{color:var(--gold-lt,#e7b035)}
.pg-hero .pg-sub{display:flex;justify-content:center;gap:48px;margin-top:18px;flex-wrap:wrap}
.pg-kstat{display:flex;flex-direction:column;gap:4px;align-items:center}
.pg-kstat .n{font:300 34px/1 'Fraunces',Georgia,serif;color:var(--cream)}
.pg-kstat .l{font:500 9.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.24em;color:var(--cream-faint);text-transform:uppercase}
@media (max-width:720px){
  .pg-hero .pg-big{font-size:104px}
  .pg-hero .pg-cap{font-size:16px}
  .pg-hero .pg-sub{gap:24px}
  .pg-kstat .n{font-size:24px}
}

/* ── Section headers ───────────────────────────────────────────────────── */
.pg-sec{margin-top:8px}
.pg-sec-hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:18px;border-bottom:0.5px solid var(--border);margin-bottom:24px;flex-wrap:wrap;gap:6px}
.pg-sec-hd h2{font:italic 200 30px/1 'Fraunces',Georgia,serif;margin:0;color:var(--cream)}
.pg-sec-hd h2 i{color:var(--gold-lt,#e7b035)}
.pg-sec-hd .meta{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-faint)}

/* v207 · Editorial italic tabs (v4) — Completed vs Working on. */
.pg-tabs{
  display:flex;gap:0;
  border-bottom:0.5px solid var(--border);
  margin-bottom:24px;
}
.pg-tab{
  padding:14px 20px;cursor:pointer;background:none;border:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font:italic 300 22px/1 'Fraunces',Georgia,serif;
  color:var(--cream-faint);
  display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  transition:color .15s, border-color .25s, background .15s;
}
.pg-tab i{font-style:italic;color:inherit}
.pg-tab:hover{color:var(--cream-dim)}
.pg-tab .cnt{
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  color:var(--cream-faint);background:rgba(255,255,255,0.05);
  padding:3px 8px;border-radius:6px;letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
}
.pg-tab.on{
  color:var(--cream);
  border-bottom-color:var(--gold-lt, #e7b035);
  box-shadow:0 8px 16px -10px color-mix(in srgb, var(--gold-lt, #e7b035) 55%, transparent);
}
.pg-tab.on i{color:var(--gold-lt, #e7b035)}
.pg-tab.on .cnt{background:rgba(255,208,112,0.14);color:var(--gold-lt, #e7b035)}

.pg-empty{
  padding:36px 22px;text-align:center;
  font:italic 300 15px/1.5 'Fraunces',Georgia,serif;
  color:var(--cream-faint);
}
.pg-empty b{color:var(--gold-lt, #e7b035);font-weight:400}

/* ── Working-on cards · v9 · cr-1 v1 (Rotating Nebula) ────────────────────
   Circle-as-card. Partial sūrahs get a plain mint ring; completed sūrahs
   get a JWST Cosmic Cliffs gradient stroke that slowly rotates around
   the rim, with a multi-layer drop-shadow glow. Arabic / English / %
   stack with explicit gap so they never overlap. Arabic is lifted via
   transform:translateY so it reads higher in the disc. Percent is in
   Manrope to differentiate from the display serif. */
.pg-cards{
  /* Horizontal row · RTL flow (right-to-left, matches Arabic) ·
     scroll if more cards than fit, but the scrollbar is hidden. */
  display:flex;
  flex-direction:row-reverse;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:24px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x proximity;
  /* Generous breathing space so each ring's drop-shadow glow
     isn't clipped by the container edge. Was 4px 2px 12px → felt
     too tight. */
  padding:18px 22px 26px;
  margin:0 -22px;   /* let cards breathe past the parent's padding */
  /* Hide the native scrollbar — the "bar that keeps popping up". */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* JWST nebula palette (sampled from Reference Folder/IMG_0030.jpg) */
  --neb-deep:#0a1428;
  --neb-blue:#1f4a9c;
  --neb-cyan:#5dabe8;
  --neb-glow:#ffd070;
  --neb-peach:#f5a060;
  --neb-orange:#e07a30;
  --neb-rust:#a04018;
}
.pg-cards::-webkit-scrollbar{display:none;width:0;height:0}
.pg-card{
  flex:0 0 168px;          /* slightly larger than 144 px so Arabic breathes */
  width:168px;height:168px;
  scroll-snap-align:start;
  padding:12px;
  border:0.5px solid var(--border);
  border-radius:50%;
  background:rgba(255,255,255,0.022);
  cursor:pointer;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  transition:transform .25s;
}
.pg-card:hover{transform:scale(1.05)}
.pg-card.complete{border-color:rgba(255,208,112,0.20)}
.pg-card svg.ring{
  position:absolute;inset:6px;
  width:calc(100% - 12px);height:calc(100% - 12px);
  transform:rotate(-90deg);
  pointer-events:none;overflow:visible;
  /* GPU compositing eliminates the sub-pixel shake on the rotating ring.
     transform-origin nailed to the exact centre prevents tiny wobble. */
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.pg-card svg.ring circle{fill:none}
.pg-card .track{stroke:rgba(255,255,255,0.06);stroke-width:3}
/* Partial sūrahs · mint ring, now rotating actively too (slower than
   the cosmic ring so the two states still feel distinct). */
.pg-card.partial .fill-mint{
  stroke:var(--ms-mint, #a7d7c5);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ms-mint, #a7d7c5) 35%,transparent));
}
.pg-card.partial svg.ring{animation:pgCardSpin 22s linear infinite}
/* Completed · animated cosmic gradient + glow.
   Spin direction: RIGHT → LEFT (counter-clockwise) to match Arabic
   reading flow. */
.pg-card.complete svg.ring{animation:pgCardSpin 14s linear infinite}
/* translate3d forces a GPU layer so the rotation interpolates on a
   compositor thread instead of being re-rasterised every frame —
   that's what was causing the slight shake. */
@keyframes pgCardSpin{
  from{transform:translate3d(0,0,0) rotate(270deg)}
  to{transform:translate3d(0,0,0) rotate(-90deg)}
}
.pg-card.complete .fill-cosmic{
  stroke:url(#pg-cosmic-grad);
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--neb-orange) 50%,transparent))
         drop-shadow(0 0 14px color-mix(in srgb,var(--neb-glow) 35%,transparent));
}
/* Centered text stack inside the ring · gap prevents overlap · raised */
.pg-card .ctr{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  /* Tighter cap so long Arabic names (e.g. آل عمران) don't kiss the
     ring's inner edge. 70 % of 168 px = ~118 px clear interior. */
  max-width:70%;
  text-align:center;
  /* Lift the stack slightly so Arabic reads in the upper half */
  transform:translateY(-4px);
}
.pg-card .ar{
  font-family:var(--font-quran,'Amiri Quran','Amiri',serif);
  /* Down from 30 → 25 px. Long names now fit inside the 70 % cap
     without overflowing the disc. */
  font-size:25px;line-height:1.05;
  color:var(--cream);
  direction:rtl;
  margin:0;
  /* Keep on one line. Long names just get rendered slightly smaller
     by the browser if needed — they won't escape the container. */
  white-space:nowrap;
  max-width:100%;
}
.pg-card .en{
  font:italic 300 12px/1 'Fraunces',Georgia,serif;
  color:var(--cream-dim);
  letter-spacing:-0.005em;
  margin:0;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pg-card .en i{color:var(--neb-glow);font-style:italic}
.pg-card .pct{
  font:500 18px/1 'Manrope',-apple-system,sans-serif;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.01em;
  margin:0;
  padding-top:3px;
  font-weight:600;
}
.pg-card .pct .of{
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  color:var(--cream-faint);
  letter-spacing:0.06em;
  padding-left:2px;
  font-weight:500;
}
.pg-card.complete .ar{color:var(--neb-glow);text-shadow:0 0 12px color-mix(in srgb,var(--neb-glow) 40%,transparent)}
.pg-card.complete .en i{color:var(--neb-peach)}
.pg-card.complete .pct{color:var(--neb-glow);font-weight:600;text-shadow:0 0 10px color-mix(in srgb,var(--neb-glow) 40%,transparent)}
/* Honor reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .pg-card.complete svg.ring{animation:none}
}

/* ── Coverage grid (v3) · 8 cols, big text, no Arabic cutoff ──────────── */
.pg-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
@media (max-width:880px){.pg-grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:600px){.pg-grid{grid-template-columns:repeat(4,1fr)}}
.pg-cell{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,0.025);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 8px;overflow:hidden;cursor:pointer;transition:transform .15s}
.pg-cell:hover{transform:scale(1.04);z-index:2}
.pg-cell .n{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.08em;color:var(--cream-faint);font-variant-numeric:tabular-nums;position:relative;z-index:2}
.pg-cell .en{font:italic 300 12.5px/1.1 'Fraunces',Georgia,serif;color:var(--cream);text-align:center;position:relative;z-index:2;letter-spacing:-0.005em;max-width:100%;word-break:keep-all}
.pg-cell .ar{font-family:var(--font-quran,'Amiri Quran','Amiri',serif);font-size:16px;line-height:1.15;color:var(--cream-dim);direction:rtl;text-align:center;position:relative;z-index:2;white-space:normal;word-break:keep-all;max-width:100%;padding:0 2px}
.pg-cell.mem{background:linear-gradient(180deg,var(--acc-success, #86d0a8),var(--ms-mint-2, #85c4ad));box-shadow:0 0 8px color-mix(in srgb,var(--acc-success, #86d0a8) 35%,transparent)}
.pg-cell.mem .n{color:rgba(13,9,7,0.55)}
.pg-cell.mem .en{color:rgba(13,9,7,0.92)}
.pg-cell.mem .ar{color:rgba(13,9,7,0.92)}
.pg-cell.partial{background:rgba(255,255,255,0.03)}
.pg-cell.partial::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--p,50%);background:linear-gradient(180deg,color-mix(in srgb,var(--ms-mint, #a7d7c5) 55%,transparent),color-mix(in srgb,var(--ms-mint, #a7d7c5) 88%,transparent));z-index:0}
.pg-cell.partial .n{color:var(--cream-faint)}
.pg-cell.partial .en{color:var(--cream)}
.pg-cell.partial .ar{color:var(--cream)}

.pg-legend{display:flex;justify-content:center;gap:24px;margin-top:24px;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.18em;color:var(--cream-faint);text-transform:uppercase;flex-wrap:wrap;align-items:center}
.pg-legend .item{display:flex;align-items:center;gap:8px}
.pg-legend .sw{display:inline-block;width:14px;height:14px;border-radius:3px}
.pg-legend .sw.untouched{background:rgba(255,255,255,0.025)}
.pg-legend .sw.partial{background:linear-gradient(180deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.03) 50%,color-mix(in srgb,var(--ms-mint, #a7d7c5) 88%,transparent) 50%,color-mix(in srgb,var(--ms-mint, #a7d7c5) 55%,transparent) 100%)}
.pg-legend .sw.mem{background:var(--acc-success, #86d0a8)}

/* ── Sidebar mini · o3 MEGA ORB ───────────────────────────────────────
   The orb dominates the memorize widget. Label + verse count +
   "Memorized" + percent all live inside the rotating cosmic ring.
   The orb itself is the click target — bottom-right "›" gold badge
   tells you it opens the full Progress tab.
   Spin direction: counter-clockwise to match the Progress-tab cards. */
.sb-hero{
  position:relative;
  padding:20px 14px 18px;
  text-align:center;
  border-bottom:0.5px solid var(--border);
  background:radial-gradient(ellipse at center top, rgba(212,148,14,0.06) 0%, transparent 70%);
}
.sb-hero .sb-orb{
  position:relative;
  width:220px;height:220px;
  margin:0 auto;
  display:grid;place-items:center;
  cursor:pointer;
  border-radius:50%;
  transition:transform .25s, filter .25s;
}
.sb-hero .sb-orb:hover{transform:scale(1.035)}
.sb-hero .sb-orb svg.sb-ring{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
  animation:sbOrbSpin 18s linear infinite;
}
@keyframes sbOrbSpin{
  from{transform:translate3d(0,0,0) rotate(270deg)}
  to{transform:translate3d(0,0,0) rotate(-90deg)}
}
@media (prefers-reduced-motion: reduce){.sb-hero .sb-orb svg.sb-ring{animation:none}}
.sb-hero .sb-orb svg.sb-ring circle{fill:none}
.sb-hero .sb-orb .sb-track{stroke:rgba(255,255,255,0.08);stroke-width:3}
.sb-hero .sb-orb .sb-fill{
  stroke:url(#sb-orb-grad);
  stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 4px color-mix(in srgb, #e07a30 55%, transparent))
         drop-shadow(0 0 12px color-mix(in srgb, #ffd070 35%, transparent));
}
.sb-hero .sb-orb:hover .sb-fill{
  filter:drop-shadow(0 0 7px color-mix(in srgb, #e07a30 75%, transparent))
         drop-shadow(0 0 18px color-mix(in srgb, #ffd070 55%, transparent))
         drop-shadow(0 0 30px color-mix(in srgb, #f5a060 35%, transparent));
}
/* Centered content stack — eyebrow / count / label / % */
.sb-hero .sb-orb .sb-ctr{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;padding:0 22px;
}
.sb-hero .sb-eb{font:500 8.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.30em;color:var(--gold-lt,#e7b035);text-transform:uppercase;margin:0 0 4px}
.sb-hero .sb-big{
  font:italic 400 38px/0.95 'Cormorant Garamond', Georgia, serif;
  letter-spacing:-0.018em;color:var(--cream);
  font-variant-numeric:tabular-nums oldstyle-nums;
  font-feature-settings:"ss01","swsh","calt";
  text-shadow:0 0 16px rgba(255,208,112,0.20);
}
.sb-hero .sb-big .sl{font-style:italic;color:var(--gold-lt,#e7b035);font-size:0.55em;vertical-align:0.30em;margin:0 0.03em}
.sb-hero .sb-big .tot{font-style:italic;color:var(--cream-faint);font-size:0.45em}
.sb-hero .sb-lbl{font:500 8.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.22em;color:var(--cream-faint);text-transform:uppercase;margin-top:5px}
.sb-hero .sb-pct{
  font:500 14px/1 'Manrope',-apple-system,sans-serif;font-weight:600;
  color:var(--gold-lt,#e7b035);font-variant-numeric:tabular-nums;
  margin-top:3px;
  text-shadow:0 0 10px color-mix(in srgb, #ffd070 40%, transparent);
}
/* Bottom-right launch badge — opens the Progress tab */
.sb-hero .sb-nav-badge{
  position:absolute;bottom:6%;right:6%;
  width:24px;height:24px;border-radius:50%;
  background:var(--gold-lt,#e7b035);color:#1a1410;
  display:grid;place-items:center;
  font:600 13px/1 -apple-system, sans-serif;
  box-shadow:0 0 12px color-mix(in srgb, #ffd070 60%, transparent);
  border:1px solid rgba(13,9,7,0.5);
  transition:transform .15s;
  pointer-events:none;
}
.sb-hero .sb-orb:hover .sb-nav-badge{transform:scale(1.12)}

/* Light-theme overrides · the SVG gradient + white-track stroke above are
   tuned for dark backgrounds. On the 12 light site themes the navy/rust
   ends of the gradient + the 8% white track vanish into cream paper.
   Replace with token-driven stroke (--ms-mint) that adapts per theme,
   and darken the track for visibility. */
html[data-ui="mushaf"]    .sb-hero .sb-orb .sb-track,
html[data-ui="medina"]    .sb-hero .sb-orb .sb-track,
html[data-ui="notion"]    .sb-hero .sb-orb .sb-track,
html[data-ui="tarteel"]   .sb-hero .sb-orb .sb-track,
html[data-ui="qcom-light"].sb-hero .sb-orb .sb-track,
html[data-ui="qcom-light"] .sb-hero .sb-orb .sb-track,
html[data-ui="arc"]       .sb-hero .sb-orb .sb-track,
html[data-ui="material"]  .sb-hero .sb-orb .sb-track,
html[data-ui="ia"]        .sb-hero .sb-orb .sb-track,
html[data-ui="madinah"]   .sb-hero .sb-orb .sb-track,
html[data-ui="ottoman"]   .sb-hero .sb-orb .sb-track,
html[data-ui="alhambra"]  .sb-hero .sb-orb .sb-track,
html[data-ui="zamzam"]    .sb-hero .sb-orb .sb-track {
  stroke: var(--ms-hair-3, rgba(0,0,0,0.12));
}
html[data-ui="mushaf"]    .sb-hero .sb-orb .sb-fill,
html[data-ui="medina"]    .sb-hero .sb-orb .sb-fill,
html[data-ui="notion"]    .sb-hero .sb-orb .sb-fill,
html[data-ui="tarteel"]   .sb-hero .sb-orb .sb-fill,
html[data-ui="qcom-light"].sb-hero .sb-orb .sb-fill,
html[data-ui="qcom-light"] .sb-hero .sb-orb .sb-fill,
html[data-ui="arc"]       .sb-hero .sb-orb .sb-fill,
html[data-ui="material"]  .sb-hero .sb-orb .sb-fill,
html[data-ui="ia"]        .sb-hero .sb-orb .sb-fill,
html[data-ui="madinah"]   .sb-hero .sb-orb .sb-fill,
html[data-ui="ottoman"]   .sb-hero .sb-orb .sb-fill,
html[data-ui="alhambra"]  .sb-hero .sb-orb .sb-fill,
html[data-ui="zamzam"]    .sb-hero .sb-orb .sb-fill {
  stroke: var(--ms-mint, #2f9c5a);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ms-mint, #2f9c5a) 35%, transparent));
}
html[data-ui="mushaf"]    .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="medina"]    .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="notion"]    .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="tarteel"]   .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="qcom-light"].sb-hero .sb-orb:hover .sb-fill,
html[data-ui="qcom-light"] .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="arc"]       .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="material"]  .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="ia"]        .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="madinah"]   .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="ottoman"]   .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="alhambra"]  .sb-hero .sb-orb:hover .sb-fill,
html[data-ui="zamzam"]    .sb-hero .sb-orb:hover .sb-fill {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ms-mint, #2f9c5a) 60%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, var(--ms-mint, #2f9c5a) 30%, transparent));
}

/* ═══════════════════════════════════════════════════════════════════════════
   v207 · Hub · v4 stacked cosmic rows + h4 starscape header.
   Editorial italic Cormorant titles · category-tinted halos bleed from the
   left of each row · 15 scattered stars + soft glow behind the greeting.
   Each row preserves its existing data-hub-target wiring; only the visual
   treatment changes here.
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-hub-v207{
  /* v207 · Preview palette — vibrant category colors but applied at
     lower intensity than the preview (opacity + softer gradients).
     Reads as colourful, not loud. */
  --cat-quran:   #e7b035;
  --cat-arabic:  #5dabe8;
  --cat-memo:    #86d0a8;
  --cat-practice:#f5a060;
  --cat-comm:    #ec8a6c;
  /* Lock cosmic palette regardless of active theme — alt2 is a
     dark-cosmic design; bending it to theme-tokens collapses contrast. */
  --cream:       #efe7d5;
  --cream-dim:   rgba(239,231,213,0.78);
  --cream-faint: rgba(239,231,213,0.55);
  --border:      rgba(239,231,213,0.10);
  --gold-lt:     #e7b035;
  --c-gold:      #ffd070;
  background:radial-gradient(ellipse at top, #0a1424 0%, #06080d 70%);
  color:var(--cream);
  padding:0;
  min-height:100vh;
}

/* ── Greet header + h4 starscape ─────────────────────────────────────── */
.ms-hub-v207 .ms-hub-greet{
  position:relative;
  padding:80px 36px 56px;
  text-align:center;
  overflow:visible;
  min-height:300px;
}
.ms-hub-v207 .ms-hub-greet::before{
  content:"";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90%;height:180%;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 38% 30% at 50% 38%, rgba(93,171,232,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 50% 70%, rgba(255,208,112,0.18) 0%, rgba(224,122,48,0.10) 35%, transparent 75%);
  filter:blur(32px);
}
.ms-hub-v207 .ms-hub-greet > *{position:relative;z-index:1}

.ms-hub-v207 .ms-hub-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.ms-hub-v207 .ms-hub-stars .s{position:absolute;border-radius:50%}
.ms-hub-v207 .ms-hub-stars .s.cy{background:#7ec8f5;box-shadow:0 0 6px #7ec8f5}
.ms-hub-v207 .ms-hub-stars .s.go{background:#ffd070;box-shadow:0 0 6px #ffd070}
.ms-hub-v207 .ms-hub-stars .s.pe{background:#f8b885;box-shadow:0 0 6px #f8b885}
.ms-hub-v207 .ms-hub-stars .s.wh{background:#fff5dc;box-shadow:0 0 7px #fff5dc}
.ms-hub-v207 .ms-hub-stars .s.sm{width:2px;height:2px;opacity:0.7}
.ms-hub-v207 .ms-hub-stars .s.md{width:3px;height:3px;opacity:0.85}
.ms-hub-v207 .ms-hub-stars .s.lg{width:4px;height:4px;opacity:1}

.ms-hub-v207 .ms-hub-stamp{
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.32em;color:var(--gold-lt, #e7b035);text-transform:uppercase;
  margin:0 0 18px;
}
.ms-hub-v207 .ms-hub-greet h1{
  font:italic 200 60px/1.05 'Fraunces',Georgia,serif;
  margin:0;color:var(--cream);letter-spacing:-0.005em;
}
.ms-hub-v207 .ms-hub-greet h1 em{
  font-style:italic;color:var(--gold-lt, #e7b035);
}
.ms-hub-v207 .ms-hub-ar{
  font-family:var(--font-quran, 'Amiri Quran','Amiri',serif);
  font-size:22px;color:var(--c-gold, #ffd070);
  margin-top:14px;
  text-shadow:0 0 14px color-mix(in srgb, #ffd070 35%, transparent);
}

/* ── Byline ribbon · keep the existing tokenized stats but in the new context */
.ms-hub-v207 .ms-hub-byline{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:14px 36px 0;
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.22em;color:var(--cream-faint);text-transform:uppercase;
}
.ms-hub-v207 .ms-hub-byline b{
  font:300 18px/1 'Fraunces',Georgia,serif;font-style:italic;
  color:var(--gold-lt, #e7b035);padding-right:5px;font-variant-numeric:tabular-nums;
}
.ms-hub-v207 .ms-hub-byline-sep{color:rgba(239,231,213,0.25);align-self:center}

/* ── 48 px spacer with 3-dot ornament between greet and rows ──────────── */
.ms-hub-v207 .ms-hub-spacer{
  height:48px;position:relative;margin:24px 0 8px;
}
.ms-hub-v207 .ms-hub-spacer::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:6px;
  background:
    radial-gradient(circle at 4px 50%, rgba(212,148,14,0.45) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 40px 50%, rgba(212,148,14,0.65) 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 76px 50%, rgba(212,148,14,0.45) 0 1.8px, transparent 2.2px);
  filter:drop-shadow(0 0 4px color-mix(in srgb, #ffd070 50%, transparent));
}

/* ── alt2 · Category rail · no card backgrounds ────────────────────────
   Each hub becomes a borderless text row separated by a hairline. A
   coloured 3 px left rail (with soft glow) is the only chrome. Hover
   pushes the row right + grows the rail. Pairs cleanly with the
   starscape header above. */
/* Variant A · Magazine Front — Qurʾan as 2×2 hero tile · 4 satellites
   in a 2-col grid to the right. Each tile has a radial bloom in its
   category color + hairline border. Italic Fraunces titles, mono
   eyebrow + foot, italic Cormorant prose. */
.ms-hub-v207 .ms-hub-panel{padding:8px 30px 60px}
.ms-hub-v207 .ms-hub-cards{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;
}
.ms-hub-v207 .ms-hub-card{
  position:relative;display:flex;flex-direction:column;
  padding:16px 16px 14px;
  border:0.5px solid var(--border);border-radius:12px;
  background:linear-gradient(140deg, color-mix(in srgb, var(--cat) 8%, transparent), transparent 65%);
  overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;
  min-height:104px;
  transition:transform .2s, border-color .2s;
}
.ms-hub-v207 .ms-hub-card::before{display:none}
.ms-hub-v207 .ms-hub-card::after{
  content:"";position:absolute;left:-15%;top:-20%;
  width:65%;height:65%;
  background:radial-gradient(ellipse, var(--cat) 0%, transparent 65%);
  opacity:0.16;filter:blur(38px);pointer-events:none;display:block;
}
.ms-hub-v207 .ms-hub-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--cat) 30%, transparent);
  background:linear-gradient(140deg, color-mix(in srgb, var(--cat) 8%, transparent), transparent 65%);
}
.ms-hub-v207 .ms-hub-card.hero{
  grid-row:1/3;grid-column:1/2;
  justify-content:space-between;
  min-height:216px;padding:22px 22px 20px;
}
.ms-hub-v207 .ms-hub-card .top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;position:relative;z-index:1;
}
.ms-hub-v207 .ms-hub-card .num{
  font:600 9px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-faint);
}
.ms-hub-v207 .ms-hub-card .glyph{
  font-family:var(--font-quran, 'Amiri Quran','Amiri',serif);
  font-size:18px;color:var(--cat);
  text-shadow:0 0 14px color-mix(in srgb, var(--cat) 35%, transparent);
}
.ms-hub-v207 .ms-hub-card.hero .glyph{font-size:28px}
.ms-hub-v207 .ms-hub-card h3{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:20px;line-height:1.05;letter-spacing:-0.012em;
  margin:6px 0 0;color:var(--cream);position:relative;z-index:1;
  font-feature-settings:"kern" 1, "liga" 1;
}
.ms-hub-v207 .ms-hub-card.hero h3{font-size:38px;margin-top:14px;letter-spacing:-0.018em}
.ms-hub-v207 .ms-hub-card h3 em{
  font:inherit;color:var(--cat);
}
.ms-hub-v207 .ms-hub-card p{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;
  font-size:12px;line-height:1.45;
  color:var(--cream-dim);margin:6px 0 0;position:relative;z-index:1;
}
.ms-hub-v207 .ms-hub-card.hero p{font-size:13.5px;max-width:420px;margin-top:10px}
.ms-hub-v207 .ms-hub-card .foot{
  margin-top:auto;padding-top:10px;
  font:600 9px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.20em;color:var(--cat);text-transform:uppercase;
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:baseline;
}
.ms-hub-v207 .ms-hub-card .foot .arrow{font-size:12px}
.ms-hub-v207 .ms-hub-card[data-cat="quran"]   {--cat:var(--cat-quran)}
.ms-hub-v207 .ms-hub-card[data-cat="arabic"]  {--cat:var(--cat-arabic)}
.ms-hub-v207 .ms-hub-card[data-cat="memo"]    {--cat:var(--cat-memo)}
.ms-hub-v207 .ms-hub-card[data-cat="practice"]{--cat:var(--cat-practice)}
.ms-hub-v207 .ms-hub-card[data-cat="comm"]    {--cat:var(--cat-comm)}

/* Responsive */
@media (max-width:780px){
  .ms-hub-v207 .ms-hub-greet{padding:56px 22px 40px}
  .ms-hub-v207 .ms-hub-greet h1{font-size:42px}
  .ms-hub-v207 .ms-hub-panel{padding:8px 18px 60px}
  .ms-hub-v207 .ms-hub-cards{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .ms-hub-v207 .ms-hub-card.hero{grid-row:auto;grid-column:1/-1;min-height:240px;padding:24px}
  .ms-hub-v207 .ms-hub-card.hero:hover{padding:24px}
  .ms-hub-v207 .ms-hub-card.hero h3{font-size:36px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v213 · Sidebar surah picker (V3 minimal · inline search)
   ─────────────────────────────────────────────────────────────────────
   Shown only on Reader (view-browse) and Mushaf (view-placehold1) views.
   Replaces the default Memorized list there. Picks route via JS to the
   active view's handler.
   ═══════════════════════════════════════════════════════════════════════ */

/* v213-isk2 · Mushaf view: NO sidebar. The mushaf renderer has its
   own chrome (page nav, surah jump, theme, ink, drills) so the host
   sidebar is redundant noise. Hide it entirely + hide the toggle FAB. */
.sb-surah-pick{display:none}
body[data-view="placehold1"] .sidebar,
body[data-view="placehold1"] .sb-toggle,
body[data-view="placehold1"] .sb-backdrop{display:none !important}

.sb-sp-head{
  padding:12px 14px 10px;
  border-bottom:1px solid var(--border, rgba(232,221,208,.10));
  display:flex;flex-direction:column;gap:8px;
}
.sb-sp-label{
  font:600 9px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.32em;text-transform:uppercase;color:var(--cream-faint, #7A8D99);
  padding:2px 0;
}
.sb-sp-search{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;background:rgba(0,0,0,.32);
  border:1px solid var(--border-mid, rgba(232,221,208,.18));
  border-radius:8px;transition:border-color .15s;
}
.sb-sp-search:focus-within{border-color:var(--gold-bdr, rgba(212,175,55,.36))}
.sb-sp-search svg{flex-shrink:0;color:var(--cream-faint, #7A8D99)}
.sb-sp-search input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--cream, #E8DDD0);font:500 12px 'Manrope',sans-serif;letter-spacing:.005em;
  min-width:0;
}
.sb-sp-search input::placeholder{color:var(--cream-faint, #7A8D99)}

.sb-sp-list{
  flex:1;overflow-y:auto;padding:6px 0;
}
.sb-sp-row{
  display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;
  padding:7px 14px;cursor:pointer;
  border-left:2px solid transparent;transition:background .12s, border-left-color .12s;
}
.sb-sp-row:hover{background:rgba(232,221,208,.04);border-left-color:rgba(212,175,55,.32)}
.sb-sp-row.on{background:rgba(212,175,55,.08);border-left-color:var(--gold-lt, #E2C172)}
.sb-sp-row .n{
  font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;
  color:var(--cream-faint, #7A8D99);text-align:right;font-variant-numeric:tabular-nums;
}
.sb-sp-row.on .n{color:var(--gold-lt, #E2C172)}
.sb-sp-row .name{display:flex;flex-direction:column;gap:1px;min-width:0}
.sb-sp-row .ar{
  font:400 14.5px/1 'Amiri Quran',serif;color:var(--cream, #E8DDD0);direction:rtl;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
}
.sb-sp-row .en{font:500 11px/1 'Manrope',sans-serif;color:var(--cream-dim, #B8AC9C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sp-row .v{font:500 9px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint, #7A8D99)}

.sb-sp-empty{
  padding:24px 14px;text-align:center;
  font:400 italic 12px/1.5 'Cormorant Garamond',Georgia,serif;color:var(--cream-faint, #7A8D99);
}