/* Every scripture variant ships in the DOM; CSS reveals the chosen one. That
   makes switching a single attribute write, so scroll position is preserved
   mid-verse and nothing is refetched or re-rendered. */
.vtext { display: none }
html[data-script="devanagari"] .vtext[data-variant="devanagari"],
html[data-script="roman"]      .vtext[data-variant="roman"] { display: block }

/* If a variant has not been written yet, fall back to Devanagari rather than
   showing an empty page, and say so. */
.vtext[data-empty="true"] { display: none !important }
.variant-missing { display: none }
html[data-script="roman"] .verse-list[data-missing~="roman"] .variant-missing[data-for="roman"] { display: block }
/* Falling back means the whole text reads in Devanagari. The Roman variant must
   be hidden too, or the metrical markers -- which always have a Roman label --
   would print twice (॥ दोहा ॥ followed by "Doha"). */
html[data-script="roman"] .verse-list[data-missing~="roman"] .vtext[data-variant="devanagari"] { display: block }
html[data-script="roman"] .verse-list[data-missing~="roman"] .vtext[data-variant="roman"] { display: none }

.verse-list { margin: 0; padding: 0; list-style: none }

.verse {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 .7rem;
  padding: .55rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--rule) 60%, transparent);
}
.verse:last-child { border-bottom: 0 }
.verse-num { font-size: .8em; color: var(--ink-soft); text-align: right; padding-top: .45em;
             font-variant-numeric: tabular-nums }

.vtext p { margin: 0 0 .12em; font-size: var(--fs-verse) }
.vtext[data-variant="devanagari"] p { line-height: var(--lh-deva) }
.vtext[data-variant="roman"] p { line-height: 1.7; font-style: italic; color: var(--ink) }

/* metrical markers: doha / sorotha / chaupai */
.verse[data-role="marker"] { border-bottom: 0; grid-template-columns: 1fr; text-align: center;
                             padding: 1.1rem 0 .4rem }
.verse[data-role="marker"] p { color: var(--gold); font-weight: 700; letter-spacing: .04em;
                               font-size: var(--fs-small) }
.verse[data-role="doha"], .verse[data-role="sorotha"] { background: color-mix(in srgb, var(--gold) 6%, transparent) }
.verse[data-role="doha"] .vtext p, .verse[data-role="sorotha"] .vtext p { font-weight: 700 }

/* aarti refrain */
.verse[data-role="refrain"] {
  background: color-mix(in srgb, var(--saffron) 8%, transparent);
  border-inline-start: 3px solid var(--saffron); border-bottom: 0;
  padding-inline-start: .6rem; margin: .4rem 0; border-radius: 0 6px 6px 0;
}
.verse.is-echo { opacity: .72; font-size: .95em }
.verse.is-echo .vtext p:not(:first-child) { display: none }
.verse.is-echo .vtext p:first-child::after { content: ' \2026' ; color: var(--ink-soft) }

.verse[data-verified="false"] { border-inline-start: 3px solid var(--gold); padding-inline-start: .55rem }
.verse-flag { font-size: .72em; color: var(--gold); margin: .2rem 0 0 }