/* 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-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 { font-size: .56rem; }
}
.drive-map-panel.travel-open {
  position: fixed; top: 50%; right: auto; left: 50%; bottom: auto;
  width: min(72vmin, 720px); 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 {
  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(92vw, calc(100vh - 6rem), 720px);
}

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

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

.drive-dem-debug {
  position: fixed;
  right: 0.75rem;
  bottom: 3.2rem;
  z-index: 40;
  width: min(17rem, calc(100vw - 1.5rem));
  padding: 0.65rem 0.75rem 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.35;
  pointer-events: auto;
}
.drive-dem-debug-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
}
.drive-dem-debug-stats {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.drive-dem-debug-row {
  display: block;
  margin: 0.4rem 0 0;
}
.drive-dem-debug-row span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.drive-dem-debug-row input[type="range"] {
  width: 100%;
  margin: 0;
}
.drive-dem-debug-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  cursor: pointer;
}

body.drive-hud-hidden .hud.top,
body.drive-hud-hidden .drive-map-panel:not(.travel-open),
body.drive-hud-hidden .hud.bottom,
body.drive-hud-hidden .drive-dem-debug {
  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);
  }
}