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

/* The palette is तञ्जावूर् — Thanjavur painting — and not the Rajput miniature
   palette गीताभ्यासः uses. The reason is the text: this is a South Indian Śrī
   Vidyā stotra whose Goddess is अरुणा, red as daybreak, and whose own title
   word is लहरी, a wave. Tanjore is the devotional painting tradition of
   exactly that region: a gessoed board, kumkuma red, malachite, ultramarine,
   and gold leaf used as ornament and never as text.

   Sai chose कुङ्कुम of three directions shown side by side: **red carries the
   page** rather than accenting it. Kumkuma takes the headings, the structural
   rules and the current division, on a rose-ivory ground. There is no second
   structural colour — the indigo that used to hold the headings is gone, and
   the token is still called `--indigo` only because forty rules refer to it.

   The argument is the text's own: this work's Goddess is अरुणा, red as
   daybreak, and verse 16 is अरुणाम् एव भवतीम् .

   Contrast measured against the ground, not eyeballed: ink 14.7:1, faint 5.2,
   heading 8.2, rubric 5.3, malachite 5.8, violet 9.4, gold-ink 5.5. Gold is
   2.75 and rules are 2.16 — both ornament only, never text. */
:root{
  --paper:#fbf2ea; --card:#fffaf4; --ink:#2b1d1a; --faint:#7a6157;
  --line:#f0dccb; --rule:#cf9d7e;
  --indigo:#8c1c22; --indigo-soft:#f8e6de;
  --lac:#c1272d; --lac-deep:#8c1c22; --lac-soft:#f9e2dd;
  --gold:#c08a2e; --gold-soft:#f6ead0; --saffron:#d98324;
  /* Gold is an ornament colour: 2.75:1 on this ground, too weak for small
     text.  Anything that has to be *read* uses this darker bronze instead. */
  --gold-ink:#845a12;
  /* Correct is malachite and wrong is VIOLET, not a second red.  Green against
     red is the one pairing the commonest colour-vision deficiencies cannot
     separate, and it is the pairing this app leans on hardest — every graded
     token, every option, every tile.  Violet also has to be a long way from
     the rubric here, because on this palette the rubric IS red. */
  --ok:#1c6b52; --ok-bg:#dcece5; --err:#5c2b6b; --err-bg:#ece1f0;
  --chip:#f4e5d6;
  /* A printed page has no night mode; keep controls light as well. */
  color-scheme:light;

  /* No display face. Rozha One drew Devanagari numerals as LATIN figures
     (docs/DECISIONS.md D20), which is how १२३४ was rendering as 1234 — and a
     face that cannot set this page's numerals has no business setting its
     headings either. A printed Sanskrit edition sets a part-title in the text
     face, one size up and letter-spaced, which is what .vibhaga-name already
     argued for and now what everything does. One Sanskrit voice, one UI
     voice, and one webfont fewer to load. */
  --f-display:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  /* Devanagari numerals.  NOT --f-display: Rozha One carries U+0966–096F but
     draws them as LATIN figures, so nothing falls back and १२३४ renders as
     1234 — roman script on a page whose whole rule is that there is none.
     Verified by rendering both faces side by side at 60px.  Anything that
     sets a Devanagari numeral uses this instead. */
  --f-num:'Tiro Devanagari Sanskrit','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:2px 9px; margin:14px 0 34px; justify-content:center}
/* The श्लोकसूची is set as a line of numerals, not as a grid of boxes.
   Forty-one bordered buttons were the loudest thing on a page whose rule is
   that choices are text with dotted rules and never buttons — and they were
   loudest directly above the verse, which is supposed to be the one thing you
   look at. The numeral is the target; the rule under a finished verse is the
   only mark, and the current one is in rubric like every other current thing
   on this page. The 44px hit area is kept as padding, so nothing became
   harder to tap. */
.vchip{
  font-family:var(--f-num); font-size:16.5px; min-width:30px; padding:7px 4px 6px;
  border:none; border-bottom:1px solid transparent; background:none;
  color:var(--faint); cursor:pointer; position:relative; transition:none;
}
.vchip:hover{color:var(--lac)}
.vchip:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
/* A verse already worked reads as ink rather than as apparatus, with a hairline
   under it — the mark a reader makes in a margin, not a badge. */
.vchip.done{color:var(--ink); border-bottom-color:var(--rule)}
.vchip.active{color:var(--lac); border-bottom-color:var(--lac); font-weight:500}

/* ---------- 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-num); 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);
}
/* 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 khaṇḍa list, under the running head ----------
   It used to sit in the left margin, `fixed`, on the printed-edition argument
   that a contents page belongs beside the text block. Two khaṇḍas is not a
   contents page. Set beside a reading it was two lines of standing text in the
   corner of the eye, naming a division the reader had already chosen, at every
   moment they were reading something else — and Sai asked for it gone
   (2026-09-03).

   So there is one form of this now, the panel the phone layout already used,
   opened by the khaṇḍa's own name in the running head. That name was always
   printed there; it is now the control rather than a label, which is what
   `.chapbtn` was built to be. `docs/DECISIONS.md` D37.

   Not a native <select>: an <option> is drawn by the platform, and on Android
   that is where the conjuncts break. */
.chapindex{
  display:none; position:absolute; top:calc(100% - 5px); left:0;
  width:min(330px, calc(100vw - 48px)); z-index:20;
  flex-direction:column; gap:1px;
  max-height:min(60vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  text-align:left; padding:7px 0;
  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::-webkit-scrollbar{width:0}
.chapentry{
  display:flex; align-items:baseline; justify-content:flex-start; gap:9px;
  background:none; border:none; padding:4px 15px; width:100%; cursor:pointer;
  font-family:var(--f-sk); color:var(--faint); text-align:left;
  line-height:1.5;
}
.chapnum{
  font-family:var(--f-num); font-size:14px; color:var(--rule);
  min-width:1.5em; text-align:left; order:0;
}
.chapname{font-size:16.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}

/* The static running head is gone with the margin index: .chapbtn prints
   the same name and opens the list, so two of them would say it twice. */
.chaphead{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}
}

/* ---------- व्याकरणम् : 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{
  /* Shrink to the name, never stretch to the row. It used to be `1 1 auto`,
     which was right when this only existed on a phone and was the whole
     running head; on a wide colophon it made a 300px control out of a
     five-syllable word and left the chevron stranded far from it. */
  flex:0 1 auto; min-width:0; max-width:100%; 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}
/* D21's note: descriptive, attributed, never operative -- set apart from the
   paraphrase like a footnote, not as a warning or an aside. */
.bhavartha-note{
  font-size:15px; line-height:1.7; color:var(--faint);
  border-left:2px solid var(--gold); padding:2px 0 2px 14px;
  margin-top:14px !important;
}
.bhashya.pada p{text-indent:0}
/* पदार्थः (D59) — the one tab whose content is not Sanskrit. Devanagari word
   at native size in the same script every other word on the page uses;
   English gloss set smaller, in the page's own body face, never `--f-sk` —
   it is not Sanskrit and should not look like it is. A definition list, not
   a table: word and gloss are a pair, not a grid, and `dl` says that in the
   markup as well as on screen. */
.padartha{
  display:grid; grid-template-columns:max-content 1fr;
  column-gap:14px; row-gap:10px; margin:2px 0 6px; align-items:baseline;
}
.padartha dt{font-family:var(--f-sk); font-size:19px; color:var(--ink); margin:0}
.padartha dd{font-size:15px; line-height:1.5; color:var(--faint);
  margin:0; text-align:left}
/* ---------- पाठः: 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. */
/* A word is highlightable whenever either recording can locate it, but only
   clickable where पदपाठः can play it on its own — so the pointer and the hover
   belong to `.playable`, not to every token. A verse whose span assignment was
   withheld still highlights as it is recited; its words simply do not invite a
   click that would do nothing. */
.ptok{border-radius:2px; transition:background-color .12s linear}
.ptok.playable{cursor:pointer}
.ptok.playable:hover{background:var(--lac-soft)}
.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 spans the measure, and the control sits at the measure's own left
   edge.
   fit-content was tried first — hug the longest line so the ▶ stays near the
   words — and it is why the controls came out ragged: every verse is a
   different width, so every button hung off a different edge and they stepped
   down the page instead of forming a column. A control that moves for reasons
   the reader cannot see reads as a fault.
   So the box is the measure, and the ▶ is a marginal mark in a straight
   column, which is what a printed edition does with one. It sits further from
   a short verse than a long one; that is what a margin is. */
.pverse.hasaudio{ position:relative; }
.pplay{
  position:absolute; left:0; 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. */
.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-num); 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 .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:2px 10px; justify-content:flex-start;
  margin:14px 0 6px; max-height:none; overflow:visible; flex-direction:row;
}
/* Numerals, not boxes.  Forty-one bordered chips sat directly above the verse
   and were the loudest thing on the page — on a page whose whole rule is that
   a choice is text with a rule under it and never a button, and whose one
   hero is supposed to be the verse itself.  This is the contents line of a
   printed edition: the numbers in a row, the finished ones in ink with a
   hairline, the current one in rubric.  The 30px hit area survives as padding,
   so nothing became harder to tap. */
.page .vchip{
  /* `width:auto` is load-bearing: the sticky-sidebar variant above sets
     width:100% and has the same specificity, so dropping the width here made
     every numeral a full-width row. */
  width:auto; min-width:26px; padding:6px 3px 5px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-num); font-size:15px;
  color:var(--faint); background:none;
  border:none; border-bottom:1px solid transparent; border-radius:0;
  position:relative;
}
.page .vchip:hover{color:var(--lac); background:none}
.page .vchip:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.page .vchip.done{color:var(--ink); border-bottom-color:var(--rule)}
/* background:none matters for the same reason width:auto does — the
   sidebar variant tints the current chip and has equal specificity. */
.page .vchip.active{
  color:var(--lac); background:none; border-left-color:transparent;
  border-bottom-color:var(--lac); font-weight:500;
}
.page .vchip.done::after, .page .vchip.active::after{content:none}
.page .vchip.bare{opacity:.4}
.page .vchip.bare:hover{opacity:.85}

@media (max-width:620px){
  .page .versenav{gap:2px 7px}
  .page .vchip{min-width:24px; 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}
.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} }

/* position:relative is load-bearing: .pplay is absolutely positioned at
   left:-34px, and without a positioning context here each button resolved
   against a different ancestor and landed at a different x — the play marks
   stepped raggedly down the margin instead of forming a column. */
.pverse{position:relative; 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. */

.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}
  .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; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin:16px 0 6px; padding-bottom:14px;
  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}
/* 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{display:inline-flex; align-items:center; gap:6px}
.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:15px}

/* ---- परीक्षा ---- */
.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}
.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}
.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; margin-left:4px;
  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%;
  background:none; border:none; cursor:pointer; text-align:left;
  border-radius:2px;
}
.smrrow:hover{background:#f2e6c8}
.smrrow:focus-visible{outline:2px solid var(--lac); outline-offset:1px}
.smrtext{font-size:17px; color:var(--ink)}
/* 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} }

@media print{
  .smrbar, .smract, .smrscore{display:none !important}
  .smrrow{background:none !important}
  .smrhead{margin-top:0}
  .smrlist{column-rule-color:#bbb}
  .smrtext{color:#000}
  .smrmiss{color:#666}
}


/* ================= पाठः — सौन्दर्यलहर्याः विशेषाः =================
   Appended by web/js/patha.js's rewrite. Three things the Gita's पाठः had no
   need of: the choice between the two recordings, the विषयः line, and the
   hyphen the edition sets where a word straddles two pādas. Everything else on
   this page still uses the rules above. */

/* Which of the two recitations the ▶ opens. Set exactly as सभावार्थम् is —
   names with a dotted rule under them, the live one in rubric — because it is
   the same kind of thing: a choice about the reading, standing with the
   apparatus above the khaṇḍa's name and not inside the text. */
.pathrecital{text-align:center; margin:0 0 22px}
.pathrecb{
  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);
}
.pathrecb:hover{color:var(--ink)}
.pathrecb.on{color:var(--lac); border-bottom:1px solid var(--lac)}
.pathrecb:focus-visible{outline:2px solid var(--lac); outline-offset:2px}
.pathrecdot{color:var(--rule); margin:0 .5em}
/* Apparatus, like the practice bar and the सभावार्थम् toggle. */
@media print{ .pathrecital{display:none !important} }

/* With no अथ formula over it the khaṇḍa's name carries the head alone, so it
   is set at the formula's size and in the formula's colour rather than as the
   subtitle it was under one. .pathaname's own rule still supplies the face and
   the balance; this only lifts it. */
.pathaname.alone{
  font-size:22px; color:var(--indigo); letter-spacing:.04em;
  margin-top:0; line-height:1.55;
}
@media (max-width:620px){ .pathaname.alone{font-size:18px} }

/* विषयः — the topic line over a verse. It has to orient a reader who arrives
   at verse 57 cold and then get out of the way, so it is small, letterspaced
   and bronze: read before the verse and never instead of it. The air goes
   above it, where it separates this śloka from the last, exactly as the Gita's
   उवाच line worked. */
.pvishaya{
  font-family:var(--f-sk); font-size:14.5px; line-height:1.7;
  color:var(--gold-ink); letter-spacing:.08em; margin:0 0 8px;
}
.pverse.hasvishaya{margin-top:34px}
.pverse:first-child.hasvishaya{margin-top:8px}
@media (max-width:620px){
  .pvishaya{font-size:13.5px}
  .pverse.hasvishaya{margin-top:28px}
}

/* The straddle hyphen: कृपा- at the end of the third pāda, मपाङ्गात्ते at the
   start of the fourth. It is the edition's lineation, not the text — so it is
   set in the verse's own ink and size, sits flush against the last word, and
   is left out of a selection so that copying the verse copies the verse. */
.pwrap{-webkit-user-select:none; user-select:none}

/* ================= लिपिः, विषयः, खण्डः =================
   Added when the Gita fork became this project. Three small things the Gita
   has no equivalent of.

   लिपिः is the script the verse is set in — and only the verse: the whole
   apparatus stays Devanagari, because the grammar layer is checked against
   exactly one canonical text. Set as a line of names with the current one in
   rubric, exactly as .vibhaga-name and .mode are, and for the same reason —
   a choice on this page is text with a rule under it, never a button with a
   box round it. */
.lipi{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end;
  gap:0; margin:0;
}
.lipibtn{
  flex:0 0 auto; background:none; border:none; border-bottom:1px solid transparent;
  padding:1px 1px 3px; margin:0; cursor:pointer;
  /* Smaller than the divisions above it, deliberately: the script is chosen
     once and then lived with, so it should not read as loudly as the thing you
     move between constantly. */
  font-family:var(--f-sk); font-weight:400; font-size:13.5px;
  color:var(--faint); letter-spacing:.03em; line-height:1.3;
}
/* Each name is set in the script it names, so each needs the face for that
   script — --f-sk is a Devanagari face and would leave five of the six to
   whatever the browser picked. No webfonts here: every platform this runs on
   ships all five (Nirmala UI on Windows, the Kohinoor/MN families on Apple,
   Noto on Android and Linux), and four more font files to letter a six-word
   line is not a trade worth making. The stacks name Noto first so a machine
   that has it gets a face matched to the page's serif voice.

   The sizes differ because the scripts do. Devanagari hangs from a headline
   and reads large for its em; Telugu, Kannada and Malayalam are round and
   read larger still; Tamil is open and reads small. Equal font-size would
   give a visibly ragged line, so these are set by eye to equal apparent
   size, not to equal number. */
/* Tiro draws Devanagari large for its em, and next to five scripts that do not
   it was the only name that looked shouted. */
.lipibtn[data-s="devanagari"]{font-size:12.5px}
.lipibtn[data-s="telugu"]{
  font-family:'Noto Serif Telugu','Kohinoor Telugu','Nirmala UI',serif;
  font-size:12.5px;
}
.lipibtn[data-s="kannada"]{
  font-family:'Noto Serif Kannada','Kohinoor Kannada','Nirmala UI',serif;
  font-size:12.5px;
}
.lipibtn[data-s="tamil"]{
  font-family:'Noto Serif Tamil','Tamil MN','Nirmala UI',serif;
  font-size:14px;
}
.lipibtn[data-s="malayalam"]{
  font-family:'Noto Serif Malayalam','Malayalam MN','Nirmala UI',serif;
  font-size:12.5px;
}
/* Tiro carries Latin, so Roman stays on the page's own serif rather than
   importing a seventh face for one word. */
.lipibtn[data-s="roman"]{letter-spacing:.06em}
.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)}
/* A separator of its own, so the rule under the current name does not run
   under the dot as well — the same reason .vibhagasep exists. */
.lipidot{color:var(--rule); font-family:var(--f-ui); font-size:11px; margin:0 .55em}

/* A script generated with no printed edition to check it against says so,
   quietly, as apparatus. Malayalam is the case: there is no Malayalam source
   for this work at all. Bronze, not red — it is a caveat, not an error. */
.lipinote{
  grid-column:1/-1; margin:2px 0 0; text-align:right;
  font-family:var(--f-sk); font-size:12.5px; color:var(--gold-ink);
  letter-spacing:.02em;
}

/* विषयः — a two-to-four-word Sanskrit topic line above the verse. It replaces
   what the Gita's `अर्जुन उवाच –` frame bought: this work is one voice
   throughout, so there is no speaker to print, and what a reader arriving at
   verse 57 cold actually needs is to know what the verse is about. Set as a
   printed edition sets a marginal rubric — small, indigo, spaced. */
.vishaya{
  text-align:center; font-family:var(--f-sk); font-size:14px;
  color:var(--indigo); letter-spacing:.08em; margin:0 0 10px;
}

/* The verse range beside a khaṇḍa's name in the अनुक्रमणिका. The khaṇḍas are
   named rather than numbered — आनन्दलहरी, सौन्दर्यलहरी — so the useful thing
   to set beside the name is which verses it covers. */
.chaprange{color:var(--faint); font-size:12.5px; letter-spacing:.03em}