.reader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

.reader-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

.reader-content {
    height: 100%;
    box-sizing: border-box;
    column-fill: auto;
    overflow: visible;
    font-family: var(--theme-font-serif);
    font-size: 1em;
    line-height: var(--theme-line-height-relaxed);
    text-align: justify;
    hyphens: auto;
    transition: transform 240ms ease;
    will-change: transform;
}

.reader-content h1,
.reader-content h2,
.reader-content h3 {
    font-family: var(--theme-font-sans);
    line-height: var(--theme-line-height-tight);
    text-align: start;
    break-after: avoid;
}

.reader-content h1 { font-size: 1.7em; margin: 0 0 0.6em; }

.reader-content h1.reader-chapter-title {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 2em;
    margin: 0 0 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--theme-border-subtle);
}

/* Section-title page that precedes the first chapter of each section
   (except the opening section). Sized to one column with `height: 100%`
   so it occupies exactly one page; the column-fragmentation rules then
   push the chapter content to the next page. Horizontal full-bleed is
   achieved with negative inline margins; vertical full-bleed comes from
   `box-shadow` insets (matching the reader's dynamic top/bottom padding,
   exposed as CSS custom properties by `Reader#applyMetricsTo`). */
.reader-content .reader-section-divider {
    box-sizing: border-box;
    width: calc(100% + var(--reader-padding-x, 0px) * 2);
    height: 100%;
    margin-block: 0;
    margin-inline: calc(var(--reader-padding-x, 0px) * -1);
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-tertiary);
    box-shadow:
        0 calc(var(--reader-padding-y, 0px) * -1) 0 0 var(--theme-bg-tertiary),
        0 var(--reader-padding-y, 0px) 0 0 var(--theme-bg-tertiary);
    text-align: center;
    break-before: column;
    break-after: column;
    break-inside: avoid;
}

.reader-content .reader-section-divider-title {
    font-family: var(--theme-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.4em;
    font-weight: var(--theme-font-weight-semibold);
    color: var(--theme-text-primary);
    margin: 0;
    padding: 0;
    border: none;
}
.reader-content h2 { font-size: 1.35em; margin: 1.2em 0 0.5em; }
.reader-content h3 { font-size: 1.12em; margin: 1em 0 0.4em; }

.reader-content p {
    margin: 0 0 1em;
    orphans: 2;
    widows: 2;
}

.reader-content ul,
.reader-content ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.reader-content li { margin-bottom: 0.4em; }

.reader-content blockquote {
    margin: 0 0 1em 0%;
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--theme-border-strong);
    color: var(--theme-text-secondary);
    font-style: italic;
    font-size: 1.25em;
}

.reader-content img { max-width: 100%; height: auto; }

.reader-content table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
    border: 1px solid var(--theme-border-strong);
}

.reader-content th,
.reader-content td {
    padding: 0.5em 0.75em;
    border: 1px solid var(--theme-border-strong);
    text-align: start;
}

.reader-content th {
    background: var(--theme-bg-secondary);
    font-weight: 600;
}

.reader-content code {
    font-family: var(--theme-font-mono);
    font-size: 0.85em;
    background: var(--theme-bg-secondary);
    padding: 1px 4px;
    border-radius: var(--theme-radius-sm);
}

.reader-highlight {
    background: rgba(255, 214, 92, 0.55);
    color: inherit;
    border-radius: 2px;
    cursor: pointer;
}

.reader-highlight--note {
    background: none;
    border-radius: 0;
    border-bottom: 2px dotted currentColor;
}

.reader-search-highlight {
    background: rgba(64, 156, 255, 0.45);
    color: inherit;
    border-radius: 2px;
}

.reader-arrow {
    flex: 0 0 auto;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-tertiary);
    opacity: 0;
    transition: opacity 200ms ease, color 150ms ease;
}

.reader:hover .reader-arrow { opacity: 1; }
.reader-arrow:hover { color: var(--theme-text-primary); }

.reader-popover {
    position: absolute;
    z-index: var(--theme-z-dropdown);
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
}

.reader-popover[hidden] { display: none; }

.reader-popover-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: var(--theme-radius-sm);
    cursor: pointer;
    color: var(--theme-text-primary);
    font-family: var(--theme-font-sans);
    font-size: var(--theme-font-sm);
}

.reader-popover-btn:hover { background: var(--theme-bg-secondary); }

.reader-popover-btn--danger { color: var(--theme-color-danger); }

.reader-note-popover {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: 260px;
    padding: 10px;
}

.reader-note-popover-text {
    margin: 0;
    font-family: var(--theme-font-sans);
    font-size: var(--theme-font-sm);
    line-height: var(--theme-line-height-base);
    color: var(--theme-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.reader-note-popover-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    /* Hide the side arrows to give the text the full screen width;
       page turns still work via swipe and keyboard. */
    .reader-arrow { display: none; }

    /* Tighter line spacing fits more text per page on small screens. */
    .reader-content { line-height: var(--theme-line-height-base); }

    /* Keep the last lines clear of the iPhone home indicator / bottom bar.
       This shrinks the viewport, so the JS metrics pick it up automatically. */
    .reader { padding-bottom: calc(env(safe-area-inset-bottom) + 64px); }
}