/* Yoga-sutra corpus reader — styled with OUR shared Sanskrit design system
   (parchment + maroon accent, cf. skt-common.css; tokens embedded so this
   folder stays self-contained). Secondary texts (HYP, Sankhyakarika) use an
   indigo alternate accent. English UI only. */

:root {
  --bg: #f5eedb; --panel: #fbf6ea; --card: #fffdf6;
  --ink: #2b2540; --ink-soft: #5c5468; --line: #e3d8bf;
  --accent: #8a3a1c; --accent-soft: #b9603c; --gold: #a8841e;
  --shadow: 0 2px 10px rgba(70, 50, 20, .12);
  /* alternate scheme for the secondary texts */
  --accent2: #2c4a7a; --accent2-soft: #5d7db1; --panel2: #eef1f7; --line2: #ccd6e8;
  --font-dev: "Noto Serif Devanagari", "Tiro Devanagari Sanskrit", serif;
  --font-ben: "Noto Serif Bengali", serif;
  --font-iast: "Gentium Plus", "Cormorant Garamond", serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --readsize: 19px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }

/* ---------------- site header + nav ---------------- */

header.site { text-align: center; padding: 1.3rem 1rem .4rem; }
header.site h1 { margin: 0; font-weight: 600; font-size: 1.5rem; letter-spacing: .2px; }
header.site h1 a { color: inherit; text-decoration: none; }
header.site .sub { font-family: var(--font-dev); font-size: 1.45rem; color: var(--accent); margin-top: .1rem; }
header.site .tag { color: var(--ink-soft); font-size: .92rem; margin-top: .25rem; }

nav.topnav { text-align: center; padding: .3rem 1rem .6rem; }
nav.topnav a {
  display: inline-block;
  font-size: .92rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .25rem .7rem;
  border-radius: 9px;
}
nav.topnav a:hover { color: var(--accent); background: var(--card); }
nav.topnav a.here { color: var(--accent); font-weight: 600; }

/* ---------------- buttons & segmented toggles ---------------- */

.btn, .seg button {
  font-family: var(--font-ui); font-size: .88rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 9px; padding: .35rem .75rem;
  transition: background .12s, border-color .12s;
}
.btn:hover, .seg button:hover { border-color: var(--accent-soft); }
.seg {
  display: inline-flex; gap: 0; border: 1px solid var(--line);
  border-radius: 9px; overflow: hidden; background: var(--card);
}
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}

/* ---------------- reader toolbar ---------------- */

.readerbars {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 238, 219, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(2px);
}
.toolbar {
  padding: .45rem .8rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center;
}
.toolbar .lbl, .findbar .lbl { font-size: .8rem; color: var(--ink-soft); margin-left: .4rem; }

/* find bar: go-to-verse + in-page word search */
.findbar {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center;
  padding: .35rem .8rem .5rem;
  border-top: 1px dashed var(--line);
}
.findbar .fgroup { display: inline-flex; align-items: center; gap: .35rem; }
.findbar input {
  font-family: var(--font-ui); font-size: .85rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: .3rem .55rem;
}
.findbar .goto-input { width: 5.5rem; }
.findbar .find-input { width: 12rem; max-width: 46vw; }
.findbar input:focus { outline: 2px solid var(--accent-soft); border-color: transparent; }
.findbar .btn { padding: .3rem .55rem; font-size: .82rem; }
.findbar .btn.ficon { padding: .3rem .5rem; line-height: 1; }
.findbar .fcount { font-size: .78rem; color: var(--ink-soft); min-width: 2.6rem; text-align: center; }
.findbar .gmsg { font-size: .78rem; color: var(--accent-soft); }
/* the chevron folds the toolbar away, leaving the find/go-to line — the one
   line worth keeping sticky — at the top of the page */
.findbar .bar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  color: var(--ink-soft); cursor: pointer;
  transition: transform .25s, color .12s, border-color .12s;
}
.findbar .bar-toggle:hover { border-color: var(--accent-soft); color: var(--accent); }
body.bars-collapsed .findbar .bar-toggle { transform: rotate(180deg); color: var(--accent); border-color: var(--accent-soft); }
body.bars-collapsed .readerbars .toolbar { display: none; }
body.bars-collapsed .readerbars .findbar { border-top: 0; }
body.secondary .findbar input:focus { outline-color: var(--accent2-soft); }

/* find highlights + go-to flash */
.maintext mark.find-hit { background: #f3e3ad; color: inherit; border-radius: 2px; padding: 0 1px; }
.maintext mark.find-hit.current { background: var(--gold); color: #fff; }
body.secondary .maintext mark.find-hit.current { background: var(--accent2); }
@keyframes ysflash {
  0% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: var(--shadow); }
}
.vcard.flash { animation: ysflash 1.6s ease-out; }
body.secondary .vcard.flash { animation: ysflash2 1.6s ease-out; }
@keyframes ysflash2 {
  0% { box-shadow: 0 0 0 3px var(--accent2-soft); } 100% { box-shadow: var(--shadow); }
}

/* ---------------- reader body ---------------- */

.workhead { text-align: center; margin: 1.6rem auto .4rem; max-width: 1000px; padding: 0 1rem; }
.workhead .worktitle { font-family: var(--font-dev); font-size: 1.9rem; color: var(--accent); font-weight: 600; }
.workhead .worktitle .on-lbl { font-family: var(--font-ui); font-size: .95rem; color: var(--ink-soft); font-weight: 400; }
.workhead .workauthor { color: var(--ink-soft); font-size: .95rem; margin-top: .25rem; font-family: var(--font-iast); font-style: italic; }

.maintext {
  max-width: 1000px; margin: 0 auto; padding: 0 1rem 5rem;
  font-size: var(--readsize); line-height: 1.9;
}
.maintext .script-dev { font-family: var(--font-dev); }
.maintext .script-ben { font-family: var(--font-ben); }
.maintext .script-ia  { font-family: var(--font-iast); }

h2.chapterhead {
  font-family: var(--font-ui);
  font-size: 1.25rem; font-weight: 600; color: var(--accent);
  margin: 2.2rem 0 1rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--line);
}
h2.chapterhead .chname { color: var(--ink-soft); font-weight: 400; font-size: .85em; margin-left: .6rem; }

.intro_bhashya, .colophon {
  background: var(--panel); border: 1px dashed var(--line); border-radius: 12px;
  padding: .8rem 1.1rem; margin: 1rem 0; color: var(--ink-soft);
}

/* ---- verse cards: each sloka + its tika lives in its own box ---- */

.vcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem 1.3rem;
  margin: 0 0 1.1rem;
}
.vcard .vnum {
  display: inline-block;
  font-size: .72rem; font-family: var(--font-ui);
  color: #fff; background: var(--gold);
  border-radius: 20px; padding: .06rem .6rem;
  vertical-align: middle; margin-right: .6rem;
}
.vcard .versetext {
  font-size: 1.18em; color: var(--accent);
  margin-bottom: .35rem;
}
.vcard .leading_bhashya { color: var(--ink-soft); margin-bottom: .5rem; }
.script-ia .leading_bhashya { font-style: italic; }
.vcard .bhashya { margin: .65rem 0; }
.vcard .all-bhashya { border-top: 1px dashed var(--line); margin-top: .6rem; padding-top: .55rem; }

/* collapsed-bhashya mode: only the sutra shows; click card to reveal */
.bhashya-hidden .vcard .all-bhashya,
.bhashya-hidden .vcard .leading_bhashya { display: none; }
.bhashya-hidden .vcard.open .all-bhashya,
.bhashya-hidden .vcard.open .leading_bhashya { display: block; }
.bhashya-hidden .vcard:not(.open) { cursor: pointer; }
.bhashya-hidden .vcard:not(.open):hover { border-color: var(--accent-soft); }

/* ---- word-by-word layer: clickable tokens, meaning lines, popup ---- */

.w-click { cursor: pointer; border-bottom: 1px dotted transparent; transition: .12s; }
.w-click:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }
body.secondary .w-click:hover { color: var(--accent2-soft); border-bottom-color: var(--accent2-soft); }

.vcard .meaning {
  border-top: 1px dashed var(--line);
  margin-top: .45rem; padding-top: .5rem;
  font-size: .85em; line-height: 1.75; color: var(--ink-soft);
}
.vcard .meaning .mlbl {
  display: inline-block; min-width: 4.2rem; margin-right: .5rem;
  font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gold);
}
.vcard .meaning .anvline { color: var(--ink-soft); opacity: .85; }

/* bhāṣya translation block (English + বাংলা under each commentary paragraph) */
.vcard .btrans, .intro_bhashya + .btrans {
  margin: -.4rem 0 1rem 1rem;
  padding: .5rem 0 .1rem .9rem;
  border-left: 2px solid var(--line);
  font-size: .9em; line-height: 1.7; color: var(--ink-soft);
}
.btrans .mline { display: flex; gap: .5rem; margin: .1rem 0; }
.btrans .mlbl {
  display: inline-block; min-width: 4.2rem; flex: 0 0 auto;
  font-family: var(--font-ui); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gold); padding-top: .18rem;
}
.btrans .mline-bn { color: var(--ink); }
body.secondary .vcard .btrans { border-left-color: var(--line2); }

/* per-line meaning / translation toggles (Anvaya / English / বাংলা) */
.maintext.hide-anv .anvline,
.maintext.hide-en .mline-en,
.maintext.hide-bn .mline-bn { display: none; }
/* drop the block + rule when nothing inside it is visible */
.maintext.hide-anv.hide-en.hide-bn .meaning,
.maintext.hide-en.hide-bn .btrans { display: none; }

.toolbar .mtoggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft);
  cursor: pointer; border: 1px solid var(--line); background: var(--card);
  border-radius: 9px; padding: .32rem .6rem;
}
.toolbar .mtoggle:hover { border-color: var(--accent-soft); }
.toolbar .mtoggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.toolbar .mtoggle input { accent-color: var(--accent); margin: 0; }
body.secondary .toolbar .mtoggle.active { background: var(--accent2); border-color: var(--accent2); }

/* one-line explainer above the word-by-word bhāṣya reader */
.wordhint {
  max-width: 1000px; margin: -.2rem auto .2rem; padding: 0 1rem;
  text-align: center; font-size: .84rem; color: var(--ink-soft);
}

#wordPopup {
  position: absolute; z-index: 200;
  max-width: 380px; min-width: 240px;
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(70, 50, 20, .25);
  padding: .8rem 1rem .6rem;
  font-size: .92rem; line-height: 1.6;
}
body.secondary #wordPopup { border-top-color: var(--accent2); }
#wordPopup .pop-close {
  position: absolute; top: 4px; right: 8px;
  border: 0; background: none; font-size: 20px; cursor: pointer;
  color: var(--ink-soft); line-height: 1;
}
#wordPopup .pop-section + .pop-section {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line);
}
#wordPopup .pop-head {
  font-size: 1.15rem; color: var(--accent); margin-bottom: .35rem; padding-right: 16px;
}
#wordPopup .pop-row { display: flex; gap: .5rem; margin: .15rem 0; }
#wordPopup .pop-label {
  min-width: 4.4rem; color: var(--ink-soft);
  font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; padding-top: .2rem;
}
#wordPopup .pop-val { flex: 1; color: var(--ink); }

/* ---- vyakhya panels ---- */

.vyakhyaTrigger { text-align: right; font-size: .85rem; font-family: var(--font-ui); margin: -.2rem 0 .3rem; }
.vyakhyaTrigger a { color: var(--accent-soft); cursor: pointer; text-decoration: none; }
.vyakhyaTrigger a:hover { text-decoration: underline; }
.vyakhyaTrigger a .chev { display: inline-block; transition: transform .2s; font-size: .7rem; }
.vyakhyaTrigger a.open .chev { transform: rotate(180deg); }

.vyakhyaHolder {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1.1rem; margin: 0 0 .8rem; display: none;
  font-size: .95em;
}
.vyakhyaHolder.open { display: block; }
.vyakhyaHolder h5 {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--gold); letter-spacing: .4px; margin-bottom: .5rem;
}
.vyakhyaHolder p { margin-bottom: .8rem; }
.vyakhyaHolder .Vyakhya-shloka { margin: .8rem 0 .8rem 2rem; }
.vyakhyaHolder .prateeka, .vyakhyaHolder .uddharana { color: var(--accent); font-weight: 600; }
.vyakhyaHolder .VyakhyaDescriptor,
.vyakhyaHolder .VyakhyaDescriptor .prateeka,
.vyakhyaHolder .VyakhyaDescriptor .Avataranika,
.vyakhyaHolder .VyakhyaDescriptor .Vyakhya { display: inline; }
.vyakhyaHolder .VyakhyaDescriptor .Vyakhya-shloka { display: block; }
.vyakhyaHolder .level-2 {
  background: var(--card); border: 1px dashed var(--line); border-radius: 10px;
  padding: .8rem 1rem; margin-top: .8rem; font-size: .95em;
}

/* ---- sticky address + side nav ---- */

.address {
  position: fixed; top: 5.4rem; left: .6rem; z-index: 48;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: .3rem .7rem; font-size: .8rem; color: var(--ink-soft);
  display: none;
}
.address span { display: block; line-height: 1.5; }

#sidenav {
  position: fixed; right: .7rem; top: 40%; z-index: 48;
  display: flex; flex-direction: column; gap: .35rem;
}
#sidenav a {
  width: 2rem; height: 2rem; line-height: 2rem; text-align: center;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  color: var(--accent); text-decoration: none; font-size: .8rem;
  box-shadow: var(--shadow);
}
#sidenav a:hover, #sidenav a.here { background: var(--accent); color: #fff; }

/* ---------------- secondary texts: indigo scheme ---------------- */

body.secondary .workhead .worktitle,
body.secondary h2.chapterhead,
body.secondary .vcard .versetext { color: var(--accent2); }
body.secondary .vcard .vnum { background: var(--accent2-soft); }
body.secondary .seg button.on { background: var(--accent2); }
body.secondary .vyakhyaHolder { background: var(--panel2); border-color: var(--line2); }
body.secondary .vyakhyaHolder .prateeka, body.secondary .vyakhyaHolder .uddharana { color: var(--accent2); }
body.secondary .vyakhyaTrigger a { color: var(--accent2-soft); }
body.secondary #sidenav a { color: var(--accent2); }
body.secondary #sidenav a:hover, body.secondary #sidenav a.here { background: var(--accent2); color: #fff; }
body.secondary .address { border-left-color: var(--accent2); }
body.secondary .bhashya-hidden .vcard:not(.open):hover { border-color: var(--accent2-soft); }

/* ---------------- home ---------------- */

.homewrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }
.group { margin-top: 1.6rem; }
.group h2 {
  font-size: 1.05rem; font-weight: 600; color: var(--accent);
  border-bottom: 2px solid var(--line); padding-bottom: .35rem; margin-bottom: .9rem;
}
.group .grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.group .grid a {
  flex: 1 1 280px; max-width: 340px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: .7rem .95rem; text-decoration: none; color: var(--ink);
}
.group .grid a:hover { border-color: var(--accent-soft); }
.group .grid .author { font-family: var(--font-iast); font-style: italic; font-size: .82rem; color: var(--ink-soft); }
.group .grid .name { font-family: var(--font-dev); font-size: 1.15rem; color: var(--accent); margin-top: .15rem; }
.group .grid .name .ia { display: block; font-family: var(--font-iast); font-size: .8rem; color: var(--ink-soft); font-style: italic; }

/* secondary texts block at the end — hidden by default, indigo scheme */
details.secondary-block { margin-top: 2.4rem; }
details.secondary-block > summary {
  cursor: pointer; list-style: none;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px;
  padding: .7rem 1.1rem; color: var(--accent2); font-weight: 600; font-size: 1rem;
}
details.secondary-block > summary::before { content: '▸ '; }
details.secondary-block[open] > summary::before { content: '▾ '; }
details.secondary-block > summary small { color: var(--ink-soft); font-weight: 400; margin-left: .5rem; }
details.secondary-block .inner {
  border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--panel2), transparent 120px);
  padding: .2rem 1rem 1.2rem; margin-top: -6px;
}
details.secondary-block .group h2 { color: var(--accent2); border-color: var(--line2); }
details.secondary-block .grid a { border-left-color: var(--accent2-soft); }
details.secondary-block .grid a:hover { border-color: var(--accent2-soft); }
details.secondary-block .grid .name { color: var(--accent2); }

/* ---------------- search ---------------- */

.searchwrap { max-width: 940px; margin: 1.2rem auto 0; padding: 0 1rem; }
.searchwrap .panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1rem 1.2rem;
}
.scopebar { margin-bottom: .6rem; }
.scopebar .lbl { font-size: .8rem; color: var(--ink-soft); margin-right: .5rem; }
#workpick { margin: .55rem 0 .7rem; font-size: .88rem; }
#workpick label { margin-right: 1rem; cursor: pointer; display: inline-block; color: var(--ink-soft); }
#workpick input { accent-color: var(--accent); }

.qrow { display: flex; gap: .5rem; }
.qrow input[type=text] {
  flex: 1; font-family: var(--font-dev), var(--font-ben), var(--font-iast);
  font-size: 1.15rem; padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
.qrow input[type=text]:focus { outline: 2px solid var(--accent-soft); border-color: transparent; }
.qrow .kbmode {
  min-width: 3rem; font-size: 1.05rem;
  font-family: var(--font-dev), var(--font-ben), var(--font-ui);
}
.qrow .kbmode.dev, .qrow .kbmode.ben { background: var(--accent); color: #fff; }
.searchhint { font-size: .8rem; color: var(--ink-soft); margin-top: .5rem; }

.results { max-width: 1000px; margin: 1rem auto 5rem; padding: 0 1rem; line-height: 1.8; }
.results .rescount { color: var(--ink-soft); font-size: .9rem; margin-bottom: .8rem; }
.results .hit {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: .6rem 1rem; margin-bottom: .8rem;
}
.results .hit .where { font-size: .82rem; font-family: var(--font-ui); margin-bottom: .2rem; }
.results .hit .where a { color: var(--accent); text-decoration: none; }
.results .hit .where a:hover { text-decoration: underline; }
.results .hit .snip { color: var(--ink); font-size: 1.02rem; }
.results .hit .snip mark { background: #f3e3ad; padding: 0 2px; border-radius: 3px; }

/* ---------------- footer & misc ---------------- */

footer {
  border-top: 1px solid var(--line); text-align: center;
  font-size: .82rem; color: var(--ink-soft);
  padding: 1.2rem 1rem 1.8rem; line-height: 1.8; margin-top: 2rem;
}

.loading { text-align: center; color: var(--accent); font-size: 1.2rem; padding: 4rem 0; }

@media (max-width: 640px) {
  #sidenav { display: none; }
  .toolbar { gap: .35rem; }
  .maintext { padding: 0 .6rem 4rem; }
  .vcard { padding: .8rem .9rem; }
}

/* ── word index (lexicon.html) ─────────────────────────────────────────────────
   One card per distinct ANALYSIS, not per word: an ambiguous surface shows its
   readings separately, so the occurrence lists stay truthful. */
.lex-stat { display:block; margin-top:.35rem; opacity:.75; font-size:.9em; }
.lex-entry { border:1px solid var(--rule,#e3ddd0); border-radius:8px; padding:.7rem .85rem;
             margin:.55rem 0; background:var(--card,#fffdf7); }
.lex-head { font-size:1.25em; font-weight:600; margin-bottom:.35rem; }
.lex-lm { font-size:.72em; font-weight:400; opacity:.7; }
.lex-row { display:flex; gap:.6rem; align-items:baseline; margin:.12rem 0; font-size:.95em; }
.lex-lbl { flex:0 0 5.2rem; text-align:right; font-size:.78em; letter-spacing:.03em;
           text-transform:lowercase; opacity:.6; }
.lex-occ { display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline;
           margin-top:.4rem; padding-top:.4rem; border-top:1px dotted var(--rule,#e3ddd0);
           font-size:.9em; }
.lex-work { font-style:italic; opacity:.8; }
.lex-count { font-size:.78em; padding:.05rem .4rem; border-radius:10px;
             background:var(--chip,#efe9dc); }
.lex-occ a { text-decoration:none; padding:.05rem .3rem; border-radius:4px; }
.lex-occ a:hover { background:var(--chip,#efe9dc); }
.lex-more { opacity:.6; font-size:.85em; }
.qrow { display:flex; gap:.5rem; margin-top:.6rem; }
.qrow input { flex:1 1 auto; }
#workpick { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:.3rem 0 .2rem; font-size:.92em; }
#workpick label { display:inline-flex; align-items:center; gap:.3rem; }
@media (max-width:640px) {
  .lex-row { flex-direction:column; gap:0; }
  .lex-lbl { text-align:left; flex:none; }
}