/* ============================================================
   AX-01 — pixel-art flight deck
   Design rules, enforced throughout:
     · no border-radius, no blur, no gradients in the UI layer
     · every measurement on a 4px grid
     · shadows are hard offsets, never soft
     · exactly two typefaces, exactly one accent + one signal
   ============================================================ */

:root {
  /* ink */
  --ink0:#070a14; --ink1:#0e1424; --ink2:#18213a; --ink3:#263355;
  --ink4:#4a5c8a; --ink5:#8fa2c9; --ink6:#d6e2f5; --ink7:#ffffff;
  /* flame */
  --hot0:#6e1d0b; --hot1:#c4400f; --hot2:#ff6b2c; --hot3:#ffa94d;
  --hot4:#ffd97d; --hot5:#fff3c4;
  /* signal */
  --sig:#37d6d0; --sig-d:#1a8a86; --go:#4fcf6b; --warn:#ffcc33; --alarm:#ef3f4a;

  --u:4px;                       /* the grid unit */
  --ui:'Silkscreen', ui-monospace, monospace;
  --body:'VT323', ui-monospace, 'Courier New', monospace;

  /* stepped corners — the pixel-panel silhouette */
  --notch: polygon(
    0 4px, 4px 4px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --notch2: polygon(
    0 2px, 2px 2px, 2px 0,
    calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  --drop: drop-shadow(6px 6px 0 rgba(0,0,0,.55));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink0);
  color: var(--ink6);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.45;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}

img, svg { image-rendering: pixelated; }

::selection { background: var(--hot2); color: var(--ink0); }

:focus-visible {
  outline: 3px solid var(--sig);
  outline-offset: 3px;
}

/* chunky scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink0); }
::-webkit-scrollbar-thumb { background: var(--ink3); border: 3px solid var(--ink0); }
::-webkit-scrollbar-thumb:hover { background: var(--hot2); }

/* ---------- typography ------------------------------------ */
h1 { font-family: var(--ui); font-weight: 700; margin: 0; line-height: 1.1; }
h2, h3 { font-family: var(--body); font-weight: 400; margin: 0; line-height: 1.15; }

h1 {
  font-size: clamp(30px, 5.4vw, 66px);
  letter-spacing: .01em;
  color: var(--ink7);
  text-shadow: 4px 4px 0 var(--hot1), 8px 8px 0 rgba(0,0,0,.5);
}
h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: .01em;
  color: var(--ink7);
  text-shadow: 3px 3px 0 rgba(0,0,0,.6);
  margin-bottom: calc(var(--u) * 4);
}

.stamp {
  font-family: var(--ui); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink5);
  margin: 0 0 calc(var(--u) * 3);
}
.stamp.go { color: var(--go); margin-top: calc(var(--u) * 3); }

.body { margin: 0 0 calc(var(--u) * 4); color: var(--ink6); }
.body.dim { color: var(--ink5); }
.lede { font-size: clamp(19px, 2.3vw, 26px); color: var(--ink5); margin: calc(var(--u)*4) 0 calc(var(--u)*7); max-width: 34ch; }
.eyebrow { font-family: var(--ui); font-size: 10px; letter-spacing: .2em; color: var(--hot3); margin: 0 0 calc(var(--u)*5); }
.hint { font-family: var(--ui); font-size: 9px; letter-spacing: .12em; color: var(--ink4); margin: calc(var(--u)*3) 0 0; }
.aside { font-size: 18px; color: var(--ink4); border-left: 3px solid var(--ink3); padding-left: calc(var(--u)*3); margin: calc(var(--u)*5) 0 0; }
.blink { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.ticks { list-style: none; padding: 0; margin: 0 0 calc(var(--u)*2); }
.ticks li { position: relative; padding-left: calc(var(--u)*6); margin-bottom: var(--u); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 8px; height: 4px; background: var(--hot2);
}

/* ---------- world layer ----------------------------------- */
#stage {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--ink0);
}

#flash {
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  background: var(--hot5); opacity: 0;
  transition: opacity .5s steps(6);
}
#flash.on { opacity: .85; transition: none; }

/* ---------- reticle cursor -------------------------------- */
#reticle {
  position: fixed; z-index: 80; pointer-events: none;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  opacity: 0; transition: opacity .12s steps(3);
}
#reticle::before, #reticle::after {
  content: ''; position: absolute; inset: 0;
  border: 3px solid var(--sig);
}
#reticle::before { clip-path: polygon(0 0,40% 0,40% 3px,3px 3px,3px 40%,0 40%); }
#reticle::after  { clip-path: polygon(100% 100%,60% 100%,60% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 60%,100% 60%); }
#reticle.on { opacity: 1; }
#reticle-verb {
  position: absolute; left: 34px; top: 6px; white-space: nowrap;
  font-family: var(--ui); font-size: 9px; letter-spacing: .14em;
  color: var(--ink0); background: var(--sig); padding: 3px 5px;
}
@media (pointer: coarse) { #reticle { display: none; } }

/* ---------- HUD ------------------------------------------- */
#hud-top {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: calc(var(--u)*3);
  padding: calc(var(--u)*3) calc(var(--u)*4);
  pointer-events: none;
}
#hud-top > * { pointer-events: auto; }

.patch { display: block; width: 44px; height: 44px; flex: 0 0 auto; }
.patch svg { width: 100%; height: 100%; display: block; }
.patch .p-ring  { fill: var(--hot2); }
.patch .p-field { fill: var(--ink1); }
.patch .p-ship  { fill: var(--ink6); }
.patch .p-fire  { fill: var(--hot4); }
.patch .p-star  { fill: var(--sig); }
.patch:hover .p-ring { fill: var(--sig); }

.idcard { line-height: 1.15; }
.callsign { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--ink7); margin: 0; }
.role { font-family: var(--ui); font-size: 9px; letter-spacing: .12em; color: var(--ink4); margin: 3px 0 0; }

.hud-tools { margin-left: auto; display: flex; gap: var(--u); }
.tool {
  font-family: var(--ui); font-size: 9px; letter-spacing: .1em;
  color: var(--ink5); background: var(--ink1);
  border: 0; padding: 7px 9px; cursor: pointer;
  clip-path: var(--notch2);
  box-shadow: inset 0 0 0 2px var(--ink3);
  display: inline-flex; align-items: center; gap: 5px;
}
.tool:hover { color: var(--ink7); box-shadow: inset 0 0 0 2px var(--sig); }
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { color: var(--ink0); background: var(--sig); box-shadow: none; }
.led { width: 6px; height: 6px; background: var(--ink4); display: inline-block; }
.led:not([data-off]) { background: var(--go); }

/* altitude rail */
#rail {
  position: fixed; z-index: 40; right: calc(var(--u)*4); top: 50%;
  transform: translateY(-50%);
}
#rail ol { list-style: none; margin: 0; padding: 0; }
#rail li { margin: 0; }
#rail button {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 5px 0;
  font-family: var(--ui); font-size: 9px; letter-spacing: .1em;
  color: var(--ink4); width: 100%; justify-content: flex-end;
}
#rail .r-label { opacity: 0; transition: opacity .15s steps(3); }
#rail button:hover .r-label, #rail li.is-here .r-label { opacity: 1; }
#rail button:hover { color: var(--ink7); }
#rail .r-tick { width: 14px; height: 3px; background: var(--ink3); flex: 0 0 auto; }
#rail button:hover .r-tick { background: var(--sig); width: 22px; }
#rail li.is-here .r-tick { background: var(--hot2); width: 26px; }
#rail li.is-here button { color: var(--hot3); }

/* telemetry */
#telem {
  position: fixed; z-index: 40; left: calc(var(--u)*4); bottom: calc(var(--u)*4);
  font-family: var(--ui); font-size: 9px; letter-spacing: .08em;
  background: rgba(7,10,20,.72); padding: calc(var(--u)*3);
  clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink3);
  min-width: 150px;
}
.trow { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.tk { color: var(--ink4); width: 26px; }
.tv { color: var(--hot3); font-variant-numeric: tabular-nums; margin-left: auto; }
.tu { color: var(--ink4); width: 26px; text-align: right; }
.bar { height: 5px; background: var(--ink2); margin: 8px 0 6px; }
.bar i { display: block; height: 100%; width: 0; background: var(--hot2); }
.cam { color: var(--sig); margin: 0; font-size: 8px; letter-spacing: .14em; }

/* ---------- flight / acts --------------------------------- */
#flight { position: relative; z-index: 10; }

/* Each act is a tall scroll runway; its content is PINNED to the
   middle of the viewport for the whole runway, so the world moves
   past while the panel stays put and readable. */
.act {
  min-height: calc(var(--vh, 1) * 100vh);
  display: flex; align-items: flex-start;
  padding: 0 calc(var(--u)*4);
}
.act > .panel, .act > .hero, .act > .cardline {
  position: sticky; top: 50vh; transform: translateY(-50%);
  margin-left: auto;
  max-height: 84vh; overflow-y: auto;
  opacity: var(--vis, 1);
}
.act > [style*="--vis: 0"] { pointer-events: none; }

.hero { max-width: 620px; text-align: left; margin-right: clamp(16px, 5vw, 112px); }

.panel {
  position: relative;
  background: rgba(14,20,36,.93);
  padding: calc(var(--u)*7);
  max-width: 48ch; width: 100%;
  clip-path: var(--notch);
  box-shadow: inset 0 0 0 3px var(--ink3);
  filter: var(--drop);
  margin-right: clamp(16px, 5vw, 112px);
}
.panel-wide { max-width: 74ch; }
.panel.center { text-align: center; }
.shout { font-family: var(--ui); font-size: clamp(24px, 5vw, 46px); color: var(--hot3); }

/* ---------- launch control -------------------------------- */
.launch {
  position: relative; display: block; width: 260px; max-width: 100%;
  border: 0; padding: 0; background: none; cursor: pointer;
  font-family: var(--ui);
}
.launch-cover {
  position: absolute; inset: -4px;
  background: repeating-linear-gradient(90deg,
    var(--ink2) 0 8px, var(--ink3) 8px 16px);
  box-shadow: inset 0 0 0 3px var(--ink4);
  clip-path: var(--notch2);
  display: grid; place-items: center;
  transform-origin: top center; transition: transform .25s steps(5), opacity .25s steps(5);
  z-index: 3;
}
.launch-cover::after {
  content: 'LIFT COVER';
  font-family: var(--ui); font-size: 10px; letter-spacing: .2em; color: var(--warn);
}
.launch.armed .launch-cover { transform: rotateX(-105deg); opacity: 0; }
.launch-face {
  position: relative; display: block; overflow: hidden;
  background: var(--hot0); color: var(--hot4);
  padding: 18px 14px; clip-path: var(--notch);
  box-shadow: inset 0 0 0 3px var(--hot1);
  transition: transform .06s steps(2);
}
.launch.armed .launch-face { background: var(--hot1); color: var(--hot5); box-shadow: inset 0 0 0 3px var(--hot3); }
.launch:active .launch-face { transform: translate(3px, 3px); }
.launch-label { position: relative; z-index: 2; font-size: 12px; letter-spacing: .16em; }
.launch-fill {
  position: absolute; inset: 0; width: 0; background: var(--hot2); z-index: 1;
}
.launch.done { pointer-events: none; opacity: .35; }

/* ---------- MAX Q ----------------------------------------- */
.panel-alarm { box-shadow: inset 0 0 0 3px var(--alarm); }
.panel-alarm.is-open { box-shadow: inset 0 0 0 3px var(--ink3); }
.alarm-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-size: 10px; letter-spacing: .14em;
  color: var(--alarm); margin-bottom: calc(var(--u)*4);
}
.panel-alarm.is-open .alarm-head { color: var(--go); }
.alarm-dot { width: 10px; height: 10px; background: var(--alarm); animation: pulse .82s steps(1) infinite; }
.panel-alarm.is-open .alarm-dot { background: var(--go); animation: none; }
@keyframes pulse { 50% { opacity: .15; } }

/* ---------- buttons --------------------------------------- */
.btn {
  display: inline-block; font-family: var(--ui); font-size: 10px; letter-spacing: .12em;
  color: var(--ink6); background: var(--ink2); border: 0;
  padding: 10px 14px; cursor: pointer; text-decoration: none;
  clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink3);
  transition: transform .06s steps(2);
}
.btn:hover { color: var(--ink0); background: var(--sig); box-shadow: none; }
.btn:active { transform: translate(2px, 2px); }
.btn-alarm { color: var(--ink0); background: var(--alarm); box-shadow: none; }
.btn-alarm:hover { background: var(--hot3); }
.btn-go { color: var(--ink0); background: var(--go); box-shadow: none; }
.btn-go:hover { background: var(--sig); }
.btn-reentry { margin-top: calc(var(--u)*7); width: 100%; }

/* ---------- beacons (experience) -------------------------- */
.beacons { display: flex; flex-direction: column; gap: var(--u); }
.beacon { background: var(--ink1); clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink2); }
.beacon[data-open="true"] { box-shadow: inset 0 0 0 2px var(--hot2); }
.beacon-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 14px;
  font-family: var(--ui); font-size: 10px; letter-spacing: .08em; color: var(--ink6);
  text-align: left;
}
.beacon-head:hover { color: var(--ink7); background: var(--ink2); }
.beacon-dot { width: 8px; height: 8px; background: var(--ink4); flex: 0 0 auto; }
.beacon[data-open="true"] .beacon-dot { background: var(--hot2); }
.beacon-org { flex: 1 1 auto; }
.beacon-when { color: var(--ink4); font-size: 9px; }
.beacon-caret { color: var(--hot2); font-size: 13px; }
.beacon[data-open="true"] .beacon-caret { transform: rotate(45deg); }
.beacon-body { display: none; padding: 0 14px 16px 32px; }
.beacon[data-open="true"] .beacon-body { display: block; }
.beacon-role { font-family: var(--ui); font-size: 9px; letter-spacing: .1em; color: var(--hot3); margin: 0 0 calc(var(--u)*3); }

/* ---------- skill chips + graph --------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: calc(var(--u)*3) 0 0; }
.chip {
  font-family: var(--ui); font-size: 9px; letter-spacing: .08em;
  color: var(--sig); background: transparent; cursor: pointer;
  border: 0; padding: 5px 7px; box-shadow: inset 0 0 0 2px var(--sig-d);
  clip-path: var(--notch2);
}
.chip:hover { color: var(--ink0); background: var(--sig); box-shadow: none; }
body[data-skill] .chip { opacity: .28; }
body[data-skill] .chip.is-lit { opacity: 1; color: var(--ink0); background: var(--hot2); box-shadow: none; }

/* ---------- payload manifest + dossier --------------------- */
.shells { display: flex; flex-wrap: wrap; gap: var(--u); margin: calc(var(--u)*4) 0; }
.shell {
  font-family: var(--ui); font-size: 9px; letter-spacing: .08em;
  color: var(--ink5); background: var(--ink1); border: 0; padding: 8px 10px;
  cursor: pointer; clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink3);
}
.shell:hover { color: var(--ink7); }
.shell.is-on { color: var(--ink0); background: var(--hot2); box-shadow: none; }

.manifest { display: flex; flex-direction: column; gap: var(--u); }
.mf { background: var(--ink1); clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink2); }
.mf[hidden] { display: none; }
.mf.is-open { box-shadow: inset 0 0 0 2px var(--sig); }
.mf-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 13px 12px; text-align: left;
  font-family: var(--ui); font-size: 9px; letter-spacing: .04em; color: var(--ink6);
  gap: 9px;
}
.mf-head::after {
  content: 'OPEN'; margin-left: auto; flex: 0 0 auto;
  font-size: 7px; letter-spacing: .14em; color: var(--ink4);
}
.mf-head:hover { background: var(--ink2); color: var(--ink7); }
.mf-head:hover::after { color: var(--sig); }
.mf.is-open .mf-head::after { content: 'ON SCREEN'; color: var(--sig); }
.mf-id { color: var(--sig); font-size: 8px; flex: 0 0 auto; }
.mf-name { flex: 1 1 auto; min-width: 0; }
.mf-orbit { color: var(--ink4); font-size: 7px; flex: 0 0 auto; }

/* Hidden while flying — the canvas dossier shows it instead. Visible
   in DOSSIER mode, where it becomes the plain-text fallback. */
.mf-body { display: none; padding: 0 14px 16px 14px; }
.mf-body dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 12px; margin: 0; }
.mf-body dt { font-family: var(--ui); font-size: 8px; letter-spacing: .12em; color: var(--ink4); padding-top: 6px; }
.mf-body dd { margin: 0; color: var(--ink6); }

.sat-links { display: flex; gap: var(--u); margin: calc(var(--u)*4) 0 0; }

body[data-skill] .mf { opacity: .3; }
body[data-skill] .mf.is-lit { opacity: 1; box-shadow: inset 0 0 0 2px var(--hot2); }
body[data-skill] .beacon { opacity: .3; }
body[data-skill] .beacon.is-lit { opacity: 1; box-shadow: inset 0 0 0 2px var(--hot2); }

/* --- the dossier that replaces the manifest ---------------- */
/* PROJECTS keeps a narrow column so the orbital field has a stage. */
#payload-panel { max-width: 44ch; }
.panel.is-dossier { max-width: 44ch; }
#pay-dossier[hidden] { display: none; }
.dos-top { display: flex; gap: calc(var(--u)*4); align-items: flex-start; margin-bottom: calc(var(--u)*5); }
.dos-patch { width: 88px; height: 88px; flex: 0 0 auto; }
.dos-patch svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dos-id { min-width: 0; }
.dos-id h2 { margin: 4px 0 0; font-size: clamp(24px, 2.8vw, 32px); }
.dos-sid { font-family: var(--ui); font-size: 9px; letter-spacing: .16em; color: var(--sig); margin: 8px 0 0; }
#dos-body dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 12px; margin: 0 0 calc(var(--u)*4); }
#dos-body dt { font-family: var(--ui); font-size: 8px; letter-spacing: .12em; color: var(--ink4); padding-top: 6px; }
#dos-body dd { margin: 0; color: var(--ink6); }
.dos-close { margin-top: calc(var(--u)*6); width: 100%; }

/* --- mission patch ----------------------------------------- */
.patch-ring  { fill: var(--hot2); }
.patch-edge  { fill: #141a2e; }
.patch-emblem{ fill: var(--ink6); }
.patch-star  { fill: var(--sig); }
.patch-band  { fill: var(--hot3); }

/* ---------- Kármán card ----------------------------------- */
/* Sits in the content column like every other act so it never
   lands on top of the vehicle. */
.cardline { text-align: center; max-width: 56ch; width: 100%; margin-right: clamp(16px, 5vw, 112px); }
.karman-num { font-family: var(--ui); font-weight: 700; font-size: clamp(40px, 11vw, 110px); color: var(--ink7); margin: 0; text-shadow: 5px 5px 0 var(--sig-d); }
.karman-say { font-family: var(--ui); font-size: clamp(12px, 2.4vw, 20px); letter-spacing: .3em; color: var(--sig); margin: calc(var(--u)*5) 0 0; }
.karman-sub { font-size: 18px; color: var(--ink4); margin: calc(var(--u)*4) 0 0; letter-spacing: .04em; }

/* ---------- deep / pale blue dot -------------------------- */
.dot-line { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--ink4); margin: calc(var(--u)*6) 0 0; }
.pbd { width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--sig); cursor: pointer; font-size: 12px; line-height: 1; }
.pbd:hover { color: var(--ink7); }

/* ---------- transmission ---------------------------------- */
.tx-card {
  display: flex; align-items: center; gap: calc(var(--u)*3); flex-wrap: wrap;
  margin-top: calc(var(--u)*5); padding: calc(var(--u)*4);
  background: var(--ink0); box-shadow: inset 0 0 0 2px var(--ink3); clip-path: var(--notch2);
}
.tx-lbl { font-family: var(--ui); font-size: 9px; letter-spacing: .14em; color: var(--ink4); }
.tx-addr {
  flex: 1 1 200px; font-family: var(--body); font-size: 22px; line-height: 1;
  color: var(--sig); text-decoration: none; word-break: break-all;
}
.tx-addr:hover, .tx-addr:focus-visible { color: var(--hot3); }
.tx-copy { flex: 0 0 auto; }
.tx-status { font-family: var(--ui); font-size: 9px; letter-spacing: .12em; color: var(--go); margin: calc(var(--u)*4) 0 0; min-height: 14px; }

.freqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--u); margin: calc(var(--u)*7) 0 0; }
.freq {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ui); font-size: 9px; letter-spacing: .1em;
  color: var(--ink5); text-decoration: none; padding: 11px 12px;
  background: var(--ink1); clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink3);
}
.freq span { color: var(--ink4); }
.freq:hover { color: var(--ink0); background: var(--hot2); box-shadow: none; }
.freq:hover span { color: var(--hot0); }

/* ---------- boot ------------------------------------------ */
#boot {
  position: fixed; inset: 0; z-index: 90; background: var(--ink0);
  display: grid; place-items: center;
  transition: opacity .4s steps(5);
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { width: min(300px, 80vw); }
.boot-title { font-family: var(--ui); font-size: 11px; letter-spacing: .3em; color: var(--hot3); margin: 0 0 calc(var(--u)*5); }
.checklist { list-style: none; margin: 0 0 calc(var(--u)*5); padding: 0; font-family: var(--ui); font-size: 10px; letter-spacing: .1em; }
.checklist li { display: flex; justify-content: space-between; color: var(--ink3); padding: 5px 0; }
.checklist li::after { content: '····'; color: var(--ink3); }
.checklist li.ok { color: var(--ink6); }
.checklist li.ok::after { content: 'GO'; color: var(--go); }
.boot-crew { font-family: var(--ui); font-size: 10px; letter-spacing: .1em; color: var(--ink4); margin: 0; display: flex; justify-content: space-between; }
.crew-slot { font-family: var(--ui); font-size: 10px; letter-spacing: .1em; color: var(--warn); background: none; border: 0; cursor: pointer; padding: 0; }
.crew-slot:hover { color: var(--ink7); }
.crew-slot.filled { color: var(--go); cursor: default; }

/* ---------- console --------------------------------------- */
#console {
  position: fixed; z-index: 60; left: calc(var(--u)*4); right: calc(var(--u)*4);
  bottom: calc(var(--u)*4); max-width: 560px; max-height: 46vh;
  background: rgba(7,10,20,.96); clip-path: var(--notch2);
  box-shadow: inset 0 0 0 2px var(--sig-d);
  display: flex; flex-direction: column;
}
#console[hidden] { display: none; }
.con-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ui); font-size: 9px; letter-spacing: .18em;
  color: var(--sig); padding: 10px 12px; box-shadow: inset 0 -2px 0 var(--ink2);
}
.con-head em { font-style: normal; color: var(--ink4); letter-spacing: .06em; }
.con-head button { background: none; border: 0; color: var(--ink4); font-size: 18px; cursor: pointer; line-height: 1; }
.con-head button:hover { color: var(--hot2); }
#con-lines { list-style: none; margin: 0; padding: 10px 12px; overflow-y: auto; flex: 1 1 auto; font-size: 18px; color: var(--ink5); }
#con-lines li { margin-bottom: 2px; }
#con-lines .t { color: var(--ink3); margin-right: 8px; }
#con-lines .hi { color: var(--hot3); }
#con-lines .ok { color: var(--go); }
.con-input { display: flex; align-items: center; gap: 8px; padding: 8px 12px; box-shadow: inset 0 2px 0 var(--ink2); }
.con-input .prompt { color: var(--hot2); }
#con-cmd { flex: 1 1 auto; background: none; border: 0; color: var(--sig); font-family: var(--body); font-size: 19px; outline: none; }

/* ---------- toast ----------------------------------------- */
#toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--u)*6);
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--u); align-items: center;
  pointer-events: none;
}
.toast {
  font-family: var(--ui); font-size: 9px; letter-spacing: .12em;
  color: var(--ink0); background: var(--hot3); padding: 8px 12px;
  clip-path: var(--notch2);
  animation: toast 3.4s steps(8) forwards;
}
.toast.sig { background: var(--sig); }
@keyframes toast {
  0% { opacity: 0; transform: translateY(8px); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* ---------- DOSSIER (the escape hatch) -------------------- */
body.dossier #stage,
body.dossier #rail,
body.dossier #telem,
body.dossier #reticle { display: none; }
body.dossier { background: var(--ink0); }
body.dossier .act { min-height: 0; padding: calc(var(--u)*10) calc(var(--u)*5); display: block; }
body.dossier .panel, body.dossier .hero, body.dossier .cardline {
  position: static; transform: none; opacity: 1 !important; pointer-events: auto !important;
  max-height: none; overflow: visible;
  max-width: 78ch; margin: 0 auto; filter: none;
  background: transparent; box-shadow: none; clip-path: none; padding: 0;
}
body.dossier .beacon-body, body.dossier .mf-body { display: block !important; }
body.dossier .launch, body.dossier .shells,
body.dossier #pay-dossier { display: none; }
body.dossier #pay-list { display: block !important; }
body.dossier .panel.is-dossier { max-width: 78ch; }
body.dossier h1 { text-shadow: none; }
body.dossier .karman-num { font-size: 32px; text-shadow: none; }

/* ---------- responsive ------------------------------------ */
@media (max-width: 900px) {
  body { font-size: 19px; }
  #rail { display: none; }

  /* A pinned panel that is 85% of a phone screen is a scroll trap: the
     page can only be moved from the sliver of background around it.
     On mobile the panels flow normally and the world animates behind. */
  .act {
    display: block;
    min-height: calc(var(--vh, 1) * 58vh);
    padding: 11vh calc(var(--u)*3);
  }
  /* the hero starts at the top of the document, so it needs to clear
     the fixed HUD rather than sit under it */
  .act-hero { padding-top: 20vh; }
  .act > .panel, .act > .hero, .act > .cardline {
    position: static;
    transform: none;
    max-height: none;
    overflow: visible;
    max-width: none;
    margin: 0;
  }
  /* full-width panels sit over the vehicle here, so they go nearly opaque */
  .panel { padding: calc(var(--u)*5); margin-right: 0; max-width: none;
           background: rgba(14,20,36,.975); }
  .panel-wide { max-width: none; }
  .mf-body dl, #dos-body dl { grid-template-columns: 1fr; gap: 2px; }
  .mf-body dt, #dos-body dt { padding-top: 8px; }
  .dos-patch { width: 64px; height: 64px; }

  /* Touch targets. The pixel look wants small type; fingers do not. */
  .chip, .shell, .con-cmds button {
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .tool { min-height: 40px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .freq { min-height: 50px; }
  .mf-head, .beacon-head { min-height: 54px; }
  #query-clear { min-height: 34px; }

  /* Notches and home indicators — the page is viewport-fit=cover. */
  #hud-top {
    padding-top: max(calc(var(--u)*3), env(safe-area-inset-top));
    padding-left: max(calc(var(--u)*4), env(safe-area-inset-left));
    padding-right: max(calc(var(--u)*4), env(safe-area-inset-right));
  }
  /* Full-width panels mean a four-row instrument block sits on top of
     the copy. Keep altitude and mission time; drop the rest. */
  #telem {
    left: max(calc(var(--u)*3), env(safe-area-inset-left));
    bottom: max(calc(var(--u)*3), env(safe-area-inset-bottom));
    transform: scale(.8); transform-origin: bottom left;
    min-width: 0; padding: calc(var(--u)*2) calc(var(--u)*3);
  }
  #telem .trow:nth-of-type(2),
  #telem .trow:nth-of-type(3),
  #telem .cam { display: none; }
  #telem .bar { margin: 6px 0 0; }
  #console {
    left: max(calc(var(--u)*3), env(safe-area-inset-left));
    right: max(calc(var(--u)*3), env(safe-area-inset-right));
    bottom: max(calc(var(--u)*3), env(safe-area-inset-bottom));
    max-height: 54vh;
  }
  #toast { bottom: calc(env(safe-area-inset-bottom) + calc(var(--u)*14)); }
  #query-bar { top: calc(env(safe-area-inset-top) + 62px); }
}

@media (max-width: 620px) {
  .idcard { display: none; }          /* patch alone identifies the site */
  .hud-tools { margin-left: auto; }
  .tool { padding: 7px 7px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink, .alarm-dot, .toast { animation: none !important; }
  #flash { display: none; }
}

/* ---------- hit routing ------------------------------------
   Empty page area must fall through to the canvas so the birds,
   balloons and meteors behind the content stay clickable.      */
#flight, .act { pointer-events: none; }
.panel, .hero, .cardline, .act a, .act button,
.act input, .act textarea, .act label { pointer-events: auto; }

/* ============================================================
   CAMERA SIDES — the text column changes sides between acts and
   the vehicle flies opposite it, so the frame appears to swing.
   ============================================================ */
.act[data-side="left"] > .panel,
.act[data-side="left"] > .hero,
.act[data-side="left"] > .cardline {
  margin-left: clamp(16px, 4vw, 64px);
  margin-right: auto;
}
.act[data-side="center"] > .panel,
.act[data-side="center"] > .cardline {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   BOOT — the loading bar is a rocket climbing a launch rail.
   ============================================================ */
.boot-stage {
  position: relative; height: 128px;
  margin: 0 0 calc(var(--u)*6);
}
.boot-guide {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom, var(--ink2) 0 4px, transparent 4px 10px);
}
.boot-pct {
  position: absolute; right: 0; bottom: 0;
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em;
  color: var(--hot3);
}
.boot-ship {
  position: absolute; left: 50%; bottom: 0;
  width: 45px; height: 80px;
  transform: translateX(-50%);
  transition: bottom .45s steps(7);
}
.boot-ship svg { width: 100%; height: 100%; display: block; }
.b-hot   { fill: var(--hot2); }
.b-hull  { fill: var(--ink6); }
.b-glass { fill: var(--sig); }
.b-band  { fill: var(--hot1); }
.b-bell  { fill: var(--ink4); }
.boot-flame {
  position: absolute; left: 50%; top: 100%; width: 8px; height: 10px;
  transform: translateX(-50%);
  background: var(--hot3);
  box-shadow: 0 4px 0 -1px var(--hot1);
  animation: flame .11s steps(2) infinite;
}
@keyframes flame {
  50% { height: 17px; background: var(--hot4); box-shadow: 0 6px 0 -1px var(--hot2); }
}
#boot.launched .boot-ship {
  transition: bottom .5s cubic-bezier(.5,0,1,1), opacity .4s steps(4);
  bottom: 190% !important; opacity: 0;
}

@media (max-width: 900px) {
  /* full-width panels: no side swing, and the boot rail shrinks */
  .act[data-side] > .panel,
  .act[data-side] > .hero,
  .act[data-side] > .cardline { margin-left: 0; margin-right: 0; }
  .boot-stage { height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-flame, .boot-ship { animation: none; transition: none; }
}

/* ---------- console affordances ---------------------------- */
.badge {
  min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-grid; place-items: center;
  background: var(--hot2); color: var(--ink0);
  font-family: var(--ui); font-size: 8px; line-height: 1;
}
.badge[hidden] { display: none; }
.tool[aria-expanded="true"] .badge { background: var(--ink0); color: var(--sig); }

.con-cmds {
  display: flex; flex-wrap: wrap; gap: var(--u);
  padding: 8px 12px; box-shadow: inset 0 2px 0 var(--ink2);
}
.con-cmds button {
  font-family: var(--ui); font-size: 8px; letter-spacing: .1em;
  color: var(--sig); background: transparent; border: 0; cursor: pointer;
  padding: 5px 7px; box-shadow: inset 0 0 0 2px var(--sig-d);
  clip-path: var(--notch2);
}
.con-cmds button:hover { color: var(--ink0); background: var(--sig); box-shadow: none; }
#con-lines .kind { color: var(--ink3); margin-right: 6px; }
#con-lines .you  { color: var(--sig); }
#con-cmd::placeholder { color: var(--ink3); }

/* ---------- research act ----------------------------------- */
.papers { display: flex; flex-direction: column; gap: calc(var(--u)*3); }
.paper { background: var(--ink1); padding: calc(var(--u)*3); clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--ink2); }
.paper-venue { font-family: var(--ui); font-size: 8px; letter-spacing: .16em; color: var(--sig); margin: 0 0 calc(var(--u)*2); }
.paper h3 { font-size: 21px; line-height: 1.25; color: var(--ink7); margin: 0 0 calc(var(--u)*3); }
.paper .body { margin-bottom: 0; }
.paper .sat-links { margin-top: calc(var(--u)*3); }

/* ---------- skill cross-reference bar ---------------------- */
#query-bar {
  position: fixed; z-index: 45; top: calc(var(--u)*16); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u)*3);
  background: var(--ink0); padding: 8px 10px;
  clip-path: var(--notch2); box-shadow: inset 0 0 0 2px var(--hot2);
  font-family: var(--ui); font-size: 9px; letter-spacing: .12em; color: var(--hot3);
}
#query-bar[hidden] { display: none; }
#query-clear {
  font-family: var(--ui); font-size: 8px; letter-spacing: .12em;
  color: var(--ink0); background: var(--hot2); border: 0; padding: 5px 7px; cursor: pointer;
}
#query-clear:hover { background: var(--sig); }

/* ---------- keyword list · DOSSIER mode only --------------- */
.kw-strip { display: none; }
body.dossier .kw-strip { display: block; margin-top: calc(var(--u)*8); }
body.dossier .kw-strip h3 { font-size: 26px; color: var(--ink7); margin: 0 0 calc(var(--u)*4); }
body.dossier .kw-strip .body { margin-bottom: calc(var(--u)*2); }
body.dossier #query-bar { display: none; }

/* console links · code-generated hrefs only */
#con-lines li { white-space: pre-wrap; }
.con-link { color: var(--sig); text-decoration: underline; text-underline-offset: 3px; }
.con-link:hover { color: var(--ink0); background: var(--sig); text-decoration: none; }