/* व्याख्या — verified commentary articles. Loaded by templates/vyakhya.html
   and vyakhya-index.html. Tokens, ground, fibre and the theme rule all come
   from style.css; this file adds only what these pages need on top.

   SELF-CONTAINED, deliberately. The Dharmālok pages link akhyana.css as well
   as their own sheet, which works only because the ākhyāna section happens to
   be live on the same server — src/deploy.py's vyakhya publish sends this
   sheet and style.css and nothing else, and a page that arrives styled by a
   sheet another section's deploy carried is a page that breaks the day that
   section is withdrawn. Everything it needs is here.

   It borrows the site's vocabulary rather than inventing one: the lotus rule
   under the masthead, the brass accent, the cream leaf, and the verse card
   from the मर्म register — because a reader meeting a Sanskrit verse on
   thevyasa.in should meet the same object every time. What is new is the
   apparatus this section alone has: the disclosure above the article, the
   पाठभेद under a verse whose reading diverged, and the counts at the foot. */

.vy-main{--measure:42rem; max-width:62rem; margin:0 auto;
  padding:1.5rem 1.25rem 5rem}

/* ── masthead ─────────────────────────────────────────────── */
.vy-head,.vy-main .masthead{text-align:center; padding:1rem 0 1.5rem}
.vy-head h1,.vy-main .masthead h1{
  margin:0 0 .5rem; font-family:var(--sa); font-weight:400;
  font-size:clamp(1.7rem,4.4vw,2.7rem); letter-spacing:.02em;
  color:var(--verse-ink); text-wrap:balance;
}
.vy-main .eyebrow{margin:0 0 .35rem; font-family:var(--ui); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.vy-main .lotus{font-family:"Noto Sans Brahmi",var(--sa),serif;
  color:var(--brass); line-height:1; font-size:.95em}
.vy-main .ornament{display:flex; align-items:center; justify-content:center;
  gap:.9rem; margin:1rem auto 1.2rem; max-width:22rem; color:var(--brass)}
.vy-main .ornament::before,.vy-main .ornament::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.5}
.vy-locus{margin:0; font-family:var(--ui); font-size:.82rem; color:var(--ink-soft)}
.vy-locus .folio{color:var(--brass)}
.vy-locus .folio::before{content:"· "}
.vy-main .lede{margin:0 auto .7rem; max-width:38rem; color:var(--ink-soft)}
.vy-main .lede.en{font-family:var(--ui); font-size:.88rem; line-height:1.75}

/* ── the leaf ─────────────────────────────────────────────── */
.vy-leaf{
  position:relative; isolation:isolate;
  background-color:var(--paper); border:1px solid var(--rule);
  border-radius:.75rem; margin:0 0 2rem;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem);
  box-shadow:0 1px 1px rgba(0,0,0,.03), 0 18px 40px -28px var(--cast);
}
.vy-leaf::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--tex-fibre); background-size:200px 200px; opacity:.045;
  border-radius:inherit;
}

/* ── the disclosure ──────────────────────────────────────────────────────
   This block is the condition under which this section exists: it says the
   compilation was machine-assisted and that every śloka was matched against a
   named edition before it was included, and it lists whatever else the export
   flagged. It is set ABOVE the article, so a reader decides what to make of
   the page before reading it rather than after.

   Styled as apparatus and not as a warning banner. A red box would say "this
   page is suspect", which is the opposite of true — these are the pages whose
   quotations were CHECKED. Brass rule, quieter type, the same register the
   citations use. */
.vy-disclosure{
  max-width:var(--measure); margin:0 auto 2.5rem; padding:.9rem 1.1rem;
  border:1px solid var(--verse-edge); border-left:3px solid var(--brass);
  border-radius:.5rem; background:var(--paper-card);
}
.vy-disclosure h2{
  margin:0 0 .45rem; font-family:var(--ui); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  font-weight:600;
}
.vy-note{margin:0; font-size:.92rem; line-height:1.75; color:var(--ink)}
.vy-caveats{margin:.55rem 0 0; padding-left:1.1rem; font-size:.88rem;
  line-height:1.7; color:var(--ink-soft)}
.vy-caveats:empty{display:none}
.vy-caveats li{margin:0 0 .2rem}

/* ── the article ──────────────────────────────────────────── */
.vy-body{max-width:var(--measure); margin:0 auto}
.vy-p p{margin:0 0 1.15rem; line-height:1.9; text-align:justify; hyphens:auto}
.vy-p p:last-child{margin-bottom:0}
.vy-p{margin:0 0 1.15rem}
.vy-p ul,.vy-p ol{margin:0 0 1.15rem; padding-left:1.3rem; line-height:1.8}
.vy-p blockquote{
  margin:0 0 1.15rem; padding:.2rem 0 .2rem 1rem;
  border-left:2px solid var(--verse-edge); color:var(--ink-soft);
}
.vy-p code{font-size:.9em; background:var(--verse-bg); padding:.05em .3em;
  border-radius:.2rem}
.vy-p a{color:var(--link)}
.vy-h{
  margin:2.2rem 0 .9rem; font-family:var(--sa); font-weight:600;
  font-size:1.25rem; color:var(--verse-ink); scroll-margin-top:4rem;
}

/* ── a verse ─────────────────────────────────────────────────────────────
   The मर्म card, with one thing added. See static/marma.css for why the mark
   sits in a disc on the top edge rather than in a gap punched out of it. */
.vy-verse{
  position:relative; margin:2.4rem auto 1.9rem; padding:1.7rem 1.6rem 1.15rem;
  max-width:var(--measure); scroll-margin-top:4rem;
  /* The root text, framed like a manuscript leaf — and so unlike the quoted
     passages (.vy-shloka) set into the commentary below it: a brass band on
     top, a second rule drawn inside the edge, a double rule at the foot, a
     warmer ground and a larger, heavier मूल. A reader scrolling a long page
     should never have to read a card to know which one is Yajnavalkya. */
  background:color-mix(in srgb, var(--verse-bg) 90%, var(--brass) 10%);
  border:1px solid color-mix(in srgb, var(--verse-edge) 50%, var(--brass) 50%);
  border-top:3px solid var(--brass);
  border-radius:.35rem .35rem .8rem .8rem;
  box-shadow:inset 0 0 0 5px color-mix(in srgb, var(--verse-bg) 90%, var(--brass) 10%),
             inset 0 0 0 6px color-mix(in srgb, var(--verse-edge) 70%, transparent),
             0 14px 28px -22px var(--cast);
}
.vy-verse .mark{
  position:absolute; top:-1rem; left:50%; transform:translateX(-50%);
  width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brass); border:2px solid color-mix(in srgb, var(--verse-bg) 90%, var(--brass) 10%);
  color:var(--verse-bg); box-shadow:0 2px 6px -3px var(--cast);
}
.vy-verse .mark svg{display:block; width:1rem; height:1rem}
/* The address — सूत्र ४.२४ — above the verse, in the register the citations
   use. It is what a reader holds in their head and what another edition can
   be checked against. */
.vy-n{
  margin:0 0 .65rem; text-align:center; font-family:var(--ui);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
.vy-verse .sa{
  margin:.2rem 0; text-align:center; line-height:1.8;
  color:var(--verse-ink); font-size:clamp(1.2rem, 2.6vw, 1.42rem); font-weight:700;
  letter-spacing:.01em;
}
.vy-verse .vy-cite{
  margin-top:.85rem; padding-top:.6rem;
  border-top:3px double color-mix(in srgb, var(--verse-edge) 60%, var(--brass) 40%);
}
.vy-verse .sa::first-letter{font-size:inherit; font-weight:inherit; float:none}

/* The पाठभेद. Only on a card whose reading diverged, and set BELOW the verse
   so the edition's reading keeps the position of the text — that is the whole
   rule of this format: mula is the edition's, never the compilation's. The
   dotted rule says "apparatus", the way a printed edition's footnotes do. */
.vy-bheda{
  margin:.9rem 0 0; padding-top:.75rem;
  border-top:1px dotted var(--verse-edge);
}
.vy-bheda-h{
  margin:0 0 .35rem; font-family:var(--ui); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.vy-bheda-q{
  margin:0 0 .35rem; text-align:center; font-size:.98rem; line-height:1.8;
  color:var(--ink-soft);
}
.vy-bheda-note{margin:0; font-size:.78rem; line-height:1.6;
  color:var(--ink-soft); font-style:italic; text-align:center}

.vy-cite{
  margin-top:.9rem; font-family:var(--ui); font-size:.68rem;
  letter-spacing:.04em; color:var(--ink-soft);
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  align-items:center; font-variant-numeric:tabular-nums;
}
.vy-ref{color:var(--ink)}
/* Hand-corrected. Not a warning — the owner correcting a store's misreading is
   the system working — so it reads as a note in the apparatus, not as an
   alarm. See templates/_vyakhya-verse.html. */
.vy-hand{color:var(--brass); border:1px solid var(--verse-edge);
  border-radius:1rem; padding:.05rem .45rem; font-size:.92em}
.vy-book{color:var(--brass)}
.vy-book::before{content:"· "}
.vy-folio{color:var(--ink-soft); text-decoration:none;
  border-bottom:1px dotted var(--rule)}
a.vy-folio:hover,a.vy-folio:focus-visible{color:var(--ink);
  border-color:var(--accent)}

/* ── in English ──────────────────────────────────────────────────────────
   Real, visible text — never a hidden keyword block. See src/seo.py. */
.in-english{
  max-width:var(--measure); margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--rule); font-family:var(--ui);
}
.in-english h2{
  display:flex; align-items:center; gap:.75rem; margin:0 0 .75rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.in-english h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.en-title{margin:0 0 .4rem; font-family:var(--sa); font-size:1.15rem;
  color:var(--verse-ink)}
.abstract{margin:0 0 1rem; font-size:.95rem; line-height:1.65}
.asked-head{margin:0 0 .35rem; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft)}
.asked{margin:0 0 1rem; padding-left:1.1rem; font-size:.92rem; line-height:1.7}
.asked li{margin:0 0 .15rem}

/* ── the provenance line ─────────────────────────────────────────────────
   Counts, not adjectives. How many quotations were made, how many were found
   in a named edition, how many diverged, how many matched nothing and were
   therefore never published. Tabular figures so the four columns line up. */
.vy-provenance{
  max-width:var(--measure); margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--rule); font-family:var(--ui);
}
.vy-provenance h2{
  display:flex; align-items:center; gap:.75rem; margin:0 0 1rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
}
.vy-provenance h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.vy-counts{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin:0 0 1rem;
  justify-content:center; padding:.85rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.vy-counts div{text-align:center}
.vy-counts dt{font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft)}
.vy-counts dd{margin:.2rem 0 0; font-family:var(--sa); font-size:1.4rem;
  color:var(--verse-ink); font-variant-numeric:tabular-nums}
.vy-works,.vy-made{margin:0 0 .45rem; font-size:.84rem; line-height:1.7;
  color:var(--ink-soft)}
.vy-work{color:var(--ink)}
.vy-more{margin:.8rem 0 0; font-size:.86rem}
.anchor{color:var(--link); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--brass-lit); padding-bottom:1px}
.anchor:hover,.anchor:focus-visible{border-bottom-color:var(--brass)}

/* ── turning the page ─────────────────────────────────────── */
.vy-turn{display:flex; justify-content:space-between; gap:1rem;
  max-width:var(--measure); margin:0 auto; font-family:var(--ui)}
.vy-turn a{
  flex:1; max-width:48%; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:.5rem; padding:.7rem .9rem;
  font-size:.88rem; line-height:1.5; background:var(--paper-card);
}
.vy-turn a:hover,.vy-turn a:focus-visible{border-color:var(--brass)}
.vy-turn .next{text-align:right}
.vy-turn a span{display:block; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.2rem}

/* ── the front door ───────────────────────────────────────── */
.ix-stats{display:flex; justify-content:center; gap:2.5rem; margin:1.75rem 0 0;
  padding:1rem 0; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.ix-stats div{text-align:center}
.ix-stats dt{font-family:var(--ui); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft)}
.ix-stats dd{margin:.2rem 0 0; font-family:var(--sa); font-size:1.5rem;
  color:var(--verse-ink); font-variant-numeric:tabular-nums}
.ix-notes{max-width:42rem; margin:2rem auto 0; display:grid; gap:1.5rem}
.ix-note h2{margin:0 0 .4rem; font-family:var(--ui); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:.7rem}
.ix-note h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.ix-note p{margin:0 0 .5rem; font-size:.98rem; line-height:1.85; color:var(--ink)}
.ix-note p:last-child{margin-bottom:0}
.ix-note p.en{font-size:.88rem; line-height:1.75; color:var(--ink-soft);
  font-family:var(--ui)}

.vy-index{list-style:none; margin:2.5rem auto 0; padding:0;
  max-width:46rem; display:grid; gap:.6rem}
.vy-index a{
  display:grid; gap:.25rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:.55rem; padding:.85rem 1rem;
  background:var(--paper-card);
}
.vy-index a:hover,.vy-index a:focus-visible{border-color:var(--brass)}
.vy-ix-name{font-family:var(--sa); font-size:1.08rem; color:var(--verse-ink);
  line-height:1.5}
.vy-ix-meta{font-family:var(--ui); font-size:.72rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.vy-ix-lede{font-family:var(--ui); font-size:.8rem; color:var(--ink-soft); line-height:1.5}
.vy-pages a{grid-template-columns:2rem 1fr; column-gap:.6rem}
.vy-pages .vy-ix-n{grid-row:span 2; align-self:center; text-align:center;
  font-family:var(--ui); font-size:.8rem; color:var(--brass);
  font-variant-numeric:tabular-nums}
.vy-empty{text-align:center; color:var(--ink-soft); margin:3rem 0}

@media (max-width:34rem){
  /* Ragged right on a phone. The site sets its prose justified and this sheet
     follows it at reading width, but Devanāgarī does not hyphenate — there is
     nothing for `hyphens:auto` to do — so at 375px a justified line stretches
     four long compounds across the measure and the paragraph fills with
     rivers. Measured on this article's opening paragraph: seven of its nine
     lines had word gaps wider than the letters. */
  .vy-p p{text-align:left}
  .vy-main{padding:1rem .85rem 4rem}
  .vy-leaf{padding:1.25rem 1rem; border-radius:.5rem}
  .vy-disclosure{padding:.8rem .9rem}
  .vy-counts{gap:1rem 1.6rem}
  .vy-turn{flex-direction:column}
  .vy-turn a{max-width:100%}
  .vy-turn .next{text-align:left}
  .ix-notes{gap:1.25rem; margin-top:1.5rem}
  .ix-stats{gap:1.5rem}
}


/* ── a Sanskrit commentary (व्यासभाष्य) ──────────────────────────────────
   Deliberately QUIETER than .vy-verse: no card edge, no shadow, no mark,
   normal weight, left-aligned — a tinted ground and a thin rule say "quoted
   Sanskrit" without competing with the sūtra it explains. */
.vy-bhashya{
  max-width:var(--measure); margin:1rem auto; padding:.75rem 1rem .8rem;
  background:color-mix(in srgb, var(--verse-bg) 55%, transparent);
  border-left:3px solid var(--verse-edge); border-radius:.35rem;
  color:var(--verse-ink); font-size:.98rem; font-weight:400; line-height:1.95;
}
.vy-bhashya p{margin:.25rem 0}
.vy-bhashya .vy-bhashya-label{
  margin:0 0 .35rem; font-family:var(--ui); font-size:.62rem;
  letter-spacing:.16em; color:var(--brass);
}


/* ── a quoted source as a highlight card (shruti, other shastras) ─────────
   The akhyana shloka card (static/akhyana.css), scoped here: lotus on the top
   edge, the work in brass, bold centred mula, Hindi under a dashed rule, the
   address as caption. Long Brāhmaṇa prose is justified, not centred. */
.vy-body .shloka{position:relative; margin:1.6rem clamp(0rem, 3vw, 1.4rem); padding:1.1rem 1.25rem .8rem; background:var(--verse-bg);
  border:1px solid var(--verse-edge); border-radius:.8rem; text-align:center; box-shadow:0 8px 20px -20px var(--cast);}
.vy-body .shloka .mark{position:absolute; top:-.5rem; left:50%; transform:translateX(-50%); background:var(--verse-bg);
  padding:0 .5rem; color:var(--brass); font-family:"Noto Sans Brahmi",var(--sa),serif; font-size:.9rem; line-height:1;}
.vy-body .shloka .speaker{display:block; font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; color:var(--brass); margin-bottom:.45rem;}
.vy-body .shloka .sa{margin:0 0 .5rem; font-family:var(--sa); font-weight:600; font-size:clamp(.98rem,2vw,1.08rem);
  line-height:1.7; color:var(--verse-ink); letter-spacing:.012em;}
.vy-body .shloka .sa-prose{text-align:justify; hyphens:none}
.vy-body .shloka .gloss{margin:.7rem auto 0; max-width:34rem; padding-top:.6rem; border-top:1px dashed var(--verse-edge);
  font-size:.9rem; line-height:1.75; color:var(--ink-soft); text-align:left;}
.vy-body .shloka .gloss-draft{color:var(--brass); font-size:.8em; white-space:nowrap}
.vy-body .shloka figcaption{margin-top:.65rem; font-family:var(--ui); font-size:.7rem; letter-spacing:.04em; color:var(--ink-soft);
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; font-variant-numeric:tabular-nums;}
.vy-body .shloka .folio{color:var(--brass)}
.vy-body .shloka .folio::before{content:"· "}


/* ── reading controls: fold a layer, read sūtras only, jump ─────────────── */
.vy-tools{
  /* Below the site's own fixed header (~2.8rem), not under it. */
  position:sticky; top:3.1rem; z-index:5; max-width:var(--measure); margin:0 auto 1rem;
  display:flex; flex-wrap:wrap; gap:.35rem; padding:.5rem .6rem;
  background:color-mix(in srgb, var(--paper, #fffdf8) 92%, transparent);
  backdrop-filter:blur(6px); border:1px solid var(--verse-edge); border-radius:.6rem;
  font-family:var(--ui); font-size:.72rem;
}
.vy-tools button{
  border:1px solid var(--verse-edge); background:transparent; color:inherit;
  border-radius:999px; padding:.2rem .65rem; cursor:pointer; opacity:.55;
}
.vy-tools{transition:transform .25s ease, opacity .25s ease}
.vy-tools.is-tucked{transform:translateY(-140%); opacity:0; pointer-events:none}
.vy-tools button.is-on{opacity:1; background:var(--verse-bg); color:var(--brass); font-weight:600;
  border-color:var(--brass)}
.vy-tools .vy-tocbtn{margin-left:auto}
.vy-tocfab.is-on{background:var(--brass); color:var(--paper)}
.vy-body.only-sutras .vy-p, .vy-body.only-sutras .vy-bhashya{display:none}
.vy-body.only-sutras .vy-verse{margin:.9rem auto}
.vy-body.hide-bhashya [data-layer="bhashya"], .vy-body.hide-bhashya_hi [data-layer="bhashya_hi"],
.vy-body.hide-dipika [data-layer="dipika"], .vy-body.hide-vyakhya [data-layer="vyakhya"],
.vy-body.hide-sutrartha [data-layer="sutrartha"], .vy-body.hide-artha [data-layer="artha"],
.vy-body.hide-padaccheda [data-layer="padaccheda"], .vy-body.hide-frame [data-layer="frame"],
.vy-body.hide-kandali [data-layer="kandali"], .vy-body.hide-kandali_hi [data-layer="kandali_hi"],
.vy-body.hide-tippani [data-layer="tippani"], .vy-body.hide-pathabheda [data-layer="pathabheda"],
.vy-body.hide-anuvada [data-layer="anuvada"], .vy-body.hide-vistara [data-layer="vistara"],
.vy-body.hide-shruti [data-layer="shruti"], .vy-body.hide-shruti_hi [data-layer="shruti_hi"],
.vy-body.hide-grantha [data-layer="grantha"], .vy-body.hide-grantha_hi [data-layer="grantha_hi"]{display:none}
.vy-p[data-layer="pathabheda"]{font-size:.84rem; opacity:.85; margin-top:-.4rem}
.vy-anchor{display:block; position:relative; top:-7.5rem; visibility:hidden}
.vy-end{white-space:nowrap; font-weight:600; color:var(--brass)}
.vy-p p + p{margin-top:.7rem}
.vy-toc{
  position:fixed; top:2.9rem; right:0; bottom:0; z-index:20; width:min(22rem, 88vw);
  overflow-y:auto; padding:.8rem 1rem 2rem; background:var(--paper, #fffdf8);
  border-left:1px solid var(--verse-edge); box-shadow:-12px 0 30px -24px var(--cast);
  font-size:.86rem;
}
.vy-toc-head{display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:-.8rem; background:inherit; padding:.4rem 0}
.vy-toc-x{border:0; background:none; font-size:1.3rem; cursor:pointer; color:inherit}
.vy-toc ol{list-style:none; margin:0; padding:0}
.vy-toc li a{display:block; padding:.22rem .3rem; border-radius:.3rem; color:inherit; text-decoration:none}
.vy-toc li a:hover{background:var(--verse-bg); color:var(--brass)}
.vy-toc .vy-toc-grp{margin:.8rem 0 .2rem; font-family:var(--ui); font-size:.66rem;
  letter-spacing:.1em; color:var(--brass)}
.vy-tocfab{
  /* Above the site's ↑ back-to-top button, which owns the corner. */
  position:fixed; right:1rem; bottom:4.6rem; z-index:15; width:2.6rem; height:2.6rem;
  border-radius:50%; border:1px solid var(--verse-edge); background:var(--verse-bg);
  color:var(--brass); font-size:1.1rem; cursor:pointer; box-shadow:0 6px 16px -10px var(--cast);
}
/* grantha landing page: the book summary above the page list */
.vy-sara{max-width:38rem; margin:0 auto 2rem; line-height:1.9}
.vy-sara h2{text-align:center; margin:0 0 .8rem}
.vy-sara p{margin:0 0 .9rem}
.vy-sara .vy-sara-note{font-size:.85rem; color:var(--ink-soft)}