/* T³ Logic Machine — V2 industrial machine aesthetic.
   Carries forward from shadow_demo/frontend/styles.css with logic-machine
   specific layout (single result panel + side viz + relations grid).
*/

:root {
  --ink:        #0a0b09;
  --void:       #0d0e0c;
  --panel-deep: #14150f;
  --panel:      #1c1d18;
  --panel-rim:  #24251f;
  --panel-2:    #161812;

  --steel:        #4a4b43;
  --steel-dark:   #2d2e26;
  --steel-light:  #6f7164;

  --bolt:         #18180f;
  --bolt-ring:    #58594f;
  --bolt-shadow:  rgba(0,0,0,0.85);

  --phosphor:       #3eda7e;
  --phosphor-glow:  rgba(62,218,126,0.45);
  --phosphor-dim:   #1e7a3e;

  --copper:         #c87f4d;
  --copper-bright:  #e09a68;
  --copper-dim:     #6f422a;

  --alert:        #d04535;
  --alert-glow:   rgba(208,69,53,0.45);

  --cream:        #d8d4c4;
  --cream-bright: #ede8d4;
  --olive-soft:   #7e7e6a;
  --olive-mid:    #565548;

  --grid: #1e1f19;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  background: var(--void);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.4;
  min-height: 100vh;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* HEX BOLT */
.bolt {
  position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, var(--bolt-ring) 0%, var(--bolt) 55%, var(--ink) 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.6);
  z-index: 2;
}
.bolt.tl { top: 6px; left: 6px; }
.bolt.tr { top: 6px; right: 6px; }
.bolt.bl { bottom: 6px; left: 6px; }
.bolt.br { bottom: 6px; right: 6px; }

/* STATUS LED */
.led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.led.on-green {
  background: radial-gradient(circle at 35% 35%, #6df0a0 0%, var(--phosphor) 50%, var(--phosphor-dim) 100%);
  box-shadow: 0 0 6px var(--phosphor-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.led.on-copper {
  background: radial-gradient(circle at 35% 35%, var(--copper-bright) 0%, var(--copper) 60%, var(--copper-dim) 100%);
  box-shadow: 0 0 5px rgba(200,127,77,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.led.on-red {
  background: radial-gradient(circle at 35% 35%, #f0775e 0%, var(--alert) 50%, #6f1e15 100%);
  box-shadow: 0 0 6px var(--alert-glow);
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 18px 28px 16px;
  background: linear-gradient(180deg, var(--panel-rim) 0%, var(--panel) 50%, var(--panel-2) 100%);
  border-bottom: 1px solid var(--steel-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 var(--ink), 0 2px 0 var(--ink);
}
.title h1 {
  font-size: 24px;
  letter-spacing: 0.38em;
  color: var(--cream-bright);
  font-weight: 700;
  text-shadow: 0 1px 0 var(--ink);
}
.title .sub {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--olive-soft);
  text-transform: uppercase;
  margin-top: 6px;
}
.title .sub::before { content: ''; }

.meta { display: flex; gap: 10px; align-items: stretch; }
.meta-row {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--olive-soft);
  text-align: right;
  padding: 8px 14px 6px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--panel-2) 100%);
  border: 1px solid var(--steel-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  min-width: 110px;
}
.meta-row span { display: block; text-transform: uppercase; }
.meta-row b {
  display: block;
  color: var(--phosphor);
  font-size: 17px;
  font-weight: 700;
  margin-top: 3px;
  text-shadow: 0 0 8px var(--phosphor-glow);
  font-variant-numeric: tabular-nums;
}

/* MAIN */
main {
  padding: 24px;
  max-width: 1700px;
  margin: 0 auto;
}

/* PROMPT ROW */
.prompt-row {
  margin-bottom: 22px;
  padding: 22px 22px 16px;
  background: linear-gradient(180deg, var(--panel-rim) 0%, var(--panel) 80%, var(--panel-2) 100%);
  border: 1px solid var(--steel-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 var(--ink), 0 1px 0 var(--ink);
  position: relative;
}
.prompt-row-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}
#prompt {
  flex: 1;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--ink) 100%);
  color: var(--cream-bright);
  border: 1px solid var(--steel-dark);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
#prompt:focus {
  outline: none;
  border-color: var(--phosphor-dim);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 0 1px var(--phosphor-dim), 0 0 8px var(--phosphor-glow);
}
#run-btn {
  padding: 14px 32px;
  background: linear-gradient(180deg, var(--copper-bright) 0%, var(--copper) 50%, var(--copper-dim) 100%);
  color: var(--ink);
  border: 1px solid var(--copper-dim);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), 0 2px 0 var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
#run-btn:hover { filter: brightness(1.1); }
#run-btn:disabled { opacity: 0.4; cursor: wait; }
#preset-select {
  padding: 14px 12px;
  background: linear-gradient(180deg, var(--panel-deep), var(--panel-2));
  color: var(--cream);
  border: 1px solid var(--steel-dark);
  font-family: inherit;
  font-size: 12px;
}
.status {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--olive-soft);
  text-transform: uppercase;
  font-style: italic;
}
.status::before {
  content: '●';
  color: var(--phosphor);
  margin-right: 6px;
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--olive-soft);
  line-height: 1.6;
}
.hint b {
  color: var(--copper);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 9px;
  margin-right: 8px;
}
.hint code {
  background: var(--panel-deep);
  padding: 2px 7px;
  color: var(--phosphor);
  border: 1px solid var(--steel-dark);
  font-size: 11px;
  margin: 0 4px;
}

/* RESULT GRID */
.result-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}

.panel {
  background: linear-gradient(180deg, var(--panel-rim) 0%, var(--panel) 6%, var(--panel) 100%);
  border: 1px solid var(--steel-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 var(--ink), 0 2px 0 var(--ink);
}

.panel-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--steel-dark);
  position: relative;
}
.panel-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-dim) 20%, var(--copper-dim) 80%, transparent);
}
.strip {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cream-bright);
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.serial {
  font-size: 9px;
  color: var(--olive-soft);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.panel-body {
  padding: 24px;
  min-height: 300px;
}
.placeholder {
  color: var(--olive-soft);
  font-style: italic;
  text-align: center;
  padding: 60px 0;
}

/* RESULT — operation header */
.op-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--steel-dark);
}
.op-header .subj {
  font-size: 22px;
  font-weight: 700;
  color: var(--cream-bright);
  font-variant-numeric: tabular-nums;
}
.op-header .op-arrow {
  color: var(--copper);
  font-size: 18px;
  margin: 0 14px;
  letter-spacing: 0.05em;
}
.op-header .rel {
  font-size: 18px;
  color: var(--copper);
  font-weight: 700;
}
.op-header .extras {
  margin-top: 8px;
  font-size: 11px;
  color: var(--olive-soft);
  letter-spacing: 0.05em;
}

/* RESULT — decoded list */
.decoded-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.decoded-row {
  display: grid;
  grid-template-columns: 24px 1fr 80px 100px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--ink) 100%);
  border: 1px solid var(--steel-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.decoded-row:hover {
  border-color: var(--copper-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 4px rgba(200,127,77,0.3);
}
.decoded-row .rank {
  color: var(--olive-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.decoded-row .name {
  color: var(--cream-bright);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.decoded-row .score {
  color: var(--phosphor);
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px var(--phosphor-glow);
}
.decoded-row .bar {
  height: 8px;
  background: var(--panel-deep);
  border: 1px solid var(--steel-dark);
  position: relative;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.decoded-row .bar-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(180deg, var(--phosphor), var(--phosphor-dim));
  top: 0; left: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.decoded-row.alt .name { color: var(--olive-soft); font-style: italic; font-size: 11px; }

/* PROFILE — multi-relation results */
.profile-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--ink) 100%);
  border: 1px solid var(--steel-dark);
}
.profile-row .relkey {
  color: var(--copper);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding-right: 10px;
  border-right: 1px dashed var(--steel-dark);
}
.profile-row .relvals {
  font-size: 13px;
  color: var(--cream-bright);
}
.profile-row .relvals .v { display: inline-block; margin-right: 12px; font-variant-numeric: tabular-nums; }
.profile-row .relvals .v .sc { color: var(--phosphor); font-size: 10px; margin-left: 2px; }

/* PRIMITIVE VIZ — vertical bars */
.viz-body {
  padding: 22px;
  min-height: 300px;
}
.viz-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: 240px;
  align-items: end;
}
.viz-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.viz-col .label {
  font-size: 14px;
  font-weight: 700;
  color: var(--olive-soft);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.viz-col .label.spacelike { color: var(--alert); }
.viz-col .label.timelike  { color: var(--phosphor); }
.viz-col .bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--panel-deep);
  border: 1px solid var(--steel-dark);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
.viz-col .axis {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px dashed var(--steel);
}
.viz-col .bar {
  width: 60%;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  position: absolute;
  left: 20%;
}
.viz-col .bar.neg {
  background: var(--alert);
  box-shadow: 0 0 6px var(--alert-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.viz-col .val {
  font-size: 10px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  font-weight: 600;
}
.viz-secondary {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--steel-dark);
  font-size: 11px;
  color: var(--olive-soft);
}
.viz-secondary span { display: block; }
.viz-secondary b { color: var(--copper); font-weight: 700; }

/* RELATIONS GRID */
.relations-section {
  background: var(--panel);
  border: 1px solid var(--steel-dark);
  margin-bottom: 22px;
}
.relations-grid {
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rel-chip {
  padding: 7px 12px;
  background: linear-gradient(180deg, var(--panel-deep), var(--ink));
  border: 1px solid var(--steel-dark);
  color: var(--copper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.rel-chip:hover {
  border-color: var(--copper);
  color: var(--copper-bright);
}

/* EXPLAINER */
.explainer { margin-bottom: 22px; }
.explainer-body {
  padding: 22px 26px;
  line-height: 1.7;
  max-width: 980px;
}
.explainer-body p { margin-bottom: 12px; color: var(--cream); }
.explainer-body code {
  background: var(--panel-deep);
  padding: 2px 7px;
  color: var(--phosphor);
  border: 1px solid var(--steel-dark);
  font-size: 12px;
  font-weight: 600;
}
.explainer-body b { color: var(--copper); font-weight: 700; }

/* FOOTER */
footer {
  padding: 18px 32px;
  border-top: 1px solid var(--steel-dark);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--void) 100%);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--olive-soft);
  text-align: center;
  text-transform: uppercase;
}
footer a {
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px dashed var(--copper-dim);
  margin: 0 8px;
}

/* CHAIN — multi-step results */
.chain-step {
  margin-bottom: 14px;
  padding: 14px;
  background: linear-gradient(180deg, var(--panel-deep) 0%, var(--ink) 100%);
  border: 1px solid var(--steel-dark);
}
.chain-step .step-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.chain-step .step-label .arrow { color: var(--olive-soft); margin-left: 8px; }
.chain-step .step-decoded { font-size: 13px; color: var(--cream-bright); }
.chain-step .step-decoded .v {
  display: inline-block;
  margin-right: 14px;
  font-variant-numeric: tabular-nums;
}
.chain-step .step-decoded .sc {
  color: var(--phosphor);
  font-size: 10px;
  margin-left: 4px;
  text-shadow: 0 0 4px var(--phosphor-glow);
}

@media (max-width: 1100px) {
  .result-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   INSTRUMENT CLUSTER — animated bivector rotor gauges
   ════════════════════════════════════════════════════════════════════════════ */

.instrument-cluster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 14px 16px;
  margin-top: 14px;
  background:
    linear-gradient(180deg, var(--panel-rim) 0%, var(--panel) 60%, var(--panel-2) 100%);
  border: 1px solid var(--steel-dark);
  border-radius: 4px;
  position: relative;
}
.instrument-cluster .cluster-label {
  position: absolute;
  top: -9px; left: 18px;
  background: var(--panel-rim);
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--olive-soft);
  border: 1px solid var(--steel-dark);
  border-radius: 2px;
}
.instrument-cluster .cluster-status {
  position: absolute;
  top: -9px; right: 18px;
  background: var(--panel-rim);
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--copper);
  border: 1px solid var(--steel-dark);
  border-radius: 2px;
  display: flex; align-items: center; gap: 5px;
}

/* Individual gauge cell */
.gauge-cell {
  background: linear-gradient(180deg, var(--panel-deep) 0%, #0d0e0a 100%);
  border: 1px solid var(--steel-dark);
  border-radius: 4px;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  min-height: 220px;
}
.gauge-cell .gauge-name {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--olive-soft);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.gauge-cell .gauge-svg {
  width: 100%;
  height: 160px;
  display: block;
}
.gauge-cell .gauge-readout {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--copper-bright);
  text-shadow: 0 0 5px rgba(224,154,104,0.35);
  font-family: ui-monospace, monospace;
  font-weight: 700;
}
.gauge-cell .gauge-sub {
  font-size: 9px;
  color: var(--olive-soft);
  margin-top: 2px;
  letter-spacing: 1px;
}

/* Gauge SVG: bezel, face, ticks, needle, hub */
.gauge-bezel {
  fill: url(#bezel-grad);
  stroke: var(--copper-dim);
  stroke-width: 1.5;
}
.gauge-face {
  fill: #0a0b09;
  stroke: var(--copper-dim);
  stroke-width: 0.8;
}
.gauge-tick {
  stroke: var(--copper);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.gauge-tick.major {
  stroke: var(--copper-bright);
  stroke-width: 1.6;
}
.gauge-tick.dominant {
  stroke: var(--phosphor);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px var(--phosphor-glow));
}
.gauge-tick-label {
  fill: var(--copper);
  font-family: ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 0.5px;
}
.gauge-tick-label.dominant {
  fill: var(--phosphor);
  font-weight: 700;
}
.gauge-needle {
  stroke: var(--copper-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(224,154,104,0.5));
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gauge-needle.warming {
  /* during 'spin-up' phase, a slight wobble */
  animation: needle-wobble 0.35s ease-in-out 2;
}
@keyframes needle-wobble {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(224,154,104,0.5)); }
  50%      { filter: drop-shadow(0 0 6px var(--phosphor-glow)); }
}
.gauge-hub {
  fill: url(#hub-grad);
  stroke: var(--copper-dim);
  stroke-width: 1;
}
.gauge-arc {
  fill: none;
  stroke: var(--phosphor-dim);
  stroke-width: 1.5;
  opacity: 0.35;
}
.gauge-arc.active {
  stroke: var(--phosphor);
  opacity: 0.7;
  filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* Q-deviation gauge has a centered zero — green if delta is small, red if large */
.gauge-q-zone {
  fill: rgba(62,218,126,0.10);
  stroke: var(--phosphor-dim);
  stroke-width: 0.5;
}
.gauge-q-zone.warn { fill: rgba(208,69,53,0.10); stroke: var(--alert); }

/* Rotor coef bars (mini-histogram below dial) */
.rotor-coef-bars {
  display: flex; align-items: end; gap: 1px;
  height: 28px; width: 100%;
  margin-top: 4px;
  padding: 0 4px;
}
.rotor-coef-bars .coef-bar {
  flex: 1;
  background: var(--copper-dim);
  min-height: 1px;
  transition: height 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 400ms ease;
}
.rotor-coef-bars .coef-bar.dominant {
  background: var(--phosphor);
  box-shadow: 0 0 4px var(--phosphor-glow);
}
.rotor-coef-bars .coef-bar.negative {
  background: var(--alert);
  opacity: 0.7;
}

/* Animated primitive bars — drop the instant transitions */
.viz-bars .bar {
  transition: height 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
              bottom 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
              top 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Status row inside cluster */
.cluster-state-led {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper-dim);
  margin-right: 4px;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.cluster-state-led.armed {
  background: var(--copper);
  box-shadow: 0 0 4px var(--copper);
}
.cluster-state-led.firing {
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor-glow);
  animation: led-pulse 0.4s ease-in-out 2;
}
.cluster-state-led.settled {
  background: var(--phosphor-dim);
  box-shadow: 0 0 3px var(--phosphor-dim);
}
@keyframes led-pulse {
  0%,100% { transform: scale(1.0); }
  50%     { transform: scale(1.4); }
}

@media (max-width: 900px) {
  .instrument-cluster { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOT SEQUENCE — Alien-style POST overlay
   ════════════════════════════════════════════════════════════════════════════ */

#boot {
  position: fixed; inset: 0;
  background: #050402;
  z-index: 9999;
  display: flex; flex-direction: column;
  justify-content: center; align-items: stretch;
  padding: 6vh 8vw;
  font-family: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
  color: #ffae2d;
  text-shadow: 0 0 4px rgba(255,174,45,0.6);
  font-size: 13px;
  letter-spacing: 0.6px;
  cursor: pointer;
  overflow: hidden;
}
#boot::before {
  /* CRT scanlines */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0) 4px);
  pointer-events: none;
  z-index: 1;
}
#boot::after {
  /* subtle CRT curvature vignette */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}
#boot.fading {
  opacity: 0; transition: opacity 0.6s ease-out;
}
#boot.gone { display: none; }

#boot-header {
  position: relative; z-index: 2;
  border-bottom: 1px solid #5a3a08;
  padding-bottom: 8px;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  text-transform: uppercase;
}
#boot-header .right { color: #8a5b15; font-size: 10px; letter-spacing: 2px; }
#boot-body {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
}
#boot-body .line { display: block; min-height: 1.3em; }
#boot-body .ok    { color: #3eda7e; text-shadow: 0 0 5px var(--phosphor-glow); }
#boot-body .warn  { color: #d04535; text-shadow: 0 0 5px var(--alert-glow); }
#boot-body .dim   { color: #8a5b15; }
#boot-body .ready {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 18px;
  border: 1.5px solid #3eda7e;
  color: #3eda7e;
  font-size: 18px; letter-spacing: 5px;
  background: rgba(62,218,126,0.06);
  text-shadow: 0 0 8px var(--phosphor-glow);
  animation: ready-blink 0.4s ease-in-out 3;
}
@keyframes ready-blink {
  0%,100% { opacity: 1; }  50% { opacity: 0.3; }
}
#boot-skip {
  position: absolute; bottom: 18px; right: 28px;
  z-index: 3;
  color: #5a3a08; font-size: 10px; letter-spacing: 3px;
}
.boot-cursor {
  display: inline-block; width: 0.55em; height: 1em;
  background: #ffae2d;
  vertical-align: -2px;
  animation: blink 0.7s steps(1) infinite;
}
@keyframes blink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   STAGED LAMP PIPELINE — 6 named lamps that light in sequence
   ════════════════════════════════════════════════════════════════════════════ */

.lamp-pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 10px;
  background: var(--panel-deep);
  border: 1px solid var(--steel-dark);
  border-radius: 3px;
  position: relative;
}
.lamp-pipeline .pipeline-label {
  position: absolute;
  top: -8px; left: 14px;
  background: var(--panel-rim);
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--olive-soft);
  border: 1px solid var(--steel-dark);
  border-radius: 2px;
}
.lamp {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px 6px;
  background: linear-gradient(180deg, #0d0e0a 0%, #050604 100%);
  border: 1px solid #1c1d18;
  border-radius: 2px;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: #4f4e3f;
  text-align: center;
  position: relative;
  min-height: 56px;
  justify-content: flex-start;
}
.lamp .bulb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2b22 0%, #131311 60%, #050604 100%);
  border: 1px solid #1c1d18;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.7);
  transition: background 200ms ease, box-shadow 250ms ease;
}
.lamp.armed .bulb {
  background: radial-gradient(circle at 30% 30%, #f4a86b 0%, #c87f4d 55%, #6f422a 100%);
  box-shadow: 0 0 7px rgba(200,127,77,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
}
.lamp.armed { color: var(--copper); }
.lamp.firing .bulb {
  background: radial-gradient(circle at 30% 30%, #95f3b3 0%, #3eda7e 50%, #1e7a3e 100%);
  box-shadow: 0 0 9px var(--phosphor-glow), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: bulb-flicker 0.18s ease-in-out 1;
}
.lamp.firing { color: var(--phosphor); }
.lamp.done .bulb {
  background: radial-gradient(circle at 30% 30%, #6df0a0 0%, #1e7a3e 60%, #0b3a1c 100%);
  box-shadow: 0 0 4px var(--phosphor-glow);
}
.lamp.done { color: var(--phosphor-dim); }
@keyframes bulb-flicker {
  0%   { transform: scale(1);   filter: brightness(1.0); }
  40%  { transform: scale(1.1); filter: brightness(1.5); }
  100% { transform: scale(1);   filter: brightness(1.0); }
}
.lamp .stage-name {
  font-weight: 700;
}
.lamp .stage-msg {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  color: var(--olive-soft);
  letter-spacing: 0.5px;
  font-weight: 400;
  min-height: 1.2em;
  text-align: center;
  word-break: break-word;
}
.lamp.firing .stage-msg, .lamp.done .stage-msg { color: var(--cream); }

/* ════════════════════════════════════════════════════════════════════════════
   PER-GAUGE NEEDLE CHARACTER
   ════════════════════════════════════════════════════════════════════════════ */

/* Heavy magnitude needle: long swing, big overshoot, slow settle */
#gauge-mag-needle {
  transition: transform 950ms cubic-bezier(0.16, 1.2, 0.28, 1.0);
}
/* Medium basis needle: moderate snap, one small overshoot */
#gauge-basis-needle {
  transition: transform 750ms cubic-bezier(0.34, 1.6, 0.55, 1.0);
}
/* Light precision Q needle: fast, no overshoot — surgical */
#gauge-q-needle {
  transition: transform 350ms cubic-bezier(0.2, 0.0, 0.2, 1.0);
}

/* Active arcs match needle pacing */
#gauge-mag-arc-active {
  transition: d 950ms cubic-bezier(0.16, 1.2, 0.28, 1.0);
}

/* ════════════════════════════════════════════════════════════════════════════
   TELETYPE RESULT ROWS
   ════════════════════════════════════════════════════════════════════════════ */

.decoded-row.tt-clack {
  opacity: 0;
  transform: translateX(-6px);
  animation: tt-clack-in 120ms ease-out forwards;
}
@keyframes tt-clack-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  60%  { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
.decoded-row .name .typing-cursor {
  display: inline-block; width: 0.5em; height: 1em;
  background: var(--phosphor);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 0.55s steps(1) infinite;
  box-shadow: 0 0 3px var(--phosphor-glow);
}
.decoded-row .bar .bar-fill {
  transition: width 280ms ease-out;
}
.decoded-row .score {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════════
   HETEROGENEITY SEED — "CAL DUE" Dymo-tape sticker
   ════════════════════════════════════════════════════════════════════════════ */

.cal-due-sticker {
  position: absolute;
  top: -12px; right: 80px;
  background: linear-gradient(180deg, #1d3d6f 0%, #14305a 100%);
  color: #e8e0c4;
  padding: 4px 12px 4px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid #0b2042;
  border-radius: 1px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  transform: rotate(-2.4deg);
  z-index: 5;
  pointer-events: none;
  opacity: 0.92;
  /* slight laminate sheen */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 30%),
    linear-gradient(180deg, #1d3d6f 0%, #14305a 100%);
}
.cal-due-sticker .small { font-size: 7.5px; letter-spacing: 1.5px; color: #b9b291; }

/* ════════════════════════════════════════════════════════════════════════════
   WEBGL STAGE — fullscreen canvas + transparent viewport cutout
   ════════════════════════════════════════════════════════════════════════════ */

#webgl-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
}

#webgl-debug {
  position: fixed;
  bottom: 8px; left: 8px;
  max-width: 60vw;
  background: rgba(5, 6, 4, 0.78);
  border: 1px solid #2a3a2c;
  border-radius: 3px;
  padding: 6px 10px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: #b9b291;
  letter-spacing: 0.5px;
  z-index: 50;
  pointer-events: none;
  display: none;       /* shown only when JS appends a line */
  max-height: 40vh;
  overflow: hidden;
}
#webgl-debug .ok  { color: #6df0a0; text-shadow: 0 0 4px rgba(62,218,126,0.5); }
#webgl-debug .err { color: #f07560; text-shadow: 0 0 4px rgba(208,69,53,0.5); }

/* Make the body's grid background semi-transparent so the canvas shows behind */
body {
  background: transparent;
  background-image: none;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--void);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.55;
}

/* The rotor viewport — a tall transparent rectangle with corner brackets,
   sitting in the page flow so the WebGL widget shows through it. */
.rotor-viewport {
  position: relative;
  margin: 18px 0 0;
  height: 460px;
  background: rgba(8, 9, 7, 0.20);   /* very slight tint so it's a "window" */
  border: 1px solid var(--steel-dark);
  border-radius: 4px;
  backdrop-filter: blur(0.5px);
  pointer-events: none;
}
.rotor-viewport .viewport-label {
  position: absolute;
  top: -9px; left: 22px;
  background: var(--panel-rim);
  padding: 1px 10px;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--copper);
  border: 1px solid var(--steel-dark);
  border-radius: 2px;
}
.viewport-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--copper);
  border-style: solid;
  pointer-events: none;
}
.viewport-corner.tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.viewport-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.viewport-corner.bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.viewport-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Make the rest of the UI surface a touch more transparent so the
   atmosphere shows through the panels too */
.panel, .instrument-cluster, .lamp-pipeline,
.result-grid > .panel, .relations-section, .explainer,
.prompt-row.rivets {
  background-color: rgba(28, 29, 24, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 900px) {
  .rotor-viewport { height: 360px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ATMOSPHERIC STAGING — overhead light & per-panel power-on
   ════════════════════════════════════════════════════════════════════════════
   Lifecycle:
     1. .lights-off   → everything except #boot dimmed to ~15% brightness
     2. .lights-flicker → cold-start fluorescent stutter (1.4s)
     3. .lights-on    → steady, full brightness
     4. .dimmable     → on every panel/section; starts at opacity 0.18
     5. .lit-up       → added one panel at a time; pops to opacity 1 with flash
   The boot overlay is excluded via :not(#boot) so it renders at full brightness.
*/

/* Exclude #webgl-canvas and #webgl-debug from the dimming filter — we want
   the 3D stage visible during boot too. */
body.lights-off > *:not(#boot):not(#webgl-canvas):not(#webgl-debug):not(#overhead-light) {
  filter: brightness(0.13) saturate(0.4);
}
body.lights-flicker > *:not(#boot):not(#webgl-canvas):not(#webgl-debug):not(#overhead-light) {
  animation: overhead-flicker 1.5s cubic-bezier(0.25, 0.5, 0.25, 1.0) forwards;
}
body.lights-on > *:not(#boot):not(#webgl-canvas):not(#webgl-debug):not(#overhead-light) {
  filter: brightness(1.0) saturate(1.0);
  transition: filter 220ms ease-out;
}

/* The flicker — multi-strike cold-start tube */
@keyframes overhead-flicker {
  0%   { filter: brightness(0.13) saturate(0.4); }
  3%   { filter: brightness(1.95) saturate(1.0); }   /* first strike */
  5%   { filter: brightness(0.13) saturate(0.4); }
  9%   { filter: brightness(1.70) saturate(0.9); }
  12%  { filter: brightness(0.13) saturate(0.4); }
  16%  { filter: brightness(0.50) saturate(0.55); }  /* dim sustain */
  20%  { filter: brightness(0.13) saturate(0.4); }
  27%  { filter: brightness(2.10) saturate(1.05); }  /* big strike */
  31%  { filter: brightness(0.45) saturate(0.6); }
  37%  { filter: brightness(1.85) saturate(1.0); }
  42%  { filter: brightness(1.10) saturate(0.9); }
  55%  { filter: brightness(1.40) saturate(1.0); }
  72%  { filter: brightness(0.98) saturate(0.95); }
  88%  { filter: brightness(1.08) saturate(1.0); }
  100% { filter: brightness(1.00) saturate(1.0); }
}

/* Overhead light wash — top-half blue-white gradient overlay that flashes
   in sync with the fluorescent. Mounted as a fixed overlay that
   pointer-events none. */
#overhead-light {
  position: fixed;
  top: 0; left: 0; right: 0; height: 55vh;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 50% -30%, rgba(196,220,240,0.22), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
body.lights-flicker #overhead-light {
  animation: overhead-light-flicker 1.5s cubic-bezier(0.25, 0.5, 0.25, 1.0) forwards;
}
body.lights-on #overhead-light { opacity: 0.85; }
@keyframes overhead-light-flicker {
  0%   { opacity: 0; }
  3%   { opacity: 1.0; }
  5%   { opacity: 0; }
  9%   { opacity: 0.85; }
  12%  { opacity: 0; }
  20%  { opacity: 0; }
  27%  { opacity: 1.0; }
  31%  { opacity: 0.2; }
  37%  { opacity: 0.95; }
  42%  { opacity: 0.55; }
  55%  { opacity: 0.85; }
  88%  { opacity: 0.78; }
  100% { opacity: 0.85; }
}

/* Per-panel dimming — every section/panel sits at low opacity until
   illuminated. Avoid changing layout (no transforms / translates that
   reflow other panels). */
.dimmable {
  opacity: 0.18;
  transition: opacity 250ms ease-out;
}
.dimmable.lit-up {
  opacity: 1.0;
  animation: panel-power-on 320ms cubic-bezier(0.16, 1.1, 0.3, 1.0);
}
@keyframes panel-power-on {
  0%   { opacity: 0.18; filter: brightness(0.5); }
  45%  { opacity: 1.0;  filter: brightness(1.7); }     /* brief on-strike */
  100% { opacity: 1.0;  filter: brightness(1.0); }
}

/* The internal LEDs go through a corresponding power-on flash */
.dimmable.lit-up .led {
  animation: led-power-on 280ms ease-out;
}
@keyframes led-power-on {
  0%   { transform: scale(1.0); filter: brightness(0.5); }
  45%  { transform: scale(1.5); filter: brightness(2.2); }
  100% { transform: scale(1.0); filter: brightness(1.0); }
}

/* The needles do a tiny "settle wiggle" when their panel lights — proves the
   instruments just powered on */
.dimmable.lit-up .gauge-needle {
  animation: needle-power-on 380ms cubic-bezier(0.34, 1.5, 0.5, 1);
  transform-origin: center;
}
@keyframes needle-power-on {
  0%   { transform: rotate(-235deg); }
  35%  { transform: rotate(-220deg); }
  70%  { transform: rotate(-228deg); }
  100% { transform: rotate(-225deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONSOLE CHASSIS — one continuous milled-metal face with bolted inserts
   ════════════════════════════════════════════════════════════════════════════
   Visual target: Tektronix oscilloscope / Apollo DSKY front face.
   Every panel is RECESSED INTO this metal face, not floating on top.
*/

.console-chassis {
  position: relative;
  margin: 18px 22px 28px;
  padding: 22px 22px 24px;
  background: #161210;
  /* brushed horizontal grain */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px,
      transparent 1px, transparent 5px);
  border-radius: 6px;
  /* layered copper bezel */
  box-shadow:
    inset 0 1px 0 rgba(255,210,170,0.10),                /* top edge highlight */
    inset 0 -1px 0 rgba(0,0,0,0.55),                      /* bottom edge shadow */
    0 0 0 1px #2a1810,                                    /* inner trim */
    0 0 0 6px #8a5a2c,                                    /* main copper bezel */
    0 0 0 7px #b07440,                                    /* outer rim highlight */
    0 0 0 8px #4a3018,                                    /* shadow line */
    0 8px 28px rgba(0,0,0,0.6);
}
/* Overhead lighting wash on the chassis itself — ceiling lamp falls off
   toward the bottom edge */
.console-chassis::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,240,210,0.055) 0%,
    rgba(255,240,210,0.025) 18%,
    transparent 32%,
    rgba(0,0,0,0.08) 70%,
    rgba(0,0,0,0.22) 100%);
  mix-blend-mode: screen;
}

/* Corner mounting screws (Phillips heads) */
.console-screw {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #a8a8a8 0%, #585858 45%, #1a1a17 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(0,0,0,0.7);
  z-index: 4;
}
.console-screw::before, .console-screw::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,0.6);
  border-radius: 1px;
}
.console-screw::before { /* horizontal cross */
  top: 50%; left: 22%; right: 22%; height: 2px; transform: translateY(-50%) rotate(28deg);
  transform-origin: center;
}
.console-screw::after { /* vertical cross */
  left: 50%; top: 22%; bottom: 22%; width: 2px; transform: translateX(-50%) rotate(28deg);
  transform-origin: center;
}
.console-chassis > .console-screw.tl { top: 6px; left: 6px; }
.console-chassis > .console-screw.tr { top: 6px; right: 6px; }
.console-chassis > .console-screw.bl { bottom: 6px; left: 6px; }
.console-chassis > .console-screw.br { bottom: 6px; right: 6px; }

/* ─── Status strip ───────────────────────────────────────────────────────── */

.status-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 7px 14px 7px 16px;
  background: #0a0907;
  border: 1px solid #5a3818;
  border-radius: 2px;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #b9b291;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.10);
}
.strip-lamp {
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  color: #5a4a3a;
}
.strip-lamp .bulb {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2520 0%, #131210 60%, #050403 100%);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.7);
  transition: background 240ms ease, box-shadow 240ms ease;
}
.strip-lamp[data-state="on"] .bulb {
  background: radial-gradient(circle at 30% 30%, #95f3b3 0%, #3eda7e 50%, #1e7a3e 100%);
  box-shadow: 0 0 5px var(--phosphor-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.strip-lamp[data-state="on"] { color: var(--phosphor); text-shadow: 0 0 3px var(--phosphor-glow); }
.strip-lamp[data-state="warn"] .bulb {
  background: radial-gradient(circle at 30% 30%, #f4a86b 0%, #c87f4d 55%, #6f422a 100%);
  box-shadow: 0 0 5px rgba(200,127,77,0.6);
}
.strip-lamp[data-state="warn"] { color: var(--copper); }
.strip-lamp[data-state="fault"] .bulb {
  background: radial-gradient(circle at 30% 30%, #f0775e 0%, #d04535 50%, #6f1e15 100%);
  box-shadow: 0 0 5px var(--alert-glow);
  animation: fault-pulse 0.9s ease-in-out infinite;
}
@keyframes fault-pulse {
  0%,100% { transform: scale(1.0); }
  50%     { transform: scale(1.35); }
}
.strip-readout {
  margin-left: auto;
  color: #6f422a;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
}

/* ─── Recessed panels — override ALL prior panel background/borders ─────── */

.console-chassis .panel,
.console-chassis .instrument-cluster,
.console-chassis .lamp-pipeline,
.console-chassis .relations-section,
.console-chassis .explainer,
.console-chassis .result-grid > .panel,
.console-chassis .prompt-row.rivets,
.console-chassis header,
.console-chassis footer {
  background: #0d0907 !important;
  background-image: none !important;
  background-color: #0d0907 !important;
  border: 1px solid #5a3818 !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.06),
    inset 1px 0 0 rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(0,0,0,0.4) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Per-panel mounting screws — 4 corners on every recessed insert */
.console-chassis .panel,
.console-chassis .instrument-cluster,
.console-chassis .lamp-pipeline,
.console-chassis .relations-section,
.console-chassis .explainer,
.console-chassis .result-grid > .panel,
.console-chassis .prompt-row.rivets {
  position: relative;
}
.console-chassis .panel::before, .console-chassis .panel::after,
.console-chassis .instrument-cluster::before, .console-chassis .instrument-cluster::after,
.console-chassis .lamp-pipeline::before, .console-chassis .lamp-pipeline::after,
.console-chassis .relations-section::before, .console-chassis .relations-section::after,
.console-chassis .explainer::before, .console-chassis .explainer::after,
.console-chassis .result-grid > .panel::before, .console-chassis .result-grid > .panel::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #888 0%, #444 55%, #1a1a17 100%);
  box-shadow: inset 0 -0.5px 0.5px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.6);
  pointer-events: none;
}
.console-chassis .panel::before,
.console-chassis .instrument-cluster::before,
.console-chassis .lamp-pipeline::before,
.console-chassis .relations-section::before,
.console-chassis .explainer::before,
.console-chassis .result-grid > .panel::before {
  top: 4px; left: 4px;
  box-shadow:
    inset 0 -0.5px 0.5px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.6),
    24px 0 0 0 #444, 24px 0 0 0.5px #1a1a17;  /* tr screw via shadow clone */
}
.console-chassis .panel::after,
.console-chassis .instrument-cluster::after,
.console-chassis .lamp-pipeline::after,
.console-chassis .relations-section::after,
.console-chassis .explainer::after,
.console-chassis .result-grid > .panel::after {
  bottom: 4px; left: 4px;
  box-shadow:
    inset 0 -0.5px 0.5px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.6),
    24px 0 0 0 #444, 24px 0 0 0.5px #1a1a17;
}
/* The shadow trick for the tr/br screws is fragile — use proper screw spans
   instead when refined. For now this gives the corner-mount impression. */

/* ─── Result-grid: remove gap, replace with mounting rail ───────────────── */

.console-chassis .result-grid {
  gap: 0 !important;
  display: grid;
  grid-template-columns: 1fr 320px;
  border: 1px solid #5a3818;
  border-radius: 2px;
  background: transparent !important;
}
.console-chassis .result-grid > .panel:first-child {
  border-radius: 2px 0 0 2px !important;
  border-right-width: 0 !important;
}
.console-chassis .result-grid > .panel:last-child {
  border-radius: 0 2px 2px 0 !important;
  border-left: 2px solid #8a5a2c !important;       /* the mounting rail */
}

/* Tighten section vertical spacing to feel like one continuous face */
.console-chassis main { gap: 12px; }
.console-chassis main > section { margin: 0; }
.console-chassis main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The panel labels (LED + serial chip) sit on top of the recessed pocket —
   suggest they're silk-screened onto the metal next to the cutout */
.console-chassis .panel-label,
.console-chassis .pipeline-label,
.console-chassis .cluster-label,
.console-chassis .scope-label {
  background: #161210 !important;          /* match chassis color */
  border-color: #5a3818 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   OSCILLOSCOPE — round CRT face with knobs, replacing the old viewport
   ════════════════════════════════════════════════════════════════════════════ */

.scope-mount {
  display: grid !important;
  grid-template-columns: 80px 1fr 80px;
  gap: 14px;
  padding: 18px 16px !important;
  align-items: center;
  background: #0d0907 !important;
  border: 1px solid #5a3818 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7) !important;
  position: relative;
}
.scope-label {
  position: absolute;
  top: -9px; left: 22px;
  background: #161210;
  padding: 1px 10px;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--copper);
  border: 1px solid #5a3818;
  border-radius: 2px;
}

.scope-side {
  display: flex; flex-direction: column; gap: 18px;
  padding: 6px 0;
}
.scope-knob {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.scope-knob .dial {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4a3a30 0%, #2a1f18 50%, #14100c 100%);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,0.7),
    inset 0 2px 2px rgba(255,210,170,0.12),
    0 1px 2px rgba(0,0,0,0.6),
    0 0 0 1px #2a1810;
  position: relative;
  /* knurled rim */
  border: 1px solid #1a120c;
}
.scope-knob .dial::before {
  /* knurled texture */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255,255,255,0.025) 0deg,
    rgba(255,255,255,0.025) 4deg,
    transparent 4deg, transparent 8deg);
}
.scope-knob .dial .indicator {
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 12px;
  background: var(--copper-bright);
  border-radius: 1px;
  transform: translateX(-50%);
  box-shadow: 0 0 3px rgba(224,154,104,0.4);
}
.scope-knob .knob-label {
  font-size: 7.5px;
  letter-spacing: 1.5px;
  color: #6f422a;
  text-transform: uppercase;
}
/* Random knob rotations so they don't all look identical */
.scope-side-left .scope-knob:nth-child(1) .dial .indicator { transform: translateX(-50%) rotate(-110deg); transform-origin: 50% 18px; }
.scope-side-left .scope-knob:nth-child(2) .dial .indicator { transform: translateX(-50%) rotate(20deg);   transform-origin: 50% 18px; }
.scope-side-left .scope-knob:nth-child(3) .dial .indicator { transform: translateX(-50%) rotate(85deg);   transform-origin: 50% 18px; }
.scope-side-right .scope-knob:nth-child(1) .dial .indicator { transform: translateX(-50%) rotate(-60deg);  transform-origin: 50% 18px; }
.scope-side-right .scope-knob:nth-child(2) .dial .indicator { transform: translateX(-50%) rotate(40deg);   transform-origin: 50% 18px; }
.scope-side-right .scope-knob:nth-child(3) .dial .indicator { transform: translateX(-50%) rotate(-30deg);  transform-origin: 50% 18px; }

/* Round CRT bezel — kept for fallback / Lissajous mode; rectangular is default */
.scope-bezel:not(.rectangular) {
  width: 440px;
  height: 440px;
  border-radius: 50%;
  padding: 22px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 35% 30%, #b07440 0%, #8a5a2c 35%, #5a3818 70%, #2a1810 100%);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.7),
    inset 0 6px 4px rgba(255,210,170,0.10),
    inset 0 -8px 6px rgba(0,0,0,0.5),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 0 1px #2a1810;
  position: relative;
}

/* Rectangular multi-channel scope bezel */
.scope-bezel.rectangular {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 14px 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #b07440 0%, #8a5a2c 40%, #6f4828 60%, #5a3818 100%);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.55),
    inset 0 2px 0 rgba(255,210,170,0.18),
    inset 0 0 12px rgba(0,0,0,0.5),
    0 5px 16px rgba(0,0,0,0.55),
    0 0 0 1px #2a1810;
  position: relative;
}
/* Top/bottom rivets on the rectangular bezel */
.scope-bezel.rectangular::before, .scope-bezel.rectangular::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #888 0%, #444 50%, #1a1a17 100%);
  box-shadow: inset 0 -0.5px 0.5px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.6);
}
.scope-bezel.rectangular::before { top: 3px; left: 50%; transform: translateX(-50%); }
.scope-bezel.rectangular::after  { bottom: 3px; left: 50%; transform: translateX(-50%); }

/* The CRT face — dark phosphor with subtle vignette */
.scope-face-rect {
  background:
    radial-gradient(ellipse at center,
      rgba(20, 38, 26, 0.20) 0%,
      rgba(10, 20, 14, 0.40) 60%,
      rgba(2, 5, 3, 0.85) 100%);
  border: 1px solid #2a1810;
  border-radius: 2px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7);
  display: grid;
  grid-template-columns: 78px 1fr;
  grid-template-rows: 1fr 28px;
  grid-template-areas:
    "channels plot"
    "bottom   bottom";
  position: relative;
  overflow: hidden;
}

/* Channel margin — labels + scale per channel */
.scope-channels {
  grid-area: channels;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(62,218,126,0.18);
  padding: 4px 6px;
  background: rgba(0,0,0,0.35);
  font-family: 'Courier New', ui-monospace, monospace;
}
.scope-channels .ch {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(62,218,126,0.10);
  font-size: 9px;
  letter-spacing: 1.2px;
}
.scope-channels .ch:last-child { border-bottom: none; }
.scope-channels .ch-num   { font-weight: 700; letter-spacing: 2px; }
.scope-channels .ch-name  { font-size: 11px; letter-spacing: 1.5px; margin-top: 1px; }
.scope-channels .ch-scale { font-size: 7.5px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.scope-channels .ch-live  { font-size: 9.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.scope-channels .ch1 { color: #3eda7e; text-shadow: 0 0 4px rgba(62,218,126,0.55); }
.scope-channels .ch2 { color: #ffae2d; text-shadow: 0 0 4px rgba(255,174,45,0.55); }
.scope-channels .ch3 { color: #4dd0e1; text-shadow: 0 0 4px rgba(77,208,225,0.55); }

/* Plot area — canvas + glow overlay */
.scope-plot {
  grid-area: plot;
  position: relative;
  overflow: hidden;
}
#scope-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.scope-overlay-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 50%, rgba(0,0,0,0.4) 100%);
  mix-blend-mode: multiply;
}

/* Bottom strip — MODE switch + time */
.scope-bottom {
  grid-area: bottom;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(62,218,126,0.18);
  padding: 4px 10px;
  background: rgba(0,0,0,0.45);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.mode-switch { display: flex; align-items: center; gap: 6px; color: #6f8472; }
.mode-switch .mode-lbl { color: #5a7060; letter-spacing: 2px; }
.mode-switch .mode-btn {
  font-family: inherit;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  padding: 2px 9px;
  background: linear-gradient(180deg, #1a1a17 0%, #050604 100%);
  color: #5a7060;
  border: 1px solid #2a1810;
  border-radius: 1px;
  cursor: pointer;
  text-shadow: none;
}
.mode-switch .mode-btn.active {
  background: linear-gradient(180deg, #2a3a2c 0%, #1a261c 100%);
  color: var(--phosphor);
  border: 1px solid var(--phosphor-dim);
  text-shadow: 0 0 4px var(--phosphor-glow);
  box-shadow: inset 0 0 6px rgba(62,218,126,0.15);
}
.mode-switch .mode-btn:hover { border-color: var(--copper); color: var(--copper); }

.scope-bottom-right { display: flex; gap: 14px; color: #6f8472; }
.scope-tdiv { color: #5a7060; }
.scope-time { color: var(--phosphor); text-shadow: 0 0 3px var(--phosphor-glow); }

/* Override the now-stale round-CRT helper rules */
.scope-face, .scope-glow, .scope-graticule, .scope-crosshair,
.scope-readout-tl, .scope-readout-tr, .scope-readout-bl, .scope-readout-br {
  display: none;
}

@media (max-width: 900px) {
  .scope-bezel.rectangular { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DENSIFY · UTILITARIAN PASS
   Goal: no breathing room. Information density 2× without shrinking the page.
   Reference: Tektronix front panel, Apollo DSKY, military rack-mount.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── chassis frame ── */
.console-chassis {
  margin: 10px 12px 14px !important;
  padding: 12px 12px 12px !important;
}

/* ── chassis body grid: main column + right rail ── */
.chassis-body {
  display: grid;
  grid-template-columns: 1fr 142px;
  column-gap: 8px;
}
.chassis-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── status strip — tighter, more lamps could fit ── */
.status-strip {
  padding: 5px 10px !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}
.strip-lamp { gap: 4px; }
.strip-lamp .bulb { width: 7px; height: 7px; }
.strip-readout { font-size: 8.5px !important; letter-spacing: 1.2px !important; }

/* ── header tighten ── */
.console-chassis header {
  padding: 10px 14px !important;
}
.console-chassis header h1 { font-size: 22px !important; letter-spacing: 4px; }
.console-chassis header .sub { font-size: 10px !important; }
.console-chassis header .meta { gap: 12px; }
.console-chassis header .meta-row { font-size: 9.5px; }

/* ── tighten main vertical gaps ── */
.console-chassis main {
  gap: 6px !important;
  flex: 1;
}

/* ── prompt rows ── */
.console-chassis .prompt-row.rivets {
  padding: 6px 10px 8px !important;
}
.prompt-row-inner {
  gap: 5px !important;
  padding: 0 !important;
}
.prompt-row-inner input {
  font-size: 12px !important;
  padding: 6px 10px !important;
  height: 28px;
}
.prompt-row-inner button {
  padding: 4px 14px !important;
  height: 28px;
  font-size: 11px !important;
}
.prompt-row-inner select {
  padding: 4px 8px !important;
  height: 28px;
  font-size: 10.5px !important;
}
.prompt-row .status {
  font-size: 9px !important;
  padding: 2px 0 !important;
}
.prompt-row .hint {
  font-size: 9px !important;
  padding: 3px 0 0 !important;
  line-height: 1.4;
}
.prompt-row .hint code { font-size: 9px; }

/* ── lamp pipeline tighter cells ── */
.console-chassis .lamp-pipeline {
  padding: 5px 8px 5px !important;
  gap: 3px !important;
}
.console-chassis .lamp {
  padding: 4px 3px 3px !important;
  min-height: 40px !important;
  gap: 3px !important;
}
.console-chassis .lamp .bulb { width: 9px; height: 9px; }
.console-chassis .lamp .stage-name { font-size: 8px !important; letter-spacing: 1.3px; }
.console-chassis .lamp .stage-msg {
  font-size: 7.5px !important;
  letter-spacing: 0.3px;
  line-height: 1.15;
  margin-top: 0 !important;
}

/* ── scope row: scope + bivector LED column flush ── */
.scope-row {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 6px;
}

/* ── scope tighten ── */
.scope-mount {
  grid-template-columns: 62px 1fr 62px !important;
  gap: 0 !important;
  padding: 10px 8px 8px !important;
  align-items: stretch !important;
}
.scope-side { gap: 8px !important; padding: 4px 0 !important; }
.scope-knob .dial {
  width: 38px !important; height: 38px !important;
}
.scope-knob .knob-label {
  font-size: 7px !important; letter-spacing: 1.2px;
}
.scope-bezel.rectangular {
  max-width: 100% !important;
  padding: 10px 10px !important;
}
.scope-face-rect {
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr 22px;
}
.scope-channels .ch { padding: 4px 3px !important; font-size: 8px; }
.scope-channels .ch-num   { font-size: 8.5px !important; letter-spacing: 1.5px; }
.scope-channels .ch-name  { font-size: 10px !important; letter-spacing: 1.2px; }
.scope-channels .ch-scale { font-size: 6.5px !important; }
.scope-channels .ch-live  { font-size: 8.5px !important; margin-top: 1px; }
.scope-bottom { padding: 3px 8px !important; font-size: 8px !important; }
.scope-bottom .mode-btn { font-size: 7.5px !important; padding: 2px 7px !important; }
.scope-bottom .scope-tdiv, .scope-bottom .scope-time { font-size: 8px !important; }

/* ── 15-LED bivector activity column ── */
.bivector-leds {
  display: flex;
  flex-direction: column;
  padding: 8px 6px 6px !important;
  gap: 0 !important;
}
.bv-label {
  position: absolute;
  top: -8px; left: 14px;
  background: #161210;
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--copper);
  border: 1px solid #5a3818;
  border-radius: 2px;
}
.bv-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px 4px;
  margin-top: 4px;
  align-content: start;
}
.bv-led {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 3px;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #5a4a3a;
  font-family: 'Courier New', ui-monospace, monospace;
}
.bv-led .bulb {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2520 0%, #131210 60%, #050403 100%);
  box-shadow: inset 0 0 1px rgba(0,0,0,0.7);
  flex-shrink: 0;
  transition: background 200ms, box-shadow 200ms;
}
.bv-led .lbl {
  letter-spacing: 0.2px;
  font-size: 7.5px;
}
/* Activation tiers — driven by JS setting --a (0..1) on each .bv-led */
.bv-led[data-active="1"] .bulb {
  background: radial-gradient(circle at 30% 30%, #6f422a 0%, #2a1810 100%);
}
.bv-led[data-active="2"] .bulb {
  background: radial-gradient(circle at 30% 30%, #f4a86b 0%, #c87f4d 55%, #6f422a 100%);
  box-shadow: 0 0 4px rgba(200,127,77,0.55);
}
.bv-led[data-active="3"] .bulb {
  background: radial-gradient(circle at 30% 30%, #95f3b3 0%, #3eda7e 50%, #1e7a3e 100%);
  box-shadow: 0 0 5px var(--phosphor-glow);
}
.bv-led[data-active="3"] { color: var(--phosphor); text-shadow: 0 0 3px var(--phosphor-glow); }
.bv-led[data-active="2"] { color: var(--copper); }

/* ── instrument cluster — rectangular pockets, denser ── */
.console-chassis .instrument-cluster {
  padding: 8px 6px 6px !important;
  gap: 4px !important;
  grid-template-columns: repeat(3, 1fr);
}
.console-chassis .gauge-cell {
  min-height: 158px !important;
  padding: 6px 4px 4px !important;
}
.console-chassis .gauge-cell .gauge-name {
  font-size: 8px !important; letter-spacing: 1.3px;
  margin-bottom: 2px !important;
}
.console-chassis .gauge-cell .gauge-svg {
  height: 100px !important;            /* was 160 */
  max-width: 100%;
}
.console-chassis .gauge-cell .gauge-readout {
  font-size: 10px !important;
  margin-top: 1px !important;
}
.console-chassis .gauge-cell .gauge-sub {
  font-size: 7.5px !important;
  margin-top: 1px !important;
}
.console-chassis .rotor-coef-bars {
  margin-top: 2px !important;
  height: 18px !important;
}

/* ── result grid + relations ── */
.console-chassis .panel-label, .console-chassis .pipeline-label,
.console-chassis .cluster-label, .console-chassis .scope-label {
  font-size: 9px !important;
  padding: 1px 7px !important;
}
.console-chassis .panel-body { padding: 8px 10px !important; }
.console-chassis .viz-body { padding: 6px 10px !important; }
.console-chassis .decoded-list { gap: 1px !important; }
.console-chassis .decoded-row {
  padding: 2px 6px !important;
  font-size: 11px !important;
}
.console-chassis .decoded-row .rank { font-size: 9px !important; }
.console-chassis .decoded-row .score { font-size: 10px !important; }
.console-chassis .relations-section { padding: 6px 8px !important; }
.console-chassis .relations-grid { gap: 3px !important; padding-top: 18px !important; }
.console-chassis .rel-chip { padding: 3px 8px !important; font-size: 9.5px !important; }
.console-chassis .explainer { padding: 6px 12px !important; }
.console-chassis .explainer-body { padding: 6px 0 !important; font-size: 11px !important; }
.console-chassis .explainer-body p { margin-bottom: 4px !important; }
.console-chassis footer {
  padding: 6px 12px !important;
  font-size: 9px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   RIGHT-RAIL STATUS COLUMN
   ════════════════════════════════════════════════════════════════════════════ */

.right-rail {
  background: #0a0907;
  border: 1px solid #5a3818;
  border-radius: 2px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.06);
  padding: 22px 8px 8px;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 8.5px;
  letter-spacing: 0.5px;
  color: #b9b291;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: stretch;
  min-width: 0;
}
.right-rail::before {
  /* tiny corner screws */
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #888, #444, #1a1a17);
  box-shadow:
    inset 0 -0.5px 0.5px rgba(0,0,0,0.6),
    /* clone for tr/bl/br */
    calc(142px - 19px) 0 0 #444,
    0 calc(100% + 10px - 8px) 0 0 #444,
    calc(142px - 19px) calc(100% + 10px - 8px) 0 0 #444;
}
.rail-label {
  position: absolute;
  top: -8px; left: 12px;
  background: #161210;
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--copper);
  border: 1px solid #5a3818;
  border-radius: 2px;
}
.rail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 3px;
  border-bottom: 1px dashed rgba(176,116,64,0.10);
  position: relative;
}
.rail-row:last-child { border-bottom: none; }
.rail-k {
  color: #6f422a;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 7.5px;
}
.rail-v {
  color: var(--phosphor);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--phosphor-glow);
  font-size: 9px;
}
.rail-row.rail-bar .bar {
  position: absolute;
  left: 3px; right: 3px; bottom: -1px;
  height: 1.5px;
  background: rgba(176,116,64,0.20);
}
.rail-row.rail-bar .bar .fill {
  height: 100%;
  background: var(--phosphor);
  box-shadow: 0 0 3px var(--phosphor-glow);
  transition: width 400ms ease-out;
}
.rail-divider {
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(176,116,64,0.20) 0, rgba(176,116,64,0.20) 4px,
      transparent 4px, transparent 8px);
  margin: 3px 0;
  border-top: 1px solid rgba(176,116,64,0.18);
  border-bottom: 1px solid rgba(176,116,64,0.18);
}

/* ════════════════════════════════════════════════════════════════════════════
   BOTTOM TICKER — scrolling event log strip
   ════════════════════════════════════════════════════════════════════════════ */

.ticker {
  margin: 6px 0 0;
  height: 24px;
  background: #050403;
  border: 1px solid #2a1810;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.06);
}
.ticker::before, .ticker::after {
  /* gradient fades at the edges so text appears to scroll in/out cleanly */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, #050403, transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, #050403, transparent); }
.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  line-height: 24px;
  color: var(--phosphor);
  text-shadow: 0 0 3px var(--phosphor-glow);
  padding-left: 100%;                  /* start off-screen right */
  animation: ticker-scroll 110s linear infinite;
}
.ticker-inner .t-evt {
  margin-right: 36px;
}
.ticker-inner .t-evt::before {
  content: '◆ ';
  color: var(--copper);
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 1100px) {
  .chassis-body { grid-template-columns: 1fr; }
  .right-rail   { display: none; }     /* fall back to chassis-only on narrow */
  .scope-row    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING-HARDER PASS — captions, anomaly panel, grounded callout
   ════════════════════════════════════════════════════════════════════════════ */

/* LLM-contrast caption beneath the result body */
.result-caption {
  margin-top: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #0a0907 0%, #060503 100%);
  border-top: 1px solid #5a3818;
  border-bottom: 1px solid #2a1810;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.55;
  color: #b9b291;
  position: relative;
}
.result-caption .ct-marker {
  display: block;
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--copper);
  margin-bottom: 4px;
  font-weight: 700;
}
.result-caption .ct-body {
  display: block;
  color: #d6d2c2;
}

/* Anomaly response panel */
.anomaly-report {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(208, 69, 53, 0.04);
  border-left: 3px solid var(--alert);
  border-radius: 1px;
}
.anomaly-report .anom-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(208, 69, 53, 0.15);
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 10.5px;
}
.anomaly-report .anom-row:last-of-type { border-bottom: none; }
.anomaly-report .anom-row .lbl {
  color: #7e7e6a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 9px;
}
.anomaly-report .anom-row .val {
  color: var(--phosphor);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.anomaly-report .anom-row .val.alert {
  color: var(--alert);
  text-shadow: 0 0 4px var(--alert-glow);
}
.anomaly-report .anom-explainer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(208, 69, 53, 0.25);
  font-size: 10.5px;
  line-height: 1.5;
  color: #d6d2c2;
}

/* Grounded-disambiguation callout in the WHAT THIS IS panel */
.explainer-body .grounded-callout {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(62, 218, 126, 0.05);
  border-left: 3px solid var(--phosphor-dim);
  border-radius: 1px;
}
.explainer-body .grounded-callout b:first-child {
  color: var(--phosphor);
  letter-spacing: 1.5px;
  text-shadow: 0 0 3px var(--phosphor-glow);
}
.explainer-body .grounded-callout a {
  color: var(--copper-bright);
  text-decoration: underline dotted rgba(224,154,104,0.4);
}
.explainer-body .grounded-callout a:hover { color: var(--copper); }

/* ════════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — restyle native <select> so they match the chassis palette
   ════════════════════════════════════════════════════════════════════════════
   Default browser styling renders selects as white-on-light which reads as
   webform debris on the dark console. Restyle to copper-on-dark with a
   phosphor-green focus state and a custom dropdown caret.
*/

.console-chassis select,
.scope-bottom select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: linear-gradient(180deg, #1a1a17 0%, #0a0907 100%);
  background-image:
    linear-gradient(180deg, #1a1a17 0%, #0a0907 100%),
    /* down-caret on the right edge */
    linear-gradient(45deg, transparent 50%, var(--copper) 50%),
    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    0 0,
    calc(100% - 11px) 12px,
    calc(100% - 6px) 12px;
  background-size:
    100% 100%,
    5px 5px,
    5px 5px;
  color: var(--copper-bright);
  border: 1px solid #5a3818;
  border-radius: 1px;
  padding: 4px 24px 4px 10px !important;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-shadow: 0 0 3px rgba(224,154,104,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,210,170,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.console-chassis select:hover,
.scope-bottom select:hover {
  border-color: var(--copper);
  color: var(--cream-bright);
}
.console-chassis select:focus,
.scope-bottom select:focus {
  outline: none;
  border-color: var(--phosphor);
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor-glow);
  box-shadow:
    inset 0 1px 0 rgba(149,243,179,0.10),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    0 0 6px var(--phosphor-glow);
}
/* The native dropdown menu (the <option> popup) still uses OS theme on most
   browsers, but at least the closed state is now on-palette. Many browsers
   honor color/background on <option> directly: */
.console-chassis select option,
.scope-bottom select option {
  background: #0a0907;
  color: var(--cream-bright);
  font-family: ui-monospace, 'Courier New', monospace;
}
.console-chassis select option:checked,
.console-chassis select option:hover {
  background: #2a1810;
  color: var(--phosphor);
}

/* Inputs in the same spirit so the row reads cohesively */
.console-chassis input[type="text"] {
  background: linear-gradient(180deg, #0a0907 0%, #050403 100%);
  color: var(--cream-bright);
  border: 1px solid #5a3818;
  border-radius: 1px;
  padding: 5px 10px !important;
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing: 0.5px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.console-chassis input[type="text"]:focus {
  outline: none;
  border-color: var(--phosphor);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(176,116,64,0.06),
    0 0 6px var(--phosphor-glow);
}
.console-chassis input[type="text"]::placeholder {
  color: #5a4a3a;
  font-style: italic;
}

/* QUERY / ASK buttons — copper on dark with a phosphor-edge press feel */
.console-chassis button {
  background: linear-gradient(180deg, var(--copper-bright) 0%, var(--copper) 50%, var(--copper-dim) 100%);
  color: #1a1107;
  border: 1px solid #2a1810;
  border-radius: 1px;
  padding: 4px 14px !important;
  font-family: ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 1px 2px rgba(0,0,0,0.5);
  transition: filter 100ms ease, box-shadow 100ms ease;
}
.console-chassis button:hover { filter: brightness(1.12); }
.console-chassis button:active {
  filter: brightness(0.92);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(0,0,0,0.20);
}
.console-chassis button:disabled {
  filter: grayscale(0.6) brightness(0.7);
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════════
   PATH TAG — visual indicator showing which route the last query took
   ════════════════════════════════════════════════════════════════════════════ */

.path-tag {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  font-weight: 700;
  border-radius: 1px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.35);
  color: #5a4a3a;
  font-family: ui-monospace, 'Courier New', monospace;
  vertical-align: middle;
}
.path-tag.tag-A {
  color: var(--copper-bright);
  text-shadow: 0 0 4px rgba(224,154,104,0.55);
  background: rgba(200,127,77,0.10);
}
.path-tag.tag-B {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor-glow);
  background: rgba(62,218,126,0.10);
}
/* compact glyph instead of long form when the tag is squeezed */
.console-chassis .status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════════
   ANOMALY SCAN PANEL — per-token chips colored by algebra-residual z-score
   ════════════════════════════════════════════════════════════════════════════ */

.anomaly-scan {
  margin-top: 8px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #0a0907 0%, #060503 100%);
  border-top: 1px solid #5a3818;
  border-bottom: 1px solid #2a1810;
}
.anomaly-scan .scan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.anomaly-scan .scan-lbl {
  color: var(--copper);
  font-weight: 700;
}
.anomaly-scan .scan-stats {
  color: var(--olive-soft);
  font-size: 8.5px;
}
.anomaly-scan .scan-stats .hot {
  color: var(--alert);
  text-shadow: 0 0 4px var(--alert-glow);
  font-weight: 700;
}
.anomaly-scan .scan-stats .ok {
  color: var(--phosphor);
  text-shadow: 0 0 3px var(--phosphor-glow);
}

.anomaly-scan .scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.scan-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 6px 2px;
  border-radius: 1px;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.3px;
  border: 1px solid;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.40));
  cursor: help;
  min-width: 30px;
  line-height: 1.15;
}
.scan-chip .ch-tok {
  color: var(--cream-bright);
  font-weight: 600;
  word-break: break-all;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-chip .ch-z {
  font-size: 7.5px;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
/* Tier styles */
.scan-chip.scan-safe  { border-color: #1e7a3e; }
.scan-chip.scan-safe  .ch-z { color: #6f8472; }

.scan-chip.scan-warn {
  border-color: var(--copper);
  background: linear-gradient(180deg, rgba(200,127,77,0.10), rgba(0,0,0,0.40));
}
.scan-chip.scan-warn  .ch-z { color: var(--copper-bright); text-shadow: 0 0 3px rgba(224,154,104,0.5); }
.scan-chip.scan-warn  .ch-tok { color: var(--copper-bright); }

.scan-chip.scan-fault {
  border-color: var(--alert);
  background: linear-gradient(180deg, rgba(208,69,53,0.15), rgba(0,0,0,0.40));
  box-shadow: 0 0 6px var(--alert-glow);
  animation: chip-fault-pulse 1.2s ease-in-out infinite;
}
.scan-chip.scan-fault .ch-z { color: var(--alert); text-shadow: 0 0 4px var(--alert-glow); font-weight: 700; }
.scan-chip.scan-fault .ch-tok { color: #f0a89c; text-shadow: 0 0 3px var(--alert-glow); }
@keyframes chip-fault-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--alert-glow); }
  50%      { box-shadow: 0 0 10px var(--alert-glow), 0 0 14px rgba(208,69,53,0.5); }
}

.anomaly-scan .scan-footer {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9px;
  color: #7e7e6a;
  letter-spacing: 0.5px;
  line-height: 1.4;
  padding-top: 6px;
  border-top: 1px dashed rgba(176,116,64,0.15);
}
/* Small bezel rivets at 4 cardinal points */
.scope-bezel::before, .scope-bezel::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #888 0%, #444 50%, #1a1a17 100%);
  box-shadow: inset 0 -0.5px 0.5px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.6);
}
.scope-bezel::before { top: 4px; left: 50%; transform: translateX(-50%); }
.scope-bezel::after  { bottom: 4px; left: 50%; transform: translateX(-50%); }

/* The actual CRT face — a transparent dark phosphor window the WebGL shows through */
.scope-face {
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(40, 80, 50, 0.05) 0%,
      rgba(10, 24, 16, 0.15) 50%,
      rgba(0, 0, 0, 0.35) 90%,
      rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.7),
    inset 0 0 12px rgba(62,218,126,0.06);
  position: relative;
  overflow: hidden;
}
/* Phosphor face glow — subtle green tint */
.scope-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(62,218,126,0.07) 0%, transparent 70%);
  pointer-events: none;
  animation: scope-breathe 4.5s ease-in-out infinite;
}
@keyframes scope-breathe {
  0%,100% { opacity: 1.0; }
  50%     { opacity: 0.78; }
}
/* Etched graticule grid — phosphor green minor + major divisions */
.scope-graticule {
  position: absolute; inset: 0;
  background-image:
    /* 40px minor grid */
    repeating-linear-gradient(0deg,
      rgba(62,218,126,0.12) 0px, rgba(62,218,126,0.12) 1px,
      transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg,
      rgba(62,218,126,0.12) 0px, rgba(62,218,126,0.12) 1px,
      transparent 1px, transparent 40px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
/* Center crosshair — major axes */
.scope-crosshair {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg,
      transparent calc(50% - 0.5px),
      rgba(62,218,126,0.32) calc(50% - 0.5px),
      rgba(62,218,126,0.32) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(90deg,
      transparent calc(50% - 0.5px),
      rgba(62,218,126,0.32) calc(50% - 0.5px),
      rgba(62,218,126,0.32) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
  pointer-events: none;
  mix-blend-mode: screen;
}
/* CRT readouts at the 4 corners of the face (clipped by circle, but readable
   near the axes) */
.scope-face > [class^="scope-readout"] {
  position: absolute;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--phosphor);
  text-shadow: 0 0 3px var(--phosphor-glow);
  z-index: 2;
}
.scope-readout-tl { top: 60px;  left: 84px;  }
.scope-readout-tr { top: 60px;  right: 84px; text-align: right; }
.scope-readout-bl { bottom: 60px; left: 84px;  }
.scope-readout-br { bottom: 60px; right: 84px; text-align: right; color: var(--phosphor); }

/* If WebGL not running, fall back to a faint placeholder trace inside the face */
.scope-face.no-webgl::after {
  content: 'NO SIGNAL';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(62,218,126,0.4);
  font-size: 16px;
  letter-spacing: 6px;
  font-family: ui-monospace, monospace;
}

/* When the scope is dimmable+lit, sync the readouts */
@media (max-width: 900px) {
  .scope-mount { grid-template-columns: 1fr; }
  .scope-bezel { width: 320px; height: 320px; }
  .scope-side { flex-direction: row; justify-content: center; }
}