:root { --ui-font: system-ui, sans-serif; --title-font: Georgia, serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--reader-ink); background: var(--reader-surface); font: 15px/1.5 var(--ui-font); color-scheme: light; }
body.dark-mode { color-scheme: dark; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: var(--reader-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--reader-accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#main-content { height: 100dvh; display: flex; flex-direction: column; width: 100%; }
.outline-header { padding: 20px clamp(16px, 3vw, 40px) 14px; border-bottom: 1px solid var(--reader-line); }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.heading-row a { font-weight: 700; text-decoration: none; }
.outline-header button, .outline-actions button { min-height: 44px; border: 1px solid var(--reader-line); border-radius: 8px; padding: 8px 12px; color: var(--reader-accent); background: transparent; }
.outline-header button:hover, .outline-actions button:hover { background: var(--reader-tint); }
#themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
/* Match the homepage/quiz icon transition, centered on this SVG's viewBox. */
.theme-sun, .theme-moon {
  opacity: 0;
  transform: scale(.72) rotate(-18deg);
  transform-origin: center;
  transform-box: view-box;
  transition: opacity 180ms ease, transform 180ms ease;
}
body:not(.dark-mode) .theme-moon, .dark-mode .theme-sun { opacity: 1; transform: scale(1) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .theme-sun, .theme-moon { transition: none; }
}
.eyebrow { color: var(--reader-accent); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 20px 0 6px; }
h1 { font: 500 clamp(26px, 3vw, 38px)/1.15 var(--title-font); margin: 0; }
.outline-header p:not(.eyebrow) { color: var(--reader-muted); margin: 10px 0 16px; }
.outline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#selectionPath { padding: 6px clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--reader-line); font-size: 12px; color: var(--reader-muted); max-height: 20dvh; overflow: auto; flex-shrink: 0; }
#selectionPath button { background: transparent; color: var(--reader-accent); border: 0; text-decoration: underline; min-height: 44px; padding: 4px 8px; }
#outlineScroll { flex: 1; overflow: auto; min-height: 0; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; padding: 16px clamp(10px, 2vw, 28px) 40px; }
.outline-list, .outline-list ul { list-style: none; padding: 0; margin: 0; }
.outline-list { max-width: 1000px; margin-inline: auto; }
.outline-list ul { display: flow-root; margin-left: 22px; padding-left: 10px; border-left: 1px solid var(--reader-line); }
.node-row { position: relative; display: flex; align-items: flex-start; gap: 4px; border-radius: 8px; margin-block: 3px; }
.node-row:hover { background: var(--reader-tint); }
.node-row.selected, .node-row.selected:hover { background: color-mix(in srgb, var(--reader-accent) 16%, var(--reader-surface)); }
/* Paint the selected marker above hovered child buttons, not behind them. */
.node-row.selected::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 3px 0 var(--reader-accent); pointer-events: none; }
.node-chevron, .node-spacer { width: 44px; min-width: 44px; height: calc(22px + 1.5em); min-height: 44px; }
.node-chevron { display: flex; align-items: center; justify-content: center; color: var(--reader-accent); }
.chevron { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; transform-box: view-box; }
.node-select { color: inherit; text-align: left; background: none; border: 0; border-radius: 6px; min-height: 44px; flex: 1; min-width: 0; padding: 11px 10px 11px 2px; overflow-wrap: anywhere; }
.node-about, .node-source { margin: 0 10px 8px 50px; overflow-wrap: anywhere; }
.node-about { font-size: 13px; }
.node-fact-note { display: block; margin-top: 8px; font-size: 13px; color: var(--reader-muted); overflow-wrap: anywhere; }
.node-fact-note strong { color: var(--reader-accent); }
.node-about > summary { min-height: 44px; padding-block: 10px; color: var(--reader-accent); cursor: pointer; }
.node-about > div { padding: 0 10px 10px; border-left: 2px solid var(--reader-line); }
.node-about ul { list-style: disc; margin-left: 0; padding-left: 24px; border: 0; }
.node-source { min-height: 44px; padding: 8px 12px; border: 1px solid var(--reader-line); border-radius: 8px; color: var(--reader-accent); background: transparent; text-align: left; }
.node-name { font-weight: 650; display: block; }
.node-subtitle { display: block; color: var(--reader-muted); font-size: 13px; margin-top: 3px; }
.node-badge { display: inline-block; border: 1px solid var(--reader-accent); border-radius: 4px; padding: 0 5px; margin: 0; font-size: 11px; color: var(--reader-accent); vertical-align: middle; white-space: nowrap; }
.reference-path { color: var(--reader-muted); font-size: 12px; overflow-wrap: anywhere; }
.leaf-date, .leaf-kicker { color: var(--reader-muted); margin-block: 8px; }
.leaf-indicator { border-left: 2px solid var(--reader-line); margin-block: 8px; padding-left: 12px; }
.leaf-links a { display: block; min-height: 44px; padding-block: 10px; }
/* The shell owns split/fullscreen layout; this adapter keeps explanation and
   passage reachable even with long titles, large text, or short windows. */
#sourceReader { overflow-y: auto; }
#sourceReader > :not(#readerFrameHost) { flex-shrink: 0; }
#readerFrameHost.reader-native { flex: 1 0 220px; }
#readerFrameHost:not(.reader-native) { flex: 1 0 300px; }
#readerAboutContent { height: var(--explanation-height, 24dvh); max-height: none; }
.passage-layout-tools { display: flex; justify-content: flex-end; padding: 4px 16px; border-block: 1px solid var(--reader-line); }
.passage-controls #passageMaximize { margin-left: auto; }
/* Overlay the border with a wider hit area, like the outline/reader divider. */
#passageDivider { position: relative; z-index: 2; height: 10px; margin-block: -5px; cursor: row-resize; touch-action: none; display: flex; align-items: center; justify-content: center; background: transparent; }
#passageDivider::after { content: ''; width: 48px; height: 3px; border-radius: 3px; background: var(--reader-line); }
#passageDivider:hover::after, #passageDivider:focus-visible::after { background: var(--reader-accent); }
.passage-resizing { cursor: row-resize; user-select: none; }
.passage-resizing #readerFrameHost { pointer-events: none; }
#sourceReader.passage-maximized #readerAbout,
#sourceReader.passage-maximized .reader-eyebrow,
#sourceReader.passage-maximized #readerContext,
#sourceReader.passage-maximized #readerOrigin { display: none; }
#sourceReader.passage-maximized .reader-heading { padding: 8px 16px; }
#sourceReader.passage-maximized #readerTitle { font-size: 17px; }
#sourceReader.passage-maximized .reader-origin-row { margin-top: 0; }
#readerContext { display: block; overflow-wrap: anywhere; }
/* Give desktop explanations more readable type without enlarging phone panels. */
@media (min-width: 600px) and (pointer: fine), (min-width: 1200px) {
  #readerContext, #readerOrigin, #readerAboutContent { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 599px) {
  .outline-header { padding: 10px 16px; }
  .eyebrow { margin-top: 12px; }
  .outline-header p:not(.eyebrow) { margin-bottom: 10px; font-size: 13px; }
  .outline-list ul { margin-left: 5px; padding-left: 5px; }
  .node-subtitle { font-size: 12px; }
  #readerContext { grid-column: 1 / -1; font-size: 12px; margin: 4px 0; }
  #readerChoose { grid-column: 1 / -1; }
  #readerAbout { padding-inline: 12px; }
}
@media (max-height: 600px) {
  .outline-header .eyebrow, .outline-header > p:not(.eyebrow) { display: none; }
  .outline-header { padding-block: 6px; }
  h1 { font-size: 24px; margin-bottom: 6px; }
}

/* Compact controls retain full-size touch targets and spoken action labels. */
.outline-actions .outline-icon, #sourceReader #passageMaximize {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0;
}
.outline-icon svg, #passageMaximize svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#passageMaximize .restore-icon { display: none; }
.passage-maximized #passageMaximize .maximize-icon { display: none; }
.passage-maximized #passageMaximize .restore-icon { display: initial; }
.passage-context-short { display: none; }
#sourceReader .compact-controls { gap: 4px 12px; padding: 4px 12px; }
@media (max-width: 599px) {
  #sourceReader .compact-controls {
    display: flex; flex-wrap: wrap; gap: 4px 8px;
  }
  #sourceReader .compact-controls.has-translation { justify-content: flex-start; }
  .compact-controls label { min-width: 0; gap: 4px; }
  .compact-controls select { width: auto; min-width: 0; max-width: 100%; padding-inline: 6px; }
  .compact-controls .passage-control-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .passage-context-short { display: inline; }
  .passage-context-toggle input { flex-shrink: 0; margin-inline: 0; }
  #sourceReader :is(#historicalJump, #passageJump) { font-size: 12px; padding: 4px 8px; min-height: 44px; }
}

/* On phones the introduction scrolls with the outline; only actions stay put. */
@media (max-width: 599px) {
  #outlineScroll { padding: 0; scroll-padding-top: 44px; }
  #outlineScroll > nav[aria-label="Evidence outline"] { padding: 16px 10px 40px; }
  #outlineScroll > .outline-header { border-bottom: 0; }
  #outlineScroll > .outline-actions {
    position: sticky; top: 0; z-index: 3; height: 44px; padding-inline: 16px;
    flex-wrap: nowrap; background: var(--reader-surface);
    box-shadow: 0 1px var(--reader-line);
  }
  #outlineScroll > .outline-actions #themeToggle { margin-left: auto; border: 0; }
  #outlineScroll > #selectionPath { max-height: none; overflow: visible; }
}

.node-info {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--reader-accent);
}
.node-info:hover { background: var(--reader-tint); }
.node-info svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#outlineInfo {
  position: fixed; z-index: 7000; margin: 0; width: min(420px, calc(100vw - 24px));
  max-width: none; max-height: min(560px, calc(100dvh - 24px)); padding: 0;
  border: 1px solid var(--reader-line); border-radius: 12px;
  color: var(--reader-ink); background: var(--reader-surface);
  box-shadow: 0 12px 40px #0004; overflow: hidden;
}
#outlineInfo[open] { display: flex; flex-direction: column; }
.info-heading { display: flex; gap: 8px; align-items: center; padding: 0 8px 8px; border-bottom: 1px solid var(--reader-line); flex-shrink: 0; }
.info-title-heading { flex: 1; min-width: 0; margin: 0; }
#outlineInfoTitle { flex: 1; color: var(--reader-ink); text-align: left; min-width: 0; font-size: 18px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
#outlineInfoClose { flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--reader-accent); background: transparent; font-size: 26px; }
#outlineInfoClose:hover { background: var(--reader-tint); }
#outlineInfoContent { overflow: auto; overscroll-behavior: contain; padding: 16px; overflow-wrap: anywhere; }
#outlineInfoContent > :first-child, #outlineInfoContent > .leaf-details:first-child > :first-child { margin-top: 0; }
#outlineInfoContent summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
#outlineInfo::backdrop { background: #0007; }
@media (max-width: 1199px) {
  #outlineInfo {
    inset: auto 0 0 !important; width: 100%; max-height: 88dvh;
    border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Selection opens context; the separate chevron controls hierarchy only. */
.node-row > .node-chevron { padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.node-row > .node-chevron:hover { background: var(--reader-tint); }
.node-toggle[aria-expanded="true"] > .chevron { transform: rotate(90deg); }
.info-sources { border-top: 1px solid var(--reader-line); margin-top: 16px; padding-top: 8px; }
.info-sources h3 { font-size: 13px; color: var(--reader-muted); margin: 8px 0; }
.info-sources a { display: block; min-height: 44px; padding-block: 10px; }
#sourceReader.reader-overview #readerFrameHost,
#sourceReader.reader-overview .reader-origin-row { display: none; }
#sourceReader.reader-overview #readerAbout { display: flex; flex: 1; min-height: 0; flex-direction: column; }
#sourceReader.reader-overview #readerAboutContent { flex: 1; height: auto; max-height: none; }
.parent-readings { margin-top: 24px; border-top: 1px solid var(--reader-line); padding-top: 12px; }
.parent-readings-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.parent-readings-heading h3 { margin: 0; font-size: 16px; color: var(--reader-muted); }
:is(#sourceReader, #outlineInfo) .parent-readings button { color: var(--reader-accent); background: transparent; border: 0; border-radius: 6px; min-height: 44px; cursor: pointer; font: inherit; }
:is(#sourceReader, #outlineInfo) .parent-readings button:hover { background: var(--reader-tint); }
:is(#sourceReader, #outlineInfo) .parent-readings button:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
.parent-readings-all { padding: 8px; white-space: nowrap; }
.parent-readings-group { margin: 20px 0 4px; font-size: 14px; line-height: 1.5; color: var(--reader-muted); font-weight: 600; }
.parent-readings ul { margin: 0; padding: 0; list-style: none; }
.parent-readings li { border-bottom: 1px solid var(--reader-line); }
.parent-reading { display: block; width: 100%; padding: 10px 8px; text-align: left; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 1199px) { #sourceReader .parent-readings { display: none; } }
#outlineInfo[data-level="preview"] .parent-readings { display: none; }
#outlineInfoContent { min-height: 0; }

/* Keep headings close to their explanation without repeated section labels. */
.outline-header > .outline-actions { margin-top: 8px; }
#sourceReader .reader-heading { padding-bottom: 8px; }
#readerContext:empty { display: none; }
#sourceReader #readerAbout { padding-top: 0; }
#readerAboutContent > :first-child { margin-top: 0; }
#readerAboutContent > :last-child { margin-bottom: 0; }

/* Selected-only excerpts do not need a separate jump action. */
.passage-controls:has(#historicalContext:not(:checked)) #historicalJump { display: none; }
@media (max-width: 599px) {
  .compact-controls #passageMaximize { grid-column: 3; }
}

/* Keep selection markers for navigation, but paint them only within context. */
#readerFrameHost:has(.passage-context-toggle input:not(:checked)) .selected-verse,
#readerFrameHost:has(.passage-context-toggle input:not(:checked)) .has-selection,
#readerFrameHost:has(.passage-context-toggle input:not(:checked)) .historical-paragraph mark {
  background: transparent;
  border-left-color: transparent;
}

/* App-level pane visibility sits beside appearance controls, always reachable
   from the outline. Fullscreen reader retains its own close/restore controls. */
.heading-row > a { margin-right: auto; }
#readerPaneToggle { flex-shrink: 0; }
#readerPaneToggle .pane-fill { fill: currentColor; stroke: none; opacity: 0; }
#readerPaneToggle[aria-expanded="true"] .pane-fill { opacity: .22; }
#readerMaximize, #readerClose.reader-close-icon { width: 44px; height: 44px; padding: 10px; flex-shrink: 0; }
#readerMaximize svg, #readerClose svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reader-toolbar #readerClose.reader-close-icon { order: 3; }
.reader-toolbar #readerOriginal { margin-right: auto; }
@media (max-width: 599px) {
  #readerPaneToggle { display: none; }
}

.reader-toolbar #readerMaximize { margin-left: auto; }
.node-badge { font-weight: 600; }
.node-name .node-badge { margin-left: 4px; }
@media (hover: none) and (pointer: coarse) and (max-width: 1199px) {
  #readerPaneToggle { display: none; }
}

/* Center icon artwork without inline SVG baseline/descender spacing. */
#themeToggle, #readerPaneToggle,
#sourceReader #readerMaximize, #sourceReader #readerClose.reader-close-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px;
  padding: 0; border: 0; background: transparent;
}
#themeToggle svg, #readerPaneToggle svg,
#readerMaximize svg, #readerClose svg { display: block; width: 20px; height: 20px; }
.reader-toolbar { align-items: center; }
#sourceReader #readerBackToReadings { min-height: 44px; padding: 8px; margin-right: auto; border: 0; background: transparent; color: var(--reader-accent); }
#sourceReader #readerBackToReadings:hover { background: var(--reader-tint); }
#readerBackToReadings[hidden] { display: none; }
@media (max-width: 1199px) { #readerBackToReadings { display: none; } }
#themeToggle:hover, #readerPaneToggle:hover,
#sourceReader #readerMaximize:hover, #sourceReader #readerClose.reader-close-icon:hover {
  background: var(--reader-tint);
}
#readerPaneToggle[aria-expanded="true"] { background: var(--reader-tint); }
.node-name:has(.node-badge) { display: flex; align-items: center; gap: 8px; }
.node-name .node-badge { margin-left: 0; flex-shrink: 0; line-height: 16px; }
@media (max-width: 1199px) {
  #readerPaneToggle { display: none; }
}

/* Shared facts explanation, with its own scroll area and persistent close action. */
.outline-actions #factsContext { border: 0; padding-inline: 12px; white-space: nowrap; }
#factsDialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--reader-line); border-radius: 12px; color: var(--reader-ink); background: var(--reader-surface); }
#factsDialog[open] { display: flex; flex-direction: column; }
#factsDialog::backdrop { background: #0008; }
.facts-heading { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--reader-line); }
#factsTitle { flex: 1; margin: 0; font-size: 20px; line-height: 1.3; }
#factsClose { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--reader-accent); }
#factsClose:hover { background: var(--reader-tint); }
#factsClose svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#factsBody { overflow: auto; overscroll-behavior: contain; padding: 0 20px 20px; overflow-wrap: anywhere; }
#factsBody li { margin-block: 10px; }
#factsBody .callout { background: var(--reader-tint) !important; border-left-color: var(--reader-accent) !important; }
#factsBody hr { border-top-color: var(--reader-line) !important; }

.node-view { display: none; }
@media (max-width: 1199px) {
  .node-view { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--reader-accent); background: transparent; }
  .node-view svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .node-view:hover { background: var(--reader-tint); }
}
/* Touch/programmatic focus does not add a second selection border. Keyboard
   navigation retains an outline around the complete row rather than its label. */
.node-select:focus-visible { outline: none; }
body.keyboard-navigation .node-row:has(.node-select:focus-visible) { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
body:not(.keyboard-navigation) :is(#outlineInfoClose, #factsClose, .node-view):focus-visible { outline: none; }

/* Phone source reading follows the context sheet, so do not repeat its details. */
@media (max-width: 1199px) {
  #sourceReader:not(.reader-overview) #readerAbout,
  #sourceReader:not(.reader-overview) #readerContext,
  #sourceReader:not(.reader-overview) .reader-eyebrow,
  #sourceReader:not(.reader-overview) #passageDivider { display: none; }
  #sourceReader #readerClose { border: 0; background: transparent; }
}
body:not(.keyboard-navigation) #readerClose:focus-visible { outline: none; }

@media (max-width: 1199px) {
  body.details-pane-open #main-content { height: calc(100dvh - var(--info-height, 42dvh)); }
  #outlineInfo { height: var(--info-height, 42dvh); max-height: 88dvh; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px #0002; }
}
#outlineInfoResize { position: relative; height: 24px; flex: 0 0 24px; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; display: grid; place-items: center; }
#outlineInfoResize::after { content: ''; width: 36px; height: 3px; border-radius: 3px; background: var(--reader-line); }
#outlineInfoSize { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px; touch-action: none; user-select: none; -webkit-user-select: none; border: 0; border-radius: 8px; color: var(--reader-accent); background: transparent; }
#outlineInfoSize svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body:not(.keyboard-navigation) :is(#outlineInfoSize, #outlineInfoResize):focus-visible { outline: none; }

/* The outline adapter owns scroll anchoring across breadcrumb reflow. */
#outlineScroll { overflow-anchor: none; }

/* On small layouts the same control depicts a bottom pane. */
#readerPaneToggle.bottom-pane-toggle { display: none; }
#readerPaneToggle.bottom-pane-toggle svg { transform: rotate(90deg); }
@media (max-width: 599px) {
  #outlineScroll > .outline-actions { gap: 4px; padding-inline: var(--phone-toolbar-inset, 10px); }
  .outline-actions #factsContext { padding-inline: 8px; }
}

/* Avoid accidental double-tap zoom on controls; retain scrolling and pinch zoom. */
button, a, summary, input, select, label { touch-action: manipulation; }


@media (max-width: 599px) {
  #outlineScroll { scroll-padding-top: 88px; }
  #outlineScroll > #selectionPath {
    position: sticky; top: 44px; z-index: 2;
    height: 44px; min-height: 44px; max-height: 44px;
    padding: 0 10px; white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    background: var(--reader-surface); overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #selectionPath::-webkit-scrollbar { display: none; }
  #selectionPath button { white-space: nowrap; vertical-align: middle; }
  #selectionPath[data-overflow-left="true"] { mask-image: linear-gradient(to right, transparent, black 12px); }
  #selectionPath[data-overflow-right="true"] { mask-image: linear-gradient(to left, transparent, black 12px); }
  #selectionPath[data-overflow-left="true"][data-overflow-right="true"] { mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
}

#selectionPath button, #selectionPath .breadcrumb-separator {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; vertical-align: middle;
}
.breadcrumb-separator { width: 12px; }
.breadcrumb-separator svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Safari may give the restored pane or scroll container :focus-visible after
   touch navigation. Keep those programmatic focus rings keyboard-only too. */
body:not(.keyboard-navigation) :focus-visible:not(input):not(textarea):not(select) { outline: none; }

/* Reserve a stable action column; only the selected leaf exposes its action. */
.node-read { display: none; visibility: hidden; flex: 0 0 72px; align-self: flex-start; min-height: 44px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--reader-accent); font-weight: 600; }
.node-row.selected .node-read { visibility: visible; }
.node-read:hover { background: var(--reader-tint); }
.node-audio-indicator { display: inline-block; width: 16px; height: 16px; margin-left: 3px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.node-read { white-space: nowrap; }

@media (max-width: 1199px) {
  .node-read { display: block; }
}

/* Phone reading already uses the available source area. */
@media (max-width: 1199px) {
  #sourceReader #passageMaximize { display: none; }
}

/* Phone details retain a frosted header over an opaque reading surface. The
   panel supplies a stable backing color so the translucent header does not
   change tint when it moves between preview and expanded positions. */
@media (max-width: 1199px) {
  #outlineInfo, #outlineInfoResize, #outlineInfo .info-heading, #outlineInfoContent {
    background: var(--reader-surface);
  }
  #outlineInfoContent {
    flex: 1; min-height: 0;
  }
  @supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    #outlineInfo {
      -webkit-backdrop-filter: blur(16px) saturate(115%);
      backdrop-filter: blur(16px) saturate(115%);
    }
    #outlineInfoResize, #outlineInfo .info-heading {
      background: linear-gradient(115deg,
        color-mix(in srgb, var(--reader-surface) 91%, white 9%),
        color-mix(in srgb, var(--reader-surface) 87%, transparent));
    }
    #outlineInfoResize { box-shadow: inset 0 1px 0 #ffffff18; }
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  #outlineInfo, #outlineInfoResize, #outlineInfo .info-heading, #outlineInfoContent {
    background: var(--reader-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* Header controls have separate hit areas; the title is the broad sizing target. */

.outline-actions :is(#expandAll, #collapseAll) {
  width: auto; flex: 0 0 auto; gap: 6px; padding-inline: 8px;
}
.outline-actions :is(#expandAll, #collapseAll) svg { flex-shrink: 0; }
@media (max-width: 599px) {
  .outline-actions :is(#expandAll, #collapseAll) { width: 44px; flex: 0 0 44px; padding-inline: 0; }
  .outline-actions :is(#expandAll, #collapseAll) span { display: none; }
}

@media (max-width: 599px) {
  .outline-header .heading-row > a { display: none; }
  .outline-header .heading-row:has(> a:only-child) { display: none; }
}
@media (max-width: 359px) {
  #outlineScroll > .outline-actions { gap: 0; padding-inline: var(--phone-toolbar-inset, 0px); }
  .outline-actions :is(#expandAll, #collapseAll) { gap: 2px; }
  .outline-actions :is(#expandAll, #collapseAll) svg { width: 18px; }
}

@media (max-width: 599px) {
  .outline-actions #collapseAll { margin-left: 8px; }
}

.chevron { transition: transform 200ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }

/* Lookup and recovery stay out of the crowded sticky phone toolbar. */
#navigationTools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
#navigationTools button { border: 0; padding: 4px 6px; min-height: 44px; }
#findSource { font-weight: 650; }
#navigationStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; font-size: 13px; color: var(--reader-muted); }
#navigationStatus.notice-visible { position: static; width: auto; height: auto; clip-path: none; }
#navigationStatus:empty { display: none; }
#referenceLinkBox { padding-block: 8px; }
#referenceLinkBox label { display: block; font-size: 13px; }
#referenceLink { width: 100%; min-width: 0; font: inherit; padding: 8px; color: var(--reader-ink); background: var(--reader-surface); border: 1px solid var(--reader-line); }
.reader-focus-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); }
#sourceLookup { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--reader-line); border-radius: 12px; color: var(--reader-ink); background: var(--reader-surface); }
#sourceLookup { --lookup-build: 3; }
#sourceLookup[open] { display: flex; flex-direction: column; overflow: clip; }
#sourceLookup > :not(#sourceResults) { flex-shrink: 0; }
#sourceLookup::backdrop { background: #0008; }
.lookup-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lookup-heading h2 { font-size: 20px; margin: 0; }
#closeSourceLookup { width: 44px; height: 44px; border: 0; background: transparent; color: var(--reader-accent); font-size: 26px; }
#sourceQuery { flex-shrink: 0; margin-top: 6px; min-height: 44px; padding: 8px; font: inherit; font-size: 16px; color: var(--reader-ink); background: var(--reader-surface); border: 1px solid var(--reader-line); border-radius: 6px; }
#sourceResultCount { font-size: 13px; color: var(--reader-muted); }
#sourceResults { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1199px) {
    #sourceLookup {
        position: fixed;
        inset: calc(var(--lookup-top, 0px) + 8px) 0 auto;
        margin: 0 auto;
        box-sizing: border-box;
        height: calc(var(--lookup-height, 100dvh) - 16px);
        max-height: calc(var(--lookup-height, 100dvh) - 16px);
    }
}
#sourceResults button { display: block; width: 100%; min-height: 44px; text-align: left; padding: 12px 8px; border: 0; border-top: 1px solid var(--reader-line); background: transparent; color: var(--reader-ink); }
#sourceResults button:hover { background: var(--reader-tint); }
#sourceResults span { display: block; font-size: 13px; color: var(--reader-muted); overflow-wrap: anywhere; }
#sourceResults strong { color: var(--reader-accent); }
@media (max-width: 599px) {
  #navigationTools { gap: 2px 8px; font-size: 13px; }
  #focusReader { display: none; }
}

/* Context actions occupy a stable column, so selection does not rewrap names. */
#navigationTools:not(:focus-within) { height: 0; }
.reader-focus-link { position: absolute; z-index: 5; }
.node-actions { display: flex; flex: 0 0 44px; align-items: flex-start; }
.node-link { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--reader-accent); background: transparent; visibility: hidden; }
.node-row.selected .node-link { visibility: visible; }
.node-link:hover { background: var(--reader-tint); }
.node-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#referenceLinkDialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--reader-line); border-radius: 12px; color: var(--reader-ink); background: var(--reader-surface); }
#referenceLinkDialog::backdrop { background: #0008; }
#referenceLink { font-size: 16px; }
#closeReferenceLink { width: 44px; height: 44px; flex: 0 0 44px; border: 0; color: var(--reader-accent); background: transparent; font-size: 26px; }
@media (max-width: 1199px) {
  .node-actions:has(.node-read) { flex-basis: 108px; }
  .node-actions .node-read { flex: 0 0 64px; min-width: 64px; padding: 0 2px; font-size: 13px; }
}
@media (max-width: 599px) {
  #outlineScroll > .outline-actions { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #outlineScroll > .outline-actions::-webkit-scrollbar { display: none; }
}

@media (max-width: 1199px) {
  .node-row.long-name .node-actions:has(.node-read) { flex-basis: 64px; flex-direction: column; }
  .node-row.long-name .node-actions .node-read { flex-basis: 44px; }
}

.outline-actions #undoCollapse:disabled { opacity: .4; cursor: default; background: transparent; }

#passageRecoverySource:not([hidden]) { display: inline-block; margin: 4px 0 12px 12px; padding-block: 10px; overflow-wrap: anywhere; }

.title-help-row { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
.title-help-row h1 { margin-bottom: 0; }
#outlineHelp, #outlineHelpClose { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--reader-accent); cursor: pointer; }
#outlineHelp svg, .help-symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#outlineHelpDialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; box-sizing: border-box; border: 1px solid var(--reader-line); border-radius: 14px; background: var(--reader-surface); color: var(--reader-ink); }
#outlineHelpDialog[open] { display: flex; flex-direction: column; }
#outlineHelpDialog::backdrop { background: #0006; }
.help-heading { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--reader-line); }
.help-heading h2 { margin: 0; font-size: 22px; }
#outlineHelpClose { font-size: 28px; }
.help-content { overflow-y: auto; padding: 16px; font: 16px/1.5 var(--ui-font); }
.help-actions { padding: 0; margin: 0; list-style: none; }
.help-actions li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.help-symbol { flex: 0 0 44px; display: flex; justify-content: center; align-items: center; min-height: 30px; color: var(--reader-accent); font-weight: 650; }
.help-fact { flex-basis: 28px; margin-inline: 7px; border: 1px solid currentColor; border-radius: 5px; }
.help-symbol .restore-icon { display: none; }
#helpFacts { min-height: 44px; padding: 8px 12px; color: var(--reader-accent); background: transparent; border: 1px solid var(--reader-line); border-radius: 8px; font: inherit; }
@media (max-width: 599px) {
 #outlineHelpDialog { margin: auto 0 0; width: 100%; max-height: 80dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 599px) {
 .title-help-row { position: relative; }
 #outlineHelpDialog { max-width: 100%; }
}

.help-actions [hidden], .help-content [hidden] { display: none !important; }
.help-actions .help-breadcrumb { flex-direction: column; gap: 6px; }
.help-path { font-size: 14px; color: var(--reader-accent); }
@media (max-width: 359px) { .title-help-row h1 { font-size: 22px; } }

#undoCollapse[hidden] { display: none !important; }

.passage-note-backlink svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Audio stays with passage controls; the text retains its own scroll region. */
.passage-audio { flex: 0 0 auto; padding: .4rem .75rem; border-bottom: 1px solid var(--border, #34515a); }
.passage-audio audio { display: block; width: 100%; height: 40px; }
.passage-audio [hidden] { display: none !important; }
.audio-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .3rem; font-size: .85rem; }
.audio-options label { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; }
.audio-options input[type="checkbox"] { accent-color: var(--reader-accent); }
.audio-options select { width: auto; min-width: 4.5rem; padding: .25rem; font: inherit; }
.audio-status { margin: .25rem 0 0; font-size: .85rem; }
.audio-status:empty { display: none; }
.audio-sentence.audio-current { text-decoration: underline; text-decoration-color: var(--accent, #50cec5); text-decoration-thickness: 2px; text-underline-offset: .2em; }

#homeLink { color: var(--reader-accent); border-radius: 8px; text-decoration: none; }
#homeLink:hover { background: var(--reader-tint); }

#homeLink { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; margin: 0; padding: 0; }
#homeLink svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) {
  .outline-header { position: relative; }
  .outline-header > #homeLink { position: absolute; top: 8px; right: var(--phone-toolbar-inset, 10px); }
  .outline-header > .eyebrow { padding-right: 52px; }
}

@media (max-width: 599px) { :root { --phone-toolbar-inset: 10px; } }
@media (max-width: 359px) { :root { --phone-toolbar-inset: 0px; } }

/* Explicit embed mode uses the frame's existing responsive breakpoints. */
.outline-embedded .site-brand { display: none; }
.outline-embedded .heading-row { justify-content: flex-end; }
.outline-embedded .eyebrow { margin-top: 8px; }

.reading-settings[hidden] { display: none !important; }
.reading-settings { display: flex; flex-direction: column; flex-shrink: 0; max-height: 45dvh; overflow: hidden; box-sizing: border-box; }
.reading-settings-content { min-height: 0; overflow-y: auto; padding: 14px 14px 0; }
.reading-settings-content > label { display: flex; align-items: center; gap: 12px; margin-block: 12px; }
.reading-settings-footer { flex-shrink: 0; padding: 12px 14px 24px; }
.reading-settings .audio-options { display: flex; flex-wrap: wrap; gap: 16px; }
.reading-settings .audio-options[hidden] { display: none; }
.reading-settings button { color: var(--reader-accent); background: transparent; border: 1px solid var(--reader-line); border-radius: 8px; min-height: 44px; padding: 8px 16px; }
#sourceReader button.reading-settings-toggle { margin-left: auto; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--reader-accent); }
.reading-settings-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.reading-settings select { min-height: 44px; max-width: 100%; padding: 6px 10px; font: inherit; color: var(--reader-ink); background: var(--reader-surface); border: 1px solid var(--reader-line); border-radius: 8px; }
.reading-settings label { min-height: 44px; }

#sourceReader button.reading-settings-toggle:hover { background: var(--reader-tint); }
#sourceReader button.reading-settings-toggle:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }

.node-read-all { display: block; }
#readingSequence[hidden] { display: none; }
#readingSequence { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--reader-line); background: var(--reader-surface); margin-top: auto; }
#readingSequence button { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--reader-accent); border-radius: 50%; color: var(--reader-accent); background: transparent; }
#readingSequence button:disabled { opacity: .35; cursor: default; }
#readingSequence button:not(:disabled):hover { background: var(--reader-tint); }
#readingSequence svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sequence-label { flex: 1; min-width: 0; text-align: center; font-size: 14px; line-height: 1.35; }
#sequenceParent { display: block; font-size: 13px; overflow-wrap: anywhere; color: var(--reader-muted); }
#sequenceParent strong { color: var(--reader-ink); font-weight: 700; }
#sequenceCount { display: block; color: var(--reader-muted); margin-top: 3px; }
@media (min-width: 1200px) {
  .node-actions:has(.node-read-all) { flex-basis: 140px; }
  .node-read-all { flex-basis: 96px; }
}
@media (max-width: 1199px) {
  .node-actions:has(.node-read-all) { flex-basis: 124px; }
  .node-actions .node-read-all { flex-basis: 80px; min-width: 80px; }
  .node-row.long-name .node-actions:has(.node-read-all) { flex-basis: 80px; }
}

#sourceReader .passage-controls[hidden] { display: none !important; }
#sourceReader .passage-controls { display: flex; justify-content: flex-start; }
.passage-right-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#sourceReader .passage-right-actions .reading-settings-toggle { margin-left: 0; }
#sourceReader .passage-right-actions > button { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
#sourceReader .passage-right-actions > button > svg { display: block; margin: 0; }
#sourceReader :is(#passageJump, #historicalJump)[hidden] { display: none !important; }
#sourceReader :is(#passageJump, #historicalJump) svg { display: none; }
.passage-heading-actions[hidden] { display: none; }
@media (max-width: 1199px) {
  #sourceReader .reader-heading { position: relative; }
  #sourceReader .reader-heading:has(.passage-heading-actions:not([hidden])) #readerTitle { padding-right: 48px; }
  .passage-heading-actions { position: absolute; top: 4px; right: 8px; display: flex; gap: 4px; }
  #sourceReader .passage-heading-actions button { width: 44px; height: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--reader-accent); }
  #sourceReader .passage-heading-actions :is(#passageJump, #historicalJump) svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .passage-heading-actions button span { display: none; }
  .passage-heading-actions button:hover { background: var(--reader-tint); }
}

@media (max-width: 1199px) {
  #sourceReader .reader-heading:has(.passage-heading-actions :is(#passageJump, #historicalJump):not([hidden])) #readerTitle { padding-right: 96px; }
}

/* Keep Done and its lower gap outside the scrolling settings content. */
#sourceReader .reading-settings { padding: 0; }
#sourceReader .reading-settings .passage-context-short { display: none; }
#sourceReader .passage-heading-actions button { display: grid; place-items: center; padding: 0; line-height: 1; }
#sourceReader .passage-heading-actions button svg { display: block; margin: 0; }

/* A second control for the same audio element, anchored above collection navigation. */
#readerFrameHost.reader-native { position: relative; }
#sourceReader .passage-play-remote {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 4;
  display: grid; place-items: center; width: 64px; height: 64px; padding: 0;
  border: 0; border-radius: 50%;
  color: var(--reader-accent); background: var(--reader-surface);
  box-shadow: 0 3px 12px #0003; cursor: pointer;
}
#sourceReader .passage-play-remote[hidden] { display: none; }
#sourceReader .passage-play-remote svg { width: 28px; height: 28px; fill: currentColor; }
#sourceReader .passage-play-remote .play-progress { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); pointer-events: none; }
#sourceReader .play-progress-track { opacity: .28; }
#sourceReader .play-progress-value { visibility: hidden; stroke-dasharray: 100; stroke-dashoffset: 100; }
#sourceReader .passage-play-remote:hover { background: var(--reader-tint); }
#sourceReader .passage-play-remote:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 3px; }
#sourceReader .passage-play-remote:disabled { opacity: .5; cursor: default; }
#sourceReader article.has-play-remote { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* The remote remains available while the native transport is tucked away. */
#sourceReader .native-audio-collapsed > audio { display: none; }
#sourceReader .native-audio-collapsed { padding: 0; border: 0; }
#sourceReader button.passage-audio-toggle {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 8px; line-height: 1;
  background: transparent; color: var(--reader-accent);
}
#sourceReader button.passage-audio-toggle[hidden] { display: none; }
#sourceReader .passage-audio-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#sourceReader .passage-audio-toggle:hover,
#sourceReader .passage-audio-toggle[aria-expanded="true"] { background: var(--reader-tint); }
#sourceReader .passage-audio-toggle:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
@media (max-width: 1199px) {
  #sourceReader .reader-heading:has(.passage-audio-toggle:not([hidden])) #readerTitle { padding-right: 96px; }
  #sourceReader .reader-heading:has(.passage-audio-toggle:not([hidden])):has(.passage-heading-actions :is(#passageJump, #historicalJump):not([hidden])) #readerTitle { padding-right: 144px; }
}

/* Sliding navigation gives its space back to the passage; the remote lives above it. */
#readingSequenceDock { display: grid; grid-template-rows: 1fr; flex-shrink: 0; transition: grid-template-rows 180ms ease; }
#readingSequenceDock:has(#readingSequence[hidden]) { display: none; }
.sequence-clip { min-height: 0; overflow: hidden; }
#readingSequenceDock #readingSequence { position: static; transition: transform 180ms ease, opacity 180ms ease; }
#readingSequenceDock.sequence-tucked { grid-template-rows: 0fr; }
#readingSequenceDock.sequence-tucked #readingSequence { transform: translateY(100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #readingSequenceDock, #readingSequenceDock #readingSequence { transition: none; }
}

/* Discovery cue shares the broad details expansion target. */
.info-title-text { min-width: 0; text-align: left; }
#outlineInfoReadings { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--reader-accent); }
#outlineInfoReadings[hidden], #outlineInfo[data-level="expanded"] #outlineInfoReadings { display: none; }

.fact-explanation > .node-badge { margin-right: 12px; position: relative; top: -1px; }

/* Native Bible text retains its edition controls and footer credit. */
#sourceReader.source-first-bible:not(.reader-overview) .reader-origin-row { display: none; }