/* ── Run timeline (RunTimeline.tsx) ─────────────────────────────────────────
   Shared by the studio workspace (G-B) and /generate (G-C). Proposal §4.3:
   glass panel at the bottom of the stage, steps Queued → Image → Mesh →
   Optimizing → Ready as dots; done dots fill with the accent, the current dot
   is the determinate `.lp-ring` (base.css), elapsed mm:ss in mono.

   Depends on base.css tokens and `.lp-ring`; must load after base.css.
   Only motion: the done-dot fill. Reduced motion → instant. */

.lp-run-timeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-glass, color-mix(in oklab, var(--bg-elev) 72%, transparent));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--fg-muted);
}
.lp-run-timeline.is-overlay {
    position: absolute;
    z-index: 3;
    left: 12px;
    right: 12px;
    bottom: 12px;
}

.lp-run-timeline-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-run-timeline-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--fg-faint);
}
/* Connector between two steps. */
.lp-run-timeline-step + .lp-run-timeline-step::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--line-strong);
}
.lp-run-timeline-step.is-current { color: var(--fg); font-weight: 500; }
.lp-run-timeline-step.is-done { color: var(--fg-muted); }

/* Dot: outline (::before) + accent fill (::after, scaled in when done).
   RunTimelineDot.tsx also puts the state on the dot itself, so the same dot
   renders outside a step row (the /tools/lod level table, T82). */
.lp-run-timeline-dot {
    position: relative;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.lp-run-timeline-dot::before {
    content: "";
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
}
.lp-run-timeline-dot::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
}
.lp-run-timeline-step.is-done .lp-run-timeline-dot::after,
.lp-run-timeline-dot.is-done::after { transform: scale(1); }
.lp-run-timeline-step.is-current .lp-run-timeline-dot::before,
.lp-run-timeline-dot.is-current::before { opacity: 0; }
.lp-run-timeline-dot .lp-ring {
    --lp-ring-size: 14px;
    --lp-ring-width: 2.5px;
    position: absolute;
}
@media (prefers-reduced-motion: no-preference) {
    .lp-run-timeline-dot::after { transition: transform var(--dur-panel) var(--ease-emph); }
}

.lp-run-timeline-elapsed {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
}

/* Screen-reader-only live region (current step name). */
.lp-run-timeline-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Narrow stages: only the current step keeps its label. */
@media (max-width: 767.98px) {
    .lp-run-timeline-step:not(.is-current) .lp-run-timeline-label { display: none; }
}