/* A scripture with annotations: serif verses on paper, sans-serif commentary
   on an inset reading surface. All measurements around controls stay fixed. */
:root {
  --paper: oklch(0.952 0.008 92);
  --surface: oklch(0.988 0.005 92);
  --ink: oklch(0.25 0.05 264);
  --ink-soft: oklch(0.47 0.035 262);
  --muted: var(--ink-soft);
  --line: oklch(0.25 0.05 264 / 13%);
  --accent: oklch(0.34 0.085 263);
  --note-surface: oklch(0.925 0.008 92);
  --toolbar-bg: var(--paper);
  --content: 54rem;
}
html.dark {
  --paper: oklch(0.19 0.012 258);
  --surface: oklch(0.225 0.012 258);
  --ink: oklch(0.9 0.012 80);
  --ink-soft: oklch(0.72 0.018 258);
  --muted: var(--ink-soft);
  --line: oklch(0.9 0.012 80 / 9%);
  --accent: oklch(0.78 0.12 85);
  --note-surface: oklch(0.275 0.014 258);
  --toolbar-bg: var(--paper);
}
body { letter-spacing: 0; }
.head-inner { width: min(100%, 84rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1.5rem; }
.page-head h1 { font-size: 1.25rem; white-space: nowrap; letter-spacing: 0; text-indent: 0; }
.head-inner::after { display: none; }
.toolbar-wrap { backdrop-filter: none; }
.toolbar { padding: 0.75rem 1.5rem; gap: 0.5rem; }
.pill { min-height: 2.75rem; border-radius: 0.375rem; font-size: 0.875rem; padding: 0.5rem 0.75rem; letter-spacing: 0; transition: none; }
.toggle-state { margin-inline-start: 0.375rem; }
main { overflow-anchor: none; width: min(100%, 48rem); padding: 1.5rem 1.5rem 4rem; }
.sutra-shell { padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sutra { font-size: calc(1.375rem * var(--reading-scale, 1)); line-height: 1.85; overflow-wrap: break-word; }
.sutra-line.title { margin: 0; text-align: left; font-size: 1rem; line-height: 1.8; letter-spacing: 0; font-weight: 500; }
.sutra-line.credit { text-align: left; margin: 0.5rem 0 0; font: 0.875rem/1.6 var(--sans); letter-spacing: 0; }
.source-credit { font: 0.875rem/1.7 var(--sans); color: var(--ink-soft); text-align: center; }
.sutra-line.credit:last-of-type { margin-bottom: 0; }
.reading-preface { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 0.75rem; }
.introduction { margin: 0; }
.introduction[open] { flex-basis: 100%; }
.introduction > summary { padding: 0.75rem 0; min-height: 2.75rem; cursor: pointer; font: 0.875rem/1.5 var(--sans); color: var(--ink-soft); }
.verse-group { margin: 0; padding: 1.5rem 0; }
.verse-group.starts-branch { border-top: 1px solid var(--line); }
.verse-outline { padding-inline: 1.5rem; margin: 0 0 1rem; font: 0.8125rem/1.65 var(--sans); overflow-wrap: break-word; }
.outline-path:empty { display: none; }
.outline-path { display: block; color: var(--ink-soft); margin-bottom: 0.375rem; }
.verse-outline strong { display: block; font-size: 0.9375rem; line-height: 1.5; font-weight: 600; color: var(--ink); }
.ke-pan-hidden .verse-outline { display: none; }
.commentary { border: 1px solid transparent; border-radius: 0.5rem; }
.commentary[open] { border-color: var(--line); background: var(--surface); }
.commentary + .commentary { margin-top: 1rem; }
.commentary > summary { display: block; list-style: none; padding: 1.25rem 1.5rem 1.5rem; cursor: pointer; border-radius: 0.5rem; scroll-margin-block: 5.5rem 1rem; }
.commentary > summary::-webkit-details-marker { display: none; }
.commentary > summary:hover { background: var(--surface); }
.commentary[open] > summary { border-radius: 0.5rem 0.5rem 0 0; }
.verse-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font: 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.verse-reference { display: inline-flex; gap: 0.375rem; align-items: baseline; flex: 0 0 auto; white-space: nowrap; }
.verse-range { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.verse { display: block; margin: 0; scroll-margin-top: 6rem; }
.verse + .verse { margin-top: 1em; }
.verse-body, .verse-line { display: block; }
.verse-line .phrase { display: inline-block; max-width: 100%; }
.commentary-body { padding: 1.5rem; border-top: 1px solid var(--line); border-radius: 0 0 0.5rem 0.5rem; background: var(--note-surface); color: var(--ink); font-family: var(--sans); font-size: calc(1.0625rem * var(--reading-scale, 1)); line-height: 1.85; text-align: left; overflow-wrap: break-word; }
.commentary-heading { margin: 0 0 1rem; font: 600 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.commentary-content { max-width: 36em; }
.commentary-body p { margin: 0 0 1em; }
.commentary-body p:last-child { margin-bottom: 0; }
.commentary-context { color: var(--ink-soft); margin-bottom: 1.25em; }
.commentary-point { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.625em; }
.point-number { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.commentary-close { display: block; min-height: 2.75rem; margin: 1.25rem 0 0 auto; padding: 0.5rem 0; border: 0; background: none; color: var(--ink-soft); font: 0.8125rem/1.5 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }
.commentary-close:hover { color: var(--ink); }
.commentary summary:focus-visible, .commentary-close:focus-visible, .introduction summary:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }
.source-credit { margin-top: 2rem; }
.source-credit a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.source-credit a:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }
@media (max-width: 680px) {
  .head-inner { padding: 0.5rem 1rem; }
  .page-head h1 { font-size: 1.125rem; }
  .toolbar { padding: 0.75rem 1rem; }
  main { padding: 1.25rem 1rem 3rem; }
  .sutra { font-size: calc(1.125rem * var(--reading-scale, 1)); }
  .verse-group { padding-block: 1.5rem; }
  .verse-outline { padding-inline: 1rem; }
  .commentary > summary { padding: 1rem; }
  .commentary-body { padding: 1.25rem 1rem; font-size: calc(1rem * var(--reading-scale, 1)); }
  .verse-meta { gap: 0.5rem; }
}
@media print {
  .toolbar-wrap, .commentary-close { display: none; }
  .commentary { break-inside: avoid; }
}

/* Both verse arrangements share the same compact spacing. */
.layout-switch { display: inline-flex; align-items: center; padding: 0.1875rem; gap: 0.125rem; border: 1px solid var(--line); border-radius: 0.375rem; font: 0.875rem/1.5 var(--sans); }
.layout-switch button { min-height: 2.375rem; padding: 0.375rem 0.75rem; border: 0; border-radius: 0.25rem; background: none; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.layout-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.layout-switch button:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 1px; }
html[data-layout] main { padding-top: 1.5rem; }
html[data-layout] .verse-group { padding-block: 0.375rem; }
html[data-layout] .verse-group.starts-branch { margin-top: 0.75rem; padding-top: 0.75rem; }
html[data-layout] .verse-outline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-inline: 3.5rem 0.75rem; margin-bottom: 0; }
html[data-layout] .outline-path { margin: 0; }
html[data-layout] .commentary + .commentary { margin-top: 0.25rem; }
html[data-layout] .commentary > summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem; }
html[data-layout] .verse-meta { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; margin: 0; padding-top: 0.25rem; }
html[data-layout] .verse { grid-column: 2; font-size: calc(1.25rem * var(--reading-scale, 1)); line-height: 1.7; }
html[data-layout] .verse + .verse { margin-top: 0.25em; }
@media (max-width: 680px) {
  html[data-layout] .verse-outline { padding-inline: 0.75rem; }
  html[data-layout] .commentary > summary { display: block; padding: 0.5rem 0.75rem; }
  html[data-layout] .verse-meta { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0; margin-bottom: 0.25rem; }
  html[data-layout] .verse { font-size: calc(1rem * var(--reading-scale, 1)); line-height: 1.75; }
}

html.ke-pan-hidden[data-layout] .verse-outline { display: none; }

/* Reading controls appear only when requested. */
.reading-settings { position: relative; font-family: var(--sans); text-align: left; }
.reading-settings > summary { width: fit-content; margin-left: auto; padding: 0.75rem 0; min-height: 2.75rem; list-style: none; font: 0.875rem/1.5 var(--sans); color: var(--ink-soft); cursor: pointer; }
.reading-settings > summary::-webkit-details-marker { display: none; }
.reading-settings > summary:hover { color: var(--ink); }
.reading-settings > summary:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
.reading-settings .toolbar { position: absolute; top: calc(100% + 0.5rem); right: 0; width: max-content; max-width: calc(100vw - 3rem); padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--note-surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.commentary-pane[hidden] { display: none; }
.commentary-pane { position: sticky; top: 5rem; align-self: start; display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 7rem); background: var(--note-surface); border: 0; border-radius: 0.375rem; overflow: hidden; }
.pane-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.pane-eyebrow { font: 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.pane-title { margin: 0.375rem 0 0; font: 600 0.9375rem/1.65 var(--sans); overflow-wrap: anywhere; }
.pane-close { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; margin: -0.5rem -0.75rem 0 0; border: 0; border-radius: 0.375rem; font: 1.25rem/1 var(--sans); background: none; color: var(--ink-soft); cursor: pointer; }
.pane-close[hidden] { display: none; }
.pane-close:hover { background: var(--surface); color: var(--ink); }
.pane-close:focus-visible, .pane-scroll:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: -3px; }
.pane-scroll { min-height: 0; overflow-y: auto; padding: 1rem; scrollbar-gutter: stable; font: calc(1.0625rem * var(--reading-scale, 1))/1.75 var(--sans); overflow-wrap: anywhere; }
.pane-verse { margin: 0 0 0.75rem; padding: 0 0 0.75rem; border-bottom: 1px solid var(--line); font: calc(1rem * var(--reading-scale, 1))/1.75 var(--serif); }
.pane-verse .verse-body + .verse-body { margin-top: 0.75em; }
.pane-content p { margin: 0 0 1em; }
.pane-content p:last-child { margin-bottom: 0; }
.commentary-active main { width: min(100%, 92rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: 1rem; align-items: start; }
.commentary-active .sutra-shell { min-width: 0; grid-column: 1; grid-row: 1; }
.commentary-active .commentary-pane { grid-column: 2; grid-row: 1 / span 2; }
.commentary-active .source-credit { grid-column: 1; }
.has-commentary-pane .commentary > .commentary-body { display: none; }
.has-commentary-pane .commentary.is-selected { background: var(--note-surface); border-color: var(--line); }
.has-commentary-pane .commentary.is-selected > summary { background: none; border-radius: 0.5rem; }
@media print {
  .commentary-pane { display: none; }
  .commentary-active main { display: block; }
  .has-commentary-pane .commentary[open] > .commentary-body { display: block; }
}

.introduction > .sutra-line.title { padding: 0.5rem 0 1rem; }
@media (min-width: 1100px) {
  /* Size the verse column to its text, including the outline and number gutter.
     A two-line verse must not inherit the empty width of a single-line verse. */
  html[data-layout] main {
    --outline-width: 10rem;
    --verse-measure: calc(37.125rem * var(--reading-scale, 1));
    --verse-column: calc(var(--outline-width) + 4.625rem + var(--verse-measure));
    width: min(100%, calc(var(--verse-column) + 3rem));
    padding-top: 0.5rem;
  }
  html[data-layout="double"] main, html[data-layout] main.verse-wraps { --verse-measure: calc(18rem * var(--reading-scale, 1)); }
  html.ke-pan-hidden[data-layout] main { --outline-width: 0rem; }
  html.commentary-active[data-layout] main { width: min(100%, calc(var(--verse-column) + 32rem)); }
  html[data-layout] .verse-group { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 1rem; padding-block: 0.125rem; }
  html[data-layout] .verse-group.starts-branch { margin-top: 0.375rem; padding-top: 0.375rem; }
  html[data-layout] .verse-outline { display: block; grid-column: 1; grid-row: 1 / span 8; align-self: start; margin: 0; padding: 0.5rem 0; }
  html[data-layout] .verse-outline strong { font-size: 0.8125rem; line-height: 1.6; }
  html[data-layout] .outline-path { font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.25rem; }
  html[data-layout] .outline-path:empty { display: none; }
  html[data-layout] .commentary { grid-column: 2; min-width: 0; }
  html[data-layout] .commentary + .commentary { margin-top: 0; }
  html[data-layout] .commentary > summary { padding-block: 0.375rem; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.5rem; }
  html[data-layout] .verse { font-size: calc(1.125rem * var(--reading-scale, 1)); line-height: 1.7; }
  html[data-layout] .sutra .verse-line { display: inline-block; max-width: 100%; margin-inline-end: 0.5em; }
  html[data-layout="double"] .sutra .verse-line, html[data-layout] main.verse-wraps .sutra .verse-line { display: block; margin-inline-end: 0; }
  html.ke-pan-hidden[data-layout] .verse-group { grid-template-columns: minmax(0, 1fr); }
  html.ke-pan-hidden[data-layout] .commentary { grid-column: 1; }
}

/* Actual nested sections keep shared 科判 ancestors together. Tree guides stay
   in the outline gutter; verse text keeps one consistent reading edge. */
[data-outline-depth="0"] { --outline-inset: 0rem; }
[data-outline-depth="1"] { --outline-inset: 0.5rem; }
[data-outline-depth="2"] { --outline-inset: 1rem; }
[data-outline-depth="3"] { --outline-inset: 1.5rem; }
[data-outline-depth="4"] { --outline-inset: 2rem; }
.outline-branch { position: relative; margin: 0.375rem 0; }
.outline-branch::before { content: ""; position: absolute; inset-inline-start: calc(var(--outline-inset) + 0.125rem); top: 2rem; bottom: 0.25rem; border-inline-start: 1px solid var(--line); pointer-events: none; }
.outline-heading { margin: 0; padding: 0.375rem 0 0.375rem calc(var(--outline-inset) + 0.5rem); font: 600 0.875rem/1.6 var(--sans); color: var(--ink); }
.outline-branch[data-outline-depth="0"] { margin-top: 1.25rem; }
.outline-branch[data-outline-depth="0"] > .outline-heading { font-size: 1rem; }
html[data-layout] .verse-outline { padding-inline-start: calc(var(--outline-inset) + 0.5rem); }
.ke-pan-hidden .outline-heading, .ke-pan-hidden .outline-branch::before { display: none; }
.ke-pan-hidden .outline-branch { margin: 0; }
@media (max-width: 1099px) {
  /* On small screens the hierarchy is conveyed by headings and indentation;
     full-height tree lines would run through the inline commentary. */
  .outline-branch::before { display: none; }
}

/* Prepared summaries stay visibly separate from the collected commentary. */
.library-synthesis { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--sans); }
.library-synthesis-heading { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; font: 600 0.9375rem/1.6 var(--sans); }
.library-synthesis-label { font: 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.library-synthesis-point { margin: 1rem 0 0.5rem; }
.library-synthesis-empty { color: var(--ink-soft); }
.library-evidence { font-size: 0.875em; margin: 0.375rem 0; }
.library-evidence > summary { cursor: pointer; padding-block: 0.375rem; color: var(--ink-soft); }
.library-evidence blockquote { margin: 0.5rem 0; padding: 0.75rem; background: var(--surface); border-radius: 0.375rem; }
.library-source-button { padding: 0.5rem 0; min-height: 2.75rem; background: none; border: 0; font: 0.875rem/1.5 var(--sans); color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.library-source-button:disabled { cursor: wait; }
.library-source-text { white-space: pre-wrap; max-height: 28rem; overflow-y: auto; overflow-wrap: anywhere; margin-block: 0.75rem; }
.library-evidence summary:focus-visible, .library-source-button:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }

/* Quiet paragraph citations lead to one consolidated source list. */
.library-citations { white-space: nowrap; margin-left: 0.2em; }
.library-citation { display: inline; min-width: 1.4em; padding: 0.2em 0.35em; border: 0; border-radius: 0.2em; color: var(--ink-soft); background: transparent; font: 0.6875em/1 var(--sans); vertical-align: super; cursor: pointer; }
.library-citation:hover, .library-citation:focus-visible { color: var(--ink); background: var(--surface); outline: 1px solid var(--line); }
.library-references { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.library-references-heading { margin: 0 0 0.25rem; color: var(--ink-soft); font: 400 0.75rem/1.5 var(--sans); }
.library-evidence > summary { display: flex; align-items: baseline; gap: 0.625rem; list-style: none; }
.library-evidence > summary::-webkit-details-marker { display: none; }
.library-evidence > summary:hover { color: var(--ink); }
.library-evidence > summary:focus-visible { outline: 1px solid var(--ink-soft); outline-offset: 2px; }
.library-source-number { flex: 0 0 1em; font-size: 0.8em; font-variant-numeric: tabular-nums; }

/* A phone has one useful verse arrangement. Keep the reading edge fixed,
   and fold subordinate 科判 into the leaf row instead of nesting indents. */
.mobile-outline-path { display: none; }
@media (max-width: 1099px) {
  .layout-switch { display: none; }
  html[data-layout] main { padding-top: 0.75rem; }
  .outline-branch { margin: 0; }
  .outline-branch[data-outline-depth="0"] { margin: 1rem 0 0; }
  .outline-branch[data-outline-depth="0"] > .outline-heading {
    padding: 0 0 0.5rem; margin-bottom: 0.375rem;
    border-bottom: 1px solid var(--line);
  }
  .outline-branch:not([data-outline-depth="0"]) > .outline-heading,
  html[data-layout] .verse-meta {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html[data-layout] .verse-group { padding: 0.25rem 0 0.625rem; }
  html[data-layout] .verse-outline {
    display: flex; align-items: baseline; gap: 0.125rem 0.375rem;
    width: fit-content; max-width: calc(100% + 1rem);
    padding: 0.1875rem 0.5rem; margin: 0.125rem -0.5rem 0.125rem;
    border-radius: 0.25rem; background: var(--note-surface);
    font: 0.8125rem/1.5 var(--sans);
  }
  .mobile-outline-path { display: inline; color: var(--ink-soft); }
  html[data-layout] .verse-outline strong { display: inline; font: 600 0.8125rem/1.5 var(--sans); }
  html[data-layout] .commentary { margin-inline: -0.75rem; border: 0; }
  html[data-layout] .commentary > summary { display: block; padding: 0.375rem 0.75rem; }
  html[data-layout] .commentary[open] { background: none; }
  html[data-layout] .commentary[open] > summary { background: var(--paper); }
  html[data-layout] .commentary > .commentary-body {
    margin-block: 0.25rem 0.5rem; padding: 0.875rem 0.75rem 1rem;
    border: 1px solid var(--line); border-radius: 0.375rem;
    font-size: calc(1rem * var(--reading-scale, 1)); line-height: 1.8;
  }
  .commentary-heading {
    margin-bottom: 0.625rem; color: var(--ink);
    font-weight: 600; font-size: 0.8125rem;
  }
  html[data-layout] .commentary + .commentary { margin-top: 0.25rem; }
  .commentary-body { padding: 1rem 0.75rem; }
  .reading-settings .toolbar { max-width: calc(100vw - 2rem); }
  html.ke-pan-hidden[data-layout] .verse-outline { display: none; }
  .ke-pan-hidden .outline-branch[data-outline-depth="0"] { margin: 0; }
}
@media (max-width: 680px) {
  html[data-layout] .verse { font-size: calc(1.125rem * var(--reading-scale, 1)); line-height: 1.75; }
}