/* Erg Live TV. Components use tokens only; the tokens (the gym's colors) live in ../brand.css. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }
body.idle { cursor: none; }
button, select { font: inherit; color: inherit; }
button, .dock a { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
button:hover, .dock a:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 44px; }
:focus-visible { outline: 3px solid var(--energy); outline-offset: 2px; }
.quiet { color: var(--muted); }

#stage { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; }

/* Top bar */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw; padding: 2vh 2.4vw 1.2vh; }
.brand { display: flex; align-items: baseline; gap: 1.2vw; min-width: 0; }
.brand b { font: 800 clamp(18px, 3.6vh, 46px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.brand b em { font-style: normal; color: var(--accent); }
.mode { font: 700 clamp(12px, 2vh, 26px)/1 var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.mode.race { color: var(--energy); }
.clock { font: 800 clamp(26px, 6.4vh, 96px)/1 var(--display); font-variant-numeric: tabular-nums; }
.totals { display: flex; justify-content: flex-end; gap: 2.4vw; text-align: right; }
.totals b { display: block; font: 800 clamp(18px, 3.6vh, 48px)/1 var(--display); font-variant-numeric: tabular-nums; }
.totals span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(9px, 1.3vh, 16px); }

/* Cards: one per erg. Each is placed by transform, so a change of rank glides instead of jumping. */
#lanes { position: relative; min-height: 0; row-gap: var(--gap); margin: 0 calc(2.4vw - var(--gap) / 2) 1.6vh; }
.lane { position: absolute; left: 0; top: 0; container-type: size; display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr);
  gap: 2cqw; padding: 0 2.6cqw 0 2cqw; background: var(--surface); border: 1px solid var(--line); border-radius: clamp(10px, 14cqh, 22px);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s, border-color .3s; will-change: transform; overflow: hidden; }
.lane.stale { opacity: .4; }
.lane.p1 { border-color: var(--energy); }
.lane.done { border-color: var(--good); }
/* Meters fill the card left to right, flat and quiet: race progress in a race, total meters otherwise. */
.fill { position: absolute; inset: 0 auto 0 0; width: 0; z-index: 0; background: color-mix(in srgb, var(--accent) 20%, transparent); border-right: 3px solid var(--accent); }
.lane > :not(.fill) { position: relative; z-index: 1; }
.lane.open .fill { transition: width .6s ease-out; }
.lane.race .fill { border-right-color: var(--energy); }
.lane.done .fill { background: color-mix(in srgb, var(--good) 16%, transparent); border-right-color: var(--good); }
/* Watts: a small upright bar beside the number. */
.m.watts { display: flex; justify-content: flex-end; align-items: center; gap: 1.2cqw; }
.vbar { flex: none; width: clamp(5px, .8cqw, 12px); height: 46cqh; border-radius: 99px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.vbar i { display: block; width: 100%; height: 0; border-radius: 99px; background: var(--accent); transition: height .5s ease-out; }
.rank { display: grid; place-items: center; height: 56cqh; max-height: 110px; aspect-ratio: 1; border-radius: 24%; font: 800 min(34cqh, 68px)/1 var(--display); font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--ink); }
.lane.p1 .rank { background: var(--energy); color: var(--energy-ink); }
.lane.p2 .rank { background: var(--silver); color: #10161f; }
.lane.p3 .rank { background: var(--bronze); color: #1a1004; }
.rank.beat { animation: beat .4s ease-out; }
@keyframes beat { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }
.who { min-width: 0; }
.who b { display: block; font: 800 min(32cqh, 4.4cqw, 68px)/1.05 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(10px, min(12cqh, 1.4cqw), 20px); white-space: nowrap; margin-top: .3em; }
.who .sim { color: var(--warn); font-weight: 700; }
.m { text-align: right; min-width: 0; }
.m b { display: block; font: 700 min(34cqh, 4cqw, 84px)/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m.big b { font-size: min(52cqh, 6.4cqw, 136px); font-weight: 800; }
.m span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(9px, min(11cqh, 1.25cqw), 18px); white-space: nowrap; margin-top: .45em; }
.lane.done .m.big b { color: var(--good); }

/* Empty state */
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.6vh; padding: 16px; }
.empty[hidden], .count[hidden], .podium[hidden] { display: none; }
.empty h1 { margin: 0; font: 800 clamp(30px, 7vh, 92px)/1 var(--display); text-transform: uppercase; }
.empty .join { font: 800 clamp(18px, 3.6vh, 44px)/1.1 var(--display); color: var(--energy); }
.empty p { margin: 0; font-size: clamp(15px, 2.4vh, 28px); max-width: 44ch; }
.empty .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 1vh 0; }
.pulse { width: 9vh; height: 9vh; border-radius: 50%; border: 3px solid var(--accent); margin-bottom: 2vh; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.82); opacity: .45; } }

/* Countdown + results */
.count { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: var(--shade); font: 800 min(60vh, 40vw)/1 var(--display); color: var(--energy); font-variant-numeric: tabular-nums; }
.count.go { color: var(--accent); }
.count span { animation: pop .9s ease-out both; }
@keyframes pop { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: .3; } }
.podium { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 1.4vh; background: var(--shade); padding: 16px; text-align: center; }
.podium .kicker { margin: 0; color: var(--energy); font: 700 clamp(14px, 2.4vh, 28px)/1 var(--display); text-transform: uppercase; letter-spacing: .16em; }
.podium h2 { margin: 0 0 1vh; font: 800 clamp(32px, 9vh, 120px)/1 var(--display); text-transform: uppercase; }
.podium ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2vh; width: min(92vw, 110vh); }
.podium li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2vw; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 1.8vh; padding: 1.4vh 2vw; font: 800 clamp(20px, 4.8vh, 60px)/1.1 var(--display); animation: rise .5s both; }
.podium li:first-child { border-color: var(--energy); }
.podium li:nth-child(2) { animation-delay: .1s; } .podium li:nth-child(3) { animation-delay: .2s; }
.podium li i { font-style: normal; display: grid; place-items: center; width: 1.5em; aspect-ratio: 1; border-radius: 24%; background: var(--surface-2); }
.podium li:nth-child(1) i { background: var(--energy); color: var(--energy-ink); } .podium li:nth-child(2) i { background: var(--silver); color: #10161f; } .podium li:nth-child(3) i { background: var(--bronze); color: #1a1004; }
.podium li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium li b small { display: block; color: var(--muted); font: 600 .34em/1.4 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.podium li em { font-style: normal; font-variant-numeric: tabular-nums; }
@keyframes rise { from { transform: translateY(3vh); opacity: 0; } }

/* Controls: out of the way until someone moves the mouse or tabs in. */
.dock { position: absolute; left: 50%; bottom: 2vh; z-index: 8; transform: translate(-50%, 0); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 16px);
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s; }
body.idle .dock:not(:focus-within) { opacity: 0; transform: translate(-50%, 2vh); pointer-events: none; }
.dock label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dock .sep { width: 1px; height: 28px; background: var(--line); }
.dock .keys { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 12px; }
.note { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); z-index: 9; background: var(--surface); border: 1px solid var(--warn); color: var(--ink); border-radius: 12px; padding: 10px 16px; max-width: min(92vw, 70ch); display: none; }
.note.show { display: block; }

/* Phone and narrow windows: keep rank, name, the big number and meters. */
@media (max-width: 720px) {
  .top { grid-template-columns: 1fr auto; padding: 12px; } .totals { display: none; }
  #lanes { margin: 0 6px 8px; }
  .lane { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 10px; padding: 0 12px; }
  .lane .watts, .lane .rate { display: none; }
  .rank { height: 44px; font-size: 24px; }
  .dock .keys, .dock .sep { display: none; }
  .dock { left: 8px; right: 8px; bottom: 8px; transform: none; width: auto; max-width: none; }
  body.idle .dock:not(:focus-within) { transform: translateY(2vh); }
  .clock { font-size: 24px; } .brand { gap: 8px; } .brand b { font-size: 16px; } .mode { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lane, .dock, .lane.open .fill, .vbar i { transition: none; }
  .pulse, .count span, .podium li, .rank.beat { animation: none; }
}