/* ==========================================================================
   Timeline Canvas (Admin) — WYSIWYG restyle
   Matches the public timeline page: bg-primary background with dot-grid,
   spine, era labels and divider lines.
   Tokens in timeline-tokens.css; dots and labels in timeline-dots.css.
   ========================================================================== */

/* ── Page Shell ────────────────────────────────────────────────────────── */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* ── Content shell ─────────────────────────────────────────────────────── */

/*
 * <main> wraps .admin-timeline-canvas but was a plain block element, so the
 * canvas's `flex: 1` below had no effect (flex-basis only sizes direct
 * children of a flex container). The canvas collapsed to its content's
 * min-height (120px, set inline by AdminTimelineAxis.renderAxis) instead of
 * filling the viewport, and its `overflow-y: hidden` then clipped any event
 * dot positioned below the timeline's vertical midpoint — invisible even
 * though it rendered correctly in the DOM.
 */
main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Canvas ────────────────────────────────────────────────────────────── */

.admin-timeline-canvas {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--bg-primary);
    background-image: radial-gradient(
        circle,
        var(--border) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    position: relative;
    border-top: 1px solid var(--admin-border);
    cursor: grab;
    /* Padding parity with frontend timeline-container: var(--space-xl) top/bottom */
    padding: var(--space-xl) 0 var(--space-3xl);
}

/* Horizontal spine line at vertical center.
   Not counter-scaled: this pseudo-element belongs to .admin-timeline-canvas
   (the viewport), not .admin-timeline-world (the element zoom scale()'s) —
   it never inherits the transform, so it already renders at a constant 2px
   at every zoom level. Dividing by --timeline-zoom-scale here would actively
   thin it out at high zoom instead of keeping it stable.
   Deviation from plan task 106: the plan assumed the spine was inside
   .admin-timeline-world and prescribed counter-scaling; that was incorrect
   — the DOM hierarchy places it on the viewport, so no counter-scaling is
   needed. Verified at scale 3.0 on production during Tier 3: spine renders
   at a crisp 2px without any counter-scaling. */
.admin-timeline-canvas::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-strong);
    pointer-events: none;
    z-index: 0;
    transform: translateY(-50%);
}

/* -------------------------------------------------------------------------
   Admin Timeline World — Transform Wrapper (Arbor-style zoom/pan)
   ------------------------------------------------------------------------- */

.admin-timeline-world {
    position: absolute;
    transform-origin: 0 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

/* Suppress the button-zoom transition while a drag-pan gesture is active so
   the canvas tracks the pointer immediately instead of lagging behind it.
   The class is added/removed by AdminCanvasZoom (opt-in via panningClass),
   mirroring the frontend's .timeline-world--panning in
   timeline-line-stability.css. */
.admin-timeline-world--panning {
    transition: none;
}

/* -------------------------------------------------------------------------
   Zoom Controls (matching .arbor-controls, two buttons only)
   ------------------------------------------------------------------------- */

.admin-timeline-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding: var(--space-sm) var(--space-md);
}

.admin-timeline-controls__btn {
    padding: var(--space-xs) var(--space-md);
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    min-height: 36px;
    min-width: 44px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: background var(--duration-fast);
}

.admin-timeline-controls__btn:hover {
    background: var(--border);
}

/* ── Axis ──────────────────────────────────────────────────────────────── */

/* Counter-scaled: this line is a child of #timeline-axis, which lives
   inside .admin-timeline-world, so it inherits its scale() transform and
   would otherwise grow/shrink with zoom exactly like the era dividers did
   before this fix — unlike the spine (.admin-timeline-canvas::after), which
   lives on the un-transformed viewport and needs no counter-scaling.
   Dividing by the live --timeline-zoom-scale (set in
   admin-timeline/timeline-zoom.js's onChange) cancels that out; max(1px, ...)
   stops it collapsing to nothing at high zoom. — setup/ISSUES/Issues_111_to_200.md #197 */
.admin-timeline-axis-line {
    background: var(--border-strong);
    height: max(1px, calc(2px / var(--timeline-zoom-scale, 1)));
}

/* ── Era Dividers (matching frontend: no bands, no ticks) ───────────────── */
/* Era labels superseded by .admin-timeline-era-heading (timeline-era-headings.css) */

/* Matches frontend .timeline-era-marker: solid 1px line, faded.
   Counter-scaled: dividers are children of #timeline-axis, which lives
   inside .admin-timeline-world, so they inherit its scale() transform and
   would otherwise grow/shrink with zoom (3px at scale 3.0). Dividing by the
   live --timeline-zoom-scale (set in admin-timeline/timeline-zoom.js's
   onChange) cancels that out; max(1px, ...) stops it collapsing to nothing
   at high zoom (e.g. scale 3.0: 1px / 3 ≈ 0.33px). Only width is affected —
   background and opacity are unchanged by this. */
.admin-timeline-era-divider {
    width: max(1px, calc(1px / var(--timeline-zoom-scale, 1)));
    background: var(--border);
    opacity: 0.6;
    pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .admin-timeline-toolbar {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
        align-items: stretch;
    }
    .admin-timeline-panel {
        width: 100vw;
    }
}