:root {
  color-scheme: dark;
  --void: #081016;
  --slate: #111c24;
  --slate-light: #182832;
  --slate-lighter: #203744;
  --ink: #e9f0f2;
  --muted: #9cafb7;
  --quiet: #7d959e;
  --line: #2a414d;
  --sky: #62c7ee;
  --sky-deep: #1c7fae;
  --mint: #9de1bc;
  --amber: #e6bf74;
  --red: #ef8a83;
  --max-width: 1440px;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--void);
  font-family: "IBM Plex Sans", "Trebuchet MS", "Segoe UI Variable", sans-serif;
  line-height: 1.45;
}

button, a { font: inherit; }

a { color: inherit; }

.app-shell { min-height: 100vh; }

.topbar,
main,
.footer {
  width: min(calc(100% - 48px), var(--max-width));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  font-size: 15px;
}

.brand strong { font-weight: 700; }

.brand-mark {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid var(--sky);
}

.brand-mark span { display: block; width: 4px; background: var(--sky); }
.brand-mark span:nth-child(1) { height: 7px; }
.brand-mark span:nth-child(2) { height: 12px; }
.brand-mark span:nth-child(3) { height: 17px; }

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quiet);
}

.signal-dot.is-live {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(157, 225, 188, 0.12);
  animation: signal-pulse 2.4s ease-out infinite;
}

.signal-dot.is-error { background: var(--red); }

.mode-tag {
  margin-left: 8px;
  padding: 4px 7px;
  border: 1px solid var(--sky-deep);
  color: var(--sky);
  font-size: 11px;
  letter-spacing: 0.12em;
}

main { padding: 70px 0 48px; }

.intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 50px;
}

.measure-label,
.panel-meta,
th,
.detail-label {
  color: var(--quiet);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.route-label { margin: 0 0 14px; color: var(--sky); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.05em; }

h1, h2, p { margin-top: 0; }

h1 {
  max-width: 720px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: clamp(42px, 7vw, 82px);
  font-weight: 550;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.lede {
  max-width: 540px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 17px;
}

.intro-note {
  display: flex;
  align-items: start;
  gap: 14px;
  min-width: 190px;
  padding-bottom: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.intro-note p { margin: 0; }
.note-rule { width: 24px; height: 1px; margin-top: 8px; background: var(--sky); }

.measure-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.measure {
  min-height: 104px;
  padding: 20px 22px 17px 0;
  border-right: 1px solid var(--line);
}

.measure + .measure { padding-left: 22px; }
.measure:last-child { border-right: 0; }

.measure-label { display: block; margin-bottom: 11px; }

.measure strong {
  display: block;
  color: var(--ink);
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.measure-live strong { color: var(--mint); }
.measure-alert strong { color: var(--amber); }
.measure-time strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.ledger-panel,
.plot-panel,
.detail-panel {
  border: 1px solid var(--line);
  background: var(--slate);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-heading > div { display: flex; align-items: center; gap: 14px; }
.view-toggle { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); background: var(--void); }
.view-button { padding: 5px 8px; border: 0; color: var(--quiet); background: transparent; cursor: pointer; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.view-button:hover:not(:disabled), .view-button:focus-visible:not(:disabled) { color: var(--ink); outline: 1px solid var(--sky-deep); outline-offset: -1px; }
.view-button.is-active { color: var(--ink); background: var(--slate-lighter); }
.view-button:disabled { cursor: not-allowed; opacity: 0.45; }
h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 520;
  letter-spacing: -0.025em;
}

.panel-meta { text-align: right; letter-spacing: 0.04em; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 15px 20px 12px; font-weight: 400; white-space: nowrap; }
td { padding: 17px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background 160ms ease; }
tbody tr:hover, tbody tr:focus-visible { outline: none; background: var(--slate-light); }
tbody tr:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }

.vehicle-name { color: var(--ink); font-weight: 560; }
.vehicle-id { display: block; margin-top: 3px; color: var(--quiet); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.state-cell { display: inline-flex; align-items: center; gap: 8px; }
.state-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }
.state-ready .state-dot { background: var(--mint); }
.state-armed .state-dot, .state-airborne .state-dot { background: var(--sky); }
.state-fault .state-dot, .state-stale .state-dot { background: var(--red); }
.state-label { color: var(--ink); text-transform: capitalize; }
.state-stale .state-label { color: var(--red); }
.battery-good { color: var(--mint); }
.battery-low { color: var(--amber); }
.empty-state { padding: 42px 20px; color: var(--quiet); text-align: center; }

.site-plot {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  background: var(--void);
}

#site-gis, #site-map, #site-3d { display: block; width: 100%; height: clamp(360px, 42vw, 560px); min-height: 0; }
#site-gis { position: relative; overflow: hidden; background: #d8e0dc; }
#site-3d { background: var(--void); }
.maplibregl-map { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
#site-gis .maplibregl-ctrl-group { border: 1px solid var(--line); border-radius: 0; background: rgba(17, 28, 36, 0.94); box-shadow: none; }
#site-gis .maplibregl-ctrl-group button { filter: invert(1) grayscale(1); }
#site-gis .maplibregl-ctrl-attrib { color: var(--ink); background: rgba(8, 16, 22, 0.82); }
#site-gis .maplibregl-ctrl-attrib a { color: var(--sky); }
.scene-overlay { position: absolute; top: 22px; left: 24px; padding: 5px 7px; border: 1px solid var(--line); color: var(--quiet); background: rgba(8, 16, 22, 0.82); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.is-hidden { display: none !important; }
.map-frame { fill: var(--void); stroke: var(--line); stroke-width: 1; }
.map-grid { stroke: var(--slate-lighter); stroke-width: 1; }
.map-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; }
.map-estate { fill: rgba(32, 55, 68, 0.28); stroke: var(--quiet); stroke-width: 1; stroke-dasharray: 3 5; }
.map-geofence { fill: rgba(98, 199, 238, 0.08); stroke: var(--sky-deep); stroke-width: 1; stroke-dasharray: 4 5; }
.map-zone { fill: rgba(157, 225, 188, 0.1); stroke: var(--mint); stroke-width: 1; }
.map-route { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map-track { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.map-track-drone-01 { stroke: var(--sky); }
.map-track-drone-02 { stroke: var(--mint); }
.map-track-drone-03 { stroke: var(--amber); }
.map-waypoint { fill: var(--sky); stroke: var(--void); stroke-width: 2; }
.map-dock rect { fill: var(--amber); stroke: var(--void); stroke-width: 3; }
.map-dock text, .map-label { fill: var(--muted); font: 11px ui-monospace, monospace; }
.map-zone-label { fill: var(--mint); }
.map-compass path { fill: var(--ink); }
.map-compass text { fill: var(--quiet); font: 10px ui-monospace, monospace; }
.map-vehicle { cursor: pointer; outline: none; }
.map-vehicle:focus-visible .vehicle-marker { stroke: var(--ink); stroke-width: 3; }
.map-evidence { cursor: pointer; outline: none; }
.map-evidence:focus-visible .map-evidence-marker, .map-evidence.is-selected .map-evidence-marker { stroke: var(--ink); stroke-width: 3; }
.map-evidence-marker { fill: var(--amber); stroke: var(--void); stroke-width: 2; }
.map-evidence-needs-attention { fill: var(--red); }
.map-evidence-reviewed { fill: var(--mint); }
.map-evidence-label { fill: var(--ink); font: 10px ui-monospace, monospace; }
.vehicle-marker { fill: var(--sky); stroke: var(--void); stroke-width: 5; }
.vehicle-marker-fault { fill: var(--red); }
.vehicle-label { fill: var(--ink); font: 12px ui-monospace, monospace; }
.plot-empty { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: var(--quiet); font-family: ui-monospace, monospace; font-size: 11px; text-align: center; }
.plot-empty.is-hidden { display: none; }
.plot-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; min-height: 53px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.legend-mark { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.legend-vehicle { background: var(--sky); }
.legend-route { width: 16px; height: 2px; border-radius: 0; background: var(--sky); }
.legend-zone { border: 1px solid var(--mint); border-radius: 0; background: rgba(157, 225, 188, 0.15); }
.legend-dock { border-radius: 0; background: var(--amber); }
.legend-evidence { border-radius: 0; background: var(--amber); }
.legend-alert { border-radius: 0; background: var(--red); }
#plot-coordinates { margin-left: auto; color: var(--quiet); }
.playback-bar { padding: 14px 20px 17px; border-top: 1px solid var(--line); background: var(--slate); }
.playback-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; color: var(--ink); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.playback-controls { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.playback-button { min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); color: var(--muted); background: var(--slate-light); cursor: pointer; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.playback-button:hover:not(:disabled), .playback-button:focus-visible:not(:disabled) { border-color: var(--sky); color: var(--ink); background: var(--slate-lighter); outline: none; }
.playback-button:disabled { color: var(--quiet); cursor: not-allowed; opacity: 0.5; }
.playback-range { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.playback-range input { width: 100%; min-width: 0; accent-color: var(--sky); cursor: pointer; }
.playback-range input:disabled { cursor: not-allowed; }
.playback-time { min-width: 128px; color: var(--ink); font-family: ui-monospace, monospace; font-size: 11px; text-align: right; }

.detail-panel { margin-top: 18px; }
.detail-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 112px; }
.detail-item { padding: 20px; border-right: 1px solid var(--line); }
.detail-item:last-child { border-right: 0; }
.detail-label { display: block; margin-bottom: 9px; }
.detail-value { color: var(--ink); font-family: ui-monospace, monospace; font-size: 14px; }
.detail-empty { grid-column: 1 / -1; margin: 0; padding: 25px 20px; color: var(--quiet); font-size: 13px; }

.mission-panel { margin-top: 18px; border: 1px solid var(--line); background: var(--slate); }
.mission-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.7fr) minmax(260px, 0.9fr); gap: 24px; padding: 23px 20px 20px; }
.mission-kicker { margin: 0 0 8px; color: var(--sky); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mission-summary h3 { margin: 0 0 8px; color: var(--ink); font-size: 22px; font-weight: 520; letter-spacing: -0.035em; }
.mission-copy { min-height: 45px; margin: 0 0 19px; color: var(--muted); font-size: 13px; }
.progress-track { height: 8px; overflow: hidden; background: var(--void); border: 1px solid var(--line); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--mint); transition: width 350ms ease; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 11px; text-transform: capitalize; }
.mission-controls { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.control-button { min-height: 37px; padding: 8px 12px; border: 1px solid var(--line); color: var(--muted); background: var(--slate-light); cursor: pointer; font-size: 12px; text-align: left; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.control-button:hover:not(:disabled), .control-button:focus-visible:not(:disabled) { border-color: var(--sky); color: var(--ink); background: var(--slate-lighter); outline: none; }
.control-button:disabled { color: var(--quiet); cursor: not-allowed; opacity: 0.5; }
.control-button-primary { border-color: var(--sky-deep); color: var(--sky); }
.mission-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-left: 1px solid var(--line); }
.mission-facts div { padding: 3px 0 14px 18px; }
.mission-facts dt { color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.mission-facts dd { margin: 5px 0 0; color: var(--ink); font-family: ui-monospace, monospace; font-size: 12px; text-transform: capitalize; }
.safety-panel { margin-top: 18px; border: 1px solid var(--line); background: var(--slate); }
.panel-subtitle { margin: 5px 0 0; color: var(--quiet); font-size: 12px; }
.safety-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 20px 20px; }
.safety-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.safety-alert { display: flex; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); background: var(--slate-light); }
.safety-alert-marker { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--amber); }
.safety-alert.severity-critical { border-color: rgba(239, 138, 131, 0.55); }
.safety-alert.severity-critical .safety-alert-marker { background: var(--red); }
.safety-alert strong { display: block; color: var(--ink); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.safety-alert span:not(.safety-alert-marker) { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.safety-empty { grid-column: 1 / -1; margin: 0; padding: 10px 0 1px; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 11px; }
.safety-test-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; max-width: 330px; }
.safety-test-label { width: 100%; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }
.safety-test-controls .control-button { min-height: 31px; padding: 6px 9px; font-size: 10px; }
.map-geofence-alert { fill: rgba(239, 138, 131, 0.12); stroke: var(--red); stroke-dasharray: 5 4; }
.map-dock-fault rect { fill: var(--red); }
.readiness-panel { margin-top: 18px; border: 1px solid var(--line); background: var(--slate); }
.readiness-body { padding: 16px 20px 20px; }
.readiness-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); gap: 20px; }
.readiness-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.readiness-metrics div { min-width: 0; padding: 14px 16px 12px 0; border-right: 1px solid var(--line); }
.readiness-metrics div:not(:first-child) { padding-left: 16px; }
.readiness-metrics div:last-child { border-right: 0; }
.readiness-metrics dt, .readiness-label { color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.readiness-metrics dd { margin: 8px 0 0; color: var(--ink); font-family: ui-monospace, monospace; font-size: 22px; }
.dock-readiness, .redeployment-readiness { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 16px 0 16px 20px; }
.readiness-state { margin-top: 6px; color: var(--ink); font-family: ui-monospace, monospace; font-size: 14px; text-transform: capitalize; }
.readiness-ready, .readiness-available { color: var(--mint); }
.readiness-reserved { color: var(--sky); }
.readiness-charging { color: var(--amber); }
.readiness-quarantined, .readiness-fault, .readiness-blocked { color: var(--red); }
#readiness-dock-meta, #redeployment-reason { margin-top: 4px; color: var(--muted); font-size: 12px; }
.readiness-progress { height: 5px; margin-top: 12px; overflow: hidden; background: var(--void); border: 1px solid var(--line); }
.readiness-progress span { display: block; width: 0; height: 100%; background: var(--amber); transition: width 350ms ease; }
.readiness-detail { display: grid; grid-template-columns: minmax(210px, 0.65fr) minmax(0, 1.35fr); gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.readiness-vehicles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.readiness-vehicle { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); background: var(--slate-light); }
.readiness-vehicle strong { min-width: 0; overflow: hidden; color: var(--ink); font-family: ui-monospace, monospace; font-size: 11px; text-overflow: ellipsis; }
.readiness-vehicle span:not(.readiness-dot) { grid-column: 2; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.readiness-vehicle span:last-child { color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; }
.readiness-dot { grid-row: 1 / span 3; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }
.readiness-dot-available { background: var(--mint); }
.readiness-dot-reserved { background: var(--sky); }
.readiness-dot-charging { background: var(--amber); }
.readiness-dot-quarantined { background: var(--red); }
.readiness-empty { grid-column: 1 / -1; margin: 0; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 11px; }
.demo-lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 18px; margin-top: 18px; }
.activity-panel, .evidence-panel { min-width: 0; border: 1px solid var(--line); background: var(--slate); }
.activity-list { max-height: 305px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.activity-item { display: flex; gap: 11px; padding: 13px 20px; border-top: 1px solid var(--line); }
.activity-marker { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--quiet); }
.severity-success .activity-marker { background: var(--mint); }
.severity-warning .activity-marker { background: var(--amber); }
.severity-critical .activity-marker { background: var(--red); }
.activity-item strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; }
.activity-item span:not(.activity-marker) { display: block; margin-top: 3px; color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; }
.activity-empty { padding: 25px 20px; color: var(--quiet); font-size: 13px; }
.evidence-list { min-height: 120px; }
.evidence-item { padding: 15px 20px; border-top: 1px solid var(--line); }
.evidence-item.is-selected { background: var(--slate-light); outline: 1px solid var(--sky-deep); outline-offset: -1px; }
.evidence-item:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.evidence-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.evidence-type { display: block; margin-bottom: 6px; color: var(--sky); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.evidence-status { display: inline-block; padding: 4px 6px; border: 1px solid var(--line); color: var(--amber); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.status-needs-attention { border-color: rgba(239, 138, 131, 0.55); color: var(--red); }
.status-reviewed { border-color: rgba(157, 225, 188, 0.45); color: var(--mint); }
.evidence-item strong { color: var(--ink); font-size: 13px; font-weight: 520; text-transform: capitalize; }
.evidence-item p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.evidence-location { display: block; margin-top: 7px; color: var(--sky); font-family: ui-monospace, monospace; font-size: 10px; }
.evidence-meta { color: var(--quiet); font-family: ui-monospace, monospace; font-size: 10px; }
.evidence-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.evidence-action { min-height: 29px; padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); background: var(--slate-light); cursor: pointer; font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; }
.evidence-action:hover:not(:disabled), .evidence-action:focus-visible:not(:disabled) { border-color: var(--sky); color: var(--ink); outline: none; }
.evidence-action:disabled { color: var(--quiet); cursor: not-allowed; opacity: 0.55; }

.footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 35px; color: var(--quiet); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; }

@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(157, 225, 188, 0.1); }
  50% { box-shadow: 0 0 0 7px rgba(157, 225, 188, 0); }
}

@media (max-width: 930px) {
  .workspace { grid-template-columns: 1fr; }
  .plot-panel { min-height: 0; }
  .mission-body { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr); }
  .mission-facts { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); border-left: 0; padding-top: 15px; }
  .readiness-overview { grid-template-columns: 1fr; }
  .dock-readiness { padding: 15px 0; }
}

@media (max-width: 640px) {
  .topbar, main, .footer { width: min(calc(100% - 32px), var(--max-width)); }
  .topbar { align-items: flex-start; flex-direction: column; gap: 14px; padding: 18px 0; }
  .connection-status { align-self: stretch; justify-content: space-between; }
  main { padding-top: 48px; }
  .intro { align-items: flex-start; flex-direction: column; gap: 26px; padding-bottom: 35px; }
  h1 { font-size: clamp(44px, 15vw, 68px); }
  .lede { font-size: 15px; }
  .measure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure { min-height: 92px; padding-left: 0; border-bottom: 1px solid var(--line); }
  .measure + .measure { padding-left: 14px; }
  .measure:nth-child(2) { border-right: 0; }
  .measure:nth-child(3) { border-bottom: 0; }
  .measure:nth-child(4) { border-bottom: 0; border-right: 0; }
  .panel-heading { min-height: 68px; padding: 15px; }
  td { padding: 15px; }
  th { padding: 13px 15px 10px; }
  .detail-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-item:nth-child(2) { border-right: 0; }
  .detail-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .detail-item { padding: 16px 15px; }
  .mission-body, .demo-lower-grid { grid-template-columns: 1fr; }
  .mission-facts { grid-column: auto; grid-row: auto; }
  .mission-controls { order: 3; }
  .safety-body { grid-template-columns: 1fr; }
  .safety-list { grid-template-columns: 1fr; }
  .safety-test-controls { justify-content: flex-start; max-width: none; }
  .safety-test-label { text-align: left; }
  .readiness-body { padding-left: 15px; padding-right: 15px; }
  .readiness-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readiness-metrics div:nth-child(2) { border-right: 0; }
  .readiness-metrics div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .readiness-metrics div:nth-child(3) { padding-left: 0; }
  .readiness-detail { grid-template-columns: 1fr; }
  .redeployment-readiness { padding: 12px 0 15px; border-left: 0; }
  .readiness-vehicles { grid-template-columns: 1fr; }
  .playback-controls { grid-template-columns: auto auto; }
  .playback-range { grid-column: 1 / -1; grid-row: 2; }
  .playback-time { justify-self: end; grid-column: 1 / -1; grid-row: 3; }
  .footer { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}