/* "Behind real time" strip: one element shared by Feeds (full: up to 4 lanes and a legend) and
   Multiview (slim: one row). main.js moves it into the active page's .strip-slot; view-transition-name
   lets it morph between them. NOW is the right edge; more delay is further left. Everything that
   moves is positioned by transform (see strip.js). */
.strip { view-transition-name: strip; --lanes: 1; --lane: 1.375rem; --axis: 1.25rem;
  position: relative; display: flex; align-items: flex-end; gap: var(--s5); margin-bottom: var(--s4); padding: .625rem var(--s4) .375rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.strip-slot:empty { display: none; }

/* Title and legend: filled = locked, hollow = as received (floats), amber ! = late or not received. */
.strip-head { flex-shrink: 0; align-self: stretch; width: 6.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding: .125rem 0 .25rem; }
.strip-title { font: italic 800 1.0625rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.strip-legend { display: grid; gap: .25rem; font: .6875rem/1 var(--mono); color: var(--muted); }
.strip-legend > span { display: flex; align-items: center; gap: .5rem; }
.strip-legend .st-flag { width: .5rem; height: .75rem; }
.strip-legend .st-flag.k-warn::after { font-size: .5625rem; }

.track { position: relative; flex: 1; min-width: 0; height: calc(var(--lanes) * var(--lane) + var(--axis)); min-height: 5rem; }

/* Grid: one line per tick, labels under the axis. */
.st-grid { position: absolute; inset: 0; pointer-events: none; }
.st-tick { position: absolute; left: 0; top: 0; bottom: var(--axis); width: 1px; background: var(--line); }
.st-tl { position: absolute; top: 100%; left: 0; padding-top: .3125rem; transform: translateX(-50%); font: .6875rem/1 var(--mono); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-axis { position: absolute; left: 0; right: 0; bottom: var(--axis); height: 1px; background: var(--line-2); pointer-events: none; }
/* Broken axis: the scale skips from the nearest output to NOW. */
.st-break { position: absolute; left: 0; bottom: calc(var(--axis) - .5rem); width: 1.75rem; height: 1rem; background: var(--panel); }
.st-break i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); transform: skewX(-24deg); }
.st-break i:first-child { left: .5625rem; }
.st-break i:last-child { left: .9375rem; }

/* Rug: a tick on the axis at each output's exact delay (also for outputs folded into "+N"). */
.st-rugs { position: absolute; left: 0; right: 0; bottom: var(--axis); height: 0; pointer-events: none; }
.st-rug { position: absolute; left: 0; bottom: 1px; width: 2px; height: .3125rem; background: var(--accent); }
.st-rug.k-float { background: rgba(54, 214, 255, .55); }
.st-rug.k-warn { background: var(--amber); }
.st-rug.k-off { background: var(--line-2); }
.st-rug.selected { height: .625rem; background: var(--text); }

/* NOW: real time, the right edge. Draws upward on first show (S5). */
.st-now { position: absolute; right: 0; top: 0; bottom: 0; width: 2.5rem; }
.st-now-line { position: absolute; right: 0; top: 0; bottom: calc(var(--axis) - .3125rem); width: 2px; background: var(--text); transform-origin: bottom; }
.st-now-line.draw { animation: stNowDraw var(--t-stage) var(--e-whip) 120ms both; }
@keyframes stNowDraw { from { transform: scaleY(0); } to { transform: none; } }
.st-now-label { position: absolute; right: 0; bottom: 0; font: italic 800 .875rem/1 var(--display); letter-spacing: .08em; color: var(--text); }

/* Markers: [label][flag], the flag's foot on the output's delay. Lane 0 sits on the axis. */
.st-marks { position: absolute; left: 0; right: 0; bottom: calc(var(--axis) + 1px); height: calc(var(--lanes) * var(--lane)); }
.mk, .mk-cl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .25rem; height: var(--lane); padding: 0 0 0 .125rem; background: none; border: 0; border-radius: 2px; color: var(--text-2); font: 700 .75rem var(--mono); white-space: nowrap; cursor: pointer; }
.mk:focus-visible, .mk-cl:focus-visible { outline-offset: 0; }
.mk-l { padding: .1875rem .25rem; border-radius: 2px; line-height: 1; transition: background-color var(--t-press), color var(--t-press); }
.st-flag { position: relative; display: inline-block; flex-shrink: 0; width: .625rem; height: 1rem; transform: skewX(-14deg); transform-origin: bottom; }
.st-flag.k-lock { background: var(--accent); }
.st-flag.k-float { box-shadow: inset 0 0 0 2px var(--accent); }
.st-flag.k-warn { background: var(--amber); }
.st-flag.k-warn::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; transform: skewX(14deg); font: 800 .75rem/1 var(--body); color: var(--on-amber); }
.st-flag.k-off { box-shadow: inset 0 0 0 2px var(--line-2); }
.mk.k-warn .mk-l { color: var(--amber); }
.mk.k-off { color: var(--faint); }
.mk:hover .mk-l, .mk:focus-visible .mk-l { color: var(--text); background: var(--hover); }
.mk.selected .mk-l { background: var(--accent); color: var(--on-accent); }
.mk.selected.k-warn .mk-l { background: var(--amber); color: var(--on-amber); }
.mk.selected .st-flag.k-lock { background: var(--accent-hi); }
/* "+N": outputs that didn't fit in any lane; the tip lists them, a click picks one. */
.mk-cl-n { display: inline-flex; align-items: center; height: 1.0625rem; padding: 0 .375rem; border: 1px solid var(--accent); color: var(--accent); font: 800 .8125rem/1 var(--display); letter-spacing: .04em; transform: skewX(-14deg); }
.mk-cl:hover .mk-cl-n { background: rgba(54, 214, 255, .12); }
.mk-cl.warn .mk-cl-n { border-color: var(--amber); color: var(--amber); }
.mk-cl.selected .mk-cl-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* The full delay of the hovered or selected output, on the axis under it. */
.st-cur { position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; height: calc(var(--axis) - .125rem); padding: 0 .375rem; background: var(--accent); color: var(--on-accent); font: 700 .75rem/1 var(--mono); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.st-cur.hover { background: var(--text); color: var(--ink); }

.track-empty { position: absolute; left: 0; right: 3rem; top: 0; bottom: var(--axis); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8125rem; }

/* Slim (Multiview): one row about 2.5rem tall, flags and slot labels only. */
.strip.slim { --lane: 1.25rem; --axis: .875rem; padding: .3125rem var(--s4) .1875rem; }
.strip.slim .strip-head { display: none; }
.strip.slim .track { min-height: 0; }
.strip.slim .st-tl { padding-top: .125rem; font-size: .6875rem; }
.strip.slim .st-now-label { font-size: .75rem; }
.strip.slim .st-flag { height: .875rem; }