/* =====================================================
   WAHE.WORLD — Bani Reader Shared Stylesheet
   Used by all bani pages (Jaap Sahib, Japji, etc.)
   Requires /shared/css/tokens.css to be loaded first.
   ===================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  background-image:
    radial-gradient(circle at 50% 0%, hsla(38, 100%, 53%, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, hsla(262, 60%, 7%, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 100% 50%, hsla(340, 50%, 5%, 0.3) 0%, transparent 50%),
    radial-gradient(circle, hsla(38, 100%, 53%, 0.012) 1px, transparent 1px),
    radial-gradient(circle, hsla(262, 100%, 65%, 0.008) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 96px 96px;
  background-position: 0 0, 0 0, 0 0, 0 0, 24px 24px;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  /* Dynamic font size offsets */
  --size-g-offset: 0px;
  --size-r-offset: 0px;
  --size-e-offset: 0px;
}

/* ── Layout ── */
.bani-app { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Top Bar ── */
.bani-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: hsla(245, 24%, 4%, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-gold);
  padding: 0 20px;
}

.bani-topbar-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-khanda {
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}

.topbar-title-block { line-height: 1.2; }

.topbar-bani-name {
  font-family: var(--font-gurmukhi);
  font-size: 16px;
  color: var(--text-gurmukhi);
  display: block;
}

.topbar-bani-roman {
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.topbar-spacer { flex: 1; }

/* Mode toggle */
.mode-toggle {
  display: flex;
  background: hsla(245, 24%, 8%, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.mode-btn {
  padding: 6px 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.mode-btn.active {
  background: var(--gold-glow);
  color: var(--gold-bright);
  border-radius: 6px;
}

/* ── Display pill (floating, bottom-left — mirrors index pill) ── */
.customize-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: hsla(245, 24%, 12%, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold-hi);
  border-radius: 30px;
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: var(--transition);
}
.customize-fab:hover { background: hsla(245, 24%, 16%, 0.95); transform: translateY(-2px); }
.customize-fab.active { background: var(--gold-glow); border-color: var(--border-gold-hi); }
.customize-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.customize-fab.active .customize-icon { opacity: 1; }
.layers-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--gold);
  color: hsl(245, 24%, 4%);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* ── Display drawer (floating, blooms up from the pill) ── */
.customize-drawer {
  position: fixed;
  bottom: 80px;
  left: 24px;
  z-index: 999;
  width: 300px;
  max-width: calc(100vw - 48px);
  max-height: 60vh;
  background: hsla(245, 24%, 6%, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom left;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.customize-drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.cz-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cz-section { display: flex; flex-direction: column; gap: 9px; }
.cz-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cz-toggles { display: flex; flex-wrap: wrap; gap: 6px; }

/* size controls inside drawer — no extra border/margin */
.customize-drawer .size-controls-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  border: none;
  margin: 0;
  max-width: none;
}

/* ── Topbar auto-hide on scroll ── */
.bani-topbar { transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
.bani-topbar.topbar-hidden { transform: translateY(-100%); }

.dtoggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: hsla(245, 24%, 8%, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full, 50px);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  font-family: var(--font-body);
}

.dtoggle:hover { border-color: var(--border-gold); color: var(--text-secondary); }

.dtoggle.on {
  background: var(--gold-glow);
  border-color: var(--border-gold-hi);
  color: var(--gold-bright);
}

.dtoggle-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transition: var(--transition);
}

.dtoggle.on .dtoggle-dot { opacity: 1; }

/* Tanpura volume slider — Customize → Sound */
.cz-tanpura-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.cz-vol-icon { font-size: 12px; opacity: 0.7; flex: 0 0 auto; }
.cz-vol-slider {
  flex: 1;
  height: 4px;
  cursor: pointer;
  accent-color: var(--gold, hsl(43, 74%, 49%));
}

/* Voice picker (segmented) — Customize panel */
.cz-voice { display: flex; flex-wrap: wrap; gap: 6px; }
.voice-opt {
  padding: 6px 14px;
  background: hsla(245, 24%, 8%, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full, 50px);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  font-family: var(--font-body);
}
.voice-opt:hover { border-color: var(--border-gold); color: var(--text-secondary); }
.voice-opt.on {
  background: var(--gold-glow);
  border-color: var(--border-gold-hi);
  color: var(--gold-bright);
}

/* ── Main Content ── */
.bani-content {
  flex: 1;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px 100px;
}

/* ── Section Label ── */
.section-label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 28px 0 12px;
}

.section-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.section-pill {
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-family: var(--font-body);
  background: hsla(245, 24%, 5%, 0.85); /* dark base behind pill to shield colored text from bright background */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.section-note {
  font-size: 13px;
  color: var(--text-gold);
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.7);
}

.section-verse-num {
  font-size: 10.5px;
  color: var(--text-secondary); /* brighter than text-muted */
  margin-left: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
  opacity: 0.85;
}

/* Compact Section Subtitles */
.section-title-subtitles {
  margin-left: 32px; /* aligns under the pill, past the metronome beat space */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.7); /* multi-layered text shadow to protect thin glyphs */
}

.section-title-gurmukhi {
  font-family: var(--font-gurmukhi);
  font-size: 17px;
  color: var(--text-gurmukhi);
  font-weight: 500;
}

.section-title-sep {
  color: var(--gold-bright); /* brighter gold instead of gold-dim */
  font-size: 12px;
  opacity: 0.85;
}

.section-title-roman {
  font-size: 12.5px; /* slightly larger */
  color: var(--text-primary); /* bright white for maximum readability */
  font-style: italic;
  font-weight: 500; /* semi-bold to enhance contrast of small letters */
}

/* The pill is the "learn more" button: hover fills it with the section's own hue
   (--pill-c). Only the pill is interactive — not the whole label. */
.section-pill-btn {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.section-pill-btn:hover,
.section-pill-btn:focus-visible {
  background: var(--pill-c, var(--gold));
  color: hsl(245, 24%, 7%);
  border-color: var(--pill-c, var(--gold));
  outline: none;
}

/* Clickable metronome dot = per-section taal toggle (start / switch / stop) */
.beat-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.16s ease;
}
.beat-toggle:hover { background: hsla(43, 74%, 49%, 0.12); }

/* ── Section modal ── */
.board-modal.section-modal {
  max-width: 560px;
  padding: 28px 30px 30px;
}
.section-modal-inner {
  padding: 0;
}
.sm-head {
  margin-bottom: 12px;
  padding-right: 30px;   /* keep the title clear of the ✕ close button */
}
.sm-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 20px;
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}
.sm-native {
  font-family: 'Noto Serif Gurmukhi', serif;
  font-size: 18px;
  color: var(--text-primary);
  margin-top: 2px;
}
.sm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.sm-chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  background: hsla(245, 24%, 8%, 0.5);
}
.sm-chip-rasa {
  color: var(--gold-bright);
  border-color: var(--border-gold-hi);
}
.sm-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* Beat controls inside the Section modal */
.sm-beat {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
.sm-beat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sm-play {
  background: var(--gold-glow, hsla(43, 74%, 49%, 0.15));
  border: 1px solid var(--border-gold-hi);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sm-play:hover { background: var(--gold-glow); }
.sm-tempo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: hsla(245, 24%, 6%, 0.5);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: var(--radius-full, 50px);
}
.sm-reset {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.sm-reset:hover { color: var(--gold-bright); }
.sm-reset.hidden { display: none; }

/* Link from the Section modal (top-right) to the full sections overview */
.sm-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sm-overview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border-gold-hi);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sm-overview-link:hover { background: var(--gold-glow, hsla(43, 74%, 49%, 0.15)); }

/* ── Metronome bindu — dim idle affordance; glows + pulses while its taal plays ── */
.section-beat-bindu {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--gold-bright), var(--text-gold) 58%, transparent 72%);
  flex: 0 0 auto;
  opacity: 0.32;
  transition: opacity 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.beat-toggle:hover .section-beat-bindu { opacity: 0.85; }
/* .live = sounding section's dot. It carries a STATIC glow here; the per-beat
   breathing (scale + opacity only — compositor-friendly, never box-shadow) is an
   infinite Web-Animations loop started in reader.js (startBinduPulse). Keeping the
   animated properties off the main thread is what lets the pulse keep going
   smoothly while the page is being scrolled (esp. on mobile). Reduced-motion just
   keeps the static glow and skips the loop. */
.section-beat-bindu.live {
  opacity: 1;
  box-shadow: 0 0 7px 2px hsla(43, 88%, 64%, 0.5);
}

/* ── Sections overview (card grid) ── */
.board-modal.sections-overview-modal {
  max-width: 680px;
  padding: 24px 24px 26px;
}
.so-inner { padding: 0; }
.so-head {
  margin-bottom: 16px;
  padding-right: 30px;   /* clear the ✕ close button */
}
.so-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 20px;
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}
.so-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.sections-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 64vh;
  overflow-y: auto;
}
.so-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 11px 12px;
  background: hsla(245, 24%, 8%, 0.5);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.so-card:hover {
  border-color: var(--border-gold-hi);
  background: hsla(245, 24%, 11%, 0.7);
}
.so-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.so-native {
  font-family: 'Noto Serif Gurmukhi', serif;
  font-size: 14px;
  color: var(--text-primary);
}
.so-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.so-card .sm-chip { font-size: 10.5px; padding: 2px 8px; }
.so-beat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border-subtle);
}
.so-play {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-gold-hi);
  background: var(--gold-glow, hsla(43, 74%, 49%, 0.15));
  color: var(--gold-bright);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.so-play:hover { background: var(--gold-glow, hsla(43, 74%, 49%, 0.3)); }
.so-play.on { background: var(--gold-bright); color: #100a1f; }
.so-bpm { font-size: 12px; color: var(--text-muted); }
.so-bpm-num { color: var(--text-gold); font-weight: 600; }
.so-custom {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  border: 1px solid var(--border-gold-hi);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
}

/* ── Ambient Mandala Background ── */
/* Images shown as a centered contained orb — edges visible, never cropped */
.bani-mandala-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bani-mandala-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Responsive square, capped so it stays a contained orb on every screen.
     svh (not vh) is used so the mobile address-bar show/hide during scroll
     doesn't resize the image. Portrait is constrained by vw → kept small. */
  width: min(78vw, 90svh, 620px);
  height: min(78vw, 90svh, 620px);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Soft radial fade — mandala sharp at centre, dissolves at edges */
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 38%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 38%, transparent 72%);
  filter: saturate(1.3) brightness(1.15);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.bani-mandala-layer.active { opacity: 0.9; }

/* Ensure content sits above the mandala layer */
.bani-topbar  { z-index: 100; }
.bani-content { position: relative; z-index: 1; }
.gold-bar-bottom { z-index: 200; }

/* Study detail: show image properly in study view */
.study-mandala-img-wrap {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.study-mandala-img-wrap.loaded { opacity: 1; }

.study-mandala-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Pauri Card ── */
.pauri-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.pauri-card:hover { border-color: var(--border-gold); }

/* Line block */
.bani-line {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.bani-line:last-child { border-bottom: none; }

.line-gurmukhi {
  font-family: var(--font-gurmukhi);
  font-size: calc(clamp(18px, 2.7vw, 23px) + var(--size-g-offset, 0px));
  line-height: 2;
  color: var(--text-gurmukhi);
  letter-spacing: 0.3px;
  transition: font-size 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.line-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  margin-left: 12px;
  opacity: 0.35;
  transition: var(--transition);
  vertical-align: middle;
  user-select: none;
}
.line-audio-btn:hover {
  opacity: 0.95;
  color: var(--gold-bright);
  transform: scale(1.2);
}
.line-audio-btn:active {
  transform: scale(0.95);
}

.line-roman {
  font-size: calc(14px + var(--size-r-offset, 0px));
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.75;
  transition: font-size 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.line-english {
  font-size: calc(15px + var(--size-e-offset, 0px));
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.75;
  padding-top: 0;
  border-top: none;
  transition: font-size 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Word table */
.word-table-wrap {
  overflow-x: auto;
  background: hsla(245, 28%, 7%, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-sm);
  border: 1px solid hsla(0, 0%, 100%, 0.06);
}

.word-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.word-table thead tr {
  background: hsla(245, 30%, 5%, 0.7);
}

.word-table th {
  padding: 7px 14px;
  text-align: left;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
}

.word-table th.col-g  { color: var(--text-gold); }
.word-table th.col-r  { color: hsl(176, 55%, 52%); }
.word-table th.col-e  { color: hsl(214, 60%, 68%); }
.word-table th.col-etym { color: hsl(265, 60%, 75%); }

.word-table td {
  padding: 8px 14px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
  vertical-align: top;
}

.word-table tr:last-child td { border-bottom: none; }
.word-table tr:nth-child(even) td { background: hsla(245, 25%, 5%, 0.5); }

.word-g { font-family: var(--font-gurmukhi); font-size: 16px; color: var(--text-gurmukhi); }
.word-r { color: var(--gold-dim); font-style: italic; }
.word-e { color: hsl(214, 60%, 72%); }
.word-etym { color: hsl(265, 45%, 72%); font-size: 11px; line-height: 1.45; }

/* ── Concept/Word Study Table ── */
.concept-table-wrap {
  margin: 12px 0 16px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  background: hsla(245, 28%, 7%, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.concept-table {
  width: 100%;
}

.concept-term-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.word-r-sub {
  font-size: 11px;
  color: var(--gold-dim);
  font-family: var(--font-body);
}

.concept-etym {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-family: var(--font-body);
}

.pauri-khand-badge {
  display: inline-block;
  background: hsla(38, 100%, 53%, 0.1);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* ── Summary Box ── */
.pauri-summary {
  margin: -6px 0 6px; /* negative top margin pulls it closer to section-label; bottom margin of 6px pushes the card */
  padding: 12px 18px;
  background: hsla(245, 24%, 4%, 0.70); /* translucent dark base */
  backdrop-filter: blur(12px); /* stronger blur to diffuse underlying graphic details for premium glassmorphism */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle); /* matched to verse card border color */
  border-radius: var(--radius-md); /* matched to verse card curvature for visual harmony */
}

.summary-caption {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-bright); /* bright gold for high readability */
  margin-right: 6px;
  font-weight: 700;
  display: inline-block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.summary-text {
  font-size: 13.5px; /* slightly smaller, secondary typography */
  line-height: 1.7;
  color: var(--text-primary); /* bright white for maximum contrast */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Emphasised transliterated key terms (authored as *term*) — gold italic so they
   stand out in the Intent text, line meanings, and word study. */
.term {
  font-style: italic;
  font-weight: 500;
  color: var(--text-gold, var(--gold-bright));
}

/* ── Inline Insight Panel (reading mode, tog-ins) ── */
.pauri-insight-panel {
  margin: 0 0 12px;
  border: 1px solid hsla(38, 100%, 53%, 0.24);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: hsla(245, 28%, 7%, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.pip-section {
  padding: 14px 18px;
  border-bottom: 1px solid hsla(38, 100%, 53%, 0.12);
}

.pip-section:last-child { border-bottom: none; }

.pip-heading {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-gold);
  margin-bottom: 7px;
  font-weight: 500;
}

.pip-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-primary);
}

.pip-concepts { display: flex; flex-direction: column; gap: 8px; }

.inline-concept-chip {
  background: hsla(245, 30%, 11%, 0.92);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.inline-concept-term-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.inline-concept-g {
  font-family: var(--font-gurmukhi);
  font-size: 17px;
  color: var(--text-gurmukhi);
  line-height: 1.4;
}

.inline-concept-term {
  font-size: 12px;
  font-style: italic;
  color: var(--gold-dim);
  letter-spacing: 0.3px;
}

.inline-concept-meaning {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.7;
}

.inline-concept-etym {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  font-style: italic;
}

/* ── Inline Immersion Row (reading mode, tog-imm) ── */
.pauri-immerse-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  padding: 10px 14px;
  background: hsla(262, 60%, 6%, 0.6);
  border: 1px solid hsla(262, 70%, 45%, 0.14);
  border-radius: var(--radius-md);
}

.pir-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 2px;
}

.pir-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(262, 60%, 8%, 0.8);
  border: 1px solid hsla(262, 70%, 45%, 0.2);
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.pir-btn:hover {
  background: hsla(262, 60%, 16%, 0.95);
  border-color: hsla(262, 70%, 60%, 0.5);
  transform: scale(1.1);
}

.pir-btn.pir-insight {
  background: hsla(38, 80%, 5%, 0.8);
  border-color: hsla(38, 100%, 45%, 0.2);
  color: var(--gold-dim);
}

.pir-btn.pir-insight:hover {
  background: hsla(38, 80%, 10%, 0.9);
  border-color: var(--border-gold-hi);
  color: var(--gold-bright);
}

/* Completed game mode — green ring + corner check */
.pir-btn.done {
  position: relative;
  background: hsla(150, 60%, 8%, 0.85);
  border-color: hsla(150, 55%, 45%, 0.6);
}
.pir-btn.done:hover {
  background: hsla(150, 55%, 14%, 0.95);
  border-color: hsla(150, 55%, 55%, 0.8);
}
.pir-check {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background: hsl(150, 55%, 40%);
  color: #03120b;
  border-radius: 50%;
  border: 1.5px solid hsl(245, 24%, 6%);
}

.pir-mastery {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-body);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}
.pir-mastery.complete {
  color: hsl(150, 60%, 72%);
  border-color: hsla(150, 55%, 45%, 0.6);
  background: hsla(150, 60%, 8%, 0.6);
}

/* ── Immersions progress strip ── */
.bani-progress-strip {
  margin: 4px 0 20px;
  padding: 12px 16px;
  background: hsla(262, 60%, 6%, 0.7);
  border: 1px solid hsla(262, 70%, 55%, 0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}
.bani-progress-strip:hover { border-color: hsla(262, 70%, 60%, 0.4); }

.bps-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.bps-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--indigo);
  font-family: var(--font-body);
}
.bps-stat {
  font-size: 12px;
  color: var(--text-gold);
  font-family: var(--font-body);
  text-align: right;
}
.bps-track {
  height: 6px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bps-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--gold));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}
.bps-sub {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* ── Study Mode Nav ── */
.study-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0;
}

.nav-btn {
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-gold);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-gold);
}

.nav-btn.nav-next { margin-left: auto; }

/* ── Study Mode: Section List ── */
.section-list { padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }

.section-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
}

.section-list-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-gold);
}

/* Quick immersion buttons on each list row */
.sli-quick-immerse {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}

.sli-imm-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
  flex-shrink: 0;
}

.sli-imm-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(262, 60%, 7%, 0.8);
  border: 1px solid hsla(262, 70%, 45%, 0.18);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.sli-imm-btn:hover {
  background: hsla(262, 60%, 14%, 0.95);
  border-color: hsla(262, 70%, 60%, 0.5);
  transform: scale(1.12);
}

.sli-imm-btn.insight {
  border-color: hsla(38, 100%, 45%, 0.18);
  background: hsla(38, 80%, 5%, 0.8);
}
.sli-imm-btn.insight:hover {
  background: hsla(38, 80%, 10%, 0.9);
  border-color: var(--border-gold-hi);
  transform: scale(1.12);
}

.sli-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.sli-verse-badge {
  font-size: 9px;
  color: var(--text-muted);
  background: hsla(245,25%,8%,0.8);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: 10px;
}

.sli-section { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.sli-note { font-size: 13px; color: var(--text-gold); font-style: italic; }
.sli-preview {
  font-family: var(--font-gurmukhi);
  font-size: 16px;
  color: var(--text-gurmukhi);
  opacity: 0.75;
  margin-bottom: 6px;
  line-height: 1.65;
}

.sli-summary { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.sli-arrow { float: right; color: var(--gold-dim); font-size: 14px; margin-top: 2px; }

/* ── Search bar (study mode) ── */
.study-search-wrap {
  padding: 16px 0 4px;
}

.study-search {
  width: 100%;
  max-width: 360px;
  padding: 9px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}

.study-search:focus { border-color: var(--border-gold-hi); }
.study-search::placeholder { color: var(--text-muted); }

/* ── Help box ── */
.help-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
}

.help-box strong { color: var(--text-gold); }

/* ── Back link ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  color: var(--gold-dim);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  transition: var(--transition);
}

.back-link:hover { color: var(--gold); }

/* ── Gold accent lines ── */
.gold-bar-top {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
}

.gold-bar-bottom {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
}

/* ── Scroll mode: section anchor spacer ── */
.scroll-section-anchor { scroll-margin-top: 110px; }

/* ── Section color pills ── (--pill-c drives the hover-fill, generic across hues) */
.pill-opening        { --pill-c: hsl(38, 90%, 60%);  color: var(--pill-c); border-color: hsla(38, 90%, 60%, 0.4); }
.pill-chhapai        { --pill-c: hsl(262, 70%, 68%); color: var(--pill-c); border-color: hsla(262, 70%, 68%, 0.4); }
.pill-bhujang        { --pill-c: hsl(150, 55%, 52%); color: var(--pill-c); border-color: hsla(150, 55%, 52%, 0.4); }
.pill-chaachari      { --pill-c: hsl(30, 80%, 55%);  color: var(--pill-c); border-color: hsla(30, 80%, 55%, 0.4); }
.pill-closing        { --pill-c: hsl(340, 70%, 60%); color: var(--pill-c); border-color: hsla(340, 70%, 60%, 0.4); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .bani-topbar-inner { gap: 8px; }
  .topbar-bani-name  { font-size: 14px; }
  .dtoggle           { font-size: 10px; padding: 4px 10px; }
  /* Display pill collapses to a compact icon-only target */
  .customize-fab        { bottom: 18px; left: 16px; padding: 10px; gap: 0; }
  .customize-fab-label  { display: none; }
  .customize-drawer     { bottom: 70px; left: 16px; }
}

/* ── Font Size Controls Panel ── */
.size-controls-panel {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.size-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsla(245, 24%, 6%, 0.5);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-full, 50px);
  user-select: none;
}

.size-indicator-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.6;
}

.size-label {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text-muted);
  margin-right: 4px;
}

.size-btn {
  background: hsla(245, 24%, 12%, 0.6);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.size-btn:hover {
  background: var(--gold-glow);
  border-color: var(--border-gold-hi);
  color: var(--gold-bright);
}

.size-btn:active {
  transform: scale(0.9);
}

.tempo-controls {
  display: flex;
}

.tempo-readout {
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text-primary);
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

html.no-smooth-scroll, html.no-smooth-scroll body {
  scroll-behavior: auto !important;
}

/* ── Floating Index Component ────────────────────────────────────────────── */
.floating-index-pill {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: hsla(245, 24%, 12%, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold-hi);
  border-radius: 30px;
  padding: 8px 16px;
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-index-pill:hover {
  background: hsla(245, 24%, 16%, 0.95);
  transform: translateX(-50%) translateY(-2px);
}

.floating-index-pill::after {
  content: '↑';
  font-size: 16px;
  line-height: 1;
}

.index-drawer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  transform-origin: bottom center;
  z-index: 999;
  width: 280px;
  max-height: 60vh;
  background: hsla(245, 24%, 6%, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  padding: 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.index-drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
}

.index-grid-btn {
  background: hsla(245, 24%, 16%, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.index-grid-btn:hover {
  background: hsla(245, 24%, 20%, 0.8);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.index-grid-btn.active {
  background: var(--gold-glow);
  border-color: var(--border-gold-hi);
  color: var(--gold-bright);
}

@media (max-width: 600px) {
  .floating-index-pill {
    bottom: 18px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 55vw;
  }
  .floating-index-pill #fip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .index-drawer {
    left: 50%;
    right: auto;
    bottom: 70px;
    width: calc(100vw - 32px);
    max-height: 50vh;
    transform: translateX(-50%) translateY(20px) scale(0.95);
    transform-origin: bottom center;
  }
}

/* ── Word Study Interactive Elements & Modal ── */
.line-gurmukhi.interactive {
  cursor: pointer;
  transition: font-size 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s ease, text-shadow 0.2s ease;
}

.line-gurmukhi.interactive:hover {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.line-roman.interactive {
  cursor: pointer;
  transition: font-size 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s ease, text-shadow 0.2s ease;
}

.line-roman.interactive:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Modal Content Adjustments for Word Study */
.board-modal.word-study-modal {
  max-width: 580px;
  width: 90%;
}

.word-study-modal-inner {
  padding: 28px;
}

@media (max-width: 600px) {
  .word-study-modal-inner {
    padding: 20px 16px;
  }
}

.word-study-header {
  margin-bottom: 20px;
  text-align: center;
}

.word-study-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-gold);
  border: 1px solid hsla(38, 100%, 53%, 0.3);
  background: hsla(38, 100%, 53%, 0.08);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 4px;
}

.word-study-body {
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

/* ── Word Study List Layout (Mobile-friendly Stacked Cards) ── */
.word-study-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.word-study-item {
  background: hsla(245, 25%, 8%, 0.6);
  border: 1px solid hsla(0, 0%, 100%, 0.05);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s, background 0.2s;
}

.word-study-item:hover {
  border-color: hsla(38, 100%, 53%, 0.2);
  background: hsla(245, 25%, 10%, 0.8);
}

.wsi-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.wsi-g {
  font-family: var(--font-gurmukhi);
  font-size: 18px;
  color: var(--text-gurmukhi);
  line-height: 1.2;
}

.wsi-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 13px;
}

.wsi-r {
  font-size: 13px;
  color: var(--gold-dim);
  font-style: italic;
  font-family: var(--font-body);
}

.wsi-dash {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 12px;
}

.wsi-meaning {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.4;
}

.wsi-etym {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 2px;
  opacity: 0.85;
}

/* ── Raag Metadata Display in Section Modal ── */
.sm-raag-section {
  margin-top: 14px;
  margin-bottom: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
.sm-raag-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-gold);
  margin-bottom: 12px;
  font-weight: 600;
}
.sm-raag-scale {
  background: hsla(245, 25%, 5%, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.sm-raag-scale-line {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.sm-raag-scale-line strong {
  color: var(--gold-bright);
  font-weight: 500;
  display: inline-block;
  width: 60px;
}
.scale-notes {
  font-family: var(--font-body);
  letter-spacing: 1px;
  color: var(--text-primary);
}
.sm-raag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.sm-raag-grid-item {
  background: hsla(245, 25%, 6%, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
}
.sm-raag-grid-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.sm-raag-grid-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.sm-raag-pakad {
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--text-secondary);
}
.sm-raag-pakad code {
  background: hsla(245, 25%, 5%, 0.6);
  border: 1px solid var(--border-subtle);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-body);
  color: var(--gold-bright);
}
.sm-raag-feeling {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: hsla(43, 74%, 49%, 0.05);
  border-left: 2px solid var(--gold);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}
.sm-raag-feeling strong {
  color: var(--gold-bright);
  font-weight: 500;
}
.sm-raag-etym, .sm-raag-origin {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-style: italic;
}

/* =====================================================
   Next Bani & Daily Nitnem Journey Styles (Compact Profile)
   ===================================================== */
.next-bani-container {
  position: relative;
  margin-top: 45px;
  margin-bottom: 25px;
  padding: 20px 24px 18px;
  background: hsla(245, 24%, 6%, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
}

.next-bani-container:hover {
  border-color: var(--border-gold-hi);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.08);
}

.nb-glow-bg {
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, hsla(43, 74%, 49%, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Horizontal Next Bani Row */
.nb-next-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.nb-next-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.nb-meta-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.nb-meta-title {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nb-meta-gurmukhi {
  font-family: var(--font-gurmukhi);
  color: var(--text-gurmukhi);
  font-size: 16px;
  font-weight: 500;
}

.nb-badge-locked {
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: hsla(245, 24%, 12%, 0.6);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-weight: 600;
}

.nb-next-actions {
  display: flex;
  align-items: center;
}

.nb-actions-split {
  gap: 8px;
}

.nb-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  background: linear-gradient(135deg, var(--gold) 0%, hsl(43, 74%, 40%) 100%);
  border: 1px solid var(--border-gold-hi);
  border-radius: var(--radius-full, 50px);
  color: hsl(245, 24%, 4%) !important;
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(212, 175, 55, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.nb-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(212, 175, 55, 0.3), 0 0 8px rgba(212, 175, 55, 0.2);
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
}

.nb-cta-btn:active {
  transform: translateY(0);
}

.nb-cta-btn.secondary {
  background: hsla(245, 24%, 8%, 0.8);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary) !important;
  box-shadow: none;
}

.nb-cta-btn.secondary:hover {
  background: hsla(245, 24%, 12%, 0.9);
  border-color: var(--border-gold);
  color: var(--gold-bright) !important;
}

/* Divider separating next block and timeline */
.nb-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 12px 0 10px 0;
  opacity: 0.6;
}

/* Timeline progress journey */
.nb-timeline-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.nb-timeline-scroll-wrapper::-webkit-scrollbar {
  height: 4px;
}

.nb-timeline-scroll-wrapper::-webkit-scrollbar-track {
  background: hsla(245, 24%, 4%, 0.2);
  border-radius: 2px;
}

.nb-timeline-scroll-wrapper::-webkit-scrollbar-thumb {
  background: hsla(43, 74%, 49%, 0.15);
  border-radius: 2px;
}

.nb-timeline-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: hsla(43, 74%, 49%, 0.3);
}

.nb-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 700px;
  padding: 4px 10px;
  margin: 0 auto;
}

.nb-timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-muted);
  width: 50px;
  position: relative;
  transition: transform 0.2s ease;
  user-select: none;
}

a.nb-timeline-node:hover {
  transform: translateY(-2px);
  color: var(--gold-bright);
}

.nb-node-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  background: hsla(245, 24%, 4%, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin-bottom: 5px;
}

.nb-node-icon {
  font-size: 8px;
  font-weight: bold;
  line-height: 1;
}

.nb-node-name {
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.nb-timeline-connector {
  flex: 1;
  height: 1.5px;
  background: var(--border-subtle);
  margin-bottom: 18px; /* aligns vertically with smaller node dots */
  transition: background 0.3s ease;
}

/* Node States */
/* Completed */
.nb-timeline-node.completed .nb-node-dot {
  background: hsla(145, 80%, 40%, 0.12);
  border-color: hsl(145, 80%, 40%);
  color: hsl(145, 80%, 50%);
  box-shadow: 0 0 6px rgba(145, 80%, 40%, 0.25);
}
.nb-timeline-node.completed .nb-node-name {
  color: var(--text-secondary);
}

/* Active */
.nb-timeline-node.active {
  color: var(--gold-bright);
}
.nb-timeline-node.active .nb-node-dot {
  background: var(--gold-glow);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 10px var(--gold);
  transform: scale(1.1);
}
.nb-timeline-node.active .nb-node-name {
  font-weight: 600;
  color: var(--gold-bright);
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

/* Next / Up Next active */
.nb-timeline-node.next .nb-node-dot {
  border-color: var(--gold);
  color: var(--gold);
  background: hsla(43, 74%, 49%, 0.04);
}
.nb-timeline-node.next .nb-node-name {
  color: var(--text-primary);
}

/* Locked / Coming Soon */
.nb-timeline-node.locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.nb-timeline-node.locked .nb-node-dot {
  background: hsla(245, 24%, 3%, 0.9);
  border-color: hsla(245, 24%, 15%, 0.4);
  color: var(--text-muted);
}
.nb-timeline-node.locked .nb-node-name {
  color: var(--text-muted);
}

/* Connector Line highlights */
.nb-timeline-connector.completed {
  background: hsl(145, 80%, 40%);
  box-shadow: 0 0 4px rgba(145, 80%, 40%, 0.25);
}

.nb-timeline-connector.active {
  background: linear-gradient(90deg, var(--gold-bright) 0%, var(--border-subtle) 100%);
}