/* The driving view (site/drive.html, since 2026-09-18): a full-screen map
   for a mounted phone. Big type, big targets, dark chrome that stays out
   of the map, and nothing that scrolls. Colours are the site's greens on
   a near-black so the strip reads at a glance in daylight and at night. */

:root {
  --drive-ink: #f2f6f3;
  --drive-muted: #b9c8bf;
  --drive-bg: rgba(14, 24, 18, 0.92);
  --drive-green: #2e8b40;
  --drive-red: #d9342b;
  --drive-amber: #d9961a;
  --drive-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #0e1812;
  color: var(--drive-ink);
  font-family: var(--drive-font);
  font-size: 16px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#map {
  position: fixed;
  inset: 0;
  background: #0e1812;
}

/* Heading-up (since 2026-09-22, the owner's ask): the map is drawn as a
   square larger than any screen's diagonal, centred, and rotated by
   minus the heading (--map-rot, set per fix, eased); everything fixed
   outside #map stays upright, and the text markers counter-rotate
   through .drive-rot (--map-counter). */
.drive-heading-up #map {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%) rotate(var(--map-rot, 0deg));
  transform-origin: center center;
  /* Slower and eased (the owner, from the road, 2026-09-22: the swings
     were quick); the script also damps the heading before it gets here. */
  transition: transform 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.drive-heading-up .drive-rot {
  display: inline-block;
  transform: rotate(var(--map-counter, 0deg));
  transition: transform 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.drive-heading-up .leaflet-control-container {
  display: none;
}

#drive-attrib {
  position: fixed;
  right: 4px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  z-index: 999;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(14, 24, 18, 0.7);
  color: var(--drive-muted);
  font-size: 10px;
}

#drive-attrib a {
  color: var(--drive-muted);
}

#drive-attrib[hidden] {
  display: none;
}

#drive-headup[aria-pressed="true"],
#drive-radar[aria-pressed="true"] {
  color: #1f7a3d;
}


#drive-voice.drive-voice-on {
  background: var(--drive-red);
  border-color: var(--drive-red);
  color: #fff;
  animation: drive-alert-pulse 0.8s ease-in-out infinite alternate;
}

#drive-voice[hidden] {
  display: none;
}

#drive-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
  background: var(--drive-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#drive-exit,
#drive-menu-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--drive-ink);
  font-size: 22px;
  text-decoration: none;
  cursor: pointer;
}

#drive-title {
  flex: 1 1 auto;
  min-width: 0;
}

#drive-route-label {
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#drive-route-sub {
  font-size: 12px;
  color: var(--drive-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#drive-status {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
  left: 10px;
  z-index: 1000;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--drive-bg);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--drive-ink);
  max-width: calc(100% - 20px);
}

#drive-status:empty {
  display: none;
}

/* Draggable and collapsible (since 2026-09-19): a finger moves it, a
   tap folds it to the first line, a double tap puts it back. */
#drive-status {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding-right: 22px;
}

#drive-status::after {
  content: "▴";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  color: var(--drive-muted);
}

#drive-status.drive-status-collapsed .drive-status-row:not(:first-child) {
  display: none;
}

#drive-status.drive-status-collapsed::after {
  content: "▾";
}

/* Once moved, a box keeps its own spot whatever else shows. */
#drive-status.drive-box-moved,
#drive-alert:not([hidden]) ~ #drive-status.drive-box-moved,
#drive-roads:not([hidden]) ~ #drive-status.drive-box-moved {
  max-width: min(70%, 360px);
}

/* The roads strip drags too; its grip folds it to the chosen road. */
#drive-roads {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.drive-roads-grip {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 24, 18, 0.7);
  color: var(--drive-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: grab;
}

.drive-roads-collapsed .drive-road-pill:not(.drive-road-pill-on) {
  display: none;
}

#drive-roads.drive-box-moved {
  max-width: min(70%, 360px);
  align-items: flex-start;
}

#drive-ahead {
  position: fixed;
  left: 10px;
  right: 10px;
  /* Above the controls however many rows they wrap to (--controls-h is
     set from the controls' measured height, since 2026-09-22). */
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 12px);
  z-index: 1000;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--drive-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

#drive-ahead[hidden] {
  display: none;
}

#drive-ahead-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--drive-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

#drive-ahead-summary {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-ahead-chevron {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--drive-muted);
  transition: transform 0.15s ease;
}

.drive-ahead-open .drive-ahead-chevron {
  transform: rotate(180deg);
}

#drive-ahead-body[hidden] {
  display: none;
}

#drive-ahead-body {
  max-height: 46vh;
  overflow-y: auto;
}

/* Landscape on a phone: the card becomes a column on the right, the
   status and controls keep the left, and the map stays in view. */
@media (orientation: landscape) and (max-height: 520px) {
  /* The one-line strip sits top-right; opened, the rows drop down from
     it as far as the controls, no further. Collapsed, the map has the
     whole screen but that strip. */
  #drive-ahead {
    left: auto;
    right: 10px;
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
    bottom: auto;
    width: min(40%, 320px);
    padding: 4px 10px;
  }

  /* The collapsed strip is one slim line in landscape (the owner, from
     the road: it was too big). */
  #drive-ahead-toggle {
    padding: 4px 0;
    font-size: 13px;
  }

  .drive-moving .drive-ahead-row {
    font-size: 14px;
  }

  #drive-roads {
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
    right: auto;
    left: 10px;
    align-items: flex-start;
    max-width: 50%;
  }

  #drive-roads:not([hidden]) ~ #drive-status {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
    max-width: calc(54% - 30px);
  }

  #drive-ahead-body {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 190px);
    overflow-y: auto;
  }

  #drive-controls {
    right: auto;
    width: calc(54% - 30px);
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #drive-status {
    max-width: calc(54% - 30px);
  }

  #drive-alert {
    right: auto;
    width: calc(54% - 30px);
  }

  .drive-sheet {
    padding-top: 8px;
  }
}

.drive-ahead-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  line-height: 1.25;
}

.drive-ahead-row:first-child,
#drive-bridge + #drive-camps .drive-ahead-row:first-child {
  border-top: 0;
}

.drive-ahead-dist {
  flex: 0 0 4.2em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--drive-green);
}

.drive-ahead-main {
  flex: 1 1 auto;
  min-width: 0;
}

.drive-ahead-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-ahead-sub {
  font-size: 12px;
  color: var(--drive-muted);
}

#drive-bridge {
  padding: 8px 0;
}

#drive-bridge .drive-ahead-dist {
  color: var(--drive-amber);
}

#drive-bridge.drive-bridge-mine .drive-ahead-dist,
#drive-bridge.drive-bridge-mine .drive-ahead-name {
  color: var(--drive-red);
}

#drive-controls {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1000;
  display: flex;
  gap: 10px;
}

/* Icons only in one row along the bottom (2026-09-22): square plates
   spread across the width, no wrapping on a phone. */
#drive-controls {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
}

#drive-controls .drive-btn {
  flex: 0 0 auto;
  width: 46px;
  min-width: 0;
  height: 46px;
  min-height: 0;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  position: relative;
}

#drive-controls #drive-headup {
  font-size: 16px;
}

.drive-btn-dots {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 12px;
  line-height: 1;
  color: #1f7a3d;
}

.drive-moving #drive-controls .drive-btn {
  width: 50px;
  height: 50px;
  font-size: 23px;
}

/* The map's buttons are white plates like the gauges (the owner,
   2026-09-22): black on white, rounded, the same shadow. Start stays
   green and Stop red; a button that is on shows green. */
.drive-btn {
  flex: 0 1 auto;
  min-height: 46px;
  padding: 8px 14px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-controls .drive-btn[aria-pressed="true"] {
  border-color: #fff;
  color: #1f7a3d;
}

#drive-controls #drive-voice.drive-voice-on {
  background: var(--drive-red);
  border-color: var(--drive-red);
  color: #fff;
}

.drive-btn-primary {
  background: var(--drive-green);
  border-color: var(--drive-green);
  color: #fff;
}

.drive-btn-primary.drive-btn-stop {
  background: var(--drive-red);
  border-color: var(--drive-red);
}

.drive-btn[hidden] {
  display: none;
}

/* The setup sheet fills the screen under the top strip. */
.drive-sheet {
  position: fixed;
  /* Always under the corner buttons, folded or not, so the menu button
     can close it. */
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  overflow-y: auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: #0e1812;
}

.drive-sheet[hidden] {
  display: none;
}

.drive-sheet h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

.drive-sheet h2 {
  margin: 22px 0 8px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--drive-muted);
}

/* The sheet's folding sections (2026-09-23): a <details> per heading, the
   heading and a one-line summary on the summary row, a chevron at the
   right; the summary shows only while folded. */
.drive-section {
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drive-section > summary,
.drive-group-section > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.drive-section > summary::-webkit-details-marker,
.drive-group-section > summary::-webkit-details-marker {
  display: none;
}

.drive-section > summary::after,
.drive-group-section > summary::after {
  content: "\203A";
  margin-left: auto;
  padding-left: 8px;
  font-size: 22px;
  line-height: 1;
  color: var(--drive-muted);
  transition: transform 0.15s;
}

.drive-section[open] > summary::after,
.drive-group-section[open] > summary::after {
  transform: rotate(90deg);
}

.drive-section > summary h2,
.drive-group-section > summary h3 {
  margin: 0;
  flex: 0 0 auto;
}

.drive-section-sum {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-section[open] > summary .drive-section-sum,
.drive-group-section[open] > summary .drive-section-sum {
  display: none;
}

.drive-group-section {
  margin-top: 4px;
}

.drive-group-section > summary {
  min-height: 38px;
}

.drive-group-section > .drive-show-item,
.drive-group-section > .drive-show {
  margin-top: 8px;
}

.drive-sheet-lead,
.drive-sheet-note {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--drive-muted);
  line-height: 1.45;
}

.drive-sheet a {
  color: #9fd4ad;
}

.drive-muted {
  color: var(--drive-muted);
  font-size: 14px;
}

.drive-saved-route {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--drive-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.drive-saved-route strong {
  display: block;
  font-size: 16px;
}

.drive-saved-route span {
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-saved-sync-row {
  justify-content: flex-start;
  margin: 8px 0;
}

.drive-saved-sync-row .drive-muted {
  flex: 1 1 12em;
  font-size: 13px;
}

/* The truck's plates (2026-09-24): a column at the lower left above the
   tent plate - outside temperature, fuel, coolant, volts - amber or red
   when a reading wants attention. */
#drive-truck {
  position: fixed;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 22px + 52px + 10px);
  z-index: 1001;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

#drive-truck[hidden] {
  display: none;
}

#drive-camp-plate[hidden] ~ #drive-truck,
#drive-ahead:not([hidden]) ~ #drive-truck {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
}

.drive-truck-plate {
  width: 56px;
  padding: 5px 0 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-family: var(--drive-font);
  line-height: 1;
}

.drive-truck-plate[hidden] {
  display: none;
}

#drive-obd-plate,
#drive-ruuvi-plate {
  font: inherit;
  font-family: var(--drive-font);
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

#drive-obd-plate > span:nth-child(2),
#drive-ruuvi-plate > span:nth-child(2) {
  font-size: 13px;
}

/* The sensor plates sit in the column like the rest (the wrapper is a
   flex item carrying its own column). */
/* A sensor plate opens its sheet (2026-09-29); the chart on that sheet. */
.drive-ruuvi-plate,
#drive-temp-plate.drive-plate-sensor {
  cursor: pointer;
  pointer-events: auto;
}

.drive-ruuvi-chartbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 6px;
}

.drive-ruuvi-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

#drive-ruuvi-chart {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

.drive-ruuvi-plates {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.drive-ruuvi-plates:empty {
  display: none;
}

.drive-ruuvi-tag {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

.drive-ruuvi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drive-ruuvi-head strong {
  flex: 1 1 auto;
}

.drive-ruuvi-role {
  width: auto;
  min-width: 0;
}

.drive-ruuvi-reading {
  margin: 6px 0 0;
}

.drive-ruuvi-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-truck-icon {
  display: block;
  font-size: 14px;
  line-height: 1;
}

.drive-truck-plate > span:nth-child(2) {
  display: block;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.drive-truck-plate.drive-truck-amber {
  border-color: #b8641b;
  color: #8a4a10;
}

.drive-truck-plate.drive-truck-red {
  border-color: var(--drive-red);
  color: var(--drive-red);
}

.drive-night .drive-truck-plate {
  background: #d9ddd9;
  border-color: #d9ddd9;
}

.drive-night .drive-truck-plate.drive-truck-amber {
  border-color: #b8641b;
}

.drive-night .drive-truck-plate.drive-truck-red {
  border-color: var(--drive-red);
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-truck,
  #drive-camp-plate[hidden] ~ #drive-truck,
  #drive-ahead:not([hidden]) ~ #drive-truck {
    left: 10px;
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    flex-direction: column;
  }
}

/* The vehicle link's test panel (2026-09-24). */
.drive-obd-actions {
  margin: 4px 0 8px;
}

.drive-obd-readings {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}

.drive-obd-readings:empty {
  display: none;
}

.drive-obd-log {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: #0b1410;
  color: #c8d6cc;
  font: 12px/1.4 ui-monospace, Consolas, monospace;
  white-space: pre;
  overflow: auto;
}

/* Go and the route-less drive on one row (2026-09-23). */
.drive-go-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.drive-go-row .drive-btn-primary {
  flex: 1 1 auto;
}

#drive-free {
  flex: 0 0 auto;
  font-size: 14px;
}

/* Two choices a row: the label keeps to one line, the control takes the
   rest. */
.drive-form-row.drive-row-2 {
  flex-wrap: nowrap;
}

.drive-form-row.drive-row-2 > label {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Each control is as wide as its own words, no wider; the option texts
   are kept short so two fit a phone's width. */
.drive-form-row.drive-row-2 > label > select,
.drive-form-row.drive-row-2 > label > input[type="time"] {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.drive-form-row.drive-row-2 > label > input[type="time"] {
  width: 5em;
}

.drive-link-small {
  padding: 0;
  font-size: 13px;
}

/* The explainer notes folded to one line, "more" at the right. */
.drive-note-fold {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 3.2em;
  cursor: pointer;
}

.drive-note-fold::after {
  content: "more";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 13px;
  font-weight: 600;
  color: #9fd4ad;
}

.drive-note-fold.drive-note-open {
  display: block;
  padding-right: 0;
}

.drive-note-fold.drive-note-open::after {
  content: " less";
  position: static;
  margin-left: 4px;
}

.drive-note-fold:empty {
  display: none;
}

.drive-show {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drive-show-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 15px;
}

.drive-show-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--drive-green);
}

.drive-show-item select {
  margin: 0 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: #1b2b21;
  color: var(--drive-ink);
  font: inherit;
  font-size: 15px;
}

/* The drive form on the sheet: one box per place with its own dropdown. */
#drive-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#drive-form h2 {
  margin: 4px 0 0;
}

.drive-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drive-field label {
  flex: 0 0 3.2em;
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.drive-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--drive-ink);
  font: inherit;
  font-size: 16px;
}

.drive-input-wrap input:focus-visible {
  outline: 2px solid #9fd4ad;
  outline-offset: 1px;
}

/* The × inside a place box (2026-09-25): a 36 px target at the right,
   over the input's own padding. */
.drive-input-wrap input {
  padding-right: 40px;
}

.drive-input-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--drive-ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.drive-input-clear[hidden] {
  display: none;
}

#drive-setup .drive-input-clear,
#drive-find-panel .drive-input-clear {
  background: #e3e8e4;
  color: #111;
}

.drive-stop-remove {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--drive-ink);
  font-size: 20px;
  cursor: pointer;
}

.drive-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: min(55vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: #1b2b21;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.drive-results[hidden] {
  display: none;
}

.drive-result {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
  color: var(--drive-ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.drive-result:last-child {
  border-bottom: 0;
}

.drive-result-home {
  font-weight: 600;
}

#drive-home-line {
  margin: 0;
}

#drive-home-line:empty {
  display: none;
}

#drive-home-line .drive-link-btn {
  padding: 4px 0;
  font-size: 14px;
}

.drive-result span {
  display: block;
  font-size: 12px;
  color: var(--drive-muted);
}

.drive-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--drive-muted);
}

.drive-link-btn {
  padding: 8px 0;
  border: 0;
  background: none;
  color: #9fd4ad;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.drive-corridor select {
  margin: 0 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: #1b2b21;
  color: var(--drive-ink);
  font: inherit;
  font-size: 15px;
}

#drive-form-status:empty {
  display: none;
}

/* Map markers: the arrow that is you, the campgrounds, the bridges. */
.drive-me {
  width: 30px;
  height: 30px;
}

.drive-me svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.drive-camp {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--drive-green);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* The colour per kind of campground (2026-09-23): the camping map's
   agency accents by copy (style.css), one colour for every state park
   system and one for every provincial one. Applied to the dots, the
   numbered dots, the card's row numbers and the sheet's legend. */
.drive-kind-usace { background: #2e8b40; }
.drive-kind-fs { background: #a8384a; }
.drive-kind-nps { background: #8b5e34; }
.drive-kind-blm { background: #6b4c9a; }
.drive-kind-tva { background: #d67e26; }
.drive-kind-fws { background: #b9861f; }
.drive-kind-state { background: #c2447a; }
.drive-kind-stateforest { background: #6b7f2a; }
.drive-kind-city { background: #176cb8; }
.drive-kind-tribal { background: #b5602f; }
.drive-kind-pc { background: #3457a6; }
.drive-kind-prov { background: #0e8a7d; }
.drive-kind-crown { background: #1f5c3a; }

.drive-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.drive-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* The listed campgrounds carry their row's number on the map. */
.drive-camp-numbered {
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Under a finger the dots are bigger (drive.js sets the size); the
   number keeps to the middle. */
@media (pointer: coarse) {
  .drive-camp-numbered {
    font-size: 15px;
    line-height: 24px;
  }
}

.drive-camp-row {
  cursor: pointer;
}

.drive-camp-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.drive-row-num {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 4px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 1.4em;
  text-align: center;
}

/* The row number's colour is its kind (the rules above); green only when
   a row carries no kind class. */
.drive-row-num:not([class*="drive-kind-"]) {
  background: var(--drive-green);
}

.drive-row-add {
  flex: 0 0 auto;
  align-self: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--drive-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.drive-bridge-pin {
  width: 42px;
  height: 20px;
  border-radius: 10px;
  background: #5b5f66;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.drive-bridge-pin-low {
  background: var(--drive-amber);
}

.drive-bridge-pin-severe,
.drive-bridge-pin-mine {
  background: var(--drive-red);
}

.drive-service {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #4a6fa5;
  color: #fff;
  border: 1px solid #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.drive-service-dump {
  background: #22897f;
}

.drive-service-water {
  background: #2f7fb8;
}

.drive-service-propane {
  background: #d0691f;
}

/* The other kinds (since 2026-09-21), the camping map's colours. */
.drive-service-rest { background: #2f6b4f; }
.drive-service-blm { background: #8a5a2b; }
.drive-service-info { background: #1b7f8c; }
.drive-service-truckstops { background: #6b4f2f; }
.drive-service-laundromats { background: #5b8fb9; }
.drive-service-hospitals { background: #c62828; }
.drive-service-groceries { background: #1f77b4; }
.drive-service-hardware { background: #b8641b; }
.drive-service-pharmacies { background: #c03fa0; }
.drive-service-coffee { background: #6f4e37; }
.drive-service-starbucks { background: #00704a; }
.drive-service-auto { background: #55606b; }
.drive-service-rv { background: #7d3b2e; }

.drive-group-caption {
  padding: 8px 0 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drive-muted);
}

.drive-group {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--drive-muted);
}

.drive-row-starbucks .drive-ahead-dist { color: #4fd18f; }
.drive-row-coffee .drive-ahead-dist { color: #c9a27e; }
.drive-row-hospitals .drive-ahead-dist { color: #ff8a7a; }

.drive-row-break .drive-ahead-dist,
.drive-row-break .drive-ahead-name {
  color: var(--drive-amber);
}

/* Cabins, dispersed sites, parks and saved sites along the road. */
.drive-cabin {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #8a5a2b;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.drive-dispersed {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6f7a6a;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.drive-park {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #0f3b21;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

.drive-saved {
  width: 20px;
  height: 20px;
  color: #ffd54a;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.drive-row-cabin .drive-ahead-dist {
  color: #d29b62;
}

.drive-row-dispersed .drive-ahead-dist {
  color: #a9b3a3;
}

.drive-row-park .drive-ahead-dist {
  color: #9fd4ad;
}

.drive-row-byway .drive-ahead-dist {
  color: #c9a6e3;
}

.drive-row-saved .drive-ahead-dist {
  color: #ffd54a;
}

.drive-show-item select {
  max-width: 60%;
}

.drive-service-row .drive-ahead-dist {
  color: #7fb3d5;
}

/* The low-bridge banner under the top strip. */
#drive-alert {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 12px 14px;
  background: var(--drive-red);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  animation: drive-alert-pulse 1s ease-in-out infinite alternate;
}

#drive-alert[hidden] {
  display: none;
}

/* A low bridge near the phone, not the road's (2026-09-24): amber, no
   pulse - a warning to read the sign, not the road's own alarm. */
#drive-alert.drive-alert-near {
  background: #b8641b;
  animation: none;
}

#drive-alert strong {
  display: block;
  font-size: 20px;
}

#drive-alert span {
  display: block;
  font-size: 14px;
}

@keyframes drive-alert-pulse {
  from {
    background: var(--drive-red);
  }
  to {
    background: #ff5a4f;
  }
}

@media (prefers-reduced-motion: reduce) {
  #drive-alert {
    animation: none;
  }
}

#drive-alert:not([hidden]) ~ #drive-status {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 74px);
}

/* The gauges (since 2026-09-22): speed and the posted limit as two white
   plates at the lower right, above the card and the controls, the way a
   phone's map app draws them. */
#drive-gauges {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

#drive-gauges[hidden] {
  display: none;
}

#drive-speed,
#drive-limit,
#drive-elev-plate {
  width: 56px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-family: var(--drive-font);
  line-height: 1;
}

#drive-speed {
  padding: 6px 0 5px;
  border: 2px solid #fff;
}

#drive-speed-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.drive-speed-unit {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #444;
}

#drive-speed.drive-speed-over {
  border-color: var(--drive-red);
  color: var(--drive-red);
}

#drive-elev-plate {
  padding: 6px 0 5px;
  border: 2px solid #fff;
}

#drive-elev-plate[hidden] {
  display: none;
}

#drive-elev-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

#drive-limit {
  padding: 4px 0 5px;
  border: 2px solid #111;
}

#drive-limit[hidden] {
  display: none;
}

/* Moving: the plates grow a little with the rest. */
.drive-moving #drive-speed-value,
.drive-moving #drive-limit-value {
  font-size: 28px;
}

/* The find plate, left of the gauges, and its panel over the card. */
#drive-find {
  position: fixed;
  right: 10px;
  /* Sits above the gauge row, so it needs no arithmetic over which
     plates are showing. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
  z-index: 1001;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-find[hidden] {
  display: none;
}

#drive-gauges[hidden] ~ #drive-find {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
}

/* The clear-pins plate (2026-09-25): the magnifier's neighbour to the
   left, the same height, up only while numbered pins are on the map. */
#drive-near-clear {
  position: fixed;
  right: 72px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
  z-index: 1001;
  width: 52px;
  height: 52px;
  border: 2px solid #7a3fb0;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-near-clear[hidden] {
  display: none;
}

#drive-gauges[hidden] ~ #drive-near-clear {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
}

/* Numbered near-me pins: purple, so they read apart from the green
   campground numbers and the service squares. */
.drive-near-pin {
  border: 2px solid #fff;
  border-radius: 50%;
  background: #7a3fb0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (pointer: coarse) {
  .drive-near-pin {
    font-size: 15px;
    line-height: 24px;
  }
}

.drive-result-n {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7a3fb0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.drive-near-addr {
  font-weight: 600;
}

/* The every-campground button (2026-09-23): the find plate's twin, one
   plate higher; green ring while the dots are up. */
#drive-area {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px + 62px);
  z-index: 1001;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-gauges[hidden] ~ #drive-area {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
}

#drive-find[hidden] ~ #drive-area {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
}

#drive-gauges[hidden] ~ #drive-find[hidden] ~ #drive-area {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
}

#drive-area[aria-pressed="true"] {
  border-color: var(--drive-green);
}

#drive-area .drive-btn-dots {
  font-size: 9px;
  font-weight: 700;
  vertical-align: baseline;
}

.drive-camp-area {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

/* The live-traffic plate (2026-09-23): above the every-campground one. */
#drive-wazebtn {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px + 62px + 62px);
  z-index: 1001;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-gauges[hidden] ~ #drive-wazebtn,
#drive-find[hidden] ~ #drive-wazebtn {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px + 62px);
}

#drive-gauges[hidden] ~ #drive-find[hidden] ~ #drive-wazebtn {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
}

#drive-waze-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 12px);
  z-index: 1150;
  padding: 8px 12px 10px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#drive-waze-panel[hidden] {
  display: none;
}

#drive-waze-frame {
  display: block;
  width: 100%;
  height: min(52vh, 420px);
  border: 0;
  border-radius: 8px;
  background: #e9ecea;
}

#drive-waze-panel .drive-find-actions {
  margin-top: 8px;
}

#drive-waze-panel .drive-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
}

#drive-waze-panel .drive-btn:not(.drive-btn-primary) {
  background: #eef1ef;
  border-color: #cfd6d1;
  color: #111;
}

#drive-waze-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #555;
}

.drive-night #drive-wazebtn,
.drive-night #drive-waze-panel {
  background: #d9ddd9;
  border-color: #d9ddd9;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-wazebtn,
  #drive-gauges[hidden] ~ #drive-wazebtn,
  #drive-find[hidden] ~ #drive-wazebtn,
  #drive-gauges[hidden] ~ #drive-find[hidden] ~ #drive-wazebtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px + 62px + 62px + 62px);
  }

  #drive-waze-panel {
    left: auto;
    width: min(60vw, 560px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  #drive-waze-frame {
    height: min(60vh, 300px);
  }
}

/* A toast over the map (2026-09-23): a line for a few seconds, above the
   plates, whatever the status box is doing. */
#drive-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  z-index: 1300;
  max-width: calc(100% - 40px);
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-family: var(--drive-font);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}

#drive-toast[hidden] {
  display: none;
}

.drive-night #drive-toast {
  background: #d9ddd9;
}

#drive-find-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 12px);
  z-index: 1150;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--drive-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#drive-find-panel[hidden] {
  display: none;
}

.drive-find-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drive-find-row .drive-input-wrap {
  flex: 1 1 auto;
}

.drive-find-row .drive-results {
  top: auto;
  bottom: calc(100% + 4px);
}

.drive-find-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* The route row in the find panel (2026-09-25). */
.drive-find-route {
  align-items: center;
  flex-wrap: wrap;
}

.drive-find-route .drive-corridor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111;
  font-size: 14px;
}

.drive-find-route select {
  padding: 6px 8px;
  border: 1px solid #cfd6d1;
  border-radius: 8px;
  background: #f4f6f4;
  color: #111;
  font: inherit;
  font-size: 14px;
}

/* The chips under the find box (2026-09-25): one row, scrolling sideways
   when the recent searches push it past the panel's width. */
.drive-find-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.drive-find-chips::-webkit-scrollbar {
  display: none;
}

.drive-find-chips:empty {
  display: none;
}

.drive-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #cfd6d1;
  border-radius: 17px;
  background: #eef1ef;
  color: #111;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.drive-chip-recent {
  background: #fff;
  font-weight: 500;
}

.drive-find-actions .drive-btn {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 15px;
}

#drive-find-status:empty {
  display: none;
}

#drive-find-status {
  margin: 6px 0 0;
}

.drive-limit-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#drive-limit-value {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  font-weight: 800;
}

#drive-limit.drive-limit-over {
  border-color: var(--drive-red);
  color: var(--drive-red);
}

/* Landscape: the card is a column at the top right, so the plates sit
   above the controls only. */
@media (orientation: landscape) and (max-height: 520px) {
  /* The buttons keep to the left half there, so the plates sit in the
     bottom right corner, just above the map credit (the owner's
     screenshot, 2026-09-22). */
  #drive-gauges {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  }

  #drive-find,
  #drive-gauges[hidden] ~ #drive-find,
  #drive-near-clear,
  #drive-gauges[hidden] ~ #drive-near-clear {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px + 62px);
  }

  #drive-area,
  #drive-gauges[hidden] ~ #drive-area,
  #drive-find[hidden] ~ #drive-area,
  #drive-gauges[hidden] ~ #drive-find[hidden] ~ #drive-area {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px + 62px + 62px);
  }
}

/* Radar tiles softened: the composite's cells are about a kilometre, so
   zoomed in they are blocks; a blur reads as rain rather than pixels. */
.drive-radar-tile {
  filter: blur(4px);
}

/* The weather banner (since 2026-09-22): under the top strip, below a
   bridge alert when both show. */
#drive-wx {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
  left: 0;
  right: 0;
  z-index: 1190;
  padding: 8px 14px;
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

#drive-wx[hidden] {
  display: none;
}

/* The banner is a tap (2026-09-23): the full report. A × hides it for
   that alert; after twelve seconds, or once read, it is a one-line pill.
   It drags (wireDraggable); moved, it keeps a readable width. */
#drive-wx {
  cursor: pointer;
  padding-right: 44px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#drive-wx.drive-box-moved {
  right: auto;
  bottom: auto;
  max-width: min(92vw, 520px);
  border-radius: 10px;
}

#drive-wx.drive-wx-compact.drive-box-moved {
  max-width: calc(100% - 20px);
}

.drive-wx-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

#drive-wx.drive-wx-compact {
  left: 10px;
  right: auto;
  max-width: calc(100% - 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 40px 6px 12px;
  border-radius: 10px;
}

#drive-wx.drive-wx-compact strong {
  display: inline;
  font-size: 14px;
  white-space: nowrap;
}

#drive-wx.drive-wx-compact span {
  display: inline;
  font-size: 12px;
  white-space: nowrap;
}

#drive-wx.drive-wx-compact .drive-wx-dismiss {
  top: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
}

.drive-top-folded #drive-wx.drive-wx-compact {
  left: 62px;
  max-width: calc(100% - 62px - 116px);
}

.drive-wx-kind-warning {
  color: #a8384a;
  font-weight: 700;
}

.drive-row-wx {
  cursor: pointer;
}

/* Wildfires (2026-09-28): a flame marker on the map and the row's tone. */
.drive-fire {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c0392b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.drive-fire-rx {
  background: #b8641b;
}

.drive-row-fire .drive-ahead-dist {
  color: #ff8a7a;
  flex-basis: 5.2em;
}

#drive-wx.drive-wx-warning {
  background: #a8384a;
}

#drive-wx.drive-wx-watch {
  background: #b8641b;
}

#drive-wx strong {
  display: block;
  font-size: 16px;
}

#drive-wx span {
  display: block;
  font-size: 12px;
  opacity: 0.95;
}

#drive-alert:not([hidden]) ~ #drive-wx {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 74px);
}

#drive-wx:not([hidden]) ~ #drive-status {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 62px);
}

.drive-row-wx .drive-ahead-dist {
  color: #f0a862;
  flex-basis: 5.2em;
}

/* Traffic (2026-09-23): the state DOT's events on the map as small round
   plates - black for a closure, red for a crash, amber for roadwork and
   the rest; the other direction's faded - and rows on the card in the
   same colours. */
.drive-traffic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d9961a;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.drive-traffic-closure { background: #111; }
.drive-traffic-crash { background: #c62828; }
.drive-traffic-incident { background: #d9961a; }
.drive-traffic-weather { background: #1c6e8c; }
.drive-traffic-sev1 { opacity: 0.6; width: 16px; height: 16px; font-size: 9px; line-height: 12px; }
.drive-traffic-other { opacity: 0.35; }

.drive-row-traffic .drive-ahead-dist,
.drive-row-traffic .drive-ahead-name { color: #f0a862; }
.drive-row-traffic-crash .drive-ahead-dist,
.drive-row-traffic-crash .drive-ahead-name,
.drive-row-traffic-sev3 .drive-ahead-dist,
.drive-row-traffic-sev3 .drive-ahead-name { color: #ff8a7a; }

.drive-row-wx-warning .drive-ahead-dist,
.drive-row-wx-warning .drive-ahead-name {
  color: #ff8a7a;
}

/* Go here inside a campground popup. */
.drive-go-here {
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--drive-green);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.drive-btn-small {
  flex: 0 0 auto;
  min-width: 64px;
}

#drive-resume {
  width: 100%;
  margin: 6px 0 4px;
}

/* Night: the streets are swapped for Esri's dark canvas in drive.js
   (since 2026-09-26; the inverted tiles hid the names and the streets -
   the owner), so only the satellite is filtered, and only dimmed.
   Markers and the route line are drawn above the tile pane and keep
   their colours. */
/* Satellite and topo at night: dimmed, not swapped (the class covers both). */
.drive-night.drive-basemap-satellite .leaflet-tile-pane {
  filter: brightness(0.7);
}

/* Moving: the layer switch and the map attribution shrink out of the way,
   the card's type grows, and popups are closed by the script. */
.drive-moving #drive-night {
  display: none;
}

.drive-moving .drive-ahead-row {
  font-size: 17px;
}

.drive-moving .drive-ahead-sub {
  font-size: 13px;
}

.drive-moving #drive-status {
  font-size: 15px;
}

#drive-status {
  white-space: pre-line;
}

/* The next turn is the status box's first row: bigger as a whole, so it
   reads at arm's length and wraps as one. */
.drive-status-row {
  white-space: normal;
}

.drive-status-turn {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

.drive-moving .drive-status-turn {
  font-size: 1.4em;
}

/* ---- The limitations (since 2026-09-21) ---- */
.drive-terms {
  z-index: 1300;
  top: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
}

.drive-terms-lead {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.45;
}

.drive-terms-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.45;
}

.drive-terms-list li {
  margin-bottom: 8px;
}

#drive-terms-ok {
  width: 100%;
  margin-top: 8px;
}

#drive-footnote {
  position: fixed;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  z-index: 999;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(14, 24, 18, 0.7);
  color: var(--drive-muted);
  font-size: 10px;
  pointer-events: none;
}

/* ---- More control over the drive (since 2026-09-19) ---- */

/* The roads on offer: a strip of pills under the header, gone while
   moving. */
#drive-roads {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 62%;
}

#drive-roads[hidden],
.drive-moving #drive-roads {
  display: none;
}

/* The status box moves under the pills when both show. */
#drive-roads:not([hidden]) ~ #drive-status {
  max-width: 36%;
}

.drive-road-pill {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: var(--drive-bg);
  color: var(--drive-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}

.drive-road-pill-on {
  background: #1c6e8c;
  border-color: #1c6e8c;
  color: #fff;
}

.drive-road-pill-bridge:not(.drive-road-pill-on) {
  border-color: var(--drive-amber);
  color: #ffd27a;
}

/* Stop pins (draggable), avoid pins, day-end and fuel marks. */
.drive-stop-pin {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1c6e8c;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  cursor: grab;
}

/* The place the find panel showed on the map (2026-09-29): a purple dot
   whose tap opens the point menu. */
.drive-show-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #7a3fb0;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* The drive's end (2026-10-16): a flag with the place's name written
   over it, so the end reads where the base map draws no road. */
.drive-end-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f3b21;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 17px;
  line-height: 24px;
  text-align: center;
}

.drive-end-label {
  /* The tooltip box itself turns with the map in heading-up mode while
     the text inside counter-rotates, so a 220 px box stood on end as a
     dark bar across Knoxville (the owner's screenshot, 2026-10-17). The
     box is now invisible and the pill is the .drive-rot span, which
     turns with the words. */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* The tooltip pane is zero wide, so a wrapping tooltip shrinks to one
     word a line unless its width is its content's. */
  width: max-content;
  max-width: 220px;
  white-space: normal;
  text-align: center;
}

.drive-end-label .drive-rot {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #0f3b21;
  color: #fff;
  font: 600 13px/1.25 "Inter", system-ui, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  max-width: 220px;
  white-space: normal;
  /* The box is centred on the flag (direction "center"); the pill lifts
     itself clear of the 28 px flag. */
  transform: translateY(-36px);
}

.drive-heading-up .drive-end-label .drive-rot {
  /* Rotate first, then lift: the lift is then in the pill's own level
     frame, which is screen-up. */
  transform: rotate(var(--map-counter, 0deg)) translateY(-36px);
}

.drive-end-label::before {
  display: none;
}

/* The start picked on the map with "Start here" (2026-09-29): a green A
   until Drive here uses it. */
.drive-start-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2e8b40;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 15px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.drive-avoid-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--drive-red);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.drive-day-pin,
.drive-fuel-pin {
  height: 20px;
  border-radius: 10px;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.drive-day-pin {
  width: 46px;
  background: #5b3d8a;
}

.drive-fuel-pin {
  width: 40px;
  background: #b8641b;
}

.drive-row-day .drive-ahead-dist {
  color: #c9a6e3;
}

.drive-row-uturn .drive-ahead-dist,
.drive-row-uturn .drive-ahead-name {
  color: var(--drive-amber);
}

.drive-row-uturn .drive-ahead-name {
  white-space: normal;
}

.drive-ahead-sub a,
.leaflet-popup-content a {
  color: #1c6e8c;
}

.drive-ahead-sub a {
  color: #9fd4ad;
}

.drive-row-fuel .drive-ahead-dist {
  color: #f0a862;
}

.drive-row-fuel-now .drive-ahead-dist,
.drive-row-fuel-now .drive-ahead-name,
.drive-row-late .drive-ahead-sub {
  color: #ff8a7a;
}

/* The point menu's and a campground popup's buttons in one row. */
.drive-menu-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drive-menu-btns .drive-go-here {
  flex: 1 1 auto;
  padding: 8px 10px;
}

.drive-avoid-btn {
  background: var(--drive-red);
}

.drive-mini-btn {
  min-height: 30px;
  padding: 3px 8px;
  font-size: 13px;
}

/* The sheet's "This drive" block. */
.drive-current-actions {
  justify-content: flex-start;
}

/* Compact (2026-09-23, the owner: they were oversized on the sheet):
   four fit one row on a phone. */
.drive-current-actions {
  gap: 6px;
}

.drive-current-actions .drive-btn {
  box-sizing: border-box; /* the Google Maps link is an <a>: content-box by default */
  min-height: 34px;
  min-width: 0;
  padding: 5px 10px;
  border-width: 1px;
  font-size: 13px;
  font-weight: 600;
}

.drive-btn-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The link-button keeps the button's ink (the sheet's link colour made
   Google Maps look disabled). */
.drive-sheet .drive-current-actions .drive-btn-link {
  color: #111;
}

.drive-current-actions .drive-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.drive-stop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
}

.drive-stop-done {
  color: var(--drive-muted);
}

.drive-stop-num {
  flex: 0 0 auto;
  min-width: 1.6em;
  border-radius: 50%;
  background: #1c6e8c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6em;
  text-align: center;
}

.drive-stop-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-stop-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--drive-ink);
  font-size: 16px;
  cursor: pointer;
}

.drive-stop-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.drive-stop-move {
  font-size: 12px;
}

/* Saved drives: the row plus rename, duplicate, delete. */
.drive-saved-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 8px;
}

.drive-saved-wrap .drive-saved-route {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.drive-saved-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drive-saved-actions .drive-stop-btn {
  width: 36px;
  height: 32px;
  font-size: 14px;
}

/* The form's time and number boxes. */
.drive-form-row input[type="time"],
.drive-form-row input[type="number"] {
  margin: 0 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: #1b2b21;
  color: var(--drive-ink);
  font: inherit;
  font-size: 15px;
  width: 5.5em;
  color-scheme: dark;
}

.drive-fuel-row {
  justify-content: flex-start;
}

/* The elevation profile row. */
#drive-elev[hidden] {
  display: none;
}

#drive-elev-canvas {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  /* Dragging along the profile walks the road (2026-09-27): the
     pointer is ours, not the page's scroll. */
  touch-action: none;
  cursor: ew-resize;
}

/* The readout while a finger walks the profile: mile, height, grade. */
#drive-elev-scrub {
  margin: 6px 0 0;
  font-weight: 700;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

#drive-elev-scrub[hidden] {
  display: none;
}

.drive-scrub-tip {
  font-weight: 700;
  color: #1d4ed8;
}

/* Moving: glove-sized buttons, the roads strip and the sheet's fine
   controls out of the way. */
.drive-moving .drive-btn {
  min-height: 50px;
  font-size: 16px;
}

#drive-controls #drive-mute[aria-pressed="true"] {
  color: #b8641b;
}

.leaflet-popup-content {
  font-family: var(--drive-font);
  font-size: 15px;
  line-height: 1.35;
}

.leaflet-popup-content p {
  margin: 4px 0;
}

.leaflet-control-attribution {
  font-size: 10px;
}

/* ---- White plates everywhere on the map (2026-09-22, the owner: the
   black-on-white icons look better than the dark boxes) ---- */
#drive-top,
#drive-status,
#drive-ahead,
#drive-find-panel,
.drive-road-pill,
.drive-roads-grip,
#drive-footnote,
#drive-attrib {
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#drive-exit,
#drive-menu-btn {
  background: #eef1ef;
  color: #111;
}

#drive-route-sub,
.drive-ahead-sub,
.drive-ahead-chevron,
.drive-group-caption,
#drive-footnote,
#drive-attrib,
#drive-attrib a,
#drive-status::after,
.drive-roads-grip,
#drive-find-status {
  color: #555;
}

#drive-ahead-toggle {
  color: #111;
}

.drive-ahead-row,
.drive-stop-row {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.drive-row-add,
.drive-mini-btn {
  background: #eef1ef;
  border-color: #cfd6d1;
  color: #111;
}

.drive-camp-row:active {
  background: rgba(0, 0, 0, 0.05);
}

.drive-road-pill {
  border-color: #cfd6d1;
}

.drive-road-pill-on {
  background: #1c6e8c;
  border-color: #1c6e8c;
  color: #fff;
}

.drive-road-pill-bridge:not(.drive-road-pill-on) {
  border-color: #b8641b;
  color: #8a4a10;
}

#drive-find-panel .drive-input-wrap input {
  background: #f4f6f4;
  border-color: #cfd6d1;
  color: #111;
}

.drive-find-row .drive-results {
  background: #fff;
  border-color: #cfd6d1;
}

.drive-find-row .drive-result {
  color: #111;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.drive-find-row .drive-result span {
  color: #555;
}

/* Row accents darkened for a white ground. */
.drive-ahead-dist { color: #1f7a3d; }
#drive-bridge .drive-ahead-dist { color: #b8641b; }
.drive-row-cabin .drive-ahead-dist { color: #8a5a2b; }
.drive-row-dispersed .drive-ahead-dist { color: #55606b; }
.drive-row-park .drive-ahead-dist { color: #1f7a3d; }
.drive-row-byway .drive-ahead-dist { color: #5b3d8a; }
.drive-row-saved .drive-ahead-dist { color: #b8860b; }
.drive-service-row .drive-ahead-dist { color: #1f77b4; }
.drive-row-starbucks .drive-ahead-dist { color: #00704a; }
.drive-row-coffee .drive-ahead-dist { color: #6f4e37; }
.drive-row-hospitals .drive-ahead-dist { color: #c62828; }
.drive-row-day .drive-ahead-dist { color: #5b3d8a; }
.drive-row-fuel .drive-ahead-dist { color: #b8641b; }
.drive-row-wx .drive-ahead-dist { color: #b8641b; }
.drive-row-traffic .drive-ahead-dist,
.drive-row-traffic .drive-ahead-name { color: #b8641b; }
.drive-row-traffic-crash .drive-ahead-dist,
.drive-row-traffic-crash .drive-ahead-name,
.drive-row-traffic-sev3 .drive-ahead-dist,
.drive-row-traffic-sev3 .drive-ahead-name { color: #c62828; }
.drive-row-uturn .drive-ahead-dist,
.drive-row-uturn .drive-ahead-name,
.drive-row-break .drive-ahead-dist,
.drive-row-break .drive-ahead-name { color: #b8641b; }
.drive-row-fuel-now .drive-ahead-dist,
.drive-row-fuel-now .drive-ahead-name,
.drive-row-late .drive-ahead-sub,
.drive-row-wx-warning .drive-ahead-dist,
.drive-row-wx-warning .drive-ahead-name { color: #c62828; }
#drive-bridge.drive-bridge-mine .drive-ahead-dist,
#drive-bridge.drive-bridge-mine .drive-ahead-name { color: #c62828; }
.drive-ahead-sub a { color: #1c6e8c; }

/* Night: the plates dim to a warm grey so they do not glare. */
.drive-night #drive-top,
.drive-night #drive-status,
.drive-night #drive-ahead,
.drive-night #drive-find-panel,
.drive-night .drive-road-pill:not(.drive-road-pill-on),
.drive-night #drive-controls .drive-btn:not(.drive-btn-primary),
.drive-night #drive-speed,
.drive-night #drive-elev-plate,
.drive-night #drive-area,
.drive-night #drive-find {
  background: #d9ddd9;
  border-color: #d9ddd9;
}

.drive-night #drive-near-clear {
  background: #d9ddd9;
}

/* ---- The route strip folded (2026-09-22) ---- */
#drive-title {
  cursor: pointer;
}

.drive-top-folded #drive-top {
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  padding-bottom: 0;
}

.drive-top-folded #drive-title {
  visibility: hidden;
}

.drive-top-folded #drive-exit,
.drive-top-folded #drive-menu-btn {
  pointer-events: auto;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#drive-top-expand {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 62px;
  z-index: 1001;
  width: 44px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #555;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

#drive-top-expand[hidden] {
  display: none;
}

.drive-night #drive-top-expand,
.drive-night.drive-top-folded #drive-exit,
.drive-night.drive-top-folded #drive-menu-btn {
  background: #d9ddd9;
}
/* Folded: the status box and the road pills use the band between the
   corner buttons, clear of them. */
.drive-top-folded #drive-status:not(.drive-box-moved) {
  left: 62px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  max-width: calc(100% - 62px - 116px);
}

.drive-top-folded #drive-roads:not(.drive-box-moved) {
  right: 10px;
  /* Never in the corner buttons' band: with an empty status box the
     pills had climbed under the menu button (2026-09-23). */
  top: calc(env(safe-area-inset-top, 0px) + 8px + max(52px, var(--status-h, 0px)) + 8px);
}

/* With the banner up, the road pills start under it (they sat behind
   the pill - the smoke's screenshot, 2026-09-23). */
.drive-top-folded #drive-wx:not([hidden]):not(.drive-box-moved) ~ #drive-roads:not(.drive-box-moved) {
  top: calc(env(safe-area-inset-top, 0px) + 8px + max(52px, var(--status-h, 0px)) + 8px + var(--wx-h, 0px) + 8px);
}

/* Folded, the weather banner sits under the corner buttons and the
   status box, never over them (it hid the menu button - the owner's
   screenshot, 2026-09-23). */
.drive-top-folded #drive-wx {
  top: calc(env(safe-area-inset-top, 0px) + 8px + max(52px, var(--status-h, 0px)) + 8px);
}

.drive-top-folded #drive-wx:not([hidden]) ~ #drive-status {
  top: calc(env(safe-area-inset-top, 0px) + 8px);
}

.drive-top-folded #drive-alert:not([hidden]) ~ #drive-wx {
  top: calc(env(safe-area-inset-top, 0px) + 8px + max(52px, var(--status-h, 0px)) + 8px + 74px);
}

.drive-top-folded #drive-top-expand {
  z-index: 1002;
}
/* Landscape with the strip folded: the card column still starts under
   the corner buttons (it had climbed into them - the owner's screenshot,
   2026-09-22). */
@media (orientation: landscape) and (max-height: 520px) {
  .drive-top-folded #drive-ahead {
    top: calc(env(safe-area-inset-top, 0px) + 62px);
  }

  .drive-top-folded #drive-status:not(.drive-box-moved) {
    max-width: calc(54% - 72px);
  }
}
/* The tent plate (2026-09-22): the card folded to one plate at the lower
   left, above the controls; amber when a low bridge is the nearer thing. */
#drive-camp-plate {
  position: fixed;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 22px);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 12px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-family: var(--drive-font);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#drive-camp-plate[hidden] {
  display: none;
}

#drive-camp-plate-icon {
  font-size: 22px;
}

#drive-camp-plate.drive-camp-plate-bridge {
  border-color: #b8641b;
  color: #8a4a10;
}

.drive-night #drive-camp-plate {
  background: #d9ddd9;
  border-color: #d9ddd9;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-camp-plate {
    left: auto;
    right: 10px;
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
  }
}

/* The mountain plate (2026-09-22): a button in the gauge row — the icon,
   the height or the next grade over 3%, a tap opens the profile panel. */
#drive-elev-plate {
  padding: 3px 0 5px;
  font: inherit;
  font-family: var(--drive-font);
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

#drive-elev-icon {
  display: block;
  font-size: 16px;
  line-height: 1;
}

#drive-elev-value {
  padding-top: 2px;
}

#drive-elev-plate.drive-elev-steep {
  border-color: #b8641b;
  color: #8a4a10;
}

#drive-elev-plate.drive-elev-steep #drive-elev-value {
  font-size: 16px;
}

#drive-elev-plate.drive-elev-steep .drive-speed-unit {
  color: #8a4a10;
}

/* The sheet up: the map's overlays step aside (the weather banner sat
   over the detail page - the owner, 2026-09-23). The low-bridge banner
   stays, on purpose. */
.drive-sheet-open #drive-wx,
.drive-sheet-open #drive-find-panel,
.drive-sheet-open #drive-elev-panel,
.drive-sheet-open #drive-waze-panel,
.drive-sheet-open #drive-confirm,
.drive-sheet-open #drive-toast {
  display: none;
}

/* The listing sheet (2026-09-23): a white card inset from the map's
   edges (the owner's ask: black on white, not quite full screen), above
   the panels, scrolling on its own. */
#drive-listing {
  z-index: 1250;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 14px);
  padding: 14px 16px 18px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

#drive-listing .drive-muted,
#drive-listing .drive-sheet-note,
#drive-listing .drive-listing-kind,
#drive-listing .drive-listing-facts dt,
#drive-listing .drive-listing-desc h3 {
  color: #555;
}

#drive-listing a {
  color: #1c6e8c;
}

#drive-listing .drive-btn:not(.drive-btn-primary) {
  background: #eef1ef;
  border-color: #cfd6d1;
  color: #111;
}

#drive-listing .drive-btn-small {
  background: #eef1ef;
  border-color: #cfd6d1;
}

.drive-night #drive-listing {
  background: #d9ddd9;
}

.drive-listing-credit {
  margin: -8px 0 12px;
  font-size: 12px;
  color: #555;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-listing {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

.drive-listing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.drive-listing-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.drive-listing-kind {
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--drive-muted);
}

.drive-listing-actions {
  margin: 0 0 12px;
}

.drive-listing-photo {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 12px;
}

.drive-listing-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin: 0 0 12px;
  font-size: 15px;
}

.drive-listing-facts dt {
  color: var(--drive-muted);
}

.drive-listing-facts dd {
  margin: 0;
}

.drive-listing-address {
  margin: 0 0 8px;
  font-size: 15px;
}

.drive-listing-links {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
}

.drive-listing-links a {
  color: #9fd4ad;
  white-space: nowrap;
}

.drive-listing-desc h3 {
  margin: 14px 0 4px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--drive-muted);
}

.drive-listing-desc p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
}

.drive-popup-link {
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  color: #1c6e8c;
}

/* The detail sheet in black on white (2026-09-25, the owner's ask, as the
   listing sheet has been since 2026-09-23): the sheet's own variables
   flip, and the controls that carried light-on-dark literals - inputs,
   selects, the log, the saved rows, the dropdown - take the listing's
   greys. Night dims it to the same grey as the listing. */
#drive-setup {
  --drive-ink: #111;
  --drive-muted: #555;
  --drive-bg: #fff;
  background: #fff;
  color: #111;
}

.drive-night #drive-setup {
  background: #d9ddd9;
}

#drive-setup .drive-section {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* The headings read as headings on white (the owner, 2026-09-25): black
   and heavy for the main sections, dark grey for the groups under On the
   map; the folded summaries stay grey beside them. */
#drive-setup .drive-section > summary h2,
#drive-setup h1 {
  color: #111;
  font-weight: 800;
}

#drive-setup .drive-section > summary h2 {
  font-size: 15px;
}

#drive-setup .drive-group-section > summary h3 {
  color: #333;
  font-weight: 700;
}

#drive-setup a,
#drive-setup .drive-link-btn,
#drive-setup .drive-note-fold::after {
  color: #1c6e8c;
}

#drive-setup .drive-btn:not(.drive-btn-primary),
#drive-setup .drive-btn-small:not(.drive-btn-primary),
#drive-setup .drive-stop-btn,
#drive-setup .drive-stop-remove,
#drive-setup .drive-row-add,
#drive-setup .drive-input-wrap button {
  background: #eef1ef;
  border-color: #cfd6d1;
  color: #111;
}

#drive-setup .drive-saved-route,
#drive-setup .drive-ruuvi-tag {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f4f6f4;
  color: #111;
}

#drive-setup input,
#drive-setup select,
#drive-setup textarea,
#drive-setup .drive-input-wrap input,
#drive-setup .drive-show-item select,
#drive-setup .drive-corridor select,
#drive-setup .drive-form-row input[type="time"],
#drive-setup .drive-form-row input[type="number"] {
  border-color: #cfd6d1;
  background: #f4f6f4;
  color: #111;
}

#drive-setup .drive-input-wrap input:focus-visible {
  outline-color: #2e8b40;
}

#drive-setup .drive-obd-log {
  border-color: #cfd6d1;
  background: #f4f6f4;
  color: #111;
}

#drive-setup .drive-results {
  border-color: #cfd6d1;
  background: #fff;
}

#drive-setup .drive-result {
  color: #111;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

#drive-setup .drive-result span {
  color: #555;
}

#drive-setup .drive-result-home {
  color: #111;
}

#drive-setup .drive-stop-row {
  border-top-color: rgba(0, 0, 0, 0.1);
}

#drive-setup canvas {
  background: rgba(0, 0, 0, 0.04);
}

/* The Yes/No question over the map (2026-09-23). */
#drive-confirm {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 12px);
  z-index: 1200;
  padding: 12px 14px 12px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#drive-confirm[hidden] {
  display: none;
}

#drive-confirm-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}

#drive-confirm-text {
  margin: 0 0 4px;
  color: #444;
}

.drive-night #drive-confirm {
  background: #d9ddd9;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-confirm {
    left: auto;
    width: min(60vw, 520px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px + 62px);
  }
}

#drive-elev-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 12px);
  z-index: 1150;
  padding: 8px 12px 10px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Type size (2026-09-25): the driving displays scaled as a whole. */
.drive-type-large #drive-ahead,
.drive-type-large #drive-status,
.drive-type-large #drive-gauges,
.drive-type-large #drive-truck,
.drive-type-large #drive-wx,
.drive-type-large #drive-alert {
  zoom: 1.15;
}

.drive-type-xl #drive-ahead,
.drive-type-xl #drive-status,
.drive-type-xl #drive-gauges,
.drive-type-xl #drive-truck,
.drive-type-xl #drive-wx,
.drive-type-xl #drive-alert {
  zoom: 1.3;
}

/* The sunset row (2026-09-25): dusk amber. */
.drive-row-sun .drive-ahead-name {
  color: #b8641b;
}

/* Wide screens (2026-09-25, the owner at a computer): the panels and the
   sheets stretched edge to edge across a monitor. The bottom panels (find,
   elevation, Waze, the Yes/No question) and the card keep to a column at
   the left; the sheets (setup, listing, terms) sit as a centred column
   with the map showing either side. A phone turned sideways is under
   600 px tall and keeps the phone layout. */
@media (min-width: 900px) and (min-height: 600px) {
  #drive-find-panel,
  #drive-elev-panel,
  #drive-waze-panel,
  #drive-confirm,
  #drive-ahead {
    right: auto;
    width: min(560px, calc(100vw - 20px));
  }

  .drive-sheet {
    left: 50%;
    right: auto;
    width: min(760px, 100vw);
    transform: translateX(-50%);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
  }

  #drive-listing {
    left: 50%;
    right: auto;
    width: min(760px, calc(100vw - 24px));
  }
}

#drive-elev-panel[hidden] {
  display: none;
}

.drive-elev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-weight: 800;
}

#drive-elev-canvas {
  display: block;
  width: 100%;
  height: 150px;
}

#drive-elev-next {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #8a4a10;
}

#drive-elev-next:empty,
#drive-elev-text:empty {
  display: none;
}

#drive-elev-panel #drive-elev-text {
  margin: 4px 0 0;
  color: #555;
}

.drive-night #drive-elev-panel {
  background: #d9ddd9;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-elev-panel {
    left: auto;
    width: min(60vw, 520px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px + 62px);
  }

  #drive-elev-canvas {
    height: 110px;
  }
}

/* Saving from the road (2026-09-30): the Save button in a campground's
   popup and on the listing sheet, a heart once saved, and the note kept
   with the saved entry. */
.drive-save-btn.is-saved {
  background: #c8323a;
  border-color: #c8323a;
  color: #fff;
}

.drive-popup-note,
.drive-listing-note {
  margin: 4px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid #c8323a;
  background: rgba(200, 50, 58, 0.08);
  font-size: 14px;
  line-height: 1.35;
}

.drive-listing-note {
  margin: 0 0 12px;
  font-size: 15px;
}

/* The place boxes' own mic (2026-10-08): where the × sits while the box is empty. */
.drive-input-mic {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--drive-ink);
  font: inherit;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.drive-input-mic[hidden] { display: none; }
.drive-input-mic.drive-voice-on { background: #c62828; color: #fff; }
#drive-setup .drive-input-mic { background: #eef5ef; }

/* ---- The Gaia-style cleanup (2026-10-16, the owner: "there are a lot
   of icons on it") ----------------------------------------------------
   One line-icon set (the sprite in drive.html), one stack of white
   squares at the right (Find, Layers, Locate, the compass while the map
   is turned, clear-pins while pins are up), the drive's own actions
   alone in the bottom bar, and the quick settings (Talk, Sound, Night,
   Radar) on the sheet. The gauges and the truck column move to the left
   above the folded card's plate. These rules come last and override the
   plates' old fixed positions above. */
.drive-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#drive-exit .drive-icon,
#drive-menu-btn .drive-icon {
  width: 22px;
  height: 22px;
}

#drive-stack {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px);
  z-index: 1001;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

#drive-stack .drive-stack-btn,
#drive-find,
#drive-near-clear,
#drive-recentre,
#drive-headup,
#drive-layers {
  position: static;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  width: 48px;
  min-width: 0;
  height: 48px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #1f2a24;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#drive-stack .drive-stack-btn[hidden] {
  display: none;
}

#drive-stack .drive-stack-btn[aria-pressed="true"] {
  color: #1f7a3d;
}

#drive-near-clear {
  border: 2px solid #7a3fb0;
}

/* The bottom bar: the big Start/Stop at the left, Skip and Re-route
   beside it while they apply. */
#drive-controls {
  justify-content: flex-start;
  gap: 10px;
}

#drive-controls .drive-btn {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#drive-controls .drive-btn[hidden] {
  display: none;
}

#drive-controls .drive-btn .drive-icon {
  width: 26px;
  height: 26px;
}

.drive-moving #drive-controls .drive-btn {
  width: 60px;
  height: 60px;
}

/* The quick row on the sheet. */
.drive-quick {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

.drive-quick-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  padding: 8px 4px 6px;
  border: 1px solid #d3dad5;
  border-radius: 12px;
  background: #fff;
  color: #1f2a24;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.drive-quick-btn[aria-pressed="true"] {
  border-color: #1f7a3d;
  color: #1f7a3d;
  background: #eef6f0;
}

.drive-quick-btn.drive-voice-on {
  background: var(--drive-red);
  border-color: var(--drive-red);
  color: #fff;
}

.drive-quick-label {
  display: block;
  line-height: 1.1;
}

.drive-night .drive-quick-btn {
  background: #1d2420;
  border-color: #3a4740;
  color: #e4e9e5;
}

.drive-night .drive-quick-btn[aria-pressed="true"] {
  background: #203a2a;
  border-color: #3f8a56;
  color: #a9e3b8;
}

/* All campgrounds and Waze as rows on the sheet. */
#drive-area,
#drive-wazebtn {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #d3dad5;
  border-radius: 10px;
  background: #fff;
  color: #1f2a24;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

#drive-area .drive-icon,
#drive-wazebtn .drive-icon {
  width: 20px;
  height: 20px;
}

#drive-area[aria-pressed="true"] {
  border-color: #1f7a3d;
  color: #1f7a3d;
  background: #eef6f0;
}

/* The gauges to the left, above the folded card's plate when it shows;
   the truck and sensor column above them. */
#drive-gauges {
  left: 10px;
  right: auto;
}

.drive-plate-on #drive-gauges {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px);
}

#drive-truck {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 70px) !important;
}

.drive-plate-on #drive-truck {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px + 62px + 70px) !important;
}

#drive-gauges[hidden] ~ #drive-truck,
#drive-gauges[hidden] + #drive-truck {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + var(--card-h, 0px) + 22px) !important;
}
/* ---- The bottom sheet (2026-10-16, steps 3 to 5 of the cleanup) ------
   The card above the Start button holds the grabber and summary, the
   status rows with Skip and Re-route, the gauge strip with the vehicle
   chips, and - pulled up - the roads, the bridge, the pacing rows, the
   services and the campgrounds. The elements moved in keep their ids;
   these rules undo their old fixed positions. */
#drive-ahead {
  left: 10px;
  right: 10px;
  padding: 4px 12px 6px;
  border-radius: 16px;
}

.drive-grabber {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

#drive-ahead-toggle {
  display: block;
  padding: 2px 0 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--drive-muted);
}

#drive-ahead-toggle .drive-ahead-chevron {
  display: none;
}

.drive-turn-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#drive-status {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  touch-action: pan-y;
}

#drive-status::after {
  content: none;
}

#drive-status:empty {
  display: none;
}

#drive-status .drive-status-row:not(.drive-status-turn) {
  font-size: 13px;
  color: var(--drive-muted);
}

.drive-turn-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.drive-turn-actions:empty {
  display: none;
}

.drive-mini-act {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--drive-ink);
  cursor: pointer;
}

.drive-mini-act[hidden] {
  display: none;
}

.drive-mini-act .drive-icon {
  width: 20px;
  height: 20px;
}

/* The strip: speed, the limit sign, the elevation, then the truck and
   sensor chips, scrolling sideways when there are many. */
#drive-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

#drive-strip::-webkit-scrollbar {
  display: none;
}

#drive-strip:not(:has(:not([hidden]))) {
  display: none;
}

#drive-gauges,
#drive-truck {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  bottom: auto !important;
  left: auto;
  right: auto;
  pointer-events: auto;
}

#drive-gauges[hidden],
#drive-truck[hidden] {
  display: none;
}

#drive-speed,
#drive-elev-plate,
.drive-truck-plate {
  width: auto;
  min-width: 52px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--drive-ink);
  box-shadow: none;
  text-align: center;
  line-height: 1;
}

#drive-speed-value,
#drive-elev-value,
.drive-truck-plate > span:nth-child(2) {
  display: block;
  padding-top: 0;
  font-size: 18px;
  font-weight: 800;
}

#drive-speed .drive-speed-unit,
#drive-elev-plate .drive-speed-unit,
.drive-truck-plate .drive-speed-unit {
  color: var(--drive-muted);
  margin-top: 1px;
  font-size: 9px;
}

#drive-elev-icon,
.drive-truck-icon {
  font-size: 11px;
  line-height: 1;
}

#drive-speed.drive-speed-over {
  border-color: var(--drive-red);
  color: var(--drive-red);
}

.drive-truck-plate.drive-truck-amber {
  border-color: #e0a300;
  color: #ffd166;
}

.drive-truck-plate.drive-truck-red {
  border-color: var(--drive-red);
  color: #ff7a7a;
}

#drive-limit {
  width: auto;
  min-width: 44px;
  padding: 3px 8px 4px;
  border: 2px solid #111;
  border-radius: 6px;
  background: #fff;
  color: #111;
  box-shadow: none;
  line-height: 1;
}

#drive-limit .drive-limit-label {
  font-size: 7px;
}

#drive-limit-value {
  font-size: 18px;
}

.drive-moving #drive-speed-value,
.drive-moving #drive-limit-value {
  font-size: 22px;
}

.drive-ruuvi-plates {
  flex-direction: row;
}

/* The roads on offer, at the top of the rows. */
#drive-roads {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: none;
  margin: 4px 0 6px;
  touch-action: auto;
}

#drive-roads[hidden],
.drive-moving #drive-roads {
  display: none;
}

#drive-ahead-body {
  max-height: 50vh;
}

/* The footnote is the sheet's last line. */
#drive-footnote {
  position: static;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  text-align: center;
  font-size: 10px;
  color: var(--drive-muted);
}

/* The tent plate is retired; the summary line carries its words. */
#drive-camp-plate {
  display: none !important;
}

/* Landscape: the sheet is the right-hand column as before; inside it
   nothing else changes. */
@media (orientation: landscape) and (max-height: 520px) {
  #drive-ahead {
    padding: 4px 10px 6px;
  }

  #drive-ahead-body {
    max-height: calc(100vh - var(--top-h, 60px) - 200px);
  }
}
/* The sheet is white (the 2026-09-22 plates rule above), day and night,
   so what sits inside it is dark on light. */
#drive-status,
#drive-footnote {
  box-shadow: none;
  background: none;
}

#drive-ahead-toggle,
#drive-status .drive-status-row:not(.drive-status-turn),
#drive-footnote {
  color: #5a6a60;
}

.drive-grabber {
  background: rgba(0, 0, 0, 0.22);
}

.drive-mini-act {
  border-color: rgba(0, 0, 0, 0.18);
  background: #eef1ef;
  color: #111;
}

#drive-speed,
#drive-elev-plate,
.drive-truck-plate {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f3f5f3;
  color: #111;
}

#drive-speed .drive-speed-unit,
#drive-elev-plate .drive-speed-unit,
.drive-truck-plate .drive-speed-unit {
  color: #5a6a60;
}

.drive-truck-plate.drive-truck-amber {
  border-color: #c98a00;
  color: #a06c00;
}

.drive-truck-plate.drive-truck-red {
  border-color: var(--drive-red);
  color: var(--drive-red);
}

.drive-night #drive-speed,
.drive-night #drive-elev-plate,
.drive-night .drive-truck-plate,
.drive-night .drive-mini-act {
  background: #cfd4cf;
}
/* Landscape on a phone (the owner's screenshot, 2026-10-16): the sheet is
   a column at the left from under the strip to the bottom, the Start
   button and the stack keep the right, nothing overlaps. */
@media (orientation: landscape) and (max-height: 520px) {
  #drive-ahead {
    left: 10px;
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + 2px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: min(46%, 380px);
    display: flex;
    flex-direction: column;
  }

  #drive-ahead-body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
  }

  #drive-controls {
    left: auto;
    right: 10px;
    width: auto;
  }

  #drive-stack {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--controls-h, 62px) + 22px);
  }
}
/* ---- The strip across the bottom (the owner, 2026-10-16: "like Gaia
   does") ----------------------------------------------------------------
   The sheet sits on the screen's bottom edge, full width, never hidden.
   Folded it is one bar: the grabber, the next turn (the status' first
   row), the speed and the limit sign, and the Start button. Pulled up:
   the whole status with Skip and Re-route, every chip, the summary line
   and the rows. The right stack and the panels ride above it by its
   measured height (--card-h). */
#drive-ahead {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  display: block;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
  border-radius: 16px 16px 0 0;
}

#drive-ahead-toggle {
  padding: 6px 0 2px;
}

.drive-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drive-bar .drive-turn-row {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

/* Folded: the first status row alone, one line. */
#drive-ahead:not(.drive-ahead-open) #drive-status .drive-status-row:not(:first-child),
#drive-ahead:not(.drive-ahead-open) .drive-turn-actions,
#drive-ahead:not(.drive-ahead-open) #drive-truck,
#drive-ahead:not(.drive-ahead-open) #drive-elev-plate,
#drive-ahead:not(.drive-ahead-open) #drive-footnote {
  display: none;
}

#drive-ahead:not(.drive-ahead-open) #drive-status .drive-status-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#drive-ahead:not(.drive-ahead-open) .drive-status-turn {
  font-size: 1.1em;
}

/* The Start button is the bar's right end; the gauges sit between. */
#drive-controls {
  position: static;
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  bottom: auto;
  left: auto;
  right: auto;
  order: 3;
}

#drive-controls .drive-btn {
  width: 52px;
  height: 52px;
}

#drive-strip {
  margin: 6px 0 0;
}

#drive-ahead:not(.drive-ahead-open) #drive-strip {
  margin: 0;
}

/* Folded, the gauges share the bar: the strip is laid into it. */
#drive-ahead:not(.drive-ahead-open) .drive-bar {
  flex-wrap: nowrap;
}

#drive-ahead:not(.drive-ahead-open) #drive-gauges #drive-speed,
#drive-ahead:not(.drive-ahead-open) #drive-gauges #drive-limit {
  min-width: 44px;
  padding: 3px 8px;
}

#drive-ahead:not(.drive-ahead-open) #drive-speed-value {
  font-size: 16px;
}

#drive-ahead:not(.drive-ahead-open) #drive-limit-value {
  font-size: 15px;
}

.drive-ahead-summary {
  margin: 4px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #5a6a60;
}

#drive-ahead-body {
  max-height: 48vh;
}

/* Everything that sat above the old bottom bar now sits above the strip. */
#drive-stack,
#drive-find-panel,
#drive-elev-panel,
#drive-waze-panel,
#drive-confirm {
  bottom: calc(var(--card-h, 70px) + 12px);
}

#drive-stack {
  right: 10px;
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-ahead {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    display: block;
  }

  #drive-ahead-body {
    max-height: calc(100vh - var(--top-h, 60px) - 150px);
  }

  #drive-controls {
    right: auto;
  }

  #drive-stack {
    bottom: calc(var(--card-h, 70px) + 12px);
  }
}
/* The gauge strip is laid into the bar (HTML moved it there): folded,
   between the turn and Start; open, on its own full-width row under
   them with every chip. */
.drive-bar {
  flex-wrap: nowrap;
}

.drive-bar #drive-strip {
  flex: 0 0 auto;
  order: 2;
  margin: 0;
  max-width: 50%;
}

.drive-bar #drive-controls {
  order: 3;
}

.drive-ahead-open .drive-bar {
  flex-wrap: wrap;
}

.drive-ahead-open .drive-bar #drive-strip {
  flex: 1 1 100%;
  order: 4;
  max-width: none;
  margin: 8px 0 0;
}
/* Open, the turn row shrinks so Start keeps its place at the bar's right
   end; only the chip strip wraps under. */
.drive-ahead-open .drive-bar .drive-turn-row {
  flex: 1 1 0;
}
/* ---- Gaia's stat bar (the owner's screenshot, 2026-10-16 evening) ----
   One flat row of cells across the bottom: a small label over a big
   value, a thin rule between cells, every reading in the row at once
   (it scrolls sideways past the Start button, which stays put). The
   next turn is the first cell. No chips, no rounded corners. */
#drive-ahead {
  border-radius: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
}

#drive-ahead-toggle {
  padding: 4px 0 0;
}

.drive-grabber {
  margin-bottom: 2px;
}

.drive-bar,
.drive-ahead-open .drive-bar {
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 0 6px;
}

.drive-bar .drive-turn-row,
.drive-ahead-open .drive-bar .drive-turn-row {
  flex: 0 1 auto;
  max-width: 48%;
  min-width: 150px;
  padding: 0 10px 0 12px;
  gap: 6px;
}

.drive-ahead-open .drive-bar .drive-turn-row {
  max-width: none;
  flex: 1 1 0;
}

.drive-bar #drive-strip,
.drive-ahead-open .drive-bar #drive-strip {
  flex: 1 1 auto;
  order: 2;
  max-width: none;
  margin: 0;
  gap: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.drive-bar #drive-controls {
  padding: 0 10px 0 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

#drive-gauges,
#drive-truck,
.drive-ruuvi-plates {
  gap: 0;
}

/* Every reading shows in the folded bar too. */
#drive-ahead:not(.drive-ahead-open) #drive-truck:not([hidden]),
#drive-ahead:not(.drive-ahead-open) #drive-elev-plate:not([hidden]) {
  display: flex;
}

/* The cells. */
#drive-status::before,
#drive-speed .drive-speed-unit,
#drive-elev-plate .drive-speed-unit,
.drive-truck-plate .drive-speed-unit,
#drive-limit .drive-limit-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7a70;
  line-height: 1.1;
  margin: 0 0 2px;
}

#drive-status::before {
  content: "Status";
}

#drive-status:has(.drive-status-turn)::before {
  content: "Next turn";
}

#drive-speed,
#drive-elev-plate,
.drive-truck-plate,
#drive-limit,
#drive-ahead:not(.drive-ahead-open) #drive-gauges #drive-speed,
#drive-ahead:not(.drive-ahead-open) #drive-gauges #drive-limit {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
  padding: 2px 12px 0;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  white-space: nowrap;
}

.drive-night #drive-speed,
.drive-night #drive-elev-plate,
.drive-night .drive-truck-plate {
  background: none;
}

#drive-elev-icon,
.drive-truck-icon {
  display: none;
}

#drive-speed-value,
#drive-elev-value,
.drive-truck-plate > span:nth-child(2),
#drive-limit-value,
#drive-ahead:not(.drive-ahead-open) #drive-speed-value,
#drive-ahead:not(.drive-ahead-open) #drive-limit-value,
.drive-moving #drive-speed-value,
.drive-moving #drive-limit-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  padding: 0;
}

#drive-limit-value::after {
  content: " mph";
  font-size: 11px;
  font-weight: 600;
  color: #6b7a70;
}

#drive-speed.drive-speed-over #drive-speed-value {
  color: var(--drive-red);
}

/* The turn cell: label over the turn, one line while folded. */
#drive-status {
  padding-top: 2px;
}

#drive-ahead:not(.drive-ahead-open) .drive-status-turn,
.drive-status-turn {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

#drive-ahead:not(.drive-ahead-open) .drive-status-turn {
  font-size: 15px;
}

#drive-controls .drive-btn {
  width: 48px;
  height: 48px;
}

.drive-ahead-summary {
  padding: 0 12px;
}

#drive-ahead-body {
  padding: 0 12px;
}

#drive-ahead-body > *:not(.drive-ahead-summary) {
  margin-left: 0;
  margin-right: 0;
}

#drive-footnote {
  padding-bottom: 2px;
}
/* ---- The strip at the top, the icons at the left (the owner, 2026-10-16:
   "or top with icons on the left" - Gaia's own layout) ------------------
   The stat bar sits under the header, full width; a pull down on its
   grabber opens the rows under it. The icon stack moves to the lower
   left and Start/Stop to the lower right. */
#drive-ahead {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px));
  bottom: auto;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border-radius: 0 0 14px 14px;
}

#drive-ahead-toggle {
  order: 9;
  padding: 2px 0 4px;
}

.drive-grabber {
  margin: 0 auto;
}

.drive-bar {
  padding: 6px 0 4px;
}

/* Start/Stop is its own plate at the lower right. */
#drive-ahead #drive-controls {
  position: fixed;
  left: auto;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  order: 0;
  padding: 0;
  border: 0;
  z-index: 1001;
}

#drive-ahead #drive-controls .drive-btn {
  width: 56px;
  height: 56px;
}

/* The icon stack at the lower left. */
#drive-stack,
#drive-ahead ~ #drive-stack {
  left: 10px;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* The folded bar: the turn cell and the readings; the readings scroll. */
.drive-bar .drive-turn-row {
  max-width: 50%;
}

/* Open: the turn cell with the whole status and its actions on one row,
   the readings on the next, then the rows. */
.drive-ahead-open .drive-bar {
  flex-wrap: wrap;
}

.drive-ahead-open .drive-bar .drive-turn-row {
  flex: 1 1 100%;
  max-width: none;
  padding-bottom: 6px;
}

.drive-ahead-open .drive-bar #drive-strip {
  flex: 1 1 100%;
  border-left: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 6px;
}

.drive-ahead-open .drive-bar #drive-strip > :first-child > :first-child {
  padding-left: 12px;
}

#drive-ahead-body {
  max-height: calc(100vh - var(--top-h, 60px) - 170px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 6px;
}

/* The banners sit under the strip. */
#drive-alert,
#drive-wx,
#drive-ahead ~ #drive-alert,
#drive-ahead ~ #drive-wx {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + var(--card-h, 0px) + 2px);
}

#drive-alert:not([hidden]) ~ #drive-wx {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px) + var(--card-h, 0px) + 74px);
}

/* The bottom panels clear the two corner plates. */
#drive-find-panel,
#drive-elev-panel,
#drive-waze-panel,
#drive-confirm {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

@media (orientation: landscape) and (max-height: 520px) {
  #drive-ahead {
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 60px));
    bottom: auto;
    left: 0;
    right: 0;
  }

  #drive-ahead-body {
    max-height: calc(100vh - var(--top-h, 60px) - 120px);
  }

  #drive-stack,
  #drive-ahead ~ #drive-stack {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}
/* The limit cell reads like the others: its label above the value (its
   HTML already puts the label first; the owner's landscape screenshot,
   2026-10-16, showed it the other way up). */
#drive-limit,
#drive-ahead:not(.drive-ahead-open) #drive-gauges #drive-limit {
  flex-direction: column;
}

/* ---- The header folded: the strip takes the top edge (the owner's
   landscape screenshot, 2026-10-17: "Toolbar is low") ------------------
   A tap on the title folds the header to its two corner plates and
   --top-h goes to nought, but a landscape rule from the old layout still
   hung the strip 62 px down, under an empty band; in portrait it rose
   under the plates. Folded, the strip now sits on the top edge in both
   orientations and its bar leaves the ends to the plates - the back
   arrow at the left, the chevron and the menu at the right - which sit
   over the white band. The old folded-band rules for the status box and
   the road pills are stood down here: both live inside the strip now. */
.drive-top-folded #drive-ahead {
  top: env(safe-area-inset-top, 0px);
}

.drive-top-folded #drive-ahead .drive-bar {
  padding-left: 62px;
  padding-right: 116px;
}

.drive-top-folded #drive-status:not(.drive-box-moved),
.drive-top-folded #drive-wx:not([hidden]) ~ #drive-status {
  left: auto;
  top: auto;
  max-width: none;
}

.drive-top-folded #drive-roads:not(.drive-box-moved),
.drive-top-folded #drive-wx:not([hidden]):not(.drive-box-moved) ~ #drive-roads:not(.drive-box-moved) {
  right: auto;
  top: auto;
}

@media (orientation: landscape) and (max-height: 520px) {
  .drive-top-folded #drive-ahead {
    top: env(safe-area-inset-top, 0px);
  }

  .drive-top-folded #drive-status:not(.drive-box-moved) {
    max-width: none;
  }
}

/* The folded header paints over the strip (both were z 1000 and the
   strip, later in the page, hid the plates) and its plates read as
   plates on the white band. */
.drive-top-folded #drive-top {
  z-index: 1003;
}

.drive-top-folded #drive-exit,
.drive-top-folded #drive-menu-btn {
  background: #eef1ef;
}
/* ---- The speed and the limit on the map, Google's way (the owner,
   2026-10-18: "Let's do the speed and speed limit like Google. That will
   free up space on the main bar") ------------------------------------
   #drive-speedo holds the two gauges (the HTML moved them out of the
   strip): a round white plate with the speed and a US-style limit sign
   beside it, lower left, to the right of the icon stack and level with
   its bottom button; the plate's ring and figure turn red past the limit.
   The strip keeps the elevation and the truck's readings and fades at
   its right edge while a reading is hidden past it (.drive-strip-more,
   set by syncStripFade). The rules above that styled the two gauges as
   strip cells no longer reach them here; these win on the extra id. */
#drive-speedo {
  position: fixed;
  left: 68px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  font-family: var(--drive-font);
}

#drive-speedo[hidden],
.drive-sheet-open #drive-speedo {
  display: none;
}

#drive-speedo #drive-speed,
.drive-night #drive-speedo #drive-speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  min-width: 0;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

#drive-speedo #drive-speed-value {
  display: block;
  padding: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#drive-speedo #drive-speed .drive-speed-unit {
  display: block;
  margin: 2px 0 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555;
  line-height: 1;
}

#drive-speedo #drive-speed.drive-speed-over {
  border-color: var(--drive-red);
}

#drive-speedo #drive-speed.drive-speed-over #drive-speed-value {
  color: var(--drive-red);
}

#drive-speedo #drive-limit,
#drive-speedo #drive-limit.drive-limit-over {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 0;
  padding: 4px 0 5px;
  border: 2px solid #111;
  border-radius: 5px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

#drive-speedo #drive-limit[hidden] {
  display: none;
}

#drive-speedo #drive-limit .drive-limit-label {
  display: block;
  margin: 0 0 2px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
  line-height: 1.15;
}

#drive-speedo #drive-limit-value {
  display: block;
  padding: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#drive-speedo #drive-limit-value::after {
  content: none;
}

.drive-type-large #drive-speedo {
  zoom: 1.15;
}

.drive-type-xl #drive-speedo {
  zoom: 1.3;
}

/* The strip's right edge fades while more is hidden past it. */
#drive-strip.drive-strip-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.12));
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.12));
}