/* ========================================================================
   The Song of God — site styles
   Mobile-first, responsive, light + dark themes.
   ======================================================================== */

:root {
  --bg:           #fdf6e3;
  --bg-elev:      #faf3df;
  --bg-card:      #fffbe9;
  --text:         #073642;
  --text-muted:   #586e75;
  --accent:       #b58900;
  --accent-soft:  #cb8e1d33;
  --accent-rim:   #e5b743;
  --border:       #d8d2bc;
  --border-soft:  #ece4c6;
  --quote-bg:     #f4ecd1;
  --note-bg:      #ede5c3;
  --link:         #268bd2;
  --shadow:       0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:    0 6px 24px rgba(0,0,0,0.10);
  --mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif:        Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:         system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --sk-font:      "Noto Sans Devanagari", "Noto Serif Devanagari", "Sanskrit 2003", serif;
  --radius:       6px;
  --radius-lg:    10px;
  --container:    1400px;
  --sidebar-w:    240px;
  --topbar-h:     3.2rem;
}

[data-theme="dark"] {
  --bg:           #0c1e25;
  --bg-elev:      #102a33;
  --bg-card:      #0e2630;
  --text:         #eaeadf;
  --text-muted:   #98a8ab;
  --accent:       #e5b743;
  --accent-soft:  #e5b74322;
  --accent-rim:   #b58900;
  --border:       #2a4651;
  --border-soft:  #1d3a44;
  --quote-bg:     #0c2530;
  --note-bg:      #14323a;
  --link:         #79b9e0;
  --shadow:       0 1px 4px rgba(0,0,0,0.4);
  --shadow-lg:    0 6px 24px rgba(0,0,0,0.5);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  height: var(--topbar-h);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
.brand h1 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .subtitle {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topnav {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.topnav button, .topnav select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.32rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.topnav button:hover, .topnav select:hover { border-color: var(--accent); }
.topnav select { max-width: 280px; }
#theme-toggle { font-size: 1.05rem; padding: 0.18rem 0.5rem; }

/* Mobile-only sidebar toggle in the top bar */
.sidebar-toggle {
  display: none;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.1rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 1.2rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem;
}
.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 0.5rem);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h) - 1rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar-h {
  margin: 0.8rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.chapter-list, .extra-list { list-style: none; padding: 0; margin: 0; }
.chapter-list li, .extra-list li {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-bottom: 1px;
  transition: background 0.15s;
}
.chapter-list li:hover, .extra-list li:hover { background: var(--accent-soft); }
.chapter-list a, .extra-list a { color: var(--text); display: block; }
.chapter-list .chap-num {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  margin-right: 0.45rem;
  display: inline-block;
  min-width: 2.4em;
}
.chapter-list li.active { background: var(--accent-soft); }
.chapter-list li.active a { color: var(--accent); font-weight: 600; }

/* Language switcher pills in the topbar */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  margin-right: 0.4rem;
  font-family: var(--sans);
}
.lang-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
  background: var(--accent);
  color: var(--bg);
}
.lang-switch button[lang="hi"], .lang-switch button[lang="mr"] {
  font-family: var(--sk-font);
  font-size: 0.85rem;
}
@media (max-width: 540px) {
  .lang-switch button { padding: 0.15rem 0.4rem; font-size: 0.72rem; }
}

/* Collapsible nav groups in the sidebar */
.nav-group { margin: 0.15rem 0; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0.35rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before {
  content: "▸";
  font-size: 0.7em;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  display: inline-block;
  width: 0.8em;
}
.nav-group[open] > summary::before { transform: rotate(90deg); }
.nav-group > summary:hover { background: var(--accent-soft); }
.nav-group > summary:focus-visible {
  outline: 2px solid var(--accent-rim);
  outline-offset: 1px;
}
.nav-group > .extra-list {
  padding-left: 0.9rem;
  margin-top: 0.1rem;
  margin-bottom: 0.25rem;
  border-left: 1px solid var(--border-soft);
  margin-left: 0.55rem;
}
.nav-group > .extra-list li { font-size: 0.88rem; }

/* Mobile sidebar backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 45;
}
.sidebar-backdrop.open { display: block; }

.main { min-width: 0; }

/* ---------- Chapter header ---------- */
.chapter-header {
  padding: 0.4rem 0 0.8rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.chapter-header h2 {
  font-size: 1.55rem;
  margin: 0.2rem 0;
  line-height: 1.2;
}
.chapter-header .meta {
  font-family: var(--sans);
  color: var(--text-muted);
  font-size: 0.82rem;
}
.chapter-header .intro {
  margin-top: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ---------- Controls ---------- */
.controls-bar {
  position: sticky;
  top: calc(var(--topbar-h) + 0.2rem);
  z-index: 40;
  background: var(--bg);
  margin-bottom: 1rem;
  padding-top: 0.3rem;
}

.controls-toggle {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0.4rem;
  transition: border-color 0.15s, color 0.15s;
}
.controls-toggle:hover { border-color: var(--accent); color: var(--accent); }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.controls.collapsed { display: none; }

.controls fieldset {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.controls legend {
  padding: 0 0.3rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0.6rem 0.2rem 0;
  cursor: pointer;
  user-select: none;
}
.controls label:hover { color: var(--accent); }
.controls input[type=checkbox] { cursor: pointer; }
.controls button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.controls .opt input { margin-right: 0.2rem; }
.controls select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

/* Audio fieldset: a transport row on top, then one settings row per track
   (toggle · speed · repeat · extras) laid out as a 4-column grid. */
.audio-controls { flex: 1 1 100%; }
.audio-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
}
.audio-transport label { margin: 0; }

.track-grid {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content auto;
  gap: 0.25rem 0.7rem;
  align-items: center;
}
.track-grid > label { margin: 0; }
.track-head {
  display: contents;
}
.track-head > span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.track-grid select { padding: 0.15rem 0.4rem; font-size: 0.8rem; }
.track-grid .track-rate,
.track-grid .track-repeat { min-width: 4.2rem; }
.track-grid .track-vol { width: 70px; vertical-align: middle; }
.track-grid .track-vol:disabled { cursor: not-allowed; }
/* A track with no recorded clips is dimmed, not hidden — playback falls back to
   the browser voice. #track-note under the grid explains why the row is dim. */
.track-grid label.track-missing { opacity: 0.55; }
.track-note {
  margin: 0.45rem 0 0;
  max-width: 46rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Narrow screens: drop the last ("extras") column — the Voice picker takes a row
   of its own, and the empty placeholder cells the other rows use to reach it
   are removed so every row still starts in column 1. */
@media (max-width: 620px) {
  .track-grid {
    grid-template-columns: max-content max-content max-content max-content;
    gap: 0.25rem 0.4rem;
  }
  .track-head > span:last-child,
  .track-grid > span:empty { display: none; }
  .track-grid .track-rate,
  .track-grid .track-repeat { min-width: 0; }
  .track-grid .track-vol { width: 52px; }
  #voice-opt { grid-column: 1 / -1; }
}

#page-label { color: var(--text-muted); font-size: 0.8rem; margin: 0 0.4rem; }

/* ---------- Verses ---------- */
.verses { display: flex; flex-direction: column; gap: 1.2rem; }
.verse {
  padding: 1rem 0.2rem 1.2rem;
  border-bottom: 1px solid var(--border-soft);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
  transition: background 0.4s, border-left-color 0.4s, padding-left 0.3s;
}
.verse:last-child { border-bottom: none; }

.verse-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.verse-head h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 600;
}
.verse-head .badge {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--accent-rim);
}
.verse-head .audio-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  color: var(--text-muted);
  margin-left: auto;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.verse-head .audio-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bookmark-btn { font-size: 1rem !important; padding: 0 0.4rem !important; }
.bookmark-btn.marked { color: var(--accent); border-color: var(--accent); }

/* Reading-progress bars in the sidebar */
.reading-progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.25rem 0 0.8rem;
  font-family: var(--sans);
  font-size: 0.72rem;
}
.rp-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.2rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
}
.rp-row a { color: inherit; text-decoration: none; }
.rp-row a:hover { color: var(--accent); }
.rp-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.rp-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s;
  opacity: 0.7;
}
.rp-pct {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
}
.rp-row.complete .rp-pct { color: var(--accent); font-weight: 600; }
.rp-row.complete .rp-bar-fill { opacity: 1; }

/* Per-text progress list inside #mydata view */
.mydata-progress-list {
  margin: 0.5rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.mydata-row {
  display: grid;
  grid-template-columns: 1fr 4.5rem 2.8rem 3.2rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.mydata-row:last-child { border-bottom: none; }
.mydata-row.empty { color: var(--text-muted); }
.mydata-row .mydata-label { color: var(--text); }
.mydata-row.empty .mydata-label { color: var(--text-muted); }
.mydata-row .mydata-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
}
.mydata-row .mydata-pct {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: right;
  color: var(--text-muted);
}
.mydata-row:not(.empty) .mydata-pct { color: var(--accent); }
.mydata-row .mydata-reset {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mydata-row .mydata-reset:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.mydata-row .mydata-reset:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bookmark star for the auxiliary reader pages (Īśā, Kena, Kaṭha, YS, Māṇḍūkya, SK). */
.star-btn {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0.45rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-left: 0.4rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.star-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.star-btn.marked { color: var(--accent); border-color: var(--accent); }
mark { background: var(--accent); color: var(--bg); padding: 0 2px; border-radius: 2px; }

.verse-section { margin: 0.5rem 0; }
.verse-section h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.7rem 0 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.sanskrit-text {
  font-family: var(--sk-font);
  font-size: 1.3rem;
  line-height: 1.9;
  background: var(--quote-bg);
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.9rem;
  margin: 0.3rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.iast-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  background: var(--quote-bg);
  border-left: 3px solid var(--border);
  padding: 0.55rem 0.9rem;
  margin: 0.3rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.paraphrase-text {
  font-size: 1.05rem;
  line-height: 1.65;
  background: var(--bg-card);
  border-left: 3px solid var(--accent-rim);
  padding: 0.55rem 0.9rem;
  margin: 0.3rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.paraphrase-text em { font-style: italic; }

.words-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.words-table td {
  padding: 0.3rem 0.7rem;
  border-bottom: 1px dotted var(--border);
  vertical-align: top;
}
.words-table tr:last-child td { border-bottom: none; }
.words-table td:first-child {
  font-family: var(--serif);
  font-style: italic;
  width: 40%;
  color: var(--text-muted);
}
.note-text {
  background: var(--note-bg);
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.9rem;
  margin: 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* karaoke active line */
.karaoke-now {
  background: var(--accent-soft);
  border-radius: 3px;
  transition: background 0.3s;
}
/* karaoke per-word highlight (inside .iast-text) */
.iast-word { transition: background 0.15s, color 0.15s; padding: 0 1px; border-radius: 2px; }
.iast-word.karaoke-now {
  background: var(--accent);
  color: var(--bg);
  padding: 0 3px;
  margin: 0 -2px;
  box-shadow: 0 0 0 2px var(--accent-rim);
}

/* Currently-playing verse — independent of karaoke setting */
.verse.now-playing {
  border-left: 4px solid var(--accent);
  padding-left: 0.9rem;
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 35%);
}

/* hide a section in the verse output */
.hide-sanskrit .sanskrit-section,
.hide-iast .iast-section,
.hide-paraphrase .paraphrase-section,
.hide-words .words-section,
.hide-note .note-section,
.hide-mukundananda .mukundananda-section { display: none; }

/* ---------- Mukundananda (admin-only) ---------- */
.mukundananda-section h4 .mukund-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent-rim);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.mukund-trans {
  font-style: italic;
  padding: 0.45rem 0.6rem;
  line-height: 1.6;
}
.mukund-comm {
  background: var(--note-bg);
  border-left: 3px solid var(--accent-rim);
  padding: 0.6rem 0.9rem;
  margin: 0.4rem 0;
  font-size: 0.92rem;
  line-height: 1.65;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.mukund-comm p { margin: 0 0 0.6rem; }
.mukund-comm p:last-child { margin-bottom: 0; }
#admin-unlock { font-size: 0.8rem; opacity: 0.75; }
#admin-unlock:disabled { opacity: 0.5; cursor: default; }
/* Mukundananda Show/Audio toggles: greyed out until admin signs in */
.mukund-ctrl { opacity: 0.45; transition: opacity 0.2s; }
.mukund-ctrl input:disabled { cursor: not-allowed; }
body.admin-unlocked .mukund-ctrl { opacity: 1; }
/* Sub-heading over the commentary block, carrying its own ▶ */
.mukund-comm-h {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0.6rem 0 0.1rem;
}

/* compact inline ▶ next to a section heading (Translation / Note / Mukundananda) */
.audio-btn.tr-play,
.audio-btn.note-play,
.audio-btn.mk-play,
.audio-btn.mkc-play {
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
  margin-left: 0.45rem;
  vertical-align: middle;
  opacity: 0.8;
}
.audio-btn.tr-play:hover,
.audio-btn.note-play:hover,
.audio-btn.mk-play:hover,
.audio-btn.mkc-play:hover { opacity: 1; }

/* ---------- Character refs ---------- */
.char-ref {
  border-bottom: 1px dotted var(--accent);
  cursor: help;
  transition: color 0.15s;
}
.char-ref:hover { color: var(--accent); }

/* Sanskrit term refs — dotted blue/link colour to distinguish from character (gold) */
.term-ref {
  border-bottom: 1px dotted var(--link);
  cursor: help;
  transition: color 0.15s;
}
.term-ref:hover { color: var(--link); }

/* observation icon */
.obs-icon {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.78em;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  cursor: help;
  font-family: var(--sans);
  border: 1px solid var(--accent-rim);
}
.obs-icon:hover { background: var(--accent); color: var(--bg); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed;
  z-index: 100;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  max-width: 320px;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.tooltip[hidden] { display: none; }
.tooltip .tt-name { font-weight: 600; color: var(--accent); }
.tooltip .tt-role {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}
.tooltip .tt-hint {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Modal ---------- */
.modal {
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.7rem;
  max-width: 560px;
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.modal h3 { margin-top: 0; color: var(--accent); }
.modal .role { color: var(--text-muted); font-family: var(--sans); font-size: 0.85rem; }
.modal .long { line-height: 1.6; margin-top: 0.7rem; }
.modal button.close {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  margin-top: 1rem;
}
.modal button.close:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */
.page-foot {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.82rem;
}

/* Flowed word-list (used for languages where words come as a single delimited string) */
.words-flow {
  font-family: var(--sk-font), var(--serif);
  font-size: 0.95rem;
  line-height: 1.7;
  background: var(--note-bg);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-rim);
}

/* Stub pages for source texts under construction (rigveda, samaveda, bhagavata, etc.) */
.stub-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.4rem 1.2rem 4rem;
}
.stub-hero {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 70%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.4rem;
}
.stub-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--accent);
  font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem;
}
.stub-hero .dev {
  font-family: var(--sk-font);
  font-weight: 400;
  font-size: 2rem;
}
.stub-hero .iast {
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--text-muted);
}
.stub-hero .trad {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0.4rem 0 0;
}
.stub-body p { line-height: 1.7; }
.stub-body ul { padding-left: 1.2rem; line-height: 1.7; }
.stub-body li { margin-bottom: 0.4rem; }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1000px) {
  :root { --sidebar-w: 200px; }
  .brand .subtitle { display: none; }
  .topnav select { max-width: 200px; font-size: 0.78rem; }
  .chapter-header h2 { font-size: 1.4rem; }
  .sanskrit-text { font-size: 1.2rem; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 720px) {
  html { font-size: 15px; }
  .layout {
    grid-template-columns: 1fr;
    padding: 0.6rem;
    gap: 0.6rem;
  }
  .topbar { padding: 0.45rem 0.7rem; gap: 0.4rem; }
  .brand h1 { font-size: 1.1rem; }
  .topnav { gap: 0.3rem; }
  .topnav select { max-width: 140px; font-size: 0.78rem; padding: 0.28rem 0.4rem; }
  .topnav button { padding: 0.25rem 0.5rem; font-size: 0.85rem; }

  /* Mobile sidebar = off-canvas drawer */
  .sidebar-toggle { display: inline-block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 320px;
    z-index: 60;
    background: var(--bg-elev);
    padding: calc(var(--topbar-h) + 0.5rem) 0.8rem 1rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    max-height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }

  /* Controls section: tighter on mobile */
  .controls { gap: 0.5rem; padding: 0.5rem; }
  .controls fieldset { padding: 0.25rem 0.5rem; flex: 1 1 100%; }
  .controls label { margin-right: 0.5rem; font-size: 0.82rem; }

  /* Verses: smaller fonts but still readable */
  .verse { padding: 0.7rem 0 1rem; }
  .verse-head h3 { font-size: 1.1rem; }
  .verse-head .audio-btn { margin-left: 0; }
  .sanskrit-text { font-size: 1.15rem; padding: 0.5rem 0.6rem; line-height: 1.75; }
  .iast-text { font-size: 0.95rem; padding: 0.45rem 0.6rem; }
  .paraphrase-text { font-size: 1rem; padding: 0.45rem 0.6rem; }
  .note-text { padding: 0.5rem 0.6rem; }
  .words-table { font-size: 0.88rem; }
  .words-table td { padding: 0.25rem 0.45rem; }

  .chapter-header h2 { font-size: 1.3rem; }
  .chapter-header .intro { font-size: 0.92rem; }
}

/* ---------- Responsive: very small ---------- */
@media (max-width: 400px) {
  .brand h1 { font-size: 1rem; }
  .topnav button { font-size: 0.8rem; }
  .topnav select { font-size: 0.74rem; max-width: 110px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .sidebar, .controls-bar, .audio-btn, .obs-icon { display: none !important; }
  .layout { grid-template-columns: 1fr; padding: 0; }
  .verse { page-break-inside: avoid; }
}

/* Notice shown on the English-only pages when the reader has chosen हिंदी or
   मराठी. Those pages are original English prose and carry no switcher, so
   without this the language choice looks broken rather than simply unmet. */
.lang-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0.55rem 0.8rem;
  background: var(--note-bg);
  border-left: 3px solid var(--accent-rim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.lang-notice a { color: var(--accent); white-space: nowrap; }
.lang-notice-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.lang-notice-x:hover { color: var(--accent); }