/* Jinvani — the inside of the mandir: white Makrana marble, polished brass and the carved toran.
   Scripture sits in the sanctum under an arch; brass draws the structure; sindoor is kept for
   the sacred and for the one main action on a screen. Night is black Kota stone lit by the diya.
   All sizes use rem, so the "text size" setting scales the whole app. */

/* Noto Serif Devanagari: stands in for any Devanagari glyph Vesper Libre lacks. */
@font-face { font-family: 'Noto Serif Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-devanagari-devanagari-400-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Serif Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/noto-serif-devanagari-devanagari-600-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Serif Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-devanagari-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/noto-serif-devanagari-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Vesper Libre: carved, like an inscription in the temple; for headings, the tithi and scripture. */
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/vesper-libre-devanagari-500-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/vesper-libre-devanagari-700-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/vesper-libre-devanagari-900-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/vesper-libre-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/vesper-libre-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Vesper Libre'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/vesper-libre-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Hind: the plain voice of the interface, meanings and instructions. */
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/hind-devanagari-400-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/hind-devanagari-600-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/hind-devanagari-700-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/hind-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/hind-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/hind-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Day: white marble ---------- */

:root {
  --bg: #f4f2ed;
  --shrine: #faf9f6;
  --niche: #fbfaf7;
  --field: #fbfaf7;
  --plinth: #ebe7df;
  --plinth-edge: #dcd6ca;
  --text: #1f1c19;
  --verse: #1a1715;
  --muted: #5a544d;
  --hair: rgba(31, 28, 25, 0.13);
  --brass: #a8822c;
  --brass-line: rgba(168, 130, 44, 0.55);
  --brass-text: #7c5a14;
  --brass-hi: #f3dc98;
  --brass-mid: #d4ab52;
  --brass-lo: #7a5814;
  --brass-wash: rgba(212, 171, 82, 0.14);
  --brass-wash-strong: rgba(232, 196, 112, 0.42);
  --sindoor: #a3301a;
  --sindoor-hover: #8a2614;
  --on-sindoor: #fff7ee;
  --sindoor-fill: #a3301a;
  --sindoor-fill-hover: #8a2614;
  --glow: rgba(214, 170, 80, 0.2);
  --error: #a3301a;
  --lift: 0 3px 8px rgba(0, 0, 0, 0.16);
  --veins-opacity: 0.22;
  --scene-paper: #f7f4ee;
  --scene-ground: #eadbbd;
  --tap: max(2.5rem, 48px);
  --fs-xs: 0.68rem;
  --fs-sm: 0.76rem;
  --fs-md: 0.86rem;
  --fs-body: 0.95rem;
  --fs-lg: 1.06rem;
  --fs-xl: 1.42rem;
  --fs-verse: 1.13rem;
  --font-ui: 'Hind', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', Roboto, sans-serif;
  --font-head: 'Vesper Libre', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', serif;
  --font-verse: 'Vesper Libre', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', serif;
  /* The icon pack's saffron accent and ratnatraya green (js/icons-swadhyay.js). */
  --icon-accent: #e7a72b;
  --icon-green: #3d8b68;
  --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.008' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.48 0 0 0 0 0.45 1.6 0 0 0 -0.62'/%3E%3C/filter%3E%3Cfilter id='v' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.018' numOctaves='3' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3Cg fill='none' stroke='%23857e74' filter='url(%23v)'%3E%3Cpath d='M-40 170C110 220 180 120 330 190S560 330 650 290' stroke-width='1.2' opacity='.55'/%3E%3Cpath d='M-30 600C130 540 250 640 390 570S570 490 640 540' stroke-width='.9' opacity='.45'/%3E%3Cpath d='M180 -10C220 140 140 270 240 380S360 600 300 730' stroke-width='.7' opacity='.35'/%3E%3Cpath d='M460 680C500 760 430 850 500 960' stroke-width='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- Night: black Kota stone, lit by the diya ---------- */

:root[data-theme="night"] {
  --bg: #161514;
  --shrine: #1e1c1a;
  --niche: #26231f;
  --field: #1f1d1b;
  --plinth: #1e1c1a;
  --plinth-edge: #0c0b0a;
  --text: #efe9dd;
  --verse: #f4eee3;
  --muted: #b9b0a2;
  --hair: rgba(239, 233, 221, 0.13);
  --brass: #c9a24f;
  --brass-line: rgba(201, 162, 79, 0.55);
  --brass-text: #dcb965;
  --brass-hi: #f6dd97;
  --brass-mid: #c99e47;
  --brass-lo: #7d5f20;
  --brass-wash: rgba(214, 170, 80, 0.11);
  --brass-wash-strong: rgba(214, 170, 80, 0.26);
  --sindoor: #e0674a;
  --sindoor-hover: #ea7d61;
  --on-sindoor: #fff7ee;
  --sindoor-fill: #b5462c;
  --sindoor-fill-hover: #c4553a;
  --glow: rgba(240, 175, 85, 0.13);
  --error: #f19a84;
  --lift: 0 3px 8px rgba(0, 0, 0, 0.4);
  --veins-opacity: 0.1;
  --scene-paper: #2a2622;
  --scene-ground: #3a3129;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--brass-line) transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--sindoor);
}
/* The marble's veins, behind every screen. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--veins) center / cover no-repeat;
  opacity: var(--veins-opacity);
}
:root[data-theme="night"] body::before { filter: invert(1); }
::selection { background: var(--brass-wash-strong); color: var(--text); }

#app {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
  min-height: 100vh;
}
main { display: block; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--fs-xl); margin: 1.3rem 0 0.8rem; }
h2 { font-size: var(--fs-lg); margin: 1.8rem 0 0.7rem; }
h3 { font-size: var(--fs-body); margin: 0 0 0.25rem; }
h1:focus { outline: none; }
p { margin: 0 0 1rem; }
a { color: var(--brass-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { width: 1.3em; height: 1.3em; flex: none; stroke-width: 1.8; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 4px; }

/* ---------- Ornaments (js/ornaments.js) ---------- */

.chhatra { display: block; width: 4.4rem; height: auto; aspect-ratio: 132 / 86; overflow: visible; }
.chhatra-staff { fill: var(--brass); }
.chhatra-tiers { fill: url(#brassV); stroke: var(--brass-lo); stroke-width: 1.2; stroke-linejoin: round; }
/* The Jain Prateek (js/ornaments.js) in sindoor; its cuts take the page colour, as on the app icon. */
.prateek { display: block; width: auto; overflow: visible; aspect-ratio: 108 / 156.5; }
.prateek-ink { stroke: var(--sindoor); }
.prateek-fill { fill: var(--sindoor); }
.prateek-cut { stroke: var(--bg); }
.prateek-hub { fill: var(--bg); }
/* An icon from the pack standing in a niche, for the home's ways in. */
.niche > .icon.niche-pack { width: 1.9rem; height: 1.9rem; bottom: 0.4rem; color: var(--text); }
.dhwaja-pole { stroke: var(--brass); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dhwaja-flag { fill: var(--sindoor); }
.dhwaja-top { fill: var(--brass); }
.arch-fill { fill: var(--shrine); }
.arch-line { fill: none; stroke: url(#brassV); stroke-width: 2.6; }
.arch-inner { fill: none; stroke: var(--brass); stroke-width: 0.9; opacity: 0.75; }
.kalash { fill: url(#brassV); stroke: var(--brass-lo); stroke-width: 0.8; }
.side-line { fill: none; stroke: url(#brassSide); stroke-width: 2.6; }
.side-inner { fill: none; stroke: var(--brass); stroke-width: 0.9; opacity: 0.75; }

/* A brass hairline with a lozenge at its centre. */
.rule { display: flex; align-items: center; gap: 0.6rem; margin: 1.4rem 0; }
.rule::before, .rule::after { content: ''; flex: 1; border-top: 1px solid var(--brass-line); }
.rule i { width: 0.42rem; height: 0.42rem; background: var(--brass); transform: rotate(45deg); }

/* The vedi's steps: what stands on them is the day, or the scripture in its shrine. */
.plinth { display: grid; justify-items: center; }
.plinth i { display: block; height: 0.34rem; border-top: 1px solid var(--brass); background: linear-gradient(var(--plinth), var(--plinth-edge)); }
.plinth i:nth-child(1) { width: 62%; }
.plinth i:nth-child(2) { width: 78%; }
.plinth i:nth-child(3) { width: 94%; }

/* An arched niche (a jharokha) for an emblem. */
.niche { position: relative; flex: none; display: block; width: 2.4rem; height: 2.9rem; overflow: hidden; background: var(--niche); border-radius: 1.2rem 1.2rem 0.25rem 0.25rem / 1.05rem 1.05rem 0.25rem 0.25rem; }
.niche::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--brass); pointer-events: none; }
.niche .cover { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; aspect-ratio: 1; transform: translateX(-50%); }
.niche .cover > rect:first-child { fill: var(--niche); stroke: none; }
/* At night the pictures are dimmed, as if lit by the diya, so no daylight panel glares on the black stone. */
:root[data-theme="night"] .arch-pic > .pic > svg, :root[data-theme="night"] .dg-drawing svg { filter: brightness(0.9); }
:root[data-theme="night"] .arch-pic > .pic > img, :root[data-theme="night"] .story-fig img { filter: brightness(0.72) sepia(0.14); }
:root[data-theme="night"] .niche .cover { filter: brightness(0.92); }
.niche > .icon { position: absolute; left: 50%; bottom: 0.45rem; width: 1.3rem; height: 1.3rem; transform: translateX(-50%); color: var(--brass-text); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.4rem 1.15rem;
  font: 600 var(--fs-md)/1.2 var(--font-ui);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--brass); background: var(--brass-wash); }
.btn:active { transform: scale(0.97); }
.btn .icon { color: var(--brass-text); }
.btn-primary { background: var(--sindoor-fill); border-color: var(--sindoor-fill); color: var(--on-sindoor); box-shadow: var(--lift); }
.btn-primary .icon { color: currentColor; }
.btn-primary:hover { background: var(--sindoor-fill-hover); border-color: var(--sindoor-fill-hover); }
.btn-wide { width: 100%; }
.btn-small { min-height: max(2.2rem, 44px); padding: 0.25rem 0.9rem; font-size: var(--fs-sm); }
.btn[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash-strong); box-shadow: inset 0 0 0 1px var(--brass); }
.btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 700 var(--fs-md)/1 var(--font-head); cursor: pointer; text-decoration: none; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--text); background: var(--brass-wash); }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 3.2rem;
  margin: 0 -1rem;
  padding: calc(0.2rem + env(safe-area-inset-top)) 0.4rem 0.2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
.back { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; min-height: var(--tap); padding: 0 0.7rem 0 0.5rem; border-radius: 999px; color: var(--text); font: 600 var(--fs-md)/1.2 var(--font-ui); text-decoration: none; }
.back:hover { background: var(--brass-wash); }
.back .icon { color: var(--brass-text); }
.back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; }

/* ---------- Bottom bar: a marble plinth with a brass edge ---------- */

#app.has-nav { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.tabbar, .reader-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  max-width: 42rem;
  margin: 0 auto;
  background: var(--plinth);
  border-top: 1px solid var(--brass);
  box-shadow: 0 -3px 0 var(--plinth-edge), 0 -10px 22px rgba(0, 0, 0, 0.07);
}
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom)); }
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  min-height: max(3rem, 52px);
  color: var(--muted);
  font: 600 min(var(--fs-xs), 4.2vw)/1.2 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
}
.tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tab .icon { width: min(1.35rem, 7vw); height: min(1.35rem, 7vw); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); }
.tab.is-active .icon { color: var(--brass-text); }
/* The active tab carries a brass lintel. */
.tab.is-active::before { content: ''; position: absolute; top: -0.32rem; left: 50%; width: 1.7rem; height: 0.2rem; margin-left: -0.85rem; border-radius: 0 0 3px 3px; background: linear-gradient(var(--brass-hi), var(--brass)); }

/* ---------- Welcome ---------- */

.welcome { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.9rem; min-height: 92vh; text-align: center; }
.welcome .prateek { height: 4.4rem; margin: 0 auto; }
.welcome-greet { margin: 0; font: 900 1.6rem/1.2 var(--font-head); }
.welcome-q { display: flex; flex-direction: column; margin: 0.4rem 0 0.4rem; font: 400 var(--fs-body)/1.5 var(--font-ui); color: var(--muted); }
.lang-btn { min-height: 4rem; font-size: 1.4rem; }
.welcome-note { display: flex; flex-direction: column; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Home ---------- */

/* The Jain Prateek crowns the home between the name and the language button, right over the greeting.
   With large text the row has no room left for it, so it steps down to a line of its own. */
.home-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.5rem; padding-top: calc(0.4rem + env(safe-area-inset-top)); container-type: inline-size; }
.home-head .brand { justify-self: start; }
.home-head .prateek { grid-column: 2; grid-row: 1; align-self: end; height: 2.35rem; }
.home-head .btn { grid-column: 3; grid-row: 1; justify-self: end; }
@container (max-width: 15rem) { .home-head .prateek { grid-column: 1 / -1; grid-row: 2; justify-self: center; } }
.brand { font: 700 1rem/1 var(--font-head); color: var(--brass-text); letter-spacing: 0.01em; }
.today { text-align: center; }
.greet { margin: 0.3rem 0 0; font: 900 1.25rem/1.15 var(--font-head); text-align: center; }
.tithi { margin: 1.4rem 0 0; font: 700 1.3rem/1.2 var(--font-head); color: var(--sindoor); }
.tithi-sub { margin: 0.2rem 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.tithi-sub b { color: var(--text); font-weight: 600; }

/* The next seven days as arched windows; a dhwaja stands on the arch of ashtami, chaturdashi and festivals. */
.week { list-style: none; display: flex; gap: 0.2rem; margin: 0.5rem -0.25rem 0; padding: 0.75rem 0.25rem 0.1rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.week::-webkit-scrollbar { display: none; }
.week li { position: relative; flex: 1 0 2.15rem; scroll-snap-align: start; }
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.2rem 0 0.25rem;
  font: 600 var(--fs-xs)/1.25 var(--font-ui);
  color: var(--muted);
  background: var(--niche);
  border: 1px solid var(--hair);
  border-radius: 1.05rem 1.05rem 0.2rem 0.2rem / 0.95rem 0.95rem 0.2rem 0.2rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
:root[data-theme="night"] .day { background: var(--shrine); }
.day b { font: 700 0.95rem/1.1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.day.is-today { border-color: var(--brass); background: linear-gradient(var(--brass-wash-strong), transparent 90%); color: var(--brass-text); }
.day.is-today b { color: var(--brass-text); }
/* A picked day reads as chosen at a glance: filled and ringed, stronger than today's light wash. */
.day[aria-pressed="true"], :root[data-theme="night"] .day[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash-strong); box-shadow: inset 0 0 0 1.5px var(--brass); }
.week .dhwaja { position: absolute; top: -0.72rem; left: 50%; width: 0.75rem; height: 0.9rem; margin-left: -0.19rem; pointer-events: none; }
.day-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem 0.4rem; min-height: 1.6em; margin: 0.45rem 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.day-note b { color: var(--text); font-weight: 600; }
.day-note .dhwaja { width: 0.8rem; height: 1rem; }
.tithi-note { margin: 0.3rem 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

/* A festival with its own pooja (Diwali) in the coming week. */
.notice { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0 0; padding: 0.7rem 0.9rem; color: var(--text); text-decoration: none; border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line); background: var(--brass-wash); }
.notice .dhwaja { width: 1.2rem; height: 1.45rem; flex: none; }
.notice-when { display: block; font-size: var(--fs-sm); color: var(--muted); }
.notice-title { display: block; font: 700 var(--fs-lg)/1.3 var(--font-head); }
.pooja-help { margin: 0.2rem 0 1.4rem; }
.pooja-help > span { flex: 1; min-width: 0; }
.pooja-help > .icon:first-child { width: 1.6rem; height: 1.6rem; flex: none; color: var(--brass-text); }

/* ---------- The cusped arch (the reader's shrine, the day's sutra) ---------- */

.arch, .shrine { position: relative; display: block; max-width: 30rem; margin-left: auto; margin-right: auto; }
.arch .crown, .shrine .crown { display: block; width: 100%; height: auto; overflow: visible; }
.arch-body, .shrine-body { position: relative; display: block; }
.arch .sides, .shrine .sides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Continue reading: one brass-edged bar, so the library still shows on the first screen. */
.continue { display: flex; align-items: center; gap: min(0.85rem, 4vw); margin-top: 1.2rem; padding: 0.65rem 0.7rem 0.65rem 0.8rem; color: var(--text); text-decoration: none; border: 1px solid var(--brass-line); border-radius: 1rem; background: var(--brass-wash); transition: background-color 0.15s, border-color 0.15s; }
.continue:hover { border-color: var(--brass); background: var(--brass-wash-strong); }
.continue-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.continue-kicker { font: 600 var(--fs-xs)/1.3 var(--font-ui); color: var(--brass-text); }
.continue-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font: 700 var(--fs-lg)/1.3 var(--font-head); }
.continue-title .title { overflow-wrap: anywhere; }
.continue-title .title-en { font: 400 var(--fs-sm)/1.4 var(--font-ui); }
.continue-where { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.15rem; }
.continue-meta { white-space: nowrap; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.continue .trail { flex: 1; min-width: 2rem; margin: 0; }
.continue-go { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--sindoor-fill); color: var(--on-sindoor); box-shadow: var(--lift); transition: background-color 0.15s, transform 0.1s; }
.continue:hover .continue-go { background: var(--sindoor-fill-hover); }
.continue:active .continue-go { transform: scale(0.94); }

/* Progress: a brass line, gilded up to where you are, with a sindoor lozenge on the spot. */
.trail { position: relative; display: block; height: 0.8rem; margin: 0.9rem 0.4rem 0; }
.trail::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--hair); }
.trail > i { position: absolute; left: 0; top: calc(50% - 1px); height: 2px; background: var(--brass); }
.trail > b { position: absolute; top: 50%; width: 0.52rem; height: 0.52rem; margin: -0.26rem 0 0 -0.26rem; background: var(--sindoor); transform: rotate(45deg); }

/* ---------- Home: story, sutra and the paths into the library ---------- */

.home-rule { margin: 2.1rem 0 0; }
.home-sec { margin-top: 1.3rem; }
.sec-head { margin: 0 0 0.8rem; font: 700 1.22rem/1.3 var(--font-head); }
.feature { display: block; color: var(--text); text-decoration: none; }
.feature-title { display: block; margin-top: 0.7rem; font: 700 var(--fs-lg)/1.3 var(--font-head); }
.feature-title .title-en { font: 400 var(--fs-sm)/1.4 var(--font-ui); }
.feature-blurb { display: block; margin-top: 0.15rem; font-size: var(--fs-md); line-height: 1.5; color: var(--muted); }
/* On a wide screen the day's story sits beside its picture rather than under it. */
@media (min-width: 700px) {
  .home-sec .feature { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; grid-template-rows: auto 1fr; gap: 0.2rem 1.6rem; align-items: start; }
  .home-sec .feature .arch-pic { grid-row: 1 / span 2; }
  .home-sec .feature .feature-title { margin-top: 2.2rem; }
}

/* A picture seen through the arch. */
.arch-pic { position: relative; display: block; aspect-ratio: 16 / 9; }
.arch-pic > .pic { position: absolute; inset: 0; overflow: hidden; background: var(--niche); -webkit-mask: var(--pic-mask) center / 100% 100% no-repeat; mask: var(--pic-mask) center / 100% 100% no-repeat; }
.arch-pic > .pic > svg, .arch-pic > .pic > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.arch-pic > .pic-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pic-letter { display: grid; place-items: center; font: 700 3.4rem/1 var(--font-head); color: var(--brass-text); }
.pic-letter .icon { width: 30%; height: 30%; stroke-width: 1.3; }

.sutra-day { color: var(--text); text-decoration: none; text-align: center; }
.arch.sutra-day { max-width: 24rem; }
.sutra-day .arch-body { padding: 0.1rem 1.2rem 1.1rem; background: var(--shrine); }
.sutra-day + .plinth { max-width: 25rem; margin: 0 auto; }
.sutra-day:hover .verse { color: var(--sindoor); }
.sutra-day .verse { display: block; font-size: var(--fs-verse); }
.sutra-meta { display: block; margin-top: 0.2rem; font-size: var(--fs-sm); color: var(--muted); }
/* The sutra's meaning, in the plain voice of the interface so it never reads as the sutra itself. */
.sutra-meaning { display: block; margin: 0.5rem 0 0.4rem; font: 400 var(--fs-md)/1.55 var(--font-ui); color: var(--text); }

.paths, .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.paths { margin-top: 1rem; }
/* Home opens with what you were reading; the library follows after a pause. */
.continue + .paths, .also-reading + .paths { margin-top: 1.6rem; }
.also-reading { margin-top: 1.4rem; }
.paths > li, .rows > li { border-bottom: 1px solid var(--hair); }
.path, .row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--tap);
  padding: 0.6rem 0.1rem;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s;
}
.path:hover, .row:hover { background: var(--brass-wash); }
/* At the largest sizes on a narrow phone the niche and chevron leave little room: the gaps shrink with the screen,
   and a single long name (Prathamanuyog) may break rather than push the page sideways. */
.path, .row { gap: min(0.85rem, 4.8vw); }
.path b, .row .title, .row .title-en { overflow-wrap: anywhere; }
.path-main, .row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.path b, .row .title { font: 600 var(--fs-body)/1.35 var(--font-ui); }
.path small, .row-sub { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.row-about { font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
/* "Part of the Pooja guide": the version the guide opens, marked among others of the same name. */
.row-tag { display: inline-flex; align-items: center; gap: 0.25rem; align-self: flex-start; margin-top: 0.25rem; padding: 0.05rem 0.55rem 0.05rem 0.4rem; border: 1px solid var(--brass-line); border-radius: 999px; font-size: var(--fs-xs); line-height: 1.5; color: var(--brass-text); background: var(--brass-wash); }
.row-tag .icon { width: 0.9em; height: 0.9em; flex: none; }
.title-en { display: block; font-size: var(--fs-sm); color: var(--muted); }
/* How a pooja or path begins, in the scripture's carved letters and brass ink, so it reads as a line of the text
   rather than a description. One line on phones; beside the title on wider screens. */
.row-opening { margin-top: 0.2rem; font: 500 var(--fs-sm)/1.5 var(--font-verse); color: var(--brass-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) {
  .row-main:has(.row-opening) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 1.6rem; align-items: center; }
  .row-main:has(.row-opening) > * { grid-column: 1; }
  .row-main > .row-opening { grid-column: 2; grid-row: 1 / span 3; margin: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.row-chev { color: var(--muted); }
.row-verse { font: 500 var(--fs-body)/1.65 var(--font-verse); color: var(--verse); overflow-wrap: anywhere; }
.row-topic { font-weight: 600; font-size: var(--fs-body); line-height: 1.5; }
.row-num { flex: none; display: inline-grid; place-items: center; min-width: 2.15rem; height: 2.15rem; padding: 0 0.4rem; border: 1px solid var(--brass-line); border-radius: 999px; font: 700 var(--fs-sm)/1 var(--font-head); color: var(--brass-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.count { flex: none; min-width: 1.8rem; padding: 0 0.45rem; border-radius: 999px; background: var(--sindoor-fill); color: var(--on-sindoor); font: 700 var(--fs-sm)/1.8 var(--font-ui); text-align: center; }
.row-with-action { display: flex; align-items: center; gap: 0.5rem; }
.row-with-action .row { flex: 1; min-width: 0; }

/* ---------- Library ---------- */

.page-title { margin: 1.3rem 0 1rem; }
.shelf + .shelf { margin-top: 2rem; }
.shelf-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; font: 700 var(--fs-lg)/1.3 var(--font-head); }
.shelf-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass-line), transparent); }

.story-group { margin: 2rem 0 0.9rem; }
.story-group:first-of-type { margin-top: 0.4rem; }

.book-top { display: flex; align-items: center; gap: 0.9rem; margin: 1.3rem 0 0.4rem; }
.book-top .niche { width: 3.3rem; height: 4rem; }
.book-top h1 { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.book-top h1 .title { font: 700 var(--fs-xl)/1.25 var(--font-head); }
.book-cover { margin: 1.2rem 0 0.4rem; }
.book-blurb { font-size: var(--fs-body); line-height: 1.65; margin: 0.5rem 0 0.4rem; }
.book-by { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
/* The gyan daan line: who gave the text, in brass script, and the dedication under it. */
.book-sponsor { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.5rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--brass-text); font-weight: 600; }
.book-sponsor .icon { width: 1.15em; height: 1.15em; margin-top: 0.1em; }
.sponsor-note { display: block; color: var(--muted); font-weight: 400; }
/* The invitation to sponsor, closing a text's page after its contents. */
.book-give { margin: 2.4rem 0 0; text-align: center; }
.book-give p { max-width: 30rem; margin: 0 auto 0.6rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); text-wrap: balance; }
.book-actions { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }
.book-of { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

.goto { margin: 1.4rem 0; }
.goto label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.goto-row { display: flex; gap: 0.6rem; }
.field-error { min-height: 1em; margin: 0.4rem 0 0; color: var(--error); font-weight: 600; }

/* Chapters as arched windows when their names are short. */
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.3rem, 1fr)); gap: 0.55rem; }
.chapter { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 4.4rem; padding: 0.6rem 0.4rem 0.55rem; color: var(--text); text-decoration: none; text-align: center; background: var(--niche); border: 1px solid var(--brass-line); border-radius: 2.4rem 2.4rem 0.3rem 0.3rem / 1.6rem 1.6rem 0.3rem 0.3rem; transition: border-color 0.15s, background-color 0.15s; }
:root[data-theme="night"] .chapter { background: var(--shrine); }
.chapter:hover { border-color: var(--brass); background: var(--brass-wash-strong); }
.chapter b { font: 700 var(--fs-md)/1.3 var(--font-head); }
.chapter small { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Fields ---------- */

input[type="number"], input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.4rem 1.1rem;
  font: 500 var(--fs-body)/1.3 var(--font-ui);
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--brass-line);
  border-radius: 999px;
}
input::placeholder { color: var(--muted); opacity: 1; }
input:focus { border-color: var(--brass); }
input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.search-form { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.search-form input { width: 100%; }
.is-listening { border-color: var(--sindoor); background: var(--brass-wash-strong); }
.scope-note { font-size: var(--fs-sm); margin-top: 1rem; }
.chips-head { margin: 1.6rem 0 0.6rem; font: 700 var(--fs-body)/1.3 var(--font-head); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; min-height: max(2.3rem, 46px); padding: 0.25rem 0.95rem; border: 1px solid var(--brass-line); border-radius: 999px; color: var(--text); font: 600 var(--fs-md)/1.25 var(--font-ui); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.chip:hover { border-color: var(--brass); background: var(--brass-wash); }

/* ---------- Reader ---------- */

.reader-top .back { flex: 1; }
.size-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.6rem; margin: 0 -1rem; padding: 0.45rem 1rem; background: var(--plinth); border-bottom: 1px solid var(--hair); }
.size-panel[hidden] { display: none; }
.size-panel-label { font-weight: 600; font-size: var(--fs-sm); }
.size-panel .size-level { margin: 0; }
.size-ctrl { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.size-ctrl .size-level { gap: 0.35rem; }
.size-btn { min-width: 3.1rem; padding-left: 0.6rem; padding-right: 0.6rem; font: 700 var(--fs-md)/1 var(--font-head); gap: 0.1rem; }
.size-sign { font-weight: 700; }
/* At the largest sizes on a narrow phone the row would run past the screen's edge, so in the reader's panel the
   dots and the room around the buttons shrink with the screen. */
.size-panel .size-ctrl { gap: min(0.5rem, 2.5vw); }
.size-panel .size-btn { min-width: min(3.1rem, 17vw); padding-left: min(0.6rem, 3vw); padding-right: min(0.6rem, 3vw); }
.size-panel .size-ctrl .size-level { gap: min(0.35rem, 1.5vw); }
.size-panel .size-dot { width: min(0.42rem, 2.6vw); height: min(0.42rem, 2.6vw); }
.size-panel .size-dot.is-on { width: min(0.62rem, 3.8vw); height: min(0.62rem, 3.8vw); }
.size-glyph { display: inline-flex; align-items: baseline; gap: 0.05rem; font: 700 1.1rem/1 var(--font-head); color: var(--text); }
.size-glyph small { font-size: 0.66em; }

/* Where you are: the book, a brass trail and the position. */
.where { display: flex; align-items: center; gap: 0.7rem; margin: 0.75rem 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.where-book { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.where .trail { flex: 1; margin: 0; }
.where-pos { white-space: nowrap; font-variant-numeric: tabular-nums; }

.reader { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

/* The shrine: scripture stands in it, under the toran, on the vedi's steps. */
.shrine { margin-top: 1.5rem; }
.shrine-body { padding: 0.1rem 1.05rem 1.4rem; background: var(--shrine); }
.shrine-label { margin: 0 0 0.9rem; text-align: center; font: 700 1rem/1.3 var(--font-head); color: var(--sindoor); }
.shrine + .plinth { max-width: 31rem; margin: 0 auto; }
.shrine-attrib { margin: 0.75rem 0 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.plinth.full i:nth-child(n) { width: 100%; }
.reader.is-listening .shrine::before, :root[data-theme="night"] .shrine::before { content: ''; position: absolute; z-index: -1; inset: -8% -10% -4%; background: radial-gradient(closest-side, var(--glow), transparent); }
:root[data-theme="night"] .reader.is-listening .shrine::before { background: radial-gradient(closest-side, var(--brass-wash-strong), transparent); }

.verse { margin: 0; font: 500 var(--fs-verse)/1.85 var(--font-verse); color: var(--verse); word-spacing: 0.08em; overflow-wrap: anywhere; }
.verse-line { display: block; padding-left: 1em; text-indent: -1em; margin-bottom: 0.2em; }
.verse-mark { white-space: nowrap; word-spacing: normal; font-size: 0.8em; color: var(--sindoor); }
.roman { margin: 0.8rem 0 0; font-size: var(--fs-md); line-height: 1.7; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.topic { margin: 0 0 0.6rem; font: 700 var(--fs-body)/1.4 var(--font-head); color: var(--brass-text); text-align: center; }
.verse-block + .verse-block { margin-top: 0.3rem; }
.page-many .verse-block + .verse-block { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dotted var(--brass-line); }
.verse-block.is-target { margin-left: -0.6rem; margin-right: -0.6rem; padding: 0.4rem 0.6rem; border-radius: 0.4rem; background: var(--brass-wash-strong); }

/* A page without a shrine: a temple or pooja guide, a story, or a pooja recited in one go. */
.page-head { margin: 1.4rem 0 1rem; text-align: center; }
.page-head .chhatra { width: 3.6rem; margin: 0 auto 0.5rem; }
.page-head h1 { margin: 0; }
.page-head-sub { margin: 0.3rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.step-title { margin: 1.4rem 0 1rem; font: 700 var(--fs-xl)/1.25 var(--font-head); text-align: left; }
/* Words to recite, inside a guide or a pooja: centred like a printed pooja book. */
.recite { margin: 1.2rem 0; text-align: center; }
.recite .verse-line { padding-left: 0; text-indent: 0; text-wrap: balance; }
.scroll-page .verse-block + .verse-block { position: relative; margin-top: 1.9rem; padding-top: 1.9rem; }
.scroll-page .verse-block + .verse-block::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; border-top: 1px solid var(--brass-line); }
.scroll-page .verse-block + .verse-block::after { content: ''; position: absolute; top: -0.21rem; left: 50%; width: 0.42rem; height: 0.42rem; margin-left: -0.21rem; background: var(--brass); transform: rotate(45deg); }

/* What explains the scripture sits below it, in the plain interface font, so it never reads as the scripture itself. */
.commentary { margin-top: 1.4rem; }
.meaning, .padya, .prose.gloss { margin: 0 0 1.2rem; padding-top: 0.75rem; border-top: 1px solid var(--brass-line); }
.meaning h2, .padya h2 { margin: 0 0 0.3rem; font: 700 var(--fs-md)/1.3 var(--font-head); color: var(--brass-text); }
.meaning p, .padya p, .prose.gloss p { margin: 0; font: 400 var(--fs-body)/1.75 var(--font-ui); color: var(--text); word-spacing: 0.05em; }
.prose.gloss p + p { margin-top: 0.7rem; }
.pada { font-family: var(--font-verse); font-weight: 700; color: var(--brass-text); }
.prose p { margin: 0 0 1rem; font: 400 var(--fs-body)/1.8 var(--font-ui); color: var(--text); }
.prose p:last-child { margin-bottom: 0; }

/* The lesson of a story, set between brass rules. */
.moral { margin: 1.6rem 0; text-align: center; }
.moral h2 { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0 0 0.5rem; font: 700 var(--fs-md)/1.3 var(--font-head); color: var(--brass-text); }
.moral h2::before, .moral h2::after { content: ''; flex: 1; max-width: 5rem; border-top: 1px solid var(--brass-line); }
.moral p { margin: 0; font: 600 var(--fs-lg)/1.6 var(--font-head); color: var(--text); }

.story-fig { margin: 0.5rem 0 1.4rem; }
.story-fig img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 0.4rem; box-shadow: 0 0 0 1px var(--brass-line); }
.story-fig figcaption { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.fig-credit { font-size: var(--fs-xs); opacity: 0.85; }
.guide-links { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }

.reader-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.6rem 0 0; }

.reader-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.5rem; padding: 0.45rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom)); }
.reader-bar .btn { flex-direction: column; gap: 0.1rem; min-height: max(3.2rem, 52px); padding: 0.25rem; border: 0; font-size: min(var(--fs-md), 4.6vw); line-height: 1.15; overflow-wrap: anywhere; }
.reader-bar .btn:not(.btn-primary) { background: none; }
.reader-bar .btn:not(.btn-primary):hover { background: var(--brass-wash); }
.reader-bar .btn .icon { width: 1.35em; height: 1.35em; }
.reader-bar .btn > .icon:last-child:not(:first-child) { order: -1; }

/* ---------- Pictures that explain the text ---------- */

.chitra { margin: 1.4rem 0; padding: 0.85rem 0 0; border-top: 1px solid var(--brass-line); }
.chitra-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; font: 700 var(--fs-body)/1.4 var(--font-head); }
.chitra-title .icon { color: var(--brass-text); width: 1.1em; height: 1.1em; }
.dg-text, .dg-box { min-width: 0; }
.dg-text b, .dg-box b { font-size: var(--fs-md); }
.dg-sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); line-height: 1.5; }
.dg-badge { flex: none; display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.35rem; border-radius: 999px; background: var(--sindoor-fill); color: var(--on-sindoor); font: 700 var(--fs-sm)/1 var(--font-ui); }
.dg-list, .dg-flow, .dg-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dg-list li, .dg-flow li, .dg-stack li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--hair); }
.dg-list li:first-child, .dg-flow li:first-child { border-top: 0; padding-top: 0.1rem; }
/* A row that opens its verse or story: the whole row is the link, with a chevron at the end. */
.dg-list li.dg-link { display: block; padding: 0; }
.dg-go { display: flex; align-items: center; gap: 0.7rem; min-height: var(--tap); padding: 0.55rem 0; color: var(--text); text-decoration: none; transition: background-color 0.15s; }
.dg-go:hover { background: var(--brass-wash); }
.dg-go .dg-text { flex: 1; }
.dg-go .row-chev { flex: none; }
/* The row for the story being read (★) has no link, but sits in line with the rows that do. */
.dg-list:has(.dg-go) > li:not(.dg-link) { align-items: center; min-height: var(--tap); }
.dg-flow li { position: relative; }
.dg-flow li + li { border-top: 0; padding-top: 1.1rem; }
.dg-flow li + li::after { content: ''; position: absolute; left: 0.62rem; top: 0.15rem; width: 0.5rem; height: 0.5rem; border-style: solid; border-color: var(--brass); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dg-stack li { padding: 0.55rem 0.7rem; border-top: 0; border-radius: 0.3rem; background: color-mix(in srgb, transparent, var(--brass-mid) calc(10% + var(--depth) * 36%)); }
.dg-stack li + li { margin-top: 0.3rem; }
.dg-stack li .dg-sub { color: inherit; opacity: 0.85; }
.dg-sum { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.dg-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.55rem 0.8rem; border-radius: 0.3rem; box-shadow: 0 0 0 1px var(--brass-line); background: var(--bg); }
.dg-result { background: var(--brass-wash-strong); box-shadow: 0 0 0 1px var(--brass); }
.dg-op { align-self: center; font: 700 1.4rem/1 var(--font-head); color: var(--brass-text); }
.dg-root { max-width: 18rem; margin: 0 auto 0.8rem; padding: 0.55rem 0.8rem; text-align: center; border-radius: 0.3rem; background: var(--sindoor-fill); color: var(--on-sindoor); }
.dg-root .dg-sub { color: var(--on-sindoor); opacity: 0.9; }
.dg-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.9rem; }
.dg-branch { border-top: 2px solid var(--brass); }
.dg-head { padding: 0.45rem 0 0.35rem; color: var(--brass-text); }
.dg-head .dg-sub { color: var(--muted); }
.dg-branch ul { list-style: none; margin: 0; padding: 0; }
.dg-branch li { padding: 0.4rem 0; border-top: 1px dotted var(--brass-line); }
.dg-drawing svg { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto 0.9rem; }
/* A picture above a step or a pooja stands in an arched niche on the vedi; the niche is its only frame. */
.scene { margin: 0.3rem 0 1.5rem; }
.scene-niche { position: relative; max-width: 26rem; margin: 0 auto; }
.scene-niche .crown { display: block; width: 100%; height: auto; overflow: visible; }
.scene-niche .sides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scene-body { position: relative; display: block; padding: 0; background: var(--scene-paper); }
.scene-niche .arch-fill { fill: var(--scene-paper); }
.scene-niche .sides { z-index: 1; }
.scene-body .dg-drawing { position: relative; }
.scene-body .dg-drawing svg { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.scene-body .dg-drawing svg > rect:first-child { x: 0; y: 0; width: 100%; height: 100%; rx: 0; ry: 0; stroke: none; }
.scene .plinth { max-width: 27rem; margin: 0 auto; }
.scene-caption { margin: 0.75rem 0 0; text-align: center; font: 700 var(--fs-md)/1.45 var(--font-head); color: var(--brass-text); }
.scene .dg-legend { margin-top: 0.9rem; }
.chitra-note { margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.chitra-gist { margin: 0.8rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--brass-line); color: var(--text); line-height: 1.75; }
.chitra-gist b { color: var(--brass-text); }

/* ---------- Settings ---------- */

.set { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--hair); }
.set:first-of-type { border-top: 1px solid var(--hair); }
.set h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.65rem; font-size: var(--fs-lg); }
.set h2 .icon { color: var(--brass-text); }
.set p:last-child { margin-bottom: 0; }
.set .icon { vertical-align: -0.2em; }
.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice .btn { flex: 1 1 6rem; }
.size-preview { margin: 0 0 0.8rem; padding: 0.5rem; text-align: center; font: 500 var(--fs-verse)/1.6 var(--font-verse); color: var(--verse); border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line); }
.size-choice .btn { padding-left: 0.5rem; padding-right: 0.5rem; gap: 0.2rem; }
.size-choice .size-sign { margin-right: 0.3rem; }
.size-level { display: flex; align-items: center; gap: 0.45rem; margin: 0.8rem 0 0; }
.size-dot { width: 0.42rem; height: 0.42rem; border: 1px solid var(--brass); transform: rotate(45deg); }
.size-dot.is-on { width: 0.62rem; height: 0.62rem; background: var(--sindoor); border-color: var(--sindoor); }
.size-level-text { margin-left: 0.4rem; font-size: var(--fs-sm); color: var(--muted); }
.plain { padding-left: 1.2rem; }
.hold-btn { position: relative; overflow: hidden; touch-action: none; }
.hold-fill { position: absolute; inset: 0; background: var(--brass-wash-strong); transform: scaleX(0); transform-origin: left center; }
.hold-btn.holding .hold-fill { transform: scaleX(1); transition: transform 3s linear; }
.hold-text { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.tips { margin: 0; padding-left: 1.3rem; }
.tips li { margin-bottom: 0.5rem; line-height: 1.6; }
.tips li::marker { color: var(--brass-text); font-weight: 700; }
.tips li:last-child { margin-bottom: 0; }
.set-link { margin-top: 0.6rem; }
.set-link .row { font-weight: 600; }
.maker { margin-top: 2.2rem; padding: 1.6rem 0.5rem 0.4rem; text-align: center; border-top: 1px solid var(--hair); }
.maker .prateek { height: 2.6rem; margin: 0 auto 0.7rem; }
.maker-by { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.maker-name { margin: 0.15rem 0 0; font: 700 1.3rem/1.25 var(--font-head); }
.maker-place { margin: 0.1rem 0 0; font-size: var(--fs-sm); color: var(--brass-text); font-weight: 600; letter-spacing: 0.02em; }
.maker-about { max-width: 30rem; margin: 0.9rem auto 0; line-height: 1.65; text-wrap: pretty; }
.maker-write { margin: 1rem 0 0.5rem; font-size: var(--fs-sm); color: var(--muted); text-wrap: balance; }
.maker .btn { max-width: 100%; }
.maker .btn span { overflow-wrap: anywhere; }
.credit { padding: 0.8rem 0; border-bottom: 1px solid var(--hair); }
.credit h3 { margin: 0 0 0.15rem; }
.support h3 { margin: 1.1rem 0 0.25rem; }
.credit p { margin: 0.15rem 0 0; font-size: var(--fs-sm); }

/* ---------- Empty, loading, toast, "more below" ---------- */

.empty { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 2rem 0; text-align: center; }
.empty .niche { width: 3.3rem; height: 4rem; }
.empty .niche > .icon { width: 1.6rem; height: 1.6rem; bottom: 0.7rem; }
.empty p { max-width: 22rem; margin: 0; color: var(--muted); }
.center { text-align: center; padding-top: 30vh; }
.loading { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-top: 30vh; color: var(--muted); }
.loading .chhatra { width: 3rem; opacity: 0.85; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(6.4rem + env(safe-area-inset-bottom));
  z-index: 10;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.7rem 1.1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--lift);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* "More below": a quiet line in a band at the top of the bottom bar, never over the words. */
.tabbar.has-cue, .reader-bar.has-cue { padding-top: max(1.9rem, 30px); }
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  min-height: max(1.6rem, 26px);
  padding: 0 0.6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--brass-text);
  font: 600 0.7rem/1.2 var(--font-ui);
  transform: translateX(-50%);
  cursor: pointer;
}
.scroll-cue[hidden] { display: none; }
.scroll-cue:hover { color: var(--text); }

/* ---------- Children's stories: bright, round and friendly (pictures in js/kids.js) ---------- */

body:has(main.kids) { background: linear-gradient(180deg, #c6ebff 0, #fff8e6 26rem, #fff8e6 100%); }
body:has(main.kids)::before { display: none; }
:root[data-theme="night"] body:has(main.kids) { background: linear-gradient(180deg, #202b63 0, #2a2350 30rem, #231d42 100%); }
.kids { --kid-ink: #3a2b24; --kid-soft: #6b5e57; --kid-card: #ffffff; }
:root[data-theme="night"] .kids { --kid-ink: #f6f1ff; --kid-soft: #cfc6e8; --kid-card: #2f2a55; }

.kids-banner { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.4rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: 1.3rem; background: linear-gradient(135deg, #fff1b8, #ffd9ec); border: 3px solid #ff9f1c; box-shadow: 0 5px 0 #ff9f1c; color: #3a2b24; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.kids-banner:active { transform: translateY(3px); box-shadow: 0 2px 0 #ff9f1c; }
/* At large text sizes the picture gives up room, so the text keeps its longest word and nothing spills past the banner. */
.kids-banner-art { flex: 0 1 7.2rem; min-width: 0; }
.kids-banner-art svg { display: block; width: 100%; height: auto; border-radius: 0.9rem; }
.kids-banner-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.kids-banner-text b { font: 700 1.12rem/1.25 var(--font-head); color: #e8433b; }
.kids-banner-text small { font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: #5a4a8a; }
.kids-banner > .icon { flex: none; color: #ff9f1c; }

.kids-hero { margin: 0.2rem 0 1.2rem; text-align: center; }
.kids-hero-art svg { display: block; width: 100%; height: auto; border-radius: 1.6rem; border: 3px solid #ffb703; box-shadow: 0 6px 0 #ffb703; }
.kids-title { margin: 1.1rem 0 0.25rem; font: 900 2rem/1.2 var(--font-head); color: #ff5d5d; text-shadow: 2px 2px 0 #ffe066; }
.kids-sub { margin: 0; font-weight: 600; color: #6a4fc2; }
:root[data-theme="night"] .kids-sub { color: #cdbcff; }
.kids-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.85rem; margin: 0; padding: 0; }
@media (max-width: 380px) { .kids-grid { grid-template-columns: 1fr; } }
@media (min-width: 700px) { .kids-grid { grid-template-columns: repeat(3, 1fr); } }
.kid-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1.3rem; background: var(--kid-card); border: 3px solid var(--kid); box-shadow: 0 5px 0 var(--kid); color: var(--kid-ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.kid-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--kid); }
.kid-art svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.kid-name { padding: 0.6rem 0.75rem 0; font: 700 1.05rem/1.3 var(--font-head); }
.kid-blurb { flex: 1; padding: 0.25rem 0.75rem 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--kid-soft); }
.kid-go { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start; margin: 0.65rem 0.75rem 0.8rem; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--kid); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.kid-go .icon { width: 1em; height: 1em; color: #fff; }

/* A children's book page and reader: pictures in round frames, a coloured tag for each page, big friendly text. */
.kids .arch-pic .pic { -webkit-mask: none; mask: none; border-radius: 1.4rem; overflow: hidden; border: 3px solid #ffb703; box-shadow: 0 6px 0 #ffb703; }
.kids .arch-pic .pic-frame { display: none; }
.kids h1 .title, .kids .book-top h1 { color: #e8433b; }
:root[data-theme="night"] .kids h1 .title { color: #ff8a80; }
.kids .btn-primary { background: #ff5d5d; border-color: #ff5d5d; box-shadow: 0 4px 0 #c93c3c; }
.kids .page-head .chhatra { display: none; }
.kids .page-head h1 { color: #e8433b; }
:root[data-theme="night"] .kids .page-head h1 { color: #ff8a80; }
.kids .page-head h1::before { content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.35em; vertical-align: -0.12em; background: #ffc928; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.kids .topic { display: inline-block; margin: 1.2rem 0 0.7rem; padding: 0.3rem 1rem; border-radius: 999px; background: #e9e1ff; color: #5a3fc0; font: 700 1.05rem/1.4 var(--font-head); }
:root[data-theme="night"] .kids .topic { background: #463a8a; color: #efe9ff; }
.kids .scene { margin: 0.4rem 0 1rem; }
.kids .scene .crown, .kids .scene .sides, .kids .scene .plinth { display: none; }
.kids .scene-niche { overflow: hidden; border-radius: 1.5rem; border: 4px solid #ffb703; box-shadow: 0 6px 0 #ff9f1c; }
.kids .scene-body { padding: 0; background: none; }
.kids .scene-body svg { display: block; width: 100%; height: auto; }
.kids .prose p { font-size: 1.12rem; line-height: 1.95; color: var(--kid-ink); }
.kids .moral { margin: 1.6rem 0 0.6rem; padding: 1rem 1.1rem 1.1rem; border-radius: 1.4rem; background: #fff4bf; border: 3px dashed #ffb703; }
:root[data-theme="night"] .kids .moral { background: #3d3566; border-color: #ffc928; }
.kids .moral h2 { color: #e8433b; }
.kids .moral h2::before, .kids .moral h2::after { content: ''; flex: none; width: 1.3em; height: 1.3em; max-width: none; border: 0; background: #ffc928; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.kids .moral p { color: var(--kid-ink); }
body:has(main.kids) .reader-bar { border-top-color: #ffb703; }
body:has(main.kids) .reader-bar .btn-primary { background: #ff5d5d; border-color: #ff5d5d; }

/* ---------- Ask ---------- */

textarea {
  width: 100%;
  min-height: 5.2rem;
  padding: 0.7rem 1.1rem;
  font: 500 var(--fs-body)/1.5 var(--font-ui);
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--brass-line);
  border-radius: 1.1rem;
  resize: vertical;
}
textarea::placeholder { color: var(--muted); opacity: 1; }
textarea:focus { border-color: var(--brass); }
textarea:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.ask-link { display: flex; align-items: center; gap: 0.6rem; min-height: var(--tap); margin: -0.2rem 0 1rem; padding: 0.5rem 0.9rem; border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line); background: var(--brass-wash); color: var(--text); font-weight: 600; text-decoration: none; }
.ask-link > span { flex: 1; }
.ask-link .icon { color: var(--brass-text); }
.ask-dots { display: inline-flex; gap: 0.2rem; }
.ask-dots i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--brass); animation: ask-dot 1.2s ease-in-out infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.2s; }
.ask-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---------- Ask: a conversation with the app's texts ---------- */

/* The screen leaves room below for the bottom bar and the question box standing on it. */
#app.has-nav.is-ask { padding-bottom: calc(var(--bar-h, 4.5rem) + var(--composer-h, 4.5rem) + 1.4rem); }

/* Before the first question: a welcome lit by the diya under the chhatra. */
.ask-hello { position: relative; isolation: isolate; padding: 1.6rem 0 0.4rem; text-align: center; }
.ask-hello::before { content: ''; position: absolute; z-index: -1; top: -1.4rem; left: 50%; width: min(24rem, 100%); height: 15rem; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent); }
.ask-chhatra.chhatra { width: 5rem; margin: 0 auto 0.7rem; }
.ask-title { margin: 0; font: 700 1.62rem/1.2 var(--font-head); text-wrap: balance; }
.ask-intro { max-width: 27rem; margin: 0.55rem auto 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.65; text-wrap: pretty; }
.ask-privacy, .thread-note { display: flex; align-items: flex-start; justify-content: center; gap: 0.4rem; max-width: 27rem; margin: 0.9rem auto 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; text-align: start; }
.ask-privacy .icon, .thread-note .icon { flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; color: var(--brass-text); }
.thread-note { margin: 0.4rem auto 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hair); }
.ask .chips-head { margin-top: 1.9rem; }
.ask .chip { text-align: start; font-size: var(--fs-body); }
.row-lead { flex: none; width: 1.25rem; height: 1.25rem; color: var(--brass-text); }

/* All the common questions, folded under one line until opened. */
.ask-all { margin-top: 1.9rem; border-top: 1px solid var(--hair); }
.ask-all summary { display: flex; align-items: center; gap: 0.6rem; min-height: var(--tap); padding: 0.55rem 0.1rem; cursor: pointer; list-style: none; font: 700 var(--fs-body)/1.3 var(--font-head); }
.ask-all summary::-webkit-details-marker { display: none; }
.ask-all summary span { flex: 1; }
.ask-all summary small { min-width: 1.9rem; padding: 0.15rem 0.5rem; border: 1px solid var(--brass-line); border-radius: 999px; font: 700 var(--fs-xs)/1.2 var(--font-ui); color: var(--brass-text); text-align: center; font-variant-numeric: tabular-nums; }
.ask-all summary .icon { color: var(--muted); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.ask-all[open] summary .icon { transform: rotate(180deg); }
.ask-all summary:hover { color: var(--brass-text); }

/* The conversation: your words on the right in a brass-washed bubble, the app's answer on the left on
   sanctum white, under a small chhatra in its niche. */
.thread { display: flex; flex-direction: column; gap: 1rem; }
.msg { min-width: 0; }
.msg-you { align-self: flex-end; max-width: min(85%, 30rem); padding: 0.65rem 1.05rem; border: 1px solid var(--brass-line); border-radius: 1.3rem 1.3rem 0.35rem 1.3rem; background: var(--brass-wash-strong); }
.msg-you p { margin: 0; font: 600 var(--fs-body)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.msg-app { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.msg-mark { display: grid; place-items: end center; width: 2.3rem; height: 2.7rem; padding-bottom: 0.55rem; border-radius: 1.2rem 1.2rem 0.25rem 0.25rem / 1.05rem 1.05rem 0.25rem 0.25rem; background: var(--niche); box-shadow: inset 0 0 0 1px var(--brass-line); }
.msg-mark .chhatra { width: 1.6rem; }
.msg-card { min-width: 0; overflow-wrap: break-word; padding: 0.9rem 1.05rem 0.55rem; border: 1px solid var(--brass-line); border-top: 2px solid var(--brass); border-radius: 0.35rem 1.3rem 1.3rem 1.3rem; background: var(--shrine); }
.msg-card .answer-text p { margin: 0 0 0.7rem; font-size: var(--fs-body); line-height: 1.75; text-wrap: pretty; }
.msg-card .answer-text p:last-child { margin-bottom: 0; }
.msg-src-head { margin: 0.95rem 0 0.45rem; font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--brass-text); }
.msg-srcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.msg-src { display: flex; align-items: center; gap: 0.65rem; min-height: var(--tap); padding: 0.4rem 0.5rem 0.4rem 0.55rem; border-radius: 0.9rem; background: var(--brass-wash); color: var(--text); text-decoration: none; transition: background-color 0.15s; }
.msg-src:hover { background: var(--brass-wash-strong); }
.msg-src-n { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--sindoor-fill); color: var(--on-sindoor); font: 700 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.msg-src-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.msg-src-main .title { font: 600 var(--fs-body)/1.35 var(--font-ui); overflow-wrap: anywhere; }
.msg-src-main small { color: var(--muted); font-size: var(--fs-xs); }
.msg-note { margin: 0.85rem 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.15rem; border-top: 1px solid var(--hair); }
.msg-kind { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font: 600 var(--fs-xs)/1.3 var(--font-ui); }
.msg-kind .icon { width: 1rem; height: 1rem; color: var(--brass-text); }
.msg-act { margin-right: -0.6rem; }
.msg-act:hover { background: var(--brass-wash); color: var(--text); }
.msg-more { margin: 0.2rem 0 0.45rem; }
.msg-wait { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem; color: var(--muted); }
.msg-error { margin: 0 0 0.4rem; line-height: 1.6; }
/* Questions to ask next, under the answer they follow from. */
.msg-next { margin: -0.2rem 0 0 2.9rem; }
.msg-next-head { margin: 0 0 0.45rem; color: var(--muted); font: 600 var(--fs-xs)/1.3 var(--font-ui); }
/* A new message rises in once; nothing else moves. */
@keyframes msg-in { from { opacity: 0.35; transform: translateY(0.6rem); } }
.msg.is-new, .msg-next.is-new { animation: msg-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
.msg-next.is-new { animation-delay: 0.08s; }
/* On a phone the answer takes the full width; its chhatra stands just above the card's pointed corner. */
@media (max-width: 560px) {
  .msg-app { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .msg-mark { width: 2rem; height: 2.35rem; padding-bottom: 0.48rem; }
  .msg-mark .chhatra { width: 1.4rem; }
  .msg-next { margin-left: 0; }
}

/* The question box stands on the bottom bar: a field-white pill with the voice button, the words and the
   sindoor send button, over a fade of the page so the conversation passes under it. */
.composer { position: fixed; left: 0; right: 0; bottom: var(--bar-h, 4.5rem); z-index: 5; max-width: 42rem; margin: 0 auto; padding: 1.1rem 1rem 0.65rem; background: linear-gradient(to top, var(--bg) 62%, transparent); pointer-events: none; }
.composer-field { display: flex; align-items: flex-end; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--brass-line); border-radius: 1.6rem; background: var(--field); box-shadow: var(--lift); pointer-events: auto; transition: border-color 0.15s; }
.composer-field:focus-within { border-color: var(--brass); }
.composer textarea { flex: 1; min-width: 0; min-height: 48px; max-height: none; padding: 0.72rem 0.5rem 0.62rem 0.85rem; border: 0; border-radius: 0; background: none; font: 500 var(--fs-body)/1.45 var(--font-ui); resize: none; overflow-y: auto; }
.composer-mic + textarea { padding-left: 0.2rem; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer textarea:focus, .composer textarea:focus-visible { outline: none; }
.composer-field:has(textarea:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.composer-mic, .composer-send { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; }
.composer-mic { background: none; color: var(--brass-text); }
.composer-mic:hover { background: var(--brass-wash); }
.composer-mic.is-listening { background: var(--brass-wash-strong); color: var(--sindoor); box-shadow: inset 0 0 0 1px var(--brass); }
.composer-send { background: var(--sindoor-fill); color: var(--on-sindoor); }
.composer-send:hover { background: var(--sindoor-fill-hover); }
.composer-send:active { transform: scale(0.94); }
.composer-send.is-empty { opacity: 0.4; }
.composer .icon { width: 1.35rem; height: 1.35rem; }
/* While typing on a phone, the bottom bar steps aside and the box sits on the keyboard. */
@media (pointer: coarse) {
  #app.composing .tabbar { display: none; }
  #app.composing .composer { bottom: 0; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)); }
}
.cite { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin: 0 0.1rem; padding: 0 0.25rem; border: 1px solid var(--brass-line); border-radius: 999px; font: 700 0.62rem/1 var(--font-ui); color: var(--brass-text); text-decoration: none; vertical-align: 0.35em; }
.cite:hover { background: var(--brass-wash); }
.rows button.row { width: 100%; border: 0; background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; }

/* ---------- Side rail: how far down a page you are ---------- */
/* A hairline at the side of every screen that scrolls (home excepted), gilded as far as you have come, with a
   sindoor lozenge at your place. It sits just outside the column, between the top and bottom bars. */
.scrollmark { position: fixed; z-index: 4; top: calc(var(--top-h, 0px) + 1rem); bottom: calc(var(--bar-h, 0px) + var(--composer-h, 0px) + 1rem); right: max(0.4rem, calc(50vw - 21rem - 0.9rem)); width: 2px; border-radius: 2px; background: var(--hair); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.scrollmark.is-on { opacity: 1; }
.scrollmark i { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: 2px; background: linear-gradient(var(--brass-hi), var(--brass)); }
.scrollmark b { position: absolute; top: calc(var(--p, 0) * 100%); right: -0.35rem; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; }
/* The lozenge is small to see but large to hold: the square around it, which never reaches past the screen's edge,
   takes the finger. */
.scrollmark b::after { content: ''; position: absolute; top: 50%; right: calc(0.35rem + 1px - 0.25rem); width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; background: var(--sindoor); transform: rotate(45deg); transition: transform 0.15s; }
.scrollmark.is-on b { pointer-events: auto; cursor: grab; touch-action: none; }
.scrollmark.is-drag b { cursor: grabbing; }
.scrollmark.is-drag b::after { transform: rotate(45deg) scale(1.5); }

/* ---------- Motion ---------- */

/* Screens arrive with a short rise; a page turn slides only the scripture, never its shrine. */
@keyframes enter { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes enter-next { from { opacity: 0; transform: translateX(1.4rem); } }
@keyframes enter-prev { from { opacity: 0; transform: translateX(-1.4rem); } }
main.enter { animation: enter 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.reader.turn-next .shrine-body > *, .reader.turn-next .commentary, .reader.turn-next .page-body { animation: enter-next 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
.reader.turn-prev .shrine-body > *, .reader.turn-prev .commentary, .reader.turn-prev .page-body { animation: enter-prev 0.24s cubic-bezier(0.16, 1, 0.3, 1); }

/* Entering a text opens the sanctum: the arch is drawn down from its kalash, the pillars follow, the verse rises in. */
@keyframes arch-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes pillars { from { transform: scaleY(0); } }
@keyframes kalash { from { opacity: 0; transform: translateY(-4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(0.45rem); } }
.is-entering .arch-line, .is-entering .arch-inner { animation: arch-draw 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.is-entering .kalash { animation: kalash 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.is-entering .sides { transform-origin: top; animation: pillars 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.is-entering .shrine-body > * { animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Phones ---------- */
/* The text size setting already makes a phone screen large, so the controls keep a 48px
   tap target and leave the screen to the text; their labels still follow the text size. */
@media (max-width: 640px) {
  :root { --tap: 48px; }
  .reader { padding-bottom: calc(5.8rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .reader-bar .btn { font-size: var(--fs-sm); }
}

/* ---------- Opening screen: darshan of Bhagwan Mahavir ---------- */
/* Shown for 3 seconds on every launch while the app gets ready underneath.
   The murti of Shri Mahavirji (img/mahavir.jpg) is seen through the arch of a
   vedi, as from the doorway of a dim garbhagriha: it comes out of the dark
   while the arch is drawn down from its kalash, the bhamandal behind the head
   glows, the light of the aarti flickers up from below with a few sparks, and
   one gleam passes over the murti while the name is written. At 3s the
   bhamandal's light spreads into the app's own page and the screen fades away.
   Each layer is its own box, so the motion stays smooth while the app loads.
   Sizes are in px, not rem: this screen does not follow the text-size setting.
   Everything is timed here, so the screen also goes away if the script fails. */

.splash {
  --sp-bg: #120906;
  --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The centre of the bhamandal in the photo, within the art box (the window
     starts 18 units below the kalash and is 620 of the box's 652 units high). */
  --sp-halo-x: 49.7%;
  --sp-halo-y: 27.9%;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 16px calc(76px + env(safe-area-inset-bottom));
  overflow: hidden;
  background: radial-gradient(110% 62% at 50% 34%, #2e150a 0%, #1c0d07 46%, var(--sp-bg) 80%);
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: splash-out 0.35s ease-out 3.45s forwards;
}

/* The arch is 360 by 652 units: the kalash above, the 360 by 620 window, the plinth below. */
.sp-art {
  position: relative;
  flex: none;
  width: min(34vh, 72vw);
  height: min(61.6vh, 130.4vw);
}

.sp-glow {
  position: absolute;
  left: var(--sp-halo-x);
  top: var(--sp-halo-y);
  width: 230%;
  height: 0;
  padding-bottom: 230%;
  margin: -115% 0 0 -115%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 112, 0.3), rgba(214, 120, 48, 0.1) 48%, rgba(160, 70, 20, 0));
  animation: sp-kindle 1.4s var(--sp-ease) 0.2s both;
}

.sp-window {
  position: absolute;
  left: 0;
  top: 2.761%;
  width: 100%;
  height: 95.092%;
  overflow: hidden;
  background: #1a0e08;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%20620%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20620L0%2080A20.8%2020.8%200%200%200%2013.7%2049.4A29.1%2029.1%200%200%200%2052.7%2023.4A37.8%2037.8%200%200%200%20111.1%206.1A42.9%2042.9%200%200%200%20180%200A42.9%2042.9%200%200%200%20248.9%206.1A37.8%2037.8%200%200%200%20307.3%2023.4A29.1%2029.1%200%200%200%20346.3%2049.4A20.8%2020.8%200%200%200%20360%2080L360%20620Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%20620%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20620L0%2080A20.8%2020.8%200%200%200%2013.7%2049.4A29.1%2029.1%200%200%200%2052.7%2023.4A37.8%2037.8%200%200%200%20111.1%206.1A42.9%2042.9%200%200%200%20180%200A42.9%2042.9%200%200%200%20248.9%206.1A37.8%2037.8%200%200%200%20307.3%2023.4A29.1%2029.1%200%200%200%20346.3%2049.4A20.8%2020.8%200%200%200%20360%2080L360%20620Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
/* The garbhagriha is dim: only the murti and its bhamandal are lit; the sides,
   the silver throne and the foot of the picture fall into shadow. */
.sp-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 64% at 50% 46%, rgba(18, 9, 6, 0) 36%, rgba(18, 9, 6, 0.88) 100%),
    linear-gradient(90deg, rgba(18, 9, 6, 0.55), rgba(18, 9, 6, 0) 30%, rgba(18, 9, 6, 0) 70%, rgba(18, 9, 6, 0.55)),
    linear-gradient(0deg, rgba(18, 9, 6, 0.22), rgba(18, 9, 6, 0) 10%);
  z-index: 1;
}
.sp-window > * { position: absolute; inset: 0; visibility: hidden; }
/* The photo and its lights wait for the photo itself (index.html marks the window
   lit when it has loaded), so a slow first load shows a dark niche, never the
   lights on an empty arch, and the reveal starts from the moment it can be seen. */
.sp-window.is-lit > * { visibility: visible; }
/* The lights below sit over the shadow: the aarti lights the pedestal and its lion. */
.sp-diya, .sp-aura, .sp-window > .sp-sweep { z-index: 2; }

/* Out of the dark, coming slowly closer the whole time. */
.sp-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1) saturate(1.08) contrast(1.06) blur(0);
  transform-origin: var(--sp-halo-x) 34%;
}
.is-lit > .sp-photo { animation: sp-reveal 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
/* The aarti's light, flickering up from below. */
.sp-diya {
  background: radial-gradient(ellipse 70% 26% at 50% 96%, rgba(255, 170, 84, 0.5), rgba(255, 150, 64, 0) 78%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.is-lit > .sp-diya { animation: sp-flicker 2.7s linear 0.4s both; }
/* The bhamandal glows: a ring of light on the carved gold around the head, clear of the face. */
.sp-aura {
  background: radial-gradient(ellipse 46% 26.7% at var(--sp-halo-x) 26.4%, rgba(255, 200, 120, 0) 38%, rgba(255, 206, 130, 0.7) 60%, rgba(255, 170, 90, 0.26) 78%, rgba(255, 170, 90, 0));
  mix-blend-mode: color-dodge;
  -webkit-mask-image: linear-gradient(180deg, #000 24%, transparent 35%);
  mask-image: linear-gradient(180deg, #000 24%, transparent 35%);
  opacity: 0.55;
  transform-origin: var(--sp-halo-x) 26.4%;
}
.is-lit > .sp-aura { animation: sp-aura 1.8s var(--sp-ease) 0.85s both; }
/* One gleam passes over the murti. */
.sp-window > .sp-sweep {
  inset: -10% auto -10% 0;
  width: 30%;
  background: linear-gradient(90deg, rgba(255, 232, 186, 0), rgba(255, 232, 186, 0.3) 50%, rgba(255, 232, 186, 0));
  mix-blend-mode: screen;
  opacity: 0;
}
.sp-window.is-lit > .sp-sweep { animation: sp-sweep 1.4s cubic-bezier(0.45, 0, 0.25, 1) 1.45s both; }

.sp-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.sp-line path { stroke-dasharray: 1; animation: sp-trace 1.2s var(--sp-ease) 0.2s both; }
.sp-kalash { transform-box: fill-box; transform-origin: 50% 100%; animation: sp-kalash 0.5s var(--sp-ease) 0.1s both; }
.sp-plinth { animation: sp-fade 0.5s ease-out 0.25s both; }

.sp-sparks { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 0; mix-blend-mode: screen; }
.sp-sparks i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff4d6, #ffbe5c 40%, rgba(255, 150, 60, 0));
  opacity: 0;
  animation: sp-spark var(--t) cubic-bezier(0.3, 0.55, 0.45, 1) var(--d) both;
}

/* The name is written in from left to right, like ink along the shirorekha. */
.sp-title {
  margin: 16px 0 0;
  padding: 0.1em 0.15em 0;
  font: 700 clamp(42px, min(12.5vw, 7vh), 64px)/1.2 var(--font-head);
  color: #f3d796;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: sp-write 1s cubic-bezier(0.55, 0, 0.25, 1) 1.05s both;
}
/* A brass rule with a lozenge, as on the app's own pages, between the two names. */
.sp-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 9px;
  color: #b8904a;
  animation: sp-draw 0.8s var(--sp-ease) 1.45s both;
}
.sp-rule::before, .sp-rule::after { content: ''; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.sp-rule::after { transform: scaleX(-1); }
.sp-rule i { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
.sp-name {
  margin: 0;
  padding-left: 0.3em; /* balances the letter spacing after the last letter */
  font: 500 12px/1.4 var(--font-head);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b49670;
  animation: sp-rise-text 0.8s var(--sp-ease) 1.6s both;
}

.sp-credit {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(28px + env(safe-area-inset-bottom));
  margin: 0;
  font: 400 13px/1.5 var(--font-ui);
  color: #9c8466;
  animation: sp-rise-text 0.8s var(--sp-ease) 1.85s both;
}

/* The light that carries the screen into the app: it takes the page colour, so it also works at night. */
.sp-flare {
  position: absolute;
  z-index: 3;
  left: var(--sp-halo-x);
  top: var(--sp-halo-y);
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 70%, rgba(255, 214, 140, 0.85) 86%, rgba(255, 214, 140, 0));
  transform: scale(0);
  animation: sp-flare 0.55s cubic-bezier(0.5, 0, 0.75, 0) 3s forwards;
}

@keyframes sp-kindle { from { opacity: 0; transform: scale(0.5); } }
@keyframes sp-reveal {
  from { opacity: 0; filter: brightness(0.2) saturate(0.5) contrast(1.06) blur(6px); transform: scale(1.14); }
  38% { opacity: 1; filter: brightness(1) saturate(1.08) contrast(1.06) blur(0); }
  to { transform: scale(1.02); }
}
@keyframes sp-flicker {
  from { opacity: 0; }
  14% { opacity: 0.75; }
  21% { opacity: 0.56; }
  29% { opacity: 0.82; }
  40% { opacity: 0.6; }
  51% { opacity: 0.78; }
  60% { opacity: 0.58; }
  71% { opacity: 0.76; }
  83% { opacity: 0.62; }
  to { opacity: 0.7; }
}
@keyframes sp-aura {
  from { opacity: 0; transform: scale(0.6); }
  45% { opacity: 1; }
}
@keyframes sp-sweep {
  from { opacity: 1; transform: translateX(-160%) skewX(-12deg); }
  to { opacity: 1; transform: translateX(400%) skewX(-12deg); }
}
@keyframes sp-trace { from { stroke-dashoffset: 1; } }
@keyframes sp-kalash { from { opacity: 0; transform: scale(0.4); } }
@keyframes sp-spark {
  from { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  30% { opacity: 0.55; }
  45% { opacity: 0.95; }
  65% { opacity: 0.5; }
  to { opacity: 0; transform: translate(var(--dx), -110px) scale(0.35); }
}
@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-rise-text { from { opacity: 0; transform: translateY(6px); } }
@keyframes sp-draw { from { opacity: 0; transform: scaleX(0.2); } }
@keyframes sp-write {
  from { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  15% { opacity: 1; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes sp-flare { to { transform: scale(36); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

/* Short screens, such as a laptop with a small window or a phone held sideways. */
@media (max-height: 540px) {
  .splash { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .sp-art { width: min(36vh, 72vw); height: min(65.2vh, 130.4vw); }
  .sp-title { margin-top: 8px; font-size: 34px; }
  .sp-rule { margin: 3px 0 5px; }
  .sp-credit { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Without motion: the murti, arch, name and credit are simply there, the
   murti comes softly out of the dark without moving, and the screen fades away on time. */
@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-out 0.4s ease 3s forwards !important; }
  .is-lit > .sp-photo { animation: sp-fade 0.8s ease 0.1s both !important; }
}

/* ---------- Sung recording, on the reader page of a pooja that has one ---------- */

.rec { max-width: 30rem; margin: 0 auto 1.4rem; padding: 0.6rem 1rem 0.55rem 0.6rem; border: 1px solid var(--brass-line); border-radius: 1.6rem; background: var(--field); }
.rec-row { display: flex; align-items: center; gap: 0.75rem; }
.rec-play { display: inline-grid; place-items: center; flex: none; width: max(3rem, 52px); height: max(3rem, 52px); padding: 0; border: 1px solid var(--brass-line); border-radius: 50%; color: var(--brass-text); background: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.rec-play .icon { width: 1.35rem; height: 1.35rem; }
.rec-play:hover { border-color: var(--brass); background: var(--brass-wash); }
.rec-play:active { transform: scale(0.97); }
.rec-play[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash-strong); box-shadow: inset 0 0 0 1px var(--brass); }
.rec-play:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.rec-main { flex: 1; min-width: 0; }
.rec-title { display: flex; align-items: center; gap: 0.35rem; margin: 0; font: 600 var(--fs-sm)/1.4 var(--font-ui); color: var(--brass-text); }
.rec-title .icon { width: 1.1em; height: 1.1em; }
/* The slider is the progress trail: a hairline gilded as far as it has played, with the sindoor lozenge at the place. */
.rec-seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.7rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: none; }
.rec-seek:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.rec-seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--brass) var(--p, 0%), var(--hair) var(--p, 0%)); }
.rec-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 0.8rem; height: 0.8rem; margin-top: calc(1px - 0.4rem); border: 0; border-radius: 0; background: var(--sindoor); transform: rotate(45deg); }
.rec-seek::-moz-range-track { height: 1px; background: var(--hair); }
.rec-seek::-moz-range-progress { height: 2px; background: var(--brass); }
.rec-seek::-moz-range-thumb { width: 0.7rem; height: 0.7rem; border: 0; border-radius: 0; background: var(--sindoor); transform: rotate(45deg); }
.rec-time { display: flex; justify-content: space-between; margin: -0.1rem 0 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-parts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.1rem 0.4rem; }
.rec-parts .chip { background: none; cursor: pointer; }
.rec-parts .chip:hover { background: var(--brass-wash); }
.rec-parts .chip[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash-strong); box-shadow: inset 0 0 0 1px var(--brass); }
.rec-credit { margin: 0.35rem 0 0 0.4rem; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
/* While a text is heard (sung or read aloud) the page keeps its marble, with only the diya glow behind the shrine,
   and Listen stays the sindoor primary so its "Pause" stays readable. */
.reader.is-listening { background: none; }
.reader-bar .btn-primary[aria-pressed="true"] { background: var(--sindoor-fill); border-color: var(--sindoor-fill); box-shadow: var(--lift); }
/* A row's tags keep their own width where the row is laid out as a grid (wide screens). */
.row-main > .row-tag { justify-self: start; }
/* After the verse (texts read verse by verse), the player stands clear of the shrine and its commentary. */
.reader > .rec, .page-body:not(.scroll-page) > .rec { margin-top: 1.4rem; }