/* ==========================================================================
   Shared app shell — Map, Inspect and Drive.
   One set of tokens + one frame: top bar, left dock, context card,
   tool strip, status bar. Pages opt in with <body class="shell page-…">.
   lrv.html / diag.html keep using viewer.css and are not affected.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Core Stage palette */
  --sh-bg: #0e0f11;
  --sh-surface: rgba(22, 24, 27, 0.9);
  --sh-bar: rgba(16, 17, 19, 0.95);
  --sh-well: rgba(0, 0, 0, 0.3);
  --sh-raise: rgba(236, 236, 234, 0.05);
  --sh-ink: #ececea;
  --sh-on-ink: #101113;
  --sh-muted: #979a9e;
  --sh-faint: #63666b;
  --sh-line: rgba(236, 236, 234, 0.09);
  --sh-line-2: rgba(236, 236, 234, 0.17);
  --sh-accent: #e4692a;
  --sh-accent-rgb: 228, 105, 42;
  --sh-accent-ink: #fff7f0;
  --sh-accent-soft: rgba(228, 105, 42, 0.15);
  --sh-data: #ececea;

  --sh-f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sh-f-ui: "Instrument Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --sh-f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  --sh-top-h: 52px;
  --sh-status-h: 32px;
  --sh-gap: 12px;
  --sh-dock-w: 300px;
  --sh-card-w: 292px;

  /* Aliases so drive.css / leaflet overrides written against the old
     viewer.css tokens keep working inside the shell. */
  --bg: var(--sh-bg);
  --panel: var(--sh-surface);
  --ink: var(--sh-ink);
  --muted: var(--sh-muted);
  --accent: var(--sh-accent);
  --line: var(--sh-line);
  --font-display: var(--sh-f-display);
  --font-body: var(--sh-f-ui);
}

* {
  box-sizing: border-box;
}

html,
body.shell {
  margin: 0;
  height: 100%;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font-family: var(--sh-f-ui);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
}

body.shell [hidden] {
  display: none !important;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sh-mono {
  font-family: var(--sh-f-mono);
  font-variant-numeric: tabular-nums;
}

.sh-lbl {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sh-faint);
  font-weight: 600;
}

.sh-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sh-muted);
}

.sh-glass {
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Full-bleed view behind the shell */
body.shell #c {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------- buttons & small controls ---------- */

.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font: 500 12.5px var(--sh-f-ui);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.sh-btn:hover {
  border-color: rgba(236, 236, 234, 0.32);
}

.sh-btn:focus-visible,
.sh-iconbtn:focus-visible,
.sh-modes a:focus-visible,
.sh-tabs button:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 1px;
}

.sh-btn.primary {
  background: var(--sh-accent);
  border-color: var(--sh-accent);
  color: var(--sh-accent-ink);
  font-weight: 600;
}

.sh-btn.primary:hover {
  filter: brightness(1.08);
}

.sh-btn[aria-pressed="true"],
.sh-btn.active {
  background: var(--sh-accent-soft);
  border-color: var(--sh-accent);
  color: var(--sh-accent);
}

.sh-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sh-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
  color: var(--sh-muted);
  cursor: pointer;
}

.sh-iconbtn:hover {
  color: var(--sh-ink);
}

.sh-iconbtn svg,
.sh-btn svg {
  width: 15px;
  height: 15px;
}

.sh-iconbtn.ghost {
  border-color: transparent;
  background: none;
  width: 26px;
  height: 26px;
}

/* Segmented control (Real date / Manual, dock tabs) */
.sh-seg,
.sh-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-well);
}

.sh-seg > button,
.sh-tabs > button {
  flex: 1 1 0;
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sh-muted);
  font: 500 12.5px var(--sh-f-ui);
  cursor: pointer;
  white-space: nowrap;
}

.sh-seg > button:hover,
.sh-tabs > button:hover {
  color: var(--sh-ink);
}

.sh-seg > button.is-active,
.sh-seg > button[aria-selected="true"],
.sh-tabs > button[aria-selected="true"] {
  background: var(--sh-ink);
  color: var(--sh-on-ink);
}

/* Objective switch (Inspect): First landing / Future base. The selected side is orange, not white, so it does not read as
   the Layers / Landing sites tabs above it. */
.obj-seg > button[aria-selected="true"] {
  background: var(--sh-accent);
  color: var(--sh-accent-ink);
}

.obj-hint {
  margin: 6px 2px 0;
  color: var(--sh-muted);
  font: 400 12px/1.35 var(--sh-f-ui);
}

.page-inspect label.mode[hidden] {
  display: none;
}

/* Show list (Inspect): a switch per layer, settings behind a chevron */
.show-grp {
  margin-top: 0;
}

.show-row {
  border-top: 1px solid var(--sh-line-2);
}

.show-h {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Layer preview: the baked thumbnail of the site, or a gradient where there is none */
.show-sw {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--sh-line-2);
  background: var(--thumb, none) center / cover no-repeat, #2b2b30;
}

.show-sw[data-sw="sun"] { background: var(--thumb, none) center / cover no-repeat, radial-gradient(circle at 25% 30%, #d9d4c8, #3a3833 55%, #0d0d0f); }
.show-sw[data-sw="earth"] { background: linear-gradient(135deg, #0c1a33, #2d6fd6 55%, #9cc8ff); }
.show-sw[data-sw="slope"] { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(89, 199, 107), rgb(242, 224, 31) 40%, rgb(250, 122, 15) 60%, rgb(158, 20, 184)); }
.show-sw[data-sw="psr"] { background: linear-gradient(135deg, rgb(168, 158, 145) 0%, rgb(168, 158, 145) 50%, rgb(30, 72, 184) 52%); }
.show-sw[data-sw="spots"] { background: radial-gradient(circle at 35% 40%, #ffc61a 0 22%, transparent 24%), radial-gradient(circle at 70% 65%, #ffc61a 0 14%, transparent 16%), linear-gradient(135deg, #8d877c, #3b3934); }
.show-sw[data-sw="suit"] { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(30, 30, 36), rgb(184, 133, 36) 50%, rgb(56, 224, 107)); }
.show-sw[data-sw="contsun"] { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(8, 12, 40), rgb(40, 140, 180) 40%, rgb(255, 140, 30) 75%, rgb(255, 240, 160)); }
.show-sw[data-sw="contearth"] { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(15, 10, 56), rgb(20, 122, 184) 40%, rgb(26, 199, 173) 70%, rgb(235, 250, 240)); }
/* Future Bases thumbnails are photos: no outline */
.show-sw[data-sw="suit"], .show-sw[data-sw="contsun"], .show-sw[data-sw="contearth"] { border: 0; }


.show-note {
  margin: 2px 0 0;
  color: var(--sh-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.show-about {
  margin-top: 10px;
  color: var(--sh-muted);
  font-size: 12px;
}

.show-about summary {
  cursor: pointer;
}

.show-about .layer-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
}

.show-toggle {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 0;
}

.show-toggle strong {
  display: block;
  font-weight: 600;
}

.show-toggle small {
  display: block;
  color: var(--sh-muted);
  font-size: 11.5px;
}

.show-more {
  flex: none;
}

.show-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.show-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.show-set {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 2px 0 10px;
}

.show-set[hidden] {
  display: none;
}

.show-note {
  flex: 1 0 100%;
}

/* Each setting is a small stacked cell (label over control) so related ones share a row. */
.show-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 11.5px;
  color: var(--sh-muted);
  min-width: 0;
}

.show-field > span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
}

.show-field.f-select { flex: 1 1 84px; }
.show-field.f-view { flex: 1 1 100%; } /* the View choice of Sunlight / Earth link: its own row, its names are long */
.show-field.f-range { flex: 1 1 64px; }
.show-field.f-check { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 6px; }
.show-field.f-check input { margin: 0; }
.show-field.f-number { flex: 1 1 calc(50% - 4px); }
.show-field.f-deg { flex: 0 0 56px; }
.show-field.f-color { flex: 0 0 44px; align-items: flex-start; }

.show-field input[type="range"] {
  width: 100%;
  margin: 0;
  height: 24px;
}

.show-field input[type="color"] {
  width: 36px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 6px;
  background: var(--sh-well);
  cursor: pointer;
}

.show-field select,
.show-field input[type="number"] {
  width: 100%;
  min-width: 0;
  padding-left: 6px;
  padding-right: 4px;
  text-overflow: ellipsis;
}

.show-field[hidden] {
  display: none;
}

.show-field output {
  font-variant-numeric: tabular-nums;
}

/* Switch-styled checkbox */
.sh-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--sh-ink);
  cursor: pointer;
}

.sh-toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 16px;
  margin: 0;
  border-radius: 9px;
  background: var(--sh-line-2);
  cursor: pointer;
  transition: background 0.15s ease;
}

.sh-toggle input::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sh-muted);
  transition: left 0.15s ease;
}

.sh-toggle input:checked {
  background: var(--sh-accent);
}

.sh-toggle input:checked::after {
  left: 14px;
  background: var(--sh-accent-ink);
}

.sh-toggle input:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 2px;
}

body.shell input[type="range"] {
  accent-color: var(--sh-accent);
}

.sh-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-well);
  color: var(--sh-ink);
  font: 13px var(--sh-f-ui);
  color-scheme: dark;
}

.sh-input:focus {
  outline: none;
  border-color: var(--sh-accent);
}

.sh-input::placeholder {
  color: var(--sh-faint);
}

.sh-grp {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ---------- 1 · top bar ---------- */

.sh-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--sh-top-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 var(--sh-gap);
  background: var(--sh-bar);
  border-bottom: 1px solid var(--sh-line);
}

.sh-left,
.sh-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sh-right {
  justify-content: flex-end;
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sh-brand img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  position: relative;
  top: -1px;
}

.sh-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sh-brand-text small {
  display: block;
  margin: 0 0 5px;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sh-accent);
  font-weight: 600;
}

.sh-brand-text b {
  display: block;
  font-family: var(--sh-f-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sh-modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sh-line-2);
  border-radius: 9px;
  background: var(--sh-well);
}

.sh-modes a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 6px;
  color: var(--sh-muted);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.sh-modes a:hover {
  color: var(--sh-ink);
}

.sh-modes a svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Map with no site chosen: Inspect / Drive need one. */
.sh-modes a.is-disabled {
  opacity: 0.38;
  cursor: default;
}

.sh-modes a.is-disabled:hover {
  color: var(--sh-muted);
}

.sh-modes a[aria-current="page"] {
  background: var(--sh-ink);
  color: var(--sh-on-ink);
  pointer-events: none;
}

.sh-modes kbd,
.sh-kbd {
  font-family: var(--sh-f-mono);
  font-size: 10px;
  line-height: 15px;
  padding: 0 4px;
  border: 1px solid var(--sh-line-2);
  border-radius: 3px;
  color: var(--sh-faint);
}

.sh-modes a[aria-current="page"] kbd {
  color: inherit;
  border-color: currentColor;
  opacity: 0.55;
}

.sh-sun {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-raise);
  font-size: 12px;
  color: var(--sh-muted);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.sh-sun svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--sh-accent);
}

.sh-sun .sh-mono {
  color: var(--sh-ink);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Help / about popover */
.sh-pop {
  position: fixed;
  top: calc(var(--sh-top-h) + 8px);
  right: var(--sh-gap);
  z-index: 45;
  width: min(400px, calc(100vw - 2 * var(--sh-gap)));
  max-height: calc(100vh - var(--sh-top-h) - 24px);
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: var(--sh-bar);
  border: 1px solid var(--sh-line-2);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.sh-pop h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.sh-pop p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sh-muted);
}

.sh-pop a {
  color: var(--sh-accent);
}

.sh-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 12.5px;
}

.sh-keys dt {
  margin: 0;
}

.sh-keys dd {
  margin: 0;
  color: var(--sh-muted);
}

.sh-about {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sh-line);
}

.sh-about details {
  border-top: 1px solid var(--sh-line);
  padding-top: 8px;
}

.sh-about summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sh-about summary::-webkit-details-marker {
  display: none;
}

.sh-about summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.7;
}

.sh-about details[open] > summary::before {
  transform: rotate(45deg);
}

.sh-about details > p,
.sh-about details > ul {
  margin-top: 8px;
}

.sh-about details > p + p {
  margin-top: 6px;
}

.sh-about ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sh-muted);
}

.sh-about li b {
  color: var(--sh-ink);
  font-weight: 500;
}

.sh-about-foot {
  font-size: 12px;
}

/* ---------- 2 · left dock ---------- */

.sh-dock {
  position: fixed;
  left: var(--sh-gap);
  top: calc(var(--sh-top-h) + var(--sh-gap));
  bottom: calc(var(--sh-status-h) + var(--sh-gap));
  z-index: 20;
  width: var(--sh-dock-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip; /* unlike hidden, focus can't scroll the header out of view */
}

.sh-dock-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--sh-line);
}

.sh-dock-h h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sh-count {
  margin-left: 6px;
  font: 500 11px var(--sh-f-mono);
  color: var(--sh-muted);
}

.sh-count:empty {
  display: none;
}

.sh-dock-h .sh-tabs {
  flex: 1 1 auto;
}

.sh-dock-b {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 12px 16px;
  scrollbar-width: thin;
}

.sh-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-dock.collapsed {
  bottom: auto;
}

/* Inspect / Drive: the panel hugs its content and only grows to the full
   height (then scrolls) when the content needs it. */
@media (min-width: 721px) {
  .page-inspect .sh-dock,
  .page-drive .sh-dock {
    bottom: auto;
    max-height: calc(100vh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap));
    max-height: calc(100dvh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap));
  }
}

.sh-dock.collapsed .sh-dock-b {
  display: none;
}

.sh-dock.collapsed .sh-dock-h {
  border-bottom: 0;
}

.sh-dock-toggle svg {
  transition: transform 0.15s ease;
}

.sh-dock.collapsed .sh-dock-toggle svg {
  transform: rotate(180deg);
}

/* Map: sun-lighting controls pinned under the scrolling site list (the list scrolls above them). */
.sh-dock-f {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--sh-line);
}

.sh-dock.collapsed .sh-dock-f {
  display: none;
}

/* Map dock sections (Sites, Sun & layers): each folds on its own header.
   Phones use the Sites / Layers switch instead, so the wrappers vanish there. */
.sh-sec {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#sec-sites {
  flex: 1 1 auto;
}

#sec-layers {
  flex: 0 0 auto;
}

.sh-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid var(--sh-line);
  background: none;
  color: var(--sh-ink);
  font: 600 13px var(--sh-f-ui);
  letter-spacing: 0.01em; /* same weight and size as the panel title */
  cursor: pointer;
}

#sec-sites > .sh-sec-h {
  border-top: 0;
}

.sh-sec-h:hover {
  color: var(--sh-ink);
}

.sh-sec-h:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: -2px;
}

.sh-sec-h svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.sh-sec.closed .sh-sec-h svg {
  transform: rotate(-90deg);
}

@media (min-width: 721px) {
  .sh-sec.closed > :not(.sh-sec-h):not(.sh-info) {
    display: none;
  }

  #sec-sites.closed {
    flex: 0 0 auto;
  }
}

.sh-dock.collapsed .sh-sec {
  display: none;
}

@media (max-width: 720px) {
  .page-map .sh-sec {
    display: contents;
  }

  .page-map .sh-sec-h {
    display: none;
  }
}

/* Map, larger screens: the left column holds two blocks, Landing sites (takes the free height, its list scrolls) and
   Layers (as tall as its content). Phones keep one sheet with a Sites / Layers switch: map.js moves the Layers section
   into the dock there and this column vanishes. */
@media (min-width: 721px) {
  .sh-leftcol {
    position: fixed;
    left: var(--sh-gap);
    top: calc(var(--sh-top-h) + var(--sh-gap));
    bottom: calc(var(--sh-status-h) + var(--sh-gap));
    z-index: 20;
    width: var(--sh-dock-w);
    display: flex;
    flex-direction: column;
    gap: var(--sh-gap);
    pointer-events: none; /* the gap between the blocks is the map's */
  }

  .sh-leftcol > * {
    pointer-events: auto;
  }

  .page-map .sh-leftcol > .sh-dock {
    position: static;
    width: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .page-map .sh-leftcol > .sh-dock.collapsed {
    flex: 0 0 auto;
  }

  .sh-dock-layers {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sh-dock-layers .sh-sec-h {
    border-top: 0;
  }

  .sh-dock-layers .sh-info {
    top: 7px;
  }

  body:has(#sh-dock.collapsed) .sh-dock-layers {
    display: none;
  }
}

@media (max-width: 720px) {
  .sh-leftcol {
    display: contents;
  }

  .sh-dock-layers {
    display: none;
  }
}

/* Legend chips: a tiny sample of how each layer looks, next to its toggle */
.lg-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.lg {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.lg-sun { background: linear-gradient(135deg, #0a0a0b 0 38%, #d8d6d0); }
.lg-shine { background: linear-gradient(135deg, #0b0c10, #6f86ad); }
.lg-vis { background: rgba(96, 150, 235, 0.35); border: 1.5px solid #73b8ff; }
.lg-sites { border: 1.5px solid rgba(236, 236, 234, 0.9); border-radius: 2px; }
.lg-grid {
  border: 1px solid rgba(236, 236, 234, 0.4);
  border-radius: 50%;
  background:
    linear-gradient(rgba(236, 236, 234, 0.8), rgba(236, 236, 234, 0.8)) center / 100% 1px no-repeat,
    linear-gradient(rgba(236, 236, 234, 0.8), rgba(236, 236, 234, 0.8)) center / 1px 100% no-repeat;
}

/* ⓘ in the Sun & layers header opens the legend card (desktop); it sits
   beside the header button, not inside it */
.sh-sec {
  position: relative;
}

.sh-info {
  position: absolute;
  top: 5px;
  right: 40px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sh-faint);
  cursor: pointer;
}

.sh-info svg {
  width: 15px;
  height: 15px;
}

.sh-info:hover,
.sh-info[aria-expanded="true"] {
  color: var(--sh-ink);
}

.sh-info:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 1px;
}

.sh-sec.closed > .sh-info {
  display: none;
}

#legend-pop {
  left: calc(var(--sh-gap) * 2 + var(--sh-dock-w));
  right: auto;
  top: auto;
  bottom: calc(var(--sh-status-h) + var(--sh-gap));
  width: 300px;
}

.lg-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: start;
  margin: 0;
}

.lg-list dt {
  margin: 2px 0 0;
}

.lg-list dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sh-muted);
}

.lg-list dd b {
  display: block;
  color: var(--sh-ink);
  font-weight: 500;
}

@media (max-width: 720px) {
  /* phones: the chips beside the toggles are the legend (the Layers tab has room) */
  .sh-info,
  #legend-pop {
    display: none !important;
  }
}

/* Sites / Layers switch: phones only (the desktop dock shows both at once) */
.sh-dock-views {
  display: none;
}

/* ---------- Map: layer pills ---------- */

.sh-dock-f .sh-lbl,
.lit-overwrap .sh-lbl {
  margin: 0;
}

/* Two columns: Lighting on the left, Map on the right, the pills one under the other */
.lit-overwrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 7px 10px;
  padding: 4px 12px 12px;
}

#lit-info {
  grid-column: 1 / -1;
  grid-row: 3;
}

.lit-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lit-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 9px;
  margin: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 14px;
  background: transparent;
  color: var(--sh-muted);
  font: 500 12px var(--sh-f-ui);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.lit-pill:hover {
  color: var(--sh-ink);
  border-color: rgba(236, 236, 234, 0.32);
}

.lit-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.lit-pill:has(input:checked) {
  background: var(--sh-accent-soft);
  border-color: rgba(var(--sh-accent-rgb), 0.6);
  color: var(--sh-ink);
}

.lit-pill:has(input:focus-visible) {
  outline: 2px solid var(--sh-accent);
  outline-offset: 1px;
}

.lit-pill:has(input:disabled) {
  opacity: 0.4;
  cursor: default;
}

#lit-info:empty {
  display: none;
}

/* ---------- Map: landing window planner ----------
   Shown once a site is selected: a floating card along the bottom of the map, right of the left panel.
   On phones map.js moves it into the Layers tab of the bottom sheet. */

.sh-timebar {
  position: fixed;
  left: calc(var(--sh-dock-w) + 2 * var(--sh-gap));
  right: var(--sh-gap);
  bottom: calc(var(--sh-status-h) + var(--sh-gap));
  z-index: 20;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 224px;
  gap: 16px;
  padding: 12px 14px;
}

/* Inspect: the planner without the Power / Comms tiles, as short as it can be (it covers the scene): no title row, the
   three controls stacked two high instead of four */
.sh-timebar.no-tiles {
  grid-template-columns: 250px minmax(0, 1fr);
  padding: 10px 14px;
}

.no-tiles .tb-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-content: center;
  gap: 8px 10px;
}

.no-tiles .tb-f-land {
  grid-column: 1 / -1;
}

.no-tiles .tb-h-r {
  display: flex;
  align-items: center;
  gap: 8px;
}

.no-tiles .tb-main {
  grid-template-rows: minmax(104px, 1fr);
}

.no-tiles .tb-stepper {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
}

.no-tiles #tb-stay-v {
  white-space: nowrap;
  font-size: 12px;
}

.tb-depart-v {
  display: flex;
  align-items: center;
  height: 32px;
  font: 400 12.5px var(--sh-f-mono);
  color: var(--sh-ink);
}

@media (min-width: 721px) {
  /* Measure and Reset view sit at the top centre of the 3D view, the bottom belongs to the mission window */
  .page-inspect .sh-tools {
    top: calc(var(--sh-top-h) + var(--sh-gap));
    bottom: auto;
  }

  /* the mission window runs the full width along the bottom; the left panel and the probe card stop above it */
  body.page-inspect .sh-timebar {
    left: var(--sh-gap);
  }

  .page-inspect .sh-dock {
    bottom: calc(var(--sh-status-h) + 2 * var(--sh-gap) + var(--tb-h, 0px));
  }

  .page-inspect .sh-card {
    max-height: calc(100vh - var(--sh-top-h) - var(--sh-status-h) - 3 * var(--sh-gap) - var(--tb-h, 0px));
  }
}

/* Future base has no dates */
body[data-objective="base"] .sh-timebar {
  display: none;
}

/* left section: the time controls and the bars */
.tb-main {
  display: grid;
  grid-template-rows: auto minmax(116px, 1fr); /* the chart takes all the height the card has */
  gap: 6px;
  min-width: 0;
  container-type: inline-size; /* the controls give up labels and widths as this column narrows (see @container below) */
}

body:has(#sh-dock.collapsed) .sh-timebar,
body:has(#sh-dock.collapsed) .sh-timehint {
  left: var(--sh-gap);
}

/* title row: the site and its status */
.tb-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 0 34px; /* room for the ⓘ on the right, mirrored on the left so the title is truly centred */
}

.tb-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tb-title b {
  font-family: var(--sh-f-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--sh-ink);
}

.tb-badge {
  flex: none;
  padding: 1px 9px;
  border: 1px solid var(--sh-line-2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--sh-muted);
}

.tb-badge:empty {
  display: none;
}

.tb-top .tb-info {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

/* left: the control panel for time. Land, Stay, Play, in one rhythm: 12px label row, 32px control */
.tb-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-right: 16px;
  border-right: 1px solid var(--sh-line);
}

.tb-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tb-field-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
}

.tb-lbl {
  font: 500 12px var(--sh-f-ui);
  color: var(--sh-muted);
  white-space: nowrap;
}

/* the panel's own heading: what this block is for */
.tb-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tb-ph-t {
  margin: 0;
  font: 600 13px var(--sh-f-ui);
  letter-spacing: 0.01em;
  color: var(--sh-ink);
}

.tb-ph .tb-play-btn {
  width: auto;
  height: 28px;
  padding: 0 11px;
}

.tb-ph-s {
  margin: -6px 0 0;
  font-size: 11.5px;
  color: var(--sh-muted);
}

/* a read-only value in the same rhythm as the labels above */
.tb-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tb-field-row output {
  font: 400 12.5px var(--sh-f-mono);
  color: var(--sh-ink);
}

.tb-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 12px var(--sh-f-ui);
  color: var(--sh-accent);
  cursor: pointer;
}

.tb-link:hover {
  text-decoration: underline;
}

.tb-panel .sh-input {
  width: 100%;
  height: 32px;
  padding: 0 6px 0 9px;
  font-size: 12px;
}

.tb-panel .sh-input::-webkit-calendar-picker-indicator {
  margin: 0 0 0 4px;
  padding: 0;
  opacity: 0.6;
  cursor: pointer;
}

/* the stay as one segmented control */
.tb-stepper {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: stretch;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
}

.tb-stepper button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sh-ink);
  font: 400 17px var(--sh-f-ui);
  cursor: pointer;
}

.tb-stepper button:hover:not(:disabled) {
  background: rgba(236, 236, 234, 0.08);
}

.tb-stepper button:disabled {
  opacity: 0.3;
  cursor: default;
}

.tb-stepper button:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: -2px;
}

#tb-stay-v {
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--sh-line);
  font-family: var(--sh-f-mono);
  font-size: 12.5px;
  color: var(--sh-ink);
}

/* the two bars + the landing window */
.tb-chart {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.tb-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}

.tb-tick { stroke: var(--sh-line); stroke-width: 1; }
.tb-xlab { fill: var(--sh-faint); font: 10.5px var(--sh-f-mono); }
.tb-xlab-on { fill: var(--sh-accent-ink); }
.tb-strip-l { fill: var(--sh-muted); font: 500 12px var(--sh-f-ui); }
.tb-dot-sun { fill: #ffd37a; }
.tb-dot-earth { fill: #73b8ff; }
.tb-strip-bg { fill: rgba(236, 236, 234, 0.07); }
.tb-up-sun { fill: rgba(242, 194, 95, 0.5); }
.tb-up-earth { fill: rgba(90, 165, 240, 0.5); }
.tb-edge { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.tb-edge-sun { stroke: #f2c25f; }
.tb-edge-earth { stroke: #5aa5f0; }
.tb-half { stroke: rgba(236, 236, 234, 0.12); stroke-width: 1; stroke-dasharray: 2 3; }
.tb-win { fill: rgba(var(--sh-accent-rgb), 0.14); stroke: var(--sh-accent); stroke-width: 1.5; }
.tb-win-tab { fill: var(--sh-accent); }
.tb-win-lab { fill: var(--sh-accent-ink); font: 600 11.5px var(--sh-f-ui); pointer-events: none; }
.tb-win-handle { fill: var(--sh-accent-ink); opacity: 0.9; }
.tb-play { stroke: var(--sh-ink); stroke-width: 1.5; }
.tb-xport circle { fill: rgba(236, 236, 234, 0.1); stroke: var(--sh-line-2); stroke-width: 1; }
.tb-xport path,
.tb-xport rect { fill: var(--sh-ink); }
.tb-flag { fill: var(--sh-ink); }
.tb-flag-t { fill: var(--sh-bg); font: 600 10.5px var(--sh-f-mono); pointer-events: none; }

/* the Power and Comms tiles, right of the bars */
.tb-play-btn {
  width: 100%; /* in the panel it spans the column; otherwise it is a plain .sh-btn like Now */
}

/* right section: the numbers, as tall as the whole card */
.tb-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--sh-line);
}

.dash-tile {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--sh-line);
  border-radius: 8px;
  background: var(--sh-well);
  --dash-c: var(--sh-ink);
}

.dash-tile.sun { --dash-c: #f2c25f; }
.dash-tile.earth { --dash-c: #5aa5f0; }

.dt-name {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dash-c);
}

.dt-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 8px;
}

.dash-tile b {
  flex: none;
  font-family: var(--sh-f-mono);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--dash-c);
  font-variant-numeric: tabular-nums;
}

.dash-tile span {
  font-size: 12px;
  line-height: 1.3;
  color: var(--sh-ink);
}

/* (i) buttons in the planner: click for a small card (initInfo in missionTimeline.js) */
.tb-info {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sh-faint);
  cursor: pointer;
}

.tb-info svg {
  width: 15px;
  height: 15px;
}

.tb-info:hover,
.tb-info[aria-expanded="true"] {
  color: var(--sh-ink);
}

.tb-info:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 1px;
}

.dash-tile .tb-info {
  position: absolute;
  top: 3px;
  right: 4px;
}

.tb-pop {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 60;
  width: min(300px, calc(100vw - 16px));
  gap: 8px;
}

.tb-pop[hidden] {
  display: none;
}

.tb-pop p b {
  color: var(--sh-ink);
  font-weight: 500;
}

/* no site selected: the date the map is lit for, and 15 days to drag it along */
.sh-timehint {
  position: fixed;
  left: calc(var(--sh-dock-w) + 2 * var(--sh-gap));
  right: var(--sh-gap);
  bottom: calc(var(--sh-status-h) + var(--sh-gap));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--sh-ink);
}

.tbh-row {
  display: contents; /* the controls and the track share one row */
}

.tbh-msg {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-timehint .tb-hint-d {
  margin-left: 6px;
  color: var(--sh-faint);
}

.sh-timehint .tb-play-btn {
  width: auto;
  min-width: 84px;
}

.sh-timehint .sh-input {
  width: 190px;
}

.tbh-track {
  display: block;
  flex: 1 1 0;
  min-width: 160px;
  width: 0;
  height: 34px;
  margin-left: 6px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tbh-track.dragging {
  cursor: grabbing;
}

/* Zoom / whole pole: a small column in the map's top-right corner */
@media (min-width: 721px) {
  .page-map .sh-tools {
    flex-direction: column;
    top: calc(var(--sh-top-h) + var(--sh-gap));
    right: var(--sh-gap);
    bottom: auto;
    left: auto;
    transform: none;
    max-width: none;
    padding: 4px;
  }

  /* the legend card sits just above the planner */
  #legend-pop {
    bottom: calc(var(--sh-status-h) + 2 * var(--sh-gap) + var(--tb-h, 110px));
  }
}

@media (max-width: 1100px) {
  .sh-timebar {
    grid-template-columns: 180px minmax(0, 1fr) 200px;
  }

  .sh-timebar.no-tiles {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
  }

  .tb-panel {
    padding-right: 14px;
  }

  .tb-tiles {
    padding-left: 14px;
  }

  .dash-tile b {
    font-size: 22px;
  }

  .dash-tile {
    padding: 6px 10px;
  }
}

@media (max-width: 720px) {
  .sh-timehint {
    display: none;
  }

  /* phones: map.js moves the planner into the Layers tab */
  .sh-dock .sh-timebar {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 10px 8px;
    padding: 10px 12px 12px;
    border: 1px solid var(--sh-line);
    border-radius: 8px;
    background: var(--sh-well);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sh-dock .tb-panel {
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--sh-line);
  }

  .sh-dock .sh-timebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .sh-dock .tb-tiles {
    grid-template-rows: auto auto auto;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--sh-line);
  }

  .sh-dock .dash-tile {
    padding: 8px 10px;
  }

  /* the Layers tab (pills + planner) scrolls as a whole; the Sites tab hides it */
  .page-map .sh-dock[data-view="sites"] #sec-layers {
    display: none;
  }

  .page-map .sh-dock[data-view="layers"] #sec-layers {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .lit-pill {
    height: 32px;
  }
}

/* ---------- 3 · context card ---------- */

.sh-card {
  position: fixed;
  right: var(--sh-gap);
  top: calc(var(--sh-top-h) + var(--sh-gap));
  z-index: 20;
  width: var(--sh-card-w);
  max-height: calc(100vh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap));
  overflow: auto;
  scrollbar-width: thin;
}

.sh-card-sec {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.sh-card-sec + .sh-card-sec {
  border-top: 1px solid var(--sh-line);
}

.sh-card h3 {
  margin: 0;
  font-family: var(--sh-f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
}

.sh-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
}

.sh-kv > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sh-kv dt {
  font-size: 10.5px;
  color: var(--sh-faint);
}

.sh-kv dd {
  margin: 0;
  font-family: var(--sh-f-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4 · tool strip ---------- */

.sh-tools {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sh-status-h) + var(--sh-gap));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  max-width: calc(100vw - 2 * var(--sh-dock-w) - 6 * var(--sh-gap));
}

.sh-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--sh-line-2);
  flex: 0 0 auto;
}

/* ---------- 5 · status bar ---------- */

.sh-status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--sh-status-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  font-size: 11.5px;
  color: var(--sh-muted);
  background: var(--sh-bar);
  border-top: 1px solid var(--sh-line);
  white-space: nowrap;
  overflow: hidden;
}

.sh-status .sh-mono {
  color: var(--sh-ink);
  font-size: 11.5px;
}

.sh-status-l {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
}

.sh-status-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.sh-status a {
  color: var(--sh-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--sh-faint);
}

.sh-status a:hover {
  color: var(--sh-ink);
}

.sh-site-name {
  color: var(--sh-ink);
  font-weight: 500;
}

/* ---------- landing-site list (Map dock + Inspect/Drive tab) ---------- */

.sh-sites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-sites li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.sh-sites li:hover,
.sh-sites li:focus-visible {
  background: var(--sh-raise);
  outline: none;
}

.sh-sites li.active,
.sh-sites li[aria-selected="true"] {
  background: var(--sh-accent-soft);
  border-color: rgba(var(--sh-accent-rgb), 0.45);
}

.sh-sites img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--sh-line);
  background: #0a0b0e;
}

.sh-sites .name {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  color: var(--sh-ink);
}

.sh-sites .sub {
  margin: 2px 0 0;
  font-family: var(--sh-f-mono);
  font-size: 10.5px;
  color: var(--sh-faint);
}

.sh-sites li.active .sub,
.sh-sites li[aria-selected="true"] .sub {
  color: var(--sh-muted);
}

.sh-search {
  position: relative;
}

.sh-search svg {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 14px;
  height: 14px;
  color: var(--sh-faint);
  pointer-events: none;
}

.sh-search .sh-input {
  padding-left: 30px;
}

/* ---------- legends (shared by Inspect layers and the Drive minimap) ---------- */

.legend-bar {
  height: 8px;
  border-radius: 2px;
  border: 1px solid var(--sh-line);
}

.legend-bar.elev {
  background: linear-gradient(90deg, rgb(107, 13, 148), rgb(31, 56, 224), rgb(13, 184, 235), rgb(31, 209, 71), rgb(242, 235, 31), rgb(250, 122, 15), rgb(224, 20, 15));
}

.legend-bar.hill {
  background: linear-gradient(90deg, #1c1b19, #e8e6e1);
}

.legend-bar.slope {
  background-color: #2a2c32;
  background-image:
    linear-gradient(90deg, rgba(89, 199, 107, 0.15) 0%, rgba(89, 199, 107, 0.55) 12%, rgba(140, 224, 71, 0.9) 22%, rgb(242, 224, 31) 40%, rgb(250, 122, 15) 58%, rgb(242, 20, 31) 78%, rgb(158, 20, 184) 100%),
    linear-gradient(45deg, #3a3c42 25%, transparent 25%),
    linear-gradient(-45deg, #3a3c42 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3c42 75%),
    linear-gradient(-45deg, transparent 75%, #3a3c42 75%);
  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
  background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
}

.legend-bar.psr {
  background: linear-gradient(90deg, rgb(168, 158, 145) 0%, rgb(168, 158, 145) 49%, rgb(30, 72, 184) 51%, rgb(30, 72, 184) 100%);
}

.legend-bar.sunlit {
  background: linear-gradient(90deg, rgb(13, 5, 122) 0%, rgb(10, 72, 224) 20%, rgb(5, 184, 219) 40%, rgb(31, 224, 133) 60%, rgb(184, 245, 31) 80%, rgb(255, 255, 13) 100%);
}

.legend-bar.contsun {
  background: linear-gradient(90deg, rgb(8, 12, 40) 0%, rgb(20, 60, 140) 18%, rgb(40, 140, 180) 36%, rgb(220, 170, 40) 58%, rgb(255, 140, 30) 78%, rgb(255, 240, 160) 100%);
}

.legend-bar.contearth {
  background: linear-gradient(90deg, rgb(15, 10, 56) 0%, rgb(31, 46, 140) 20%, rgb(20, 122, 184) 40%, rgb(26, 199, 173) 60%, rgb(140, 240, 184) 80%, rgb(235, 250, 240) 100%);
}

.legend-bar.suitability {
  background: linear-gradient(90deg, rgb(30, 30, 36) 0%, rgb(89, 71, 46) 25%, rgb(184, 133, 36) 50%, rgb(140, 199, 56) 75%, rgb(56, 224, 107) 100%);
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--sh-f-mono);
  font-size: 10.5px;
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- loading overlays ---------- */

#loading,
#boot {
  position: fixed;
  inset: var(--sh-top-h) 0 0 0;
  z-index: 25;
  display: grid;
  place-content: center;
  gap: 1rem;
  background: radial-gradient(ellipse at center, #17191c 0%, var(--sh-bg) 70%);
  text-align: center;
  color: var(--sh-muted);
  transition: opacity 0.4s ease, visibility 0.4s, background 0.25s ease;
}

#loading.soft {
  z-index: 5;
  background: rgba(7, 8, 11, 0.55);
}

#loading.hide,
#boot.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border: 2px solid var(--sh-line-2);
  border-top-color: var(--sh-accent);
  border-radius: 50%;
  animation: sh-spin 0.8s linear infinite;
}

/* Boot overlay progress + stall note (loading.js trackBoot) */
.boot-bar {
  width: min(240px, 60vw);
  height: 3px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--sh-line);
  overflow: hidden;
}

.boot-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sh-accent);
  transition: width 0.35s ease;
}

.boot-note {
  max-width: 320px;
  min-height: 2.9em;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sh-faint);
}

/* Busy overlay (loading.js showBusy): loads inside a page (layer, site,
   vehicle). Greys out the 3D view; the panels (z >= 20) stay above that and
   usable. The progress card is its own layer above the panels and popovers
   (below the travel map and intro), and lets clicks through around it. */
.sh-busy {
  position: fixed;
  inset: var(--sh-top-h) 0 var(--sh-status-h) 0;
  z-index: 10;
  background: rgba(10, 11, 14, 0.55);
  backdrop-filter: grayscale(1) brightness(0.7);
  -webkit-backdrop-filter: grayscale(1) brightness(0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.sh-busy-front {
  position: fixed;
  inset: var(--sh-top-h) 0 var(--sh-status-h) 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.sh-busy.on,
.sh-busy-front.on {
  opacity: 1;
  visibility: visible;
}

.sh-busy-card {
  display: grid;
  gap: 10px;
  width: min(300px, 100%);
  text-align: center;
}

.sh-busy-card.has-steps {
  width: min(340px, 100%);
}

/* the parts of a multi-part load: a label and its detail, with a thin bar under each */
.sh-busy-steps {
  display: grid;
  gap: 9px;
  margin: 2px 0 0;
  padding: 11px 0 2px;
  list-style: none;
  border-top: 1px solid var(--sh-line);
  text-align: left;
}

.sh-busy-steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: baseline;
}

.sh-busy-steps li[hidden] {
  display: none;
}

.sh-busy-step-l {
  font-size: 12px;
  color: var(--sh-ink);
}

.sh-busy-step-d {
  font: 11px var(--sh-f-mono);
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

.sh-busy-step-bar {
  position: relative;
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: rgba(236, 236, 234, 0.12);
  overflow: hidden;
}

.sh-busy-step-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--sh-accent);
  transition: width 0.25s ease;
}

.sh-busy-steps li.wait .sh-busy-step-l {
  color: var(--sh-muted);
}

.sh-busy-steps li.done .sh-busy-step-l {
  color: var(--sh-muted);
}

.sh-busy-steps li.done .sh-busy-step-d {
  color: var(--sh-accent);
}

.sh-busy-steps li.done .sh-busy-step-bar i {
  background: rgba(var(--sh-accent-rgb), 0.55);
}

.sh-busy-front .sh-busy-card {
  padding: 16px 18px 12px;
  background: var(--sh-bar);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.sh-busy-text {
  margin: 0;
  font-size: 14px;
  color: var(--sh-ink);
}

.sh-busy-sub {
  min-height: 1.4em;
  margin: 0;
  font-family: var(--sh-f-mono);
  font-size: 11px;
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

.sh-busy-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(236, 236, 234, 0.14);
  overflow: hidden;
}

.sh-busy-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--sh-accent);
  transition: width 0.25s ease;
}

.sh-busy-bar.indeterminate i {
  width: 35%;
  animation: sh-busy-slide 1.1s ease-in-out infinite;
}

@keyframes sh-busy-slide {
  from { left: -35%; }
  to { left: 100%; }
}

.sh-busy-front.error .sh-busy-text {
  color: var(--sh-accent);
}

.sh-busy-front.error .sh-busy-bar {
  display: none;
}

/* While a layer / site loads, the Probe and its legend belong to data that
   isn't there yet: grey them out with the scene. */
body.page-inspect.sh-busy-on .sh-card :is(.probe-sec, .legend-sec) {
  opacity: 0.35;
  filter: grayscale(1);
  pointer-events: none;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Layer row whose data is downloading */
.page-inspect label.mode.is-loading::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1.5px solid var(--sh-line-2);
  border-top-color: var(--sh-accent);
  border-radius: 50%;
  animation: sh-spin 0.8s linear infinite;
}

@keyframes sh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }

  .sh-toggle input,
  .sh-toggle input::after,
  .sh-dock-toggle svg {
    transition: none;
  }
}

/* ==========================================================================
   Inspect
   ========================================================================== */

/* Layer rows — the existing radio inputs, restyled (main.js still drives them) */
.page-inspect .mode-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-inspect label.mode {
  position: relative; /* keeps the hidden radio inside the row, so focusing it never scrolls the panel away */
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.page-inspect label.mode:hover {
  background: var(--sh-raise);
}

.page-inspect label.mode:has(input:checked) {
  background: var(--sh-accent-soft);
  border-color: rgba(var(--sh-accent-rgb), 0.45);
}

.page-inspect label.mode:has(input:focus-visible) {
  outline: 2px solid var(--sh-accent);
  outline-offset: 1px;
}

.page-inspect label.mode input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.page-inspect label.mode .sw {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 0;
  background: #222 center / cover;
}

.page-inspect label.mode strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.page-inspect label.mode small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--sh-faint);
}

.page-inspect label.mode .sw.sw-ortho { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, #2b2b2b, #9a9a96 45%, #3b3b3a 60%, #cfcfca); }
.page-inspect label.mode .sw.sw-hillshade { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, #1c1b19, #8e8b85 45%, #3a3936 62%, #e8e6e1); }
.page-inspect label.mode .sw.sw-psr { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(168, 158, 145) 0%, rgb(168, 158, 145) 50%, rgb(30, 72, 184) 52%); }
.page-inspect label.mode .sw.sw-elevation { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(107, 13, 148), rgb(13, 184, 235) 35%, rgb(31, 209, 71) 55%, rgb(242, 235, 31) 75%, rgb(224, 20, 15)); }
.page-inspect label.mode .sw.sw-slope { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(89, 199, 107), rgb(242, 224, 31) 40%, rgb(250, 122, 15) 60%, rgb(158, 20, 184)); }
.page-inspect label.mode .sw.sw-illumination { background: var(--thumb, none) center / cover no-repeat, radial-gradient(circle at 25% 30%, #d9d4c8, #3a3833 55%, #0d0d0f); }
.page-inspect label.mode .sw.sw-contsun { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(8, 12, 40), rgb(40, 140, 180) 40%, rgb(255, 140, 30) 75%, rgb(255, 240, 160)); }
.page-inspect label.mode .sw.sw-contearth { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(15, 10, 56), rgb(20, 122, 184) 40%, rgb(26, 199, 173) 70%, rgb(235, 250, 240)); }
.page-inspect label.mode .sw.sw-suitability { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(30, 30, 36), rgb(184, 133, 36) 50%, rgb(56, 224, 107)); }

/* The phone-only dropdown is not needed: the layer rows work at every width. */
.page-inspect .viz-select-wrap {
  display: none;
}

.page-inspect .legend {
  padding: 10px;
  border-radius: 8px;
  background: var(--sh-well);
  border: 1px solid var(--sh-line);
  display: grid;
  gap: 6px;
}

.page-inspect .legend.hidden,
.page-inspect .legend:not(:has(> :not(.hidden):not([hidden]))) {
  display: none !important;
}

/* Colour ramp: lives in the Probe card (moves into the layers pane on phones, where the card is hidden) */
.page-inspect .legend-ramp {
  display: grid;
  gap: 4px;
}

.page-inspect .legend-sec {
  padding: 4px 14px 12px;
}

.page-inspect .legend-ramp[hidden],
.page-inspect .legend-sec:has(> .legend-ramp[hidden]),
.page-inspect .legend-sec:empty {
  display: none;
}

.page-inspect .legend .legend-ramp {
  margin-bottom: 2px;
}

.page-inspect .layer-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sh-muted);
}

.page-inspect .layer-note.hidden {
  display: none !important;
}

.page-inspect .subpanel.hidden {
  display: none !important;
}

/* Sun controls (Dynamic illumination) */
.sh-sunctl {
  display: grid;
  gap: 8px;
}

.sh-sun-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-sun-row .sh-input {
  flex: 1 1 auto;
  font-family: var(--sh-f-mono);
  font-size: 12px;
}

.sh-readout {
  margin: 0;
  font-family: var(--sh-f-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--sh-muted);
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
}

.sh-az {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 10px;
  align-items: center;
  margin: 0;
  font-size: 12.5px;
}

.sh-az input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.sh-az .az-val {
  font-family: var(--sh-f-mono);
  font-size: 11.5px;
  color: var(--sh-data);
}

.sh-az .control-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--sh-faint);
}

.az-play {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 50%;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.az-play[aria-pressed="true"] {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
  background: var(--sh-accent-soft);
}

/* Legend: marker for the value under the cursor; imagery shows no scale */
.page-inspect .legend-track {
  position: relative;
}

.page-inspect .legend-mark {
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--sh-ink);
  transition: left 0.15s;
  pointer-events: none;
}

.page-inspect .legend-mark[hidden] {
  display: none;
}

.page-inspect #legend.no-scale .legend-track,
.page-inspect #legend.no-scale .legend-labels {
  display: none;
}

/* Landing sites tab: plain label; on phones it shows the current site name */
.page-inspect .sh-tabs .tab-site {
  display: none;
}

@media (max-width: 720px) {
  .page-inspect .sh-tabs .tab-full {
    display: none;
  }

  .page-inspect .sh-tabs [data-tab="sites"] {
    min-width: 0;
  }

  .page-inspect .sh-tabs .tab-site {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
  }

  .page-inspect .sh-tabs .tab-site-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-inspect .sh-tabs .tab-site svg {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
  }

  /* The site name lives in the tab, so the card goes away */
  .page-inspect .sh-card {
    display: none;
  }
}

/* Touch screens: no probe (no hover) — the card keeps only the site / locator */
body.no-probe.page-inspect .probe-sec {
  display: none;
}

body.no-probe.page-inspect .loc-sec {
  padding-top: 12px;
}

.page-inspect .probe-h .probe-hint {
  flex: 1;
}

/* Context card: probe + locator (mockup) */
.page-inspect .probe-sec {
  padding: 12px 14px 10px;
  display: grid;
  gap: 8px;
}

.page-inspect .probe-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.page-inspect .probe-h .sh-lbl {
  margin: 0;
}

.page-inspect .probe-hint {
  font-size: 11px;
  color: var(--sh-faint);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-inspect .probe-big {
  font-family: var(--sh-f-mono);
  font-size: 26px;
  line-height: 1.1;
  color: var(--sh-data);
  font-variant-numeric: tabular-nums;
}

.page-inspect .probe-cap {
  margin: 0 0 2px;
  font-size: 10.5px;
  color: var(--sh-faint);
}

/* Mission window (Inspect, desktop): Land and Depart as text with icon buttons for the date and duration (they open small
   popups), then either the full Sun / Earth chart or, in compact mode, a card under the left panel with a track that shows
   only the stay and its marker. Phones keep the planner's own panel. */
.tbm {
  display: none;
}

.tbm-info {
  display: none;
}

.sh-timebar.tbm-on .tbm {
  display: block;
}

.sh-timebar.tbm-on > .tb-panel {
  display: none;
}

/* the full bar and the compact card are the same height */
.sh-timebar.tbm-on {
  box-sizing: border-box;
  height: 104px;
}

.sh-timebar.tbm-on.no-tiles {
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 12px; /* the divider is as far from the legend as from the buttons */
  padding: 8px 12px;
}

.sh-timebar.tbm-on.no-tiles .tb-main {
  grid-template-rows: minmax(92px, 1fr); /* the chart keeps the height it had */
}

.sh-timebar.tbm-on:not(.compact) .tbm {
  position: relative;
  align-self: center;
  padding-right: 12px;
  border-right: 1px solid var(--sh-line);
}

/* the compact / full button sits at the top right of the left section: where it is in compact mode */
.sh-timebar.tbm-on:not(.compact) #tbm-expand {
  position: absolute;
  top: 0;
  right: 12px;
}

/* Play: the same icon button as in compact mode, below the compact / full button */
.sh-timebar.tbm-on:not(.compact) #tbm-play {
  position: absolute;
  right: 12px; /* the same column as the compact / full button, at the bottom of the section */
  bottom: 0;
}

.sh-timebar.tbm-on:not(.compact) .tbm-track {
  display: none; /* the full chart has its own marker */
}

.sh-timebar.tbm-on.compact .tbm-stay {
  display: none; /* Stay is only on the full bar */
}

.sh-timebar.tbm-on.compact .tbm {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* the card is as tall as the full bar: the rows spread out evenly */
}

.sh-timebar.tbm-on.compact .tbm-row {
  margin-bottom: 0;
}

/* the full bar's left side: Land, Depart and Stay as text, the four buttons in a 2 x 2 grid */
.sh-timebar.tbm-on:not(.compact) .tbm-btns {
  display: grid;
  grid-template-columns: 30px;
  gap: 6px;
}

/* the full bar: Land, Stay and Depart are the controls themselves; the date and duration buttons are for compact mode */
.sh-timebar.tbm-on:not(.compact) #tbm-date-btn,
.sh-timebar.tbm-on:not(.compact) #tbm-dur-btn,
.sh-timebar.tbm-on:not(.compact) .tbm-dates output,
.sh-timebar.tbm-on.compact .tbm-slot {
  display: none;
}

.tbm-slot {
  display: block;
}

.tbm-slot .sh-input {
  width: 176px;
  height: 26px;
  padding: 0 6px 0 8px;
  font-size: 12px;
}

/* the stay stepper looks like the date fields: same width, height, background, border and radius */
.tbm-slot .tb-stepper {
  width: 176px;
  height: 26px;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  border-radius: 8px;
  background: var(--sh-well);
}

.tbm-slot .tb-stepper button,
.tbm-slot .tb-stepper output {
  height: 24px;
  font: 12px var(--sh-f-ui);
  color: var(--sh-ink);
}

.tbm-slot .tb-stepper output {
  display: grid;
  place-items: center;
}

.sh-timebar.tbm-on:not(.compact) .tbm-dates span {
  align-items: center;
  line-height: 1;
}

.sh-timebar.tbm-on:not(.compact) .tbm-dates {
  gap: 4px;
}


.sh-timebar.tbm-on:not(.compact) #tbm-expand svg {
  transform: rotate(180deg);
}

.sh-timebar.tbm-on.compact {
  right: auto;
  width: var(--sh-dock-w);
  padding: 12px 10px 12px 12px;
}

.sh-timebar.tbm-on.compact {
  grid-template-columns: minmax(0, 1fr);
}

.sh-timebar.tbm-on.compact > .tb-main {
  display: none;
}

.tbm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sh-timebar.tbm-on:not(.compact) .tbm-row {
  margin-bottom: 0;
}

.tbm-dates {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 11.5px;
}

.tbm-dates span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 15px;
  white-space: nowrap;
}

.tbm-dates b {
  width: 42px;
  font-weight: 500;
  color: var(--sh-muted);
}

.tbm-dates output {
  font: 400 12px var(--sh-f-mono);
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
}

.tbm-btns {
  display: flex;
  gap: 2px;
  flex: none;
}

.tbm-b {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
}

.tbm-b svg {
  width: 15px;
  height: 15px;
}

.tbm-b .i-pause,
.tbm-b.is-playing .i-play {
  display: none;
}

.tbm-b.is-playing .i-pause {
  display: block;
}

.tbm-track {
  display: block;
  width: 100%;
  height: 28px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.tbm-bg { fill: rgba(236, 236, 234, 0.07); }
.tbm-prog { fill: var(--sh-accent); fill-opacity: 0.28; }
.tbm-tick { stroke: var(--sh-line-2); stroke-width: 1; }
.tbm-day { fill: var(--sh-faint); font: 9.5px var(--sh-f-mono); }
.tbm-mark { stroke: var(--sh-ink); stroke-width: 1.5; }
.tbm-knob { fill: var(--sh-ink); }
.tbm-flag { fill: var(--sh-ink); font: 600 10.5px var(--sh-f-mono); pointer-events: none; }

/* the date and duration popups: the planner's own fields, moved here on desktop */
.tbm-pop {
  position: fixed;
  z-index: 46;
  width: 232px;
  padding: 12px;
  background: var(--sh-bar);
  border: 1px solid var(--sh-line-2);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.tbm-pop[hidden] {
  display: none;
}

.tbm-pop .tb-info {
  display: none;
}

/* Inspect: collapsing the Layers / Landing sites panel collapses the whole container, leaving only its button */
@media (min-width: 721px) {
  .page-inspect .sh-dock.collapsed {
    width: auto;
    bottom: auto;
  }

  .page-inspect .sh-dock.collapsed .sh-tabs {
    display: none;
  }

  .page-inspect .sh-dock.collapsed .sh-dock-h {
    min-height: 0;
    padding: 8px;
  }
}

/* Folded probe card: only its header (and the legend, which hides itself when empty) stays */
.page-inspect .sh-card-toggle svg {
  transition: transform 0.15s ease;
}

.page-inspect .sh-card.folded .sh-card-toggle svg {
  transform: rotate(180deg);
}

.page-inspect .sh-card.folded :is(.probe-kv, .probe-note, .loc-sec) {
  display: none;
}

.page-inspect .sh-card.folded .probe-sec {
  padding-bottom: 8px;
}

/* Short windows: the panels already cover a lot of terrain, so they give up their spare parts */
@media (min-width: 721px) and (max-height: 760px) {
  .page-inspect .locator {
    display: none; /* the Map shows the site's place; "Open map" is the top bar's Map button */
  }

  .page-inspect .show-toggle small {
    display: none; /* the row's one-line description is its tooltip */
  }

  .page-inspect .sh-timebar.no-tiles {
    padding: 8px 12px;
  }

  .page-inspect .no-tiles .tb-main {
    grid-template-rows: minmax(76px, 1fr);
  }

  .page-inspect .no-tiles .tb-panel {
    gap: 4px 10px;
  }
}

/* Latitude + Longitude always share the last row */
.page-inspect .probe-kv > div:nth-last-child(2) { grid-column: 1; }

.page-inspect .probe-kv dd {
  font-size: 13px;
  color: var(--sh-data);
  overflow-wrap: anywhere;
}

.page-inspect .probe-note {
  margin: 0;
  font-family: var(--sh-f-mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

.page-inspect .loc-sec {
  padding: 0 14px 12px;
  display: grid;
  gap: 8px;
}

.page-inspect #subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: var(--sh-f-mono);
  font-size: 10.5px;
  color: var(--sh-faint);
  font-variant-numeric: tabular-nums;
}

.page-inspect .locator {
  position: relative;
  display: block;
  width: 100%;
  height: 118px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  text-decoration: none;
  background: #0a0b0e;
}

.page-inspect .locator:hover {
  border-color: var(--sh-accent);
}

.page-inspect .locator canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.page-inspect .locator .loc-open,
.page-inspect .locator .loc-name {
  position: absolute;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 10.5px;
  color: var(--sh-muted);
}

.page-inspect .locator .loc-open {
  right: 6px;
  bottom: 5px;
}

.page-inspect .locator .loc-name {
  left: 6px;
  top: 5px;
  max-width: calc(100% - 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sh-ink);
  font-weight: 500;
}

/* Measure: the existing bar, now living in the tool strip */
.page-inspect .measure-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-inspect .measure-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-inspect .measure-inline-hint {
  font-size: 12px;
  color: var(--sh-muted);
  white-space: nowrap;
  padding: 0 4px;
}

/* The tool strip is transformed, so position relative to it. */
.page-inspect .measure-readout {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px); /* the strip is at the top: the readout drops below it */
  transform: translateX(-50%);
  min-width: 13rem;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line-2);
  border-radius: 10px;
  backdrop-filter: blur(14px);
}

.page-inspect .measure-readout .metrics[hidden] {
  display: none;
}

.page-inspect .measure-readout .row {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
}

.page-inspect .measure-readout .row span:last-child {
  font-family: var(--sh-f-mono);
  color: var(--sh-data);
}

.measure-btn.hidden,
.measure-readout.hidden,
.measure-inline-hint.hidden {
  display: none !important;
}

.measure-labels {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.measure-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  padding: 0.18rem 0.45rem;
  background: rgba(12, 14, 18, 0.9);
  border: 1px solid var(--sh-line);
  border-radius: 4px;
  font-family: var(--sh-f-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--sh-ink);
  opacity: 0;
  will-change: transform;
}

.measure-label.on {
  opacity: 1;
}

.measure-label.direct {
  border-color: rgba(255, 240, 74, 0.85);
  color: #fff04a;
}

.measure-label.horiz {
  border-color: rgba(92, 255, 154, 0.85);
  color: #5cff9a;
}

.measure-label.vert {
  border-color: rgba(255, 122, 69, 0.85);
  color: #ff7a45;
}

/* ==========================================================================
   Drive
   ========================================================================== */

/* Vehicle: two option cards (mockup) */
.page-drive .vehicle-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.page-drive .vehicle-opts button {
  display: grid;
  gap: 2px;
  align-content: start;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--sh-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.page-drive .vehicle-opts button:hover {
  border-color: rgba(236, 236, 234, 0.32);
}

.page-drive .vehicle-opts button.on {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
}

.page-drive .vehicle-opts b {
  font-size: 12.5px;
  font-weight: 500;
}

.page-drive .vehicle-opts small {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--sh-faint);
}

.page-drive .sh-lbl .sh-kbd {
  margin-left: 4px;
  letter-spacing: 0;
}

/* Headlamps / Walk: toggle buttons, lit in the accent when on */
.page-drive .drive-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.page-drive .drive-act svg {
  width: 15px;
  height: 15px;
}

.page-drive .drive-act.on {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
  color: var(--sh-accent);
}

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

/* Controls: toggle tiles (headlamps, walk, crewmate), lit in the accent when on */
.page-drive .drive-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.page-drive .drive-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  height: 32px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font: 500 12.5px var(--sh-f-ui);
  text-align: left;
  cursor: pointer;
}

.page-drive .drive-tile:hover {
  border-color: rgba(236, 236, 234, 0.32);
}

.page-drive .drive-tile svg {
  width: 15px;
  height: 15px;
  color: var(--sh-muted);
}

.page-drive .drive-tile .sh-kbd {
  opacity: 0.7;
}

.page-drive .drive-tile[aria-pressed="true"] {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
  color: var(--sh-accent);
}

.page-drive .drive-tile[aria-pressed="true"] svg {
  color: var(--sh-accent);
}

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

/* Time: a label and a date button on one line, the mission scrub bar and the Sun / Earth readout below */
.page-drive .drive-grp-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-drive .drive-date {
  position: relative;
  min-width: 0;
}

.page-drive .drive-grp-h[hidden] {
  display: none;
}

.page-drive #drive-sun-panel .mw-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-drive .drive-date-txt {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font: 11.5px var(--sh-f-mono);
  color: var(--sh-muted);
}

/* the real field sits under the button, invisible, so the browser's picker opens beside it */
.page-drive .drive-date .drive-sun-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.page-drive #drive-sun-panel .mw[hidden] {
  display: none;
}

.page-drive #drive-sun-panel .mw {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--sh-line);
  border-radius: 8px;
  background: var(--sh-well);
}

.page-drive #drive-sun-panel .drive-sun-date-readout {
  margin: 0;
}

/* Multiplayer */
.drive-mp-pop {
  width: min(280px, calc(100vw - 2 * var(--sh-gap)));
  gap: 10px;
}

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

.page-drive .drive-mp-pop .drive-mp-card {
  padding: 0;
  border: 0;
  background: none;
}

/* the top-bar chip: the people icon alone while idle, then a dot and "ID · ping" */
.page-drive .drive-mp-chip {
  width: auto;
  gap: 7px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
}

.page-drive .drive-mp-chip .drive-mp-dot[hidden],
.page-drive .drive-mp-chip .drive-mp-chip-t[hidden] {
  display: none;
}

.page-drive .drive-mp-chip-t {
  font-size: 11.5px;
  color: var(--sh-ink);
  white-space: nowrap;
}

.page-drive .drive-mp-idle {
  display: grid;
  gap: 8px;
}

.page-drive .drive-mp-host {
  width: 100%;
  height: 32px;
}

.page-drive .drive-mp-or {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-faint);
}

.page-drive .drive-mp-or::before,
.page-drive .drive-mp-or::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--sh-line);
}

.page-drive .drive-mp-join {
  display: flex;
  gap: 6px;
}

.page-drive .drive-mp-join .sh-input {
  font-family: var(--sh-f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-drive .drive-mp-join .sh-input.bad {
  border-color: #e0584a;
}

.page-drive .drive-mp-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-well);
}

.page-drive .drive-mp-card[hidden] {
  display: none;
}

.page-drive .drive-mp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.page-drive .drive-mp-state {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.page-drive .drive-mp-rtt {
  font-size: 11px;
  color: var(--sh-muted);
}

.page-drive .drive-mp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8a93a;
  box-shadow: 0 0 0 3px rgba(216, 169, 58, 0.18);
}

.page-drive .drive-mp-dot[data-state="connected"] {
  background: #4cc27a;
  box-shadow: 0 0 0 3px rgba(76, 194, 122, 0.2);
}

.page-drive .drive-mp-dot[data-state="failed"] {
  background: #e0584a;
  box-shadow: 0 0 0 3px rgba(224, 88, 74, 0.2);
}

.page-drive .drive-mp-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-drive .drive-mp-code {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sh-ink);
}

.page-drive .drive-mp-copy {
  height: 32px;
  padding: 0 9px;
  font-size: 12px;
}

.page-drive .drive-mp-wide {
  width: 100%;
}

.page-drive .drive-mp-wide[hidden] {
  display: none;
}

.page-drive .drive-mp-leave {
  width: 100%;
  color: #ee8a7e;
  border-color: rgba(224, 88, 74, 0.35);
  background: rgba(224, 88, 74, 0.08);
}

.page-drive .drive-mp-leave:hover {
  border-color: rgba(224, 88, 74, 0.7);
}

.page-drive .drive-mp-hint .sh-kbd {
  margin: 0 1px;
}

/* Old dropdown styles (kept for the touch layout) */
.page-drive .vehicle-picker {
  position: relative;
}

.page-drive .site-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font: 500 13px var(--sh-f-ui);
  text-align: left;
  cursor: pointer;
}

.page-drive .site-trigger > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-drive .site-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid var(--sh-muted);
  border-bottom: 1.5px solid var(--sh-muted);
  transform: rotate(45deg);
}

.page-drive .site-trigger[aria-expanded="true"] {
  border-color: var(--sh-accent);
}

.page-drive .site-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--sh-bar);
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.page-drive .site-menu li {
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
}

.page-drive .site-menu li:hover,
.page-drive .site-menu li:focus-visible {
  background: var(--sh-raise);
  outline: none;
}

.page-drive .site-menu li[aria-selected="true"] {
  background: var(--sh-accent-soft);
}

.page-drive .site-menu .name {
  margin: 0;
  font-size: 13px;
}

.page-drive .site-menu .sub {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--sh-faint);
}

/* Sun: drive.css markup, shell look */
.page-drive .drive-sun-mode {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-well);
}

.page-drive .drive-sun-mode-btn {
  flex: 1 1 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sh-muted);
  font: 500 12.5px var(--sh-f-ui);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.page-drive .drive-sun-mode-btn:hover {
  color: var(--sh-ink);
  border: 0;
}

.page-drive .drive-sun-mode-btn.is-active {
  background: var(--sh-ink);
  color: var(--sh-on-ink);
  border: 0;
}

.page-drive .drive-sun-mode-panel {
  margin-top: 8px;
}

.page-drive .drive-sun-date-row {
  display: flex;
  gap: 6px;
}

.page-drive .drive-sun-date {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--sh-line-2);
  border-radius: 8px;
  background: var(--sh-well);
  color: var(--sh-ink);
  font: 12px var(--sh-f-mono);
  color-scheme: dark;
}

.page-drive .drive-sun-date:focus {
  border-color: var(--sh-accent);
  outline: none;
}

.page-drive .drive-sun-date-apply {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sh-accent);
  border-radius: 7px;
  background: var(--sh-accent);
  color: var(--sh-accent-ink);
  font: 600 12.5px var(--sh-f-ui);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.page-drive .drive-sun-date-apply:disabled {
  background: var(--sh-raise);
  border-color: var(--sh-line-2);
  color: var(--sh-faint);
  cursor: default;
}

.page-drive .drive-sun-date-readout {
  margin: 8px 0 0;
  font-family: var(--sh-f-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--sh-muted);
  white-space: pre-line;
}

.page-drive .drive-sun-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
}

.page-drive .drive-sun-row:not(:first-of-type) {
  margin-top: 8px;
}

.page-drive .drive-sun-val {
  font-family: var(--sh-f-mono);
  font-size: 11.5px;
  color: var(--sh-data);
}

.page-drive #drive-sun-az,
.page-drive #drive-sun-el {
  display: block;
  width: 100%;
  margin: 4px 0 0;
}

/* Ambient audio */
.page-drive .drive-audio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}

.page-drive .drive-audio-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font: 600 11px/1 var(--sh-f-ui);
  cursor: pointer;
}

.page-drive .drive-audio-toggle.is-playing {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
  color: var(--sh-accent);
}

.page-drive .drive-audio-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sh-ink);
}

.page-drive .drive-audio-vol input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.page-drive .drive-credit {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--sh-faint);
}

.page-drive .drive-credit a {
  color: var(--sh-muted);
}

/* Telemetry in the tool strip */
.page-drive .sh-tele {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.page-drive .sh-tele > div {
  display: grid;
  padding: 2px 16px;
  border-left: 1px solid var(--sh-line);
}

.page-drive .sh-tele > div:first-child {
  border-left: 0;
}

.page-drive .sh-tele dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sh-faint);
}

.page-drive .sh-tele dd {
  margin: 0;
  font-family: var(--sh-f-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Stability gauges (Pitch / Roll): the icon tilts; the number's colour is
   set from main.js (text colour -> yellow -> red as the LRV's limit nears). */
.page-drive .sh-tele .drive-stab {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fixed-width value so the cell never resizes as the number changes. */
.page-drive .sh-tele .drive-stab span {
  display: inline-block;
  width: 4ch;
  text-align: right;
  white-space: pre;
}

.page-drive .sh-tele .drive-stab svg {
  width: 36px;
  height: 24px;
  flex: none;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

.page-drive .sh-tele .drive-stab .gnd {
  stroke-width: 1;
  opacity: 0.35;
}

.page-drive .sh-tele .drive-stab .st {
  stroke-width: 1.1;
}

.page-drive .sh-tele .drive-stab .wh {
  fill: none;
  stroke-width: 2.2;
}

.page-drive .sh-tele .drive-stab .ico {
  transform-box: view-box;
  transition: transform 0.18s linear;
}

.page-drive .sh-tele .drive-stab #drive-pitch-ico { transform-origin: 16px 12px; }
.page-drive .sh-tele .drive-stab #drive-roll-ico { transform-origin: 12px 12px; }

/* On foot the parked vehicle's pitch and roll say little: the Vehicle distance takes their place, so the strip stays short. */
.page-drive .sh-tele[data-mode="walk"] .drive-stab-cell {
  display: none;
}

.page-drive .sh-tele .drive-veh-cell[hidden] {
  display: none;
}

.page-drive .sh-tele #drive-vehdist { min-width: 6ch; }

/* Fixed minimum widths (in characters of each readout's own font) so a cell
   never resizes as its number gains or loses digits; the widest value each
   can show is "100 km/h", "12.34 km", "90°", "359° NW", "−5,123 m". */
.page-drive .sh-tele #drive-speed { min-width: 8ch; }
.page-drive .sh-tele #drive-odo { min-width: 8ch; }
.page-drive .sh-tele #drive-heading { min-width: 7ch; }
.page-drive .sh-tele #drive-elev { min-width: 8ch; }

.page-drive .sh-tele .drive-speed {
  font-size: 20px;
  line-height: 1.15;
  color: var(--sh-data);
}

/* Minimap = context card. Keeps drive.css's expanded (travel-open) mode. */
.page-drive .drive-map-panel:not(.travel-open) {
  position: fixed;
  top: calc(var(--sh-top-h) + var(--sh-gap));
  right: var(--sh-gap);
  bottom: auto;
  left: auto;
  z-index: 20;
  width: var(--sh-card-w);
  padding: 10px 12px 12px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  backdrop-filter: blur(14px);
}

.page-drive .drive-map-panel.travel-open {
  z-index: 60;
  border-radius: 10px;
  background: var(--sh-bar);
  border: 1px solid var(--sh-line-2);
}

.page-drive .drive-map-title,
.page-drive .drive-map-readout {
  font-size: 11px;
}

/* Header: [swatch layer L ▾] · expand (mockup layer picker) */
.page-drive .drive-map-panel {
  overflow: visible;
}

.page-drive .drive-map-title {
  gap: 6px;
  margin-bottom: 8px;
}

.page-drive .drive-lpick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin: 0;
  padding: 0 8px 0 4px;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
  color: var(--sh-ink);
  font: 500 12px var(--sh-f-ui);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.page-drive .drive-lpick:hover,
.page-drive .drive-lpick[aria-expanded="true"] {
  border-color: rgba(236, 236, 234, 0.32);
}

.page-drive .drive-lpick-n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-drive .drive-lpick svg {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  color: var(--sh-muted);
}

.page-drive .drive-map-sw {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--sh-line);
  background: #222 center / cover no-repeat;
}

/* Layer menu: grouped rows with thumbnails, dropping over the card */
.page-drive .drive-lpop {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  z-index: 3;
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding: 8px 6px;
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  background: rgba(14, 15, 17, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
}

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

.page-drive .drive-lpop-grp {
  display: grid;
  gap: 2px;
}

.page-drive .drive-lpop-grp .sh-lbl {
  padding: 0 6px 4px;
}

.page-drive .drive-lay {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sh-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-drive .drive-lay:hover {
  background: var(--sh-raise);
}

.page-drive .drive-lay.sel {
  background: var(--sh-accent-soft);
  border-color: rgba(var(--sh-accent-rgb), 0.45);
}

.page-drive .drive-lay .drive-map-sw {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.page-drive .drive-lay .drive-ov-sw { /* Earth-visibility overlay swatch: the blue cast with its light edge */
  background: radial-gradient(circle at 38% 40%, rgba(96, 170, 255, 0.55) 0 46%, rgba(150, 205, 255, 0.95) 48% 54%, rgba(236, 236, 234, 0.06) 56%);
  border: 1px solid var(--sh-line-2);
}

.page-drive .drive-lay b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.page-drive .drive-lay small {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--sh-faint);
}

.page-drive .drive-map-expand {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.page-drive .drive-map-expand[aria-pressed="true"] {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
}

.page-drive .drive-map-panel.travel-open .drive-map-expand {
  display: none; /* the × closes the expanded map */
}

.page-drive .drive-map-canvas {
  position: relative;
}

.page-drive #drive-map-scale {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--sh-f-mono);
  font-size: 10px;
  color: var(--sh-muted);
  pointer-events: none;
}

.page-drive #drive-minimap {
  border-radius: 8px;
  border: 1px solid var(--sh-line);
}

/* Map outline: drawn in CSS (not on the canvas) so its corners follow the canvas
   radius — 7px = the 8px outer radius minus the 1px border it sits inside. */
.page-drive .drive-map-canvas::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 7px;
  pointer-events: none;
}

/* Legend with a marker for the value under the rover / cursor */
.page-drive .drive-map-legend {
  margin: 10px 0 0;
  display: grid;
  gap: 4px;
}

.page-drive .drive-map-legend-track {
  position: relative;
}

.page-drive .drive-map-legend .legend-bar {
  height: 8px;
  border-radius: 2px;
}

.page-drive .drive-map-legend-mark {
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--sh-ink);
  transition: left 0.3s;
}

.page-drive .drive-map-legend-mark[hidden] {
  display: none;
}

.page-drive .drive-map-panel.no-scale :is(.drive-map-legend, .drive-map-under) {
  display: none;
}

.page-drive .drive-map-under {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--sh-muted);
}

.page-drive .drive-map-under b {
  font-family: var(--sh-f-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--sh-data);
}

.page-drive .drive-map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
}

.page-drive .drive-map-readout {
  margin: 0;
  min-width: 0;
  font-family: var(--sh-f-mono);
  font-size: 11px;
  color: var(--sh-data);
}

.page-drive .drive-fast-travel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  height: 26px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--sh-line-2);
  border-radius: 7px;
  background: var(--sh-raise);
  font: 500 11.5px var(--sh-f-ui);
  letter-spacing: 0;
  text-transform: none;
}

.page-drive .drive-fast-travel:hover,
.page-drive .drive-fast-travel.active {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
}

/* Close (expanded map): sits in the header row, same height as the layer
   picker, brighter than the dark panel so it reads, and finger-sized on touch. */
.page-drive .drive-map-close {
  position: static;
  display: none;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(236, 236, 234, 0.34);
  border-radius: 7px;
  background: rgba(236, 236, 234, 0.14);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page-drive .drive-map-close svg {
  width: 14px;
  height: 14px;
}

.page-drive .drive-map-close:hover,
.page-drive .drive-map-close:focus-visible {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
  color: var(--sh-accent-ink);
}

.page-drive .drive-map-panel.travel-open .drive-map-close {
  display: grid;
}

.page-drive .drive-map-panel.travel-open .drive-map-title {
  padding-right: 0;
}

@media (pointer: coarse) {
  .page-drive .drive-map-panel.travel-open .drive-lpick,
  .page-drive .drive-map-panel.travel-open .drive-map-close {
    height: 44px;
  }

  .page-drive .drive-map-panel.travel-open .drive-map-close {
    width: 44px;
  }

  .page-drive .drive-map-panel.travel-open .drive-map-close svg {
    width: 20px;
    height: 20px;
  }
}

/* Touch: the always-on corner map stays a small picture */
body.drive-touch-controls .drive-map-panel:not(.travel-open) :is(.drive-lpick kbd, .drive-map-expand, .drive-map-legend, .drive-map-under, .drive-fast-travel) {
  display: none;
}

body.drive-touch-controls .drive-map-panel:not(.travel-open) .drive-map-foot {
  padding-top: 4px;
}

.page-drive .drive-map-legend .legend-labels {
  font-size: 10px;
}

/* Key hints live in the status bar */
.page-drive .drive-hint-bar {
  display: flex;
  gap: 14px;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  width: auto;
  font-size: 11.5px;
  color: var(--sh-muted);
  pointer-events: none;
}

.page-drive .drive-hint-bar strong {
  font-family: var(--sh-f-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 0 4px;
  border: 1px solid var(--sh-line-2);
  border-radius: 3px;
  color: var(--sh-ink);
  margin-right: 3px;
}

/* Touch devices (any width): sticks own the bottom-left, actions the top-right.
   The status bar folds into the top bar and keeps only the FPS readout. */
body.drive-touch-controls .sh-status {
  top: 0;
  bottom: auto;
  left: auto;
  right: calc(var(--sh-gap) + 40px);
  height: var(--sh-top-h);
  padding: 0 6px;
  background: none;
  border: 0;
  z-index: 31;
  pointer-events: none;
}

body.drive-touch-controls .sh-status-l,
body.drive-touch-controls .sh-status-r > :not(#drive-fps) {
  display: none;
}

body.drive-touch-controls .sh-dock {
  bottom: auto;
  max-height: calc(100vh - var(--sh-top-h) - 190px);
}

body.drive-touch-controls .sh-tools {
  left: auto;
  right: var(--sh-gap);
  transform: none;
  bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem);
}

body.drive-touch-controls #drive-touch .mobile-actions {
  top: calc(var(--sh-top-h) + var(--sh-gap));
}

/* H hides the HUD; the phone HUD button does the same */
body.drive-hud-hidden .sh-ui,
body.drive-mobile-hud-hidden .sh-ui {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.drive-hud-hidden .drive-map-panel.travel-open,
body.drive-mobile-hud-hidden .drive-map-panel.travel-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Map
   ========================================================================== */

.page-map #map {
  position: fixed;
  inset: var(--sh-top-h) 0 var(--sh-status-h) 0;
  background: #050608;
}

.page-map .leaflet-container {
  background: #050608;
  font: inherit;
}

/* Grayscale basemap so the site footprints and data layers carry the color */
.page-map .leaflet-tile-pane,
.page-map .leaflet-image-layer {
  filter: grayscale(1) brightness(0.85) contrast(1.08);
}

.page-map .graticule-label {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--sh-f-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: none;
  white-space: nowrap;
}

/* The centre dot is not drawn: the footprint rectangle is the marker. The element stays as the click / hover target
   and the anchor of the name tooltip. */
.page-map .site-marker {
  background: transparent;
  border: none;
  width: 14px !important;
  height: 14px !important;
  margin-left: -7px !important;
  margin-top: -7px !important;
  cursor: pointer;
}

.page-map .site-label {
  background: var(--sh-bar);
  border: 1px solid var(--sh-line-2);
  border-radius: 5px;
  color: var(--sh-ink);
  font: 12px var(--sh-f-ui);
  padding: 2px 7px;
  white-space: nowrap;
  box-shadow: none;
}

.page-map .site-label::before {
  display: none;
}

/* Site detail = context card */
.page-map #detail {
  overflow: hidden;
  padding: 0;
}

.page-map #detail.hidden {
  display: none !important;
}

.page-map .detail-thumb-wrap {
  position: relative;
  height: 150px;
  background: #111;
}

.page-map #detail-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-map .detail-thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(8, 9, 12, 0.85));
}

.page-map #detail-badge {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sh-accent);
  font-weight: 600;
  text-shadow: 0 1px 6px #000;
}

.page-map #detail-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--sh-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.page-map .detail-body {
  padding: 12px 14px 14px;
  gap: 10px;
}

.page-map #detail-name {
  font-size: 24px;
  line-height: 1.1;
}

.page-map .detail-coord {
  margin: 2px 0 0;
  font-family: var(--sh-f-mono);
  font-size: 11.5px;
  color: var(--sh-data);
}

.page-map #detail .sh-kv dd {
  font-size: 13px;
}

/* Footprint short codes (mockup: code above each footprint, accent when selected) */
.page-map .site-code {
  background: none;
  border: 0;
}

.page-map .site-code span {
  display: inline-block;
  font: 600 11px/1 var(--sh-f-mono);
  color: var(--sh-accent);
  /* a thin dark outline drawn outside the letters (the stroke is painted first, so only its outer half shows) */
  -webkit-text-stroke: 3px rgba(8, 9, 12, 0.9);
  paint-order: stroke fill;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.page-map .site-code.hovered span {
  color: #f0a57e;
}

.page-map .site-code.selected span {
  color: var(--sh-accent);
  font-size: 12px;
}

.page-map .detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Desktop / tablets: the selected site's card is a small popup beside its footprint (map.js places it and keeps it there as the
   map moves). Photo strip, name, place, the two buttons; the ground facts open with Details. Phones float it over the map. */
.page-map .detail-more {
  display: none;
}

@media (min-width: 721px) {
  .page-map #detail {
    right: auto;
    width: 264px;
    z-index: 30;
    overflow: hidden;
  }

  .page-map #detail .detail-thumb-wrap {
    height: 84px;
  }

  .page-map #detail #detail-close {
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(10, 11, 13, 0.82);
    border: 1px solid var(--sh-line-2);
    font-size: 16px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .page-map #detail #detail-close:hover,
  .page-map #detail #detail-close:focus-visible {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
    color: var(--sh-accent-ink);
    outline: none;
  }

  .page-map #detail .detail-body {
    padding: 10px 12px 12px;
    gap: 8px;
  }

  .page-map #detail #detail-name {
    font-size: 19px;
  }

  .page-map #detail .detail-actions .sh-btn {
    height: 30px;
  }

  .page-map .detail-more {
    display: block;
    justify-self: start;
    margin: -2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: 500 11.5px var(--sh-f-ui);
    color: var(--sh-muted);
    cursor: pointer;
  }

  .page-map .detail-more::after {
    content: " ▾";
  }

  .page-map #detail.more .detail-more::after {
    content: " ▴";
  }

  .page-map .detail-more:hover {
    color: var(--sh-ink);
  }

  .page-map #detail:not(.more) #detail-kv {
    display: none;
  }

  .page-map #detail #detail-kv {
    gap: 6px 12px;
  }

  .page-map #detail .sh-kv dd {
    font-size: 12px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .sh-modes kbd {
    display: none;
  }

  .sh-modes a {
    padding: 6px 12px;
  }
}

@media (max-width: 1100px) {
  :root {
    --sh-dock-w: 272px;
    --sh-card-w: 256px;
  }

  .sh-brand-text {
    display: none;
  }

  .sh-sun .sh-sun-lbl {
    display: none;
  }

  .page-drive .sh-tele > div {
    padding: 2px 10px;
  }
}

@media (max-width: 860px) {
  .sh-tools {
    max-width: calc(100vw - 2 * var(--sh-gap));
  }

  .page-drive .sh-tele dd {
    font-size: 13px;
  }

  .page-drive .sh-tele .drive-speed {
    font-size: 16px;
  }

  /* Narrow: keep the probe and the site name, drop the locator picture */
  .page-inspect .sh-card {
    width: 240px;
  }

  .page-inspect .locator {
    height: auto;
    border: 0;
    background: none;
  }

  .page-inspect .locator canvas,
  .page-inspect .locator .loc-open,
  .page-inspect #subtitle {
    display: none;
  }

  .page-inspect .locator .loc-name {
    position: static;
    display: block;
    padding: 0;
    background: none;
    font-size: 12px;
  }

  .page-drive .sh-tools {
    left: auto;
    right: var(--sh-gap);
    transform: none;
    bottom: calc(var(--sh-status-h) + var(--sh-gap));
  }
}

/* Phones: dock becomes a sheet, status bar goes away */
@media (max-width: 720px) {
  :root {
    --sh-top-h: 48px;
    --sh-status-h: 0px;
    --sh-gap: 8px;
  }

  /* Status bar folds into the top bar: only the FPS readout stays */
  .sh-status {
    top: 0;
    bottom: auto;
    left: auto;
    right: calc(var(--sh-gap) + 40px);
    height: var(--sh-top-h);
    padding: 0 6px;
    background: none;
    border: 0;
    z-index: 31;
    pointer-events: none;
  }

  .sh-status-l,
  .sh-status-r > :not(#fps):not(#drive-fps) {
    display: none;
  }

  .page-inspect .sh-card {
    left: var(--sh-gap);
    right: var(--sh-gap);
    top: calc(var(--sh-top-h) + var(--sh-gap) + 52px);
    width: auto;
  }

  .page-inspect .probe-sec {
    padding: 8px 12px 6px;
    gap: 4px;
  }

  .page-inspect .loc-sec {
    padding: 0 12px 8px;
  }

  .page-inspect .probe-big {
    font-size: 18px;
  }

  .page-inspect .probe-kv {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 8px;
  }

  .page-inspect .probe-kv > div:nth-last-child(2) { grid-column: auto; }

  .page-inspect .probe-kv dd {
    font-size: 11px;
  }

  .page-inspect .probe-note {
    display: none;
  }

  .sh-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }

  .sh-brand img {
    width: 32px;
    height: 32px;
  }

  .sh-modes {
    justify-self: center;
  }

  .sh-modes a {
    padding: 6px 10px;
  }

  .sh-modes a .sh-mode-lbl {
    display: none;
  }

  .sh-sun {
    display: none;
  }

  .sh-dock {
    left: var(--sh-gap);
    right: var(--sh-gap);
    top: auto;
    bottom: var(--sh-gap);
    width: auto;
    max-height: min(46vh, 26rem);
  }

  .sh-dock.collapsed {
    bottom: var(--sh-gap);
  }

  .sh-dock.collapsed .sh-dock-toggle svg {
    transform: rotate(90deg);
  }

  .sh-dock:not(.collapsed) .sh-dock-toggle svg {
    transform: rotate(-90deg);
  }

  .sh-tools {
    top: calc(var(--sh-top-h) + var(--sh-gap));
    bottom: auto;
  }

  /* ---- Map on phones: same floating bottom panel as Inspect ---- */
  body.page-map {
    /* space taken at the bottom by the panel (its height + the gap under it) */
    --map-sheet: calc(min(46dvh, 26rem) + var(--sh-gap));
  }

  body.page-map:has(#sh-dock.collapsed) {
    --map-sheet: calc(49px + var(--sh-gap));
  }

  .page-map #map {
    inset: var(--sh-top-h) 0 0 0;
  }

  .page-map .sh-dock:not(.collapsed) {
    height: min(46dvh, 26rem);
    max-height: none;
  }

  /* Sheet header: Sites | Layers switch instead of the title */
  .page-map .sh-dock-h h2 {
    display: none;
  }

  .page-map .sh-dock-views {
    display: flex;
    flex: 1 1 auto;
  }

  .page-map .sh-dock-views > button {
    padding: 6px 10px;
  }

  /* One view at a time: the list, or the sun / layer controls */
  .page-map .sh-dock[data-view="layers"] .sh-dock-b {
    display: none;
  }

  .page-map .sh-dock[data-view="sites"] .sh-dock-f {
    display: none;
  }

  .page-map .sh-dock[data-view="layers"] .sh-dock-f {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border-top: 0;
    gap: 10px;
    padding: 12px 14px 14px;
  }

  .page-map .sh-dock .sh-toggle {
    min-height: 36px; /* touch-sized rows */
  }

  /* Pinch zooms the map; only "whole pole" stays as a button */
  .page-map #map-zoom-in,
  .page-map #map-zoom-out {
    display: none;
  }

  .sh-dock-h {
    cursor: default;
  }

  /* Site card: compact, docked to the bottom of the map */
  .page-map .sh-dock-h,
  .page-inspect .sh-dock-h {
    cursor: pointer;
  }

  .page-map .sh-card {
    top: auto;
    left: var(--sh-gap);
    right: var(--sh-gap);
    bottom: calc(var(--map-sheet) + var(--sh-gap));
    width: auto;
    max-height: calc(100dvh - var(--sh-top-h) - var(--map-sheet) - 2 * var(--sh-gap));
    z-index: 21;
  }

  .page-map .detail-thumb-wrap {
    position: static;
    height: auto;
    background: none;
  }

  .page-map .detail-thumb-wrap::after,
  .page-map #detail-thumb {
    display: none;
  }

  .page-map #detail-badge {
    position: static;
    display: block;
    padding: 10px 44px 0 14px;
  }

  .page-map #detail-close {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    background: var(--sh-raise);
  }

  .page-map .detail-body {
    padding: 2px 14px 12px;
    gap: 8px;
  }

  .page-map #detail-name {
    font-size: 20px;
  }

  /* Compact strip: name, coordinates and the two actions. The full stats
     (elevation, relief, footprint, distance) are on the Inspect page. */
  .page-map #detail .sh-kv {
    display: none;
  }

  .page-map .detail-actions .sh-btn {
    height: 40px;
  }

  /* Zoom / whole-pole: small icon column in the map's top-right corner */
  .page-map .sh-tools {
    display: flex;
    flex-direction: column;
    top: calc(var(--sh-top-h) + var(--sh-gap));
    right: var(--sh-gap);
    bottom: auto;
    left: auto;
    transform: none;
    max-width: none;
    padding: 3px;
    gap: 3px;
  }

  .page-map .sh-tools .sh-sep {
    display: none;
  }


  /* Data credit as a small tag in the map's top-left corner */
  .page-map .sh-status {
    top: calc(var(--sh-top-h) + 6px);
    left: 6px;
    right: auto;
    height: auto;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 19;
    font-size: 10px;
  }

  .page-map .sh-status-r > #map-attr {
    display: inline !important;
  }

  .page-inspect .measure-readout {
    bottom: auto;
    top: calc(100% + 8px);
  }

  /* Drive: sticks own the bottom edge, so the panel drops from the top-left */
  .page-drive .sh-dock {
    top: calc(var(--sh-top-h) + var(--sh-gap));
    bottom: auto;
    right: auto;
    width: min(18rem, calc(100vw - 110px));
    max-height: 60vh;
  }

  .page-drive .sh-dock.collapsed {
    bottom: auto;
  }

  .page-drive .sh-dock.collapsed .sh-dock-toggle svg {
    transform: rotate(-90deg);
  }

  .page-drive .sh-dock:not(.collapsed) .sh-dock-toggle svg {
    transform: rotate(90deg);
  }

  .page-drive .sh-tools {
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem);
  }

  body.drive-touch-controls .sh-tools {
    left: auto;
    right: var(--sh-gap);
    transform: none;
    bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem);
  }

  .page-drive .sh-tele > div:nth-child(n + 3) {
    display: none;
  }

  body.drive-touch-controls .drive-map-panel:not(.travel-open) {
    top: calc(var(--sh-top-h) + var(--sh-gap));
  }

  body.drive-map-open .sh-dock,
  body.drive-map-open .sh-tools {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* ---------- Map → Inspect transition (handoff.js) ---------- */

/* Old and new page cross-fade instead of a hard cut (Chromium). */

/* Map: while it zooms into a site, everything but the map steps aside. */
body.map-leaving .sh-ui:not(.sh-topbar),
body.mode-leaving :is(.sh-ui:not(.sh-topbar), #drive-touch, .measure-labels) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.map-leaving :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-grid-pane, .leaflet-tooltip-pane) {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Inspect, arriving from the Map: the map as it was drawn (#intro-tiles, built
   by a script at the top of the page) stays up while the 3D scene builds
   behind it. Once the terrain has drawn, the part over the site dissolves,
   then the camera tilts and the rest of the map fades away. */
/* The top bar stays put through the whole transition, above the map picture. */
html.intro .sh-topbar {
  z-index: 80;
}

html.intro #loading {
  z-index: 50;
  background: transparent;
}

html.intro #loading > * {
  opacity: 0;
  animation: sh-intro-late 0s 7s forwards;
}

#intro-tiles {
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
}

#intro-tiles img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
}

/* Everything except the site rectangle (the hole is 1px smaller than the
   rectangle so the two copies overlap and never leave a seam). */
#intro-tiles .out {
  clip-path: polygon(
    evenodd,
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(var(--ix) + 1px) calc(var(--iy) + 1px),
    calc(var(--ix) + 1px) calc(var(--iy) + var(--ih) - 1px),
    calc(var(--ix) + var(--iw) - 1px) calc(var(--iy) + var(--ih) - 1px),
    calc(var(--ix) + var(--iw) - 1px) calc(var(--iy) + 1px),
    calc(var(--ix) + 1px) calc(var(--iy) + 1px)
  );
}

/* Just the site rectangle: leaves once the terrain behind it has drawn. */
#intro-tiles .in {
  clip-path: polygon(
    var(--ix) var(--iy),
    calc(var(--ix) + var(--iw)) var(--iy),
    calc(var(--ix) + var(--iw)) calc(var(--iy) + var(--ih)),
    var(--ix) calc(var(--iy) + var(--ih))
  );
}

#intro-tiles .in.fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* Map, arriving from Inspect / Drive: the map around the site appears first. */
#intro-tiles .out.fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* ...and its markers and grid wait for the zoom-out, with the panels. */
html.intro body.page-map :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-grid-pane, .leaflet-tooltip-pane) {
  opacity: 0;
}

html.intro-out body.page-map :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-grid-pane, .leaflet-tooltip-pane) {
  animation: sh-intro-ui 0.9s ease both;
}

#intro-tiles.fade {
  opacity: 0;
  transition: opacity 1.3s ease;
}

/* Opened directly (typed URL, reload, site switch in Drive): the same progress
   card, over the boot overlay's dark backdrop instead of its spinner. */
html.direct-load #loading > * {
  visibility: hidden;
}

/* Progress card over the transition (Map and Inspect). */
#intro-bar {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#intro-bar.on {
  opacity: 1;
}

#intro-bar .sh-busy-card {
  padding: 14px 18px 12px;
  border-radius: 10px;
  background: rgba(10, 11, 14, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@keyframes sh-intro-late {
  to { opacity: 1; }
}

html.intro .sh-ui:not(.sh-topbar) {
  opacity: 0;
  pointer-events: none;
}

html.intro-out .sh-ui:not(.sh-topbar) {
  animation: sh-intro-ui 0.9s ease both;
}

@keyframes sh-intro-ui {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Inspect: drive-from-here card and tip ---------- */

.spawn-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  will-change: transform;
}

.spawn-card::after {
  /* little pointer towards the pin */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid var(--sh-line-2);
  border-bottom: 1px solid var(--sh-line-2);
}

.spawn-tip {
  position: fixed;
  left: 50%;
  top: calc(var(--sh-top-h, 52px) + 14px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 8px 14px;
  font-size: 12.5px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.spawn-tip.out {
  opacity: 0;
}


/* ---------- Mission window in Inspect and Drive (missionBar.js): the stay planned on the Map ---------- */
.mw {
  display: grid;
  gap: 8px;
  --mw-accent: var(--sh-accent);
}

.mw[hidden] {
  display: none;
}

.mw-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mw-t {
  margin: 0;
  font: 600 13px var(--sh-f-ui);
  letter-spacing: 0.01em;
  color: var(--sh-ink);
}

.mw-edit {
  font: 500 12px var(--sh-f-ui);
  color: var(--mw-accent);
  text-decoration: none;
}

.mw-edit:hover {
  text-decoration: underline;
}

.mw-range {
  margin: 0;
  font: 400 12px var(--sh-f-mono);
  color: var(--sh-muted);
}

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

.mw-play {
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 50%;
  background: rgba(236, 236, 234, 0.1);
  color: var(--sh-ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.mw-play:hover {
  background: rgba(236, 236, 234, 0.18);
}

.mw-track {
  position: relative;
  flex: 1 1 auto;
  height: 30px;
  min-width: 0;
  cursor: pointer;
  touch-action: none;
}

.mw-track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 8px;
  margin-top: -4px;
  border: 1px solid color-mix(in srgb, var(--mw-accent) 55%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--mw-accent) 16%, transparent);
}

.mw-track:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.mw-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 5px;
  background: var(--mw-accent);
  opacity: 0.85;
}

.mw-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: rgba(236, 236, 234, 0.35);
  pointer-events: none;
}

.mw-head {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--sh-bg);
  border-radius: 50%;
  background: var(--sh-ink);
  pointer-events: none;
}

.mw-now {
  margin: 0;
  font-size: 12px;
  color: var(--sh-muted);
}

.mw-now b {
  color: var(--sh-ink);
  font-weight: 600;
}

.mw-out {
  color: var(--sh-faint);
}

/* the switch between the mission window and a specific date */
.mw-seg {
  margin-bottom: 2px;
}

.mw-seg[hidden],
.mw-pane[hidden] {
  display: none;
}

.mw-pane {
  display: grid;
  gap: 8px;
}

/* the Map's chart in the side panels (missionBar.js) */
.mw-chartwrap {
  position: relative;
  height: 112px;
  min-width: 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.mw-chartwrap:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.mw-chart {
  display: block;
  width: 100%;
  height: 100%;
}

.mw-chart .tb-strip-l {
  font-size: 10px;
}

.mw-chart .tb-xlab {
  font-size: 9.5px;
}

.mw-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mw-row .mw-now {
  min-width: 0;
}

/* Inspect scene cursor: a crosshair; while Measure is on, a crosshair with a small ruler */
.page-inspect #c {
  cursor: crosshair;
}

body.page-inspect.measuring #c {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><g stroke='black' stroke-width='3.4' stroke-linecap='round'><path d='M16 3v7M16 22v7M3 16h7M22 16h7'/></g><g stroke='%23ff9a2e' stroke-width='1.6' stroke-linecap='round'><path d='M16 3v7M16 22v7M3 16h7M22 16h7'/></g><circle cx='16' cy='16' r='1.6' fill='%23ff9a2e' stroke='black' stroke-width='.8'/><g stroke='black' stroke-width='2.8' stroke-linecap='round'><path d='M19 29h10M21 27v2M24 27v2M27 27v2'/></g><g stroke='white' stroke-width='1.2' stroke-linecap='round'><path d='M19 29h10M21 27v2M24 27v2M27 27v2'/></g></svg>") 16 16, crosshair;
}

/* Map (desktop): the same slim mission bar as Inspect, with the site's name above Land and the Power / Comms numbers as two
   small chips at the right end. Compact mode is the card under the left panel; the panel stops above it. */
@media (min-width: 721px) {
  .sh-timebar.slim.tbm-on:not(.compact) {
    grid-template-columns: 290px minmax(0, 1fr) 204px;
    gap: 12px;
    padding: 8px 12px;
  }

  .sh-timebar.slim.tbm-on:not(.compact) .tb-main {
    grid-template-rows: minmax(0, 1fr);
  }

  .sh-timebar.slim.tbm-on .tb-tiles {
    gap: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .sh-timebar.slim.tbm-on.compact .tb-tiles {
    display: none;
  }

  /* a chip: the number on the left, the sentence beside it, both centred */
  .sh-timebar.slim.tbm-on .dash-tile {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-content: center;
    padding: 4px 10px;
  }

  .sh-timebar.slim.tbm-on .dt-main {
    display: contents;
  }

  .sh-timebar.slim.tbm-on .dt-name {
    display: none;
  }

  .sh-timebar.slim.tbm-on .dash-tile b {
    grid-column: 1;
    align-self: center;
    font-size: 24px;
    line-height: 1;
  }

  .sh-timebar.slim.tbm-on .dash-tile span {
    grid-column: 2;
    align-self: center;
    padding-right: 14px;
    font-size: 11px;
    line-height: 1.25;
  }

  /* the planner's help button: in the column of buttons, between the compact / full button and Play */
  .sh-timebar.slim.tbm-on:not(.compact) .tbm-info {
    display: inline-grid;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

  .sh-timebar.slim.tbm-on.compact .tbm-info {
    display: none; /* it is in the date popup there */
  }

  .sh-timebar.slim.tbm-on.compact {
    left: var(--sh-gap);
  }

  /* no title row on desktop: the site's name is on its card, next to the site */
  .sh-timebar.slim.tbm-on .tb-top {
    display: none;
  }

  body.page-map:has(#timebar.slim.tbm-on.compact:not([hidden])) .sh-dock:not(.collapsed) {
    bottom: calc(var(--sh-status-h) + 2 * var(--sh-gap) + var(--tb-h, 0px));
  }
}

/* Map: the pill that says the sunlight and shadows are still loading (litMap.js). Top centre of the map, out of the way. */
.sh-lit-status {
  position: fixed;
  top: calc(var(--sh-top-h) + var(--sh-gap));
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--sh-ink);
  white-space: nowrap;
  pointer-events: none;
}

.sh-lit-status[hidden] {
  display: none;
}

.sh-lit-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-accent);
  animation: sh-lit-pulse 1.1s ease-in-out infinite;
}

@keyframes sh-lit-pulse {
  50% { opacity: 0.25; }
}

@media (max-width: 720px) {
  .sh-lit-status {
    top: calc(var(--sh-top-h) + 6px);
    max-width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-lit-status i {
    animation: none;
  }
}

/* Drive panel: every button, field and segmented control is 32px tall (the segment's own padding makes up the rest) */
.page-drive .sh-dock .sh-seg > button {
  height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}

.page-drive .sh-dock .sh-btn,
.page-drive .sh-dock .drive-tile,
.page-drive .sh-dock .sh-input {
  height: 32px;
  border-radius: 8px;
}

/* Controller panel (top bar): each action with the pad button it is on; click one, then press the new button */
.drive-pad-pop {
  width: min(320px, calc(100vw - 2 * var(--sh-gap)));
  gap: 10px;
}

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

.page-drive .drive-pad-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sh-muted);
}

.page-drive .drive-pad-state .drive-mp-dot {
  background: var(--sh-faint);
}

.page-drive .drive-pad-state:has([data-on="1"]) .drive-mp-dot {
  background: #49c46f;
}

.page-drive .drive-pad-list {
  display: grid;
  gap: 6px;
}

.page-drive .drive-pad-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.page-drive .drive-pad-row.is-fixed {
  color: var(--sh-muted);
}

.page-drive .drive-pad-key {
  min-width: 104px;
  justify-content: center;
  font-family: var(--sh-f-mono);
  font-size: 11.5px;
}

.page-drive .drive-pad-key.is-learning {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
}

.page-drive .drive-pad-fixed {
  min-width: 104px;
  text-align: center;
  font-family: var(--sh-f-mono);
  font-size: 11.5px;
  color: var(--sh-faint);
}

.page-drive #drive-pad-btn.is-connected {
  color: var(--sh-accent);
}

/* Gamepad marks in the key hints (the bottom bar while a pad is in use) */
.page-drive .drive-hint-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.page-drive .drive-hint-bar .pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  font: 700 10px/1 var(--sh-f-mono);
  font-style: normal;
  color: var(--sh-ink);
}

.page-drive .drive-hint-bar .pg + .pg {
  margin-left: -2px;
}

.page-drive .drive-hint-bar .pg-ring {
  fill: none;
  stroke: var(--sh-faint);
  stroke-width: 1.3;
}

.page-drive .drive-hint-bar .pg-arm {
  fill: var(--sh-accent);
}

.page-drive .drive-hint-bar .pg-wide {
  width: 26px;
}

.page-drive .drive-hint-bar .pg-pill {
  width: auto;
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--sh-line-2);
  border-radius: 9px;
  background: var(--sh-raise);
}

.page-drive .drive-hint-bar .pg-stick {
  border: 1.5px solid var(--sh-faint);
  border-radius: 50%;
}

.page-drive .drive-hint-bar .pg-face {
  border-radius: 50%;
  background: var(--c);
  color: #101418;
}

.page-drive .drive-hint-bar .pg-face.pg-grey {
  background: var(--sh-raise);
  border: 1px solid var(--sh-faint);
  color: var(--sh-ink);
}