/* ═══════════════════════════════════════════════════════════════════
   ARACHNID Flight UI — swiss/brutalist language (LOUD inspired)
   Pure black, hairline rules, hard edges, big editorial display type,
   text-only CTAs with arrows, italic-mono small caps for metadata.
   No radius, no glass, no gradients, no glow.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://rsms.me/inter/inter.css');

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* core palette — pure black/white only */
  --bg:        #000000;
  --bg-2:      #000000;
  --hair:      rgba(255,255,255,.12);
  --hair-2:    rgba(255,255,255,.20);
  --hair-3:    rgba(255,255,255,.40);
  --text:      #ffffff;
  --text-2:    rgba(255,255,255,.66);
  --dim:       rgba(255,255,255,.42);
  --faint:     rgba(255,255,255,.18);

  /* functional only */
  --armed:     #ff2200;
  --warn:      #ffcc00;
  --ok:        #ffffff;          /* keep functional state mostly white */

  /* legacy names, kept for fewer ripples — all neutralised */
  --card:      transparent;
  --card-2:    rgba(255,255,255,.04);
  --border:    var(--hair);
  --border-2:  var(--hair-2);
  --green:     #ffffff;
  --green-d:   rgba(255,255,255,.7);
  --red:       var(--armed);
  --amber:     var(--warn);
  --amber-d:   rgba(255,204,0,.7);
  --blue:      #ffffff;
  --purple:    #ffffff;

  /* metrics */
  --rail-w:    132px;
  --bar-h:     58px;
  --safe-t:    env(safe-area-inset-top);
  --safe-b:    env(safe-area-inset-bottom);
  --safe-l:    env(safe-area-inset-left);
  --safe-r:    env(safe-area-inset-right);

  /* type */
  --sans:     "Inter", "Inter Tight", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --mono:     "Inter", ui-monospace, "SF Mono", monospace;  /* no special mono — Inter tnum */
}

@supports (font-variation-settings: normal) {
  :root { --sans: "InterVariable", "Inter", -apple-system, sans-serif; }
}

html, body {
  height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-feature-settings: "ss01" 1, "cv11" 1;
  letter-spacing: -.005em;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; letter-spacing: inherit; }
input, select, textarea { font-family: inherit; }

::selection { background: #fff; color: #000; }

/* ─────── Screens ─────── */
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: block; }


/* ═══════════════════════ TYPOGRAPHY PRIMITIVES ═══════════════════════ */

.eyebrow,
.s-label,
.card-label,
.panel-sub,
.lbl,
.t-stat .lbl,
.alt-edge,
.alt-step-hint,
.alt-target-pill,
.t-pill,
.mode-pill,
.brand-sub,
.brand-sub-sm,
.cam-label,
.dev-list li,
.scan-pct,
.dev-tab,
.rot-btn,
.dir-btn,
.m-btn,
.rail-btn,
.js-label,
.att-readouts .lbl,
.pc-full-readouts .lbl,
.post-action-sub,
.post-action-lbl,
.row-title,
.hint,
.scan-step .panel-sub,
.dev-hint,
.manual-warn,
.connect-hero,
.drone-meta,
.s-state {
  font-family: var(--sans);
}

/* small-caps eyebrow used everywhere */
.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}


/* ═══════════════════════ CONNECT (page 1) ═══════════════════════ */

#screen-connect {
  background: #000;
  display: none;
}
#screen-connect.active {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.connect-bg { display: none; }    /* drop the radial glow */

#screen-connect::before {
  content: "ARACHNID";
  position: absolute;
  left: 32px; top: 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
  z-index: 5;
}
#screen-connect::after {
  content: "FLIGHT — TETRA ⁄ MICOAIR743 ⁄ ORIN";
  position: absolute;
  right: 32px; top: 28px;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--dim);
  font-weight: 400;
  z-index: 5;
}

.connect-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background: transparent;
  border: 0;
  padding: 88px 80px calc(56px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 0;
  backdrop-filter: none;
  border-radius: 0;
  box-sizing: border-box;
}

.brand {
  display: none;        /* logo handled by ::before above; this block is now editorial */
}

.connect-hero {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--text);
  margin: 0 0 64px 0;
  max-width: 14ch;
}
.connect-hero::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--text);
  margin-top: 28px;
}

/* Connect mode tabs (FLIGHT vs SCANNER) */
.connect-mode-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.cmode-tab {
  flex: 1;
  padding: 18px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--hair);
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .25em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  position: relative;
  transition: color .18s, padding-left .18s;
}
.cmode-tab:last-child { border-right: 0; }
.cmode-tab:hover { color: var(--text-2); padding-left: 14px; }
.cmode-tab.active { color: var(--text); }
.cmode-tab.active::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--text);
}

.connect-pane { display: none; }
.connect-pane.active { display: block; animation: fade-in .25s ease; }

.drone-picker {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 32px;
}
.drone-tile {
  flex: 1;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  border-radius: 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  color: var(--text-2);
  transition: color .25s ease, background .25s ease;
}
.drone-tile:last-child { border-right: 0; }
.drone-tile:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,.025); }
.drone-tile.selected {
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 -2px 0 0 var(--text);
}
.drone-tile.placeholder { opacity: .35; cursor: default; }

.drone-vector {
  width: 64px;
  height: 64px;
  color: var(--text);
}
.drone-vector line { stroke: currentColor; stroke-width: 2; stroke-linecap: butt; }
.drone-vector circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.drone-vector rect { fill: currentColor; }
.drone-tile:not(.selected) .drone-vector { color: var(--dim); }

/* 3D viewer surfaces — replace SVG drones */
.drone-3d-wrap {
  position: relative;
  width: 240px;
  height: 200px;
  margin-bottom: -16px;     /* tighten the tile against the name */
}
.drone-3d {
  width: 100%;
  height: 100%;
  display: block;
}
/* SVG fallback — hidden by default; only shown if WebGL fails (set
   .drone-fallback-active on the body to flip them on). */
.drone-fallback { display: none; }
body.no-webgl .drone-fallback {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  z-index: -1;
  opacity: .35;
}

.drone-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.drone-meta {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ═══════════════════════ Orin scanner (Connect page) ═══════════════════════ */

.device-scanner {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin: 0 0 28px;
  padding: 14px 0 0;
}
.device-scanner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
}
.scan-refresh {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--text-2);
  background: transparent;
  border: 0;
  padding: 4px 6px;
  text-transform: uppercase;
  font-weight: 500;
  transition: color .15s;
}
.scan-refresh:hover { color: var(--text); }

.device-list { display: flex; flex-direction: column; }
.device-item {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  transition: padding .2s;
}
.device-item:hover { padding-left: 6px; }
.dev-status {
  width: 10px; height: 10px;
  background: var(--dim);
  transition: background .25s, box-shadow .25s;
}
.dev-status[data-status="pending"] { background: var(--dim); animation: pulse 1.4s steps(2) infinite; }
.dev-status[data-status="online"]  { background: var(--text); box-shadow: 0 0 6px rgba(255,255,255,.5); }
.dev-status[data-status="offline"] { background: var(--armed); animation: none; }
.dev-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dev-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev-host {
  font-size: 10px; letter-spacing: .15em; color: var(--dim);
  text-transform: uppercase; font-weight: 500;
}
.dev-tag {
  font-size: 9px; letter-spacing: .25em; color: var(--dim);
  text-transform: uppercase; font-weight: 600;
  padding: 4px 8px; border: 1px solid var(--hair-2); white-space: nowrap;
}
.dev-tag.primary { color: var(--text); border-color: var(--text); }
.dev-open {
  font-size: 10px; letter-spacing: .22em; color: var(--text-2);
  background: transparent; border: 0; padding: 6px 0 6px 12px;
  text-transform: uppercase; font-weight: 500; transition: color .15s;
}
.dev-open:hover { color: var(--text); }
.dev-open[data-this] { color: var(--text); }


.opt-gps {
  border: 0;
  background: transparent;
  padding: 16px 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 14px;
}

#btn-connect {
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  color: var(--text);
  padding: 16px 0;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -.01em;
  width: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  transition: padding .35s cubic-bezier(.2,.8,.2,1), letter-spacing .35s;
}
#btn-connect::after {
  content: "→";
  display: inline-block;
  font-size: 28px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
#btn-connect:hover { letter-spacing: .02em; }
#btn-connect:hover::after { transform: translateX(10px); }

.status-line {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dot {
  width: 8px; height: 8px;
  border-radius: 0;        /* no rounded dots */
  background: var(--dim);
  flex-shrink: 0;
}
.dot.ok { background: var(--text); }
.dot.warn { background: var(--warn); animation: pulse 1.2s steps(2) infinite; }
.dot.err { background: var(--armed); }
@keyframes pulse { 50% { opacity: .25; } }


/* ═══════════════════════ BUTTONS — text+arrow primary, hairline secondary ═══════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  border-radius: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  transition: border-color .2s, color .2s, gap .25s;
  position: relative;
}
.btn::after {
  content: "→";
  font-size: 14px;
  color: var(--text-2);
  transition: transform .25s, color .2s;
}
.btn:hover { border-color: var(--text); }
.btn:hover::after { transform: translateX(6px); color: var(--text); }
.btn:active { opacity: .7; }
.btn:disabled { opacity: .25; pointer-events: none; }

.btn.btn-primary {
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 0;
}
.btn-primary::after { color: var(--text); }
.btn-primary:hover { color: var(--text); border-color: var(--text); }

.btn.btn-cancel { color: var(--text-2); }
.btn.btn-cancel::after { content: "✕"; transform: none; color: inherit; }
.btn.btn-cancel:hover { color: var(--armed); border-color: var(--armed); }
.btn.btn-cancel:hover::after { transform: none; }

.btn.btn-confirm { color: var(--text); border-bottom: 1px solid var(--text); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.btn.btn-confirm::after { content: "✓"; transform: none; color: inherit; }
.btn.btn-confirm:hover::after { transform: none; }

.btn.btn-warn { color: var(--warn); border-bottom: 1px solid var(--warn); }
.btn.btn-warn::after { color: inherit; }

.btn.btn-takeoff { color: var(--text); border-bottom: 1px solid var(--text); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; padding: 8px 0; font-size: 12px; }
.btn.btn-takeoff::after { content: "↗"; }
.btn.btn-takeoff:hover::after { transform: translate(4px, -4px); }

.btn.btn-land { color: var(--armed); border-bottom: 1px solid var(--armed); margin-left: auto; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; padding: 8px 0; font-size: 12px; }
.btn.btn-land::after { content: "↘"; transform: none; }

.btn-xl { padding: 16px 0; font-size: 22px; letter-spacing: .04em; }
.btn-large { font-size: 14px; padding: 14px 0; }
.row-btn { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 14px; border-bottom: 1px solid var(--hair); text-align: left; letter-spacing: 0; text-transform: none; }
.row-btn:hover { padding-left: 6px; }


/* ═══════════════════════ TELEMETRY TOP BAR ═══════════════════════ */

.telem-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) 18px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  z-index: 50;
  backdrop-filter: none;
}
.tg { display: flex; align-items: center; gap: 18px; }
.tg-left { flex: 0 0 auto; }
.tg-center {
  flex: 1 1 auto;
  justify-content: center;
  gap: 36px;
}
.tg-right { flex: 0 0 auto; gap: 22px; margin-left: auto; }

.rail-toggle {
  width: 36px; height: 36px;
  background: transparent;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
}
.rail-toggle svg { width: 18px; height: 18px; }
.rail-toggle:hover { color: var(--text); }

/* Top-bar back-to-Connect button */
.topbar-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--hair-2);
  border-radius: 0;
  font-size: 10px;
  letter-spacing: .25em;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .15s;
}
.topbar-back-arrow { font-size: 14px; color: var(--text); line-height: 1; }
.topbar-back:hover { border-color: var(--text); color: var(--text); padding-right: 18px; }

.brand-mark, .brand-mark.sm { display: none; }
.brand-sub-sm {
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 600;
  color: var(--text);
}

.mode-pill {
  font-size: 10px;
  letter-spacing: .28em;
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  margin-left: 18px;
  position: relative;
  padding-left: 18px;
}
.mode-pill::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--text);
  transform: translateY(-.5px);
}

.t-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}
.t-stat .lbl {
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}
.t-stat .val {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.t-stat small {
  font-size: 11px;
  color: var(--dim);
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 0;
}
.icon-stat .ic {
  width: 13px; height: 13px;
  color: var(--dim);
}

.t-pill {
  font-size: 10px;
  letter-spacing: .25em;
  padding: 0;
  background: transparent;
  color: var(--dim);
  border: 0;
  text-transform: uppercase;
  font-weight: 500;
}
.t-pill.armed {
  color: var(--armed);
  border: 0;
  animation: arm-flash 1.4s steps(2) infinite;
}
@keyframes arm-flash { 50% { opacity: .35; } }


/* ═══════════════════════ LEFT RAIL — text-only ═══════════════════════ */

.rail {
  position: fixed;
  top: calc(var(--bar-h) + var(--safe-t));
  bottom: 0;
  left: 0;
  width: var(--rail-w);
  background: var(--bg);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  padding: 28px 0 0 0;
  gap: 0;
  z-index: 40;
  backdrop-filter: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.rail.collapsed { transform: translateX(calc(-1 * var(--rail-w))); }

.rail-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 22px 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  position: relative;
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.8,.2,1);
}
.rail-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--text);
  transition: width .25s cubic-bezier(.2,.8,.2,1);
}
.rail-btn:hover { color: var(--text-2); padding-left: 32px; }
.rail-btn.active {
  color: var(--text);
  background: transparent;
}
.rail-btn.active::before { width: 4px; }
.rail-ic { width: 16px; height: 16px; color: currentColor; opacity: .7; }


/* ═══════════════════════ CONTENT + PANELS ═══════════════════════ */

.content {
  position: fixed;
  top: calc(var(--bar-h) + var(--safe-t));
  bottom: 0;
  left: var(--rail-w);
  right: 0;
  overflow: hidden;
}
.rail.collapsed ~ .content,
body.rail-collapsed .content { left: 0; }

.panel {
  position: absolute;
  inset: 0;
  display: none;
  padding: 40px 48px 32px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.panel.active { display: block; }

.panel-head {
  display: block;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 16px;
}
.panel-head h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 200;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--text);
}
.panel-sub {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .22em;
  text-transform: uppercase;
}


/* ═══════════════════════ HERO READOUT (HOVER altitude) ═══════════════════════ */

.hero-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  position: relative;
  padding: 8px 0 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hair);
}
.readout-num {
  font-size: clamp(96px, 14vw, 168px);
  font-weight: 100;
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--text);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.readout-unit {
  font-size: 30px;
  font-weight: 200;
  color: var(--text-2);
  letter-spacing: -.01em;
  margin-right: auto;
  font-style: italic;
}
.readout-sub {
  flex-basis: 100%;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}
.readout-sub strong, .readout-sub span { color: var(--text); font-weight: 500; }


/* ═══════════════════════ HOVER PANEL ═══════════════════════ */

.hover-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  height: calc(100% - 8px);
  border-top: 0;
}
.hover-stage-2 {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  padding: 0 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.hover-stage-2::after { display: none; }

/* Row that holds the drone vis + the vertical slider on the right */
.hover-vis-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 18px;
  min-height: 0;
}

.hover-drone-vis {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 140px;
  position: relative;
}
.hover-drone-vis .drone-3d.hover-3d {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
}
.hover-drone-vis .hover-drone-svg {
  width: 200px; height: 200px;
  color: var(--text);
  filter: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hover-drone-vis .hover-drone-svg line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; }
.hover-drone-vis .hover-drone-svg .prop {
  fill: currentColor;
  opacity: .9;
  transform-origin: center;
  transform-box: fill-box;
  /* prop spin removed — 3D model handles all motion */
}
.hover-drone-vis .hover-drone-svg .body { fill: var(--text); }

/* ── Vertical altitude slider (rotated -90°) ── */
.alt-slider-vert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 4px 0 0;
  position: relative;
  height: 100%;
}
.alt-slider-vert .alt-edge {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--dim);
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  flex: 0 0 auto;
  width: 100%;
}
.alt-slider-vert .alt-edge small { color: var(--dim); margin-left: 1px; font-size: 8px; }

.alt-slider-track {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.alt-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 1px;
  background: var(--hair-3);
  outline: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* Rotate to vertical. The native control behaves as a horizontal slider
     of width = parent's HEIGHT, then visually displayed vertically. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;     /* JS sets this to the track's height after layout */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: 50% 50%;
}
.alt-slider-track::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--hair-3);
  transform: translateX(-.5px);
  pointer-events: none;
}
.alt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 8px;
  border-radius: 0;
  background: var(--text);
  border: 0;
  box-shadow: 0 0 6px rgba(255,255,255,.18);
  cursor: grab;
  transition: transform .12s;
}
.alt-slider::-webkit-slider-thumb:active { transform: scaleX(1.15); cursor: grabbing; }
.alt-slider::-moz-range-thumb {
  width: 28px; height: 8px;
  border-radius: 0;
  background: var(--text);
  border: 0;
  cursor: grab;
}

/* Tick marks every 1m (5 stops) */
.alt-slider-track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 7px);
  width: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, var(--hair-2) 0 1px, transparent 1px),
    linear-gradient(180deg, transparent 0 calc(20% - .5px), var(--hair-2) calc(20% - .5px) calc(20% + .5px), transparent calc(20% + .5px) 100%),
    linear-gradient(180deg, transparent 0 calc(40% - .5px), var(--hair-2) calc(40% - .5px) calc(40% + .5px), transparent calc(40% + .5px) 100%),
    linear-gradient(180deg, transparent 0 calc(60% - .5px), var(--hair-2) calc(60% - .5px) calc(60% + .5px), transparent calc(60% + .5px) 100%),
    linear-gradient(180deg, transparent 0 calc(80% - .5px), var(--hair-2) calc(80% - .5px) calc(80% + .5px), transparent calc(80% + .5px) 100%),
    linear-gradient(180deg, transparent 0 calc(100% - 1px), var(--hair-2) calc(100% - 1px) 100%);
}

.alt-target-tick {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1px;
  background: var(--warn);
  transform: translateX(-50%);
  bottom: 50%;
  pointer-events: none;
  transition: bottom .25s ease;
}

.alt-target-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 0;
  flex: 0 0 auto;
  width: 100%;
}
.alt-target-pill .alt-target-pill-lbl {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}
.alt-target-pill strong {
  font-size: 20px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--warn);
  line-height: 1;
}
.alt-target-pill small { font-size: 11px; color: var(--dim); font-weight: 400; }

.hover-controls-2,
.hover-controls-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hair);
}
.hover-controls-2 { grid-template-columns: 1fr 1fr; }
.hover-controls-3 .big-btn,
.hover-controls-2 .big-btn {
  height: 70px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  border-radius: 0;
  color: var(--text);
  letter-spacing: .25em;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  padding: 0 24px 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding .25s cubic-bezier(.2,.8,.2,1);
}
.hover-controls-3 .big-btn:last-child,
.hover-controls-2 .big-btn:last-child { border-right: 0; }
.hover-controls-3 .big-btn::after,
.hover-controls-2 .big-btn::after {
  content: "→";
  font-size: 16px;
  transition: transform .25s;
}
.hover-controls-3 .big-btn.launch::after { content: "↗"; }
.hover-controls-3 .big-btn.land::after,
.hover-controls-2 .big-btn.land::after { content: "↘"; }
.hover-controls-3 .big-btn.hold::after,
.hover-controls-2 .big-btn.hold::after { content: "◼"; transform: none; }
.hover-controls-3 .big-btn.land,
.hover-controls-2 .big-btn.land { color: var(--armed); }
.hover-controls-3 .big-btn.launch { color: var(--text); border-bottom: 0; }
.hover-controls-3 .big-btn.launch:hover { color: var(--text); }
.hover-controls-3 .big-btn:hover,
.hover-controls-2 .big-btn:hover { padding-left: 12px; }
.hover-controls-3 .big-btn:hover::after,
.hover-controls-2 .big-btn:hover::after { transform: translateX(8px); }
.hover-controls-3 .big-btn.land:hover::after,
.hover-controls-2 .big-btn.land:hover::after { transform: translate(4px, 4px); }
.hover-controls-3 .big-btn.launch:hover::after { transform: translate(6px, -6px); }
.hover-controls-3 .big-btn.hold:hover::after,
.hover-controls-2 .big-btn.hold:hover::after { transform: none; }
.hover-controls-3 .big-btn svg,
.hover-controls-2 .big-btn svg { display: none; }

.hover-cam {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 32px;
  gap: 12px;
}
.hover-cam .card-label,
.hover-cam .card-label.cam-label {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0;
}
.cam-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

/* Live RealSense MJPEG-style polling */
.cam-stream-wrap { padding: 0; background: #000; border-color: var(--hair-2); }
.cam-stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cam-stream-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 4px, transparent 4px 8px);
}
.cam-stream:not([hidden]) ~ .cam-stream-fallback { opacity: 0; transition: opacity .3s; }

/* Manual fly camera tile (overlaid bottom-right of the map) */
.manual-cam {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 240px;
  height: 160px;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  display: flex;
  flex-direction: column;
  padding: 8px 10px 0;
  gap: 6px;
}
.manual-cam .card-label { color: var(--dim); margin-bottom: 0; }
.manual-cam .cam-placeholder { min-height: 0; flex: 1; }


/* ═══════════════════════ CARDS — neutralized ═══════════════════════ */

.card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  padding: 20px 0;
  backdrop-filter: none;
}
.card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 500;
}
.lbl-ic { width: 11px; height: 11px; }


/* ═══════════════════════ TEST cards (now inside DEV) ═══════════════════════ */

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.s-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--hair);
  border-top: 0;
}
.s-card:nth-child(2) { padding-left: 24px; padding-right: 24px; }
.s-card:nth-child(3) { padding-left: 24px; padding-right: 0; border-right: 0; }
.s-label {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  font-weight: 500;
  text-transform: uppercase;
}
.s-thumb {
  height: 64px;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: flex-start;
  color: var(--text-2);
}
.s-thumb svg { width: 56px; height: 56px; }
.s-state {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -.005em;
}

.row-block { margin-bottom: 36px; }
.row-title {
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .25em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.row-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
  cursor: pointer;
  transition: padding-left .2s;
}
.opt:hover { padding-left: 6px; }
.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--hair-3);
  border-radius: 0;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.opt input[type="checkbox"]:checked {
  background: var(--text);
  border-color: var(--text);
}
.opt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg);
  clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 70%);
}


/* ═══════════════════════ DEV — sub-tabs ═══════════════════════ */

.dev-tabs {
  display: flex;
  gap: 36px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dev-tab {
  padding: 14px 0;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  font-weight: 500;
  margin-bottom: -1px;
  transition: color .2s;
}
.dev-tab:hover { color: var(--text-2); }
.dev-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.dev-section { display: none; animation: fade-in .35s ease; }
.dev-section.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ═══════════════════════ MOTOR config ═══════════════════════ */

.motor-config-stage {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 48px 0;
  margin-bottom: 0;
}
.motor-config-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  grid-template-rows: 1fr 240px 1fr;
  align-items: center;
  justify-items: center;
  width: min(760px, 100%);
  height: min(560px, 70vh);
  margin: 0 auto;
}
.motor-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 18px 18px;
  width: 220px;
}
.motor-cell.tl { grid-column: 1; grid-row: 1; }
.motor-cell.tr { grid-column: 3; grid-row: 1; }
.motor-cell.bl { grid-column: 1; grid-row: 3; }
.motor-cell.br { grid-column: 3; grid-row: 3; }

.motor-cell .motor-prop {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hair-3);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 200;
  font-size: 30px;
  color: var(--text);
  position: static;
  flex-shrink: 0;
  transition: all .2s;
  font-feature-settings: "tnum" 1;
}
.motor-cell .motor-prop.spinning {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
  box-shadow: none;
  animation: motor-spin .15s linear infinite;
}
@keyframes motor-spin { to { transform: rotate(360deg); } }

.motor-cell-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.dir-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hair-2);
  border-radius: 0;
  overflow: hidden;
}
.dir-btn {
  padding: 9px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--dim);
  background: transparent;
  border-radius: 0;
  text-transform: uppercase;
  transition: all .15s;
}
.dir-btn:hover { color: var(--text); }
.dir-btn.active { background: var(--text); color: var(--bg); }

.cell-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hair-2);
  border-radius: 0;
}
.m-btn {
  padding: 10px 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .25em;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair-2);
  border-radius: 0;
  text-transform: uppercase;
}
.m-btn:last-child { border-right: 0; }
.m-btn:hover { color: var(--text); }
.m-btn:active { opacity: .6; }
.m-btn.save { color: var(--text); }
.m-btn.save:hover { background: var(--text); color: var(--bg); }
.m-btn.dirty { color: var(--warn); }

.motor-frame-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.motor-frame-svg svg { width: 80%; height: 80%; max-width: 480px; }
.motor-frame-svg line { stroke: var(--text); stroke-width: 1; opacity: .15; stroke-linecap: butt; }
.motor-frame-svg .frame-body { fill: var(--bg); stroke: var(--text); stroke-width: 1; opacity: .3; }

.motor-config-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 0;
}
.motor-config-foot .btn-primary { margin-left: auto; padding: 12px 0; letter-spacing: .25em; font-size: 12px; }
.motor-config-foot .hint {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--dim);
  text-transform: uppercase;
}
.motor-config-foot .hint.dirty { color: var(--warn); }
.motor-config-foot .hint.dirty::before { content: "● "; color: var(--warn); }


/* ═══════════════════════ MANUAL ENTRY (DEV → Manual) ═══════════════════════ */

.manual-entry {
  display: block;
  padding: 0;
}
.manual-entry-hero {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 56px 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.manual-entry-hero .card-label {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  margin-bottom: 0;
}
.manual-entry-title {
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 200;
  letter-spacing: -.03em;
  line-height: .98;
  color: var(--text);
  max-width: 12ch;
}
.manual-entry-blurb {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
  font-weight: 300;
}
.manual-entry-hero .dev-list { margin-top: 12px; }
.manual-entry-hero .btn { align-self: flex-start; padding: 14px 0; font-size: 18px; letter-spacing: .03em; text-transform: none; font-weight: 400; margin-top: 12px; }


/* ═══════════════════════ SCAN — carousel + steps ═══════════════════════ */

[data-panel="scan"] { padding: 0; display: none; }
[data-panel="scan"].active { display: flex; flex-direction: column; }

/* Persistent dark map background behind every scan step */
.scan-bg-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}
.scan-bg-map .maplibregl-canvas {
  filter: invert(1) hue-rotate(180deg) saturate(0) brightness(.45) contrast(1.05);
}
.scan-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 75%),
    rgba(0,0,0,.35);
  pointer-events: none;
}

/* All step containers position above the bg map */
.scan-step { z-index: 2; }

/* Step 1: centered card overlay */
.scan-card {
  background: rgba(8,8,12,.85);
  border: 1px solid var(--hair-2);
  padding: 28px 32px 24px;
  max-width: 720px;
  width: calc(100% - 32px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  backdrop-filter: blur(10px);
}
.scan-card-step1 { max-width: 880px; }
.scan-step[data-step="1"].active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  flex: 1 1 auto;
}

.scan-step {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 40px 48px 32px;
  background: transparent;
}
.scan-step.active { display: flex; }
.scan-step .panel-head { flex: 0 0 auto; }

.carousel {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 0 0 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel-tile {
  scroll-snap-align: center;
  flex: 0 0 200px;
  height: 220px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 22px;
  color: var(--text-2);
  transition: color .25s, background .25s;
}
.carousel-tile svg {
  width: 60px; height: 60px;
  color: currentColor;
  stroke-width: 1;
}
.carousel-tile span {
  font-weight: 400;
  letter-spacing: -.005em;
  font-size: 18px;
  align-self: flex-start;
}
.carousel-tile.selected {
  color: var(--text);
  background: var(--text);
}
.carousel-tile.selected span { color: var(--bg); }
.carousel-tile.selected svg { color: var(--bg); }
.carousel-tile.free { font-style: italic; }

.step-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex: 0 0 auto;
  border-top: 1px solid var(--hair);
}
.step-foot .btn-primary { margin-left: auto; }
.step-foot .btn-confirm { margin-left: auto; }
.hint {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}

.map-shell {
  position: relative;
  flex: 1 1 auto;
  border: 1px solid var(--hair);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg);
  min-height: 0;
}
.map { position: absolute; inset: 0; }
.maplibregl-map { background: var(--bg); }
.maplibre-dark .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) saturate(0); }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-bottom-right { display: none !important; }

.draw-tools {
  position: absolute;
  top: 16px; right: 16px;
  display: flex; flex-direction: column;
  gap: 0;
  z-index: 5;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 0;
}
.tool-btn {
  width: 44px; height: 44px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.tool-btn:last-child { border-bottom: 0; }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn.active { color: var(--bg); background: var(--text); border-color: var(--text); }


/* ═══════════════════════ Rotation toggle ═══════════════════════ */

.rotation-toggle {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 0;
  z-index: 5;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
}
.rot-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: .25em;
  font-weight: 500;
  color: var(--dim);
  background: transparent;
  border-radius: 0;
  text-transform: uppercase;
  border-right: 1px solid var(--hair);
}
.rot-btn:last-child { border-right: 0; }
.rot-btn svg { width: 14px; height: 14px; }
.rot-btn:hover { color: var(--text); }
.rot-btn.active { background: var(--text); color: var(--bg); }


/* ═══════════════════════ SCAN — active scan ═══════════════════════ */

.scan-live {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  padding: 0;
  min-height: 0;
  border-top: 1px solid var(--hair);
}
.map-shell-live { min-height: 0; border: 0; border-right: 1px solid var(--hair); }
.live-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.pc-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  padding: 18px 22px;
}
.pc-canvas {
  flex: 1;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 0;
  overflow: hidden;
  margin-top: 8px;
}
.pc-canvas canvas { width: 100%; height: 100%; display: block; }
.pc-hint {
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--dim);
  text-transform: uppercase;
}
.live-card {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 18px 22px;
}
.live-card .cam-placeholder { min-height: 100px; margin-top: 8px; }

.scan-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 48px;
  border-top: 1px solid var(--hair);
  background: var(--bg);
}
.scan-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.scan-pbar {
  flex: 1;
  height: 1px;
  background: var(--hair-3);
  border-radius: 0;
  overflow: hidden;
}
.scan-pbar-fill {
  height: 100%;
  width: 0%;
  background: var(--text);
  transition: width .3s ease;
  box-shadow: none;
}
.scan-pct {
  font-size: 12px;
  color: var(--text);
  min-width: 56px;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.scan-controls { display: flex; gap: 0; border-left: 1px solid var(--hair); }
.ctrl-btn {
  width: 56px; height: 56px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ctrl-btn:last-child { border-right: 0; }
.ctrl-btn svg { width: 18px; height: 18px; }
.ctrl-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ctrl-btn.primary { color: var(--text); }
.ctrl-btn.danger { color: var(--armed); }

.scan-pause-actions { display: none; gap: 16px; }
.scan-pause-actions.active { display: flex; }


/* ═══════════════════════ SCAN — post flight (step 6) ═══════════════════════ */

.scan-complete-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  padding: 0;
  min-height: 0;
  border-top: 1px solid var(--hair);
}
.pc-full-stage {
  position: relative;
  background: #000;
  border: 0;
  border-right: 1px solid var(--hair);
  border-radius: 0;
  overflow: hidden;
  min-height: 300px;
}
.pc-full-label {
  position: absolute;
  top: 18px; left: 24px;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--text);
  z-index: 2;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  text-transform: uppercase;
  font-weight: 500;
}
#pc-full-render { width: 100%; height: 100%; display: block; }
.pc-full-readouts {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
  display: flex;
  gap: 36px;
  z-index: 2;
  font-size: 11px;
}
.pc-full-readouts span { display: flex; gap: 10px; align-items: baseline; }
.pc-full-readouts .lbl { color: var(--dim); letter-spacing: .25em; font-size: 10px; text-transform: uppercase; font-weight: 500; }
.pc-full-readouts .val { color: var(--text); font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; }

.post-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.post-action {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 24px 24px 24px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .2s;
  color: var(--text);
  position: relative;
}
.post-action::after {
  content: "→";
  position: absolute;
  right: 24px;
  top: 24px;
  color: var(--text-2);
  transition: transform .25s, color .2s;
}
.post-action:hover { padding-left: 32px; }
.post-action:hover::after { transform: translateX(8px); color: var(--text); }
.post-action:active { opacity: .6; }
.post-action-lbl {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.005em;
}
.post-action-sub {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}
.post-action.primary {
  background: var(--text);
  border-color: transparent;
  color: var(--bg);
}
.post-action.primary::after { color: var(--bg); }
.post-action.primary .post-action-sub { color: rgba(0,0,0,.55); }
.post-action.ghost { opacity: .6; font-style: italic; }


/* ═══════════════════════ MANUAL FLY ═══════════════════════ */

[data-panel="manual"] { padding: 0; display: none; }
[data-panel="manual"].active { display: flex; flex-direction: column; }

.manual-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
.manual-warn {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--warn);
  text-transform: uppercase;
  font-weight: 500;
}
.manual-stage {
  flex: 1 1 auto;
  position: relative;
  margin: 0;
  min-height: 0;
}
.manual-stage .map-shell { height: 100%; border: 0; }
.manual-att {
  position: absolute;
  bottom: 24px; left: 24px;
  width: 200px;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 14px;
  backdrop-filter: none;
}
.att-svg { width: 100%; height: 130px; }
.att-ring { fill: transparent; stroke: var(--text); stroke-width: 1; opacity: .4; }
.att-cross { stroke: var(--text); stroke-width: .5; opacity: .25; }
.att-ground { fill: rgba(255,255,255,.08); }
.att-marker { fill: var(--text); }
.att-lbl { fill: var(--dim); font-size: 5.5px; letter-spacing: 1.5px; }
.att-readouts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 11px;
  margin-top: 8px;
}
.att-readouts span { display: flex; gap: 8px; align-items: baseline; }
.att-readouts .lbl { color: var(--dim); font-size: 9px; letter-spacing: .25em; align-self: center; text-transform: uppercase; font-weight: 500; }
.att-readouts .val { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }

.joysticks {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 24px 48px calc(24px + var(--safe-b));
  gap: 24px;
  border-top: 1px solid var(--hair);
}
.joystick { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.js-base {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hair-3);
  touch-action: none;
}
.js-ring {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--hair);
  border-radius: 50%;
}
.js-stick {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  box-shadow: none;
  pointer-events: none;
}
.js-label {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}


/* ═══════════════════════ TOAST ═══════════════════════ */

.toast {
  position: fixed;
  bottom: calc(28px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  border: 0;
  color: var(--bg);
  padding: 14px 26px;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { background: var(--armed); color: var(--text); }
.toast.ok   { background: var(--text); color: var(--bg); }
.toast.warn { background: var(--warn); color: var(--bg); }


/* ═══════════════════════ Dev list (manual-entry tips) ═══════════════════════ */

.dev-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 8px 0 0;
}
.dev-list li {
  font-size: 12px;
  color: var(--text-2);
  padding: 10px 0;
  padding-left: 20px;
  position: relative;
  border-bottom: 1px solid var(--hair);
  letter-spacing: .04em;
}
.dev-list li:last-child { border-bottom: 0; }
.dev-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text);
}

.dev-hint {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--dim);
  text-align: left;
  padding: 16px 0 0;
  text-transform: uppercase;
  font-weight: 500;
}
.dev-blurb {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  font-weight: 300;
}


/* ═══════════════════════ DEV → Diagnostics (MAVLink) ═══════════════════════ */

/* ═══════════════════════ DEV → Bench (live attitude + GPS + cloud) ═══════════════════════ */

.bench-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.bench-tile {
  border: 1px solid var(--hair);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.015);
  height: 420px;
  overflow: hidden;
}
.bench-tile .card-label { margin-bottom: 0; }

.bench-3d-wrap {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--hair);
}
.bench-3d-wrap canvas { width: 100%; height: 100%; display: block; }

.bench-map {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  border: 1px solid var(--hair);
}
.bench-map-legend {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  gap: 14px;
  background: rgba(0,0,0,.78);
  border: 1px solid var(--hair);
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-2);
}
.bench-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bench-map-legend i {
  width: 10px; height: 10px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.bench-map .maplibregl-canvas {
  filter: invert(1) hue-rotate(180deg) saturate(0) brightness(.55);
}
.bench-map .maplibregl-ctrl-attrib,
.bench-map .maplibregl-ctrl-bottom-right { display: none !important; }

.bench-pc-stage {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  background: #000;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.bench-pc-stage canvas { width: 100%; height: 100%; display: block; }
.bench-pc-status {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(0,0,0,.7);
  padding: 3px 7px;
  border: 1px solid var(--hair);
}
.bench-pc-status.live { color: var(--text); border-color: var(--hair-2); }
.bench-pc-status.live::before { content: "● "; color: var(--text); }
.bench-pc-status.err { color: var(--armed); border-color: rgba(255,34,0,.45); }

.bench-readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  padding: 6px 0 0;
  flex: 0 0 auto;
}
.bench-readouts > span { display: flex; flex-direction: column; gap: 2px; }
.bench-readouts .lbl {
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
}
.bench-readouts .val {
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

@media (max-width: 1100px) {
  .bench-grid { grid-template-columns: 1fr 1fr; }
  .bench-tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .bench-grid { grid-template-columns: 1fr; }
  .bench-tile:last-child { grid-column: 1; }
  .bench-tile { height: 320px; }
}


.diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.diag-tile {
  border: 1px solid var(--hair);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,.015);
  height: 360px;
  overflow: hidden;
}
.diag-tile .row-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.diag-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 18px;
  flex: 0 0 auto;
}
.diag-stats > div { display: flex; flex-direction: column; gap: 2px; }
.diag-stats .lbl { font-size: 9px; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; font-weight: 500; }
.diag-stats .val { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }

.diag-graph { width: 100%; flex: 1 1 0; min-height: 0; background: rgba(255,255,255,.025); display: block; }

.diag-console {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  background: rgba(0,0,0,.5);
  padding: 10px;
  color: var(--text-2);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}
.diag-console .ln-rx { color: var(--text-2); }
.diag-console .ln-tx { color: var(--warn); }
.diag-console .ln-info { color: var(--text); }
.diag-console .ln-err { color: var(--armed); }

.diag-input-row {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--hair);
  padding-top: 8px;
  flex: 0 0 auto;
}
.diag-prompt { color: var(--text); font-family: ui-monospace, monospace; font-weight: 700; }
.diag-input {
  flex: 1; background: transparent; border: 0; color: var(--text);
  font-family: ui-monospace, monospace; font-size: 12px;
  padding: 6px 0; outline: none;
}

.diag-param-search {
  display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 8px;
  flex: 0 0 auto;
}
.diag-param-search .diag-input { padding: 4px 0; }
.diag-param-search .m-btn { padding: 6px 10px; }

.diag-param-list {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.diag-param-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
}
.diag-param-row .pname { color: var(--text); }
.diag-param-row .pval  { color: var(--warn); font-variant-numeric: tabular-nums; text-align: right; }

.diag-log-list { list-style: none; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.diag-log-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-2);
}
.diag-log-list li.hint { color: var(--dim); border-bottom: 0; }


/* ═══════════════════════ Responsive ═══════════════════════ */

@media (max-width: 1100px) {
  :root { --rail-w: 110px; }
  .rail-btn { font-size: 11px; padding-left: 22px; }
  .panel { padding: 28px 28px 24px; }
  .scan-step { padding: 28px 28px 24px; }
}

@media (max-width: 900px) {
  :root { --rail-w: 88px; }
  .rail-btn { font-size: 10px; padding-left: 18px; height: 56px; }
  .tg-center { gap: 18px; }
  .t-stat .val { font-size: 13px; }
  .panel { padding: 22px; }
  .scan-step { padding: 22px; }
  .status-grid { grid-template-columns: 1fr; }
  .s-card { border-right: 0; border-bottom: 1px solid var(--hair); padding: 20px 0; }
  .s-card:nth-child(2), .s-card:nth-child(3) { padding-left: 0; padding-right: 0; }
  .scan-live { grid-template-columns: 1fr; }
  .live-side { flex-direction: row; flex: 0 0 auto; border-top: 1px solid var(--hair); }
  .pc-card { border-bottom: 0; border-right: 1px solid var(--hair); min-height: 160px; }
  .live-card { flex: 1 1 0; }
  .hover-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 160px; }
  .hover-stage-2 { border-right: 0; border-bottom: 1px solid var(--hair); padding-right: 0; padding-bottom: 18px; }
  .hover-cam { padding-left: 0; padding-top: 18px; }
  .readout-num { font-size: clamp(72px, 14vw, 120px); }
  .motor-config-grid {
    grid-template-columns: 1fr 160px 1fr;
    grid-template-rows: 1fr 160px 1fr;
    height: min(460px, 60vh);
  }
  .motor-cell { width: 170px; padding: 12px 14px; }
  .scan-complete-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .pc-full-stage { border-right: 0; border-bottom: 1px solid var(--hair); }
  .post-rail { flex-direction: row; gap: 0; overflow-x: auto; }
  .post-action { min-width: 240px; flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--hair); }
  .post-action::after { right: 16px; top: 16px; }
  #screen-connect { grid-template-columns: 1fr; }
  .connect-card { padding: 72px 28px 32px; }
  .drone-picker { flex-direction: column; }
  .drone-tile { border-right: 0; border-bottom: 1px solid var(--hair); }
  .drone-tile:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  .tg-center { display: none; }
  .joysticks { padding: 18px 24px; }
  .js-base { width: 130px; height: 130px; }
  .panel-head h2 { font-size: 28px; }
  .readout-num { font-size: clamp(56px, 16vw, 96px); }
  .diag-grid { grid-template-columns: 1fr; }
  .post-meta { gap: 18px; }
}

/* ═══════════════════════ Mobile (phone, portrait) ═══════════════════════ */

@media (max-width: 600px) {
  :root { --rail-w: 64px; --bar-h: 50px; }
  .telem-bar { padding: var(--safe-t) 8px 0; }
  .topbar-back-lbl { display: none; }
  .brand-sub-sm { display: none; }
  .mode-pill { margin-left: 8px; padding-left: 12px; font-size: 9px; }
  .tg-right { gap: 10px; }
  .tg-right .t-stat .val { font-size: 12px; }
  .rail-btn { font-size: 9px; padding: 0 8px; height: 56px; }
  .rail-btn span { display: none; }
  .rail-ic { width: 20px; height: 20px; }
  .panel { padding: 14px; }
  .scan-step { padding: 14px; }
  .panel-head { margin-bottom: 16px; }
  .panel-head h2 { font-size: 22px; }
  .hover-layout { grid-template-rows: 1fr 120px; gap: 12px; }
  .hover-vis-row { grid-template-columns: 1fr 64px; gap: 8px; }
  .alt-target-pill strong { font-size: 16px; }
  .hover-controls-3 .big-btn { height: 56px; font-size: 11px; padding: 0 14px 0 4px; letter-spacing: .15em; }
  .connect-card { padding: 56px 18px 24px; }
  .connect-mode-tabs { flex-direction: column; }
  .cmode-tab { border-right: 0; border-bottom: 1px solid var(--hair); padding: 14px 8px; }
  .cmode-tab:last-child { border-bottom: 0; }
  .cmode-tab.active::after { display: none; }
  .cmode-tab.active { background: rgba(255,255,255,.06); }
  .device-item { grid-template-columns: 12px 1fr auto; gap: 10px; }
  .dev-tag { display: none; }
  #screen-connect::before, #screen-connect::after { display: none; }
  .preview-playback { flex-wrap: wrap; gap: 8px; }
  .pp-time { min-width: 70px; font-size: 10px; }
  .pp-speed-wrap { width: 100%; }
  .pp-speed-btn { flex: 1; }
  .post-head { padding: 14px; }
  .post-meta { gap: 14px; }
  .post-meta .val { font-size: 13px; }
}

/* iPad portrait (~810×1080) */
@media (max-width: 1080px) and (orientation: portrait) {
  .hover-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 140px; }
  .hover-stage-2 { border-right: 0; border-bottom: 1px solid var(--hair); padding-right: 0; padding-bottom: 16px; }
  .hover-cam { padding-left: 0; padding-top: 16px; }
  .scan-complete-grid { grid-template-columns: 1fr; }
  .pc-full-stage { border-right: 0; border-bottom: 1px solid var(--hair); }
  .post-rail { flex-direction: row; overflow-x: auto; gap: 0; }
  .post-action { min-width: 240px; flex: 0 0 auto; border-right: 1px solid var(--hair); border-bottom: 0; }
}

/* ─── DEV → MAVLink tab ──────────────────────────────────────────── */
.mavlink-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-content: start;
}
.mav-tile {
  border: 1px solid var(--hair);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.015);
  min-height: 220px;
}
.mav-tile-wide { grid-column: span 3; }
.mav-tile-actions { grid-column: span 3; }
.mav-tile .row-title { border-bottom: 0; padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; }
.mav-tile .row-title .hint { font-size: 9px; letter-spacing: .15em; color: var(--dim); text-transform: uppercase; }

/* Sensor health bit chips */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 4px;
  margin-top: 4px;
}
.sensor-chip {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 6px;
  border: 1px solid var(--hair);
  text-align: center;
  font-weight: 500;
  color: var(--dim);
}
.sensor-chip.ok      { color: var(--ok); border-color: var(--ok); }
.sensor-chip.bad     { color: var(--armed); border-color: var(--armed); }
.sensor-chip.absent  { opacity: .4; }

/* Vibration bars */
.vib-bars { display: flex; flex-direction: column; gap: 6px; }
.vib-row { display: grid; grid-template-columns: 12px 1fr 56px; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-2); }
.vib-bar { height: 6px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.vib-bar > div { height: 100%; background: var(--ok); transition: width .12s linear; }
.vib-bar > div.warn { background: var(--warn); }
.vib-bar > div.bad  { background: var(--armed); }
.vib-row .val { font-size: 11px; color: var(--text); text-align: right; }

/* EKF flag chips */
.ekf-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; }

/* Battery hero */
.batt-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.batt-pct { font-size: 38px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.batt-stats { display: flex; flex-direction: column; gap: 4px; }
.batt-stats .lbl { font-size: 9px; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
.batt-stats .val { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.batt-stats > div { display: flex; gap: 8px; align-items: baseline; }
.batt-bar { height: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); }
.batt-fill { height: 100%; background: var(--ok); transition: width .25s ease, background .2s; }
.batt-fill.warn { background: var(--warn); }
.batt-fill.bad  { background: var(--armed); }

/* RC / servo channel grid */
.chan-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.chan-cell {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--hair); padding: 6px;
  font-family: ui-monospace, monospace; font-size: 10px;
}
.chan-cell .chan-label { font-size: 9px; color: var(--dim); letter-spacing: .15em; }
.chan-cell .chan-val   { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.chan-cell .chan-bar   { height: 4px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; margin-top: 2px; }
.chan-cell .chan-bar > div { height: 100%; background: var(--text); transition: width .08s linear; }
.chan-cell.idle { opacity: .35; }

/* Message rate table */
.msg-rate-table { width: 100%; border-collapse: collapse; font-family: ui-monospace, monospace; font-size: 11px; }
.msg-rate-table th { font-size: 9px; letter-spacing: .15em; color: var(--dim); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--hair); text-transform: uppercase; font-weight: 500; }
.msg-rate-table td { padding: 3px 8px; color: var(--text-2); }
.msg-rate-table td.tcol-name  { color: var(--text); }
.msg-rate-table td.tcol-rate  { font-variant-numeric: tabular-nums; text-align: right; width: 60px; }
.msg-rate-table td.tcol-bar   { width: 50%; }
.msg-rate-table .rate-bar { height: 4px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.msg-rate-table .rate-bar > div { height: 100%; background: var(--ok); }

/* iPad portrait */
@media (max-width: 1080px) and (orientation: portrait) {
  .mavlink-grid { grid-template-columns: 1fr 1fr; }
  .mav-tile-wide, .mav-tile-actions { grid-column: span 2; }
  .chan-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .mavlink-grid { grid-template-columns: 1fr; }
  .mav-tile-wide, .mav-tile-actions { grid-column: span 1; }
  .chan-grid { grid-template-columns: repeat(4, 1fr); }
}