/* Global styles for the React app. Tailwind-ish minimal, hand-rolled. */
.animation-lab { position: fixed; inset: 0; display: grid; grid-template-rows: 60px 1fr 34px; background: #111820; color: #e6edf3; font-family: "Inter", system-ui, sans-serif; }
.animation-lab header, .animation-lab footer { display: flex; align-items: center; justify-content: space-between; padding: 0 26px; gap: 20px; }
.animation-lab header { border-bottom: 1px solid #29333d; }
.animation-lab header > span { font-size: 11px; letter-spacing: 2px; color: #98a8b5; }
.animation-lab footer { font-size: 10px; color: #8395a3; letter-spacing: .5px; }
.animation-lab-layout { display: grid; grid-template-columns: 310px 1fr; min-height: 0; }
.animation-lab-tabs { display: flex; gap: 5px; margin-bottom: 22px; }
.animation-lab-tabs button { flex: 1; background: transparent; color: #96a6b4; border: 1px solid #34404d; border-radius: 6px; padding: 9px 5px; font-size: 11px; }
.animation-lab-tabs button[aria-selected="true"] { background: #e9edf0; border-color: #e9edf0; color: #17222c; }
.appearance-intro { color: #99a9b6; font-size: 12px; line-height: 1.65; }
.appearance-controls { color: #e6edf3; font-family: "Inter", system-ui, sans-serif; }
.appearance-heading { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 12px; gap: 6px; font-size: 12px; font-weight: 600; }
.appearance-controls button, .appearance-controls select { font: inherit; cursor: pointer; border: 1px solid #394756; background: #1a252f; color: #dce6ed; border-radius: 5px; }
.appearance-controls .appearance-heading button { padding: 5px 9px; color: #f0c93a; font-size: 10px; }
.appearance-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.appearance-controls .appearance-presets button { display: flex; flex-direction: column; padding: 6px; gap: 7px; text-align: left; font-size: 10px; }
.appearance-presets button[aria-pressed="true"] { border-color: #f0c93a; background: #303126; }
.appearance-swatch { display: block; width: 100%; height: 26px; border-radius: 3px; }
.appearance-custom { margin-top: 19px; font-size: 11px; }
.appearance-custom summary { cursor: pointer; color: #aabac6; margin-bottom: 12px; }
.appearance-colors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px 6px; }
.appearance-colors label { display: flex; flex-direction: column; gap: 6px; color: #aabac6; font-size: 9px; }
.appearance-colors input { appearance: none; padding: 2px; width: 100%; height: 31px; border-radius: 4px; border: 1px solid #44515d; background: #1a252f; cursor: pointer; }
.appearance-colors input::-webkit-color-swatch-wrapper { padding: 0; }
.appearance-colors input::-webkit-color-swatch { border: none; border-radius: 2px; }
.appearance-hint { color: #8197a7; font-size: 10px; line-height: 1.5; margin: 20px 0 12px; }
.appearance-compact .appearance-heading { margin: 12px 0 8px; }
.appearance-compact select { padding: 8px; width: 100%; font-size: 11px; }
.appearance-compact .appearance-custom { margin-top: 10px; }
.appearance-compact .appearance-hint { margin: 10px 0; }
.appearance-studio-link { display: inline-block; font-size: 11px; margin: 4px 0; }
.appearance-compare { margin-top: 20px; }
.appearance-open { pointer-events: auto; margin-left: 13px; padding: 5px 9px; border-radius: 5px; border: 1px solid #65747d; background: #202c34; color: #f0c93a; cursor: pointer; font: inherit; }
@media (max-width: 700px) { .appearance-open { margin-left: 7px; } }
.animation-lab aside { padding: 20px 24px; overflow-y: auto; }
.animation-lab h1 { margin: 12px 0; font-size: 30px; line-height: 1.05; letter-spacing: -1px; }
.animation-lab aside p { font-size: 12px; line-height: 1.65; color: #99a9b6; }
.animation-lab aside .appearance-hint { font-size: 10px; color: #8197a7; }
.animation-lab aside .animation-lab-eyebrow { font-size: 10px; letter-spacing: 1.5px; color: #f0c93a; margin: 4px 0 10px; }
.animation-lab-states { display: grid; gap: 7px; margin: 19px 0 24px; }
.animation-lab button { cursor: pointer; font: inherit; }
.animation-lab-states button { display: grid; gap: 4px; padding: 11px 13px; text-align: left; border: 1px solid #34404d; background: #1a242e; border-radius: 7px; color: #e6edf3; }
.animation-lab-states button[aria-pressed="true"] { border-color: #f0c93a; background: #2c2c22; }
.animation-lab-states strong { font-size: 12px; text-transform: capitalize; }
.animation-lab-states small { font-size: 10px; color: #99a9b6; }
.animation-lab-range { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 11px; margin: 14px 0; gap: 10px; }
.animation-lab-range output { color: #f0c93a; font-variant-numeric: tabular-nums; }
.animation-lab-range input { width: 100%; margin: 0; accent-color: #f0c93a; }
.animation-lab-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #99a9b6; }
.animation-lab-check input { accent-color: #f0c93a; }
.animation-lab-pause { width: 100%; padding: 10px; background: transparent; border: 1px solid #526170; color: #e6edf3; border-radius: 6px; }
.animation-lab-stage { position: relative; min-width: 0; min-height: 0; background: #dfe5e9; }
.animation-lab-views { position: absolute; top: 22px; right: 24px; left: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.animation-lab-views button { color: #3b4a57; background: #ffffffa6; border: 1px solid #bac6cf; padding: 8px 13px; border-radius: 5px; font-size: 11px; text-transform: capitalize; }
.animation-lab-views button[aria-pressed="true"] { background: #1b2934; color: #fff; border-color: #1b2934; }
.animation-lab-readout { position: absolute; bottom: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; color: #435969; font-size: 11px; letter-spacing: 1px; pointer-events: none; }
@media (max-width: 700px) { .animation-lab-layout { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 55%) 1fr; } .animation-lab-stage { grid-row: 1; } .animation-lab aside { padding: 14px 20px; } .animation-lab-states { grid-template-columns: 1fr 1fr; } .animation-lab header, .animation-lab footer { padding: 0 15px; } .animation-lab header > span, .animation-lab footer > span { display: none; } }
:root {
  --bg: #0e1117;
  --bg2: #161b22;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #f0c93a;
  --accent2: #3a8aa1;
  --danger: #ff6464;
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Shared cosmetics still used by Play setup */
.logo { font-weight: 900; font-size: 20px; letter-spacing: 0.5px; }
.logo span { color: var(--accent); }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 800;
  background: var(--accent);
  color: #1a1a1a;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 32px rgba(240, 201, 58, 0.32); }
.cta.secondary { background: transparent; color: var(--fg); border: 1px solid #2a313a; }
.sub { text-align: center; color: var(--muted); margin: 0 0 32px; }

/* ========================================================================
   Landing — cockpit shell over the live game world.
   Backdrop = the actual `<World>` running with a drone camera. UI sits on
   top as translucent glass with HUD chrome (corner brackets, viewfinder
   marks, scanlines). Typography mixes Bebas Neue (display), Inter (body),
   JetBrains Mono (telemetry).
   ======================================================================== */
.op-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 48px 1fr 38px;
  background: #06070b;
  color: var(--fg);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
.op-shell-landing { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
.op-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum" 1; }
.op-dim { color: rgba(230, 237, 243, 0.45); }
.op-display {
  font-family: "Bebas Neue", "Anton", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 7.2vw, 108px);
  line-height: 0.88;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  white-space: pre-line;
  color: var(--fg);
  margin: 4px 0 10px;
  text-shadow: 0 8px 38px rgba(0, 0, 0, 0.55);
}
.op-display-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(230, 237, 243, 0.78);
  text-transform: uppercase;
}

/* ---- 3D backdrop layer ---- */
.op-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Last-resort tint behind the Canvas. The InstantBackdrop covers this
     within ~16ms, but during the tiny window between paint and the first
     R3F frame we want sky-coloured pixels — not black. */
  background:
    linear-gradient(180deg, #b8d4e8 0%, #c2cfdb 55%, #6b7565 100%);
}
.op-bg canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: relative;
  z-index: 1;
  /* Canvas is opaque from frame 1 (the InstantBackdrop sets a scene
     background colour synchronously). We deliberately don't animate the
     canvas itself — filter: blur on a full-screen WebGL surface re-runs
     a Gaussian convolution every paint and tanks frame rate. The smooth
     de-focus comes from a constant-blur overlay below whose OPACITY
     alone animates (compositor-only, GPU-cheap, jitter-free). */
}

/* Cinematic focus-pull. A real element (not a pseudo) so React can
   remount it via key={biome} — that restarts the animation on every
   biome swap. Constant backdrop blur, opacity-only animation = native
   refresh-rate smooth. The keyframes hold near-full opacity through
   the first 30% of the timeline (the camera lift apex, when the biome
   scene swaps), then rack open like a real lens. */
.op-bg-defocus {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(220, 230, 240, 0.08) 0%, rgba(140, 160, 180, 0.14) 60%, rgba(20, 26, 32, 0.22) 100%);
  backdrop-filter: blur(36px) saturate(1.06);
  -webkit-backdrop-filter: blur(36px) saturate(1.06);
  animation: op-defocus 2400ms cubic-bezier(0.33, 0.04, 0.18, 1) forwards;
  will-change: opacity;
}
@keyframes op-defocus {
  0%   { opacity: 1; }
  18%  { opacity: 1; }   /* hold through camera lift */
  42%  { opacity: 0.92; } /* apex — biome swap happens here */
  100% { opacity: 0; }
}
.op-bg-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 35% 60%, transparent 0%, rgba(6,8,16,0.0) 36%, rgba(6,8,16,0.5) 88%, rgba(6,8,16,0.82) 100%),
    linear-gradient(180deg, rgba(6,8,16,0.45) 0%, transparent 22%, transparent 60%, rgba(6,8,16,0.85) 100%);
}
.op-bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,8,16,0.4), transparent 12%, transparent 88%, rgba(6,8,16,0.4));
}
.op-bg-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* viewfinder corner brackets in the corners of the screen */
.op-viewfinder {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(240, 201, 58, 0.5);
  border-style: solid;
  border-width: 0;
}
.op-vf-tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.op-vf-tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.op-vf-bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.op-vf-br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

/* ─────────────────────────────────────────────────────────────────────
   Card pattern — translucent glass with corner brackets.
   ───────────────────────────────────────────────────────────────────── */
.op-card {
  position: relative;
  background: linear-gradient(180deg, rgba(8,10,16,0.42) 0%, rgba(8,10,16,0.68) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(240, 201, 58, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}
.op-card-bracket::before,
.op-card-bracket::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(240, 201, 58, 0.55);
  pointer-events: none;
}
.op-card-bracket::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.op-card-bracket::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Top rail.
   ───────────────────────────────────────────────────────────────────── */
.op-top {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 22px;
  gap: 18px;
  background: linear-gradient(180deg, rgba(8,11,18,0.88), rgba(8,11,18,0.55));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.op-top-left, .op-top-right { display: flex; align-items: center; gap: 14px; }
.op-top-right { justify-content: flex-end; }
.op-top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: rgba(230, 237, 243, 0.85);
}
.op-top-center i { color: rgba(139, 148, 158, 0.6); font-style: normal; margin-right: 6px; letter-spacing: 1.8px; }
.op-sep { color: rgba(255,255,255,0.18); }

/* Cycling-event ticker: replaces UTC/SESSION/BUILD dev readout. A
   small yellow tag + body, sliding/fading in every time the index
   changes (parent re-keys this element). */
.op-ticker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(240, 201, 58, 0.04), rgba(255,255,255,0.02));
  animation: op-ticker-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes op-ticker-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.op-ticker-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 3px 7px;
  background: var(--accent);
  color: #14150b;
  text-transform: uppercase;
}
.op-ticker-body {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: rgba(230, 237, 243, 0.88);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1;
}
.op-brand span { color: var(--accent); }
.op-brand-bar {
  width: 3px;
  height: 18px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(240, 201, 58, 0.55);
}
.op-brand-glyph {
  width: 24px;
  height: 12px;
  color: var(--accent);
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
}
.op-tag {
  color: rgba(139, 148, 158, 0.75);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 11px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  color: rgba(230, 237, 243, 0.9);
  background: rgba(255,255,255,0.02);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.op-pill-live { border-color: rgba(93, 255, 154, 0.4); color: #cdf2da; }
.op-pill i { font-style: normal; color: rgba(255,255,255,0.55); font-size: 9px; letter-spacing: 1.4px; margin-left: 2px; }
.op-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #5dffa0;
  box-shadow: 0 0 8px #5dffa0;
  animation: op-pulse 1.6s ease-in-out infinite;
}
@keyframes op-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ─────────────────────────────────────────────────────────────────────
   Rider pill — compact, lives inside the top nav (right side), so it
   never collides with the routes rail. Color dot + name + bike + km.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   Main stage — asymmetric layout.
   ───────────────────────────────────────────────────────────────────── */
.op-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  /* Row 1 holds the hero + rail (sized by their content).
     Row 2 holds the launch CTA right below the rail.
     Row 3 (1fr) absorbs all remaining viewport height — that's the
     "empty" area where the 3D scene shows through, intentionally. */
  grid-template-rows: auto auto 1fr;
  gap: 14px 18px;
  padding: 22px 22px 18px;
  align-items: start;
  align-items: start;
}

/* ---- left column: the mode card, the route's card under it ---- */
.op-left {
  grid-column: 1;
  /* Spans the right column's rows, but `align-self: start` keeps it at its content height. */
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* ---- hero ---- */
.op-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 20px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
/* The left accent bar takes the card's ::before (its corner bracket): full height, no bracket
   border, or it came out as a gold stub at the top-left corner. */
.op-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  border: 0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 30%, transparent 80%);
  opacity: 0.7;
}
.op-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
}
.op-marker-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: op-pulse 1.6s ease-in-out infinite;
}
.op-marker-dot.orange { background: #ff8a3d; box-shadow: 0 0 8px #ff8a3d; }
.op-hero-desc {
  margin: 0 0 16px;
  max-width: 580px;
  color: rgba(230, 237, 243, 0.78);
  font-size: 14.5px;
  line-height: 1.55;
}
.op-track-preview {
  width: 100%;
  height: 158px;
  display: block;
  border: 1px solid rgba(255,255,255,0.05);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.10)),
    rgba(10, 13, 18, 0.45);
  margin-bottom: 14px;
}
.op-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Each meter spans the row's two shared lines (label, value), so every value, numbers and the
   weather word alike, sits on one baseline; text clears each divider by the same 16 px. */
.op-hero-meta { grid-auto-rows: auto; }
.op-meter {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: baseline;
  row-gap: 4px;
  padding: 12px 16px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.op-meter:first-child { padding-left: 0; }
.op-meter:last-child { border-right: 0; padding-right: 0; }
.op-meter-label {
  font-size: 9px;
  letter-spacing: 2.4px;
  color: rgba(139, 148, 158, 0.72);
  text-transform: uppercase;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
.op-meter-value {
  font-family: "JetBrains Mono", monospace;
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.op-meter-value.op-meter-text { font-size: 14px; letter-spacing: 1.6px; font-weight: 700; }
.op-meter-value i { font-style: normal; font-size: 11px; color: rgba(139, 148, 158, 0.7); margin-left: 4px; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────
   Dominant launch bar — the primary START RIDING action, full-width at
   the bottom of the hero card. Sits last in the visual hierarchy so the
   eye lands here once it's done reading route info.
   ───────────────────────────────────────────────────────────────────── */
.op-launch {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: linear-gradient(95deg, #f0c93a 0%, #f6d558 55%, #f0c93a 100%);
  color: #14150b;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  box-shadow:
    0 10px 26px rgba(240, 201, 58, 0.30),
    inset 0 -2px 0 rgba(20, 21, 11, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  overflow: hidden;
  min-height: 56px;
}
.op-launch:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 16px 40px rgba(240, 201, 58, 0.38),
    inset 0 -2px 0 rgba(20, 21, 11, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.op-launch:active { transform: translateY(0); }
/* Nothing to start (a mode with no route for it, Work me out without its trainer): the bar stays,
   greyed and still, its words saying why. */
.op-launch:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.62); transform:none; box-shadow:none; }
.op-launch:disabled .op-launch-sweep { display:none; }
.op-launch:disabled .op-launch-key { display:none; }
/* Its clip-path cuts an outline drawn outside it: the focus ring is drawn inside. */
.op-launch:focus-visible { outline:2px solid #14150b; outline-offset:-5px; }
.op-launch-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: rgba(20, 21, 11, 0.85);
  line-height: 1;
  padding: 0 2px;
}
.op-launch-text {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.op-launch-text strong {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1;
  color: #14150b;
}
.op-launch-text small {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 800;
  color: rgba(20, 21, 11, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(20, 21, 11, 0.18);
  padding-left: 14px;
}
.op-launch-key {
  display: inline-flex;
  align-items: center;
}
.op-launch-key kbd {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 4px 9px;
  background: rgba(20, 21, 11, 0.16);
  border: 1px solid rgba(20, 21, 11, 0.16);
  color: #14150b;
}
.op-launch-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: op-sweep 4.4s ease-in-out infinite;
}
@keyframes op-sweep {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* Row of small secondary actions (Customize / Terrain Lab + keymap),
   placed BETWEEN the metrics and the launch bar so the eye descends
   through important → secondary → primary. */
/* Rides saved in this browser on the selected route: continue, download or delete. */
.op-saved-rides { display:grid; gap:6px; margin:-4px 0 14px; }
.op-saved-ride { display:flex; align-items:center; gap:14px; min-height:44px; padding:0 0 0 14px; border:1px solid rgba(240,201,58,.22); border-left:3px solid var(--accent); background:rgba(240,201,58,.045); font:800 10px/1.3 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; }
.op-saved-ride-tag { flex:none; color:var(--accent); }
.op-saved-ride-stats { flex:1; min-width:0; color:rgba(230,237,243,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-saved-ride button { align-self:stretch; border:0; border-left:1px solid rgba(240,201,58,.18); background:none; font:inherit; letter-spacing:inherit; cursor:pointer; transition:color 140ms ease,background 140ms ease; }
.op-saved-ride-continue { padding:0 18px; color:#14150b; background:var(--accent)!important; }
.op-saved-ride-continue:hover { filter:brightness(1.07); }
.op-saved-ride-action { padding:0 14px; color:rgba(230,237,243,.7); }
.op-saved-ride-action:hover:not(:disabled) { color:var(--accent); background:rgba(240,201,58,.07); }
.op-saved-ride-action:disabled { opacity:.35; cursor:default; }
.op-saved-ride-action[data-confirm=true] { color:#14150b; background:#e0826a!important; }
.op-saved-ride button:focus-visible { outline:1px solid var(--accent); outline-offset:-3px; }
.op-rail-saved { font-style:normal; color:var(--accent); }
@media (max-width:600px) { .op-saved-ride { flex-wrap:wrap; gap:8px 12px; padding:8px 0 0 12px; } .op-saved-ride-stats { flex-basis:100%; order:1; padding-bottom:8px; } .op-saved-ride-tag { order:0; } .op-saved-ride button { order:2; min-height:40px; border-top:1px solid rgba(240,201,58,.18); } .op-saved-ride-continue { flex:1; } }
.op-secondary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.op-secondary-row .op-keymap { margin-left: auto; }
@media (max-width:600px) { .op-shell-landing .op-secondary-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:8px; } .op-shell-landing .op-secondary-row .op-link { padding:10px 6px; letter-spacing:1px; } }
.op-link {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(230, 237, 243, 0.85);
  padding: 13px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.op-link:hover { border-color: rgba(240, 201, 58, 0.5); color: var(--accent); }

.op-keymap {
  display: flex;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(139, 148, 158, 0.78);
  text-transform: uppercase;
  font-weight: 700;
}
.op-keymap span { display: inline-flex; align-items: center; gap: 6px; }
.op-keymap kbd {
  font-family: "JetBrains Mono", monospace;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
}

/* ---- right route rail ---- */
.op-rail {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Cap so the launch CTA below doesn't get pushed to the screen bottom
     when there are many routes — the list scrolls inside instead. */
  max-height: clamp(360px, 50vh, 540px);
}

/* Launch CTA — anchored directly under the routes rail, same width. */
.op-launch {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
.op-rail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  font-size: 10px;
  letter-spacing: 2.6px;
  font-weight: 800;
  color: rgba(230, 237, 243, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}
.op-rail-head i { color: var(--accent); font-style: normal; margin-right: 8px; }
.op-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
  /* The last visible row fades out: more routes below, not a row cut in half. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
}
.op-rail-list::-webkit-scrollbar { width: 4px; }
.op-rail-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }
.op-rail-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 18px;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 11px 16px 11px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.op-rail-row:hover { background: rgba(255,255,255,0.03); }
.op-rail-row.active {
  background: linear-gradient(90deg, rgba(240,201,58,0.12), transparent 70%);
  border-left-color: var(--accent);
}
.op-rail-row.active .op-rail-cursor { color: var(--accent); transform: translateX(2px); }
.op-rail-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(139, 148, 158, 0.6);
  font-weight: 700;
}
.op-rail-row.active .op-rail-num { color: var(--accent); }
.op-rail-num[data-badge] { color: var(--accent); }
.routes-badge { color: var(--accent); font-style: normal; }
.op-rail-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-rail-name strong {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 16px;
  letter-spacing: 1.4px;
  line-height: 1.05;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.op-rail-name small {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: rgba(139, 148, 158, 0.75);
  text-transform: uppercase;
  font-weight: 700;
}
.op-rail-dist {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
}
.op-rail-dist i { font-style: normal; font-size: 9px; color: rgba(139, 148, 158, 0.7); margin-left: 2px; font-weight: 700; }
.op-rail-cursor { color: rgba(139, 148, 158, 0.5); font-size: 14px; transition: color 140ms ease, transform 140ms ease; }
.op-rail-empty {
  padding: 18px;
  font-size: 11px;
  color: rgba(139, 148, 158, 0.6);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}

/* Upload-GPX row — sits above the routes list inside the rail. */
.op-upload-row { padding: 8px 10px 12px; border-bottom: 1px dashed rgba(240, 201, 58, 0.18); }
.op-upload-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(240, 201, 58, 0.10) 0%, rgba(240, 201, 58, 0.04) 100%);
  border: 1px solid rgba(240, 201, 58, 0.28);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}
.op-upload-btn:hover { background: linear-gradient(180deg, rgba(240, 201, 58, 0.18) 0%, rgba(240, 201, 58, 0.07) 100%); border-color: rgba(240, 201, 58, 0.45); }
.op-upload-btn:active { transform: translateY(1px); }
.op-upload-btn:disabled { opacity: 0.65; cursor: progress; }
.op-upload-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(240, 201, 58, 0.18);
  color: var(--accent);
  font-size: 13px;
  border: 1px solid rgba(240, 201, 58, 0.5);
}
.op-upload-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-upload-label strong {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--accent);
}
.op-upload-label small {
  font-size: 10px;
  color: rgba(230, 237, 243, 0.6);
  letter-spacing: 0.4px;
  text-transform: none;
  font-weight: 500;
}
.op-upload-error {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ff8a7a;
  background: rgba(255, 100, 80, 0.08);
  border: 1px solid rgba(255, 100, 80, 0.3);
}
.op-rail-foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ---- stat tile strip ---- */
.op-stats {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
}
.op-stat {
  position: relative;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.op-stat-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  color: rgba(139, 148, 158, 0.7);
  text-transform: uppercase;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
.op-stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}
.op-stat-live::after {
  content: "LIVE";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #5dffa0;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
.op-stat-pulse {
  position: absolute;
  top: 12px;
  right: 40px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5dffa0;
  box-shadow: 0 0 8px #5dffa0;
  animation: op-pulse 1.6s ease-in-out infinite;
}

/* ---- events feed ---- */
.op-events {
  grid-column: 1;
  grid-row: 3;
  max-width: 820px;
  padding: 14px 16px 16px;
}
.op-events-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.op-events-list { display: flex; flex-direction: column; gap: 4px; }
.op-events-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: rgba(230, 237, 243, 0.78);
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  animation: op-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes op-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.op-events-bullet { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────
   Bottom telemetry — cockpit status line + rolling ping sparkline.
   ───────────────────────────────────────────────────────────────────── */
.op-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  background: linear-gradient(0deg, rgba(8,11,18,0.88), rgba(8,11,18,0.55));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(230, 237, 243, 0.78);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
.op-bottom-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.op-bottom-cell:last-child { border-right: 0; }
.op-bottom-cell i { color: rgba(139, 148, 158, 0.6); font-style: normal; margin-right: 2px; }
.op-bottom-grow { flex: 1; min-width: 0; gap: 10px; }
.op-bottom-legal a { color: inherit; text-decoration: none; }
.op-bottom-legal a:hover { color: var(--accent); }
.account-legal a { color: inherit; }
.op-ping-val { color: var(--accent); font-weight: 800; }
.op-ping-spark { display: block; }

/* ─────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
}
@media (max-width: 1080px) {
  .op-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .op-left { grid-row: 1; grid-column: 1; max-width: none; }
  .op-rail { grid-row: 2; grid-column: 1; max-height: 320px; }
  .op-top-center { display: none; }
}
@media (max-width: 720px) {
  .op-shell { grid-template-rows: 44px 1fr 32px; }
  .op-stage { padding: 14px; gap: 12px; }
  .op-hero { padding: 18px; }
  .op-hero-meta { grid-template-columns: repeat(2, 1fr); }
  .op-meter { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .op-meter:nth-child(2n) { border-right: 0; }
  .op-meter:nth-child(2n+1) { padding-left: 0; }
  .op-track-preview { height: 170px; }
  .op-keymap { display: none; }
  .op-bottom-cell { padding: 0 10px; font-size: 9px; }
  .op-bottom-cell:nth-child(n+5) { display: none; }
  .op-tag { display: none; }
  .op-viewfinder { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Ride loading overlay: a sharp route preview and progress over an opaque
   background, with a short fade once the scene is ready.
   ───────────────────────────────────────────────────────────────────── */
.op-loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #080b12;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--fg);
  opacity: 1;
  transition: opacity 180ms ease-out;
}
.op-loading.op-loading-out {
  opacity: 0;
  pointer-events: none;
}
.op-loading-content {
  position: relative;
  width: min(720px, 90vw);
  padding: 30px 34px;
  background: linear-gradient(180deg, rgba(10,13,20,0.5) 0%, rgba(10,13,20,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-top-color: rgba(240, 201, 58, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-origin: 50% 60%;
}
.op-loading-content::before,
.op-loading-content::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(240, 201, 58, 0.55);
  pointer-events: none;
}
.op-loading-content::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.op-loading-content::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.op-loading-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
}
.op-loading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.op-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: op-pulse 1.4s ease-in-out infinite;
}
.op-loading-title {
  margin: 0;
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 0.94;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  color: var(--fg);
}
.op-loading-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 2.4px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(230, 237, 243, 0.78);
}
.op-loading-canvas {
  width: 100%;
  height: 300px;
  display: block;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.12)),
    rgba(10, 13, 18, 0.5);
  margin: 4px 0 4px;
}
.op-loading-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: rgba(230, 237, 243, 0.85);
  text-transform: uppercase;
  overflow: hidden;
}
.op-loading-tip-text {
  animation: op-tip-fade 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes op-tip-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.op-loading-progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  margin-top: 4px;
}
.op-loading-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(240,201,58,0.55), var(--accent) 60%, #fff2bf);
  width: 35%;
  /* No width transition: the width is set every frame, already smoothed, and a transition restarted
     each frame left the fill far behind its percentage. */
}
/* Travelling shimmer on top of the determinate fill — keeps the bar
   feeling alive even when progress momentarily stalls. */
.op-loading-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: op-progress-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes op-progress-shimmer {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
.op-loading-progress-pct {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--accent);
}

/* ---------- Stage checklist ---------- */
.op-loading-stages {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.op-loading-stage {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.012) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(230, 237, 243, 0.55);
  overflow: hidden;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.op-loading-stage.is-active {
  color: rgba(230, 237, 243, 0.88);
  border-color: rgba(240, 201, 58, 0.18);
}
.op-loading-stage.is-done {
  color: var(--accent);
  border-color: rgba(240, 201, 58, 0.35);
  background: linear-gradient(180deg, rgba(240,201,58,0.06) 0%, rgba(240,201,58,0.015) 100%);
}
.op-loading-stage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,0.25);
  transition: color 240ms ease;
}
.op-loading-stage.is-active .op-loading-stage-mark {
  color: var(--accent);
  animation: op-pulse 1.4s ease-in-out infinite;
}
.op-loading-stage.is-done .op-loading-stage-mark {
  color: var(--accent);
}
.op-loading-stage-label {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-loading-stage-pct {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: inherit;
  opacity: 0.85;
}
/* Subtle progress sliver along the bottom of each stage row. Width is
   driven by the --f custom property set inline by the React side. */
.op-loading-stage-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--f, 0%);
  background: linear-gradient(90deg, rgba(240,201,58,0.7), var(--accent));
  /* Ease out: a row's fill moves the moment its count does. */
  transition: width 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.op-loading-stage.is-done .op-loading-stage-bar {
  width: 100%;
  opacity: 0.65;
}

/* ---------- Play / HUD ---------- */
.play-root { position: fixed; inset: 0; background: #0a0d12; }
.r3f-canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.hud { position: fixed; inset: 0; pointer-events: none; font-feature-settings: "tnum" 1; color: var(--fg); font-family: ui-sans-serif, system-ui, sans-serif; }

/* ========================================================================
   Ride Setup — same cockpit shell as the landing. Live WebGL world runs
   behind. Layout is a flex left column + tall right rail — no grid-row
   spans, no dead vertical space.
   ======================================================================== */
.op-shell-setup {
  grid-template-rows: 56px 1fr 38px;
  overflow: hidden;
}
.op-shell-setup .op-top { padding: 0 22px; height: 56px; }
.op-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(230, 237, 243, 0.85);
  padding: 7px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  cursor: pointer;
  border-radius: 0;
}
.op-back:hover { border-color: rgba(240, 201, 58, 0.55); color: var(--accent); }
.op-readiness {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  border-radius: 0;
  text-transform: uppercase;
}
.op-readiness.wait { color: #ffd166; border-color: rgba(255, 209, 102, 0.32); }
.op-readiness.wait .op-readiness-dot { background: #ffd166; box-shadow: 0 0 8px rgba(255,209,102,0.6); }
.op-readiness.ok { color: #5dffa0; border-color: rgba(93, 255, 154, 0.32); }
.op-readiness.ok .op-readiness-dot { background: #5dffa0; box-shadow: 0 0 8px rgba(93,255,154,0.6); }
.op-readiness-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  animation: op-pulse 1.6s ease-in-out infinite;
}
.op-rollout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  background: var(--accent);
  color: #14150b;
  border: none;
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(240, 201, 58, 0.32);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.op-rollout:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 36px rgba(240, 201, 58, 0.42); }
.op-rollout:disabled { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.4); box-shadow: none; cursor: not-allowed; }
.op-rollout:disabled .op-cta-glyph { background: rgba(255,255,255,0.06); }

/* ─────────────────────────────────────────────────────────────────────
   Stage layout — left scrollable flex column + tall right rail.
   ───────────────────────────────────────────────────────────────────── */
.op-setup {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  padding: 18px 22px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.op-setup-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.op-setup-left::-webkit-scrollbar { width: 4px; }
.op-setup-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }

.op-setup-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.op-setup-mid > section { display: flex; flex-direction: column; min-width: 0; }

.op-setup-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding: 0 2px;
}
.op-section-label {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 2.6px;
  font-weight: 800;
  color: rgba(230, 237, 243, 0.82);
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}
.op-section-label i {
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 1.4px;
}
.op-section-sub {
  font-size: 9px;
  color: rgba(139, 148, 158, 0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- featured route card ---- */
.op-setup-feature { display: flex; flex-direction: column; }
.op-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr);
  gap: 24px;
  padding: 22px 26px;
  position: relative;
  flex: 0 0 auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.op-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 30%, transparent 80%);
  opacity: 0.65;
  z-index: 1;
}
.op-feature-meta { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.op-feature-title { display: flex; flex-direction: column; gap: 6px; }
.op-feature-title h1 {
  margin: 4px 0 4px;
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  font-size: clamp(40px, 4.4vw, 70px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.018em;
  color: var(--fg);
  text-transform: uppercase;
}
.op-feature-title p {
  margin: 0;
  color: rgba(230, 237, 243, 0.78);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 520px;
}
.op-feature-kicker {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
.op-feature-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.op-feature-stats > div {
  padding: 12px 14px 12px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-feature-stats > div:last-child { border-right: 0; padding-right: 0; }
.op-feature-canvas {
  width: 100%;
  height: 320px;
  display: block;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.12)),
    rgba(10, 13, 18, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ---- right route rail ---- */
.op-setup-rail {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}
.op-setup-rail .op-setup-section-head {
  padding: 14px 18px 12px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.op-setup-rail .op-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.op-setup-rail .op-rail-list::-webkit-scrollbar { width: 4px; }
.op-setup-rail .op-rail-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }
.op-setup-rail .op-rail-row {
  grid-template-columns: 24px 64px 1fr auto;
  padding: 9px 16px 9px 12px;
}
.op-rail-preview {
  border: 1px solid rgba(255,255,255,0.06);
  display: block;
}
.op-error {
  margin: 12px 16px;
  padding: 8px 10px;
  font-size: 11px;
  color: #ffb4b4;
  border: 1px solid rgba(255, 100, 100, 0.3);
  background: rgba(255, 100, 100, 0.06);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}

/* ---- rider callsign + preview ---- */
.op-setup-rider { min-width: 0; }
.op-rider-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  flex: 1;
}
.op-callsign {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 12px;
}
.op-callsign-label {
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: 800;
  color: rgba(139, 148, 158, 0.85);
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}
.op-callsign input {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(255,255,255,0.16);
  color: var(--fg);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 2px;
  outline: none;
  text-transform: uppercase;
  caret-color: var(--accent);
  min-width: 0;
}
.op-callsign input::placeholder { color: rgba(139, 148, 158, 0.45); }
.op-callsign input:focus { border-bottom-color: var(--accent); }
.op-callsign-helper { font-size: 11px; color: rgba(139, 148, 158, 0.6); }
.op-rider-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(10, 13, 20, 0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid var(--accent);
  font-family: "JetBrains Mono", monospace;
}
.op-rider-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.35);
  flex: 0 0 auto;
}
.op-rider-name {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.4px;
  color: var(--fg);
  text-transform: uppercase;
  line-height: 1;
}
.op-rider-bike {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(139, 148, 158, 0.85);
  text-transform: uppercase;
}

/* ---- garage / bikes ---- */
.op-setup-garage { min-width: 0; }
.op-bike-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.op-bike {
  position: relative;
  text-align: left;
  padding: 12px 14px 12px;
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 140ms ease, transform 140ms ease;
  border-radius: 0;
}
.op-bike:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.op-bike.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(240, 201, 58, 0.10), rgba(240, 201, 58, 0.04));
  box-shadow: inset 0 -2px 0 var(--accent), 0 10px 24px rgba(240, 201, 58, 0.16);
}
.op-bike-swatch {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.4);
}
.op-bike strong {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
}
.op-bike small { font-size: 11px; color: rgba(139, 148, 158, 0.85); line-height: 1.35; font-family: "Inter", system-ui, sans-serif; }
.op-bike-stats { display: flex; gap: 12px; font-size: 11px; color: rgba(230, 237, 243, 0.88); margin-top: 2px; }
.op-bike-stats span i { font-style: normal; color: rgba(139, 148, 158, 0.65); margin-right: 4px; font-size: 9px; letter-spacing: 1.4px; }

@media (max-width: 1180px) {
  .op-setup-mid { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .op-setup {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
    overflow: auto;
  }
  .op-setup-left { overflow: visible; padding-right: 0; }
  .op-setup-rail { max-height: 360px; }
  .op-feature-card { grid-template-columns: 1fr; }
  .op-feature-canvas { height: 260px; }
}
@media (max-width: 720px) {
  .op-shell-setup .op-top { padding: 0 14px; height: auto; flex-wrap: wrap; }
  .op-shell-setup { grid-template-rows: auto 1fr auto; }
  .op-setup { padding: 14px; gap: 12px; }
  .op-feature-stats { grid-template-columns: repeat(2, 1fr); }
  .op-feature-stats > div:nth-child(2) { border-right: 0; }
  .op-mode-grid, .op-bike-grid { grid-template-columns: repeat(2, 1fr); }
  .op-top-center { display: none; }
}

.hud-stats {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 12px;
}
.stat {
  background: rgba(14, 17, 23, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  min-width: 90px;
}
.stat .label { font-size: 11px; letter-spacing: 1.4px; color: var(--muted); }
.stat .value { font-size: 36px; font-weight: 800; line-height: 1.0; }
.stat .unit  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stat.ping .value { font-size: 20px; }

@keyframes draft-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(80, 220, 130, 0.30); }
  50%      { box-shadow: 0 0 26px rgba(80, 220, 130, 0.55); }
}

/* ─────────────────────────────────────────────────────────────────────
   Segment banner: drops in at the top when the rider enters a segment. Text over the road, no card
   (the ride stays in view): mono kicker in the segment's accent, Bebas title, a soft shadow to read
   over sky or ground. Accent colour driven by `--seg-accent` (set inline per kind).
   ───────────────────────────────────────────────────────────────────── */
.hud-segment-banner {
  position: fixed;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 18px rgba(0, 0, 0, 0.45);
  animation: hud-seg-drop 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hud-segment-banner-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.6px;
  color: var(--seg-accent, var(--accent));
  text-transform: uppercase;
}
.hud-segment-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--seg-accent, var(--accent));
  box-shadow: 0 0 10px var(--seg-accent, var(--accent));
  animation: op-pulse 1.4s ease-in-out infinite;
}
.hud-segment-banner-name {
  font-family: "Bebas Neue", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}
.hud-segment-banner-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(230, 237, 243, 0.72);
  font-feature-settings: "tnum" 1;
}
/* Phones: the banner sits above the grade strip instead of over the ride stats. */
@media (max-width: 600px) {
  .hud-segment-banner { top: auto; bottom: 136px; width: calc(100vw - 24px); }
  .hud-segment-banner-name { font-size: 26px; }
  .hud-segment-banner-meta { font-size: 11px; }
}
@keyframes hud-seg-drop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-18px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Segment timer — shows active segment name + live timer */
.hud-segment {
  position: absolute;
  bottom: 160px;
  left: 24px;
  background: linear-gradient(135deg, rgba(240, 201, 58, 0.85), rgba(200, 160, 40, 0.85));
  border: 1px solid rgba(240, 220, 140, 0.6);
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  box-shadow: 0 0 20px rgba(240, 201, 58, 0.35);
  color: #1a1500;
  font-feature-settings: "tnum" 1;
  animation: draft-pulse 1.6s ease-in-out infinite;
}
.hud-segment.done {
  background: rgba(14, 17, 23, 0.85);
  border-color: #2a313a;
  color: var(--fg);
  animation: none;
}
.hud-segment .seg-kind { font-size: 10px; letter-spacing: 1.6px; font-weight: 700; opacity: 0.8; }
.hud-segment .seg-name { font-size: 14px; font-weight: 700; }
.hud-segment .seg-time { font-size: 22px; font-weight: 800; margin-left: auto; }
.hud-segment .seg-pr { font-size: 11px; color: var(--accent); font-weight: 700; margin-left: 4px; }

/* Power bar */
.hud-power-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.hud-power-bar .fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* Weather indicator */
.hud-weather {
  position: absolute;
  top: 64px;
  left: 24px;
  font-size: 20px;
  background: rgba(14, 17, 23, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 6px 12px;
}

.hud-roster {
  position: absolute;
  top: 24px; right: 24px;
  background: rgba(14, 17, 23, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  min-width: 240px;
  max-width: 320px;
}
.hud-roster .row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.hud-roster .row:last-child { border-bottom: none; }
.hud-roster .row.me .n { color: var(--accent); font-weight: 700; }
.hud-roster .row .b { color: var(--muted); font-size: 11px; }

.hud-help {
  position: absolute;
  font-size: 12px;
  color: var(--muted);
}

kbd {
  font-family: ui-monospace, monospace;
  background: #0a0d12;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #1f242c;
  color: var(--fg);
}

.hud-ble {
  position: absolute;
  top: 290px;          /* sits below the minimap (top:70 + 200 + 20 padding) */
  left: 24px;
  width: 200px;
  background: rgba(14, 17, 23, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 10px 12px;
  pointer-events: auto;
  font-feature-settings: "tnum" 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.hud-ble .ble-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.hud-ble .ble-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--muted);
  width: 28px;
}
.hud-ble .ble-value {
  flex: 1;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.hud-ble .ble-value small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
}
.hud-ble .ble-btn {
  background: transparent;
  border: 1px solid #2a313a;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  flex: 1;
}
.hud-ble .ble-btn:hover { border-color: var(--accent); background: rgba(240, 201, 58, 0.08); }
.hud-ble .ble-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hud-ble .ble-btn.ble-btn-off {
  flex: 0 0 auto;
  width: 28px;
  padding: 4px;
  font-size: 11px;
}
.hud-ble .ble-error {
  margin-top: 6px;
  font-size: 11px;
  color: var(--danger);
  line-height: 1.3;
}
.hud-ble .ble-meta {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}
.hud-ble .ble-device {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  word-break: break-word;
}
.hud-ble .ble-hint {
  margin-top: 4px;
  background: rgba(240, 138, 58, 0.10);
  border: 1px solid rgba(240, 138, 58, 0.35);
  color: #f0c094;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.4;
}
.hud-ble .ble-hint strong { color: #f5d8b8; font-weight: 700; }
.hud-ble .ble-stat {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.hud-ble .ble-raw {
  margin-top: 2px;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: #6a6f78;
  word-break: break-all;
}

.hud-debug {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 240px;
  margin-top: 200px; /* sit below the roster */
  background: rgba(14, 17, 23, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid #2a313a;
  border-radius: 14px;
  padding: 10px 12px;
  pointer-events: auto;
  font-size: 12px;
  font-feature-settings: "tnum" 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.hud-debug .dbg-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--accent);
  margin-bottom: 8px;
}
.hud-debug .dbg-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.hud-debug .dbg-close:hover { color: var(--fg); }
.hud-debug .dbg-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hud-debug .dbg-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.2px;
}
.hud-debug .dbg-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
}
.hud-debug .dbg-value small {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  font-weight: 600;
}
.hud-debug .dbg-slider {
  display: block;
  width: 100%;
  margin: 8px 0 6px;
  accent-color: var(--accent);
}
.hud-debug .dbg-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.hud-debug .dbg-preset {
  background: transparent;
  border: 1px solid #2a313a;
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  padding: 5px 0;
}
.hud-debug .dbg-preset:hover { border-color: var(--accent); }
.hud-debug .dbg-preset.active {
  border-color: var(--accent);
  background: rgba(240, 201, 58, 0.12);
  color: var(--accent);
}
.hud-debug .dbg-hint {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.hud-debug .dbg-row-toggle {
  margin: 6px 0 4px;
  align-items: center;
}

/* Debug perf overlay — same look as the debug panel, sits just below it. */
.hud-perf {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 240px;
  margin-top: 540px; /* below the debug panel */
  background: rgba(14, 17, 23, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid #2a313a;
  border-radius: 14px;
  padding: 10px 12px;
  pointer-events: auto;
  font-size: 12px;
  font-feature-settings: "tnum" 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.hud-perf .dbg-title {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--accent);
  margin-bottom: 8px;
}
.hud-perf .perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.hud-perf .perf-grid-bottom {
  margin-top: 6px;
}
.hud-perf .perf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hud-perf .perf-label {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.hud-perf .perf-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.hud-perf .perf-value small {
  font-size: 9px;
  color: var(--muted);
  margin-left: 1px;
  font-weight: 600;
}
.hud-perf .perf-spark {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #2a313a;
  background: rgba(8, 11, 16, 0.55);
}
.hud-perf .perf-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 8px 0 6px;
}
.hud-perf .perf-chip {
  background: transparent;
  border: 1px solid #2a313a;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  padding: 4px 0;
  text-transform: lowercase;
}
.hud-perf .perf-chip:hover { border-color: var(--accent); }
.hud-perf .perf-chip.active {
  border-color: var(--accent);
  background: rgba(240, 201, 58, 0.12);
  color: var(--accent);
}
.hud-perf .dbg-hint {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.hud-perf .perf-trace {
  margin-top: 8px;
  border-top: 1px solid #2a313a;
  padding-top: 6px;
}
.hud-perf .perf-trace-title {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-bottom: 4px;
}
.hud-perf .perf-trace-empty {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}
.hud-perf .perf-trace-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 156px;
  overflow-y: auto;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.hud-perf .perf-trace-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  padding: 1px 0;
}
.hud-perf .perf-trace-label {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-perf .perf-trace-dur {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
}
.hud-perf .perf-trace-age {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

.hud-grade {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 17, 23, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 8px 12px 6px;
  /* One width whatever the readouts say (the chart fills it; they wrap if they must). */
  width: min(500px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.hud-grade .grade-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 4px;
}
.hud-grade .grade-readout .label {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.hud-grade .grade-readout .value {
  font-size: 22px;
  font-weight: 800;
  font-feature-settings: "tnum" 1;
}
/* Beside the grade, in its type: to the top of the climb, the draft (white: the grade's colour is the grade's). */
.hud-grade .grade-readout { flex-wrap:wrap; }
.hud-grade .grade-readout .grade-more { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; column-gap:14px; row-gap:2px; }
.hud-grade .grade-readout .grade-more > span { display:flex; align-items:baseline; gap:6px; }
.hud-grade .grade-readout .grade-more .value { color:var(--fg, #e6edf3); white-space:nowrap; }
.hud-grade .grade-readout .grade-more .grade-up { opacity:.85; }
/* The climb: what's done of it, the rest to go. */
.hud-grade .grade-chart { position:relative; }
.hud-grade .grade-climb { position:absolute; top:0; left:0; right:0; z-index:1; height:5px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.hud-grade .grade-climb span { display:block; height:100%; border-radius:3px; transition:width .4s ease; }
/* A phone: the grade and the top on one line (the values read alone), so the card stays clear of the touch controls. */
.hud-grade .grade-in { display:none; }
@media (max-width:720px) { .hud-grade .grade-readout > .label, .hud-grade .grade-top .label, .hud-grade .grade-next .label { display:none; } .hud-grade .grade-readout .grade-more { column-gap:10px; } .hud-grade .grade-in { display:inline; font-size:15px; font-weight:700; opacity:.8; } }
.hud-grade canvas {
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.hud-minimap {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #1f242c;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
/* The canvas itself needs pointer-events: auto so debug-mode teleport
   clicks fire. The wrapper stays pointer-events: none so the rest of the
   .hud overlay still passes mouse events through to the WebGL canvas. */
.hud-minimap canvas { display: block; width: 200px; height: 200px; pointer-events: auto; }

.hud-ride-stats {
  position: absolute;
  width: 200px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: rgba(14, 17, 23, 0.76);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ride-stat {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-left: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 8px 0 0;
}
.ride-stat:first-child {
  border-top: 0;
  padding-top: 0;
}
.ride-stat .label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  min-width: 50px;
}
.ride-stat .value {
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  color: var(--fg);
  margin-left: auto;
}
.ride-stat .unit {
  font-size: 10px;
  color: var(--muted);
  min-width: 30px;
  text-align: right;
}
.ride-stat-main {
  min-width: 0;
}
.ride-stat-main .value {
  font-size: 32px;
  color: var(--accent);
}
/* Sprint reserve: a slim bar under POWER while attacking or refilling. */
.ride-reserve { display:flex; align-items:center; gap:8px; margin-top:-2px; }
.ride-reserve-label { min-width:50px; font:800 9px/1 "JetBrains Mono", monospace; letter-spacing:1.5px; color:var(--muted); }
.ride-reserve[data-state=attack] .ride-reserve-label { color:var(--accent); }
.ride-reserve-track { flex:1; height:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.ride-reserve-track span { display:block; height:100%; background:rgba(230,237,243,.55); transition:width 100ms linear; }
.ride-reserve[data-state=attack] .ride-reserve-track span { background:var(--accent); }
.ride-reserve[data-state=low] .ride-reserve-track span { background:var(--danger); }
/* Session totals: one quiet row, not three more stat lines. */


.bike-switcher {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(14, 17, 23, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid #1f242c;
  border-radius: 14px;
  padding: 8px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.bike-switcher button {
  background: transparent;
  border: 1px solid #2a313a;
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bike-switcher button.active { border-color: var(--accent); background: rgba(240,201,58,0.1); }
.bike-switcher .dot { width: 12px; height: 12px; border-radius: 50%; }

/* ========== Terrain playground page ========== */
.terrain-page {
  position: fixed;
  inset: 0;
  display: flex;
  background: #0a0d12;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--fg);
}
.terrain-controls {
  width: 360px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background: #0e1117;
  border-right: 1px solid #1f242c;
  font-size: 12px;
}
.terrain-controls h2 {
  margin: 0 0 14px 0;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.terrain-canvas { flex: 1 1 auto; position: relative; }
.terrain-section {
  margin-bottom: 16px;
  padding: 10px;
  background: #131820;
  border: 1px solid #1f242c;
  border-radius: 10px;
}
.terrain-section-title {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.terrain-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.terrain-label { color: var(--muted); font-size: 11px; }
.terrain-value { font-feature-settings: "tnum" 1; text-align: right; font-size: 11px; }
.terrain-row input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: #2a313c;
  border-radius: 2px;
  outline: none;
}
.terrain-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.terrain-row input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: none;
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
.terrain-row select {
  background: #2a313c;
  color: var(--fg);
  border: 1px solid #1f242c;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.terrain-toggle { width: 14px; height: 14px; cursor: pointer; }
.terrain-stat-value { color: var(--accent); font-weight: 600; }
.terrain-reset {
  width: 100%;
  background: rgba(240, 201, 58, 0.08);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.terrain-reset:hover { background: rgba(240, 201, 58, 0.15); }

.terrain-preset-row select { flex: 1; }
.terrain-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.terrain-preset-btn {
  background: #1a2029;
  border: 1px solid #2a323d;
  color: var(--fg);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}
.terrain-preset-btn:hover { border-color: var(--accent); }
.terrain-preset-btn.active {
  border-color: var(--accent);
  background: rgba(240, 201, 58, 0.12);
  color: var(--accent);
}
/* Imported route lifecycle: readable failures, review, and finish state. */
.route-import-preview button { padding:10px 18px; border:1px solid #f0c93a; border-radius:8px; background:#252d2c; color:#f0c93a; cursor:pointer; }
/* Route loading/failure: the same card as the world-loading overlay. */
.route-status .op-loading-content { width:min(560px,calc(100vw - 32px)); box-sizing:border-box; }
.route-status-message { margin:0; font-size:11px; line-height:1.6; letter-spacing:1px; text-transform:uppercase; color:rgba(230,237,243,.66); min-height:18px; }
.route-status-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:4px; }
.route-status-actions a, .route-status-back { text-decoration:none; }
.route-status-back { align-self:flex-start; }
.route-status-indeterminate { width:30% !important; animation:route-status-sweep 1.3s ease-in-out infinite; }
@keyframes route-status-sweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(340%); } }
.bike-appearance { padding:16px 0; margin-top:12px; border-top:1px solid #87968b44; }
.bike-appearance .appearance-heading { gap:12px; flex-wrap:wrap; }
.bike-appearance select { max-width:100%; width:100%; padding:9px; color:inherit; background:#81928a14; border:1px solid #88988e55; border-radius:7px; }
.bike-appearance option { color:#17232c; background:#eef1ef; }
.bike-appearance .appearance-colors { margin:14px 0; }
.bike-finish { display:grid; grid-template-columns:65px minmax(0,1fr); align-items:center; gap:12px; margin-top:10px; font-size:12px; }
.op-setup-garage>.bike-appearance { padding:18px; background:#161c23aa; border:1px solid #87968b44; border-radius:10px; }
.terrain-error { padding:14px; border:1px solid #f0c93a; border-radius:8px; background:#29251c; color:#fff; }
.terrain-error button { margin-right:14px; padding:9px 14px; cursor:pointer; }
.terrain-error a { color:#f0c93a; }
.render-quality { pointer-events:auto; margin-left:10px; padding:6px; max-width:125px; border:1px solid #65747d; border-radius:5px; background:#202c34; color:#dce6ed; font:inherit; }
.bike-livery-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 18px; }
.bike-livery-presets button { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:9px; text-align:left; border:1px solid #3b4a57; border-radius:8px; background:#1b2630; color:#e5ebed; cursor:pointer; }
.bike-livery-presets button[aria-pressed="true"] { border-color:#efd58a; background:#30342f; box-shadow:inset 0 0 0 1px #efd58a33; }
.bike-livery-presets strong { font-size:10px; letter-spacing:.2px; }
.bike-livery-presets small { font-size:9px; color:#96a8b4; text-transform:capitalize; }
.bike-livery-swatch { width:100%; height:64px; }
.bike-appearance .appearance-colors { grid-template-columns:1fr 1fr; gap:12px; }
.device-control-settings { display:grid; gap:15px; margin-top:23px; padding-top:18px; border-top:1px solid #7a96902b; }
.device-control-settings label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:11px; color:#b0c3c3; }
.device-control-settings select,.device-mapping select { width:100%; padding:10px; border:1px solid #6b827b55; border-radius:7px; color:#d6e4e2; background:#0a1821; font:12px Inter,system-ui,sans-serif; }
.device-control-settings input { width:100%; accent-color:#e0c588; }
.device-control-settings output { color:#ead393; }
.device-control-settings p { margin:0; color:#8ca5ac; font-size:11px; }
.device-gears { display:flex; align-items:center; justify-content:center; gap:22px; font:11px ui-monospace,monospace; color:#9bb1b4; }
.device-gears b { font-size:24px; }
.device-gears button { border:1px solid #87978466; width:36px; height:32px; cursor:pointer; }
/* The gear: a stat row (label, −, the number, +) with a hairline under it, the range lit to the gear. */
.hud-gears { position:relative; pointer-events:auto; padding-bottom:7px; }
.hud-gears .value { min-width:1.4em; text-align:right; font-variant-numeric:tabular-nums; }
.hud-gears::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--accent) calc(var(--gear-at) * 100%), rgba(255,255,255,.1) calc(var(--gear-at) * 100%)); }
.controller-transport { margin-bottom:16px; }
.controller-transport label { display:grid; gap:6px; font-size:10px; color:#94aeb5; }
.controller-transport select { min-width:0; width:100%; padding:11px; color:#d4e1df; background:#0a1821; border:1px solid #6a85804a; border-radius:7px; font:12px Inter,system-ui,sans-serif; }
.controller-transport p,.setup-note { font-size:11px; line-height:1.6; color:#849fa8; margin:9px 0 0; }
.controller-transport a { color:#c6ba8f; }
.controller-pair-guide { margin-top:14px; padding:11px 13px; background:#76acd10c; border:1px solid #76acd12b; }
.controller-pair-guide>strong { display:flex; align-items:center; gap:8px; color:#c4dce7; font-size:11px; font-weight:500; }
.controller-pair-guide i { width:6px; height:6px; border-radius:50%; background:#82bcec; box-shadow:0 0 7px #82bcec55; }
.controller-pair-guide p { margin-top:6px; }
.controller-tester { margin-top:20px; padding:14px; border:1px solid #7a928433; }
.controller-tester header { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px; font-size:11px; }
.controller-tester strong { font-weight:500; }
.controller-tester output { color:#9dbaa7; font-size:10px; text-transform:capitalize; }
.controller-tester>div { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.controller-tester>div>span { display:grid; place-items:center; height:32px; border:1px solid #6f8b8740; font:13px system-ui,sans-serif; }
.resistance-panel { display:grid; gap:16px; padding-top:20px; margin-top:20px; border-top:1px solid #6d868030; }
.resistance-status { display:flex; align-items:center; gap:8px; font-size:11px; color:#bfb28d; }
.resistance-status i { width:6px;height:6px;border-radius:50%;background:currentColor; }
.resistance-status[data-control-state=on] { color:#a9cea9; }
.resistance-status[data-control-state=error] { color:#e8a58b; }
.resistance-status .setup-text-button { margin-left:auto;color:#cdb88a;font-size:10px; }
.resistance-status strong { color:#e4d29e;font:600 15px ui-monospace,monospace;white-space:nowrap; }
.paired-device-details>summary { display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none; }
.paired-device-details>summary::-webkit-details-marker { display:none; }
.paired-device-details>summary>span { display:grid;gap:5px;min-width:0;flex:1; }
.paired-device-details strong {font-size:12px;font-weight:500; }
.paired-device-details small { font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.paired-device-details em { font-size:10px;font-style:normal; }
.paired-device-details[open]>summary { padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #78938730; }
.paired-device-details .controller-transport { margin-top:0; }
.control-field { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:9px; font:12px/1.5 Inter,system-ui,sans-serif; color:#adc0c2; }
.control-field>select,.control-field>input { width:100%;min-width:0;box-sizing:border-box; }
.control-field select { padding:11px 12px; border:1px solid #6b85824d; border-radius:8px; background:#0b1922; color:#e0e9e6; font:13px Inter,system-ui,sans-serif; }
.control-field input[type=range] { accent-color:#e3c77f; min-height:24px; }
.control-explanation { margin:0; color:#8fa9af; font-size:12px; line-height:1.65; }
.control-tuning { display:grid; gap:12px; }
.control-check { display:flex; align-items:center; gap:10px; min-height:36px; cursor:pointer; }
.control-check input { accent-color:#e1c584; width:16px; height:16px; flex:none; }
.control-live { display:grid; gap:7px; padding:15px; border:1px solid #829c7440; }
.control-live>div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.control-live span { color:#b8cdbe; font-size:12px; }
.control-live strong { font:600 22px ui-monospace,monospace; white-space:nowrap; }
.control-live small { color:#8fa99f; font-size:10px; }
.ride-photos { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.ride-kcal { margin:0; font-size:13px; color:var(--fg); letter-spacing:.02em; }
.ride-kcal small { color:rgba(230,237,243,.5); font-size:11px; }
.ride-photos-strip { display:flex; gap:6px; flex-wrap:wrap; }
.ride-photos-strip button { padding:0; border:1px solid rgba(255,255,255,.14); background:none; cursor:pointer; line-height:0; }
.ride-photos-strip button[aria-pressed=true] { border-color:#f5d547; box-shadow:0 0 0 1px #f5d547; }
.ride-photos-strip img { width:72px; height:45px; object-fit:cover; display:block; }
.ride-photos small { color:rgba(230,237,243,.6); font-size:12px; }
@media (max-height:500px) { .ride-photos-strip,.ride-photos small { display:none; } .ride-photos { margin-top:-2px; } .hud[data-summary] .hud-grade { display:none; } }
.together-check { flex-wrap:wrap; }
.together-check small { flex-basis:100%; margin-top:4px; color:rgba(230,237,243,.55); font-size:12px; line-height:1.5; }
.op-rail-group { display:flex; justify-content:space-between; align-items:center; padding:12px 14px 6px; font-size:10px; letter-spacing:.14em; color:rgba(230,237,243,.5); }
.op-rail-group button, .op-rail-all { background:none; border:0; padding:0; cursor:pointer; color:#f5d547; font:inherit; font-size:10px; letter-spacing:.14em; }
.op-rail-live { color:#8fd8a5; font-style:normal; }
.all-routes { width:min(760px,calc(100vw - 32px)); }
.all-routes-search { width:100%; box-sizing:border-box; padding:10px 12px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.18); color:#e6edf3; font:14px "Inter",system-ui,sans-serif; }
.all-routes h3 { margin:20px 0 8px; font:600 12px/1.4 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:#e6edf3; }
.all-routes h3 small { margin-left:8px; text-transform:none; letter-spacing:0; font:12px "Inter",system-ui,sans-serif; color:rgba(230,237,243,.5); }
.all-routes ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.all-routes-row { display:flex; align-items:center; gap:12px; padding:6px 10px; border:1px solid rgba(255,255,255,.07); }
.all-routes-row[data-active] { border-color:rgba(245,213,71,.6); }
.all-routes-pick { flex:1; min-width:0; display:grid; gap:2px; text-align:left; background:none; border:0; padding:4px 0; color:#e6edf3; cursor:pointer; }
.all-routes-pick strong { font:600 14px "Inter",system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.all-routes-pick small { color:rgba(230,237,243,.55); font-size:12px; text-transform:capitalize; }
.all-routes-pick small b { color:#8fd8a5; font-weight:500; }
.all-routes-dist { color:rgba(230,237,243,.75); font-size:12px; white-space:nowrap; }
.all-routes-rename { flex:1; display:flex; gap:8px; }
.all-routes-rename input { flex:1; min-width:0; padding:6px 8px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); color:#e6edf3; font:14px "Inter",system-ui,sans-serif; }
@media (max-width:600px) { .all-routes-row { flex-wrap:wrap; } .all-routes-pick { flex-basis:100%; } }
.basic-trainer { display:grid; gap:12px; padding-top:16px; margin-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.basic-trainer>summary { cursor:pointer; color:rgba(230,237,243,.75); font-size:12px; }
.basic-trainer[open] { gap:14px; }
.basic-trainer p { margin:0; color:rgba(230,237,243,.58); font:12px/1.6 "Inter",system-ui,sans-serif; }
.basic-trainer .control-field { margin-top:14px; }
.basic-trainer>summary+p { margin-top:10px; }
.hr-target { display:grid; gap:10px; }
.hr-target .control-check { flex-wrap:wrap; }
.hr-target .control-check small { flex-basis:100%; color:rgba(230,237,243,.55); font-size:12px; line-height:1.5; }
.spin-down { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.spin-down span,.spin-down small { color:#8fa9af; font-size:12px; line-height:1.5; flex:1 1 180px; }
.spin-down strong { color:#e4ddbb; font:600 18px ui-monospace,monospace; }
.spin-down[data-step="coast"] span { color:#f0d58a; }
.spin-down[data-step="done"] span { color:#8fd8a5; }
.spin-down[data-step="failed"] span { color:#f0a58a; }
.controller-options { display:grid; gap:3px; margin-top:15px; }
.controller-options p { color:#849ca5; font:10px/1.6 ui-monospace,monospace; margin:8px 0 0; }
.controller-tester>output { display:block; margin-top:10px; }
.controller-tester button[aria-pressed=true] { color:#edcf83; }
[data-controller-focus=true] { outline:3px solid #f0d18b!important; outline-offset:4px!important; box-shadow:0 0 0 7px #f0d18b13!important; }
.control-check:has(input[data-controller-focus=true]) { outline:2px solid #f0d18b; outline-offset:3px; border-radius:5px; }
.ride-menu-resume { display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 17px; cursor:pointer; }
.ride-menu-resume kbd { background:#20342c16; color:#3c493c; border-color:#475b4438; }
.ride-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 23px; }
.ride-menu-grid button { display:grid; align-content:start; gap:7px; min-height:90px; padding:17px; border:1px solid #76948c3b; color:#d7e2dc; text-align:left; cursor:pointer; }
.ride-menu-grid strong { font-size:13px; font-weight:500; }
.ride-menu-grid small { line-height:1.5; }
.hud-resistance { display:grid; gap:5px; width:100%; pointer-events:auto; padding:10px; border:1px solid #a4976755; border-radius:8px; background:#27352dd9; color:#d5c799; text-align:left; cursor:pointer; }
.hud-resistance strong { font:500 11px Inter,system-ui,sans-serif; }
.hud-resistance small { font:9px/1.5 ui-monospace,monospace; color:#9fb6aa; }
.hud-resistance[data-state=error] { border-color:#c36f5c; color:#edb49d; }
/* Top-left: one home button that pauses the ride and opens its menu; key hints beside it while standing. */
.hud-help { top:16px;left:16px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none; }
.hud-menu-button { position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;pointer-events:auto;border:1px solid #1f242c;border-radius:12px;background:rgba(14,17,23,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35);color:#e6edf3;cursor:pointer;transition:border-color 140ms ease,color 140ms ease,background 140ms ease; }
.hud-menu-button svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.hud-menu-button:hover,.hud-menu-button[aria-expanded=true] { border-color:rgba(240,201,58,.55);color:var(--accent);background:rgba(20,22,16,.82); }
.hud-menu-button:focus-visible { outline:1px solid var(--accent);outline-offset:2px; }
/* Not connected to the ride server yet: a small amber dot. */
.hud-menu-button[data-online=false]::after { content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#c9ad70;box-shadow:0 0 0 2px rgba(14,17,23,.9); }
.hud-minimap { top:70px;left:16px; }
.hud-ride-stats { top:286px;left:16px; }
@media(max-width:600px){.control-field select{font-size:16px;}.ride-menu-grid{gap:8px;}.ride-menu-grid button{padding:13px;min-height:90px;}.hud-help{left:12px;top:12px;max-width:calc(100vw - 24px);}.hud-minimap{top:68px;left:auto;right:12px;width:140px;}.hud-minimap canvas{width:140px;height:140px;}.hud-ride-stats{top:68px;left:12px;width:174px;max-height:calc(100dvh - 130px);overflow:auto;}.controller-options .control-check{min-height:44px;}}
@media(max-width:600px){.hud-minimap{height:140px;}.ride-stat .label{min-width:42px;font-size:9px;letter-spacing:1px;}.ride-stat .unit{min-width:22px;font-size:9px;}.ride-stat-main .value{font-size:28px;}.paired-device-details{padding:11px;}}
.device-control-settings .setup-error { color:#f3b79e; }
@media(max-width:600px){.controller-transport select,.device-control-settings select,.device-mapping select,.route-settings-grid input:not([type=range]),.route-settings-grid select{font-size:16px;}}


/* ─────────────────────────────────────────────────────────────────────
   Setup strip, setup/route dialogs and route import — cockpit language:
   square glass panels, accent brackets, Bebas titles, mono labels.
   ───────────────────────────────────────────────────────────────────── */
.op-setup-strip { display:grid; gap:10px; padding:12px 14px 14px; min-width:0; }
.op-setup-strip>header { display:flex; align-items:center; gap:10px; min-width:0; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:2.4px; text-transform:uppercase; color:rgba(230,237,243,.86); }
.op-setup-strip-title i { font-style:normal; color:var(--accent); margin-right:8px; letter-spacing:1.4px; }
.op-setup-strip-mode { flex:1; min-width:0; font-size:9px; letter-spacing:1.8px; color:rgba(139,148,158,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-setup-strip-mode[data-mode=trainer] { color:#8fd8a5; }
.op-setup-strip>header button { flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid rgba(240,201,58,.38); background:rgba(240,201,58,.05); color:var(--accent); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; cursor:pointer; transition:background 140ms ease,border-color 140ms ease; }
.op-setup-strip>header button:hover { border-color:var(--accent); }
.op-setup-slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.op-setup-slot { position:relative; display:grid; justify-items:center; gap:5px; min-width:0; padding:10px 3px 9px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); color:rgba(230,237,243,.5); font-family:inherit; cursor:pointer; transition:background 140ms ease,border-color 140ms ease,color 140ms ease; }
.op-setup-slot svg { width:18px; height:18px; }
.op-setup-slot-code { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; color:rgba(230,237,243,.82); }
.op-setup-slot-state { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 9px/1 "JetBrains Mono",monospace; letter-spacing:.8px; color:rgba(139,148,158,.72); }
.op-setup-slot-state b { color:var(--accent); margin-right:3px; font-weight:800; }
.op-setup-slot:hover { border-color:rgba(240,201,58,.45); background:rgba(240,201,58,.07); color:var(--fg); }
.op-setup-slot.is-paired { border-color:rgba(143,216,165,.28); color:#9fdcb2; }
.op-setup-slot.is-paired .op-setup-slot-state { color:#bfe6cb; }
.op-setup-slot.is-live::after { content:""; position:absolute; top:6px; right:6px; width:5px; height:5px; border-radius:50%; background:#8fd8a5; box-shadow:0 0 8px #8fd8a5; }
.op-setup-strip button:focus-visible,.setup-dialog button:focus-visible,.setup-dialog summary:focus-visible,.setup-dialog a:focus-visible,.custom-route-entry:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
/* Wide: hero on the left through every row; routes, setup and launch stacked on the right. */
@media (min-width:1081px) {
  .op-shell-landing .op-stage { grid-template-rows:auto auto auto 1fr; }
  .op-shell-landing .op-left { grid-row:1 / -1; }
  .op-shell-landing .op-setup-strip { grid-column:2; grid-row:2; align-self:start; }
  .op-shell-landing .op-launch { grid-row:3; }
}
/* Taller than the screen (phones, short laptop screens), the stage scrolls instead of being
   cut off by the fixed shell, so the launch button is always reachable. */
.op-shell-landing .op-stage { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
/* Narrow: one column in reading order: route, routes list, setup, then the launch button. */
@media (max-width:1080px) {
  .op-shell-landing .op-stage { grid-template-rows:none; grid-auto-rows:max-content; }
  .op-shell-landing .op-left { grid-row:1; }
  .op-shell-landing .op-rail { grid-row:2; }
  .op-shell-landing .op-setup-strip { grid-column:1; grid-row:3; }
  .op-shell-landing .op-launch { grid-column:1; grid-row:4; }
}
.op-setup-left>.op-setup-strip { margin-bottom:14px; }

.custom-route-entry { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; width:calc(100% - 24px); margin:12px 12px 6px; padding:11px 14px 11px 12px; border:1px solid rgba(240,201,58,.3); background:linear-gradient(90deg,rgba(240,201,58,.11),rgba(240,201,58,.02)); color:var(--fg); text-align:left; font-family:inherit; cursor:pointer; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:background 140ms ease,border-color 140ms ease; }
.custom-route-entry>span:first-child { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(240,201,58,.55); color:var(--accent); font:700 16px/1 "JetBrains Mono",monospace; }
.custom-route-entry>span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.custom-route-entry strong { font:400 19px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.custom-route-entry small { font:700 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:rgba(139,148,158,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.custom-route-entry>span:last-child { color:rgba(240,201,58,.7); font-size:13px; transition:transform 140ms ease; }
.custom-route-entry:hover { border-color:var(--accent); background:linear-gradient(90deg,rgba(240,201,58,.18),rgba(240,201,58,.04)); }
.custom-route-entry:hover>span:last-child { transform:translateX(2px); color:var(--accent); }

.setup-dialog-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(4,6,10,.72); backdrop-filter:blur(10px) saturate(.9); -webkit-backdrop-filter:blur(10px) saturate(.9); }
.setup-dialog { position:relative; display:flex; flex-direction:column; width:min(640px,100%); max-height:min(88dvh,880px); color:var(--fg); border-top-color:rgba(240,201,58,.4); box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.04); clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); font:13px/1.55 "Inter",system-ui,sans-serif; }
.setup-dialog::before { position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--accent) 0%,var(--accent) 22%,transparent 70%); opacity:.75; pointer-events:none; z-index:2; }
.setup-dialog::after { content:""; position:absolute; pointer-events:none; z-index:2; }
.setup-dialog>header { flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:22px 26px 16px; }
.setup-eyebrow { display:block; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:2.6px; text-transform:uppercase; color:var(--accent); }
.setup-dialog h2 { margin:9px 0 0; font:400 38px/.92 "Bebas Neue","Inter",sans-serif; letter-spacing:.02em; text-transform:uppercase; color:var(--fg); }
.setup-close { flex:none; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:rgba(230,237,243,.7); font:700 12px/1 "JetBrains Mono",monospace; cursor:pointer; transition:border-color 140ms ease,color 140ms ease,background 140ms ease; }
.setup-close:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:rgba(240,201,58,.07); }
.setup-close:disabled { opacity:.35; cursor:default; }
.setup-tabs { flex:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0 26px; border-bottom:1px solid rgba(255,255,255,.08); }
.setup-tabs button { margin-bottom:-1px; padding:12px 8px 11px; border:0; border-bottom:2px solid transparent; background:none; color:rgba(230,237,243,.5); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:color 140ms ease,border-color 140ms ease,background 140ms ease; }
.setup-tabs button:hover:not(:disabled) { color:var(--fg); }
.setup-tabs button[aria-pressed=true] { color:var(--fg); border-bottom-color:var(--accent); background:linear-gradient(0deg,rgba(240,201,58,.09),transparent 80%); }
.setup-tabs button:disabled { cursor:default; opacity:.45; }
.setup-dialog-body { flex:1; min-height:0; overflow-y:auto; padding:20px 26px 24px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
.setup-dialog>header+.setup-dialog-body { border-top:1px solid rgba(255,255,255,.08); }
.setup-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px 11px; border:0; background:var(--accent); color:#14150b; font:400 19px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.6px; text-transform:uppercase; white-space:nowrap; cursor:pointer; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); box-shadow:0 10px 26px rgba(240,201,58,.2); transition:filter 140ms ease,transform 140ms ease; }
.setup-primary:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-1px); }
.setup-primary:disabled { background:rgba(255,255,255,.09); color:rgba(230,237,243,.38); box-shadow:none; cursor:default; }
.setup-text-button { padding:6px 0; border:0; background:none; color:rgba(230,237,243,.66); font:800 10px/1.2 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; cursor:pointer; transition:color 140ms ease; }
.setup-text-button:hover:not(:disabled),.setup-text-button[aria-pressed=true] { color:var(--accent); }
.setup-text-button:disabled { opacity:.38; cursor:default; }
.setup-error { margin:12px 0 0; padding:9px 12px; border:1px solid rgba(255,120,100,.35); background:rgba(255,100,80,.07); color:#ffb2a4; font-size:12px; }
.setup-note { margin:9px 0 0; font-size:12px; line-height:1.55; color:rgba(230,237,243,.55); }
.setup-dialog select,.setup-dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not(.bare-input) { width:100%; min-width:0; box-sizing:border-box; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:0; background:rgba(0,0,0,.3); color:var(--fg); font:13px/1.3 "Inter",system-ui,sans-serif; transition:border-color 140ms ease; }
.setup-dialog select { appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f0c93a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.setup-dialog select option { background:#121820; color:var(--fg); }
.setup-dialog select:hover:not(:disabled),.setup-dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.bare-input):hover { border-color:rgba(255,255,255,.2); }
.setup-dialog select:focus-visible,.setup-dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.bare-input):focus-visible { outline:none; border-color:var(--accent); }
.setup-dialog input[type=range] { width:100%; accent-color:var(--accent); }
.setup-dialog input[type=checkbox] { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; flex:none; width:16px; height:16px; margin:0; border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.3); cursor:pointer; }
.setup-dialog input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
.setup-dialog input[type=checkbox]:checked::after { content:""; width:8px; height:4px; border-left:2px solid #14150b; border-bottom:2px solid #14150b; transform:translateY(-1px) rotate(-45deg); }
.setup-dialog input[type=checkbox]:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.setup-dialog details>summary { list-style:none; cursor:pointer; }
.setup-dialog details>summary::-webkit-details-marker { display:none; }

/* Devices dialog */
.devices-dialog { width:min(640px,100%); }
.devices-dialog button:disabled { opacity:.42; cursor:default; }
.device-restore { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 16px; padding:10px 12px; border:1px solid rgba(240,201,58,.24); background:rgba(240,201,58,.05); font:800 9px/1.3 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.72); }
.device-restore button { padding:4px 0; border:0; background:none; color:var(--accent); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.device-role-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.device-role-tabs button { position:relative; display:grid; justify-items:center; gap:7px; min-width:0; padding:12px 3px 10px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); color:rgba(230,237,243,.55); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.3px; text-transform:uppercase; cursor:pointer; transition:border-color 140ms ease,background 140ms ease,color 140ms ease; }
.device-role-tabs button>span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-role-tabs svg { width:20px; height:20px; }
.device-role-tabs button:hover { border-color:rgba(255,255,255,.18); color:var(--fg); }
.device-role-tabs button[aria-pressed=true] { border-color:var(--accent); color:var(--fg); background:linear-gradient(180deg,rgba(240,201,58,.12),rgba(240,201,58,.03)); box-shadow:none; }
.device-role-tabs button[aria-pressed=true] svg { color:var(--accent); }
.device-role-tabs i.paired { position:absolute; top:7px; right:7px; width:5px; height:5px; border-radius:50%; background:#8fd8a5; box-shadow:0 0 6px #8fd8a5; }
.device-role-intro { margin:20px 0 14px; }
.device-role-intro h3 { margin:0 0 6px; font:400 25px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.2px; text-transform:uppercase; }
.device-role-intro p { margin:0; max-width:500px; color:rgba(230,237,243,.62); font-size:12.5px; }
.device-source-list { display:grid; gap:6px; }
.device-empty { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px dashed rgba(255,255,255,.14); background:rgba(0,0,0,.14); }
.device-empty svg { flex:none; width:20px; height:20px; color:rgba(240,201,58,.65); }
.device-empty span { display:grid; gap:3px; }
.device-empty strong { font:800 10px/1.2 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.86); }
.device-empty small { font-size:12px; color:rgba(230,237,243,.55); }
.device-source { display:flex; align-items:stretch; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.device-source-choice { display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:12px 12px 12px 14px; border:0; background:none; color:var(--fg); text-align:left; font-family:inherit; cursor:pointer; }
.device-source-choice>span:nth-child(2) { display:grid; gap:4px; flex:1; min-width:0; }
.device-source-choice strong { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-source-choice small { font:700 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; color:rgba(139,148,158,.85); }
.device-source-choice b { font:800 12px/1 "JetBrains Mono",monospace; color:#a9e0bb; white-space:nowrap; }
.device-source-check { flex:none; display:grid; place-items:center; width:16px; height:16px; border:1px solid rgba(255,255,255,.28); font-size:10px; }
.device-source-choice[aria-pressed=true] .device-source-check { background:var(--accent); border-color:var(--accent); color:#14150b; }
.device-disconnect { flex:none; width:44px; border:0; border-left:1px solid rgba(255,255,255,.08); background:none; color:rgba(230,237,243,.5); font:700 13px/1 "JetBrains Mono",monospace; cursor:pointer; }
.device-disconnect:hover { color:#ff9a8a; background:rgba(255,100,80,.06); }
.device-pair-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:14px; }
.device-mode { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.device-mode>span { display:grid; gap:4px; font:800 10px/1.2 "JetBrains Mono",monospace; letter-spacing:2px; text-transform:uppercase; color:rgba(230,237,243,.86); }
.device-mode>span small { font:400 12px/1.4 "Inter",system-ui,sans-serif; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.55); }
.device-mode [role=group] { flex:none; display:flex; border:1px solid rgba(255,255,255,.12); }
.device-mode [role=group] button { padding:9px 12px; border:0; background:none; color:rgba(230,237,243,.6); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; cursor:pointer; }
.device-mode [role=group] button+button { border-left:1px solid rgba(255,255,255,.12); }
.device-mode [role=group] button[aria-pressed=true] { background:var(--accent); color:#14150b; }
.device-mode [role=group] button:disabled { opacity:.35; cursor:not-allowed; }
.device-diagnostics,.device-mapping { margin-top:16px; color:rgba(230,237,243,.6); font-size:11px; }
.device-diagnostics>summary,.device-mapping>summary,.device-discovery>summary { display:flex; align-items:center; gap:8px; font:800 9px/1.4 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.device-discovery>summary { justify-content:flex-end; }
.device-diagnostics>summary::before,.device-mapping>summary::before,.device-discovery>summary::before { content:"▸"; color:var(--accent); transition:transform 140ms ease; }
.device-diagnostics[open]>summary::before,.device-mapping[open]>summary::before,.device-discovery[open]>summary::before { transform:rotate(90deg); }
.device-diagnostics>summary:hover,.device-mapping>summary:hover,.device-discovery>summary:hover { color:var(--fg); }
.device-mapping summary small { margin-left:auto; color:rgba(139,148,158,.8); letter-spacing:1px; }
.device-diagnostics dl>div { display:flex; gap:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.device-diagnostics dt { min-width:95px; font:700 9px/1.6 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; }
.device-diagnostics dd { margin:0; color:var(--fg); overflow-wrap:anywhere; }
.device-diagnostics pre { max-height:180px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.35); font:9px/1.7 "JetBrains Mono",monospace; color:rgba(230,237,243,.7); }
.device-diagnostics>div { display:flex; justify-content:space-between; gap:12px; }
.device-mapping>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.device-mapping label { display:grid; gap:5px; font:700 9px/1.3 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; }
.devices-dialog .setup-dialog-body>footer { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.devices-dialog .setup-dialog-body>footer>a { font:800 9px/1.4 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.66); text-decoration:none; }
.devices-dialog .setup-dialog-body>footer>a:hover { color:var(--accent); }
.device-discovery { max-width:60%; text-align:right; font-size:12px; color:rgba(230,237,243,.55); }
.device-discovery p { margin:8px 0 4px; }
.paired-device-details { padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:0; background:rgba(255,255,255,.025); }
.paired-device-details strong { color:var(--fg); }
.paired-device-details small { font:700 9px/1.3 "JetBrains Mono",monospace; letter-spacing:1.1px; text-transform:uppercase; color:rgba(139,148,158,.85); }
.paired-device-details em { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.paired-device-details[open]>summary { border-bottom-color:rgba(255,255,255,.08); }
.controller-transport label,.control-field { font:800 9px/1.5 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.control-field output { color:var(--accent); font:800 11px/1 "JetBrains Mono",monospace; letter-spacing:.5px; }
.controller-transport p,.control-explanation { font:12px/1.6 "Inter",system-ui,sans-serif; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.58); }
.controller-pair-guide { border-radius:0; }
.controller-tester { border-radius:0; border-color:rgba(255,255,255,.08); background:rgba(0,0,0,.2); }
.controller-tester strong { font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.86); }
.controller-tester>div>span { border-radius:0; border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:rgba(230,237,243,.6); font-family:"JetBrains Mono",monospace; }
.controller-tester [data-pressed=true] { color:#14150b; background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px rgba(240,201,58,.35); }
.control-check { font:13px/1.5 "Inter",system-ui,sans-serif; color:rgba(230,237,243,.78); }
.resistance-panel { border-top-color:rgba(255,255,255,.08); }
.resistance-status { font:800 9px/1.4 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; }
.control-live { border-radius:0; border-color:rgba(143,216,165,.25); background:rgba(143,216,165,.05); }
.control-live strong { color:var(--accent); }
.device-gears button { border-radius:0; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--accent); }
.device-gears b { color:var(--accent); }

/* Ride menu */
.ride-menu-resume { border:0; border-radius:0; background:var(--accent); color:#14150b; font:400 22px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.6px; text-transform:uppercase; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); }
.ride-menu-resume kbd { border-radius:2px; font:800 10px/1 "JetBrains Mono",monospace; padding:4px 7px; }
.ride-menu-grid button { border-radius:0; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.ride-menu-grid strong { font:400 20px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.3px; text-transform:uppercase; color:var(--fg); }
.ride-menu-grid small { font-size:12px; color:rgba(230,237,243,.55); }
.ride-menu-grid button:hover { border-color:rgba(240,201,58,.5); background:rgba(240,201,58,.06); }
/* Pause menu: the ride so far like a paused bike computer, then resume, save and download. */
.ride-menu { width:min(620px,100%); }
.ride-menu-online { color:rgba(230,237,243,.5); }
.ride-menu-online[data-online=false] { color:#c9ad70; }
.ride-menu .ride-menu-grid { grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 16px; }
.ride-menu .ride-menu-grid button { min-height:0; padding:12px 14px; gap:5px; }
.ride-menu .ride-menu-grid small { line-height:1.4; }
/* A paused watch blinks its time. */
.ride-pause-stats dt { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.5); }
.ride-pause-bar { position:relative; display:block; height:4px; background:rgba(255,255,255,.09); overflow:hidden; }
.ride-pause-bar i { position:absolute; inset:0 auto 0 0; background:var(--accent); }
.ride-pause-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.ride-pause-stats div { display:grid; gap:6px; min-width:0; }
.ride-pause-stats dd { margin:0; font-size:17px; font-weight:700; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ride-pause-stats small { margin-left:3px; font-size:10px; font-weight:400; color:rgba(230,237,243,.5); }
.ride-save-note { margin:7px 0 0; font-size:11px; line-height:1.5; color:rgba(230,237,243,.45); }
.ride-save-note[data-error=true] { color:#edb49d; }
/* The pause menu: stats and Resume, one section at a time in tabs, saving and ending at the foot. */
.menu-stats { display:grid; gap:10px; margin-bottom:12px; padding:14px 16px 12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); }
.menu-stats dl { display:grid; grid-template-columns:1.35fr repeat(4,1fr); gap:10px; margin:0; align-items:end; }
.menu-stats div { display:grid; gap:6px; min-width:0; }
.menu-stats dt { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.5); }
.menu-stats dd { margin:0; font-size:17px; font-weight:700; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--fg); }
.menu-stats dd small { margin-left:3px; font-size:10px; font-weight:400; color:rgba(230,237,243,.5); }
.menu-stat-time dd { font-size:30px; letter-spacing:-.02em; }
.menu-progress { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); }
.menu-tabs { display:flex; margin-top:14px; border-bottom:1px solid rgba(255,255,255,.1); }
.menu-tabs button { position:relative; flex:1; padding:12px 4px 10px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none; color:rgba(230,237,243,.55); font:400 19px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:color 120ms ease,border-color 120ms ease; }
.menu-tabs button:hover { color:var(--fg); }
.menu-tabs button[aria-selected=true] { color:var(--fg); border-bottom-color:var(--accent); }
.menu-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.menu-tab-dot { display:inline-block; width:6px; height:6px; margin-left:6px; vertical-align:middle; border-radius:50%; background:var(--accent); }
/* One size whatever the tab (no jump when switching); only the tab's panel scrolls, so Resume and
   the foot (save, end) stay in view. */
.ride-menu { height:min(88dvh,820px); }
.ride-menu>.setup-dialog-body { display:flex; flex-direction:column; overflow:hidden; -webkit-mask-image:none; mask-image:none; padding-bottom:14px; }
.ride-menu>.setup-dialog-body>* { flex:none; }
.ride-menu>.setup-dialog-body>.menu-panel { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 22px),transparent); }
.menu-panel { display:grid; align-content:start; gap:14px; padding:16px 4px 8px 0; }
.menu-wide { grid-column:1 / -1; }
.menu-panel>.ride-menu-grid { margin:0; }
.menu-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; align-items:end; }
/* Boards (SegmentBoards.tsx): each timed segment's fastest, your row marked. */
.menu-boards { display:grid; gap:16px; }
.menu-board h3 { display:flex; align-items:baseline; gap:10px; margin:0 0 8px; font:400 19px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1px; text-transform:uppercase; color:var(--fg); }
.menu-board h3 b { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; color:#f0c93a; }
.menu-board h3 b[data-kind=kom] { color:#e74c3c; } .menu-board h3 b[data-kind=descent] { color:#2ecc71; } .menu-board h3 b[data-kind=rollers] { color:#3498db; }
.menu-board h3 small { margin-left:auto; font:700 11px/1 "JetBrains Mono",monospace; letter-spacing:.04em; color:rgba(230,237,243,.5); text-transform:none; }
.menu-board ol { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
/* Your own efforts on the segment (Segment Lab), under its board. */
.menu-board-mine { margin:6px 0 0; font-size:11.5px; line-height:1.5; color:rgba(230,237,243,.62); }
.menu-board li { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:7px 10px; background:rgba(255,255,255,.025); font-size:13px; }
.menu-board li span:first-child { font:700 11px/1 "JetBrains Mono",monospace; color:rgba(230,237,243,.55); }
.menu-board li span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-board li b { font:700 13px/1 "JetBrains Mono",monospace; }
.menu-board li[data-you] { background:rgba(240,201,58,.09); box-shadow:inset 2px 0 0 var(--accent); }
.menu-board-empty { margin:0; font-size:12.5px; color:rgba(230,237,243,.55); }
.menu-heading { margin:6px 0 -4px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.5); }
.menu-field-label { font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.5); }
.menu-footer { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
/* Resume, End ride and Home in one row: the ways out of a pause. */
.ride-menu-top { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
.ride-menu-exit { padding:0 20px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--fg); font:400 20px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; transition:border-color 140ms ease,background 140ms ease; }
.ride-menu-exit:hover, .ride-menu-exit:focus-visible { border-color:rgba(240,201,58,.55); background:rgba(240,201,58,.07); }
.menu-footer button { display:grid; align-content:start; gap:5px; padding:11px 12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); color:var(--fg); text-align:left; cursor:pointer; transition:border-color 140ms ease,background 140ms ease; }
.menu-footer button:hover:not(:disabled) { border-color:rgba(240,201,58,.55); background:rgba(240,201,58,.07); }
.menu-footer button:disabled { cursor:default; opacity:.55; }
.menu-footer strong { font:400 17px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:var(--fg); }
.menu-footer .menu-save strong { color:var(--accent); }
.menu-footer .menu-save[data-saved=true] strong { color:#9fc9a4; }
.menu-footer small { font-size:11px; line-height:1.35; color:rgba(230,237,243,.55); }
@media (pointer:coarse) { .ride-menu .controller-menu-help { display:none; } }
@media (max-width:600px), (max-height:640px) {
  .ride-menu { height:calc(100dvh - 16px); }
  .menu-stats { padding:10px 12px; gap:8px; margin-bottom:8px; }
  .menu-stats dl { grid-template-columns:repeat(3,1fr); row-gap:10px; }
  .menu-stat-time dd { font-size:20px; }
  .ride-menu .ride-menu-resume { padding:11px 14px; }
  .ride-menu .ride-menu-exit { padding:0 12px; font-size:17px; letter-spacing:1px; }
  .ride-menu .ride-menu-grid button { padding:10px 12px; min-height:0; }
  .ride-menu .ride-menu-grid strong { font-size:17px; }
  .menu-tabs button { font-size:17px; letter-spacing:1px; }
  .menu-fields { grid-template-columns:1fr; }
  .menu-footer { gap:6px; margin-top:8px; padding-top:10px; }
  .menu-footer button { padding:9px 8px; }
  .menu-footer strong { font-size:15px; letter-spacing:.8px; }
  .menu-footer small { display:none; }
  .menu-panel { min-height:0; }
}
.route-complete-save { display:flex; gap:18px; margin-top:-4px; }
.route-complete-save .setup-text-button:disabled { opacity:.4; cursor:default; }
.route-complete-save [data-saved=true] { color:#9fc9a4; }
@media (max-width:600px) {
  .ride-menu .ride-menu-grid { grid-template-columns:1fr 1fr; }
  .ride-pause-stats { grid-template-columns:1fr 1fr; row-gap:12px; }
}
.controller-menu-help { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.controller-menu-help span { font:800 9px/1.6 "JetBrains Mono",monospace!important; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.5)!important; }

/* Custom route + importer */
.route-workshop { width:min(680px,100%); }
.route-preview-visual { display:grid; border:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.16)); }
.route-map-canvas { display:block; width:100%; height:216px; }
.route-elevation-canvas { display:block; width:100%; height:66px; border-top:1px solid rgba(255,255,255,.07); }
.route-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-bottom:1px solid rgba(255,255,255,.07); }
.route-stats>div { padding:12px 12px 11px 0; border-right:1px solid rgba(255,255,255,.07); min-width:0; }
.route-stats>div+div { padding-left:14px; }
.route-stats>div:last-child { border-right:0; }
.route-stats dt { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:2.2px; text-transform:uppercase; color:rgba(139,148,158,.8); }
.route-stats dd { margin:7px 0 0; font:800 20px/1 "JetBrains Mono",monospace; letter-spacing:-.01em; color:var(--fg); white-space:nowrap; }
.route-stats dd i { margin-left:3px; font-style:normal; font-size:10px; color:rgba(139,148,158,.75); }
.route-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; min-width:0; margin:18px 0 0; padding:0; border:0; }
.route-field { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; font:800 9px/1.3 "JetBrains Mono",monospace; letter-spacing:2px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.route-field>input,.route-field>select { grid-column:1 / -1; }
.route-field output { color:var(--accent); font:800 11px/1 "JetBrains Mono",monospace; letter-spacing:.6px; }
.route-field.is-wide { grid-column:1 / -1; }
.route-importer>.route-field { margin-top:16px; }
.route-dropzone { display:grid; justify-items:center; gap:8px; width:100%; padding:44px 20px 40px; border:1px dashed rgba(240,201,58,.38); background:repeating-linear-gradient(-45deg,rgba(240,201,58,.028) 0 10px,transparent 10px 20px),rgba(0,0,0,.2); color:var(--fg); text-align:center; font-family:inherit; cursor:pointer; transition:border-color 140ms ease,background 140ms ease,box-shadow 140ms ease; }
.route-dropzone svg { width:30px; height:30px; margin-bottom:4px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.route-dropzone strong { font:400 27px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.6px; color:var(--fg); }
.route-dropzone span { font-size:12.5px; color:rgba(230,237,243,.6); }
.route-dropzone small { margin-top:6px; font:700 9px/1.4 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(139,148,158,.7); }
.route-dropzone:hover:not(:disabled),.route-dropzone.is-dragging { border-color:var(--accent); background:repeating-linear-gradient(-45deg,rgba(240,201,58,.06) 0 10px,transparent 10px 20px),rgba(240,201,58,.05); box-shadow:inset 0 0 0 1px rgba(240,201,58,.35); }
.route-dropzone:disabled { cursor:progress; }
.route-importer.has-preview.is-dragging { outline:1px dashed var(--accent); outline-offset:6px; }
.route-preview-head { justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:12px; min-width:0; }
.route-preview-head>div { min-width:0; }
.route-preview-head h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 32px/.95 "Bebas Neue","Inter",sans-serif; letter-spacing:1px; text-transform:uppercase; }
.route-preview-head span { display:block; margin-top:6px; font:700 9px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; color:rgba(139,148,158,.85); }
.route-world-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; margin:18px 0 0; padding:0; border:0; }
.route-world-choice legend { margin-bottom:9px; padding:0; font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:2.2px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.route-world-choice label { position:relative; display:grid; align-content:start; gap:6px; padding:14px 14px 14px 40px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); cursor:pointer; transition:border-color 140ms ease,background 140ms ease; }
.route-world-choice label:hover { border-color:rgba(255,255,255,.2); }
.route-world-choice input { position:absolute; top:15px; left:14px; appearance:none; -webkit-appearance:none; width:14px; height:14px; margin:0; border:1px solid rgba(255,255,255,.4); border-radius:50%; cursor:pointer; }
.route-world-choice input:checked { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px #0e1219; }
.route-world-choice input:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.route-world-choice strong { font:400 21px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; }
.route-world-choice span { font-size:12px; line-height:1.45; color:rgba(230,237,243,.6); }
.route-world-choice label.is-selected { border-color:var(--accent); background:linear-gradient(180deg,rgba(240,201,58,.1),rgba(240,201,58,.02)); box-shadow:none; }
.route-world-choice label.is-selected strong { color:var(--accent); }
.route-world-choice label[data-disabled=true] { opacity:.42; cursor:not-allowed; }
.route-notes { display:grid; gap:6px; margin:16px 0 0; padding:0; list-style:none; }
.route-notes li { position:relative; padding-left:20px; font-size:12px; line-height:1.5; color:rgba(230,237,243,.56); }
.route-notes li::before { content:"i"; position:absolute; left:0; top:2px; width:12px; height:12px; border:1px solid rgba(255,255,255,.22); font:700 8px/11px "JetBrains Mono",monospace; text-align:center; color:rgba(230,237,243,.6); }
.route-alert { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 0; padding:10px 12px; border:1px solid rgba(255,120,100,.35); background:rgba(255,100,80,.07); color:#ffb2a4; font-size:12.5px; line-height:1.5; }
.route-alert p { margin:0; }
.route-alert .setup-text-button { flex:none; color:var(--accent); }
.route-prep { margin-top:18px; padding:14px 16px 10px; border:1px solid rgba(240,201,58,.26); background:rgba(240,201,58,.04); }
.route-prep ol { display:grid; gap:8px; margin:0 0 12px; padding:0; list-style:none; }
.route-prep li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:10px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.32); }
.route-prep li i { width:8px; height:8px; border:1px solid currentColor; justify-self:center; }
.route-prep li[data-state=active] { color:var(--fg); }
.route-prep li[data-state=active] i { background:var(--accent); border-color:var(--accent); animation:op-pulse 1.2s ease-in-out infinite; }
.route-prep li[data-state=active] b { color:var(--accent); }
.route-prep li[data-state=done] { color:rgba(230,237,243,.72); }
.route-prep li[data-state=done] i { background:#8fd8a5; border-color:#8fd8a5; }
.route-prep li[data-state=done] b { color:#8fd8a5; }
.route-prep-bar { height:3px; margin-bottom:6px; overflow:hidden; background:rgba(255,255,255,.08); }
.route-prep-bar span { display:block; height:100%; background:var(--accent); box-shadow:0 0 10px var(--accent); transition:width 400ms ease; }
@media (max-width:600px) {
  .setup-dialog-backdrop { padding:10px; }
  .setup-dialog { max-height:95dvh; }
  .setup-dialog>header { padding:18px 18px 14px; }
  .setup-dialog h2 { font-size:32px; }
  .setup-tabs { margin:0 18px; }
  .setup-dialog-body { padding:16px 18px 20px; }
  .setup-close { width:44px; height:44px; }
  .setup-primary,.device-mode [role=group] button { min-height:44px; }
  .setup-dialog select,.setup-dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not(.bare-input) { font-size:16px; }
  .route-stats { grid-template-columns:1fr 1fr; }
  .route-stats>div:nth-child(2) { border-right:0; }
  .route-stats>div:nth-child(3) { padding-left:0; }
  .route-stats>div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.07); }
  .route-world-choice,.route-settings-grid { grid-template-columns:1fr; }
  .device-mode { flex-direction:column; align-items:stretch; }
  .device-mapping>div { grid-template-columns:1fr; }
  .op-setup-slot-state { font-size:8px; }
}
.setup-tabs button:focus-visible { outline:none; box-shadow:inset 0 0 0 1px rgba(240,201,58,.55); }
.op-setup-strip:not(.is-compact) .op-setup-slot { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; justify-items:start; align-items:center; column-gap:10px; row-gap:4px; padding:9px 12px; text-align:left; }
.op-setup-strip:not(.is-compact) .op-setup-slot svg { grid-row:1 / span 2; width:20px; height:20px; }
.op-setup-strip:not(.is-compact) .op-setup-slot.is-live::after { top:50%; margin-top:-2.5px; right:10px; }
@media (max-width:600px) { .op-setup-strip:not(.is-compact) .op-setup-slot { grid-template-columns:1fr; justify-items:center; text-align:center; } .op-setup-strip:not(.is-compact) .op-setup-slot svg { grid-row:auto; } }

/* Finish card for point-to-point routes: same glass panel as the setup dialogs. */
.route-complete { position:absolute; top:18%; left:50%; transform:translateX(-50%); width:min(420px,calc(100vw - 32px)); box-sizing:border-box; display:flex; flex-direction:column; gap:14px; padding:22px 24px 20px; pointer-events:auto; color:var(--fg); background:linear-gradient(180deg,rgba(15,19,26,.96),rgba(9,12,17,.96)); border:1px solid rgba(255,255,255,.08); border-top-color:rgba(240,201,58,.45); box-shadow:0 30px 90px rgba(0,0,0,.55); clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.route-complete-kicker { font-size:10px; letter-spacing:1.8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-complete strong { margin-top:-8px; font:400 40px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.5px; color:var(--accent); }
.route-complete-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:12px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.route-complete-stats span { display:flex; flex-direction:column; gap:5px; min-width:0; }
.route-complete-stats i { font-style:normal; font-size:9px; letter-spacing:1.5px; color:var(--muted); }
.route-complete-stats b { font-size:17px; font-weight:700; line-height:1; white-space:nowrap; }
.route-complete-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.route-complete-actions a { text-decoration:none; }
.route-complete { z-index:120; }
@media (max-width:600px) { .route-complete { top:auto; bottom:136px; padding:18px 18px 16px; } .route-complete strong { font-size:32px; } .route-complete-stats b { font-size:15px; } }
/* A big ride's summary (its races, segments, bests…) scrolls within the screen: its actions stay in reach. */
.route-complete { max-height:calc(82dvh - 20px); overflow:auto; }
@media (max-width:600px) { .route-complete { max-height:calc(100dvh - 156px); } }

/* Dialog frame: header and tabs stay, the body scrolls (content fades out under the
   edges instead of being sliced), actions sit in a footer that never scrolls. The cut
   corner gets its own border line so the frame reads as one closed outline. */
.setup-dialog { border:1px solid rgba(255,255,255,.1); background:
  linear-gradient(to top left, transparent calc(50% - 1.1px), rgba(255,255,255,.1) calc(50% - 1.1px), rgba(255,255,255,.1) calc(50% - .1px), transparent calc(50% - .1px)) right bottom / 18px 18px no-repeat,
  linear-gradient(180deg,rgba(15,19,26,.98),rgba(9,12,17,.98)); }
/* One accent only: a gold bracket laid exactly over the top-left corner of the outline. */
.setup-dialog::before { content:none; }
.setup-dialog::after { top:-1px; left:-1px; width:20px; height:20px; box-sizing:border-box; border:2px solid var(--accent); border-right:0; border-bottom:0; }
.setup-dialog-body { -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); }
.setup-dialog-footer { flex:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 26px 20px; border-top:1px solid rgba(255,255,255,.08); }
.setup-dialog-footer:empty { display:none; }
.setup-dialog-footer>span { font:700 9px/1.5 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:rgba(139,148,158,.8); }
.route-stats dd { text-transform:uppercase; }
@media (max-width:600px) {
  .setup-dialog-footer { flex-direction:column; align-items:stretch; padding:14px 18px 16px; }
}
/* The drop zone takes focus when the dialog opens: mark it with its own border, not a second frame. */
.setup-dialog .route-dropzone:focus-visible { outline:none; border-color:rgba(240,201,58,.8); }
/* Route title on its own line (never squeezed by the button); file details and
   "Replace file" share the line below. */
.route-preview-head { display:block; }
.route-preview-file { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; min-width:0; }
.route-preview-file>span { margin-top:0 !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-preview-file>.setup-text-button { flex:none; }
@media (max-width:600px) { .setup-dialog-footer>span { display:none; } }

/* Rider & bike dialog: bike tiers as selectable cards, kit and paint in cockpit style. */
.rider-bikes { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; margin:18px 0 0; padding:0; border:0; }
.rider-bikes legend { margin-bottom:9px; padding:0; font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:2.2px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.rider-bikes label { position:relative; display:grid; align-content:start; gap:5px; padding:13px 14px 13px 40px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); cursor:pointer; transition:border-color 140ms ease,background 140ms ease; }
.rider-bikes label:hover { border-color:rgba(255,255,255,.2); }
.rider-bikes input { position:absolute; top:14px; left:14px; appearance:none; -webkit-appearance:none; width:14px; height:14px; margin:0; border:1px solid rgba(255,255,255,.4); border-radius:50%; cursor:pointer; }
.rider-bikes input:checked { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px #0e1219; }
.rider-bikes input:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.rider-bikes strong { display:flex; align-items:center; gap:8px; font:400 20px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.3px; text-transform:uppercase; }
.rider-bikes strong i { width:8px; height:8px; flex:none; }
.rider-bikes span { font-size:12px; line-height:1.4; color:rgba(230,237,243,.6); }
.rider-bikes small { font:700 9px/1.4 "JetBrains Mono",monospace; letter-spacing:1px; color:rgba(139,148,158,.85); }
.rider-bikes label.is-selected { border-color:var(--accent); background:linear-gradient(180deg,rgba(240,201,58,.1),rgba(240,201,58,.02)); }
.rider-bikes label.is-selected strong { color:var(--accent); }
.rider-kit { margin-top:6px; }
.rider-kit .appearance-heading { margin:20px 0 10px; font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:2.2px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.rider-kit .appearance-heading strong { font:inherit; }
.rider-kit .appearance-controls button, .rider-kit .appearance-controls select, .rider-kit .bike-appearance select { border-radius:0; border-color:rgba(255,255,255,.1); background:rgba(0,0,0,.3); color:var(--fg); }
.rider-kit .appearance-controls .appearance-heading button { padding:5px 10px; border:1px solid rgba(240,201,58,.4); background:none; color:var(--accent); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; }
.rider-kit .appearance-presets { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.rider-kit .appearance-presets button { padding:7px; font:700 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; color:rgba(230,237,243,.72); }
.rider-kit .appearance-presets button[aria-pressed=true] { border-color:var(--accent); background:rgba(240,201,58,.08); color:var(--fg); }
.rider-kit .appearance-swatch { border-radius:0; height:22px; }
.rider-kit .appearance-colors input { border-radius:0; border-color:rgba(255,255,255,.12); background:rgba(0,0,0,.3); }
.rider-kit .appearance-custom summary { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.rider-kit .bike-appearance { margin-top:14px; padding-top:4px; border-top:1px solid rgba(255,255,255,.07); }
.setup-dialog-footer>a { text-decoration:none; }
@media (max-width:600px) { .rider-bikes { grid-template-columns:1fr; } .rider-kit .appearance-presets { grid-template-columns:1fr 1fr; } }
.rider-bikes strong i { box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.rider-kit .bike-livery-presets { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0 16px; }
.rider-kit .bike-livery-presets button { gap:4px; padding:8px; border:1px solid rgba(255,255,255,.1); border-radius:0; background:rgba(0,0,0,.3); color:var(--fg); }
.rider-kit .bike-livery-presets button:hover { border-color:rgba(255,255,255,.22); }
.rider-kit .bike-livery-presets button[aria-pressed=true] { border-color:var(--accent); background:rgba(240,201,58,.08); box-shadow:none; }
.rider-kit .bike-livery-presets strong { font:700 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; }
.rider-kit .bike-livery-presets small { font:600 9px/1.2 "JetBrains Mono",monospace; letter-spacing:.6px; color:rgba(139,148,158,.85); text-transform:uppercase; }
.rider-kit .bike-livery-swatch { height:46px; }
.rider-kit .appearance-colors label, .rider-kit .bike-finish { font:800 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.66); }
.rider-kit .bike-finish { grid-template-columns:80px minmax(0,1fr); }
.rider-kit .appearance-hint { margin:14px 0 0; font:700 9px/1.5 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; color:rgba(139,148,158,.8); }
@media (max-width:600px) { .rider-kit .bike-livery-presets { grid-template-columns:1fr 1fr; } }
.rider-kit .bike-appearance>select { display:none; }

/* Ride menu: the route choice spans the grid. Key hints fade while riding. */
.ride-menu-grid button.is-wide { grid-column:1 / -1; }

/* In a slipstream: the watts saved replace the POWER unit. */
/* Long routes: the profile is a scrolling window of the road ahead. */
/* Work me out in the ride: the block, its heart band and the coach's word. */
/* Today's pick: the rider's word on their legs, asked in the line itself (Undo once said). */
.op-mode-flat { padding:0; border:0; background:none; font:inherit; color:inherit; text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
.op-mode-flat:hover { color:var(--accent); }
.op-mode-flat:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.workout-coach { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:6px 0 0; font:600 11px/1.3 Inter,system-ui,sans-serif; color:rgba(230,237,243,.7); }
.workout-coach b { font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg); }
.workout-coach em { flex-basis:100%; font-style:normal; color:var(--accent); }
/* What the trainer makes of the road: in ERG the grade is only the road's (greyed), the watts held beside it. */
.hud-grade .grade-readout[data-erg] .value { color:rgba(230,237,243,.5); }
.hud-grade .grade-readout .grade-feel { align-self:center; padding:3px 6px 2px; border:1px solid rgba(240,201,58,.4); color:var(--accent); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; }

/* Riders near you: ahead above, you, behind below; gap in seconds at your pace. */
.hud-nearby { position:absolute; top:16px; right:16px; width:210px; box-sizing:border-box; display:flex; flex-direction:column; padding:6px 0; background:rgba(14,17,23,.76); backdrop-filter:blur(10px); border:1px solid #1f242c; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); font:600 12px/1 "Inter",system-ui,sans-serif; color:var(--fg); pointer-events:none; }
.hud-nearby-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:9px; padding:6px 12px; }
.hud-nearby-row i { width:8px; height:8px; border-radius:2px; }
.hud-nearby-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-nearby-row b { font:700 11px/1 "JetBrains Mono",monospace; font-feature-settings:"tnum" 1; color:rgba(230,237,243,.8); }
.hud-nearby-row.is-me { background:rgba(240,201,58,.1); }
button.hud-nearby-row { width:100%; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; pointer-events:auto; }
button.hud-nearby-row:hover, button.hud-nearby-row:focus-visible { background:rgba(46,204,113,.12); outline:none; }
.hud-nearby-row.is-me i { background:var(--accent); }
.hud-nearby-row.is-me span, .hud-nearby-row.is-me b { color:var(--accent); }
.hud-nearby-row.is-behind span, .hud-nearby-row.is-behind b { color:rgba(230,237,243,.55); }
@media (max-width:600px) { .hud-nearby { top:292px; right:12px; width:140px; font-size:11px; } .hud-nearby-row { padding:5px 9px; gap:7px; } }

/* Saved routes can be removed from the list (the ride link keeps working). */
.op-rail-item { position:relative; }
.op-rail-forget { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:26px; height:26px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.12); background:rgba(10,13,20,.92); color:rgba(230,237,243,.7); font-size:10px; cursor:pointer; opacity:0; transition:opacity 120ms ease,color 120ms ease,border-color 120ms ease; }
.op-rail-item:hover .op-rail-forget, .op-rail-forget:focus-visible { opacity:1; }
.op-rail-forget:hover { color:var(--danger); border-color:rgba(255,100,100,.5); }
.op-rail-forget:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
@media (hover:none) { .op-rail-forget { opacity:.7; } }
/* Phones: the data credit sits in one line above the grade profile, never over it. */
@media (max-width:600px) {
}
/* Short screens (laptop browsers, tablets sideways): the ride stats sit right under the session
   panel and the minimap moves to the bottom-right corner, so the stats never run off the bottom. */
@media (min-width:601px) and (max-height:760px) {
  .hud-minimap { top:auto; left:auto; right:16px; bottom:24px; width:160px; height:160px; }
  .hud-minimap canvas { width:160px; height:160px; }
  .hud-ride-stats { top:70px; max-height:calc(100dvh - 86px); overflow:auto; }
}
/* Phones held sideways: compact panels down the left, the minimap bottom-right, a smaller grade
   strip clear of the rider, the map credit under the stats, cards and banners inside the screen. */
@media (min-width:601px) and (max-height:500px) {
  .hud-help { top:10px; left:10px; }
  .hud-menu-button { width:40px; height:40px; }
  .hud-ride-stats { top:60px; left:10px; width:174px; max-height:calc(100dvh - 70px); }
  .ride-stat .label { min-width:42px; font-size:9px; letter-spacing:1px; }
  .ride-stat .unit { min-width:22px; font-size:9px; }
  .ride-stat-main .value { font-size:28px; }
  .hud-minimap { right:10px; bottom:10px; width:120px; height:120px; }
  .hud-minimap canvas { width:120px; height:120px; }
  .hud-grade { bottom:10px; transform:translateX(-50%) scale(.78); transform-origin:50% 100%; }
  .hud-nearby { top:10px; right:10px; width:150px; font-size:11px; }
  .hud-nearby-row { padding:5px 9px; gap:7px; }
  .hud-segment-banner { top:10px; }
  .route-complete { top:10px; max-height:calc(100dvh - 20px); overflow:auto; gap:8px; padding:14px 18px 12px; }
  .route-complete strong { font-size:26px; }
  .ride-honesty { margin:0; font-size:11px; line-height:1.3; }
  .route-complete-stats { padding:4px 0; gap:6px 10px; }
  .route-complete-stats span { gap:3px; }
  .route-complete-stats b { font-size:14px; }
  .setup-dialog-backdrop { padding:8px; }
  .setup-dialog { max-height:calc(100dvh - 16px); }
  .setup-dialog>header { padding:12px 18px 10px; }
  .setup-dialog h2 { font-size:28px; }
  .setup-dialog-body { padding:12px 18px 16px; }
}
/* Loading card on small screens. Sideways phones: a shorter preview, and the card scrolls rather than
   clip its progress (and any error with its buttons) off screen. Narrow phones: stage names and tips
   wrap onto their own lines instead of truncating. */
.op-loading-tip > .op-dim { flex:none; }
@media (max-height:500px) {
  .op-loading { overflow-y:auto; }
  .op-loading-content { margin:auto; padding:16px 22px; gap:8px; }
  .op-loading-canvas { height:90px; }
}
@media (max-width:480px) {
  .op-loading-stages { grid-template-columns:1fr; }
  .op-loading-tip { align-items:flex-start; }
  .op-loading-tip-text { white-space:normal; line-height:1.5; }
}
/* The percentage sits above the bar: clip only the shimmer at the bar's ends, not the label. */
.op-loading-progress { overflow:visible; clip-path:inset(-24px 0 0 0); }
/* Phones: the ride summary and banners sit clear above the grade strip (24 px + its 118 px). */
@media (max-width:600px) {
  .route-complete, .hud-segment-banner { bottom:150px; }
}
/* Narrow phones: the five setup tabs keep their full names (RESISTANCE needs the tab's full width). */
@media (max-width:420px) { .device-role-tabs button { letter-spacing:0; padding-left:1px; padding-right:1px; } }

/* ── Account & friends ──────────────────────────────────────────────── */
.op-account-chip { cursor:pointer; border:1px solid rgba(240,201,58,.35); background:rgba(240,201,58,.08); color:var(--accent); font-size:10px; letter-spacing:1.6px; }
.op-account-chip[data-signed-in=true] { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(230,237,243,.8); }
.op-account-chip:hover { filter:brightness(1.15); }
.account-note { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.account-note .setup-text-button { padding:0; }
.account-dialog { width:min(560px,100%); }
.account-pitch { display:grid; gap:8px; margin:0 0 12px; padding:0; list-style:none; }
.account-pitch li { padding-left:14px; border-left:2px solid rgba(240,201,58,.5); color:rgba(230,237,243,.72); }
.account-pitch strong { color:var(--fg); }
.account-form { display:grid; gap:12px; margin-top:16px; }
.account-form .setup-primary { justify-self:start; }
.account-google { justify-self:start; display:inline-flex; align-items:center; padding:11px 20px 10px; border:1px solid rgba(230,237,243,.32); background:rgba(255,255,255,.04); color:#e6edf3; font:400 19px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.6px; text-transform:uppercase; white-space:nowrap; cursor:pointer; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); transition:border-color 140ms ease,color 140ms ease; }
.account-google:hover { border-color:var(--accent); color:var(--accent); }
.account-code-input { font:600 22px/1 "JetBrains Mono",monospace !important; letter-spacing:6px; }
.account-row { display:flex; gap:18px; flex-wrap:wrap; }
.account-offline { display:flex; align-items:baseline; gap:14px; }
.account-totals { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:6px; }
.account-totals dt { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.8px; text-transform:uppercase; color:rgba(230,237,243,.5); }
.account-section { margin-top:22px; }
.account-section h3 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; font:400 22px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.account-code { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 10px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.55); }
.account-code strong { font:700 18px/1 "JetBrains Mono",monospace; letter-spacing:2px; color:var(--accent); }
.account-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:10px; }
.account-add input { font-family:"JetBrains Mono",monospace !important; letter-spacing:1px; }
.account-list { display:grid; gap:0; margin:10px 0 0; padding:0; list-style:none; }
.account-list li { display:flex; align-items:center; gap:14px; padding:9px 0; border-top:1px solid rgba(255,255,255,.06); }
.account-list li>span { display:grid; gap:2px; flex:1; min-width:0; }
.account-list b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-list small { color:rgba(230,237,243,.5); font-size:11px; }
.account-list li[data-riding=true] small { color:#7fe0a6; }
@media (max-width:520px) { .account-totals { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* A device dropped mid-ride and is reconnecting in the background. */
.hud-reconnecting { position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:9px; padding:8px 14px; background:rgba(12,14,18,.82); border:1px solid rgba(240,201,58,.45); color:#f4e3a4; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; pointer-events:none; }
.hud-needs-account { pointer-events:auto; cursor:pointer; text-align:left; }
.hud-needs-account b { color:var(--accent); margin-left:6px; }
.hud-reconnecting span { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:hud-reconnect-pulse 1s ease-in-out infinite; }
@keyframes hud-reconnect-pulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .hud-reconnecting span { animation:none; } }

/* Mini view: the ride's numbers on top of another tab or app (trainer riders). */

/* Test my trainer */
.trainer-check { width:min(560px,100%); }
.check-step { display:grid; gap:10px; margin-top:16px; }
.check-step h3 { margin:0; font:400 22px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.check-step p { margin:0; color:rgba(230,237,243,.72); }
.check-step .setup-primary { justify-self:start; }
.check-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; }
.check-device { display:flex; align-items:baseline; gap:10px; }
.check-device b { font-size:15px; } .check-device small { color:rgba(230,237,243,.5); font:11px "JetBrains Mono",monospace; }
.check-caps { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; padding:0; list-style:none; }
.check-caps li { padding:4px 8px; border:1px solid rgba(255,255,255,.12); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; color:rgba(230,237,243,.45); }
.check-caps li[data-ok=true] { border-color:rgba(63,185,124,.5); color:#7fe0a6; }
.check-now { font:800 13px/1.2 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; color:var(--accent) !important; }
.check-ok { color:#7fe0a6 !important; }
.check-bad p { color:#edb49d !important; } .check-bad ol { margin:6px 0 0; padding-left:20px; color:rgba(230,237,243,.72); display:grid; gap:4px; }

/* Bots are labelled in the riders list. */
.hud-bot { margin-left:6px; font:800 8px/1 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; color:rgba(230,237,243,.45); vertical-align:1px; }

/* Rider & bike: weight */
.rider-weight { margin:16px 0 14px; }
.rider-weight-row { grid-column:1 / -1; display:flex; align-items:center; gap:8px; }
.rider-weight-row input { max-width:120px; }
.rider-weight-row span { font:600 12px Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.6); }
.rider-weight small { grid-column:1 / -1; font:12px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.5); }

/* Workout on the HUD: target now, next, the whole workout as zone-coloured blocks, controls. */
.hud-workout { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:min(500px,calc(100vw - 480px)); min-width:300px; box-sizing:border-box; display:grid; gap:8px; padding:10px 14px 10px; background:rgba(14,17,23,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid #1f242c; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); color:var(--fg); font:600 12px/1.2 "Inter",system-ui,sans-serif; pointer-events:auto; z-index:5; }
.hud-workout header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.hud-workout header b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-workout[data-done] header span { color:rgba(230,237,243,.55); font:700 10px/1 "JetBrains Mono",monospace; white-space:nowrap; }
.workout-now { display:grid; grid-template-columns:1.25fr 1.1fr .8fr; gap:10px; }
/* Labels on one line at the top, the numbers on one baseline under them. */
.workout-now > div { display:flex; flex-direction:column; justify-content:space-between; }
.workout-now small { display:block; margin-bottom:5px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.6); }
/* What to hold and for how long, big (the owner's: the workout's numbers matter most). */
.workout-now strong { font:700 40px/1 "JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.workout-now div:first-child strong { font-size:52px; color:var(--accent); transition:color 200ms ease; }
.workout-now strong[data-off=low] { color:#9ec5ff !important; } .workout-now strong[data-off=high] { color:#f4b36b !important; }
.workout-now strong i { font-style:normal; font-size:15px; margin-left:4px; color:rgba(230,237,243,.55); }
.workout-now .workout-next { font-size:22px; color:rgba(230,237,243,.75); }
.workout-now[data-cadence] { grid-template-columns:1.25fr 1.1fr 1fr; }
.workout-now .workout-cadence { font-size:clamp(28px,6vw,40px); }
.workout-strip { width:100%; height:34px; display:block; }
.workout-strip polygon { stroke:none; }
.workout-strip polygon[data-zone="1"],.workout-strip polygon[data-zone=free] { fill:#6b7280; } .workout-strip polygon[data-zone="2"] { fill:#3b82f6; } .workout-strip polygon[data-zone="3"] { fill:#22c55e; }
.workout-strip polygon[data-zone="4"] { fill:#eab308; } .workout-strip polygon[data-zone="5"] { fill:#f97316; } .workout-strip polygon[data-zone="6"] { fill:#ef4444; }
.workout-strip polygon[data-done=true] { opacity:.35; }
.workout-strip line { stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
.hud-workout footer { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hud-workout footer button { padding:5px 8px; border:1px solid rgba(255,255,255,.16); border-radius:6px; background:rgba(255,255,255,.04); color:#dbe4e0; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.hud-workout footer button[aria-pressed=true] { border-color:rgba(240,201,58,.6); color:var(--accent); background:rgba(240,201,58,.08); }
.hud-workout footer button:disabled { opacity:.35; cursor:default; }
.workout-bias { display:inline-flex; align-items:center; gap:4px; margin-left:auto; font:800 10px/1 "JetBrains Mono",monospace; color:rgba(230,237,243,.75); }
.workout-result { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.workout-result b { color:var(--accent); }
.workout-result button { padding:6px 10px; border:0; border-radius:6px; background:var(--accent); color:#14150b; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.hud-workout p { margin:0; color:rgba(230,237,243,.7); }
.hud-workout .workout-message { color:var(--fg); font-size:13px; line-height:1.35; }
@media (max-width:900px) { .hud-workout { bottom:12px; width:calc(100vw - 32px); } }
/* The card's controls (skip, ERG/wind/chase, intensity, stop) under the pointer only: riding, the
   card is its numbers and its strip (the owner's: no clutter). On a touch screen, once the card is
   tapped (for 8 s after the last tap); a finished session's Close stays. */
@media (hover:hover) and (pointer:fine) {
  /* A toolbar over the card's top edge, shown while the pointer is on the card: it takes no room. */
  .hud-workout footer { position:absolute; left:0; right:0; bottom:100%; padding:0 14px 8px; opacity:0; transition:opacity 160ms ease; }
  .hud-workout:hover footer, .hud-workout:focus-within footer { opacity:1; }
}
@media (hover:none), (pointer:coarse) {
  .hud-workout:not([data-tapped]):not([data-done]) footer { display:none; }
}
.account-apps { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
@media (max-width:520px) { .account-apps { grid-template-columns:1fr; } }
.account-uploads { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.account-uploads i { font-style:normal; font:700 10px/1 "JetBrains Mono",monospace; letter-spacing:.5px; color:rgba(230,237,243,.55); }
.account-uploads i[data-status=done] { color:#7fe0a6; } .account-uploads i[data-status=failed] { color:#edb49d; }
.account-delete { margin:22px 0 0; }
.account-delete-form { display:grid; gap:10px; margin-top:22px; padding:12px; border:1px solid rgba(237,120,100,.35); background:rgba(237,120,100,.05); }
.account-delete-form p { margin:0; color:rgba(230,237,243,.75); }
.account-danger:not(:disabled) { background:#e0715e !important; color:#1a0906 !important; }
.account-progress { display:grid; gap:8px; margin-bottom:14px; }
.account-level { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.account-level strong { font:400 26px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.04em; color:var(--accent); }
.account-level span { font:700 11px/1 "JetBrains Mono",monospace; color:rgba(230,237,243,.6); }
.account-xp { display:block; height:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.account-xp i { display:block; height:100%; background:var(--accent); }
.account-badges { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.account-badges li { padding:4px 8px; border:1px solid rgba(255,255,255,.1); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1px; text-transform:uppercase; color:rgba(230,237,243,.3); }
.account-badges li[data-earned=true] { border-color:rgba(240,201,58,.55); color:var(--accent); background:rgba(240,201,58,.06); }
.account-badges .account-badge-next { border-color:transparent; padding-left:2px; text-transform:none; letter-spacing:.4px; color:rgba(230,237,243,.5); }
.ride-together { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:12px 0 4px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.ride-together>span { display:grid; gap:2px; flex:1 1 240px; min-width:0; }
.ride-together small { color:rgba(230,237,243,.55); font-size:11px; }
.phone-link { width:min(560px,calc(100vw - 24px)); }
.phone-link-body { display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:center; }
.phone-qr { width:200px; aspect-ratio:1; padding:0; background:#fff; line-height:0; }
.phone-qr svg { width:100%; height:100%; display:block; }
.phone-link-text { display:grid; gap:10px; }
.phone-link-text p { margin:0; line-height:1.45; color:rgba(230,237,243,.8); }
.phone-code b { font:700 13px/1 "JetBrains Mono",monospace; letter-spacing:1.5px; color:var(--accent); user-select:all; }
@media (max-width:520px) { .phone-link-body { grid-template-columns:1fr; justify-items:center; } .phone-qr { width:min(220px,70vw); } }
.control-field .control-note { width:100%; font:500 11px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.55); }
.route-finder { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 12px 6px; }
.route-finder label { display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 0; }
.route-finder label span { flex:none; font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.4px; color:rgba(139,148,158,.8); }
.route-finder select { flex:1; min-width:0; padding:5px 6px; border:1px solid rgba(255,255,255,.12); background:rgba(10,13,18,.7); color:var(--fg); font:600 12px Inter,system-ui,sans-serif; }
.route-finder select:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
.route-finder small { flex:1 1 100%; font:700 9px/1.3 "JetBrains Mono",monospace; letter-spacing:.8px; text-transform:uppercase; color:rgba(139,148,158,.7); }
.op-rail-fit { color:var(--accent); font-weight:800; }
.op-rail-fit[data-off=true] { color:rgba(230,237,243,.7); }
/* Text over riders' heads in the world (OverheadTags.tsx): no box, a shadow to read over anything. */
.overhead-tag { display:inline-block; white-space:nowrap; font:800 11px/1 "JetBrains Mono",monospace; letter-spacing:1.4px; color:rgba(255,255,255,.94); text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.55); }
.overhead-tag[data-tone=ghost-best] { color:#86d6ff; }
.overhead-tag[data-tone=ghost-ride] { color:#ffc479; }
/* POWER: green in a draft; on fire when going hard (PowerFire.tsx draws the flames behind it). */
.ride-stat .value[data-draft] { color:#6fd38e; }
/* The coach's state under POWER: the word in the card's type, coloured with its direction. */
.ride-stat.hud-coach .value { margin-left:0; font-size:22px; letter-spacing:.5px; white-space:nowrap; }
.ride-stat.hud-coach .unit { font-size:11px; font-weight:700; color:var(--fg); opacity:.75; white-space:nowrap; }
.ride-stat.hud-coach[data-state=harder] .value { color:var(--accent); }
.ride-stat.hud-coach[data-state=easier] .value { color:#7cc4ff; }
.ride-stat.hud-coach[data-state=recover] .value { color:#7fe0a6; }
.ride-power { position:relative; z-index:1; margin-left:auto; display:inline-flex; transform-origin:100% 85%; }
.ride-power .value { position:relative; z-index:1; display:inline-block; }
.ride-stat-main, .ride-stat .unit { position:relative; z-index:2; } /* the speed stays in front of the flames rising from below it */
.ride-power-fire { position:absolute; z-index:0; left:-16px; width:calc(100% + 32px); bottom:-7px; height:84px; pointer-events:none; }
.ride-power[data-heat] .value { color:#ffe08a; text-shadow:0 1px 0 #3a0f06, 0 0 6px rgba(40,8,2,.75); }
.ride-power[data-heat=hot] .value, .ride-power[data-heat=blaze] .value { color:#fff6dc; text-shadow:0 2px 0 #3a0f06, 0 0 8px rgba(40,8,2,.85); }
/* The rider's HUD size (Menu → HUD): every panel scales from its own corner. */
.hud { zoom: var(--hud-scale, 1); }
.hud-options { margin-bottom:6px; }
.hud-options>select { width:auto; flex:1 1 180px; }
.hud-toggles { display:flex; flex-wrap:wrap; gap:4px 16px; width:100%; }
.hud-toggles .control-check { min-height:28px; text-transform:none; letter-spacing:0; font:12px/1.5 Inter,system-ui,sans-serif; }
.ride-honesty { margin:10px 0 0; font:600 12px/1.45 Inter,system-ui,sans-serif; color:rgba(230,237,243,.6); }
.ride-honesty[data-state=ok] { color:#7fe0a6; }
.ride-honesty[data-state=flagged] { color:#edb49d; }
/* The room's race: top centre, above the road. */
.race-panel { position:absolute; top:58px; left:50%; transform:translateX(-50%); width:min(340px,calc(100vw - 460px)); min-width:260px; padding:12px 14px; background:rgba(10,13,18,.82); border:1px solid rgba(240,201,58,.35); color:var(--fg); pointer-events:auto; font:500 12px/1.4 Inter,system-ui,sans-serif; }
.race-panel header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.4px; color:var(--accent); text-transform:uppercase; }
.race-panel header b { font:400 30px/1 "Bebas Neue",sans-serif; letter-spacing:.02em; color:var(--fg); }
.race-panel header b i { font:800 9px/1 "JetBrains Mono",monospace; font-style:normal; letter-spacing:1.2px; color:rgba(230,237,243,.55); margin-left:6px; }
.race-panel[data-phase=countdown] header b { font-size:40px; color:var(--accent); }
.race-panel p { margin:8px 0; color:rgba(230,237,243,.72); }
.race-panel .setup-primary { width:100%; }
.race-panel ol { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px; max-height:40vh; overflow:auto; }
.race-panel li { display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:3px 4px; font:600 12px/1.3 Inter,system-ui,sans-serif; }
.race-panel li[data-me=true] { background:rgba(240,201,58,.12); color:var(--accent); }
.race-place { font:800 11px/1 "JetBrains Mono",monospace; color:rgba(230,237,243,.55); }
.race-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.race-gap { font:700 11px/1 "JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.race-mark { font-size:12px; }
.race-mark[data-verdict=verified] { color:#7fe0a6; } .race-mark[data-verdict=flagged] { color:#edb49d; } .race-mark[data-verdict=unmeasured],.race-mark[data-verdict=estimated] { color:rgba(230,237,243,.5); }
.race-verdict[data-verdict=verified] { color:#7fe0a6; } .race-verdict[data-verdict=flagged] { color:#edb49d; }
.race-close { border:0; background:none; color:rgba(230,237,243,.6); font-size:13px; cursor:pointer; padding:0 2px; }
.race-categories { display:flex; gap:6px; margin-top:9px; }
.race-panel .race-again { margin-top:10px; }
.race-categories button { position:relative; isolation:isolate; padding:4px 8px 3px; border:0; background:none; color:rgba(230,237,243,.6); font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.race-categories button::before { content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); border:1px solid rgba(255,255,255,.14); }
.race-categories button[aria-selected=true] { color:#14150b; }
.race-categories button[aria-selected=true]::before { border-color:transparent; background:var(--accent); }
@media (max-width:900px) { .race-panel { top:auto; bottom:150px; width:min(340px,calc(100vw - 24px)); background:rgba(10,13,18,.96); } }
.race-setup select { padding:6px 8px; border:1px solid rgba(255,255,255,.14); background:#0b1922; color:#e0e9e6; font:12px Inter,system-ui,sans-serif; }
/* Simple mode: the ride on a large map under the HUD (no 3D). */
.simple-ride { position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,#16202b,#0b0f14 70%); }
.simple-map canvas { display:block; width:var(--map-size); height:var(--map-size); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.controller-bindings { display:grid; gap:4px; margin:6px 0 10px; }
.binding-row { display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 8px; border:1px solid rgba(255,255,255,.06); }
.binding-row[data-learning=true] { border-color:rgba(240,201,58,.6); background:rgba(240,201,58,.06); }
.binding-name { font:600 12px/1.3 Inter,system-ui,sans-serif; color:var(--fg); }
.binding-buttons { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.binding-buttons i { font:italic 11px Inter,system-ui,sans-serif; color:rgba(230,237,243,.4); }
.binding-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 7px; border:1px solid rgba(255,255,255,.14); font:700 10px/1.4 "JetBrains Mono",monospace; color:rgba(230,237,243,.85); }
.binding-chip button { border:0; background:none; color:rgba(230,237,243,.5); cursor:pointer; padding:0 2px; font-size:12px; }
.binding-chip button:hover { color:#edb49d; }
.device-mapping-all { margin:6px 0; }
.device-mapping>.controller-bindings { display:grid; grid-template-columns:1fr; gap:4px; }
.device-mapping-all>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.binding-chip { white-space:nowrap; }
/* First ride setup. */
/* A first ride's setup, on its loading screen: beside the loading card on a wide screen, the two the
   same height (the route preview takes up the difference); on a narrow one under it, the loading card
   cut to its title and bar. */
.op-loading.has-setup { display:flex; flex-wrap:wrap; align-content:center; align-items:stretch; justify-content:center; gap:22px; padding:24px; box-sizing:border-box; overflow-y:auto; }
.op-loading.has-setup .op-loading-content { flex:none; width:min(540px,calc(100vw - 530px)); box-sizing:border-box; }
.op-loading.has-setup .op-loading-canvas { flex:1 1 200px; height:auto; min-height:150px; }
.op-loading.has-setup .op-loading-tip { display:none; }
.onboarding { flex:none; width:min(440px,100%); max-height:calc(100dvh - 48px); }
.onboarding>header { align-items:flex-end; }
.onboarding h2:focus { outline:none; }
.onboarding .rider-weight:first-child { margin-top:0; }
.onboard-steps { display:flex; gap:4px; margin:0 0 6px; padding:0; list-style:none; }
.onboard-steps li { width:22px; height:3px; background:rgba(255,255,255,.14); transition:background 200ms ease; }
.onboard-steps li[data-on=true] { background:var(--accent); }
.onboard-unit { display:inline-flex; border:1px solid rgba(255,255,255,.14); }
.onboard-unit button { padding:6px 10px; border:0; background:none; color:rgba(230,237,243,.6); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1px; cursor:pointer; }
.onboard-unit button[aria-pressed=true] { background:var(--accent); color:#111; }
.onboard-unit-label { font:800 11px/1 "JetBrains Mono",monospace; color:rgba(230,237,243,.6); }
.onboard-optional { font-style:normal; font-weight:500; color:rgba(230,237,243,.45); margin-left:6px; text-transform:none; letter-spacing:0; }
.onboard-levels { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.onboard-levels>span { width:100%; font:600 12px/1.4 Inter,system-ui,sans-serif; color:rgba(230,237,243,.7); }
.onboard-levels button { padding:7px 10px; border:1px solid rgba(255,255,255,.14); background:none; color:var(--fg); font:600 12px Inter,system-ui,sans-serif; cursor:pointer; }
.onboard-levels button[aria-checked=true] { border-color:var(--accent); color:var(--accent); background:rgba(240,201,58,.08); }
.onboard-levels small { width:100%; color:rgba(230,237,243,.6); }
.onboard-devices { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.onboard-devices>li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:4px 14px; padding:14px 16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); transition:border-color 200ms ease,background 200ms ease; }
.onboard-devices>li[data-paired=true] { border-color:rgba(63,185,124,.45); background:rgba(63,185,124,.05); }
.onboard-devices svg { width:24px; height:24px; color:rgba(230,237,243,.55); }
.onboard-devices>li[data-paired=true] svg { color:#7fe0a6; }
.onboard-devices b { display:block; overflow:hidden; font:400 21px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.03em; text-overflow:ellipsis; white-space:nowrap; }
.onboard-devices small { display:block; margin-top:4px; font:500 12px/1.4 Inter,system-ui,sans-serif; color:rgba(230,237,243,.6); }
.onboard-pair { padding:9px 16px 8px; border:1px solid rgba(240,201,58,.5); background:rgba(240,201,58,.06); color:var(--accent); font:400 17px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:background 140ms ease,border-color 140ms ease; }
.onboard-pair:hover:not(:disabled) { border-color:var(--accent); background:rgba(240,201,58,.14); }
.onboard-pair:disabled { opacity:.45; cursor:default; }
.onboard-alt { grid-column:2 / -1; justify-self:start; }
.onboard-live { font:400 28px/1 "Bebas Neue","Inter",sans-serif; white-space:nowrap; color:rgba(230,237,243,.5); }
.onboard-live small { display:inline; margin:0 0 0 3px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1px; color:inherit; }
.onboard-live[data-live=true] { color:#7fe0a6; }
.onboard-note { margin:14px 0 0; font:500 12px/1.5 Inter,system-ui,sans-serif; color:rgba(230,237,243,.6); }
.onboarding .setup-dialog-footer>.onboard-world { flex:1; text-align:right; color:rgba(230,237,243,.45); }
.onboard-world::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:currentColor; vertical-align:1px; animation:op-pulse 1.4s ease-in-out infinite; }
.onboarding .setup-dialog-footer>.onboard-world[data-ready=true] { color:#7fe0a6; }
.onboard-world[data-ready=true]::before { animation:none; }
/* The world has loaded while the rider was busy here: the button that now rides says so, twice. */
.onboarding .setup-primary[data-ride-now=true] { animation:onboard-ready 1.5s ease-out 2; }
@keyframes onboard-ready { 0% { box-shadow:0 0 0 0 rgba(240,201,58,.55); } 100% { box-shadow:0 0 0 14px rgba(240,201,58,0); } }
@media (max-width:1000px) {
  .op-loading.has-setup { flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:12px; padding:12px; }
  .op-loading.has-setup .onboarding { width:min(560px,100%); max-height:none; }
  .op-loading.has-setup .op-loading-content { width:min(560px,100%); box-sizing:border-box; padding:14px 18px; gap:8px; }
  .op-loading.has-setup :is(.op-loading-canvas,.op-loading-stages,.op-loading-credit,.op-loading-sub) { display:none; }
  .op-loading.has-setup .op-loading-title { font-size:28px; }
}
@media (max-width:600px) {
  .onboarding .setup-dialog-footer { flex-direction:row; align-items:center; }
  .onboarding .setup-dialog-footer>.onboard-world { display:inline; }
}
.typed-workout { display:grid; gap:6px; margin:-4px 0 6px; }
.typed-workout textarea { width:100%; box-sizing:border-box; padding:10px; border:1px solid #6b85824d; border-radius:8px; background:#0b1922; color:#e0e9e6; font:12px/1.5 "JetBrains Mono",ui-monospace,monospace; resize:vertical; }
.typed-workout small { color:rgba(230,237,243,.55); font:500 11px/1.4 Inter,system-ui,sans-serif; }
.typed-workout span { display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.bluetooth-unavailable { display:grid; gap:8px; padding:12px 14px; border:1px solid rgba(240,201,58,.35); background:rgba(240,201,58,.05); }
.bluetooth-unavailable p { margin:0; font:500 13px/1.45 Inter,system-ui,sans-serif; color:rgba(230,237,243,.88); }
.bluetooth-unavailable span { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.bluetooth-unavailable a.setup-primary { text-decoration:none; }
.bluetooth-unavailable code { padding:4px 6px; background:rgba(255,255,255,.06); font:600 11px "JetBrains Mono",monospace; color:var(--fg); word-break:break-all; }
.bluetooth-unavailable small { color:rgba(230,237,243,.55); font:500 11px/1.4 Inter,system-ui,sans-serif; }
.rider-units { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* The climb ahead, in the grade panel (like ClimbPro). */
.hud-fields { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; width:100%; margin-top:4px; }
.hud-fields em { font-style:normal; font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; color:rgba(230,237,243,.66); }
.hud-fields .setup-text-button[aria-pressed=true] { color:var(--accent); }
.hud-field-chips { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.hud-field-chips button { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid rgba(255,255,255,.14); background:none; color:rgba(230,237,243,.6); font:600 12px Inter,system-ui,sans-serif; text-transform:none; letter-spacing:0; cursor:pointer; }
.hud-field-chips button[aria-pressed=true] { border-color:rgba(240,201,58,.6); color:var(--fg); background:rgba(240,201,58,.06); }
.hud-field-chips b { display:inline-grid; place-items:center; width:16px; height:16px; background:var(--accent); color:#111; font:800 10px/1 "JetBrains Mono",monospace; }


/* ── Top rail: the name links home; Your rides beside the account ──────────────────────────── */
a.op-brand { gap:0; color:var(--fg); text-decoration:none; }
.op-brand .op-logo { display:block; height:18px; width:auto; }
a.op-brand:hover { text-decoration:none; }
.op-history { padding:4px 7px; color:rgba(230,237,243,.85); text-decoration:none; }
.op-history svg { width:15px; height:15px; display:block; }
.op-history:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.op-music { cursor:pointer; background:rgba(255,255,255,.02); }
.op-music[aria-pressed=false] { color:rgba(139,148,158,.7); }
.op-top a:focus-visible, .op-top button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.op-top-right .op-pill { white-space:nowrap; }
@media (max-width:600px) { .op-top-right { gap:8px; } .op-brand .op-logo { height:16px; } }

/* ── All routes and Your rides: pages under the same top rail ──────────────────────────────── */
.page { position:fixed; inset:0; overflow-y:auto; overscroll-behavior:contain; color:var(--fg); font-family:"Inter",ui-sans-serif,system-ui,sans-serif; background:radial-gradient(120% 70% at 20% 0%,#16202a 0%,#0b0f15 55%,#07090d 100%); }
.page > .op-top { position:sticky; top:0; height:48px; }

.page-body { width:min(880px,100%); box-sizing:border-box; margin:0 auto; padding:26px 22px 60px; }
.page-head h1 { margin:10px 0 6px; font:400 clamp(44px,6vw,72px)/.92 "Bebas Neue","Inter",sans-serif; letter-spacing:.01em; text-transform:uppercase; }
.page-head p { margin:0; font-size:13.5px; line-height:1.55; color:rgba(230,237,243,.62); }
.page-link { padding:0; border:0; background:none; color:var(--accent); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.page-link:hover { color:var(--fg); }
.page-back { padding:6px 0; border:0; background:none; color:rgba(230,237,243,.6); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.page-back:hover { color:var(--accent); }
.page button:focus-visible, .page input:focus-visible, .page select:focus-visible, .page a:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }

.routes-tools { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; margin:24px 0 0; }
.routes-search, .routes-tools select { box-sizing:border-box; height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:0; background:rgba(0,0,0,.3); color:var(--fg); font:14px "Inter",system-ui,sans-serif; }
.routes-search:focus, .routes-tools select:focus { outline:none; border-color:var(--accent); }
.routes-tools label { display:flex; align-items:center; gap:8px; }
.routes-tools label span { font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(139,148,158,.9); white-space:nowrap; }
.routes-tools select { appearance:none; -webkit-appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f0c93a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.routes-tools select option { background:#121820; }
.routes-basis { margin:10px 0 0; font-size:12px; color:rgba(230,237,243,.5); }
.routes-section h2, .rides-day h2 { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:30px 0 10px; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(230,237,243,.85); }
.routes-section h2 small { font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:rgba(230,237,243,.45); }
.routes-section ul, .rides-day ul { list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.07); }
.routes-row, .rides-row { display:flex; align-items:center; gap:14px; min-height:60px; padding:0 4px 0 0; border-bottom:1px solid rgba(255,255,255,.07); }
.routes-row:hover, .rides-row:hover { background:rgba(255,255,255,.025); }
.routes-pick { flex:1; min-width:0; display:grid; gap:3px; padding:12px 0 12px 12px; border:0; background:none; color:var(--fg); text-align:left; font:inherit; cursor:pointer; }
.routes-pick strong, .rides-what strong { font:400 20px/1.05 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routes-pick small { font:700 9.5px/1.4 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:rgba(139,148,158,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routes-pick small i { font-style:normal; color:#8fd8a5; }
.routes-fit { font-weight:600; color:rgba(230,237,243,.82); }
.routes-fit[data-off=true] { color:rgba(230,237,243,.5); }
.routes-dist { font-size:14px; font-weight:800; white-space:nowrap; }
.routes-dist i { margin-left:3px; font-style:normal; font-size:10px; color:rgba(139,148,158,.85); }
.routes-own { display:flex; gap:14px; }
/* "Ride ▸" on the row under the pointer (or focus) only: not thirteen times down the list. */
.routes-go { width:64px; text-align:right; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); opacity:0; pointer-events:none; transition:opacity 140ms ease; }
.routes-row:hover .routes-go, .routes-row:focus-within .routes-go { opacity:1; }
.routes-rename { flex:1; display:flex; align-items:center; gap:12px; padding:10px 0 10px 12px; }
.routes-rename input { flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid var(--accent); background:rgba(0,0,0,.3); color:var(--fg); font:14px "Inter",system-ui,sans-serif; }
.routes-none { margin:12px 0 0 12px; font-size:13px; color:rgba(230,237,243,.5); }
.page .custom-route-entry { width:100%; margin:30px 0 0; }

.rides-what { flex:1; min-width:0; display:grid; gap:4px; padding:12px 0 12px 12px; }
/* A ride's name opens its page. */
button.rides-what { border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
button.rides-what:hover:not(:disabled) strong, button.rides-what:focus-visible strong { color:var(--accent); }
button.rides-what:disabled { cursor:default; }
.rides-what small { font-size:11px; letter-spacing:.04em; color:rgba(230,237,243,.5); }
.rides-row[data-finished] .rides-what small { color:#9fdcb2; }
.rides-stats { display:flex; gap:18px; font-size:14px; }
.rides-stats b { font-weight:800; white-space:nowrap; }
.rides-stats i { margin-left:3px; font-style:normal; font-size:10px; color:rgba(139,148,158,.85); }
.rides-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:236px; }
/* Continue: a word in the accent (setup-text-button), not a filled button on every row. */
.rides-continue { color:var(--accent); white-space:nowrap; }
.rides-continue:hover:not(:disabled) { color:var(--fg); }
.rides-delete[data-confirm] { color:#ffb2a4; }
/* The Rides tab's card: the rider (FTP and form, the way into Your fitness; this week) over their
   best power (each the way into its ride), cells in one frame. Cells as wide as they need (a label
   whole, "Training hard" on a line), the room left shared. */
.rides-card { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
/* (Under a guest's sign-in line, 18 px apart, not on its baseline.) */
.ride-history-note + .rides-card { margin-top:18px; }
.rides-card + .fitness-note { margin-top:12px; }
.rides-now { display:flex; }
.rides-now > .fitness-strip { flex:2 1 auto; min-width:0; }
.rides-now > .rides-week { flex:1 1 auto; min-width:0; margin:0; }
.rides-now > * + * { border-left:1px solid rgba(255,255,255,.07); }
.rides-now + .rides-best { border-top:1px solid rgba(255,255,255,.07); }
.fitness-open { display:flex; width:100%; height:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fitness-open > span { flex:1 1 auto; min-width:0; display:grid; align-content:start; gap:6px; padding:14px 16px; }
.fitness-open > span + span { border-left:1px solid rgba(255,255,255,.07); }
.rides-week div { display:grid; gap:6px; padding:14px 16px; }
.rides-best ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.rides-best li + li { border-left:1px solid rgba(255,255,255,.07); }
.rides-best button { display:grid; gap:6px; width:100%; padding:14px 16px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fitness-open:hover, .rides-best button:hover:not(:disabled) { background:rgba(240,201,58,.06); }
.rides-best button:disabled { cursor:default; }
.fitness-open i, .rides-week dt, .rides-best span { font-style:normal; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(139,148,158,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fitness-open b, .rides-week dd, .rides-best b { margin:0; font-size:22px; font-weight:800; line-height:1; white-space:nowrap; }
.fitness-open b small, .rides-week dd small, .rides-best b small { margin-left:4px; font-size:11px; font-weight:700; color:rgba(139,148,158,.85); }
.rides-best button:disabled b { color:rgba(230,237,243,.28); }
/* Form in a word in the number's place, in the display face. */
.fitness-open .fitness-word, .ride-hero .fitness-word { font:400 24px/22px "Bebas Neue","Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase; white-space:normal; }
.fitness-open [data-form=up] b, .ride-hero [data-form=up] dd { color:#9fdcb2; } .fitness-open [data-form=down] b, .ride-hero [data-form=down] dd { color:#ffb2a4; }
/* The way in: a mark at the strip's end, the accent on hover. */
.fitness-open > em { flex:none; align-self:center; padding:0 14px; font-style:normal; color:rgba(230,237,243,.4); }
.fitness-open:hover > em, .fitness-open:focus-visible > em { color:var(--accent); }
/* (After the rules above, or they win.) A phone: FTP and form across, the week under them; the
   bests two by two. */
@media (max-width:600px) {
  .rides-now { flex-wrap:wrap; }
  .rides-now > .fitness-strip { flex-basis:100%; }
  .rides-now > * + * { border-left:0; border-top:1px solid rgba(255,255,255,.07); }
  .rides-best ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rides-best li:nth-child(3) { border-left:0; }
  .rides-best li:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.07); }
  .fitness-open > span, .rides-week div, .rides-best button { padding:12px 10px; }
  .fitness-open > em { padding:0 10px; }
}
/* A kept ride's .FIT and delete, beside its page's close. */
.ride-detail-actions { display:flex; align-items:center; gap:16px; margin-left:auto; align-self:center; }
.rides-empty { display:grid; justify-items:start; gap:10px; margin-top:34px; padding:26px; border:1px dashed rgba(255,255,255,.14); }
.rides-empty strong { font:400 30px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.rides-empty p { margin:0 0 6px; font-size:13.5px; line-height:1.55; color:rgba(230,237,243,.6); }

@media (max-width:700px) {
  .page-body { padding:18px 14px 48px; }
  .routes-tools { grid-template-columns:1fr 1fr; }
  .routes-search { grid-column:1 / -1; }
  .routes-tools label { display:grid; gap:5px; }
  .routes-tools select { width:100%; }
  .routes-row { flex-wrap:wrap; gap:0 12px; padding-bottom:8px; }
  .routes-pick { flex-basis:calc(100% - 80px); }
  .routes-own { order:3; padding-left:12px; }
  .routes-go { display:none; }
  .rides-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; padding-bottom:12px; }
  .rides-stats { flex-direction:column; align-items:flex-end; gap:4px; padding-top:12px; align-self:start; }
  .rides-actions { grid-column:1 / -1; min-width:0; justify-content:flex-start; padding-left:12px; }
}

/* ── Profile: the rider on his stage, the panel beside him (the dialogs' frame, tabs and fields) ── */
.profile { position:fixed; inset:0; display:grid; grid-template-rows:48px minmax(0,1fr); background:#090c11; color:var(--fg); font-family:"Inter",ui-sans-serif,system-ui,sans-serif; overflow:hidden; }
.profile-stage { position:absolute; inset:0; z-index:0; }
.profile-stage canvas { display:block; }
/* Darker behind the panel, so its glass reads over the lit floor. */
.profile-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,8,12,.6) 0%,rgba(6,8,12,.2) 36%,transparent 52%); }
.profile-main { position:relative; z-index:3; display:flex; min-height:0; padding:18px 22px 22px; pointer-events:none; }
.profile-main > * { pointer-events:auto; }
.profile-panel.setup-dialog { width:min(560px,100%); align-self:flex-start; max-height:100%; background:linear-gradient(180deg,rgba(15,19,26,.9),rgba(9,12,17,.93)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
/* The callsign, edited in place as the panel's heading: the title until it is pointed at. */
.profile-name { width:100%; margin:0; padding:0 0 2px; border:0; border-bottom:1px solid transparent; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:border-color 140ms ease; }
.profile-name:hover { border-bottom-color:rgba(255,255,255,.18); }
.profile-name:focus { outline:none; border-bottom-color:var(--accent); }
.profile-signout { margin:22px 0 0; }
/* A ride's page (Your rides → Details): its numbers, the ride over its distance, the power curve, zones. */
.ride-detail.setup-dialog { width:min(980px,100%); }
.ride-detail-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); margin:0; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.ride-detail-stats div { padding:12px 14px; box-shadow:inset -1px -1px 0 rgba(255,255,255,.06); }
.ride-detail-stats dt { font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.ride-detail-stats dd { margin:6px 0 0; font-size:20px; font-weight:800; line-height:1; white-space:nowrap; }
.ride-detail-stats dd small { margin-left:4px; font-size:10px; font-weight:700; color:rgba(139,148,158,.85); }
/* Durability tiles name a duration and a threshold ("5 min · 10 kJ/kg"): a little wider, one line. */
.analysis-durability { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.ride-detail-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:26px 0 10px; font:400 22px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.ride-detail-h span { font-size:11px; letter-spacing:.02em; text-transform:none; color:rgba(230,237,243,.6); text-align:right; }
.ride-detail-graph { border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.015); }
.ride-detail-graph canvas, .ride-detail-curve canvas { display:block; width:100%; touch-action:none; cursor:crosshair; }
.ride-detail-key { display:inline-block; width:14px; height:2px; margin:0 6px 3px 12px; vertical-align:middle; background:var(--accent); }
.ride-detail-key[data-key=best] { background:repeating-linear-gradient(90deg,rgba(139,148,158,.85) 0 4px,transparent 4px 8px); }
.ride-detail-best { display:flex; flex-wrap:wrap; gap:8px 22px; margin:12px 0 0; padding:0; list-style:none; font-size:12px; }
.ride-detail-best span { margin-right:6px; color:rgba(139,148,158,.9); }
.ride-detail-best em { margin-left:6px; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.ride-detail-note { margin:10px 0 0; font-size:12.5px; line-height:1.5; color:rgba(230,237,243,.6); }
.ride-detail-zones { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ride-detail-zones li { display:grid; grid-template-columns:28px 96px minmax(0,1fr) 64px; align-items:center; gap:10px; font-size:12px; }
.ride-detail-zones i { display:block; height:10px; min-width:1px; background:var(--zone); }
.ride-detail-zones b { text-align:right; font-weight:700; }
.ride-detail-zones [data-zone="1"],.ride-zone[data-zone="1"] { --zone:#8b949e; } .ride-detail-zones [data-zone="2"],.ride-zone[data-zone="2"] { --zone:#3a8ad9; } .ride-detail-zones [data-zone="3"],.ride-zone[data-zone="3"] { --zone:#3fb36b; }
.ride-detail-zones [data-zone="4"],.ride-zone[data-zone="4"] { --zone:#f0c93a; } .ride-detail-zones [data-zone="5"],.ride-zone[data-zone="5"] { --zone:#f08a3a; } .ride-detail-zones [data-zone="6"],.ride-zone[data-zone="6"] { --zone:#e5534b; } .ride-detail-zones [data-zone="7"],.ride-zone[data-zone="7"] { --zone:#a371f7; }
/* The HUD's power zone, beside POWER: thick, in the zone's colour (the ride page's). */
.ride-zone { display:inline-block; margin-left:6px; padding:3px 5px 2px; border-radius:3px; background:var(--zone); color:#0d1117; font:800 11px/1 "JetBrains Mono",monospace; letter-spacing:.3px; vertical-align:1px; }
@media (max-width:560px) {
  .ride-detail-h { flex-wrap:wrap; }
  .ride-detail-zones li { grid-template-columns:28px minmax(0,1fr) 56px; }
  .ride-detail-zones li > span:nth-child(2) { display:none; }
}
/* Your fitness's and a ride's page's numbers on top (ui/ScreenParts.tsx): one row in the Rides card's
   cells, each as wide as the rest; the rest closed under them (More: the text buttons' look). The
   ride's chart: a chip a metric over it. */
.ride-hero { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.ride-hero div { min-width:0; padding:14px 16px; }
.ride-hero dt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ride-hero dd { font-size:22px; }
.ride-hero dd small { font-size:11px; }
.ride-detail-curve + .ride-hero { margin-top:10px; }
.ride-more { margin-top:12px; }
.ride-more + .ride-more { margin-top:4px; }
.ride-more > summary { display:inline-flex; align-items:center; gap:8px; }
.ride-more > summary::-webkit-details-marker { display:none; }
.ride-more > summary::after { content:"▸"; transition:transform 140ms ease; }
.ride-more[open] > summary::after { transform:rotate(90deg); }
.ride-more > dl { margin-top:8px; }
/* Ask your rides, last in Your fitness: under the closed rest. */
.ride-more + .ask-rides { margin:22px 0 0; }
.ride-metrics { margin:0 0 10px; }
.ride-metric-short { display:none; }
/* (After the rules above, or they win.) A phone: the numbers two by two (Your fitness's three: two,
   the third across; one alone across), the chips' short names on one line. */
@media (max-width:600px) {
  .ride-hero { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ride-hero div { padding:12px 10px; }
  .ride-hero > div:nth-child(3):last-child, .ride-hero > div:only-child { grid-column:1 / -1; }
  .ride-metric-long { display:none; }
  .ride-metric-short { display:inline; }
}
.ride-history-note { margin:0; font-size:13px; line-height:1.55; color:rgba(230,237,243,.6); }
.profile .rides-day h2 { margin-top:24px; }
/* The panel is narrow: each ride's actions go under its name. */
.profile .rides-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; padding-bottom:12px; }
.profile .rides-stats { flex-direction:column; align-items:flex-end; gap:4px; padding-top:12px; align-self:start; }
.profile .rides-actions { grid-column:1 / -1; min-width:0; justify-content:flex-start; padding-left:12px; }
.profile .rides-empty { margin-top:22px; }
@media (max-width:980px) {
  .profile { display:block; }
  .profile > .op-top { position:relative; z-index:4; height:48px; }
  .profile-stage { position:fixed; }
  .profile-stage::after { background:linear-gradient(180deg,transparent 0%,transparent 34%,rgba(6,8,12,.75) 62%,rgba(6,8,12,.95) 100%); }
  .profile-main { position:absolute; inset:48px 0 0; display:block; overflow-y:auto; overscroll-behavior:contain; padding:40vh 12px 16px; }
  .profile-panel.setup-dialog { height:auto; max-height:none; width:100%; }
  .profile-body.setup-dialog-body { overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .profile-tabs button { letter-spacing:1px; padding-left:4px; padding-right:4px; white-space:nowrap; }
}

/* The keyboard's keys, under the pause menu (the ride shows no key hints). */
/* The map data's credit (mapCredit.ts): in the ride menu as its help line is, on the loading screen at its foot. */
.ride-menu-credit a { font:800 9px/1.6 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.45); text-decoration:none; }
.ride-menu-credit a:hover, .ride-menu-credit a:focus-visible { color:rgba(230,237,243,.75); }
.controller-menu-help + .keyboard-menu-help, .ride-menu-credit + .controller-menu-help { margin-top:8px; padding-top:0; border-top:0; }
.op-loading-credit { display:block; margin-top:18px; font:600 10px/1.4 "JetBrains Mono",monospace; letter-spacing:.06em; color:rgba(230,237,243,.4); text-decoration:none; }
.op-loading-credit:hover, .op-loading-credit:focus-visible { color:rgba(230,237,243,.7); }

/* ── Slanted controls, in Start riding's shape (about 12°) ──────────────────────────────────────
   The frame is drawn on a skewed layer behind the label, so the diagonal sides keep their border
   (a clip-path would cut it off) and the text stays upright. Panels stay square. */
.op-top .op-pill, .op-link, .op-setup-strip>header button { position:relative; isolation:isolate; border:0; background:none; }
.op-top .op-pill::before, .op-link::before, .op-setup-strip>header button::before {
  content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
  transition:border-color 140ms ease, background 140ms ease, filter 140ms ease;
}
.op-top .op-pill:hover::before, .op-link:hover::before, .op-setup-strip>header button:hover::before { border-color:rgba(240,201,58,.6); background:rgba(240,201,58,.07); }
.op-link:hover { background:none; }
.op-setup-strip>header button::before { border-color:rgba(240,201,58,.45); background:rgba(240,201,58,.06); }
/* Sign in: the call to action, filled like Start riding. Signed in, it is a quiet outlined chip. */
.op-top .op-account-chip { padding:7px 18px 6px; color:#14150b; font:400 17px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:.1em; text-decoration:none; filter:none; }
.op-top .op-account-chip::before { border:0; background:linear-gradient(95deg,#f0c93a 0%,#f6d558 55%,#f0c93a 100%); box-shadow:0 6px 18px rgba(240,201,58,.25), inset 0 -2px 0 rgba(20,21,11,.16); }
.op-top .op-account-chip:hover::before { border:0; background:linear-gradient(95deg,#f0c93a 0%,#f6d558 55%,#f0c93a 100%); filter:brightness(1.06); }
.op-top .op-account-chip[data-signed-in=true] { color:rgba(230,237,243,.88); }
.op-top .op-account-chip[data-signed-in=true]::before, .op-top .op-account-chip[data-signed-in=true]:hover::before { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); box-shadow:none; filter:none; }
.op-top .op-account-chip[data-signed-in=true]:hover::before { border-color:rgba(240,201,58,.6); }
.op-top .op-history { padding:5px 11px; }
.op-setup-strip>header button:hover { background:none; }

/* ── Looks: kit and bike presets, and the colours themselves ─────────────────────────────────── */
.look-picker { display:grid; gap:12px; padding:14px 16px 16px; color:var(--fg); background:linear-gradient(180deg,rgba(15,19,26,.86),rgba(9,12,17,.9)); border:1px solid rgba(255,255,255,.09); border-top-color:rgba(240,201,58,.4); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.look-picker > header { display:flex; align-items:center; gap:14px; min-width:0; }
.look-tabs { display:flex; gap:6px; }
.look-tabs button, .look-choice button, .look-custom-toggle, .look-more { position:relative; isolation:isolate; padding:7px 14px 6px; border:0; background:none; color:rgba(230,237,243,.6); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.look-tabs button::before, .look-choice button::before, .look-custom-toggle::before { content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); transition:border-color 140ms ease, background 140ms ease; }
.look-tabs button[aria-selected=true], .look-choice button[aria-pressed=true] { color:#14150b; }
.look-tabs button[aria-selected=true]::before, .look-choice button[aria-pressed=true]::before { border-color:transparent; background:var(--accent); }
.look-tabs button:hover:not([aria-selected=true])::before, .look-choice button:hover:not([aria-pressed=true])::before, .look-custom-toggle:hover::before { border-color:rgba(240,201,58,.6); }
.look-name { flex:1; min-width:0; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.look-custom-toggle { color:rgba(230,237,243,.85); }
/* One row at any width: the swatches shrink rather than wrap. */
.look-swatches { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,46px); justify-content:start; gap:8px; }
.look-swatches button { position:relative; height:30px; padding:0; border:0; background:none; cursor:pointer; }
.look-swatches button i { position:absolute; inset:0; transform:skewX(-12deg); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); transition:transform 140ms ease, border-color 140ms ease; }
.look-swatches button:hover i { border-color:rgba(255,255,255,.5); transform:skewX(-12deg) translateY(-1px); }
.look-swatches button[aria-selected=true] i { border:2px solid var(--accent); box-shadow:0 0 0 2px rgba(240,201,58,.18), inset 0 0 0 1px rgba(0,0,0,.25); }
.look-swatches button:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.look-custom { display:grid; gap:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.look-colours { display:flex; flex-wrap:wrap; gap:10px 16px; }
.look-colour { display:grid; justify-items:center; gap:5px; cursor:pointer; }
.look-colour input { appearance:none; -webkit-appearance:none; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:none; cursor:pointer; }
.look-colour input::-webkit-color-swatch-wrapper { padding:2px; }
.look-colour input::-webkit-color-swatch { border:0; border-radius:50%; }
.look-colour input::-moz-color-swatch { border:0; border-radius:50%; }
.look-colour span { font:700 8.5px/1 "JetBrains Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.look-choice { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.look-choice > span { width:64px; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.look-more { justify-self:start; padding:4px 0; color:rgba(230,237,243,.6); letter-spacing:.12em; }
.look-more:hover { color:var(--accent); }
/* Under the rider on the profile's stage (wide screens): centred on him, clear of the panel. */
.look-in-panel { margin-top:22px; }
.setup-dialog .look-in-panel { padding:14px 0 0; border:0; border-top:1px solid rgba(255,255,255,.08); background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Rider details: weight and FTP side by side; the units sit with the weight. */
/* Bike paint, opened: colours on the left, pattern and finish beside them. */
.look-custom-bike { grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:26px; }
.look-choices { display:grid; gap:10px; }
@media (max-width:640px) { .look-custom-bike { grid-template-columns:1fr; } }

/* Modes (ui/ModePanel.tsx): slanted tabs atop the route's card; the chosen mode's choices under its numbers. */
.op-modes { display:flex; flex-wrap:wrap; gap:6px; }
.op-modes button, .op-mode-chips button, .op-mode-button { position:relative; isolation:isolate; padding:8px 14px 7px; border:0; background:none; color:rgba(230,237,243,.66); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.op-modes button::before, .op-mode-chips button::before, .op-mode-button::before { content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); transition:border-color 140ms ease, background 140ms ease; }
.op-modes button[aria-selected=true], .op-mode-chips button[aria-checked=true] { color:#14150b; }
.op-modes button[aria-selected=true]::before, .op-mode-chips button[aria-checked=true]::before { border-color:transparent; background:var(--accent); }
.op-modes button:hover:not([aria-selected=true])::before, .op-mode-chips button:hover:not([aria-checked=true])::before, .op-mode-button:hover::before { border-color:rgba(240,201,58,.6); }
.op-modes button:focus-visible, .op-mode-chips button:focus-visible, .op-mode-button:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
/* Today's pick moved this chip (ModePanel CoachChoice): it lights up once, the first time a day. */
.op-mode-chips button[data-moved]::before { animation:op-chip-moved 1.4s ease-out 1; }
@keyframes op-chip-moved { 0% { box-shadow:0 0 0 0 rgba(240,201,58,.8); } 100% { box-shadow:0 0 0 9px rgba(240,201,58,0); } }
@media (prefers-reduced-motion: reduce) { .op-mode-chips button[data-moved]::before { animation:none; } }
/* The modes as tiles, each glyph (ModeGlyph.tsx) over its name, in one row beside the card's
   title (phones held upright: three by two under it). Under them the chosen mode's choices keep
   one height, the tallest everyday mode's, so changing mode moves nothing below. */
.op-modes { flex:1 1 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px 12px; padding:2px 6px 0; }
.op-modes button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:64px; padding:10px 4px 9px; font-size:10px; letter-spacing:.1em; }
.op-modes .op-mode-glyph { flex:none; width:21px; height:21px; }
.op-modes button:not([aria-selected=true]) .op-mode-glyph { color:rgba(230,237,243,.82); }
.op-mode { box-sizing:border-box; }
/* The panel fits its mode (minimal, the owner's ask): a mode with nothing to choose (Free ride) is
   its row of modes alone. */
.op-mode:empty { display:none; }
/* The mode card: its number and the tabs on one line, the mode's few choices under them. */
.op-mode-card { clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.op-mode-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:12px 20px; }
.op-mode { display:grid; gap:10px; align-content:start; padding:12px 20px 16px; }
.op-mode-note { margin:0; max-width:640px; font:500 12.5px/1.5 Inter,system-ui,sans-serif; color:rgba(230,237,243,.66); }
.op-mode-chips, .op-mode-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.op-mode-button { color:rgba(230,237,243,.88); }
.op-mode-field { display:flex; align-items:center; gap:12px; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(230,237,243,.55); }
.op-mode-field select { min-width:0; max-width:360px; padding:9px 12px; border:1px solid rgba(255,255,255,.14); border-radius:0; background:rgba(0,0,0,.35); color:var(--fg); font:600 13px/1.2 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; }
.op-mode-field select:focus-visible { outline:none; border-color:var(--accent); }
.op-mode-check { display:inline-flex; align-items:center; gap:8px; font:600 12.5px/1.2 Inter,system-ui,sans-serif; color:rgba(230,237,243,.82); cursor:pointer; }
.op-mode-check input { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; width:16px; height:16px; margin:0; border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.3); cursor:pointer; }
.op-mode-check input:checked { background:var(--accent); border-color:var(--accent); }
.op-mode-check input:checked::after { content:""; width:8px; height:4px; border-left:2px solid #14150b; border-bottom:2px solid #14150b; transform:translateY(-1px) rotate(-45deg); }
@media (max-width:640px) { .op-mode-head, .op-mode { padding-left:14px; padding-right:14px; } .op-modes button { padding:8px 10px 7px; letter-spacing:.1em; } .op-mode-field { flex-wrap:wrap; } .op-mode-field select { max-width:100%; flex:1; } }

/* Rider & bike (ui/RiderDialog.tsx): a header row like the looks' (a name, a toggle on the right),
   then every number in a tile of one size: its name, then its value and unit. */
.rider-settings { display:grid; gap:12px; }
.rider-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rider-head > span:first-child { font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.rider-toggle { display:flex; gap:6px; }
.rider-toggle button { position:relative; isolation:isolate; padding:7px 12px 6px; border:0; background:none; color:rgba(230,237,243,.6); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.rider-toggle button::before { content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); transition:border-color 140ms ease, background 140ms ease; }
.rider-toggle button[aria-pressed=true] { color:#14150b; }
.rider-toggle button[aria-pressed=true]::before { border-color:transparent; background:var(--accent); }
.rider-toggle button:hover:not([aria-pressed=true])::before { border-color:rgba(240,201,58,.6); }
.rider-toggle button:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.rider-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.rider-tile { display:grid; align-content:space-between; gap:10px; min-width:0; min-height:70px; padding:11px 12px 11px; border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.24); cursor:text; transition:border-color 140ms ease; }
.rider-tile:hover { border-color:rgba(255,255,255,.18); }
.rider-tile:focus-within { border-color:var(--accent); }
.rider-tile > span { font:800 9px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.rider-tile > b { display:flex; align-items:baseline; gap:6px; min-width:0; font:700 22px/1 "JetBrains Mono",monospace; font-variant-numeric:tabular-nums; color:var(--fg); }
.rider-tile i { font:700 11px/1 "JetBrains Mono",monospace; font-style:normal; letter-spacing:.06em; color:rgba(139,148,158,.9); }
.rider-tile .bare-input { max-width:100%; height:1em; padding:0; border:0; background:none; color:inherit; font:inherit; line-height:1; outline:none; -moz-appearance:textfield; appearance:textfield; }
.rider-tile .bare-input::-webkit-outer-spin-button, .rider-tile .bare-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rider-tile .bare-input::placeholder { color:rgba(139,148,158,.45); }
.rider-tile-wide .bare-input { width:100%; }
.rider-tile.is-readout { cursor:default; border-color:rgba(240,201,58,.2); background:rgba(240,201,58,.045); }
.rider-tile.is-readout > b { color:var(--accent); }
.rider-tile-two { grid-column:span 2; cursor:default; }
.rider-tile > b.rider-toggle { align-items:center; gap:6px; }
.rider-settings .look-in-panel { margin-top:10px; }
/* In the panel the swatches share its width, edge to edge with the tiles. */
.look-in-panel .look-swatches { grid-auto-columns:minmax(0,1fr); justify-content:stretch; }
@media (max-width:420px) { .rider-tile > b { font-size:19px; } .rider-tile { padding:10px 10px 10px; } }
/* Customise, locked (guests and free accounts: the presets): a lock before the word, and a line on why. */
.look-custom-toggle[data-locked] { display:inline-flex; align-items:center; gap:7px; color:rgba(230,237,243,.55); }
.look-custom-toggle[data-locked] svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.4; }
.look-locked { margin:0; font:500 12px/1.5 Inter,system-ui,sans-serif; color:rgba(230,237,243,.66); }
.look-locked a { color:var(--accent); text-decoration:none; font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; margin-left:6px; }

/* Draw on a map (Custom route): the map large, its search and roads over it, the tools, the numbers
   and the profile under it, in the workshop's type. The dialog widens while it is open. */
.route-workshop[data-tab=draw] { width:min(1080px,100%); }
.route-draw { display:grid; gap:10px; }
.route-draw-map { position:relative; height:clamp(260px,40vh,500px); border:1px solid rgba(255,255,255,.08); background:#0b0e13; overflow:hidden; }
/* Over MapLibre's own .maplibregl-map { position:relative }, which loads after this sheet. */
.route-draw-map > .route-draw-canvas { position:absolute; inset:0; }
.route-draw-canvas .maplibregl-canvas { cursor:crosshair; }
.route-draw-wait { position:absolute; inset:0; display:grid; place-items:center; margin:0; font:800 10px/1.4 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.6); text-align:center; padding:0 24px; }
.route-draw-search { position:absolute; top:10px; left:10px; z-index:2; width:min(300px,calc(100% - 150px)); display:grid; grid-template-columns:minmax(0,1fr) auto; }
.route-draw-search input { appearance:none; -webkit-appearance:none; min-width:0; height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.14); border-right:0; background:rgba(8,10,14,.86); color:var(--fg); font:600 13px/1 "Inter",sans-serif; backdrop-filter:blur(6px); }
.route-draw-search input:focus { outline:none; border-color:var(--accent); }
.route-draw-locate { width:34px; height:34px; border:1px solid rgba(255,255,255,.14); background:rgba(8,10,14,.86); color:var(--accent); font-size:16px; cursor:pointer; }
.route-draw-search ul { grid-column:1/-1; margin:2px 0 0; padding:0; list-style:none; background:rgba(8,10,14,.95); border:1px solid rgba(255,255,255,.12); max-height:240px; overflow:auto; }
.route-draw-search li button { display:grid; gap:3px; width:100%; padding:8px 10px; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:none; color:var(--fg); text-align:left; cursor:pointer; font:600 13px/1.2 "Inter",sans-serif; }
.route-draw-search li button:hover, .route-draw-search li button:focus-visible { background:rgba(240,201,58,.1); outline:none; }
.route-draw-search small { font:800 9px/1.2 "JetBrains Mono",monospace; letter-spacing:1.2px; text-transform:uppercase; color:rgba(139,148,158,.85); }
.route-draw-profile { position:absolute; top:10px; right:10px; display:grid; grid-auto-flow:column; border:1px solid rgba(255,255,255,.14); background:rgba(8,10,14,.86); }
.route-draw-profile button { height:32px; padding:0 12px; border:0; background:none; color:rgba(230,237,243,.55); font:800 10px/1 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; cursor:pointer; }
.route-draw-profile button[aria-checked=true] { color:#14150b; background:var(--accent); }
.route-draw-hint { position:absolute; left:10px; bottom:10px; margin:0; max-width:calc(100% - 70px); padding:6px 9px; background:rgba(8,10,14,.8); font:800 9px/1.3 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:rgba(230,237,243,.75); pointer-events:none; }
.route-draw-pin { width:14px; height:14px; padding:0; border:2px solid #05070b; border-radius:50%; background:#e6edf3; cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.route-draw-pin[data-kind=via] { width:11px; height:11px; }
.route-draw-pin[data-kind=start] { width:16px; height:16px; background:var(--accent); }
.route-draw-pin[data-kind=end] { border-radius:2px; }
.route-draw-pin:active { cursor:grabbing; }
.route-draw-tools { display:flex; flex-wrap:wrap; gap:4px 18px; }
.route-draw-elevation { height:66px; }
.route-draw-elevation .route-elevation-canvas { border-top:0; }
.route-draw-empty { display:grid; place-items:center; height:100%; margin:0; font:800 9px/1.3 "JetBrains Mono",monospace; letter-spacing:1.4px; text-transform:uppercase; color:rgba(139,148,158,.6); }
/* One line kept for what went wrong (a point with no road near it): its room never moves the map. */
.route-draw-status { min-height:1.35em; margin:0; font:600 12px/1.35 "Inter",sans-serif; color:#ff8d7e; }
/* MapLibre's own controls in the cockpit's dark (they ship white). */
.route-draw .maplibregl-ctrl-group { background:rgba(8,10,14,.88); border:1px solid rgba(255,255,255,.14); border-radius:0; box-shadow:none; }
.route-draw .maplibregl-ctrl-group button+button { border-top:1px solid rgba(255,255,255,.1); }
.route-draw .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter:invert(.9); }
.route-draw .maplibregl-ctrl-group button:hover { background:rgba(240,201,58,.12); }
.route-draw .maplibregl-ctrl-attrib, .route-draw .maplibregl-ctrl-attrib.maplibregl-compact { background:rgba(8,10,14,.82); color:rgba(230,237,243,.7); }
.route-draw .maplibregl-ctrl-attrib a { color:rgba(230,237,243,.8); }
.route-draw .maplibregl-ctrl-attrib-button { filter:invert(.9); }
.route-draw .maplibregl-ctrl-attrib { font:500 10px/1.3 "Inter",sans-serif; }
.route-draw[hidden] { display:none; }
/* Phones: the search across the top, the hint and the roads under it; the bottom stays for the
   zoom buttons and the map's credits. */
@media (max-width:640px) {
  .route-draw-map { height:clamp(260px,46vh,420px); }
  .route-draw-search { width:calc(100% - 20px); }
  .route-draw-profile { top:52px; }
  .route-draw-hint { top:52px; bottom:auto; max-width:calc(100% - 170px); }
  /* 16 px: iOS zooms into smaller fields; pins get a finger-sized target around the dot. */
  .route-draw-search input { font-size:16px; }
  .route-draw-pin { position:relative; }
  .route-draw-pin::after { content:""; position:absolute; inset:-14px; }
}
/* Scheduled rides on the Race and Group tabs (EventList): a line each, when · what · who's in, and
   its one button; the shared link's ride marked. */
.op-events { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.op-events li { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:4px 12px; padding:1px 10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.op-events li[data-open=true] { border-color:rgba(240,201,58,.45); }
.op-events li[data-focus] { border-color:rgba(240,201,58,.7); background:rgba(240,201,58,.05); }
.op-event-when { font:800 10px/1.3 "JetBrains Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.op-event-what { min-width:0; overflow:hidden; font:600 12.5px/1.3 Inter,system-ui,sans-serif; color:var(--fg); text-overflow:ellipsis; white-space:nowrap; }
.op-event-what small { font:500 12px/1.3 Inter,system-ui,sans-serif; color:rgba(230,237,243,.55); }
.op-mode-later { margin-left:4px; color:var(--accent); }
.op-mode-pair { gap:8px 22px; }
.op-events .op-mode-button { padding:5px 12px 4px; }
.op-event-picker input[type=datetime-local] { padding:7px 10px; border:1px solid rgba(255,255,255,.14); border-radius:0; background:rgba(0,0,0,.35); color:var(--fg); font:600 12.5px/1.2 Inter,system-ui,sans-serif; color-scheme:dark; }
@media (max-width:600px) { .op-events li { grid-template-columns:minmax(0,1fr) auto auto; } .op-event-when { grid-column:1 / -1; } }

/* Touch screens without a trainer: PEDAL (toggle), ATTACK and BRAKE (held), in the right thumb's
   reach above the grade strip. No callout, selection or double-tap zoom on a held button. */
.touch-controls { position:absolute; right:12px; bottom:150px; display:flex; gap:10px; align-items:center; z-index:4; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.touch-controls button { display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.18); background:rgba(14,17,23,.72); color:#e6edf3; font:400 15px/1 "Bebas Neue","Inter",sans-serif; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.touch-brake, .touch-attack { width:58px; height:58px; border-radius:50%; }
.touch-controls .touch-pedal { width:84px; height:84px; border-radius:50%; border:2px solid var(--accent); color:var(--accent); font-size:19px; }
.touch-controls .touch-pedal[aria-pressed=true] { background:var(--accent); color:#14150b; box-shadow:0 0 0 6px rgba(240,201,58,.22), 0 10px 26px rgba(240,201,58,.25); font-size:16px; }
.touch-controls button[data-held] { background:rgba(240,201,58,.9); color:#14150b; border-color:var(--accent); }
.touch-brake[data-held] { background:rgba(255,100,100,.88); border-color:#ff6464; color:#1a0b0b; }
/* Phones held sideways: the row in the bottom-right corner (the thumb's), the minimap smaller
   above it, both clear of the riders list and the grade strip. */
@media (min-width:601px) and (max-height:500px) {
  .touch-controls { right:10px; bottom:10px; gap:8px; }
  .touch-controls .touch-pedal { width:64px; height:64px; font-size:17px; }
  .touch-controls .touch-brake, .touch-controls .touch-attack { width:48px; height:48px; font-size:13px; }
  .hud:has(.touch-controls) .hud-minimap { bottom:84px; width:100px; height:100px; }
  .hud:has(.touch-controls) .hud-minimap canvas { width:100px; height:100px; }
}
/* Short phones upright (an iPhone SE in Safari): the minimap smaller and the riders list up under
   it, so all six of its rows stay clear of the controls. */
@media (max-width:600px) and (max-height:640px) {
  .hud:has(.touch-controls) .hud-minimap { width:100px; height:100px; }
  .hud:has(.touch-controls) .hud-minimap canvas { width:100px; height:100px; }
  .hud:has(.touch-controls) .hud-nearby { top:176px; }
  .touch-controls .touch-pedal { width:72px; height:72px; font-size:17px; }
  .touch-controls .touch-brake, .touch-controls .touch-attack { width:52px; height:52px; }
}

/* Touch screens. Taps act at once (no double-tap zoom); the ride view takes no page gestures (a
   pinch zoomed the whole page); text fields are 16px, below which iOS zooms in on focus. */
button, a, summary, [role=button], label { touch-action:manipulation; }
.play-root canvas[data-engine] { touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea,
  .setup-dialog select,.setup-dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not(.bare-input) { font-size:16px; }
  .op-launch-key { display:none; }
}
/* Phones: the launch button stays at the bottom of the screen while the page scrolls; the status
   strip keeps the cells that fit. */
@media (max-width:720px) {
  .op-shell-landing .op-launch { position:sticky; bottom:8px; z-index:3; }
  .op-bottom-cell:nth-child(n+4) { display:none; }
}
@media (min-width:601px) and (max-height:500px) { .touch-controls .touch-pedal[aria-pressed=true] { font-size:13px; } }

/* A card with a cut corner has its corner bracket in the cut: the yellow diagonal, where the
   bracket's L (now clipped) left two yellow dots at the ends of the diagonal. */
.op-hero.op-card-bracket::after, .op-mode-card.op-card-bracket::after { display: none; }

/* Cut corners keep their outline. A clip-path cuts the border off the corner, so the diagonal is
   drawn back in, the dialog's way: one line in the corner square, in the element's border colour
   (--cut-line, which hover changes with the border). */
.op-hero.op-card, .op-mode-card.op-card, .op-loading-content, .custom-route-entry, .route-complete, .account-google, .profile-panel.setup-dialog {
  --cut-diag: linear-gradient(to top left, transparent calc(50% - 1.1px), var(--cut-line) calc(50% - 1.1px), var(--cut-line) calc(50% - .1px), transparent calc(50% - .1px));
}
.op-hero.op-card { --cut-line: rgba(240,201,58,.55); background: var(--cut-diag) right bottom / 20px 20px no-repeat, linear-gradient(180deg, rgba(8,10,16,.42) 0%, rgba(8,10,16,.68) 100%); }
.op-mode-card.op-card { --cut-line: rgba(240,201,58,.55); background: var(--cut-diag) right bottom / 14px 14px no-repeat, linear-gradient(180deg, rgba(8,10,16,.42) 0%, rgba(8,10,16,.68) 100%); }
.op-loading-content { --cut-line: rgba(255,255,255,.07); background: var(--cut-diag) right bottom / 18px 18px no-repeat, linear-gradient(180deg, rgba(10,13,20,.5) 0%, rgba(10,13,20,.72) 100%); }
.custom-route-entry { --cut-line: rgba(240,201,58,.3); background: var(--cut-diag) right bottom / 10px 10px no-repeat, linear-gradient(90deg, rgba(240,201,58,.11), rgba(240,201,58,.02)); }
.custom-route-entry:hover { --cut-line: var(--accent); background: var(--cut-diag) right bottom / 10px 10px no-repeat, linear-gradient(90deg, rgba(240,201,58,.18), rgba(240,201,58,.04)); }
.route-complete { --cut-line: rgba(255,255,255,.08); background: var(--cut-diag) right bottom / 18px 18px no-repeat, linear-gradient(180deg, rgba(15,19,26,.96), rgba(9,12,17,.96)); }
.account-google { --cut-line: rgba(230,237,243,.32); background: var(--cut-diag) right bottom / 9px 9px no-repeat, rgba(255,255,255,.04); }
.account-google:hover { --cut-line: var(--accent); }
.profile-panel.setup-dialog { --cut-line: rgba(255,255,255,.1); background: var(--cut-diag) right bottom / 18px 18px no-repeat, linear-gradient(180deg, rgba(15,19,26,.9), rgba(9,12,17,.93)); }

/* ═══ Phones and tablets. Every rule below sits in a touch-only or phone-size query, so desktop
   layouts are untouched (a fingerprint of every element's box on the desktop screens checks it). */

/* Touch screens: controls a finger can hit, about 40 px (Apple and Google ask 44 / 48 dp). */
@media (pointer: coarse) {
  .op-top .op-pill { min-height: 36px; min-width: 40px; justify-content: center; }
  .op-rail-all, .op-setup-strip header button { min-height: 36px; padding-left: 8px; padding-right: 8px; }
  .op-modes button, .op-mode-chips button, .op-mode-button { min-height: 40px; }
  .rider-toggle button, .look-tabs button, .look-custom-toggle, .onboard-levels button, .route-draw-profile button { min-height: 40px; }
  .onboard-unit button { min-height: 36px; min-width: 44px; }
  .look-swatches button { min-width: 40px; min-height: 40px; }
  .route-draw-tools .setup-text-button, .setup-dialog-footer .setup-text-button, .bluetooth-unavailable .setup-text-button { min-height: 40px; padding-left: 8px; padding-right: 8px; }
  .rides-continue { min-height: 40px; }
  .route-draw-locate { width: 40px; height: 40px; }
  .maplibregl-ctrl.maplibregl-ctrl-group button { width: 40px; height: 40px; }
  .profile-name.bare-input { min-height: 40px; }
  .bare-input:not(.profile-name) { min-height: 32px; }
  .op-brand { display: inline-flex; align-items: center; min-height: 40px; }
  .op-mode-field select { min-height: 40px; }
  .op-mode-check { min-height: 40px; }
  /* Keyboard hints mean nothing to a finger. */
  .op-rail-foot { display: none; }
}

/* Phones: the home page as a phone layout, not the desktop one stacked. Solid panels (text over
   the moving pack was hard to read, and a blur behind each panel cost the phone's GPU every frame),
   the route in one compact card, every mode in sight, the routes in the page's own
   scroll (a list that scrolls inside a page that scrolls fights the thumb). Phones held sideways
   (touch, under 500 px tall) get it too, the launch button kept on screen. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .op-shell.op-shell-landing { grid-template-rows: 44px 1fr; }
  .op-shell-landing .op-launch { position: sticky; bottom: 8px; z-index: 3; }
  .op-shell-landing .op-bottom { display: none; }
  .op-shell-landing .op-card { --card-fill: linear-gradient(180deg, rgba(10,12,18,.9), rgba(8,10,16,.95)); background: var(--card-fill); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .op-shell-landing .op-hero.op-card { background: var(--cut-diag) right bottom / 20px 20px no-repeat, var(--card-fill); }
  .op-shell-landing .op-mode-card.op-card { background: var(--cut-diag) right bottom / 14px 14px no-repeat, var(--card-fill); }
  .op-shell-landing .op-hero { padding: 16px 16px 12px; }
  .op-shell-landing .op-display { font-size: 46px; }
  .op-shell-landing .op-track-preview { height: 104px; }
  .op-shell-landing .op-hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
  .op-shell-landing .op-hero-meta .op-meter { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.06); padding: 10px 12px; }
  .op-shell-landing .op-hero-meta .op-meter:first-child { padding-left: 0; }
  .op-shell-landing .op-hero-meta .op-meter:nth-child(3) { border-right: 0; padding-right: 0; }
  .op-shell-landing .op-hero-meta .op-meter:nth-child(n+4) { display: none; }
  .op-shell-landing .op-meter-label { font-size: 10px; letter-spacing: 1.8px; }
  .op-shell-landing .op-secondary-row .op-link { min-height: 44px; }
  /* Every mode in sight, a thumb tall: three by two upright, one row of six sideways. A mode's
     choices sit in one row of equal chips (a long one wraps inside its chip), so the choices of
     every mode fit the one height kept for them. */
  .op-shell-landing .op-modes { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-shell-landing .op-modes button { min-height: 58px; padding: 9px 4px 8px; letter-spacing: .08em; }
  .op-shell-landing .op-modes .op-mode-glyph { width: 20px; height: 20px; }
  .op-shell-landing .op-mode-chips { flex-wrap: nowrap; gap: 6px; }
  .op-shell-landing .op-mode-pair { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .op-shell-landing .op-mode-chips button[role=radio] { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 5px 3px; white-space: normal; line-height: 1.2; letter-spacing: .06em; text-align: center; }
  .op-shell-landing .op-mode-chips .op-mode-later { flex: none; }
  /* A mode's choices never widen its card; the workouts' seven kinds of work sit four to a row. */
  .op-shell-landing .op-mode { grid-template-columns: minmax(0, 1fr); }
  .op-shell-landing .op-mode-row:has(.op-mode-kinds) { display: block; }
  .op-shell-landing .op-mode-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .op-shell-landing .op-mode-row:has(.op-mode-kinds) .op-mode-later { margin: 10px 0 0 4px; }
  .op-shell-landing .op-mode { padding-top: 12px; padding-bottom: 14px; }
  .op-shell-landing .op-mode-note { font-size: 12.5px; line-height: 1.45; }
  @media (max-width: 360px) { .op-shell-landing .op-modes button { font-size: 9.5px; letter-spacing: .03em; } }
  .op-shell-landing .op-rail { max-height: none; }
  .op-shell-landing .op-rail-list { max-height: none; overflow: visible; }
  .op-shell-landing .op-rail-row { min-height: 56px; }
}
@media (pointer: coarse) and (max-height: 500px) {
  .op-shell.op-shell-landing { grid-template-rows: 48px 1fr; }
  .op-shell-landing .op-track-preview { display: none; }
  .op-shell-landing .op-display { font-size: 38px; }
  .op-shell-landing .op-modes { flex: 1 1 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .op-shell-landing .op-modes button { min-height: 52px; }
}

/* The Bluetooth device chooser in the OpenPack app (src/client/native/chooser.ts): what Chrome's
   own chooser is in a browser, in the setup dialog's look, above every other dialog. */
.native-chooser-backdrop { z-index:1000; }
.native-chooser { width:min(440px,100%); }
.native-chooser-status { margin:0 0 14px; color:rgba(230,237,243,.66); font-size:12px; }
.native-chooser-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.native-chooser-list button { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:52px; padding:12px 14px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.3); color:var(--fg); font:600 14px/1.25 "Inter",system-ui,sans-serif; text-align:left; cursor:pointer; transition:border-color 140ms ease; }
.native-chooser-list button:hover, .native-chooser-list button:active { border-color:var(--accent); }
.native-chooser-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.native-chooser-signal { flex:none; display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.native-chooser-signal i { width:3px; background:rgba(230,237,243,.22); }
.native-chooser-signal i:nth-child(1) { height:4px; } .native-chooser-signal i:nth-child(2) { height:7px; } .native-chooser-signal i:nth-child(3) { height:10px; } .native-chooser-signal i:nth-child(4) { height:14px; }
.native-chooser-signal[data-bars="1"] i:nth-child(-n+1), .native-chooser-signal[data-bars="2"] i:nth-child(-n+2), .native-chooser-signal[data-bars="3"] i:nth-child(-n+3), .native-chooser-signal[data-bars="4"] i { background:var(--accent); }

/* A signed-in rider's ride analysis (RideAnalysis.tsx) and fitness (FitnessPanel.tsx), in the ride
   page's look. The energy bars: what went in and what went out, the same total both ways. */
.analysis-flow { display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px 12px; align-items:center; margin:0 0 14px; }
.analysis-flow-label { font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.analysis-flow-bar { display:flex; height:14px; overflow:hidden; background:rgba(255,255,255,.04); }
.analysis-flow-bar i { display:block; height:100%; min-width:2px; background:var(--part); box-shadow:inset -1px 0 0 rgba(8,10,16,.75); }
.analysis-flow-legend { grid-column:2; display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0; list-style:none; font-size:11px; color:rgba(230,237,243,.72); }
.analysis-flow-legend li { display:flex; align-items:baseline; gap:6px; }
.analysis-flow-legend i { width:8px; height:8px; align-self:center; background:var(--part); }
.analysis-flow-legend b { font-weight:800; color:var(--fg); }
.analysis-flow-legend b small { margin-left:2px; font-size:9px; color:rgba(139,148,158,.85); }
.analysis-flow-legend span { font-size:10px; color:rgba(139,148,158,.85); }
.analysis-flow [data-part=legs] { --part:#f0c93a; } .analysis-flow [data-part=descents] { --part:#8fd8a5; } .analysis-flow [data-part=carried] { --part:#6fd3c4; }
.analysis-flow [data-part=air] { --part:#9ab7ff; } .analysis-flow [data-part=tyres] { --part:#8fa3b8; } .analysis-flow [data-part=climbing] { --part:#e8a54b; }
.analysis-flow [data-part=chain] { --part:#6b7785; } .analysis-flow [data-part=speed] { --part:#6fd3c4; }
.analysis-flow [data-part=other] { --part:repeating-linear-gradient(135deg,rgba(139,148,158,.55) 0 3px,rgba(255,255,255,.04) 3px 6px); }
.analysis-draft b { color:var(--fg); }
.analysis-climbs { width:100%; border-collapse:collapse; font-size:12px; }
.analysis-climbs th { padding:0 8px 8px 0; text-align:left; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(139,148,158,.9); }
.analysis-climbs td { padding:8px 8px 8px 0; border-top:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.analysis-climbs th:not(:first-child), .analysis-climbs td:not(:first-child) { text-align:right; }
.analysis-cat { display:inline-block; margin-right:6px; padding:2px 6px 1px; background:rgba(232,165,75,.16); color:#e8a54b; font-size:9px; font-weight:800; letter-spacing:.14em; }
.analysis-quality { font-size:10px; letter-spacing:.04em; color:rgba(139,148,158,.8); }
.ride-detail-key[data-key=fatigue] { background:#ff7a6b; }
.ride-detail-key[data-key=form] { height:8px; background:linear-gradient(90deg,rgba(143,216,165,.55) 50%,rgba(255,122,107,.45) 50%); }
.ride-detail-key[data-key=model] { background:repeating-linear-gradient(90deg,rgba(195,155,255,.9) 0 2px,transparent 2px 5px); }
/* A ride's analysis: what stood out (rideStandouts.ts), above its numbers. */
.analysis-standouts { display:grid; gap:6px; margin:0 0 14px; padding:0; list-style:none; }
.analysis-standouts li { position:relative; padding-left:16px; font-size:14px; line-height:1.45; color:rgba(230,237,243,.92); }
.analysis-standouts li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--accent); }
.analysis-change { margin-top:14px; }
.fitness-ftp .setup-text-button, .fitness-hrmax .setup-text-button { padding:0; color:var(--accent); }
.week-goal-bar { height:6px; margin:4px 0 8px; background:rgba(255,255,255,.08); transform:skewX(-12deg); overflow:hidden; }
.week-goal-bar i { display:block; height:100%; background:var(--accent); }
.week-goal-chips { margin:8px 0 4px; }
/* Ask your rides (AskRides.tsx): the question, then the number and how it was read. */
.ask-rides { margin:0 0 18px; }
.ask-rides .account-add { margin-top:0; }
/* A question in words, not a code: the body's face. */
.ask-rides .account-add input { font-family:inherit !important; letter-spacing:normal; }
.ask-answer { margin-top:12px; }
.ask-answer strong { display:block; font-size:30px; font-weight:800; line-height:1; }
.ask-answer strong small { margin-left:6px; font-size:12px; font-weight:700; color:rgba(139,148,158,.85); }
.ask-read { margin:6px 0 0; font-size:12.5px; line-height:1.5; color:rgba(230,237,243,.7); }
.ask-read > span { margin-right:8px; padding:1px 5px; border:1px solid rgba(255,255,255,.14); font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(139,148,158,.9); }
@media (max-width:720px) {
  .analysis-climbs { font-size:11px; } .analysis-climbs td, .analysis-climbs th { padding-right:6px; }
  .analysis-flow { grid-template-columns:28px minmax(0,1fr); }
}

/* Laptop screens under 820 px tall: the route's card tightens (smaller title and track) so the mode
   card above it and the card itself both stay on screen. */
@media (min-width: 721px) and (max-height: 820px) {
  .op-hero { padding: 16px 22px 16px; }
  .op-display { font-size: clamp(44px, 5.6vw, 82px); margin-bottom: 8px; }
  .op-track-preview { height: 92px; margin-bottom: 10px; }
  .op-hero-meta { margin-bottom: 10px; }
}
@media (min-width: 721px) and (max-height: 760px) { .op-display { font-size: clamp(44px, 5vw, 64px); } }

/* ── The mode strip (the owner's, 2026-10-04): its cards alone, leaning as they do ──────────────────
   The frame (background, borders, blur, shadow) is a layer skewed 12° like the cards, inside the
   column's width: its lower left corner over the route card's left edge, its upper right over its
   right edge (the strip is always 88 px tall: 64 px cards and 12 px round them, so the lean is
   88 × tan 12° ≈ 18.7 px, half of it at each side). Its sides run parallel to the cards', as far from
   them as they are apart (12 px). The two-column layout only: stacked full width (≤ 1080 px) it
   stays square. */
@media (min-width: 1081px) {
  .op-card.op-slant {
    background: none; box-shadow: none; clip-path: none; isolation: isolate; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .op-card.op-slant::before {
    content: ""; display: block; position: absolute; inset: 0 9.35px; width: auto; height: auto; z-index: -1;
    transform: skewX(-12deg); pointer-events: none;
    background: linear-gradient(180deg, rgba(8,10,16,0.42) 0%, rgba(8,10,16,0.68) 100%);
    border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(240, 201, 58, 0.32);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }
  .op-card.op-slant::after { display: none; }
  .op-mode-card.op-slant .op-mode-head { padding: 12px 21.35px; }
  .op-mode-card.op-slant .op-modes { padding: 0; }
}

/* The workout's word in the middle of the screen (WorkoutCue, workoutCue.ts): big, bare type over the
   world like the segment banner, in the tone of what it asks (go: the accent; easy: green; off: the
   off-target colour; the countdown, bigger). */
.hud-workout-cue { position:fixed; top:22%; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; align-items:center; gap:6px; width:max-content; max-width:min(90vw,900px); pointer-events:none; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.5); animation:hud-cue-in 260ms cubic-bezier(.22,.61,.36,1);
  /* In the HUD's card (the grade card's), so it reads over any sky or road. */
  padding:14px 24px 13px; background:rgba(14,17,23,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid #1f242c; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.hud-workout-cue strong { font:400 64px/1 "Bebas Neue","Inter",system-ui,sans-serif; letter-spacing:2px; color:var(--fg); }
.hud-workout-cue span { font:800 14px/1.2 "JetBrains Mono",monospace; letter-spacing:1.6px; text-transform:uppercase; color:rgba(230,237,243,.85); }
.hud-workout-cue[data-tone=go] strong { color:var(--accent); }
.hud-workout-cue[data-tone=easy] strong { color:#7fe0a6; }
.hud-workout-cue[data-tone=off] strong { color:#9ec5ff; }
.hud-workout-cue[data-tone=count] strong { font-size:120px; color:var(--accent); }
.hud-workout-cue[data-tone=info] strong { font:700 26px/1.25 Inter,system-ui,sans-serif; letter-spacing:0; }
@keyframes hud-cue-in { from { opacity:0; transform:translate(-50%,8px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@media (max-width:720px) { .hud-workout-cue { top:50%; } .hud:has(.hud-workout) .hud-segment-banner { bottom:190px; } .hud-workout-cue strong { font-size:38px; letter-spacing:1px; } .hud-workout-cue span { font-size:12px; letter-spacing:1px; } .hud-workout-cue[data-tone=count] strong { font-size:84px; } .hud-workout-cue[data-tone=info] strong { font-size:19px; } .workout-now strong { font-size:28px; } .workout-now div:first-child strong { font-size:36px; } }

/* Screen-reader-only words (a cue said once, in full): in the page, out of its look. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* A rider row reached by keys: an accent outline (the green tint alone hardly shows on the HUD). */
button.hud-nearby-row:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; }
/* Reduced motion asked for: no sweeps, pulses or slides; everything as it ends up. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }