/* reading.css — A1 Reading pages (/Chapters, /Chapters/{n}, /Chapters/{n}/{v}). Only what the Folio design system
   (folio.css) does not already provide; tokens only, no new colours. Loaded on the Reading pages alone. */

/* ── chapter index: the SAW chapter cards (base.css §15.4) and the List view's chapter rows ── */
.chapters-view{margin-top:var(--s-5)}
.chapters-wrap .satka:first-of-type{padding-top:var(--s-6)}
.chcard__state [data-progress-state].done{display:inline-flex;align-items:center;gap:.25rem;color:var(--success)}
.chcard__iast,.chcard__welcome i{overflow-wrap:normal} /* hyphenated at the compound joints: breaks there, never mid-word */
.chcard details .numerals{padding-bottom:var(--s-2)}
.chapters-foot a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.2em}
.chapter-row .c [data-progress-state]{display:inline}
.chapter-row .done{display:inline-flex;align-items:center;gap:.25rem;color:var(--success)}
.chapter-row .iast{overflow-wrap:normal} /* hyphenated at the compound joints, so it breaks there and never mid-word */

/* ── chapter page (the Delight gate) ── */
.gate__banner figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.2em}
.opener [data-reading-share]{min-width:var(--tap)} /* icon only on phones: still a 44px target */
/* the title is one word: on a phone it steps down until it fits (--lw: its akṣaras), never breaks */
.opener .deva-xl{max-width:100%;overflow-wrap:normal;font-size:min(var(--fs-deva-xl),calc((100vw - 2 * var(--gutter)) / (var(--lw,1) * .72)))}
.opener .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.invoc a{display:inline-flex;align-items:center;min-height:var(--tap);vertical-align:middle} /* a 44px target inside the italic line */
.listen-chapter{padding-top:var(--s-6)}
.listen-chapter>h2{margin-bottom:var(--s-2)}
.reciters{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-faint)}
.reciter{border-bottom:1px solid var(--border-faint)}
.reciter .player{padding-block:var(--s-3);border:0}
.reciter__name{font:var(--fw-medium) 1.25rem/1.2 var(--ff-display);color:var(--text)}
.player--compact .play{width:2.75rem;height:2.75rem}
.chapter-intro{padding-top:var(--s-7)}
/* the legacy C{n} plate: in the right margin from 72rem (base.css), after the summary below it, never wider than 26rem */
@media(max-width:71.99rem){.chapter-intro .plate--legacy{width:100%;max-width:26rem;margin:var(--s-5) auto 0}.chapter-intro .chapter-here{margin-bottom:var(--s-3)}}
.chapter-intro .plate--legacy figcaption{text-align:left}
.chapter-here .meta{margin-top:var(--s-1)}
.chapter-summary>h2{margin-bottom:var(--s-3)}
.chapter-summary h3{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-h4)}
.chapter-summary p+p{text-indent:0;margin-top:var(--s-3)}
.chapter-outline{padding-top:var(--s-7)}
.chapter-outline>h2{margin-bottom:var(--s-1)}
.outline-note{text-align:left}
.outline a{min-height:var(--tap)}
.outline .roman{color:var(--accent)}
.chapter-verses{padding-top:var(--s-7)}
.chapter-verses>h2{margin-bottom:var(--s-2)}
/* the whole śloka: lines break at spaces, then at the <wbr> the view offers at the sandhi joins of long runs; breaking
   inside a word stays the last resort (overflow-wrap:break-word, inherited), never a sideways scroll */
@media(max-width:47.99rem){.chapter-verses .verse-row{grid-template-columns:2.75rem minmax(0,1fr);column-gap:var(--s-3);padding-inline:.2rem}.chapter-verses .verse-row .skt{font-size:1.125rem}}
.chapter-end .end-mark{margin:0 0 var(--s-2)!important}
.filter-note{padding:var(--s-3) 0;font:400 var(--fs-ui-sm)/1.5 var(--ff-ui);color:var(--text-muted)}
.filter-note a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
.filter-note a:hover{color:var(--accent)}
.chapter-end{padding-top:var(--s-8);text-align:center}
.chapter-end>h2{margin-bottom:var(--s-4)}
.chapter-end .verse__line{display:block}
.chapter-end .verse__iast span{display:block}
.chapter-end .verse__trans{margin-top:var(--s-4);text-align:center}

/* ── verse bar ── */
.icon-btn.is-disabled{opacity:.35;pointer-events:none}
.verse-bar .rail::after{left:clamp(3px,var(--pos,0%),calc(100% - 3px))} /* the dot of the last verse stays inside the page (base.css puts it 3px past the edge) */

/* ── the verse: words are never broken; on a phone the type steps down until the longest word fits the column
   (--lw-skt / --lw-iast: graphemes / letters of the longest word, set by the view; 100cqi = the column). ── */
#verse-text{container-type:inline-size}
#verse-text .verse__skt,#verse-text .verse__iast{overflow-wrap:break-word} /* a last resort only: lines break at spaces and at the wbr of sandhi joins first */
#verse-text .verse__skt{font-size:clamp(1.25rem,calc(100cqi / (var(--lw-skt,1) * .72)),var(--fs-deva-lg))}
#verse-text .verse__iast{font-size:clamp(1rem,calc(100cqi / (var(--lw-iast,1) * .58)),var(--fs-lead))}
/* the pager shows the neighbours' openings on one line each (a long compound never widens the page) */
.verse-pager .pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.verse-pager .pager .t,.verse-pager .pager .s{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* the chapter pager: the painting thumbnail beside the direction and titles */
.chapter-pager .pager a:has(>.thumb){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:.8rem;align-items:center}
.chapter-pager .pager .thumb{float:none;grid-row:1/4;margin:0}
.chapter-pager .pager .next:has(>.thumb){grid-template-columns:minmax(0,1fr) 48px}
.chapter-pager .pager .next .thumb{grid-column:2}
.chapter-pager .pager a>:not(.thumb){min-width:0}

/* ── the study reader: chapter pills + verse select under the verse bar, the study steps (base.css §15.6) ── */
.reader-nav .numerals--joined{max-width:var(--content);margin-inline:auto}
.study{margin-top:var(--s-6)}
.study-steps{max-width:var(--content);margin-inline:auto}
/* ① Original: the legacy panes, one line per verse line */
.panes .line{display:block}
.panes dd.iast{font-style:italic;color:var(--text-muted)}
.panes+.correspondence{max-width:var(--column);margin-inline:auto}
/* ⑤ English: the notes in the column of the panel */
.panel .verse-notes{max-width:var(--column);margin-inline:auto;padding-top:0}
.note-sec--first{border-top:0;padding-top:0}
.verse-translation{text-indent:0}
.verse-refs.ref-links{max-width:none;margin:0 0 var(--s-3)}
@media(max-width:34.99rem){.verse-refs.ref-links{grid-template-columns:1fr}}
.picker-btn{white-space:nowrap}
@media(max-width:22.5rem){.verse-bar__in{gap:0}.verse-bar .picker-btn{padding-inline:.6rem}} /* "18·78 / 78" and four buttons fit 320px */
.nojs-h{display:none;margin:var(--s-7) 0 var(--s-3);font-size:var(--fs-h3)}
/* a speaker carried from the verses before (the verse itself has no speaker line): quieter */
.verse__speaker--carried{opacity:.8}
.verse__speaker--carried [lang=sa]{font-size:1rem}

/* ── word correspondence (GitaTagger parts) ── */
.cp{border-radius:var(--r-xs);transition:background var(--t),box-shadow var(--t)}
.cp.is-hot{background:var(--highlight);color:var(--text)}
[lang=sa] .cp.is-hot{color:var(--sanskrit)}
[data-cp-on] .cp{background:color-mix(in srgb,var(--cp,var(--highlight)) 24%,transparent);box-shadow:inset 0 -2px 0 var(--cp,var(--accent))}
[data-cp-on] .cp.is-hot{background:color-mix(in srgb,var(--cp,var(--highlight)) 45%,transparent)}
.correspondence{display:grid;justify-items:center;gap:var(--s-1);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--border);text-align:center}
.correspondence .panel__note{margin:0;max-width:38rem}

/* ── word by word ── */
.wbw-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-2) var(--s-5);margin:-.5rem 0 var(--s-5)}
.morph-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-4);font:400 var(--fs-ui-sm)/1.4 var(--ff-ui);color:var(--text-subtle)}
.morph-legend>span{display:inline-flex;align-items:center;gap:.4rem}
.morph-legend [lang=sa]{font-size:1rem;color:inherit}
.mc-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.mc-dot.morph-stem{box-shadow:inset 0 0 0 1px var(--border-strong);background:var(--morph-stem)}
.word__skt .morph-prefix,.word__skt .morph-suffix{font-weight:inherit}
/* an akṣara shared by two morphemes (फ·ले·षु): the first one's colour, underlined in the second's */
.morph-join{text-decoration:underline 2px;text-underline-offset:.32em;text-decoration-skip-ink:none}
.morph-join--prefix-stem{color:var(--morph-prefix);text-decoration-color:var(--morph-stem)}
.morph-join--stem-suffix,.morph-join--prefix-suffix{color:var(--morph-stem);text-decoration-color:var(--morph-suffix)}
.lexicon .word-detail__grid>*{min-width:0} /* a wide paradigm table scrolls in its wrapper, never the page */
.word-extra:empty{display:none}
.word-extra{margin-top:var(--s-4)}
.word-extra .extra__sec{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border)}
.word-extra .extra__sec>.label{margin-bottom:var(--s-2)}
.word-extra .extra__list li{line-height:1.45}
.word-extra .extra__list li+li{margin-top:var(--s-1)}
.word-extra .extra__kinetic{margin-top:var(--s-1);font-style:italic;color:var(--text-muted)}
.word-extra .extra__note{margin-top:var(--s-2);font:400 var(--fs-ui-sm)/1.5 var(--ff-ui);color:var(--text-subtle)}
.word-extra .extra__morph{margin-top:0}
.word-extra .links{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin-top:var(--s-3)}
.word-extra .table-wrap{margin-top:var(--s-1)}
.paradigm td,.paradigm th{white-space:nowrap}
.paradigm td{font-family:var(--ff-text);font-style:italic;font-size:1rem}
.paradigm td.is-hl{background:var(--highlight);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.paradigm th[scope=row]{position:sticky;left:0;z-index:1;border-right:1px solid var(--border)} /* the case stays in view while the forms scroll */
.paradigm thead th:first-child{left:0;z-index:2}
button.more{background:none;border:0;padding:0;cursor:pointer}

/* ── word index (glossary) ── */
.word-index{margin-top:var(--s-8)}
.glossary{list-style:none;margin:0;padding:0}
.gl{padding-block:var(--s-4);border-bottom:1px solid var(--border)}
.gl__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem var(--s-3)}
.gl__skt{font:var(--fs-deva-sm)/1.6 var(--ff-sanskrit)}
.gl__iast{font-style:italic;color:var(--text-muted)}
.gl__en{flex-basis:100%;color:var(--text)}
@media(min-width:48rem){.gl__en{flex-basis:auto}.gl__en::before{content:"— ";color:var(--text-subtle)}}
.gl__gram{margin-top:var(--s-1);font:400 var(--fs-ui-sm)/1.55 var(--ff-ui);color:var(--text-muted)}
.gl__form{font-family:var(--ff-text);font-size:1.0625rem;color:var(--text)}
.gl__root{display:inline-flex;align-items:center;min-height:var(--tap);margin-block:-.7rem;font-family:var(--ff-text);font-size:1.0625rem;font-style:italic;color:var(--accent)}
.gl__root:hover{color:var(--accent-strong);text-decoration:underline}
.gl__root{position:relative}
.gl__root::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,var(--tap));transform:translateX(-50%)} /* "√kṛ" is narrow: a 44px hit area */
/* the lexicon card of a word whose only English is its phrase's gloss */
.word__en--phrase{color:var(--text-muted);font-style:italic}
.word__in{margin-right:.3em;font:500 var(--fs-caption)/1.3 var(--ff-ui);font-style:normal;letter-spacing:.02em;color:var(--text-subtle)}
.gl__more{margin-top:var(--s-1);font:400 var(--fs-ui-sm)/1.5 var(--ff-ui)}
.gl__more a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);margin-block:-.7rem;padding-inline:.25rem;font-size:1.0625rem;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
.gl__more .sep{margin-inline:.2em;color:var(--text-subtle)}
.word-index__fold>summary{list-style:none;cursor:pointer;min-height:var(--tap)}
.word-index__fold>summary::-webkit-details-marker{display:none}
.word-index__fold>summary .meta{display:inline-flex;align-items:center;gap:.4rem}
.word-index__fold>summary .icon{width:14px;height:14px;transition:transform var(--t)}
.word-index__fold[open]>summary .icon{transform:rotate(180deg)}
.word-index__fold>summary:hover h2{color:var(--accent)}
.gl__more a:hover{color:var(--accent)}
.abbrevs{margin-top:var(--s-5)}
.abbrevs>summary{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);font:500 var(--fs-ui)/1.2 var(--ff-ui);cursor:pointer;list-style:none}
.abbrevs>summary::-webkit-details-marker{display:none}
.abbrevs>summary:hover{color:var(--accent)}
.abbrevs__list{margin-top:var(--s-3)}
.abbrevs__list dt{margin-top:var(--s-5);font:var(--fw-medium) var(--fs-h4)/1.25 var(--ff-display)}
.abbrevs__list dd{margin-top:var(--s-2)}
.abbrevs__list dd p+p{text-indent:0;margin-top:var(--s-2)}

/* ── sandhi / anvaya ── */
.prose-order .line,.padaccheda .line{display:block}
.padaccheda{margin-top:var(--s-6)}
.interlinear .is-filler{opacity:.75}
.anvaya-hint{margin:var(--s-3) 0 0}
.anvaya-note{margin:var(--s-3) 0 0;text-align:left}
.anvaya-note [lang=hi]{font-style:normal;font-size:1.0625rem;line-height:1.6}
.prose-order [lang=sa]{cursor:text}

/* ── analysis ── */
.results-sec+.results-sec{margin-top:var(--s-8)}
.analysis-filter{margin:var(--s-4) 0 0;padding:0;border:0;min-width:0}
.analysis-filter legend{margin-bottom:var(--s-2)}
.chip-group{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
.chip-group__label{font:500 var(--fs-caption)/1.3 var(--ff-ui);color:var(--text-subtle)}
.analysis-verse{margin-top:var(--s-5);text-align:center}
.analysis-verse .verse__skt{font-size:var(--fs-deva)}
.analysis-verse .verse__line{display:block}
.analysis-note{text-align:left;margin:var(--s-3) 0}
.tree-wrap .tree+.tree{margin-top:var(--s-5)}

/* ── notes & commentary ── */
.note-sec{padding-block:var(--s-6);border-top:1px solid var(--border)}
.note-sec__head{margin-bottom:var(--s-4)}
.note-sec__head h3{margin-top:var(--s-1);font-size:var(--fs-h3)}
.note-sec__head .meta{margin-top:var(--s-1);font:400 var(--fs-ui-sm)/1.5 var(--ff-ui);color:var(--text-subtle)}
.note-sec__head .kicker [lang=hi]{font-size:1.0625rem;line-height:1.6}
.note-sec__foot{margin-top:var(--s-3)}
.commentary__title{margin-bottom:var(--s-3)}
.commentary .prose p+p,.commentary .prose .note+p,.commentary .prose p.cluster{text-indent:0}
.commentary .prose>p+p{margin-top:var(--s-3)}
.commentary .prose .cluster{margin-top:var(--s-4)}
.commentary .prose blockquote{margin-top:var(--s-4)}
.commentary__translation footer,.commentary__credit{margin-top:var(--s-2);font:400 var(--fs-ui-sm)/1.5 var(--ff-ui);font-style:normal;color:var(--text-subtle)}
.commentary__credit{padding-bottom:var(--s-3);border-bottom:1px solid var(--border);margin-bottom:var(--s-4)} /* set apart from the passages */
/* a long passage: its first lines, fading, then "Read the whole passage" (js/reading/verse.js; without JS it shows whole) */
.passages p.is-clamped{max-height:var(--clamp-h,14rem);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.passage-more{margin-top:var(--s-1)}
.more-quotes{margin-top:var(--s-3)}
.more-quotes>summary{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);font:500 var(--fs-ui)/1.2 var(--ff-ui);cursor:pointer;list-style:none}
.more-quotes>summary::-webkit-details-marker{display:none}
.more-quotes>summary .icon{width:14px;height:14px;transition:transform var(--t)}
.more-quotes[open]>summary .icon{transform:rotate(180deg)}
.more-quotes>summary:hover{color:var(--accent)}
.hindi{font-size:1.25rem;line-height:1.9;text-indent:0}
.hindi .line{display:block}
.references blockquote{font-size:var(--fs-small)}
.ref-links li+li{margin-top:var(--s-1)}
.ref-note{text-align:left;margin-top:var(--s-2)}
.site-section+.site-section{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--border)}
.site-section__date{margin-top:var(--s-2);font:400 var(--fs-ui-sm)/1.5 var(--ff-ui);font-style:italic;color:var(--text-subtle)}
.references h4{margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-h4)}

/* ── dialogs ── */
@media(min-width:40.01rem){.modal--wide{width:min(46rem,calc(100vw - 2rem))}} /* phones keep base.css's full-width bottom sheet */
.sound-etymology .table-wrap{margin-bottom:var(--s-4)}
.sound-etymology .table td:first-child{font-family:var(--ff-sanskrit);font-size:1.25rem}
.sound-etymology h3{font-size:var(--fs-h4)}
.root-entry+.root-entry{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border)}
.root-entry [lang=sa]{font-size:1.5rem}

/* breadcrumbs: a short crumb ("Home") still gets a 44px-wide hit area (base.css → integrator request) */
.crumbs a{position:relative}
.crumbs a::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,var(--tap));transform:translateX(-50%)}

/* inline links in notes and filters keep a 44px hit area without changing the line box */
.verse-notes a.vref,.verse-notes .meta a,.filter-note a{position:relative;display:inline-block}
.verse-notes a.vref::before,.verse-notes .meta a::before,.filter-note a::before{content:"";position:absolute;inset:50% -4px auto;height:var(--tap);transform:translateY(-50%)}

@media (prefers-reduced-motion:reduce){.cp,.more-quotes>summary .icon,.word-index__fold>summary .icon{transition:none}}