/* Headcam replay — ported from the headcam project's own stylesheet.

   Two departures from the source. The colours are Orion's — slate surfaces and
   the emerald primary, not the source's near-black and yellow. And the
   full-screen map and the mobile drawer are `absolute` against `.replay-deck`
   rather than `fixed` to the window: the deck now has a header row of its own,
   and an element pinned to the viewport would slide under it.
   Kept as plain CSS rather than translated into Tailwind so the two projects
   stay diffable against each other. */

.youtube-player,
.youtube-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Every map fills the box laid out for it: MapLibre wants a sized element of
   its own rather than the flex parent.

   The second selector is the load-bearing one. MapLibre puts `maplibregl-map`
   on the container and its own stylesheet declares that class
   `position: relative` — injected from the CDN at runtime, so it lands after
   this file and wins on equal specificity. A relatively positioned box with no
   in-flow children is nought pixels tall, and MapLibre reads the size once, so
   every map came out at its default 300px inside boxes twice that. */
.headcam-map,
.headcam-map.maplibregl-map {
  position: absolute;
  inset: 0;
}

/* ---------------------------------------------------------------------------
   Immersive replay: leg map on the left, footage on the stage, the runner's
   position map picture-in-picture, playback pinned along the bottom.
   --------------------------------------------------------------------------- */

/* Orion's palette, and Orion is a light interface: a slate-100 page, white
   panels, slate text and the emerald primary. Nothing here is dark.

   The one exception is not ours to make: YouTube letterboxes inside its own
   iframe, so a video narrower than the stage has black bars whatever colour
   sits behind it. Everything around the footage — header, leg panel, HUD,
   transport — is white. */
.replay {
  --replay-surface: #ffffff;
  --replay-line: #e2e8f0;
  --replay-ink: #0f172a;
  --replay-muted: #64748b;
  --replay-accent: #059669;
  --replay-accent-ink: #ffffff;
  --replay-veil: rgba(255, 255, 255, 0.92);
  --replay-topbar-h: 3.5rem;
  --replay-controls-h: 5.4rem;
  --replay-safe-t: env(safe-area-inset-top, 0px);
  --replay-safe-b: env(safe-area-inset-bottom, 0px);
  --replay-ease: cubic-bezier(0.22, 0.9, 0.25, 1);
  position: relative;
  display: grid;
  /* `minmax(0, 1fr)` rather than the implicit `auto`: a grid column sized to
     `auto` never shrinks below its content's minimum, and the transport row
     alone is some 600px wide. On a phone every row then overflowed the screen
     together, carrying the video and the maps off the right-hand edge. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #f1f5f9;
  color: var(--replay-ink);
}

/* Top bar ------------------------------------------------------------------ */

.replay-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  height: calc(var(--replay-topbar-h) + var(--replay-safe-t));
  padding: var(--replay-safe-t) 0.9rem 0;
  background: var(--replay-surface);
  border-bottom: 1px solid var(--replay-line);
}

.replay-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}

.replay-brand__mark {
  height: 2.1rem;
  width: auto;
}

.replay-brand__word {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.replay-topbar__title {
  flex: 1;
  min-width: 0;
}

.replay-topbar__title strong,
.replay-topbar__title span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.replay-topbar__title strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.replay-topbar__title span {
  font-size: 0.75rem;
  color: var(--replay-muted);
}

.replay-topbar__links {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
}

.replay-topbar__draft {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.replay-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--replay-ink);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--replay-line);
  transition: background 0.15s var(--replay-ease);
}

.replay-link:hover {
  background: #f1f5f9;
}

.replay-link svg {
  width: 1.1rem;
  height: 1.1rem;
}

.replay-link--accent {
  color: var(--replay-accent-ink);
  background: var(--replay-accent);
  border-color: transparent;
}

.replay-link--accent:hover {
  background: #047857;
}

.replay-deck {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.replay-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #e2e8f0;
}

.replay-stage__empty,
.replay-dock__empty,
.replay-leg__empty {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--replay-muted);
}

.replay-muted {
  color: var(--replay-muted);
}

.replay-eyebrow {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--replay-muted);
}

/* Renamed from the source's `.sr-only`: Tailwind ships one of its own and this
   sheet is loaded after it. */
.replay-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* HUD ---------------------------------------------------------------------- */

.replay-hud {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  justify-items: end;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  pointer-events: none;
  transition: opacity 0.25s var(--replay-ease);
}

.replay-hud[data-dimmed] {
  opacity: 0;
}

.replay-hud__time {
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: var(--replay-veil);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  text-align: right;
  backdrop-filter: blur(10px);
}

.replay-hud__time strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.replay-hud__leg {
  font-size: 0.7rem;
  color: var(--replay-muted);
}

/* Live sensor readings, only rendered when the track carries them. */
.replay-hud__sensors {
  display: flex;
  gap: 0.35rem;
}

.replay-hud__sensor {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--replay-veil);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  font-size: 0.75rem;
}

.replay-hud__sensor svg {
  width: 0.85rem;
  height: 0.85rem;
  align-self: center;
  color: var(--replay-accent);
}

.replay-hud__sensor strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The split of the control just passed, holding for a few seconds of the run. */
.replay-hud__split {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--replay-accent);
}

/* React remounted this on every new control; the port re-adds the class
   instead, which is what restarts the animation. */
.replay-hud__split--in {
  animation: replay-split-in 0.3s var(--replay-ease);
}

@keyframes replay-split-in {
  from {
    opacity: 0;
    transform: translateY(-0.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay-hud__split--in {
    animation: none;
  }
}

/* Leg panel ---------------------------------------------------------------- */

.replay-leg {
  position: relative;
  z-index: 4;
  display: flex;
  flex: none;
  flex-direction: column;
  width: clamp(15rem, 23vw, 22rem);
  background: var(--replay-surface);
  border-right: 1px solid var(--replay-line);
}

.replay-leg__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--replay-line);
}

.replay-leg__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.15rem;
}

.replay-leg__title svg {
  width: 0.95rem;
  height: 0.95rem;
}

.replay-leg__split {
  display: flex;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.replay-leg__map {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #f1f5f9;
}

.replay-north {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--replay-veil);
  border: 1px solid var(--replay-line);
  pointer-events: none;
}

.replay-north svg {
  width: 1.5rem;
  height: 1.5rem;
}

.replay-leg__handle {
  display: none;
}

.replay-scrim {
  display: none;
}

/* Picture-in-picture map --------------------------------------------------- */

.replay-dock {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: clamp(10rem, 21vw, 18.75rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  background: #f1f5f9;
  cursor: pointer;
}

/* Expanded, it covers the whole player — the leg panel included — which is
   what `.replay-deck` is. The source could say `fixed` because the deck owned
   the window; here the dock is a child of the deck so that `inset: 0` reaches
   the same edges. */
.replay-dock[data-mode='expanded'] {
  position: absolute;
  inset: 0;
  z-index: 60;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
}

.replay-dock__expand,
.replay-dock__hint {
  position: absolute;
  z-index: 2;
  color: var(--replay-ink);
  background: var(--replay-veil);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.replay-dock__expand {
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}

.replay-dock__expand svg {
  width: 0.95rem;
  height: 0.95rem;
}

.replay-dock__hint {
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
}

.replay-dock__tools {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shared chrome ------------------------------------------------------------ */

.replay-icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 0.7rem;
  color: var(--replay-ink);
  background: #ffffff;
  border: 1px solid var(--replay-line);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.15s var(--replay-ease), transform 0.15s var(--replay-ease);
}

.replay-icon-button svg {
  width: 1.6rem;
  height: 1.6rem;
}

.replay-icon-button:hover {
  background: #f1f5f9;
}

.replay-icon-button:active {
  transform: scale(0.94);
}

.replay-icon-button--primary {
  width: 3.25rem;
  height: 3.25rem;
  color: var(--replay-accent-ink);
  background: var(--replay-accent);
  border-color: transparent;
}

.replay-icon-button--primary:hover {
  background: #047857;
}

.replay-icon-button[aria-pressed='true'] {
  border-color: var(--replay-accent);
  color: var(--replay-accent);
}

.replay-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.15rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--replay-ink);
  background: var(--replay-veil);
  border: 1px solid var(--replay-line);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.replay-chip svg {
  width: 0.95rem;
  height: 0.95rem;
}

.replay-chip--float {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
}

/* Controls ----------------------------------------------------------------- */

.replay-controls {
  position: relative;
  z-index: 70;
  min-width: 0;
  height: calc(var(--replay-controls-h) + var(--replay-safe-b));
  padding: 0 0.9rem var(--replay-safe-b);
  background: var(--replay-surface);
  border-top: 1px solid var(--replay-line);
}

.replay-scrub {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.6rem;
}

.replay-scrub input[type='range'] {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.replay-scrub input[type='range']::-webkit-slider-runnable-track {
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--replay-accent) 0 var(--replay-progress),
    #e2e8f0 var(--replay-progress) 100%
  );
}

.replay-scrub input[type='range']::-moz-range-track {
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--replay-accent) 0 var(--replay-progress),
    #e2e8f0 var(--replay-progress) 100%
  );
}

.replay-scrub input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.3rem;
  border: 0;
  border-radius: 50%;
  background: var(--replay-accent);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}

.replay-scrub input[type='range']::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 50%;
  background: var(--replay-accent);
}

.replay-scrub__tick {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 2px;
  height: 0.6rem;
  margin-left: -1px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: #94a3b8;
}

.replay-controls__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  height: calc(var(--replay-controls-h) - 1.6rem);
}

.replay-controls__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
}

.replay-timecode {
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  white-space: nowrap;
}

.replay-pill {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: #f1f5f9;
  border: 1px solid var(--replay-line);
}

.replay-rates {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.6rem;
  background: #f1f5f9;
  border: 1px solid var(--replay-line);
}

.replay-rates button {
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: 0.45rem;
  font-size: 0.75rem;
  color: var(--replay-muted);
  background: transparent;
  cursor: pointer;
}

.replay-rates button[aria-pressed='true'] {
  background: #ffffff;
  color: var(--replay-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Narrow screens ----------------------------------------------------------- */

@media (max-width: 900px) {
  .replay {
    --replay-topbar-h: 3rem;
    --replay-controls-h: 4.5rem;
  }

  .replay-topbar {
    gap: 0.5rem;
    padding-inline: 0.6rem;
  }

  .replay-brand__mark {
    height: 1.8rem;
  }

  /* The wordmark is the first thing to go: the logo already says Orion, and the
     title of the race is worth more of a phone's width. */
  .replay-brand__word {
    display: none;
  }

  .replay-topbar__title strong {
    font-size: 0.8rem;
  }

  .replay-topbar__title span,
  .replay-topbar__draft {
    display: none;
  }

  /* Icon-only, but a finger's worth of tap target. */
  .replay-link {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  .replay-link svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .replay-link__label {
    display: none;
  }

  .replay[data-mobile] .replay-leg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 23.75rem);
    box-shadow: 24px 0 60px rgba(15, 23, 42, 0.35);
    transform: translateX(-100%);
    transition: transform 0.34s var(--replay-ease);
  }

  .replay[data-mobile] .replay-leg[data-open] {
    transform: none;
  }

  /* The handle is parked on the panel edge so it rides out with the drawer. */
  .replay[data-mobile] .replay-leg__handle {
    position: absolute;
    top: 50%;
    right: -2.125rem;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    width: 2.125rem;
    height: 6rem;
    padding: 0;
    transform: translateY(-50%);
    color: var(--replay-ink);
    background: #ffffff;
    border: 1px solid var(--replay-line);
    border-left: 0;
    border-radius: 0 0.85rem 0.85rem 0;
    box-shadow: 6px 0 18px rgba(15, 23, 42, 0.2);
    cursor: pointer;
  }

  .replay[data-mobile] .replay-leg__handle svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .replay-leg__grip {
    width: 3px;
    height: 1.6rem;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, var(--replay-muted) 0 3px, transparent 3px 7px);
  }

  .replay[data-mobile] .replay-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--replay-ease);
  }

  .replay[data-mobile] .replay-scrim[data-open] {
    opacity: 1;
    pointer-events: auto;
  }

  /* Scoped to pip mode: an unscoped rule here would out-specify the expanded state. */
  .replay[data-mobile] .replay-dock[data-mode='pip'] {
    right: 0.75rem;
    bottom: 0.75rem;
    width: clamp(7.75rem, 34vw, 11.9rem);
    border-radius: 0.65rem;
  }

  .replay[data-map-expanded] .replay-leg__handle {
    opacity: 0;
    pointer-events: none;
  }

  .replay[data-mobile] .replay-hud {
    gap: 0.5rem;
    padding: 0.7rem;
  }

  .replay[data-mobile] .replay-hud__time strong {
    font-size: 1.5rem;
  }

  .replay[data-mobile] .replay-pill,
  .replay[data-mobile] .replay-rates {
    display: none;
  }

  .replay[data-mobile] .replay-icon-button {
    width: 2.5rem;
    height: 2.5rem;
  }

  .replay[data-mobile] .replay-icon-button svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .replay[data-mobile] .replay-icon-button--primary {
    width: 2.9rem;
    height: 2.9rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .replay {
    --replay-topbar-h: 2.6rem;
    --replay-controls-h: 3.9rem;
  }

  .replay-topbar__title {
    display: none;
  }

  .replay-hud__time strong {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay *,
  .replay-dock,
  .replay-leg {
    transition-duration: 0.01ms !important;
  }
}