/* essays.css — A2 Essays & explorations. Only what the Gita Folio system (folio.css) does not already provide:
   page breaks of the printed edition, verse callouts, sidenotes placed by reader.js, highlighted paragraph deep links,
   the essays index width, the inline Listen disclosure, exploration covers/contents disclosures, the label lines between
   imported blocks, header-less tables as contents rows, verse rows, and stacked tables (one .cell per td).
   Tokens only; works in both themes; no horizontal scroll 320→1440. */

/* ---------- Essays index ---------- */
.essays-wrap{max-width:calc(48rem + 2 * var(--gutter))}
.essays-contents-h{text-align:center;margin-bottom:var(--s-2)}
.essays-series{padding-top:var(--s-6)}
.essays-series .satka__head p{font-variant-numeric:oldstyle-nums}
.essays-part{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:var(--s-6) 0 var(--s-2);font-size:var(--fs-h4)}
.essays-part .label{font-size:var(--fs-label)}
.essays-source{margin-top:var(--s-8);text-align:center;color:var(--text-muted);font-size:var(--fs-small)}
.essays-source>*+*{margin-top:var(--s-3)}
.essays-source .meta{max-width:46ch;margin-inline:auto}
.essays-source__links{justify-content:center}
.essays-coll{margin-top:var(--s-3)}
.essays-coll a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---------- Essay reader ---------- */
.essay-head .kicker a.label:hover{color:var(--accent)}
/* The kicker reads as one tracked gold line (mockups/essay.html): "Essays on the Gita · First Series · Chapter I" */
.essay-head .kicker .meta{font:600 var(--fs-label)/var(--lh-label) var(--ff-ui);letter-spacing:inherit;text-transform:uppercase;color:var(--accent)}
.essay-head .kicker .label+.meta::before{content:"·";content:"·" / "";margin-right:.6rem}
/* Phones: the book and the place in it on two lines (no line opens with "·") */
@media(max-width:37.49rem){.essay-head .kicker{flex-direction:column;align-items:center}.essay-head .kicker .label+.meta::before{display:none}}
/* The prev/next pills above the title: each a 44 px target; on the narrowest phones they share the row */
.essay-steps{flex-wrap:wrap}
.essay-steps .chip{max-width:100%}
.essay-steps .chip::before{content:"";position:absolute;inset:-5px -1px}
/* The end ornament (lotus + ॥) closes the text before the notes and the sources */
.prose .essay-end{margin-top:var(--s-7)}
.prose .essay-end p{text-indent:0}
/* 44 px hit areas for small inline links (DESIGN §6: extend the target, not the type) */
.essay-head .kicker a,.expl-head .kicker a,.expl-prose cite .vref,.expl-prose footer .vref,.expl-passage__cite .vref,.saying__ref .vref,.expl-dl a{position:relative}
.essay-head .kicker a::before,.expl-head .kicker a::before,.expl-prose cite .vref::before,.expl-prose footer .vref::before,.expl-passage__cite .vref::before,.saying__ref .vref::before,.expl-dl a::before{content:"";position:absolute;inset:-12px -6px}
.prose .note .back{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);margin:-12px 0;vertical-align:middle}
/* Sources of the chapter: unnumbered, after the notes (the notes keep their own numbers) */
.essay-sources{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--border);font-size:var(--fs-small);color:var(--text-muted)}
.prose .essay-sources p{text-indent:0}
.essay-sources p+p{margin-top:var(--s-2)}
.essay-sources a{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
.prose .footnotes+.essay-sources{margin-top:var(--s-4)}
/* The sticky chapter list never runs past the viewport: it scrolls on its own (≥ 72rem) */
@media(min-width:72rem){.essay>.toc{max-height:calc(100vh - 2 * var(--s-6));max-height:calc(100dvh - 2 * var(--s-6));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
.essay-facts{row-gap:.25rem}
/* Phones and tablets: the contents of this part come after the text (the reader arrives for the essay, not the list);
   ≥ 72rem the list is the sticky left column (folio.css). */
@media(max-width:71.99rem){.essay>.toc{order:2;margin:var(--s-8) 0 0}.essay>.essay-body{order:1}}
/* Verse links inside essay prose read as small accent numerals */
.essay-body .prose .vref{font-size:.82em}
/* A verse link glued to the word before it was a superscript callout in the source: small lining figures raised like a
   footnote mark (a.fn), with a 44 px hit area; adjacent links are separated ("9·13, 9·14") */
.vref.vref--call,.essay-body .prose .vref.vref--call{position:relative;margin-left:.08em;font:500 .68em/0 var(--ff-ui);font-variant-numeric:lining-nums;letter-spacing:.01em;vertical-align:.6em}
.vref.vref--call::before{content:"";position:absolute;inset:-16px -3px}
.vref-sep{color:var(--text-subtle)}
.vref--call+.vref-sep{font:500 .68em/0 var(--ff-ui);vertical-align:.6em}
/* Page breaks of the printed edition (CWSA 19): where a page begins. Inline "[p. 58]" in small UI figures; ≥ 72rem the
   number sits in the left margin of the text column, level with its line. Never copied with the text. */
.pg::before{content:"[p. " attr(data-page) "]";content:"[p. " attr(data-page) "]" / "";margin:0 .2em;font:400 .6875rem/1 var(--ff-ui);font-variant-numeric:lining-nums;letter-spacing:.02em;text-indent:0;color:var(--text-subtle);-webkit-user-select:none;user-select:none;white-space:nowrap}
@media(min-width:72rem){
  .essay-body .prose>p{position:relative}
  .essay-body .pg{display:inline-block;width:0;height:1em;vertical-align:-.15em;border-left:1px solid var(--border-strong)}
  .essay-body .pg::before{content:"p. " attr(data-page);content:"p. " attr(data-page) / "";position:absolute;right:calc(100% + var(--s-3));margin:0;text-align:right;line-height:inherit;font-size:.75rem}
}
/* Sidenotes (≥ 72rem): reader.js puts each note level with its marker in the right column (out of the text's flow, so
   no gaps open between paragraphs). Without JS — and below 72rem — a note is a ruled block under its paragraph. */
@media(min-width:72rem){
  .essay-body .prose>.note{grid-column:1;margin:var(--s-3) 0 var(--s-4);padding:var(--s-2) 0 var(--s-2) var(--s-4)}
  .essay-body .prose.has-sidenotes{position:relative;padding-bottom:var(--notes-overflow,0px)}
  .essay-body .prose.has-sidenotes>.note{position:absolute;grid-column:2;grid-row:auto;top:var(--note-y,0px);left:0;right:0;margin:0;padding:.3rem 0 0 var(--s-4)}
}
/* Paragraph deep links (#p5, #p2-p6, #p2,p9): the selected paragraphs carry a highlight wash and an accent rule */
.prose p[data-selected]{background:var(--highlight);box-shadow:0 0 0 .4rem var(--highlight),-2px 0 0 .4rem var(--accent);border-radius:1px}
.prose p[id^=p]{scroll-margin-top:var(--s-7)}
.prose p[tabindex="-1"]:focus{outline:none}
.prose .note[id^=fn-]:target,.footnotes li:target{color:var(--text)}
/* Listen: a native disclosure, so the recording works without JS */
.listen-d>summary{list-style:none}
.listen-d>summary::-webkit-details-marker{display:none}
.listen-d[open]{flex-basis:100%}
.listen-d[open]>summary{margin-inline:auto}
.listen-d__panel{display:grid;justify-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.listen-d__panel audio{width:min(100%,28rem);height:var(--tap);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-muted);accent-color:var(--accent)}
.listen-d__panel audio::-webkit-media-controls-enclosure{border-radius:var(--r-pill);background:transparent}
.listen-d__panel audio::-webkit-media-controls-panel{background:var(--surface-muted);color:var(--text)}

/* ---------- Explorations ---------- */
.expl-list a:hover h2{color:var(--accent)}
.expl-list h2{transition:color var(--t)}
.expl-list a{align-content:start}
/* The list covers (DESIGN.md "Explorations"): one 3:2 well each; the Delight painting sits in the night sky, the
   Experiential GitaMain is washed onto the paper with ॐ श्रीमद्भगवद्गीता beside it, the symbol is contained */
.expl-list .thumb{aspect-ratio:3/2}
.expl-list .expl-cover>img{object-position:50% 30%}
.expl-list .thumb--symbol>img{padding:12%}
.expl-list .expl-cover__t>span{line-height:1.6}

/* ---------- The Ascent exploration (The Delight of Krishna: mockups/explorations-delight.html) ---------- */
.reader-head>.lotus{margin-bottom:var(--s-2)}
.expl-head .reader-source{max-width:46rem;margin-inline:auto}
.reader-source a{position:relative}
.reader-source a::before{content:"";position:absolute;inset:-14px -4px}
.ascent-sec{border-top:1px solid var(--border-faint)}
.expl-coverpage+.ascent-sec{margin-top:var(--s-7)}
.ascent-sec .sec-head>p:last-child{color:var(--text-muted);text-wrap:pretty}
/* A station's verses: one disclosure under the threshold (every verse section stays one tap away, D17) */
.station .station__verses{margin:var(--s-1) 0 0;padding:0}
.station__verses>summary{min-height:var(--tap)}
.station__verses .numerals{padding-top:var(--s-1);text-align:center}
.station:nth-child(even) .station__verses>summary{flex-direction:row-reverse}
@media(max-width:47.99rem){.station:nth-child(even) .station__verses>summary{flex-direction:row}}
/* The companion essays in their four ascents */
.expl-essays .sec-head>p:not(.label){color:var(--text-muted);text-wrap:pretty}
.expl-essays .sec-head>.expl-essays__about{margin-top:var(--s-2)}
.expl-essays .contents--cards{margin-bottom:var(--s-2)}
.expl-essays .contents--cards .title{font-size:var(--fs-h4)}
.expl-essays .contents--cards .value{font:400 .8125rem/1.3 var(--ff-ui);color:var(--text-subtle)}
.expl-coverpage--after{padding-block:var(--s-8) 0;border-top:1px solid var(--border-faint)}
.expl-coverpage--after>.expl-contents{margin-top:0}
.expl-coverpage--after>.expl-about{margin-top:var(--s-7)}
/* Facts of a card: each item keeps together; the separator leads the next item, so no line ends in a dangling "·" */
.expl-facts{display:flex;flex-wrap:wrap;column-gap:.45em}
.expl-facts>span{white-space:nowrap}
.expl-facts>span+span::before{content:"·";margin-right:.45em;color:var(--text-subtle)}
.expl-skt{display:block;font:1.25rem/1.6 var(--ff-sanskrit);color:var(--text-subtle)}
.expl-skt--lg{margin-top:var(--s-3);font-size:var(--fs-deva-sm);color:var(--sanskrit)}
.expl-sub{font-style:italic}
.expl-note{max-width:60ch;margin:var(--s-6) auto 0;text-align:center}
.expl-crumbs{padding-top:var(--s-4)}
/* Phones: one back link to the parent instead of a wrapping trail; the kicker names the exploration.
   Wider: the trail; the kicker's exploration link would repeat it. */
.expl-back{display:none}
.expl-back a{display:inline-flex;align-items:center;min-height:var(--tap);font:400 var(--fs-ui-sm)/1.3 var(--ff-ui);color:var(--text-subtle)}
.expl-back a:hover{color:var(--accent)}
@media(max-width:37.49rem){.expl-crumbs .crumbs:has(+.expl-back){display:none}.expl-back{display:block}}
@media(min-width:37.5rem){.reader-head.expl-head .kicker a.meta{display:none}}
@media(max-width:47.99rem){.reader-head.expl-head{padding-bottom:var(--s-5)}.reader-sec{padding-top:var(--s-2)}.expl-prose>:first-child{margin-top:0}.reader-sec .margin-num{display:none}}
.expl-topics{justify-content:center;align-items:center;margin-top:var(--s-4)}
.expl-topics .label{margin-right:var(--s-1)}
.expl-topics .chip{min-height:var(--tap)}
.expl-topics .chip--plain{border-style:dashed;color:var(--text-subtle)}
.expl-head{padding-top:var(--s-5)}
.expl-head .kicker a.meta:hover{color:var(--accent)}
.expl-plate{margin-bottom:var(--s-6)}
.expl-plate img{max-height:24rem;object-fit:cover}
.expl-about{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border)}
.expl-about h2{margin-bottom:var(--s-3)}
.expl-dl{grid-template-columns:minmax(0,7rem) minmax(0,1fr)}
.expl-rights{margin-top:var(--s-4);max-width:60ch}
.expl-begin{justify-content:flex-start;margin-top:var(--s-5)}
.expl-dl a{display:inline-block}
.expl-contents{margin-top:var(--s-8)}
.expl-contents>h2{margin-bottom:var(--s-4)}
/* Children of a contents row: a native disclosure under the row, aligned with the title column */
.toc-kids{margin:calc(-1 * var(--s-3)) 0 var(--s-2);padding-inline-start:calc(2.5rem + var(--s-3))}
.toc-kids>summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);cursor:pointer;font:500 var(--fs-ui-sm)/1.2 var(--ff-ui);color:var(--text-subtle);transition:color var(--t)}
.toc-kids>summary::-webkit-details-marker{display:none}
.toc-kids>summary .icon{width:1rem;height:1rem;transition:transform var(--t)}
.toc-kids[open]>summary .icon{transform:rotate(180deg)}
.toc-kids>summary:hover{color:var(--accent)}
.toc-kids .contents{border-bottom:0}
.toc-kids .numerals{padding-bottom:var(--s-2)}
.contents .numerals li,.expl-children .numerals li{border:0}
/* A wrapped title: the leader and the value sit on its last line */
.essays-wrap .contents .line,.expl-toc .line,.expl-rows .line{align-items:last baseline}
/* Contents rows never push past a phone: long titles wrap, the kind label drops under the title */
.expl-toc .title{min-width:0;overflow-wrap:break-word}
@media(max-width:29.99rem){.expl-toc .line{flex-wrap:wrap}.expl-toc .leader{display:none}.expl-toc .value{flex-basis:100%;white-space:normal;margin-top:.15rem}}
/* The section prose never stretches its rows to a tall rail */
.reader-sec .expl-prose{align-content:start}
@media(max-width:71.99rem){.margin-num--dup{display:none}}
.margin-num .label{margin-top:.35rem}
/* The AI-translation label line of the shared partial is a flex row: no book indent for it or its badge */
.prose [data-ai-translation],.prose [data-ai-translation]>*{text-indent:0}
.prose [data-ai-translation]{margin-top:var(--s-4)}
/* Label lines the shared block partial does not print (source group, speaker, translation credit, term, tag) */
.expl-prose>.expl-group{margin:var(--s-7) 0 var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--border);color:var(--accent)}
.expl-prose>.expl-group:first-child{margin-top:0}
.expl-prose>.expl-speaker{margin-top:var(--s-5);text-indent:0}
.expl-prose>.expl-credit{margin:0 0 var(--s-4);text-indent:0}
.expl-prose>.expl-term{margin-top:var(--s-6);text-indent:0}
.expl-prose>.expl-term+h2,.expl-prose>.expl-term+h3{margin-top:var(--s-1)}
.expl-prose>.expl-tag{margin-top:var(--s-5);text-indent:0}
.expl-prose>.expl-tag+.pull{margin-top:var(--s-2)}
.expl-prose .plate{margin-block:var(--s-5)}
/* the IAST line of a verse quotation is centred like the Devanagari (no book indent from .prose p+p) */
.prose .verse-quote p{text-indent:0}
.expl-prose>.expl-essays{margin-top:var(--s-2);padding-left:1.4em;list-style:"— "}
.expl-prose>.expl-essays li{display:flex;align-items:center;min-height:var(--tap);padding-left:.2em}
.expl-prose>.expl-essays li::marker{content:"— "}
.expl-prose>.expl-essays a{display:inline-flex;align-items:center;min-height:var(--tap)}
.expl-pageinfo{margin-bottom:var(--s-4);text-indent:0}
.expl-after .pagination{margin-top:var(--s-6)}
.expl-children{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--border)}
.expl-children>h2{margin-bottom:var(--s-3)}

.expl-source{margin-top:var(--s-7);padding-top:var(--s-3);border-top:1px solid var(--border);text-indent:0}
.rail-aside .rail-h2{margin-top:var(--s-6)}
.rail-more{display:flex;flex-wrap:wrap;gap:0 .75rem;padding-top:var(--s-2);border-top:1px solid var(--border)}
.rail-more .vref{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);font-size:1.0625rem}
/* "Read in the essay reader" on sections that reproduce a chapter of Essays on the Gita */
.expl-essaycopy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-5);text-indent:0}
.expl-ui-note{margin-top:0}
/* Quotations: the citation line sits clear of the last line */
.expl-prose blockquote>footer{margin-top:var(--s-2)}
.expl-prose blockquote:not(.pull)>footer .vref,.expl-passage__cite .vref{margin-left:.15em}
.cite-sep{color:var(--text-subtle)}
/* One citation per passage: consecutive paragraphs of one source read as prose under a hairline */
.expl-passage{margin:var(--s-5) 0;padding-left:var(--s-4);border-left:1px solid var(--border-strong)}
.expl-passage>p+p{text-indent:1.5em}
.prose .expl-passage__cite{margin-top:var(--s-3);text-indent:0;font-size:var(--fs-small)}
.expl-passage__cite cite{font-style:normal}
/* A very long quotation opens from its first stanza */
.expl-long{margin:var(--s-4) 0}
.expl-long>summary{list-style:none;cursor:pointer;padding-left:var(--s-4);border-left:1px solid var(--border-strong);color:var(--text-muted)}
.expl-long>summary::-webkit-details-marker{display:none}
.expl-long__lead{display:block}
.expl-long__more{display:inline-flex;align-items:center;min-height:var(--tap);font:500 var(--fs-ui-sm)/1.2 var(--ff-ui);color:var(--accent)}
.expl-long .when-open,.expl-long[open] .when-closed,.expl-long[open] .expl-long__lead{display:none}
.expl-long[open] .when-open{display:inline}
.expl-long[open]>blockquote{margin-top:var(--s-2)}
/* Verse-number lists: once, as chips (short) or chapter-grouped numerals */
.expl-reflist{margin:var(--s-5) 0}
.prose .numerals{padding-left:0;margin-block:var(--s-2) var(--s-3)}
.prose .numerals li+li{margin-top:0}
.prose .numerals a{text-decoration:none}
.prose .expl-reflist__ch{margin-top:var(--s-3);text-indent:0;font:500 var(--fs-ui-sm)/1.3 var(--ff-ui);color:var(--text-subtle)}
.expl-refchips{margin-top:var(--s-2);text-indent:0}
.expl-refchips .chip,.expl-topics .chip{min-height:var(--tap);text-indent:0;text-decoration:none}
.expl-refchips .vref{font-size:1.0625rem}
/* Imported tables: wrapped cells, Devanagari in its face, IAST italic, a readable translation column; stacked on phones */
.expl-table th{white-space:normal}
.expl-table td{white-space:normal;vertical-align:top;min-width:6rem}
.expl-table td [lang=sa]{font:var(--fs-deva-sm)/1.75 var(--ff-sanskrit);color:var(--sanskrit)}
.expl-table .iast,.expl-table [lang=sa-Latn]{white-space:normal}
.expl-table td:has(> [lang=sa]){min-width:9rem}
@media(max-width:47.99rem){.expl-table.table--stack td{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);justify-content:start;align-items:start;gap:var(--s-3)}.expl-table.table--stack td::before{text-align:left}}
.expl-tgroup{border-top:1px solid var(--border)}
.expl-tgroup:last-of-type{border-bottom:1px solid var(--border)}
.expl-tgroup>summary{list-style:none;display:flex;align-items:center;gap:.4rem;min-height:var(--tap);cursor:pointer;font:500 var(--fs-ui)/1.2 var(--ff-ui)}
.expl-tgroup>summary::-webkit-details-marker{display:none}
.expl-tgroup>summary .icon{width:1rem;height:1rem;transition:transform var(--t)}
.expl-tgroup[open]>summary .icon{transform:rotate(180deg)}
.expl-tgroup .table-wrap{margin-bottom:var(--s-4)}
/* Header-less tables as contents rows (EA Deep Dives, teaching arc, process steps) */
.prose .expl-rows{padding-left:0;margin-block:var(--s-3) var(--s-5)}
.prose .expl-rows li+li{margin-top:0}
.prose .expl-rows a{text-decoration:none}
.expl-rows .row{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--s-3);padding-block:var(--s-3)}
.expl-rows .roman{font-variant-numeric:oldstyle-nums}
.expl-rows--nonum a,.expl-rows--nonum .row{grid-template-columns:minmax(0,1fr)}
.expl-rows--nonum .roman{display:none}
.expl-rows--nonum .desc{grid-column:1}
.expl-prose[hidden]+.expl-after>.expl-children:first-child{margin-top:0}
.expl-rows .title{min-width:0;overflow-wrap:break-word}
.expl-rows .desc{display:block;text-indent:0}
.expl-rows__refs{display:flex;flex-wrap:wrap;justify-content:flex-end;white-space:normal}
.expl-rows__refs .vref,.expl-verserows .ref{font-size:1.0625rem}
.expl-rows__refs .vref{display:inline-flex;align-items:center;justify-content:flex-end;min-height:var(--tap);min-width:var(--tap);margin-block:calc((1em - var(--tap)) / 2)}
.expl-rows li:target{background:var(--highlight)}
.expl-rows li{scroll-margin-top:var(--s-7)}
@media(max-width:29.99rem){.expl-rows .line{flex-wrap:wrap}.expl-rows .leader{display:none}.expl-rows .value{flex-basis:100%;justify-content:flex-start;margin-top:.15rem}.expl-rows__refs .vref{justify-content:flex-start}}
/* Verse lists that are a section's whole content (EA topics): verse rows */
.prose .expl-verserows{padding-left:0;margin-block:var(--s-2) 0;border-bottom:1px solid var(--border)}
.prose .expl-verserows li+li{margin-top:0}
.prose .expl-verserows a{text-decoration:none}
.prose a.chip{text-decoration:none}
/* Table cells: one .cell per td (stacked: label | value, two grid items), verse references as 44 px UI numerals */
.expl-table td>.cell{min-width:0;overflow-wrap:anywhere}
.expl-table td>.cell [lang=sa]{overflow-wrap:normal}
.expl-table .vref{display:inline-flex;align-items:center;justify-content:flex-start;min-height:var(--tap);min-width:var(--tap);padding-inline:.3rem;font:500 var(--fs-ui-sm)/1 var(--ff-ui);font-variant-numeric:lining-nums tabular-nums}
.expl-refs{display:flex;flex-wrap:wrap;margin-block:-.6rem;margin-inline:-.3rem}
.expl-table .expl-refcol{min-width:5.5rem}
.expl-table tbody tr:hover{background:none}
@media(max-width:47.99rem){
  .expl-table.table--stack td:empty{display:none}
  .expl-table.table--stack td>.cell{grid-column:2}
  .expl-table.table--stack .expl-refs{margin-block:-.4rem}
}
/* Memorable lines as sayings */
.prose .expl-sayings{padding-left:0}
.expl-sayings{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin:var(--s-5) 0;padding:0;list-style:none}
.expl-sayings .saying{padding-top:var(--s-5);border-top:1px solid var(--border)}
.expl-sayings .saying [lang=sa]{font-size:var(--fs-deva)}
.expl-sayings .saying .meaning{font-size:var(--fs-lead);text-indent:0}
.expl-sayings .saying p{text-indent:0}