/* गीताभ्यासः — 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;
}

*{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 4px 9px; font-size:16px;
  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;
}
/* Signature: the join. Solving splits the form at its seam. */
.qword .seam{color:var(--saffron); margin:0 .22em; font-family:var(--f-ui); font-size:.62em;
  vertical-align:.18em; display:inline-block}
.qword.split{animation:splitOpen .5s cubic-bezier(.2,.75,.3,1) both}
.qword.split .seam{animation:seamMark .5s ease both}
.qword.settled{animation:none}
.qword.settled .seam{animation:none}
@keyframes splitOpen{
  from{letter-spacing:-.055em; opacity:.5}
  to{letter-spacing:normal; opacity:1}
}
@keyframes seamMark{
  from{opacity:0; transform:scale(.3)}
  to{opacity:1; transform:none}
}

/* 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);
}
.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 1080px 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 — fall back to the colophon selector. */
@media (max-width:1080px){
  .chapindex{display:none}
}
/* With the index showing, the selector would be a second control for the same
   thing; keep it for assistive tech but take it out of the running head. */
@media (min-width:1081px){
  .chaphead{display:block; flex:1 1 auto; min-width:0; font-size:14.5px;
    color:var(--faint); letter-spacing:.01em}
  .colophon .chapsel{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
}

/* 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}
}

/* ---------- व्याकरणम् : 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-display); font-weight:400; font-size:23px;
  color:var(--indigo); margin:24px 0 3px; padding-bottom:6px;
  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 .pbar{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{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 0 12px; border-bottom:1px solid var(--rule); margin-bottom:4px;
}
.colophon .chapsel{
  flex:1 1 auto; min-width:0; border:none; background:none; padding:2px 22px 2px 0;
  font-size:14.5px; color:var(--faint);
  background-position:right 6px center, right 1px center;
}
.colophon .chapsel:hover{color:var(--ink)}
.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{
  font-family:var(--f-display); font-weight:400; font-size:19px;
  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}

/* 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}
.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 .pbar{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)}