/* Refinement-Forks Prototype — sandbox styles.
 *
 * Hand-drawn aesthetic borrowed from base.html (Architects Daughter for
 * headings, charcoal/cream/purple palette, 2px borders, drop-shadow boxes).
 * Variants fan symmetrically above + below a horizontal "spine":
 *
 *     idx 0 →  +80   (below)
 *     idx 1 →  -80   (above)
 *     idx 2 → +160   (further below)
 *     idx 3 → -160   (further above)
 *
 * The SVG is sized to viewBox 1000x480 with the spine at y=240, leaving
 * +/- 240px of vertical room for fans. CSS coordinates are written in
 * SVG user space — the JS does NOT translate them into pixel space.
 */

.rp-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.rp-header {
    margin-bottom: 1.5rem;
}

.rp-header h1,
.rp-header h2 {
    font-size: 1.4rem;
    color: var(--purple);
    display: inline-block;
    margin: 0 0 0.4rem 0;
}
.rp-edit-ready {
    font-size: 1.8rem !important;
}

/* Pro-upgrade toast — mirrors result.html's .upgrade-toast pattern.
   Positioned at the bottom of the prototype page so it sits below the
   timeline + actions instead of competing with them at the top. */
.upgrade-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--gold-light);
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin: 1.5rem 0 1rem 0;
    box-shadow: 4px 4px 0 var(--charcoal);
}
.upgrade-toast .toast-text { flex: 1; color: var(--charcoal); }
.upgrade-toast .toast-actions { display: flex; gap: 0.5rem; align-items: center; }
.upgrade-toast .toast-dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--charcoal);
}

/* Phase 41 (EDIT-UX-08 / -10 / -11): editor status banner. Single live
   region above the action row. Variant attribute drives color so a
   paywall reads differently from an info nudge. */
.editor-status {
    margin: 1rem 0 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 2px solid var(--charcoal);
    background: var(--cream);
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
.editor-status[data-variant="paywall"] {
    background: var(--gold);
    border-color: var(--charcoal);
}
.editor-status[data-variant="error"] {
    background: #fde8e8;
    border-color: #b00;
    color: #6a0000;
}
.editor-status[data-variant="success"] {
    background: #e6f6ea;
    border-color: #1a7a3a;
    color: #144d24;
}
.editor-status .editor-status-cta {
    color: var(--purple);
    font-weight: 600;
    text-decoration: underline;
}

/* Action row at the bottom — Download / Export / Share. */
.rp-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.rp-actions .btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--charcoal);
    cursor: pointer;
}
.rp-actions .btn-primary { background: var(--purple); color: white; }
.rp-actions .btn-gold { background: var(--gold); color: var(--charcoal); }
.rp-actions .btn-outline { background: transparent; color: var(--purple); border-color: var(--purple); }
.rp-actions .btn:hover { box-shadow: 3px 3px 0 var(--charcoal); transform: translateY(-1px); }

/* Soft signup nudge next to Export XML — non-blocking, italicized,
   gives a conversion path without hostaging the export. */
.rp-nudge {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    margin-left: 0.25rem;
}
.rp-nudge a {
    color: var(--purple);
    font-weight: 600;
    text-decoration: underline;
    font-style: normal;
}
.rp-nudge a:hover { color: var(--purple-light); }

/* Share dropdown — minimal version of result.html's pattern. */
.share-wrap { position: relative; display: inline-block; }
.share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: white;
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--charcoal);
    min-width: 240px;
    z-index: 50;
    padding: 0.4rem 0;
    text-align: left;
}
.share-menu.is-open { display: block; }
.share-menu .group-title {
    padding: 0.4rem 1rem 0.2rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    font-weight: 600;
}
.share-menu .item {
    display: block;
    width: 100%;
    padding: 0.45rem 1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--charcoal);
}
.share-menu .item:hover:not(:disabled) { background: var(--cream); }
.share-menu .item:disabled { opacity: 0.4; cursor: not-allowed; }

.rp-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    background: var(--gold-light);
    border: 2px solid var(--charcoal);
    border-radius: 999px;
    vertical-align: middle;
    color: var(--charcoal);
}

.rp-sub {
    color: var(--charcoal);
    margin-top: 0.5rem;
    font-size: 1rem;
}

.rp-sub em {
    font-style: italic;
    color: var(--purple);
}

/* Video player — capped width so timeline + player line up visually. */
.rp-player {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    background: black;
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--charcoal);
}

/* Timeline shell holds the SVG at a fixed aspect to match its viewBox. */
.rp-timeline-shell {
    background: white;
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--charcoal);
    padding: 1rem;
    margin-top: 1rem;
}

#timeline-svg {
    display: block;
    width: 100%;
    height: 200px;
    cursor: crosshair;
    user-select: none;
}

/* Transparent hit-rect: gives the spine group a real bounding box and a
   fat clickable area for click-to-seek without showing visually. */
.spine-hit {
    fill: transparent;
    pointer-events: all;
}

/* Numerical timecodes above the spine. */
.tc-tick {
    stroke: var(--charcoal);
    stroke-width: 1.5;
    pointer-events: none;
}
.tc-label {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    fill: var(--charcoal);
    pointer-events: none;
    opacity: 0.75;
}

/* Vertical playhead scrubber line. */
.scrubber-line {
    stroke: #d24a4a;
    stroke-width: 2;
    pointer-events: none;
    opacity: 0.8;
}

/* Close-X button on the active region. */
.region-close circle {
    fill: var(--cream);
    stroke: var(--charcoal);
    stroke-width: 1.5;
    cursor: pointer;
}
.region-close text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: bold;
    fill: var(--charcoal);
    cursor: pointer;
    pointer-events: none;
}
.region-close:hover circle {
    fill: #ffd9d9;
}

/* V1 clips: real, first-class items on the timeline (resize handles in JS).
   pointer-events on the rect must NOT intercept the drag-to-create-region
   handler that lives on the SVG itself, so the rect stays passive while
   the explicit `.clip-handle` rects on each edge are interactive. */
.clip-block {
    stroke: var(--charcoal);
    stroke-width: 1.5;
    pointer-events: none;
}
.clip-handle {
    fill: rgba(61, 37, 101, 0);   /* invisible until hovered */
    cursor: ew-resize;
    pointer-events: all;
}
.clip-handle:hover {
    fill: var(--purple);
    fill-opacity: 0.5;
}

/* Multi-selection — clips with ▶| selected get a darker outline so
   it's clear they'll move together when you grab any of them. */
.v1-clip.is-selected .clip-block {
    stroke: var(--purple);
    stroke-width: 2.5;
}

/* "Select all to the right" button — hidden until hover. */
.clip-select-forward {
    opacity: 0;
    transition: opacity 0.1s;
    cursor: pointer;
}
.v1-clip:hover .clip-select-forward {
    opacity: 1;
}
.clip-select-forward circle {
    fill: var(--cream);
    stroke: var(--purple);
    stroke-width: 1.5;
}
.clip-select-forward:hover circle {
    fill: var(--gold-light);
}
.clip-select-forward text {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    fill: var(--purple);
    pointer-events: none;
}

/* Note text floating above each variant track (replaces the old vN
   label). Sits in the gap between the spine area and the track row. */
.fork-note-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    fill: var(--charcoal);
    pointer-events: none;
}
.clip-label {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    fill: var(--charcoal);
    pointer-events: none;
    opacity: 0.85;
}

/* Pan + zoom toolbar at the TOP of the timeline shell. Slim row.
   Pan slider is light + thin so it doesn't compete with the timeline. */
.refine-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.rp-pan-slider {
    flex: 1;
    height: 6px;
    margin: 0;
    accent-color: var(--purple);
    cursor: pointer;
    opacity: 0.55;
}
.rp-pan-slider:hover { opacity: 0.85; }
.rp-pan-slider:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Tiny "v1" badge on the spine inside a fork's x-range. */
.spine-v1-label {
    font-family: 'Architects Daughter', cursive;
    font-size: 16px;
    fill: var(--purple);
    pointer-events: none;
    opacity: 0.85;
}

/* Zoom toolbar — small/light, sits next to the pan slider at the top. */
.refine-zoom-row {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    margin: 0;
}
.refine-zoom-row button {
    background: white;
    border: 1.5px solid var(--charcoal);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--charcoal);
    opacity: 0.7;
    transition: opacity 0.1s;
}
.refine-zoom-row button:hover { opacity: 1; }
.refine-zoom-row button:hover { background: var(--cream); }
.refine-zoom-row button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Help/description copy under the title */
.refine-help {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

/* ─── Spine ───────────────────────────────────────────────────────── */
#spine .prev-clip,
#spine .next-clip {
    fill: var(--cream);
    stroke: var(--charcoal);
    stroke-width: 2;
}

#spine .prev-label,
#spine .next-label {
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    fill: var(--charcoal);
}

#spine-line {
    stroke: var(--charcoal);
    stroke-width: 2;
}

/* ─── Region overlay (the box you drag) ────────────────────────────── */
.region-ghost {
    fill: var(--purple);
    fill-opacity: 0.15;
    stroke: var(--purple);
    stroke-width: 2;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

.region-body {
    fill: var(--purple);
    fill-opacity: 0.18;
    stroke: var(--purple);
    stroke-width: 2;
    cursor: grab;
}

.region-body.is-dragging {
    cursor: grabbing;
}

.region-handle {
    fill: var(--purple);
    stroke: var(--purple-dark);
    stroke-width: 1.5;
    cursor: ew-resize;
}

/* ─── Region edit panel (note + buttons) ───────────────────────────── */
#region-edit-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--cream);
    border: 2px solid var(--charcoal);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#region-edit-panel[hidden] {
    display: none;
}

#region-note-input {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 0.55rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    border: 2px solid var(--charcoal);
    border-radius: 6px;
    background: white;
}

#save-refine-btn,
#cancel-refine-btn {
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 2px solid var(--charcoal);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--charcoal);
    transition: transform 0.05s ease;
}

#save-refine-btn {
    background: var(--purple);
    color: var(--cream);
}

#save-refine-btn:hover {
    background: var(--purple-light);
}

#cancel-refine-btn {
    background: white;
    color: var(--charcoal);
}

#save-refine-btn:active,
#cancel-refine-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--charcoal);
}

#region-time-readout {
    font-family: 'Architects Daughter', cursive;
    color: var(--purple);
    font-size: 1rem;
    margin-left: auto;
}

/* ─── Forks ────────────────────────────────────────────────────────── */
.fork-box {
    /* Group; visual styling lives on its child <rect> + <text>. */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fork-box.is-visible {
    opacity: 1;
}

/* Fork track background — the row outline behind variant clips. */
.fork-box .fork-track-bg {
    fill: white;
    stroke: var(--charcoal);
    stroke-width: 1.5;
    rx: 4;
    ry: 4;
}
.fork-box[data-status='rendering'] .fork-track-bg {
    stroke-dasharray: 6 4;
    stroke: var(--purple);
    fill: var(--cream);
}
.fork-box[data-status='done'] .fork-track-bg {
    stroke: var(--purple);
}
.fork-box[data-selected='true'] .fork-track-bg {
    stroke-width: 2.5;
    fill: var(--gold-light);
}

/* Variant clips inside a fork track — same look as V1 clips but smaller. */
.fork-box .variant-clip {
    stroke: var(--charcoal);
    stroke-width: 1;
    pointer-events: none;
    rx: 3;
    ry: 3;
}
.fork-box .variant-clip-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    fill: var(--charcoal);
    pointer-events: none;
    opacity: 0.85;
}

/* "+ add clip" pip on the right edge of each variant track. */
.variant-add-clip {
    cursor: pointer;
}
.variant-add-clip circle {
    fill: var(--cream);
    stroke: var(--purple);
    stroke-width: 1.5;
}
.variant-add-clip:hover circle {
    fill: var(--gold-light);
}
.variant-add-clip text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: bold;
    fill: var(--purple);
    pointer-events: none;
}

.fork-box .fork-label {
    font-family: 'Architects Daughter', cursive;
    font-size: 24px;
    fill: var(--charcoal);
    pointer-events: none;
}

.fork-box .fork-counter {
    font-family: 'Architects Daughter', cursive;
    font-size: 26px;
    fill: var(--purple);
    pointer-events: none;
}

.fork-box .fork-note {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    fill: var(--charcoal);
    pointer-events: none;
}

/* ─── Connectors ───────────────────────────────────────────────────── */
.connector {
    fill: none;
    stroke: var(--purple);
    stroke-width: 1.5;
    stroke-opacity: 0.55;
}

.connector.is-rendering {
    stroke-dasharray: 4 3;
}

/* ─── Junctions (●/○/⏳) ───────────────────────────────────────────── */
.junction {
    cursor: pointer;
}

.junction[data-state='unselected'] .j-circle {
    fill: white;
    stroke: var(--charcoal);
    stroke-width: 2;
}

.junction[data-state='selected'] .j-circle {
    fill: var(--purple);
    stroke: var(--purple-dark);
    stroke-width: 2;
}

.junction[data-state='rendering'] .j-circle {
    fill: var(--cream);
    stroke: var(--purple);
    stroke-width: 2;
    stroke-dasharray: 3 2;
}

.junction .j-icon {
    font-size: 14px;
    fill: var(--charcoal);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* ─── History stepper inside a chained fork ────────────────────────── */
.history-stepper {
    cursor: default;
}

.history-stepper .stepper-bg {
    fill: var(--cream);
    stroke: var(--charcoal);
    stroke-width: 1.5;
    rx: 4;
    ry: 4;
}

.history-stepper .stepper-prev,
.history-stepper .stepper-next {
    cursor: pointer;
    fill: var(--purple);
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    text-anchor: middle;
    dominant-baseline: central;
    user-select: none;
}

.history-stepper .stepper-prev[data-disabled='true'],
.history-stepper .stepper-next[data-disabled='true'] {
    fill: #aaa;
    cursor: not-allowed;
}

.history-stepper .stepper-label {
    fill: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.rp-footnote {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* Off-screen controls — visually invisible but still clickable, so the
   e2e tests can drive #save-refine-btn / #cancel-refine-btn directly. */
.rp-offscreen-controls {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Notes list — compact rows matching result.html's pattern ───────
   Each row: time range + note text + × delete. No A/B pills, no card
   chrome, no section title — directly below the timeline shell. */
.region-notes-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.region-notes-list:empty { display: none; }
.region-note-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    border: 2px solid var(--charcoal);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    box-shadow: 2px 2px 0 var(--charcoal);
}
.region-note-row .region-time {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.85rem;
    color: var(--purple);
    min-width: 105px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.region-note-row .region-note-text,
.region-note-row .region-input {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.15rem 0.25rem;
}
.region-note-row .region-input:focus {
    box-shadow: inset 0 -2px 0 var(--purple);
}
.region-note-row .region-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #cc4040;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.35rem;
}

.rp-footnote code {
    background: var(--cream);
    border: 1px solid var(--charcoal);
    border-radius: 3px;
    padding: 0 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

/* ─── Phase 40: desktop horizontal scroll (EDIT-UX-05/06/07) ──────────
   Wrap the timeline SVG in a horizontally-scrollable surface so a long
   timeline can pan via trackpad gesture or shift-mousewheel — both are
   native browser behaviors, no JS needed.

   Mobile path: base rules below (no horizontal-overflow override) keep
   the SVG filling the shell at width:100%, matching pre-Phase-40 behavior.
   The media query below ONLY overrides for desktop, so mobile is
   preserved by construction. */
.rp-timeline-scroll {
    /* Flex so the sticky label rail and SVG sit side-by-side. On mobile
       the rail is hidden (default rule below) so the SVG occupies the
       full width as before. */
    display: flex;
    align-items: stretch;
    width: 100%;
}
.rp-track-label-rail {
    /* Hidden by default (mobile). Desktop media query reveals it as a
       sticky left column. Width is fixed so SVG layout is predictable. */
    display: none;
    flex: 0 0 88px;
    width: 88px;
    background: var(--cream);
    border-right: 2px solid var(--charcoal);
    padding: 0.5rem 0.4rem;
    box-sizing: border-box;
}
.rp-track-label {
    font-family: 'Architects Daughter', cursive;
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.2;
}

@media (min-width: 769px) {
    /* Desktop: enable horizontal scrolling on the wrapper. The browser
       only renders a scrollbar when the SVG actually overflows; trackpad
       pan + shift-mousewheel are native over this surface. */
    .rp-timeline-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        /* Smooth out scroll interactions on touch-capable trackpads. */
        -webkit-overflow-scrolling: touch;
    }
    /* Reveal the per-track label rail and pin it to the left edge so it
       stays visible while the SVG scrolls underneath. EDIT-UX-06. */
    .rp-track-label-rail {
        display: block;
        position: sticky;
        left: 0;
        z-index: 2;
    }
    /* Force the SVG to a minimum pixel width so any desktop viewport
       narrower than this engages the horizontal scroll. EDIT-UX-05.
       Future long-EDL work can bump this with a `.is-long` modifier on
       `.rp-timeline-scroll`. */
    .rp-timeline-scroll #timeline-svg {
        min-width: 1200px;
        flex: 0 0 auto;
    }
}