/* Layout of the 3D site view. Tokens and base controls are in
   ../dominion.css, which the page loads first.

   Selectors are one class, or one class and an element inside it, so no
   rule depends on where in the page its block sits and none needs
   !important to win. */

:root {
  /* Probe lights. Red is not in the Dominion kit. The probes' own lights are
     green and red, and the page shows what the hardware shows. */
  --light-recording: #9dde62;
  --light-hit: #ff5a4f;
  --light-silent: var(--lowvis);
  /* The RTK lights on the dome, mirroring the strip on the unit: no corrections, soaking or converging, ready. */
  --light-rtk-none: var(--lowvis-70);
  --light-rtk-soak: #f2c94c;
  --light-rtk-ready: var(--light-recording);
  --select: #2be3ff;
  --panel-width: 372px;
}

:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

.hidden-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lowvis);
}

/* ---- page grid ------------------------------------------------------------ */

.site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-width);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "bar bar"
    "stage panel"
    "transport transport";
  height: 100vh;
  height: 100dvh;
}

/* ---- top bar -------------------------------------------------------------- */

.bar {
  grid-area: bar;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-height: 60px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--hairline);
  background-image: linear-gradient(rgba(27, 28, 30, 0.9), rgba(27, 28, 30, 0.9)), url("../assets/dominion-texture-dark.jpg");
  background-size: cover;
  background-position: center;
}
.bar-home { display: block; padding-right: 20px; border-right: 1px solid var(--hairline); }
.bar-logo { display: block; height: 26px; width: auto; }
.bar-title {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.bar-field { display: flex; align-items: center; gap: 10px; }
.bar-select { min-width: 116px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

.source {
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--lowvis);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lowvis);
  white-space: nowrap;
}

.video-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; background: transparent; border-color: var(--hairline); }
.video-toggle:hover { background: var(--ink-80); }
.video-toggle[aria-expanded="true"] { background: var(--lowvis); color: var(--ink); }
.video-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--light-recording); font-size: 10px; line-height: 18px; letter-spacing: 0; text-align: center; color: var(--ink); }
.video-count:empty { display: none; }
.video-toggle[aria-expanded="true"] .video-count { background: var(--ink); color: var(--paper); }

/* ---- video panel ---------------------------------------------------------- */

.video {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Head, the record line and the tiles, which take the height left. The
     recordings button and its list fall into rows made only for them, so a
     folded list leaves no gap. */
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
  min-height: 0;
  padding: 14px 24px 16px;
  overflow: hidden;
  background: var(--ink);
}
.video-open .stage, .video-open .panel { visibility: hidden; }

.record { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.record input { flex: 0 1 240px; }
.record-status { margin: 0; font-size: 11px; color: var(--lowvis-70); }
#record-toggle[aria-pressed="true"] { background: var(--light-hit); border-color: var(--light-hit); color: var(--ink); }
.recordings-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
.recordings-toggle::before { content: '▸'; font-size: 10px; }
.recordings-toggle[aria-expanded="true"]::before { content: '▾'; }
.recordings-toggle:hover { color: var(--paper); }
/* A long list scrolls instead of squeezing the tiles away. */
.recordings { max-height: 22vh; margin: -6px 0 0; padding: 0; overflow-y: auto; list-style: none; font-size: 11px; color: var(--lowvis-70); }
.recordings li { margin: 2px 0; }
.recordings a { color: var(--lowvis); }
.tiles {
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-width: 0; min-height: 0; }
.tile-big { grid-column: 1 / -1; grid-row: 1; }
.tile-frame {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--ink-90);
  overflow: hidden;
  cursor: zoom-in;
}
.tile-big .tile-frame { cursor: zoom-out; }
.tile-frame:hover { background: var(--ink-90); border-color: var(--lowvis); }
.tiles-big { grid-template-rows: minmax(0, 5fr) minmax(0, 3fr); }
.tile-canvas { display: block; width: 100%; height: 100%; object-fit: contain; letter-spacing: 0; }
.tile-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lowvis); text-align: center; }
.tile-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tile-name { color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-name .grid-self { color: var(--lowvis-70); }
.tile-state { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); white-space: nowrap; }

.debug-toggle { min-height: 32px; background: transparent; border-color: var(--hairline); }
.debug-toggle:hover { background: var(--ink-80); }
.debug-toggle[aria-expanded="true"] { background: var(--lowvis); color: var(--ink); }

/* ---- debug panel ---------------------------------------------------------- */

/* Open, it covers the view and the probes, which stay laid out beneath so
   the scene keeps its size and needs no refit when it comes back. */
.debug {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 14px 24px 16px;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.debug-open .stage, .debug-open .panel { visibility: hidden; }

.debug-head { display: flex; align-items: baseline; gap: 14px; }
.debug-title { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.debug-when { margin: 0 auto 0 0; font-size: 11px; color: var(--lowvis-70); }

.status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.status-cell { min-width: 0; padding: 9px 12px 10px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--ink-90); }
.status-value { display: flex; align-items: center; gap: 8px; margin: 5px 0 3px; font-size: 13px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-detail { margin: 0; font-size: 11px; line-height: 1.45; color: var(--lowvis-70); }

.debug-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "nodes topics"
    "units units";
  gap: 12px 20px;
}
/* The tables scroll inside their sections, so the log always has room. */
.debug-section { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; max-height: 196px; }
.debug-section:nth-child(1) { grid-area: nodes; }
.debug-section:nth-child(2) { grid-area: topics; }
.debug-section:nth-child(3) { grid-area: units; max-height: 176px; }
.debug-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.debug-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 24px; margin-bottom: 4px; }
.debug-section-head .label { margin-right: auto; }
.debug-foot { margin: 4px 0 0; font-size: 11px; color: var(--lowvis); }

.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { padding: 3px 10px 3px 0; text-align: left; font-weight: 400; white-space: nowrap; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.grid-table thead th { position: sticky; top: 0; padding-bottom: 5px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lowvis); background: var(--ink); border-bottom-color: var(--hairline); }
.grid-table td { color: var(--lowvis-70); }
.grid-table td:first-child { color: var(--paper); }
.grid-table .num { text-align: right; padding-right: 14px; }
.grid-table .wrap { white-space: normal; }
.grid-table .quiet { color: var(--graphite-70); }
.grid-table .quiet-some { color: var(--paper); }
.grid-state { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.grid-group th { padding-top: 8px; color: var(--paper); }
.grid-group:first-child th { padding-top: 3px; }
.grid-group-sum { margin-left: 14px; color: var(--lowvis-70); }
.grid-topic { padding-left: 17px; color: inherit; }
.grid-unheard td { color: var(--lowvis); }
.grid-unheard td:first-child { color: var(--lowvis); }
.grid-self { color: var(--lowvis); }
.grid-claims { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.grid-empty td { color: var(--lowvis); }

/* Status strip marks: the probe shapes, with the same meanings. */
.mark-ok { border-radius: 50%; background: var(--light-recording); }
.mark-warn { border-radius: 50%; border: 1.5px solid var(--lowvis); }
.mark-bad { background: var(--light-hit); }

.log { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.log-filters { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 4px; }
.log-filter { min-height: 24px; padding: 0 10px; font-size: 10px; background: transparent; }
.log-filter:hover { background: var(--ink-80); }
.log-filter[aria-pressed="true"] { background: var(--lowvis); color: var(--ink); }
.log-lines {
  margin: 0;
  padding: 8px 12px;
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--ink-90);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--lowvis-70);
  white-space: pre;
  overscroll-behavior: contain;
}
.log-time { color: var(--lowvis); }
.log-source { display: inline-block; width: 10ch; color: var(--lowvis); }
.log-warning { color: var(--paper); }
.log-error { color: var(--light-hit); }

/* ---- stage ---------------------------------------------------------------- */

.stage { grid-area: stage; position: relative; min-height: 0; background: var(--ink); overflow: hidden; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.stage-canvas:active { cursor: grabbing; }
.stage-canvas:focus-visible { outline-offset: -2px; }
.stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.stage-controls {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  pointer-events: none;
}
.views { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 4px; background: rgba(10, 11, 13, 0.86); pointer-events: auto; }
.view { min-height: 30px; padding: 0 12px; background: transparent; }
.view:hover { background: var(--ink-80); }
.view[aria-pressed="true"] { background: var(--lowvis); color: var(--ink); }

.layers { display: flex; gap: 16px; margin: 0; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 4px; background: rgba(10, 11, 13, 0.86); pointer-events: auto; }
.layer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lowvis-70);
  cursor: pointer;
}

/* ---- samples drawer ------------------------------------------------------- */

.samples-toggle { min-height: 36px; background: rgba(10, 11, 13, 0.86); border-color: var(--hairline); pointer-events: auto; }
.samples-toggle:hover { background: var(--ink-80); }
.samples-toggle[aria-expanded="true"] { background: var(--lowvis); color: var(--ink); }

.drawer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 236px;
  padding: 12px 20px 14px;
  background: rgba(27, 28, 30, 0.96);
  border-top: 1px solid var(--hairline);
}
.drawer-head { display: flex; align-items: baseline; gap: 14px; }
.drawer-title { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.drawer-when { margin: 0 auto 0 0; font-family: var(--mono); font-size: 11px; color: var(--lowvis-70); }
.drawer-close { min-height: 30px; padding: 0 12px; background: transparent; border-color: var(--hairline); }
.drawer-close:hover { background: var(--ink-80); }

.strips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.strip-figure { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.strip-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.strip-value { margin-left: auto; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--paper); }
.strip-peak { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--lowvis-70); }
.strip { display: block; width: 100%; height: 128px; border: 1px solid var(--hairline); border-radius: 2px; }

/* With the drawer open the view controls sit above it. */
.stage-open .stage-controls { bottom: 252px; }

/* ---- map ------------------------------------------------------------------ */

/* The 3D / Map switch in the bar, and the map's own controls in the
   stage, share the look of the view buttons without their class: app.js
   binds every .view to the 3D camera. */
.modes, .map-views, .map-zoom { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 4px; background: rgba(10, 11, 13, 0.86); pointer-events: auto; }
.mode, .map-view { min-height: 30px; padding: 0 12px; background: transparent; }
.mode:hover, .map-view:hover { background: var(--ink-80); }
.mode[aria-pressed="true"], .map-view[aria-pressed="true"] { background: var(--lowvis); color: var(--ink); }
.mode:disabled { opacity: 0.45; cursor: not-allowed; }
.map-zoom .map-view { min-width: 30px; padding: 0; font-size: 15px; letter-spacing: 0; }
.map-layers { display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 0; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 4px; background: rgba(10, 11, 13, 0.86); pointer-events: auto; }

/* Hidden with visibility, never display: a 3D canvas that loses its size
   refits its camera when it comes back. Inherit, not visible, so the
   Debug and Video panels still cover the map. */
.stage-map { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: var(--ink); cursor: grab; touch-action: none; }
.map-on .stage-map { visibility: inherit; }
.map-on .stage-canvas, .map-on .stage-overlay, .map-on .note, .map-on .fault { visibility: hidden; }
.stage-map.map-dragging { cursor: grabbing; }
/* The focus ring is drawn over the tiles, which would cover an outline. */
.stage-map:focus-visible { outline: none; }
.stage-map:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--select); pointer-events: none; }
.stage:not(.map-on) .map-only { display: none; }
.map-on .scene-only { display: none; }
/* The controls sit above Esri's attribution, which the map keeps visible;
   map.js sets --map-credit-h to its height and app.js --drawer-h to the
   drawer's. */
.map-on .stage-controls { bottom: calc(var(--map-credit-h, 18px) + 12px); }
.map-on.stage-open .stage-map { bottom: var(--drawer-h, 236px); }
.map-on.stage-open .stage-controls { bottom: calc(var(--drawer-h, 236px) + var(--map-credit-h, 18px) + 12px); }

/* The imagery is dimmed so the marks read on bright ground. */
.map-tiles { position: absolute; inset: 0; filter: brightness(0.72) saturate(0.85); }
.map-tiles img { position: absolute; display: block; max-width: none; opacity: 0; transition: opacity 0.2s; pointer-events: none; user-select: none; }
.map-tiles img.map-tile-in { opacity: 1; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.map-key { position: absolute; right: 16px; top: 14px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 4px; background: rgba(10, 11, 13, 0.86); pointer-events: none; }
.map-north text { font-family: var(--mono); font-size: 8px; fill: var(--paper); }
.map-north path { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.map-scale { display: flex; flex-direction: column; gap: 3px; }
.map-scale-bar { display: block; height: 6px; box-sizing: border-box; border: 1px solid var(--paper); border-top: 0; }
.map-scale-text { font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--paper); }
/* Esri asks for its attribution in dark text on a light band. */
.map-credit { position: absolute; right: 0; bottom: 0; max-width: calc(100% - 32px); box-sizing: border-box; margin: 0; padding: 1px 8px; background: rgba(255, 255, 255, 0.65); font-family: var(--sans); font-size: 12px; line-height: 18px; color: #323232; text-align: right; }
.map-credit a { color: #323232; }
/* Prose, so Geist: the brand keeps mono for labels. */
.map-note { position: absolute; left: 16px; top: 14px; max-width: calc(100% - 240px); box-sizing: border-box; margin: 0; padding: 4px 10px; border: 1px solid rgba(242, 201, 76, 0.6); border-radius: 4px; background: rgba(10, 11, 13, 0.86); font-family: var(--sans); font-size: 13px; line-height: 1.45; letter-spacing: -0.025em; color: var(--paper); }
.map-foot { margin: 8px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.45; letter-spacing: -0.025em; color: var(--paper); }

/* Two classes, so these win over the roster table's rules further down. */
.roster.matrix th, .roster.matrix td { height: 28px; padding: 0 0 0 8px; text-align: right; }
.roster.matrix th:first-child { padding-left: 0; text-align: left; }
.roster.matrix td { color: var(--paper); }
.roster.matrix .chosen { color: var(--select); }
.roster.matrix .float { color: var(--light-rtk-soak); }
/* Target detection is not part of the map yet. */
.map-on-panel .impact-section { display: none; }

.fault {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 34ch;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--lowvis);
  border-radius: 4px;
  background: var(--ink-90);
  font-size: 14px;
}
.fault a { color: var(--paper); }
.note { position: absolute; left: 16px; top: 14px; margin: 0; font-size: 12px; color: var(--lowvis-70); }

/* ---- side panel ----------------------------------------------------------- */

.panel { grid-area: panel; min-height: 0; overflow: auto; background: var(--ink-90); border-left: 1px solid var(--hairline); }
.panel-section { padding: 18px 20px 20px; border-bottom: 1px solid var(--hairline); }

.roster { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.roster th, .roster td { padding: 0; text-align: left; font-weight: 400; white-space: nowrap; border-bottom: 1px solid var(--hairline-soft); }
.roster thead th { padding: 0 8px 6px 0; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lowvis); border-bottom-color: var(--hairline); }
.roster td { padding: 0 8px 0 0; color: var(--lowvis-70); }
.roster-row { cursor: pointer; }
.roster-row:hover { background: var(--ink-80); }
.roster-row[aria-selected="true"] { background: var(--ink-80); box-shadow: inset 2px 0 0 var(--select); }
.roster-pick {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--paper);
}
.roster-pick:hover { background: transparent; }
.roster-pick[aria-pressed="true"] { background: transparent; color: var(--select); }
.roster-state { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }

/* One row for each group of commands: its label, then its controls. */
.commands { display: grid; gap: 8px; margin: 4px 0; }
.command-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.command-group .label { flex: none; width: 72px; }
.commands select { width: auto; }

/* One shape for each state, so a state never depends on colour alone. */
.mark { display: inline-block; flex: none; width: 9px; height: 9px; box-sizing: border-box; }
.mark-dot { border-radius: 50%; background: var(--light-recording); }
.mark-square { background: var(--light-hit); }
.mark-ring { border-radius: 50%; border: 1.5px solid var(--light-silent); }
.mark-dash { height: 1.5px; background: var(--graphite-70); }

.readout-title { margin: 0 0 14px; font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
/* The label column fits "Magnetometer rate"; the rest goes to the values. */
.readout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 8px 0 18px; font-variant-numeric: tabular-nums; }
.readout:last-child { margin-bottom: 0; }
.readout dt, .readout dd { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--hairline-soft); }
.readout dt { color: var(--lowvis-70); }
.readout dd { color: var(--paper); text-align: right; white-space: pre-line; }

/* ---- target ---------------------------------------------------------------- */

.toggles { display: flex; gap: 8px; pointer-events: auto; }
.target-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.target-head .readout-title { margin-bottom: 0; }
.target-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.target-row { display: flex; align-items: center; gap: 10px; }
.target-row .label { min-width: 72px; }
.target-row input { flex: 1; }
/* Named with the element, so it wins over dominion.css's input[type="text"]. */
input.target-input {
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--ink-60);
  border-radius: 4px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
input.target-input:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.target-pending { margin: 0; min-height: 1.45em; font-family: var(--mono); font-size: 11px; color: var(--lowvis-70); }
.target-actions { display: flex; gap: 8px; }
.target-actions button[disabled] { opacity: 0.5; cursor: default; }
/* Resurvey base clears every probe's position, so it sits apart from Apply. */
.target-risky { padding-top: 14px; border-top: 1px solid var(--hairline-soft); }
.coords-wrap { margin-top: 8px; overflow-x: auto; }
.coords th, .coords td { padding: 4px 8px 4px 0; }

/* ---- transport ------------------------------------------------------------ */

.transport {
  grid-area: transport;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 0 24px;
  border-top: 1px solid var(--hairline);
  background-image: linear-gradient(rgba(27, 28, 30, 0.9), rgba(27, 28, 30, 0.9)), url("../assets/dominion-texture-dark.jpg");
  background-size: cover;
  background-position: center;
}
.transport-play { min-width: 96px; }
.transport-clock { min-width: 84px; font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; color: var(--paper); }

.timeline { position: relative; height: 32px; }
.timeline-hits { position: absolute; left: 7px; right: 7px; top: 0; height: 100%; pointer-events: none; }
.hit-mark { position: absolute; top: 3px; left: calc(var(--at) * 100%); width: 1px; height: 9px; background: var(--light-hit); }

.timeline-scrub { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.timeline-scrub::-webkit-slider-runnable-track { height: 1px; background: var(--lowvis); }
.timeline-scrub::-moz-range-track { height: 1px; background: var(--lowvis); }
.timeline-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--paper); }
.timeline-scrub::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--paper); }

/* ---- narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  /* The key takes the top right; the note goes under it. */
  .map-note { top: 60px; max-width: calc(100% - 32px); }
  .site {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "bar"
      "stage"
      "transport"
      "panel";
    height: auto;
  }
  .bar { padding: 10px 16px; }
  .stage { height: 62vh; min-height: 340px; }
  .drawer { height: auto; max-height: 82%; overflow: auto; padding: 12px 16px 14px; }
  .strips { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .strip { height: 96px; }
  .stage-open .stage-controls { display: none; }
  .transport { padding: 0 16px; gap: 14px; }
  .panel { border-left: 0; overflow: visible; }
  .panel-section { padding: 18px 16px 20px; }

  /* On a phone the panels take the view's place rather than covering it. */
  .debug, .video { grid-column: 1; grid-template-rows: auto; padding: 14px 16px 16px; }
  .debug-open .stage, .debug-open .panel, .video-open .stage, .video-open .panel { display: none; }
  .tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tile-frame { aspect-ratio: 16 / 9; }
  .tile-big { grid-row: auto; }
  .status { grid-template-columns: minmax(0, 1fr); }
  .debug-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nodes" "topics" "units"; }
  .debug-section { overflow-x: auto; }
  .col-wide { display: none; }
  .log-lines { height: 50vh; }
}

/* Last, so that it wins over a class that sets display. */
[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .map-tiles img { transition: none; }
  .view, .roster-pick, .transport-play { transition: none; }
}