/* Nuclear Option Viewer, styled after the game's own map screen and MFD panels:
   near black plates, thin green outlines, Brass Mono in capitals, outline only soft keys, Barlow for prose.
   Colours are the game's (ColorTheme "Vanilla", DynamicMap, Faction) unless noted. */

@font-face { font-family: "Brass Mono"; src: url("../assets/fonts/BrassMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Brass Mono"; src: url("../assets/fonts/BrassMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --black: #000000;
  --plate: rgba(0, 0, 0, 0.9);          /* map backing plate and MFD panels */
  --green: #00ff00;                      /* the game's one UI green */
  --green-text: #3dff3d;                 /* body text: the same green, a touch softer to read at small sizes */
  --green-dim: #00b400;                  /* secondary labels */
  --green-faint: #006500;                /* inactive dials, quiet rules */
  --green-line: rgba(0, 255, 0, 0.5);    /* group box outlines */
  --grid-major: #007400;
  --grid-minor: #004100;
  --glow: 0 0 6px rgba(0, 146, 0, 0.75); /* Brass Mono glow (#009200) */
  --off: #808080;                        /* toggle off / disabled */
  --hover: #80bf80;
  --key-fill: rgba(15, 28, 31, 0.8);     /* MFD soft key fill #0F1C1F */
  --alert: #ff4000;
  --warn: #ff8000;
  --bdf: #a76bff;
  --pala: #ffb800;
  --mono: "Brass Mono", "Share Tech Mono", ui-monospace, monospace;
  --prose: "Barlow", "Arimo", system-ui, sans-serif;
  --ui: 1;                               /* the UI size setting: 0.8 .. 1.4, set by src/main.js */
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins over any display rule */

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--black); color: var(--green-text); }
body { font: 15px/1.35 var(--mono); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
/* The UI size setting zooms every panel and key, but not the 3D view and its labels under them. Sizes taken from the
   screen are percentages of it, which every browser fits to the screen however much a panel is zoomed. (Some browsers
   zoom vw and vh too and some don't: the top bar's two widths divide vw by --ui, and fit the bar either way.) */
header#top, .start-plate, .units-panel, .inspector, .loader, .transport, .cam, .keys-panel, .toast, .drop-frame { zoom: var(--ui); }

button { font: inherit; color: inherit; }
a { color: var(--green); }
a:focus-visible, .key:focus-visible, .key:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- shared parts ---------------------------------------------------------------------------------------- */
.plate {
  background: var(--plate);
  border: 1px solid var(--green-line);
  border-radius: 3px;
}
.lbl { color: var(--green-dim); }
.dim { color: var(--green-dim); }
.prose { font-family: var(--prose); font-weight: 500; letter-spacing: 0.01em; }

/* soft keys: outline boxes, green when live, grey when off */
.key {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 2px solid var(--green); border-radius: 2px;
  background: var(--key-fill); color: var(--green); text-shadow: var(--glow);
  font: 14px/1 var(--mono); letter-spacing: 0.04em; cursor: pointer; user-select: none; white-space: nowrap;
}
.key:hover { color: var(--hover); border-color: var(--hover); }
.key:active { color: #008000; border-color: #008000; }
.key.off { color: var(--off); border-color: var(--off); text-shadow: none; }
.key input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.key.square { width: 32px; padding: 0; font-size: 18px; }
.key.wide { min-width: 84px; }
.key.big { min-height: 44px; padding: 0 26px; font-size: 17px; }
.key.small { min-height: 26px; padding: 0 8px; font-size: 12px; }
/* live mode: lit in the game's alert colour while you're at the live moment, a normal grey key when you're not */
.key.live:not(.off) { color: var(--alert); border-color: var(--alert); text-shadow: 0 0 6px rgba(255, 64, 0, 0.6); }
.key:disabled { cursor: default; }
.key:disabled:hover, .key:disabled:active { color: var(--off); border-color: var(--off); }
.live-tag { color: var(--alert); text-shadow: 0 0 6px rgba(255, 64, 0, 0.6); }

.progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--green); text-shadow: var(--glow); }
.bar { position: relative; height: 12px; margin-top: 6px; border: 1px solid var(--green-line); padding: 2px; }
.bar .fill {
  height: 100%; width: 0;
  /* segmented like the game's gauges */
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 11px);
  box-shadow: 0 0 6px rgba(0, 146, 0, 0.6);
  transition: width 0.12s linear;
}

/* ---- start screen ---------------------------------------------------------------------------------------- */
.start { position: fixed; inset: 0; display: grid; place-items: center; background: var(--black); z-index: 20; }
.start .backdrop {
  position: absolute; inset: 0; opacity: 0.55;
  background: url("../assets/ui/backdrop.jpg") center / cover no-repeat;
}
.start-plate {
  position: relative; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  container: start / inline-size;
  padding: 28px 32px 22px; text-align: center; border: 2px solid var(--green);
  scrollbar-color: var(--green-faint) transparent; scrollbar-width: thin;
}
.title {
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--green);
  font: 700 26px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--green); text-shadow: var(--glow);
}
.dropzone {
  margin: 0 0 18px; padding: 22px 12px; border: 2px dashed var(--green-line); color: var(--green); text-shadow: var(--glow);
}
.dropzone .dim { margin-top: 6px; font-size: 12px; color: var(--green); }
/* progress and errors share one slot of fixed height, so the card doesn't jump when either appears */
.status { min-height: 54px; margin-top: 14px; display: grid; align-content: center; }
.start .progress { margin: 0; text-align: left; }
.error { margin: 0; color: var(--alert); font-size: 15px; }
.live-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--green-line); }
.live-head { margin: 0 0 10px; font: 400 14px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--green); text-shadow: var(--glow); }
/* a narrow plate (a big UI size on a phone): the big keys wrap rather than stick out of it */
@container start (max-width: 240px) { .key.big { max-width: 100%; white-space: normal; } }
/* the start page's lines all in the same green mono as its headings */
.hint, .credit { font-family: var(--mono); letter-spacing: 0.02em; color: var(--green); text-shadow: var(--glow); }
.hint { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.credit { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
@media (max-height: 520px) {
  .start-plate { padding: 16px 20px 14px; }
  .title { margin-bottom: 12px; padding-bottom: 8px; }
  .dropzone { padding: 12px; margin-bottom: 12px; }
}
.credit a { color: var(--green); }

/* ---- top: mission info + keys ----------------------------------------------------------------------------- */
header#top {
  position: fixed; top: 12px; left: 12px; right: 12px; display: flex; align-items: flex-start; gap: 12px;
  pointer-events: none; z-index: 5;
}
header#top > * { pointer-events: auto; }
.mission { flex: 0 1 auto; min-width: 0; padding: 8px 12px; max-width: min(720px, 60vw / var(--ui)); }
.mission-name { font: 600 16px/1.25 var(--prose); color: var(--green); text-shadow: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 3px; font-size: 13px; }
.top-keys { flex: none; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(70vw / var(--ui)); }

/* ---- bottom: transport ------------------------------------------------------------------------------------ */
.transport {
  position: fixed; left: 12px; right: 12px; bottom: 12px; height: 56px; z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
}
.speed { display: flex; align-items: center; gap: 8px; }
.readout { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--green); text-shadow: var(--glow); }
.readout .lbl { text-shadow: none; }
#speed { display: inline-block; min-width: 5ch; }
.clock #clock { display: inline-block; min-width: 8ch; }
.timeline-wrap { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; }
#timeline { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: none; }
.elapsed { min-width: 13ch; text-align: right; }

/* narrow screens: keep the timeline usable, drop the less important readouts */
@media (max-width: 900px) {
  .clock { display: none; }
  .transport { gap: 8px; }
}
/* phones: the controls on one row, the timeline full width under them */
@media (max-width: 620px) {
  .transport { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; }
  .timeline-wrap { order: 9; flex: 1 0 100%; }
  .speed .lbl { display: none; }
  .elapsed { min-width: 0; margin-left: auto; }
  .key.wide { min-width: 0; width: 72px; }   /* PLAY and PAUSE the same width, so nothing shifts under the finger */
  .transport .key.live { min-width: calc(13ch + 28px); }   /* the same for every word the live key says, RECONNECTING the longest */
  .mission-facts { display: none; }
}

/* ---- panels over the view -------------------------------------------------------------------------------- */
.loader { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); padding: 12px 14px 14px; z-index: 17; }
.keys-panel {
  position: fixed; top: 84px; right: 12px; width: min(380px, calc(100% - 24px)); padding: 12px 16px 14px; z-index: 15;
  max-height: calc(100% - 160px); overflow-y: auto;   /* never down over the transport bar */
}
@media (min-width: 621px) and (min-height: 521px) {
  body:has(#cam:not([hidden])) .keys-panel { max-height: calc(100% - 216px); }   /* nor the camera sliders */
}
@media (max-width: 620px) { .keys-panel { max-height: calc(100% - var(--above) - 108px); } }   /* --above: see below */
.panel-title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--green); text-align: center; font: 700 15px/1 var(--mono); letter-spacing: 0.06em; color: var(--green); text-shadow: var(--glow); }
.keys-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.keys-panel dt { color: var(--green); text-shadow: var(--glow); }
.keys-panel dd { margin: 0; color: var(--green-dim); }

/* settings: one row per setting, its name on the left and the choices as soft keys (the chosen one lit) */
.settings-panel { width: min(430px, calc(100% - 24px)); container: settings / inline-size; }
.set-group { padding: 8px 0 9px; border-bottom: 1px solid var(--green-faint); display: grid; gap: 7px; }
.set-group:first-of-type { padding-top: 0; }
.set-head { margin: 0; font: 700 13px/1 var(--mono); letter-spacing: 0.06em; color: var(--green); text-shadow: var(--glow); }
.set-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; }
.set-lbl { font-size: 13px; color: var(--green-dim); }
.set-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.set-note { margin: 0; font-size: 13px; line-height: 1.35; color: var(--green-dim); }
.set-foot { margin: 9px 0 0; font-size: 12px; color: var(--green-dim); text-align: center; }
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 16;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); padding: 10px 12px 10px 16px;
  border-color: var(--alert); color: var(--alert); font-size: 15px;
}
.toast .key { border-color: var(--alert); color: var(--alert); text-shadow: none; }
@media (max-width: 620px) { .toast { bottom: calc(var(--above) + 18px); } }   /* above the taller two row transport bar */

.drop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0, 0, 0, 0.82); pointer-events: none; }
.drop-frame { padding: 40px 56px; border: 2px dashed var(--green); color: var(--green); font-size: 22px; letter-spacing: 0.05em; text-shadow: var(--glow); }

@media (prefers-reduced-motion: reduce) { .bar .fill { transition: none; } }

/* ---- unit list (left) ------------------------------------------------------------------------------------ */
.units-panel {
  /* under the mission plate, which a bigger UI size makes taller (--top-h is the top bar's real height, src/main.js) */
  position: fixed; left: 12px; top: max(92px, calc(var(--top-h, 0px) + 20px)); bottom: 80px; width: min(300px, calc(100% - 24px)); z-index: 6;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px;
  overflow: hidden;   /* squeezed short on a phone with a big UI size, it never spills over the keys below */
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panel-head .panel-title { font: 700 15px/1 var(--mono); letter-spacing: 0.06em; color: var(--green); text-shadow: var(--glow); }
.panel-head .dim { font-size: 12px; }
.search {
  width: 100%; padding: 6px 8px; border: 1px solid var(--green-line); border-radius: 2px; background: #000;
  color: var(--green); font: 13px var(--mono); outline: none;
}
.search::placeholder { color: var(--green-faint); }
.search:focus { border-color: var(--green); }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles.muted .key { opacity: 0.4; }   /* a search looks through everything, so the filters rest */
.unit-rows { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -4px; scrollbar-color: var(--green-faint) transparent; scrollbar-width: thin; }
.unit-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 4px 6px; border: 1px solid transparent; cursor: pointer; font-size: 13px; color: var(--green);
}
.unit-row:hover { border-color: var(--green-line); }
.unit-row.selected { border-color: var(--green); background: rgba(0, 255, 0, 0.08); }
.unit-row.gone { opacity: 0.45; }
.unit-row .swatch { width: 10px; height: 10px; background: var(--off); }
.unit-row.bdf .swatch { background: var(--bdf); }
.unit-row.pala .swatch { background: var(--pala); }
.unit-row .u-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-row .u-type { color: var(--green-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.unit-row .u-time { color: var(--green-dim); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.unit-rows:not(.chrono) .u-time { display: none; }   /* times only when the list runs in time order */
.unit-rows.chrono .unit-row { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.unit-rows.chrono .u-type { max-width: 92px; }

/* ---- selected unit (right) -------------------------------------------------------------------------------- */
.inspector {
  position: fixed; right: 12px; bottom: 80px; width: min(300px, calc(100% - 24px)); z-index: 6;
  padding: 10px 12px; border-width: 2px;
  display: flex; flex-direction: column;   /* squeezed short, the readouts scroll and the keys stay in view */
}
.inspector > * { flex: none; }
.inspector.bdf { border-color: var(--bdf); }
.inspector.pala { border-color: var(--pala); }
.insp-title { font: 600 17px/1.2 var(--prose); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector.bdf .insp-title { color: var(--bdf); }
.inspector.pala .insp-title { color: var(--pala); }
.insp-sub { margin-top: 2px; font-size: 11px; color: var(--green-dim); }
.insp-status { margin-top: 4px; font-size: 13px; color: var(--alert); }
.insp-status:empty { display: none; }
.insp-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin: 8px 0 10px; padding-top: 8px; border-top: 1px solid var(--green-line); font-size: 13px; color: var(--green); font-variant-numeric: tabular-nums; }
.inspector > .insp-rows {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; grid-auto-rows: max-content;   /* whole lines, scrolled, never squashed */
  scrollbar-color: var(--green-faint) transparent; scrollbar-width: thin;
}
.insp-rows .row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-keys { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .units-panel { top: auto; bottom: 80px; height: 45%; }
  /* side by side at the bottom, so both always fit, however big the UI size */
  .units-panel, .inspector { width: min(300px, calc(50% - 18px)); }
}
@media (min-width: 621px) and (max-width: 900px) and (min-height: 521px) {
  /* and the list stays under the mission plate */
  .units-panel { max-height: calc(100% - var(--top-h, 0px) - 100px); }
  body:has(#cam:not([hidden])) .units-panel { max-height: calc(100% - var(--top-h, 0px) - 152px); }
}
@media (max-width: 620px) {
  /* the panels sit above the transport bar (and the camera sliders). --transport-h is the bar's real height
     (src/main.js): a bigger UI size or the live key can give it a third row. */
  body { --above: calc(var(--transport-h, 98px) + 34px); }
  .units-panel, .inspector { bottom: var(--above); }
  .units-panel { max-height: calc(100% - var(--above) - 54px); }   /* and below the top keys */
  .top-keys { max-width: none; }
}

/* ---- camera sliders (a setting): zoom, turn and tilt, just above the transport bar ---------------------------- */
.cam {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 5;
  width: min(600px, calc(100% - 24px)); padding: 0 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.cam-slider { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.cam-slider:has(:disabled) .lbl { color: var(--off); }   /* the gyro is turning the view */
/* a thin green track and a soft key for the thumb, 36 px tall so a thumb lands on it easily */
.cam input {
  flex: 1 1 auto; min-width: 0; height: 36px; margin: 0; background: none; cursor: pointer;
  appearance: none; -webkit-appearance: none; touch-action: none;
}
.cam input::-webkit-slider-runnable-track { height: 2px; background: var(--green-line); }
.cam input::-moz-range-track { height: 2px; background: var(--green-line); }
.cam input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 26px; margin-top: -12px;
  border: 2px solid var(--green); border-radius: 2px; background: var(--key-fill); box-shadow: var(--glow);
}
.cam input::-moz-range-thumb {
  box-sizing: border-box; width: 14px; height: 26px;
  border: 2px solid var(--green); border-radius: 2px; background: var(--key-fill); box-shadow: var(--glow);
}
.cam input:hover::-webkit-slider-thumb { border-color: var(--hover); }
.cam input:hover::-moz-range-thumb { border-color: var(--hover); }
.cam input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cam input:disabled { cursor: default; }
.cam input:disabled::-webkit-slider-runnable-track { background: var(--off); }
.cam input:disabled::-moz-range-track { background: var(--off); }
.cam input:disabled::-webkit-slider-thumb { border-color: var(--off); box-shadow: none; }
.cam input:disabled::-moz-range-thumb { border-color: var(--off); box-shadow: none; }
/* with the sliders on, the panels down at the bottom sit above them */
body:has(#cam:not([hidden])) :is(.units-panel, .inspector) { bottom: 132px; }
body:has(#cam:not([hidden])) .toast { bottom: 136px; }
@media (min-width: 621px) and (min-height: 521px) {
  /* a message goes above the selected unit's panel, so it never covers its keys */
  body:has(#inspector:not([hidden])) .toast { bottom: calc(92px + var(--insp-h, 0px)); }
  body:has(#cam:not([hidden])):has(#inspector:not([hidden])) .toast { bottom: calc(144px + var(--insp-h, 0px)); }
}
@media (max-width: 620px) {
  /* upright: the full width in two rows, ZOOM and TILT over TURN, so each slider is long enough to set finely
     (TURN, which goes all the way round, the longest) */
  .cam {
    left: 8px; right: 8px; bottom: calc(var(--transport-h, 98px) + 20px); width: auto; transform: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 2px 12px;
  }
  .cam-slider:has(#cam-turn) { grid-column: 1 / -1; grid-row: 2; }
  body:has(#cam:not([hidden])) { --above: calc(var(--transport-h, 98px) + 108px); }
  body:has(#cam:not([hidden])) :is(.units-panel, .inspector) { bottom: var(--above); }
  body:has(#cam:not([hidden])) .toast { bottom: calc(var(--above) + 18px); }
}

/* ---- phones ------------------------------------------------------------------------------------------------
   Held sideways a phone is only about 330 px tall, and upright about 390 px wide: everything gets smaller and
   tighter so the map keeps most of the screen. These come last so they win over the sizes above. */
@media (max-height: 520px) {
  header#top { top: 6px; left: 8px; right: 8px; gap: 8px; }
  .mission { padding: 4px 8px; }
  .mission-name { font-size: 13px; }
  .mission-facts { font-size: 11px; gap: 2px 12px; margin-top: 1px; }
  .top-keys { gap: 5px; }
  #top .key { min-height: 26px; padding: 0 8px; font-size: 11px; border-width: 1px; }

  .transport { left: 8px; right: 8px; bottom: 6px; height: 40px; gap: 8px; padding: 0 8px; }
  .transport .key.wide { min-width: 0; width: 64px; min-height: 28px; font-size: 12px; }
  .transport .key.square { width: 28px; min-height: 28px; font-size: 15px; }
  .transport .readout { font-size: 12px; }
  .speed { gap: 6px; }
  .timeline-wrap { height: 32px; }

  /* --keys-h is the top keys' real height (src/main.js): a bigger UI size can give them a second row */
  .inspector {
    right: 8px; bottom: 52px; width: min(230px, calc(50% - 12px)); padding: 6px 9px; border-width: 1px; overflow-y: auto;
    max-height: calc(100% - 52px - max(48px, calc(var(--keys-h, 26px) + 14px)));
  }
  .insp-title { font-size: 14px; }
  .insp-sub { font-size: 10px; }
  .insp-status { font-size: 11px; margin-top: 2px; }
  .insp-rows { font-size: 11px; gap: 1px 10px; margin: 5px 0 6px; padding-top: 5px; }
  .insp-keys .key.small, .units-panel .key.small { min-height: 22px; padding: 0 6px; font-size: 10px; }

  /* the unit list takes the mission plate's place while it's open, just under the top keys */
  .units-panel { top: max(54px, calc(var(--keys-h, 26px) + 14px)); bottom: 52px; height: auto; left: 8px; width: min(240px, calc(50% - 12px)); padding: 6px 8px 6px; gap: 5px; }
  body:has(#units:not([hidden])) .mission { visibility: hidden; }
  .panel-head .panel-title { font-size: 13px; }
  .search { padding: 4px 6px; font-size: 12px; }
  .unit-row { padding: 2px 5px; font-size: 12px; }
  .keys-panel {
    top: max(44px, calc(var(--keys-h, 26px) + 18px)); padding: 8px 12px;
    max-height: calc(100% - 56px - max(44px, calc(var(--keys-h, 26px) + 18px)));
  }
  body:has(#cam:not([hidden])) .keys-panel { background: var(--black); }   /* over the sliders: none show through */
  .keys-panel dl { font-size: 11px; gap: 3px 10px; }
  .set-group { padding: 5px 0 6px; gap: 4px; }
  .set-row { grid-template-columns: 96px 1fr; gap: 6px; }
  .set-lbl, .set-head { font-size: 11px; }
  .set-note { font-size: 11px; }
  .settings-panel .key.small { min-height: 22px; padding: 0 6px; font-size: 10px; }
  .toast { bottom: 54px; font-size: 13px; padding: 6px 8px 6px 12px; }
  /* a message stays left of the selected unit's panel, so it never covers its keys */
  body:has(#inspector:not([hidden])) .toast { left: 8px; transform: none; max-width: calc(100% - 254px); }
  .loader { top: 44px; }

  .cam { bottom: 52px; padding: 0 10px; gap: 12px; }
  .cam-slider { flex-direction: row; align-items: center; gap: 6px; font-size: 11px; }
  body:has(#cam:not([hidden])) :is(.units-panel, .inspector) { bottom: 98px; }
  body:has(#cam:not([hidden])) .inspector { max-height: calc(100% - 98px - max(48px, calc(var(--keys-h, 26px) + 14px))); }
  body:has(#cam:not([hidden])) .toast { bottom: 98px; }

  /* the start page held sideways: no bigger than this, or its keys would be off the bottom */
  .start-plate { zoom: min(var(--ui), 1.1); }
}

/* a bigger UI size on a phone or a small window: the unit list's head kept short, so the list itself has room (no rule
   under the title, and the filters in one row that scrolls sideways) */
@media (max-width: 900px), (max-height: 520px) {
  :root:is([data-ui="120"], [data-ui="140"]) .panel-head .panel-title { margin: 0; padding: 0; border: 0; }
  :root:is([data-ui="120"], [data-ui="140"]) .toggles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :root:is([data-ui="120"], [data-ui="140"]) .toggles::-webkit-scrollbar { display: none; }
  :root:is([data-ui="120"], [data-ui="140"]) .toggles .key { flex: none; }
}
@media (max-width: 620px) {
  /* upright: the buttons scroll sideways in one row rather than running off the edge; no room for the title */
  .mission { display: none; }
  .top-keys {
    margin-left: 0; width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .top-keys::-webkit-scrollbar { display: none; }
  #top .key { flex: none; min-height: 30px; padding: 0 10px; font-size: 12px; }
  .inspector { left: 8px; right: 8px; width: auto; padding: 8px 10px; overflow-y: auto; }
  .insp-title { font-size: 15px; }
  .insp-sub { font-size: 10px; }
  .insp-rows { font-size: 12px; margin: 6px 0 8px; padding-top: 6px; }
  .units-panel { left: 8px; right: 8px; width: auto; }
  /* When the bottom is busy (the unit list open, the sliders on, or a bigger UI size), the selected unit's panel goes
     to the top, under the buttons. It stops short of the middle of the screen, where a followed unit is; its readouts
     scroll if they have to. */
  body:has(#units:not([hidden])) .inspector,
  body:has(#cam:not([hidden])) .inspector,
  :root:is([data-ui="120"], [data-ui="140"]) .inspector { top: 54px; bottom: auto; max-height: max(96px, calc(50% - 78px)); }
  /* with the list open it leaves the list room for its search, filters and three units */
  body:has(#units:not([hidden])) .inspector { max-height: max(96px, calc(100% - var(--above) - 262px)); }
  /* and the list stops short of it (--insp-h is its real height, from src/main.js) */
  body:has(#inspector:not([hidden])) .units-panel {
    height: min(45%, calc(100% - var(--above) - 62px - var(--insp-h, 0px)));
  }
}

/* a small window held sideways (less than 620 by 520): the sliders in one row, as on a sideways phone */
@media (max-width: 620px) and (max-height: 520px) {
  .cam { left: 50%; right: auto; bottom: 52px; width: min(600px, calc(100% - 16px)); transform: translateX(-50%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 10px; }
  .cam-slider:has(#cam-turn) { grid-column: auto; grid-row: auto; }
  body { --above: 52px; }
  body:has(#cam:not([hidden])) { --above: 98px; }
}

/* ---- a narrow settings panel (a phone, or a big UI size) ----------------------------------------------------------
   The choices go under the setting's name: UI size's five on an upright phone, every row when it's narrower still. */
@container settings (max-width: 360px) { .set-row.sizes { grid-template-columns: 1fr; gap: 5px; } }
@container settings (max-width: 300px) { .set-row { grid-template-columns: 1fr; gap: 5px; } }