/* ══════════════════════════════════════════════════════════════
   Time control widget — Field Notebook v2 standard.
   Source of truth: Figma node 1782:101 (Galileo-Cloud).
   Spec: galileo_viewer_kit/journal/007/2026-05-03_05_time_control_widget_standard.md
   ──────────────────────────────────────────────────────────────
   Layout (left → right): speed-dial · pause · scrubber · readout · skip-pair.
   Two visible states: collapsed default (cream dial), engaged (green dial,
   speed popover floating above).
   ══════════════════════════════════════════════════════════════ */

#time-control,
.preview-time-control {
    width: 530px;
    max-width: calc(100vw - 40px);
    height: 48px;
    padding: 8px 10px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 10px;

    background: var(--color-surface, #FFFDF5);
    border: 1.5px solid var(--color-text, #1A1A1A);
    border-radius: 12px;
    box-shadow: 3px 3px 0 rgba(26, 26, 26, 0.18);
    color: var(--color-text, #1A1A1A);
    pointer-events: auto;
}

#time-control {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;

    /* Hold a 20 px gap to the bottom-left restart pill and the bottom-
       right camera-controls cluster. Per-side reserve =
       20 px viewport inset + ~160 px widest neighbour + 20 px gap.
       Below 530 px the scrubber (flex:1) absorbs the squeeze. */
    --tc-side-reserve: 200px;
    max-width: calc(100vw - var(--tc-side-reserve) * 2);
}

#time-control[hidden] { display: none; }

/* ── Speed dial — collapsed default + engaged green ──────── */

.tc-speed-dial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 54px;
    padding: 0 10px 0 12px;
    gap: 4px;

    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.20));
    border-radius: 5px;
    background: var(--color-surface, #FFFDF5);
    color: var(--color-text-secondary, #43423D);

    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;

    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.tc-speed-dial:hover {
    background: var(--color-surface-hover, #EDE9D9);
    color: var(--color-text, #1A1A1A);
}

.tc-speed-dial.engaged {
    background: var(--color-success, #1F8F4E);
    border-color: var(--color-success-border, #0F5C4A);
    color: var(--color-white, #FFFDF5);
}

.tc-speed-dial.engaged:hover {
    background: var(--color-success-hover, #177A40);
}

.tc-speed-dial .tc-speed-chev {
    width: 12px;
    height: 12px;
    transition: transform 120ms ease-out;
}

.tc-speed-dial.engaged .tc-speed-chev {
    transform: rotate(180deg);
}

/* ── Pause / play button ─────────────────────────────────── */

.tc-pause {
    width: 44px;
    height: 32px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-success-border, #0F5C4A);
    border-radius: 5px;
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);

    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease-out, transform 80ms;
}

.tc-pause:hover { background: var(--color-success-hover, #177A40); }
.tc-pause:active { transform: scale(0.96); }

.tc-pause svg { width: 16px; height: 16px; }

/* When paused, swap the green chrome for cream + ink so the play icon
   reads as "press to resume" rather than "running". */
.tc-pause.paused {
    background: var(--color-surface, #FFFDF5);
    border-color: var(--color-border-strong, rgba(26, 26, 26, 0.40));
    color: var(--color-text, #1A1A1A);
}
.tc-pause.paused:hover { background: var(--color-surface-hover, #EDE9D9); }

/* ── Scrubber track ──────────────────────────────────────── */

.tc-scrubber {
    flex: 1 0 0;
    min-width: 1px;
    height: 5px;
    background: rgba(26, 26, 26, 0.10);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    align-self: center;

    /* Expand the touch / hit area without growing the visual stripe. */
    margin: 14px 0;
}
.tc-scrubber::before { /* expanded hit-rect (transparent) */
    content: "";
    position: absolute;
    inset: -14px 0;
}

.tc-scrubber-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: var(--color-success, #1F8F4E);
    border-radius: 3px;
    pointer-events: none;
}

.tc-scrubber-handle {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-text, #1A1A1A);
    border: 2px solid var(--color-surface, #FFFDF5);
    box-shadow: 0 0 0 1px var(--color-text, #1A1A1A);
    pointer-events: none;
    will-change: left;
}

.tc-scrubber.dragging .tc-scrubber-handle {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ── Readout ─────────────────────────────────────────────── */

.tc-readout {
    width: 85px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #1A1A1A);
    white-space: nowrap;
}

/* ── Skip pair (joined buttons) ──────────────────────────── */

.tc-skip-pair {
    display: inline-flex;
    align-items: center;
    height: 32px;
    flex-shrink: 0;
}

.tc-skip-btn {
    width: 44px;
    height: 32px;
    padding: 0;
    margin: 0 -1px 0 0;        /* merge inner edge with neighbour */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.20));
    background: var(--color-surface, #FFFDF5);
    color: var(--color-text-secondary, #43423D);
    cursor: pointer;

    transition: background 120ms ease-out, color 120ms ease-out, transform 80ms;
}

.tc-skip-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tc-skip-btn:last-child {
    margin-right: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.tc-skip-btn:hover {
    background: var(--color-surface-hover, #EDE9D9);
    color: var(--color-text, #1A1A1A);
    z-index: 1;                 /* lift hovered button above its neighbour's border */
}
.tc-skip-btn:active { transform: scale(0.96); }

.tc-skip-btn svg { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════
   Speed popover — compact vertical card (Figma 110:453).
   3 forward speeds, 3x at top, 1x at bottom. Floats above the
   dial when the dial is engaged.
   ══════════════════════════════════════════════════════════ */

.tc-speed-popover {
    position: fixed;
    z-index: 61;

    box-sizing: border-box;
    padding: 14px 18px 12px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;

    background: var(--color-surface, #FFFDF5);
    border: 1.5px solid var(--color-text, #1A1A1A);
    border-radius: 12px;
    box-shadow: 3px 3px 0 rgba(26, 26, 26, 0.18);
    pointer-events: auto;
}

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

.tc-speed-popover .tc-speed-cell {
    width: 54px;
    height: 32px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.20));
    border-radius: 5px;
    background: var(--color-surface, #FFFDF5);
    color: var(--color-text-secondary, #43423D);

    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.tc-speed-popover .tc-speed-cell:hover {
    background: var(--color-surface-hover, #EDE9D9);
    color: var(--color-text, #1A1A1A);
}

.tc-speed-popover .tc-speed-cell.active {
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);
    border-color: var(--color-success-border, #0F5C4A);
}

.tc-speed-popover .tc-speed-cell.active:hover {
    background: var(--color-success-hover, #177A40);
}

/* ══════════════════════════════════════════════════════════
   Catalog showcase: the live wrapper uses #time-control (fixed-
   positioned chrome). The catalog tiles use .preview-time-control
   so each tile renders inline at its natural place.

   Inside a .preview-time-control tile a .tc-speed-popover
   demonstrates the engaged state inline as well — wrap it in
   .preview-with-popover so the popover sits above the bar
   without absolute positioning.
   ══════════════════════════════════════════════════════════ */

/* Catalog wrapper around the time-control bar that hosts an inline
   speed popover. The popover is a dropdown: it floats above the bar
   and overlays anything sitting above it (e.g. a stacked device
   widget), rather than displacing layout. */
.preview-with-popover {
    position: relative;
    display: inline-block;
}
.preview-with-popover .tc-speed-popover {
    position: absolute;
    /* Bar's left padding is 10 px; Figma (110:453) shifts the popover
       11.5 px further left of the dial, so the popover renders 1.5 px
       to the left of the bar's outer edge. */
    left: -1.5px;
    bottom: calc(100% + 6px);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #time-control {
        width: calc(100vw - 24px);
        gap: 6px;
        padding: 6px 8px;
    }
    .tc-readout { width: 72px; font-size: 12px; }
    .tc-speed-dial { width: 48px; padding: 0 6px 0 8px; }
    .tc-skip-btn { width: 36px; }
    .tc-pause { width: 36px; }
}