/* ═══════════════════════════════════════════════════════════════════════════
   styles/topbar.css — Qurʾan top bar · GREEN register · DARK mode
   ─────────────────────────────────────────────────────────────────────────
   Accent matches the strong/mint from the hub (--m-strong: #5fb594).
   Light-mode variant: handled via the per-theme `--ms-*` aliases in
   styles/themes.css — `header.hdr` derives its tokens from them so it
   recolors automatically. (The old standalone styles/topbar-light.css
   was deleted at v188-isk1; it never had a `<link>` from any page.)

   Loaded AFTER main.css so these rules win on cascade order.

   Hides:
     • Domain switcher (Qurʾan / Arabic / Commentary)
     • #hdr-bot-arabic, #hdr-bot-commentary

   Re-skins:
     • Header → glass + hairline
     • Brand → Fraunces serif + Amiri Quran for the Arabic
     • Sub-tabs → mint-green pill on active
     • Util buttons → round 38px with mint hover ring

   To revert: delete the <link> in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Local tokens (scoped to header) ─────────────────────────────────
   v208 · Derived from --ms-* so the topbar follows the site-wide
   light/dark mode toggle. The fallback values keep the historical
   dark palette if --ms-* aren't available (e.g. a page without
   manuscript.css linked). */
header.hdr {
  --tb-bg:        color-mix(in oklab, var(--ms-bg, #0e1418) 78%, transparent);
  --tb-rule:      var(--ms-hair-2, rgba(232, 228, 216, 0.10));
  --tb-rule-hi:   var(--ms-hair, rgba(232, 228, 216, 0.06));
  --tb-ink:       var(--ms-ink, #e8dfc8);
  --tb-ink-2:     var(--ms-ink-2, #a89e88);
  --tb-ink-3:     var(--ms-ink-3, #7a7266);
  --tb-accent:    var(--ms-mint, #5fb594);
  --tb-accent-2:  var(--ms-mint-2, #7dc9a8);
  --tb-accent-bg: var(--ms-mint-soft, rgba(95, 181, 148, 0.10));
  --tb-accent-rule: var(--ms-mint-rim, rgba(95, 181, 148, 0.32));
}

/* ── Hide domain references ────────────────────────────────────────── */
.domain-row,
#hdr-bot-arabic,
#hdr-bot-commentary { display: none !important; }

/* The Quran sub-tab strip stays visible on EVERY view (Mushaf,
   Word-by-word, Priorities, Progress, Practice). The legacy setDomain()
   tries to hide it when switching to Arabic/Commentary; this overrides. */
#hdr-bot-quran { display: flex !important; }

/* Kill the legacy "Mushaf ribbon" — vertical gold/teal gradient line
   that main.css :before-injects into .sb-list. Replaced by the sparkle
   dots in the manuscript sidebar. */
.sb-list::before, #sb-list::before { display: none !important; content: none !important; }

/* ════════════════════════════════════════════════════════════════════
   MANUSCRIPT SIDEBAR — ported from preview-sidebars.html into the live
   site. Rendered into #sb-list by renderSidebar() with real data.
     • English first, Arabic right
     • Sūrah / Juzʾ / Hizb segmented toggle (mode persists in localStorage)
     • Sparkle dots show scholar coverage per surah:
         gold  = Sakhāwī
         cyan  = Kirmānī
         pink  = Iskāfī
   ════════════════════════════════════════════════════════════════════ */

/* The .sidebar wrapper is from main.css (flex 260px). Override its bg
   slightly to match the new tone, drop the heavy border. */
.sidebar {
  background: var(--bg-1, #111921);
  border-right: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08)) !important;
  width: 280px !important;
  min-width: 280px !important;
  transition: width .22s ease, min-width .22s ease;
  position: relative;
}

/* Collapsed state — only the expand handle is visible */
.sidebar.collapsed {
  width: 44px !important;
  min-width: 44px !important;
  overflow: hidden;
  cursor: pointer;          /* tap-anywhere-to-expand affordance */
}
/* The WBW dot keeps its own cursor (it's a button, not an expand
   target). Hover on the rest of the collapsed rail still hints
   clickability via the cursor:pointer above. */
.sidebar.collapsed .ms-wbw-circle { cursor: pointer; }
.sidebar.collapsed .ms-sidebar > .ms-hd,
.sidebar.collapsed .ms-sidebar > .ms-list-wrap { display: none; }
/* When collapsed, keep the WBW circle pinned to the bottom but hide
   the label so just the dot peeks out at the 44 px collapsed width. */
.sidebar.collapsed .ms-sidebar > .ms-ft {
  padding: 10px 0 14px;
  border-top: 0;
}
.sidebar.collapsed .ms-ft-row { justify-content: center; }
.sidebar.collapsed .ms-ft-label { display: none; }
.sidebar.collapsed .ms-expand { display: flex; }
.ms-expand {
  display: none;
  width: 100%; padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08));
  cursor: pointer;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--tb-ink-3, #8a8576);
  transition: color .15s, background .15s;
}
.ms-expand:hover { color: var(--tb-accent, #5fb594); background: var(--tb-accent-bg, rgba(95,181,148,0.06)); }

/* Collapse button inside the header (when expanded) */
.ms-collapse {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--tb-ink-3, #8a8576);
  border-radius: 4px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.ms-collapse:hover { color: var(--tb-accent, #5fb594); background: var(--tb-accent-bg, rgba(95,181,148,0.06)); }

/* Hide the old hand-typed "Memorized" label — renderSidebar emits its own. */
.sidebar > .sb-hdr { display: none; }

/* The renderSidebar root — fills the .sidebar */
.ms-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Header (toggle + counts) ──────────────────────────────────────── */
.ms-hd {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08));
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.ms-hd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tb-ink-3, #8a8576);
}
.ms-ct { color: var(--tb-accent, #5fb594); }

.ms-grp {
  display: inline-flex;
  background: var(--bg-2, #131c24);
  border: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08));
  border-radius: 999px;
  padding: 2px;
  width: 100%;
}
.ms-grp-btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tb-ink-3, #8a8576);
  cursor: pointer;
  transition: all .18s;
}
.ms-grp-btn:hover { color: var(--tb-ink-2, #b6b0a2); }
.ms-grp-btn.active {
  background: var(--tb-accent-bg, rgba(95,181,148,0.10));
  color: var(--tb-accent, #5fb594);
  font-weight: 600;
  box-shadow: 0 0 0 0.5px var(--tb-accent-rule, rgba(95,181,148,0.32)),
              0 0 8px rgba(95, 181, 148, 0.18);
}

/* ── Memorized counter · progress ring (v188-isk29) ─────────────────
   Replaces the old faint "{N} memorized" text line. SVG ring fills
   surahs-memorized / 114; number sits in the centre; label +
   percentage caption to the right. Theme-aware via --tb-accent. */
.ms-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 2px;
}
.ms-counter-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.ms-counter-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ms-counter-track {
  fill: none;
  stroke: var(--cream-ghost, rgba(232,228,216,0.10));
  stroke-width: 2;
}
.ms-counter-fill {
  fill: none;
  stroke: var(--tb-accent, #5fb594);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
}
.ms-counter-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--tb-ink-1, #e8e4d8);
  font-variant-numeric: tabular-nums;
}
.ms-counter-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ms-counter-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tb-ink-3, #8a8576);
  line-height: 1;
}
.ms-counter-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--tb-ink-2, #b6b0a2);
  font-variant-numeric: tabular-nums;
}

/* ── List wrapper ──────────────────────────────────────────────────── */
.ms-list-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ── Footer · single circular WBW toggle (v188-isk24) ──────────────
   Pinned to the bottom of .ms-sidebar (flex column) via margin-top:auto.
   Reader is always the default; the ring fills with the theme accent
   when the WBW overlay is on. Hidden when sidebar is collapsed (rule
   above on .sidebar.collapsed). */
.ms-ft {
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08));
  flex-shrink: 0;
}
.ms-ft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ms-ft-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tb-ink-3, #8a8576);
}
.ms-wbw-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--tb-ink-3, #8a8576) 80%, transparent);
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all .18s ease;
  position: relative;       /* anchor for ::before hit slug */
}
/* Invisible 44×44 hit target around the visible 18 px dot — gives
   proper WCAG 2.5.5 / Apple HIG tap area without making the dot
   itself any bigger. Transparent, sits above the dot via z-index. */
.ms-wbw-circle::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: transparent;
  /* Faint hover halo so the proximity target is discoverable. */
  transition: background .18s ease;
}
.ms-wbw-circle:hover::before {
  background: color-mix(in srgb, var(--tb-ink-3, #8a8576) 8%, transparent);
}
.ms-wbw-circle:hover {
  border-color: var(--tb-ink-2, #b6b0a2);
}
.ms-wbw-circle.on {
  background: var(--tb-accent, #5fb594);
  border-color: var(--tb-accent, #5fb594);
  box-shadow: 0 0 0 3px var(--tb-accent-bg, rgba(95,181,148,0.18)),
              0 0 10px var(--tb-accent-rule, rgba(95,181,148,0.32));
}
.ms-wbw-circle.on + .ms-ft-label,
.ms-ft-row:has(.ms-wbw-circle.on) .ms-ft-label {
  color: var(--tb-accent, #5fb594);
}

/* ── Sūrah list rows (en first, then ar, then dots) ───────────────── */
.ms-surah-list { list-style: none; padding: 6px 0; margin: 0; }
.ms-surah-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.ms-surah-list li:hover { background: var(--bg-2, #131c24); }
.ms-surah-list li.active { background: var(--tb-accent-bg, rgba(95,181,148,0.10)); }
.ms-surah-list li.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--tb-accent, #5fb594);
  box-shadow: 0 0 8px rgba(95, 181, 148, 0.55);
}
.ms-surah-list .ms-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--tb-ink-4, #5e5b54);
  text-align: right;
}
.ms-surah-list li.active .ms-num { color: var(--tb-accent, #5fb594); font-weight: 600; }
.ms-surah-list li.locked .ms-num { opacity: 0.55; }
.ms-surah-list .ms-en {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 13px;
  color: var(--tb-ink, #e8e4d8);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-surah-list li.active .ms-en { font-weight: 500; }
.ms-surah-list li.locked .ms-en { color: var(--tb-ink-3, #8a8576); }
.ms-surah-list .ms-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 16px;
  color: var(--tb-ink-2, #b6b0a2);
  direction: rtl;
  letter-spacing: 0;
}
.ms-surah-list li.active .ms-ar { color: var(--tb-ink, #e8e4d8); }
.ms-surah-list li.locked .ms-ar { color: var(--tb-ink-3, #8a8576); }
.ms-surah-list .ms-dots {
  display: flex; flex-direction: column; gap: 3px;
  align-items: center; flex-shrink: 0;
}

/* ── Sparkle dots (preserved with glow) ───────────────────────────── */
.ms-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ms-dot.gold { background: #f0b030; box-shadow: 0 0 6px rgba(240,176,48,0.6), 0 0 12px rgba(240,176,48,0.22); }
.ms-dot.cyan { background: #40c4cc; box-shadow: 0 0 6px rgba(64,196,204,0.6), 0 0 12px rgba(64,196,204,0.22); }
.ms-dot.pink { background: #e478b0; box-shadow: 0 0 6px rgba(228,120,176,0.6), 0 0 12px rgba(228,120,176,0.22); }

/* ── Juzʾ / Hizb accordion ────────────────────────────────────────── */
.ms-group-list details { border-bottom: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08)); }
.ms-group-list summary {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  list-style: none;
  cursor: pointer;
  transition: background .15s;
}
.ms-group-list summary::-webkit-details-marker { display: none; }
.ms-group-list summary:hover { background: var(--bg-2, #131c24); }
.ms-group-list summary .ms-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 600;
  color: var(--tb-ink-3, #8a8576); letter-spacing: 0.1em;
  background: var(--bg-2, #131c24);
  border: 0.5px solid var(--tb-rule, rgba(232,228,216,0.08));
  border-radius: 999px;
  padding: 2px 0;
  text-align: center;
  text-transform: uppercase;
}
.ms-group-list details[open] summary .ms-pill {
  background: var(--tb-accent-bg, rgba(95,181,148,0.10));
  border-color: var(--tb-accent-rule, rgba(95,181,148,0.32));
  color: var(--tb-accent, #5fb594);
}
.ms-group-list summary .ms-name-en {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 13px;
  color: var(--tb-ink, #e8e4d8);
  letter-spacing: -0.005em;
}
.ms-group-list summary .ms-name-en small {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--tb-ink-4, #5e5b54);
  letter-spacing: 0.06em;
  font-style: normal;
  margin-top: 1px;
}
.ms-group-list summary .ms-name-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 14px;
  color: var(--tb-ink-2, #b6b0a2);
  direction: rtl;
}
.ms-group-list summary .ms-chev {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--tb-ink-3, #8a8576);
  transition: transform .18s;
  width: 12px; text-align: center;
}
.ms-group-list details[open] summary .ms-chev {
  transform: rotate(90deg);
  color: var(--tb-accent, #5fb594);
}

/* ── Header surface: glass + hairline ──────────────────────────────── */
header.hdr {
  background: var(--tb-bg);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border-bottom: 0.5px solid var(--tb-rule);
  box-shadow: none;
  position: sticky; top: 0; z-index: 100;
  padding: 0;
}

/* ── Top row ───────────────────────────────────────────────────────── */
.hdr-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 28px 12px;
  border-bottom: 0.5px solid var(--tb-rule-hi);
}

/* ── Brand block ───────────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  transition: opacity .15s;
}
.brand:hover { opacity: 0.86; }

.brand-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--tb-accent);
  letter-spacing: 0;
  line-height: 1;
}
.brand-sep {
  color: rgba(232, 228, 216, 0.30);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 300;
  margin: 0 2px;
}
.brand-en {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--tb-ink);
  line-height: 1;
}
.brand-surah {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--tb-ink-2);
  margin-left: 14px;
  padding-left: 14px;
  border-left: 0.5px solid rgba(232, 228, 216, 0.14);
  align-self: center;
  line-height: 1.4;
}

/* ── Spacer pushes utility group right ─────────────────────────────── */
.hdr-spacer { flex: 1; }

/* ── Util buttons (search, settings) ───────────────────────────────── */
.util-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.util-btn {
  /* v229-fix-tap-util-btn: 38 → 44 (HIG). */
  width: 44px; height: 44px;
  background: transparent;
  border: 0.5px solid rgba(232, 228, 216, 0.10);
  border-radius: 50%;
  color: var(--tb-ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.18s;
  padding: 0;
  font-size: 0;
}
.util-btn:hover {
  border-color: var(--tb-accent-rule);
  background: var(--tb-accent-bg);
  color: var(--tb-accent);
}
.util-btn:active { transform: scale(0.94); }
.util-btn svg { width: 16px; height: 16px; }

/* ── Bottom row — sub-tabs ─────────────────────────────────────────── */
.hdr-bot {
  padding: 8px 24px 9px;
  display: flex;
  align-items: center;
}
.hdr-bot .nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.hdr-bot .nav-btn {
  background: transparent;
  border: 0.5px solid transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  /* v225h · use full ink color at 72% opacity for inactive tabs.
     The legacy --tb-ink-2 (#a89e88) renders at ~2.5:1 on cream
     paper, failing AA. Full ink at 72% lands around 5.2:1 — passes
     AA body text — while still reading as "secondary" vs. accent. */
  color: var(--tb-ink, #2d2a23);
  opacity: 0.72;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hdr-bot .nav-btn:hover { opacity: 0.92; }
.hdr-bot .nav-btn.active { opacity: 1; }
.hdr-bot .nav-btn {
  position: relative;
  background: transparent;
  border-color: transparent;
  /* No text-shadow transition — animating large blurs is GPU-expensive
     and was making tab flips feel laggy. Snap the active glow on/off. */
  transition: color 0.12s ease;
}
.hdr-bot .nav-btn:hover {
  color: var(--tb-ink);
  background: transparent;       /* no box-fill on hover */
}
.hdr-bot .nav-btn:active {
  /* Remove the browser-default "square" pressed feedback. The color
     shifts subtly instead. */
  background: transparent;
  outline: none;
}
.hdr-bot .nav-btn:focus-visible {
  outline: none;
  color: var(--tb-accent);
  text-shadow: 0 0 14px var(--tb-accent-bg);
}
/* Active tab: no fill, no border — just an accent color, a soft text
   glow, and a small underline indicator. Reads as "highlighted" rather
   than "boxed in." */
.hdr-bot .nav-btn.active {
  background: transparent;
  border-color: transparent;
  color: var(--tb-accent);
  font-weight: 600;
  text-shadow: 0 0 16px var(--tb-accent-bg);
}
/* Variant E (pure typographic): no underline / dot indicator.
   The brighter mint + heavier weight + soft text-shadow (in
   manuscript.css) carry the active affordance entirely. */

.hdr-bot .nav-btn .nb-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  background: rgba(232, 228, 216, 0.06);
  color: var(--tb-ink-3);
  border-radius: 999px;
}
.hdr-bot .nav-btn.active .nb-count {
  background: rgba(95, 181, 148, 0.16);
  color: var(--tb-accent);
}

.hdr-bot .hdr-bot-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-ink-3);
  padding: 0 8px;
}
.hdr-bot .hdr-bot-meta b {
  color: var(--tb-ink-2);
  font-weight: 500;
}

/* ── Search drop polish ─────────────────────────────────────────────── */
.search-drop-overlay {
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
}

/* ── v206-isk33: Home button on the LEFT (per JPEG directive) ─────────
   Sits before .brand. Visible on EVERY view — consistent top-bar chrome. */
.hdr-top .home-btn-left {
  width: 38px; height: 38px;
  margin-right: 14px;
  background: rgba(95, 181, 148, 0.06);
  border: 0.5px solid rgba(95, 181, 148, 0.18);
  border-radius: 12px;
  color: var(--tb-accent, #5fb594);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  flex-shrink: 0;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-top .home-btn-left svg { width: 17px; height: 17px; }
.hdr-top .home-btn-left:hover {
  background: rgba(95, 181, 148, 0.14);
  border-color: rgba(95, 181, 148, 0.36);
  box-shadow: 0 0 0 4px rgba(95, 181, 148, 0.06);
}
.hdr-top .home-btn-left:active { transform: scale(0.96); }

/* Hide the Home button on the hub itself (already there) */
body[data-view="hub"] .hdr-top .home-btn-left { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hdr-top { padding: 11px 16px; gap: 14px; }
  .brand-ar { font-size: 22px; }
  .brand-en { font-size: 18px; }
  .brand-surah { display: none; }
  .util-btn { width: 34px; height: 34px; }
  .hdr-top .home-btn-left { width: 34px; height: 34px; margin-right: 10px; }
  .hdr-bot { padding: 6px 12px 8px; }
  .hdr-bot .nav-btn { padding: 7px 13px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v208 · Variant A topbar layout (sitewide)
   ─────────────────────────────────────────────────────────────────
   Logo glyph (#51 Galaxy Cluster) on the left, Fraunces "Mithlayn"
   wordmark + mono "Mutashābihāt" caption beside it, tactile 50px
   circular util buttons on the right. Replaces the previous tight
   "المتشابهات Mithlayn" wordmark.
   ─────────────────────────────────────────────────────────────────
   These rules apply to EVERY view. The hub adds clay accent overrides
   in manuscript.css (v207). Other views inherit the mint accent that
   topbar.css already defines.
   ═══════════════════════════════════════════════════════════════════ */

/* — Brand block: mountain ABOVE the wordmark (variant F).
     align-items:center keeps the mountain horizontally centered ON the
     wordmark (since the wordmark is the widest child); the whole block
     stays at the LEFT of the top-bar via the parent's flex flow. Tight
     gap so the mountain sits just above "Mithlayn" rather than floating. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.brand-mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--tb-accent, #5fb594);
  /* v187-isk19 · Crescent moon fill for the Variant F brand mark.
     Default = warm cream (reads on every dark theme). Light/parchment
     themes override with a darker amber so the moon doesn't vanish on
     cream backgrounds. The mountain stroke uses currentColor and so
     follows the theme accent without needing per-theme overrides. */
  --tb-brand-moon: #e8d8a8;
  transition: color .18s, transform .18s;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"], [data-ui="paper"], [data-ui="tahara"], [data-ui="sahara"], [data-ui="dunes"]) .brand-mark {
  --tb-brand-moon: #9a7218;
}
.brand-mark svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
.brand:hover .brand-mark {
  transform: scale(1.04);
}

.brand-words {
  display: flex; flex-direction: column;
  align-items: center; /* v187-isk20 · centered under the mountain mark */
  text-align: center;
  gap: 2px;
  line-height: 1;
}
.brand-words .brand-en {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40;
  font-weight: 500;
  /* v187-isk24 · +30 % from 26 px (mountain scrapped — wordmark carries the brand) */
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.014em;
  color: var(--tb-ink, #e8dfc8);
  text-transform: none;
}
.brand-words .brand-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* v187-isk24 · +30 % from 9 px so the tagline tracks the wordmark scale */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tb-ink-3, #7a7266);
  margin-top: 3px;
}

/* Hide legacy brand parts (no longer in markup, but defensive) */
.brand-ar, .brand-sep { display: none; }

/* — Util buttons: bare icons. No container, no fill, no border, no
   shadow. Hit-target stays 48px for accessibility, but the chrome is
   completely stripped — the icon glyph is the only visual element.
   Hover shifts color to accent; active scales down slightly.
   ─────────────────────────────────────────────────────────────────
   !important is used here because earlier rules (.hdr-top .home-btn-left
   has specificity 0,2,1) outrank a plain .util-btn (0,1,0) and would
   otherwise re-paint the home button. We want every topbar icon —
   home, search, theme toggle, settings — bare and identical. */
.util-btn,
.util-btn:focus,
.util-btn:focus-visible,
.hdr-top .home-btn-left,
.hdr-top .home-btn-left:focus,
.hdr-top .home-btn-left:focus-visible {
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  color: var(--tb-ink-2, #a89e88);
  transition: color .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1) !important;
  margin: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
.util-btn:hover,
.hdr-top .home-btn-left:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--tb-accent);
}
.util-btn:active,
.hdr-top .home-btn-left:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: scale(.94);
}
.util-btn svg,
.hdr-top .home-btn-left svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.6 !important;
}

/* Tighter spacing now that the chrome is fully gone. */
.util-row { gap: 10px !important; }

/* — Topbar padding: a little more vertical room for the bigger brand — */
.hdr-top {
  padding: 14px 28px 12px;
  gap: 24px;
}

/* — Mobile — */
@media (max-width: 760px) {
  .brand { gap: 12px; }
  .brand-mark { width: 40px; height: 40px; }
  /* v187-isk24 · mobile +30 % from 22 px / 8 px */
  .brand-words .brand-en { font-size: 29px; }
  .brand-words .brand-tag { font-size: 10px; letter-spacing: 0.18em; }
  .util-btn { width: 42px; height: 42px; }
  .util-btn svg { width: 19px; height: 19px; }
  .hdr-top { padding: 11px 16px 10px; gap: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v208 · Theme toggle (sun/moon) — sitewide
   Mirrors the swap pattern from the Memorize tool's recitation-rhythm
   prototype: show the icon for the mode you'll switch TO. Both icons
   live inside .theme-toggle; CSS hides whichever is currently active.
   ═══════════════════════════════════════════════════════════════════ */
.theme-toggle { position: relative; }
.theme-toggle svg {
  transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) .theme-toggle .icon-sun  { display: none; }

/* ════════════════════════════════════════════════════════════════════
   Theme picker (v187-isk2-picker) — outline palette glyph in the topbar
   that opens a grouped dropdown of the 14 curated themes.
   ════════════════════════════════════════════════════════════════════ */
.theme-picker-wrap{ position: relative; display: inline-flex; }
.theme-picker-btn[aria-expanded="true"]{
  color: var(--gold, #ffc21a);
  background: var(--gold-bg, rgba(255,194,26,0.10));
  box-shadow: inset 0 0 0 1px var(--gold-bdr, rgba(255,194,26,0.30));
}

.theme-picker-dd{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  background: var(--bg-1, #141e2e);
  color: var(--cream, #e8dfc8);
  border: 1px solid var(--border-mid, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05) inset;
  padding: 6px 0;
  z-index: 1000;
  display: none;
  font-family: inherit;
}
.theme-picker-dd.open{ display: block; }

/* Caret pointing at the trigger */
.theme-picker-dd::before{
  content: '';
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px; height: 12px;
  background: var(--bg-1, #141e2e);
  border-left: 1px solid var(--border-mid, rgba(255,255,255,0.12));
  border-top: 1px solid var(--border-mid, rgba(255,255,255,0.12));
  transform: rotate(45deg);
}

.theme-picker-grp{
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-faint, #6a6258);
  padding: 8px 14px 4px;
}
.theme-picker-grp:first-of-type{ padding-top: 4px; }

.theme-picker-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--cream, #e8dfc8);
  transition: background-color .12s, border-color .12s;
}
.theme-picker-row:hover{
  background: var(--bg-2, rgba(255,255,255,0.04));
}
.theme-picker-row.active{
  background: var(--gold-bg, rgba(255,194,26,0.10));
  border-left-color: var(--gold, #ffc21a);
}

.theme-picker-ic{
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim, #a89e88);
}
.theme-picker-ic svg{
  width: 19px; height: 19px;
  stroke-width: 1.4;
}
.theme-picker-row.active .theme-picker-ic{ color: var(--gold, #ffc21a); }

.theme-picker-nm{
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--cream, #e8dfc8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-picker-ck{
  width: 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--gold, #ffc21a);
  opacity: 0;
  flex-shrink: 0;
}
.theme-picker-row.active .theme-picker-ck{ opacity: 1; }

@media (max-width: 480px){
  .theme-picker-dd{ width: 240px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v188-isk18 · Gradient Mesh chrome overrides (v2 A1 port)
   ────────────────────────────────────────────────────────────────────────
   Layered on top of the existing header.hdr base so it survives across
   themes. Color stops use --ms-mint* tokens (set per-theme in
   styles/themes.css), so the mesh tints per active theme:
     · mushaf  → green mesh
     · medina  → wine mesh
     · muslimpro → gold mesh (Web3-clay look)
     · qcom-dark → cyan mesh
     · etc. — every theme gets its own accent mesh.
   ──────────────────────────────────────────────────────────────────────── */

/* Topbar surface — soft mesh tint over the base --tb-bg */
header.hdr {
  background-image:
    linear-gradient(90deg,
      var(--ms-mint-soft, var(--gold-bg, rgba(255,255,255,0.04))) 0%,
      transparent 50%,
      var(--ms-mint-soft, var(--gold-bg, rgba(255,255,255,0.02))) 100%);
  background-blend-mode: screen;
}
/* Gradient rule line below topbar */
header.hdr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--ms-mint-rim, var(--gold-bdr, rgba(255,255,255,0.20))) 50%,
    transparent);
  pointer-events: none;
}

/* Brand wordmark — gradient text on the latin part */
.brand-en {
  background: linear-gradient(135deg,
    var(--ms-mint, var(--gold-lt, currentColor)) 0%,
    var(--ms-mint-2, var(--gold-lt, currentColor)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Nav buttons — pill on active with theme-tinted backdrop + soft halo */
.nav-btn {
  border-radius: 999px;
  /* v227k3 · iOS-grade tap polish · skip the 300ms double-tap-zoom delay
     and the gray flash that iOS Safari paints on tap. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}
.nav-btn:active { transform: scale(0.96); }
.nav-btn:focus-visible {
  outline: 2px solid var(--ms-mint-2, var(--gold-lt, #b48b2b));
  outline-offset: 2px;
}
.nav-btn.active {
  background: linear-gradient(135deg,
    var(--ms-mint-soft, var(--gold-bg, rgba(255,255,255,0.10))),
    var(--ms-mint-rim, var(--gold-bdr, rgba(255,255,255,0.04))));
  box-shadow: 0 8px 24px -10px var(--ms-mint-rim, var(--gold-bdr, rgba(0,0,0,0.40)));
  color: var(--ms-mint-2, var(--gold-lt));
}

/* Util buttons — quiet glass squares with a subtle border */
.util-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.util-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--ms-mint-2, var(--gold-lt));
}

/* Light themes: invert the rgba alphas so the glass works on white */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"],
         [data-ui="tarteel"], [data-ui="notion"], [data-ui="arc"],
         [data-ui="material"], [data-ui="ia"], [data-ui="madinah"],
         [data-ui="ottoman"], [data-ui="alhambra"], [data-ui="zamzam"]) .util-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"],
         [data-ui="tarteel"], [data-ui="notion"], [data-ui="arc"],
         [data-ui="material"], [data-ui="ia"], [data-ui="madinah"],
         [data-ui="ottoman"], [data-ui="alhambra"], [data-ui="zamzam"]) .util-btn:hover {
  background: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   v217 · Site tabs · masthead variant 1 (simple masthead · ship 2026-05-18)
   ─────────────────────────────────────────────────────────────────
   Final-pass spec from the user:
     · gilt accent · no subtitle (deleted in index.html)
     · Mithlayn centered above the tab row (masthead)
     · tabs centered · tatweel curl SPLIT into two half-ornaments that
       flank the tab cluster (left of Reader, right of Progress)
     · active tab carries a gilt dot below it · GLOW HARDER on active
     · tightened vertical gap between masthead + tabs
   The accent override is scoped to .hdr so the mushaf-internal mint
   accent (modes cluster · memorize counter) stays untouched.
   ═══════════════════════════════════════════════════════════════════ */
.hdr {
  --tb-accent:      #d5b157;
  --tb-accent-2:    #e3c878;
  --tb-accent-bg:   rgba(213, 177, 87, 0.14);
  --tb-accent-rule: rgba(213, 177, 87, 0.42);
}

/* Masthead layout · center the brand within .hdr-top.
   3-cell grid so domain-row (hidden via display:none earlier) reserves
   no space, util-row pins to the right, and .brand fills the center. */
.hdr-top {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 28px 6px !important;     /* tighter bottom · brings tabs closer */
  gap: 0 !important;
}
.hdr-top .brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
.hdr-top .util-row {
  grid-column: 3;
  justify-self: end;
}
.hdr-top .hdr-spacer { display: none !important; }

/* Center the tab nav DIRECTLY under Mithlayn · flex with justify-center.
   The .hdr-bot-meta floats absolute on the right so it never disrupts the
   nav's centering. The default v208 rule had `margin-left: auto` on .nav
   which was pulling it to the left edge — explicitly reset it. */
.hdr-bot {
  position: relative;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}
.hdr-bot .nav {
  margin: 0 !important;
  gap: 8px;
  position: relative;
  justify-content: center;
}
.hdr-bot .hdr-bot-meta {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* Active tab · gilt color with a HARDER GLOW (multi-layered text-shadow
   + brighter accent-2 for the foreground). No dot indicator — the glow
   carries the active affordance alone. */
.hdr-bot .nav-btn.active {
  color: var(--tb-accent-2) !important;
  font-weight: 700;
  text-shadow:
    0 0 6px  rgba(213, 177, 87, 0.55),
    0 0 14px rgba(213, 177, 87, 0.42),
    0 0 28px rgba(213, 177, 87, 0.28);
}
.hdr-bot .nav-btn.active::after { display: none; }     /* drop the dot */

/* Half-curl ornaments flanking the tab cluster.
   .nav::before = left curl (hairline → curl → terminator dot, fading IN)
   .nav::after  = right curl (terminator dot → curl → hairline, fading OUT)
   They sit just outside the leftmost (Reader) + rightmost (Progress) tabs,
   so the ornament feels like a frame around the whole nav.            */
.hdr-bot .nav::before,
.hdr-bot .nav::after {
  content: "";
  width: 120px; height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
}
.hdr-bot .nav::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'><g fill='none' stroke='%23d5b157' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'><line x1='0' y1='7' x2='84' y2='7' stroke-opacity='0.45'/><path d='M84 7 q4 -4 8 0 q-4 4 -8 0 q-4 -4 -8 0'/><circle cx='92' cy='7' r='0.9' fill='%23d5b157'/></g></svg>");
  margin-right: 10px;
}
.hdr-bot .nav::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'><g fill='none' stroke='%23d5b157' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'><path d='M28 7 q4 -4 8 0 q-4 4 -8 0 q-4 -4 -8 0'/><circle cx='28' cy='7' r='0.9' fill='%23d5b157'/><line x1='36' y1='7' x2='120' y2='7' stroke-opacity='0.45'/></g></svg>");
  margin-left: 10px;
}

/* ═══════════════════ v229i · Flatten site bar (design #2) ═══════════════
   Move the active domain's nav UP into .hdr-top, centered absolutely.
   Kill the .hdr-bot row entirely. Brand far left, nav centered, utils far
   right. The cloned nav is .hdr-top-nav (created by index.html boot).
   ════════════════════════════════════════════════════════════════════ */
/* Need ID-level specificity to beat the earlier #hdr-bot-quran rule
   at line 51 (display: flex !important). */
.hdr-bot,
#hdr-bot-quran,
#hdr-bot-arabic,
#hdr-bot-commentary { display: none !important; }

/* Hide the domain switcher in hdr-top too — it lived between brand and
   util-row. Users primarily on Mushaf domain; if they need domain switch
   later, expose via util-row menu. */
.hdr-top .domain-row { display: none !important; }
.hdr-top .hdr-spacer { display: none !important; }

/* Center the cloned top-nav absolutely so brand stays left and utils
   stay right regardless of how many nav buttons there are. */
.hdr-top { position: relative; }
.hdr-top-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  gap: 0;
  align-items: center;
}
.hdr-top-nav .nav-btn {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--ms-ink-3, rgba(232,228,216,.42));
  font: 600 11px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 7px;
  transition: color .12s, background .12s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hdr-top-nav .nav-btn:hover {
  color: var(--ms-ink, #e8e4d8);
  background: rgba(232,228,216,.06);
}
.hdr-top-nav .nav-btn.active {
  color: var(--ms-gold, #d5b157);
  background: rgba(213,177,87,.12);
}
.hdr-top-nav .nav-btn .ic { font-size: 13px; opacity: .8; }

/* Push util-row to the far right (was already done via .hdr-spacer flex,
   but with spacer hidden it might lose its position). */
.hdr-top .util-row { margin-left: auto; }

/* v229j-fix-brand-left · Mithlayn brand was floating near the middle
   because some parent rule (or grid template) was centering it. Force
   the brand to the absolute LEFT and make hdr-top a true left-aligned
   flex row regardless of any view-scoped overrides. */
header.hdr .hdr-top {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
header.hdr .hdr-top .brand {
  margin-right: auto !important;
  margin-left: 0 !important;
  flex-shrink: 0;
}