/* Burn-In, prototype 03. Carbon chassis, phosphor beam, vellum ink. */

@font-face {
  font-family: "Martian Mono Local";
  src: url("/prototype/burn-in/assets/fonts/MartianMono[wght]-latin.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --carbon: #0B0C0E;
  --vellum: #EDE6D6;
  --phosphor: #FFB454;
  --arm: #FF3B2F;
  --graticule: #242B31;
  --well: #060708;
  --plate: #101215;
  --hairline: 1px solid var(--graticule);
  --ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--carbon);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--vellum);
  font-family: "Martian Mono Local", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The single GL canvas floats above the chassis panels (it only paints
   inside scissored scope rects, transparent elsewhere) and never
   intercepts input. Header and on-glass overlays sit above it. */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
}

.no-webgl #gl { display: none; }

/* main and footer stay static (no stacking context) so positioned
   descendants like the on-glass stamps can rise above the canvas */
body > .skip-link {
  position: relative;
  z-index: 20;
}

/* DOM that lives on the glass itself must render above the beam */
.scope > .stamp,
.scope > .stencil {
  z-index: 3;
}

/* ---------- shared machinery ---------- */

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--carbon);
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  z-index: 20;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--phosphor); color: var(--carbon); }

a { color: var(--vellum); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: 0.06em; }

.section-label {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--phosphor);
}

.section-body {
  margin: 0.7rem 0 0;
  max-width: 44ch;
  color: var(--vellum);
  opacity: 0.85;
}

/* Engraved silkscreen headings */
h2 {
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-wrap: balance;
}
h3 {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* ---------- scope surfaces ---------- */

.scope {
  position: relative;
  overflow: hidden;
  border: var(--hairline);
  border-radius: 6px;
  background-color: var(--well);
  background-image:
    linear-gradient(var(--graticule) 1px, transparent 1px),
    linear-gradient(90deg, var(--graticule) 1px, transparent 1px);
  background-size: 12.5% 25%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 6px 24px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(255, 180, 84, 0.03);
}

.scope-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 5px rgba(255, 180, 84, 0.55));
}

/* When the engine is live the canvas behind the DOM draws every scope */
.gl-live .scope {
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.gl-live .scope-fallback { display: none; }

/* ---------- LCD wells and readouts ---------- */

.well {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.4rem 0.7rem;
  background: var(--well);
  border: var(--hairline);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(237, 230, 214, 0.05);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(237, 230, 214, 0.6);
}

.well b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(255, 180, 84, 0.45);
  letter-spacing: 0.06em;
}

.well--field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.85rem;
}
.well--field span { font-size: 0.62rem; letter-spacing: 0.28em; }
.well--field b { font-size: 0.8rem; }

.well--armed { border-color: var(--arm); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 59, 47, 0.18); }
.well--armed b { color: var(--vellum); }
.well--armed span::after { content: " · PENDING"; color: var(--arm); }

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: text-bottom;
  background: var(--phosphor);
  box-shadow: 0 0 6px rgba(255, 180, 84, 0.6);
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink { 50% { opacity: 0; } }

/* ---------- LEDs ---------- */

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(237, 230, 214, 0.25), rgba(36, 43, 49, 0.9) 70%);
  border: 1px solid rgba(36, 43, 49, 0.9);
  flex: none;
}
.led.is-live,
.led--live {
  background: radial-gradient(circle at 35% 35%, #ffe2b0, var(--phosphor) 60%, rgba(255, 180, 84, 0.2));
  box-shadow: 0 0 8px rgba(255, 180, 84, 0.7);
}
.led.is-armed,
.led--armed {
  background: radial-gradient(circle at 35% 35%, #ffb1aa, var(--arm) 60%, rgba(255, 59, 47, 0.2));
  box-shadow: 0 0 8px rgba(255, 59, 47, 0.7);
}
.led--standby {
  background: radial-gradient(circle at 35% 35%, #ffe2b0, var(--phosphor) 60%, rgba(255, 180, 84, 0.2));
  box-shadow: 0 0 8px rgba(255, 180, 84, 0.7);
  animation: led-breathe 3.4s ease-in-out infinite;
}

@keyframes led-breathe { 50% { opacity: 0.35; box-shadow: 0 0 2px rgba(255, 180, 84, 0.25); } }

/* When the engine is live, channel LEDs warm up with their trace:
   panel.mjs writes --led-live from each channel's resolve value.
   .led--armed (CH4, always 0 resolve) and .led--standby keep their own
   fixed looks; scoping to .gl-live leaves no-JS and no-WebGL paths and
   the .is-live fallback class untouched */
.gl-live .led:not(.led--armed):not(.led--standby) {
  opacity: calc(0.45 + var(--led-live, 0) * 0.55);
  box-shadow: 0 0 calc(var(--led-live, 0) * 10px) rgba(255, 180, 84, calc(var(--led-live, 0) * 0.7));
}

/* ---------- riveted plates ---------- */

[data-plate] {
  position: relative;
  background:
    radial-gradient(circle 3px at 12px 12px, #2c333a 0 2px, rgba(0, 0, 0, 0.7) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 12px) 12px, #2c333a 0 2px, rgba(0, 0, 0, 0.7) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at 12px calc(100% - 12px), #2c333a 0 2px, rgba(0, 0, 0, 0.7) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 12px) calc(100% - 12px), #2c333a 0 2px, rgba(0, 0, 0, 0.7) 2px 3px, transparent 3px),
    linear-gradient(180deg, #14171b, var(--plate));
  border: var(--hairline);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(237, 230, 214, 0.05) inset, 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.2rem);
  background: rgba(11, 12, 14, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: var(--hairline);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.wordmark {
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  color: var(--vellum);
}

.site-header nav {
  display: none;
  gap: 1.1rem;
  margin-left: auto;
}
.site-header nav a { text-decoration: none; opacity: 0.75; }
.site-header nav a:hover { opacity: 1; color: var(--phosphor); }

.header-proto {
  margin-left: auto;
  text-decoration: none;
  color: var(--phosphor);
  border: 1px solid var(--graticule);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
}
.header-proto:hover { border-color: var(--phosphor); }

@media (min-width: 720px) {
  .site-header nav { display: flex; }
  .header-proto { margin-left: 0; }
}

/* ---------- hero / power-on ---------- */

.power-on {
  /* fills the first screen minus the sticky header so the hint stays above the fold */
  min-height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  padding: clamp(0.8rem, 2.5vw, 2rem) clamp(0.8rem, 4vw, 2.2rem) 1.2rem;
  gap: 1.4rem;
}

.hero-bezel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
  border-radius: 12px;
  border: 1px solid #1a1f24;
  background: linear-gradient(180deg, #14171b, #0d0f12);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.06), 0 14px 40px rgba(0, 0, 0, 0.6);
}

/* corner screws: each pseudo strip draws a slotted dot at its top and bottom */
.hero-bezel::before,
.hero-bezel::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 5px;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.6px), rgba(6, 7, 8, 0.9) calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)) 50% 0 / 5px 5px no-repeat,
    radial-gradient(circle 2.5px at 50% 50%, #3a424b 0 0.8px, #1c2127 0.8px 2.2px, rgba(0, 0, 0, 0.8) 2.2px 2.5px, transparent 2.5px) 50% 0 / 5px 5px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.6px), rgba(6, 7, 8, 0.9) calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)) 50% 100% / 5px 5px no-repeat,
    radial-gradient(circle 2.5px at 50% 50%, #3a424b 0 0.8px, #1c2127 0.8px 2.2px, rgba(0, 0, 0, 0.8) 2.2px 2.5px, transparent 2.5px) 50% 100% / 5px 5px no-repeat;
}
.hero-bezel::before { left: 7px; }
.hero-bezel::after { right: 7px; }

/* beam spill: the beam head warms the chassis around the tube; app.mjs
   drives --beam-x and --beam-heat per frame, so with no JS, no WebGL,
   or reduced motion the vars stay unset and this paints nothing */
.beam-spill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(46% 30% at calc(var(--beam-x, 0.5) * 100%) 52%, rgba(255, 180, 84, 0.10), transparent 70%);
  opacity: var(--beam-heat, 0);
}

/* readout wells under the tube pick up faint beam warmth; the custom
   properties cascade down from .hero-bezel */
.hero-bezel .hero-readouts .well {
  border-color: color-mix(in srgb, var(--phosphor) calc(var(--beam-heat, 0) * 35%), var(--graticule));
}

.hero-scope {
  flex: 1;
  min-height: max(38svh, 300px);
  border-radius: 8px;
}

/* glass recess overlay; z-index 3 keeps it above the fixed GL canvas */
.hero-scope::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(2, 3, 4, 0.9),
    inset 0 6px 24px rgba(0, 0, 0, 0.85),
    inset 0 -2px 10px rgba(0, 0, 0, 0.6);
}

.hero-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  margin: 0;
  text-align: center;
  font-size: clamp(1.7rem, 7.5vw, 4.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor);
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.5), 0 0 3px rgba(255, 243, 220, 0.8);
}

/* The styled DOM tagline carries the hero whenever the beam cannot;
   the hero's SVG fallback would double-render it, so it never shows */
.hero-scope .scope-fallback { display: none; }

/* The beam draws the tagline when GL is live; keep the DOM copy for readers */
.gl-live .hero-tagline {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.hero-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-panel {
  display: grid;
  gap: 1.2rem;
}

.model-plate {
  padding: 0.9rem 1.2rem;
  display: inline-grid;
  gap: 0.35rem;
  justify-self: start;
}

.plate-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: rgba(237, 230, 214, 0.75);
}

.plate-model {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: rgba(237, 230, 214, 0.55);
}
.plate-model b {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--vellum);
}
.plate-rev { color: var(--phosphor); font-size: 0.68rem; }

.lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
}
.w-uncertain {
  font-style: normal;
  font-weight: 200;
  opacity: 0.85;
  display: inline-block;
  animation: jitter 0.18s steps(2) infinite;
}
.w-working { font-weight: 700; }

@keyframes jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0.4px, -0.3px); }
  100% { transform: translate(-0.3px, 0.3px); }
}

.knob-rack {
  display: flex;
  gap: 2rem;
  justify-self: start;
  padding: 0.8rem 1.2rem;
  background: var(--well);
  border: var(--hairline);
  border-radius: 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

.knob-unit { display: grid; justify-items: center; gap: 0.45rem; }

.knob {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: grab;
  /* 11 detent ticks across the pointer's travel arc: --knob-rot runs
     -135deg to 135deg, so ticks span 223.5deg to 496.5deg (27deg apart),
     with wider, brighter endpoint ticks as min/max stops */
  background:
    conic-gradient(from 223.5deg,
      rgba(237, 230, 214, 0.38) 0 3deg, transparent 3deg 27.75deg,
      rgba(237, 230, 214, 0.14) 27.75deg 29.25deg, transparent 29.25deg 54.75deg,
      rgba(237, 230, 214, 0.14) 54.75deg 56.25deg, transparent 56.25deg 81.75deg,
      rgba(237, 230, 214, 0.14) 81.75deg 83.25deg, transparent 83.25deg 108.75deg,
      rgba(237, 230, 214, 0.14) 108.75deg 110.25deg, transparent 110.25deg 135.75deg,
      rgba(237, 230, 214, 0.14) 135.75deg 137.25deg, transparent 137.25deg 162.75deg,
      rgba(237, 230, 214, 0.14) 162.75deg 164.25deg, transparent 164.25deg 189.75deg,
      rgba(237, 230, 214, 0.14) 189.75deg 191.25deg, transparent 191.25deg 216.75deg,
      rgba(237, 230, 214, 0.14) 216.75deg 218.25deg, transparent 218.25deg 243.75deg,
      rgba(237, 230, 214, 0.14) 243.75deg 245.25deg, transparent 245.25deg 270deg,
      rgba(237, 230, 214, 0.38) 270deg 273deg, transparent 273deg);
  border: 1px solid var(--graticule);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  touch-action: none;
}
.knob:active { cursor: grabbing; }

/* machined skirt between the tick ring and the cap */
.knob::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1c2127, #0a0c0e);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.1);
}

.knob-cap {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  /* opaque center over a knurl fin ring over the base cap shading */
  background:
    radial-gradient(circle at 32% 28%, #262c33, #14171b 55%, rgba(10, 11, 13, 0) 74%),
    repeating-conic-gradient(rgba(237, 230, 214, 0.1) 0 3deg, transparent 3deg 9deg),
    radial-gradient(circle at 32% 28%, #262c33, #14171b 55%, #0a0b0d);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.12), inset 0 -3px 8px rgba(0, 0, 0, 0.8);
  transform: rotate(var(--knob-rot, 0deg));
  transition: transform 240ms var(--ease-panel);
}
.knob-cap::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--phosphor);
  box-shadow: 0 0 6px rgba(255, 180, 84, 0.7);
}

.knob-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(237, 230, 214, 0.7);
}

.hero-hint {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(237, 230, 214, 0.45);
}

@media (min-width: 820px) {
  .hero-panel {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }
  .hero-hint { grid-column: 1 / -1; }
}

/* short desktop viewports (1440x900, 1366x768): tighten the hero so the
   phosphor hint line lands above the fold */
@media (max-height: 960px) {
  .power-on { gap: 1rem; padding-bottom: 0.6rem; }
  .hero-scope { min-height: max(34svh, 280px); }
}

/* ---------- content rail ---------- */

/* full-bleed sections share one 1200px rail; .cal-plate (900px) and
   .transmit-panel (720px) taper narrower on purpose */
.sweep-intro,
.channel,
.standby-intro,
.bays,
.dut-rail {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* ---------- sweep channels ---------- */

.sweep {
  padding: clamp(3rem, 8vw, 6rem) clamp(0.8rem, 4vw, 2.2rem);
  display: grid;
  gap: 1.6rem;
  border-top: var(--hairline);
}

.sweep-intro { margin-bottom: 0.8rem; }

.channel {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: var(--hairline);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 23, 27, 0.85), rgba(13, 15, 18, 0.85));
}

.channel-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ch-id {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--phosphor);
  border: 1px solid var(--graticule);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
}
.channel-head .led { margin-left: auto; }

.channel-scope {
  height: clamp(120px, 24vw, 180px);
  width: 100%;
}

.channel-meta {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  justify-items: start;
}
.channel-copy {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.85;
  max-width: 46ch;
}

.channel--shipped { border-color: rgba(255, 59, 47, 0.5); }
.channel--shipped .ch-id { color: var(--arm); border-color: rgba(255, 59, 47, 0.5); }

.stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--arm);
  border-radius: 3px;
  color: var(--arm);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-shadow: 0 0 8px rgba(255, 59, 47, 0.4);
  background: rgba(11, 12, 14, 0.55);
}

@media (min-width: 820px) {
  .channel {
    grid-template-columns: 180px 1fr 260px;
    align-items: center;
  }
  .channel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .channel-head .led { margin-left: 0; }
}

/* ---------- device under test ---------- */

.dut {
  padding: clamp(3rem, 8vw, 6rem) clamp(0.8rem, 4vw, 2.2rem);
  border-top: var(--hairline);
}

.dut-rail {
  display: grid;
  gap: 1.6rem;
}

.dut-panel { padding: clamp(1.2rem, 3vw, 2rem); }

.dut-wells {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 720px) {
  .dut-wells { grid-template-columns: 1fr 1fr; }
}

.dut-side {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
}
.dut-scope { height: auto; min-height: 150px; }
.dut-caption {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(237, 230, 214, 0.5);
}

@media (min-width: 960px) {
  .dut-rail { grid-template-columns: 1.4fr 1fr; }
}

/* ---------- standby queue ---------- */

.standby {
  padding: clamp(3rem, 8vw, 6rem) clamp(0.8rem, 4vw, 2.2rem);
  display: grid;
  gap: 1.6rem;
  border-top: var(--hairline);
}

.bays { display: grid; gap: 1rem; }
@media (min-width: 900px) { .bays { grid-template-columns: repeat(3, 1fr); } }

.bay {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.8rem;
  padding: 1rem;
  border: var(--hairline);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 18, 21, 0.85), rgba(11, 12, 14, 0.85));
}

.bay-scope { height: clamp(110px, 22vw, 150px); }

.stencil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: rgba(237, 230, 214, 0.3);
  white-space: nowrap;
}

.bay-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: 0.7rem;
  row-gap: 0.3rem;
}
.bay-meta h3 { font-size: 0.8rem; }
.bay-copy {
  grid-column: 2;
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.75;
}

/* ---------- calibration plate ---------- */

.calibration {
  padding: clamp(3rem, 8vw, 6rem) clamp(0.8rem, 4vw, 2.2rem);
  border-top: var(--hairline);
}

.cal-plate {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.cal-plate h2 {
  border-bottom: var(--hairline);
  padding-bottom: 0.9rem;
}

.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.cal-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding: 1.1rem 0;
  border-bottom: var(--hairline);
}
.cal-list li:last-child { border-bottom: none; padding-bottom: 0; }

.cal-index {
  margin: 0;
  grid-row: 1 / span 3;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--phosphor);
  letter-spacing: 0.1em;
  padding-top: 0.15rem;
}
.cal-list h3 { font-size: 0.82rem; }
.cal-copy { margin: 0; font-size: 0.8rem; opacity: 0.8; grid-column: 2; }
.cal-stamp {
  margin: 0.2rem 0 0;
  grid-column: 2;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(237, 230, 214, 0.45);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cal-check {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--phosphor);
  border-radius: 50%;
  color: var(--phosphor);
  font-size: 0.7rem;
}

/* ---------- transmit ---------- */

.transmit {
  padding: clamp(3rem, 8vw, 6rem) clamp(0.8rem, 4vw, 2.2rem) clamp(4rem, 9vw, 7rem);
  border-top: var(--hairline);
}

.transmit-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.4rem;
}

/* live instrument strip above the switch; the engine draws the armed
   dashed hold trace into it like any other channel scope */
.transmit-scope {
  width: 100%;
  height: clamp(70px, 10vw, 110px);
  margin-block: 1.5rem;
}

.transmit-switch-unit { padding: 0.4rem; }

.transmit-switch {
  position: relative;
  width: 130px;
  height: 170px;
  border: 1px solid var(--graticule);
  border-radius: 10px;
  background: linear-gradient(180deg, #14171b, #0c0e10);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
  cursor: not-allowed;
}

.switch-body {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 26px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 13px;
  background: linear-gradient(180deg, #3a424b, #171b1f 60%, #0a0b0d);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(237, 230, 214, 0.2);
}

.safety-cover {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: end center;
  padding-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--arm);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 59, 47, 0.16) 0 10px, rgba(255, 59, 47, 0.05) 10px 20px),
    rgba(255, 59, 47, 0.07);
  box-shadow: 0 0 14px rgba(255, 59, 47, 0.2);
  z-index: 1;
}

.safety-engraving {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--arm);
  text-shadow: 0 0 6px rgba(255, 59, 47, 0.5);
  writing-mode: initial;
}

/* refusal rattle when the safed switch is pressed; html.js-anim is only
   added when motion is allowed, and the reduced-motion block below also
   kills the animation outright */
html.js-anim .transmit-switch.is-refused .safety-cover {
  animation: refuse-rattle 260ms var(--ease-panel);
  box-shadow: 0 0 22px rgba(255, 59, 47, 0.45);
}

@keyframes refuse-rattle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px); }
  55% { transform: translateX(1.5px); }
  80% { transform: translateX(-1px); }
}

.transmit-note {
  margin: 0;
  max-width: 44ch;
  font-size: 0.82rem;
  opacity: 0.85;
}

/* ---------- footer telemetry ---------- */

.telemetry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.2rem);
  border-top: var(--hairline);
  background: rgba(11, 12, 14, 0.92);
  font-size: 0.7rem;
}

.telemetry-tagline {
  margin: 0 0 0 auto;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: rgba(237, 230, 214, 0.5);
}
.telemetry-wordmark {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.06em;
}

@media (max-width: 719px) {
  .telemetry-tagline { display: none; }
  .telemetry-wordmark { margin-left: auto; }
}

/* ---------- noscript ---------- */

.noscript-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.8rem clamp(1rem, 4vw, 2.2rem);
  font-size: 0.74rem;
  border-top: var(--hairline);
  color: rgba(237, 230, 214, 0.7);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .w-uncertain { animation: none; }
  .cursor { animation: none; opacity: 1; }
  .led--standby { animation: none; opacity: 0.55; }
}

/* ---------- no-webgl fallback ---------- */

.no-webgl .scope {
  background-color: var(--well);
  background-image:
    linear-gradient(var(--graticule) 1px, transparent 1px),
    linear-gradient(90deg, var(--graticule) 1px, transparent 1px);
  background-size: 12.5% 25%;
}
.no-webgl .scope-fallback { display: block; }
.no-webgl .hero-scope .scope-fallback { display: none; }
.no-webgl .hero-tagline {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
}