/* Drive mode — additions on top of viewer.css's shared tokens/layout. */

.hidden {
  display: none !important;
}

.drive-stats {
  margin-top: 0.3rem;
}

/* Matches the separators above it (Views/site-picker, site-picker/sun
   position) — same border-top + spacing rhythm, overriding viewer.css's
   plain margin-top for this context. */
.scenario-panel .panel-site .drive-stats {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}

.scenario-panel .panel-site .vehicle-picker {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  position: relative;
}

.scenario-panel .panel-site .vehicle-menu li {
  grid-template-columns: 1fr;
}

.scenario-panel .panel-site .vehicle-menu .name {
  margin: 0;
}

.scenario-panel .panel-site .vehicle-menu .sub {
  margin: 0.1rem 0 0;
}

.drive-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.drive-speed {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.drive-fps {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.drive-stats-meta {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.drive-hint-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.4rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  width: fit-content;
  font-size: 0.74rem;
  color: var(--muted);
  pointer-events: none;
}

.drive-hint-bar strong {
  color: var(--ink);
  font-weight: 600;
}

/* touch controls (only injected by core/input.js on coarse-pointer devices) */
#drive-touch {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#drive-touch .stick {
  position: absolute;
  bottom: 1.5rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  pointer-events: auto;
  touch-action: none;
}

#drive-touch .stick.left { left: 1.25rem; }

#drive-touch .stick span {
  position: absolute;
  top: -1.2rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

#drive-touch .stick .nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(232, 230, 225, 0.35);
  transition: transform 0.02s linear;
}

#drive-touch .tbtns {
  position: absolute;
  right: 1.25rem;
  bottom: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: auto;
}

#drive-touch .tb {
  padding: 0.4rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

#drive-touch .tb.on {
  background: var(--accent);
  color: #14110a;
}

body.drive-touch-controls .drive-hint-bar {
  display: none;
}

.scenario-panel .panel-site .drive-sun-panel,
.scenario-panel .panel-site .drive-nav-panel {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.drive-sun-panel.hidden { display: none; }

/* Tab bar (Navigate / Sun) in the mobile top-left panel — mobile-only chrome
   (hidden on desktop below); tapping a tab shows its panel and hides the
   other, tapping the active tab again closes it (main.js). Reuses the same
   segmented-button look as the sun panel's own Manual/Date sub-tabs. */
.drive-panel-tabs {
  display: flex; gap: 0.3rem; margin: 0 0 0.45rem;
}
.drive-panel-tab {
  flex: 1 1 0; padding: 0.32rem 0.4rem;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 600 0.62rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
}
.drive-panel-tab:hover {
  border-color: rgba(196, 165, 116, 0.35); color: var(--ink);
}
.drive-panel-tab[aria-selected="true"] {
  border-color: var(--accent); background: rgba(196, 165, 116, 0.1); color: var(--accent);
}

/* Tab-driven panels default closed on mobile (JS adds .is-active for
   whichever one is selected); on desktop there's no tab bar at all, so
   these fall back to plain block display — controlled solely by the
   .hidden "site not loaded yet" gating main.js already applies, same as
   before. See the body.drive-touch-controls / body:not(...) rules below
   for the platform split. */

.drive-nav-links {
  display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.45rem;
}
.drive-nav-link {
  display: block; padding: 0.38rem 0.5rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 600 0.68rem var(--font-body);
  letter-spacing: 0.03em; text-decoration: none; text-align: center;
}
.drive-nav-link:hover, .drive-nav-link:focus-visible {
  border-color: var(--accent); color: var(--accent);
}

/* Desktop: no tab bar, Navigate never shows (the full nav above already
   covers it), Sun position always shows (plain block display, same as
   before the tabs existed). */
body:not(.drive-touch-controls) .drive-panel-tabs,
body:not(.drive-touch-controls) .drive-nav-panel {
  display: none;
}

/* Mobile: tab panels start closed and only show once their tab is active. */
body.drive-touch-controls .drive-tab-panel {
  display: none;
}
body.drive-touch-controls .drive-tab-panel.is-active {
  display: block;
}

.drive-sun-mode {
  display: flex; gap: 0.3rem; margin: 0 0 0.55rem;
}
.drive-sun-mode-btn {
  flex: 1 1 0; padding: 0.3rem 0.4rem;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 600 0.62rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
}
.drive-sun-mode-btn:hover {
  border-color: rgba(196, 165, 116, 0.35); color: var(--ink);
}
.drive-sun-mode-btn.is-active {
  border-color: var(--accent); background: rgba(196, 165, 116, 0.1); color: var(--accent);
  cursor: default;
}
.drive-sun-mode-panel.hidden { display: none; }

.drive-sun-date-row {
  display: flex; gap: 0.35rem;
}
.drive-sun-date {
  flex: 1 1 auto; min-width: 0;
  padding: 0.3rem 0.35rem;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: 0.68rem;
  color-scheme: dark;
}
.drive-sun-date:hover, .drive-sun-date:focus {
  border-color: var(--accent); outline: none;
}
.drive-sun-date-apply {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--accent); border-radius: 0;
  background: rgba(196, 165, 116, 0.12); color: var(--accent);
  font: 600 0.65rem var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.drive-sun-date-apply:hover {
  background: rgba(196, 165, 116, 0.22);
}
.drive-sun-date-apply:active {
  background: rgba(196, 165, 116, 0.32);
}
.drive-sun-date-apply:disabled {
  border-color: var(--line); background: transparent; color: var(--muted);
  cursor: default;
}
.drive-sun-date-readout {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
}
.drive-sun-row {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--ink); font-size: 0.72rem;
}
.drive-sun-row:not(:first-of-type) { margin-top: 0.5rem; }
.drive-sun-val {
  color: var(--accent); font-variant-numeric: tabular-nums;
}
#drive-sun-az, #drive-sun-el {
  display: block; width: 100%; margin: 0.25rem 0 0;
  accent-color: var(--accent);
}

.drive-map-panel {
  position: absolute; z-index: 4; top: 1rem; right: 1rem;
  width: min(256px, calc(100vw - 2rem)); padding: 0.6rem;
  background: rgba(7, 10, 14, 0.88); border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  color-scheme: dark;
}
.drive-map-close {
  display: none; position: absolute; z-index: 2; top: .3rem; right: .35rem;
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 3px;
  background: rgba(7,10,14,.92); color: var(--ink); font: 1.35rem/1 var(--font-body); cursor: pointer;
}
.drive-map-close:hover { border-color: var(--accent); color: var(--accent); }
.drive-map-title, .drive-map-readout {
  display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.65rem;
}
.drive-map-title { margin-bottom: 0.45rem; }
.drive-map-layer-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.drive-map-layer {
  display: block; width: 100%; margin: 0;
  padding: 0.18rem 1.35rem 0.18rem 0.35rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: #12151a; color: var(--ink);
  font: 600 0.65rem var(--font-body); letter-spacing: 0.02em;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  color-scheme: dark;
}
.drive-map-layer option {
  background-color: #12151a;
  color: #e8e6e1;
}
.drive-map-layer-wrap::after {
  content: ""; position: absolute; right: 0.45rem; top: 50%;
  width: 0.32rem; height: 0.32rem; margin-top: -0.22rem;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); pointer-events: none;
}
.drive-map-layer:focus { outline: 1px solid var(--accent); }
#drive-map-scale {
  flex: 0 0 auto; letter-spacing: 0.06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.drive-map-legend { margin: 0 0 0.4rem; }
.drive-map-legend[hidden] { display: none; }
.drive-map-legend .legend-bar { height: 0.38rem; }
.drive-map-legend .legend-labels { margin-top: 0.15rem; font-size: 0.58rem; }
#drive-minimap { display: block; width: 100%; aspect-ratio: 1; background: #090b0e; cursor: pointer; touch-action: none; }
.drive-map-panel.travel-open #drive-minimap { cursor: grab; }
.drive-map-panel.travel-open #drive-minimap.panning { cursor: grabbing; }
#drive-minimap.armed { outline: 2px solid var(--accent); outline-offset: -2px; }
.drive-map-panel.travel-open #drive-minimap.armed { cursor: crosshair; }
.drive-map-panel.travel-open #drive-minimap.armed.panning { cursor: grabbing; }
.drive-map-readout {
  margin-top: 0.45rem; white-space: nowrap; letter-spacing: 0; text-transform: none;
  overflow: hidden; text-overflow: ellipsis;
}
.drive-map-dash.in-panel { font-size: 0.65rem; }
.drive-fast-travel {
  display: none; width: 100%; margin-top: 0.5rem; padding: 0.42rem 0.6rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(255,255,255,.04); color: var(--ink);
  font: 600 .7rem var(--font-body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.drive-fast-travel:hover, .drive-fast-travel.active { border-color: var(--accent); color: var(--accent); }
.drive-map-panel.travel-open .drive-fast-travel { display: block; }

/* Ambient — Play/Pause + volume, same panel language as sun / fast travel. */
.scenario-panel .panel-site .drive-audio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.scenario-panel .panel-site .drive-audio-toggle {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: 600 0.62rem/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  line-height: 1;
}
.scenario-panel .panel-site .drive-audio-toggle > .drive-audio-glyph {
  display: block;
  line-height: 1;
  /* Unicode ▶/⏸ metrics sit low-right in most fonts */
  transform: translate(-0.06em, -0.08em);
}
.scenario-panel .panel-site .drive-audio-toggle:not(.is-playing) > .drive-audio-glyph {
  transform: translate(-0.02em, -0.08em);
}
.scenario-panel .panel-site .drive-audio-toggle.is-playing {
  border-color: var(--accent);
  background: rgba(196, 165, 116, 0.1);
  color: var(--accent);
}
.scenario-panel .panel-site .drive-audio-toggle.is-playing > .drive-audio-glyph {
  transform: translate(-0.08em, -0.1em);
}
.scenario-panel .panel-site .drive-audio-toggle:hover,
.scenario-panel .panel-site .drive-audio-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.scenario-panel .panel-site .drive-audio-vol {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scenario-panel .panel-site .drive-audio-vol input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: var(--accent);
}
@media (max-width: 700px) {
  .drive-map-panel { width: 170px; top: auto; bottom: 4.4rem; }
.drive-map-title, .drive-map-readout, .drive-map-dash.in-panel { font-size: .56rem; }
}
.drive-map-panel.travel-open {
  position: fixed; top: 50%; right: auto; left: 50%; bottom: auto;
  /* Nearly the whole window: the square map is as wide as fits the width, or the height minus the panel's
     title, legend, readout and button rows (~11rem). */
  width: min(96vw, calc(100dvh - 11.5rem), 1800px); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.62);
}
.drive-map-panel.travel-open .drive-map-title { padding-right: 2.2rem; }
.drive-map-panel.travel-open .drive-map-close { display: block; }

/* Full mobile Drive mode. Input injects this UI only for a coarse pointer or
   touch-capable device, so desktop mouse/keyboard layout remains unchanged. */
body.drive-touch-controls {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

body.drive-touch-controls #drive-touch {
  --stick-size: clamp(106px, 29vw, 128px);
  --edge: max(0.75rem, env(safe-area-inset-left));
}

body.drive-touch-controls #drive-touch .stick {
  bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem);
  width: var(--stick-size);
  height: var(--stick-size);
  border: 1px solid rgba(188, 226, 234, 0.25);
  background:
    radial-gradient(circle at center, rgba(111, 227, 245, 0.06) 0 31%, transparent 32%),
    rgba(5, 9, 12, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 8px 30px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(5px);
}

body.drive-touch-controls #drive-touch .stick.left {
  left: var(--edge);
}

body.drive-touch-controls #drive-touch .stick span {
  top: -1.35rem;
  color: rgba(202, 221, 225, 0.78);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.16em;
}

body.drive-touch-controls #drive-touch .stick .nub {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(111, 227, 245, 0.42);
  background: rgba(82, 178, 192, 0.34);
  box-shadow: 0 0 18px rgba(65, 194, 215, 0.1);
  transition: none;
}

body.drive-touch-controls #drive-touch .mobile-actions {
  position: absolute;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  pointer-events: auto;
}

body.drive-touch-controls #drive-touch .tb {
  box-sizing: border-box;
  width: 78px;
  min-height: 36px;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(188, 226, 234, 0.23);
  border-radius: 2px;
  background: rgba(7, 11, 14, 0.68);
  color: rgba(231, 238, 239, 0.82);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body.drive-touch-controls #drive-touch .tb.on {
  border-color: var(--accent);
  background: rgba(111, 227, 245, 0.75);
  color: #071014;
}

body.drive-touch-controls .hud.top {
  top: max(0.55rem, env(safe-area-inset-top));
  left: max(0.55rem, env(safe-area-inset-left));
  max-width: min(14.5rem, calc(100vw - 1.1rem));
}

body.drive-touch-controls .scenario-heading,
body.drive-touch-controls .scenario-list {
  display: none;
}

body.drive-touch-controls .scenario-panel {
  width: 100%;
  padding: 0.4rem 0.5rem 0.45rem;
}

body.drive-touch-controls .scenario-panel .panel-site {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

body.drive-touch-controls .scenario-panel .panel-site .site-trigger {
  width: 100%;
  padding: 0.38rem 0.45rem;
}

body.drive-touch-controls .scenario-panel .drive-speed {
  font-size: 1rem;
}

body.drive-touch-controls .scenario-panel .drive-fps {
  font-size: 0.62rem;
}

body.drive-touch-controls .scenario-panel .drive-stats-meta {
  font-size: 0.62rem;
}

body.drive-touch-controls .scenario-panel .panel-site .drive-sun-panel,
body.drive-touch-controls .scenario-panel .panel-site .drive-nav-panel {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

body.drive-touch-controls .scenario-panel .drive-panel-tab {
  font-size: 0.58rem;
  padding: 0.28rem 0.35rem;
}

body.drive-touch-controls .drive-nav-link {
  padding: 0.32rem 0.45rem;
  font-size: 0.6rem;
}

body.drive-touch-controls .scenario-panel .drive-sun-row {
  font-size: 0.62rem;
}

body.drive-touch-controls .scenario-panel .drive-credit {
  margin-top: 0.25rem;
  font-size: 0.5rem;
}

body.drive-touch-controls .drive-map-panel:not(.travel-open) {
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.55rem, env(safe-area-inset-right));
  bottom: auto;
  width: min(36vw, 150px);
  padding: 0.42rem;
}

body.drive-touch-controls .drive-map-title,
body.drive-touch-controls .drive-map-readout,
body.drive-touch-controls .drive-map-dash.in-panel {
  font-size: 0.5rem;
}

body.drive-touch-controls .drive-map-readout {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.drive-touch-controls .drive-fast-travel {
  margin-top: 0.35rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.58rem;
}

body.drive-touch-controls .drive-map-panel.travel-open {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(96vw, calc(100dvh - 9rem), 1800px);
}

body.drive-map-open #drive-touch {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.drive-map-open .hud.top {
  opacity: 0;
  pointer-events: none;
}

body.drive-hud-hidden .hud.top,
body.drive-hud-hidden .drive-map-panel:not(.travel-open),
body.drive-hud-hidden .hud.bottom {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.drive-mobile-hud-hidden .hud.top,
body.drive-mobile-hud-hidden .drive-map-panel:not(.travel-open) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (orientation: landscape) and (max-height: 600px) {
  body.drive-touch-controls #drive-touch {
    --stick-size: 88px;
  }
  body.drive-touch-controls .hud.top {
    max-width: min(14.5rem, calc(100vw - 1.1rem));
  }


  body.drive-touch-controls #drive-touch .tb {
    width: auto;
    min-width: 46px;
    min-height: 32px;
    padding: 0.35rem 0.42rem;
    font-size: 0.55rem;
  }

  body.drive-touch-controls .drive-map-panel:not(.travel-open) {
    width: min(24vw, 126px);
  }
}

/* Frosted glass over a canvas that redraws every frame makes the browser
   re-blur the area behind each panel every frame: ~2.5 ms of compositor GPU
   time (an M1 Pro went from 67 to 80 fps with the blurs off). These panels
   are 88-97% opaque, so the blur is barely visible; a plain translucent fill
   reads the same. The loading veil's dimming (.sh-busy) and the other pages
   are left alone. */
body.page-drive .sh-glass,
body.page-drive .drive-hint-bar,
body.page-drive .drive-map-panel,
body.page-drive .drive-lpop,
body.page-drive #drive-touch .stick {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Messages — same panel language as the hint bar and map panel: dark glass, hairline border,
   muted copy, a thin accent rule on the leading edge. */
.drive-toast, .drive-map-note {
  box-sizing: border-box; padding: 0.4rem 0.85rem 0.4rem 0.75rem;
  background: rgba(7, 10, 14, 0.88); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 3px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink); font: 600 0.72rem/1.35 var(--font-body);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.drive-toast {
  position: fixed; left: 50%; top: 4.2rem; transform: translateX(-50%); z-index: 30;
  display: none; white-space: nowrap; max-width: min(92vw, 44rem);
  overflow: hidden; text-overflow: ellipsis;
}
.drive-map-note {
  display: none; position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; z-index: 3;
  text-align: left; font-weight: 500; color: var(--muted);
}
.drive-map-note strong { color: var(--ink); font-weight: 600; }
.drive-map-note.warn { border-left-color: #ff6a5a; }

/* Route calculation: spinner + text + progress bar in the note, busy cursor on the map. */
.drive-map-note.busy { color: var(--ink); }
.drive-map-plan-row { display: flex; align-items: center; gap: 0.55rem; }
.drive-map-spin {
  flex: 0 0 auto; width: 0.9rem; height: 0.9rem; box-sizing: border-box;
  border: 2px solid rgba(255, 209, 102, 0.25); border-top-color: #ffd166; border-radius: 50%;
  animation: drive-map-spin 0.8s linear infinite;
}
.drive-map-plan-bar { margin-top: 0.4rem; height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.drive-map-plan-bar > i { display: block; height: 100%; width: 0; background: #ffd166; transition: width 0.15s linear; }
@keyframes drive-map-spin { to { transform: rotate(360deg); } }
.drive-map-panel.travel-open #drive-minimap.planning,
.drive-map-panel.travel-open #drive-minimap.planning.armed { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .drive-map-spin { animation-duration: 2.4s; } }
.drive-map-note.warn, .drive-map-note.warn strong { color: var(--ink); }

/* Autopilot dashboard. Open map: overlaid bottom-right, large. Small card: compact section under the coordinates. */
.drive-map-dash { box-sizing: border-box; font-variant-numeric: tabular-nums; pointer-events: none; }
.drive-map-dash[hidden] { display: none; }
.drive-map-dash .dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.drive-map-dash .dash-head b { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd166; }
.drive-map-dash .dash-state { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.drive-map-dash .dash-flag { color: #ff7a66; font-weight: 600; white-space: normal; }
.drive-map-dash .dash-sec { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.drive-map-dash .dash-row { display: flex; justify-content: space-between; }
.drive-map-dash .dash-row > span { color: var(--muted); }
.drive-map-dash .dash-row > output { color: var(--ink); font-weight: 700; text-align: right; }
.drive-map-dash .dash-slope.warn > output { color: #ff7a66; }

/* On the open map (inside the map area) */
.drive-map-dash.on-map {
  display: none; position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 3;
  min-width: 13rem; padding: 0.7rem 0.9rem 0.75rem;
  background: rgba(7, 10, 14, 0.84); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font: 500 0.85rem/1.5 var(--font-body);
}
.drive-map-panel.travel-open .drive-map-dash.on-map:not([hidden]) { display: block; }
.drive-map-dash.on-map .dash-head { margin-bottom: 0.15rem; }
.drive-map-dash.on-map .dash-flag { margin: 0.15rem 0 0.2rem; }
.drive-map-dash.on-map .dash-sec { margin-top: 0.3rem; font-size: 0.9em; }
.drive-map-dash.on-map .dash-row { gap: 1rem; padding-left: 0.6rem; }
.drive-map-dash.on-map .dash-slope { margin-top: 0.35rem; padding: 0.3rem 0 0 0; border-top: 1px solid var(--line); }

/* In the small card: a section under the coordinates, one line per value, same text size as the coordinates
   (font-size is set with the readout's rules above, so it follows every breakpoint) */
.drive-map-dash.in-panel {
  margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--line);
  color: var(--muted); font-family: inherit; font-weight: 500; line-height: 1.45;
}
.drive-map-panel.travel-open .drive-map-dash.in-panel { display: none; }
.drive-map-dash.in-panel .dash-sec { margin-top: 0.2rem; }
.drive-map-dash.in-panel .dash-row { gap: 0.5rem; padding-left: 0.5rem; }
.drive-map-dash.in-panel .dash-slope { margin-top: 0.25rem; padding: 0.2rem 0 0 0; border-top: 1px solid var(--line); }

/* shell.css makes the panel footer a row and sets the coordinates in 11px mono: stack the dashboard under them, same type */
.page-drive .drive-map-panel:not(.travel-open) .drive-map-foot { flex-wrap: wrap; }
.page-drive .drive-map-dash.in-panel {
  flex: 0 0 100%; min-width: 0; margin-top: 4px; padding-top: 6px;
  font-family: var(--sh-f-mono); font-size: 11px; line-height: 1.5;
}
.page-drive .drive-map-dash.in-panel .dash-row > output { color: var(--sh-data, var(--ink)); }

/* mission window (missionBar.js): the Drive panel's own accent */
.scenario-panel .mw {
  --mw-accent: var(--accent);
}