/* Kantoor in 3D (snede SJ-kantoor, 21/10/2026). Antraciet met champagne, zoals de huisstijl; het canvas zelf mag
   een eigen omgeving hebben (UI-model), de bediening en labels volgen dezelfde kleuren. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: #1b1e22; color: #f0f2f1; font: 13px/1.5 "Instrument Sans", "Segoe UI", Arial, sans-serif; }
button { color: inherit; cursor: pointer; font: inherit; touch-action: manipulation; }
#stage, #stage canvas { display: block; height: 100%; inset: 0; position: fixed; width: 100%; }
#labels { inset: 0; pointer-events: none; position: fixed; }
.agentLabel { background: #1d2024e8; border: 1px solid #ffffff2a; border-radius: 6px; box-shadow: 0 3px 12px #0006; font-size: 11px; padding: 4px 9px; pointer-events: auto; position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.agentLabel b { font-weight: 600; }
.agentLabel em { background: #dcc39a; border-radius: 4px; color: #1b1712; font-style: normal; font-weight: 700; margin-left: 6px; padding: 0 5px; }
.agentLabel .dot { background: #9fa7a3; border-radius: 50%; display: inline-block; height: 6px; margin-right: 6px; width: 6px; }
.agentLabel.s-wacht { border-color: #dcc39a; }
.agentLabel.s-wacht .dot { background: #dcc39a; }
.agentLabel.s-werk .dot, .agentLabel.s-rust .dot { background: #8fc5a5; }
.agentLabel.s-uit { color: #aab1ad; opacity: .8; }
.agentLabel.s-uit .dot { background: #4a4f54; }
.agentLabel.gekozen { box-shadow: 0 0 0 2px #dcc39a; }
.agentLabel.mijn { border-style: dashed; pointer-events: none; }
.agentLabel:focus-visible, .bediening button:focus-visible { outline: 3px solid #dcc39a; outline-offset: 2px; }
.bediening { display: flex; gap: 6px; position: fixed; right: 12px; top: 12px; }
.bediening button { background: #1d2024e8; border: 1px solid #ffffff2a; border-radius: 6px; padding: 6px 10px; }
.bediening button:hover { border-color: #dcc39a; }
.legende { bottom: 8px; color: #aab1ad; font-size: 11px; left: 12px; margin: 0; position: fixed; }
.legende span::before { border-radius: 50%; content: ""; display: inline-block; height: 7px; margin: 0 4px 0 8px; width: 7px; }
.legende .s-wacht::before { background: #dcc39a; } .legende .s-werk::before, .legende .s-rust::before { background: #8fc5a5; } .legende .s-uit::before { background: #4a4f54; }
.melding { background: #1d2024e8; border: 1px solid #ffffff2a; border-radius: 6px; left: 12px; margin: 0; padding: 8px 12px; position: fixed; top: 12px; }
@media (max-width: 700px) { .legende { display: none; } .agentLabel { font-size: 9px; padding: 3px 6px; } }