/*
 * Rigveda pages (Views/Veda): the mandala index, the sukta reader and the verse page.
 * Depends on tokens.css, components.css and reader.css; every value comes from a token.
 *
 *  html[data-rv-text="samhita|pada"]   which text the sukta reader shows (head script + rigveda.js)
 *  html[data-rv-accents="on|off"]      Vedic accents on or off
 *  html[data-script]                   Devanagari / IAST / both (Reading settings, reader.css)
 */

/* ---------------------------------------------------------------------------------------- */
/* Shared                                                                                     */
/* ---------------------------------------------------------------------------------------- */
.rv .kicker a { color: inherit; text-decoration: none; }
.rv .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rv-dot {
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------------------------------- */
/* Index: /rigveda                                                                            */
/* ---------------------------------------------------------------------------------------- */
.rv-index { max-width: calc(980px + 2 * var(--pane-pad-x)); }

.rv-legend {
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.rv-legend .rv-dot { margin-right: 6px; vertical-align: .1em; }

.rv-mandala + .rv-mandala .divider { margin-top: 88px; }
.rv-mandala-meta {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  color: var(--text-muted);
  font-variant-numeric: lining-nums;
}
.rv-mandala-meta [lang="sa"] { font-family: var(--font-deva); font-size: var(--fs-md); letter-spacing: 0; }

.rv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 2px 6px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.rv-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 8px 12px 9px;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: opacity var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.rv-cell:hover { background: var(--hover-bg); }
.rv-cell:hover .rv-cell-n { color: var(--accent); }
.rv-cell-n {
  font-family: var(--font-display);
  font-size: var(--fs-stepper);
  line-height: 1.15;
  color: var(--text-title);
  font-variant-numeric: lining-nums;
}
.rv-cell-d {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-cell .rv-dot { position: absolute; top: 12px; right: 12px; }

/* A source picked in the pills: the other sūktas step back. */
.rv-index[data-filter] .rv-cell:not(.is-match) { opacity: .28; }
.rv-index[data-filter] .rv-cell:not(.is-match):hover,
.rv-index[data-filter] .rv-cell:not(.is-match):focus-visible { opacity: .7; }

.rv-toc-count {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------- */
/* Sidebar of the sukta and verse pages                                                       */
/* ---------------------------------------------------------------------------------------- */
.rv-toc .rv-toc-sukta { align-items: baseline; }
.rv-toc .rv-toc-sukta .toc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.rv-toc-n {
  flex: none;
  min-width: 24px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rv-toc .rv-toc-sukta .rv-dot { align-self: center; opacity: .85; }
.rv-toc .rv-toc-sukta[data-current] { color: var(--text-title); }
.rv-toc .rv-toc-sukta[data-current] .rv-toc-n { color: var(--accent); }

.rv-toc .rv-toc-verses {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0 10px;
  padding: 0 4px 0 49px;
  list-style: none;
}
.rv-toc .rv-toc-verses .toc-item {
  justify-content: center;
  width: 32px;
  padding: 3px 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------- */
/* Sukta reader                                                                               */
/* ---------------------------------------------------------------------------------------- */
.rv-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  margin: 44px 0 0;
  text-align: center;
}
.rv-facts dt, .rv-table dt {
  font-family: var(--font-ui);
  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);
}
.rv-facts dt [lang="sa"], .rv-table dt [lang="sa"] {
  margin-left: 4px;
  font-family: var(--font-deva);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.rv-facts dd {
  margin: 4px 0 0;
  font-family: var(--font-reading);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--text-title);
}

.rv-metres {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.rv-metres summary {
  display: inline-block;
  cursor: pointer;
  color: var(--text-nav);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  border-radius: var(--radius-sm);
}
.rv-metres summary::-webkit-details-marker { display: none; }
.rv-metres summary:hover { color: var(--text-title); }
.rv-metres p { margin-top: 8px; font-family: var(--font-reading); font-size: var(--fs-md); }
.rv-metres-set {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}

.rv-textbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}
.rv-textbar .segmented { height: max(var(--pill-h), var(--tap-min)); }
.rv-textbar .segmented > label > span { padding: 0 14px; }

/* Recitation player (Listen) */
.rv-player {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 18px auto 0;
  padding: 4px 16px 4px 4px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
}
.rv-player[hidden] { display: none; }
.rv-player .icon-fill, .pill .icon-fill { fill: currentColor; }
.rv-seek { flex: 1; min-width: 60px; accent-color: var(--accent); }
.rv-time, .rv-reciter {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The ṛks */
.rv-verses { margin: 56px 0 0; padding: 0; list-style: none; }
.rv-verse { position: relative; scroll-margin-top: var(--sp-8); }
.rv-verse + .rv-verse { margin-top: 44px; }

/* The number hangs in the left margin, like a folio, and opens the verse page. */
.rv-num {
  position: absolute;
  top: .55em;
  right: calc(100% + 18px);
  min-width: 24px;
  padding: 2px 4px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--weight-ui-strong);
  line-height: 1.4;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-variant-numeric: lining-nums tabular-nums;
}
.rv-num:hover { color: var(--accent); background: var(--hover-bg); }
.rv-verse.is-current .rv-num { color: var(--accent); }

.rv-line { margin: 0; hyphens: manual; overflow-wrap: break-word; }
.rv-line.script-deva {
  font-family: var(--font-deva);
  font-size: calc(var(--reading-size) * 1.12);
  line-height: calc(var(--reading-leading) * 1.12);
  color: var(--text-title);
  font-synthesis-weight: none;
}
.rv-line.script-iast {
  font-family: var(--font-reading);
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  color: var(--text);
}
/* Accented IAST (ā́ = ā + U+0301, no precomposed letter): the reading stack hands such a cluster to
   its 'EB Garamond 12' fallback, which sets the acute beside the letter; EB Garamond alone stacks it
   (Chromium draws the cluster from its latin-ext and vietnamese files together). */
.rv-line.script-iast.rv-acc { font-family: 'EB Garamond', serif; }
:root[data-font="sans"] .rv-line.script-iast.rv-acc { font-family: var(--font-reading); }

:root[data-script="both"] .rv-line.script-deva + .rv-line.script-iast,
:root[data-script="both"] .rv-line.script-deva ~ .rv-line.script-iast {
  margin-top: .45em;
  font-size: calc(var(--reading-size) * .94);
  color: var(--text-sidebar);
}

/* Which forms show. Without the head script: saṃhitā with accents. */
:root:not([data-rv-text="pada"]) .rv-pada,
:root[data-rv-text="pada"] .rv-samh,
:root:not([data-rv-accents="off"]) .rv-plain,
:root[data-rv-accents="off"] .rv-acc { display: none; }

.rv-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-muted);
  font-variant-numeric: lining-nums;
}
/* Opens the ṛk's interpretations in a sheet when the third pane is not shown. */
.rv-notes-open {
  display: none;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
  border-radius: var(--radius-sm);
}
html[data-view="text"] .rv-notes-open { display: inline; }
.pill.rv-notes-pill { display: none; }
html[data-view="text"] .pill.rv-notes-pill { display: inline-flex; }

/* Prev / next */
.rv-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.rv-step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 48%;
  padding: 8px 10px;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.rv-step:hover { background: var(--hover-bg); }
.rv-step-prev { margin-left: -10px; }
.rv-step-next { margin-left: auto; margin-right: -10px; align-items: flex-end; text-align: right; }
.rv-step-dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.rv-step-label { font-family: var(--font-reading); font-size: var(--fs-lg); line-height: 1.3; color: var(--text-title); }
.rv-step:hover .rv-step-label { color: var(--accent); }

.rv-source {
  margin-top: 36px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.rv-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rv-source a:hover { color: var(--text-title); }

.rv .state-error { margin-top: 48px; }

/* ---------------------------------------------------------------------------------------- */
/* Verse page                                                                                 */
/* ---------------------------------------------------------------------------------------- */
.rv-focus { margin-top: 40px; }
.rv-forms-both { text-align: center; }
.rv-form-label {
  margin: 40px 0 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.rv-form-label:first-child { margin-top: 8px; }
.rv-focus .rv-line.script-deva { font-size: calc(var(--reading-size) * 1.3); }
.rv-focus .rv-line.script-iast { font-size: calc(var(--reading-size) * 1.05); }

.rv-table {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 28px;
  max-width: 560px;
  margin: 36px auto 0;
}
.rv-table > div { display: contents; }
.rv-table dt { padding-top: 3px; text-align: right; }
.rv-table dd {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--text-title);
  font-variant-numeric: lining-nums;
}
.rv-table dd[lang="sa"] { font-family: var(--font-deva); }

/* ---------------------------------------------------------------------------------------- */
/* Third pane: interpretations (the layout's scan pane, in the reading colours)              */
/* ---------------------------------------------------------------------------------------- */
.rv .pane-scan {
  background: var(--bg-sidebar);
  color: var(--text);
  color-scheme: inherit;
}
.rv-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rv-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 24px 0 32px;
}
.rv-pane-title {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.rv-tabs { flex: none; gap: 18px; padding: 0 32px; }
.rv-panels {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 32px 96px;
}
.rv-panels:focus-visible { outline-offset: -2px; }
.rv-panel { max-width: 660px; }
.rv-panel-source {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--text-title);
}
.rv-note { padding: 22px 0 4px; scroll-margin-top: 12px; }
.rv-note + .rv-note { border-top: 1px solid var(--border); }
.rv-note-head {
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.rv-note-head a { color: inherit; border-radius: var(--radius-sm); }
.rv-note-head a:hover { color: var(--accent); }
.rv-note.is-current .rv-note-head { color: var(--accent); }
.rv-note-label {
  margin: 14px 0 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--weight-ui-strong);
  color: var(--text-muted);
}
.rv-note-label[lang="sa"] { font-family: var(--font-deva); font-size: var(--fs-md); font-weight: 400; }
.rv-note-text {
  font-family: var(--font-reading);
  font-size: calc(var(--reading-size) * .92);
  line-height: 1.6;
  color: var(--text);
  hyphens: auto;
  overflow-wrap: break-word;
}
.rv-note-text p + p { margin-top: .6em; }
.rv-note-text.rv-note-deva {
  font-family: var(--font-deva);
  font-size: calc(var(--reading-size) * .88);
  line-height: 1.85;
  hyphens: manual;
  font-synthesis-weight: none;
}

/* The same notes in a bottom sheet (phones, Text mode). */
.rv-sheet .rv-tabs { padding: 0; }
.rv-sheet .rv-note { padding-top: 4px; }

/* ---------------------------------------------------------------------------------------- */
/* Tablet and phone                                                                           */
/* ---------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .rv-pane-head { padding-left: 24px; }
  .rv-tabs, .rv-panels { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 767.98px) {
  .rv-notes-open { display: inline; }
  .pill.rv-notes-pill { display: inline-flex; }
  .rv-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0 2px; margin-top: 24px; }
  .rv-cell { min-height: 52px; padding: 7px 8px; }
  .rv-cell .rv-dot { top: 10px; right: 8px; }
  .rv-mandala + .rv-mandala .divider { margin-top: 64px; }
  .rv-facts { gap: 12px 28px; margin-top: 32px; }
  .rv-verses { margin-top: 40px; }
  .rv-verse + .rv-verse { margin-top: 36px; }
  /* No margin to hang the number in: it sits above the verse. */
  .rv-num { position: static; display: inline-block; margin: 0 0 4px -4px; text-align: left; }
  .rv-reciter { display: none; }
  .rv-player { padding-right: 12px; }
  .rv-pager { margin-top: 64px; }
  .rv-step-label { font-size: var(--fs-md); }
  .rv-table { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .rv-table dt { padding-top: 10px; text-align: center; }
}