/* F1 Jet Tracker — the public live page.
 *
 * Set in the recap's own design: the same Inter file, the same near-black
 * surfaces and hairline borders, uppercase labels over big figures, a 3px
 * accent rule across the top and the recap's footer at the bottom. The map
 * markers are the dashboard's live map, drawn the same way.
 * --accent and --track are replaced at runtime by the bot's own recap colours.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/inter-var.woff2") format("woff2");
}

:root {
  /* ui/app/globals.css, the dashboard's dark theme: charcoal taken most of the
     way to black, and the hairlines a touch firmer so the panels still part. */
  --bg: #0d0d0e;
  --surface: #161618;
  --surface-soft: #1c1c1f;
  --surface-raised: #232327;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #77777f;
  --accent: #e10600;
  --track: #e10600;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --track-label: 0.07em;

  /* The dashboard's control material: a thin glass capsule whose lit rim and
     cast, not its fill, are what make it read as a control. The thick pour is
     for chrome sitting on the map, where the imagery behind it is unknown. */
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-hover: rgba(255, 255, 255, 0.15);
  --glass-fill-thick: rgba(13, 13, 14, 0.4);
  --glass-fill-thick-hover: rgba(30, 30, 34, 0.58);
  --glass-thumb: rgba(255, 255, 255, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.2);
  --glass-underside: rgba(255, 255, 255, 0.055);
  --glass-cast: 0 1px 2px rgba(0, 0, 0, 0.34), 0 8px 18px -12px rgba(0, 0, 0, 0.7);
  --glass-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-underside), var(--glass-cast);
  --thumb-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-underside);
  --control-sm: 28px;

  /* The dashboard's motion scale. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 110ms;
  --dur-2: 150ms;
  --dur-3: 240ms;
  --dur-4: 300ms;

  /* ui/app/globals.css, the live map's dark-theme marker colours. */
  --map-ink-strong: rgba(222, 234, 250, 0.85);
  --map-halo: rgba(6, 10, 16, 0.62);
  --map-halo-hot: rgba(6, 10, 16, 0.86);
  --map-halo-ring: rgba(127, 182, 255, 0.85);
  --map-pill: rgba(16, 21, 30, 0.9);
  --map-pill-edge: rgba(168, 191, 219, 0.35);
  --map-pill-text: #eaf2fb;
  --map-outline: #dce8f6;
  --map-shade: rgba(0, 0, 0, 0.55);
  --map-airborne: #34d399;
  /* Indigo, not slate: slate was the airport ring's own grey. */
  --map-landed: #a5b4fc;

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(12px, 1.6vw, 20px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--font);
  letter-spacing: -0.006em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--accent); color: #fff; padding: 8px 12px; z-index: 50;
}
.skip:focus { left: 8px; }

/* The recap's small uppercase caption, used for every label on the page. */
.label {
  margin: 0;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted);
}

/* The capsule: the dashboard's one control shape — a pill of thin glass with
   a lit rim and one cast shadow — for every button and filter on the page. */
.capsule, .chips, .detail .close, .rc-more {
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--glass-fill); box-shadow: var(--glass-shadow);
}
.detail .close, .rc-more {
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.detail .close:hover, .rc-more:hover { background: var(--glass-fill-hover); }
/* Controls give under the finger and come back. */
.detail .close:active, .rc-more:active, .chip:active, .tower-row:active { transform: scale(0.97); }

/* ── Header ───────────────────────────────────────────────────────
   The recap's: a hairline of accent across the top, the mark and name on the
   left with a caption under the name, and on the right a figure with its own
   caption, so the two corners read as a pair. */

.rule { height: 3px; background: var(--accent); }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px;
  padding: 7px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.brand img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em;
  color: #f5f6f8; white-space: nowrap;
}
/* The feed's state as a small badge, with how fresh it is beside it in plain
   text: "LIVE  Updated 15s ago". The age moves in 5 s steps, not every second. */
.stamp { display: flex; align-items: center; gap: 8px; margin-top: 4px; white-space: nowrap; min-width: 0; }
/* Pulled 2px left: a pill's rounded end reads as inset beside the name's straight
   F, so it overshoots a touch to look aligned with it. */
.stamp-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: -2px;
  height: 20px; padding: 0 8px 0 7px; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--border-strong); box-shadow: var(--glass-shadow);
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
  color: var(--text-secondary);
}
.stamp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: none; }
#feed-text { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-muted); }
#feed-text:empty { display: none; }
.stamp[data-state="live"] .stamp-badge { color: var(--text); }
.stamp[data-state="live"] .dot { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.stamp[data-state="stale"] .stamp-badge { color: #f0a92c; }
.stamp[data-state="stale"] .dot { background: #f0a92c; }
@keyframes pulse { 50% { opacity: 0.25; } }

.ident { text-align: right; min-width: 0; }
.ident-value { font-size: 17px; font-weight: 650; line-height: 1.15; letter-spacing: -0.013em; white-space: nowrap; }
.clock { display: block; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.clock small { font-size: 11px; font-weight: 600; letter-spacing: var(--track-label); color: var(--accent); margin-left: 6px; }
.ident .label { margin-top: 3px; white-space: nowrap; }

/* ── Follow strip ────────────────────────────────────────────────── */

/* In the header, between the name and the clock, taking the room between them. */
.ticker {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0; align-self: center;
  height: 32px; margin: 0 clamp(8px, 2vw, 28px);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
}
.ticker[hidden] { display: none; }
/* Soft edges, so names slide in and out rather than being cut. */
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 1; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.ticker-track {
  display: flex; width: max-content; height: 100%;
  animation: ticker 40s linear infinite;
}
/* Keyboard focus still holds it, so a tabbed-to link does not slide away. */
.ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-group { display: flex; align-items: center; flex: none; height: 100%; }
.ticker-lead {
  display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.ticker-lead::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ticker-item {
  display: flex; align-items: center; gap: 7px; height: 60%; padding: 0 14px;
  color: var(--text); text-decoration: none; white-space: nowrap; font-size: 12px;
  border-left: 1px solid var(--border);
}
.ticker-item svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.ticker-name { font-weight: 600; }
.ticker-handle { color: var(--text-muted); font-weight: 500; }
.ticker-item:hover, .ticker-item:focus-visible { color: var(--accent); }
.ticker-item:hover .ticker-handle { color: var(--text-secondary); }

/* ── Map, tower, detail ──────────────────────────────────────────── */

.pitwall {
  position: relative;
  height: min(72vh, 720px);
  min-height: 460px;
}
.map {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 45%, #111a24 0%, #0a0d12 55%, #06080b 100%);
}

.panel {
  /* The dashboard's map glass — blurred wide and pushed a little saturated,
     with the lit rim along the top — poured thicker than its capsules, because
     these hold lines of reading text rather than one word. One declaration:
     the build's minifier adds the prefixed form, and a hand-written pair has
     lost the unprefixed one before. */
  background: rgba(22, 22, 24, 0.78);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* As tall as its jets, up to the map's height; it scrolls past that. */
.tower {
  position: absolute; top: var(--gutter); left: var(--gutter);
  max-height: calc(100% - 2 * var(--gutter));
  width: 280px;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 2;
}
.tower-head { padding: 12px 13px 10px; border-bottom: 1px solid var(--border); }
.tower-head h1 { margin: 0; }
.tower-summary { margin: 6px 0 0; font-size: 17px; font-weight: 650; line-height: 1.15; letter-spacing: -0.013em; }
.tower-summary em { font-style: normal; color: var(--map-airborne); }
.tower-summary .sep { color: var(--text-muted); }
.tower-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; scrollbar-width: thin; }

.tower-row {
  display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%;
  padding: 7px 9px 7px 7px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent;
  text-align: left; cursor: pointer;
}
.tower-row { transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.tower-row:hover { background: var(--glass-fill); }
.tower-row[aria-pressed="true"] { background: var(--glass-thumb); border-color: var(--glass-edge); box-shadow: var(--thumb-shadow); }
.tower-row .flag { align-self: stretch; border-radius: 2px; background: var(--border-strong); }
.tower-row.is-airborne .flag { background: var(--map-airborne); }
.tower-row .who { min-width: 0; }
.tower-row .name {
  display: block; font-size: 14px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tower-row .who .label { display: block; margin-top: 3px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tower-row .state { text-align: right; white-space: nowrap; }
.tower-row .state b { display: block; font-size: 13px; font-weight: 650; line-height: 1.2; }
.tower-row .state .label { margin-top: 3px; font-size: 11px; }
.tower-row.is-airborne .state b { color: var(--map-airborne); }

.detail {
  position: absolute; right: var(--gutter); top: var(--gutter);
  max-height: calc(100% - 2 * var(--gutter)); overflow-y: auto;
  width: min(350px, calc(100% - 2 * var(--gutter)));
  padding: 13px;
  z-index: 2;
}
.detail::before {
  content: ""; position: absolute; left: 13px; right: 13px; top: -1px; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}
.detail-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.detail h2 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.15; letter-spacing: -0.013em; }
.detail h2 + .label { margin-top: 4px; }
.detail .close {
  width: var(--control-sm); height: var(--control-sm); flex: none; font-size: 15px; line-height: 1;
  color: var(--text-secondary);
}
.detail .close:hover { color: var(--text); }
.route {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  margin: 12px 0 10px;
}
.route .stop .label { color: var(--accent); }
.route .code { font-size: 22px; font-weight: 650; line-height: 1.1; letter-spacing: -0.015em; margin-top: 3px; }
.route .airport { font-size: 11px; color: var(--text-secondary); line-height: 1.25; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route .to { text-align: right; }
.route .line { height: 2px; width: 34px; background: var(--accent); position: relative; border-radius: 1px; }
.route .line::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  border: 5px solid transparent; border-left: 6px solid var(--accent); border-right: 0;
}
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
.cells + .cells { margin-top: 5px; }
.cell { background: var(--glass-fill); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px 7px; min-width: 0; box-shadow: inset 0 1px 0 var(--glass-underside); }
.cell dt { font-size: 11px; }
.cell dd {
  margin: 4px 0 0; font-size: 15px; font-weight: 650; line-height: 1.1; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell dd small { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 3px; letter-spacing: 0; }

/* ── Map markers: the dashboard's live map, as drawn there ───────── */

/* Absolute, as MapLibre's own .maplibregl-marker rule has it: this file loads
   after that one, and a relative marker drops into the canvas container's flow
   and draws 14px below the point it was placed at, off the end of its track. */
.marker { position: absolute; top: 0; left: 0; width: 0; height: 0; cursor: pointer; border: 0; padding: 0; background: transparent; }
.marker .halo {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--map-halo); box-shadow: 0 0 0 1.6px transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.marker:hover .halo, .marker.is-selected .halo { background: var(--map-halo-hot); }
.marker.is-selected .halo { left: -15px; top: -15px; width: 30px; height: 30px; box-shadow: 0 0 0 1.6px var(--map-halo-ring); }
.marker svg { position: absolute; overflow: visible; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 5px var(--map-shade)); }
.marker .dot {
  position: absolute; left: -5.4px; top: -5.4px; width: 10.8px; height: 10.8px; border-radius: 50%;
  background: var(--map-landed); box-shadow: 0 0 0 1.8px var(--map-outline), 0 1px 3px var(--map-shade);
}
.marker .dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.8px; height: 3.8px; margin: -1.9px 0 0 -1.9px;
  border-radius: 50%; background: var(--map-pill);
}

/* Finding them at a glance: a jet in the air sends out a slow ping in its own
   green, and a parked one sits in a faint ring, so neither is lost against a
   coastline or a city's labels at globe zoom. */
.marker::before {
  content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(165, 180, 252, 0.16); pointer-events: none;
}
.marker.is-airborne::before {
  left: -20px; top: -20px; width: 40px; height: 40px; box-shadow: none;
  border: 2px solid var(--map-airborne); opacity: 0;
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(0.45); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}
.plane-body { fill: var(--map-airborne); stroke: var(--map-ink-strong); stroke-width: 1.8; stroke-linejoin: round; }
.plane-accent { fill: none; stroke: var(--map-ink-strong); stroke-linecap: round; opacity: 0.5; }

/* A parked jet is drawn as a jet, pointing the way it was left, as the
   dashboard draws it: the same silhouette a shade smaller, in the landed
   indigo, and flat on the map where a flying one is lifted off it by its
   shadow. The outline is in screen pixels, so the smaller drawing takes a
   lighter one or its wings go under it. A jet with no heading keeps the dot,
   which claims no direction. */
.marker:not(.is-airborne) svg { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 0.5px 1.5px var(--map-shade)); }
.marker:not(.is-airborne) .plane-body { fill: var(--map-landed); stroke-width: 1.5; }

.marker-label {
  position: absolute; left: 50%; top: 17px; transform: translateX(-50%);
  padding: 0 8px; height: 19px; line-height: 17px; border-radius: 10px;
  background: var(--map-pill); border: 1px solid var(--map-pill-edge); color: var(--map-pill-text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px; white-space: nowrap; pointer-events: none;
}
.marker.is-glyph .marker-label { top: 21px; }
.marker.is-airborne .marker-label { top: 24px; }
.marker.is-selected .marker-label { background: var(--accent); border-color: var(--map-halo-hot); color: #fff; }
.marker.is-selected, .marker:hover { z-index: 5 !important; }
/* Parked jets cluster at the same few airfields, so their names wait for a
   closer zoom — unless they have been fanned off a stand, which is a request
   to read them, or unless the label is the stand's own count. */
.map.is-far .marker:not(.is-airborne):not(.is-selected):not(.is-stand):not(.is-fanned):not(:hover) .marker-label { display: none; }

/* A stand: the jets parked close enough together to be one pile on screen,
   drawn as a single dot carrying how many are inside it. Opened, it is only
   the point their fan hangs off, and each jet sits out on a leader of its own. */
.marker.is-stand .halo { left: -16px; top: -16px; width: 32px; height: 32px; }
.marker.is-stand::before { left: -15px; top: -15px; width: 30px; height: 30px; }
.marker.is-stand .stand-dot {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--map-landed); box-shadow: 0 0 0 1.8px var(--map-outline), 0 1px 3px var(--map-shade);
}
.marker.is-stand .count { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #0d0d0e; }
.marker.is-stand .marker-label { top: 19px; }
.marker.is-stand.is-open .halo { left: -11px; top: -11px; width: 22px; height: 22px; }
.marker.is-stand.is-open::before { box-shadow: none; }
.marker.is-stand.is-open .stand-dot {
  left: -5px; top: -5px; width: 10px; height: 10px;
  background: transparent; box-shadow: 0 0 0 1.5px var(--map-pill-edge);
}
/* Open, the jets around it carry their own names, and the airport's code in
   the middle of the ring would only land under two of them. */
.marker.is-stand.is-open .marker-label { display: none; }

/* The leader from a fanned jet back to the stand it came off, so a dot out on
   the ring still reads as standing at that airfield. */
.marker .stem {
  position: absolute; left: 0; top: 0; width: 0; height: 1px; display: none;
  transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, rgba(201, 206, 214, 0.5), rgba(201, 206, 214, 0.06));
}
.marker.is-fanned .stem { display: block; }

.maplibregl-ctrl-attrib { display: none !important; }
/* The map's zoom and compass as the dashboard's map chrome: a capsule of
   thick glass standing on the imagery. */
.maplibregl-ctrl-group {
  background: var(--glass-fill-thick) !important; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill) !important; overflow: hidden;
  backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-shadow) !important;
}
.maplibregl-ctrl-group button { width: 34px !important; height: 34px !important; background: transparent !important; }
.maplibregl-ctrl-group button:hover { background: var(--glass-fill-thick-hover) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--border) !important; }
.maplibregl-ctrl-icon { filter: invert(0.9); }

/* ── Race control and the totals ─────────────────────────────────── */

.lower {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--gutter);
  padding: var(--gutter);
  align-items: stretch;
}
.box {
  position: relative; min-width: 0; overflow: clip;
  padding: 15px 16px 14px;
  background: linear-gradient(180deg, var(--surface-soft), var(--surface) 140px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.box::before {
  content: ""; position: absolute; left: 16px; top: 0; width: 30px; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}
/* The log fills the height the totals beside it set, so an empty log is one
   centred message rather than a box with a hole in it. */
.rc { display: flex; flex-direction: column; }
.rc .rc-empty:not([hidden]) { flex: 1; align-content: center; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 3px 0 0; font-size: 20px; font-weight: 650; line-height: 1.1; letter-spacing: -0.015em; }
.section-note { margin: 0; color: var(--text-muted); font-size: 12px; }

/* The jet filter as the dashboard's segmented control: one capsule trough,
   everything in it inset by 3px, and the chosen jet the lit thumb. It scrolls
   inside its own trough when the fleet is wider than the box. */
.chips {
  display: flex; gap: 3px; width: fit-content; max-width: 100%; margin-bottom: 12px; padding: 3px;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: var(--control-sm); padding: 0 12px;
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; color: var(--text-secondary);
  transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.chip:hover { color: var(--text); background: var(--glass-fill); }
.chip[aria-pressed="true"] {
  background: var(--glass-thumb); border-color: var(--glass-edge); color: var(--text); font-weight: 600;
  box-shadow: var(--thumb-shadow);
}

/* One row per flight: who, where from and to, and how it went. */
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-day { padding: 12px 0 6px; border-bottom: 1px solid var(--border); }
.rc-list > .rc-day:first-child { padding-top: 4px; }
.rc-flight {
  display: grid; grid-template-columns: minmax(100px, 0.8fr) minmax(0, 2fr) 150px; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rc-jet { display: flex; flex-direction: column; align-items: start; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rc-name { font-size: 13px; font-weight: 650; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-jet:hover .rc-name { color: var(--accent); }
.rc-jet .label { font-size: 11px; }

.rc-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 0.8fr) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.rc-stop { display: flex; flex-direction: column; min-width: 0; }
.rc-stop.to { text-align: right; align-items: end; }
.rc-code { font-size: 17px; font-weight: 650; line-height: 1.1; letter-spacing: -0.01em; }
.rc-place { font-size: 11px; color: var(--text-secondary); line-height: 1.3; margin-top: 2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-stop .label { font-size: 11px; margin-top: 3px; }
.rc-path { position: relative; height: 10px; }
.rc-rail { position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 1px; background: var(--accent); }
.rc-dot { position: absolute; right: -2px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.rc-flight.is-off .rc-rail, .rc-flight.is-air .rc-rail {
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 9px);
}
.rc-flight.is-air .rc-rail { background: linear-gradient(90deg, var(--map-airborne) 0 55%, transparent 55%), repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 9px); }
.rc-flight.is-air .rc-dot { right: auto; left: calc(55% - 4px); background: var(--map-airborne); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); animation: pulse 1.6s ease-in-out infinite; }
.rc-flight.is-off .rc-dot { background: var(--text-muted); }
.rc-flight.is-air .rc-stop.to .rc-code, .rc-flight.is-off .rc-stop.to .rc-code { color: var(--text-secondary); }

.rc-side { display: flex; flex-direction: column; align-items: end; gap: 4px; text-align: right; white-space: nowrap; }
.rc-status {
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-secondary);
  transition: color var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard), background-color var(--dur-3) var(--ease-standard);
}
.rc-status.is-air { color: var(--map-airborne); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.08); }
.rc-status.is-landed { color: var(--text-secondary); }
.rc-figures { font-size: 13px; font-weight: 650; }
.rc-side .label { font-size: 11px; }

.rc-more {
  margin-top: 14px; width: 100%; height: 34px; padding: 0 14px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.rc-more:hover { color: var(--text); }
.rc-wait { color: var(--text-muted); padding: 18px 0; }

.rc-empty {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  margin: 4px 0 0; padding: 28px 14px 30px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-muted); font-size: 12px;
}
.rc-empty[hidden] { display: none; }
.rc-empty b { color: var(--text); font-size: 14px; font-weight: 650; }
.rc-radar {
  position: relative; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px), radial-gradient(circle, transparent 0 13px, var(--border) 14px 15px, transparent 16px);
}
.rc-radar::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--accent) 45%, transparent) 360deg);
  animation: sweep 2.8s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* Totals: one figure first, the rest in a row under it, then the jets ranked. */
/* The totals follow the reader down a long flight log. */
.season-inner { position: sticky; top: var(--gutter); }
.season-hero { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; }
.hero-value { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-top: 4px; }
.hero-value small { font-size: 20px; font-weight: 600; color: var(--text-secondary); margin-left: 6px; letter-spacing: -0.01em; }
.season-totals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 18px;
  border-top: 1px solid var(--border);
}
.stat { padding: 9px 0 8px; border-bottom: 1px solid var(--border); min-width: 0; }
.stat:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--border); }
.stat:nth-child(even) { padding-left: 14px; }
.stat dt { font-size: 11px; }
.stat dd { margin: 5px 0 0; font-size: 17px; font-weight: 650; line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat dd small { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }

.co2-head { margin: 0 0 6px; }
.co2-bars { list-style: none; margin: 0; padding: 0; }
.co2-bars li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.co2-bars li:last-child { border-bottom: 0; }
.co2-bars .rank { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.co2-bars .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co2-bars .value { font-size: 13px; font-weight: 650; text-align: right; }
.co2-bars .meta { grid-column: 2; font-size: 11px; }
.co2-bars .track { grid-column: 2 / 4; grid-row: 2; align-self: center; height: 4px; background: var(--surface-soft); border-radius: 2px; overflow: hidden; }
.co2-bars .meta { grid-row: 3; }
.co2-bars .fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.co2-bars li:first-child:not(.is-idle) .rank { color: var(--accent); }
.co2-bars li.is-idle .name, .co2-bars li.is-idle .value { color: var(--text-muted); font-weight: 500; }
.co2-bars li.is-idle .track, .co2-bars li.is-idle .meta { display: none; }

/* ── Footer: the recap's, parts split by hairlines ───────────────── */

.foot {
  padding: 0 var(--gutter) calc(22px + env(safe-area-inset-bottom));
}
/* One line where it fits; on a narrow screen the parts wrap, each still whole. */
.foot-parts {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 6px;
  border-top: 1px solid var(--border); padding-top: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: -0.003em; color: var(--text-muted);
}
.foot-parts > * { white-space: nowrap; }
.foot-parts > * + *::before {
  content: ""; display: inline-block; vertical-align: -2px;
  width: 1px; height: 12px; margin: 0 9px;
  background: var(--border-strong);
}
.foot-parts .handle { color: var(--accent); font-weight: 600; }
.foot-parts .credit { color: rgba(113, 118, 127, 0.9); }
.foot-parts a { text-decoration: none; }
.foot-parts a:hover { color: var(--text); }
@media (max-width: 860px) { .foot-parts > * { white-space: normal; } }

/* ── Disclaimer page ────────────────────────────────────────────────── */

.doc { max-width: 760px; margin: 0 auto; padding: calc(var(--gutter) * 1.5) var(--gutter) 40px; }
.doc h1 { margin: 0 0 6px; font-size: 28px; font-weight: 650; letter-spacing: -0.015em; }
.doc h2 { margin: 30px 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--text-secondary); }
.doc ul { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--text); }
.doc b { color: var(--text); font-weight: 600; }
.back { display: inline-block; margin-bottom: 22px; color: var(--text-secondary); text-decoration: none; font-size: 13px; }
.back:hover { color: var(--text); }

/* ── Narrow screens: the tower moves under the map ───────────────── */

@media (max-width: 860px) {
  .pitwall { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .map { position: relative; inset: auto; height: 58vh; min-height: 340px; }
  .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .tower { order: 2; position: static; width: auto; margin: var(--gutter) var(--gutter) 0; }
  .tower-list { overflow: visible; }
  .detail { position: relative; right: auto; bottom: auto; width: auto; margin: var(--gutter) var(--gutter) 0; order: 1; }
  .lower { grid-template-columns: minmax(0, 1fr); }
  .rc-flight { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .rc-side { max-width: 190px; }
  .rc-route { grid-column: 1 / -1; grid-row: 2; }
}

/* Too narrow to share a line: the strip drops under the name and clock. */
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; row-gap: 10px; }
  .brand { flex: 1 1 0; }
  /* Room for the badge to overshoot 2px left without being clipped. */
  .brand-text { overflow: hidden; margin-left: -2px; padding-left: 2px; }
  .ticker { order: 3; flex-basis: 100%; margin: 0; height: 36px; }
}

@media (max-width: 560px) {
  .bar { min-height: 64px; }
  .brand img { width: 40px; height: 40px; }
  .brand-name { font-size: 15px; }
  #feed-text { font-size: 11px; }
  .ident { flex: none; }
  .clock { font-size: 15px; }
  .clock small { font-size: 11px; margin-left: 3px; }
  .ident .label { display: none; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box { padding: 18px 14px 14px; }
  .box::before { left: 14px; }
  .hero-value { font-size: 34px; }
  .rc-code { font-size: 15px; }
}

/* ── Motion: the dashboard's vocabulary ─────────────────────────────
   Opacity and transform only, one-shot, and none of it on a loop except the
   sheen on a leg in the air — the map draws on the same thread. */

/* A flight the page has just learned of comes down into the top of the log. */
@keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } }
.is-new { animation: rowIn var(--dur-3) var(--ease-out) backwards; }

/* The detail card arrives from where it opens rather than appearing. */
@keyframes revealDown { from { opacity: 0; transform: translateY(-4px); } }
.detail.is-opening { animation: revealDown var(--dur-3) var(--ease-out); }

/* A live reading's digits roll into place like a picker wheel: each digit a
   strip of 0–9 three times over, clipped to one line and faded at the top and
   bottom, and only the wheels whose digit changed turn. */
.roll { display: inline-flex; white-space: pre; }
.wheel {
  display: inline-block; height: 1lh; overflow: hidden; vertical-align: top;
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.wheel > span { display: flex; flex-direction: column; }
.wheel > span.is-rolling { transition: transform 600ms var(--ease-out); }
.wheel > span > span { height: 1lh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The CO₂ bars grow from the left, and move from where they were. */
.co2-bars .fill { transform-origin: left; transition: width 600ms var(--ease-out); }
@keyframes growRight { from { transform: scaleX(0); } }
.co2-bars.is-first .fill { animation: growRight 700ms var(--ease-out) backwards; }
.co2-bars.is-first li:nth-child(2) .fill { animation-delay: 60ms; }
.co2-bars.is-first li:nth-child(3) .fill { animation-delay: 120ms; }
.co2-bars.is-first li:nth-child(n+4) .fill { animation-delay: 180ms; }

/* A highlight running along a leg towards the jet while it is in the air. */
@keyframes legSheen { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* The route's arrowhead hangs off the end of its line, so the line cannot
   clip; its sheen instead stops at the tip. The log's rail clips, and its
   sheen is sized to run the flown, green part and no further. */
@keyframes legSheenShort { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.route.is-air .line::before, .rc-flight.is-air .rc-rail::after {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: legSheen 2.2s var(--ease-standard) infinite;
}
.route.is-air .line::before { animation-name: legSheenShort; }
.route.is-air .line { background: var(--map-airborne); }
.route.is-air .line::after { border-left-color: var(--map-airborne); }
.rc-flight.is-air .rc-rail::after { width: 12.5%; }
.rc-rail { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .is-new, .detail.is-opening, .co2-bars.is-first .fill { animation: none; }
  .wheel > span.is-rolling, .co2-bars .fill { transition: none; }
  .route.is-air .line::before, .rc-flight.is-air .rc-rail::after { display: none; }
  .detail .close:active, .rc-more:active, .chip:active, .tower-row:active { transform: none; }
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker-track { animation: none; }
  .rc-radar::after, .rc-flight.is-air .rc-dot { animation: none; }
  .marker.is-airborne::before { animation: none; opacity: 0.5; transform: none; }
  .stamp[data-state="live"] .dot { animation: none; }
  .marker .halo { transition: none; }
}