/* ==========================================================================
   Yoga Vasishtha — reading surface. Three modes share one DOM; the mode swaps
   tokens, type and structure.
     patha   ivory / ink / vermilion rubric   the printed edition   (default)
     ekanta  near-black / bone / gold         one verse at a time
     sutra   cool white / indigo              parallel registers
   ========================================================================== */

/* ---- Pāṭha, light: the base palette ---- */
:root {
  --bg:      #f5f3eb;
  --bg-2:    #efece1;
  --card:    #faf9f3;
  --fg:      #1d1c18;
  --fg-2:    #4e4a3e;
  --fg-3:    #8d8878;
  --line:    #ddd8c8;
  --line-2:  #e8e4d7;
  --accent:  #b32d1f;
  --accent-2:#8f2418;
  --sel:     #f0e2c8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --deva:  "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Serif Devanagari", "Noto Sans Devanagari", "Nirmala UI", var(--serif);
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --body: var(--serif);
  --measure: 34rem;
  --wrap: 54rem;
  --pad: clamp(1rem, 4vw, 2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171613; --bg-2: #1d1c18; --card: #201f1a; --fg: #eae5d8;
    --fg-2: #b6b0a0; --fg-3: #857f70; --line: #34322b; --line-2: #2a2823;
    --accent: #e2705f; --accent-2: #f08a78; --sel: #3d3226;
  }
}
:root[data-theme="dark"] {
  --bg: #171613; --bg-2: #1d1c18; --card: #201f1a; --fg: #eae5d8;
  --fg-2: #b6b0a0; --fg-3: #857f70; --line: #34322b; --line-2: #2a2823;
  --accent: #e2705f; --accent-2: #f08a78; --sel: #3d3226;
}

/* ---- Sūtra ---- */
body[data-mode="sutra"] {
  --bg: #fbfbfc; --bg-2: #f4f5f7; --card: #ffffff; --fg: #14161c;
  --fg-2: #4a4e5c; --fg-3: #8b8fa0; --line: #e2e4ea; --line-2: #eef0f4;
  --accent: #3b41d9; --accent-2: #2c31b8; --sel: #dfe1fb;
  --body: var(--sans);
  --wrap: 62rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-mode="sutra"] {
    --bg: #0f1115; --bg-2: #161920; --card: #171a21; --fg: #e7e9ee;
    --fg-2: #a9adbb; --fg-3: #7b8091; --line: #272b35; --line-2: #1f232b;
    --accent: #8b91ff; --accent-2: #a5aaff; --sel: #23264a;
  }
}
:root[data-theme="dark"] body[data-mode="sutra"] {
  --bg: #0f1115; --bg-2: #161920; --card: #171a21; --fg: #e7e9ee;
  --fg-2: #a9adbb; --fg-3: #7b8091; --line: #272b35; --line-2: #1f232b;
  --accent: #8b91ff; --accent-2: #a5aaff; --sel: #23264a;
}

/* ---- Ekānta: committed to the dark; that is its character ---- */
body[data-mode="ekanta"] {
  --bg: #0e0f12; --bg-2: #131418; --card: #131418; --fg: #e8e2d6;
  --fg-2: #b3ad9f; --fg-3: #6b675e; --line: #23241f; --line-2: #1b1c19;
  --accent: #c9a227; --accent-2: #ddb840; --sel: #2e2a1c;
  --body: var(--serif);
  --wrap: 40rem;
}

/* ========================= base ========================= */
* { box-sizing: border-box; }
/* a class that sets display would otherwise beat the UA rule for [hidden] */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--sel); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--card); color: var(--fg); padding: .6rem 1rem; z-index: 60; }
.skip:focus { left: .5rem; top: .5rem; }

.lab, .reg-lab {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ========================= header ========================= */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: var(--wrap); margin: 0 auto; padding: .55rem var(--pad);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand-dv { font-family: var(--deva); font-size: 1.05rem; color: var(--accent); line-height: 1.4; }
.brand-en { font-size: .82rem; letter-spacing: .01em; color: var(--fg-3); }
@media (max-width: 560px) { .brand-en { display: none; } }

.top-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.find { position: relative; display: flex; }
.find input {
  font: inherit; font-size: .84rem; font-family: var(--sans);
  padding: .34rem 1.7rem .34rem .6rem; width: min(15rem, 42vw);
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 2px;
}
.find input::placeholder { color: var(--fg-3); }
.find button {
  position: absolute; right: .1rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--fg-3); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .1rem .35rem;
}

.modes { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.mode {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .55rem; background: transparent; color: var(--fg-3);
  border: 0; border-right: 1px solid var(--line); cursor: pointer;
}
.mode:last-child { border-right: 0; }
.mode:hover { color: var(--fg); }
.mode[aria-checked="true"] { background: var(--accent); color: #fff; }
body[data-mode="ekanta"] .mode[aria-checked="true"] { color: #1a1608; }

.icon {
  background: var(--card); border: 1px solid var(--line); border-radius: 2px;
  color: var(--fg-2); cursor: pointer; font-size: .92rem; padding: .3rem .5rem; line-height: 1.2;
}
.icon:hover { color: var(--fg); }

/* register chips (Sūtra) */
.registers {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) .55rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.chips { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.chip {
  /* fixed box so Devanagari and Latin labels match: the two scripts have very
     different natural line heights, which otherwise makes the row ragged */
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.6rem; padding: 0 .5rem; line-height: 1;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent;
  color: var(--fg-3); cursor: pointer; border-radius: 2px;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.dv { font-family: var(--deva); font-size: .68rem; margin: 0; letter-spacing: 0; text-transform: none; }

/* ========================= breadcrumbs ========================= */
.crumbs {
  max-width: var(--wrap); margin: 0 auto; padding: .7rem var(--pad) 0;
  display: flex; align-items: center; gap: .45rem;
  /* One line, always. Wrapping made the filled height depend on viewport width, so no
     single reserved height could match it -- and a three-line breadcrumb on a phone is
     poor anyway. Nowrap makes reserved height equal filled height by construction. */
  flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  min-height: 1.45rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
}
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .5; }
.crumbs .here { color: var(--fg); }
.crumbs::-webkit-scrollbar { display: none; }

/* Space held for chrome the app reveals after boot.

   theme, reading mode, register chips and the breadcrumb bar are all restored from
   localStorage by app.js, which runs after the first paint. Each one changed layout
   and pushed #view down -- the other CLS culprit in the field data. An inline script
   in index.html now stamps these classes before anything paints, so the box is the
   right size from the start and app.js's later reveal changes nothing. */
html.boot-crumbs .crumbs[hidden] {
  display: flex !important; visibility: hidden; min-height: 1.45rem;
}
html.boot-registers .registers[hidden] {
  display: flex !important; visibility: hidden; min-height: 2.15rem;
}

/* ========================= layout ========================= */
/* Reserve the viewport before the app has rendered anything.

   Without this the footer paints near the top of an empty page, then every route
   that loads content shoves it down -- a layout shift big enough to show up as
   CLS 1.0 in the field data, and CLS is a ranking signal. Holding a screen's worth
   of height means the footer starts below the fold and its later movement is
   off-screen, which does not count against CLS. */
main { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem var(--pad) 5rem;
       min-height: calc(100vh - 8rem); }

h1.page { font-size: clamp(1.6rem, 4.4vw, 2.35rem); line-height: 1.12; margin: .3rem 0 .2rem; letter-spacing: -.015em; text-wrap: balance; font-weight: 600; }
h1.page .dv { font-family: var(--deva); color: var(--accent); font-weight: 400; }
p.dek { color: var(--fg-2); max-width: 48ch; margin: .25rem 0 0; }

/* ---- home ---- */
.books { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.8rem; }
.book {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0 1rem; align-items: baseline;
  background: var(--bg); padding: .95rem 1.1rem; text-decoration: none; color: inherit;
}
.book:hover { background: var(--bg-2); }
.book .n { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.book .nm { font-size: 1.06rem; }
.book .nm .dv { font-family: var(--deva); color: var(--fg-3); font-size: .92em; margin-left: .5rem; }
.book .gl { display: block; font-size: .82rem; color: var(--fg-3); margin-top: .1rem; }
.book .ct { font-family: var(--mono); font-size: .72rem; color: var(--fg-3); text-align: right; white-space: nowrap; }

/* ---- chapter grid ---- */
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.6rem; }
.chgrid a {
  background: var(--bg); padding: .6rem .3rem; text-align: center; text-decoration: none; color: var(--fg-2);
  font-family: var(--mono); font-size: .78rem; line-height: 1.3;
}
.chgrid a:hover { background: var(--accent); color: #fff; }
.chgrid a small { display: block; font-size: .58rem; color: var(--fg-3); margin-top: .1rem; }
.chgrid a:hover small { color: rgba(255,255,255,.75); }

/* ========================= the verse ========================= */
.verses { margin-top: 1.5rem; }

article.v {
  display: grid; grid-template-columns: 2.9rem 1fr; gap: 0 1.1rem;
  padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--line-2);
  scroll-margin-top: 5.5rem;
}
article.v:target { background: var(--bg-2); box-shadow: -.7rem 0 0 var(--bg-2), .7rem 0 0 var(--bg-2); }
@media (max-width: 620px) { article.v { grid-template-columns: 1fr; gap: .35rem; } }

.v-no { font-family: var(--mono); font-size: .76rem; color: var(--accent); padding-top: .42rem; font-variant-numeric: tabular-nums; }
.v-no a { color: inherit; text-decoration: none; }
.v-no a:hover { text-decoration: underline; }
.v-body { min-width: 0; }

.v-body .dv { font-family: var(--deva); font-size: 1.16rem; line-height: 1.86; margin: 0 0 .3rem; }
.ia { font-style: italic; color: var(--fg-2); font-size: .93rem; line-height: 1.62; margin: 0 0 1rem; }

.tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
@media (max-width: 700px) { .tr { grid-template-columns: 1fr; gap: .8rem; } }
.tr > div { min-width: 0; }
.t h4 { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .25rem; font-weight: 400; }
.t h4.dvh { font-family: var(--deva); font-size: .68rem; letter-spacing: 0; text-transform: none; }
.t p { margin: 0; font-size: .95rem; line-height: 1.64; }
.t-hi p { font-family: var(--deva); line-height: 1.84; }

/* pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pager a, .pager span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3); text-decoration: none;
}
.pager a:hover { color: var(--accent); }
.pager .mid { color: var(--fg-3); }

/* ========================= mode: Pāṭha ========================= */
body[data-mode="patha"] .v-body .dv { font-size: 1.18rem; }

/* ========================= mode: Sūtra ========================= */
body[data-mode="sutra"] article.v { grid-template-columns: 3.4rem 1fr; }
body[data-mode="sutra"] .tr { grid-template-columns: 1fr; gap: .75rem; }
body[data-mode="sutra"] .v-body .dv { font-size: 1.05rem; }
body[data-mode="sutra"] .ia { color: var(--accent); }
body[data-mode="sutra"] .t p { font-size: .9rem; }
/* register switches: only the four registers the reader still shows */
body[data-mode="sutra"].off-dv .v-body .dv,
body[data-mode="sutra"].off-ia .ia,
body[data-mode="sutra"].off-en .t-en,
body[data-mode="sutra"].off-hi .t-hi { display: none; }

/* ========================= mode: Ekānta ========================= */
body[data-mode="ekanta"] main { padding-top: 2.6rem; }
body[data-mode="ekanta"] article.v { grid-template-columns: 1fr; border-bottom: 0; padding: 0; gap: 0; }
body[data-mode="ekanta"] article.v:target { background: none; box-shadow: none; }
body[data-mode="ekanta"] .v-no { color: var(--accent); margin-bottom: 2rem; padding-top: 0; }
body[data-mode="ekanta"] .v-body .dv { font-size: clamp(1.28rem, 3.4vw, 1.85rem); line-height: 1.98; margin-bottom: 1.4rem; max-width: 26ch; }
body[data-mode="ekanta"] .ia { margin-bottom: 2.4rem; max-width: 44ch; color: var(--fg-3); }
body[data-mode="ekanta"] .tr { grid-template-columns: 1fr; gap: 1.4rem; max-width: 46ch; }
body[data-mode="ekanta"] .t p { font-size: 1.08rem; line-height: 1.82; }
body[data-mode="ekanta"] .verses { min-height: 58vh; }

/* ========================= search ========================= */
.hits { margin-top: 1.4rem; }
.hit {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: 0 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
}
@media (max-width: 560px) { .hit { grid-template-columns: 1fr; gap: .2rem; } }
.hit:hover { background: var(--bg-2); box-shadow: -.6rem 0 0 var(--bg-2), .6rem 0 0 var(--bg-2); }
.hit .ref { font-family: var(--mono); font-size: .72rem; color: var(--accent); }
.hit .sn { font-size: .92rem; line-height: 1.6; color: var(--fg-2); margin: 0; }
.hit .sn mark { background: var(--sel); color: var(--fg); padding: 0 .1em; }
.hit .sk { font-style: italic; font-size: .84rem; color: var(--fg-3); margin: .18rem 0 0; }

.note { color: var(--fg-3); font-size: .88rem; }
.note code { font-family: var(--mono); font-size: .88em; }

/* ========================= footer ========================= */
.foot { border-top: 1px solid var(--line); margin-top: 3rem; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 1.6rem var(--pad) 3rem; color: var(--fg-3); font-size: .84rem; }
.foot-in p { max-width: 62ch; margin: 0 0 .7rem; }
.foot-lede { color: var(--fg-2); }
.foot-meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; }

/* ========================= loading ========================= */
.loading { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 70; background: transparent; }
.loading span { display: block; height: 100%; width: 30%; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
/* transform, not margin-left: margin animates layout, so the old rule made the
   progress bar emit a layout shift on every frame. Cloudflare's field data named
   #loading>span as a CLS culprit. transform is composited and never shifts. */
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(333%); } }

.more {
  display: block; width: 100%; margin-top: 1.2rem; padding: .7rem;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--fg-2); cursor: pointer;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
}
.more:hover { border-color: var(--accent); color: var(--accent); }

/* On narrow screens let search take its own row so the mode switch and the
   theme button stay together instead of orphaning the button. */
@media (max-width: 620px) {
  .top-in { gap: .5rem; }
  .brand { flex: 1 1 auto; }
  .top-tools { flex: 1 1 100%; justify-content: space-between; gap: .4rem; }
  .find { order: 3; flex: 1 1 100%; }
  .find input { width: 100%; }
  .modes { order: 1; }
  #theme { order: 2; }
}

/* ---- provenance: said once per view, not once per verse ---- */
.prov {
  margin: .9rem 0 0; padding-left: .85rem; position: relative;
  font-family: var(--sans); font-size: .78rem;
  color: var(--fg-3); line-height: 1.55; max-width: 62ch;
}
.prov .dot {
  position: absolute; left: 0; top: .55em;
  width: .34rem; height: .34rem; background: var(--fg-3); border-radius: 50%;
}
.prov em { font-style: normal; color: var(--fg-2); }

/* ---- a verse whose translation was corrected after review ---- */
.fixtag {
  display: inline-block; margin-top: .4rem;
  font-family: var(--mono); font-size: .54rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); padding: .1rem .28rem; white-space: nowrap;
  cursor: help;
}
@media (max-width: 620px) { .fixtag { margin-top: 0; margin-left: .5rem; } }