/* Magi demo app — tokens from docs/DEMO-UX.md §8 ("Hangar"). Fonts bundled in assets/fonts (no network). */
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;src:url(fonts/share-tech-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
:root {
  --brand: #5EE38E;   /* the DevSim logo green (2026-10-13) */
  --bg: #0A1120; --panel: rgba(10,17,30,.74); --line: rgba(210,220,230,.10); --line-strong: rgba(210,220,230,.20);
  --text: #EEF2F5; --muted: #9BA5AF; --dim: #8A96A3;
  --accent: #5CE1FF; --fault: #FFB23F; --target: #FF5A4E;
  --pass: #3DDC97; --fail: #FF5A4E; --inconclusive: #FFB23F; --error: #D9486B; --notrun: #5B6570;
  --plan: #A9BEE0; --estimate: #5B8CFF;
  --cd: "Barlow Condensed", "Arial Narrow", sans-serif; --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg) url(backdrop.svg) center top / 1440px 900px no-repeat; color: var(--text); font-family: var(--sans); font-size: 14px; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,11,20,.45), rgba(7,11,20,.7)); }
body { position: relative; isolation: isolate; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.bar { height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--line);
  background: rgba(7,11,20,.55); }
/* The DevSim logo (2026-10-13): the small mark, then DEV in ink and SIM in the brand green, in Share Tech Mono.
   Brand green is for the logo only; the app's accent stays cyan and PASSED stays #3DDC97. */
.wordmark { display: inline-flex; align-items: center; gap: 0;   /* no gap: DEV and SIM are separate flex items */
  font-family: "Share Tech Mono", ui-monospace, monospace; font-weight: 400; font-size: 21px; letter-spacing: .16em; color: var(--text); text-decoration: none; }
.wordmark::before { content: ""; width: 24px; height: 24px; flex: none; margin-right: 10px; background: url(brand/devsim-mark-small.svg) center / contain no-repeat; }
.wordmark .sim { color: var(--brand); }
.bar nav { display: flex; height: 56px; }
.bar nav a { display: flex; align-items: center; padding: 0 16px; font-family: var(--cd); text-transform: uppercase;
  letter-spacing: .16em; font-weight: 600; font-size: 15px; color: var(--dim); }
.bar nav a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.bar nav a.disabled, .bar .wordmark.disabled, .bar .stepper a.disabled, .crumb a.disabled { pointer-events: none; opacity: .35; }
.grow { flex-grow: 1; }
.page { max-width: 1400px; margin: 0 auto; padding: 24px 32px 48px; }
h1 { font-family: var(--cd); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 40px; margin: 6px 0 8px; }
.lbl { font-family: var(--cd); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 600; color: var(--dim); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.panel { background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 16px 18px; margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 8px; }
.row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input { background: #0D1526; color: var(--text); border: 1px solid var(--line-strong); padding: 6px 8px; font-family: var(--mono); font-size: 13px; }
button { font-family: var(--cd); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 14px;
  height: 34px; padding: 0 18px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; }
button.primary { background: var(--accent); color: #041016; border-color: var(--accent); }
button.danger { color: var(--fail); border-color: rgba(255,90,78,.45); }
.clock { font-size: 44px; line-height: 1.1; margin: 4px 0 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 13px; }
.kv span:nth-child(odd) { color: var(--dim); }
#map { background: rgba(8,13,24,.82); border: 1px solid var(--line); display: block; }
.legend { font-size: 11px; margin-top: 6px; }
.events { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; max-height: 400px; overflow: auto; }
.events li { padding: 4px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.events li .t { color: var(--dim); width: 64px; flex: none; text-align: right; }
.events li.condition .label { color: var(--fault); }
.events li.mode .label { color: var(--accent); }
.lines { list-style: none; padding: 0; margin: 8px 0 0; }
.lines li { display: grid; grid-template-columns: 22px 60px minmax(360px, 1fr) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); align-items: baseline; }
.lines .kw { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.lines .kw.given { color: var(--fault); } .lines .kw.then { color: var(--pass); }
.lines .mark { text-align: center; } .lines .mark.pass { color: var(--pass); } .lines .mark.fail { color: var(--fail); }
.lines .actual { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.verdict { font-family: var(--cd); text-transform: uppercase; letter-spacing: .12em; font-size: 28px; font-weight: 700; margin-top: 14px; }
.verdict.PASSED { color: var(--pass); } .verdict.FAILED { color: var(--fail); } .verdict.TEST_ERROR { color: var(--error); }

/* chips */
.chip { font-family: var(--cd); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding: 2px 8px; border: 1px solid; white-space: nowrap; }
.chip.pass { color: var(--pass); border-color: rgba(61,220,151,.4); } .chip.fail { color: var(--fail); border-color: rgba(255,90,78,.45); }
.chip.error { color: var(--error); border-color: rgba(217,72,107,.45); } .chip.inconclusive { color: var(--inconclusive); border-color: rgba(255,178,63,.45); }
.chip.notrun { color: var(--muted); border-color: rgba(155,165,175,.4); }
.flag { cursor: help; font-size: .9em; }
a.namelink { color: var(--accent); text-decoration: none; } a.namelink:hover { color: #8FEBFF; text-decoration: underline; text-underline-offset: 3px; }
a.namelink .ext { font-family: var(--mono); font-size: .7em; font-weight: 400; letter-spacing: 0; margin-left: 4px; vertical-align: .15em; }
.chip.disabled { color: var(--muted); border-color: rgba(155,165,175,.25); border-style: dashed; opacity: .7; }
.reqcard.disabled { cursor: help; opacity: .45; position: relative; } .reqcard.disabled .id { color: var(--muted); }
.reqcard.disabled:hover { opacity: .8; }
.reqcard.disabled .popup { display: none; position: absolute; right: 0; top: calc(100% - 6px); z-index: 5; width: 360px; padding: 12px 14px; background: rgba(8,14,26,.97); border: 1px solid rgba(155,165,175,.35); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 13px; color: var(--text); line-height: 1.5; cursor: default; }
.reqcard.disabled:hover .popup { display: block; }
.meter .seg.disabled { background: transparent; border: 1px dashed var(--notrun); opacity: .35; cursor: help; }
.meter-labels .disabled { opacity: .4; cursor: help; }
.small { font-size: 11px; } .accent { color: var(--accent); }
select { background: #0D1526; color: var(--text); border: 1px solid var(--line-strong); padding: 5px 8px; font-family: var(--mono); font-size: 13px; }
.filters label.check { flex-direction: row; align-items: center; gap: 6px; }

/* requirements: master–detail */
.master-detail { display: grid; grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); gap: 16px; }
.reqlist .group { margin: 14px 0 6px; } .reqlist .group:first-child { margin-top: 0; }
.req { display: grid; grid-template-columns: 10px 92px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px; border-top: 1px solid var(--line); }
.req.selected { background: rgba(92,225,255,.08); box-shadow: inset 2px 0 0 var(--accent); }
.req .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.req .id { font-size: 12px; color: var(--muted); white-space: nowrap; } .req.selected .id { color: var(--accent); }
.dot { width: 8px; height: 8px; display: inline-block; } .dot.green { background: var(--pass); } .dot.red { background: var(--fail); }
.dot.yellow { background: var(--inconclusive); } .dot.gray { background: var(--notrun); }
.detail-head { display: flex; align-items: center; gap: 12px; }
.reqtext { font-size: 15px; line-height: 1.5; margin: 8px 0 14px; }
details.scenario { border-top: 1px solid var(--line); padding: 6px 0; }
details.scenario summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 4px 0; }
details.scenario summary .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
details.scenario summary .links { display: flex; gap: 14px; white-space: nowrap; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
details.scenario summary .links a { color: var(--accent); text-decoration: none; } details.scenario summary .links a:hover { text-decoration: underline; }
details.scenario summary::-webkit-details-marker { display: none; }
details.scenario .lines { margin-left: 8px; }

/* runs */
.runs-table { padding: 0; }
.runs-head, .runrow { display: grid; grid-template-columns: 36px 180px 150px 190px 110px 1fr; gap: 14px; align-items: center; padding: 8px 16px; }
.runs-head { font-size: 12px; border-bottom: 1px solid var(--line); }
.runrow { border-top: 1px solid var(--line); min-height: 48px; box-shadow: inset 2px 0 0 var(--notrun); }
.runrow.passed { box-shadow: inset 2px 0 0 var(--pass); } .runrow.failed { box-shadow: inset 2px 0 0 var(--fail); }
.runrow.test-error { box-shadow: inset 2px 0 0 var(--error); } .runrow.open { background: rgba(92,225,255,.05); }
.runrow .when { border-bottom: 1px solid rgba(92,225,255,.5); }
.chev { width: 24px; height: 24px; padding: 0; font-size: 11px; font-family: var(--mono); letter-spacing: 0; }
.result { display: flex; align-items: center; gap: 12px; }
.scenlist { padding: 4px 16px 12px 66px; background: rgba(92,225,255,.03); border-top: 1px solid rgba(210,220,230,.05); }
.scen { display: flex; align-items: center; gap: 14px; height: 30px; border-bottom: 1px solid rgba(210,220,230,.05); font-size: 12px; }
.scen .mono:first-child { min-width: 200px; }

/* ---------------------------------------------------------------- chrome shared by the flow screens (DEMO-UX §5) */
.bar .sep { width: 1px; height: 20px; background: var(--line-strong); }
.bar .progsel select { padding: 4px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.bar .rig { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .08em; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--pass); display: inline-block; }
.crumb { font-size: 12px; letter-spacing: .14em; margin-top: 14px; }
.crumb a { color: var(--dim); } .crumb .sl { color: #4A5563; margin: 0 8px; } .crumb .here { color: var(--text); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper .step { display: inline-flex; align-items: center; gap: 8px; }
.stepper .box { width: 20px; height: 20px; border: 1px solid; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.stepper .name { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-family: var(--cd); }
.stepper .done .box, .stepper .done .name { color: var(--pass); border-color: var(--pass); }
.stepper .now .box { color: var(--accent); border-color: var(--accent); } .stepper .now .name { color: var(--text); }
.stepper .todo .box, .stepper .todo .name { color: var(--notrun); border-color: var(--notrun); }
.stepper .dash { width: 28px; height: 1px; background: rgba(210,220,230,.25); }
.flow { min-height: calc(100vh - 56px); display: flex; flex-direction: column; }
.flow-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 48px; }
.flow-head h1 { font-size: 44px; margin: 8px 0 0; }
.flow-head .sub { color: var(--muted); font-size: 15px; margin-top: 8px; }
.flow-head .right { margin-top: 40px; }
.flow-body { flex-grow: 1; padding: 0 48px; }
.flow-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 14px 32px; border-top: 1px solid var(--line); background: rgba(7,11,20,.55); font-size: 13px; color: var(--muted); margin-top: 24px; }
.keycap { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--cd); }
.keycap kbd { border: 1px solid var(--line-strong); padding: 2px 6px; font-size: 11px; color: var(--text); background: rgba(8,13,24,.8); }
button.big { height: 54px; padding: 0 40px; font-size: 20px; letter-spacing: .18em; }
button.big.primary { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
button.wide { width: 100%; height: 48px; margin-top: 10px; font-size: 15px; }
button.wide.primary { height: 52px; font-size: 16px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.meter { display: inline-flex; gap: 4px; }
.meter .seg { display: inline-block; width: 46px; height: 10px; background: var(--notrun); opacity: .55; }
.meter .seg.green { background: var(--pass); opacity: 1; } .meter .seg.red { background: var(--fail); opacity: 1; }
.meter .seg.yellow { background: var(--inconclusive); opacity: 1; } .meter .seg.gray { background: transparent; border: 1px solid var(--notrun); }
.meter .seg.mark { outline: 2px solid var(--accent); outline-offset: 1px; }
.demo-tag { font-family: var(--mono); font-size: 11px; color: var(--fault); letter-spacing: .1em; }
.bignum { font-family: var(--mono); font-size: 56px; line-height: 1; } .bignum .of { color: var(--notrun); }

/* Programs (screen 01) */
.programs { display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 0 48px; flex-grow: 1; }
.carousel { position: relative; min-height: min(560px, calc(100vh - 340px)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.carousel .stage { position: relative; width: 100%; height: min(360px, calc(100vh - 540px)); display: flex; align-items: center; justify-content: center; }
.carousel .side { position: absolute; top: 50%; transform: translateY(-50%); opacity: .35; cursor: pointer; text-align: center; width: 260px; }
.carousel .side.left { left: 0; } .carousel .side.right { right: 0; }
.carousel .side .name { font-family: var(--cd); font-size: 28px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.carousel .side svg { width: 160px; height: 120px; }
.carousel .centre svg { width: 360px; height: 260px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.carousel .title { font-family: var(--cd); font-size: 72px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; line-height: 1; }
.carousel .role { color: var(--muted); font-size: 15px; margin-top: 10px; }
.carousel .facts { display: flex; gap: 40px; margin-top: 28px; align-items: flex-start; }
.carousel .facts .v { font-family: var(--mono); font-size: 22px; margin-top: 6px; display: flex; align-items: center; gap: 14px; }
.carousel .facts .v .of { color: var(--notrun); }
.index { padding-top: 40px; }
.index .item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 16px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.index .item.active { background: rgba(92,225,255,.06); box-shadow: inset 2px 0 0 var(--accent); }
.index .item .n { font-family: var(--mono); font-size: 11px; color: var(--dim); padding-top: 6px; } .index .item.active .n { color: var(--accent); }
.index .item .name { font-family: var(--cd); font-size: 24px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.index .item .vendor { color: var(--muted); font-size: 13px; margin-top: 2px; }
.index .item .st { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .08em; }

/* Program status (screen 02) */
.status-page { display: grid; grid-template-columns: 1fr 420px; flex-grow: 1; }
.status-main { padding: 0 48px 24px; }
.status-side { border-left: 1px solid var(--line); background: rgba(7,11,20,.45); padding: 24px 32px; }
.status-main h1 { display: flex; align-items: baseline; gap: 24px; } .status-main h1 small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 17px; color: var(--muted); }
.verified-row { display: flex; align-items: center; gap: 40px; margin: 10px 0 28px; }
.meter.labelled { flex-direction: column; align-items: stretch; gap: 0; }
.meter-labels { display: flex; gap: 4px; margin-top: 8px; } .meter-labels span { width: 70px; font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: left; }
.meter-labels span.red { color: var(--fail); }
.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.block { background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 20px 24px; cursor: pointer; min-height: 146px; display: flex; flex-direction: column; }
.block.active { border-color: rgba(92,225,255,.6); box-shadow: 0 0 0 4px rgba(92,225,255,.06); }
.block .head { display: flex; align-items: center; justify-content: space-between; }
.block .name { font-family: var(--cd); font-size: 26px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.block .text { color: var(--muted); font-size: 14px; margin-top: 6px; }
.block .foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.block .foot .meter .seg { width: 34px; height: 8px; }
.reqcard { padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; }
.reqcard:first-of-type { border-top: 0; }
.reqcard .head { display: flex; justify-content: space-between; align-items: center; }
.reqcard .id { font-family: var(--mono); font-size: 13px; color: var(--muted); } .reqcard.active .id { color: var(--accent); } .reqcard.active { box-shadow: inset 2px 0 0 var(--accent); padding-left: 14px; }
.reqcard .text { font-size: 15px; margin-top: 8px; line-height: 1.45; }
.reqcard .st { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 8px; }
.side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }

/* Set up (screen 03) */
.setup-page { display: grid; grid-template-columns: 1fr 560px; gap: 32px; padding: 0 48px; flex-grow: 1; align-items: start; margin-top: -20px; }
.drone-draw { width: 100%; max-width: 1000px; height: clamp(360px, calc(100vh - 344px), 780px); display: block; }
.setup-right { min-width: 0; display: flex; flex-direction: column; }
.parts { display: flex; flex-direction: column; gap: 8px; margin-top: 0; max-height: calc(100vh - 340px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }   /* the list scrolls, not the page (2026-10-27): bar, crumb row, head, footer taken off the viewport */
.drone-draw .hit { cursor: pointer; }
.part { background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 12px 22px; position: relative; }
.part:hover, .part:focus-within { z-index: 2; }      /* a popup opened in a card paints over the cards below it (2026-10-27) */
.part.active { border-color: rgba(92,225,255,.6); }
.part .n { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-right: 10px; }
.part .name { font-family: var(--cd); font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.part .text { color: var(--muted); margin-top: 2px; font-size: 13px; }
.seg-ctl { display: inline-flex; margin-top: 10px; border: 1px solid var(--line-strong); }
.seg-ctl button { height: 30px; border: 0; border-right: 1px solid var(--line-strong); font-size: 13px; letter-spacing: .12em; color: var(--muted); }
.seg-ctl button:last-child { border-right: 0; }
.seg-ctl button.on { background: var(--accent); color: #041016; } .seg-ctl button.on.soft { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.part .note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.part .note .ok { color: var(--pass); }
/* Set up: the drone select above the cards, and one card per sensor with its carousel (2026-10-26) */
.drone-col { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.drone-pick { display: flex; justify-content: center; padding: 34px 0 6px; }
.config-pick { padding: 4px 2px 10px; }
.drone-row { display: flex; align-items: center; gap: 12px; }
.drone-row .drone-name { font-family: var(--cd); font-size: 24px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.drone-draw.slide-next { animation: slide-from-right .32s cubic-bezier(.2,.7,.2,1) both; }
.drone-draw.slide-prev { animation: slide-from-left .32s cubic-bezier(.2,.7,.2,1) both; }
.drone-stage { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; width: 100%; }
.drone-stage .arrow.side { display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 40px; padding: 0; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.drone-stage .arrow.side:hover { color: var(--accent); border-color: var(--accent); }
.drone-stage .arrow.side[hidden] { display: none; }
.config-row a { text-decoration: none; }
#picker .picker-box.config-box { width: 760px; }   /* after .picker-box in specificity, not in order */
#picker .config-box .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-strong); }
#picker .config-box .tabs button { padding: 6px 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12px; }
#picker .config-box .tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
#picker .config-box .config-text { margin: 0; max-height: 52vh; overflow: auto; padding: 10px 12px; background: rgba(4,8,16,.6); border: 1px solid var(--line); white-space: pre; line-height: 1.5; color: var(--text); }
#picker .config-box .wide-sm { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-family: var(--cd); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; margin-right: 8px; }
#picker .config-box .wide-sm.primary { background: var(--accent); color: #041016; }
/* the figures dialog (2026-10-28) */
#picker .picker-box.figs-box { width: 860px; }
#picker .figs-box .trust { color: var(--muted); font-size: 13px; }
#picker .figs-box .figs-scroll { max-height: 60vh; overflow: auto; }
.figs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.figs-table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 6px 10px; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: rgba(10,17,30,.98); }
.figs-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.figs-table tr.group td { padding: 12px 10px 6px; border-bottom: 0; }
.figs-table .fig .k { font-weight: 500; }
.figs-table .meaning { color: var(--muted); font-size: 12px; margin-top: 2px; max-width: 360px; line-height: 1.4; }
.figs-table .val { font-size: 15px; white-space: nowrap; }
.figs-table .sim { color: var(--muted); max-width: 240px; line-height: 1.4; }
.figs-table .badge { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
.figs-table .badge.vendor { color: var(--accent); border-color: rgba(92,225,255,.5); }
.figs-table .badge.derived { color: #8FEBFF; border-color: rgba(92,225,255,.3); }
.figs-table .badge.assumed { color: var(--fault); border-color: rgba(255,178,63,.5); }
.figs-table .badge.default { color: var(--muted); border-color: rgba(155,165,175,.4); }
.figs-table tr.assumed .val { color: var(--fault); }
.figs-table tr.default .val { color: var(--muted); }
.not-modelled { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.docs-row { display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.part.sensor .sensor-head { display: flex; align-items: center; gap: 10px; }
.part.sensor .sensor-head .mono { margin-left: 4px; }
.part.sensor .sensor-body { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 8px; }
.sensor-pic { display: block; box-sizing: border-box; border: 1px solid var(--line-strong); background: #0F1829; padding: 8px; object-fit: contain; }
.sensor-pic.empty { border-style: dashed; }
.part.sensor .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.part.sensor .pname { font-size: 14px; font-weight: 500; }
.part.sensor .links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.part.sensor .links a { text-decoration: none; }
.part.sensor .figs summary { cursor: pointer; color: var(--muted); }
.part.sensor .figs div { padding-left: 2px; }
.part.sensor .act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.part.sensor .act button { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-family: var(--cd); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.part.sensor .act .restore { height: 26px; font-size: 12px; color: var(--fault); border-color: rgba(255,178,63,.6); }
.part.sensor.experiment { border-color: rgba(255,178,63,.6); background: rgba(255,178,63,.06); }
.part.sensor .exp, .part .note.exp { color: var(--fault); }
/* the picker: a dialog over the page with the carousel (2026-10-26, evening) */
#picker { display: none; }
#picker.open { display: block; }
#picker .picker-backdrop { position: fixed; inset: 0; background: rgba(4,8,16,.7); z-index: 40; }
#picker .picker-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 22px 18px; background: rgba(10,17,30,.96); border: 1px solid rgba(92,225,255,.6); box-shadow: 0 30px 60px rgba(0,0,0,.7); z-index: 41; display: flex; flex-direction: column; gap: 10px; }
#picker .sensor-head { display: flex; align-items: center; gap: 10px; }
#picker .sensor-head .name { font-family: var(--cd); font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#picker .sensor-head .grow { flex-grow: 1; }
#picker .close, #picker .arrow { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
#picker .close { height: 28px; width: 28px; font-family: var(--mono); font-size: 16px; }
#picker .arrow { height: 36px; width: 36px; font-size: 14px; }
.carousel-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; margin-top: 6px; }
.carousel-stage { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.carousel-stage .centre .sensor-pic { border-color: rgba(92,225,255,.5); box-shadow: 0 30px 40px rgba(0,0,0,.6); position: relative; z-index: 1; }
.carousel-stage .side { position: absolute; top: 50%; transform: translateY(-50%) scale(.5); opacity: .35; }
/* browsing slides the pictures in from the side just stepped towards (`translate` is separate from the sides' transform) */
.carousel-stage.slide-next > * { animation: slide-from-right .32s cubic-bezier(.2,.7,.2,1) both; }
.carousel-stage.slide-prev > * { animation: slide-from-left .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes slide-from-right { from { translate: 150px 0; } to { translate: 0 0; } }
@keyframes slide-from-left { from { translate: -150px 0; } to { translate: 0 0; } }
.carousel-text.fade-in { animation: text-fade .28s ease-out both; }
@keyframes text-fade { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .carousel-stage.slide-next > *, .carousel-stage.slide-prev > *, .carousel-text.fade-in { animation: none; } }
.carousel-stage .side.left { left: 10px; } .carousel-stage .side.right { right: 10px; }
.carousel-text { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-top: 4px; }
.carousel-text .big { font-family: var(--cd); font-size: 28px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.carousel-text .figs-row { display: flex; gap: 28px; margin-top: 6px; }
.carousel-text .figs-row div { display: flex; flex-direction: column; gap: 2px; }
.carousel-text .figs-row .lbl { font-size: 10px; }
.carousel-text .figs-row .v { font-size: 18px; }
.carousel-text .links { display: flex; gap: 18px; margin-top: 4px; }
.carousel-text .links a { text-decoration: none; }
#picker .use { margin-top: 6px; }
#picker .use:disabled { opacity: .6; cursor: default; }
.warm { display: flex; align-items: center; gap: 16px; flex-grow: 1; }
.warm .info { position: relative; color: var(--muted); cursor: help; font-size: 13px; margin-left: 4px; letter-spacing: 0; text-transform: none; }
.warm .popup { display: none; position: absolute; left: 0; bottom: 24px; z-index: 6; width: 360px; padding: 12px 14px; text-align: left; letter-spacing: 0; text-transform: none; font-family: var(--sans); font-weight: 400; background: rgba(8,14,26,.97); border: 1px solid rgba(155,165,175,.35); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 13px; color: var(--text); line-height: 1.5; cursor: default; white-space: normal; }
.warm .info:hover .popup, .warm .info:focus .popup { display: block; }
.warm .track { flex-grow: 1; max-width: 360px; height: 4px; background: rgba(210,220,230,.12); position: relative; }
.warm .track .fill { position: absolute; left: 0; top: 0; height: 4px; background: var(--accent); }

/* Scenario picker (screen 04) */
.scen-stage { position: relative; display: flex; justify-content: center; align-items: stretch; margin-top: 8px; min-height: min(calc(100vh - 336px), 620px); }
.scen-card { position: relative; width: 860px; min-height: 100%; background: rgba(8,14,26,.84); backdrop-filter: blur(12px); border: 1px solid rgba(92,225,255,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 6px rgba(92,225,255,.05); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); padding: 32px 36px; display: flex; flex-direction: column; }
.scen-card .idx { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.scen-card h2 { font-family: var(--cd); font-size: 52px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 8px 0 0; line-height: 1; }
.scen-card .art { flex: 1 1 140px; margin-top: 8px; min-height: 140px; max-height: 300px; }
.scen-card .art svg { width: 100%; height: 100%; display: block; }
.scen-card .fault { flex: none; margin-top: 4px; } .scen-card .fault svg { width: 100%; height: 100%; display: block; }
.badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; flex: none; align-items: flex-start; }
.badge { font-family: var(--cd); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 5px 10px; color: var(--muted); }
.badge.fault { color: var(--fault); border-color: rgba(255,178,63,.5); }
.scen-side { position: absolute; top: 50px; width: 420px; height: calc(100% - 100px); background: var(--panel); border: 1px solid rgba(210,220,230,.08); opacity: .35; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; }
.scen-side.left { right: calc(50% + 460px); } .scen-side.right { left: calc(50% + 460px); }
.scen-side .name { font-family: var(--cd); font-size: 34px; font-weight: 600; text-transform: uppercase; margin-top: 6px; }
.scen-side .tag { font-family: var(--mono); font-size: 11px; color: var(--fault); }
.scen-lines { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; flex: none; }
.scen-lines b { color: var(--text); font-weight: 500; }

/* Results (screen 06) */
.results-page { display: grid; grid-template-columns: 1fr 460px; flex-grow: 1; }
.results-main { padding: 0 48px 32px; } .results-side { border-left: 1px solid var(--line); background: rgba(7,11,20,.45); padding: 24px 32px; }
.verdict-big { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.verdict-big .ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; }
.verdict-big .word { font-family: var(--cd); font-size: 96px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: .9; }
.verdict-big.PASSED { color: var(--pass); } .verdict-big.FAILED { color: var(--fail); } .verdict-big.TEST_ERROR { color: var(--error); } .verdict-big.INCONCLUSIVE, .verdict-big.INCOMPLETE { color: var(--inconclusive); }
.results-main .reqtext { color: var(--muted); font-size: 17px; margin: 14px 0 26px; }
.checks { width: 100%; border-collapse: collapse; table-layout: fixed; }
.checks th:nth-child(1) { width: 46%; } .checks th:nth-child(2) { width: 19%; } .checks th:nth-child(3) { width: 15%; } .checks th:nth-child(4) { width: 20%; }
.checks th { text-align: left; font-family: var(--cd); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--dim); padding: 10px 0; border-bottom: 1px solid var(--line-strong); }
.checks td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 15px; }
.checks td.meas { font-family: var(--mono); font-size: 22px; white-space: nowrap; padding-right: 16px; } .checks td.meas.txt { font-size: 15px; white-space: normal; max-width: 220px; }
.checks td.lim { font-family: var(--mono); font-size: 13px; color: var(--muted); max-width: 220px; padding-right: 16px; }
.checks .m { color: var(--pass); margin-right: 8px; } .checks .m.fail { color: var(--fail); } .checks .m.dim { color: var(--dim); }
.checks .bar-gauge { width: 180px; height: 6px; background: rgba(210,220,230,.1); position: relative; }
.checks .bar-gauge .fill { height: 6px; background: var(--pass); } .checks .bar-gauge.over .fill { background: var(--fail); }
.checks tr.measured td { color: var(--muted); } .checks tr.measured td.meas { font-size: 16px; }
.bench { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 22px; }
.bench .ok { color: var(--pass); } .bench .bad { color: var(--fail); }
.before-after { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.before-after .was { font-family: var(--mono); font-size: 28px; color: var(--notrun); text-decoration: line-through; }
.before-after .arrow { color: var(--muted); }
.side-block { border: 1px solid var(--line-strong); padding: 18px 20px; margin-top: 22px; }
.side-block.green { border-color: rgba(61,220,151,.5); } .side-block.red { border-color: rgba(255,90,78,.5); }
.side-block .name { font-family: var(--cd); font-size: 26px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.side-block .st { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
.checks .kw { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-right: 8px; } .checks .kw.then { color: var(--pass); }
.scen-lines .kw { font-family: var(--mono); font-size: 11px; margin-right: 6px; color: var(--dim); } .scen-lines .kw.given { color: var(--fault); } .scen-lines .kw.when { color: var(--accent); } .scen-lines .kw.then { color: var(--pass); }
.scen-given { margin: -8px 0 18px; padding: 10px 14px; border: 1px solid var(--line); background: rgba(8,13,24,.5); }
.scen-given .gline { font-size: 13px; padding: 3px 0; } .scen-given .m { display: inline-block; width: 18px; color: var(--pass); } .scen-given .m.fail { color: var(--fail); } .scen-given .m.dim { color: var(--dim); }
.scen-given .kw { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-right: 8px; } .scen-given .kw.given { color: var(--fault); } .scen-given .kw.when { color: var(--accent); }
.side-req { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(8,13,24,.5); }

/* motion: carousels slide in from the side they came from; pickers fade; highlights ease */
@keyframes slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.enter-right { animation: slide-in-right .32s ease-out both; } .enter-left { animation: slide-in-left .32s ease-out both; } .enter-fade { animation: fade-in .28s ease-out both; }
.carousel .side, .index .item, .block, .reqcard, .part, .scen-side, .seg-ctl button, .stepper .step, .req, .meter .seg { transition: background-color .24s ease-out, border-color .24s ease-out, box-shadow .24s ease-out, opacity .24s ease-out, color .24s ease-out; }
.carousel .side:hover, .scen-side:hover { opacity: .6; }

.flow-top { display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 44px; border-bottom: 1px solid var(--line); }
.flow-top .crumb { margin-top: 0; }
.flow-head h1 { margin-top: 14px; }
.flow-foot { position: sticky; bottom: 0; z-index: 3; backdrop-filter: blur(10px); }
.scen-summary { font-size: 14px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 10px; flex: none; }
.scen-summary .info { position: relative; color: var(--accent); cursor: help; font-size: 15px; }
.scen-summary .popup { display: none; position: absolute; left: 0; top: 24px; z-index: 5; width: 640px; padding: 14px 16px; background: rgba(8,14,26,.97); border: 1px solid rgba(92,225,255,.4); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 13px; color: var(--text); line-height: 1.6; cursor: default; }
.scen-summary .info:hover .popup, .scen-summary .info:focus .popup { display: block; }
.scen-summary .popup .kw { font-family: var(--mono); font-size: 11px; margin-right: 8px; color: var(--dim); } .scen-summary .popup .kw.given { color: var(--fault); } .scen-summary .popup .kw.when { color: var(--accent); } .scen-summary .popup .kw.then { color: var(--pass); }
.scen-card .art { flex: 1 1 200px; max-height: 340px; }

/* sliding carousels: items keep their element and move between positions */
.carousel .stage .item { position: absolute; left: 50%; top: 50%; width: 360px; text-align: center; transform: translate(-50%, -50%); transition: transform .36s ease-out, opacity .36s ease-out; cursor: pointer; }
.carousel .stage .item svg { width: 360px; height: 260px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.carousel .stage .item .name { display: none; font-family: var(--cd); font-size: 28px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.carousel .stage .item.pos-left { transform: translate(calc(-50% - 420px), -50%) scale(.45); opacity: .35; }
.carousel .stage .item.pos-right { transform: translate(calc(-50% + 420px), -50%) scale(.45); opacity: .35; }
.carousel .stage .item.pos-far { transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; }
.carousel .stage .item.pos-left .name, .carousel .stage .item.pos-right .name { display: block; font-size: 30px; line-height: 1.1; width: 360px; margin: 12px auto 0; }   /* the side cards are drones (Standard / a variant's label), 2026-10-26 */
.carousel .stage .item.pos-left:hover, .carousel .stage .item.pos-right:hover { opacity: .6; }
.carousel .below { text-align: center; }
.scen-stage { overflow: visible; }
.scen-stage .scen-card { position: absolute; left: 50%; top: 0; transform: translateX(-50%); transition: transform .36s ease-out, opacity .36s ease-out; }
.scen-stage .scen-card.pos-left { transform: translateX(calc(-50% - 700px)) scale(.6); opacity: .35; cursor: pointer; pointer-events: auto; }
.scen-stage .scen-card.pos-right { transform: translateX(calc(-50% + 700px)) scale(.6); opacity: .35; cursor: pointer; pointer-events: auto; }
.scen-stage .scen-card.pos-far { transform: translateX(-50%) scale(.4); opacity: 0; pointer-events: none; }
.scen-stage .scen-card.pos-left .info, .scen-stage .scen-card.pos-right .info { pointer-events: none; }
.scen-stage { height: calc(100vh - 318px); min-height: 480px; }
.scen-stage .scen-card { height: 100%; min-height: 0; overflow: hidden; }
.scen-card .art { min-height: 120px; }
.carousel .stage { height: clamp(250px, calc(100vh - 560px), 360px); }
.carousel .stage .item { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.carousel .stage .item svg { height: 100%; max-height: 260px; width: auto; }
.rname { font-family: var(--cd); font-size: 20px; font-weight: 600; letter-spacing: .03em; color: var(--text); }
.rname.big { font-size: 26px; margin: 6px 0 2px; }
.reqcard .rname { font-size: 17px; margin-top: 6px; line-height: 1.25; }
.reqcard .text.sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.req-head .sub { max-width: 900px; }
.results-main .reqtext .rname { font-size: 22px; display: inline-block; margin-bottom: 4px; }
.req-head h1 { font-size: 30px; margin-top: 4px; line-height: 1.15; }
.req-head .sub { font-size: 14px; margin-top: 4px; }
.req-head .lbl { margin-top: 10px; }
.scen-stage { height: calc(100vh - 412px); min-height: 440px; }
.scen-card .art { min-height: 100px; }

/* scenario screen: two-column header, narrower card with a two-column head */
.flow-head { align-items: flex-start; gap: 40px; }
.req-head { flex: 1 1 auto; min-width: 0; }
.req-head .sub { line-height: 1.5; margin-top: 8px; max-width: 820px; }
.req-side { flex: 0 0 340px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); background: rgba(8,13,24,.5); line-height: 1.6; }
.req-side .lbl { font-size: 11px; }
.req-side a { display: inline-block; margin-top: 2px; }
.scen-stage .scen-card { width: 760px; padding: 24px 30px; }
.scen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex: none; }
.scen-head h2 { font-size: 44px; margin: 0; }
.scen-right { text-align: right; flex: 0 0 300px; }
.scen-right .idx { margin-top: 6px; }
.scen-right .scen-summary { margin-top: 4px; justify-content: flex-end; font-size: 13px; line-height: 1.45; flex-wrap: wrap; }
.scen-right .popup { left: auto; right: 0; text-align: left; }
.scen-stage .scen-card.pos-left { transform: translateX(calc(-50% - 640px)) scale(.6); }
.scen-stage .scen-card.pos-right { transform: translateX(calc(-50% + 640px)) scale(.6); }
main.flow { overflow-x: clip; }   /* clip, not hidden: hidden made main a scroll box and broke the sticky footer (2026-10-12) */
.scen-stage { flex: 1 1 auto; height: auto; min-height: 360px; margin-bottom: 12px; }
.scen-stage .scen-card { top: 0; bottom: 0; height: auto; }
.scen-right .scen-summary { display: block; }
.scen-right .scen-summary .info { display: inline-block; margin-left: 6px; vertical-align: -1px; }
.flow-foot { margin-top: 0; }
.flow-foot { flex-wrap: nowrap; }
.flow-foot > #ref, .flow-foot > .mono.small.dim:first-child { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-foot > .grow { display: none; }
.flow-foot > label, .flow-foot > .keycap, .flow-foot > button { flex: none; }
.flow-foot > button.big { margin-left: 8px; }
.scen-right .standing { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.carousel .stage .item img { height: 100%; max-height: 300px; width: auto; max-width: 520px; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.carousel .stage .item.pos-centre img { animation: hover-drift 6s ease-in-out infinite; }
@keyframes hover-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Moving between screens (BUILD-LOG item 21): a short fade out, then the next screen fades in. */
body { transition: opacity .18s ease-out; }
body.leave { opacity: 0; pointer-events: none; }
body.arrive { animation: fade-in .22s ease-out both; }

/* Laptop and tablet widths, 1024–1400 px (UX review 2026-10-12, DEMO-UX §11 item 12, group B). Phone widths are
   not a goal (Beck, 2026-10-12). */
/* Program status: the main column may shrink below its content's width, so the side panel stays on screen
   (at 1280 px its "Next · set up the run" ended at 1394 px). The labelled meter shares the width it has. */
.status-page { grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px); }
.verified-row { flex-wrap: wrap; row-gap: 12px; }
.verified-row .meter.labelled { flex: 1 1 560px; min-width: 0; max-width: 740px; }   /* 560 px keeps "NAV-001" readable; narrower, the meter goes under the number */
.meter.labelled > .meter { display: flex; }
.meter.labelled > .meter .seg { flex: 1 1 0; width: auto !important; min-width: 0; }
.meter-labels span { flex: 1 1 0; width: auto; min-width: 0; white-space: nowrap; font-size: 10px; letter-spacing: -.02em; }
/* Programs: the carousel column may shrink; the index narrows on small screens */
.programs { grid-template-columns: minmax(0, 1fr) 300px; }
.carousel { overflow: hidden; }
@media (max-width: 1200px) { .programs { grid-template-columns: minmax(0, 1fr) 240px; padding: 0 28px; } .status-main { padding: 0 28px 24px; } .setup-page { grid-template-columns: minmax(0, 1fr) 480px; padding: 0 28px; } .flow-head { padding: 0 28px; } }
/* Every flow screen: the footer with the screen's main button stays at the bottom of the window, so the button is
   never below the fold (Set up's "Pick scenario →" was at 948 px on an 800 px window). */
.flow-foot { position: sticky; bottom: 0; z-index: 20; background: rgba(7,11,20,.92); backdrop-filter: blur(8px); }
/* Scenario footer: the reference note gets its own line instead of being cut to "– –"; on narrow windows the
   controls wrap so "Next · the run →" stays on screen (it ended at 1189 px on a 1024 px window). */
.flow-foot:has(> #ref) { flex-wrap: wrap; }
.flow-foot > #ref { flex: 1 0 100%; white-space: normal; }
@media (max-width: 1100px) { .flow-foot > button.big { margin-left: auto; } }
@media (max-width: 1200px) {
  .carousel .facts { flex-wrap: wrap; justify-content: center; gap: 16px 28px; max-width: 100%; }
  .carousel .facts .meter .seg { width: 30px; }
  .lines li { grid-template-columns: 22px 60px minmax(220px, 1fr) minmax(0, 1fr); }
}
/* Tablet portrait (768 px): the bar gives up the rig line and tightens its tabs; the Runs table drops to the
   columns that say what happened */
@media (max-width: 900px) {
  .bar { gap: 12px; padding: 0 16px; } .bar nav a { padding: 0 9px; font-size: 13px; } .bar .rig { display: none; }
  .bar .progsel { flex: 0 1 auto; min-width: 0; }
  .runs-head, .runrow { grid-template-columns: 30px 130px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .runs-head > :nth-child(5), .runrow > :nth-child(5) { display: none; }
}
@media (max-width: 900px) { .master-detail { grid-template-columns: minmax(0, 1fr); } .bar select { max-width: 160px; } }
@media (max-width: 1100px) { .bar .rig { display: none; } .bar .progsel > .dim { display: none; } }
.bar .rig, .bar .progsel { white-space: nowrap; }
/* Set up: why Hardware is not available is folded away (it holds commands and settings for whoever connects the
   board; UX review 2026-10-12, group C) */
.seg-ctl button.off { color: var(--dim); cursor: default; position: relative; }
.seg-ctl button.off .info { color: var(--muted); cursor: help; font-size: 13px; margin-left: 2px; }
.seg-ctl button.off .popup { display: none; position: absolute; left: 0; top: 34px; z-index: 6; width: 380px; padding: 12px 14px; text-align: left; letter-spacing: 0; text-transform: none; font-family: var(--sans); background: rgba(8,14,26,.97); border: 1px solid rgba(155,165,175,.35); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 13px; color: var(--text); line-height: 1.5; cursor: default; white-space: normal; }
.seg-ctl button.off .info:hover .popup, .seg-ctl button.off .info:focus .popup, .seg-ctl button.off:hover .popup { display: block; }

/* Set up on a narrow window (Beck 2026-10-28 11:24): the drone on top with its name and arrows, the configuration line
   and the cards below; the card list no longer scrolls inside itself — the page does */
@media (max-width: 1100px) {
  .setup-page { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
  .drone-col { width: 100%; }
  .drone-pick { padding: 10px 0 0; }
  .drone-draw { height: clamp(280px, 56vw, 480px); }
  .setup-right { min-width: 0; }
  .config-pick { padding: 0 2px 10px; }
  .parts { max-height: none; overflow: visible; padding-right: 0; }
  .flow-head h1 { font-size: 36px; }
  .flow-head .sub { font-size: 14px; }
  #picker .picker-box, #picker .picker-box.config-box, #picker .picker-box.figs-box { width: calc(100vw - 32px); }
}
@media (max-width: 700px) {
  .setup-page, .flow-head { padding: 0 16px; }
  .drone-stage { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; }
  .drone-stage .arrow.side { width: 32px; height: 40px; }
  .drone-row .drone-name { font-size: 20px; }
  .part { padding: 12px 14px; }
}

/* the drone's firmware by name, beside its name (compare columns, replay tiles, Runs · Side by side; 2026-11-03,
   Beck: no "Firmware" label) */
.fw-badge { display: inline-block; margin: 4px 0 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text);
  border: 1px solid var(--line-strong); padding: 1px 7px; white-space: nowrap; }
/* Runs · the two views (2026-11-03) */
.sbs-switch { display: inline-flex; margin: 4px 0 16px; border: 1px solid var(--line-strong); }
.sbs-switch button { border: 0; background: transparent; color: var(--muted); padding: 8px 16px; font-family: var(--cd); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.sbs-switch button.on { color: var(--bg); background: var(--accent); }
.sbs-item { display: grid; grid-template-columns: minmax(260px, 1.1fr) 2fr auto; gap: 18px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sbs-item .what .mono { font-size: 13px; } .sbs-item .what .t { margin-top: 3px; } .sbs-item .what .src { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sbs-drones { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.sbs-drone { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sbs-drone .fw-badge { margin: 0; }
.sbs-links { display: flex; flex-direction: column; gap: 6px; text-align: right; white-space: nowrap; }
.fit-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; list-style-position: inside; }
.fit-fold[open] > summary { color: var(--text); }

/* loading states (2026-11-03, Beck: nicer than a line of text): a title, what is being read, a thin sliding bar in
   the accent, and grey shapes where the content will appear */
.ld { padding: 44px 0 0; }
.ld-t { font-family: var(--cd); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; font-weight: 600; color: var(--text); }
.ld-s { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ld-bar { position: relative; height: 2px; max-width: 420px; margin-top: 14px; background: rgba(92,225,255,.12); overflow: hidden; }
.ld-bar i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(92,225,255,.55);
  animation: ld-slide 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ld-slide { to { left: 100%; } }
.ld-ghost { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.ld-ghost div { aspect-ratio: 16 / 9; }
.ld-rows div { height: 58px; margin-top: 8px; }
.ld-ghost div, .ld-rows div { border: 1px solid var(--line); background: linear-gradient(100deg, rgba(255,255,255,.015) 30%, rgba(92,225,255,.06) 50%, rgba(255,255,255,.015) 70%);
  background-size: 220% 100%; animation: ld-shine 1.8s linear infinite; }
.ld-rows { margin-top: 20px; }
@keyframes ld-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .ld-bar i { animation: none; left: 0; width: 100%; opacity: .4; } .ld-ghost div, .ld-rows div { animation: none; } }
/* the Set up screen's way back to where the user came from (2026-11-03) */
.flow-head .back-btn { margin-top: 14px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line-strong);
  font-family: var(--cd); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--text); text-decoration: none; white-space: nowrap; }
.flow-head .back-btn:hover { border-color: var(--accent); color: var(--accent); }