/* Cabinet anatomy exhibit. Shared primitives live in museum.css. The SVG is coloured here (no inline styles);
   nothing animates, so there is nothing to switch off for reduced motion beyond the hover colour change. */
.ca-stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.ca-frame { margin: 0; }
.ca-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.ca-side { display: grid; gap: 16px; min-width: 0; }
.ca-note-title { margin: 0 0 .4em; font: 700 1.3rem/1.2 var(--f-display); color: var(--ink); }
.ca-note-text { margin: 0; color: var(--ink-2); font-size: 1.04rem; line-height: 1.6; min-height: 7.5em; }
.ca-walk-row { margin-top: 14px; }
.ca-dl { margin: 0; }
.ca-dl dt { margin: 1em 0 .2em; font: 700 1.02rem var(--f-display); color: var(--ink); }
.ca-dl dd { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* the drawing */
.ca-floor { fill: #141218; }
.ca-far { fill: #3b2a20; }
.ca-grain { fill: none; stroke: #4a372a; stroke-width: 1; }
.ca-board { fill: none; stroke: #6b4b33; stroke-width: 8; stroke-linecap: square; }
.ca-board-thin { fill: none; stroke: #6b4b33; stroke-width: 4; }
.ca-tmold { fill: none; stroke: var(--era); stroke-width: 2.5; stroke-linejoin: round; }
.ca-wire { fill: none; stroke: #c7473b; stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.ca-cord { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }
.ca-bezel { fill: none; stroke: #9fd3e6; stroke-width: 3; opacity: .35; }
.ca-frame-line { fill: none; stroke: #6f6a78; stroke-width: 2; }
.ca-tube { fill: #2c2c34; stroke: #8f897d; stroke-width: 1.5; }
.ca-yoke { fill: #b87333; }
.ca-glass { fill: #5d8fa3; }
.ca-chassis { fill: #2f6b3a; }
.ca-lamp { fill: #fff6d8; }
.ca-marquee { fill: var(--gold); }
.ca-magnet { fill: #5a5560; }
.ca-cone { fill: #1c1b20; stroke: #8f897d; stroke-width: 1.5; }
.ca-panel { fill: #1d1b22; stroke: #8f897d; stroke-width: 1.5; }
.ca-panel-top { fill: none; stroke: var(--era); stroke-width: 3; }
.ca-shaft { fill: #c3bcae; }
.ca-knob { fill: var(--red); }
.ca-button { fill: var(--cyan); }
.ca-pcb { fill: #1f6b3b; stroke: #0f3b20; stroke-width: 1.5; }
.ca-chip { fill: #111014; }
.ca-gold { fill: #d9a630; }
.ca-mech { fill: #77727f; }
.ca-coin { fill: #d9a630; }
.ca-chute { fill: none; stroke: #77727f; stroke-width: 6; }
.ca-meter { fill: #e8e2d4; }
.ca-box { fill: #4b4757; stroke: #8f897d; stroke-width: 1.5; }
.ca-door { fill: #9a96a3; }
.ca-slot { fill: #111; }
.ca-psu { fill: #4b4757; stroke: #8f897d; stroke-width: 1.5; }
.ca-coil { fill: none; stroke: #b87333; stroke-width: 3; }
.ca-psu-board { fill: #1f6b3b; }
.ca-cap { fill: #3a64b8; }
.ca-kick { fill: #c3bcae; }

/* hotspots: a real focus ring and a clear selected state, not colour alone (the selected part gets a thick dashed outline) */
.ca-hot { cursor: pointer; outline: none; }
.ca-hit { fill: rgba(0, 0, 0, 0); stroke: transparent; stroke-width: 3; }
.ca-hot:hover .ca-hit { stroke: var(--ink-3); }
.ca-hot:focus-visible .ca-hit { stroke: var(--gold); stroke-width: 4; }
.ca-hot.is-on .ca-hit { fill: rgba(255, 194, 61, .12); stroke: var(--gold); stroke-width: 3; stroke-dasharray: 8 5; }
.ca-badge circle { fill: #0a090c; stroke: var(--gold); stroke-width: 2.5; }
.ca-badge text { fill: var(--ink); font: 700 15px var(--f-mono); text-anchor: middle; }
.ca-hot.is-on .ca-badge circle { fill: var(--gold); }
.ca-hot.is-on .ca-badge text { fill: #0a090c; }

@media (max-width: 760px) {
  .ca-stage { grid-template-columns: minmax(0, 1fr); }
  .ca-note-text { min-height: 0; }
}