@charset "UTF-8";

/* Local Google Fonts distributions; attribution and OFL licences in fonts/. */
@font-face {
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("/fonts/ibm-plex-sans-400-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("/fonts/ibm-plex-sans-400-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Marcellus";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/marcellus-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Marcellus";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/marcellus-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Forge: continuous graphite planes and restrained oxide-red selection marks. */
:root {
  color-scheme:dark;
  --page:#1e201f;
  --surface:#242725;
  --image:#131615;
  --ink:#e6e3da;
  --muted:#b2b6af;
  --line:#464b45;
  --soft:#333833;
  --accent:#ae574d;
  --warning:#d9b577;
  --error:#e39788;
  --font:"IBM Plex Sans","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --inspector-width:340px;
}

* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-width:320px; }
body {
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  margin:0;
  overflow:hidden;
  background:var(--page);
  color:var(--ink);
  font:400 13px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { font-weight:500; }
h1 { font-size:14px; }
h2 { font-size:13px; }
h3 { font-size:13px; }
button,input,select { font:inherit; color:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button {
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}
a { color:inherit; }
button:disabled { cursor:default; }
button:disabled,.button:disabled { color:#92978f; border-color:var(--soft); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  position:relative;
  z-index:3;
  outline:2px solid var(--ink);
  outline-offset:-3px;
}
button svg {
  width:18px;
  height:18px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
::selection { background:var(--line); color:var(--ink); }

/* Shared controls and explicit states. */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:6px 11px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
}
.button-outline { border-color:var(--line); }
.button-primary { background:var(--ink); color:var(--page); border-color:var(--ink); }
.button-primary:disabled { background:var(--soft); }
.button-quiet { color:var(--muted); }
.icon-button {
  display:inline-grid;
  place-items:center;
  flex-shrink:0;
  width:34px;
  height:34px;
  padding:6px;
  color:var(--muted);
}
.button[aria-expanded=true],.button[aria-pressed=true],.icon-button[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--soft);
  color:var(--ink);
}
.state-label { font-size:12px; line-height:1.35; color:var(--muted); }
.status-dot { width:6px; height:6px; flex-shrink:0; background:var(--muted); }
.status-dot[data-tone=positive] { background:var(--ink); }
.status-dot[data-tone=warning] { background:var(--warning); }
.status-dot[data-tone=error] { background:var(--error); }
.chevron { color:var(--muted); font-size:20px; line-height:1; }
.eyebrow { display:block; color:var(--muted); font-size:11px; letter-spacing:.65px; }
.endpoint { overflow-wrap:anywhere; font-family:var(--mono); font-size:11px; }
.section-note,.microcopy { color:var(--muted); font-size:12px; line-height:1.6; }
.microcopy { font-size:11px; }
.section-note:empty,.microcopy:empty { display:none; }
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:10;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(50%);
  background:var(--ink);
  color:var(--page);
}
.skip-link:focus { position:fixed; width:auto; height:auto; padding:10px 14px; overflow:visible; clip-path:none; }

/* Video and journal are single navigation targets; journal actions live in its inspector. */
.app-header {
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:18px;
  min-height:54px;
  padding:8px 18px;
  border-bottom:1px solid var(--line);
}
.brand {
  flex-shrink:0;
  font:400 16px/1 "Marcellus",Georgia,serif;
  letter-spacing:1px;
}
.app-header h1 { padding-left:18px; border-left:1px solid var(--line); }
.header-context {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
  margin-left:auto;
  color:var(--muted);
  font-size:11px;
}
#environment { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connection { display:flex; align-items:center; gap:7px; min-width:0; }
#service-status { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sources-button { flex-shrink:0; }
.sources-dirty { color:var(--warning); font-size:11px; font-weight:400; }
.reception-bar {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  flex-shrink:0;
  min-height:62px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.reception-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:10px 18px;
  border-right:1px solid var(--line);
  border-bottom:2px solid transparent;
}
.reception-button>span:first-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.control-label { color:var(--muted); font-size:11px; }
.reception-button .state-label { font-weight:500; overflow-wrap:anywhere; }
.reception-button[aria-expanded=true] { background:var(--soft); border-bottom-color:var(--muted); }
.reception-button[aria-expanded=true] .control-label { color:var(--ink); }
.reception-summary { border-right:0; }
body:not([data-view=observation]) .reception-bar { display:none; }
body[data-view=messages] #sources-button { display:none; }
.journal-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.journal-actions .button { min-height:36px; white-space:nowrap; }
.recording-visual-option { display:flex; align-items:center; gap:10px; min-height:44px; font-size:13px; cursor:pointer; }
.recording-visual-option input { width:18px; height:18px; min-height:18px; padding:0; margin:0; accent-color:var(--accent); }
#recording-visual-status { margin:12px 0; overflow-wrap:anywhere; }
.action-status {
  flex-shrink:0;
  padding:7px 18px;
  border-bottom:1px solid var(--line);
  color:var(--warning);
  font-size:12px;
  overflow-wrap:anywhere;
}
.action-status:empty { display:none; }
.reception-notice { display:flex; align-items:baseline; flex-wrap:wrap; flex-shrink:0; gap:4px 12px; min-height:35px; padding:8px 18px; border-bottom:1px solid var(--line); border-left:3px solid var(--warning); background:var(--surface); font-size:12px; }
.reception-notice[data-tone=positive] { border-left-color:var(--muted); }
#reception-notice-age { color:var(--muted); font:400 11px/1.4 var(--mono); }
.notice-action { margin-left:auto; color:var(--ink); font-size:11px; }
.reception-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 8px; }
.reception-actions .button { flex:1; }
.reception-issues li { border-left:2px solid var(--warning); padding-left:10px; }
.reception-issues h4 { font-size:13px; margin:0 0 6px; }
.reception-issues .section-note { margin:4px 0; }
.reception-issues .incident-age { color:var(--muted); font:400 11px/1.5 var(--mono); }
body[data-view=sessions] #reception-notice { display:none; }

/* The inspector track remains reserved when its contents are closed. */
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--inspector-width);
  flex:1;
  min-height:0;
  overflow:hidden;
}
.camera-panel {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  min-width:0;
  min-height:0;
}
.camera-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 10px; min-height:46px; padding:2px 14px 2px 18px; }
.camera-actions { display:flex; align-items:center; gap:3px; }
.camera-stage { position:relative; display:grid; place-items:center; min-width:0; min-height:0; overflow:hidden; background:var(--image); }
.camera-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.vision-toggle { display:flex; align-items:center; gap:7px; min-height:44px; padding:0 8px; font-size:11px; cursor:pointer; touch-action:manipulation; white-space:nowrap; }
.vision-toggle:has(input:disabled) { color:var(--muted); cursor:default; }
.vision-toggle input { width:16px; height:16px; margin:0; accent-color:var(--ink); }
.vision-toggle:focus-within { outline:2px solid var(--ink); outline-offset:-3px; border-radius:4px; }
.vision-status { flex-basis:100%; overflow-wrap:anywhere; }
.vision-layer { position:absolute; pointer-events:none; overflow:hidden; }
.vision-box { position:absolute; border:1.5px solid #d5e9ca; color:#edf5e8; }
.vision-box[data-selectable=true] { pointer-events:auto; cursor:crosshair; }
.vision-box[data-selected=true] { border-color:var(--warning); border-width:2px; }
.vision-hit { position:absolute; left:50%; top:50%; width:100%; height:100%; min-width:44px; min-height:44px; transform:translate(-50%,-50%); padding:0; background:transparent; color:inherit; border:0; cursor:crosshair; touch-action:manipulation; }
.vision-hit:focus-visible { outline:2px solid var(--warning); outline-offset:2px; }
.vision-box-label { position:absolute; top:0; left:0; width:max-content; padding:3px 5px; background:#171c17f2; font:11px/1.2 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yaw-preview { padding:7px 18px 10px; border-bottom:1px solid var(--line); background:var(--surface); min-width:0; }
.yaw-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.yaw-preview-heading h3 { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 12px; font-size:13px; }
.yaw-preview-heading h3 #yaw-preview-badge { color:var(--muted); font-size:11px; font-weight:400; }
.yaw-preview-heading .button { min-height:44px; padding:6px 10px; }
.yaw-preview-readout { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; font-size:11px; }
#yaw-preview-target { color:var(--muted); }
.yaw-preview-readout dl { display:flex; flex-wrap:wrap; gap:7px 18px; }
.yaw-preview-readout dl>div { display:flex; align-items:baseline; gap:8px; }
.yaw-preview-readout dt { color:var(--muted); }
.yaw-preview-readout dd { font-family:var(--mono); font-size:12px; }
.yaw-preview-scale { display:flex; align-items:center; gap:6px; flex:1; min-width:150px; max-width:260px; color:var(--muted); font:10px var(--mono); }
#yaw-preview-meter { --yaw-position:50%; position:relative; flex:1; height:4px; background:var(--line); }
#yaw-preview-meter::before { content:""; position:absolute; left:50%; top:-3px; width:1px; height:10px; background:var(--muted); }
#yaw-preview-meter i { position:absolute; left:var(--yaw-position); top:-2px; width:8px; height:8px; border-radius:50%; transform:translateX(-50%); background:var(--muted); }
.yaw-preview[data-active=true] #yaw-preview-meter i { background:var(--accent); }
#yaw-preview-status { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.camera-empty { max-width:460px; padding:22px; text-align:center; }
.camera-empty h3 { font-size:18px; line-height:1.35; }
.camera-empty p { margin:12px 0 18px; color:var(--muted); font-size:12px; line-height:1.65; }
.camera-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; min-height:30px; padding:6px 18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
#camera-source { min-width:0; overflow-wrap:anywhere; }
.camera-reception { display:flex; flex-wrap:wrap; gap:4px 7px; min-width:0; font-family:var(--mono); font-size:11px; }
.telemetry-parent { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:9px 18px; border-bottom:1px solid var(--line); border-left:3px solid transparent; }
.telemetry-parent>span:first-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.telemetry-parent .control-label { color:var(--ink); font-size:13px; font-weight:500; }
.telemetry-parent[aria-expanded=true] { background:var(--surface); border-left-color:var(--muted); }
.measurement-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); min-width:0; }
.measurement-buttons>button { display:flex; flex-direction:column; gap:5px; min-width:0; min-height:93px; padding:9px 18px 12px; border-top:2px solid transparent; border-right:1px solid var(--soft); }
.measurement-buttons>button:last-child { border-right:0; }
.measurement-buttons>button[aria-pressed=true] { border-top-color:var(--accent); background:var(--soft); }
.measurement-label { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; color:var(--muted); font-size:12px; }
.measurement-label .chevron { font-size:16px; }
.measurement-value { min-height:25px; font-family:var(--mono); font-size:19px; line-height:1.3; overflow-wrap:anywhere; }
#flight-mode { font-size:16px; padding-top:3px; }
.measurement-state { color:var(--muted); font-size:11px; margin-top:auto; overflow-wrap:anywhere; }
.attitude-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
.attitude-values>span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.attitude-values small { color:var(--muted); font-size:11px; }
.attitude-values>span>span { font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }
.position-values>span>span { font-size:12px; }

/* Shared source context and selectors remain still; only the detail body scrolls. */
.inspector { display:flex; flex-direction:column; min-height:0; min-width:0; border-left:1px solid var(--line); background:var(--surface); }
.inspector-header { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-shrink:0; min-height:68px; padding:12px 12px 12px 18px; border-bottom:1px solid var(--line); }
.inspector-header h2 { margin-top:4px; font-size:15px; }
.inspector-content { min-height:0; min-width:0; }
.telemetry-inspector { display:flex; flex:1; flex-direction:column; }
.telemetry-context { flex-shrink:0; padding:15px 18px 13px; border-bottom:1px solid var(--soft); }
.telemetry-context .eyebrow { font-size:11px; letter-spacing:.4px; }
.telemetry-context .endpoint { margin-top:8px; font-size:12px; }
.context-meta { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; margin-top:9px; color:var(--muted); font-size:11px; }
.context-meta .state-label { font-size:11px; }
.detail-navigation { flex-shrink:0; padding:11px 12px 10px; border-bottom:1px solid var(--line); }
.detail-group-label { display:block; margin:0 5px 6px; color:var(--muted); font-size:11px; }
.detail-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.detail-tabs button { min-height:35px; padding:7px 5px 6px; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; text-align:center; }
.detail-tabs button[aria-pressed=true] { border-bottom-color:var(--accent); background:var(--soft); color:var(--ink); font-weight:500; }
.diagnostic-group { margin-top:12px; padding-top:10px; border-top:1px solid var(--soft); }
.diagnostic-tabs { display:flex; gap:6px; }
.diagnostic-tabs button { min-height:32px; padding:6px 10px; border:1px solid transparent; color:var(--muted); font-size:12px; }
.diagnostic-tabs button[aria-pressed=true] { border-color:var(--line); background:var(--surface); color:var(--ink); }
.inspector-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:18px 17px 24px; }
.inspector-empty { padding:22px 18px; color:var(--muted); font-size:12px; line-height:1.7; }
.inspector-empty .button { margin-top:16px; }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.detail-heading h3,.detail-title { font-size:14px; }
.detail-heading .state-label { padding-top:2px; text-align:right; }
.detail-title+.section-note,.detail-heading+.section-note { margin-top:10px; }
.detail-origin { margin:6px 0 14px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.detail-list { margin-top:14px; }
.detail-list>div { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--soft); font-size:12px; line-height:1.5; }
.detail-list dt { color:var(--muted); }
.detail-list dd { text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.detail-list+.section-note,.detail-list+.microcopy { margin-top:16px; }
.section-note+.microcopy { margin-top:12px; }
.section-action { margin-top:18px; }
.event-list { list-style:none; margin:12px 0 0; padding:0; }
.event-list li { padding:12px 0; border-bottom:1px solid var(--soft); font-size:12px; }
.event-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.event-message { overflow-wrap:anywhere; }
.event-level[data-level=warning] { color:var(--warning); }
.event-level[data-level=error] { color:var(--error); }
.empty-event { color:var(--muted); }

/* Source settings are an explicit edit/apply operation within the same inspector. */
#sources-form { margin-top:19px; }
fieldset { min-width:0; margin:0 0 20px; padding:0; border:0; }
legend { width:100%; margin-bottom:13px; padding:0 0 8px; border-bottom:1px solid var(--line); font-size:13px; font-weight:500; }
.form-field { display:flex; flex-direction:column; gap:6px; min-width:0; margin-bottom:13px; color:var(--muted); font-size:12px; }
.form-field:last-child { margin-bottom:0; }
input,select { width:100%; min-width:0; min-height:39px; padding:7px 9px; border:1px solid var(--line); border-radius:0; background:var(--page); color:var(--ink); font-size:16px; line-height:1.4; }
input::placeholder { color:#a3a79f; opacity:1; }
input:disabled,select:disabled { color:#92978f; border-color:var(--soft); }
input[aria-invalid=true],select[aria-invalid=true] { border-color:var(--error); }
.form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-pair .form-field { margin-bottom:0; }
.form-feedback { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.form-feedback:empty { display:none; }
.form-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:16px; }
.form-actions .button { min-height:38px; }
.active-config { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.active-config>p { margin-top:8px; overflow-wrap:anywhere; }
.app-footer { display:flex; align-items:center; flex-wrap:wrap; flex-shrink:0; justify-content:space-between; gap:4px 16px; min-height:31px; padding:6px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
#session-status { min-width:0; overflow-wrap:anywhere; }
#action-status:empty { display:none; }
#action-status { color:var(--muted); overflow-wrap:anywhere; }

/* Explicit state colors take precedence over component defaults. */
[data-tone=neutral] { color:var(--muted); }
[data-tone=positive] { color:var(--ink); }
[data-tone=warning] { color:var(--warning); }
[data-tone=error] { color:var(--error); }

body.focus-mode .workspace { grid-template-columns:minmax(0,1fr); }
body.focus-mode .inspector { display:none; }

@media(hover:hover) {
  button:not(:disabled):hover,a.button:hover { background:var(--soft); color:var(--ink); }
  .button-primary:not(:disabled):hover { background:#cccfc6; color:var(--page); }
  .button-outline:not(:disabled):hover { border-color:var(--muted); }
  .detail-tabs button[aria-pressed=true]:hover,.reception-button[aria-expanded=true]:hover,.measurement-buttons>button[aria-pressed=true]:hover { background:#3b413b; }
  .telemetry-parent:not(:disabled):hover { background:var(--surface); }
  .diagnostic-tabs button:not(:disabled):hover { border-color:var(--line); background:var(--surface); }
}

/* Compact laptops retain the same inspector width and readable telemetry. */
@media(min-width:761px) and (max-width:1100px) {
  .app-header { gap:14px; padding-right:14px; padding-left:14px; }
  .app-header h1 { padding-left:14px; }
  .header-context { flex-direction:column; align-items:flex-end; gap:1px; }
  .reception-button { padding-right:12px; padding-left:14px; }
  .camera-header { padding-left:14px; padding-right:8px; }
  .camera-footer { padding-left:14px; padding-right:14px; }
  .telemetry-parent { padding-left:14px; padding-right:14px; }
  .measurement-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .measurement-buttons>button { padding-left:12px; padding-right:12px; }
  .measurement-buttons>button:nth-child(2) { border-right:0; }
  .measurement-buttons>button:nth-child(n+3) { border-top-color:var(--soft); }
  .measurement-buttons>button[aria-pressed=true] { border-top-color:var(--accent); }
  .attitude-values { gap:5px; }
  .attitude-values>span>span { font-size:12px; }
  .measurement-value { font-size:18px; }
  #flight-mode { font-size:14px; }
}

/* Narrow screens use ordinary page scrolling; no sideways workspace. */
@media(max-width:760px) {
  body { height:auto; min-height:100vh; min-height:100dvh; overflow:auto; }
  .app-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px 12px; padding:10px 14px; }
  .app-header h1 { padding-left:12px; }
  #sources-button { grid-column:3; grid-row:1; }
  .header-context { grid-column:1/-1; grid-row:2; justify-content:space-between; width:100%; margin:0; gap:12px; }
  .reception-bar { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; }
  .reception-button { min-height:62px; padding:10px 14px; }
  .reception-bar>.reception-button:nth-child(2) { border-right:0; }
  .reception-summary { grid-column:1/-1; min-height:46px; border-top:1px solid var(--soft); }
  .reception-summary>span:first-child { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 14px; }
  .workspace { display:flex; flex-direction:column; flex:none; overflow:visible; }
  .camera-panel { display:flex; flex-direction:column; }
  .camera-header { min-height:43px; padding-left:14px; padding-right:8px; }
  .camera-stage { flex:none; min-height:250px; height:clamp(250px,55vw,430px); }
  .camera-empty { padding:24px 20px; }
  .camera-footer { padding-right:14px; padding-left:14px; }
  .telemetry-parent { padding-left:14px; padding-right:14px; }
  .measurement-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .measurement-buttons>button { padding:9px 12px 12px; }
  .measurement-buttons>button:nth-child(2) { border-right:0; }
  .measurement-buttons>button:nth-child(n+3) { border-top-color:var(--soft); }
  .measurement-buttons>button[aria-pressed=true] { border-top-color:var(--accent); }
  .inspector { min-height:340px; border-left:0; border-top:1px solid var(--line); }
  .inspector-header { min-height:65px; }
  .inspector-content,.inspector-scroll { overflow:visible; }
  .inspector-scroll { flex:none; padding-bottom:26px; scrollbar-gutter:auto; }
  .telemetry-context { padding-top:13px; }
  .form-actions { flex-direction:row; flex-wrap:wrap; }
  .form-actions .button { flex:1; min-width:200px; }
  .app-footer { margin-top:auto; padding-left:14px; padding-right:14px; }
  body.focus-mode .camera-stage { height:clamp(300px,65dvh,650px); }
}

@media(max-width:460px) {
  .app-header { gap:10px; padding-right:10px; padding-left:12px; }
  .app-header h1 { padding-left:10px; font-size:13px; }
  #sources-button { gap:5px; padding-right:8px; padding-left:8px; }
  #sources-button svg { width:15px; height:15px; }
  .sources-dirty { max-width:60px; overflow-wrap:anywhere; }
  .header-context { gap:7px; align-items:flex-start; }
  #environment { max-width:47%; }
  .connection { justify-content:flex-end; }
  .reception-button { padding-right:12px; padding-left:12px; gap:8px; }
  .camera-header { padding-left:12px; gap:4px; }
  .camera-header h2 { font-size:12px; }
  .camera-actions { gap:0; }
  .camera-actions .button { padding-right:6px; padding-left:6px; font-size:11px; }
  .camera-actions .icon-button { width:32px; }
  .camera-footer { padding-right:12px; padding-left:12px; }
  .camera-reception { gap:3px 5px; }
  .measurement-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .measurement-buttons>button { min-height:92px; }
  .measurement-buttons>button:nth-child(2) { border-right:0; }
  .attitude-values { gap:5px; }
  .attitude-values>span>span { font-size:11px; }
  .position-values>span>span { white-space:normal; }
  .inspector-header { padding-left:16px; }
  .telemetry-context { padding-right:16px; padding-left:16px; }
  .inspector-scroll { padding-right:16px; padding-left:16px; }
  .detail-list>div { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; }
  .app-footer { align-items:flex-start; padding-right:12px; padding-left:12px; gap:4px 10px; }
  .app-footer>span:nth-child(2) { margin-left:auto; }
}

/* Short landscape windows keep settings and the camera reachable by scrolling. */
@media(min-width:761px) and (max-height:560px) {
  body { height:auto; min-height:100dvh; overflow:auto; }
  .workspace { flex:none; min-height:460px; }
  .camera-stage { min-height:230px; }
  .inspector { max-height:560px; }
}

@media(pointer:coarse) {
  .button,.icon-button,.detail-tabs button,.diagnostic-tabs button { min-height:44px; }
  .icon-button,.camera-actions .icon-button { min-width:44px; }
  .journal-actions .button { min-height:44px; }
  .camera-panel { grid-template-rows:auto minmax(0,1fr) auto auto auto; }
  .camera-header { min-height:52px; }
  input,select { min-height:44px; }
}

/* Keep target selection usable on a laptop with the extra preview readout.
   Telemetry may scroll below it; consoles without preview keep their layout. */
@media(min-width:761px) and (max-height:780px) {
  body[data-view=observation]:not(.demo-mode):has(#yaw-preview:not([hidden])) { height:auto; min-height:100dvh; overflow:auto; }
  body[data-view=observation]:not(.demo-mode):has(#yaw-preview:not([hidden])) .workspace { flex:none; }
  body[data-view=observation]:not(.demo-mode):has(#yaw-preview:not([hidden])) .camera-panel { align-self:start; }
  body[data-view=observation]:not(.demo-mode):has(#yaw-preview:not([hidden])) .camera-stage { min-height:230px; }
}

/* Demo presents the existing camera and reports without adding control actions. */
.demo-only { display:none; }
body.demo-mode {
  --page:#1c1e1c;
  --surface:#282b27;
  --image:#141b17;
  --ink:#eeeae0;
  --muted:#b0b9ab;
  --line:#434b40;
  --accent:#e2c280;
  --demo-pilot:#a7c9da;
  --demo-argos:#e2c280;
  height:auto;
  min-height:100dvh;
  overflow:auto;
}
body.demo-mode .workspace { display:block; flex:none; min-height:0; overflow:visible; padding:0; }
body.demo-mode .camera-panel { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2.4fr) minmax(280px,1fr); grid-template-rows:auto auto auto auto auto; width:100%; margin:0; border:1px solid var(--line); border-top:0; }
body.demo-mode .camera-header { grid-column:1/-1; grid-row:1; min-height:40px; padding:2px 12px; border-bottom:1px solid var(--line); }
body.demo-mode .camera-stage { grid-column:2; grid-row:2; align-self:start; width:100%; height:auto; min-height:0; aspect-ratio:var(--demo-frame-ratio,4/3); }
body.demo-mode .camera-footer { grid-column:2; grid-row:3; min-height:24px; padding:4px 12px; border-bottom:0; font-size:11px; }
body.demo-mode .camera-footer .camera-reception { font-size:11px; }
body.demo-mode .inspector,
body.demo-mode .reception-bar,
body.demo-mode .measurements,
body.demo-mode .yaw-preview,
body.demo-mode .vision-toggle,
body.demo-mode #focus-button,
body.demo-mode #vision-status,
body.demo-mode .app-footer { display:none; }
body.demo-mode .vision-box:not([data-selected=true]) { display:none; }
body.demo-mode .vision-box[data-selected=true] { border-color:var(--demo-argos); }
body.demo-mode .vision-box[data-demo-state=tracked] { border-color:var(--demo-pilot); }
body.demo-mode .vision-box[data-demo-state=unavailable] { border-color:var(--muted); }
body.demo-mode .vision-box-label { font-size:12px; padding:5px 7px; }
.vision-box-label .demo-box-state { margin-right:8px; font-weight:500; color:var(--demo-pilot); }
.demo-box-state:empty { display:none; }
.vision-box[data-demo-state=locked] .demo-box-state { color:var(--demo-argos); }
.vision-box[data-demo-state=unavailable] .demo-box-state { color:var(--muted); }
.demo-aim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.demo-aim line,.demo-aim path { vector-effect:non-scaling-stroke; fill:none; }
.demo-aim-shadow { stroke:#101510; stroke-width:5; opacity:.85; }
.demo-aim-link { stroke:var(--demo-pilot); stroke-width:2; stroke-dasharray:6 4; }
.demo-aim-center,.demo-aim-end { stroke:var(--ink); stroke-width:2; filter:drop-shadow(0 1px 2px #101510); }
.demo-aim[data-state=locked] .demo-aim-link { stroke:var(--demo-argos); stroke-dasharray:none; }
body.demo-mode .demo-only { display:block; }
body[data-view=control] #demo-button { display:none; }
.demo-video-context { position:absolute; top:12px; left:12px; right:12px; z-index:2; gap:8px; justify-content:space-between; align-items:flex-start; pointer-events:none; }
body.demo-mode .demo-video-context { display:flex; }
.demo-video-context .demo-mode { background:var(--surface); padding:6px 9px; max-width:60%; }
.demo-video-context .demo-mode strong { font-size:14px; font-weight:500; }
.demo-eyebrow { display:block; margin-bottom:2px; font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); }
.demo-target { display:flex; flex-direction:column; gap:2px; padding:6px 8px; background:var(--surface); font:11px/1.4 var(--mono); max-width:50%; text-align:right; }
.demo-target strong { font-weight:500; }
.demo-target>span { font:11px/1.4 var(--font); color:var(--muted); }
.demo-target .demo-target-state { font:500 12px/1.4 var(--mono); letter-spacing:.8px; text-transform:uppercase; }
.demo-target[data-state=tracked] .demo-target-state { color:var(--demo-pilot); }
.demo-target[data-state=locked] .demo-target-state { color:var(--demo-argos); }
.demo-target[data-state=searching] .demo-target-state { color:var(--warning); }
.demo-target[data-state=lost] .demo-target-state { color:var(--error); }
.demo-summary { grid-column:1; grid-row:2/4; min-width:0; min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--page); }
.demo-controls { padding:11px 12px 9px; }
.demo-section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px 10px; margin-bottom:8px; }
.demo-section-heading h3 { font-size:11px; letter-spacing:1px; text-transform:uppercase; font-weight:500; }
.demo-section-heading>span { color:var(--muted); font:11px/1.4 var(--mono); }
.demo-key { display:flex; flex-wrap:wrap; gap:5px 12px; color:var(--muted); font-size:11px; }
.demo-key>span { display:inline-flex; align-items:center; gap:6px; }
.demo-symbol { width:8px; height:8px; display:inline-block; flex-shrink:0; }
.demo-symbol[data-kind=pilot] { border:1.5px solid var(--demo-pilot); border-radius:50%; }
.demo-symbol[data-kind=argos] { width:6px; height:6px; background:var(--demo-argos); transform:rotate(45deg); }
.demo-axes { display:grid; gap:4px; }
.demo-summary[data-held=true] :is(.demo-rail,.demo-value) { opacity:.5; }
.demo-mode[data-held=true] strong { color:var(--muted); }
#demo-mode-hint { display:block; color:var(--muted); font:11px/1.4 var(--mono); }
#demo-report-hint { justify-self:end; }
.demo-controls>.demo-section-heading { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 8px; }
.demo-controls .demo-key { grid-column:1/-1; grid-row:2; }
.demo-axis { display:grid; grid-template-columns:76px minmax(42px,1fr) 55px; grid-template-rows:16px 16px; align-items:center; gap:1px 7px; min-width:0; padding:4px 7px; background:var(--surface); }
.demo-axis-name { grid-column:1; grid-row:1/3; font-size:11px; letter-spacing:.4px; font-weight:500; text-transform:uppercase; }
.demo-axis-state { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.demo-axis-label { grid-column:1; grid-row:2; font-size:11px; line-height:1.2; color:var(--muted); }
.demo-axis[data-caption=visible] .demo-axis-name { grid-row:1; }
.demo-axis[data-interrupted=true] .demo-rail[data-kind=argos],.demo-axis[data-transition=true] .demo-rail {
  background:repeating-linear-gradient(135deg,transparent 0,transparent 4px,color-mix(in srgb,var(--demo-argos) 18%,transparent) 4px,color-mix(in srgb,var(--demo-argos) 18%,transparent) 5px);
}
.demo-rail { grid-column:2; position:relative; height:16px; margin:0 5px 0 10px; }
.demo-rail[data-kind=pilot] { grid-row:1; --demo-signal:var(--demo-pilot); }
.demo-rail[data-kind=argos] { grid-row:2; --demo-signal:var(--demo-argos); }
.demo-rail::before { content:'▸'; position:absolute; left:-12px; top:-1px; font-size:13px; color:var(--demo-signal); visibility:hidden; }
.demo-rail[data-active=true]::before { visibility:visible; }
.demo-rail[data-active=true] { background:color-mix(in srgb,var(--demo-signal) 7%,transparent); }
.demo-track { position:absolute; left:0; right:0; top:6px; height:4px; background:var(--line); }
.demo-track::after { content:''; position:absolute; left:50%; top:-3px; height:10px; width:1px; background:var(--muted); opacity:.65; }
.demo-rail[data-empty=true] .demo-track { background:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 3px,transparent 3px,transparent 6px); }
.demo-fill { position:absolute; height:4px; top:6px; background:var(--demo-signal); }
.demo-marker { position:absolute; left:50%; z-index:1; }
.demo-marker[data-kind=pilot] { top:4px; width:8px; height:8px; border:1.5px solid var(--demo-pilot); border-radius:50%; background:var(--surface); transform:translateX(-50%); }
.demo-marker[data-kind=argos] { top:5px; width:6px; height:6px; background:var(--demo-argos); transform:translateX(-50%) rotate(45deg); }
.demo-value { grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:0; font:12px/1.3 var(--mono); font-variant-numeric:tabular-nums; }
.demo-value[data-kind=pilot] { grid-row:1; }
.demo-value[data-kind=argos] { grid-row:2; }
.demo-value[data-empty=true] { color:var(--muted); }
.demo-scale { display:grid; grid-template-columns:76px minmax(42px,1fr) 55px; padding:4px 7px 0; gap:7px; color:var(--muted); font-size:11px; }
.demo-scale>div { display:flex; justify-content:space-between; margin:0 5px 0 10px; font-family:var(--mono); }
.demo-scale>span:last-child { text-align:right; }
.demo-shot { grid-column:3; grid-row:2/4; min-width:0; min-height:0; padding:11px 12px 10px; border-left:1px solid var(--line); }
.demo-shot .demo-section-heading { justify-content:flex-end; margin-bottom:5px; }
#demo-shot-title { font-size:20px; font-weight:400; line-height:1.2; letter-spacing:-.2px; margin:0 0 4px; }
#demo-shot-subtitle { color:var(--muted); font-size:12px; min-height:17px; }
.demo-shot-view { position:relative; height:152px; margin:9px 0 6px; overflow:hidden; background:var(--image); isolation:isolate; }
.demo-radar-plot { display:block; width:100%; height:100%; }
.demo-radar-grid { fill:none; stroke:var(--line); stroke-width:1; }
.demo-radar-fan { fill:color-mix(in srgb,var(--muted) 4%,transparent); }
.demo-radar-center { fill:none; stroke:var(--muted); stroke-width:1; stroke-dasharray:3 5; opacity:.55; }
.demo-radar-link { fill:none; stroke:var(--demo-argos); stroke-width:1.5; stroke-dasharray:2 4; }
.demo-radar-ray { stroke:var(--demo-argos); stroke-width:1; opacity:.5; }
.demo-radar-halo { fill:var(--demo-argos); opacity:.08; }
.demo-radar-dot { fill:var(--demo-argos); stroke:var(--demo-argos); stroke-width:1.5; }
.demo-radar-goal { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 3; }
.demo-radar-center-goal { fill:none; stroke:var(--ink); stroke-width:1.5; }
.demo-radar-label { position:absolute; font:11px/1.3 var(--mono); color:var(--muted); pointer-events:none; }
.demo-radar-left { left:9px; bottom:27px; }
.demo-radar-right { right:9px; bottom:27px; }
.demo-radar-origin { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font:11px/1.3 var(--mono); }
.demo-radar-origin svg { background:var(--image); }
.demo-radar-tag { color:var(--ink); }
.demo-shot-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.demo-shot-legend { display:flex; flex-wrap:wrap; gap:5px 14px; color:var(--muted); font-size:11px; }
.demo-shot-legend>span { display:inline-flex; align-items:center; gap:6px; }
.demo-shot-swatch { display:inline-block; width:10px; height:10px; border:1px solid var(--demo-argos); border-radius:50%; background:var(--demo-argos); }
.demo-shot-swatch[data-kind=goal] { border:1px dashed var(--ink); background:transparent; }
.demo-radar-caption { margin-top:4px; color:var(--muted); font-size:11px; }
.demo-shot-details { margin-top:6px; color:var(--muted); font-size:11px; }
.demo-shot-details summary { width:max-content; padding:3px 0; cursor:pointer; }
.demo-shot-details summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.demo-shot-details dl { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin:7px 0 4px; padding-top:7px; border-top:1px solid var(--line); }
.demo-shot-details dd { color:var(--ink); font-family:var(--mono); text-align:right; }
.demo-shot-details p { margin-top:5px; }
#demo-shot-view[data-state=lost] .demo-radar-dot { fill:none; stroke:var(--muted); stroke-dasharray:3 3; }
#demo-shot-view[data-state=unknown] .demo-radar-grid,#demo-shot-view[data-state=unknown] .demo-radar-center { opacity:.3; }
#demo-shot-view[data-mode=M][data-state=visible] .demo-radar-dot { fill:var(--muted); stroke:var(--muted); }
#demo-shot-view[data-mode=M][data-state=visible] .demo-radar-ray { stroke:var(--muted); }
.demo-shot:has(#demo-shot-view[data-state=lost]) .demo-shot-swatch:not([data-kind=goal]) { border-style:dashed; background:transparent; }
.demo-shot:has(#demo-shot-view[data-mode=M][data-state=visible]) .demo-shot-swatch:not([data-kind=goal]) { border-color:var(--muted); background:var(--muted); }
.demo-shot:has(#demo-shot-view[data-mode=Y]) .demo-shot-swatch[data-kind=goal] { width:1px; border:0; border-radius:0; background:var(--ink); }
.demo-history { grid-column:1/-1; grid-row:4; min-width:0; padding:8px 12px; border-top:1px solid var(--line); }
.demo-history-key { margin-left:auto; display:flex; flex-wrap:wrap; gap:4px 12px; }
.demo-history-category { display:inline-flex; align-items:center; gap:5px; }
.demo-history-category::before { content:''; width:8px; height:8px; background:var(--demo-argos); }
.demo-history-category[data-kind=manual]::before { background:var(--demo-pilot); }
.demo-history-category[data-kind=hatch]::before { background:repeating-linear-gradient(135deg,transparent 0,transparent 2px,var(--muted) 2px,var(--muted) 3px); }
.demo-history .demo-section-heading { margin-bottom:6px; }
.demo-lanes { display:grid; gap:4px; }
.demo-lane { display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px; align-items:center; }
.demo-lane>span { color:var(--muted); font-size:11px; letter-spacing:.5px; }
.demo-history-track { position:relative; height:16px; overflow:hidden; background:color-mix(in srgb,var(--line) 25%,var(--page)); }
.demo-history-track::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.6667% - 1px),var(--page) calc(16.6667% - 1px),var(--page) 16.6667%); opacity:.28; pointer-events:none; }
.demo-segment { position:absolute; top:0; height:100%; color:var(--ink); font:11px/16px var(--mono); text-align:center; overflow:hidden; white-space:nowrap; }
.demo-segment[data-state=argos],.demo-segment[data-state=assisted] { background:color-mix(in srgb,var(--demo-argos) 35%,var(--surface)); }
.demo-segment[data-state=pilot],.demo-segment[data-state=manual] { background:color-mix(in srgb,var(--demo-pilot) 32%,var(--surface)); }
.demo-segment[data-state=visible] { background:color-mix(in srgb,var(--muted) 30%,var(--surface)); }
.demo-segment[data-state=paused],.demo-segment[data-state=waiting],.demo-segment[data-state=lost] { background:repeating-linear-gradient(135deg,var(--line) 0,var(--line) 2px,var(--surface) 2px,var(--surface) 5px); }
.demo-segment[data-state=unknown],.demo-segment[data-state=none] { color:var(--muted); background:var(--image); }
.demo-interruption { position:absolute; top:0; height:100%; pointer-events:auto; background:repeating-linear-gradient(135deg,transparent 0,transparent 3px,color-mix(in srgb,var(--ink) 45%,transparent) 3px,color-mix(in srgb,var(--ink) 45%,transparent) 4px); }
.demo-cursor { position:absolute; top:0; bottom:0; width:1px; background:var(--ink); left:100%; z-index:2; pointer-events:none; }
.demo-history-ticks { display:flex; justify-content:space-between; margin:3px 0 0 56px; color:var(--muted); font:11px/1.4 var(--mono); }
.demo-history-inspection { display:grid; grid-template-columns:minmax(200px,1fr) minmax(240px,1fr); gap:5px 20px; align-items:center; margin-top:3px; }
.demo-inspect { display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px; align-items:center; }
.demo-inspect label { color:var(--muted); font-size:11px; letter-spacing:.5px; }
.demo-inspect input { width:100%; min-width:0; min-height:24px; height:24px; padding:0; margin:0; accent-color:var(--muted); cursor:ew-resize; }
#demo-history-detail { color:var(--muted); font-size:11px; }
.demo-provenance { grid-column:1/-1; grid-row:5; padding:5px 12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; gap:3px 14px; justify-content:space-between; flex-wrap:wrap; }
body.demo-mode .demo-provenance { display:flex; }
@media(min-width:961px) and (min-height:561px) {
  body.demo-mode { height:100dvh; overflow:hidden; }
  body.demo-mode .workspace { flex:1; overflow:hidden; }
  body.demo-mode .camera-panel { height:100%; grid-template-columns:minmax(280px,1fr) var(--demo-video-width,40%) minmax(280px,1fr); grid-template-rows:auto minmax(0,1fr) auto auto auto; }
  body.demo-mode .camera-stage { align-self:center; }
  body.demo-mode .demo-summary,body.demo-mode .demo-shot { overflow:auto; }
  body.demo-mode .demo-shot-view { height:clamp(152px,25dvh,300px); }
}
@media(min-width:961px) and (max-height:800px) {
  body.demo-mode .app-header { min-height:44px; padding-top:4px; padding-bottom:4px; }
  body.demo-mode .view-navigation { min-height:32px; }
  body.demo-mode .view-navigation button { padding-top:5px; padding-bottom:5px; }
  body.demo-mode .camera-header { min-height:37px; }
  .demo-shot-view { height:134px; margin-top:7px; }
  .demo-controls { padding-top:9px; padding-bottom:7px; }
  .demo-shot { padding-top:8px; padding-bottom:7px; }
  .demo-history-track { height:14px; }
  .demo-segment { line-height:14px; }
}
@media(max-width:960px) {
  body.demo-mode .camera-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  body.demo-mode .camera-stage { grid-column:1/-1; grid-row:2; }
  body.demo-mode .camera-footer { grid-column:1/-1; grid-row:3; }
  body.demo-mode .demo-summary { grid-column:1; grid-row:4; border-right:0; border-top:1px solid var(--line); }
  body.demo-mode .demo-shot { grid-column:2; grid-row:4; border-top:1px solid var(--line); }
  body.demo-mode .demo-history { grid-row:5; }
  body.demo-mode .demo-provenance { grid-row:6; }
}
@media(max-width:700px) {
  body.demo-mode .demo-summary { grid-column:1/-1; }
  body.demo-mode .demo-shot { grid-column:1/-1; grid-row:5; border-left:0; }
  body.demo-mode .demo-history { grid-row:6; }
  body.demo-mode .demo-provenance { grid-row:7; }
  .demo-history-inspection { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:520px) {
  body.demo-mode .workspace { padding:0; }
  body.demo-mode .camera-header { padding-left:9px; padding-right:7px; }
  .demo-video-context { top:8px; left:8px; right:8px; gap:5px; }
  .demo-video-context .demo-mode { padding:4px 6px; }
  .demo-mode .demo-eyebrow { display:none; }
  .demo-video-context .demo-mode strong { font-size:12px; }
  .demo-target { padding:4px 6px; }
  .demo-target>span { font-size:11px; }
  .demo-axis { grid-template-columns:70px minmax(35px,1fr) 55px; gap:1px 5px; }
  .demo-scale { grid-template-columns:70px minmax(35px,1fr) 55px; gap:5px; }
  .demo-radar-caption { font-size:11px; }
}
@media(pointer:coarse) {
  .demo-shot-details summary { display:flex; align-items:center; min-height:44px; }
  .demo-inspect input { min-height:44px; }
}

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

/* Capture remains visible when browsing live frames or historical sessions. */
.global-recording { display:flex; align-items:center; flex-shrink:0; gap:7px; min-height:34px; padding:5px 9px; border:1px solid var(--line); font-size:12px; color:var(--muted); white-space:nowrap; }
.global-recording[aria-expanded=true] { background:var(--soft); border-color:var(--muted); }
.global-recording[data-tone=error] { color:var(--error); border-color:var(--error); }
.global-recording[data-tone=warning] { color:var(--warning); border-color:var(--warning); }
.global-recording[data-tone=positive] { color:var(--ink); }
/* Passive navigation uses a hover/selected surface instead of a permanent frame. */
:is(#sources-button, #global-recording, .camera-actions .button, .camera-actions .icon-button, .camera-empty .button) { border-color:transparent; }
.measurement-declaration { color:var(--ink); font-size:11px; line-height:1.3; }
.source-persistence-note { margin-top:8px; }
.autopilot-texts { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.autopilot-texts summary { cursor:pointer; font-size:13px; padding:4px 0; }
.autopilot-texts>.section-note,.autopilot-texts>.microcopy { margin-top:9px; }
.autopilot-text-list { margin:12px 0; padding:0; list-style:none; }
.autopilot-text-list li { padding:12px 0; border-top:1px solid var(--soft); }
.autopilot-text-heading { font-size:12px; font-weight:500; color:var(--muted); }
.autopilot-text-body { margin:6px 0; font:400 12px/1.6 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.replay-end-detail { margin:0 0 12px; color:var(--warning); }
body.demo-mode #demo-record-button { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.demo-record-dot { width:7px; height:7px; border:1px solid currentColor; border-radius:50%; flex-shrink:0; }
#demo-record-button[data-state=recording] .demo-record-dot { background:var(--error); border-color:var(--error); border-radius:1px; }
#demo-record-button[data-state=error] { color:var(--error); }
@media(max-width:1000px) and (min-width:761px) { .app-header { gap:12px; } .header-context { gap:10px; } }
@media(max-width:760px) {
  .global-recording { grid-column:3; grid-row:2; max-width:100%; font-size:11px; padding:4px 6px; min-height:28px; }
  .header-context { grid-column:1/3; align-items:flex-start; flex-direction:column; gap:1px; }
  #environment { max-width:100%; }
  .connection { justify-content:flex-start; max-width:100%; }
}