/*
 * Corpus (Digital Corpus of Sanskrit, /books): the list of texts, a text's chapters, and the
 * reader with its word-analysis pane. Depends on tokens.css, base.css, components.css, reader.css.
 *
 *   body.corpus.corpus-index    /books
 *   body.corpus.corpus-book     /books/{book}
 *   body.corpus.corpus-reader   /books/{book}/{chapter}: the layout's third pane (section.pane-scan)
 *                               holds the word analysis instead of scans: a themed column from
 *                               1024px, a bottom sheet below (html.corpus-sheet-open)
 *
 * Script setting (html[data-script]): .script-deva / .script-iast are the shared pair (both show in
 * "both"); .lbl-deva / .lbl-iast are one-line labels that show ONE script: Devanagari only for
 * "deva", IAST for "iast" and "both".
 */

:root:not([data-script="deva"]) .lbl-deva,
:root[data-script="deva"] .lbl-iast { display: none; }

body.corpus .kicker a { color: inherit; }
body.corpus .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.corpus .kicker :lang(sa):not(:lang(sa-Latn)) { font-family: var(--font-deva); font-size: var(--fs-ui-lg); letter-spacing: 0; }

/* Sidebar: chapter counts on the right, cheap rendering for very long chapter lists. */
.toc-count {
  flex: none;
  margin-left: 8px;
  font-size: var(--fs-xs);
  line-height: 19px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.toc-heading .toc-count { letter-spacing: 0; font-weight: 400; }
.corpus-toc .toc-list .toc-list > li { content-visibility: auto; contain-intrinsic-size: auto 28px; }
.corpus-letters .toc-group .toc-label :lang(sa):not(:lang(sa-Latn)) { font-family: var(--font-deva); font-size: var(--fs-md); }
.corpus-letters .toc-group .toc-label > span + span { margin-left: .45em; }
.toc-title :lang(sa):not(:lang(sa-Latn)) { font-family: var(--font-deva); }

/* ======================================================================================== */
/* Lists: texts (/books) and chapters (/books/{book})                                       */
/* ======================================================================================== */
.corpus-page .reader-head + * { margin-top: 56px; }

.corpus-filter { max-width: 440px; margin-left: auto; margin-right: auto; }
.corpus-filter-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-muted);
}

.corpus-letter {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.corpus-letter > span { margin-right: 0; }
.corpus-letter .corpus-letter-deva { font-family: var(--font-deva); font-size: .92em; }
.corpus-letter-deva + .corpus-letter-iast { margin-left: .5em; }
.corpus-letter { margin-top: 36px; }
.corpus-group:first-child .corpus-letter { margin-top: 40px; }
.corpus-group[hidden] { display: none; }

.corpus-list { margin-top: 22px; }
.corpus-letter + .corpus-list { margin-top: 18px; }
.divider + .corpus-list { margin-top: 32px; }

.corpus-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  padding: 10px 6px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease);
}
.corpus-item:last-child .corpus-row { border-bottom: 1px solid var(--border); }
.corpus-row:hover { background: var(--hover-bg); }
.corpus-row:hover .corpus-row-title { color: var(--accent); }
.corpus-row:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }

.corpus-row-num {
  flex: none;
  width: 2.2em;
  font-size: var(--fs-sm);
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.corpus-row-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--text-title);
  transition: color var(--dur-fast) var(--ease);
}
.corpus-name {
  font-family: var(--font-deva);
  font-size: calc(var(--reading-size) * 1.05);
  line-height: 1.45;
}
.corpus-name-iast,
.corpus-chapter {
  font-family: var(--font-reading);
  font-size: var(--reading-size);
  line-height: 1.35;
}
/* "both": the IAST title is the quieter second line. */
:root[data-script="both"] .corpus-name + .corpus-name-iast {
  font-size: calc(var(--reading-size) * .82);
  color: var(--text-muted);
}
.corpus-row-meta {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.corpus-item[hidden] { display: none; }

.corpus-credit {
  margin-top: 64px;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-muted);
}
.corpus-credit a { color: var(--text-nav); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); }
.corpus-credit a:hover { color: var(--text-title); }

/* A text's title: Devanagari display title, IAST under it in "both". */
.corpus-title .t-deva { font-family: var(--font-deva); font-size: .92em; line-height: 1.3; }
:root[data-script="both"] .corpus-title .t-iast {
  display: block;
  margin-top: 6px;
  font-size: .5em;
  line-height: 1.3;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  .corpus-row { gap: 12px; min-height: 52px; }
  .corpus-row-sep, .corpus-row-more { display: none; }
  .corpus-page .reader-head + * { margin-top: 40px; }
}

/* ======================================================================================== */
/* Reader: verses                                                                            */
/* ======================================================================================== */
.corpus-text {
  --deva-size: calc(var(--reading-size) * 1.12);
  --deva-leading: calc(var(--reading-leading) * 1.08);
  --iast-size: var(--reading-size);
  --first-line: calc(var(--deva-size) * var(--deva-leading));
}
:root[data-script="iast"] .corpus-text { --first-line: calc(var(--iast-size) * var(--reading-leading)); }

.corpus-hint {
  margin-top: 18px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.corpus-text .reader-head + .corpus-verses,
.corpus-text .reader-head + .state { margin-top: 64px; }

.verse-block {
  position: relative;
  margin: 0 0 1.35em;
  scroll-margin-top: var(--sp-6);
}
.verse-block:last-child { margin-bottom: 0; }

.v-text p { margin: 0; }
.v-deva {
  font-family: var(--font-deva);
  font-size: var(--deva-size);
  line-height: var(--deva-leading);
  color: var(--text);
  font-synthesis-weight: none;
}
.v-iast {
  font-family: var(--font-reading);
  font-size: var(--iast-size);
  line-height: var(--reading-leading);
  color: var(--text);
  hyphens: manual;
}
/* "both": the IAST follows the Devanagari verse, smaller and quieter. */
:root[data-script="both"] .v-deva + .v-iast {
  margin-top: .35em;
  font-size: calc(var(--reading-size) * .88);
  color: var(--text-muted);
}

/* Lines are the analysis targets (role=button, added by corpus-reader.js). */
.line {
  width: fit-content;
  max-width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.js .corpus-text .line { cursor: pointer; }
.js .corpus-text .line:hover { background: var(--hover-bg); }
.corpus-text .line.is-selected,
.corpus-text .line.is-selected:hover { background: var(--accent-soft); color: var(--text-title); }
.line:focus-visible { outline-offset: 0; }
.line.line-speaker { font-size: .84em; color: var(--text-muted); }
.line.line-speaker.is-selected { color: var(--text-title); }

/* The verse number: a permalink in the left margin, on the first line. */
.vnum {
  position: absolute;
  top: 0;
  right: calc(100% + 14px);
  display: flex;
  align-items: center;
  height: var(--first-line);
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  border-radius: var(--radius-sm);
}
.vnum .lbl-deva { font-family: var(--font-deva); font-size: var(--fs-ui-lg); font-weight: 400; }
.vnum:hover { color: var(--accent); }
.verse-block:has(.is-selected) .vnum { color: var(--accent); }

/* A verse opened from a link (#1.1, #s-<id>): a short highlight that fades. */
.verse-block.is-flash .line { background: var(--mark-bg); color: var(--mark-fg); }
.verse-block.is-fading .line { transition: background-color 1.6s var(--ease), color 1.6s var(--ease); }

/* Previous / contents / next. */
.corpus-chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  margin-top: 88px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.corpus-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
a.corpus-step:hover .corpus-step-title { color: var(--accent); }
.corpus-step-prev { align-items: flex-start; text-align: left; }
.corpus-step-up { align-items: center; text-align: center; }
.corpus-step-next { align-items: flex-end; text-align: right; }
.corpus-step-dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.corpus-step-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--text-title);
  transition: color var(--dur-fast) var(--ease);
}
.corpus-step-title :lang(sa):not(:lang(sa-Latn)) { font-family: var(--font-deva); font-size: .94em; }

@media (max-width: 767.98px) {
  .vnum {
    position: static;
    display: inline-flex;
    height: auto;
    margin: 0 0 2px -4px;
  }
  .corpus-chapter-nav { grid-template-columns: 1fr 1fr; }
  .corpus-step-up { display: none; }
}

/* ======================================================================================== */
/* The third pane: word analysis and dictionary                                              */
/* ======================================================================================== */
body.corpus-reader .pane-scan {
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  color-scheme: inherit;
}
@media (min-width: 1024px) {
  body.corpus-reader { --col-scan: clamp(340px, 30vw, 540px); }
}

.analysis {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.analysis:focus-visible { outline-offset: -2px; border-radius: 0; }

.an-kicker,
.an-title {
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  line-height: 15px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}

.an-empty { padding: 67px 36px 24px; text-align: center; }
.an-empty-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--text-title);
}
.an-empty-body {
  max-width: 34ch;
  margin: 12px auto 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-muted);
}
.an-empty-keys { margin-top: 22px; font-size: var(--fs-sm); color: var(--text-muted); }
.analysis[data-state]:not([data-state="empty"]) .an-empty { display: none; }

.an-view { display: flex; flex-direction: column; flex: 1 0 auto; }

.an-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 10px 0 28px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
.an-head .an-title { flex: 1; min-width: 0; }
.an-head .an-title:focus { outline: none; }
.an-tools { display: flex; align-items: center; gap: 2px; }
.an-back { margin-left: -12px; }

.an-body { padding: 24px 28px 28px; }
.an-ref {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-muted);
}
.an-sentence { margin-top: 10px; }
.an-sentence .deva {
  display: block;
  font-family: var(--font-deva);
  font-size: calc(var(--fs-h3) * .92);
  line-height: 1.6;
  color: var(--text-title);
  font-synthesis-weight: none;
}
.an-sentence .iast {
  display: block;
  margin-top: 2px;
  font-family: var(--font-reading);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--text-title);
}
:root[data-script="both"] .an-sentence .deva + .iast { font-size: var(--fs-md); color: var(--text-muted); }

.an-tokens { margin-top: 22px; border-top: 1px solid var(--border); }
.an-token { padding: 14px 0 13px; border-bottom: 1px solid var(--border); }
.an-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.an-form .deva { font-family: var(--font-deva); font-size: var(--fs-md); color: var(--text-sidebar); }
.an-form .iast { font-family: var(--font-reading); font-size: var(--fs-md); font-style: italic; color: var(--text-sidebar); }
:root[data-script="both"] .an-form .deva + .iast { color: var(--text-muted); }

.an-lemmas { display: grid; gap: 8px; }
.an-lemma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
}
.an-word {
  justify-self: start;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 9px;
  margin: -2px -6px;
  padding: 2px 6px;
  text-align: left;
  color: var(--accent);
  border-radius: var(--radius-sm);
}
.an-word .deva { font-family: var(--font-deva); font-size: calc(var(--fs-lg) * 1.12); line-height: 1.45; font-synthesis-weight: none; }
.an-word .iast { font-family: var(--font-reading); font-size: var(--fs-lg); line-height: 1.4; }
:root[data-script="both"] .an-word .deva + .iast { font-size: var(--fs-md); color: var(--text-muted); }
.an-word:hover { background: var(--hover-bg); }
.an-word:hover .deva, .an-word:hover .iast:only-child,
:root[data-script="iast"] .an-word:hover .iast { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

.gram {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--text-nav);
  white-space: nowrap;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: help;
}
.gram.is-unknown { border-style: dashed; cursor: default; }
.an-gram-full {
  grid-column: 1 / -1;
  margin-top: 1px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.an-gram-full::first-letter { text-transform: uppercase; }

.an-loading { padding: 24px 28px; }
.an-loading .skeleton { height: 14px; }
.an-loading .skeleton:nth-child(1) { width: 40%; }
.an-loading .skeleton:nth-child(2) { width: 92%; height: 22px; margin-top: 16px; }
.an-loading .skeleton:nth-child(3) { width: 80%; }
.an-loading .skeleton:nth-child(n+4) { width: 64%; margin-top: 22px; }

.an-credit {
  margin-top: auto;
  padding: 16px 28px 20px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.an-credit a { color: var(--text-nav); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); }

/* Dictionary. */
.dict-word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-title);
}
.dict-word .deva { font-family: var(--font-deva); font-size: .92em; line-height: 1.45; }
:root[data-script="both"] .dict-word .deva + .iast { font-size: .66em; color: var(--text-muted); }
.dict-meta { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.dict-tabs { margin-top: 18px; }
.dict-tabs .count { margin-left: 5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.dict-tabs [role="tab"][aria-disabled="true"] { opacity: .55; }
.dict-panel { padding-top: 18px; }
.dict-entry + .dict-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.dict-head {
  margin-bottom: 6px;
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.dict-text {
  font-family: var(--font-reading);
  font-size: calc(var(--fs-md) * 1.07);
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: break-word;
}
.dict-text p { margin: 0; }
.dict-text p + p { margin-top: .5em; }
.dict-text :lang(sa) { font-family: var(--font-deva); }
ol.dict-senses { padding-left: 1.4em; list-style: decimal; }
ol.dict-senses li + li { margin-top: .4em; }
ol.dict-senses li::marker { color: var(--text-muted); font-size: .86em; font-family: var(--font-ui); }
.dict-source { margin-top: 20px; font-size: var(--fs-xs); color: var(--text-muted); }

.an-view .state { padding: 40px 24px; }

/* ---------------------------------------------------------------------------------------- */
/* Below 1024px the pane is a bottom sheet, opened by selecting a line. It is not modal: the */
/* text stays readable and another line can be selected while it is open.                   */
/* ---------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  body.corpus-reader { --sheet-h: min(62dvh, 620px); }
  body.corpus-reader .pane-scan {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-header) + 1);
    height: var(--sheet-h);
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    transform: translateY(102%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  html.corpus-sheet-open body.corpus-reader .pane-scan {
    transform: none;
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
  html.corpus-sheet-open .corpus-text { padding-bottom: calc(var(--sheet-h) + 32px); }
  .an-empty { display: none; }
  .an-head { min-height: 48px; padding-left: 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .an-head::before {                         /* grab handle */
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--control-border);
  }
  .an-body { padding: 18px 20px 24px; }
  .an-credit { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
  .an-back { margin-left: -8px; }
}
@media (min-width: 1024px) {
  .corpus-hint { display: none; }
}

/* Phones: a text field iOS does not zoom into. */
@media (max-width: 767.98px) {
  .corpus-filter .input { height: max(40px, var(--tap-min)); font-size: var(--fs-input-touch); }
}