/* गीताभ्यासः — visual system
   Structure borrowed from the printed Sanskrit commentary: mūla text in a
   ruled block, analysis below as pratīka + gloss, enumerated in the margin.
   Brick is rubric (structure), olive-gold is annotation, sepia is content.

   Palette after the miniature-painting tradition: indigo carries headings and
   rules, vermilion the rubric and anything active, saffron the accents, gold
   the ornament, malachite the correct answer. Error is a deep cool crimson
   (#8f1d3a) precisely so it cannot be read as the bright vermilion rubric;
   ok/err stay semantic, never decorative. */

:root{
  --paper:#fdf6e8; --card:#fffcf3; --ink:#2a2418; --faint:#6a6052;
  --line:#e6dac0; --rule:#c3ae7f;
  --indigo:#23347a; --indigo-soft:#e3e6f3;
  --lac:#d1381f; --lac-deep:#a82a13; --lac-soft:#fbe4dc;
  --gold:#b8892b; --gold-soft:#f3e7c6; --saffron:#e89923;
  /* Gold is an ornament colour: 2.8:1 on paper, too weak for small text.
     Anything that has to be *read* uses this darker bronze instead. */
  --gold-ink:#7d5a11;
  --ok:#1f7a5a; --ok-bg:#dcefe5; --err:#8f1d3a; --err-bg:#f7dde3;
  --chip:#f0e6cf;
  /* A printed page has no night mode; keep controls light as well. */
  color-scheme:light;

  --f-display:'Rozha One','Noto Serif Devanagari',serif;
  --f-sk:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  --f-ui:'Mukta','Noto Sans Devanagari',system-ui,sans-serif;
}

/* The page in another लिपि. Tiro Telugu and Tiro Kannada are John Hudson's
   companions to the Tiro Devanagari Sanskrit above — the same hand, the same
   book, so choosing a script changes the script and nothing else. Rozha One is
   Devanagari-only and its display sizes fall back to the reading face rather
   than to whatever the browser has: the masthead is the first thing anyone
   sees. lipi.js fetches each of these only when it is chosen. */
:root[data-lipi="telugu"]{
  --f-display:'Tiro Telugu','Noto Serif Telugu',serif;
  --f-sk:'Tiro Telugu','Noto Serif Telugu',serif;
  --f-ui:'Noto Sans Telugu',system-ui,sans-serif;
}
:root[data-lipi="kannada"]{
  --f-display:'Tiro Kannada','Noto Serif Kannada',serif;
  --f-sk:'Tiro Kannada','Noto Serif Kannada',serif;
  --f-ui:'Noto Sans Kannada',system-ui,sans-serif;
}
:root[data-lipi="tamil"]{
  --f-display:'Tiro Tamil','Noto Serif Tamil',serif;
  --f-sk:'Tiro Tamil','Noto Serif Tamil',serif;
  --f-ui:'Noto Sans Tamil',system-ui,sans-serif;
}
/* No Tiro face exists for Malayalam; Noto Serif is the nearest book hand. */
:root[data-lipi="malayalam"]{
  --f-display:'Noto Serif Malayalam',serif;
  --f-sk:'Noto Serif Malayalam',serif;
  --f-ui:'Noto Sans Malayalam',system-ui,sans-serif;
}
/* Gentium is the face IAST is normally printed in, and carries every mark it
   needs — ṛ ṝ ṭ ḍ ṇ ñ ṅ ś ṣ ṃ ḥ m̐ — rather than composing them. */
:root[data-lipi="iast"]{
  --f-display:'Gentium Book Plus',Georgia,serif;
  --f-sk:'Gentium Book Plus',Georgia,serif;
}

/* The script picker: six buttons, each the letter 'a' set in the script it
   chooses. Sized a little larger than the text around it because a single
   akshara at 14px is a smudge, and it is the whole label. */
.lipi{display:inline-flex; gap:14px; align-items:center}
.lipibtn{
  font-size:19px; line-height:1; padding:2px 3px 4px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--faint); cursor:pointer; font-family:inherit;
}
.lipibtn:hover{color:var(--ink)}
.lipibtn:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.lipibtn.active{color:var(--lac); border-bottom-color:var(--lac)}
/* Each specimen in its own face, whatever the page is set in. */
.lipibtn[data-k="devanagari"]{font-family:'Tiro Devanagari Sanskrit',serif}
.lipibtn[data-k="telugu"]{font-family:'Tiro Telugu',serif}
.lipibtn[data-k="kannada"]{font-family:'Tiro Kannada',serif}
.lipibtn[data-k="tamil"]{font-family:'Tiro Tamil','Noto Serif Tamil',serif}
.lipibtn[data-k="malayalam"]{font-family:'Noto Serif Malayalam',serif}
.lipibtn[data-k="iast"]{font-family:'Gentium Book Plus',Georgia,serif; font-style:italic}
/* On the title page it sits at the foot of the card, under a hairline, the way
   an edition sets its colophon — a reader's setting, not part of the title. */
.gatelipi{
  justify-content:center; gap:22px;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--rule);
}

*{box-sizing:border-box; margin:0}
/* Required: the flex/grid display rules below outrank the UA hidden rule. */
[hidden]{display:none!important}

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.6;
  padding:0 18px 72px;
  -webkit-font-smoothing:antialiased;
}
.sk{font-family:var(--f-sk)}
.wrap{max-width:760px; margin:0 auto}

/* ---------- masthead ---------- */
header{padding:22px 0 6px; text-align:center}
.brand{
  font-family:var(--f-display); font-size:54px; line-height:1.2;
  color:var(--indigo); text-wrap:balance;
}
.tagline{color:var(--faint); font-size:14.5px; margin-top:1px}
/* Provenance, set as a colophon line rather than a badge. */
.draftchip{
  display:block; margin-top:12px; font-size:12.5px; color:var(--gold);
  letter-spacing:.04em;
}

/* ---------- mode: two readings of the same text, not a switch ---------- */
.modebar{display:flex; justify-content:center; margin:20px 0 2px}
.modes{display:inline-flex; gap:26px}
.mode{
  font-family:inherit; font-size:15.5px; padding:3px 2px 6px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--faint); cursor:pointer; letter-spacing:.02em;
}
.mode:hover{color:var(--ink)}
.mode:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.mode.active{color:var(--lac); border-bottom-color:var(--lac); font-weight:700}

/* ---------- progress: a filling rule, not a capsule ---------- */
.progress{display:flex; align-items:center; gap:12px; margin:18px 0 4px}
.pbar{flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden}
.pfill{height:100%; background:var(--saffron); width:0%; transition:width .5s ease}
.ptext{font-size:13px; color:var(--faint); white-space:nowrap; letter-spacing:.03em}

/* ---------- verse index ---------- */
.versenav{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 26px; justify-content:center}
.vchip{
  font-family:var(--f-display); font-size:17px; width:44px; height:44px;
  border:1px solid var(--line); background:none; color:var(--faint);
  cursor:pointer; position:relative; border-radius:2px; transition:none;
}
.vchip:hover{border-color:var(--lac); color:var(--lac)}
.vchip:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.vchip.done{color:var(--ink); border-color:var(--rule)}
.vchip.done::after{
  content:''; position:absolute; inset:auto 0 5px 0; margin:0 auto;
  width:14px; height:2px; background:var(--saffron); border-radius:1px;
}
.vchip.active{background:var(--lac); border-color:var(--lac); color:var(--paper)}
.vchip.active.done::after{background:var(--paper); opacity:.7}

/* ---------- the verse: the page's centrepiece ---------- */
.shloka{
  background:var(--indigo-soft); padding:32px 20px 34px; text-align:center;
  margin-bottom:26px;
  border-top:3px double var(--indigo); border-bottom:3px double var(--indigo);
}
.speaker{
  font-family:var(--f-ui); font-weight:700; color:var(--lac);
  font-size:14px; letter-spacing:.05em; margin-bottom:14px;
}
.sline{font-size:25px; line-height:2.1; letter-spacing:.005em}

/* ---------- analysis tabs ---------- */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--rule); margin-bottom:6px}
.tab{
  flex:1; text-align:center; padding:10px 3px 9px; font-size:16px;
  min-width:0; white-space:nowrap;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--faint); cursor:pointer; font-family:inherit; margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--lac); outline-offset:-2px}
.tab.active{color:var(--lac); border-bottom-color:var(--lac); font-weight:700}
.tab .cnt{font-size:12px; color:var(--faint); letter-spacing:.03em}

/* ---------- a commentary entry: rubric margin + pratīka + gloss ---------- */
/* Flow layout with an absolute margin, not a grid: `grid-row: 1 / -1` cannot
   span an implicit grid, so the margin rule collapsed to a single row. */
.card{
  position:relative; padding:22px 0 20px 2.5rem;
  border-bottom:1px solid var(--line);
}
.card:last-child{border-bottom:none}
.card::before{
  content:attr(data-n); position:absolute; left:0; top:30px;
  font-family:var(--f-display); font-size:15px; color:var(--lac); line-height:1;
}
.card::after{
  content:''; position:absolute; left:1.55rem; top:22px; bottom:16px;
  width:1px; background:var(--rule);
}
.card > *{min-width:0}
/* The entry number is read, so it takes the bronze, not the 2.9:1 gold. */
.card.done::before{color:var(--gold-ink)}

/* the pratīka — the form under analysis */
.qword{font-size:27px; line-height:1.5; margin-bottom:2px; color:var(--ink)}
.qword .mark{
  font-family:var(--f-ui); font-size:12px; color:var(--gold);
  letter-spacing:.05em; margin-left:12px; vertical-align:middle;
  white-space:nowrap;
}
/* label | answers, as apparatus beside content */
.step{display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:6px 14px;
  align-items:baseline; margin-top:13px}
.steplabel{
  font-size:12px; color:var(--indigo); letter-spacing:.07em; line-height:1.7;
  text-align:right;
}
.opts{display:flex; flex-wrap:wrap; gap:7px}
.opt{
  font-size:16.5px; padding:6px 14px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer;
  font-family:inherit; line-height:1.5; border-radius:2px;
}
.opt.sk2{font-family:var(--f-sk)}
.opt:hover:not(:disabled){border-color:var(--lac); color:var(--lac)}
.opt:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.opt.right{background:var(--ok-bg); border-color:var(--ok); color:var(--ok); font-weight:500}
.opt.wrong{background:var(--err-bg); border-color:var(--err); color:var(--err)}
.opt:disabled{cursor:default}

.note{
  margin-top:14px; font-size:14.5px; color:var(--ok); display:none;
  border-left:2px solid var(--ok); padding:2px 0 2px 12px;
}
.note.show{display:block}

/* ---------- typed answers (hard mode) ---------- */
.inrow{display:flex; gap:8px; align-items:stretch}
.tin{
  flex:1; min-width:0; font-size:18px; font-family:var(--f-sk);
  padding:9px 12px; border:1px solid var(--line); border-radius:2px;
  background:var(--card); color:var(--ink);
}
.tin:focus{outline:2px solid var(--lac); outline-offset:-1px; border-color:var(--lac)}
.ime{
  font-family:var(--f-sk); font-size:18px; width:44px;
  border:1px solid var(--lac); border-radius:2px; background:var(--lac);
  color:var(--paper); cursor:pointer;
}
.ime.off{background:none; color:var(--faint); border-color:var(--line); text-decoration:line-through}
.ime:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.ime:disabled{opacity:.5; cursor:default}
.preview{min-height:1.6em; font-size:19px; margin-top:6px; color:var(--lac-deep)}

.btnrow{display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; align-items:center}
.btn{
  font-family:inherit; font-size:15px; padding:6px 17px; border-radius:2px;
  border:1px solid var(--lac); background:var(--lac); color:var(--paper);
  cursor:pointer; letter-spacing:.02em;
}
.btn.sec{background:none; color:var(--lac)}
.btn.sec:hover{background:var(--lac-soft)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.tokfb{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.tok{font-family:var(--f-sk); font-size:17px; padding:2px 11px; border-radius:2px}
.tok.good{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok)}
.tok.bad{background:var(--err-bg); color:var(--err); border:1px solid var(--err)}
.hinttext{font-size:14.5px; color:var(--gold-ink); margin-top:9px}

details.help{margin:14px 0 4px; font-size:13.5px; color:var(--faint)}
details.help summary{cursor:pointer; color:var(--gold-ink); letter-spacing:.03em;
  font-family:var(--f-sk)}
details.help summary:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
details.help table{margin-top:8px}
details.help td{padding:1px 12px 1px 0}
details.help .dv{font-family:var(--f-sk); color:var(--ink)}

/* ---------- anvaya ---------- */
.tilebox{
  display:flex; flex-wrap:wrap; gap:7px; min-height:52px; padding:11px;
  border:1px dashed var(--rule); margin-bottom:11px; border-radius:2px;
}
.tilebox.answer{border-style:solid; border-color:var(--line); background:var(--card)}
.tile{
  font-size:18px; padding:6px 13px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; font-family:var(--f-sk);
  color:var(--ink); border-radius:2px;
}
.tile:hover{border-color:var(--lac); color:var(--lac)}
.tile:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.tile.placed{background:var(--lac-soft); border-color:var(--lac)}
.tile.locked{background:var(--ok-bg); border-color:var(--ok); color:var(--ok); cursor:default}
.tile.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.anvdone{font-size:14.5px; color:var(--ok); display:none; margin-top:6px}
.anvdone.show{display:block}

.reset{
  font-size:13px; color:var(--faint); background:none; border:none;
  cursor:pointer; text-decoration:underline; font-family:inherit;
  padding:0; margin-top:12px; display:block;
}
.reset:hover{color:var(--lac)}
.reset:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.empty{color:var(--faint); font-size:14.5px; padding:20px 2px}
.loading{text-align:center; color:var(--faint); padding:48px 0; font-size:15px}

footer{
  margin-top:44px; text-align:center; color:var(--faint); font-size:13px;
  border-top:1px solid var(--line); padding-top:18px; line-height:1.75;
}

/* ---------- account strip ---------- */
.acct{display:flex; align-items:center; justify-content:flex-end; gap:11px;
  padding:12px 0 0; min-height:32px; font-size:13.5px}
.acct .who{display:flex; align-items:center; gap:8px; color:var(--faint)}
.acct .who img{width:24px; height:24px; border-radius:50%; border:1px solid var(--line)}
.acct .who b{color:var(--ink); font-weight:500}
.gbtn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
  font-size:13.5px; padding:5px 13px; border-radius:2px;
  border:1px solid var(--line); background:none; color:var(--ink);
  cursor:pointer; text-decoration:none;
}
.gbtn:hover{border-color:var(--lac)}
.gbtn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.gbtn svg{width:15px; height:15px; flex:none}
.linkbtn{font-size:13.5px; color:var(--faint); background:none; border:none;
  cursor:pointer; text-decoration:underline; font-family:inherit; padding:0}
.linkbtn:hover{color:var(--lac)}
.linkbtn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}

.syncnote{font-size:12.5px; color:var(--faint); text-align:right; min-height:1.2em;
  padding-top:3px; letter-spacing:.02em}
.syncnote.err{color:var(--err)}
.syncnote.ok{color:var(--ok)}
.banner{margin:12px 0 0; padding:9px 14px; border-radius:2px; font-size:14px;
  background:var(--err-bg); color:var(--err); border:1px solid var(--err)}

/* ---------- login ---------- */
.gate{
  position:fixed; inset:0; z-index:10; overflow-y:auto;
  display:flex; align-items:center; justify-content:center;
  /* Transparent so the plate behind the site shows through; body's paper is
     the ground when there is no art. */
  background:none; padding:32px 18px;
}
.gatecard{
  position:relative; z-index:1;
  width:100%; max-width:420px; text-align:center; background:var(--card);
  padding:40px 30px 30px;
  border-top:3px double var(--lac); border-bottom:3px double var(--lac);
}
/* The mark sits above the title as a printer's device sits above a title page:
   centred, small, and with enough air that it reads as an ornament and not as
   a logotype competing with the name under it. */
.gatemark{display:block; margin:0 auto 14px; width:86px; height:86px}

.gatebrand{
  font-family:var(--f-display); font-weight:400; font-size:48px; line-height:1.22;
  color:var(--lac); margin:0; text-wrap:balance;
}
.gatetag{color:var(--faint); font-size:14.5px; margin:3px 0 0}
.epigraph{
  margin:28px 0 30px; padding:18px 4px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.epiline{display:block; font-size:18.5px; line-height:1.95; color:var(--lac-deep)}
.epiref{display:block; font-size:12.5px; color:var(--gold-ink); font-style:normal;
  margin-top:9px; letter-spacing:.04em}
.gateactions{display:flex; flex-direction:column; gap:13px}
.gateloading{color:var(--faint); font-size:14.5px; padding:14px 0}
.gbtn.big{
  justify-content:center; font-size:15.5px; padding:11px 20px; border-radius:2px;
  border-color:var(--lac); color:var(--lac);
}
.gbtn.big svg{width:18px; height:18px}
.gbtn.big:hover{background:var(--lac-soft)}
.gbtn.big:disabled{opacity:.4; cursor:default; border-color:var(--line); color:var(--faint)}
.gbtn.big:disabled:hover{background:none}
.gbtn.ghost{justify-content:center; font-size:15.5px; padding:11px 20px;
  border-radius:2px; background:none; color:var(--faint)}
.gbtn.ghost:hover{color:var(--lac); border-color:var(--lac)}
.gatesplit{display:flex; align-items:center; gap:13px; color:var(--faint); font-size:12.5px}
.gatesplit::before,.gatesplit::after{content:''; flex:1; height:1px; background:var(--rule)}
.gatenote{font-size:13px; line-height:1.8; color:var(--faint); margin:6px 0 0}
.gatewarn{font-size:12.5px; color:var(--gold-ink); margin:-4px 0 0}
.gateerror{margin-bottom:16px; padding:9px 14px; border-radius:2px; font-size:13.5px;
  background:var(--err-bg); color:var(--err); border:1px solid var(--err)}
.gatefoot{margin:28px 0 0; padding-top:16px; border-top:1px solid var(--rule);
  font-size:12.5px; line-height:1.75; color:var(--faint)}

/* ---------- the plate behind the site ----------
   One painting, chosen at random per load, fixed behind every screen with an
   ivory wash over it so the ground still reads as paper. Two moods, because
   the screens ask opposite things of it: `title` lets the plate come forward
   behind a card that is opaque anyway; `reading` pushes it back and lets
   `.page` lay an opaque paper sheet over the measure, so the art shows in the
   margins and never behind a glyph. See docs/ROADMAP.md §4. */
.siteart{
  position:fixed; inset:0; z-index:-1; margin:0; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}
.siteart.is-shown{opacity:1}
.siteart picture{display:block; width:100%; height:100%}
.siteart img{width:100%; height:100%; object-fit:cover; display:block}
/* Lighter at head and foot, as a plate printed onto the page would sit. The
   wash is what keeps the screen paper-coloured: without it this is the one
   dark surface in an app that has no dark mode by decision. */
.siteart::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(253,246,232,.90) 0%, rgba(253,246,232,.55) 20%,
    rgba(253,246,232,.55) 58%, rgba(253,246,232,.93) 100%);
}
/* No panel: the painting runs under the whole reading page, laid back behind
   this much paper. Sai chose the level by eye at 0.92 (2026-08-29) after
   walking it up from 0.84, and chose to keep the original vermilion rather
   than a palette deepened to survive a stronger wash.

   Measured at 0.92 against the darkest pixel of the darkest of the four
   paintings — the worst case, not the average:

       ink 12.03:1   indigo 8.90:1   gold-ink 4.91:1   faint 4.82:1
       ok 4.11:1     lac (rubric) 3.82:1

   So the shloka, the apparatus labels and the secondary text all clear 4.5:1;
   the malachite and the vermilion rubric do not. The rubric cannot: #d1381f is
   only 4.54:1 on bare paper, so any visible painting at all puts it under.
   That is a deliberate, measured trade — see docs/ROADMAP.md §4. Lowering
   --wash deepens the painting and costs more; re-measure before you do. */
:root[data-artmood="reading"]{--wash:.92}
:root[data-artmood="reading"] .siteart::after{
  background:linear-gradient(to bottom,
    rgba(253,246,232,calc(var(--wash) + .04)) 0%, rgba(253,246,232,var(--wash)) 10%,
    rgba(253,246,232,var(--wash)) 90%, rgba(253,246,232,calc(var(--wash) + .04)) 100%);
}

/* ---------- अनुक्रमणिका: the chapter list, set in the margin ----------
   A printed edition puts its contents beside the text block, not in a panel.
   So: no ground, no border, no scrollbar of its own — entries are text with a
   number in the margin, the current one in rubric, exactly as the verse index
   and the tab line are set. It is `fixed` so it stays with the reader down a
   long chapter, and it disappears below 1180px where there is no margin to
   put it in; the colophon's selector is the control there and remains the
   accessible one everywhere. */
.chapindex{
  position:fixed; top:50%; transform:translateY(-50%);
  left:max(14px, calc(50vw - 648px/2 - 250px));
  width:216px; z-index:2;
  display:flex; flex-direction:column; gap:1px;
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 0; text-align:right;
}
.chapindex::-webkit-scrollbar{width:0}
.chapentry{
  display:flex; align-items:baseline; justify-content:flex-end; gap:9px;
  background:none; border:none; padding:2px 0; cursor:pointer;
  font-family:var(--f-sk); color:var(--faint); text-align:right;
  line-height:1.5;
}
.chapnum{
  font-family:var(--f-display); font-size:14px; color:var(--rule);
  min-width:1.4em; text-align:right; order:2;
}
.chapname{font-size:17.5px; letter-spacing:.01em}
.chapentry:hover{color:var(--ink)}
.chapentry:hover .chapnum{color:var(--gold-ink)}
.chapentry:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
/* A chapter with no exercises yet is listed but set back. */
.chapentry.bare{opacity:.45}
.chapentry.bare:hover{opacity:.85}
.chapentry.active{color:var(--lac)}
.chapentry.active .chapnum{color:var(--lac)}
.chapentry.active .chapname{font-size:18.5px}

.chaphead{display:none}

/* No margin to sit in — the index becomes a panel under the running head,
   opened by the chapter name. Not a native dropdown: an <option> is drawn by
   the platform, and on Android that is where the conjuncts break. */
@media (max-width:1179px){
  .chapindex{
    display:none; position:absolute; top:calc(100% - 5px); left:0;
    transform:none; width:min(330px, calc(100vw - 48px));
    max-height:min(60vh, 420px); text-align:left; padding:7px 0; z-index:20;
    background:var(--paper); border:1px solid var(--rule); border-radius:2px;
    box-shadow:0 7px 26px rgba(36,29,20,.14);
  }
  .chapindex.open{display:flex}
  .chapindex .chapentry{justify-content:flex-start; text-align:left;
    padding:4px 15px; width:100%}
  .chapindex .chapnum{order:0; min-width:1.5em; text-align:left}
  .chapindex .chapname{font-size:16.5px}
}
@media (min-width:1180px){
  .chaphead{display:block; flex:1 1 auto; min-width:0; font-size:14.5px;
    color:var(--faint); letter-spacing:.01em}
  .chapbtn{display:none}
}

/* The plate credit, set as a printed edition sets one: small, in bronze on
   paper — never gold, which cannot carry text.

   It belongs in the page flow, at the foot of the reading. Pinned to the
   viewport instead (which is where it sat briefly) it read as a footnote that
   would not stay put: the painting is `position:fixed`, so the credit held
   still while the text scrolled past it, and because the apparatus panels have
   no ground of their own it showed through them mid-column. In flow it passes
   under the reading once, at the end, and collides with nothing. */
.artcredit{
  display:block; margin:0; padding:0 20px 4px; text-align:center;
  font-size:12px; line-height:1.75; letter-spacing:.02em;
  color:var(--gold-ink); text-wrap:balance;
}

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{padding:0 14px 60px}
  .brand{font-size:38px}
  .sline{font-size:21px; line-height:2}
  .shloka{padding:24px 14px 26px}
  .qword{font-size:23px}
  .card{padding-left:1.95rem}
  .card::before{font-size:13.5px; top:28px}
  .card::after{left:1.15rem}
  /* Labels sit above their answers once the margin gets tight. */
  .step{grid-template-columns:minmax(0,1fr); gap:5px}
  .steplabel{text-align:left}
  .modes{gap:20px}
}
@media (max-width:420px){
  /* Keeps the second pada and its ॥ on one line on a phone. */
  .sline{font-size:19px; line-height:1.95}
  .gatecard{padding:32px 20px 24px}
  .gatebrand{font-size:39px}
  .artcredit{font-size:11px; padding:0 14px 4px}
  .epiline{font-size:16.5px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* The anvaya instruction is a sentence, not a margin label — let it read
   as prose rather than inheriting the apparatus treatment. */
.steplabel.anv{
  text-align:left; font-size:13.5px; color:var(--faint); letter-spacing:normal;
  line-height:1.65; margin-bottom:12px;
}
/* Column-two wrapper inside a typed-answer step. */
.step > div{min-width:0}

/* Empty feedback rows must not reserve space. The preview keeps its height
   while typing so the layout doesn't jump, but collapses once solved. */
.tokfb:empty, .hinttext:empty{margin-top:0}
.card.done .preview{min-height:0}

/* ---------- chapter selection ---------- */
.chapbar{
  display:flex; align-items:center; justify-content:center; gap:11px;
  margin:18px 0 2px; flex-wrap:wrap;
}
.chaplabel{font-size:12px; color:var(--lac); letter-spacing:.07em}
.chapsel{
  font-family:var(--f-sk); font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:2px;
  padding:6px 30px 6px 11px; max-width:min(100%, 340px); cursor:pointer;
  /* Own chevron: the platform one ignores our palette. */
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.chapsel:hover{border-color:var(--lac)}
.chapsel:focus-visible{outline:2px solid var(--lac); outline-offset:2px}

/* A verse whose exercises have not been entered yet. */
.vchip.bare{opacity:.45}
.vchip.bare:hover{opacity:.8}
.empty{line-height:1.9; font-family:var(--f-sk)}
.hinttext, .anvdone{font-family:var(--f-sk)}

/* Five tabs need to fit a phone without wrapping. */
@media (max-width:560px){
  .tab{font-size:14px; padding:9px 2px 8px}
  .tab .cnt{font-size:11px}
}

/* Seven tabs no longer divide a phone evenly, so let the row wrap and let each
   tab take its own width rather than an equal share of nothing. */
@media (max-width:620px){
  .tabs{flex-wrap:wrap; row-gap:0}
  .tab{flex:0 1 auto; padding:8px 12px 7px}
}

/* ---------- रूपाणि : the paradigm under a solved धातु / विभक्ति ---------- */
.rupabox:empty{display:none}
.rupa{margin-top:12px}
.rupa > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
  font-size:15px; color:var(--indigo);
}
.rupa > summary::-webkit-details-marker{display:none}
.rupa > summary::before{content:'▸'; font-size:11px; color:var(--gold); transition:transform .15s}
.rupa[open] > summary::before{transform:rotate(90deg)}
.rupacap{margin:8px 0 6px; font-size:14px; color:var(--gold-ink)}
.rupascroll{overflow-x:auto; max-width:100%}
.rupatab{border-collapse:collapse; font-size:15px; line-height:1.35}
.rupatab th{font-family:var(--f-ui, inherit); font-weight:400; font-size:12.5px;
  color:var(--faint); text-align:left; padding:3px 12px 3px 0; white-space:nowrap}
.rupatab td{padding:3px 14px 3px 0; color:var(--ink); vertical-align:top}
.rupatab tr + tr td, .rupatab tr + tr th{border-top:1px dotted var(--rule)}
.rupatab td.hit{color:var(--ok); font-weight:600}
.rupalink{display:inline-block; margin-top:8px; font-size:13.5px; color:var(--indigo);
  text-decoration:none; border-bottom:1px dotted var(--indigo)}
.rupalink:hover{color:var(--lac-deep); border-bottom-color:var(--lac-deep)}
.rupa.only .rupalink{margin-top:0}

/* प्रक्रिया: one step per line — the form, then the sūtra that made it */
.pksteps{list-style:none; margin:8px 0 0; padding:0}
.pksteps li{display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline;
  padding:4px 0; border-top:1px dotted var(--rule)}
.pksteps li:first-child{border-top:none}
.pkform{font-size:15.5px; color:var(--ink); min-width:9.5em}
.pksutra{font-size:13.5px; color:var(--gold-ink); font-family:var(--f-sk)}
.pkfinal{margin-top:6px; font-size:16px; color:var(--ok); font-weight:600}

/* ---------- व्याकरणम् : concept explanations ---------- */
.explainbox:empty{display:none}
.explain{margin-top:13px; border-left:2px solid var(--indigo);
  padding-left:13px; background:var(--indigo-soft); padding:11px 13px; border-radius:2px}
.chead{
  font-size:12px; color:var(--indigo); letter-spacing:.06em; margin-bottom:6px;
}
.concept{margin-bottom:8px}
.concept:last-child{margin-bottom:0}
.cterm{
  cursor:pointer; font-size:17px; color:var(--indigo); list-style:none;
  display:inline-flex; align-items:center; gap:7px;
}
.cterm::-webkit-details-marker{display:none}
.cterm::before{content:'▸'; font-size:11px; color:var(--gold); transition:transform .15s}
.concept[open] .cterm::before{transform:rotate(90deg)}
.cterm:hover{color:var(--lac-deep)}
.concept summary:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.cbody{margin:7px 0 4px}
.crow{display:grid; grid-template-columns:4.6rem minmax(0,1fr); gap:3px 11px;
  margin-bottom:5px; align-items:baseline}
.clab{font-size:11.5px; color:var(--faint); letter-spacing:.05em; text-align:right}
.cval{font-size:15px; line-height:1.75; color:var(--ink)}
.cval b{color:var(--gold-ink); font-weight:500}
@media (max-width:560px){
  .crow{grid-template-columns:minmax(0,1fr); gap:1px}
  .clab{text-align:left}
}

/* A group tab holds several kinds, so each gets a heading. */
.kindhead{
  font-family:var(--f-sk); font-weight:400; font-size:24px; letter-spacing:.03em;
  color:var(--indigo); margin:24px 0 3px; padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.kindhead:first-child{margin-top:8px}

/* ================= layout =================
   Two columns: verse navigation stands beside the work instead of dumping 47
   chips into the reading flow, and the shloka stays in view while you scroll
   its exercises. */
.wrap{max-width:1180px}

.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:13px 0 11px; margin-bottom:2px;
  border-bottom:2px solid var(--indigo);
  position:sticky; top:0; z-index:6; background:var(--paper);
}
.topbar .brand{font-size:31px; line-height:1; margin-right:auto}
.topbar .modes{gap:15px}
.topbar .mode{font-size:14.5px; padding:2px 1px 4px}
.topbar .acct{padding:0; min-height:0; font-size:13px}
.topbar .chapsel{font-size:14px; padding:5px 28px 5px 10px; max-width:270px}

.layout{
  display:grid; grid-template-columns:196px minmax(0,1fr);
  gap:34px; align-items:start; margin-top:20px;
}

/* --- verse pane --- */
.versepane{position:sticky; top:78px}
.panehead{margin-bottom:9px}
.panehead .ptext{display:block; font-size:11.5px; margin-bottom:6px; white-space:normal}
.versepane .avbar{height:3px}
.versenav{
  display:flex; flex-direction:column; gap:1px; margin:0; justify-content:flex-start;
  max-height:calc(100vh - 205px); overflow-y:auto; overscroll-behavior:contain;
}
.versenav .vchip{
  width:100%; height:auto; text-align:left; padding:5px 11px;
  border:none; border-left:3px solid transparent; border-radius:0;
  display:flex; align-items:center; font-size:15.5px; color:var(--faint);
}
.versenav .vchip:hover{background:var(--indigo-soft); color:var(--ink)}
.versenav .vchip.active{
  background:var(--lac-soft); border-left-color:var(--lac);
  color:var(--lac); font-weight:400;
}
.versenav .vchip.done{color:var(--ink)}
.versenav .vchip.done::after{
  content:'✓'; position:static; inset:auto; width:auto; height:auto;
  background:none; border-radius:0; margin-left:auto;
  font-family:var(--f-ui); font-size:11px; color:var(--ok);
}
.versenav .vchip.active.done::after{color:var(--lac)}
.versenav .vchip.bare{opacity:.4}

/* --- work pane --- */
.workpane{min-width:0}
.shloka{position:sticky; top:74px; z-index:3; margin-bottom:18px}
.tabs{position:sticky; top:calc(74px + var(--shloka-h,0px)); z-index:2; background:var(--paper)}

@media (max-width:820px){
  .layout{grid-template-columns:minmax(0,1fr); gap:14px; margin-top:14px}
  .versepane{position:static}
  /* On a phone the verse list becomes a strip you swipe, not a wall. */
  .versenav{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; max-height:none;
    gap:3px; padding-bottom:5px;
  }
  .versenav .vchip{
    width:auto; flex:0 0 auto; padding:6px 12px;
    border-left:none; border-bottom:3px solid transparent;
  }
  .versenav .vchip.active{border-left-color:transparent; border-bottom-color:var(--lac)}
  .versenav .vchip.done::after{margin-left:6px}
  .shloka, .tabs{position:static}
  .topbar{gap:11px; padding:10px 0 9px}
  .topbar .brand{font-size:24px}
  .topbar .chapsel{max-width:100%; order:3; flex:1 1 100%}
}

/* ================= the page =================
   Set as a printed edition, not an interface. No sidebar, no tab row, no
   boxes: the verse holds the page, the analysis reads below it as commentary,
   choices are set as text rather than buttons, and every control is small and
   out of the way. */
body{padding:0 20px 80px}
.wrap{max-width:none}
/* A measure, not a panel. The painting is continuous behind it — Sai rejected
   the opaque sheet ("a plain color panel on top of artwork"), so readability
   is carried by the wash and the deepened palette instead. */
.page{max-width:648px; margin:0 auto; padding:22px 0 40px}

/* running head — chapter, level, reader; deliberately quiet */
.colophon{
  position:relative;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 0 12px; border-bottom:1px solid var(--rule); margin-bottom:4px;
}
/* Set as text, like every other control here, with the same bronze chevron the
   selector used so nothing about the running head looks different. */
.chapbtn{
  flex:1 1 auto; min-width:0; text-align:left;
  background:none; border:none; padding:2px 20px 2px 0; cursor:pointer;
  font-family:var(--f-sk); font-size:14.5px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-size:5px 5px, 5px 5px;
  background-position:right 6px center, right 1px center;
  background-repeat:no-repeat;
}
.chapbtn:hover{color:var(--ink)}
.chapbtn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
/* Kept for assistive tech, never seen. It is the one element on the page whose
   Devanagari a platform may refuse to shape — Android draws form-control text
   with its own text path, which broke the श्ल conjunct in गीताध्यानश्लोकाः
   while the identical string set as page text beside it was correct. So the
   visible chooser is .chapbtn and this carries no visual styling at all. */
.colophon .chapsel{
  position:absolute; width:1px; height:1px; padding:0; border:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.colophon .modes{gap:13px}
/* The controls are set as text in this design, not as buttons, so they read in
   the Sanskrit face too — a printed page does not change typeface to offer a
   choice. Mukta is left carrying only latin-free chrome. */
.colophon .mode{font-family:var(--f-sk); font-size:14px; padding:1px 0 2px;
  letter-spacing:.02em}
.colophon .acct{padding:0; min-height:0; font-size:12.5px}

/* the verse: the whole reason for the page */
.shloka{
  background:none; border:none; position:static;
  padding:44px 0 34px; margin:0; text-align:center;
}
/* उवाच is the verse speaking, not a label on it (Sai, 2026-08-29): same face
   and same ink as the shloka, just smaller. The wide UI tracking went with the
   sans face — it splits conjuncts in a serif Devanagari. */
.speaker{
  /* Explicit, not inherited: the superseded .speaker rule above still declares
     the UI face, and a later rule only wins for properties it declares. */
  font-family:var(--f-sk); font-weight:400; color:var(--ink);
  font-size:21px; letter-spacing:.01em; margin-bottom:18px;
}
.sline{font-size:29px; line-height:2.1; letter-spacing:.01em; color:var(--ink)}

.leafmark{text-align:center; color:var(--gold); font-size:15px; margin:2px 0 30px}

/* ॥ सन्धिः ॥ — a section head as an edition would set it */
.sechead{
  /* Tiro, like the विभाग nav and the पाठः formulae. These are Sanskrit
     grammatical terms read as words, not as ornament, and Rozha One's thin
     strokes thin further still in vermilion, which is the lightest ink here. */
  font-family:var(--f-sk); font-weight:400; font-size:20px; letter-spacing:.03em;
  color:var(--lac); text-align:center; margin:44px 0 4px;
  display:flex; align-items:center; gap:16px; border:none;
}
.sechead::before,.sechead::after{content:''; flex:1; height:1px; background:var(--rule)}
.sechead:first-child{margin-top:10px}

/* ---------- भाष्यम् — the commentary, set to be read ----------
   Not a card: cards are exercise apparatus and carry a rubric number and a
   margin rule. This is continuous prose, so it is set as a printed edition
   sets its भाष्य — a little smaller than the verse, generously leaded, with
   the paragraph indent doing the work a blank line would do on screen. */
.bhashya{
  font-family:var(--f-sk); font-size:17px; line-height:1.95;
  color:var(--ink); text-align:justify; hyphens:none;
  margin:2px 0 6px;
}
.bhashya p{margin:0; text-indent:1.6em}
/* The first paragraph opens flush, as the first line under a head always does. */
.bhashya p:first-child{text-indent:0}
.bhashya p + p{margin-top:.15em}
/* पदच्छेदः is a list of words, not prose: no indent, no justification, and
   set a touch looser so the + and · separators read. */
.bhashya.pada{text-align:left; line-height:1.9; color:var(--gold-ink)}
/* सरलभावार्थः — one paragraph of plain Sanskrit, set like the commentary it
   sits beside but a shade larger and unindented: it is a single paragraph, and
   an indent on a lone paragraph is a hanging gesture with nothing to hang off.
   Not justified either — the lines are few and justification at this measure
   would open rivers in a paragraph too short to close them. */
.bhavartha{
  font-family:var(--f-sk); font-size:18px; line-height:2;
  color:var(--ink); text-align:left; hyphens:none;
  margin:2px 0 6px;
}
.bhavartha p{margin:0; text-indent:0}
.bhashya.pada p{text-indent:0}
/* ---------- पाठः: recitation ----------
   A word being recited is marked the way a reader marks a book — a wash of
   colour behind the word, not a box, not a border, nothing that moves. The
   token keeps its place in the line exactly: no padding, no weight change, so
   nothing reflows as the highlight travels and the verse never twitches. */
/* पदपरिचयः on the reading page: every verse word can be tapped */
.pw{cursor:pointer; border-radius:2px}
.pw:hover{background:#f2e6c8}
.pw.sel{background:#f6dca3; box-shadow:0 0 0 2px #f6dca3}
/* क्रियापदानि: a finite verb, marked in indigo with a saffron rule under it —
   annotation, not rubric, so it does not read as a heading or an error. */
.pw.kriya{color:var(--indigo); border-bottom:2px solid var(--saffron, #e89923)}
.wordsheet{position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:min(680px,100vw); max-height:62vh; overflow-y:auto; z-index:60;
  background:var(--paper); border-top:2px solid var(--lac);
  box-shadow:0 -10px 34px rgba(42,36,24,.22); padding:12px 18px 18px;
  border-radius:6px 6px 0 0}
.wstop{display:flex; align-items:baseline; gap:12px; position:sticky; top:-12px;
  background:var(--paper); padding:6px 0 8px; border-bottom:1px solid var(--rule)}
.wsword{font-size:24px; color:var(--lac); flex:1; min-width:0; overflow-wrap:anywhere}
.wsref{font-size:13px; color:var(--faint)}
.wsplay,.wsclose{background:none; border:none; cursor:pointer; color:var(--indigo);
  font-size:20px; line-height:1; padding:4px 6px}
.wsgloss{margin:10px 0 2px; font-size:15px; color:var(--ink)}
.wsitem{padding:10px 0 4px; border-bottom:1px dotted var(--rule)}
.wshead{font-size:12px; color:var(--indigo); letter-spacing:.05em}
.wsline{font-size:16px; color:var(--ink); margin-top:2px}
.wsnote{font-size:14px; color:var(--faint); margin-top:3px}
.wsgo{margin-top:12px; background:none; border:none; border-bottom:1px dotted var(--indigo);
  color:var(--indigo); font-size:14.5px; cursor:pointer; padding:2px 0}
.ptok{cursor:pointer; border-radius:2px; transition:background-color .12s linear}
.ptok:hover{background:#f2e6c8}
.ptok.on{background:#fbe0a8; color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .ptok{transition:none} }

/* Beside the verse, not under it — in the margin the rubric numbers use, so a
   reader's eye passes down the text uninterrupted and the control is where a
   hand reaches rather than where a sentence ends. .pverse is the positioning
   context; the glyph is small and bronze until it is playing. */
/* The block must hug its longest line, or the control anchors to the 648px
   measure while the text sits centred and much narrower — which put the ▶ a
   long way out in the margin, nowhere near the words. fit-content shrinks the
   box to the text and margin:auto keeps it centred, so nothing about the
   verse's position on the page changes; only the box the control hangs off. */
.pverse.hasaudio{
  position:relative;
  width:fit-content; max-width:100%;
  margin-left:auto; margin-right:auto;
}
.pplay{
  position:absolute; left:-34px; top:9px;
  width:28px; height:28px; padding:0; line-height:28px; text-align:center;
  background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--gold-ink); opacity:.45;
  transition:opacity .12s linear, color .12s linear;
}
.pverse.hasaudio:hover .pplay{opacity:.8}
/* On a verse that opens with उवाच the control rides that line instead, set
   after the dash like a marginal mark. It is the one placement that interrupts
   nothing: the heading is already not the shloka. Specificity keeps this
   ahead of the narrow-screen rule below, where the margin placement is the
   one that would break the verse in two. */
.pspeaker .pplay{
  position:static; display:inline-block; width:auto; height:auto;
  margin-left:10px; padding:0; line-height:1;
  font-size:13px; vertical-align:baseline;
}
.pspeaker.hasaudio:hover .pplay{opacity:.8}
.pplay:hover{opacity:1 !important; color:var(--lac)}
.pplay.on{opacity:1; color:var(--lac)}
.pplay:focus-visible{outline:2px solid var(--lac); outline-offset:2px; opacity:1}
@media (prefers-reduced-motion:reduce){ .pplay{transition:none} }

/* आवृत्तिः — the practice bar. Set as a line of apparatus, not a transport:
   no scrubber, no timeline, nothing that belongs to a media player. It appears
   only in a chapter that has recordings. */
.avbar{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex-wrap:wrap; margin:18px 0 16px;
  font-size:13.5px; color:var(--gold-ink);
}
.avlab{letter-spacing:.03em}
.avdash{color:var(--rule)}
.avstep{display:inline-flex; align-items:center; gap:1px}
.avstepn{
  min-width:2.1em; text-align:center; font-size:15px; color:var(--indigo);
  font-variant-numeric:tabular-nums;
}
.avstepb{
  background:none; border:none; cursor:pointer; padding:1px 4px;
  font-size:13px; line-height:1; color:var(--gold); opacity:.75;
}
.avstepb:hover{opacity:1; color:var(--lac)}
.avstepb:focus-visible{outline:2px solid var(--lac); outline-offset:1px}
.avplay{
  background:none; border:none; cursor:pointer; padding:2px 6px;
  font-size:14px; color:var(--gold-ink); opacity:.7; margin-left:2px;
}
.avplay:hover{opacity:1; color:var(--lac)}
.avbar.running .avplay{opacity:1; color:var(--lac)}
.avplay:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
/* The verse being recited during a run, so the eye can find it on a long page. */
.pverse.playing{background:linear-gradient(transparent 0, rgba(232,153,35,.05) 0)}

/* Under ~740px the page has no margin to reach into, so the control returns to
   the flow, above the verse and right-aligned. Absolute positioning there put
   it on top of the first line — measured overlap, not a guess. */
@media (max-width:740px){
  .pplay{
    position:static; display:block; width:auto; height:auto;
    margin:0 2px 4px auto; padding:2px 4px; line-height:1;
    font-size:15px; opacity:.6; text-align:right;
  }
}

/* A lacuna note, set as a printed edition sets one: small, bronze, centred
   below the commentary, and never in the error colour — nothing is wrong. */
.bhabsent{
  margin:26px 0 2px; text-align:center;
  font-size:13.5px; color:var(--gold-ink); letter-spacing:.02em;
}

@media (max-width:560px){
  .bhashya{font-size:16px; line-height:1.85; text-align:left}
  /* Four division names, not three, now share the row. */
  .tab{font-size:14.5px; padding:9px 2px 8px}
  .tab .cnt{font-size:11px}
}

/* an entry of the commentary — no box, a number in the margin */
.card{
  position:relative; padding:22px 0 6px 2rem; border-bottom:none;
}
.card::after{display:none}
.card::before{
  content:attr(data-n); position:absolute; left:0; top:29px;
  font-family:var(--f-display); font-size:14px; color:var(--gold-ink); line-height:1;
}
.card + .card{border-top:1px solid var(--line)}
.qword{font-size:25px; line-height:1.55; color:var(--lac-deep); margin-bottom:0}
.qword .mark{font-size:11.5px; color:var(--gold-ink); letter-spacing:.08em}

/* choices set as text, not as buttons.
   Every one of these carries Devanagari the reader actually reads, so they take
   the Sanskrit face like the verse above them (Sai, 2026-08-29). The sans is
   for chrome only. The steplabel's wide tracking went with the sans — it splits
   conjuncts in a serif face. */
.step{display:block; margin-top:14px}
.steplabel{
  display:block; text-align:left; font-family:var(--f-sk); font-size:12.5px;
  color:var(--gold-ink); letter-spacing:.03em; margin-bottom:2px; line-height:1.6;
}
.opts{display:block; line-height:2.15}
.opt{
  display:inline; border:none; background:none; border-radius:0;
  font-family:var(--f-sk);
  padding:0 0 1px; margin:0 1.5em 0 0; font-size:17px; color:var(--ink);
  border-bottom:1px dotted var(--rule); cursor:pointer;
}
.opt:hover:not(:disabled){color:var(--lac); border-bottom-color:var(--lac)}
.opt.right{color:var(--ok); border-bottom:1px solid var(--ok)}
.opt.wrong{color:var(--err); border-bottom:none; text-decoration:line-through; opacity:.5}
.opt:disabled{cursor:default}
.opt:focus-visible{outline:2px solid var(--lac); outline-offset:3px}

.note{
  margin-top:13px; border-left:none; padding:0; font-size:15px;
  font-family:var(--f-sk); color:var(--faint); font-style:normal;
}
.note.show{display:block}
.note .stem{display:block; margin-bottom:4px; color:var(--gold-ink)}
.note .stem .sk{color:var(--ink,inherit); font-weight:500}
.explain{background:none; border-left:1px solid var(--gold); padding:2px 0 2px 14px}

/* turning a leaf */
.leafnav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:52px 0 0; padding-top:16px; border-top:1px solid var(--rule);
}
.leafbtn{
  font-family:var(--f-sk); font-size:15px; color:var(--lac); background:none;
  border:none; cursor:pointer; padding:3px 0; letter-spacing:.03em;
}
.leafbtn:hover:not(:disabled){color:var(--lac-deep)}
.leafbtn:disabled{color:var(--line); cursor:default}
.leafbtn:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.leafcount{font-size:13.5px; color:var(--faint); letter-spacing:.04em}
.page .avbar{height:2px; margin-top:12px; border-radius:0}

.versindex{margin-top:18px; font-size:13px}
.versindex summary{
  cursor:pointer; color:var(--faint); list-style:none; letter-spacing:.05em;
}
.versindex summary::-webkit-details-marker{display:none}
.versindex summary::before{content:'▸ '; color:var(--gold-ink)}
.versindex[open] summary::before{content:'▾ '}
.versindex summary:hover{color:var(--lac)}
.versindex .versenav{
  display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; margin:12px 0 0;
  max-height:none; overflow:visible; justify-content:flex-start;
}
.versindex .vchip{
  width:38px; height:32px; padding:0; border:none; border-bottom:2px solid transparent;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); border-radius:0;
}
.versindex .vchip:hover{background:none; color:var(--lac)}
.versindex .vchip.active{background:none; color:var(--lac); border-bottom-color:var(--lac)}
.versindex .vchip.done{color:var(--ink)}
.versindex .vchip.done::after{
  content:''; position:absolute; inset:auto 0 3px 0; margin:0 auto;
  width:4px; height:4px; border-radius:50%; background:var(--saffron);
}
.versindex .vchip.bare{opacity:.35}

.page footer{margin-top:40px; border-top:1px solid var(--line); font-size:12px}
.page .syncnote{text-align:left; margin-top:10px; font-size:12px}

@media (max-width:620px){
  body{padding:0 16px 60px}
  .sline{font-size:22px; line-height:2}
  .shloka{padding:30px 0 24px}
  .qword{font-size:21px}
  .sechead{margin-top:34px; font-size:17px}
  .card{padding-left:1.6rem}
}

/* The three divisions as a line of contents, not a tab bar: no boxes, no
   underline rail, just names with the current one in rubric. */
.page .tabs{
  display:flex; justify-content:center; align-items:baseline; gap:0;
  border:none; margin:0 0 6px; padding:0; background:none; position:static;
  flex-wrap:wrap;
}
.page .tab{
  flex:0 0 auto; border:none; background:none; padding:2px 0; margin:0;
  font-family:var(--f-sk); font-size:19.5px; color:var(--faint);
  letter-spacing:.02em;
}
.page .tab + .tab::before{
  content:'·'; color:var(--rule); margin:0 .85em; font-family:var(--f-ui);
}
.page .tab:hover{color:var(--ink)}
.page .tab.active{color:var(--lac); font-weight:400}
.page .tab .cnt{font-size:14px; color:var(--gold-ink); letter-spacing:.04em}
.page .tab:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
@media (max-width:620px){
  .page .tab{font-size:15px}
  .page .tab + .tab::before{margin:0 .55em}
}


/* ---------- verse index: numbered boxes, in view ----------
   Navigation you have to scroll to is not navigation, so the boxes sit under
   the running head. Kept small enough that 47 of them do not push the verse
   off the page. */
.page .versenav{
  display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start;
  margin:14px 0 2px; max-height:none; overflow:visible; flex-direction:row;
}
.page .vchip{
  width:34px; height:30px; padding:0; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:15px;
  color:var(--faint); background:var(--card);
  border:1px solid var(--line); border-radius:2px; position:relative;
}
.page .vchip:hover{border-color:var(--lac); color:var(--lac); background:var(--card)}
.page .vchip:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.page .vchip.done{color:var(--ink); border-color:var(--rule)}
.page .vchip.done::after{
  content:''; position:absolute; inset:auto 0 3px 0; margin:0 auto;
  width:12px; height:2px; border-radius:1px; background:var(--saffron);
}
.page .vchip.active{
  background:var(--lac); border-color:var(--lac); color:var(--paper); font-weight:400;
}
.page .vchip.active::after{background:var(--paper); opacity:.75}
.page .vchip.bare{opacity:.4}
.page .vchip.bare:hover{opacity:.85}

@media (max-width:620px){
  .page .versenav{gap:3px}
  .page .vchip{width:31px; height:28px; font-size:14px}
}

/* Clearing a whole verse — quiet, and it asks first. */
.versereset{text-align:right; margin-top:20px; min-height:1.2em}
.resetverse{
  font-family:var(--f-sk); font-size:13.5px; color:var(--faint);
  background:none; border:none; cursor:pointer; padding:2px 0;
  border-bottom:1px dotted var(--rule);
}
.resetverse:hover{color:var(--lac); border-bottom-color:var(--lac)}
.resetverse:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.resetverse.armed{color:var(--err); border-bottom:1px solid var(--err)}

/* Clearing every chapter. Same quiet treatment as the verse reset — it is the
   more destructive of the two, so it earns no more visual weight, only a longer
   arming window and a count of what it will take. */
.resetall{
  display:block; margin:0 auto 14px;
  font-family:var(--f-sk); font-size:13px; color:var(--faint);
  background:none; border:none; cursor:pointer; padding:2px 0;
  border-bottom:1px dotted var(--rule);
}
.resetall:hover{color:var(--lac); border-bottom-color:var(--lac)}
.resetall:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.resetall.armed{color:var(--err); border-bottom:1px solid var(--err)}

/* ================= विभागौ: the two divisions of the book =================
   व्याकरणम् (everything that was here) and पाठः (the chapter read straight
   through). Set the way an edition sets the names of its main parts: a centred
   line at the head of the page, the current one in indigo over a hairline rule
   and the other quiet beside it. No boxes, no filled ground, no rail — the
   contents line below it (.page .tabs) is the exercise divisions, and this one
   has to read as standing above it, so it takes the display face and the
   structural indigo rather than the rubric vermilion. */
.vibhaga{
  display:flex; justify-content:center; align-items:baseline;
  flex-wrap:wrap; padding:26px 0 4px; gap:0;
}
.vibhaga-name{
  flex:0 0 auto; background:none; border:none; border-bottom:1px solid transparent;
  padding:2px 1px 5px; margin:0; cursor:pointer;
  /* The text face, not the display face. Rozha One is a high-contrast display
     type and at 23px its thin strokes read as spindly rather than as a
     heading; a printed edition sets a part-title in the same face as the text,
     one size up and letter-spaced. Tiro is what the verses themselves use. */
  font-family:var(--f-sk); font-weight:400; font-size:25px;
  color:var(--faint); letter-spacing:.05em; line-height:1.4;
}
.vibhaga-name:hover{color:var(--ink)}
.vibhaga-name:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.vibhaga-name.active{color:var(--indigo); border-bottom-color:var(--indigo)}
/* Tiro's descenders (ृ, ु) reach lower than Rozha's, so the rule needs air or
   it collides with them. */
.vibhaga-name{padding-bottom:7px}
/* A separator of its own, not a ::before on the second name: the rule that
   marks the current division would otherwise run under the dot as well. */
.vibhagasep{
  color:var(--rule); font-family:var(--f-ui); font-size:13px;
  margin:0 1.5em; align-self:center;
}

/* ================= पाठः: the chapter as continuous text =================
   A reading surface, not a drill. The verse numbers are already inside the
   corpus's last lines (॥ १ ॥), so nothing is added around them; the speaker
   stands on its own line above the verse it introduces, in the same face and
   ink as the verse, because उवाच is the text speaking and not a label on it.
   Set a little smaller than .shloka's 29px — that size is for one verse
   holding a page, and this is 78 of them in a column — but on the same ladder,
   so the wrapping behaviour a narrow viewport gets is the one already proven
   there. The artwork keeps the `reading` mood: this is denser Devanagari than
   व्याकरणम्, never less, so the wash that was measured for it applies here
   unchanged and untouched. */
.patha{padding-top:2px}

.pathahead{text-align:center; margin:34px 0 0}
.pathaopen{
  /* Tiro, not Rozha One — the same change made to the विभाग nav, for the same
     reason: a display face's thin strokes read as spindly at heading size, and
     a printed edition sets its अथ/इति formulae in the text face. It also puts
     this line in the same face as the verses directly beneath it, which is the
     point of a formula — it belongs to the text, not to the interface. */
  font-family:var(--f-sk); font-weight:400; font-size:22px;
  color:var(--indigo); letter-spacing:.04em; line-height:1.55;
}
.pathaname{
  font-family:var(--f-sk); font-size:18px; color:var(--gold-ink);
  margin-top:7px; letter-spacing:.01em; line-height:1.6; text-wrap:balance;
}
/* The same leaf ornament the practice page uses between verse and commentary. */
.pathamark{color:var(--gold); font-size:15px; margin:16px 0 4px}
/* Standing above the book's own heading, the practice bar needs enough air
   under it to read as apparatus that ends there — the अथ formula has to look
   like the start of something, not the next line of the bar. */
.pathahead .avbar{margin-bottom:26px}

/* सभावार्थम् — the toggle, and the भावार्थः it prints. Apparatus above the
   book's heading with the practice bar; the text itself sits inside the verse
   block, under the shloka it belongs to, set smaller and in the commentary's
   colour so the eye still reads the verse first. */
.pbhavabar{text-align:center; margin:0 0 22px}
.pbhavab{
  background:none; border:none; cursor:pointer; padding:2px 4px;
  font-family:var(--f-sk); font-size:13.5px; color:var(--faint);
  letter-spacing:.02em; border-bottom:1px dotted var(--rule);
}
.pbhavab:hover{color:var(--ink)}
.pbhavab.on{color:var(--lac); border-bottom:1px solid var(--lac)}
.pbhavab:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.pbhavasep{color:var(--rule); margin:0 6px}
.pbhava{
  margin:10px auto 0; max-width:34em;
  font-size:15.5px; line-height:1.85; color:var(--gold-ink);
  text-align:left; hyphens:none;
}
@media (max-width:620px){ .pbhava{font-size:14.5px} }
@media print{ .pbhavabar{display:none !important} }

.pverse{text-align:center; margin:0 0 30px}
.pverse:last-child{margin-bottom:6px}
.pline{font-size:26px; line-height:2.05; letter-spacing:.01em; color:var(--ink)}
/* The उवाच line heads the block it belongs to, so it is set close to the first
   pāda — near enough that the gap reads as the verse's own leading and the
   whole thing is one shloka. The air goes above it instead, where it separates
   this shloka from the last. */
.pspeaker{
  text-align:center; font-size:20px; line-height:1.7; color:var(--ink);
  letter-spacing:.01em; margin:0 0 5px;
}
.pverse.hasspeaker{margin-top:34px}
.pverse:first-child.hasspeaker{margin-top:8px}

.pathaend{
  text-align:center; margin:36px 0 0; padding-top:22px;
  border-top:1px solid var(--rule);
  font-family:var(--f-sk); font-weight:400; font-size:20px;
  color:var(--indigo); letter-spacing:.04em;
}
/* The book's full colophon runs to three or four lines where the short इति
   formula is one, so it is set smaller and given a measure of its own — a
   colophon is set tighter than the text it closes, not at heading size. */
.pathaend.pathacolophon{
  font-size:16.5px; line-height:1.85; letter-spacing:.02em;
  max-width:30em; margin-left:auto; margin-right:auto; text-wrap:balance;
}
@media (max-width:620px){ .pathaend.pathacolophon{font-size:15px} }

@media (max-width:620px){
  .vibhaga{padding:20px 0 3px}
  .vibhaga-name{font-size:21px}
  .vibhagasep{margin:0 .9em}
  .pline{font-size:21px; line-height:1.95}
  .pspeaker{font-size:17px; margin:0 0 4px}
  .pverse.hasspeaker{margin-top:28px}
  .pverse{margin-bottom:26px}
  .pathaopen{font-size:18px}
  .pathaname{font-size:16px}
  .pathaend{font-size:17px}
}
@media (max-width:420px){
  .pline{font-size:19px; line-height:1.9}
  .vibhaga-name{font-size:17.5px}
}


/* ================= लेखनाभ्यासः =================
   A worksheet. Everything here is shaped by the fact that its real output is
   a sheet of paper: the controls are apparatus and disappear when printing,
   and what remains is verses with ruled space to copy them into. */
.lekbar{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex-wrap:wrap; margin:16px 0 6px; padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  font-size:13.5px; color:var(--gold-ink);
}
.leklab{letter-spacing:.03em}
.lekdash{color:var(--rule)}
.lekstep{display:inline-flex; align-items:center; gap:1px}
/* An input, because the number can be typed as well as stepped — but set to
   look like the text it replaced, not like a form field. */
.lekstepn{
  width:2.6em; text-align:center; font-size:15px; color:var(--indigo);
  font-family:var(--f-sk); background:none; border:none; border-bottom:1px solid transparent;
  padding:0 1px; border-radius:0;
}
.lekstepn:hover{border-bottom-color:var(--rule)}
.lekstepn:focus{outline:none; border-bottom-color:var(--lac); color:var(--lac)}
.lekall{
  background:none; border:none; cursor:pointer; padding:2px 6px;
  font-family:var(--f-sk); font-size:13px; color:var(--gold-ink);
  letter-spacing:.02em; opacity:.8; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;
}
.lekall:hover{opacity:1; color:var(--lac)}
.lekall:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.lekheadsp{color:var(--gold-ink)}
.lekstepb{
  background:none; border:none; cursor:pointer; padding:1px 4px;
  font-size:13px; line-height:1; color:var(--gold); opacity:.75;
}
.lekstepb:hover{opacity:1; color:var(--lac)}
.lekstepb:focus-visible{outline:2px solid var(--lac); outline-offset:1px}
.lekprint{
  background:none; border:1px solid var(--rule); border-radius:2px;
  cursor:pointer; padding:3px 12px; margin-left:6px;
  font-family:var(--f-sk); font-size:14px; color:var(--lac);
  letter-spacing:.03em;
}
.lekprint:hover{border-color:var(--lac); background:#fdeecd}
.lekprint:focus-visible{outline:2px solid var(--lac); outline-offset:2px}

.lekhead{
  text-align:center; font-size:15px; color:var(--gold-ink);
  letter-spacing:.02em; margin:14px 0 20px;
}
.lekverse{margin:0 0 30px; break-inside:avoid}
.lekspeaker{text-align:center; font-size:17px; color:var(--ink); margin:0 0 6px}
.leklines{text-align:center; margin:0 0 12px}
.lekline{font-size:21px; line-height:1.75; color:var(--ink)}

/* The ruled space. Devanagari hangs a shirorekha above the baseline and
   descenders below it, so a copying line needs far more room than a roman
   one — 42px, not the 24 a lined notebook would give. The rule is the
   baseline itself, drawn faint so the writing is what shows. */
.lekrules{margin:10px 0 0}
.lekrule{
  height:42px; border-bottom:1px solid var(--rule);
}
.lekrule:first-child{border-top:1px solid var(--rule)}

/* ---------- what actually prints ----------
   Chrome only: the running head, the division names, the chooser, the footer,
   the artwork. What is left is the sheet. Backgrounds are dropped so the
   painting does not print behind the writing and so the rules stay black on
   white whatever the browser's colour-adjust default. */
@media print{
  :root{--paper:#fff}
  body{padding:0; background:#fff}
  body::before, body::after{display:none !important}
  header, .vibhaga, .colophon, .chapindex, .chapbtn, .footer, .banner,
  .lekbar, .credit, .pathaend, #gate{display:none !important}
  /* The ▶ now rides the उवाच line, which is text — on paper a control there
     would print as part of the verse. It hung in the margin before and could
     be ignored; it cannot be now. */
  .pplay{display:none !important}
  /* The painting is position:fixed and full-bleed, so a printer composites it
     onto EVERY page — twenty times for a whole chapter, and it belongs on none
     of them. This is a worksheet; the only thing that should reach the paper
     is the verse and the space under it. */
  .siteart{display:none !important}
  /* Likewise anything sticky: in print a sticky element can repeat per page. */
  .shloka, .tabs, .versepane{position:static !important}
  .page{max-width:100%; padding:0}
  .wrap{max-width:100%}
  .lekhead{margin-top:0}
  .lekverse{break-inside:avoid; page-break-inside:avoid}
  /* :first-child adds a border-TOP, which the shorthand above does not reach,
     so the topmost rule printed tan while every other one printed grey. */
  .lekrule{border-bottom-color:#999}
  .lekrule:first-child{border-top-color:#999}
  .lekline, .lekspeaker{color:#000}
  @page{margin:16mm 14mm}
}


/* ================= स्मरणाभ्यासः — अक्षरमाला ================= */
.smrbar{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:16px 0 6px; padding-bottom:16px;
  border-bottom:1px solid var(--rule);
  font-size:13.5px; color:var(--gold-ink);
}
.smrlab{letter-spacing:.03em}
.smrstep{display:inline-flex; align-items:center; gap:1px}
.smrstepn{
  min-width:1.8em; text-align:center; font-size:15px; color:var(--indigo);
}
.smrstepb{
  background:none; border:none; cursor:pointer; padding:1px 4px;
  font-size:13px; line-height:1; color:var(--gold); opacity:.75;
}
.smrstepb:hover{opacity:1; color:var(--lac)}
.smrstepb:focus-visible{outline:2px solid var(--lac); outline-offset:1px}

/* ---------- every stepper's arrows ---------- */
/* They were a 12×15 px target. With a mouse that is fine; with a thumb it is a
   miss, and a control that is missed reads as a control that does nothing
   (Sai, 2026-09-17). The hit area is grown with a pseudo-element, which costs
   the layout nothing — the bar keeps its height and the numbers keep their
   spacing — and is grown further where the pointer is coarse. */
.lekstepb, .smrstepb, .avstepb{ position:relative; padding:3px 6px; font-size:14px }
.lekstepb::after, .smrstepb::after, .avstepb::after{
  /* 29×44 — a finger's worth, and the same on every pointer rather than behind
     a `pointer:coarse` query that cannot be verified from here. */
  content:''; position:absolute; inset:-12px -6px;
}
/* At the end of its range an arrow is spent, and says so. */
.lekstepb:disabled, .smrstepb:disabled, .avstepb:disabled{ opacity:.22; cursor:default }
.lekstepb:disabled::after, .smrstepb:disabled::after, .avstepb:disabled::after{ display:none }
.lekstepb:disabled:hover, .smrstepb:disabled:hover, .avstepb:disabled:hover{ color:var(--gold) }
/* The two bounds read as one control: a rule between them, not a word. */
.smrdash{color:var(--faint); padding:0 1px}
.smrstepn{
  background:none; border:none; border-bottom:1px solid var(--line);
  font-family:var(--f-sk); padding:0 1px;
}
.smrstepn:focus{outline:none; border-bottom-color:var(--lac)}
/* Scope set as two names with the live one in rubric, like the division line. */
.smrscope{display:inline-flex; align-items:center; gap:7px}
.smrsep{color:var(--rule)}
.smrmode, .smrpada, .smrscope, .smronly, .smrcount{display:inline-flex; align-items:center; gap:6px}
.smrchs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px}
/* Each setting on its own row, its name in the margin in gold, right-set
   against the choices — the way a colophon sets its particulars. */
.smrgrid{
  display:grid; grid-template-columns:max-content minmax(0, 1fr);
  gap:9px 16px; align-items:baseline; width:fit-content; max-width:100%;
}
.smrglab{text-align:right; font-family:var(--f-ui); font-size:12.5px; color:var(--gold-ink); letter-spacing:.03em}
.smrgval{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0}
.smrgval .smrstepn{width:2.4em; min-width:0}
.smracts{display:flex; align-items:center; gap:16px}
.smrmode{flex-wrap:wrap; justify-content:center}
.smrpickb{
  background:none; border:none; cursor:pointer; padding:2px 2px;
  font-family:var(--f-sk); font-size:13.5px; color:var(--faint);
  letter-spacing:.02em;
}
.smrpickb:hover{color:var(--ink)}
.smrpickb.on{color:var(--lac); border-bottom:1px solid var(--lac)}
.smrpickb:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.smrmode .smrpickb{font-size:16px}
.smrpickb.en{font-family:var(--f-ui); font-size:13.5px; letter-spacing:.01em}
.smrpickb{white-space:nowrap}
/* A phone has no room for a margin: each name sits over its choices. */
@media (max-width:520px){
  .smrgrid{grid-template-columns:minmax(0, 1fr); gap:3px 0; width:100%}
  .smrglab{text-align:left; margin-top:9px}
  .smrglab:empty{display:none}
}

/* ---- परीक्षा ---- */
.smrquiz{max-width:560px; margin:0 auto; text-align:center}
.smrscore{
  font-size:13px; color:var(--gold-ink); letter-spacing:.03em;
  display:flex; justify-content:center; gap:9px; margin:6px 0 26px;
}
.smrstreak{color:var(--lac)}
/* The prompt is the page: large, alone, nothing else competing with it. */
.smrprompt{font-size:27px; line-height:1.7; color:var(--ink); margin:18px 0 6px}
.smrpadalab{font-size:12.5px; color:var(--faint); letter-spacing:.05em; margin-bottom:26px}
/* श्लोकसङ्ख्या */
.smrdir{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.smrsverse{margin:18px 0 22px}
.smrsverse .smransl{font-size:21px; line-height:1.8}
.smrsform{display:flex; justify-content:center; align-items:baseline; gap:18px; flex-wrap:wrap}
.smrsfield{display:inline-flex; align-items:baseline; gap:8px}
.smrsfixed{font-size:14px; color:var(--faint)}
.smrsnum{
  width:2.6em; text-align:center; font-family:var(--f-sk); font-size:20px; color:var(--indigo);
  background:none; border:none; border-bottom:1px solid var(--line); padding:0 2px;
}
.smrsnum:focus{outline:none; border-bottom-color:var(--lac)}
.smrsnum.ok{color:var(--ok); border-bottom-color:var(--ok)}
.smrsnum.no{color:var(--err); border-bottom-color:var(--err); text-decoration:line-through}
.smrsverdict{margin-top:16px; font-size:16px; min-height:1.5em}
.smrsverdict.ok{color:var(--ok)}
.smrsverdict.no{color:var(--err)}
.smrsref{font-family:var(--f-display); font-size:40px; color:var(--indigo); margin:20px 0 2px}
.smrschoices{display:flex; flex-direction:column; align-items:center; gap:4px; margin:4px 0 8px}
.smrschoice{
  background:none; border:none; border-bottom:1px dotted var(--rule); cursor:pointer;
  font-size:21px; line-height:1.7; color:var(--ink); padding:4px 10px;
}
.smrschoice:hover:not(:disabled){color:var(--lac); border-bottom-color:var(--lac)}
.smrschoice:disabled{cursor:default; opacity:.55}
.smrschoice.ok{color:var(--ok); border-bottom:1px solid var(--ok); opacity:1}
.smrschoice.no{color:var(--err); text-decoration:line-through; opacity:1}
.smrschoice:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.smract{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px}
.smrbtn{
  background:none; border:1px solid var(--rule); border-radius:2px;
  cursor:pointer; padding:5px 18px;
  font-family:var(--f-sk); font-size:15px; color:var(--lac); letter-spacing:.03em;
}
.smrbtn:hover{border-color:var(--lac); background:#fdeecd}
.smrbtn.ok{color:var(--ok); border-color:#bcd8cb}
.smrbtn.ok:hover{background:#e8f3ee; border-color:var(--ok)}
.smrbtn.no{color:var(--err); border-color:#e3c4cd}
.smrbtn.no:hover{background:#f8ecef; border-color:var(--err)}
.smrbtn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
/* वाक् (behind ?vak): recite, then the śloka's words coloured by what was heard. */
.vak{margin:22px auto 0; text-align:center; max-width:560px}
.vakbtn.on{color:var(--lac); border-color:var(--lac); background:#fdeecd}
.vaklangs{margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px}
.vakheard{margin-top:12px; font-size:14px; color:var(--faint); min-height:1.4em}
.vakwords{margin-top:12px; font-size:21px; line-height:1.9}
.vakw{padding:0 1px; border-bottom:2px solid transparent}
.vakw.ok{color:var(--ok); border-bottom-color:var(--ok)}
.vakw.doubt{color:var(--gold-ink); border-bottom:2px dotted var(--gold)}
.vakw.miss{color:var(--err); border-bottom-color:var(--err)}
.vaksum{margin-top:6px; font-size:13.5px; color:var(--gold-ink)}
.vaknote{margin-top:8px; font-size:12px; color:var(--faint)}
.smrgoto{
  background:none; border:none; cursor:pointer; padding:5px 6px;
  font-family:var(--f-sk); font-size:13.5px; color:var(--gold-ink);
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
}
.smrgoto:hover{color:var(--lac)}
.smrans{margin-top:8px; text-align:center}
.smransv{margin:0 0 18px}
.smransv.first .smransl{color:var(--ink)}
.smransv:not(.first) .smransl{color:var(--faint)}
.smransp{font-size:15px; color:var(--faint); margin-bottom:3px}
.smransl{font-size:19px; line-height:1.8}
.smransend{font-size:12.5px; color:var(--gold-ink); margin-top:4px}

/* A verse arrived at from स्मरणाभ्यासः, marked just long enough to find it. */
.pverse.found{background:#fbe9c4; transition:background 1s ease}
/* The way back, shown only when पाठः was reached from स्मरणाभ्यासः. */
.pathaback{
  display:block; margin:0 auto 10px; padding:3px 8px;
  background:none; border:none; cursor:pointer;
  font-family:var(--f-sk); font-size:13.5px; color:var(--gold-ink);
  letter-spacing:.02em;
}
.pathaback:hover{color:var(--lac)}
.pathaback:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
@media print{ .pathaback{display:none !important} }
.smrprint{
  background:none; border:1px solid var(--rule); border-radius:2px;
  cursor:pointer; padding:3px 12px;
  font-family:var(--f-sk); font-size:14px; color:var(--lac); letter-spacing:.03em;
}
.smrprint:hover{border-color:var(--lac); background:#fdeecd}
.smrprint:focus-visible{outline:2px solid var(--lac); outline-offset:2px}

/* Emptying अस्मृतानि. The same quiet dotted treatment as the two अभ्यासः
   resets, because it destroys the same kind of thing and should not shout. */
.smrclear{
  font-family:var(--f-sk); font-size:13px; color:var(--faint);
  background:none; border:none; cursor:pointer; padding:2px 0; margin-left:2px;
  border-bottom:1px dotted var(--rule);
}
.smrclear:hover{color:var(--lac); border-bottom-color:var(--lac)}
.smrclear:focus-visible{outline:2px solid var(--lac); outline-offset:3px}
.smrclear.armed{color:var(--err); border-bottom:1px solid var(--err)}

.smrhead{text-align:center; font-size:15px; color:var(--gold-ink); margin:14px 0 16px}
.smrwait, .smrempty{text-align:center; color:var(--faint); padding:26px 0}
/* Two columns, as the sample sheet had them: an अक्षरमाला is a lookup list and
   a single column wastes half the page. */
.smrlist{columns:2; column-gap:30px; column-rule:1px solid var(--rule)}
.smrrow{
  break-inside:avoid; display:flex; gap:8px; align-items:baseline;
  padding:2px 4px; line-height:1.7; width:100%;
  text-align:left; border-radius:2px;
}
.smrrow:hover{background:#f2e6c8}
.smrtext{
  flex:1; min-width:0; font-size:17px; color:var(--ink); text-align:left;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  line-height:inherit;
}
.smrtext:focus-visible{outline:2px solid var(--lac); outline-offset:1px}
/* कण्ठस्थः. A ruled box in the margin, the size of a printed tick-box, that a
   reader fills in as they learn the verse. Quiet until it is ticked. */
.smrtick{
  flex:none; width:15px; height:15px; align-self:center;
  background:none; border:1px solid var(--line); border-radius:2px;
  cursor:pointer; padding:0; line-height:1;
  font-family:var(--f-ui); font-size:11px; color:var(--ok);
  display:inline-flex; align-items:center; justify-content:center;
}
.smrtick:hover{border-color:var(--lac)}
.smrtick.on{border-color:var(--ok); background:var(--ok-bg)}
.smrtick:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
/* A pāda the splitter could not divide confidently is shown whole and marked,
   never cut at a guess. */
.smrrow.inexact .smrtext{border-bottom:1px dotted var(--gold)}
/* How many times this pāda has failed, kept to the weight of a marginal note:
   it orders the sheet, it does not compete with the Sanskrit. */
.smrmiss{
  font-size:11.5px; color:var(--gold-ink); letter-spacing:.02em;
  margin-left:auto; padding-left:8px; flex:none;
}
@media (max-width:560px){ .smrlist{columns:1} }

/* ---------- पदतालिका ---------- */
/* Ruled like a printed table of contents: the verse number in the margin, then
   one प्रतीकम् per पादः across. Columns share the width equally so the eye can
   run straight down any one of them — reciting पादः ३ of a whole chapter is
   exactly the drill this is for. */
.smrtable{max-width:760px; margin:0 auto}
.smrtrow{
  display:grid; grid-template-columns:2.6em repeat(var(--smrcols, 4), 1fr);
  gap:0 12px; align-items:baseline; break-inside:avoid;
  padding:3px 2px; border-bottom:1px solid var(--line);
}
.smrtrow:hover{background:#faf2de}
.smrtn{
  font-family:var(--f-display); font-size:13px; color:var(--gold-ink);
  background:none; border:none; padding:0; cursor:pointer; text-align:right;
}
.smrtn:hover{color:var(--lac)}
.smrtn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.smrtc{font-size:16.5px; color:var(--ink); line-height:1.75;
  overflow-wrap:anywhere}
/* Same dotted mark the माला uses for a pāda the splitter would not cut. */
.smrtrow.inexact .smrtc{border-bottom:1px dotted var(--gold)}
/* A chapter's number, when the table runs across all of them. */
.smrtch{
  font-family:var(--f-display); font-size:15px; color:var(--lac);
  margin:20px 0 4px; padding-bottom:2px; border-bottom:1px solid var(--rule);
}
/* Four columns of Sanskrit will not fit a phone. Two, and the number takes a
   line of its own above them — left in the margin it would have caught the
   third pāda as the row wrapped, and a पदतालिका whose columns do not line up is
   not a तालिका. */
@media (max-width:620px){
  .smrtrow{grid-template-columns:1fr 1fr; gap:0 14px; padding:6px 2px}
  .smrtn{grid-column:1 / -1; text-align:left; padding-bottom:1px}
  .smrtc{font-size:15px}
}

/* ---------- रिक्तस्थानानि ---------- */
.smrblanks{margin:20px 0 6px}
.smrbline{font-size:21px; line-height:2.05; color:var(--ink)}
/* As wide as the word is long, in akṣaras: the metre already tells a reciter
   how much is missing, so a blank that hid it would be the lie. */
.smrgap{
  display:inline-block; min-width:calc(var(--smrw, 3) * 0.85em);
  border-bottom:1.5px solid var(--lac); vertical-align:baseline;
}
.smrgap.filled{
  min-width:0; border-bottom-color:var(--gold);
  color:var(--lac); font-weight:500;
}

/* ---------- रिक्तस्थानानि, on paper ---------- */
/* Built into the page but never shown on it: the reader keeps the question
   they were on, and the printer gets the sheet. */
.smrprintsheet{display:none}
.smrqs{margin:0; padding:0 0 0 2.4em; max-width:640px}
.smrq{margin:0 0 20px; break-inside:avoid; padding-left:4px}
.smrq::marker{font-family:var(--f-display); color:var(--gold-ink); font-size:14px}
.smrkeyhead{
  text-align:center; font-family:var(--f-sk); font-size:16px; color:var(--lac);
  margin:34px 0 14px; break-before:page;
}
.smrkey{margin:0; padding:0 0 0 2.4em; columns:2; column-gap:26px; max-width:700px}
.smrkeyi{font-size:13.5px; line-height:1.9; break-inside:avoid}
.smrkeyi::marker{font-family:var(--f-display); color:var(--gold-ink); font-size:12px}

@media print{
  .smrbar, .smract, .smrscore{display:none !important}
  /* The screen's one-at-a-time drill has nothing to print; the sheet does. */
  .smrquiz{display:none !important}
  .smrprintsheet{display:block !important}
  .smrq .smrbline{font-size:15.5px; line-height:1.95; color:#000}
  .smrgap{border-bottom-color:#000 !important; color:#000 !important}
  .smrkeyi{color:#000}
  .smrkeyhead{color:#000}
  .smrrow{background:none !important}
  /* The tick-box prints: a sheet with the learnt ones already filled in is the
     point of having ticked them. */
  .smrtick{border-color:#999 !important; background:none !important; color:#000}
  .smrhead{margin-top:0}
  .smrlist{column-rule-color:#bbb}
  .smrtext{color:#000}
  .smrmiss{color:#666}
  .smrtrow{border-bottom-color:#ddd}
  .smrtrow:hover{background:none}
  .smrtc{color:#000}
  .smrtn{color:#666}
  .smrtch{color:#000; border-bottom-color:#bbb}
}

/* ---------- पदार्थः — pratīka and gloss, as an edition sets its word-list ----
   Not a table: a table implies columns that line up across rows, and these are
   pairs, each as wide as its own words. Two to a row where the measure allows,
   one where it does not. The `=` is apparatus, so it takes the rule colour and
   never the ink. A pada with no gloss keeps its place and stands alone — the
   verse prints the word either way, and hiding it would be a lie about the
   text rather than a silence about its meaning. */
.padartha{
  font-family:var(--f-sk); font-size:17px; line-height:1.95;
  color:var(--ink); margin:2px 0 6px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  column-gap:26px; row-gap:2px;
}
.pdrow{display:flex; gap:7px; align-items:baseline; min-width:0}
.pdw{color:var(--ink)}
.pdeq{color:var(--rule)}
.pdg{color:var(--faint); min-width:0}
@media (max-width:620px){
  .padartha{grid-template-columns:1fr; font-size:16px}
}

/* ---------- अन्वेषणम् ---------- */
.anveshana{max-width:648px; margin:0 auto; padding:8px 0 40px}

/* ================= धातवः ================= */
.dhatavah{max-width:648px; margin:0 auto; padding:8px 0 40px}
.dhbar{display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  margin:16px 0 10px; padding-bottom:14px; border-bottom:1px solid var(--rule)}
.dhbar .smrprint{margin-left:14px}
.dhhead{text-align:center; font-size:14px; color:var(--gold-ink); margin:14px 0 18px}
.dhroot{font-size:19px; color:var(--lac); margin:26px 0 4px; padding-bottom:4px;
  border-bottom:1px solid var(--rule)}
.dhent{padding:14px 0 16px; border-bottom:1px dotted var(--rule); break-inside:avoid}
.dhtop{display:flex; align-items:baseline; gap:12px}
.dhn{background:none; border:none; cursor:pointer; padding:0; min-width:2.2em; text-align:right;
  font-family:var(--f-display); font-size:15px; color:var(--lac)}
.dhn:hover{text-decoration:underline}
.dhn:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.dhw{font-size:22px; color:var(--indigo)}
.dhfacts{margin:2px 0 8px 3.1em; font-size:14px; color:var(--gold-ink)}
.dhent .rupascroll{margin-left:2.6em}
.dhent .rupalink{margin-left:3.1em; font-size:12px}
.dhnone{margin-left:3.1em; font-size:13px; color:var(--faint)}
@media (max-width:520px){
  .dhfacts, .dhnone, .dhent .rupalink{margin-left:0}
  .dhent .rupascroll{margin-left:0}
}
@media print{ .dhbar{display:none !important} .dhent .rupalink{display:none} }
.anvbar{margin:6px 0 12px}
.anvq{width:100%; box-sizing:border-box; font-size:19px; padding:9px 12px;
  border:1px solid var(--rule); border-radius:3px; background:var(--card); color:var(--ink)}
.anvq:focus{outline:2px solid var(--lac); outline-offset:1px}
.anvchips{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.anvgroup{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.anvgh{font-size:12px; color:var(--indigo); letter-spacing:.05em; min-width:4.6em}
.anvchip{background:none; border:none; border-bottom:1px dotted var(--rule); cursor:pointer;
  font-size:15px; color:var(--ink); padding:1px 0}
.anvchip:hover{color:var(--lac); border-bottom-color:var(--lac)}
.anvsum{font-size:13.5px; color:var(--faint); margin:6px 0 8px}
.anvres{list-style:none; margin:0; padding:0}
.anvrow{display:flex; gap:12px; align-items:baseline; padding:8px 0; border-top:1px dotted var(--rule)}
.anvref{background:none; border:none; cursor:pointer; color:var(--lac); font-size:14px;
  min-width:3.4em; text-align:left; padding:0}
.anvline{font-size:16px; line-height:1.55; color:var(--ink); cursor:pointer; flex:1; min-width:0}
.anvline mark{background:#f6dca3; color:inherit; border-radius:2px; padding:0 1px}

/* ---------- प्रगतिः ---------- */
.pragatibtn{display:block; margin:8px auto 0; background:none; border:none; cursor:pointer;
  color:var(--indigo); font-size:14px; border-bottom:1px dotted var(--indigo); padding:1px 0}
.pragati .wshead{margin-top:14px}
.pgverses{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 6px}
.pgv{width:34px; height:28px; border:1px solid var(--rule); border-radius:3px; cursor:pointer;
  font-size:12.5px; color:var(--ink);
  background:linear-gradient(to top, rgba(31,122,90,.28) calc(var(--f)*100%), var(--card) 0)}
.pgv.full{background:rgba(31,122,90,.32); border-color:var(--ok)}
.pglist{list-style:none; margin:6px 0 0; padding:0}
.pglist li{display:flex; align-items:center; gap:10px; padding:4px 0; border-top:1px dotted var(--rule)}
.pglist li:first-child{border-top:none}
.pgk{flex:0 0 11em; font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pgk small{color:var(--faint); font-size:12px}
.pgbar{flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden}
.pgbar span{display:block; height:100%; background:var(--ok)}
.pgnum{flex:0 0 auto; font-size:12.5px; color:var(--faint); min-width:4.5em; text-align:right}
.pgch{cursor:pointer}
.pgch.cur .pgname{color:var(--lac)}
.pgchn{flex:0 0 1.6em; font-size:13px; color:var(--faint)}
.pgname{flex:0 0 9.5em; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- रूपनिर्माणम् ---------- */
.nprompt{margin-top:6px; font-size:16px; color:var(--indigo)}
.note.wrongnote{color:var(--err)}
.nagain{display:block; margin:18px auto 0}

/* ---------- कारकविश्लेषणम् under the solved अन्वय ---------- */
.karaka{margin-top:14px; padding-top:10px; border-top:1px dotted var(--rule)}
.karakahead{font-size:12px; color:var(--indigo); letter-spacing:.05em; margin-bottom:8px}
.kline{display:flex; flex-wrap:wrap; gap:14px 16px; align-items:flex-start}
.kw{display:inline-flex; flex-direction:column; align-items:center}
.kform{font-size:21px; color:var(--ink); line-height:1.3;
  border-bottom:1px dotted var(--rule); padding-bottom:3px}
.kend{color:var(--lac); text-decoration:underline; text-decoration-color:var(--lac);
  text-underline-offset:4px; text-decoration-thickness:2px}
.klab{font-family:var(--f-ui); font-size:11.5px; color:var(--faint); margin-top:3px; white-space:nowrap}
.klab b{color:var(--lac-deep); font-weight:600}
.ksup .kform{color:var(--faint)}


/* =====================================================================
   REDESIGN (2026-10-26) — an app, not only a page.

   Sai: "a lot of things are not intuitive … redesign the entire website so
   people can find all the features easily", choosing a modern app look, a
   home page with a grouped menu, and every label in Sanskrit with English
   beneath. This layer sits over everything above it and wins by coming last:
   the earlier rules stay as the record of how the page was set, and the
   pieces they style (the verse, the cards, the tables) keep their typography.

   What changes: a light ground with white surfaces; an app bar fixed at the
   top that carries the brand (home), the four groups, the chapter, the script
   and the account; a second row for a group's features; controls that look
   like controls — pills for a choice, filled buttons for an action; and the
   painting only behind the home page, where nothing has to be read over it.
   ===================================================================== */
:root{
  --bg:#f5f2eb; --surface:#ffffff; --border:#e6dfcf; --border-strong:#d6ccb6;
  --muted:#6b6355; --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(40,30,10,.05), 0 6px 20px rgba(40,30,10,.06);
  --shadow-l:0 2px 4px rgba(40,30,10,.06), 0 14px 36px rgba(40,30,10,.12);
  --paper:#ffffff;
  /* Orange, not blue (2026-10-27: "Blue is not that good"). The token keeps
     its old name because seventy rules use it; what it holds is a burnt
     orange — 5.0:1 under white text and on white, where saffron itself
     (#e89923) manages 2.3:1 and cannot carry a word. Saffron stays for
     ornament: the progress fills and the verb underline. */
  --indigo:#b4530e; --indigo-soft:#fdeedc;
}
body{background:var(--bg); padding:0 0 40px}
.wrap{max-width:none}

/* The painting: the home page only. */
.siteart{display:none}
:root[data-view="home"] .siteart, :root[data-artmood="title"] .siteart{display:block}

.menuen{display:block; font-family:var(--f-ui); font-size:10.5px; line-height:1.1;
  letter-spacing:.04em; color:var(--muted); text-transform:uppercase}

/* ---------- the app bar ---------- */
.appbar{position:sticky; top:0; z-index:30; padding:0; text-align:left;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--border)}
.appbar-in{max-width:1180px; margin:0 auto; padding:0 20px; min-height:64px;
  display:flex; align-items:center; gap:18px}
.brandbtn{display:flex; align-items:center; gap:9px; background:none; border:none;
  cursor:pointer; padding:6px 4px; border-radius:var(--radius-s)}
.brandbtn img{width:30px; height:30px}
.brandname{font-family:var(--f-display); font-size:22px; color:var(--indigo); line-height:1}
.brandbtn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

.groups{display:flex; gap:4px; flex:1 1 auto; justify-content:center}
.groupbtn{display:flex; flex-direction:column; align-items:center; gap:1px;
  background:none; border:none; cursor:pointer; padding:7px 16px 6px;
  border-radius:var(--radius-s); color:var(--ink); min-width:84px}
.groupsa{font-size:16.5px; line-height:1.25}
.groupen{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.groupbtn:hover{background:#f3efe6}
.groupbtn.active{background:var(--indigo-soft); color:var(--indigo)}
.groupbtn.active .groupen{color:var(--indigo)}
.groupbtn:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}

/* chapter · script · account, on the right */
.appbar .colophon{position:relative; display:flex; align-items:center; gap:10px;
  flex-wrap:nowrap; padding:0; margin:0; border:none; flex:0 0 auto}
.appbar .chaphead{display:none !important}
.appbar .chapbtn{display:block; flex:0 1 auto; max-width:230px;
  padding:8px 30px 8px 13px; border:1px solid var(--border-strong); border-radius:999px;
  background-color:var(--surface); font-size:14.5px; color:var(--ink);
  background-position:right 15px center, right 10px center}
.appbar .chapbtn:hover{border-color:var(--indigo)}
/* The chapter list: a menu under the button at every width now — the margin
   list it used to be competed with the page for attention. */
.appbar .chapindex{
  display:none; position:absolute; top:calc(100% + 8px); right:0; left:auto;
  transform:none; width:min(340px, calc(100vw - 32px));
  max-height:min(70vh, 520px); overflow-y:auto; text-align:left;
  padding:8px; z-index:40; flex-direction:column; gap:1px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-l)}
.appbar .chapindex.open{display:flex}
.appbar .chapindex .chapentry{justify-content:flex-start; text-align:left;
  padding:7px 10px; width:100%; border-radius:8px}
.appbar .chapindex .chapentry:hover{background:#f3efe6}
.appbar .chapindex .chapentry.active{background:var(--indigo-soft); color:var(--indigo)}
.appbar .chapindex .chapnum{order:0; min-width:1.8em; text-align:left; color:var(--muted)}
.appbar .chapindex .chapentry.active .chapnum{color:var(--indigo)}
.appbar .chapindex .chapname{font-size:16px}
.appbar .chapindex .chapentry.active .chapname{font-size:16px}
.appbar .chapindex .chapentry.bare{opacity:.6}

.lipimenu{position:relative}
.lipimenu summary{list-style:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; padding:4px 10px; border-radius:var(--radius-s); line-height:1.1}
.lipimenu summary::-webkit-details-marker{display:none}
.lipimenu summary:hover{background:#f3efe6}
.lipicur{font-size:19px; color:var(--lac)}
.lipicur[data-k="devanagari"]{font-family:'Tiro Devanagari Sanskrit',serif}
.lipicur[data-k="iast"]{font-family:Georgia,serif; font-style:italic}
.lipimenu .lipi{position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  display:grid; grid-template-columns:repeat(3, 44px); gap:4px; padding:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-l)}
.lipimenu .lipibtn{width:44px; height:40px; border:none; border-radius:8px; font-size:20px;
  display:flex; align-items:center; justify-content:center}
.lipimenu .lipibtn:hover{background:#f3efe6}
.lipimenu .lipibtn.active{background:var(--indigo-soft); color:var(--indigo); border:none}
.appbar .acct{font-size:13px}

/* ---------- the page: a white surface ---------- */
.page{max-width:780px; margin:22px auto 0; padding:10px 32px 36px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow)}
:root[data-view="home"] .page{max-width:1100px; background:none; border:none;
  box-shadow:none; padding:0 20px}
:root[data-view="patha"] .page{max-width:820px}

/* the second row: the features of a group */
.vibhaga{display:flex; justify-content:center; gap:4px; margin:14px auto 6px;
  padding:4px; background:#f3efe6; border-radius:999px; width:fit-content; flex-wrap:wrap}
.vibhaga-name{display:flex; flex-direction:column; align-items:center; gap:0;
  border:none; background:none; border-radius:999px; padding:6px 20px 5px;
  font-size:16px; color:var(--ink); cursor:pointer}
.vibhaga-name .vibhagaen{font-family:var(--f-ui); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted)}
.vibhaga-name.active{background:var(--surface); color:var(--indigo); border:none;
  box-shadow:0 1px 3px rgba(40,30,10,.12)}
.vibhaga-name.active .vibhagaen{color:var(--indigo)}
.vibhaga-name:hover{color:var(--indigo)}
.vibhagasep{display:none}

/* ---------- controls look like controls ---------- */
/* A choice among several: a pill; the chosen one filled. */
.smrpickb, .pbhavab, .mode, .page .tab, .lekpick button, .avpick button{
  border:1px solid var(--border-strong) !important; border-radius:999px !important;
  padding:4px 13px !important; background:var(--surface); color:var(--ink);
  line-height:1.5; transition:background .12s, border-color .12s}
.smrpickb:hover, .pbhavab:hover, .mode:hover, .page .tab:hover{border-color:var(--indigo) !important; color:var(--indigo)}
.smrpickb.on, .pbhavab.on, .mode.active, .page .tab.active{
  background:var(--indigo) !important; border-color:var(--indigo) !important; color:#fff !important}
.page .tab.active .cnt{color:#fde3c8}
.smrsep, .pbhavasep, .page .tab + .tab::before{display:none !important}
.smrmode, .smrpada, .smrscope, .smronly, .smrcount, .smrdir, .smrchs{gap:6px}
.smrmode .smrpickb{font-size:15px; padding:6px 16px !important}
.smrchs .smrpickb{min-width:38px; padding:3px 8px !important; text-align:center}
.pbhavabar{display:flex; justify-content:center; gap:8px; flex-wrap:wrap}
.page .tabs{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; border:none}

/* the exercise level */
.modebar{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:12px 0 0}
.modelab{font-size:12.5px; color:var(--muted); text-align:right; line-height:1.1}
.modelab .menuen{font-size:9.5px}
.modes{gap:6px !important}
.mode{font-family:var(--f-sk); font-size:14px; font-weight:400 !important}

/* An action: a filled or outlined button. */
.smrbtn, .btn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:var(--radius-s); padding:8px 20px; font-size:15px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink)}
.smrbtn:hover, .btn:hover{border-color:var(--indigo); background:#fdf4ea}
.smrbtn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.smrbtn.ok:hover{background:#18664a}
.smrbtn.no{background:var(--surface); border-color:var(--err); color:var(--err)}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff}
.btn.primary:hover{background:#97420b}
.btn .btnen{font-size:11px; letter-spacing:.05em; text-transform:uppercase; opacity:.8}
.smrprint{border-radius:var(--radius-s); padding:6px 16px; background:var(--surface)}
.leafbtn{border:1px solid var(--border-strong); border-radius:var(--radius-s); padding:7px 16px;
  background:var(--surface)}
.leafbtn:hover:not(:disabled){border-color:var(--indigo); color:var(--indigo)}
.versenav .vchip{border-radius:8px}

/* settings blocks read as a panel */
.smrbar, .dhbar, .lekbar{background:#faf8f3; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; margin:14px 0 10px}
.smrglab{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

/* ---------- home ---------- */
.homehero{position:relative; margin:28px 0 8px; padding:42px 40px 34px; border-radius:20px;
  background:rgba(255,253,247,.88); border:1px solid var(--border); box-shadow:var(--shadow);
  text-align:center}
.homebrand{font-family:var(--f-display); font-size:56px; font-weight:400; color:var(--indigo); line-height:1.15}
.homelede{max-width:34em; margin:10px auto 0; font-size:17px; color:var(--ink)}
.homeepi{margin:18px auto 0; font-size:18px; color:var(--gold-ink)}
.homeepi cite{display:block; font-style:normal; font-size:13px; color:var(--muted); margin-top:2px}
.homecont{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px;
  margin:26px auto 0; padding:14px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); width:fit-content; max-width:100%}
.homecontlab{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.homecontch{font-size:17px; color:var(--ink); margin-right:6px}
.homeh{font-family:var(--f-ui); font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:34px 4px 12px}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px}
.fcard{display:flex; flex-direction:column; gap:10px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s, border-color .12s;
  font-family:var(--f-ui); color:var(--ink)}
.fcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-l); border-color:var(--indigo)}
.fcard:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.fcardtop{display:flex; align-items:center; gap:12px}
.fmark{width:46px; height:46px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--indigo-soft); color:var(--indigo); font-size:19px}
.fnames{display:flex; flex-direction:column; line-height:1.25}
.fsa{font-size:21px; color:var(--indigo)}
.fen{font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--muted)}
.ftext{font-size:14.5px; line-height:1.55; color:#3d372c; margin:0}
.fchips{display:flex; flex-wrap:wrap; gap:5px}
.chiplet{font-size:13px; padding:2px 9px; border-radius:999px; background:#f3efe6; color:var(--ink)}
.fopen{margin-top:auto; font-size:13.5px; font-weight:500; color:var(--lac)}
.chgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; margin-bottom:30px}
.chtile{display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:10px 14px; color:var(--ink)}
.chtile:hover{border-color:var(--indigo)}
.chtile.on{border-color:var(--indigo); background:var(--indigo-soft)}
.chtn{font-family:var(--f-display); font-size:18px; color:var(--lac); min-width:1.6em; text-align:center}
.chtname{font-size:16px}

/* ---------- phones: the groups become a tab bar at the bottom ---------- */
@media (max-width:860px){
  body{padding-bottom:84px}
  /* A backdrop-filter makes the bar the containing block of anything fixed
     inside it, which would pin the tab bar to the top bar instead of the
     screen. */
  .appbar{backdrop-filter:none; background:var(--surface)}
  .appbar-in{padding:0 12px; gap:8px; min-height:56px}
  .brandname{font-size:19px}
  .groups{position:fixed; left:0; right:0; bottom:0; z-index:35; justify-content:space-around;
    background:rgba(255,255,255,.97); border-top:1px solid var(--border);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:0;
    box-shadow:0 -4px 18px rgba(40,30,10,.06)}
  .groupbtn{min-width:0; flex:1 1 0; padding:6px 2px}
  .groupsa{font-size:15px}
  .appbar .colophon{margin-left:auto; gap:4px}
  .appbar .chapbtn{max-width:44vw; font-size:13.5px; padding:6px 26px 6px 11px}
  .appbar .acct .who b, .appbar .acct .who span{display:none}
  .page{margin:12px 10px 0; padding:6px 16px 28px; border-radius:12px}
  :root[data-view="home"] .page{margin:0; padding:0 12px}
  .homehero{padding:28px 18px 22px; margin-top:14px}
  .homebrand{font-size:40px}
  .homelede{font-size:15.5px}
  .vibhaga-name{padding:5px 13px 4px; font-size:15px}
}
@media (max-width:420px){
  .brandname{display:none}
  .lipimenu .menuen{display:none}
}
/* exercise choices: buttons, the right one green, the wrong one struck */
.opts{display:flex; flex-wrap:wrap; gap:8px; line-height:1.5}
.opt{display:inline-flex; align-items:center; margin:0; padding:7px 15px;
  border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--surface);
  font-size:17px; color:var(--ink); text-decoration:none}
.opt:hover:not(:disabled){border-color:var(--indigo); color:var(--indigo); background:#fdf4ea}
.opt.right{background:var(--ok-bg); border:1px solid var(--ok); color:var(--ok)}
.opt.wrong{background:var(--err-bg); border:1px solid var(--err); color:var(--err);
  text-decoration:line-through; opacity:.75}
.steplabel{margin-bottom:6px}

/* search: suggestions as chips, a plain field */
.anvq{border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--surface)}
.anvq:focus{outline:2px solid var(--indigo); outline-offset:1px; border-color:var(--indigo)}
.anvgroup{gap:6px}
.anvgh{font-size:11.5px; text-transform:uppercase; color:var(--muted); min-width:5.4em}
.anvchip{border:1px solid var(--border); border-radius:999px; padding:2px 11px; background:#faf8f3}
.anvchip:hover{border-color:var(--indigo); color:var(--indigo)}
.anveshana, .dhatavah{max-width:none; padding-top:4px}

/* the English gloss under a Sanskrit label */
.glossen{display:block; font-family:var(--f-ui); font-size:10.5px; line-height:1.2;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:400}
.steplabel .glossen{display:inline; margin-left:7px; font-size:10px}
.sechead .glossen{margin-top:2px; font-size:10.5px; letter-spacing:.08em}
.page .tab{display:inline-flex; flex-direction:column; align-items:center; line-height:1.3;
  padding:5px 15px !important}
.page .tab .glossen{font-size:9.5px}
.page .tab.active .glossen{color:#fde3c8}

/* the sign-in screen: a card on the painting */
.gatecard{background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow-l); padding:38px 32px 28px}
.gatebrand{color:var(--indigo)}
.gatetagen{font-size:14px; color:var(--muted); margin:4px 0 0}
.epigraph{border:none; background:#faf8f3; border-radius:var(--radius); margin:24px 0 26px; padding:14px 10px}
.epiline{color:var(--gold-ink)}
.gbtn.big, .gbtn.ghost{border-radius:var(--radius-s); padding:10px 18px; line-height:1.3}
.gbtn.big{background:var(--surface); border:1px solid var(--border-strong); color:var(--ink)}
.gbtn.big:hover{background:#fdf4ea; border-color:var(--indigo)}
.gbtn.ghost{background:var(--indigo); border:1px solid var(--indigo); color:#fff}
.gbtn.ghost:hover{background:#97420b; color:#fff}
.gbtn.ghost .glossen{color:#fde3c8}
.gbtn .glossen{font-size:10px; margin-top:1px}
.gatesplit::before,.gatesplit::after{background:var(--border)}
.gatenoteen{font-size:12.5px; line-height:1.55; color:var(--muted); margin:2px 0 0}
.gatelipi{border-top:1px solid var(--border)}

/* परीक्षापत्रम् */
.test{padding:4px 0 30px}
.tsthead{text-align:center; margin:14px 0 4px}
.tsttitle{font-size:28px; font-weight:400; color:var(--indigo)}
.tstlede{font-size:14.5px; color:var(--muted); margin:2px 0 0; text-align:center}
.tstlast{font-size:13px; color:var(--gold-ink); margin:6px 0 0}
.tstgrid{margin:0 auto}
.tstkinds{display:flex; flex-wrap:wrap; gap:6px}
.tstkind{display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--surface);
  padding:5px 12px; font-size:15px; color:var(--ink); text-align:left}
.tstkind.on{background:var(--indigo); border-color:var(--indigo); color:#fff}
.tstkind.on .glossen{color:#fde3c8}
.tstkind:disabled{opacity:.4; cursor:default}
.tstkind.static{cursor:default}
.tstacts{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:18px 0}
.tststart{min-width:220px}
.tstq{max-width:600px; margin:10px auto 0; text-align:center}
.tstprog{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); margin-top:8px}
.tstkindlab{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo)}
.tsttrack{height:5px; border-radius:99px; background:#eee8db; margin:6px 0 18px; overflow:hidden}
.tstfill{height:100%; background:var(--saffron); border-radius:99px; transition:width .3s}
.tstask{font-size:19px; color:var(--lac)}
.tstasken{font-size:12.5px; color:var(--muted); margin-bottom:6px}
.tststage{margin:10px 0 6px}
.tstverse .smransl{font-size:20px; line-height:1.85}
.tstquit{display:block; margin:18px auto 0; font-size:12.5px}
.tstnote{margin:8px auto 4px; max-width:34em; font-size:15px; line-height:1.7; color:var(--gold-ink)}
.tstresult{text-align:center; margin:20px 0 10px}
.tstscore{font-family:var(--f-display); font-size:54px; color:var(--indigo); line-height:1.1}
.tstpct{font-size:14px; color:var(--muted)}
.tstverdict{font-size:20px; color:var(--lac); margin-top:4px}
.tstbreak{justify-content:center}
.tstreview{max-width:620px; margin:0 auto}
.tstrev{padding:12px 0; border-top:1px solid var(--border)}
.tstrevtop{display:flex; align-items:baseline; gap:10px}
.tstrevcue{font-size:17px; margin:4px 0 2px 2.6em}
.tstrevans{font-size:16px; margin-left:2.6em}
.tstno{color:var(--err); text-decoration:line-through}
.tstok{color:var(--ok)}
@media (max-width:520px){ .tstrevcue, .tstrevans{margin-left:0} }

/* the verse bar */
.versebar{display:flex; align-items:stretch; justify-content:center; gap:8px; margin:14px 0 6px}
.vbstep{width:46px; border:1px solid var(--border-strong); border-radius:var(--radius-s);
  background:var(--surface); font-size:22px; line-height:1; color:var(--indigo); cursor:pointer}
.vbstep:hover:not(:disabled){border-color:var(--indigo); background:#fdf4ea}
.vbstep:disabled{opacity:.3; cursor:default}
.vbcur{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-width:190px; padding:6px 16px; border:1px solid var(--border-strong); border-radius:var(--radius-s);
  background:var(--surface); cursor:pointer; color:var(--ink)}
.vbcur:hover, .vbcur.open{border-color:var(--indigo)}
.vbnum{font-size:17px; color:var(--indigo)}
.vbstep:focus-visible, .vbcur:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.versenav{margin:6px 0 14px !important; padding:12px; background:#faf8f3;
  border:1px solid var(--border); border-radius:var(--radius)}

/* the verse index: lighter chips, so the verse stays the thing on the page */
.versenav .vchip{background:#faf8f3; border-color:var(--border)}

/* The painting's credit only where the painting is. */
.artcredit{display:none !important}
:root[data-view="home"] .artcredit{display:block !important}

@media (max-width:860px){
  .page{margin:10px 6px 0; padding:6px 10px 24px}
  /* the word sheet rises from above the tab bar, not over it */
  .wordsheet{bottom:calc(62px + env(safe-area-inset-bottom)) !important}
  .sline{font-size:20px}
}

@media print{
  .appbar, .groups, .vibhaga, .modebar{display:none !important}
  .page{border:none; box-shadow:none; margin:0; padding:0; max-width:none}
}

/* ---------- अध्ययनम् — one verse as a study book sets it ---------- */
.adhyayana{max-width:760px; margin:0 auto; padding:8px 16px 40px}
.adhhead{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:10px 0 12px}
.adhtitle{font-size:15px; color:var(--gold-ink)}
.adhread{font-size:14px; padding:5px 14px}
.adhpick{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 14px}
.adhnum{min-width:34px; height:30px; padding:0 6px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--muted);
  font-family:var(--f-ui); font-size:13px; cursor:pointer}
.adhnum:hover{border-color:var(--indigo); color:var(--indigo)}
.adhnum.on{background:var(--indigo); border-color:var(--indigo); color:#fff}
.adhnav{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border)}
.adhnav.adhfoot{border-bottom:none; border-top:1px solid var(--border); margin-top:34px}
.adhstep{font-size:14px; padding:6px 14px}
.adhstep:disabled{opacity:.35; cursor:default}
.adhcount{font-family:var(--f-ui); font-size:13.5px; color:var(--muted)}
.adhdraft{margin:14px 0 0; padding:8px 12px; border-radius:var(--radius-s);
  background:var(--indigo-soft); color:#7a3608; font-size:14px; text-align:center}
.adhsec .sechead{margin-top:34px}
.adhshloka{text-align:center; font-size:22px; line-height:1.75; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 12px}
.adhprose{font-size:18px; line-height:1.8; color:var(--ink); margin:0; text-align:center}
.adhpending{color:var(--muted); font-size:14px; text-align:center; margin:4px 0}
.adhparichaya{display:grid; grid-template-columns:max-content 1fr max-content 1fr;
  gap:6px 14px; margin:0; font-size:16px}
.adhparichaya dt{color:var(--ink); font-weight:400}
.adhparichaya dd{margin:0; color:var(--gold-ink); font-size:14.5px}
.adhscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.adhtable{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-s); overflow:hidden}
.adhtable th{font-family:var(--f-ui); font-size:12.5px; font-weight:500; color:var(--muted);
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); background:#faf8f3}
.adhtable td{padding:7px 10px; border-bottom:1px solid #f0eadc; vertical-align:top; font-size:15.5px}
.adhtable tr:last-child td{border-bottom:none}
.adhtable td.adhw{color:var(--ink); white-space:nowrap}
.adhtable td.sk{font-size:16.5px}
.adhgloss{font-family:var(--f-ui); color:#3a3328}
.adhbhava p{margin:0 0 12px; line-height:1.75; font-size:16.5px}
.adhbhava p.sk{font-size:18px}
.adhlang{display:block; font-family:var(--f-ui); font-size:11.5px; font-weight:500;
  letter-spacing:.05em; color:var(--indigo); margin-bottom:2px}
.adhsub{font-size:16px; color:var(--lac); margin:16px 0 6px; font-weight:400}
.adhderiv{display:grid; grid-template-columns:max-content 1fr; gap:5px 16px; margin:0; font-size:16px}
.adhderiv dd{margin:0; color:var(--gold-ink)}
@media (max-width:640px){
  .adhparichaya{grid-template-columns:max-content 1fr}
  .adhderiv{grid-template-columns:1fr}
  .adhderiv dd{margin-bottom:6px}
  .adhshloka{font-size:19px}
  /* Four columns do not fit a phone: each word becomes a block — the word and
     its Sanskrit gloss on one line, the language's gloss and English under. */
  .adhtable thead{display:none}
  .adhtable, .adhtable tbody{display:block}
  .adhtable tr{display:grid; grid-template-columns:max-content 1fr; gap:2px 12px;
    padding:8px 10px; border-bottom:1px solid #f0eadc}
  .adhtable tr:last-child{border-bottom:none}
  .adhtable td{padding:0; border:none}
  .adhtable td.adhw{color:var(--indigo)}
  .adhtable td.adhgloss{grid-column:1 / -1; font-size:15px}
  .adhtable td.adhgloss:last-child{color:var(--muted)}
}

/* ==========================================================================
   नारायणीयम् (2026-10-27) — what this site adds to the Gita site's look.
   Last in the file, so it wins, the way the redesign layer above wins.
   ========================================================================== */

/* A choice that toggles, set as the redesign sets one: a pill, filled when on. */
.pill{display:inline-flex; flex-direction:column; align-items:center; gap:0;
  border:1px solid var(--border-strong); border-radius:999px; padding:4px 14px;
  background:var(--surface); color:var(--ink); cursor:pointer; line-height:1.3;
  transition:background .12s, border-color .12s}
.pill .glossen{font-size:10px; margin:0}
.pill:hover{border-color:var(--indigo); color:var(--indigo)}
.pill.on{background:var(--indigo); border-color:var(--indigo); color:#fff}
.pill.on .glossen{color:#fde3c8}
.pill:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* ---------- पाठः ---------- */
.pathahead .avbar{height:auto; gap:8px 10px; align-items:center; margin:4px 0 18px}
.avlab{display:inline-flex; flex-direction:column; align-items:center; line-height:1.1}
.avlab .glossen{font-size:9.5px; margin:0}
.avstepn{width:2.4em; min-width:0; background:none; border:none;
  border-bottom:1px solid var(--line); font-family:var(--f-sk); padding:0 1px}
.avstepn:focus{outline:none; border-bottom-color:var(--indigo)}
.avplay{font-size:16px; border:1px solid var(--border-strong); border-radius:999px;
  padding:4px 14px; opacity:1; color:var(--indigo); background:var(--surface)}
.avbar.running .avplay{background:var(--indigo); border-color:var(--indigo); color:#fff}
.pdashaka{display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 22px}
.pdashakalab{display:flex; flex-direction:column; align-items:center; font-size:15px; color:var(--ink)}
.pdashakalab .glossen{font-size:10px}
.pdashaka audio, .study audio{height:40px; max-width:100%}
.pmetre{text-align:center; font-size:15px; color:var(--gold-ink); margin:4px 0 18px}
.pathahead .pmetre{margin:6px 0 0}
.pmetrelab{color:var(--muted)}
.pline{display:block}
.pverse.found{background:var(--indigo-soft); border-radius:6px; transition:background 1s}
.pverse.playing{background:#fdf4ea; border-radius:6px}
.pplay{font-size:13px}

/* ---------- श्लोकाध्ययनम् ---------- */
.study{max-width:760px; margin:0 auto}
.sghead{text-align:center; color:var(--muted); font-size:15px; margin:4px 0 2px}
.study .versebar{margin:10px 0 22px}
.study .vbnum{font-size:17px}
.sgverse{display:flex; flex-direction:column; align-items:center; gap:2px; margin:0 0 22px}
.sgline{display:flex; flex-direction:column; align-items:center; margin:0 0 6px}
.sgtext{font-size:22px; line-height:1.75; text-align:center; color:var(--ink)}
.sgscan{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 3px; margin:2px 0 10px}
.sgsyl{display:inline-flex; flex-direction:column; align-items:center; min-width:1.5em;
  padding:1px 3px 0; border-radius:5px; font-size:15px; line-height:1.4}
.sgsyl.g{background:var(--indigo-soft)}
.sgsyl.l{background:#f3efe6}
.sgmark{font-size:13px; color:var(--muted); line-height:1}
.sgsyl.g .sgmark{color:var(--indigo); font-weight:700}
.sgscan.off{outline:2px solid var(--err); outline-offset:3px; border-radius:6px}
.sgnote{font-size:13px; color:var(--muted); text-align:center; margin:4px 0 0}
.sgmetre{display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; align-items:baseline;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; margin:0 0 18px; box-shadow:var(--shadow)}
.sgmetre .sgmname, .sgmetre .sgmrow{display:contents}
.sgmlab{font-size:13px; color:var(--muted); text-align:right}
.sgmval{font-size:19px; color:var(--indigo)}
.sgmetre .sgpat{display:block; grid-column:2; letter-spacing:.12em; color:var(--gold-ink); font-size:15px}
.sgmetre .pill{grid-column:2; justify-self:start; margin-top:6px}
.sgaudio{display:grid; grid-template-columns:max-content 1fr; gap:14px 18px; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow)}
.sgrow{display:contents}
.sglab{display:flex; flex-direction:column; align-items:flex-end; text-align:right; padding-top:8px}
.sglab .sk{font-size:17px}
.sglab .glossen{font-size:10px; margin:0}
.sgplayers{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.sgalt{font-size:13px; color:var(--muted); margin-top:4px}
.sgmissing{display:flex; flex-direction:column; padding-top:8px; color:var(--muted); font-size:15px}
.sgmissing .glossen{font-size:10px; margin:0}
.sgaudio > .pill{grid-column:2; justify-self:start}
@media (max-width:600px){
  .sgtext{font-size:19px}
  .sgmetre, .sgaudio{grid-template-columns:1fr; padding:14px}
  .sgmlab, .sglab{text-align:left; align-items:flex-start; padding-top:0}
  .sgpat, .sgmetre .pill, .sgaudio > .pill{grid-column:1}
  .sgsyl{font-size:14px}
}

/* ---------- अन्वेषणम् ---------- */
.anvhead{text-align:center; margin:4px 0 14px}
.anvtitle{font-size:26px; color:var(--indigo); margin:0}
.anvlede{color:var(--muted); font-size:14.5px; max-width:560px; margin:6px auto 0}
.anvcount{font-size:13.5px; color:var(--muted); margin:10px 2px}
.anvlist{display:flex; flex-direction:column; gap:8px}
.anvhit{display:flex; gap:14px; align-items:baseline; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:10px 14px; color:var(--ink)}
.anvhit:hover{border-color:var(--indigo)}
.anvref{font-size:13px; color:var(--indigo); min-width:3.6em; font-variant-numeric:tabular-nums}
.anvtext{font-size:16.5px; line-height:1.6}
.anvtext mark{background:var(--indigo-soft); color:var(--indigo); border-radius:3px; padding:0 1px}

/* ---------- home and the chooser: which dashakas are recorded ---------- */
.chtile{position:relative}
.chtaudio, .chapaudio{color:var(--indigo); font-size:12px}
.chtile .chtaudio{position:absolute; top:6px; right:8px}
.chapindex .chapaudio{margin-left:auto; padding-left:8px}
.homekey{font-size:13px; color:var(--muted); margin:-6px 0 10px}

footer .sitecredit{font-size:12.5px; color:var(--muted)}
footer .sitecredit a{color:var(--muted)}