/* Prop surfaces use the materials and light of their rooms. */
.bench {
  margin: 13px 0 3px;
  padding: clamp(10px, 2.4vw, 20px);
  border: 1px solid var(--bench-edge);
  border-radius: 3px;
  background: var(--bench-surface);
  box-shadow: inset 0 0 0 3px #100e1366, inset 0 0 18px #0006, 2px 4px #09060880;
}
.bench-brass {
  --bench-edge: #9c7545;
  --bench-surface: repeating-linear-gradient(4deg, #24160545 0 1px, transparent 2px 5px),
    radial-gradient(ellipse at 47% 15%, #624532, #31201a 68%);
}
.bench-steel {
  --bench-edge: #607b77;
  --bench-surface: repeating-linear-gradient(0deg, #a8a0840d 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #344541, #172626 66%);
}
.bench-stage {
  --bench-edge: #946454;
  --bench-surface: radial-gradient(ellipse at 50% 17%, #4a3040, #291d2a 59%, #201a20);
}
.bench-controls, .receiver-docs, .lens-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bench-key {
  min-width: 36px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid #9b7956;
  border-top-color: #c4a377;
  border-bottom: 3px solid #291b19;
  background: linear-gradient(#5e493c, #392c2a);
  color: #fbe5ba;
  font: 700 13px var(--mono);
}
.bench-key[aria-pressed="true"] { background: #a77b4d; color: #1d1716; border-top-color: #e2bd81; }
.bench-key:hover:enabled { filter: brightness(1.23); }
.bench-status { min-height: 1.35em; margin: 9px 0 7px; font-size: .91em; }

.drive-train {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, 1fr) minmax(18px, .6fr)) minmax(42px, 1fr);
  gap: 3px;
  align-items: center;
  justify-items: stretch;
}
.drive-gear {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 88px;
  padding: 4px 2px;
  color: #f5d3a3;
  background: #1f1716;
  border: 1px solid #9b734c;
  font: 12px var(--mono);
}
.drive-gear svg { max-width: 100%; height: auto; stroke: #efbc6a; stroke-width: 1.3; fill: #865936; }
.drive-gear svg path { stroke: #d49f5a; stroke-width: 4.4; }
.drive-gear svg circle:nth-of-type(2) { fill: #2d2321; }
.drive-gear small { color: #f0d2a8; font: 9px var(--mono); }
.drive-gear.fixed { background: #633e2b; border-color: #805c3b; }
.drive-socket i {
  display: block;
  width: 31px;
  height: 31px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 3px inset #997c55;
  background: radial-gradient(circle, #57382b 23%, #1d1714 30% 49%, #3f2b20 63%, #241713 67%);
}
.drive-join { display: grid; justify-items: center; gap: 3px; color: #e0b588; font: 11px var(--mono); }
.drive-join::before { content: ""; width: 100%; height: 4px; background: #835b3d; border-top: 1px solid #ac8359; }
.drive-join.matched::before { background: #9ab76e; box-shadow: 0 0 8px #a2da6770; }
.drive-tray { justify-content: center; margin-top: 10px; }
.drive-tray .drive-gear { min-width: 53px; min-height: 65px; }
.drive-tray svg { width: 45px; }
.drive-tray [aria-pressed="true"] { border-color: #ffcc7b; background: #563725; }
.drive-tray button:disabled { opacity: .42; }

.pendulum-level { text-align: center; background: #1f1716; border: 1px solid #836144; }
.pendulum-level svg { display: block; width: 100%; height: auto; max-width: 440px; margin: auto; overflow: visible; }
.clock-fulcrum { fill: #8b6750; stroke: #d0a578; }
.clock-beam { stroke: #b6844c; stroke-width: 7; stroke-linecap: round; }
.clock-notches { stroke: #e4bc88; stroke-width: 2; }
.clock-hanger { stroke: #b8a08a; stroke-width: 2; }
.pendulum-level rect { fill: #a36e3e; stroke: #e2b175; stroke-width: 1.4; }
.pendulum-level text { fill: #211712; font: bold 15px var(--mono); }
.pendulum-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; }
.bench fieldset { min-width: 0; margin: 0; padding: 6px; border: 1px solid #c6ad825c; }
.bench legend { padding: 0 3px; font: 700 11px var(--mono); color: #ead5b0; }
.pendulum-controls fieldset div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.pendulum-controls .bench-key { min-width: 0; padding-inline: 0; }

.pressure-bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; text-align: center; }
.pressure-gauge { margin: 0; }
.pressure-gauge svg { width: min(100%, 102px); height: auto; display: block; margin: auto; }
.gauge-face { fill: #d3c4a5; stroke: #394740; stroke-width: 5; }
.gauge-ticks { stroke: #2b3934; stroke-width: 1.4; }
.gauge-target { stroke: #438555; stroke-width: 4; }
.gauge-needle { stroke: #983f34; stroke-width: 2.8; stroke-linecap: round; }
.gauge-pivot { fill: #41382e; }
.pressure-gauge figcaption { display: grid; color: #e4d8b8; font: 11px var(--mono); gap: 3px; }
.pressure-gauge.on-target figcaption { color: #b1eaa9; }
.pressure-gauge.on-target .gauge-face { fill: #c2d4aa; }
.pressure-controls { margin-top: 9px; }
.pressure-controls fieldset small { font: 9px var(--mono); color: #c8ceae; }
.pressure-dial {
  margin: 0 auto 5px;
  width: 36px;
  height: 36px;
  border: 3px solid #758b80;
  border-radius: 50%;
  background: repeating-conic-gradient(#354542 0 20deg, #4d615b 22deg 40deg);
  box-shadow: 0 2px 5px #000, inset 0 0 0 3px #273635;
  transform: rotate(var(--detent));
}
.pressure-dial::before { content: ""; display: block; width: 3px; height: 11px; margin: 0 auto; background: #edd5a6; }
.collar-buttons { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3px; align-items: center; margin: auto; max-width: 114px; }
.collar-buttons .bench-key { min-width: 0; }
.collar-buttons output { font: 14px var(--mono); color: #f4d9a8; }
.service-stamp { margin: 9px 0 3px; padding: 6px 8px; border: 1px dashed #89998b; font-size: .84em; }
.service-stamp b { margin-right: 5px; font: 10px var(--mono); color: #b8d1c1; }

.plot-example { margin: 0 0 6px; text-align: center; font: 12px var(--mono); }
.plot-example span { color: #f8c387; margin-left: 5px; }
.light-plot { margin: 0 auto; border-spacing: 3px; }
.light-plot th { color: #f4c4a1; font: 700 12px/1.12 var(--mono); white-space: nowrap; }
.light-plot th[scope="row"] { padding-right: 5px; text-align: right; }
.light-plot th[scope="col"] { vertical-align: bottom; }
.plot-lamp {
  display: block;
  width: clamp(30px, 7vw, 47px);
  height: clamp(30px, 7vw, 47px);
  border: 1px solid #9a7869;
  border-radius: 4px;
  background: radial-gradient(circle, #82625d 0 23%, #43333d 28% 38%, #2e232a 40%);
  box-shadow: inset 0 0 0 2px #1b1419, 0 2px #140e12;
}
.plot-lamp[aria-pressed="true"] {
  background: radial-gradient(circle, #fff2bd 0 14%, #efb561 19% 28%, #79513a 39%, #2e232a 53%);
  border-color: #dca46e;
}
.plot-lamp:hover { border-color: #ffe1a5; }
.lens-controls { margin-top: 6px; }
.lens-controls p { margin: 0; font: 12px var(--mono); color: #efc999; }

.receiver-docs { margin: 7px 0 11px; }
.receiver-report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; }
.receiver-report label { color: #d2e2cf; font: 11px/1.25 var(--mono); }
.receiver-report select, .receiver-report input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 7px 4px;
  margin-top: 4px;
  color: #e6f1dc;
  background: #142122;
  border: 1px solid #819589;
  border-radius: 2px;
  font: 13px var(--mono);
}
.receiver-report .mechanism-button { grid-column: 1 / -1; justify-self: start; }
.bridge-record {
  padding: 13px;
  margin: 10px 0;
  border: 1px solid #d4c7a3;
  color: #1e3330;
  background: repeating-linear-gradient(0deg, #53685a18 0 1px, transparent 1px 23px),
    linear-gradient(110deg, #c3b490, #e3d8b9 24% 85%, #c1b28d);
  box-shadow: 3px 4px #090f13;
}
.bridge-record header { display: grid; gap: 3px; border-bottom: 3px double #53685a; padding-bottom: 5px; font: 10px var(--mono); }
.bridge-record header b { font: 700 16px var(--mono); }
.bridge-record .engineer-hand { color: #213936; font: italic 16px/1.26 var(--book); margin: 8px 0; }
.bridge-record dl { margin: 8px 0; }
.bridge-record dl div { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid #7180748a; }
.bridge-record dd { margin: 0; color: #7c352c; font: 700 11px var(--mono); }
.bridge-record dt { font: 12px var(--mono); }
.bridge-record footer { display: flex; justify-content: space-between; border-top: 1px solid #53685a; padding-top: 4px; font: 10px var(--mono); }
.compass-layout { display: grid; grid-template-columns: 34% 1fr; gap: 9px; align-items: center; }
.compass-layout svg { max-width: 100%; height: auto; stroke: #476b62; fill: none; }
.compass-layout svg text { font: bold 13px var(--mono); fill: #24453e; stroke: none; text-anchor: middle; }
.compass-layout .compass-reverse { fill: #a14837; stroke: #7c352c; }
.compass-layout .compass-needle { fill: #526b5f; }
.compass-layout table { width: 100%; border-collapse: collapse; text-align: left; font: 12px var(--mono); }
.compass-layout td, .compass-layout th { padding: 3px; border-bottom: 1px solid #53685a56; }

.guide-sets { display: grid; gap: 8px; }
.guide-set { padding: 6px 8px; background: #2d2428; border: 1px solid #74574b; }
.guide-set h3 { margin: 0 0 4px; color: #f1d6a5; font: 700 15px var(--book); }
.guide-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-cover { position: relative; margin: 0; border: 1px solid var(--ticket-edge); border-left: 5px solid var(--ticket-dark); box-shadow: 2px 2px #161017; }
.guide-cover img { display: block; width: 100%; height: clamp(35px, 9vw, 61px); object-fit: cover; object-position: 50% 43%; }
.guide-cover:nth-child(2) img { object-position: 85% 62%; filter: sepia(.32) contrast(1.07); }
.guide-cover figcaption { padding: 2px 4px; color: var(--ticket-light); background: var(--ticket-dark); font: 10px var(--mono); }
.guide-warning { display: flex; gap: 9px; align-items: center; margin-top: 8px; }
.guide-warning img { width: 61px; height: 60px; border: 1px solid #927a63; background: #3c2b32; object-fit: cover; object-position: center 15%; animation: nat-rush-in .33s ease-out both; }
.guide-warning blockquote { margin: 0; font: italic 16px/1.2 var(--book); }
.guide-warning cite { color: #dbb780; margin-left: 6px; }
@keyframes nat-rush-in { from { opacity: 0; transform: translateX(-22px); } }
.dispatch-traces { margin: 8px 0; padding: 0; display: grid; gap: 3px; list-style: none; font: 11px/1.35 var(--mono); color: #b1ba92; }
.dispatch-traces [aria-current] { color: #e7f0c7; }
.dispatch-traces span { color: #c6d896; display: inline-block; min-width: 22px; }

@media (max-width: 520px) {
  .receiver-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pressure-controls fieldset { padding-inline: 3px; }
  .drive-train { gap: 1px; }
  .drive-gear { min-height: 67px; }
}
@media (prefers-reduced-motion: reduce) { .guide-warning img { animation: none; } }