.pane-body { font-family: var( --font-read ); font-size: var( --fs-read ); line-height: var( --lh-read ); color: var( --ink ); max-width: min( 720px, 100% ); margin: 0 auto; }
@media ( min-width: 960px ) {
	.panes[data-split="false"] .pane-body { font-size: var( --fs-read-lg ); }
}

.chapter { margin-bottom: 2.5rem; /* content-visibility: auto; contain-intrinsic-size: auto 900px;*/ }
.chapter-heading { font-family: var( --font-ui ); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var( --ink-muted ); margin: 0 0 1rem; padding-top: 1rem; /*border-top: 1px solid var( --border );*/ }
.chapter:first-child .chapter-heading { border-top: 0; padding-top: 0; }
.verse { display: inline; transition: background-color 200ms ease, box-shadow 200ms ease; border-radius: 3px; }
.verse[data-unit-id] { cursor: pointer; }
.verse[data-unit-id]:hover { background: var( --unit ); }
.verse.unit-active { background: var( --unit-active ); }
.verse.parallel-hover { background: var( --accent-soft ); box-shadow: 0 0 0 2px var( --accent-soft ); }
.verse.ref-hover-primary,
.unit-sentence.ref-hover-primary { background: var( --accent-soft ); box-shadow: 0 0 0 2px var( --accent-soft ); border-radius: 3px; }
.verse.ref-hover-context { background: var( --unit ); border-radius: 3px; }
.verse-num { font-family: var( --font-ui ); font-size: 0.6875rem; font-weight: 600; color: var( --verse-num ); vertical-align: super; margin-right: 3px; user-select: none; }
.verse-bm { display: inline-block; vertical-align: super; width: 10px; height: 10px; margin-right: 3px; color: var( --accent ); opacity: .85; }
.verse-bm svg { display: block; width: 100%; height: 100%; }
.unit-heading-bm { display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 6px; color: var( --accent ); opacity: .9; }
.unit-heading-bm svg { display: block; width: 100%; height: 100%; }
.w { cursor: pointer; border-radius: 2px; }
.w:hover { background: var( --unit ); }

.w.w-dict { text-decoration: underline dotted currentColor 1px; text-underline-offset: 2px; cursor: help; }
.w.w-dict:hover { background: var( --accent-soft ); text-decoration-style: solid; }
.w.w-red,
.red-run { color: var( --red-letter ); }
.w.w-red.w-dict { text-decoration-color: var( --red-letter ); }
.indent1-run,
.indent2-run { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.indent1-run { padding-left: 2em; }
.indent2-run { padding-left: 4em; }
.w.w-poetry { font-style: italic; }
.section-title { font-family: var( --font-ui ); font-size: .95rem; font-weight: 600; color: var( --ink ); margin: 1.4rem 0 .6rem; letter-spacing: .01em; }
.chapter-text + .section-title,
.chapter-poetry + .section-title { margin-top: 1.2rem; }
.chapter-text { margin: 0 0 0.9rem; }
.chapter-text:last-child { margin-bottom: 0; } 
.chapter-poetry { margin: 0 0 .9rem 0; padding-left: 2rem; white-space: pre-line; border-left: 0; font-style: normal; quotes: none; }
.chapter-poetry:last-child { margin-bottom: 0; }
.chapter-poetry:before,
.chapter-poetry:after { content: none; }

.harmony-view .unit { margin-bottom: 2.5rem; scroll-margin-top: 1rem; /*content-visibility: auto; contain-intrinsic-size: auto 320px; */ }
.harmony-view .unit-heading { font-family: var( --font-ui ); font-size: 1.0625rem; font-weight: 600; color: var( --ink ); margin: 0 0 .5rem; cursor: pointer; padding: 2px 6px; margin-left: -6px; border-radius: 4px; transition: background-color 120ms; display: inline-block; }
.harmony-view .unit-heading:hover { background: var( --unit ); }
.harmony-view .unit-sources { font-family: var( --font-ui ); font-size: .75rem; color: var( --ink-muted ); margin: 0 0 0.75rem; letter-spacing: .01em; }
.harmony-view .unit-sources a { color: var( --link ); text-decoration: none; margin-right: 8px; cursor: pointer; }
.harmony-view .unit-sources a:hover { text-decoration: underline; }
.harmony-view .unit-text { margin: 0; }

.harmony-view .unit-sentence { cursor: pointer; border-radius: 2px; transition: background-color: 100ms; }
.harmony-view .unit-sentence:hover { background: var( --unit ); }
.harmony-view .unit-text .w { border-radius: 2px; }
.harmony-view .unit-sentence .w:hover { background: var( --accent-soft ); }

.loading,
.empty-state { color: var( --ink-muted ); font-family: var( --font-ui ); font-size: 0.9375rem; padding: 2rem 0; text-align: center; }
.empty-state code { background: var( --bg-sunken ); padding: 2px 6px; border-radius: 4px; font-size: 0.875rem; }