:root {
  --bg: #11131a;
  --panel: #1a1d27;
  --line: #2a2f3d;
  --text: #e8eaf0;
  --muted: #8b93a7;
  --accent: #4ade80;
  --warn: #fbbf24;
  --alarm: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

h1 { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; }
h1 .live { color: var(--accent); }

h2 {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.status { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Race clocks sit in the header so they survive any scrolling below. */
.race { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 0.3rem 0.7rem;
  background: #151822;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.clock .clabel {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.clock .cvalue {
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.clock.wide { min-width: 116px; }
.clock.wide .cvalue { font-size: 1.45rem; color: var(--accent); }
/* Before the start and after the flag the clock is not counting down. */
.clock.wide.pending .cvalue { color: var(--warn); }
.clock.wide.done .cvalue { color: var(--muted); }

.badge {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  background: #151822;
  color: var(--muted);
}
.badge.ok    { color: var(--accent); border-color: #245c3a; }
.badge.warn  { color: var(--warn);   border-color: #6b5312; }
.badge.alarm { color: var(--alarm);  border-color: #6d2626; }

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.2rem 2rem;
  max-width: 1500px;
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}

.panel.throttle, .panel.primary, .panel.secondary { grid-column: 1 / -1; }

.twitch-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0d12;
  border-radius: 6px;
  overflow: hidden;
}
.twitch-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.twitch-wrap .placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

#map { aspect-ratio: 16 / 9; border-radius: 6px; background: #0b0d12; }
.leaflet-container { background: #0b0d12; }

canvas { width: 100%; display: block; }

/* Deliberately tiny. The chart only has to show whether the throttle is
 * pinned or feathered, and every pixel it gives up puts the engine numbers
 * below it on screen without scrolling. */
#throttleChart { height: 96px; }
.panel.throttle { padding: 0.6rem 1rem 0.55rem; }
.panel.throttle h2 { margin-bottom: 0.35rem; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  background: #151822;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tile .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tile .value { font-size: 2rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile .unit  { font-size: 0.75rem; color: var(--muted); }
.tile.stale  { opacity: 0.45; }
.tile.alarm .value { color: var(--alarm); }
.tile.warn  .value { color: var(--warn); }

.rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.4rem 1.5rem; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #22262f;
}
.row .k { color: var(--muted); }
.row .v { font-variant-numeric: tabular-nums; }
.row.stale .v { opacity: 0.45; }
.row.alarm .v { color: var(--alarm); }
.row.warn  .v { color: var(--warn); }

footer {
  padding: 0 1.2rem 1.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  max-width: 1500px;
  margin: 0 auto;
}
footer a { color: var(--muted); }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .panel.video, .panel.map { grid-column: 1 / -1; }
}