/* ============================================
   Guhya v5 styles (formerly Sādhanā v5 — renamed Pass 2)
   ============================================ */

/* ---- Breath: mode tabs ---- */
.breath-mode-tabs {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 auto var(--space-6);
  padding: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: max-content;
  max-width: 100%;
}
.breath-mode-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.5em 1.25em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.breath-mode-tab[aria-pressed="true"] {
  background: var(--color-gold);
  color: var(--color-text-inverse);
}
.breath-mode-tab:hover { color: var(--color-text); }

.breath-guided-intro {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

/* ---- Guided card ---- */
.guided-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}
.guided-card-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.guided-card-syllable {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--color-text);
  margin: var(--space-2) 0;
  line-height: 1;
}
.guided-card-title {
  font-family: var(--font-display, var(--font-serif));
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-primary, var(--color-text));
  margin: 0;
}
.guided-card-iast {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.guided-card-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.guided-card-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  gap: 0.5em;
  justify-content: center;
}

/* ---- Breath circle: instruction ABOVE, Devanāgarī glyph centered, counter BELOW ---- */
.breath-circle { position: relative; }

/* Instruction (phase label) lives ABOVE the circle, not inside it.
   Visually pulled out via negative top placement.
   Pulled up out of normal flow to sit above the circle visually. */
.breath-circle .breath-instruction {
  position: absolute;
  left: 50%;
  top: -2.6em;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Devanāgarī syllable in the geometric center — owns the circle visually. */
.breath-syllable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--color-gold-deep, var(--color-text));
  text-shadow: 0 0 24px rgba(255, 230, 180, 0.35);
  pointer-events: none;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: opacity 200ms ease;
  z-index: 2;
}

/* Counter sits BELOW the circle. */
.breath-circle .breath-counter {
  position: absolute;
  left: 50%;
  bottom: -2em;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Countdown stays in top-right corner of the circle. */
.breath-circle .breath-countdown {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.04);
  padding: 0.2em 0.6em;
  border-radius: 2px;
}

/* Give the circle vertical breathing room so the instruction (above) and
   counter (below) have space to render outside its bounds. */
#breath-practice .breath-circle {
  margin-top: 4em;
  margin-bottom: 4em;
}

/* Teaching/disclaimer card under guided header */
.guided-teaching-card {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-gold);
  border-radius: 8px;
  text-align: left;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.guided-teaching {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
  font-size: var(--text-sm);
}
.guided-disclaimer {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ruby-deep, var(--color-text-muted));
  line-height: 1.5;
}

/* ============================================
   Sanskrit word lookup popover
   ============================================ */
.sanskrit { cursor: help; }
.sanskrit-popover {
  position: absolute;
  z-index: 9999;
  max-width: 340px;
  min-width: 240px;
  background: var(--color-surface, #fdfaf2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(20, 12, 4, 0.22), 0 4px 16px rgba(0,0,0,0.06);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-serif);
  animation: sanskrit-pop-fade 160ms ease-out;
}
@keyframes sanskrit-pop-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sanskrit-popover-arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: inherit;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: translateX(-50%) rotate(45deg);
}
.sanskrit-popover.above .sanskrit-popover-arrow { bottom: -8px; }
.sanskrit-popover.below .sanskrit-popover-arrow {
  top: -8px;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: translateX(-50%) rotate(45deg);
}
.sanskrit-popover-close {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.sanskrit-popover-close:hover { color: var(--color-text); background: var(--color-surface-2); }
.sanskrit-popover-word {
  font-size: 1.6rem;
  color: var(--color-gold-deep);
  margin-bottom: 4px;
  padding-right: 24px;
  line-height: 1.2;
}
.sanskrit-popover-iast {
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 6px;
  font-size: 1.05rem;
}
.sanskrit-popover-gram {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: 6px;
}
.sanskrit-popover-gloss {
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.sanskrit-part {
  padding: 8px 0;
  border-top: 1px dashed var(--color-border);
}
.sanskrit-part:first-child { border-top: 0; padding-top: 0; }
.sanskrit-part-head {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--color-primary);
}
.sanskrit-part-head .sanskrit { font-size: 18px; }
.sanskrit-part-iast {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 13px;
}
.sanskrit-part-gloss {
  color: var(--color-text);
  font-size: 13.5px;
  line-height: 1.45;
}
.sanskrit-popover-source {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-top: 1px dashed var(--color-border);
  padding-top: 8px;
}

/* ============================================
   Altar — Verse of the Day card
   ============================================ */
.vod-slot { margin: var(--space-6) auto; max-width: 720px; }
.vod-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 1px 0 rgba(160,122,44,0.15), 0 8px 32px rgba(20,12,4,0.04);
  position: relative;
}
.vod-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(160,122,44,0.2);
  border-radius: 8px;
  pointer-events: none;
}
.vod-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
  text-align: center;
}
.vod-ref {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3);
}
.vod-deva {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-align: center;
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-line;
  margin-bottom: var(--space-3);
}
.vod-iast {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.vod-meaning {
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.7;
  text-align: center;
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}
.vod-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Mālā streak card
   ============================================ */
.streak-slot { margin: var(--space-5) auto var(--space-3); max-width: 720px; }
.streak-card {
  text-align: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(160,122,44,0.15);
}
.streak-card-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
}
.streak-line {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}
.streak-num {
  font-family: var(--font-display, var(--font-serif));
  font-style: italic;
  font-size: 1.25em;
  color: var(--color-gold-deep);
  margin: 0 0.1em;
}
.streak-sep { color: var(--color-text-faint); margin: 0 0.4em; }
.streak-foot {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 4px;
}

/* ============================================
   Share verse button
   ============================================ */
.btn-share-verse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: 3px;
  cursor: pointer;
  margin-top: var(--space-3);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-share-verse:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-gold);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .sanskrit-popover { max-width: calc(100vw - 24px); min-width: 200px; }
  .vod-card { padding: var(--space-4); }
  .breath-circle .breath-countdown { top: 10px; right: 14px; }
}

/* =====================================================================
   COSMOLOGY — Yugas, Kali Yuga, Brahmāṇḍa
   ===================================================================== */

.cosm-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: var(--space-8) 0 var(--space-3);
}
.cosm-note {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 72ch;
  margin-bottom: var(--space-4);
}
.cosm-source-note {
  font-size: 0.78rem;
  color: var(--color-accent, #b5883a);
  font-style: italic;
  margin-bottom: var(--space-3);
}
.cosm-verse-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.cosm-verse {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5);
}
.cosm-verse-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.cosm-verse-ref {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-3);
}
.cosm-verse-deva { font-size: 1.1rem; line-height: 1.75; margin-bottom: var(--space-2); }
.cosm-verse-iast { font-size: 0.9rem; font-style: italic; color: var(--color-text-muted); margin-bottom: var(--space-2); line-height: 1.65; }
.cosm-verse-trans { font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--space-2); }
.cosm-verse-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Cosmic time table */
/* Centred intro paragraph — below hero images */
.cosm-intro {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 60ch;
  margin: var(--space-4) auto var(--space-6);
  text-align: center;
}

/* Tighter top margin when image follows immediately after header */
.cosm-hero-tight {
  margin-top: var(--space-3);
}

/* Brahmāṇḍa hero image */
.cosm-hero-fig {
  margin: var(--space-4) auto var(--space-3);
  text-align: center;
  max-width: 480px;
}
.cosm-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 48px rgba(0,0,0,0.55);
  display: block;
}
.cosm-hero-caption {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  font-family: var(--font-sanskrit, serif);
}
.cosm-brahmananda-note {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-accent, #b5883a);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-raised, rgba(181,136,58,0.06));
  font-size: 0.85rem;
  line-height: 1.6;
}

.cosm-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
  font-size: 0.88rem;
}
.cosm-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.cosm-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.5;
}
.cosm-table-skt { font-size: 1rem; }
.cosm-table-note { font-size: 0.82rem; color: var(--color-text-muted); }

/* Dharma bull */
.cosm-bull-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
.cosm-bull-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  background: var(--color-surface);
  text-align: center;
}
.cosm-bull-yuga {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cosm-bull-legs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-3);
  font-size: 1.6rem;
}
.cosm-bull-leg { color: var(--color-border); }
.cosm-bull-leg.is-active { color: var(--color-accent, #b5883a); }
.cosm-bull-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: left;
  line-height: 1.6;
}

/* Age cards */
.cosm-age-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--color-surface);
}
.cosm-age-satya   { border-left: 4px solid #e8d5a3; }
.cosm-age-treta   { border-left: 4px solid #c0706a; }
.cosm-age-dvapara { border-left: 4px solid #c8a84b; }
.cosm-age-kali    { border-left: 4px solid #4a4a6a; }
.cosm-age-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.cosm-age-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent, #b5883a);
  color: var(--color-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.cosm-age-names { flex: 1 1 200px; }
.cosm-age-deva { font-size: 1.2rem; margin-bottom: 2px; }
.cosm-age-iast { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.cosm-age-aka  { font-size: 0.8rem; font-style: italic; color: var(--color-text-muted); margin-top: 2px; }
.cosm-age-stats { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.cosm-stat { font-size: 0.82rem; color: var(--color-text-muted); }
.cosm-stat-label { font-weight: 600; color: var(--color-text); }
.cosm-age-char {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
  margin-bottom: var(--space-3);
}
.cosm-age-sadhana {
  font-size: 0.88rem;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent, #b5883a);
  background: var(--color-surface-raised, rgba(181,136,58,0.05));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.cosm-sadhana-label { font-weight: 700; color: var(--color-accent, #b5883a); }

/* Kali Yuga — paradox */
.cosm-paradox {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-raised, rgba(74,74,106,0.08));
  margin-bottom: var(--space-5);
  max-width: 72ch;
}
.cosm-paradox-body { font-size: 0.95rem; line-height: 1.8; color: var(--color-text); margin: 0; }

/* Signs */
.cosm-signs-cat {
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.cosm-signs-cat-title {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #b5883a);
  border-bottom: 1px solid var(--color-border);
}
.cosm-signs-list {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);
  background: var(--color-surface);
}
.cosm-signs-list li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}
.cosm-signs-list li:last-child { border-bottom: none; }


/* Practice list */
.cosm-practice-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.cosm-practice-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}
.cosm-practice-heading {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-2);
}
.cosm-practice-body { font-size: 0.9rem; line-height: 1.75; color: var(--color-text); margin: 0; }

/* Brahmāṇḍa egg layers */
.cosm-egg-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-6) 0;
}
.cosm-egg {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 640px;
}
.cosm-egg-shell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 2px;
  background: var(--color-surface);
  transition: background 0.15s;
}
.cosm-egg-shell:hover { background: var(--color-surface-hover, rgba(181,136,58,0.06)); }
.cosm-shell-9 { border-left: 4px solid var(--color-accent, #b5883a); background: var(--color-surface-raised, rgba(181,136,58,0.08)); }
.cosm-shell-8 { border-left: 3px solid rgba(181,136,58,0.6); }
.cosm-shell-7 { border-left: 3px solid rgba(181,136,58,0.5); }
.cosm-shell-6 { border-left: 3px solid rgba(181,136,58,0.4); }
.cosm-shell-5 { border-left: 3px solid rgba(181,136,58,0.3); }
.cosm-shell-1, .cosm-shell-2, .cosm-shell-3, .cosm-shell-4 { border-left: 2px solid var(--color-border); }
.cosm-shell-deva { font-size: 1.1rem; flex-shrink: 0; min-width: 80px; }
.cosm-shell-name { font-size: 0.85rem; font-weight: 600; flex-shrink: 0; min-width: 90px; color: var(--color-text); }
.cosm-shell-desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.4; }

@media (max-width: 600px) {
  .cosm-bull-row { grid-template-columns: repeat(2, 1fr); }
  .cosm-age-head { flex-direction: column; }
  .cosm-shell-deva { min-width: 60px; }
  .cosm-shell-name { min-width: 70px; }
}

/* =====================================================================
   NAVA-DVĀRA — Nine Gates
   ===================================================================== */

/* Hero image */
.nd-hero-fig {
  margin: var(--space-6) auto var(--space-4);
  text-align: center;
  max-width: 560px;
}
.nd-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  display: block;
}
.nd-hero-caption {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  font-family: var(--font-sanskrit, serif);
}

.nd-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: var(--space-8) 0 var(--space-3);
}
.nd-verse-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.nd-verse {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5);
}
.nd-verse-ref {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-3);
}
.nd-verse-deva {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: var(--space-2);
}
.nd-verse-iast {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  line-height: 1.65;
}
.nd-verse-trans {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-2);
}
.nd-verse-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Entry panels */
.nd-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.nd-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent, #b5883a);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.15s;
}
.nd-panel:hover {
  background: var(--color-surface-hover, rgba(181,136,58,0.06));
  transform: translateY(-2px);
}
.nd-panel-deva {
  font-size: 1.3rem;
  color: var(--color-text);
}
.nd-panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.nd-panel-sub {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* Tanmātra table */
.nd-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-8);
  font-size: 0.88rem;
}
.nd-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nd-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.5;
}
.nd-table-skt { font-size: 1rem; color: var(--color-text); }

/* Tenth gate */
.nd-tenth {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
}
.nd-tenth-head {
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}
.nd-tenth-deva { font-size: 1.1rem; }
.nd-tenth-iast { color: var(--color-accent, #b5883a); font-style: italic; }
.nd-tenth-note {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Gate grid */
.nd-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.nd-gate-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.nd-gate-card:hover {
  background: var(--color-surface-hover, rgba(181,136,58,0.06));
  border-color: var(--color-accent, #b5883a);
}
.nd-gate-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent, #b5883a);
  color: var(--color-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.nd-gate-body { flex: 1; min-width: 0; }
.nd-gate-deva { font-size: 1.05rem; color: var(--color-text); margin-bottom: 2px; }
.nd-gate-iast { font-size: 0.82rem; font-style: italic; color: var(--color-text-muted); }
.nd-gate-eng  { font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin: var(--space-1) 0; }
.nd-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--color-surface-raised, rgba(181,136,58,0.1));
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-1);
}
.nd-gate-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Gate detail */
.nd-gate-detail { margin-top: var(--space-5); }
.nd-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-5);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.nd-meta-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nd-meta-value {
  font-size: 0.92rem;
  color: var(--color-text);
}
.nd-gate-note {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 68ch;
  padding: var(--space-4);
  border-left: 3px solid var(--color-accent, #b5883a);
  background: var(--color-surface-raised, rgba(181,136,58,0.04));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.nd-gate-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-8);
}

/* Philosophy grid */
.nd-phil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.nd-phil-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.nd-phil-card:hover {
  background: var(--color-surface-hover, rgba(181,136,58,0.06));
  border-color: var(--color-accent, #b5883a);
  transform: translateY(-2px);
}
.nd-phil-deva  { font-size: 1.3rem; color: var(--color-text); }
.nd-phil-iast  { font-size: 0.8rem; font-style: italic; color: var(--color-accent, #b5883a); }
.nd-phil-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.nd-phil-preview {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Layer detail */
.nd-layer-body {
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 68ch;
  margin: var(--space-5) 0 var(--space-6);
}

@media (max-width: 600px) {
  .nd-panel-row { grid-template-columns: 1fr; }
  .nd-gate-grid { grid-template-columns: 1fr; }
  .nd-phil-grid { grid-template-columns: 1fr; }
  .nd-meta-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   YOGA VASISHTHA
   ===================================================================== */

.yv-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}

.yv-verse-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.yv-verse-ref {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent, #b5883a);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.yv-verse-label {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
}
.yv-verse-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Story grid */
.yv-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.yv-story-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5);
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.yv-story-card:hover {
  background: var(--color-surface-hover, rgba(181,136,58,0.06));
  border-color: var(--color-accent, #b5883a);
  transform: translateY(-2px);
}
.yv-story-deva {
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.yv-story-iast {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}
.yv-story-prakarana {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-1);
}
.yv-story-tagline {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.yv-story-heart {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.yv-story-heart-label {
  font-weight: 600;
  color: var(--color-text);
}

/* Story detail */
.yv-narrative {
  max-width: 68ch;
  margin: var(--space-6) 0;
}
.yv-narrative p {
  margin-bottom: var(--space-4);
  line-height: 1.75;
  color: var(--color-text);
}
.yv-heart-callout {
  border-left: 4px solid var(--color-accent, #b5883a);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  background: var(--color-surface-raised, rgba(181,136,58,0.05));
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  max-width: 60ch;
}
.yv-heart-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent, #b5883a);
  margin-bottom: var(--space-2);
}
.yv-heart-text {
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}
.yv-kv-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-6) 0 var(--space-3);
}

@media (max-width: 600px) {
  .yv-story-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   LEARN — Sanskrit curriculum
   ===================================================================== */

/* Preface block */
.learn-preface-wrap {
  margin: var(--space-8) 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent, #b5883a);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface-raised, rgba(181,136,58,0.05));
}
.learn-preface-head {
  margin-bottom: var(--space-5);
}
.learn-preface-deva {
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.learn-preface-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.learn-preface-sub {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
}
.learn-preface-lessons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.learn-preface-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.learn-preface-btn:hover {
  background: var(--color-surface-hover, rgba(181,136,58,0.08));
  border-color: var(--color-accent, #b5883a);
}
.learn-preface-btn-deva {
  font-size: 1.1rem;
  color: var(--color-text);
}
.learn-preface-btn-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.learn-preface-btn-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.learn-tier {
  margin: var(--space-12) 0;
}
.learn-tier-head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-surface-offset);
}
.learn-tier-title {
  font-family: var(--font-display, serif);
  font-size: 1.6rem;
  color: var(--color-gold-deep);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.02em;
}
.learn-tier-blurb {
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 60ch;
  margin: 0;
}

.learn-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.learn-unit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-offset);
  border-radius: var(--radius-md, 0.5rem);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  font: inherit;
  color: inherit;
}
.learn-unit-card:hover {
  border-color: var(--color-gold);
  background: var(--color-surface-2);
  transform: translateY(-1px);
}
.learn-unit-num {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-offset);
  color: var(--color-gold-deep);
  font-weight: 600;
  font-family: var(--font-display, serif);
}
.learn-unit-body { flex: 1 1 auto; min-width: 0; }
.learn-unit-deva {
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.learn-unit-iast {
  font-family: var(--font-display, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gold-deep);
  letter-spacing: 0.01em;
}
.learn-unit-sub {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}
.learn-unit-blurb {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}
.learn-unit-progress {
  font-size: 0.82rem;
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Lesson list */
.learn-lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.learn-lesson-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-offset);
  border-radius: var(--radius-md, 0.5rem);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease;
  font: inherit;
  color: inherit;
  width: 100%;
}
.learn-lesson-card:hover {
  border-color: var(--color-gold);
  transform: translateX(3px);
}
.learn-lesson-num {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-offset);
  color: var(--color-gold-deep);
  font-weight: 600;
  flex: 0 0 auto;
}
.learn-lesson-body { flex: 1 1 auto; min-width: 0; }
.learn-lesson-deva { font-size: 1.2rem; color: var(--color-text); }
.learn-lesson-iast {
  font-family: var(--font-display, serif);
  font-size: 1rem;
  color: var(--color-gold-deep);
  font-weight: 600;
}
.learn-lesson-sub { color: var(--color-text-muted); font-size: 0.9rem; font-style: italic; }
.learn-progress-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-surface-offset);
  flex: 0 0 auto;
  background: transparent;
}
.learn-progress-dot.is-viewed { background: var(--color-gold-glow); border-color: var(--color-gold); }
.learn-progress-dot.is-correct { background: var(--color-gold-bright); border-color: var(--color-gold-deep); }

/* Lesson sections */
#learn-mount {
  padding: 0 var(--space-4) var(--space-10);
}
.learn-section {
  margin: var(--space-6) auto;
  max-width: 70ch;
}
.learn-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* ── Responsive lesson container ── */
@media (min-width: 600px) {
  #learn-mount {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-10);
  }
  .gita-chapter-header {
    padding: 0 var(--space-4);
  }
  .learn-section {
    max-width: 72ch;
  }
  .learn-intro p {
    text-align: center;
  }
}

@media (min-width: 900px) {
  #learn-mount {
    max-width: 960px;
    padding: 0 var(--space-10) var(--space-10);
  }
  .learn-section {
    max-width: 74ch;
  }
}
.learn-note {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--color-text);
}
.learn-list ul {
  padding-left: var(--space-5);
  line-height: 1.7;
  color: var(--color-text);
}
.learn-list li { margin-bottom: var(--space-2); }

/* Tables */
.learn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.learn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--color-surface);
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
}
.learn-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  color: var(--color-gold-deep);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold);
}
.learn-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-surface-offset);
  vertical-align: top;
  color: var(--color-text);
}
.learn-table td.sanskrit { font-size: 1.1rem; }
.learn-table tbody tr:last-child td { border-bottom: none; }

/* Parse blocks */
.learn-parse {
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm, 0.25rem);
  border: 1px solid var(--color-surface-offset);
}
.learn-parse-gloss {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.learn-parse-list { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-parse-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(120px, 1.2fr) 2.5fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-surface-offset);
}
.learn-parse-row:last-child { border-bottom: none; padding-bottom: 0; }
.learn-parse-sa { font-size: 1.15rem; color: var(--color-text); }
.learn-parse-iast {
  font-family: var(--font-display, serif);
  font-style: italic;
  color: var(--color-gold-deep);
  font-size: 0.98rem;
}
.learn-parse-note { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.55; }

/* Verses inside lessons */
.learn-verse {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-surface-offset);
  text-align: center;
}
.learn-verse-deva {
  font-size: 1.45rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.learn-verse-iast {
  font-family: var(--font-display, serif);
  font-style: italic;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-3);
}
.learn-verse-trans {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.97rem;
  border-top: 1px solid var(--color-surface-offset);
  padding-top: var(--space-3);
  max-width: 55ch;
  margin: var(--space-3) auto 0;
}

/* Reflect block */
.learn-reflect {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-sm, 0.25rem);
  border-left: 3px solid var(--color-gold-bright);
}
.learn-reflect-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.learn-reflect p {
  font-style: italic;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

/* Check / MCQ */
.learn-check {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-gold);
  margin-top: var(--space-8);
}
.learn-check-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.learn-check-prompt {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.learn-mcq { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-mcq-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-surface-offset);
  border-radius: var(--radius-sm, 0.25rem);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  font: inherit;
  color: var(--color-text);
  width: 100%;
  flex-wrap: wrap;
}
.learn-mcq-option:hover:not(.is-revealed) {
  border-color: var(--color-gold);
  background: var(--color-surface-2);
}
.learn-mcq-letter {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-offset);
  color: var(--color-gold-deep);
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-display, serif);
}
.learn-mcq-label { flex: 1 1 auto; line-height: 1.55; min-width: 0; }
.learn-mcq-option.is-revealed { cursor: default; }
.learn-mcq-option.is-correct {
  border-color: #2e7d4f;
  background: #e8f5e9;
}
.learn-mcq-option.is-correct .learn-mcq-letter {
  background: #2e7d4f;
  color: #fff;
}
.learn-mcq-option.is-incorrect {
  border-color: #c0392b;
  background: #fbe9e7;
}
.learn-mcq-option.is-incorrect .learn-mcq-letter {
  background: #c0392b;
  color: #fff;
}
.learn-mcq-explain {
  flex-basis: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-surface-offset);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-style: italic;
}
.learn-mcq-option.is-correct .learn-mcq-explain { color: #1b5e20; }
.learn-mcq-option.is-incorrect .learn-mcq-explain { color: #7f1d1d; }

/* Mobile tightening */
@media (max-width: 640px) {
  .learn-unit-grid { grid-template-columns: 1fr; }
  .learn-parse-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .learn-parse-row .learn-parse-sa { font-size: 1.25rem; }
  .learn-table { font-size: 0.88rem; }
  .learn-table th, .learn-table td { padding: var(--space-2) var(--space-3); }
  .learn-verse-deva { font-size: 1.2rem; }
}

/* =====================================================================
   SAṀSKĀRAS — life-cycle rites
   ===================================================================== */

.samskara-note {
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-left: 3px solid var(--color-text-faint);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-style: italic;
  border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
}

.samskara-phase, .samskara-kashi {
  margin: var(--space-12) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-surface-offset);
}
.samskara-phase-head {
  margin-bottom: var(--space-6);
}
.samskara-phase-deva {
  font-size: 1.6rem;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-1);
}
.samskara-phase-iast {
  font-family: var(--font-display, serif);
  font-size: 1.4rem;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.samskara-phase-blurb {
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 60ch;
  line-height: 1.6;
  margin: 0;
}

.samskara-rite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.samskara-rite-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-offset);
  border-radius: var(--radius-md, 0.5rem);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  font: inherit;
  color: inherit;
}
.samskara-rite-card:hover {
  border-color: var(--color-gold);
  background: var(--color-surface-2);
  transform: translateY(-1px);
}
.samskara-rite-num {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold-glow);
  color: var(--color-gold-deep);
  font-weight: 700;
  font-family: var(--font-display, serif);
  font-size: 0.95rem;
}
.samskara-rite-body { flex: 1 1 auto; min-width: 0; }
.samskara-rite-deva {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.samskara-rite-iast {
  font-family: var(--font-display, serif);
  font-size: 1.05rem;
  color: var(--color-gold-deep);
  font-weight: 600;
}
.samskara-rite-meaning {
  color: var(--color-text);
  font-size: 0.95rem;
  margin-top: var(--space-2);
  line-height: 1.5;
}
.samskara-rite-when {
  color: var(--color-text-faint);
  font-size: 0.82rem;
  margin-top: var(--space-2);
  font-style: italic;
}

/* Detail */
.samskara-detail { max-width: 70ch; margin: var(--space-6) 0; }
.samskara-detail-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--color-surface-offset);
  align-items: baseline;
}
.samskara-detail-row:last-child { border-bottom: none; }
.samskara-detail-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  font-weight: 600;
}
.samskara-detail-body {
  color: var(--color-text);
  line-height: 1.65;
}
.samskara-detail-description .samskara-detail-body { font-size: 1rem; }

.samskara-mantra {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-gold);
  text-align: center;
}
.samskara-mantra-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.samskara-mantra-iast {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.samskara-mantra-trans {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  border-top: 1px solid var(--color-surface-offset);
  padding-top: var(--space-3);
  max-width: 55ch;
  margin: 0 auto;
}

.samskara-kashi-callout {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
  border-left: 3px solid var(--color-gold-bright);
  border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
}
.samskara-kashi-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.samskara-kashi-callout p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.65;
}

.samskara-kashi-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.samskara-kashi-card {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-surface-offset);
}
.samskara-kashi-heading {
  font-family: var(--font-display, serif);
  font-size: 1.05rem;
  color: var(--color-gold-deep);
  margin: 0 0 var(--space-2);
}
.samskara-kashi-body {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 640px) {
  .samskara-rite-grid { grid-template-columns: 1fr; }
  .samskara-kashi-list { grid-template-columns: 1fr; }
  .samskara-detail-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}