/* ============================================================
   Limit — drive page: limit-dash panel styles (scoped, docs palette)
   Generated from production-limit-dash-docker/web/style.css;
   selectors scoped under .dashui, palette remapped to the docs theme.
   ============================================================ */
.dashui { --acc: #2563a8; --dim: #777777; --line: #e6e2dc;
  --panel: #ffffff; --panel2: #f4f2ef; --bg: #faf9f7;
  --text: #1a1a1a; --off: #b91c1c; --warn: #b45309; }
.dashui .dot {  width: 9px; height: 9px; border-radius: 50%; display: inline-block;  }
.dashui .dot.on {  background: var(--acc); box-shadow: 0 0 8px var(--acc);  }
.dashui .dot.off {  background: #b91c1c; box-shadow: 0 0 8px #b91c1c;  }
.dashui .tag { 
  font: 11px monospace; padding: 2px 8px; border-radius: 10px;
  background: #f4f2ef; color: var(--dim);
 }
.dashui .tag.on {  color: var(--acc); background: rgba(37,99,168,.10);  }
.dashui .tag.off {  color: #b91c1c; background: rgba(185,28,28,.08);  }
.dashui .imgbox { 
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
 }
.dashui .imgbox {  flex: 1; min-height: 0; height: auto;  }
.dashui .imgbox canvas, .dashui .imgbox img { 
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated; object-fit: contain;
 }
.dashui .personbox {  position: relative;  }
.dashui .overlay-canvas { 
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
 }
.dashui .loader {  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 12px monospace; letter-spacing: .12em; color: var(--dim); background: var(--panel2);  }
.dashui .loader.hidden, .dashui .hidden {  display: none;  }
.dashui .cambtn {  font: 10px monospace; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer;  }
.dashui .cambtn:hover {  color: var(--text); border-color: var(--dim);  }
.dashui .cambtn.on {  color: #ffffff; background: var(--acc); border-color: var(--acc);  }
.dashui .cambtn.power {  color: #ffffff; background: var(--acc); border-color: var(--acc);  }
.dashui .cambtn.power:hover {  filter: brightness(1.12);  }
.dashui .cambtn.power.busy {  animation: power-pulse 1.2s ease-in-out infinite; pointer-events: none; cursor: wait;  }
@keyframes power-pulse {  0%,100% { opacity: 1; } 50% { opacity: .55; }  }
.dashui .hint {  font: 11px monospace; color: var(--dim); margin-top: 6px;  }
.dashui .hint.ok {  color: var(--acc);  }
.dashui .tele-cell .v.bad {  color: #b91c1c;  }
.dashui .tele {  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;  }
.dashui .tele-cell { 
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 8px; display: flex; flex-direction: column; gap: 1px;
 }
.dashui .tele-cell.full {  grid-column: 1 / -1;  }
.dashui .tele-cell .k {  font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim);  }
.dashui .tele-cell .v {  font: 13px monospace; color: var(--text);  }
.dashui .tablewrap { 
  flex: 1; min-height: 0; max-height: none; overflow: auto;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel2);
 }
.dashui thead th { 
  position: sticky; top: 0; background: #f4f2ef; color: var(--dim);
  text-align: left; padding: 6px 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; z-index: 1;
 }
.dashui tbody td {  padding: 4px 10px; border-top: 1px solid #e6e2dc; white-space: nowrap;  }
.dashui tr.live td.hz {  color: var(--acc);  }
.dashui tr.idle td.hz {  color: var(--off);  }
.dashui td.hz {  font: 12px monospace; text-align: right; width: 56px;  }
.dashui td.topic {  font-family: monospace; max-width: 420px; overflow: hidden; text-overflow: ellipsis;  }
.dashui td.type {  color: var(--dim); font-family: monospace;  }
.dashui td.msg {  color: var(--dim); font-size: 11px; max-width: 460px; overflow: hidden; text-overflow: ellipsis;  }
.dashui tr.topic-main td.msg {  cursor: pointer; user-select: none;  }
.dashui tr.topic-main:hover td.msg {  color: var(--text);  }
.dashui .msg-caret {  display: inline-block; width: 16px; color: var(--acc);  }
.dashui tr.topic-detail td {  white-space: normal; background: #f4f2ef;  }
.dashui tr.topic-detail pre { 
  margin: 0; padding: 8px 10px;
  font: 11px/1.55 monospace; color: #333333;
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
 }
.dashui .map-chip { 
  background: rgba(255,255,255,.92); border: 1px solid #e6e2dc; border-radius: 6px;
  color: #777777; padding: 6px 12px; letter-spacing: .06em; max-width: 70vw;
 }
.dashui .map-chip.ok {  color: #2563a8; border-color: #b8cfe8;  }
.dashui .map-chip.warn {  color: #b45309; border-color: #e0c9a8;  }
.dashui .map-chip.bad {  color: #b91c1c; border-color: #f1b3b3;  }
.dashui .map-btns {  display: flex; gap: 6px;  }
.dashui .map-btn { 
  background: #ffffff; color: #777777; border: 1px solid #e6e2dc; border-radius: 6px;
  font: 12px/1 monospace; letter-spacing: .08em; padding: 6px 14px; cursor: pointer;
 }
.dashui .map-btn:hover {  border-color: #2563a8;  }
.dashui .map-btn.on {  background: #eef3fa; border-color: #2563a8; color: #2563a8;  }
.dashui .limit-dot { 
  width: 18px; height: 18px; border-radius: 50%;
  background: #2563a8; border: 3px solid #102a43; box-shadow: 0 0 14px #2563a8;
 }
.dashui .limit-dot.stale { 
  background: #6b7a86; border-color: #a9b4bd; box-shadow: 0 0 6px rgba(107,122,134,.6);
 }
.dashui .bottombar .bar-title { 
  font: 700 11px/1 monospace; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc); align-self: flex-start; padding: 0 2px;
 }
.dashui .bottombar .bar-top { 
  display: flex; align-items: center; align-content: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 26px;
 }
.dashui .bottombar .bar-tabs {  display: flex; gap: 6px; align-self: flex-start;  }
.dashui .bottombar .bar-tab { 
  background: #ffffff; color: #777777;
  border: 1px solid #e6e2dc; border-radius: 6px;
  font: 12px/1 monospace; letter-spacing: .08em; padding: 5px 14px; cursor: pointer;
 }
.dashui .bottombar .bar-tab:hover {  border-color: #2563a8;  }
.dashui .bottombar .bar-tab.on {  background: #eef3fa; border-color: #2563a8; color: #2563a8;  }
.dashui .bottombar .bar-tabpanel { 
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  flex: 1; min-width: 0; min-height: 0;
 }
.dashui .bottombar .tele-row { 
  display: flex; align-items: stretch; gap: 14px; flex-wrap: nowrap; min-width: 0;
  flex: 1 1 auto; min-height: 0;   /* stretch the row to fill the tab panel (map height) */
 }
.dashui .bottombar .bar-tabpanel[hidden] {  display: none;  }
.dashui .bottombar .bar-body { 
  display: flex; align-items: stretch; gap: 10px;
  flex: 1 1 auto; min-height: 130px;   /* keep the embedded map usable even when bar-top wraps */
 }
.dashui .bottombar .bar-tabswrap { 
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
 }
.dashui .bottombar .bar-tabpanel {  width: 100%;  }
.dashui .bottombar .map-embed { 
  flex: 30 1 0; min-width: 0; max-width: none;   /* proportional share of the row */
  position: relative;
  border: 1px solid #e6e2dc; border-radius: 8px;
  overflow: hidden; background: #f4f2ef;
 }
.dashui .bottombar .map-embed.leaflet-container, .dashui .bottombar .map-embed .leaflet-container { 
  position: absolute; inset: 0; z-index: 1;
 }
.dashui .bottombar .map-embed .leaflet-control-attribution { 
  background: rgba(255,255,255,.85); color: #777777;
  font-size: 9px; padding: 1px 4px;
 }
.dashui .bottombar .map-embed .leaflet-control-attribution a {  color: #2563a8;  }
.dashui .bottombar .map-embed-hud { 
  position: absolute; z-index: 1001; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 4px; padding: 4px 5px;
  background: linear-gradient(to bottom, rgba(255,255,255,.88) 45%, rgba(7,10,16,0));
  pointer-events: none;
 }
.dashui .bottombar .map-embed-hud > * {  pointer-events: auto;  }
.dashui .bottombar .map-embed-hud .map-btn {  padding: 3px 7px; font-size: 10px;  }
.dashui .bottombar .map-embed-hud .map-full { 
  background: #ffffff; color: #777777; border: 1px solid #e6e2dc; border-radius: 6px;
  font: 11px/1 monospace; padding: 3px 7px; cursor: pointer; text-decoration: none;
 }
.dashui .bottombar .map-embed-hud .map-full:hover {  border-color: #2563a8; color: #2563a8;  }
.dashui .bottombar .map-embed-hud .map-chip { 
  flex: 1 1 auto; min-width: 0; padding: 3px 6px; font-size: 10px;
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
.dashui .bottombar .mvmt {  gap: 10px;  }
.dashui .bottombar .mvmt-label {  font-size: 10px; letter-spacing: .1em; color: #777777;  }
.dashui .bottombar .mvmt-cell {  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px;
  border: 1px solid transparent; border-radius: 4px;  }
.dashui .bottombar .mvmt-cell .k {  font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim);  }
.dashui .bottombar .mvmt-cell .v {  font: 12px monospace; color: #2563a8; min-width: 3.5ch;  }
.dashui .bottombar .bar-group { 
  display: flex; align-items: center; gap: 8px;
  background: rgba(37,99,168,.05);
  border: 1px solid #e6e2dc; border-radius: 8px;
  padding: 5px 10px;
  flex: 0 0 auto; min-width: 0;
 }
.dashui .bottombar .connbar { 
  display: flex; align-items: center; gap: 6px;
  font: 11px monospace; letter-spacing: .06em; color: var(--dim);
 }
.dashui .bottombar .clockbar {  font: 12px monospace; color: var(--dim);  }
.dashui .bottombar .bar-tele { 
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
  flex: 22 1 0; min-width: 0;   /* proportional share of the row (was 22% basis) */
  align-self: stretch;
  background: rgba(37,99,168,.05); border: 1px solid #e6e2dc; border-radius: 8px;
  padding: 6px 9px;
 }
.dashui .bottombar .bar-tele .bar-tele-label { 
  grid-column: 1 / -1;
  font: 700 9px monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
  padding: 1px 4px 0;
 }
.dashui .bottombar .bar-tele .tele-cell { 
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 1px 4px; min-width: 0;
  font: 11px monospace; color: #777777;
  border: 1px solid transparent; border-radius: 4px;
 }
.dashui .bottombar .bar-tele .tele-cell .k { 
  flex-shrink: 0; font-size: 11px; line-height: 1.3; color: #777777;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .bar-tele .tele-cell .v { 
  margin-left: auto;
  font: 11px/1.3 monospace; color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .bar-tele .tele-cell .v.bad {  color: #b91c1c;  }
.dashui .bottombar .bar-tele .tele-cell.cmd-on { 
  background: #eef3fa; border-color: #2563a8;
  box-shadow: 0 0 14px rgba(37,99,168,.40), inset 0 0 10px rgba(37,99,168,.18);
 }
.dashui .bottombar .bar-tele .tele-cell.cmd-on .v {  color: #1d4f8c; text-shadow: 0 0 6px rgba(37,99,168,.55);  }
.dashui .bottombar .ctl { 
  display: flex; align-items: center; gap: 10px;
  font: 12px/1 monospace; letter-spacing: .08em; color: #777777;
 }
.dashui .bottombar .ctl .val {  min-width: 2.5ch; color: #2563a8; font-weight: 700;  }
.dashui .bottombar input[type="range"] { 
  width: 170px; accent-color: #2563a8; cursor: pointer;
 }
.dashui .pad {  display: flex; flex-direction: column; align-items: center; gap: 5px;  }
.dashui .pad.mode-disabled {  opacity: .35; pointer-events: none;  }
.dashui .pip {  display: block;  }
.dashui .pip .pip-depth { 
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated;
 }
.dashui .pip.show-depth #pip-zed {  display: none;  }
.dashui .pip.show-depth .pip-depth {  display: block;  }
.dashui .pip .pip-tag { 
  position: absolute; top: 5px; left: 7px; z-index: 2;
  font: 10px/1 monospace; letter-spacing: .06em; color: #2563a8;
  background: rgba(7, 10, 16, .75); padding: 2px 6px; border-radius: 4px;
  pointer-events: none;
 }
.dashui .bottombar .autonav {  gap: 10px;  }
.dashui .bottombar .autonav .ctl {  gap: 6px;  }
.dashui .bottombar input[type="number"] { 
  width: 72px;
  background: #ffffff; color: #1a1a1a;
  border: 1px solid #e6e2dc; border-radius: 4px;
  font: 12px monospace; padding: 3px 6px;
 }
.dashui .bottombar input[type="number"]:focus {  border-color: #2563a8; outline: none;  }
.dashui .bottombar .autostatus .v {  color: #777777;  }
.dashui .bottombar .autostatus .v.ok {  color: #2563a8;  }
.dashui .bottombar .autostatus .v.busy {  color: #b45309;  }
.dashui .bottombar .autostatus .v.bad {  color: #b91c1c;  }
.dashui .bottombar .autoact {  color: #2563a8; border-color: rgba(37,99,168,.45);  }
.dashui .bottombar .autoact:hover { 
  color: #102a43; border-color: #2563a8; background: rgba(37,99,168,.10);
 }
.dashui .bottombar .autoact:active {  background: rgba(37,99,168,.18);  }
.dashui .bottombar .autostop {  color: #b91c1c; border-color: rgba(185,28,28,.45);  }
.dashui .bottombar .autostop:hover { 
  color: #7f1d1d; border-color: #b91c1c; background: rgba(185,28,28,.08);
 }
.dashui .bottombar .autostop:active {  background: rgba(185,28,28,.18);  }
.dashui .bottombar .autohint { 
  font: 10px monospace; letter-spacing: .06em; color: var(--dim);
  align-self: center;
 }
.dashui .bottombar .navgrp {  gap: 10px; align-items: center;  }
.dashui .bottombar .navgrid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 5px;
  width: min(640px, 62vw);
  max-height: 118px;
  overflow-y: auto;
  padding: 2px;
  background: #f4f2ef;
  border: 1px solid var(--line, #e6e2dc);
  border-radius: 8px;
 }
.dashui .bottombar .bar-group.unified { 
  flex: 17 1 0; width: auto; min-width: 0;
  flex-wrap: wrap; align-content: center;
 }
.dashui .bottombar .tele-telecol { 
  display: flex; flex-direction: column; gap: 6px;
  flex: 29 1 0; min-width: 0;   /* combined share of gps (12) + goal (17) */
 }
.dashui .bottombar .tele-telecol > .gps-box { 
  flex: 0 0 auto;               /* size to content; column, not row, flex item */
 }
.dashui .bottombar .tele-telecol > .bar-group.unified { 
  flex: 1 1 auto;               /* fill remaining column height */
 }
.dashui .bottombar .bar-group.unified .navgrid { 
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
 }
.dashui .bottombar .navgrid .nvc { 
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 3px 8px;
  border: 1px solid #e6e2dc; border-radius: 5px; background: #ffffff;
  font: 11px monospace; white-space: nowrap; overflow: hidden;
 }
.dashui .bottombar .navgrid .nvc .name { 
  color: #777777; overflow: hidden; text-overflow: ellipsis; min-width: 0;
 }
.dashui .bottombar .navgrid .nvc .st { 
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
 }
.dashui .bottombar .navgrid .nvc.st-idle .st {  color: #9a9a9a;  }
.dashui .bottombar .navgrid .nvc.st-running { 
  border-color: #2563a8; background: #eef3fa;
 }
.dashui .bottombar .navgrid .nvc.st-running .st {  color: #2563a8; animation: navpulse 1.1s ease-in-out infinite;  }
.dashui .bottombar .navgrid .nvc.st-success {  border-color: rgba(37,99,168,.45);  }
.dashui .bottombar .navgrid .nvc.st-success .st {  color: #2563a8;  }
.dashui .bottombar .navgrid .nvc.st-failure { 
  border-color: #b91c1c; background: #fdecec;
 }
.dashui .bottombar .navgrid .nvc.st-failure .st {  color: #b91c1c;  }
.dashui .bottombar .navgrid .nvc-empty {  color: #9a9a9a; justify-content: center;  }
@keyframes navpulse {  50% { opacity: .35; }  }
.dashui .bottombar .gps-box { 
  /* FIXED width (% of view) — content-driven sizing made the box (and the
     whole bottom bar) resize on every GNSS update (sats / dB-Hz /
     constellation rows). Values inside ellipsize; the box never moves. */
  flex: 12 1 0; min-width: 0;   /* proportional share of the row (was 11% basis) */
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  background: rgba(37,99,168,.05);
  border: 1px solid #e6e2dc; border-radius: 8px;
  padding: 6px 9px;
 }
.dashui .bottombar .gps-label { 
  font: 700 9px monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
 }
.dashui .bottombar .gps-grid { 
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 auto;
 }
.dashui .bottombar .gps-box .tcell { 
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 1px 4px; min-width: 0;
  font: 11px monospace; color: #777777;
  border: 1px solid transparent; border-radius: 4px;
 }
.dashui .bottombar .gps-box .tcell .k { 
  flex-shrink: 0; font-size: 11px; line-height: 1.3; color: #777777;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .gps-box .tcell .v { 
  margin-left: auto;
  font: 11px/1.3 monospace; color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .gps-box .tcell .v.good {  color: #2563a8;  }
.dashui .bottombar .gps-box .tcell .v.bad {  color: #b91c1c;  }
.dashui .bottombar .gps-const { 
  /* Fill the remaining box height (5 constellation rows at 11px fit easily);
     row count does not change the box height. Extra rows clip. */
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 auto; min-height: 80px; overflow: hidden;
 }
.dashui .bottombar .gps-const .trow { 
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 11px monospace; color: #777777;
  border: 1px solid transparent; border-radius: 4px; padding: 1px 4px;
 }
.dashui .bottombar .gps-const .trow .v {  color: #1a1a1a; font-variant-numeric: tabular-nums;  }
.dashui .bottombar .gps-const .trow.has-fix {  border-color: rgba(37,99,168,.30); background: #eef3fa;  }
.dashui .bottombar .gps-const .trow.has-fix .v {  color: #2563a8;  }
.dashui .bottombar .gps-const .trow-empty .k {  color: #9a9a9a;  }
.dashui .bottombar .simtopics-box { 
  flex: 22 1 0; min-width: 0;   /* proportional share of the row (was 22% basis) */
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(37,99,168,.05);
  border: 1px solid #e6e2dc; border-radius: 8px;
  padding: 6px 9px;
 }
.dashui .bottombar .topics-col { 
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  flex: 22 1 0; min-width: 0; min-height: 0;
  overflow-y: auto;
 }
.dashui .bottombar .topics-col > .simtopics-box {  flex: 0 0 auto;  }
.dashui .bottombar #ouster-box .simtopics-grid, .dashui .bottombar #zed2i-box .simtopics-grid {  grid-template-columns: repeat(4, 1fr);  }
.dashui .bottombar .simtopics-label { 
  font: 700 9px monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
 }
.dashui .bottombar .simtopics-grid { 
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
  overflow-y: auto; min-height: 0;
 }
.dashui .bottombar .simcell { 
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 1px 4px; min-width: 0;
  font: 11px monospace; color: #777777;
  border: 1px solid transparent; border-radius: 4px;
 }
.dashui .bottombar .simcell .k { 
  flex-shrink: 0; font-size: 11px; line-height: 1.3; color: #777777;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .simcell .v { 
  margin-left: auto;
  font: 11px/1.3 monospace; color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .simcell.subhead { 
  grid-column: 1 / -1;
  font-weight: 700; letter-spacing: .08em;
  color: var(--dim);
  border-bottom: 1px solid #e6e2dc; border-radius: 0;
  padding-bottom: 3px;
 }
.dashui .bottombar .tele-cell.live, .dashui .bottombar .simcell.live, .dashui .bottombar .tcell.live {  border-color: rgba(37,99,168,.30); background: #eef3fa;  }
.dashui .bottombar .simjoint-grid { 
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 6px;
 }
.dashui .bottombar .simjoint-leg {  display: flex; flex-direction: column; gap: 2px; min-width: 0;  }
.dashui .bottombar .simjoint-subhead { 
  font: 700 10px monospace; letter-spacing: .12em;
  color: var(--dim);
 }
.dashui .bottombar .simjoint-cell { 
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 1px 4px; min-width: 0;
  font: 10px monospace; color: #777777;
  border: 1px solid transparent; border-radius: 4px;
 }
.dashui .bottombar .simjoint-cell .k {  flex-shrink: 0; color: #777777;  }
.dashui .bottombar .simjoint-cell .v { 
  margin-left: auto;
  font: 10px/1.3 monospace; color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
.dashui .bottombar .simjoint-cell.live {  border-color: rgba(37,99,168,.30); background: #eef3fa;  }
.dashui .bottombar .simjoint-cell.live .v {  color: #2563a8;  }
.dashui .bottombar .tele-cell.live .v, .dashui .bottombar .simcell.live .v, .dashui .bottombar .tcell.live .v {  color: #2563a8;  }
.dashui .bottombar .simcell.sim-idle, .dashui .bottombar .simjoint-cell.sim-idle { 
  background: #d5e4f5; border-color: #2563a8;
 }
.dashui .bottombar .simcell.sim-idle .v, .dashui .bottombar .simjoint-cell.sim-idle .v {  color: #1d4f8c;  }
.dashui .bottombar .simcell.stale, .dashui .bottombar .simjoint-cell.stale {
  border-color: #e0455a; background: #fdeef1;
}
.dashui .bottombar .simcell.stale .v, .dashui .bottombar .simjoint-cell.stale .v { color: #c0304a; }
.dashui .bottombar .simcell.nodata, .dashui .bottombar .simjoint-cell.nodata {
  border-color: #b97324; background: #fdf4e8;
}
.dashui .bottombar .simcell.nodata .v, .dashui .bottombar .simjoint-cell.nodata .v { color: #a05f1a; }
.dashui .bottombar .simtopics-label.dead { color: #c0304a; }

/* bottombar: always visible on the drive page (dash gates it on data-view) */
.dashui .bottombar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  flex: 0 0 auto; min-height: 0; margin-top: 8px; padding: 8px 4px; gap: 8px;
  border-top: 1px solid var(--line); }

/* ---- rules added by hand (whitelist gaps / page-specific adaptations) ---- */

/* D-pad buttons (dash .pad-btn) */
.dashui .pad-btn {
  width: 58px; height: 38px;
  background: #ffffff; color: #1a1a1a;
  border: 1px solid #e6e2dc; border-radius: 6px;
  font-size: 15px; line-height: 1; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.dashui .pad-btn:hover { border-color: #2563a8; }
.dashui .pad-btn.held, .dashui .pad-btn:active {
  background: #eef3fa; border-color: #2563a8; color: #1d4f8c;
  box-shadow: 0 0 14px rgba(37,99,168,.30), inset 0 0 10px rgba(37,99,168,.12);
}
/* Strafe (Q/E) lights the side arrows in a distinct color from turn (A/D) */
.dashui .pad-btn.strafe {
  background: #fdf6e3; border-color: #c78a00; color: #8a5a00;
  box-shadow: 0 0 14px rgba(199,138,0,.35), inset 0 0 10px rgba(199,138,0,.15);
}

/* PiP buttons + source switcher (dash .pipbtn / .pip-src) */
.dashui .pip-src { position: absolute; top: 5px; right: 7px; z-index: 4; display: flex; gap: 4px; }
.dashui .pipbtn {
  font: 10px/1.5 monospace; letter-spacing: .06em; color: #9fb0c0;
  background: rgba(255,255,255,.80); border: 1px solid #2a3644;
  border-radius: 4px; padding: 2px 8px; cursor: pointer;
}
.dashui .pipbtn.on { color: #1d4f8c; border-color: #2563a8; }

/* PiP window (dash spatial view, adapted to the drive page stage) */
.dashui .pip {
  position: absolute; right: 18px; bottom: 18px; z-index: 10;
  width: min(420px, 44vw); aspect-ratio: 16 / 9;
  border: 2px solid #2a3644; border-radius: 8px; overflow: hidden;
  background: #000; box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.dashui .pip img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* dash panel cards (drive page rows) — docs palette */
.dashui .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px 12px; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.dashui .panel h2 {
  font-size: 12px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--dim);
  margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.dashui .tags { display: flex; gap: 6px; flex-shrink: 0; }

/* slim telemetry column (dash .panel.slim) */
.dashui .panel.slim { overflow: hidden; }
.dashui .panel.slim h2 { margin-bottom: 6px; }
.dashui .panel.slim .tele { grid-template-columns: 1fr; gap: 5px; overflow-y: auto; flex: 1; }
.dashui .panel.slim .tele-cell { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 8px; }
.dashui .panel.slim .tele-cell .v { font-size: 12px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashui .panel.slim .tele-cell .k { flex-shrink: 0; }

/* tables (dash base) */
.dashui table { width: 100%; border-collapse: collapse; font-size: 12px; }

/* dashboard grid (dash .dash) — 12-col rows for the panel sections */
.dashui .dash {
  display: grid; gap: 12px; padding: 0;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(240px, auto);
}
.dashui .span4 { grid-column: span 4; }
.dashui .span8 { grid-column: span 8; }
.dashui .span12 { grid-column: span 12; }
@media (max-width: 900px) {
  .dashui .span4, .dashui .span8 { grid-column: span 12; }
}

/* dead screen (dash style.css mirror, plan §2.5) — scoped to the .dashui
   hero: stage + control panel ghost to 25 %, centered status overlay.
   The docs page around the demo stays fully readable. */
.dashui .conn-lost-overlay {
  position: absolute; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(248, 247, 245, 0.6);
}
.dashui.conn-lost .conn-lost-overlay { display: flex; }
.dashui.conn-lost .stage,
.dashui.conn-lost .bottombar { opacity: 0.25; }
.dashui .cl-panel {
  text-align: center;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 28px 44px;
  box-shadow: 0 8px 32px rgba(30, 30, 30, .18);
}
.dashui .cl-title { font-size: 22px; letter-spacing: .18em; color: #b91c1c; }
.dashui .cl-sub { color: #555; margin-top: 8px; font-size: 13px; }