/* showcase.css: the few lab instruments mounted on the public project cards.
   Extracted from the private component lab; each section is scoped to its
   .tm-<slug> root. Bump ?v= in index.html on any change. */

.project-instrument {
  margin-top: 16px;
  max-width: 440px;
  align-self: center;
  width: 100%;
}

/* ===== Emergency stop (tm-estop) ===== */
/* Emergency stop: a latching mushroom actuator on a safety yellow
   collar plate. One overhead light: the plate and collar hold all the
   lighting; only the cap travels and only the arrow glyph rotates. */

.tm-estop {
  display: flex;
  align-items: center;
  gap: var(--tm-space-6);
  flex-wrap: wrap;
  padding: var(--tm-space-2);
  font-family: var(--tm-font-sans);
}

/* ----- Collar plate: raised, chamfered, engraved (yellow is a local
   literal; safety yellow is not a chassis token) ----- */
.tm-estop__mount {
  position: relative;
  flex: none;
  width: 216px;
  height: 216px;
  border-radius: 22px;
  border: 1px solid #9a7c14;
  background:
    radial-gradient(130% 90% at 50% -8%, rgba(255, 255, 255, 0.42), transparent 52%),
    linear-gradient(158deg, #e8c531 0%, #d8b125 48%, #bf991a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 rgba(74, 56, 8, 0.4),
    0 1px 1px rgba(34, 35, 32, 0.2),
    0 4px 8px rgba(34, 35, 32, 0.14),
    0 16px 26px rgba(34, 35, 32, 0.1);
}
/* Chamfer: an inner beveled field line inside the plate edge */
.tm-estop__mount::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(84, 63, 9, 0.42);
  pointer-events: none;
}

/* Faceplate screws: scoped to the component so it is self-contained (the
   shared .screw class is not on the allowlist). Corner offsets are tuned
   for this 216px / 22px-radius plate, not the .chassis. Detail only. */
.tm-estop__screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    linear-gradient(var(--tm-panel-lo), var(--tm-panel-lo)) 50% 50% / 8px 1.5px no-repeat,
    radial-gradient(circle at 40% 35%, #fdfdfa, #b9b8b2);
  box-shadow: inset 0 1px 2px rgba(32, 33, 30, 0.4);
  pointer-events: none;
}
.tm-estop__screw--tl { top: 18px; left: 18px; }
.tm-estop__screw--tr { top: 18px; right: 18px; }
.tm-estop__screw--bl { bottom: 18px; left: 18px; }
.tm-estop__screw--br { bottom: 18px; right: 18px; }

.tm-estop__legend {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font: 700 11px/1 var(--tm-font-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tm-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); /* engraved into the plastic */
  pointer-events: none;
}
.tm-estop__legend--top { top: 17px; }
.tm-estop__legend--bottom {
  bottom: 18px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #6a5312;
}

/* ----- Recessed collar and the dark bore the cap rises from ----- */
.tm-estop__collar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 128px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #c19c1a, #96770f 68%, #7c620c 100%);
  box-shadow:
    inset 0 3px 7px rgba(40, 30, 4, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.tm-estop__bore {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #26120f, #140a09 70%, #0b0605 100%);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

/* ----- Actuator: the native latching button (large hit target) ----- */
.tm-estop__actuator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.tm-estop__actuator:focus-visible {
  outline: none;
  box-shadow: var(--tm-focus);
}

/* Ground shadow on the collar: a static layer. It never rides down with
   the cap; it only tightens toward a contact shadow when the cap seats. */
.tm-estop__cast {
  position: absolute;
  left: 50%;
  top: 100px;
  width: 112px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 34%, rgba(8, 5, 2, 0.52), rgba(8, 5, 2, 0.3) 46%, transparent 72%);
  pointer-events: none;
  transition:
    width var(--tm-normal) var(--tm-ease-mechanical),
    height var(--tm-normal) var(--tm-ease-mechanical),
    top var(--tm-normal) var(--tm-ease-mechanical);
}

/* Black stem: a cylinder with an overhead sheen down its centre */
.tm-estop__stem {
  position: absolute;
  left: 50%;
  top: 88px;
  width: 74px;
  height: 40px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(90deg, #050505 0%, #2e2e2c 20%, #565654 40%, #3a3a38 60%, #111110 82%, #040404 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition:
    transform var(--tm-normal) var(--tm-ease-mechanical),
    opacity var(--tm-fast) linear;
  z-index: 1;
}

/* Red mushroom cap: the only travelling layer. It translates straight
   down, never rotates, so its specular highlight stays overhead. */
.tm-estop__cap {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 96px;
  height: 96px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 1px solid #6c0f0d;
  background:
    radial-gradient(circle at 42% 28%, #ff6f5d 0%, #ef473a 24%, #cf2c23 52%, #a81d18 80%, #86130f 100%);
  box-shadow:
    inset 0 4px 6px rgba(255, 178, 168, 0.5),
    inset 0 2px 0 rgba(255, 205, 196, 0.4),
    inset 0 -13px 18px rgba(84, 10, 8, 0.6),
    inset 0 -3px 1px rgba(58, 6, 5, 0.55),
    0 2px 2px rgba(28, 4, 3, 0.28);
  transition:
    transform var(--tm-normal) var(--tm-ease-mechanical),
    box-shadow var(--tm-normal) linear;
  z-index: 3;
}

/* Static incised ring: the twist groove. It carries the only directional
   highlight of the twist cue and rides straight down with the cap without
   ever rotating, so its top/bottom bevel stays on the overhead axis. */
.tm-estop__cap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(92, 10, 8, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 170, 0.25),
    0 1px 0 rgba(255, 180, 170, 0.3);
  pointer-events: none;
}

/* Twist arrows: the only rotating layer, so they stay flat and tonal
   (solid fill, no bevel, no drop-shadow). Rotating this layer never swings
   a highlight off the overhead axis; the groove sheen lives on the static
   ring above. */
.tm-estop__glyph {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(0deg);
  pointer-events: none;
}
.tm-estop__arrow {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}
.tm-estop__arrow--tl {
  top: 12px;
  transform: translateX(-50%);
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(92, 10, 8, 0.62);
}
.tm-estop__arrow--br {
  bottom: 12px;
  transform: translateX(-50%);
  border-width: 5px 9px 5px 0;
  border-color: transparent rgba(92, 10, 8, 0.62) transparent transparent;
}

.tm-estop__cap-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--tm-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d110e;
  text-shadow: 0 1px 0 rgba(255, 176, 166, 0.55); /* incised into the cap */
  pointer-events: none;
}

/* Hover and press feedback while the line is running */
.tm-estop__actuator:not([aria-pressed="true"]):hover .tm-estop__cap {
  filter: brightness(1.035);
}
.tm-estop__actuator:not([aria-pressed="true"]):active .tm-estop__cap {
  transform: translate(-50%, 4px);
}

/* ----- Latched (halted) state ----- */
.tm-estop.is-halted .tm-estop__cap {
  transform: translate(-50%, 7px);
  box-shadow:
    inset 0 4px 6px rgba(255, 178, 168, 0.4),
    inset 0 2px 0 rgba(255, 205, 196, 0.32),
    inset 0 -13px 18px rgba(84, 10, 8, 0.66),
    inset 0 -3px 1px rgba(58, 6, 5, 0.6),
    0 1px 1px rgba(28, 4, 3, 0.3);
}
.tm-estop.is-halted .tm-estop__stem {
  transform: translateX(-50%) scaleY(0.04);
  opacity: 0;
}
.tm-estop.is-halted .tm-estop__cast {
  width: 82px;
  height: 15px;
  top: 116px;
}

/* Twist release animation (JS adds this class on release only) */
.tm-estop__glyph--twisting {
  animation: tm-estop-twist var(--tm-slow) var(--tm-ease-mechanical) 1;
}
@keyframes tm-estop-twist {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(24deg); }
  100% { transform: rotate(0deg); }
}

/* ----- Status readout ----- */
.tm-estop__panel {
  display: grid;
  gap: 10px;
  align-content: center;
}
.tm-estop__eyebrow { margin: 0; }
.tm-estop__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 11px 15px;
  border-radius: var(--tm-radius-xs);
  border: var(--tm-border);
  background: #e8e7e1;
  box-shadow: var(--tm-shadow-recessed);
}
.tm-estop__led { flex: none; }
.tm-estop__state {
  font: 600 12px/1 var(--tm-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-muted);
}
.tm-estop.is-halted .tm-estop__state { color: var(--tm-ink); }

.tm-estop__hint { max-width: 22ch; margin: 0; }

/* Reduced motion: state still changes, motion is dropped */
@media (prefers-reduced-motion: reduce) {
  .tm-estop__cap,
  .tm-estop__stem,
  .tm-estop__cast,
  .tm-estop__glyph { transition: none; }
  .tm-estop__glyph--twisting { animation: none; }
}

/* ===== Key Lock Switch (tm-keylock) ===== */
/* KEY LOCK SWITCH (tm-keylock)
   Brushed steel arming barrel recessed in a warm collar. The barrel keeps
   all lighting and shadow; only the key and slot layer turns 60deg between
   the LOCKED and ARMED detents. One light source, from above. */

.tm-keylock {
  --tm-kl-barrel: 116px;
  display: inline-block;
  font-family: var(--tm-font-sans);
  color: var(--tm-ink);
}

/* Raised faceplate mounted on the panel */
.tm-keylock__plate {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--tm-space-4);
  padding: 16px 24px 18px;
  border: var(--tm-border);
  border-radius: var(--tm-radius-md);
  background: linear-gradient(145deg, var(--tm-panel-hi), var(--tm-panel));
  box-shadow: var(--tm-shadow-raised);
}
.tm-keylock__plate::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--tm-radius-md) - 5px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

/* Header: engraved legends on plastic */
.tm-keylock__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-4);
  width: 100%;
}
.tm-keylock__header .mono-label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.tm-keylock__ref { opacity: 0.72; }

/* Stage: holds the two printed positions and the switch */
.tm-keylock__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  height: 176px;
}

/* Printed positions at the key's two detents (11 and 1 o'clock). They sit at
   the same plus/minus 30deg the key rests at, so the blade points to its own
   printed label. Engraved into the plastic. */
.tm-keylock__legend {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--tm-muted);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: color var(--tm-fast) var(--tm-ease-mechanical);
  pointer-events: none;
}
.tm-keylock__legend--locked { left: 58px; }
.tm-keylock__legend--armed { left: 142px; }
/* The current position reads as selected: blue */
.tm-keylock[data-state="locked"] .tm-keylock__legend--locked,
.tm-keylock[data-state="armed"] .tm-keylock__legend--armed {
  color: var(--tm-blue);
}

/* The switch: native button, generous hit target, invisible body */
.tm-keylock__switch {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tm-keylock__switch:focus-visible { outline: none; }
.tm-keylock__switch:focus-visible .tm-keylock__collar {
  box-shadow: var(--tm-shadow-recessed), var(--tm-focus);
}

/* Collar: recessed mounting well, static */
.tm-keylock__collar {
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  border: 1px solid rgba(37, 39, 37, 0.42);
  background:
    radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.5), transparent 62%),
    linear-gradient(180deg, var(--tm-panel-lo), var(--tm-panel));
  box-shadow: var(--tm-shadow-recessed);
  transition: box-shadow var(--tm-fast) var(--tm-ease-mechanical);
}

/* Engraved index marks at the two detents (plus/minus 30deg, matching the key
   rest angles). Vertical strokes, so the lit lower lip always reads from the
   bottom under the single overhead light, no matter where around the dial the
   mark sits. */
.tm-keylock__tick {
  position: absolute;
  top: 11px;
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: rgba(45, 47, 46, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.tm-keylock__tick--locked { left: 37px; }
.tm-keylock__tick--armed { right: 37px; }

/* Brushed steel barrel: carries all lighting, never rotates.
   Top edge catches light, lower inner edge shades, cast shadow falls down. */
.tm-keylock__barrel {
  position: relative;
  width: var(--tm-kl-barrel);
  height: var(--tm-kl-barrel);
  border-radius: 50%;
  border: 1px solid rgba(38, 41, 43, 0.6);
  overflow: hidden;
  background: linear-gradient(180deg, #dfe2e4, #b7babc);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.75),
    inset 0 -5px 9px rgba(18, 22, 26, 0.35),
    0 1px 1px rgba(30, 32, 30, 0.22),
    0 3px 6px rgba(30, 32, 30, 0.16),
    0 9px 16px rgba(30, 32, 30, 0.1);
  transition: filter var(--tm-fast) var(--tm-ease-mechanical);
}
.tm-keylock__switch:hover .tm-keylock__barrel { filter: brightness(1.02); }
.tm-keylock__switch:active .tm-keylock__barrel { filter: brightness(0.985); }

/* Spun brushing ring (conic), static under the overhead light */
.tm-keylock__brush {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #c4c8ca 0deg, #eef1f2 24deg, #b4b8ba 60deg, #e7eaeb 96deg,
    #b9bdbf 132deg, #f0f3f4 168deg, #bdc1c3 204deg, #e9ecec 240deg,
    #b2b6b8 276deg, #eef1f2 312deg, #c4c8ca 360deg);
  opacity: 0.9;
  pointer-events: none;
}

/* Fixed overhead highlight and lower shade */
.tm-keylock__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(70% 55% at 50% 10%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(95% 72% at 50% 116%, rgba(18, 24, 30, 0.34), transparent 62%);
  pointer-events: none;
}

/* Rotating unit: keyway slot plus inserted key, and nothing else. Rendered as
   flat silhouettes (solid fills, no vertical gradients, no directional inset
   shadows, no drop highlights), so no lighting or cast shadow travels with the
   60deg turn. All the light lives on the static barrel above. */
.tm-keylock__key {
  position: absolute;
  inset: 0;
  transform: rotate(-30deg);
  transform-origin: 50% 50%;
  transition: transform var(--tm-normal) var(--tm-ease-mechanical);
}
.tm-keylock[data-state="armed"] .tm-keylock__key { transform: rotate(30deg); }

/* Keyway cut into the steel: flat dark silhouette with only a uniform
   (non-directional) edge ring, so no light direction turns with it. */
.tm-keylock__slot {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 9px;
  height: 62px;
  margin-left: -4.5px;
  border-radius: 4px;
  background: #181b1d;
  box-shadow: inset 0 0 0 1px rgba(8, 10, 10, 0.9);
}

/* Flat key blade seated in the slot, with two teeth. Solid fill, no highlight. */
.tm-keylock__blade {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 5px;
  height: 42px;
  margin-left: -2.5px;
  border-radius: 2px;
  background: #5a5e60;
}
.tm-keylock__blade::before,
.tm-keylock__blade::after {
  content: "";
  position: absolute;
  right: -1px;
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: #232628;
}
.tm-keylock__blade::before { bottom: 9px; }
.tm-keylock__blade::after { bottom: 19px; }

/* Key bow (grip) with a hole showing steel through it. Flat solids only, so it
   reads the same at any angle it turns to. */
.tm-keylock__bow {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: #3a3d3f;
  border: 1px solid rgba(14, 16, 16, 0.9);
}
.tm-keylock__bow::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #c6c9ca;
}

/* Status strip: recessed data plate, LED plus text, never color alone.
   Chassis neutral matches the other recessed plates in the system. */
.tm-keylock__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--tm-radius-xs);
  border: 1px solid rgba(45, 47, 46, 0.18);
  background: #e8e7e1;
  box-shadow: var(--tm-shadow-recessed);
}
.tm-keylock__status-text {
  min-width: 6ch;
  color: var(--tm-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Reduced motion: keep the state change, drop the sweep */
@media (prefers-reduced-motion: reduce) {
  .tm-keylock__key,
  .tm-keylock__legend,
  .tm-keylock__collar,
  .tm-keylock__barrel { transition-duration: 0.01ms; }
}

/* ===== Annunciator panel (tm-annunciator) ===== */
/* ============================================================
   ANNUNCIATOR PANEL - tactile modernist
   Dark bezel holding a recessed tray of backlit smoked-glass
   lamp cells. One overhead light: the frame and bolts are raised,
   the tray and each lens are recessed. Lamps emit their severity
   color from behind the glass; nothing floats.
   ============================================================ */

.tm-annunciator {
  max-width: 560px;
  font-family: var(--tm-font-mono);
}

/* ----- Raised dark bezel ----- */
.tm-annunciator__frame {
  position: relative;
  padding: 15px 15px 13px;
  border-radius: var(--tm-radius-sm);
  border: 1px solid #0c0d0b;
  background: linear-gradient(180deg, #34362f 0%, #26281f 58%, #202119 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 3px rgba(0, 0, 0, 0.50),
    0 1px 1px rgba(18, 19, 16, 0.40),
    0 6px 14px rgba(18, 19, 16, 0.28),
    0 16px 30px rgba(18, 19, 16, 0.20);
}

/* Recessed corner bolts: this unit is screwed to the console */
.tm-annunciator__bolt {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(#5b5d56, #5b5d56) 50% 50% / 6px 1.5px no-repeat,
    radial-gradient(circle at 40% 35%, #52544d, #202220);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.tm-annunciator__bolt--tl { top: 9px; left: 9px; }
.tm-annunciator__bolt--tr { top: 9px; right: 9px; }
.tm-annunciator__bolt--bl { bottom: 9px; left: 9px; }
.tm-annunciator__bolt--br { bottom: 9px; right: 9px; }

/* ----- Engraved header ----- */
.tm-annunciator__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-3);
  padding: 0 4px 10px;
}
.tm-annunciator__title {
  font: 600 11px/1 var(--tm-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(228, 231, 222, 0.56);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.60);
}
.tm-annunciator__ref {
  font: 500 10px/1 var(--tm-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 231, 222, 0.32);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.60);
}

/* ----- Recessed lamp tray ----- */
.tm-annunciator__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: var(--tm-radius-xs);
  background: linear-gradient(180deg, #17181300, #0f100c), #14150f;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* ----- Lamp cell: smoked-glass lens set into the tray ----- */
.tm-annunciator__cell {
  --lamp: 19, 224, 195; /* default; overridden per severity below */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid #0b0c0a;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Faint severity film over near-black glass, plus a dark body */
  background:
    linear-gradient(160deg, rgba(var(--lamp), 0.06), rgba(var(--lamp), 0.015) 55%),
    linear-gradient(160deg, #232520, #131409);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  transition:
    background var(--tm-fast) var(--tm-ease-mechanical),
    box-shadow var(--tm-fast) var(--tm-ease-mechanical),
    transform var(--tm-fast) var(--tm-ease-mechanical);
}

/* Overhead reflection on the top of the glass (static, never moves state) */
.tm-annunciator__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.02) 38%,
    transparent 58%
  );
  mix-blend-mode: screen;
}

/* Severity color per cell (rgb triplets match the .led glows) */
.tm-annunciator__cell[data-sev="cyan"]   { --lamp: 19, 224, 195; }
.tm-annunciator__cell[data-sev="orange"] { --lamp: 242, 90, 28; }
.tm-annunciator__cell[data-sev="blue"]   { --lamp: 7, 151, 232; }
.tm-annunciator__cell[data-sev="red"]    { --lamp: 201, 46, 46; }

/* Momentary press feel */
.tm-annunciator__cell:active { transform: translateY(1px); }

/* Engraved legend, barely readable when the lamp is dark */
.tm-annunciator__legend {
  position: relative;
  z-index: 1;
  font: 600 11px/1 var(--tm-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(213, 219, 207, 0.20);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.60);
  transition: color var(--tm-fast) var(--tm-ease-mechanical),
    text-shadow var(--tm-fast) var(--tm-ease-mechanical);
}

/* ----- Lit: lamp toggled on, or every lamp during lamp test ----- */
.tm-annunciator__cell[aria-pressed="true"],
.tm-annunciator.is-testing .tm-annunciator__cell {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--lamp), 0.70), rgba(var(--lamp), 0.18) 68%, rgba(var(--lamp), 0.06) 100%),
    linear-gradient(160deg, #26281f, #16170d);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 0 16px rgba(var(--lamp), 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 10px rgba(var(--lamp), 0.28);
}
/* Bright bloom core, tinted toward the lamp severity so the incised
   letters themselves read in-severity (red FAULT reads red, cyan SYS OK
   reads cyan), not a uniform white. Plain white kept as a fallback. */
.tm-annunciator__cell[aria-pressed="true"] .tm-annunciator__legend,
.tm-annunciator.is-testing .tm-annunciator__cell .tm-annunciator__legend {
  color: #f7fffb;
  color: color-mix(in srgb, rgb(var(--lamp)) 42%, #ffffff);
  text-shadow:
    0 0 5px rgba(var(--lamp), 0.90),
    0 0 10px rgba(var(--lamp), 0.50);
}

/* Focus ring keeps the underlying construction, then adds the blue ring */
.tm-annunciator__cell:focus-visible {
  outline: none;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    var(--tm-focus);
}
.tm-annunciator__cell[aria-pressed="true"]:focus-visible {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 0 16px rgba(var(--lamp), 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 10px rgba(var(--lamp), 0.28),
    var(--tm-focus);
}
/* During a lamp test the cell is lit by .is-testing, whose box-shadow
   carries no ring. This (0,4,0) rule reinstates the focus ring over that
   lit construction so a focused cell never loses its ring mid-hold. */
.tm-annunciator.is-testing .tm-annunciator__cell:focus-visible {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 0 16px rgba(var(--lamp), 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 10px rgba(var(--lamp), 0.28),
    var(--tm-focus);
}

/* ----- Footer: lamp-test key + engraved hint ----- */
.tm-annunciator__foot {
  display: flex;
  align-items: center;
  gap: var(--tm-space-4);
  padding: 12px 4px 2px;
}
.tm-annunciator__test {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Held-down state for keyboard and pointer holds (mirrors .btn-key:active) */
.tm-annunciator .btn-key.is-holding {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.24);
}
.tm-annunciator__hint {
  font: 500 10px/1 var(--tm-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 231, 222, 0.34);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

@media (max-width: 480px) {
  .tm-annunciator__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep state changes, drop the motion */
@media (prefers-reduced-motion: reduce) {
  .tm-annunciator__cell,
  .tm-annunciator__legend,
  .tm-annunciator .btn-key {
    transition-duration: 0.01ms;
  }
}