/* ============================================================================
   INSTRUMENTS — patch bay, backpressure bench, historian, odometer,
   annunciator wall, self-telemetry, and the print datasheet.
   Everything colour-shaped comes from the tokens; nothing here knows a hex.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   PATCH BAY — five rocker switches over the systems list
   -------------------------------------------------------------------------- */
.patchbay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--lift);
  margin-bottom: var(--s-6);
}

.rocker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--rule);
  border-radius: 8px;
  background: var(--panel-2);
  transition: border-color var(--d-std) var(--e-out),
              background var(--d-std) var(--e-out);
}
.rocker:hover { border-color: var(--sodium); }
.rocker.is-on { border-color: var(--sodium); background: var(--sodium-glow); }

.rocker__body {
  width: 20px;
  height: 34px;
  border: var(--hair) solid var(--rule);
  border-radius: 4px;
  background: var(--void);
  position: relative;
  flex: none;
  overflow: hidden;
}
.rocker__body i {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: calc(50% - 3px);
  border-radius: 2px;
  background: var(--panel-3);
  transition: transform var(--d-slow) var(--e-out),
              background var(--d-slow) var(--e-out);
}
.rocker.is-on .rocker__body i {
  transform: translateY(calc(100% + 2px));
  background: var(--sodium);
}

.rocker__text { display: flex; flex-direction: column; text-align: left; }
.rocker__text b {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.rocker__text em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.rocker--reset { opacity: 0.75; }

.patch-readout {
  margin-left: auto;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

/* patch-bay result states on the systems list */
.sys__point {
  transition: opacity var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out);
}
.sys__point.is-quiet { opacity: 0.28; filter: saturate(0.4); }
.sys.is-lane .sys__no { color: var(--sodium); }

/* ----------------------------------------------------------------------------
   BACKPRESSURE BENCH
   -------------------------------------------------------------------------- */
.bench__scope {
  width: 100%;
  height: clamp(200px, 30vw, 300px);
  display: block;
  background: color-mix(in srgb, var(--void) 60%, var(--panel));
}
.bench__deck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4);
  border-top: var(--hair) solid var(--rule);
}

.knob {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: var(--hair) solid var(--rule);
  background: radial-gradient(circle at 34% 30%, var(--panel-3), var(--panel-2) 65%);
  position: relative;
  flex: none;
  cursor: grab;
  box-shadow: var(--lift-hi);
  touch-action: none;
  transition: border-color var(--d-std) var(--e-out);
}
.knob:hover, .knob.is-held { border-color: var(--sodium); }
.knob.is-held { cursor: grabbing; }
.knob:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }
.knob__arm {
  position: absolute;
  inset: 0;
  transition: transform 80ms linear;
}
.knob__arm::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 20px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--sodium);
}
.knob__label { display: flex; flex-direction: column; gap: 2px; }

/* ----------------------------------------------------------------------------
   HISTORIAN — trend cursor over the career
   -------------------------------------------------------------------------- */
.hist__strip {
  position: relative;
  height: 92px;
  border: var(--hair) solid var(--rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--void) 55%, var(--panel));
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
}
.hist__strip:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
.hist__bands { position: absolute; inset: 0; width: 100%; height: 100%; }

.hist__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--sodium);
  will-change: transform;
}
.hist__cursor::before { content: ""; position: absolute; inset: 0 -6px; }
.hist__flag {
  position: absolute;
  top: 4px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--sodium);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: var(--t-tick);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hist__card {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: var(--hair) solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  min-height: 130px;
  font-size: var(--t-small);
}
.hist__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-top: var(--hair) solid var(--rule-soft);
  line-height: 1.55;
}
.hist__row:first-of-type { border-top: none; }

/* ----------------------------------------------------------------------------
   RUN-HOURS ODOMETER
   -------------------------------------------------------------------------- */
.odo { display: inline-flex; gap: 2px; align-items: center; }
.odo__d {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--void);
  border: var(--hair) solid var(--rule);
  color: var(--ink);
  min-width: 1.4em;
  text-align: center;
}
.odo__d--dec {
  background: var(--sodium);
  border-color: var(--sodium);
  color: var(--void);
}

/* ----------------------------------------------------------------------------
   ANNUNCIATOR WALL
   -------------------------------------------------------------------------- */
.annunciator {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ann {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: var(--hair) solid var(--warning);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 7%, var(--panel));
  text-align: left;
  animation: annFlash 2.2s var(--e-io) infinite;
  transition: border-color var(--d-std) var(--e-out),
              background var(--d-std) var(--e-out);
}
@keyframes annFlash {
  0%, 100% { border-color: var(--warning); }
  50%      { border-color: var(--rule); background: var(--panel); }
}
.ann.is-acked {
  animation: none;
  border-color: var(--rule);
  background: var(--panel);
}
.ann.is-acked .ann__stamp { color: var(--nominal); }
.ann:hover { border-color: var(--sodium); }

.ann__head { display: flex; justify-content: space-between; gap: var(--s-3); }
.ann__stamp { color: var(--warning); }
.ann__text {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-mid);
}
.ann__verify { color: var(--trace); }
.ann--all {
  align-items: center;
  justify-content: center;
  animation: none;
  border-style: dashed;
  border-color: var(--rule);
  background: transparent;
  color: var(--ink-dim);
}
.ann--all:hover { color: var(--sodium); }

@media (prefers-reduced-motion: reduce) {
  .ann { animation: none; border-style: dashed; }
  .ann.is-acked { border-style: solid; }
}

/* ----------------------------------------------------------------------------
   SELF-TELEMETRY HUD
   -------------------------------------------------------------------------- */
.selftel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel);
}
@media (min-width: 640px)  { .selftel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .selftel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============================================================================
   PRINT — the site degrades into an equipment datasheet.
   ========================================================================== */
@media print {
  .boot, .cur, .cur-ring, .grain, .rail, .nav, .totop, .themewipe,
  .hero__gl, .hero__fallback, .hero__veil, .marquee,
  .signal__controls, .bench__deck, .patchbay,
  [data-jd-input], [data-jd-run], [data-jd-clear], .chipbtn {
    display: none !important;
  }

  :root {
    --void: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #eee;
    --rule: #999; --rule-soft: #ccc;
    --ink: #000; --ink-mid: #222; --ink-dim: #444; --ink-faint: #777;
    --sodium: #000; --trace: #000;
  }
  body { background: #fff; color: #000; }
  .shell { padding-left: 0; }
  .hero { min-height: auto; padding: 0 0 24px; }
  .section { padding: 18px 0; border-top: 1px solid #999; }
  .pin { height: auto !important; }
  .pin__stage { position: static; height: auto; padding: 18px 0; }
  .pin__line {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    font-size: 14pt;
  }
  .sys__body { grid-template-rows: 1fr !important; }
  .sys__point.is-quiet { opacity: 1; filter: none; }
  canvas { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }
  .sys, .cap, .ann { break-inside: avoid; }
}

/* ----------------------------------------------------------------------------
   SEGMENTED CONTROL — the analysis-domain switch on the scope. Two states,
   both always visible: an operator should see the domain they are NOT in.
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  padding: 2px;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel-2);
  box-shadow: var(--lift);
}
.seg__b {
  padding: 6px var(--s-4);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color var(--d-std) var(--e-out),
              background var(--d-std) var(--e-out);
}
.seg__b:hover { color: var(--ink); }
.seg__b.is-on {
  background: var(--sodium);
  color: var(--void);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   SCROLL-DRIVEN PROGRESS
   A hairline under the nav that tracks document progress. No JavaScript at
   all — the animation is driven by the scroll position itself, so it runs on
   the compositor and cannot stutter behind a busy main thread.
   -------------------------------------------------------------------------- */
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--sodium);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .nav__progress {
    animation: navProgress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes navProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Where scroll timelines are unsupported the bar simply never appears —
   it is decoration, and nothing else depends on it. */
@media (prefers-reduced-motion: reduce) {
  .nav__progress { display: none; }
}

/* ----------------------------------------------------------------------------
   ARCHIVER — the swinging-door chart. Taller than the scopes because the
   whole point is the shape of a thirty-minute record, not an instant.
   -------------------------------------------------------------------------- */
.archive__scope {
  width: 100%;
  height: clamp(220px, 32vw, 330px);
  display: block;
  background: color-mix(in srgb, var(--void) 60%, var(--panel));
}