/* =============================================================
   HIRZ — Quiet Sanctuary
   Ottoman manuscript × Andalusian mihrab × modern reader
   ============================================================= */

/* ===== TOKENS (v125+ — light-dark() refactor) =====
   Day + Night pair collapsed into single declarations using CSS
   light-dark(). Sepia remains an explicit override (it's a third
   user-chosen mode, not auto-detected). color-scheme is set per
   data-theme so light-dark() resolves correctly + native UI
   (scrollbars, form controls) matches the theme.
   gold + emerald ramps moved to oklch() for perceptually-uniform
   lightness steps; older hex values retained as inline reference. */

:root {
  color-scheme: light dark;

  /* Each token below has TWO declarations:
       1. Static day-value fallback (older Safari <17.5, Firefox <120, Chrome <123).
          When light-dark() is unsupported, the second declaration is invalid
          and the cascade keeps the first one — so the app still renders.
       2. light-dark() with explicit day/night pair. Modern engines pick this.
     The night-mode component overrides downstream still apply on
     [data-theme="night"] regardless of which declaration won here. */

  /* Surface ramp */
  --bg:           #ede2c4;
  --bg:           light-dark(#ede2c4, #13110e);
  --bg-deep:      #e3d6b0;
  --bg-deep:      light-dark(#e3d6b0, #0d0c0a);
  --grain:        rgba(168, 134, 46, 0.05);
  --grain:        light-dark(rgba(168, 134, 46, 0.05), rgba(212, 175, 55, 0.03));
  --surface:      #fbf3da;
  --surface:      light-dark(#fbf3da, #1c1914);
  --surface-2:    #f6ecca;
  --surface-2:    light-dark(#f6ecca, #24201a);
  --surface-deep: #efe2b6;
  --surface-deep: light-dark(#efe2b6, #16140f);

  /* Text ramp */
  --ink:          #1a1208;
  --ink:          light-dark(#1a1208, #ece2c4);
  --ink-2:        #3a2c1c;
  --ink-2:        light-dark(#3a2c1c, #d4c79a);
  --ink-soft:     #6c5a3e;
  --ink-soft:     light-dark(#6c5a3e, #a89978);
  --ink-mute:     #8a7855;
  --ink-mute:     light-dark(#8a7855, #7e7256);

  /* Line / hairlines */
  --line:         #d4c294;
  --line:         light-dark(#d4c294, rgba(212, 175, 55, 0.18));
  --line-soft:    rgba(168, 134, 46, 0.18);
  --line-soft:    light-dark(rgba(168, 134, 46, 0.18), rgba(212, 175, 55, 0.08));

  /* Gold ramp — oklch() in light-dark, hex fallback for older engines */
  --gold:         #8d7128;
  --gold:         light-dark(oklch(0.52 0.10 78), oklch(0.74 0.13 80));
  --gold-2:       #a07e2c;
  --gold-2:       light-dark(oklch(0.58 0.11 78), oklch(0.78 0.14 80));
  --gold-leaf:    #c9a235;
  --gold-leaf:    light-dark(oklch(0.71 0.13 80), oklch(0.86 0.13 84));
  --gold-glow:    rgba(201, 162, 53, 0.30);
  --gold-glow:    light-dark(oklch(0.71 0.13 80 / 0.30), oklch(0.86 0.13 84 / 0.26));

  /* Emerald ramp */
  --emerald:      #0f3d2f;
  --emerald:      light-dark(oklch(0.34 0.05 162), oklch(0.42 0.07 162));
  --emerald-2:    #0a2a22;
  --emerald-2:    light-dark(oklch(0.24 0.04 162), oklch(0.13 0.01 60));
  --emerald-3:    #134a3a;
  --emerald-3:    light-dark(oklch(0.40 0.06 160), oklch(0.48 0.08 160));
  --emerald-soft: rgba(15, 61, 47, 0.10);
  --emerald-soft: light-dark(color-mix(in oklch, oklch(0.34 0.05 162) 10%, transparent),
                              color-mix(in oklch, oklch(0.86 0.13 84) 5%, transparent));

  /* Accents */
  --vermillion:   #a13c2a;
  --vermillion:   light-dark(#a13c2a, #e0936c);
  --moss:         #5a7a5e;
  --moss:         light-dark(#5a7a5e, #84a387);
  --rose:         #c87a5e;
  --rose:         light-dark(#c87a5e, #e0a489);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 36, 28, 0.04);
  --shadow-xs: light-dark(0 1px 2px rgba(20, 36, 28, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5));
  --shadow-sm: 0 2px 6px rgba(20, 36, 28, 0.06);
  --shadow-sm: light-dark(0 2px 6px rgba(20, 36, 28, 0.06), 0 2px 8px rgba(0, 0, 0, 0.45));
  --shadow-md: 0 10px 28px rgba(20, 36, 28, 0.10);
  --shadow-md: light-dark(0 10px 28px rgba(20, 36, 28, 0.10), 0 12px 32px rgba(0, 0, 0, 0.55));
  --shadow-lg: 0 28px 64px rgba(20, 36, 28, 0.18);
  --shadow-lg: light-dark(0 28px 64px rgba(20, 36, 28, 0.18), 0 28px 64px rgba(0, 0, 0, 0.7));

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --arabic-size: 2.05rem;

  /* Motion + duration scale */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
}

/* Drive light-dark() resolution per user-chosen theme. data-theme is set
   by the FOUC guard on <html>; cascades color-scheme to all descendants
   so light-dark() picks the correct branch regardless of OS preference. */
[data-theme="day"]   { color-scheme: light; }
[data-theme="night"] { color-scheme: dark; }
[data-theme="sepia"] { color-scheme: light; /* sepia is a warm-light mode */ }

/* Night-only tokens that don't exist in day mode (kept as-is to avoid
   breaking 80+ component-specific [data-theme="night"] override rules
   downstream — those continue to work via attribute selector cascade). */
[data-theme="night"] {
  --arabic-scale: 1.06;
}

[data-theme="sepia"] {
  --bg: #f4e8d0;
  --bg-deep: #ead9b6;
  --grain: rgba(140, 95, 30, 0.04);
  --surface: #faf0d9;
  --surface-2: #f2e4c4;
  --surface-deep: #e8d6ad;
  --ink: #2a1c08;
  --ink-2: #4a3618;
  --ink-soft: #7a6038;
  --ink-mute: #9b8554;
  --line: #d8c089;
  --line-soft: rgba(140, 95, 30, 0.16);
  --gold: #7a5e18;
  --gold-2: #8e741c;
  --gold-leaf: #b58f30;
  --gold-glow: rgba(122, 94, 24, 0.28);
  --emerald: #3a4416;
  --emerald-2: #2a3010;
  --emerald-3: #4a541b;
  --emerald-soft: rgba(58, 68, 22, 0.10);
  --vermillion: #8a3a20;
  --moss: #6f7e3a;
  --arabic-scale: 1.015;
}

/* ===== RESET ===== */
*,*::before,*::after { box-sizing: border-box; }
/* Disable native pull-to-refresh — sheet drag handles its own gesture */
html { overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Lora', 'Iowan Old Style', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.55 0 0 0 0 0.18 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Shortened from 0.6s — View Transitions API now drives theme crossfade
     (see ::view-transition-* rules at end of file). This residual transition
     covers browsers without View Transitions support (Firefox until ~2026). */
  transition: background-color var(--dur-base, 0.3s) var(--ease), color var(--dur-base, 0.3s) var(--ease);
  overflow-x: hidden;
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

::selection { background: var(--gold-glow); color: var(--ink); }

/* ===== TYPOGRAPHY ===== */
.eyebrow,
.toolbar label,
.toolbar button,
.section-nav button,
.reader-nav label,
.badge,
.sticky-title,
.tabligh-header,
.kisah-accordion summary,
.tarteel-float-btn {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

h1, h2, h3, .play-section, #readingProgress, #audioStatus, #stopAudio {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

.tagline, .keterangan, .hadis-translation, .terjemahan {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
}

.mushaf, .hadis-arabic {
  font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}

/* ===== TOP RAIL ===== */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--gold-leaf) 30%, var(--gold-2) 60%, transparent);
  z-index: 9999;
  transition: width 0.15s linear;
  box-shadow: 0 0 14px var(--gold-glow);
  pointer-events: none;
}

/* ===== HEADER ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  text-align: center;
  color: #f5ecd1;
  background:
    radial-gradient(ellipse at 50% 0%, var(--emerald-3), var(--emerald) 55%, var(--emerald-2));
  box-shadow: 0 14px 40px rgba(7, 32, 26, 0.35);
  overflow: hidden;
}

[data-theme="sepia"] .app-header {
  background: radial-gradient(ellipse at 50% 0%, #4a5520, var(--emerald) 55%, var(--emerald-2));
}

.app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.5' opacity='0.18'%3E%3Cpath d='M40 6L74 40L40 74L6 40Z'/%3E%3Cpath d='M40 18L62 40L40 62L18 40Z'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
}

.app-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-leaf) 25%, var(--gold-2) 50%, var(--gold-leaf) 75%, transparent);
  opacity: 0.85;
}

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  width: 100%;
}

.header-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--gold-leaf);
  text-shadow: 0 0 14px var(--gold-glow);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.header-ornament svg { width: 100%; height: 100%; display: block; }

.brand-block { min-width: 0; }

.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--gold-leaf);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.app-header h1 {
  margin: 0;
  font-family: 'Aref Ruqaa', 'Amiri Quran', serif;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(180deg, #fbf3da, var(--gold-leaf) 60%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.01em;
}

.tagline {
  margin: 0.25rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(245, 236, 209, 0.62);
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* ===== HEADER STATUS RAIL ===== */
.header-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  width: 100%;
  max-width: 560px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.74rem;
}

.header-status > span,
.header-status > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.25rem 0.75rem;
  color: #f5ecd1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 99px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.25s var(--ease);
}

.header-status button { cursor: pointer; }
.header-status button:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.16);
  border-color: var(--gold-leaf);
  transform: translateY(-1px);
  color: var(--gold-leaf);
}
.header-status button:disabled { opacity: 0.32; cursor: not-allowed; }

#readingProgress {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3rem;
  color: var(--gold-leaf);
}
#audioStatus { font-style: italic; opacity: 0.95; }

/* Theme switcher */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(212, 175, 55, 0.22) !important;
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 99px;
  color: rgba(245, 236, 209, 0.55);
  font-size: 0.85rem;
  transition: all 0.3s var(--ease);
}
.theme-switch button:hover { color: var(--gold-leaf); transform: none; background: rgba(212, 175, 55, 0.12); }
.theme-switch button.active {
  color: var(--emerald-2);
  background: var(--gold-leaf);
  box-shadow: 0 0 14px var(--gold-glow);
}

/* Completion ring */
.completion-ring {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.7rem 0.2rem 0.4rem !important;
}
.completion-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.completion-ring svg circle { fill: none; stroke-width: 3; }
.completion-ring svg .track { stroke: rgba(212, 175, 55, 0.18); }
.completion-ring svg .meter {
  stroke: var(--gold-leaf);
  stroke-linecap: round;
  stroke-dasharray: 56.5;
  stroke-dashoffset: 56.5;
  transition: stroke-dashoffset 0.6s var(--ease-out);
  filter: drop-shadow(0 0 4px var(--gold-glow));
}
.completion-ring .ring-label {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--gold-leaf);
  font-weight: 600;
}

/* ===== APP SHELL ===== */
.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.5rem;
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; gap: 0.85rem; padding: 0 0.85rem 7rem; }
}

/* ===== SIDEBAR NAV ===== */
.reader-nav {
  position: sticky;
  top: calc(var(--header-h, 5.4rem) + 0.85rem);
  align-self: start;
  margin-top: 1.25rem;
  max-height: calc(100svh - var(--header-h, 5.4rem) - 1.5rem);
  overflow-y: auto;
  padding: 1.15rem 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.reader-nav::-webkit-scrollbar { width: 4px; }
.reader-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.reader-nav label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.reader-nav label::before {
  content: '◆';
  color: var(--gold-leaf);
  font-size: 0.7rem;
  text-shadow: 0 0 6px var(--gold-glow);
}

#sectionJump {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.86rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#sectionJump:focus {
  border-color: var(--emerald);
  outline: none;
  box-shadow: 0 0 0 3px var(--emerald-soft);
}

.section-nav {
  display: grid;
  gap: 1px;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.section-nav button {
  position: relative;
  width: 100%;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  color: var(--ink-soft);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  transition: all 0.2s var(--ease);
  line-height: 1.35;
}
.section-nav button::before {
  content: '';
  position: absolute;
  left: 0.5rem; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--line);
  transition: all 0.3s var(--ease);
}
.section-nav button:hover {
  color: var(--emerald);
  background: var(--emerald-soft);
}
.section-nav button:hover::before { background: var(--emerald); }
.section-nav button.active {
  color: var(--emerald);
  background: var(--emerald-soft);
  font-weight: 700;
}
.section-nav button.active::before {
  background: var(--gold-leaf);
  box-shadow: 0 0 8px var(--gold-glow);
  width: 8px; height: 8px;
  margin-top: -4px;
}
.section-nav button.completed::after {
  content: '✓';
  position: absolute;
  right: 0.6rem; top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Night theme: emerald-on-emerald-soft = invisible — switch to gold */
[data-theme="night"] .section-nav button:hover,
[data-theme="night"] .section-nav button:focus-visible {
  color: var(--gold-leaf);
  background: rgba(241, 211, 120, 0.10);
}
[data-theme="night"] .section-nav button:hover::before { background: var(--gold-leaf); }
[data-theme="night"] .section-nav button.active {
  color: var(--gold-leaf);
  background: rgba(241, 211, 120, 0.14);
}

/* ===== TOOLBAR ===== */
.toolbar {
  position: sticky;
  top: var(--header-h, 5.4rem);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.4rem 0.7rem;
  flex-wrap: wrap;
  margin: 0 0 1.15rem;
  padding: 0.7rem 1rem;
  background: rgba(251, 243, 218, 0.85);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-sm);
}

[data-theme="night"] .toolbar { background: rgba(12, 46, 37, 0.82); }
[data-theme="sepia"] .toolbar { background: rgba(236, 220, 174, 0.85); }

.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.1rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}

.toolbar label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px; height: 22px;
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.toolbar label input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.toolbar label input[type="checkbox"]:checked {
  background: var(--emerald);
  border-color: var(--emerald);
}
.toolbar label input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: var(--gold-leaf);
}
.toolbar label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}
.toolbar label input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }
.toolbar label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.toolbar button {
  min-width: 2.5rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  color: var(--emerald);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  transition: all 0.2s var(--ease);
}
.toolbar button:hover {
  background: var(--emerald-soft);
  border-color: var(--emerald);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.toolbar button:active { transform: translateY(0); }

/* Night theme: emerald text on dark surface is invisible — switch to gold */
[data-theme="night"] .toolbar button {
  color: var(--gold-leaf);
  background: var(--emerald-2);
  border-color: rgba(241, 211, 120, 0.28);
}
[data-theme="night"] .toolbar button:hover {
  background: var(--emerald-3);
  border-color: var(--gold-leaf);
  box-shadow: 0 0 0 1px rgba(241, 211, 120, 0.18);
}

/* Font size segmented group — flows inline with toggles, separator marks the group */
.font-size-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--line-soft);
}
.font-size-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.font-size-group button {
  min-width: 2.25rem;
  min-height: 2.1rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.88rem;
}

/* ===== OPENER (Ta'awwudh + Bismillah, decorative — not a numbered section) ===== */
.opener {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  padding: 2.4rem clamp(1rem, 4vw, 2.5rem) 2rem;
  text-align: center;
  position: relative;
  background: transparent;
  border: none;
}
.opener::before,
.opener::after {
  content: '';
  position: absolute;
  left: 50%;
  width: clamp(160px, 55%, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-leaf), var(--gold), transparent);
  transform: translateX(-50%);
}
.opener::before { top: 0.6rem; }
.opener::after { bottom: 0.6rem; }

.opener-eyebrow {
  margin: 0 0 1.1rem;
  color: var(--gold);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.opener-eyebrow::before,
.opener-eyebrow::after {
  content: '◆';
  color: var(--gold-leaf);
  margin: 0 0.7rem;
  font-size: 0.55rem;
  vertical-align: middle;
  text-shadow: 0 0 6px var(--gold-glow);
}

.opener-arabic {
  font-family: 'Amiri Quran', 'Aref Ruqaa', serif;
  font-size: clamp(1.5rem, 4.2vw, 2.3rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.95;
  margin: 0;
  direction: rtl;
  letter-spacing: 0.005em;
}
.opener-bismillah {
  margin-top: 0.6rem;
  font-family: 'Aref Ruqaa', 'Amiri Quran', serif;
  font-weight: 700;
  color: var(--emerald);
  font-size: clamp(1.65rem, 4.6vw, 2.5rem);
  line-height: 1.5;
  text-shadow: 0 0 22px var(--gold-glow);
}
[data-theme="night"] .opener-bismillah { color: var(--gold-leaf); }
[data-theme="night"] .opener-arabic:not(.opener-bismillah) { color: var(--ink-2); }

.opener-translation {
  margin: 1.1rem auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.opener-translation i { color: inherit; }

/* Opener — primary CTA button "Mula Bacaan Penuh" */
.opener-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem auto 0;
  padding: 0.85rem 1.9rem;
  color: var(--emerald-2);
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-leaf) 0%, var(--gold-2) 60%, var(--gold) 100%);
  border: 1px solid var(--gold);
  border-radius: 99px;
  box-shadow: 0 8px 24px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.opener-play::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 11px solid var(--emerald-2);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 2px;
  transition: all 0.25s var(--ease);
}
.opener-play:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}
.opener-play:active:not(:disabled) { transform: translateY(0); }
.opener-play:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(135deg, var(--surface-deep), var(--surface-2));
  color: var(--ink-mute);
  box-shadow: none;
  border-color: var(--line);
}
.opener-play:disabled::before { border-left-color: var(--ink-mute); }
.opener-play.is-playing {
  background: linear-gradient(135deg, var(--emerald-3), var(--emerald));
  color: var(--gold-leaf);
  border-color: var(--gold-leaf);
  box-shadow: 0 0 28px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
.opener-play.is-playing::before {
  width: 11px; height: 12px;
  border: none;
  border-left: 3.5px solid var(--gold-leaf);
  border-right: 3.5px solid var(--gold-leaf);
  margin-left: 0;
}

/* Opener karaoke states */
.opener.karaoke-active {
  position: relative;
}
.opener.karaoke-active::before,
.opener.karaoke-active::after {
  background: linear-gradient(90deg, transparent, var(--gold-leaf), var(--gold-2), var(--gold-leaf), transparent);
}
.opener .ayat-sync-active {
  background: radial-gradient(ellipse at 50% 50%, var(--gold-glow), transparent 75%);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  margin: 0 auto;
  display: inline-block;
  animation: ayat-breath 2.6s var(--ease) infinite;
}

@media (max-width: 760px) {
  .opener-play { padding: 0.7rem 1.4rem; font-size: 0.78rem; letter-spacing: 0.08em; margin-top: 1.1rem; }
  .opener-play::before { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
}

.hide-translation .opener-translation { display: none; }
.focus-mode .opener { padding: 3rem 1rem 2.4rem; }
.focus-mode .opener-translation { display: none; }
.focus-mode .opener-learn { display: none; }
.hide-hadith .opener-learn { display: none; }

/* Opener — Learn accordion (hadis + keterangan + kisah) */
.opener-learn {
  width: min(100%, 720px);
  margin: 1.4rem auto 0;
  text-align: left;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.4s var(--ease);
}
.opener-learn[open] {
  box-shadow: var(--shadow-sm);
  border-color: var(--gold);
}
.opener-learn > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  color: var(--gold);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.2s var(--ease);
  text-align: left;
}
.opener-learn > summary::-webkit-details-marker { display: none; }
.opener-learn > summary:hover { background: rgba(168, 134, 46, 0.08); color: var(--emerald); }
[data-theme="night"] .opener-learn > summary { color: var(--gold-leaf); }
[data-theme="night"] .opener-learn > summary:hover { background: rgba(212, 175, 55, 0.10); color: var(--gold-bright, var(--gold-leaf)); }
.opener-learn > summary .icon { font-size: 1rem; flex-shrink: 0; }
.opener-learn > summary .title { flex: 1; }
.opener-learn > summary .arrow { font-size: 0.7rem; opacity: 0.65; transition: transform 0.3s var(--ease); }
.opener-learn[open] > summary .arrow { transform: rotate(180deg); }

.opener-learn-content {
  padding: 0.4rem clamp(1rem, 2.5vw, 1.4rem) 1.3rem;
  border-top: 1px dashed var(--line-soft);
  text-align: left;
}
.opener-learn-content .hadis-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.85rem;
  padding-bottom: 0.55rem;
  color: var(--emerald);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  border-bottom: 1px dashed var(--line-soft);
}
[data-theme="night"] .opener-learn-content .hadis-title { color: var(--gold-leaf); }

.opener-learn-content .keterangan {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line-soft);
  color: var(--ink-2);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.7;
}
.opener-learn-content .keterangan b { color: var(--emerald); font-style: normal; }
[data-theme="night"] .opener-learn-content .keterangan b { color: var(--gold-leaf); }

.opener-learn-content .kisah-accordion { margin-top: 1rem; }

@media (max-width: 760px) {
  .opener-learn { margin-top: 1rem; }
  .opener-learn > summary { padding: 0.7rem 0.85rem; font-size: 0.74rem; }
  .opener-learn-content { padding: 0.3rem 0.85rem 1rem; }
  .opener-learn-content .hadis-title { font-size: 0.82rem; }
  .opener-learn-content .keterangan { font-size: 0.92rem; }
}

@media (max-width: 760px) {
  .opener { padding: 1.6rem 0.8rem 1.4rem; margin-bottom: 1rem; }
  .opener-eyebrow { font-size: 0.55rem; margin-bottom: 0.85rem; }
  .opener-arabic { line-height: 1.85; }
  .opener-translation { font-size: 0.9rem; margin-top: 0.85rem; }
}

/* ===== STAR DIVIDER (Khatam Sulaiman) ===== */
.star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.4rem 0 0.4rem;
  padding: 0.5rem 0;
  opacity: 0.85;
}
.star-divider::before,
.star-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 90px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.star-divider::after { background: linear-gradient(90deg, var(--line), transparent); }
.star-divider svg {
  width: 22px; height: 22px;
  color: var(--gold-leaf);
  filter: drop-shadow(0 0 6px var(--gold-glow));
}

/* ===== READER PANEL & SECTIONS ===== */
.reader-panel { min-width: 0; }
.reader-content {
  display: grid;
  gap: 1rem;
}

.reader-section {
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  scroll-margin-top: 6rem;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-soft),
    transform 0.7s var(--ease-soft),
    box-shadow 0.4s var(--ease);
}
.reader-section.is-visible { opacity: 1; transform: translateY(0); }

/* Surah Pilihan sections force-visible (skip IntersectionObserver fade-in
   gate). For very tall sections like Yasin/Waqi'ah, observer threshold
   transitions can be unreliable when user lands mid-section. */
.reader-section-surah-pilihan { opacity: 1 !important; transform: none !important; }

/* Hadith methodology disclosure note — small, subtle gold-tinted bar above
   every fadhilat-box's hadith list. Discloses that Sahih/Hasan/Dhaif badges
   follow Sheikh Al-Albani's modern grading methodology (which differs from
   traditional grading). Tap → toast with full explanation. */
.hadis-methodology-note {
  margin: 0.5rem 0 0.85rem;
  padding: 0.4rem 0.7rem;
  background: rgba(212, 175, 55, 0.08);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
  cursor: help;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s var(--ease), border-left-color 0.2s var(--ease);
}
.hadis-methodology-note:hover {
  background: rgba(212, 175, 55, 0.14);
  border-left-color: var(--gold-leaf);
}
.hadis-methodology-note .icon-svg {
  color: var(--gold);
  flex-shrink: 0;
  vertical-align: -0.05em;
  margin-right: 0;
}
.hadis-methodology-note strong {
  color: var(--ink-2);
  font-weight: 600;
}
[data-theme="night"] .hadis-methodology-note {
  background: rgba(230, 199, 90, 0.08);
  border-left-color: var(--gold-leaf);
}
[data-theme="night"] .hadis-methodology-note .icon-svg {
  color: var(--gold-leaf);
}
.reader-section:hover { box-shadow: var(--shadow-md); }
.reader-section.karaoke-active {
  box-shadow: 0 0 0 1px var(--gold-leaf), 0 24px 48px rgba(168, 134, 46, 0.18);
}

/* Mihrab arch heading */
.section-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.4rem clamp(1rem, 2.5vw, 1.6rem) 1.1rem;
  color: #f5ecd1;
  background:
    radial-gradient(ellipse at 50% -20%, var(--emerald-3), var(--emerald) 60%, var(--emerald-2));
  border-bottom: 2px solid var(--gold);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  isolation: isolate;
}
.section-heading::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.4' opacity='0.20'%3E%3Cpath d='M20 4L36 20L20 36L4 20Z'/%3E%3Cpath d='M20 12L28 20L20 28L12 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}
.section-heading::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-leaf), var(--gold-2), var(--gold-leaf), transparent);
  opacity: 0.85;
}

.section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-leaf);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold);
  border-radius: 50%;
  text-shadow: 0 0 8px var(--gold-glow);
  box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.15);
}

.section-heading-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}

.section-heading h2 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: #fbf3da;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.play-section {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  color: var(--gold-leaf);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--gold);
  border-radius: 99px;
  transition: all 0.25s var(--ease);
}
.play-section::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 9px solid var(--gold-leaf);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
  transition: all 0.25s var(--ease);
}
.play-section:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.22);
  color: #fff;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}
.play-section:hover:not(:disabled)::before { border-left-color: #fff; }
.play-section:disabled {
  opacity: 0.45;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(212, 175, 55, 0.3);
}
.play-section:disabled::before { display: none; }
.play-section.is-playing {
  background: var(--gold-leaf);
  border-color: var(--gold-leaf);
  color: var(--emerald-2);
  box-shadow: 0 0 24px var(--gold-glow);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
.play-section.is-playing::before {
  width: 9px; height: 10px;
  border: none;
  border-left: 3px solid var(--emerald-2);
  border-right: 3px solid var(--emerald-2);
  margin-left: 0;
}

@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 32px rgba(212, 175, 55, 0.7); }
}

/* ===== AYAT BLOCK ===== */
.ayat-block {
  padding: clamp(1.1rem, 2.8vw, 1.7rem) clamp(1rem, 2.5vw, 1.6rem);
  background: var(--surface);
}

.verse-group, .taawwudh-group {
  position: relative;
  margin-bottom: 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px dashed var(--line-soft);
  transition: all 0.4s var(--ease);
}
.verse-group:last-child, .taawwudh-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Karaoke active verse — breathing gold halo */
.reader-section.karaoke-active .verse-group,
.reader-section.karaoke-active .taawwudh-group {
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}
.reader-section.karaoke-active .ayat-sync-active {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse at 50% 50%, var(--gold-glow), transparent 70%),
    var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  margin: -0.3rem 0;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 1px var(--gold-leaf), 0 12px 28px rgba(212, 175, 55, 0.18);
  animation: ayat-enter 1.4s var(--ease-out) both;
}
@keyframes ayat-enter {
  0%   { box-shadow: 0 0 0 1px var(--gold-2), 0 6px 14px rgba(212, 175, 55, 0.10); }
  60%  { box-shadow: 0 0 0 1px var(--gold-leaf), 0 16px 36px rgba(212, 175, 55, 0.28); }
  100% { box-shadow: 0 0 0 1px var(--gold-leaf), 0 12px 28px rgba(212, 175, 55, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .reader-section.karaoke-active .ayat-sync-active { animation: none; }
}

/* Per-ayat play button — small circular icon top-left of verse-group.
   Subtle by default (low opacity), brightens on hover/focus/active.
   Position: top-left (LTR-side, away from RTL mushaf flow).
   Reserve a left-side gutter on .mushaf below so long RTL ayat that wrap
   to the left edge don't overlap the button glyph. */
.verse-group > .mushaf,
.taawwudh-group > .mushaf {
  padding-left: 2.5rem;
}
.verse-play-btn {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.45));
  background: var(--surface, rgba(251, 243, 218, 0.7));
  color: var(--gold-leaf, #b8860b);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.verse-play-btn:hover,
.verse-play-btn:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
  outline: none;
}
.verse-play-btn:active { transform: scale(0.95); }
.verse-group.is-verse-playing .verse-play-btn,
.taawwudh-group.is-verse-playing .verse-play-btn,
.opener-bismillah.is-verse-playing .verse-play-btn {
  opacity: 1;
  background: linear-gradient(180deg, var(--gold-leaf, #d4af37), var(--gold, #c8a32d));
  color: #fff;
  border-color: var(--gold-leaf, #d4af37);
}
.verse-group.is-verse-playing .verse-play-btn .ico-play,
.taawwudh-group.is-verse-playing .verse-play-btn .ico-play,
.opener-bismillah.is-verse-playing .verse-play-btn .ico-play {
  display: none;
}
.verse-group.is-verse-playing .verse-play-btn .ico-pause,
.taawwudh-group.is-verse-playing .verse-play-btn .ico-pause,
.opener-bismillah.is-verse-playing .verse-play-btn .ico-pause {
  display: inline !important;
}
[data-theme="night"] .verse-play-btn {
  background: rgba(12, 46, 37, 0.6);
  color: var(--gold-2, #d4af37);
}
@media (max-width: 640px) {
  .verse-play-btn { opacity: 0.7; }
}
/* Hide per-ayat ▶ in focus mode — driver-glance UX uses karaoke sync,
   no manual per-verse tapping. Also keeps the large-text layout free
   of the small button which would otherwise overlap the magnified mushaf. */
.focus-mode .verse-play-btn { display: none; }

.mushaf {
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-size: calc(var(--arabic-size) * var(--arabic-scale, 1));
  line-height: 2.15;
  text-align: right;
  direction: rtl;
  font-feature-settings: "calt", "liga";
  letter-spacing: 0.005em;
  transition: font-size 0.3s var(--ease);
}

[data-theme="night"] .mushaf { color: var(--ink); }

/* Mushaf verse-end ornament — 8-pointed Khatam Sulaiman star matching
   the project's recurring motif (.star-divider). The Eastern Arabic verse
   number is centered inside the inner octagon. Injected at runtime by
   addAyahMarkers(); SVG inline so currentColor adapts to theme. */
/* Verse-end marker: U+06DD ARABIC END OF AYAH followed by Eastern Arabic
   digits (٠–٩). In Amiri Quran font, U+06DD + digits combines into the
   classical mushaf rosette glyph with the verse number rendered inside.
   Falls back gracefully on systems without Quranic ligature support —
   ۝١ still reads as "verse 1" with the proper end-of-ayah symbol.

   Vertical alignment: Amiri Quran's rosette is designed with its visual
   centre BELOW the text baseline (traditional mushaf convention), which
   makes it look like it's "hanging" below the line when placed inline.
   We compensate with translateY to lift it up so the rosette centre aligns
   with the surrounding mushaf x-height. Use inline-block + transform
   instead of vertical-align em values because vertical-align changes the
   line-box height, while transform is purely visual.  */
.ayat-marker {
  display: inline-block;
  margin: 0 0.18em 0 0.12em;
  font-family: 'Amiri Quran', 'Scheherazade New', 'Traditional Arabic', serif;
  color: var(--gold-2, #c9962a);
  user-select: none;
  white-space: nowrap;
  text-shadow: 0 0 1px rgba(212, 175, 55, 0.35);
  /* Lift the rosette so its visual centre aligns with the text mid-line */
  transform: translateY(-0.35em);
  /* Hint to OpenType engine: enable contextual + stylistic alternates that
     Amiri Quran uses to combine U+06DD with following digits. */
  font-feature-settings: "ccmp" on, "calt" on, "ss01" on;
}
[data-theme="night"] .ayat-marker {
  color: var(--gold-leaf, #e6c75a);
  text-shadow: 0 0 2px rgba(230, 199, 90, 0.45);
}

/* Hover-tap individual verse — soft focus pull (no color shift to avoid
   peripheral-vision repaints during scroll/scan) */
@media (hover: hover) {
  .verse-group:hover,
  .taawwudh-group:hover {
    background: linear-gradient(180deg, transparent, var(--surface-2) 50%, transparent);
    border-radius: var(--radius-xs);
  }
}

.terjemahan {
  margin: 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  color: var(--ink-2);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.78;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--gold-leaf), var(--gold)) 1;
  text-align: justify;
  letter-spacing: 0.005em;
}
.terjemahan i { color: inherit; font-style: italic; }

/* Taawwudh special green */
.taawwudh-group .mushaf {
  color: var(--moss) !important;
  text-align: center;
  line-height: 2.2;
}
[data-theme="night"] .taawwudh-group .mushaf { color: var(--gold-leaf) !important; }
.taawwudh-group .terjemahan {
  text-align: center;
  border-left: none;
  padding-left: 0;
  background: none;
  color: var(--ink-soft);
}

/* ===== FADHILAT BOX ===== */
.fadhilat-box {
  position: relative;
  margin: 1rem 0 0;
  padding: 1.2rem clamp(1rem, 2.5vw, 1.4rem) 1.3rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
}
.fadhilat-box::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-leaf), var(--gold-2), var(--gold-leaf), transparent);
}

.fadhilat-box .hadis-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  color: var(--emerald);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  border-bottom: 1px dashed var(--line-soft);
}
[data-theme="night"] .fadhilat-box .hadis-title { color: var(--gold-leaf); }

.fadhilat-box .keterangan {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line-soft);
  color: var(--ink-2);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.7;
}
.fadhilat-box .keterangan b { color: var(--emerald); font-style: normal; }
[data-theme="night"] .fadhilat-box .keterangan b { color: var(--gold-leaf); }

/* ===== HADITH ITEMS ===== */
.hadis-item {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.hadis-item:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.hadis-arabic {
  margin: 0.6rem 0 0.7rem;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-size: 1.32rem;
  line-height: 2.1;
  text-align: right;
  direction: rtl;
  background: var(--surface-deep);
  border-right: 3px solid var(--gold);
  border-radius: 6px 0 0 6px;
}

.hadis-translation {
  margin: 0 0 0.65rem;
  color: var(--ink-2);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.7;
  opacity: 0.96;
}

.hadis-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

/* Hadis-meta badges (v120+): neutral informational chips, no verdict
   colour-coding. Earlier the gradient backgrounds (green/blue/orange/purple)
   functioned like a stoplight — readers saw "Dhaif" coloured orange and
   skipped the hadis even though jumhur ulama permit acting on dhaif for
   fadhail a'mal. New treatment: same muted chip across source + status,
   with the type conveyed by the *text label* + tooltip detail, not colour. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.26rem 0.65rem;
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: 99px;
  color: var(--ink-2, #2c4138);
  background: rgba(15, 61, 47, 0.07);
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: help;
  opacity: 0.92;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  border: 1px solid rgba(15, 61, 47, 0.12);
}
.hadis-meta:hover .badge,
.badge:hover,
.badge:focus-visible { opacity: 1; }
.badge:hover {
  transform: translateY(-1px);
  background: rgba(15, 61, 47, 0.13);
  box-shadow: var(--shadow-sm);
}
[data-theme="night"] .badge {
  color: rgba(232, 224, 200, 0.85);
  background: rgba(212, 175, 55, 0.09);
  border-color: rgba(212, 175, 55, 0.2);
}
[data-theme="night"] .badge:hover {
  background: rgba(212, 175, 55, 0.16);
}
/* Status badges share the source treatment — uniform muted chip. The
   separation between source ("Riwayat: Bukhari") and status ("Sahih")
   is provided by the text content + tooltip, not by colour. */
.badge.source,
.badge.status-sahih,
.badge.status-hasan,
.badge.status-dhaif,
.badge.status-athar { background: transparent; }
.badge.source:hover,
.badge.status-sahih:hover,
.badge.status-hasan:hover,
.badge.status-dhaif:hover,
.badge.status-athar:hover { background: rgba(15, 61, 47, 0.12); }
[data-theme="night"] .badge.source,
[data-theme="night"] .badge.status-sahih,
[data-theme="night"] .badge.status-hasan,
[data-theme="night"] .badge.status-dhaif,
[data-theme="night"] .badge.status-athar { background: transparent; }
[data-theme="night"] .badge.source:hover,
[data-theme="night"] .badge.status-sahih:hover,
[data-theme="night"] .badge.status-hasan:hover,
[data-theme="night"] .badge.status-dhaif:hover,
[data-theme="night"] .badge.status-athar:hover { background: rgba(212, 175, 55, 0.14); }
/* Info icon inside badge — match muted treatment */
.badge .badge-info-icon { opacity: 0.55; }

/* ============================================================
   HADIS BLOCK ORDERING (v116+)
   Within a fadhilat-box that contains multiple .hadis-item blocks,
   sort by status strength: Sahih > Hasan > Athar > Dhaif. The strongest
   evidence reads first so user builds confidence top-down. Methodology
   note stays at top; keterangan/kisah/tabligh stay at the bottom.
   No HTML changes — pure CSS via flex order + :has().
   ============================================================ */
.fadhilat-box,
.opener-learn-content {
  display: flex;
  flex-direction: column;
}

/* Title + methodology note pinned to top */
.fadhilat-box > .hadis-title,
.opener-learn-content > .hadis-title { order: -10; }
.fadhilat-box > .hadis-methodology-note,
.opener-learn-content > .hadis-methodology-note { order: -9; }

/* Hadis items ranked by status verdict.
   :has() falls back gracefully — unstyled items default to order:0. */
.fadhilat-box > .hadis-item:has(.status-sahih),
.opener-learn-content > .hadis-item:has(.status-sahih) { order: 1; }
.fadhilat-box > .hadis-item:has(.status-hasan),
.opener-learn-content > .hadis-item:has(.status-hasan) { order: 2; }
.fadhilat-box > .hadis-item:has(.status-athar),
.opener-learn-content > .hadis-item:has(.status-athar) { order: 3; }
.fadhilat-box > .hadis-item:has(.status-dhaif),
.opener-learn-content > .hadis-item:has(.status-dhaif) { order: 4; }

/* Trailing prose / accordion / tabligh — always at the bottom */
.fadhilat-box > .keterangan,
.opener-learn-content > .keterangan { order: 10; }
.fadhilat-box > .kisah-accordion,
.opener-learn-content > .kisah-accordion { order: 11; }
.fadhilat-box > .tabligh-box,
.opener-learn-content > .tabligh-box { order: 12; }

/* Once items are reordered, the original :last-of-type border-bottom
   removal no longer matches the visually-last hadis. Keep the bottom
   border on every hadis-item — it serves as a clean separator before
   the keterangan/kisah block that follows. */
.fadhilat-box .hadis-item:last-of-type,
.opener-learn-content .hadis-item:last-of-type {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}

/* ===== KISAH ACCORDION ===== */
.kisah-accordion {
  margin-top: 1rem;
  background: linear-gradient(180deg, rgba(15, 61, 47, 0.04), rgba(15, 61, 47, 0.02));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: background 0.3s var(--ease);
}
[data-theme="night"] .kisah-accordion { background: linear-gradient(180deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0.02)); }

.kisah-accordion summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.kisah-accordion summary::-webkit-details-marker { display: none; }
[data-theme="night"] .kisah-accordion summary { color: var(--ink-soft); }

.kisah-accordion summary:hover,
.kisah-accordion[open] summary { color: var(--emerald); background: var(--emerald-soft); }
[data-theme="night"] .kisah-accordion summary:hover,
[data-theme="night"] .kisah-accordion[open] summary { color: var(--gold-leaf); }
.kisah-accordion .icon { font-size: 1.1rem; }
.kisah-accordion .title { flex: 1; }
.kisah-accordion .arrow { font-size: 0.7rem; opacity: 0.65; transition: transform 0.3s var(--ease); }
.kisah-accordion[open] .arrow { transform: rotate(180deg); }

.kisah-content {
  padding: 0 1.1rem 1.1rem;
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.82;
  color: var(--ink);
  border-top: 1px dashed var(--line-soft);
  margin-top: 0.4rem;
  padding-top: 1rem;
  letter-spacing: 0.005em;
}
.kisah-content p {
  margin: 0 0 0.75rem;
  text-align: justify;
  hyphens: auto;
}
.kisah-content p:last-child { margin-bottom: 0; }

/* Lead-in title — usually the first <b> opens the kisah, e.g.
   "<b>Kisah Penjual Roti dan Imam Ahmad:</b> ..." — block-promote it
   so the eye finds an anchor before reading prose. */
.kisah-content p > b:first-child {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--emerald);
  font-family: 'Cinzel', 'Lora', serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="night"] .kisah-content p > b:first-child { color: var(--gold-leaf); }

/* Inline emphasis (mid-paragraph <b>) keeps body weight, just colored */
.kisah-content b { color: var(--emerald); font-family: 'Lora', serif; }
[data-theme="night"] .kisah-content b { color: var(--gold-leaf); }

/* Quoted dialogue — italic + soft ink tone (was full vermillion which
   over-pulled the eye for long quotes). Quote marks suggested visually. */
.kisah-content i {
  color: var(--ink-soft);
  font-style: italic;
}
[data-theme="night"] .kisah-content i { color: var(--ink-2); }

/* ===== TABLIGH BOX ===== */
.tabligh-box {
  position: relative;
  margin-top: 1rem;
  padding: 0.95rem 1.05rem 1rem;
  background:
    linear-gradient(135deg, rgba(15, 61, 47, 0.04), rgba(168, 134, 46, 0.025));
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold);
  border-radius: 6px var(--radius-sm) var(--radius-sm) 6px;
  transition: border-left-color 0.25s var(--ease), background 0.25s var(--ease);
}
.tabligh-box:hover { border-left-color: var(--emerald); background: linear-gradient(135deg, rgba(15, 61, 47, 0.07), rgba(168, 134, 46, 0.05)); }
[data-theme="night"] .tabligh-box { border-left-color: var(--gold-2); }
[data-theme="night"] .tabligh-box:hover { border-left-color: var(--gold-leaf); }

.tabligh-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.25s var(--ease);
}
.tabligh-box:hover .tabligh-header { color: var(--emerald); }
[data-theme="night"] .tabligh-header { color: var(--ink-soft); }
[data-theme="night"] .tabligh-box:hover .tabligh-header { color: var(--gold-leaf); }
.tabligh-header .icon { font-size: 1rem; }

.tabligh-text {
  margin: 0;
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ===== TAJWEED COLORS (theme-aware, calibrated for calm reading)
   Day:   ~30% desaturated from neon — still distinguishable but less stabby
   Night: slight desat from prior values — softer on warm-dark bg
   Sepia: deeper warm-leaning hues — fits amber paper without clash
   ============================================================= */
.tj-n, .tj-m { color: #b54050; } /* Ghunnah */
.tj-o { color: #84499a; }        /* Madd */
.tj-p, .tj-q { color: #2a6ea8; } /* Qalqalah */
.tj-a, .tj-w, .tj-s { color: #b86a18; } /* Idgham */
.tj-f, .tj-c { color: #2f6a3b; } /* Ikhfa */
.tj-u { color: #a32856; }        /* Iqlab */
.tj-h, .tj-l, .tj-d { color: #9c8e6f; } /* Silent / Lam Syamsiah */

[data-theme="night"] .tj-n, [data-theme="night"] .tj-m { color: #f08891; }
[data-theme="night"] .tj-o { color: #ce9eda; }
[data-theme="night"] .tj-p, [data-theme="night"] .tj-q { color: #8eb6e8; }
[data-theme="night"] .tj-a, [data-theme="night"] .tj-w, [data-theme="night"] .tj-s { color: #f0a262; }
[data-theme="night"] .tj-f, [data-theme="night"] .tj-c { color: #87c890; }
[data-theme="night"] .tj-u { color: #ec90ad; }
[data-theme="night"] .tj-h, [data-theme="night"] .tj-l, [data-theme="night"] .tj-d { color: #c9bb98; }

[data-theme="sepia"] .tj-n, [data-theme="sepia"] .tj-m { color: #9e2f3c; }
[data-theme="sepia"] .tj-o { color: #6e3a82; }
[data-theme="sepia"] .tj-p, [data-theme="sepia"] .tj-q { color: #265a8a; }
[data-theme="sepia"] .tj-a, [data-theme="sepia"] .tj-w, [data-theme="sepia"] .tj-s { color: #9a560f; }
[data-theme="sepia"] .tj-f, [data-theme="sepia"] .tj-c { color: #2c5a30; }
[data-theme="sepia"] .tj-u { color: #8a2349; }
[data-theme="sepia"] .tj-h, [data-theme="sepia"] .tj-l, [data-theme="sepia"] .tj-d { color: #847248; }

/* ===== TOGGLE STATES ===== */
.hide-translation .terjemahan,
.hide-translation .hadis-translation { display: none; }
.hide-hadith .fadhilat-box { display: none; }

/* ===== FOCUS MODE ===== */
.focus-mode { background: var(--bg-deep); }
.focus-mode .reader-nav { display: none; }
.focus-mode .fadhilat-box { display: none; }
.focus-mode .app-shell {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
}
.focus-mode .toolbar { justify-content: center; }
.focus-mode .reader-section { box-shadow: none; border-color: transparent; }
.focus-mode .reader-section .ayat-block { padding: clamp(1.5rem, 4vw, 2.5rem); }
.focus-mode .mushaf { line-height: 2.4; }
.focus-mode .terjemahan { font-size: 1.08rem; }
.focus-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(7, 32, 26, 0.18) 100%);
  z-index: 1;
  mix-blend-mode: multiply;
}
[data-theme="night"].focus-mode::after,
[data-theme="night"] .focus-mode::after {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
}

/* ============================================================
   SPOTLIGHT FOCUS — driver-grade scan UX (focus-mode + karaoke)
   Active ayat dominant (1.45×, glow). Next ayat clearly visible
   (0.55 opacity) for anticipation. Past/distant verses fade to
   0.18. Non-spotlight terjemahan hidden — less competing text
   so eye lock onto active in single glance.
   Karaoke scroll already top-anchors active (verse near header
   edge), so "next" sits naturally below in viewport.
   ============================================================ */

/* DRIVER MODE: Arabic-only — hide ALL terjemahan in focus mode.
   Driver glance = Arabic only, no competing text. Pair with center
   scroll (JS) so active never falls outside viewport. */
.focus-mode .terjemahan { display: none !important; }

/* Past + distant verses — faint Arabic anchor, kept for spatial context */
.focus-mode .reader-section.karaoke-active .verse-group,
.focus-mode .reader-section.karaoke-active .taawwudh-group {
  opacity: 0.18;
  transition: opacity 0.45s var(--ease);
}

/* Next verse — partially visible Arabic, anticipation cue */
.focus-mode .reader-section.karaoke-active .ayat-sync-active + .verse-group,
.focus-mode .reader-section.karaoke-active .ayat-sync-active + .taawwudh-group {
  opacity: 0.5;
}

/* Active ayat — spotlight: oversized, gentle text-glow halo,
   no container box (less chrome at glance distance) */
.focus-mode .reader-section.karaoke-active .ayat-sync-active {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.4rem 0 !important;
  margin: 0.2rem 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
}
/* Voice-tracked focus mode: ALL verses in the active section share the
   same --active-fit-scale (set by JS on the section element, computed
   from active verse height ÷ usable viewport). Active verse distinguished
   by glow + opacity, NOT size — keeps relative proportions consistent
   so a "next preview" never looks bigger than the current. */
.focus-mode .reader-section.karaoke-active .mushaf {
  font-size: calc(var(--arabic-size) * var(--arabic-scale, 1) * var(--active-fit-scale, 1));
  line-height: 2.5;
  transition: font-size 0.45s var(--ease);
}

.focus-mode .reader-section.karaoke-active .ayat-sync-active .mushaf {
  text-shadow: 0 0 28px var(--gold-glow), 0 0 56px var(--gold-glow);
  transition: font-size 0.45s var(--ease), text-shadow 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .focus-mode .reader-section.karaoke-active .verse-group,
  .focus-mode .reader-section.karaoke-active .taawwudh-group,
  .focus-mode .reader-section.karaoke-active .ayat-sync-active .mushaf {
    transition: none;
  }
}

/* ===== SECTION NAVIGATOR FAB + BOTTOM SHEET (mobile only) ===== */
.section-fab {
  display: none;
  position: fixed;
  left: 14px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 90;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  color: var(--gold-leaf);
  background: var(--emerald);
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(7, 32, 26, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s;
}
.section-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(7, 32, 26, 0.42); }
.section-fab:active { transform: translateY(0); }
.section-fab svg { color: var(--gold-leaf); }
.section-fab-label { white-space: nowrap; }

body.player-active .section-fab {
  bottom: calc(120px + env(safe-area-inset-bottom));
}

/* Backdrop */
.section-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(7, 22, 18, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.section-sheet-backdrop.visible { opacity: 1; }

/* Sheet */
.section-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 40px rgba(7, 32, 26, 0.28);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
}
.section-sheet.visible { transform: translateY(0); }
.section-sheet::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
}

[data-theme="night"] .section-sheet { background: var(--surface); border-top-color: rgba(212, 175, 55, 0.25); }
[data-theme="sepia"] .section-sheet { background: var(--surface); }

.section-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.1rem 0.65rem;
}
.section-sheet-head h2 {
  margin: 0;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-sheet-close {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.section-sheet-close:hover { background: var(--emerald-soft); color: var(--emerald); }

.section-sheet-nav {
  overflow-y: auto;
  padding: 0.4rem 0.6rem 0.6rem;
  -webkit-overflow-scrolling: touch;
}
.section-sheet-nav button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.85rem 0.85rem 0.85rem 1.85rem;
  margin: 2px 0;
  color: var(--ink-soft);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  line-height: 1.35;
}
.section-sheet-nav button::before {
  content: '';
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--line);
  transition: all 0.2s;
}
.section-sheet-nav button:hover,
.section-sheet-nav button:focus-visible {
  color: var(--emerald);
  background: var(--emerald-soft);
  outline: none;
}
.section-sheet-nav button:hover::before { background: var(--emerald); }
.section-sheet-nav button.active {
  color: var(--emerald);
  background: var(--emerald-soft);
  font-weight: 700;
}
.section-sheet-nav button.active::before {
  background: var(--gold-leaf);
  box-shadow: 0 0 8px var(--gold-glow);
  width: 9px; height: 9px;
  margin-top: -4.5px;
}
.section-sheet-nav button.completed::after {
  content: '✓';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Night theme: emerald-on-emerald-soft = invisible — use gold-leaf for active/hover */
[data-theme="night"] .section-sheet-nav button { color: var(--ink-soft); }
[data-theme="night"] .section-sheet-nav button:hover,
[data-theme="night"] .section-sheet-nav button:focus-visible {
  color: var(--gold-leaf);
  background: rgba(241, 211, 120, 0.10);
}
[data-theme="night"] .section-sheet-nav button:hover::before { background: var(--gold-leaf); }
[data-theme="night"] .section-sheet-nav button.active {
  color: var(--gold-leaf);
  background: rgba(241, 211, 120, 0.14);
}

body.section-sheet-open { overflow: hidden; }

/* Show FAB on mobile only */
@media (max-width: 960px) {
  .section-fab { display: inline-flex; }
}

.focus-mode .section-fab { display: none; }

/* ===== STICKY AUDIO PLAYER ===== */
.sticky-audio-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  padding: 0.8rem 1rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(7, 32, 26, 0.92), rgba(7, 32, 26, 0.98));
  border-top: 1px solid var(--gold);
  box-shadow: 0 -10px 36px rgba(7, 32, 26, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.55s var(--ease-soft);
}
.sticky-audio-player::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-leaf), var(--gold-2), var(--gold-leaf), transparent);
}
.sticky-audio-player.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.sticky-player-content {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sticky-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.sticky-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-leaf);
  margin-bottom: 0.15rem;
}
.sticky-status {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fbf3da;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-controls { display: flex; align-items: center; gap: 0.65rem; }
.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.sticky-btn.play-btn {
  background: linear-gradient(135deg, var(--gold-leaf), var(--gold-2));
  color: var(--emerald-2);
  box-shadow: 0 4px 18px var(--gold-glow), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.sticky-btn.play-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px var(--gold-glow); }
.sticky-btn.play-btn:active { transform: scale(0.94); }
.sticky-btn.stop-btn {
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold-leaf);
  border: 1px solid var(--gold);
}
.sticky-btn.stop-btn:hover { background: rgba(212, 175, 55, 0.20); }

body.player-active .app-shell { padding-bottom: 7rem; }
@media (max-width: 760px) { body.player-active .app-shell { padding-bottom: 8rem; } }

/* ===== TARTEEL VOICE BUTTON ===== */
.tarteel-float-btn {
  position: fixed;
  bottom: 90px;
  right: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.05rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fbf3da;
  background: linear-gradient(135deg, var(--emerald-3), var(--emerald));
  border: 1px solid var(--gold);
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(15, 61, 47, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.tarteel-float-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 61, 47, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tarteel-float-btn .icon { font-size: 1rem; }
.tarteel-float-btn.active {
  background: linear-gradient(135deg, var(--vermillion), #7a2c1f);
  border-color: var(--rose);
  animation: tarteel-pulse 2s var(--ease) infinite;
}
body.player-active .tarteel-float-btn { bottom: 95px; }
@media (max-width: 760px) {
  body.player-active .tarteel-float-btn { bottom: 100px; }
}

@keyframes tarteel-pulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 124, 90, 0.6), 0 8px 24px rgba(160, 60, 42, 0.4); }
  70% { box-shadow: 0 0 0 14px rgba(225, 124, 90, 0), 0 8px 24px rgba(160, 60, 42, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(225, 124, 90, 0), 0 8px 24px rgba(160, 60, 42, 0.4); }
}

.tarteel-status {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0), 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 0.42rem 0.95rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(245, 236, 209, 0.92);
  background: rgba(7, 32, 26, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 99px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: none;
  max-width: min(560px, calc(100% - 24px));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tarteel-status.visible { display: block; animation: float-in 0.4s var(--ease-out); }
/* Lift above sticky audio player so they don't overlap */
body.player-active .tarteel-status { bottom: calc(max(env(safe-area-inset-bottom, 0), 14px) + 84px); }

@keyframes float-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 0.95; transform: translate(-50%, 0); }
}

.ayat-voice-target {
  border-left: 3px solid var(--moss) !important;
  padding-left: 12px !important;
  background: rgba(90, 122, 94, 0.06);
  border-radius: 4px;
}

/* ===== VOICE TRACK DEBUG PANEL ===== */
.vt-debug {
  position: fixed;
  bottom: 160px;
  right: 14px;
  z-index: 78;
  width: min(340px, calc(100vw - 28px));
  padding: 0.7rem 0.85rem 0.85rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #f5ecd1;
  background: linear-gradient(180deg, rgba(7, 32, 26, 0.94), rgba(15, 61, 47, 0.94));
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
}
.vt-debug.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vt-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -0.15rem 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
  color: var(--gold-leaf);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vt-debug-head button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  color: rgba(245, 236, 209, 0.65);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 99px;
  font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0;
  transition: all 0.2s var(--ease);
}
.vt-debug-head button:hover {
  color: var(--gold-leaf);
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gold-leaf);
}
.vt-debug-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: baseline;
  padding: 0.2rem 0;
}
.vt-debug-label {
  flex: 0 0 auto;
  color: rgba(245, 236, 209, 0.55);
  font-size: 0.68rem;
  font-weight: 600;
}
.vt-debug-val {
  flex: 1 1 auto;
  min-width: 0;
  color: #fbf3da;
  font-size: 0.78rem;
  font-weight: 500;
  word-break: break-word;
}
#vt-dbg-expected, #vt-dbg-speech {
  font-family: 'Amiri Quran', serif;
  font-size: 0.95rem;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
  width: 100%;
  margin-top: 0.15rem;
}
#vt-dbg-section { color: var(--gold-leaf); font-weight: 700; }
#vt-dbg-verse-idx { color: rgba(245, 236, 209, 0.5); font-size: 0.7rem; }
#vt-dbg-score { color: var(--gold-leaf); font-weight: 700; font-variant-numeric: tabular-nums; }
#vt-dbg-mode { color: rgba(245, 236, 209, 0.55); font-size: 0.68rem; font-style: italic; }
#vt-dbg-jump { color: var(--moss); font-size: 0.72rem; }

@media (max-width: 760px) {
  .vt-debug { bottom: 145px; right: 10px; left: 10px; width: auto; padding: 0.6rem 0.75rem; font-size: 0.72rem; }
  #vt-dbg-expected, #vt-dbg-speech { font-size: 0.88rem; }
}

/* ===== HELPER TOAST ===== */
.helper-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  z-index: 9999;
  min-width: 280px;
  max-width: calc(100% - 2.5rem);
  margin: 0;
  padding: 1rem 1.2rem;
  color: #fbf3da;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.96rem;
  line-height: 1.55;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 61, 47, 0.96), rgba(7, 32, 26, 0.98));
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.4s var(--ease-out);
}
.helper-toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  bottom: 110px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ===== MOBILE ===== */
@media (max-width: 960px) {
  :root { --arabic-size: 1.85rem; }
  .reader-nav { display: none; }
}

@media (max-width: 760px) {
  :root { --arabic-size: 1.78rem; }
  body { font-size: 15px; }
  #scrollProgress { height: 2px; }

  .app-header { padding: 0.95rem 0.95rem 0.85rem; }
  .header-top { gap: 0.7rem; }
  .header-ornament { width: 1.8rem; height: 1.8rem; font-size: 1rem; }
  .eyebrow { font-size: 0.55rem; letter-spacing: 0.28em; }
  .app-header h1 { font-size: 1.85rem; }
  .tagline { font-size: 0.7rem; margin-top: 0.1rem; }
  .header-status { gap: 0.3rem; padding-top: 0.55rem; margin-top: 0.55rem; font-size: 0.68rem; }
  .header-status > span, .header-status > button { min-height: 1.65rem; padding: 0.15rem 0.55rem; font-size: 0.68rem; }
  .completion-ring svg { width: 18px; height: 18px; }
  .theme-switch button { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

  .toolbar {
    position: sticky;
    top: var(--header-h, 5rem);
    padding: 0.5rem 0.7rem;
    gap: 0.3rem 0.55rem;
    margin: 0 -0.85rem 0.85rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    z-index: 35;
  }
  .toolbar label { font-size: 0.78rem; gap: 0.4rem; min-height: 2rem; }
  .toolbar label input[type="checkbox"] { width: 32px; height: 18px; }
  .toolbar label input[type="checkbox"]::after { width: 14px; height: 14px; top: 1px; left: 1px; }
  .toolbar label input[type="checkbox"]:checked::after { transform: translateX(14px); }
  .toolbar button { min-width: 2.2rem; min-height: 2rem; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
  .font-size-group { padding-left: 0.55rem; gap: 0.35rem; }
  .font-size-label { display: none; }
  .font-size-group button { min-width: 2rem; min-height: 1.9rem; padding: 0.2rem 0.5rem; font-size: 0.82rem; }

  .star-divider { margin: 0.2rem 0; padding: 0.35rem 0; }
  .star-divider svg { width: 18px; height: 18px; }

  .reader-section { scroll-margin-top: 1.2rem; }
  .section-heading { padding: 1rem 1rem 0.85rem; gap: 0.65rem; }
  .section-heading-title { gap: 0.7rem; }
  .section-number { width: 2.1rem; height: 2.1rem; font-size: 0.92rem; }
  .section-heading h2 { font-size: 0.95rem; }
  .play-section { font-size: 0.7rem; padding: 0.42rem 0.85rem 0.42rem 0.7rem; min-height: 2.1rem; }

  .ayat-block { padding: 1rem 0.95rem; }
  .verse-group, .taawwudh-group { margin-bottom: 1rem; padding-bottom: 1rem; }
  .mushaf { line-height: 2.1; }
  .terjemahan { font-size: 0.95rem; padding-left: 0.85rem; line-height: 1.7; }
  .hadis-arabic { font-size: 1.15rem; line-height: 1.95; padding: 0.7rem 0.85rem; }
  .hadis-translation { font-size: 0.88rem; }
  .badge { font-size: 0.62rem; padding: 0.22rem 0.55rem; }
  .fadhilat-box { padding: 0.95rem 0.95rem 1rem; }
  .kisah-content { font-size: 0.94rem; }
  .tabligh-text { font-size: 0.9rem; }

  .tarteel-float-btn { bottom: 80px; right: 14px; padding: 0.55rem 0.9rem; font-size: 0.76rem; }
  .tarteel-float-btn .icon { font-size: 0.95rem; }
  .helper-toast { font-size: 0.88rem; padding: 0.85rem 1rem; }
  .helper-toast.show { bottom: 100px; }

  .sticky-audio-player { padding: 0.7rem 0.85rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .sticky-status { font-size: 0.86rem; }
  .sticky-btn { width: 42px; height: 42px; }
}

/* ===== TABLET ===== */
@media (min-width: 760px) and (max-width: 960px) {
  :root { --arabic-size: 1.95rem; }
  .app-shell { padding: 1.25rem 1.1rem 7rem; }
  .reader-section { scroll-margin-top: 5rem; }
}

/* ===== PRINT ===== */
@media print {
  .app-header, .toolbar, .reader-nav, .play-section, #scrollProgress,
  .sticky-audio-player, .tarteel-float-btn, .tarteel-status, .helper-toast,
  .star-divider, .completion-ring, .theme-switch { display: none !important; }
  body { background: #fff; color: #111; }
  .app-shell { display: block !important; padding: 1rem; max-width: none; }
  .reader-section {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 1rem;
  }
  .section-heading { background: none; color: #111; border-bottom: 2px solid #333; }
  .section-number, .section-heading h2 { color: #111; text-shadow: none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reader-section { opacity: 1; transform: none; }
}

/* ===== PENUTUP (Closing benediction) =====
   Sits after the last reader-section. Static, contemplative, no audio
   controls. Mirrors .opener aesthetic but with deeper vertical breathing
   room and gold accents to mark the conclusion of the recitation. */
.closing {
  margin: 2rem auto 1rem;
  padding: 2.4rem clamp(1.1rem, 3.5vw, 2.4rem) 2.2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface-deep));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 210, 0.4),
    0 8px 28px -16px rgba(40, 22, 6, 0.35);
}
[data-theme="night"] .closing {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230, 199, 90, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(11, 38, 32, 0.85), rgba(7, 32, 26, 0.95));
  border-color: var(--gold-leaf);
  box-shadow:
    inset 0 0 0 1px rgba(230, 199, 90, 0.18),
    0 12px 32px -18px rgba(0, 0, 0, 0.55);
}
[data-theme="sepia"] .closing {
  background: linear-gradient(180deg, #f3e2b1, #ecd49a);
}

.closing .star-divider { margin: 0.2rem auto 1rem; opacity: 0.9; }
.closing .star-divider:last-of-type { margin-top: 1.6rem; margin-bottom: 1rem; }

.closing-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--gold);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}
.closing-eyebrow::before,
.closing-eyebrow::after {
  content: '◆';
  color: var(--gold-leaf);
  margin: 0 0.7rem;
  font-size: 0.55rem;
  vertical-align: middle;
}

.closing-title {
  margin: 0 0 0.55rem;
  font-family: 'Aref Ruqaa', 'Amiri Quran', serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  line-height: 1.5;
  color: var(--emerald);
  direction: rtl;
  letter-spacing: 0.005em;
  text-shadow: 0 0 22px var(--gold-glow);
}
[data-theme="night"] .closing-title { color: var(--gold-leaf); }

.closing-block {
  margin: 1.6rem auto 0;
  padding-top: 1.2rem;
  max-width: 60ch;
  border-top: 1px dashed rgba(212, 175, 55, 0.3);
}
[data-theme="night"] .closing-block { border-top-color: rgba(230, 199, 90, 0.28); }

.closing-arabic {
  font-family: 'Amiri Quran', 'Aref Ruqaa', serif;
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  font-weight: 400;
  line-height: 2.1;
  color: var(--ink);
  margin: 0 0 0.7rem;
  direction: rtl;
  letter-spacing: 0.005em;
}
[data-theme="night"] .closing-arabic { color: var(--ink-2); }

.closing-translation {
  margin: 0.6rem auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
[data-theme="night"] .closing-translation { color: var(--ink-soft); }

.closing-cite {
  margin: 0.55rem 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
[data-theme="night"] .closing-cite { color: var(--gold-leaf); }

.closing-tail {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Lora', serif;
  font-style: italic;
  font-size: 1.04rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .closing { padding: 1.7rem 1rem 1.5rem; }
  .closing-block { padding-top: 0.95rem; margin-top: 1.1rem; }
  .closing-arabic { line-height: 1.95; }
}

/* ======================================================================
   AUTO-HIDE CHROME ON SCROLL  +  TRUE FOCUS MODE
   --------------------------------------------------------------------
   • body.chrome-hidden — toggled by JS scroll detector. Slides header,
     toolbar, and Voice Track FAB out of the way when scrolling DOWN;
     they slide back when scrolling UP.
   • body.focus-mode — already hides translation/hadith. Now also:
     hides FAB always; collapses sticky audio player to a circular
     pause button at bottom-right (no labels). Chrome auto-hide rules
     stack on top so the experience is calm.
   ====================================================================== */

/* Smooth slide transitions for all auto-hide chrome */
.app-header,
.toolbar,
.tarteel-float-btn,
.sticky-audio-player {
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1),
              opacity 0.28s ease;
  will-change: transform;
}

/* ---- Auto-hide on scroll-down (works in both normal + focus mode) ---- */
body.chrome-hidden .app-header        { transform: translateY(-105%); }
body.chrome-hidden .toolbar           { transform: translateY(-105%); opacity: 0; pointer-events: none; }
body.chrome-hidden .tarteel-float-btn,
body.fab-idle .tarteel-float-btn      { transform: translateY(140%); opacity: 0; pointer-events: none; }
/* Sticky player stays — controls needed during recitation */

/* TOUR OVERRIDE — when the onboarding tour is active, force the FABs and
   chrome to stay visible regardless of scroll-hide / idle-hide state.
   The halo dim backdrop sits at z-index 9990; FABs need z-index 9991 to
   appear ABOVE the dim layer (in the halo's transparent center).
   Selectors scoped under body.tour-active so normal UX is unaffected. */
body.tour-active .app-header,
body.tour-active .toolbar {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.tour-active .tarteel-float-btn,
body.tour-active .hirz-tools-fab,
body.tour-active .hirz-island,
body.tour-active .opener .play-section,
body.tour-active .opener .opener-play {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9991 !important;
}
body.tour-active .tarteel-float-btn,
body.tour-active .hirz-tools-fab,
body.tour-active .hirz-island {
  /* These three are position:fixed — keep that, just bump z-index */
  position: fixed !important;
}
body.tour-active .opener .play-section,
body.tour-active .opener .opener-play {
  /* In-flow buttons need positioned context for z-index to take effect */
  position: relative !important;
}
/* Mobile pill: explicit transform reset — its default fixed transform is
   translateX(-50%) for centring. Override needs to RESTORE that, not erase
   it (or pill drifts left). The is-hidden translate-down also needs to be
   neutralised under tour-active. */
body.tour-active .hirz-island {
  transform: translateX(-50%) !important;
}

/* ---- Sticky player bottom-padding so last verse isn't covered ---- */
body.player-active main { padding-bottom: 88px; }
body.player-active.focus-mode main { padding-bottom: 96px; }

/* ============== TRUE FOCUS MODE ============== */
/* Voice Track FAB → compact circular icon at bottom-LEFT in focus mode
   (sticky mini-player sits bottom-right; left avoids overlap). Stays
   visible because hands-free recitation is the primary focus-mode use. */
.focus-mode .tarteel-float-btn {
  bottom: max(16px, env(safe-area-inset-bottom, 0));
  left: 16px;
  right: auto;
  width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  font-size: 0;            /* hide the "Voice Track (Beta)" label */
  justify-content: center;
  background: linear-gradient(135deg, var(--emerald-3), var(--emerald));
  opacity: 0.85;
}
.focus-mode .tarteel-float-btn:hover { opacity: 1; }
.focus-mode .tarteel-float-btn .icon { font-size: 1.5rem; line-height: 1; }
.focus-mode.player-active .tarteel-float-btn { bottom: max(16px, env(safe-area-inset-bottom, 0)); }

/* Hide section nav FAB & PWA install banner so screen is uncluttered */
.focus-mode .section-fab { display: none !important; }
.focus-mode .pwa-install-banner { display: none !important; }

/* Header collapses to a slim 36px progress-only strip */
.focus-mode .app-header {
  padding: 0 !important;
  min-height: 6px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-leaf), var(--gold-2));
  box-shadow: none;
}
.focus-mode .app-header > *:not(.completion-ring) { display: none !important; }
.focus-mode .app-header::before,
.focus-mode .app-header::after { display: none; }

/* Toolbar collapses to a tiny pull-down indicator with just the Focus toggle */
.focus-mode .toolbar {
  padding: 0.35rem 0.5rem;
  background: rgba(251, 243, 218, 0.55);
  border-radius: 999px;
  margin: 0.4rem auto 1rem;
  width: fit-content;
  font-size: 0.78rem;
  gap: 0.4rem;
  flex-wrap: nowrap;
}
.focus-mode .toolbar > *:not(:nth-child(3)) { display: none !important; }
[data-theme="night"] .focus-mode .toolbar { background: rgba(12, 46, 37, 0.55); }
[data-theme="sepia"] .focus-mode .toolbar { background: rgba(236, 220, 174, 0.55); }

/* Sticky player → mini circular pause button at bottom-right */
.focus-mode .sticky-audio-player {
  width: 60px;
  height: 60px;
  bottom: max(16px, env(safe-area-inset-bottom, 0));
  right: 16px;
  left: auto;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--emerald-3), var(--emerald-2));
  border: 1.5px solid var(--gold);
  box-shadow: 0 12px 28px -10px rgba(7, 32, 26, 0.5);
}
.focus-mode .sticky-player-content { padding: 0; gap: 0; justify-content: center; }
.focus-mode .sticky-info,
.focus-mode #stickyStop { display: none !important; }
.focus-mode .sticky-controls { padding: 0; gap: 0; }
.focus-mode .sticky-btn.play-btn {
  width: 60px; height: 60px;
  border: none;
  background: transparent;
  color: var(--gold-leaf);
}

/* Larger Arabic in focus mode for distance reading (e.g. car mount) */
.focus-mode .mushaf {
  font-size: calc(var(--arabic-size) * var(--arabic-scale, 1) * 1.12);
  line-height: 2.5;
}

/* When BOTH chrome-hidden AND focus-mode, sticky player gently nudges
   to confirm it's tappable — gold pulse */
@keyframes hirz-mini-pulse {
  0%, 100% { box-shadow: 0 12px 28px -10px rgba(7, 32, 26, 0.5),
                          0 0 0 0 rgba(212, 175, 55, 0); }
  50%      { box-shadow: 0 12px 28px -10px rgba(7, 32, 26, 0.5),
                          0 0 0 6px rgba(212, 175, 55, 0.18); }
}
body.chrome-hidden.focus-mode.player-active .sticky-audio-player {
  animation: hirz-mini-pulse 2.6s ease-in-out infinite;
}

/* Skip animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-header,
  .toolbar,
  .tarteel-float-btn,
  .sticky-audio-player {
    transition: none;
  }
  body.chrome-hidden.focus-mode.player-active .sticky-audio-player { animation: none; }
}

/* ============================================================
   HIRZ ISLAND — mobile control surface (≤ 960px)
   Floating bottom-center pill that morphs between idle/audio/voice
   states. Tap to expand a sheet with theme/font/mode/voice/audio
   controls. Auto-hides on scroll-down. Replaces top toolbar +
   bottom FABs + sticky audio player on mobile.
   ============================================================ */

.hirz-island { display: none; }
.island-backdrop { display: none; }

@media (max-width: 960px) {
  /* Hide existing mobile-redundant controls */
  .toolbar { display: none !important; }
  .header-status .theme-switch { display: none !important; }
  .sticky-audio-player { display: none !important; }
  #sectionNavFab { display: none !important; }
  #tarteel-btn { display: none !important; }

  /* Reserve space at body bottom so scrolled content not hidden behind Island */
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

  .hirz-island {
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 95;
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
    will-change: transform;
  }
  .hirz-island.is-hidden {
    transform: translate(-50%, 200%);
    opacity: 0;
    pointer-events: none;
  }

  .hirz-island-pill {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 200px;
    max-width: calc(100vw - 28px);
    padding: 0.7rem 1.05rem;
    color: var(--ink);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s var(--ease), border-color 0.3s var(--ease);
  }
  [data-theme="night"] .hirz-island-pill {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    color: var(--gold-leaf);
    border-color: var(--gold-leaf);
  }
  .hirz-island-pill:active { transform: scale(0.97); }

  /* Inline action button on pill — single-tap stop/pause without expanding sheet */
  .island-pill-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.25rem;
    transition: transform 0.15s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .island-pill-action:active { transform: scale(0.9); }
  .island-pill-action svg { display: block; }

  .island-pill-stop {
    background: #c43d2c;
    color: #fff;
    box-shadow: 0 2px 6px rgba(196, 61, 44, 0.3);
  }
  .island-pill-stop:hover {
    background: #d24a39;
    box-shadow: 0 4px 10px rgba(196, 61, 44, 0.45);
  }

  .island-pill-pause {
    background: var(--gold);
    color: var(--bg);
    box-shadow: 0 2px 6px var(--gold-glow);
  }
  .island-pill-pause:hover {
    background: var(--gold-2);
    box-shadow: 0 4px 10px var(--gold-glow);
  }
  [data-theme="night"] .island-pill-pause {
    background: var(--gold-leaf);
    color: var(--bg);
  }

  .island-content {
    display: none;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
  }
  .hirz-island[data-state="idle"]  .island-content-idle  { display: inline-flex; }
  .hirz-island[data-state="audio"] .island-content-audio { display: inline-flex; }
  .hirz-island[data-state="voice"] .island-content-voice { display: inline-flex; }

  .island-mark { color: var(--gold); flex-shrink: 0; }
  [data-theme="night"] .island-mark { color: var(--gold-leaf); }

  .island-text {
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .island-meta {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  .island-chevron {
    color: var(--ink-soft);
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
    display: inline-block;
  }
  .hirz-island[data-expanded="true"] .island-chevron { transform: rotate(180deg); }

  .island-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--gold);
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  [data-theme="night"] .island-icon { color: var(--gold-leaf); }

  .island-mic-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
    animation: islandMicPulse 1.6s ease-out infinite;
    flex-shrink: 0;
  }
  @keyframes islandMicPulse {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
  }

  /* ===== Expanded sheet ===== */
  .hirz-island-sheet {
    position: fixed;
    left: 50%;
    transform: translate(-50%, calc(110% + var(--drag-y, 0px)));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 24px));
    max-height: 78vh;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--gold);
    border-radius: 24px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34), 0 8px 18px rgba(0, 0, 0, 0.18);
    padding: 1.1rem 1.1rem 1.4rem;
    z-index: 96;
    overflow-y: auto;
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
    opacity: 0;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  [data-theme="night"] .hirz-island-sheet {
    background: linear-gradient(180deg, var(--surface), var(--surface-deep));
    border-color: var(--gold-leaf);
  }
  .hirz-island[data-expanded="true"] .hirz-island-sheet {
    transform: translate(-50%, var(--drag-y, 0px));
    opacity: 1;
    pointer-events: auto;
  }

  .island-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    margin: -0.6rem 0 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    touch-action: none;
  }
  .island-sheet-handle::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    background: var(--ink-soft);
    border-radius: 2px;
    opacity: 0.4;
    transition: opacity 0.2s var(--ease), width 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .island-sheet-handle:hover::before,
  .island-sheet-handle:active::before {
    opacity: 0.8;
    width: 56px;
  }
  /* Subtle pulse hint twice when sheet first opens — hints affordance */
  .hirz-island[data-expanded="true"] .island-sheet-handle::before {
    animation: handleHint 1.4s var(--ease) 0.35s 2;
  }
  @keyframes handleHint {
    0%, 100% { opacity: 0.4; transform: scaleX(1); }
    45%      { opacity: 0.85; transform: scaleX(1.45); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hirz-island[data-expanded="true"] .island-sheet-handle::before { animation: none; }
  }

  .island-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.62rem 0;
    border-bottom: 1px dashed var(--line-soft);
  }
  .island-row:last-of-type,
  .island-row-status { border-bottom: none; }
  .island-row-toggles { flex-direction: column; align-items: stretch; gap: 0.4rem; }

  .island-row-label {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ===== Segmented (theme + font-size) ===== */
  .island-segmented {
    display: inline-flex;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
  }
  .island-segmented button {
    padding: 0.42rem 0.85rem;
    background: transparent;
    color: var(--ink-2);
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    line-height: 1;
  }
  .island-segmented button:hover { color: var(--gold); }
  .island-segmented button.active {
    background: var(--gold);
    color: var(--bg);
    box-shadow: 0 2px 6px var(--gold-glow);
  }
  [data-theme="night"] .island-segmented button.active {
    background: var(--gold-leaf);
    color: var(--bg);
  }

  /* Font reset button — subtle highlight when current size deviates from default
     (driven by html[data-font-default] attribute set by applySettings()) */
  .island-segmented #islandFontReset {
    font-weight: 700;
    letter-spacing: 0;
  }
  .island-segmented #islandFontReset::before {
    content: '↺';
    display: none;
    margin-right: 0.15em;
    opacity: 0.7;
  }
  html[data-font-modified] .island-segmented #islandFontReset {
    color: var(--gold);
  }
  html[data-font-modified] .island-segmented #islandFontReset::before {
    display: inline-block;
  }

  /* ===== Toggle grid ===== */
  .island-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .island-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 0.7rem 0.4rem;
    background: var(--bg-deep);
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
  }
  .island-toggle-btn .island-toggle-icon { display: block; }
  .island-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
  .island-toggle-btn.active {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
  }
  [data-theme="night"] .island-toggle-btn.active {
    background: var(--gold-leaf);
    color: var(--bg);
    border-color: var(--gold-leaf);
  }

  /* ===== Voice block ===== */
  .island-voice-block {
    display: inline-flex;
    gap: 0.45rem;
    align-items: stretch;
  }
  .island-voice-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: var(--emerald);
    color: var(--gold-leaf);
    border: 1px solid var(--gold);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    line-height: 1;
  }
  .island-voice-btn .island-voice-icon { display: inline-block; flex-shrink: 0; }
  .island-voice-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .island-voice-btn.active {
    background: #c43d2c;
    border-color: #c43d2c;
    color: #fff;
  }
  .island-voice-block select {
    padding: 0.5rem 0.7rem;
    background: var(--bg-deep);
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* ===== Section navigator button (sheet bottom) ===== */
  .island-sections-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.78rem 1rem;
    background: var(--bg-deep);
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s var(--ease);
  }
  .island-sections-btn:hover { border-color: var(--gold); color: var(--gold); }

  /* ===== Status row (audio/voice info card at top of sheet) ===== */
  .island-row-status {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(135deg, var(--bg-deep), var(--surface));
    border: 1px solid var(--gold);
    border-radius: 14px;
    margin-bottom: 0.55rem;
  }
  [data-theme="night"] .island-row-status { border-color: var(--gold-leaf); }
  .island-play-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1rem;
    background: var(--gold);
    color: var(--bg);
    border: none;
    border-radius: 14px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
    box-shadow: 0 6px 18px var(--gold-glow);
  }
  .island-play-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--gold-glow);
  }
  .island-play-all-btn:active { transform: scale(0.97); }
  [data-theme="night"] .island-play-all-btn {
    background: var(--gold-leaf);
    color: var(--bg);
  }
  /* When play-all is visible (idle state), kill the status-row container's
     padding/border so the button looks freestanding */
  .island-row-status:has(> #islandActionPlayAll:not([hidden])) {
    padding: 0;
    background: transparent;
    border: none;
    margin-bottom: 0.5rem;
  }
  .island-status-info { display: flex; flex-direction: column; gap: 0.15rem; }
  .island-status-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
  }
  [data-theme="night"] .island-status-label { color: var(--gold-leaf); }
  .island-status-meta {
    color: var(--ink-2);
    font-size: 0.86rem;
    font-weight: 500;
  }
  .island-status-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
  }
  .island-action-btn {
    flex: 1;
    padding: 0.55rem 1rem;
    background: var(--gold);
    color: var(--bg);
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s var(--ease);
  }
  .island-action-btn:active { transform: scale(0.96); }
  [data-theme="night"] .island-action-btn { background: var(--gold-leaf); color: var(--bg); }
  .island-action-btn.island-action-stop {
    background: var(--bg-deep);
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
  }

  /* ===== Backdrop ===== */
  .island-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 94;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .island-backdrop.is-visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 760px) {
  .hirz-island-pill {
    min-width: 180px;
    padding: 0.62rem 0.95rem;
  }
  .island-text, .island-meta { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hirz-island, .hirz-island-sheet, .island-backdrop, .island-mic-pulse {
    transition: none;
    animation: none;
  }
}

/* ============================================================
   ICON SYSTEM — inline Lucide-style SVGs replacing emoji.
   All icons inherit currentColor so they theme-match automatically.
   ============================================================ */
.icon-svg {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  color: currentColor;
  margin-right: 0.1em;
}

.badge-info-icon {
  display: inline-block;
  vertical-align: -0.05em;
  margin-left: 0.2em;
  opacity: 0.8;
}

/* Hadis title — book icon followed by title text, slight nudge for optical alignment */
.hadis-title .icon-svg { margin-right: 0.35em; vertical-align: -0.22em; }

/* Tabligh header — megaphone icon, gold-tinted */
.tabligh-header .icon-svg { color: inherit; }

/* Section opener summary icons */
.opener-learn > summary .icon-svg,
.kisah-accordion summary .icon-svg { color: inherit; flex-shrink: 0; }

/* ============================================================
   BRAND STRIP — mobile-only ultra-thin top header (≤ 960px)
   Replaces the legacy heavy header on mobile. ~32px tall.
   Auto-hides on scroll via body.chrome-hidden (same mechanism
   as legacy chrome).
   ============================================================ */
.app-brand-strip { display: none; }

@media (max-width: 960px) {
  /* Hide legacy heavy header — replaced by .app-brand-strip */
  .app-header { display: none !important; }

  .app-brand-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    position: sticky;
    top: 0;
    z-index: 50;
    height: 32px;
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top, 0);
    box-sizing: content-box;
    background: linear-gradient(180deg,
      var(--surface) 0%,
      var(--surface) 78%,
      transparent 100%);
    color: var(--gold);
    font-family: 'Cinzel', 'Lora', serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
    will-change: transform;
    pointer-events: none; /* purely informational; no clicks */
  }
  [data-theme="night"] .app-brand-strip { color: var(--gold-leaf); }
  body.chrome-hidden .app-brand-strip {
    transform: translateY(-100%);
    opacity: 0;
  }

  /* Tighten scroll-padding — legacy header was 5.4rem, strip is 32px */
  html { scroll-padding-top: calc(32px + env(safe-area-inset-top, 0) + 8px); }
}

/* ============================================================
   WELCOME SPLASH — first-visit only, dismissed by "Mula Bacaan"
   ============================================================ */
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.12), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(15, 61, 47, 0.6), transparent 70%),
    linear-gradient(180deg, var(--emerald-2) 0%, var(--emerald) 50%, var(--emerald-2) 100%);
  opacity: 1;
  transition: opacity 0.42s var(--ease);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.welcome-splash.is-leaving { opacity: 0; pointer-events: none; }
body.welcome-active { overflow: hidden; }

.welcome-content {
  text-align: center;
  max-width: 380px;
  color: var(--gold-leaf);
  animation: welcomeRise 0.8s var(--ease-out) both;
}
@keyframes welcomeRise {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.welcome-mark {
  color: var(--gold-leaf);
  filter: drop-shadow(0 0 24px rgba(241, 211, 120, 0.45));
  margin-bottom: 1.2rem;
  animation: welcomePulse 3.2s ease-in-out infinite;
}
@keyframes welcomePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 24px rgba(241, 211, 120, 0.45)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 36px rgba(241, 211, 120, 0.75)); }
}
.welcome-eyebrow {
  margin: 0 0 0.6rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(241, 211, 120, 0.7);
}
.welcome-title {
  margin: 0 0 0.4rem;
  font-family: 'Aref Ruqaa', 'Amiri Quran', 'Scheherazade New', serif;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--gold-leaf);
  text-shadow: 0 0 28px rgba(241, 211, 120, 0.55);
  direction: rtl;
}

.welcome-subtitle {
  margin: 0 0 1.4rem;
  font-family: 'Cinzel', 'Lora', serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 211, 120, 0.7);
}
.welcome-tagline {
  margin: 0 0 2rem;
  font-family: 'Cormorant Garamond', 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(245, 236, 209, 0.85);
}
.welcome-start {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.85rem 2rem;
  background: var(--gold-leaf);
  color: var(--emerald-2);
  border: none;
  border-radius: 999px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(241, 211, 120, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.welcome-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(241, 211, 120, 0.45), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.welcome-start:active { transform: scale(0.97); }

.welcome-start .welcome-bismillah {
  font-family: 'Aref Ruqaa', 'Amiri Quran', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.welcome-start .welcome-start-divider {
  opacity: 0.45;
  font-weight: 400;
  letter-spacing: 0;
}
.welcome-start .welcome-start-cta {
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-content, .welcome-mark { animation: none; }
  .welcome-splash, .app-brand-strip { transition: none; }
}

/* FOUC guard — hide welcome splash if user has already seen it (sync class
   set by preFOUC() in head before paint). First-visit users skip this rule
   and see splash from frame 1. */
html.welcome-seen #welcomeSplash {
  display: none !important;
}

/* FOUT mitigation — Arabic display fonts fade in once loaded.
   preFOUC() sets html.fonts-pending until document.fonts.load() resolves
   (or 1.5s timeout). Latin tagline + button divider stay visible (system
   fonts adequate fallback). */
html.fonts-pending .welcome-title,
html.fonts-pending .welcome-bismillah {
  opacity: 0;
}
.welcome-title, .welcome-bismillah {
  transition: opacity 0.4s ease-out;
}

/* ===== PWA Install Banner — engagement & coexistence ===== */

/* Upgrade 2 — Install banner depends on welcome being dismissed */
html:not(.welcome-seen) .pwa-install-banner { display: none !important; }

/* Upgrade 3 — Banner + Island coexistence — shift Island above banner when both shown */
@media (max-width: 960px) {
  body.has-install-banner .hirz-island {
    bottom: calc(96px + env(safe-area-inset-bottom));
    transition: bottom 0.45s var(--ease-out);
  }
  body.has-install-banner .hirz-island-sheet {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* Upgrade 4 — iOS sheet polish: sequential step fade-in + pulsing Share-icon cue */
.pwa-ios-sheet.is-visible .pwa-ios-steps li {
  opacity: 0;
  transform: translateY(8px);
  animation: iosStepFadeIn 0.5s var(--ease-out) forwards;
}
.pwa-ios-sheet.is-visible .pwa-ios-steps li:nth-child(1) { animation-delay: 0.05s; }
.pwa-ios-sheet.is-visible .pwa-ios-steps li:nth-child(2) { animation-delay: 0.18s; }
.pwa-ios-sheet.is-visible .pwa-ios-steps li:nth-child(3) { animation-delay: 0.30s; }
@keyframes iosStepFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Step 1's Share icon pulses to draw attention */
.pwa-ios-steps li:nth-child(1) .pwa-step-icon {
  animation: iosShareIconPulse 2.2s ease-in-out infinite;
}
@keyframes iosShareIconPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6)); }
}

/* Bottom-pointing arrow indicator added to step 1 to direct user gaze
   to the actual Safari Share button location at bottom of screen */
.pwa-ios-steps li:nth-child(1)::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -32px;
  width: 24px;
  height: 24px;
  border-right: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.7;
  animation: iosArrowBounce 1.6s ease-in-out infinite;
}
@keyframes iosArrowBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(2px, 4px); opacity: 0.95; }
}
.pwa-ios-steps li:nth-child(1) { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .pwa-ios-sheet.is-visible .pwa-ios-steps li,
  .pwa-ios-steps li:nth-child(1) .pwa-step-icon,
  .pwa-ios-steps li:nth-child(1)::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   SURAH PILIHAN — Yasin / Al-Mulk / Al-Waqi'ah
   Visual treatments specific to the wirid section group that
   sits AFTER the Hirz core 17 sections.
   ============================================================ */

/* Verse-end Arabic-Indic numeral marker (used in surah-pilihan sections
   where addAyahMarkers() doesn't run because data-audio-verses is single-key).
   Visually similar to existing .ayat-marker SVG but inline text-based. */
.ayat-end-num {
  display: inline-block;
  margin: 0 0.18em;
  padding: 0 0.32em;
  border: 1px solid var(--gold-2, #c9962a);
  border-radius: 999px;
  font-family: 'Amiri Quran', 'Scheherazade New', serif;
  font-size: 0.78em;
  color: var(--gold-2, #c9962a);
  background: rgba(212, 175, 55, 0.08);
  vertical-align: 0.05em;
  user-select: none;
}
[data-theme="night"] .ayat-end-num {
  color: var(--gold-leaf);
  border-color: var(--gold-leaf);
  background: rgba(230, 199, 90, 0.10);
}

/* Group header for Surah Pilihan in section navigator */
.section-nav-group-header {
  margin: 1rem 0 0.5rem;
  padding: 0 0.65rem;
  font-family: 'Cinzel', 'Lora', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
[data-theme="night"] .section-nav-group-header { color: var(--gold-leaf); }

/* Surah Pilihan section divider — gold double-rule before first surah */
.reader-section-surah-pilihan:first-of-type {
  position: relative;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--gold);
  border-image: linear-gradient(90deg, transparent, var(--gold-leaf), var(--gold-leaf), transparent) 1;
}
.reader-section-surah-pilihan:first-of-type::before {
  content: 'SURAH PILIHAN';
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1rem 0.85rem;
  background: var(--bg);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--gold);
}


/* ============================================================
   CONTEXTUAL POPOVER — native Popover API styling
   Anchored to trigger via JS-set inline left/top + CSS arrow.
   Replaces legacy helper-toast for badge tooltips (v111+).
   ============================================================ */
#contextual-popover {
  position: fixed;
  z-index: 10000;
  margin: 0;
  padding: 1.1rem 1.3rem 0.95rem;
  max-width: min(420px, calc(100vw - 2rem));
  min-width: 240px;
  background: linear-gradient(180deg, rgba(15, 61, 47, 0.97), rgba(7, 32, 26, 0.99));
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
  border-color: var(--gold);
  /* v129: dropped opacity-transition + pointer-events on the closed state.
     Browser-native [popover] sets display:none when closed, which already
     handles visibility and click-blocking. The previous CSS could leave the
     popover at opacity:0 when display flipped to block (no @starting-style
     so transition couldn't interpolate cleanly), making the popover open
     in the top-layer but visually invisible. */
}
#contextual-popover::backdrop {
  background: transparent;
}

/* Arrow indicator pointing to anchor element */
#contextual-popover::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(7, 32, 26, 0.99);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  left: var(--arrow-x, 50%);
  margin-left: -7px;
}
#contextual-popover[data-arrow-direction="top"]::before {
  top: -8px;
  border-right: 0;
  border-bottom: 0;
}
#contextual-popover[data-arrow-direction="bottom"]::before {
  bottom: -8px;
  border-left: 0;
  border-top: 0;
}
#contextual-popover[data-arrow-direction="none"]::before {
  display: none;
}

#contextual-popover-text {
  font-family: 'Cormorant Garamond', serif;
  color: #f5ecd1;
  font-size: 0.95rem;
  line-height: 1.6;
  padding-right: 1.5rem;
  text-align: left;
}
#contextual-popover-text strong { color: #f1d378; font-weight: 600; }
#contextual-popover-text em { color: #e3d6b0; }
#contextual-popover-text i { color: #f1d378; font-style: italic; }

.popover-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: rgba(245, 236, 209, 0.65);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s var(--ease);
}
.popover-close:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-leaf);
}

/* Keyboard focus indicator on tooltip triggers */
[data-tooltip]:focus-visible {
  outline: 2px solid var(--gold-leaf);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 760px) {
  #contextual-popover {
    max-width: calc(100vw - 1.5rem);
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contextual-popover { transition: none; }
}

/* ============================================================
   ACCESSIBILITY — Skip link, focus-visible, touch targets,
   reduced-motion floor, forced-colors. Phase 1B/1C bundle.
   ============================================================ */

/* Skip link: visible only on keyboard focus, lets keyboard / screen-reader
   users jump past header navigation directly to main content. */
.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 9999;
  padding: 0.7rem 1.2rem;
  background: var(--ink, #1a1208);
  color: var(--bg, #ede2c4);
  border-radius: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--gold-leaf, #c9a235);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gold-leaf, #c9a235);
  outline-offset: 2px;
}

/* Global focus-visible ring — restores keyboard-only focus indicator
   that's stripped by `button { background: none; border: none }`. Uses
   :where() to keep specificity at 0 so component-specific overrides win. */
:where(button, a, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--gold-leaf, #c9a235);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="night"] :where(button, a, summary, [role="button"], [tabindex]):focus-visible {
  outline-color: var(--gold-leaf, #e6c75a);
}

/* Touch targets — WCAG 2.2 AA requires minimum 24×24, AAA + Apple HIG +
   Material 3 mandate 44×44. Explicit allowlist of icon-only buttons that
   are visually 28-30px and need invisible padding to reach 44×44 hit area.
   v126: replaced broad `[aria-label]:where(button)` selector that was
   incorrectly enlarging .island-sheet-handle (drag pill), .section-sheet-close,
   vt-debug-mini/close, etc. — those have intentional smaller dimensions. */
.theme-switch button,
.font-size-group button,
.bookmark-toggle,
.share-toggle,
.tarteel-float-btn,
.hirz-tools-fab {
  min-block-size: 44px;
  min-inline-size: 44px;
}
/* Override for inline badge buttons (already wide due to text) — only enforce
   block-size so vertical hit area is generous. Keep them looking like badges. */
.badge[role="button"] {
  min-block-size: 28px;
}

/* Reduced motion floor — global cap that overrides any transition/animation
   duration on every element. Existing per-component reduced-motion rules
   handle specific cases; this catches everything else (e.g., body color
   crossfade at line 131, --ease/--ease-out tokens used in 95+ rules). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Forced-colors mode (Windows High Contrast). Hadis status badges, tajweed
   coloring, and gold-on-emerald header collapse to system colors with no
   fallbacks. Preserve verse marker (rosette glyph) & explicitly set borders
   on muted chips so they remain identifiable. */
@media (forced-colors: active) {
  .badge { border: 1px solid CanvasText; forced-color-adjust: none; }
  .ayat-marker { forced-color-adjust: none; }
  .skip-link { border: 2px solid CanvasText; }
  :where(button, [role="button"]):focus-visible {
    outline: 3px solid CanvasText;
  }
  /* Tajweed coloring uses background tints — under forced-colors we let the
     system replace them; readability stays intact via foreground contrast. */
}

/* v127: REVERTED v125 Phase 1C content-visibility — was conservatively
   removed alongside container queries to isolate the layout bug. Re-add
   later only after verifying it doesn't interact badly with section
   anchors / find-in-page / karaoke scroll. */

/* ============================================================
   VIEW TRANSITIONS — Theme swap crossfade (v125+).
   When document.startViewTransition() runs the swap callback, the
   browser snapshots the BEFORE state, applies the DOM mutation,
   snapshots the AFTER state, and crossfades between them on a single
   GPU compositor pass. ::view-transition-* pseudos let us tune
   timing and easing.
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) {
  animation-name: themeFadeOut;
}
::view-transition-new(root) {
  animation-name: themeFadeIn;
}
@keyframes themeFadeOut {
  to { opacity: 0; }
}
@keyframes themeFadeIn {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Body color transition — keep but shorten now that View Transitions
   handles the perceived swap. The body-level transition catches edge
   cases on browsers without View Transitions API support. */

/* ============================================================
   PHASE 3 — Modern layout & motion (v125+)
   text-wrap, container queries, scroll-snap, scroll-driven anim
   ============================================================ */

/* v127: REVERTED v125 Phase 3A text-wrap balance/pretty + fluid body type —
   precautionary in case they contributed to wrap behaviour issues. Body
   stays at the original 16px from base CSS. Can be re-introduced once
   the container-type root cause is fully verified. */

/* v127: REVERTED v125 Phase 3B/3C — container-type: inline-size on .opener
   broke flex layout (children shrank to min-content, vertical word wrap).
   scroll-snap-type on html caused programmatic scrollIntoView to snap-back
   during karaoke playback. Both reverted to restore layout integrity. */

/* Scroll-driven animation — drives the top progress bar without any JS
   listener. animation-timeline: scroll(root) advances based on document
   scroll position; the keyframes scale the bar from 0 → full width.
   Replaces a JS scroll-handler that wrote .style.width on every scroll
   event. Falls back gracefully on browsers without scroll-driven anim
   support (existing JS handler still updates width). */
@supports (animation-timeline: scroll()) {
  #scrollProgress {
    animation: hirzScrollProgress linear;
    animation-timeline: scroll(root);
  }
  @keyframes hirzScrollProgress {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
  }
  /* Reduce motion: disable scroll-driven progress, fall back to static fill
     (or absent — depends on UI choice). Here we keep it visible at 100%. */
  @media (prefers-reduced-motion: reduce) {
    #scrollProgress { animation: none; transform: scaleX(0); }
  }
}

/* ============================================================
   PHASE 4B — Strategic compositing hints + skeleton states
   ============================================================ */

/* will-change on the karaoke-active verse signals the compositor to
   pre-promote it to its own layer. Avoids paint+composite churn during
   smooth-scroll transitions when active class moves between verses.
   Scoped to ONLY the active verse so we don't promote every verse-group
   to its own layer (which would waste GPU memory). */
.reader-section.karaoke-active .ayat-sync-active {
  will-change: transform, opacity;
}
.reader-section.karaoke-active .ayat-sync-active.ayat-sync-leaving {
  will-change: auto;
}

/* Skeleton state for the welcome splash + Arabic text while fonts load.
   The body class fonts-pending is set by the FOUC guard before fonts
   resolve. Without this, Arabic text reflows when the font swaps in. */
html.fonts-pending .welcome-title,
html.fonts-pending .mushaf,
html.fonts-pending .hadis-arabic {
  /* Slight opacity until display fonts load — avoids harsh swap flash */
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
html.fonts-loaded .welcome-title,
html.fonts-loaded .mushaf,
html.fonts-loaded .hadis-arabic {
  opacity: 1;
}

/* Skeleton shimmer keyframes for any loading states we add later
   (audio fetch, voice-track init, etc.) */
@keyframes hirzShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--surface-deep) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: hirzShimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-xs);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ============================================================
   HIRZ TOOLS — Floating FAB + sheet (v125+)
   Bundles: Streak / Tasbih / Bookmark + Share + Haptic surfaces.
   Counterpart to the Tarteel FAB (bottom-right).
   ============================================================ */

.hirz-tools-fab {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border: 2px solid var(--gold-2);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hirz-tools-fab:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.hirz-tools-fab:active { transform: scale(0.96); }
.hirz-tools-fab-streak {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--vermillion);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.hirz-tools-sheet {
  width: min(420px, calc(100% - 24px));
  max-height: min(640px, 80dvh);
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  /* v134 fix #9: scroll-as-whole. Previous setup (sheet hidden + each
     section scrolls internally) collapsed Tasbih + Bookmark to ~120px on
     small phones once Wirid was added with 12 task items. Now whole sheet
     scrolls; sections stay natural height. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  inset: auto;
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 16px;
  right: auto;
  top: auto;
  /* v129: dropped opacity:0 + transform animation on the closed state.
     Browser-native display:none handles visibility cleanly. The previous
     opacity-transition pattern needed @starting-style to animate from
     display:none, which we don't have, so the sheet was opening in the
     top-layer but invisible.
     display: flex applies only when visible (i.e. on :popover-open) so
     the closed state stays display:none (UA default). */
}
.hirz-tools-sheet:popover-open {
  display: flex;
  flex-direction: column;
}
.hirz-tools-sheet::backdrop {
  background: rgba(15, 12, 6, 0.18);
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  .hirz-tools-sheet { transition: none; }
}

.hirz-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.05rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
}
.hirz-tools-head h2 {
  margin: 0;
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.hirz-tools-close {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hirz-tools-close:hover { background: var(--surface-2); color: var(--ink); }

.hirz-tools-section {
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  /* v134 fix #9: removed internal overflow-y (sheet now scrolls as whole) */
}
.hirz-tools-section:last-child { border-bottom: none; }
.hirz-tools-section-title {
  margin: 0 0 0.6rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* Streak */
.hirz-tools-streak {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.hirz-tools-streak-current {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.hirz-tools-streak-num {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hirz-tools-streak-label {
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.hirz-tools-streak-best {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

/* Tasbih */
.hirz-tools-tasbih {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.hirz-tools-tasbih-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.hirz-tools-tasbih-count {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hirz-tools-tasbih-target {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hirz-tools-tasbih-targets {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}
.hirz-tools-tasbih-targets button {
  flex: 1;
  padding: 0.35rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.hirz-tools-tasbih-targets button.active {
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border-color: var(--gold-2);
}
.hirz-tools-tasbih-targets button:hover {
  background: var(--surface-deep);
}
.hirz-tools-tasbih-targets button.active:hover {
  background: var(--gold-2);
  color: var(--bg);
}
.hirz-tools-tasbih-actions {
  display: flex;
  gap: 0.55rem;
}
.hirz-tools-btn-primary,
.hirz-tools-btn-secondary {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hirz-tools-btn-primary {
  flex: 2;
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border-color: var(--gold-2);
}
.hirz-tools-btn-primary:active { transform: scale(0.97); }
.hirz-tools-btn-primary.is-target-hit {
  animation: tasbihTargetHit 0.6s var(--ease-out);
}
@keyframes tasbihTargetHit {
  0%   { box-shadow: 0 0 0 0 var(--gold-glow); }
  60%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hirz-tools-btn-secondary {
  background: var(--surface-2);
  color: var(--ink-2);
}

/* Bookmarks */
.hirz-tools-bookmarks-empty {
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  line-height: 1.5;
}
.hirz-tools-bookmark-item {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.hirz-tools-bookmark-item:last-child { margin-bottom: 0; }
.hirz-tools-bookmark-jump {
  flex: 1;
  text-align: left;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--ink);
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.hirz-tools-bookmark-jump:hover {
  background: var(--surface-deep);
}
.hirz-tools-bookmark-remove {
  width: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hirz-tools-bookmark-remove:hover {
  background: var(--vermillion);
  color: #fff;
  border-color: var(--vermillion);
}

/* Bookmark + share toggles in section heading */
.bookmark-toggle,
.share-toggle {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  width: 36px;
  height: 36px;
  margin-inline-start: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  vertical-align: middle;
}
.bookmark-toggle:hover,
.share-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.bookmark-toggle.is-bookmarked {
  color: var(--gold);
  background: var(--surface-2);
  border-color: var(--gold-leaf);
}
.bookmark-toggle.is-bookmarked svg path {
  fill: currentColor;
}

/* ============================================================
   v126 — Post-deploy audit fixes
   ============================================================ */

/* Fix #6: lift Hirz Tools FAB above sticky audio player on desktop
   (player is hidden on mobile). Mirrors the .tarteel-float-btn rule
   that already does this for the bottom-right FAB. */
body.player-active .hirz-tools-fab {
  bottom: calc(95px + env(safe-area-inset-bottom));
}

/* Fix #5: prevent section-heading overflow on narrow viewports when
   bookmark + share + play buttons all crowd a long h2. Wrap onto a
   second row below 760px; hide the share button (progressive feature)
   to keep heading compact on the smallest screens. */
@media (max-width: 760px) {
  .section-heading {
    flex-wrap: wrap;
  }
  .section-heading-title {
    min-width: 0;
  }
  .section-heading-title h2 {
    min-width: 0;
    flex: 1 1 auto;
  }
}
@media (max-width: 480px) {
  .section-heading-title .share-toggle {
    display: none;
  }
}

/* Streak UX note — clarify that 'day' is UTC-based, so users in UTC+8
   (Malaysia) see streak rollover at 8am local. Subtle hint below the
   counter. */
.hirz-tools-streak-note {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line-soft);
  font-family: 'Lora', serif;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* v130: Last-resort fallback if Popover API fails. JS toggles
   .is-fallback-open class; CSS forces display via !important. */
.hirz-tools-sheet.is-fallback-open {
  display: flex !important;
  flex-direction: column !important;
  z-index: 99999 !important;
}

/* v132: disable default mobile browser tap-highlight (translucent blue/black
   overlay) — feedback comes from existing :active transforms instead. */
* { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   WIRID HARIAN (v133) — Daily routine tracker
   Section in Hirz Tools sheet + Focus Mode full-screen overlay.
   ============================================================ */

.wirid-section { padding-bottom: 0.5rem; }

.wirid-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0.1rem 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--line-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.wirid-date { font-weight: 600; }
.wirid-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 99px;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.wirid-streak-pill strong {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.wirid-streak-best {
  font-size: 0.7rem;
  opacity: 0.7;
}

.wirid-session {
  margin-bottom: 0.85rem;
}
.wirid-session:last-of-type { margin-bottom: 0.4rem; }
.wirid-session-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wirid-session-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--gold);
  border: 1px solid var(--line-soft);
}
.wirid-session.is-current .wirid-session-icon {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold-2);
}
.wirid-session-label { flex: 1 1 auto; }
.wirid-session-progress {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0.02em;
}

.wirid-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wirid-task {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background var(--dur-fast, 0.15s) ease;
}
.wirid-task.is-complete {
  background: rgba(15, 61, 47, 0.06);
  border-color: rgba(15, 61, 47, 0.18);
}
[data-theme="night"] .wirid-task.is-complete {
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.22);
}
.wirid-task-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  border: 2px solid var(--line);
  background: transparent;
  position: relative;
  transition: all var(--dur-fast, 0.15s) ease;
}
.wirid-task.is-complete .wirid-task-check {
  background: var(--emerald);
  border-color: var(--emerald);
}
.wirid-task.is-complete .wirid-task-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wirid-task-name {
  flex: 1 1 auto;
  font-weight: 500;
  line-height: 1.3;
}
.wirid-task.is-complete .wirid-task-name {
  text-decoration: line-through;
  text-decoration-color: var(--ink-mute);
  opacity: 0.7;
}

.wirid-task-zikir {
  align-items: flex-start;
  gap: 0.55rem;
}
.wirid-task-zikir-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.wirid-task-arabic {
  font-family: 'Amiri Quran', 'Aref Ruqaa', serif;
  font-size: 0.92rem;
  color: var(--ink-2);
  direction: rtl;
  text-align: right;
  line-height: 1.5;
  opacity: 0.9;
}
.wirid-task-progress {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.wirid-task-start {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.4rem 0.85rem;
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border: 1px solid var(--gold-2);
  border-radius: 99px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast, 0.15s) ease, background var(--dur-fast, 0.15s) ease;
}
.wirid-task-start:hover { background: var(--gold-2); color: var(--bg); }
.wirid-task-start:active { transform: scale(0.96); }
.wirid-task.is-complete .wirid-task-start {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-soft);
}

.wirid-note {
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line-soft);
  font-family: 'Lora', serif;
  font-size: 0.74rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ============================================================
   WIRID FOCUS MODE — Full-screen overlay
   ============================================================ */
.wirid-focus {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(15, 61, 47, 0.06), transparent 60%);
  color: var(--ink);
  overflow-y: auto;
  display: none;
  /* Slide-up entry animation handled via [hidden] toggle + class */
  animation: wiridFocusIn 0.28s cubic-bezier(0.2, 1, 0.32, 1);
}
[data-theme="night"] .wirid-focus {
  background-image:
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.16), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(15, 61, 47, 0.18), transparent 60%);
}
.wirid-focus:not([hidden]) { display: block; }
@keyframes wiridFocusIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wirid-focus { animation: none; }
}

.wirid-focus-close {
  position: fixed;
  top: calc(0.8rem + env(safe-area-inset-top));
  right: 0.8rem;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  background: rgba(15, 12, 6, 0.06);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wirid-focus-close:hover { background: rgba(15, 12, 6, 0.12); }

.wirid-focus-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 1.4rem 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 100dvh;
  justify-content: center;
}

.wirid-focus-session {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.wirid-focus-name {
  margin: 0;
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  color: var(--ink);
}
.wirid-focus-arabic {
  margin: 0;
  font-family: 'Amiri Quran', 'Aref Ruqaa', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 2;
  color: var(--ink);
  max-width: 540px;
}
.wirid-focus-translation {
  margin: 0;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 460px;
}

.wirid-focus-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  color: var(--gold-leaf);
}
.wirid-ring-progress {
  transition: stroke-dashoffset 0.35s cubic-bezier(0.2, 1, 0.32, 1);
}
.wirid-ring-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.wirid-ring-count {
  font-family: 'Cinzel', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wirid-ring-target {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.wirid-focus-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0.4rem 0 0;
  flex-wrap: wrap;
}
.wirid-focus-mic,
.wirid-focus-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  min-block-size: 44px;
  transition: background var(--dur-fast, 0.15s) ease, transform var(--dur-fast, 0.15s) ease;
}
.wirid-focus-mic.is-active {
  background: var(--emerald);
  color: #fff;
  border-color: var(--emerald-3);
}
.wirid-focus-mic:active,
.wirid-focus-reset:active { transform: scale(0.97); }
.wirid-focus-tap {
  flex: 1 1 100%;
  margin-top: 0.3rem;
  padding: 1.6rem;
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border: 2px solid var(--gold-2);
  border-radius: var(--radius);
  font-family: 'Manrope', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, background var(--dur-fast, 0.15s) ease;
  min-block-size: 96px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.22);
}
.wirid-focus-tap:active {
  transform: scale(0.97);
  background: var(--gold-2);
}

.wirid-focus-status {
  margin: 0.4rem 0 0;
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  min-height: 1.4em;
}
.wirid-focus-hint {
  margin: 0.6rem 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

.wirid-focus.is-target-hit .wirid-ring-count {
  animation: wiridTargetPulse 0.7s ease;
}
@keyframes wiridTargetPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); color: var(--vermillion); }
  100% { transform: scale(1); }
}

/* ============================================================
   v142: SEO FAQ Section — visible content paired with FAQPage
   JSON-LD schema. Placed at end of reader, doesn't disrupt the
   main reading flow. <details> accordions match existing
   .kisah-accordion style.
   ============================================================ */
.seo-faq {
  margin: 2.5rem auto 1.5rem;
  padding: 1.4rem clamp(1rem, 4vw, 2rem);
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.seo-faq-title {
  margin: 0 0 1rem;
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.02em;
}
.seo-faq-item {
  margin-bottom: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast, 0.15s) ease;
}
.seo-faq-item[open] { background: var(--surface-deep); }
.seo-faq-item:last-of-type { margin-bottom: 0; }
.seo-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.45rem 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--gold);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 22px;
  text-align: center;
  border: 1px solid var(--line-soft);
  transition: transform var(--dur-fast, 0.15s) ease;
}
.seo-faq-item[open] summary::after {
  content: "−";
  background: var(--gold-leaf);
  color: var(--bg-deep);
  border-color: var(--gold-2);
}
.seo-faq-item p {
  margin: 0.4rem 0 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line-soft);
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ============================================================
   PWA UPDATE TOAST — bottom-anchored, slide-in from below.
   Shown when a new service worker is waiting (auto-update flow).
   User taps Refresh → SW activates → page reloads.
   ============================================================ */
#hirz-update-toast {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom, 0));
  transform: translate(-50%, calc(120% + 1rem));
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  max-width: min(420px, calc(100vw - 1.5rem));
  background: var(--surface, #fbf3da);
  color: var(--ink, #2c241a);
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.45));
  border-radius: 999px;
  box-shadow:
    0 12px 30px rgba(40, 30, 8, 0.18),
    0 2px 6px rgba(40, 30, 8, 0.08);
  font-size: 0.92rem;
  line-height: 1.4;
  opacity: 0;
  transition: transform 0.32s cubic-bezier(.2,.85,.25,1), opacity 0.28s ease;
}
#hirz-update-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
#hirz-update-toast .hirz-update-msg {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hirz-update-toast .hirz-update-btn {
  border: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
#hirz-update-toast .hirz-update-accept {
  background: linear-gradient(180deg, var(--gold-leaf, #d4af37), var(--gold, #c8a32d));
  color: #fff;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}
#hirz-update-toast .hirz-update-accept:hover { transform: translateY(-1px); }
#hirz-update-toast .hirz-update-accept:active { transform: translateY(0); }
#hirz-update-toast .hirz-update-dismiss {
  background: transparent;
  color: var(--ink-2, #5b4d36);
  font-weight: 500;
}
#hirz-update-toast .hirz-update-dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="night"] #hirz-update-toast {
  background: rgba(12, 46, 37, 0.96);
  color: var(--ink, #e8dcc1);
  border-color: var(--gold-2, rgba(212, 175, 55, 0.45));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);
}
[data-theme="night"] #hirz-update-toast .hirz-update-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  #hirz-update-toast { transition: opacity 0.2s ease; }
}

/* ============================================================
   HIRZ TOOLS HEAD — actions cluster (help "?" + close ×)
   ============================================================ */
.hirz-tools-head-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.hirz-tools-help {
  background: transparent;
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.45));
  color: var(--gold-leaf, #b8860b);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.hirz-tools-help:hover {
  background: var(--gold-glow, rgba(212, 175, 55, 0.18));
  color: var(--gold-leaf, #b8860b);
  transform: scale(1.05);
}
.hirz-tools-help:active { transform: scale(0.95); }
[data-theme="night"] .hirz-tools-help {
  color: var(--gold-2, #d4af37);
  border-color: rgba(212, 175, 55, 0.5);
}

/* ============================================================
   ONBOARDING DIALOG — first-run guided tour.
   Native <dialog> with showModal(). Bottom-sheet on mobile,
   centered card on desktop. 4 swipeable cards.
   ============================================================ */
.onboarding {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 1.5rem));
  width: calc(100vw - 1.5rem);
  margin: auto;
  color: var(--ink, #2c241a);
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow:
    0 28px 60px rgba(40, 30, 8, 0.32),
    0 6px 14px rgba(40, 30, 8, 0.14);
}
.onboarding::backdrop {
  background: rgba(20, 14, 4, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.onboarding[open] {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fbf3da);
  animation: onboardingPop 0.36s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes onboardingPop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="night"] .onboarding[open] {
  background: linear-gradient(180deg, rgba(12, 46, 37, 0.99), rgba(8, 32, 26, 0.99));
  color: var(--ink, #e8dcc1);
}

.onboarding-skip {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink-2, #5b4d36);
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.onboarding-skip:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
[data-theme="night"] .onboarding-skip:hover { background: rgba(255, 255, 255, 0.08); }

.onboarding-stack {
  position: relative;
  padding: 2.2rem 1.6rem 1.2rem;
  min-height: 280px;
  flex: 1;
}
.onboarding-card {
  display: none;
  text-align: center;
}
.onboarding-card.is-active {
  display: block;
  animation: onboardingCardIn 0.32s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes onboardingCardIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.onboarding-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-glow, rgba(212, 175, 55, 0.22)), transparent);
  color: var(--gold-leaf, #b8860b);
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.35));
}
.onboarding-title {
  margin: 0 0 0.65rem;
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  font-weight: 700;
  color: var(--gold, #c8a32d);
  letter-spacing: 0.01em;
}
.onboarding-text {
  margin: 0 0 0.7rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink, #2c241a);
}
[data-theme="night"] .onboarding-text { color: var(--ink, #e8dcc1); }
.onboarding-tip {
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--gold-glow, rgba(212, 175, 55, 0.12));
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.3));
  border-radius: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2, #5b4d36);
  text-align: left;
}
[data-theme="night"] .onboarding-tip {
  background: rgba(212, 175, 55, 0.08);
  color: var(--ink-2, #c4b896);
}

.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.2rem 1.1rem;
  border-top: 1px solid var(--line-soft, rgba(0,0,0,0.08));
  background: var(--surface-2, rgba(251, 243, 218, 0.6));
}
[data-theme="night"] .onboarding-nav {
  background: rgba(0, 0, 0, 0.18);
  border-top-color: rgba(255, 255, 255, 0.08);
}
.onboarding-prev,
.onboarding-next {
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}
.onboarding-prev {
  background: transparent;
  color: var(--ink-2, #5b4d36);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.4rem 0.85rem;
}
.onboarding-prev:disabled { opacity: 0.3; cursor: default; }
.onboarding-prev:not(:disabled):hover { background: rgba(0, 0, 0, 0.06); }
[data-theme="night"] .onboarding-prev:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.08);
}
.onboarding-next {
  background: linear-gradient(180deg, var(--gold-leaf, #d4af37), var(--gold, #c8a32d));
  color: #fff;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}
.onboarding-next:hover { transform: translateY(-1px); }
.onboarding-next:active { transform: translateY(0); }
.onboarding-dots {
  display: inline-flex;
  gap: 0.45rem;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--ink-soft, rgba(0,0,0,0.18));
  cursor: pointer;
  transition: background 0.2s ease, width 0.25s ease;
}
.onboarding-dot.is-active {
  width: 22px;
  background: var(--gold-leaf, #d4af37);
}
[data-theme="night"] .onboarding-dot { background: rgba(255, 255, 255, 0.18); }
[data-theme="night"] .onboarding-dot.is-active { background: var(--gold-2, #d4af37); }

@media (max-width: 480px) {
  .onboarding-stack { min-height: 260px; padding-top: 2.4rem; }
  .onboarding-text { font-size: 0.94rem; }
  .onboarding-next { padding: 0.5rem 1rem; }
}

/* Step counter "1 / 4" in welcome modal nav */
.onboarding-counter {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-2, #5b4d36);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  font-weight: 600;
}
[data-theme="night"] .onboarding-counter { color: var(--ink-2, #c4b896); }

/* ============================================================
   SPOTLIGHT TOUR — floating halo ring with dim backdrop.
   The halo is a separate fixed-position div positioned over the
   target's center. Its 9999px box-shadow spread creates an
   all-screen dim everywhere except the halo's transparent center,
   like a flashlight. Target stays untouched (no class added to it),
   so position:fixed FABs keep their geometry and click handlers.
   ============================================================ */
.tour-halo {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events: none;
  /* Halo z-index must be ABOVE the body.tour-active boosted layers
     (FABs/island sheet at 9991) so its gold ring renders over the
     target instead of being hidden behind a panel that's been promoted
     for tour visibility. Tooltip sits one layer above (9995). */
  z-index: 9993;
  /* Anchored to its computed center via translate(-50%, -50%) */
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  background: transparent;
  border: 3px solid var(--gold-leaf, #d4af37);
  box-shadow:
    /* Inner soft ring */
    0 0 0 5px rgba(212, 175, 55, 0.32),
    /* Outer big ring */
    0 0 0 11px rgba(212, 175, 55, 0.16),
    /* Outer warm glow */
    0 0 36px 10px rgba(212, 175, 55, 0.55),
    /* Dim everything else on screen */
    0 0 0 9999px rgba(8, 6, 2, 0.62);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(.2,.85,.25,1);
}
.tour-halo.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: tour-halo-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-halo-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(212, 175, 55, 0.32),
      0 0 0 11px rgba(212, 175, 55, 0.16),
      0 0 36px 10px rgba(212, 175, 55, 0.55),
      0 0 0 9999px rgba(8, 6, 2, 0.62);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(212, 175, 55, 0.45),
      0 0 0 16px rgba(212, 175, 55, 0.22),
      0 0 44px 14px rgba(212, 175, 55, 0.7),
      0 0 0 9999px rgba(8, 6, 2, 0.62);
  }
}
[data-theme="night"] .tour-halo {
  border-color: var(--gold-2, #d4af37);
}
[data-theme="night"] .tour-halo.is-visible {
  /* Slightly darker dim layer for night theme */
  box-shadow:
    0 0 0 5px rgba(212, 175, 55, 0.4),
    0 0 0 11px rgba(212, 175, 55, 0.18),
    0 0 36px 10px rgba(212, 175, 55, 0.55),
    0 0 0 9999px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .tour-halo.is-visible { animation: none; }
}

.tour-tooltip {
  position: fixed;
  left: 50%;
  /* Above halo (9993) so the card renders on top of the dim layer */
  z-index: 9995;
  width: min(380px, calc(100vw - 1.5rem));
  padding: 0.95rem 1.05rem 1rem;
  background: var(--surface, #fbf3da);
  color: var(--ink, #2c241a);
  border: 1px solid var(--gold-2, rgba(212, 175, 55, 0.45));
  border-radius: 1rem;
  box-shadow:
    0 18px 36px rgba(40, 30, 8, 0.22),
    0 4px 10px rgba(40, 30, 8, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(.2,.85,.25,1), opacity 0.28s ease;
}
/* Default: tooltip pinned to BOTTOM (target above) */
.tour-tooltip,
.tour-tooltip.is-bottom {
  bottom: max(1.2rem, env(safe-area-inset-bottom, 0));
  top: auto;
  transform: translate(-50%, calc(120% + 1rem));
}
.tour-tooltip.is-bottom.is-visible {
  transform: translate(-50%, 0);
}
/* When target is in the bottom half of the viewport (FABs), flip the
   tooltip to TOP so the user sees both at once: tooltip at top describes
   the feature, pulse-glow at bottom shows where to look. */
.tour-tooltip.is-top {
  top: max(1.2rem, env(safe-area-inset-top, 0));
  bottom: auto;
  transform: translate(-50%, calc(-120% - 1rem));
}
.tour-tooltip.is-top.is-visible {
  transform: translate(-50%, 0);
}
.tour-tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.tour-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.tour-tooltip-counter {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-leaf, #b8860b);
  font-variant-numeric: tabular-nums;
}
.tour-tooltip-skip {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-2, #5b4d36);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  opacity: 0.7;
}
.tour-tooltip-skip:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
.tour-tooltip-title {
  margin: 0 0 0.35rem;
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold, #c8a32d);
  letter-spacing: 0.01em;
}
.tour-tooltip-body {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.tour-tooltip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tour-tooltip-prev,
.tour-tooltip-next {
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}
.tour-tooltip-prev {
  background: transparent;
  color: var(--ink-2, #5b4d36);
  font-size: 0.86rem;
}
.tour-tooltip-prev:disabled { opacity: 0.3; cursor: default; }
.tour-tooltip-prev:not(:disabled):hover { background: rgba(0, 0, 0, 0.06); }
.tour-tooltip-next {
  background: linear-gradient(180deg, var(--gold-leaf, #d4af37), var(--gold, #c8a32d));
  color: #fff;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}
.tour-tooltip-next:hover { transform: translateY(-1px); }
.tour-tooltip-next:active { transform: translateY(0); }
[data-theme="night"] .tour-tooltip {
  background: rgba(12, 46, 37, 0.96);
  color: var(--ink, #e8dcc1);
  border-color: var(--gold-2, rgba(212, 175, 55, 0.45));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
[data-theme="night"] .tour-tooltip-skip:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="night"] .tour-tooltip-prev:not(:disabled):hover { background: rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .onboarding[open],
  .onboarding-card.is-active { animation: none; }
  .tour-tooltip { transition: opacity 0.2s ease; }
}