/* ═══════════════════════════════════════════════════════════════════════════
   styles/manuscript.css — site-wide manuscript register · v2 (audit revision)
   ─────────────────────────────────────────────────────────────────────────
   70% Soft Modernism / 30% Editorial Minimalism.
   Type: Manrope only (100 vs 600 emphasis · 400 body).

   PRINCIPLES (audit-driven)
     1. NO borders on cards. Replace with `inset 0 1px 0 rgba(255,255,255,0.04)`
        rim highlights or background-value shifts.
     2. Hairlines (0.5px rgba(255,255,255,0.05)) for true separators only.
     3. Lock aesthetic on active states: `inset 0 1px 3px rgba(0,0,0,0.32)`
        + subtle bottom rim — feels physically pressed.
     4. Tactile interactions: `transform: scale(0.98)` on `:active`,
        cubic-bezier(0.4,0,0.2,1) over 150ms.
     5. Manrope 100 (extra-light) for ALL metadata, refs, secondary states.
        Manrope 600 for titles + primary actions.
     6. Charcoal / Sand / Mint / Gold palette — zero blue.
     7. Min-height 44px on all interactive surfaces (touch target).

   UNTOUCHED — Quran reader internals:
     .v-conflict-zone, .conflict-item, .cp-label, .cp-verse,
     .sak-card, .kir-card, .isk-card, .sak-bayt-box, .sak-footer,
     .sparkle-btn, .sak-sparkle, .kir-sparkle, .isk-sparkle,
     .sb-node, @keyframes sparkle-glow, the verse text rendering itself.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Charcoal stack — main + lifted surfaces.
     v208-fix · synced to v165's surface ramp (#0E1418 / #1A2128 / #232C35)
     so the host topbar bg matches the embedded Memorize iframe bg
     exactly — no boundary line between them on the Memorize view. */
  --ms-bg:        #0E1418;
  --ms-bg-1:      #1A2128;
  --ms-bg-2:      #232C35;
  --ms-bg-3:      #2C3744;

  /* Sand ink — synced to v165's dark text ramp so the hub and the
     embedded Memorize tool render identical text colors. v208-fix · was
     #E8DFC8 / #B5A98D / #7E7666 (warmer/yellower); now neutral cream. */
  --ms-ink:       #E8DDD0;
  --ms-ink-2:     #B8AC9C;
  --ms-ink-3:     #7A8D99;
  --ms-ink-4:     #4A453B;

  /* Hairlines — synced to v165 (warm-tinted rgba over the cream stack) */
  --ms-hair:      rgba(232, 221, 208, 0.06);
  --ms-hair-2:    rgba(232, 221, 208, 0.10);
  --ms-hair-3:    rgba(232, 221, 208, 0.18);

  /* Accent — mint & gold (Manuscript sparkle palette) */
  --ms-mint:      #5FB594;
  --ms-mint-2:    #7DC9A8;
  --ms-mint-soft: rgba(95, 181, 148, 0.10);
  --ms-mint-rim:  rgba(95, 181, 148, 0.28);
  --ms-mint-glow: rgba(95, 181, 148, 0.45);

  --ms-gold:      #D4AF37;
  --ms-gold-soft: rgba(212, 175, 55, 0.10);
  --ms-gold-rim:  rgba(212, 175, 55, 0.28);

  /* Lock aesthetic — inset depressions */
  --ms-rim:       inset 0 1px 0 rgba(255,255,255,0.04);
  --ms-rim-2:     inset 0 1px 0 rgba(255,255,255,0.06);
  --ms-press:     inset 0 1px 3px rgba(0,0,0,0.32), inset 0 -1px 0 rgba(255,255,255,0.04);
  --ms-press-mint: inset 0 1px 3px rgba(0,0,0,0.32), inset 0 -1px 0 rgba(95,181,148,0.20), 0 0 0 0.5px var(--ms-mint-rim);

  /* Radii */
  --ms-r-sm:  6px;
  --ms-r-md:  10px;
  --ms-r-lg:  14px;
  --ms-r-xl:  20px;
  --ms-r-2xl: 28px;
  --ms-r-pill: 999px;

  /* Type */
  --ms-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --ms-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ms-quran:   'Amiri Quran', 'Amiri', serif;

  /* Motion */
  --ms-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --ms-quick:   transform 0.15s var(--ms-ease), background 0.18s var(--ms-ease), color 0.18s var(--ms-ease), box-shadow 0.18s var(--ms-ease), opacity 0.18s var(--ms-ease);
}

/* ── v208 · Light mode · v165-derived warm-cream surface ──────────── */
/* Smooth fades when toggling */
:root, body, header.hdr, .brand-mark, .util-btn, .ms-hub-card {
  transition: background .25s var(--ms-ease, ease), color .25s var(--ms-ease, ease), border-color .25s var(--ms-ease, ease);
}

/* ── Body baseline ────────────────────────────────────────────────── */
body {
  font-family: var(--ms-body) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ms-ink);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.008) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, rgba(255,255,255,0.008) 0.5px, transparent 0.5px);
  background-size: 48px 48px;
}
.app, .hdr, .view, header, main { position: relative; z-index: 1; }

/* ── Universal tactile interaction ───────────────────────────────── */
button, a, .pri-act, .filter-btn, .chip, .nav-btn, .util-btn,
.ms-hub-card, .ms-toggle, .ms-toggle-btn,
.hub-card, .stat-card, .pri-stat, .pri-item, .hz-block, .sg-item,
.acc-sub, .pal-tile, .preset-chip, .profile-tile {
  transition: var(--ms-quick);
}
button:active, .ms-hub-card:active, .ms-toggle-btn:active,
.pri-act:active, .filter-btn:active {
  transform: scale(0.98);
}

/* ════════════════════════════════════════════════════════════════════
   HUB — landing page with [Dashboard | Practice] dual-toggle
   ════════════════════════════════════════════════════════════════════ */

#view-hub { padding: 0; overflow: auto; }

.ms-hub {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 56px 96px;
}

/* ── Dashboard / Practice toggle (lock aesthetic) ── */
.ms-hub-toggle {
  display: inline-flex;
  background: var(--ms-bg);
  border-radius: var(--ms-r-pill);
  padding: 4px;
  box-shadow: var(--ms-press);
  margin: 0 auto 56px;
  position: relative;
}
.ms-hub-toggle-row {
  display: flex; justify-content: center;
}
.ms-toggle-btn {
  background: transparent;
  border: 0;
  padding: 12px 28px;
  border-radius: var(--ms-r-pill);
  font-family: var(--ms-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  cursor: pointer;
  min-height: 44px;
  min-width: 124px;
  transition: var(--ms-quick);
}
.ms-toggle-btn:hover { color: var(--ms-ink-2); }
.ms-toggle-btn.active {
  background: var(--ms-bg-2);
  color: var(--ms-mint);
  box-shadow: var(--ms-press-mint);
  font-weight: 700;
}
.ms-toggle-btn:active { transform: scale(0.98); }

/* ── Greeting (Manrope 100 hero, Arabic accent) ── */
.ms-hub-greet {
  text-align: center;
  padding: 16px 0 48px;
}
.ms-hub-stamp {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ms-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ms-mint);
}
.ms-hub-stamp::before, .ms-hub-stamp::after {
  content: '';
  width: 32px; height: 0.5px;
  background: var(--ms-mint-rim);
}
.ms-hub-greet h1 {
  font-family: var(--ms-body);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 100;        /* extra-light per audit */
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin-top: 26px;
  padding-block: 6px;
  color: var(--ms-ink);
}
.ms-hub-greet h1 em {
  font-style: normal;
  font-weight: 600;        /* 600 emphasis per audit */
  color: var(--ms-mint);
  letter-spacing: -0.04em;
}
.ms-hub-greet .ms-hub-ar {
  font-family: var(--ms-quran);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--ms-mint);
  direction: rtl;
  margin-top: 18px;
  font-weight: 400;
}
.ms-hub-greet .ms-hub-day {
  font-family: var(--ms-mono);
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  margin-top: 28px;
}
.ms-hub-greet .ms-hub-day b { color: var(--ms-mint); font-weight: 600; }

/* ── Hub cards — borderless, soft gradient, right arrow Manrope 100 ── */
.ms-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 1100px) { .ms-hub-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ms-hub-cards { grid-template-columns: 1fr; } }

.ms-hub-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 30px 24px;
  background: var(--ms-bg-1);
  border: 0 !important;
  border-radius: var(--ms-r-xl);
  min-height: 260px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--ms-rim);
}
.ms-hub-card:hover {
  background: var(--ms-bg-2);
  box-shadow: var(--ms-rim-2);
  transform: translateY(-2px);
}
.ms-hub-card:active { transform: scale(0.99); }

.ms-hub-card .num {
  font-family: var(--ms-body);
  font-size: 10px;
  font-weight: 100;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
}
.ms-hub-card h3 {
  font-family: var(--ms-body);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-top: 18px;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--ms-ink);
}
/* Flex layout only when an Arabic sibling is present (Practice hub cards).
   Without :has(), a bare text node + <em> in the main hub cards each
   become anonymous flex items, and `gap` opens a hole mid-word. */
.ms-hub-card h3:has(.ar) {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ms-hub-card h3 .ar {
  font-family: var(--ms-quran);
  /* v187-isk17 · Arabic scales with English; line-height keeps diacritics
     (tashdīd / fatḥah) inside the line box on .ms-hub-card's overflow:hidden. */
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--ms-mint);
  direction: rtl;
  margin-left: auto;
  font-weight: 400;
}
.ms-hub-card p {
  font-family: var(--ms-body);
  font-size: 14px;
  font-weight: 100;            /* metadata weight */
  color: var(--ms-ink-2);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 30ch;
  flex: 1;
  letter-spacing: 0;
}
.ms-hub-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--ms-hair);
  font-family: var(--ms-body);
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
}
.ms-hub-card .meta b { color: var(--ms-mint); font-weight: 600; }
.ms-hub-card .meta .arrow {
  font-family: var(--ms-body);
  font-size: 16px;
  font-weight: 100;
  color: var(--ms-ink-2);
  transition: transform .18s var(--ms-ease), color .18s var(--ms-ease);
}
.ms-hub-card:hover .meta .arrow {
  color: var(--ms-mint);
  transform: translateX(4px);
}

.ms-hub-card.feature {
  grid-column: span 2;
  background:
    linear-gradient(135deg, var(--ms-bg-2) 0%, var(--ms-bg-1) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 0.5px var(--ms-mint-rim);
}
@media (max-width: 1100px) { .ms-hub-card.feature { grid-column: span 1; } }
.ms-hub-card.feature h3 { font-size: 44px; }

/* When on hub: hide all Quran-context chrome */
body[data-view="hub"] #hdr-bot-quran,
body[data-view="hub"] .sidebar,
body[data-view="hub"] .sb-toggle,
body[data-view="hub"] .sb-backdrop,
body[data-view="hub"] .float-jump { display: none !important; }

/* v187-isk31 · Arabic tab is now a Coming-Soon landing — the Qurʾan
   sidebar (sūrah list) has no purpose there. Same chrome rules as hub. */
body[data-view="arabic"] .sidebar,
body[data-view="arabic"] .sb-toggle,
body[data-view="arabic"] .sb-backdrop,
body[data-view="arabic"] .float-jump,
body[data-view="arabic"] #hdr-bot-quran,
body[data-view="arabic"] #subnav-arabic,
body[data-view="arabic"] #surah-bar,
body[data-view="arabic"] .av-ctx-strip { display: none !important; }

/* v187-isk32 · Arabic landing hero · Coming Soon banner.
   Always rendered inside #view-arabic. Hidden only when a Practice-hub
   deep link activates one of the av-* sub-views (:has() picks that up). */
.arabic-coming-soon-hero{
  max-width:640px;margin:48px auto 0;
  padding:48px 32px;text-align:center;
  background:linear-gradient(180deg, rgba(212,148,14,0.04) 0%, transparent 60%), var(--ms-bg-1, rgba(0,0,0,0.18));
  border:0.5px solid var(--ms-hair, rgba(255,255,255,0.08));
  border-radius:18px;
}
.arabic-coming-soon-hero .acs-ar{
  font-family:'Amiri Quran','Amiri',serif;direction:rtl;
  font-size:42px;color:var(--gold-lt, #e9b13a);margin-bottom:18px;
  text-shadow:0 0 16px rgba(212,148,14,0.50), 0 0 4px rgba(212,148,14,0.35);
}
.arabic-coming-soon-hero .acs-icon{font-size:32px;margin-bottom:14px;opacity:0.85}
.arabic-coming-soon-hero .acs-h1{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:34px;letter-spacing:-0.02em;color:var(--cream, #eef2f5);
  margin-bottom:12px;line-height:1.15;
}
.arabic-coming-soon-hero .acs-h1 em{font-style:italic;color:var(--gold-lt, #e9b13a)}
.arabic-coming-soon-hero .acs-lede{
  font-size:14px;color:var(--cream-dim, #b8c1c9);line-height:1.65;
  max-width:480px;margin:0 auto 24px;
}
.arabic-coming-soon-hero .acs-lede b{color:var(--cream, #eef2f5);font-weight:500}
.arabic-coming-soon-hero .acs-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-bottom:24px;
}
.arabic-coming-soon-hero .acs-btn{
  display:inline-block;padding:10px 18px;border-radius:99px;
  font-size:13px;font-weight:500;letter-spacing:0;
  text-decoration:none;color:var(--cream-dim, #b8c1c9);
  background:var(--ms-bg-2, rgba(255,255,255,0.04));
  border:0.5px solid var(--ms-hair-2, rgba(255,255,255,0.14));
  transition:all 0.16s;
}
.arabic-coming-soon-hero .acs-btn:hover{
  color:var(--cream, #eef2f5);
  border-color:var(--gold-bdr, rgba(212,148,14,0.30));
}
.arabic-coming-soon-hero .acs-btn.primary{
  color:var(--gold-lt, #e9b13a);
  background:rgba(212,148,14,0.10);
  border-color:var(--gold-bdr, rgba(212,148,14,0.30));
}
.arabic-coming-soon-hero .acs-btn.primary:hover{
  background:rgba(212,148,14,0.18);
}
.arabic-coming-soon-hero .acs-foot{
  font-size:10.5px;color:var(--cream-faint, #7a8590);
  font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.08em;
  padding-top:18px;border-top:0.5px solid var(--ms-hair, rgba(255,255,255,0.06));
}

/* Sub-views hidden by default · only the one explicitly set .active shows */
#view-arabic .av-view{display:none;}
#view-arabic .av-view.active{display:block;}
/* When ANY sub-view is active (Practice deep link), hide the hero */
#view-arabic:has(.av-view.active) .arabic-coming-soon-hero{display:none;}
#view-arabic:has(.av-view.active) ~ * .arabic-coming-soon-hero{display:none;}
/* Fallback for browsers without :has(): clicking switchArabicSub
   sets body[data-arabic-sub] which we use below. */
body[data-arabic-sub] #view-arabic .arabic-coming-soon-hero{display:none;}

/* Hide hub when not active (Safari sometimes leaves stale layout) */
body:not([data-view="hub"]) #view-hub { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   VIEWS — universal chrome (no borders, hairlines, Manrope contrast)
   ════════════════════════════════════════════════════════════════════ */

.view {
  padding: 32px 40px 48px;
  background: transparent;
  color: var(--ms-ink);
}

.pv-title, .v-title, h1.view-title {
  font-family: var(--ms-body);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 100;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--ms-ink);
  padding-block: 4px;
}
.pv-title em, .v-title em { font-style: normal; font-weight: 600; color: var(--ms-mint); }

.pv-sub, .sec-label, .cp-label {
  font-family: var(--ms-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
}

/* ════════════════════════════════════════════════════════════════════
   CARDS / PANELS — borderless with rim highlights
   ════════════════════════════════════════════════════════════════════ */

.card,
.panel,
.tile,
.stat-card,
.pri-stat,
.hz-block,
.hz-card,
.acc-sub,
.settings-section,
.profile-tile,
.session-card,
.dashboard-card,
.today-card,
.pal-tile,
.preset-chip {
  background: var(--ms-bg-1);
  border: 0 !important;
  border-radius: var(--ms-r-md);
  box-shadow: var(--ms-rim);
}

.pri-stat,
.hz-block,
.dashboard-card,
.today-card,
.acc-sub,
.settings-section {
  border-radius: var(--ms-r-lg);
  padding: 20px 24px;
}

.stat-card .stat-n,
.pri-stat .stat-n,
.pri-stat .n {
  font-family: var(--ms-body);
  font-size: 36px;
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ms-ink);
}
.pri-stat.gold .stat-n,
.pri-stat.gold .n { color: var(--ms-mint); font-weight: 600; }

.stat-card .stat-l,
.pri-stat .stat-l,
.pri-stat .l {
  font-family: var(--ms-body);
  font-size: 10px;
  font-weight: 100;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   PRIORITIES — list with hairlines (not floating cards)
   ════════════════════════════════════════════════════════════════════ */

.pri-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--ms-hair);
  padding: 20px 4px;
  margin-bottom: 0 !important;
  display: flex; flex-direction: column; gap: 10px;
}
.pri-item:last-child { border-bottom: 0; }
.pri-item:hover {
  background: rgba(255,255,255,0.015) !important;
}
.pri-item .ref-row {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--ms-body);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.04em;
  color: var(--ms-ink-3);     /* dim refs per audit */
  text-transform: none;
}
.pri-item .ref-row .ref {
  font-family: var(--ms-mono);
  font-size: 11px;
  font-weight: 100;
  color: var(--ms-ink-3);
  letter-spacing: 0.06em;
}
.pri-item .verses, .pri-item .verse-ar {
  font-family: var(--ms-quran);
  font-size: 22px;
  line-height: 1.85;
  direction: rtl; text-align: right;
  color: var(--ms-ink);
}
.pri-item .actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   PILLS / CHIPS — borderless, soft fills (low-opacity gold/mint)
   ════════════════════════════════════════════════════════════════════ */

.filter-btn, .chip, .tag, .pri-act,
.practice-mode, .mode-chip {
  border: 0 !important;
  border-radius: var(--ms-r-pill);
  padding: 8px 16px;
  font-family: var(--ms-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  color: var(--ms-ink-2);
  cursor: pointer;
  min-height: 36px;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-btn:hover, .chip:hover, .pri-act:hover {
  background: var(--ms-mint-soft);
  color: var(--ms-mint);
}
.filter-btn.on, .chip.active, .pri-act.active {
  background: var(--ms-mint-soft);
  color: var(--ms-mint);
  box-shadow: var(--ms-press-mint);
}

/* Gold-variant pill (used for "Practice", scholar refs, etc.) */
.pri-act.gold, .chip.gold {
  background: var(--ms-gold-soft);
  color: var(--ms-gold);
}
.pri-act.gold:hover, .chip.gold:hover {
  background: rgba(212, 175, 55, 0.16);
}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — primary mint pill, ghost outline
   ════════════════════════════════════════════════════════════════════ */

.btn-primary, .cta, .practice-btn, .drill-btn, .go-btn {
  background: var(--ms-mint);
  color: var(--ms-bg);
  border: 0 !important;
  border-radius: var(--ms-r-pill);
  padding: 12px 24px;
  font-family: var(--ms-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  min-height: 44px;
  box-shadow: var(--ms-rim);
}
.btn-primary:hover, .cta:hover { background: var(--ms-mint-2); }

.btn-secondary, .ghost-btn, .settings-reset {
  background: rgba(255,255,255,0.03);
  color: var(--ms-ink-2);
  border: 0 !important;
  border-radius: var(--ms-r-pill);
  padding: 10px 18px;
  font-family: var(--ms-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  min-height: 40px;
}
.btn-secondary:hover { background: var(--ms-mint-soft); color: var(--ms-mint); }

/* ════════════════════════════════════════════════════════════════════
   INPUTS — dark sunken, mint focus rim
   ════════════════════════════════════════════════════════════════════ */

input[type="text"], input[type="search"], input[type="number"],
textarea, select, .search-inp {
  font-family: var(--ms-body);
  font-size: 14px;
  font-weight: 400;
  background: var(--ms-bg);
  border: 0 !important;
  border-radius: var(--ms-r-md);
  padding: 12px 16px;
  color: var(--ms-ink);
  box-shadow: var(--ms-press);
  min-height: 44px;
  letter-spacing: -0.005em;
}
.search-inp { border-radius: var(--ms-r-pill); padding: 12px 20px; }

input:focus, textarea:focus, select:focus, .search-inp:focus {
  outline: 0;
  box-shadow: var(--ms-press), 0 0 0 2px var(--ms-mint-rim);
}

/* ════════════════════════════════════════════════════════════════════
   SETTINGS ACCORDION
   ════════════════════════════════════════════════════════════════════ */

.acc-sub-h {
  font-family: var(--ms-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ms-ink);
  text-transform: none;
}
.acc-sub-d {
  font-family: var(--ms-body);
  font-weight: 100;
  font-size: 14px;
  color: var(--ms-ink-3);
  line-height: 1.55;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   HIFZ rate buttons (color-coded chips)
   ════════════════════════════════════════════════════════════════════ */

.hz-rate-btn {
  border: 0 !important;
  border-radius: var(--ms-r-pill);
  padding: 9px 16px;
  font-family: var(--ms-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.03);
  min-height: 40px;
  box-shadow: var(--ms-rim);
}
.hz-rate-btn.weak   { color: #c25b4f; }
.hz-rate-btn.shaky  { color: #d49152; }
.hz-rate-btn.ok     { color: #7aa46a; }
.hz-rate-btn.strong { color: var(--ms-mint); }
.hz-rate-btn.active {
  background: currentColor;
  color: var(--ms-bg);
  box-shadow: var(--ms-press);
}

/* ════════════════════════════════════════════════════════════════════
   PROGRESS heatmap — borderless masonry feel
   ════════════════════════════════════════════════════════════════════ */

.sg-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--ms-r-md) !important;
  padding: 10px 14px;
  font-family: var(--ms-body);
  box-shadow: none !important;
  min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  transition: background .18s var(--ms-ease);
}
.sg-item:hover { background: rgba(255,255,255,0.02) !important; }
/* Untouched (locked) — text only, muted */
.sg-item.locked { color: var(--ms-ink-3); font-weight: 100; }
/* Memorized — soft mint fill, no border */
.sg-item.mem {
  background: var(--ms-mint-soft) !important;
  color: var(--ms-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 0.5px var(--ms-mint-rim);
}
/* Partial — soft gold fill */
.sg-item.partial {
  background: var(--ms-gold-soft) !important;
  color: var(--ms-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 0.5px var(--ms-gold-rim);
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH OVERLAY — full takeover with backdrop blur
   ════════════════════════════════════════════════════════════════════ */

.search-drop-overlay {
  background: rgba(8, 10, 14, 0.62) !important;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}
.search-drop-card {
  background: var(--ms-bg-1) !important;
  border: 0 !important;
  border-radius: var(--ms-r-xl) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 32px 64px -16px rgba(0,0,0,0.6) !important;
}
.sr-card, .sr-jump-ref {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--ms-hair);
  border-radius: 0 !important;
  padding: 14px 18px;
  box-shadow: none !important;
}
.sr-card:hover { background: rgba(255,255,255,0.025) !important; }
.sr-card:last-child { border-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════════ */

.range-modal, .range-modal-card, .modal-card {
  background: var(--ms-bg-1) !important;
  border: 0 !important;
  border-radius: var(--ms-r-lg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 48px -12px rgba(0,0,0,0.5) !important;
}

/* ════════════════════════════════════════════════════════════════════
   ARABIC tab (Word-by-word) — soft tiles
   ════════════════════════════════════════════════════════════════════ */

#view-arabic .av-card,
#view-arabic .word-cell {
  background: var(--ms-bg-1);
  border: 0 !important;
  border-radius: var(--ms-r-md);
  box-shadow: var(--ms-rim);
}

/* ════════════════════════════════════════════════════════════════════
   MAIN content background
   ════════════════════════════════════════════════════════════════════ */

.main { background: var(--ms-bg); }

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — Reading | Word-by-word toggle injected at top
   ════════════════════════════════════════════════════════════════════ */

.sidebar {
  background: var(--ms-bg-1) !important;
  border: 0 !important;
  border-right: 0.5px solid var(--ms-hair) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.02);
}

.ms-sidebar .ms-hd {
  border-bottom: 0.5px solid var(--ms-hair) !important;
}
.ms-sidebar .ms-hd-title {
  font-family: var(--ms-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
}

/* The Reading | Word-by-word toggle (inline in sidebar) */
.ms-mode-toggle {
  display: flex;
  background: var(--ms-bg);
  border-radius: var(--ms-r-pill);
  padding: 3px;
  margin-top: 8px;
  box-shadow: var(--ms-press);
}
.ms-mode-btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: var(--ms-r-pill);
  font-family: var(--ms-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  cursor: pointer;
  min-height: 36px;
  transition: var(--ms-quick);
}
.ms-mode-btn:hover { color: var(--ms-ink-2); }
.ms-mode-btn.active {
  background: var(--ms-bg-2);
  color: var(--ms-mint);
  box-shadow: var(--ms-press-mint);
  font-weight: 700;
}

/* Sūrah list — no border on active row, just background shift + sparkle dot */
.ms-surah-list li {
  border-radius: 0 !important;
  font-family: var(--ms-body);
}
.ms-surah-list li::before { display: none !important; }   /* kill the active rail */
.ms-surah-list li.active {
  background: var(--ms-mint-soft) !important;
  box-shadow: inset 0 0 0 0.5px var(--ms-mint-rim);
}
.ms-surah-list .ms-en {
  font-family: var(--ms-body) !important;
  font-style: normal !important;
  font-weight: 100 !important;
  letter-spacing: -0.005em;
}
.ms-surah-list li.active .ms-en {
  font-weight: 600 !important;
  color: var(--ms-ink) !important;
}
.ms-surah-list .ms-num {
  font-family: var(--ms-body) !important;
  font-weight: 100 !important;
  letter-spacing: 0.08em;
  color: var(--ms-ink-4);
}
.ms-surah-list li.active .ms-num { color: var(--ms-mint) !important; font-weight: 600 !important; }

/* ════════════════════════════════════════════════════════════════════
   QURAN READER container softening (the verse text + sparkles untouched)
   ════════════════════════════════════════════════════════════════════ */

/* Soften the .v-conflict-zone OUTER container only — keep inner verse
   text, scholar dots, sparkle ✶ intact (they live in their own files). */
.v-conflict-zone {
  background: var(--ms-bg-1);
  border: 0 !important;
  border-radius: var(--ms-r-lg);
  box-shadow: var(--ms-rim);
  padding: 20px 24px;
}
/* Confusion-pair items inside conflict zone — separator lines, not boxes */
.conflict-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 0.5px solid var(--ms-hair) !important;
  box-shadow: none !important;
  padding: 14px 4px !important;
}
.conflict-item:last-child { border-bottom: 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   SCROLLBARS + selection
   ════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ms-hair-2);
  border-radius: var(--ms-r-pill);
  border: 2px solid var(--ms-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ms-hair-3); }

::selection { background: var(--ms-mint-soft); color: var(--ms-ink); }

/* ════════════════════════════════════════════════════════════════════
   Anti-collision defensive rules
   ════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  line-height: 1.08;
  margin-block: 0.15em 0.32em;
  word-break: keep-all;
  hyphens: manual;
}

.tag-row, .chip-row, .mode-row, .scope-row,
.pri-controls, .pri-controls .group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════
   QURAN READER — UNTOUCHED CLASSES (commented for clarity)
   ───────────────────────────────────────────────────────────────────
   These remain on main.css with their original styling:
     .sparkle-btn, .sak-sparkle, .kir-sparkle, .isk-sparkle,
     .sb-node, @keyframes sparkle-glow,
     .cp-label inner content, .cp-verse, .verse-ar text,
     .sak-card body, .kir-card body, .isk-card body,
     .sak-bayt-box, .sak-footer, .identical-badge, .verse-tag,
     .srs-badge, .locked-note.
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   v206-isk33 — UI AUDIT REVISION
   ───────────────────────────────────────────────────────────────────
   "Tactile surfaces with depth and light." Premium futuristic study
   terminal vibe. Glassmorphism on sidebar + cards. Replace any
   leftover hard borders with soft Clay/Gold outer glow on selection.
   Num-bump animation on stat counters. Pure Manrope for all UI text.
   Single primary action style (gold pill) + muted secondary text link.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Glass + glow tokens (additive — don't break existing palette) */
  --ms-glass-bg:        rgba(26, 28, 32, 0.62);
  --ms-glass-bg-2:      rgba(34, 37, 43, 0.58);
  --ms-glass-blur:      blur(18px) saturate(135%);
  --ms-glass-rim:       inset 0 1px 0 rgba(255, 255, 255, 0.06),
                        inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);

  /* Clay tone (warm earthen — for selection accent alongside gold) */
  --ms-clay:            #C99A6A;
  --ms-clay-soft:       rgba(201, 154, 106, 0.10);
  --ms-clay-rim:        rgba(201, 154, 106, 0.32);
  --ms-clay-glow:       0 0 0 1px rgba(201, 154, 106, 0.22),
                        0 0 18px rgba(201, 154, 106, 0.16),
                        0 0 36px rgba(201, 154, 106, 0.06);

  /* Gold glow (ring + soft halo) */
  --ms-gold-glow:       0 0 0 1px rgba(212, 175, 55, 0.28),
                        0 0 18px rgba(212, 175, 55, 0.18),
                        0 0 36px rgba(212, 175, 55, 0.06);

  /* Mint glow (consistent with palette) */
  --ms-mint-glow-ring:  0 0 0 1px rgba(95, 181, 148, 0.28),
                        0 0 16px rgba(95, 181, 148, 0.16),
                        0 0 32px rgba(95, 181, 148, 0.04);
}

/* Force Manrope across every chrome element — purge stray serifs */
.hdr, .hdr *, .nav, .nav *, .util-btn, .util-btn *,
.brand-en, .brand-sep, .brand-surah,
.sec-label, .pv-sub, .pri-stat, .pri-item,
.acc-sub-h, .acc-sub-d, .filter-btn, .chip,
.btn-primary, .btn-secondary, .ms-toggle-btn,
.ms-mode-btn, .ms-hub-card .num, .ms-hub-card h3,
.ms-hub-card p, .ms-hub-card .meta {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Brand AR and the Arabic accent on cards remain Quranic — they're the
   only decorative typography per the audit. */
.brand-ar, .ms-hub-card h3 .ar, .ms-hub-greet .ms-hub-ar,
.ms-surah-list .ms-ar, .verse-ar, .ms-grp-btn .ar {
  font-family: var(--ms-quran), 'Amiri Quran', 'Amiri', serif !important;
}
/* Override the Fraunces serif lingering on .brand-surah from topbar.css */
.brand-surah {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 100 !important;
  letter-spacing: 0.02em !important;
}

/* ── Glassmorphism: sidebar ──────────────────────────────────────── */
.sidebar {
  background: var(--ms-glass-bg) !important;
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  box-shadow: var(--ms-glass-rim), inset -1px 0 0 rgba(255, 255, 255, 0.02);
}
.ms-sidebar { background: transparent; }

/* ── Glassmorphism: main hub + practice + dashboard cards ────────── */
.ms-hub-card {
  background: var(--ms-glass-bg) !important;
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  box-shadow: var(--ms-glass-rim) !important;
}
.ms-hub-card:hover {
  background: var(--ms-glass-bg-2) !important;
  box-shadow: var(--ms-glass-rim), var(--ms-mint-glow-ring) !important;
  transform: translateY(-2px);
}
.ms-hub-card.feature {
  background:
    linear-gradient(135deg, rgba(34, 37, 43, 0.72) 0%, rgba(26, 28, 32, 0.62) 70%) !important;
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--ms-mint-glow-ring) !important;
}
.ms-hub-card.feature:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    var(--ms-gold-glow) !important;
}

/* ── Clay/Gold OUTER GLOW on selection (replaces any yellow borders) ─ */
.pri-stat.gold,
.pri-item.is-selected,
.sg-item.partial,
.filter-btn.on.gold,
.acc-sub.is-active,
.profile-tile.active {
  border-color: transparent !important;
  box-shadow: var(--ms-gold-glow) !important;
}

/* Strip any remaining yellow/gold border-color on focus or active states */
*:focus-visible {
  outline: 0 !important;
  box-shadow: var(--ms-mint-glow-ring) !important;
}
.pri-stat, .pri-item, .filter-btn, .chip, .stat-card,
.dashboard-card, .today-card, .acc-sub, .settings-section,
.hz-block, .hz-card, .session-card, .preset-chip, .pal-tile,
.profile-tile {
  border: 0 !important;
}

/* ── Compact PRIORITIES stat row — single horizontal strip at top ── */
#priorities-content .pri-stats,
#priorities-content .stats-row,
.pri-controls .pri-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 8px 12px;
  background: var(--ms-glass-bg);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  border-radius: var(--ms-r-pill);
  box-shadow: var(--ms-glass-rim);
}
#priorities-content .pri-stats .pri-stat,
#priorities-content .stats-row .stat-card,
.pri-controls .pri-stats .pri-stat {
  flex: 1 1 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 14px !important;
  border-radius: var(--ms-r-pill) !important;
  display: flex; align-items: baseline; gap: 8px;
  min-height: 36px;
  border-right: 0.5px solid var(--ms-hair);
}
#priorities-content .pri-stats .pri-stat:last-child,
#priorities-content .stats-row .stat-card:last-child {
  border-right: 0;
}
#priorities-content .pri-stats .pri-stat-n,
#priorities-content .pri-stats .stat-n,
#priorities-content .stats-row .stat-n {
  font-family: var(--ms-body) !important;
  font-size: 18px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--ms-mint) !important;
  letter-spacing: -0.02em;
  display: inline-block;
  transform-origin: center;
  transition: transform 0.18s var(--ms-ease);
}
#priorities-content .pri-stats .pri-stat-l,
#priorities-content .pri-stats .stat-l,
#priorities-content .stats-row .stat-l {
  font-family: var(--ms-body) !important;
  font-size: 9px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  color: var(--ms-ink-3) !important;
}
#priorities-content .pri-stats .pri-stat:hover .pri-stat-n {
  animation: ms-num-bump 0.42s var(--ms-ease);
}
@media (max-width: 700px) {
  #priorities-content .pri-stats { flex-wrap: wrap; border-radius: var(--ms-r-lg); padding: 10px; }
  #priorities-content .pri-stats .pri-stat { flex: 1 1 45%; border-right: 0; border-bottom: 0.5px solid var(--ms-hair); }
}

/* ── Num-bump animation: counters react to hover & data updates ──── */
@keyframes ms-num-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); color: var(--ms-mint); }
  100% { transform: scale(1); }
}
.pri-stat .stat-n,
.pri-stat .n,
.stat-card .stat-n,
.ms-hub-day b,
.ms-hub-card .meta b,
#ms-hub-practice-due-n,
#ms-prac-due-n,
.nb-count {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.18s var(--ms-ease), color 0.18s var(--ms-ease);
}
.pri-stat:hover .stat-n,
.pri-stat:hover .n,
.stat-card:hover .stat-n,
.ms-hub-card:hover .meta b {
  animation: ms-num-bump 0.42s var(--ms-ease);
}
.ms-num-updated {
  animation: ms-num-bump 0.5s var(--ms-ease) !important;
}

/* ── Unify button styles: ONE primary (gold pill), all else = muted text link ─ */
.btn-primary, .cta, .practice-btn, .drill-btn, .go-btn,
.search-btn, button.primary, .pri-act.primary {
  background: linear-gradient(180deg, var(--ms-gold) 0%, #b8962e 100%) !important;
  color: #1a1410 !important;
  border: 0 !important;
  border-radius: var(--ms-r-pill) !important;
  padding: 12px 26px !important;
  font-family: var(--ms-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 44px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 4px 12px rgba(212, 175, 55, 0.18) !important;
  cursor: pointer;
  transition: var(--ms-quick);
}
.btn-primary:hover, .cta:hover, .practice-btn:hover, .drill-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 6px 20px rgba(212, 175, 55, 0.32),
    0 0 0 1px rgba(212, 175, 55, 0.32) !important;
}
.btn-primary:active, .cta:active { transform: scale(0.97); }

/* Demote secondary actions to muted text links */
.btn-secondary, .ghost-btn, .settings-reset,
.pri-act:not(.primary):not(.gold),
button.secondary, button.link, a.btn-link {
  background: transparent !important;
  color: var(--ms-ink-3) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  font-family: var(--ms-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 36px !important;
  text-decoration: none;
  transition: color 0.15s var(--ms-ease);
}
.btn-secondary:hover, .ghost-btn:hover, a.btn-link:hover,
.pri-act:not(.primary):not(.gold):hover {
  color: var(--ms-mint) !important;
  background: transparent !important;
}

/* Filter pills stay distinct (toggleable scope chips, not actions) */
.filter-btn, .chip {
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--ms-ink-3) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  padding: 7px 14px !important;
  min-height: 32px !important;
  border-radius: var(--ms-r-pill) !important;
  text-transform: uppercase;
}
.filter-btn:hover, .chip:hover { color: var(--ms-mint) !important; background: var(--ms-mint-soft) !important; }
.filter-btn.on, .chip.active {
  background: var(--ms-mint-soft) !important;
  color: var(--ms-mint) !important;
  box-shadow: var(--ms-press-mint) !important;
}

/* ── Practice hub view tweaks (matches dashboard but a touch tighter) ─ */
#view-practice .ms-hub-card { min-height: 220px; }
#view-practice .ms-hub-greet { padding-bottom: 36px; }

/* ── Util buttons — bare (v208-fix). The previous "glassy round"
   block painted rgba(255,255,255,0.025) bg + an inset glass rim
   that read as a faint white shell around every icon. The site-wide
   strip in topbar.css (also !important) lost the cascade because
   manuscript.css loads later. Rule-by-rule kill of the chrome here. */
.util-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.util-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Top sub-tab nav-btn · Variant E (pure typographic, intense) ──
   Active tab reads through TYPE only: lighter mint, max weight, light
   glow. Single-layer text-shadow at small blur — the previous double
   layer with 32 px blur was GPU-expensive and caused a perceptible
   stall when flipping tabs. */
.hdr-bot .nav-btn.active {
  background: transparent !important;
  border: 0 !important;
  color: var(--ms-mint-2) !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  text-shadow: 0 0 10px rgba(95, 181, 148, 0.55) !important;
}

/* ── Sidebar sūrah list — glass-tinted active row with mint glow ── */
.ms-surah-list li.active {
  background: var(--ms-mint-soft) !important;
  box-shadow: inset 0 0 0 0.5px rgba(95, 181, 148, 0.30),
              0 0 12px rgba(95, 181, 148, 0.10) !important;
}

/* Practice hub stamp uses gold register to differentiate from main hub */
#view-practice .ms-hub-stamp { color: var(--ms-gold); }
#view-practice .ms-hub-stamp::before,
#view-practice .ms-hub-stamp::after { background: var(--ms-gold-rim); }
#view-practice .ms-hub-greet h1 em { color: var(--ms-gold); }
#view-practice .ms-hub-ar { color: var(--ms-gold); }

/* ── v206-isk33: Memorize iframe — full-bleed inside its view ──── */
/* v207-fix · Scope flex to .active so the iframe doesn't leak into
   other views. Without `.active`, this rule's ID specificity beat
   `.view { display: none }` and the iframe stayed visible forever
   after first load — every other view rendered underneath it. */
#view-memorize.active {
  padding: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.memorize-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 60px);
  border: 0;
  background: transparent;
  display: block;
}
/* Hide the global Quran sub-tab strip when on the Memorize iframe view —
   the embedded tool has its own topbar. The host's home button is also
   hidden here because the iframe carries its own home button (next to
   RECITE) which postMessages the parent to navigate back. */
body[data-view="memorize"] #hdr-bot-quran,
body[data-view="memorize"] .sidebar,
body[data-view="memorize"] .float-jump,
body[data-view="memorize"] .home-btn-left { display: none !important; }
body[data-view="memorize"] .main { padding: 0 !important; }
body[data-view="memorize"] .view { padding: 0 !important; }

/* v208-fix · Remove the hairline divider between the host topbar and the
   Memorize iframe + make the topbar fully opaque (no backdrop blur,
   no translucency) so the seam is invisible — topbar and iframe both
   render var(--ms-bg) at full opacity, no boundary line. */
body[data-view="memorize"] header.hdr {
  background: var(--ms-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body[data-view="memorize"] header.hdr .hdr-top {
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   v207 · Editorial Masthead — Hub view (variant A)
   ───────────────────────────────────────────────────────────────────
   Scoped to body[data-view="hub"]. Re-skins the topbar (centered
   brand, hidden sub-tabs) and the hero greeting (large italic
   Fraunces title with hairline rules + dated stamp + byline ribbon).
   The .ms-hub-card grid is preserved; only the feature card and a
   hover accent are nudged toward the v165 clay/orange palette.
   Practice hub (view-practice) is intentionally NOT affected.
   ═══════════════════════════════════════════════════════════════════ */

body[data-view="hub"] {
  --ms-clay:      #F4A574;
  --ms-clay-soft: rgba(244, 165, 116, 0.16);
  --ms-clay-rim:  rgba(244, 165, 116, 0.32);
  --ms-clay-on:   #0E1418;
}

/* — Topbar: integrated, no chrome — strip bg, blur, border, shadow so
   the topbar visually merges with the hub composition (no stitched
   strip). Brand stays centered; util icons float at top-right. — */
body[data-view="hub"] header.hdr {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body[data-view="hub"] header.hdr #hdr-bot-quran,
body[data-view="hub"] header.hdr #hdr-bot-arabic,
body[data-view="hub"] header.hdr #hdr-bot-commentary {
  display: none !important;
}
body[data-view="hub"] header.hdr .hdr-top {
  display: flex;
  position: relative;
  align-items: center;
  /* v187-isk22 · Brand stays on the LEFT of the top-bar (default flex-start).
     The earlier `justify-content: center` + margin-auto centering was reverted
     per direction. Padding bumped so the brand has air around it. */
  padding: 22px 24px 18px;
  gap: 0;
  background: transparent;
  border-bottom: 0;
}
/* v208-fix · Util buttons are now bare icons sitewide (topbar.css);
   on the hub we just shift hover color from mint → clay. */
body[data-view="hub"] header.hdr .util-btn:hover {
  color: var(--ms-clay);
  background: transparent;
  border: 0;
}
body[data-view="hub"] header.hdr .hdr-spacer { display: none; }
body[data-view="hub"] header.hdr .util-row {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  gap: 8px;
}
/* v208 · Brand colors on hub (the global brand layout in topbar.css uses
   mint by default; here we tint the galaxy-cluster mark in clay and pin
   the wordmark color to ms-ink so it reads correctly on cream in light
   mode and on charcoal in dark mode). */
body[data-view="hub"] header.hdr .brand-mark {
  color: var(--ms-clay);
}
body[data-view="hub"] header.hdr .brand-words .brand-en {
  color: var(--ms-ink);
}
body[data-view="hub"] header.hdr .brand-words .brand-tag {
  color: var(--ms-ink-3);
}
body[data-view="hub"] header.hdr .util-btn:hover {
  border-color: var(--ms-clay-rim);
  background: var(--ms-clay-soft);
  color: var(--ms-clay);
}

/* v207 hub content overrides REMOVED — the alt2 cosmic design owns its
   greet / stamp / byline / panel / card styling in main.css under
   .ms-hub-v207. Keeping these rules here clobbered the v207 styling
   (specificity body[data-view="hub"] > .ms-hub-v207). Topbar overrides
   above (transparent chrome, brand colors) remain because the v207
   block doesn't restyle the topbar. */

/* — Mobile (topbar only — content mobile rules live with the v207 block) — */
@media (max-width: 720px) {
  body[data-view="hub"] header.hdr .hdr-top { padding: 14px 16px 12px; }
  body[data-view="hub"] header.hdr .util-row { right: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v208-light-fix · Light-mode card surfaces + hub clay
   ───────────────────────────────────────────────────────────────────
   The earlier "Glassmorphism" block (line ~975) hardcoded
   --ms-glass-bg / --ms-glass-bg-2 / --ms-glass-rim and a literal
   dark linear-gradient on .ms-hub-card.feature — none of which
   flipped when data-mode="light", so cards stayed dark and dark
   text rendered invisible on the cream page bg.
   This block adds light variants for those tokens + overrides the
   feature card gradient + tunes the hub clay accent for cream.
   ═══════════════════════════════════════════════════════════════════ */

/* v208-light-fix .ms-hub-card overrides REMOVED — the alt2 cosmic design
   in .ms-hub-v207 (main.css) locks its own bg + cream tokens regardless
   of theme, so per-theme card reskinning here would just fight it.
   The v207 hub is dark-cosmic on every theme by design. */

/* Hub clay: dark mode uses light-orange (#F4A574, set in v207 hub block);
   light mode wants the deeper cream-friendly clay (#C9622E). Specificity
   matches the v207 body[data-view="hub"] rule, so cascade order wins —
   this block sits AFTER it. */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) body[data-view="hub"] {
  --ms-clay:      #C9622E;
  --ms-clay-soft: rgba(201, 98, 46, 0.10);
  --ms-clay-rim:  rgba(201, 98, 46, 0.30);
  --ms-clay-on:   #FAF7F0;
}

/* v208-fix · Brand mark contrast in light mode.
   The galaxy cluster SVG has built-in opacity:0.4-0.5 on its spiral
   arms — fine on dark (warm halo against charcoal), washed out on
   cream. Override the brand-mark color with a deeper variant so the
   marks read with real weight against the warm-cream surface.
   - Non-hub views: deep mint (#1F5A3F) instead of #2D8062.
   - Hub view: deep burnt-clay (#7A3A12) instead of #C9622E.
   Higher specificity than the topbar.css default + the v207 hub rule. */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) header.hdr .brand-mark {
  color: #1F5A3F;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) body[data-view="hub"] header.hdr .brand-mark {
  color: #7A3A12;
}

/* v208-fix · Brand wordmark in light mode.
   Keep the SAME size + weight as dark mode (Fraunces 26px / 500); only
   bend the color toward dark ink so it reads against cream. The chunky
   800 weight at 32px the user previously asked for was too aggressive. */
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) header.hdr .brand-words .brand-en,
html:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) header.hdr .brand-words .brand-en {
  color: #1A1612 !important;
  font-style: normal !important;
  opacity: 1 !important;
}
:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) header.hdr .brand-words .brand-tag,
html:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"]) header.hdr .brand-words .brand-tag {
  color: #5C5042 !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v208 · Commentary view (variant A · hub-style dashboard)
   ───────────────────────────────────────────────────────────────────
   Folded into index.html as #view-commentary. Mirrors the hub recipe:
   editorial centered hero, byline ribbon with corpus counts, three
   tactile scholar cards (Sakhāwī = feature). All scoped via
   body[data-view="commentary"]. Sub-tab strip + sidebar are hidden
   like on the hub since this is a self-contained landing page.
   ═══════════════════════════════════════════════════════════════════ */

/* — Hide sub-tab strips + sidebar on commentary view (same as hub).
   The topbar stays (with the new bare icons + theme toggle). — */
body[data-view="commentary"] header.hdr #hdr-bot-quran,
body[data-view="commentary"] header.hdr #hdr-bot-arabic,
body[data-view="commentary"] header.hdr #hdr-bot-commentary,
body[data-view="commentary"] .sidebar,
body[data-view="commentary"] .float-jump { display: none !important; }
body[data-view="commentary"] .main { padding: 0 !important; }
body[data-view="commentary"] #view-commentary { padding: 0 !important; }

/* — Container — */
.cmty {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 96px;
}

/* — Hero (editorial, centered) — */
.cmty-hero {
  text-align: center;
  padding: 24px 0 28px;
}
.cmty-stamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cmty-stamp::before, .cmty-stamp::after {
  content: '';
  height: 0.5px;
  width: 80px;
  background: var(--ms-hair-2);
  display: inline-block;
}
.cmty-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 96;
  font-weight: 300;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.026em;
  color: var(--ms-ink);
  margin: 0;
}
.cmty-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--ms-clay, var(--ms-mint));
}
.cmty-hero .cmty-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 24px;
  color: var(--ms-ink-2);
  direction: rtl;
  margin: 18px 0 0;
  line-height: 1.3;
}

/* — Byline ribbon — */
.cmty-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  padding: 18px 0 26px;
  border-bottom: 0.5px solid var(--ms-hair);
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
}
.cmty-byline b {
  color: var(--ms-clay, var(--ms-mint));
  font-weight: 600;
  margin-right: 4px;
  font-feature-settings: 'tnum';
}
.cmty-byline-sep {
  color: var(--ms-ink-4);
  opacity: 0.6;
}

/* — Card grid — */
.cmty-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cmty-cards .cmty-card.feature { grid-column: 1 / -1; }

/* — Card · base — */
.cmty-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px 22px;
  background: var(--ms-bg-1);
  border: 0.5px solid var(--ms-hair);
  border-radius: 18px;
  box-shadow: var(--ms-glass-rim, 0 1px 0 rgba(255,255,255,0.04) inset);
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(.34,1.36,.64,1),
    border-color 0.22s,
    box-shadow 0.22s;
  isolation: isolate;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.cmty-card:hover {
  transform: translateY(-3px);
  border-color: var(--ms-clay-rim, var(--ms-mint-rim));
}
.cmty-card:active {
  transform: translateY(0);
}
.cmty-card .cmty-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmty-card .cmty-num-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ms-clay-soft, var(--ms-mint-soft));
  color: var(--ms-clay, var(--ms-mint));
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.cmty-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 36;
  font-weight: 400;
  font-size: 28px;
  /* v187-isk15-cmty-h3 · line-height bumped from 1.05; Amiri Quran ascenders
     (tashdīd, fatḥah, dammah on al-Mudhish / al-Iskāfī) were clipped by the
     card's overflow:hidden when the Arabic span was baseline-aligned with
     a tight line-box. Center alignment + roomier line keeps both names
     visually balanced without losing the diacritics. */
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ms-ink);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* v187-isk13-cmty-wrap · allow long names + Arabic to break, not protrude */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cmty-card h3 .cmty-card-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 22px;
  line-height: 1.5; /* v187-isk15 · room for tashdīd/fatḥah above the line */
  color: var(--ms-ink-2);
  font-weight: 400;
  letter-spacing: 0;
  direction: rtl;
}
.cmty-card .cmty-work {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--ms-ink-3);
  line-height: 1.4;
  margin-top: -6px;
  /* v187-isk13-cmty-wrap · long work titles wrap inside the card */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cmty-card p {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ms-ink-2);
  max-width: 50ch;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cmty-card .cmty-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 0.5px solid var(--ms-hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  color: var(--ms-ink-3);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.cmty-card .cmty-meta b {
  color: var(--ms-ink);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.cmty-card .cmty-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0.5px solid var(--ms-hair);
  color: var(--ms-ink-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  transition: all 0.22s;
  flex-shrink: 0;
}
.cmty-card:hover .cmty-arrow {
  color: var(--ms-clay, var(--ms-mint));
  border-color: var(--ms-clay, var(--ms-mint));
  background: var(--ms-clay-soft, var(--ms-mint-soft));
  transform: translateX(2px);
}
.cmty-card:hover .cmty-meta b {
  color: var(--ms-clay, var(--ms-mint));
}

/* — Feature card (al-Sakhāwī) — bigger + radial clay bleed — */
.cmty-card.feature {
  padding: 36px 38px 32px;
  background:
    radial-gradient(140% 100% at 0% 0%, var(--ms-clay-soft, var(--ms-mint-soft)) 0%, transparent 55%),
    var(--ms-bg-1);
  border-color: var(--ms-clay-soft, var(--ms-mint-soft));
  gap: 18px;
}
.cmty-card.feature h3 {
  font-size: 42px;
  font-variation-settings: 'opsz' 64;
}
.cmty-card.feature h3 .cmty-card-ar {
  font-size: 30px;
}
.cmty-card.feature .cmty-work {
  font-size: 15px;
}
.cmty-card.feature p {
  font-size: 15px;
  max-width: 56ch;
}

/* — Footer line — */
.cmty-foot {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--ms-ink-3);
  text-align: center;
  padding-top: 32px;
  margin-top: 28px;
  border-top: 0.5px solid var(--ms-hair);
  letter-spacing: 0;
}

/* — Mobile — */
@media (max-width: 720px) {
  .cmty { padding: 18px 16px 80px; }
  .cmty-hero { padding: 18px 0 22px; }
  .cmty-stamp::before, .cmty-stamp::after { width: 40px; }
  .cmty-hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .cmty-cards { grid-template-columns: 1fr; gap: 14px; }
  .cmty-cards .cmty-card.feature { grid-column: auto; }
  .cmty-card { padding: 22px 22px 20px; }
  .cmty-card.feature { padding: 28px 24px 24px; }
  .cmty-card.feature h3 { font-size: 34px; }
  .cmty-card h3 { font-size: 24px; }
  .cmty-card h3 .cmty-card-ar { font-size: 20px; }
  .cmty-byline { gap: 12px 18px; padding: 14px 0 20px; font-size: 10px; }
}