/* ============================================================
   RESIZE
   ============================================================ */

.resize-handle {
    width: 3px;
    cursor: col-resize;
    background: transparent;
    transition: background var(--dur);
    flex-shrink: 0;
    position: relative;
}
.resize-handle::after {
    content: '';
    position: absolute;
    inset: 0 -3px;
}
.resize-handle:hover, .resize-handle.dragging { background: var(--accent); }
.resize-handle.collapsed { cursor: col-resize; }

/* ============================================================
   HIGHLIGHT & PREVIEW
   ============================================================ */

.flash { animation: flash-anim 1.4s ease; }
@keyframes flash-anim {
    0% { background: var(--accent-dim); }
    100% { background: transparent; }
}

/* ---- Preview bar: warm parchment tint, blends with document ---- */
.preview-bar {
    background: var(--doc-surface);
    color: var(--td2);
    padding: 12px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 14px;
}
/* Same anatomy as .add-section-btn so Back and Add-section read as the same
   "quiet doc-context action" family — transparent ghost with the ochre hover
   that the doc surface uses for non-destructive controls. */
.preview-bar-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--doc-border-strong);
    color: var(--td2);
    font: 500 12px var(--sans);
    padding: 5px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all var(--dur) var(--ease);
}
.preview-bar-back:hover {
    border-color: var(--doc-ochre);
    color: var(--doc-ochre);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.preview-bar-back svg {
    flex-shrink: 0;
    transition: transform var(--dur);
}
.preview-bar-back:hover svg { transform: translateX(-2px); }
/* Single-row banner content — name, timestamp, impact strip all inline.
   Wraps to a second line gracefully on narrow widths but stays compact on
   typical viewports. Avoids the stacked "title row + impact row" look. */
/* Two-line identity block: the checkpoint name as a title (line 1), then a
   quiet meta line (line 2) — "Saved 8m ago · 14 words added · …". The name
   reads as a proper title in ink; the meta carries time + impact so the panes
   below can stay quiet (just "Current" / "This checkpoint"). */
.preview-bar-line {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.preview-bar-name {
    font: 600 14px var(--sans);
    color: var(--td1);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-bar-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
/* Soft middot between meta items — quieter than the old vertical rules. */
.preview-bar-mid {
    color: var(--td3);
    opacity: 0.5;
    margin: 0 6px;
}
.preview-bar-impact-empty {
    font: var(--font-meta);
    color: var(--td3);
}
.preview-bar-num {
    font: 600 11px var(--sans);
    color: var(--td1);
    line-height: 1.4;
    white-space: nowrap;
}
.preview-bar-num--add { color: var(--diff-add-body); }
.preview-bar-num--del { color: var(--diff-del-body); }
.preview-bar-unit {
    font: var(--font-meta);
    color: var(--td3);
    white-space: nowrap;
}

/* (Diff legend caption removed — the colored verbs in the banner's impact
   strip teach the red/green convention implicitly. The same colors then
   appear on inline body diffs and users carry the convention forward.) */
.preview-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.preview-bar-ts {
    font: var(--font-meta);
    color: var(--td3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* "Restore selected" — gold gradient (matches .btn-send recipe). Gold is the
   pharaonic anchor for deliberate, curated actions: this button commits the
   user's selected subset, so it carries that weight. Sits beside the brick-red
   "Restore this version" (bulk) — two distinct colors for two distinct scopes. */
.preview-bar-restore-selected {
    background: var(--grad-gold-pill);
    border: none;
    color: var(--on-gold);
    font: 600 11px var(--sans);
    padding: 5px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 2px 8px -2px rgba(212,168,68,0.55);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                filter var(--dur) var(--ease);
}
.preview-bar-restore-selected:hover:not(:disabled) {
    transform: translateY(-0.5px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 6px 16px -4px rgba(212,168,68,0.65);
}
.preview-bar-restore-selected:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.98);
}
.preview-bar-restore-selected:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.btn-preview-restore {
    /* Brick-red (doc-accent / ochre) with the same gradient + multi-layer
       shadow treatment used by .btn-accept / .btn-reject — Restore is the
       primary commit action of the preview view and should carry that same
       button weight. Color stays in the doc-context red family.
       Radius inherits from the shared .btn-* base (--radius = 8px). */
    background: linear-gradient(180deg,
        #a8584a 0%,
        var(--doc-accent) 55%,
        #5a2618 100%
    );
    border: none;
    color: var(--btn-text);
    font: 600 11px var(--sans);
    padding: 5px 14px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.20),
        0 2px 8px -2px rgba(139,58,42,0.45);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-preview-restore:hover {
    transform: translateY(-0.5px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -1px 0 rgba(0,0,0,0.20),
        0 6px 16px -4px rgba(139,58,42,0.55);
}
.btn-preview-restore:active { transform: translateY(0); filter: brightness(0.96); }
.btn-preview-restore:disabled {
    background: rgba(0,0,0,0.08);
    color: var(--td3);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}
.btn-preview-restore:disabled:hover {
    background: rgba(0,0,0,0.08);
    transform: none;
    filter: none;
    box-shadow: none;
}

.preview-field-label {
    font: 600 11px var(--sans);
    color: var(--td3);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.preview-arrow {
    color: var(--td3);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Section-level metadata diffs */
.preview-title-diff,
.preview-meta-diff {
    font-size: 12px;
    line-height: 1.5;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--doc-border);
    margin-top: 4px;
    padding-top: 6px;
}
.preview-section-summary {
    font-size: 12px;
    color: var(--t3);
    padding: 4px 0 2px;
    line-height: 1.5;
}

/* Source diff — rendered into #sources-section, which provides max-width,
   border-top, and spacing; this class is just a scope hook for diff styling. */
.preview-sources-diff .sources-heading {
    margin-bottom: 20px;
}
.preview-source-card {
    padding: 12px 0;
    border-bottom: 1px solid var(--doc-border);
}
.preview-source-card:last-child { border-bottom: none; }
.preview-source-card.preview-unchanged { opacity: 0.6; }
/* Source cards in diff states — unified 14% wash + matching colored stripe.
   Stripe is inset box-shadow (not border-left) so the 3px line follows the
   rounded corner cleanly instead of tapering to a wedge. See the
   .pending-section comment in changes.css for the full rationale. */
.preview-source-card.preview-removed {
    background: var(--red-bg);
    border-radius: var(--radius-xs);
    padding: 12px;
    margin-bottom: 4px;
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--red);
}
.preview-source-card.preview-added {
    background: var(--green-bg);
    border-radius: var(--radius-xs);
    padding: 12px;
    margin-bottom: 4px;
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--green);
}
/* Selected source cards — gold stripe + gold halo, same intent layer as
   selected sections. Direction wash (red/green) stays so the user sees
   what kind of source they selected. Combined box-shadow stacks the inner
   stripe + outer halo in one rule. */
.preview-source-card.preview-removed.selected,
.preview-source-card.preview-added.selected,
.preview-source-card.preview-changed.selected {
    box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent-border);
}
/* "Changed" source cards stay backgroundless — the title/URL diff highlights
   already carry the signal. Adding a third wash color would compete with the
   red/green semantics on the other states. */
.preview-source-card.preview-changed {
    padding: 12px 10px;
    margin-bottom: 4px;
    border-bottom: none;
}
/* Every source card uses the same flex anatomy: title/url body on the left,
   action slot (Select button) on the right when present. Consistent shape
   across all direction states so a "Removed" card and an "Added" card line up
   visually pane-to-pane. */
.preview-source-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.preview-source-body { flex: 1; min-width: 0; }
.preview-source-actions { flex-shrink: 0; }
.preview-source-title {
    font: 500 16px/1.4 var(--serif);
    color: var(--td1);
}
.preview-source-url {
    font: 13px/1.4 var(--sans);
    color: var(--doc-accent);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.preview-source-card .change-type-badge {
    display: inline-block;
    margin-top: 6px;
}

/* ---- Whole-section add/del wrappers ----
   Paragraph bg colors match the normal-edited per-word highlights
   (--green-bg / --red-bg, both 14% opacity) for visual continuity between
   the two surfaces. Figures stay on the heavier --diff-*-block (22%) since
   they're block-element accents that need stronger differentiation from
   surrounding prose. */
/* Green (added / checkpoint-only) */
.diff-add-wrap p { background: var(--green-bg); border-radius: var(--radius-2xs); padding: 0 2px; color: var(--td2); }
.diff-add-wrap .figure-block { background: var(--green-bg); border-radius: var(--radius); padding: 8px; }
/* Red (deleted / current-only) */
.diff-del-wrap p { background: var(--red-bg); border-radius: var(--radius-2xs); padding: 0 2px; color: var(--td2); }
.diff-del-wrap .figure-block { background: var(--red-bg); border-radius: var(--radius); padding: 8px; }
/* Figure blocks created by _hydratePreviewMarkers inside diff spans */
.diff-add .figure-block,
.preview-diff-body .figure-block.diff-fig-add { background: var(--green-bg); border-radius: var(--radius); padding: 8px; }
.diff-del .figure-block,
.preview-diff-body .figure-block.diff-fig-del { background: var(--red-bg); border-radius: var(--radius); padding: 8px; }

/* ============================================================
   TWO-PANE PREVIEW
   In preview mode the doc area splits into two columns: current doc on
   the left, the checkpoint on the right. The chat panel is hidden and
   the sidebar collapses to its rail to make room. Each pane is a complete
   readable doc — not a diff view. Colors are hints overlaid on real
   content: green = "added since the checkpoint" (left only), red =
   "removed since the checkpoint" (right only). One color per pane keeps
   each side coherent regardless of edit magnitude.
   ============================================================ */

/* Outer panes container — flat grid of cells. Each cell is one row's
   content for one side; pairs of cells share the same grid row, and
   `align-items: stretch` makes both cells in a row the same height. That
   produces real scroll-sync: scrolling the page keeps matching sections
   at the same vertical position regardless of per-side content size. */
#sections-container.preview-two-pane {
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
}

/* Each .preview-pane is now ONE grid cell (not a tall flex wrapper).
   Vertical divider lives on every checkpoint cell's left border — with
   gap: 0 the per-cell borders stack into one continuous rule. */
.preview-pane {
    min-width: 0;
    padding: 6px 32px;
}
.preview-pane--checkpoint {
    border-left: 1px solid var(--doc-border-strong);
}
/* First row (pane labels) carries the top padding; last row (sources)
   carries the bottom padding so the grid has the expected outer space. */
.pane-cell--header { padding-top: 16px; padding-bottom: 4px; }
.pane-cell--doc-header { padding-top: 8px; padding-bottom: 8px; }
.pane-cell--sources { padding-top: 24px; padding-bottom: 48px; }

/* Quiet role labels — "Current" (left) / "This checkpoint" (right). The
   checkpoint's name + timestamp live in the banner, so these stay quiet
   eyebrow captions (no star, no gold dot, no name). Same tracked-caps recipe
   as the sidebar's .rev-section-label, and both sides share one neutral grey
   so the only reds in view are citations + the diff washes. */
.preview-pane-header {
    font: 600 10px var(--sans);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    color: var(--td3);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--doc-border);
    margin-bottom: 18px;
}

/* Sections inside the panes — slightly less aggressive margins than the
   single-pane view, since each pane is narrower. NOTE: don't reset
   border-left / margin-left here — .preview-section reserves a 3px
   left-border slot (with a -3px margin offset) for the
   removed/added/selected direction color. Killing those props here
   strips that signal. */
.preview-pane .section-block {
    margin-bottom: 0;
    padding-left: 0;
}
/* Suppress the doc-mode hover wash inside panes — preview cards aren't
   interactive in the same way (no inline-edit affordance). The direction
   wash (red for removed, green for added) must still show, so we set the
   hover background to inherit rather than var(--doc-hover-subtle). */
.preview-pane .section-inner { transition: none; }
.preview-pane .section-inner:hover { background: inherit; }
.preview-pane--current .preview-section-select { display: none; }

/* Greyed-out absent state — used when a section/source doesn't exist on this
   side but is shown to keep the panes vertically aligned. No explanatory
   caption: the muted color + reduced saturation IS the signal. Reader
   understands by comparing rows: full-color on one side, muted on the other =
   "this lives only on the colored side". */
.preview-pane .section-block.is-absent .section-title-input,
.preview-pane .section-block.is-absent .section-number,
.preview-pane .section-block.is-absent .section-body {
    color: var(--td3);
    opacity: 0.45;
    filter: saturate(0.3);
}
.preview-pane .preview-source-card.is-absent .preview-source-title,
.preview-pane .preview-source-card.is-absent .preview-source-url {
    color: var(--td3);
    opacity: 0.45;
    filter: saturate(0.3);
}

/* Footer row at the bottom of a section card. Two slots: caption on the
   left (e.g. "Added after this point"), actions on the right (Select
   button + optional "+ N sources" note). Either or both can be present:
   - cur-only on current pane: caption only (no Select on current side)
   - snap-only on checkpoint pane: caption + Select
   - matched-edited on checkpoint pane: Select only (no caption — body
     diffs carry the signal)
   Actions wrapper hugs the right via margin-left: auto so the layout
   stays right-anchored whether or not a caption is present. */
.preview-pane .section-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* No top hairline: the gap alone separates the Recover action from the
       diffed body. A full-width rule under a short right-aligned button read
       as a stray line. */
    margin-top: 16px;
}
.preview-pane .section-select-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
/* Moved-section chip — small caption-style mark in the section header that
   signals the section's order changed since the checkpoint. Appears on BOTH
   panes for a matched-and-moved section so reorders read from either side.
   Quiet caption styling so it doesn't compete with the title or the
   direction wash; gold ink so it reads as an intentional signal, not a
   destructive change. */
.section-moved-mark {
    font: 600 10px/1 var(--sans);
    color: var(--accent-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: center;
    margin-left: 8px;
    padding: 3px 6px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-2xs);
    background: var(--accent-subtle);
    flex-shrink: 0;
    cursor: help;
    white-space: nowrap;
}

/* Sources block inside each pane — sits at the bottom. Cell padding
   (.pane-cell--sources) provides the outer space; just a top rule
   separating sources from the section list. */
.preview-pane .preview-sources-pane {
    padding-top: 24px;
    border-top: 1px solid var(--doc-border);
}
.preview-pane .preview-sources-pane .sources-heading {
    font: 400 22px/1.3 var(--serif);
    color: var(--td1);
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}
.preview-pane--current .preview-sources-pane .preview-source-select { display: none; }

/* Preview mode hides only the chat panel + its resize handle — the sidebar
   stays visible so the user can switch checkpoints without exiting preview.
   Chat is genuinely useless in preview (you can't chat about a past
   version); sidebar is genuinely useful (one-click checkpoint switching). */
body.history-previewing #chat-panel,
body.history-previewing .resize-handle[data-resize="right"] { display: none; }

/* Global #doc-header (title + abstract) is hidden in two-pane preview because
   each pane renders its OWN header — title/abstract can drift between
   checkpoints, so they belong inside the panes alongside the sections. */
body.history-previewing #doc-header { display: none; }

/* Per-pane document header — sits at the top of each pane, before sections.
   Typography inherits from .doc-title-edit / .doc-desc-edit (components.css)
   so the pane title/abstract render identically to the real single-doc view.
   The textareas in _renderDocHeaderForPane carry both classes; the inline-
   diff variants (.doc-title-diff / .doc-desc-diff) inherit from changes.css
   which uses the same font recipe. */
.preview-pane .pane-doc-header {
    margin-bottom: 28px;
}
.preview-pane .pane-doc-header .doc-title-row {
    margin-bottom: 6px;
}
/* Explicit empty-title marker — used in preview only when one side genuinely
   has no title (rather than reusing the editable header's "New document"
   placeholder, which would read as a rename instead of an erasure). Matches
   .doc-title-edit's 300/36px recipe so alignment with the other pane holds. */
.preview-pane .pane-doc-header .doc-title-empty {
    font: 300 italic 36px/1.2 var(--serif);
    color: var(--td3);
    letter-spacing: -0.5px;
}

/* ---- Preview section-level restore ----
   Single Select button per section (uses shared .btn-accept green gradient).
   Restore happens only from the top banner. Selected sections get a pale gold
   wash so the selected set is scannable down the page. */
/* Selected sections — gold border + faint gold wash. Gold is the
   user-intent color in the design system (selections, restore-selected banner).
   When selected, the section-inner's direction wash (red for removed, green
   for added) is replaced with the gold wash so the selected state reads as
   one clean gold card — not a red-or-green wash with a gold halo bleeding
   through at the edges. Direction is still signalled by the still-visible
   left-border color (which the .selected rule below overrides to gold too). */
.preview-section.preview-changed.selected,
.preview-section.preview-removed.selected,
.preview-section.preview-added.selected {
    background: var(--accent-subtle);
}
.preview-section.preview-removed.selected .section-inner,
.preview-section.preview-added.selected .section-inner {
    background: var(--accent-subtle);
}

/* Select buttons inherit the green Accept gradient from .btn-accept (every
   per-card Select reads as accept-this-into-the-future-doc). Only the
   per-card size + selected-state ring is local. The deliberate gold action
   is .preview-bar-restore-selected — that one stays gold to mark
   "commit the whole selection". */
.preview-section-select,
.preview-source-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 7px 14px;
}
.preview-section-select svg,
.preview-source-select svg { width: 12px; height: 12px; }
/* Selected (engaged) state — inset depression + faint green ring so the
   button reads as "already accepted" without re-introducing gold. */
.preview-section-select.is-selected,
.preview-source-select.is-selected {
    filter: brightness(0.94);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 0 0 2px rgba(74,140,92,0.28);
}
.preview-section-select.is-selected:hover,
.preview-source-select.is-selected:hover { filter: brightness(1.0); }

/* Dependent-source note next to a section's Select button — small dim text
   warning that selecting this section will also pull N sources back into the
   library. Sits to the left of the button so it's a label, not a separate
   action. */
.preview-select-note {
    font: var(--font-meta);
    color: var(--td3);
    align-self: center;
    margin-right: 2px;
    cursor: help;
    font-variant-numeric: tabular-nums;
}
.preview-title-diff .diff-del,
.preview-meta-diff .diff-del {
    background: var(--red-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.preview-title-diff .diff-add,
.preview-meta-diff .diff-add {
    background: var(--green-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
/* Direction stripe rendered as an inset box-shadow on .section-inner so it
   sits INSIDE the rounded corner and follows the radius cleanly. Using
   `border-left` here doesn't work: with only one side bordered + a
   border-radius, the corner tapers the 3px line down to zero (creating a
   wedge that visually reads as "floating" away from the card). Inset
   box-shadow stays a constant 3px the full height of the rounded box.
     no shadow → changed at rest (body diff carries the signal)
     red       → preview-removed (was here, gone from current)
     green     → preview-added (came after this checkpoint)
     gold      → selected (user selected it for restore) */
.preview-section.preview-removed .section-inner { box-shadow: inset 3px 0 0 var(--red); }
.preview-section.preview-added .section-inner { box-shadow: inset 3px 0 0 var(--green); }
.preview-section.preview-changed.selected .section-inner,
.preview-section.preview-removed.selected .section-inner,
.preview-section.preview-added.selected .section-inner { box-shadow: inset 3px 0 0 var(--accent); }

.preview-section.preview-removed .section-inner {
    background: var(--red-bg);
}
.preview-section.preview-unchanged {
    opacity: 1;
}
.preview-section.preview-added .section-inner {
    background: var(--green-bg);
}

/* Unchanged title/abstract in preview mode — readonly textareas wearing the
   same .doc-title-edit / .doc-desc-edit classes so their height/wrapping
   matches the editable header exactly. Only thing left to override is the
   interaction surface: no caret, no text-selection cursor, can't be focused. */
.doc-title-preview,
.doc-desc-preview {
    cursor: default;
    caret-color: transparent;
    user-select: none;
}
.doc-title-preview:focus,
.doc-desc-preview:focus { outline: none; }