/* Scoped prototype styles; the stable tree page does not load this file. */
body {
    --reader-surface: #fffaf2;
    --reader-ink: #182127;
    --reader-muted: #53666b;
    --reader-line: #d2dcd6;
    --reader-accent: #006b63;
    --reader-tint: #eaf2eb;
}
body.dark-mode {
    --reader-surface: #10212a;
    --reader-ink: #edf5f3;
    --reader-muted: #b2c7cc;
    --reader-line: #34505b;
    --reader-accent: #4dd3c6;
    --reader-tint: #192f38;
}
#sourceReader[hidden], #readerDivider[hidden], #readerMaximize[hidden] { display: none; }
#sourceReader {
    position: fixed;
    inset: 0 0 0 var(--reader-tree-width, 55%);
    z-index: 6500;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100dvh;
    box-sizing: border-box;
    color: var(--reader-ink);
    background: var(--reader-surface);
    border-left: 1px solid var(--reader-line);
    box-shadow: -12px 0 48px #0002;
    font: 14px/1.5 var(--ui-font);
}
.reader-full #sourceReader { left: 0; border-left: 0; }
.reader-split #main-content { width: var(--reader-tree-width); }
.reader-split #topbar { right: calc(100% - var(--reader-tree-width)); }
.reader-split .popup-help, .reader-split .tooltip {
    box-sizing: border-box;
    max-width: min(390px, calc(var(--reader-tree-width) - 32px));
    overflow-wrap: anywhere;
}
.reader-split #bottomSheet { right: calc(100% - var(--reader-tree-width)); }
.reader-toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--reader-surface);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--reader-line);
}
#sourceReader button, #sourceReader a, .reader-experiment button {
    box-sizing: border-box;
    color: var(--reader-accent);
    font: inherit;
    font-weight: 600;
    border-radius: 8px;
}
#sourceReader button, .reader-experiment button {
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--reader-line);
    cursor: pointer;
}
#sourceReader button:hover, .reader-experiment button:hover { background: var(--reader-tint); }
#sourceReader :focus-visible, #readerDivider:focus-visible, .reader-experiment button:focus-visible {
    outline: 3px solid var(--reader-accent);
    outline-offset: 3px;
}
.reader-heading { padding: 16px 20px 12px; }
.reader-eyebrow {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--reader-accent);
}
#readerTitle {
    margin: 0;
    font: 600 24px/1.2 var(--title-font);
    overflow-wrap: anywhere;
}
#readerContext { margin: 6px 0 0; color: var(--reader-muted); }
.reader-origin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
#readerOrigin { color: var(--reader-muted); overflow-wrap: anywhere; }
#readerOriginal { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-underline-offset: 3px; }
.reader-help-icon { display: none; }
#sourceReader #readerTrouble { border: 0; padding: 8px 0; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.source-external-note { font-size: .85em; font-weight: 400; }
.reader-fallback[hidden] { display: none; }
.reader-fallback { padding: 10px 20px; background: var(--reader-tint); border-block: 1px solid var(--reader-line); }
.reader-fallback p { margin: 0; font-size: 12px; color: var(--reader-muted); }
#readerFrameHost { flex: 1; min-height: 120px; background: white; }
/* Forward Minimal Facts' current preference to sites that use prefers-color-scheme.
   This cannot override a source site's own theme setting or restyle its content. */
#readerFrameHost iframe { display: block; height: 100%; width: 100%; border: 0; background: white; color-scheme: inherit; }
#sourceReader #readerTrouble[hidden] { display: none; }
#readerFrameHost.reader-native {
    display: flex;
    flex-direction: column;
    background: var(--reader-surface);
    min-height: 0;
}
.passage-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 10px 20px;
    border-block: 1px solid var(--reader-line);
    background: var(--reader-tint);
}
.passage-controls label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.passage-controls select {
    min-height: 44px;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--reader-line);
    border-radius: 8px;
    font: inherit;
    color: var(--reader-ink);
    background: var(--reader-surface);
}
.passage-context-toggle { min-height: 44px; cursor: pointer; }
.passage-context-toggle input { accent-color: var(--reader-accent); width: 18px; height: 18px; }
.berean-passage {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    padding: 16px clamp(16px, 4vw, 44px) 32px;
    font: 19px/1.75 Georgia, 'Times New Roman', serif;
    color: var(--reader-ink);
    scrollbar-gutter: stable;
}
.berean-passage > * { max-width: 62ch; margin-inline: auto; }
.passage-version-note, .passage-selection-note, .passage-footer {
    font: 12px/1.6 var(--ui-font);
    color: var(--reader-muted);
}
.passage-selection-note { color: var(--reader-accent); font-weight: 600; }
.passage-verse { margin: 0; padding: 8px 12px; border-left: 3px solid transparent; }
.passage-verse sup { font: 600 11px/1 var(--ui-font); color: var(--reader-accent); margin-right: 9px; }
.selected-verse { background: #fff0b8; border-left-color: #947012; }
body.dark-mode .selected-verse { background: #283b36; border-left-color: #75bc91; }
.passage-footer { margin-top: 24px; border-top: 1px solid var(--reader-line); padding-top: 12px; }
.passage-footer a { display: inline-block; padding-block: 10px; }
@media (max-width: 599px) {
    .reader-experiment { flex-wrap: wrap; gap: 4px; padding: 6px; }
    .reader-experiment > span { display: none; }
    .passage-controls { padding: 6px 12px; gap: 0 12px; }
    .berean-passage { font-size: 18px; padding-inline: 12px; }
}
#readerDivider {
    position: fixed;
    z-index: 6600;
    top: 0;
    bottom: 0;
    left: calc(var(--reader-tree-width) - 5px);
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}
#readerDivider::after { content: ''; position: absolute; left: 4px; top: 46%; width: 3px; height: 48px; border-radius: 4px; background: var(--reader-line); }
#readerDivider:hover::after, #readerDivider:focus-visible::after { background: var(--reader-accent); }
.reader-dragging { cursor: col-resize; user-select: none; }
.reader-dragging #readerFrameHost { pointer-events: none; }
.reader-experiment {
    position: fixed;
    z-index: 2400;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--reader-line);
    border-radius: 12px;
    box-shadow: 0 4px 20px #0001;
    background: var(--reader-surface);
    color: var(--reader-muted);
    font: 12px/1.3 var(--ui-font);
}
.reader-experiment button { white-space: nowrap; }
@media (max-width: 599px) {
    .reader-toolbar {
        padding: max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
        align-items: center;
        gap: 4px 12px;
    }
    .reader-back-detail, .reader-help-label { display: none; }
    .reader-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 2px 8px;
        padding: 6px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    }
    .reader-eyebrow, #readerContext { display: none; }
    .reader-origin-row { display: contents; }
    #readerTitle { grid-column: 1; font-size: 17px; line-height: 1.25; }
    #readerOrigin { grid-column: 1; font-size: 12px; }
    #sourceReader #readerTrouble {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        width: 44px;
        padding: 0;
        text-decoration: none;
    }
    .reader-help-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 1px solid currentColor;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
    }
    .reader-fallback { padding: 8px 16px; }
}
@media (max-height: 540px) {
    #sourceReader { overflow-y: auto; }
    .reader-heading { padding-block: 8px; }
    .reader-eyebrow, #readerContext { display: none; }
    #readerFrameHost { flex-shrink: 0; min-height: 50dvh; }
}

.passage-chapter { font: 600 15px/1.4 var(--ui-font); color: var(--reader-muted); margin: 20px 0 10px; }
.passage-verse { white-space: pre-line; }
.passage-gap, .passage-missing, #passageStatus { font: 13px/1.6 var(--ui-font); color: var(--reader-muted); }
.passage-gap { padding: 4px 15px; }
.historical-paragraph mark { color: inherit; background: #fff0b8; }
body.dark-mode .historical-paragraph mark { background: #283b36; }
.historical-paragraph.selected-verse mark, body.dark-mode .historical-paragraph.selected-verse mark { background: transparent; }
.historical-paragraph.has-selection { border-left-color: #947012; }
body.dark-mode .historical-paragraph.has-selection { border-left-color: #75bc91; }
.passage-status { font: 13px/1.6 var(--ui-font); color: var(--reader-muted); }
#historicalJump { min-height: 44px; padding: 8px 12px; border: 1px solid var(--reader-line); border-radius: 8px; background: var(--reader-surface); color: var(--reader-ink); font: 12px var(--ui-font); cursor: pointer; }
#historicalJump:disabled { opacity: .5; cursor: default; }
#sourceReader .passage-note-marker { font: 11px/1 var(--ui-font); vertical-align: super; padding: 5px; }
#sourceReader .passage-note-backlink { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; margin-right: 8px; }
#passageNotes summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; }
#sourceReader #passageRetry[hidden], #passageNotes[hidden] { display: none; }
#passageStatus:empty { display: none; }

/* Leaf activation keeps the passage foremost; explanation is available on demand. */
#readerOriginal[hidden], #readerAbout[hidden] { display: none; }
#readerAbout { padding: 8px 20px; border-bottom: 1px solid var(--reader-line); }
#readerAbout summary { cursor: pointer; color: var(--reader-accent); min-height: 32px; }
#readerAboutContent { max-height: 30dvh; overflow: auto; overflow-wrap: anywhere; }
#readerAboutContent .sheet-title { font-size: 1rem; }
.reader-source-choices { overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.reader-source-choices a { padding: 12px; border: 1px solid var(--reader-line); }
.reader-source-choices button, .reader-source-choices a { text-align: left; overflow-wrap: anywhere; }

#readerChoose[hidden] { display: none; }
#readerChoose { margin-top: 8px; }

.reference-relevance { margin-top: 12px; }
.reference-relevance summary { font-weight: 600; }
.passage-selection-note[hidden] { display: none; }

/* Desktop reading size: equivalent to 125% text at normal browser zoom.
   Scope to exploration so passage typography and touch layouts stay unchanged. */
@media (min-width: 601px) and (pointer: fine) {
    #chart .node text { font-size: 15px; }
    #chart .node .node-badge-text { font-size: 10px; }
    .tooltip, .popup-help { font-size: 15px; }
    .tooltip .badge-note, .popup-help .badge-note { font-size: 13.75px; }
    .tooltip .badge-note-pill, .popup-help .badge-note-pill { font-size: 10px; }
    .popup-help .leaf-kicker { font-size: 13.75px; }
    .popup-help .leaf-indicator-state { font-size: 15px; }
}

/* Keep the selected ancestor path within the available exploration pane. */
#treeBreadcrumbs { position: fixed; top: var(--tree-breadcrumb-top, 72px); left: 12px; right: 12px; z-index: 4400; width: fit-content; max-width: calc(100% - 24px); border: 1px solid var(--reader-line); border-radius: 12px; background: var(--reader-surface); color: var(--reader-ink); box-shadow: 0 3px 12px #0001; }
.reader-split #treeBreadcrumbs { max-width: calc(var(--reader-tree-width) - 24px); }
.reader-full #treeBreadcrumbs { visibility: hidden; }
#treeBreadcrumbs ol { display: flex; align-items: center; overflow-x: auto; margin: 0; padding: 2px 6px; list-style: none; }
#treeBreadcrumbs li { display: flex; align-items: center; flex-shrink: 0; }
#treeBreadcrumbs li + li::before { content: '›'; color: var(--reader-muted); padding: 0 3px; }
#treeBreadcrumbs button { border: 0; background: transparent; color: var(--reader-accent); cursor: pointer; font: 500 13px/1.3 var(--ui-font); min-height: 44px; padding: 6px 8px; max-width: 32ch; text-align: left; }
#treeBreadcrumbs button[aria-current] { color: var(--reader-ink); font-weight: 700; }
#treeBreadcrumbs button:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: -2px; border-radius: 6px; }

#treeBreadcrumbs .breadcrumb-explore { min-width: 36px; padding-inline: 8px; font-size: 18px; }
#treeBreadcrumbs .breadcrumb-explore[aria-expanded="true"] { background: var(--reader-tint); border-radius: 6px; }
#breadcrumbPicker[hidden] { display: none; }
#breadcrumbPicker { position: absolute; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 24px)); max-width: 100%; max-height: min(50dvh, 400px); overflow-y: auto; padding: 6px; box-sizing: border-box; background: var(--reader-surface); border: 1px solid var(--reader-line); border-radius: 10px; box-shadow: 0 8px 24px #0002; }
#treeBreadcrumbs #breadcrumbPicker button { display: block; width: 100%; max-width: none; border-radius: 6px; overflow-wrap: anywhere; }
#treeBreadcrumbs #breadcrumbPicker button:hover { background: var(--reader-tint); }

#treeBreadcrumbs { display: flex; align-items: flex-start; }
#treeBreadcrumbs ol { min-width: 0; }
/* Persistent map pad follows the edge of the exploration pane. */
#mapControls { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4300; }
.reader-split #mapControls { right: calc(100% - var(--reader-tree-width) + 12px); }
.reader-full #mapControls { visibility: hidden; }
.map-controls-panel { width: 160px; padding: 8px; box-sizing: border-box; border: 1px solid var(--reader-line); border-radius: 14px; background: var(--reader-surface); color: var(--reader-ink); box-shadow: 0 4px 20px #0002; }
.map-zoom-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.map-pan-grid { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px; margin-block: 6px; }
.map-pan-grid [data-map-action="up"] { grid-area: 1 / 2; }
.map-pan-grid [data-map-action="left"] { grid-area: 2 / 1; }
.map-pan-grid [data-map-action="center"] { grid-area: 2 / 2; }
.map-pan-grid [data-map-action="right"] { grid-area: 2 / 3; }
.map-pan-grid [data-map-action="down"] { grid-area: 3 / 2; }
#mapControls button { min-width: 44px; min-height: 44px; border: 1px solid var(--reader-line); border-radius: 8px; background: transparent; color: var(--reader-accent); font: 600 18px/1 var(--ui-font); cursor: pointer; }
#mapControls button:hover { background: var(--reader-tint); }
#mapControls button:focus-visible { outline: 3px solid var(--reader-accent); outline-offset: 2px; }
#mapControls [data-map-action="fit"] { width: 100%; font-size: 12px; }
#mapZoomValue { font: 600 12px var(--ui-font); }

/* Keep the idle map pad quiet without disabling its controls. */
#mapControls { opacity: .55; transition: opacity 180ms ease; }
#mapControls:hover, #mapControls:focus-within, #mapControls:active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #mapControls { transition: none; }
}