/**
 * strips.css — Strips x Race.
 *
 * Flight strips with the race folded in: one lane per child showing the plan
 * as a ghost bar and the actual as a solid one, a runner disc riding the
 * now-line, and lanes ordered by who is closest to the door.
 *
 * Ported from frontend/lab/13-strips-race.html, round 3 — the bouncing icons
 * the owner disliked are not here, and the space that freed goes to taller
 * lanes and a NEXT UP panel.
 */

#screen-strips {
  --st-bg: #0a0f0d;
  --st-text: #e2e8f0;
  --st-muted: #64748b;
  --st-line: rgba(100, 116, 139, .22);
  --st-green: #22c55e;
  --st-amber: #eab308;
  --st-red: #ff3b3b;
  --st-display: 'Rajdhani', sans-serif;
  --st-mono: 'Share Tech Mono', monospace;

  position: relative;
  overflow: hidden;
}

.st-wrap {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.4vh;
  padding: 2.4vh 2.2vw;
  box-sizing: border-box;
}

/* ── Time axis ──────────────────────────────────────────────────── */

.st-axis {
  position: relative;
  height: 3vh;
  margin-left: 13vw;         /* clears the lane headers */
  border-bottom: 1px solid var(--st-line);
}
.st-axis .tick {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px solid var(--st-line);
}
.st-axis .tick span {
  position: absolute;
  left: .35vw;
  bottom: .3vh;
  font: 1.6vh var(--st-mono);
  color: var(--st-muted);
  letter-spacing: .1em;
}

/* ── Lanes ──────────────────────────────────────────────────────── */

.st-lanes { position: relative; display: flex; flex-direction: column; gap: 1vh; min-height: 0; }

.st-lane {
  display: grid;
  grid-template-columns: 13vw 1fr;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  /* Lanes reorder as children get closer to the door; the transform makes
     that a slide rather than a jump. */
  transition: opacity .5s ease;
}
.st-lane.departed { opacity: .45; }

.st-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3vh;
  padding-right: 1vw;
  border-left: .45vh solid var(--st-cc, var(--st-muted));
  padding-left: .8vw;
}
.st-head .nm {
  font: 700 3.2vh/1 var(--st-display);
  color: var(--st-cc, var(--st-text));
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: .5vw;
}
.st-head .rank {
  font: 1.5vh var(--st-mono);
  color: var(--st-bg);
  background: var(--st-cc, var(--st-muted));
  border-radius: .3vh;
  padding: .1vh .35vw;
  letter-spacing: .05em;
}
.st-head .buf { font: 2vh var(--st-mono); font-variant-numeric: tabular-nums; }
.st-head .buf.green { color: var(--st-green); }
.st-head .buf.amber { color: var(--st-amber); }
.st-head .buf.red   { color: var(--st-red); }
.st-head .sub { font: 1.5vh var(--st-mono); color: var(--st-muted); letter-spacing: .1em; text-transform: uppercase; }

/* The track a lane's bars sit on */
.st-track { position: relative; }
.st-track::before {          /* the lane's baseline */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--st-line);
}

/* Plan: an outlined ghost of what should have happened */
.st-plan {
  position: absolute;
  top: 14%;
  height: 30%;
  border: 1px dashed rgba(100, 116, 139, .5);
  border-radius: .3vh;
  box-sizing: border-box;
}
.st-plan i {
  position: absolute;
  left: .3vw; top: 50%;
  transform: translateY(-50%);
  font: 1.4vh var(--st-mono);
  font-style: normal;
  color: var(--st-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* Actual: what really happened */
.st-act {
  position: absolute;
  top: 50%;
  height: 30%;
  border-radius: .3vh;
  box-sizing: border-box;
  background: var(--st-cc, var(--st-muted));
  opacity: .85;
  /* Back-to-back tasks touch exactly, so without a seam a run of four
     completed blocks reads as one long bar. */
  box-shadow: inset -1px 0 0 var(--st-bg), inset 1px 0 0 var(--st-bg);
}
.st-act.done    { background: var(--st-green); }
.st-act.active  { background: var(--st-cc, var(--st-text)); box-shadow: 0 0 1.6vh color-mix(in srgb, var(--st-cc, #64748b) 55%, transparent); }
.st-act.over    { background: var(--st-red); }
.st-act.skipped { background: repeating-linear-gradient(45deg, var(--st-amber) 0 .5vh, transparent .5vh 1vh); }
.st-act.failed  { background: repeating-linear-gradient(45deg, var(--st-red) 0 .5vh, #3a0000 .5vh 1vh); }

/* Checkpoint rings at each block boundary */
.st-cp {
  position: absolute;
  top: 46%;
  width: .9vh; height: .9vh;
  margin: -.45vh 0 0 -.45vh;
  border-radius: 50%;
  border: 1px solid rgba(100, 116, 139, .55);
  background: var(--st-bg);
}
.st-cp.passed { border-color: var(--st-green); background: var(--st-green); }

/* The runner: where this child actually is, right now */
.st-runner {
  position: absolute;
  top: 65%;
  width: 1.8vh; height: 1.8vh;
  margin: -.9vh 0 0 -.9vh;
  border-radius: 50%;
  background: var(--st-cc, var(--st-text));
  box-shadow: 0 0 2vh color-mix(in srgb, var(--st-cc, #64748b) 70%, transparent);
  z-index: 3;
}

/* Pace ghost: the last moment the remaining plan still fits */
.st-pace {
  position: absolute;
  top: 12%; bottom: 12%;
  border-left: 2px dashed var(--st-muted);
  z-index: 2;
}
.st-pace.behind { border-color: var(--st-red); }
.st-pace span {
  position: absolute;
  top: -.2vh; left: .3vw;
  font: 1.4vh var(--st-mono);
  color: var(--st-muted);
  white-space: nowrap;
}
.st-pace.behind span { color: var(--st-red); }

/* Now-line, drawn once across every lane */
.st-now {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 2px solid var(--st-text);
  z-index: 4;
  pointer-events: none;
}
.st-now::after {
  content: "";
  position: absolute;
  left: -.45vh; top: -.45vh;
  width: .9vh; height: .9vh;
  border-radius: 50%;
  background: var(--st-text);
}

/* ── NEXT UP ────────────────────────────────────────────────────── */

.st-next {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  border-top: 1px solid var(--st-line);
  padding-top: 1.2vh;
}
.st-next .hd {
  font: 1.6vh var(--st-mono);
  letter-spacing: .35em;
  color: var(--st-muted);
  text-transform: uppercase;
}
.st-next .items { display: flex; align-items: baseline; gap: 2vw; flex-wrap: wrap; }
.st-next .item {
  display: inline-flex;
  align-items: baseline;
  gap: .5vw;
  font: 2.1vh var(--st-display);
  font-weight: 600;
  color: var(--st-text);
}
.st-next .item b { color: var(--st-nc, var(--st-text)); font-weight: 700; text-transform: uppercase; }
.st-next .item span { font: 1.6vh var(--st-mono); color: var(--st-muted); }
.st-next .none { font: 1.8vh var(--st-mono); color: var(--st-green); letter-spacing: .12em; text-transform: uppercase; }

@media (max-height: 800px) {
  .st-head .nm { font-size: 2.6vh; }
  .st-next .item { font-size: 1.9vh; }
}

@media (prefers-reduced-motion: reduce) {
  .st-lane { transition: none; }
}