/* Reader-only presentation. Existing Verses rules remain the baseline. */
.reader-main { min-width: 0; }
.reader-mode-toolbar { display: flex; justify-content: flex-end; position: sticky; top: 8px; z-index: 5; margin-bottom: 8px; gap: 0; pointer-events: none; }
.reader-mode-toolbar button { pointer-events: auto; padding: 7px 14px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .85rem; }
.reader-mode-toolbar button:first-child { border-radius: 7px 0 0 7px; }
.reader-mode-toolbar button:last-child { border-radius: 0 7px 7px 0; }
.reader-mode-toolbar button[aria-pressed="true"] { color: var(--accent-primary); background: var(--bg-hover); }
.reader-mode-toolbar button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.passage-actions { user-select: none; }
#passage-content { --reader-progress: 0; }
html[data-reader-mode="read"] #passage-content { --reader-progress: 1; }
#passage-content .passage-item { margin-bottom: calc(16px - 16px * var(--reader-progress)); padding-bottom: calc(16px - 16px * var(--reader-progress)); border-bottom-color: color-mix(in srgb, var(--border-color) calc(100% - 100% * var(--reader-progress)), transparent); }
#passage-content .passage-item:last-child { margin-bottom: 0; padding-bottom: 0; }
#passage-content .passage-header { height: calc(28px - 10px * var(--reader-progress)); margin-bottom: calc(8px - 8px * var(--reader-progress)); }
#passage-content .passage-marker { font-weight: calc(600 - 200 * var(--reader-progress)); font-size: calc(.9rem - .2rem * var(--reader-progress)); opacity: calc(1 - .35 * var(--reader-progress)); }
#passage-content .passage-actions { opacity: calc(1 - var(--reader-progress)); }
html[data-reader-layout="read"] #passage-content .passage-actions { display: none; }
html[data-reader-layout="read"] #passage-content .reader-prose .passage-header { display: inline; height: auto; margin: 0; }
html[data-reader-layout="read"] #passage-content .passage-marker { display: inline; vertical-align: baseline; margin-right: .45em; }
/* Keep the transparent divider thickness so finishing never changes layout height. */
html[data-reader-layout="read"] #passage-content .reader-prose { display: inline; }
html[data-reader-layout="read"] #passage-content .reader-prose > .passage-text { display: inline; white-space: normal; }
html[data-reader-layout="read"] #passage-content .reader-prose::after { content: ' '; white-space: pre-wrap; }
#passage-content .reader-structured { margin-top: 0; margin-bottom: calc(16px - 8px * var(--reader-progress)); }
#passage-content .reader-structured:last-child { margin-bottom: 0; }
/* Structured bodies retain their existing paragraph/line layout at both endpoints. */
html[data-reader-layout="read"] #passage-content .source-interstitial { border-color: transparent; }
html.reader-anchoring { scroll-behavior: auto !important; overflow-anchor: none; }
html.reader-anchoring body, html.reader-anchoring #passage-content { overflow-anchor: none; }
/* Only masks the discrete inline reflow; the main motion is real layout contraction. */
html.reader-reflow::view-transition-group(root) { animation-duration: 120ms; animation-timing-function: ease-out; }
html.reader-reflow::view-transition-old(root), html.reader-reflow::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
    html.reader-reflow::view-transition-group(root), html.reader-reflow::view-transition-old(root), html.reader-reflow::view-transition-new(root) { animation-duration: 0s; }
}