/* 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 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;
}