/* App shell styles: full-window canvas and the loading overlay. */
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #14171b; overflow: hidden; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e8eaed; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #14171b; z-index: 20; transition: opacity 0.35s ease; }
#overlay.done { opacity: 0; pointer-events: none; }
#overlay.hidden { display: none; }
#overlay .card { width: min(26rem, 88vw); padding: 1.5rem 1.75rem; background: #1d2126; border: 1px solid #343a42; border-radius: 10px; }
#overlay h1 { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 600; }
#overlay p { margin: 0 0 0.75rem; }
#overlay progress { width: 100%; height: 0.5rem; margin-bottom: 0.75rem; accent-color: #6aa9ff; }
#overlay .help { color: #b7bec7; font-size: 0.85rem; }
#overlay code { font: 0.85em ui-monospace, Menlo, monospace; }
#overlay button { font: inherit; padding: 0.4rem 1rem; border-radius: 6px; border: 1px solid #6aa9ff; background: #1d3a63; color: #fff; cursor: pointer; }
#overlay button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
#overlay.fatal #overlay-text { color: #ffb4a8; font-weight: 600; }
#overlay.fatal progress, #overlay.fatal .help { display: none; }
.noscript { position: fixed; top: 1rem; left: 1rem; z-index: 30; color: #fff; }

@media (prefers-reduced-motion: reduce) { #overlay { transition: none; } }

/* [interact] begin */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
#stage canvas:focus-visible { outline: 3px solid #ffd54a; outline-offset: -3px; }

.toolbar { position: fixed; top: 10px; left: 10px; z-index: 12; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100vw - 20px); padding: 6px; background: rgba(20, 23, 27, 0.92); border: 1px solid #343a42; border-radius: 8px; }
.toolbar-group { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; padding-right: 10px; border-right: 1px solid #343a42; }
.toolbar button, .help-overlay button, .controls-panel button { font: inherit; font-size: 0.85rem; color: #e8eaed; background: #232830; border: 1px solid #4a525c; border-radius: 6px; padding: 0.3rem 0.65rem; cursor: pointer; }
.toolbar button:hover, .help-overlay button:hover, .controls-panel button:hover { background: #2c3440; }
.toolbar button[aria-current="true"] { background: #1d3a63; border-color: #6aa9ff; color: #fff; }
.toolbar button[aria-pressed="true"] { background: #1d3a63; border-color: #6aa9ff; color: #fff; }
.toolbar button:focus-visible, .help-overlay button:focus-visible, .controls-panel button:focus-visible, .help-overlay input:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

.panel { color: #e8eaed; background: rgba(20, 23, 27, 0.94); border: 1px solid #343a42; border-radius: 8px; }
.panel h2 { margin: 0; padding: 0.6rem 0.8rem 0.4rem; font-size: 0.95rem; font-weight: 600; }
.controls-panel { position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 12; width: min(19rem, calc(100vw - 20px)); display: flex; flex-direction: column; }
.controls-panel .panel-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 0.8rem 0.8rem; }
.controls-panel h3 { margin: 0.7rem 0 0.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #b7bec7; }
.controls-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.controls-panel button { width: 100%; text-align: left; overflow-wrap: anywhere; }
.controls-panel button[aria-pressed="true"] { background: #1d3a63; border-color: #6aa9ff; color: #fff; }
.controls-panel .hint { color: #ffd54a; }

.help-overlay { position: fixed; top: 64px; left: 10px; z-index: 14; width: min(30rem, calc(100vw - 20px)); max-height: calc(100vh - 80px); overflow: auto; padding-bottom: 0.8rem; }
.help-overlay table { margin: 0 0.8rem 0.6rem; border-collapse: collapse; font-size: 0.85rem; }
.help-overlay th { text-align: left; font-weight: 600; padding: 0.2rem 0.8rem 0.2rem 0; white-space: nowrap; vertical-align: top; }
.help-overlay td { padding: 0.2rem 0; color: #cfd5dc; }
.help-overlay .check { display: block; margin: 0 0.8rem 0.6rem; font-size: 0.85rem; }
.help-overlay > button { margin: 0 0.8rem; }

#messages { position: fixed; left: 10px; bottom: 10px; z-index: 13; display: grid; gap: 6px; max-width: min(28rem, calc(100vw - 20px)); }
.message { padding: 0.45rem 0.7rem; border-radius: 6px; font-size: 0.85rem; background: rgba(20, 23, 27, 0.94); border: 1px solid #4a525c; color: #e8eaed; }
.message.warn { border-color: #ffd54a; }
.message.error { border-color: #ff8a7a; }

.hover-label { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; color: #fff; background: rgba(20, 23, 27, 0.92); border: 1px solid #4a525c; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .toolbar button, .controls-panel button { transition: none; } }
/* [interact] end */

/* [interact] begin */
.seat-bar { position: fixed; left: 10px; bottom: 10px; z-index: 12; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100vw - 340px); padding: 6px; background: rgba(20, 23, 27, 0.92); border: 1px solid #343a42; border-radius: 8px; }
.seat-group { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; padding-right: 10px; border-right: 1px solid #343a42; }
.seat-group:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.seat-bar button { font: inherit; font-size: 0.85rem; color: #e8eaed; background: #232830; border: 1px solid #4a525c; border-radius: 6px; padding: 0.3rem 0.65rem; cursor: pointer; }
.seat-bar button:hover { background: #2c3440; }
.seat-bar button[aria-pressed="true"] { background: #1d3a63; border-color: #6aa9ff; color: #fff; }
.seat-bar button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
body:has(.seat-bar:not([hidden])) #messages { bottom: max(64px, calc(var(--seatbar-h, 0px) + 20px)); }
/* [interact] end */

/* [hmi] begin */
#scenario-player { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 10; width: 15.5rem; background: rgba(20, 23, 27, 0.92); border: 1px solid #343a42; border-radius: 10px; color: #e8eaed; font-size: 0.85rem; }
#scenario-player button, #scenario-player select { font: inherit; color: #e8eaed; background: #232a31; border: 1px solid #4a5360; border-radius: 6px; padding: 0.25rem 0.5rem; }
#scenario-player button:focus-visible, #scenario-player select:focus-visible, #scenario-player input:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
#sp-toggle { width: 100%; text-align: left; border: 0 !important; border-radius: 10px !important; background: transparent !important; font-weight: 600; cursor: pointer; padding: 0.45rem 0.7rem !important; }
#sp-body { display: grid; gap: 0.3rem; padding: 0 0.7rem 0.7rem; }
#sp-body[hidden] { display: none; }
#sp-body label { color: #b7bec7; font-size: 0.78rem; margin-top: 0.2rem; }
#scenario-player .sp-row { display: flex; gap: 0.4rem; align-items: center; }
#scenario-player .sp-row input[type=range] { flex: 1; min-width: 0; }
#scenario-player .sp-small { margin: 0; color: #b7bec7; font-size: 0.75rem; line-height: 1.3; }
#sp-caption { margin: 0; min-height: 1.2em; color: #ffd54a; font-weight: 600; }
#sp-elapsed, #sp-time-out { font-variant-numeric: tabular-nums; color: #e8eaed; }
/* [hmi] end */

/* [integration] the scenario player and the seat bar share the bottom-left corner: the player rises above the seat bar, and messages clear the player */
body:has(.seat-bar:not([hidden])) #scenario-player { bottom: max(64px, calc(var(--seatbar-h, 0px) + 20px)); }
#messages { left: 17rem; }

/* [design] begin */
.design-panel { position: fixed; top: 64px; right: calc(min(19rem, 100vw - 20px) + 20px); z-index: 12; width: min(23rem, calc(100vw - 20px)); max-height: calc(100vh - 74px); display: flex; flex-direction: column; font-size: 0.85rem; }
body:has(#controls-panel[hidden]) .design-panel { right: 10px; }
.design-panel[hidden] { display: none; }
.design-panel h3 { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; }
.design-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0.8rem 0.5rem; }
.design-panel button, .design-panel select, .design-panel textarea { font: inherit; font-size: 0.82rem; color: #e8eaed; background: #232830; border: 1px solid #4a525c; border-radius: 6px; padding: 0.25rem 0.55rem; }
.design-panel button { cursor: pointer; }
.design-panel button:hover { background: #2c3440; }
.design-panel button:disabled { opacity: 0.5; cursor: default; }
.design-panel button[aria-selected="true"], .design-panel button[aria-pressed="true"] { background: #1d3a63; border-color: #6aa9ff; color: #fff; }
.design-panel button:focus-visible, .design-panel select:focus-visible, .design-panel textarea:focus-visible, .design-panel input:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.design-tabpanel { overflow-y: auto; overflow-x: hidden; padding: 0 0.8rem 0.8rem; }
.design-tabpanel[hidden] { display: none; }
.design-hint { margin: 0 0 0.5rem; color: #b7bec7; font-size: 0.78rem; line-height: 1.35; }
.design-inspect dl { margin: 0; display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.25rem 0.6rem; }
.design-inspect dt { color: #b7bec7; }
.design-inspect dd { margin: 0; overflow-wrap: anywhere; }
.design-warn { color: #ffb454; font-weight: 600; }
.design-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 0.5rem; }
.design-matrix button { padding: 0.7rem; font-size: 1.1rem; font-weight: 600; }
.design-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.3rem 0; }
.design-row label { flex: 0 0 8.5rem; color: #b7bec7; }
.design-row input[type=range] { flex: 1 1 6rem; min-width: 0; }
.design-row select { flex: 1 1 8rem; min-width: 0; max-width: 100%; }
.design-ergo fieldset { border: 1px solid #343a42; border-radius: 6px; margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; }
.design-ergo legend { color: #b7bec7; padding: 0 0.3rem; }
.design-ergo label { display: block; }
.design-readouts { margin: 0; padding-left: 1.1rem; color: #d8dce1; line-height: 1.4; }
.design-pins-list, .design-measure-list { margin: 0.4rem 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.design-pins-list li button, .design-measure-list li button { margin: 0.2rem 0.3rem 0 0; }
.design-pins-status, .design-measure-status { margin: 0.3rem 0; color: #d8dce1; min-height: 1.2em; }
.design-pins-warning { margin: 0; color: #ffb454; }
.design-pin-note { overflow-wrap: anywhere; }
.design-pin-node { color: #b7bec7; }
.design-note-editor { display: grid; gap: 0.35rem; margin: 0.4rem 0; padding: 0.5rem; border: 1px solid #4a525c; border-radius: 6px; }
.design-note-editor textarea { width: 100%; min-height: 5rem; box-sizing: border-box; resize: vertical; }
.design-note-count { color: #b7bec7; font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .design-panel button { transition: none; } }
/* [design] end */

/* [configurator] begin */
/* Configure tab (design/configure.js): one fieldset per option family; contrast as the other design tabs (AC-5.11) */
.cfg-family { border: 1px solid #343a42; border-radius: 6px; margin: 0 0 0.6rem; padding: 0.4rem 0.6rem 0.5rem; min-width: 0; }
.cfg-family legend { color: #d8dce1; padding: 0 0.3rem; font-weight: 600; }
.cfg-option { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.5rem; align-items: center; padding: 0.2rem 0; color: #e8eaed; cursor: pointer; }
.cfg-option input { margin: 0; width: 1rem; height: 1rem; accent-color: #6aa9ff; }
.cfg-option input:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.cfg-option input[aria-disabled="true"] { cursor: not-allowed; }
.cfg-option.cfg-forbidden .cfg-label { color: #b7bec7; }
.cfg-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.4rem; border-radius: 50%; border: 1px solid #8a929c; vertical-align: -0.08rem; }
.cfg-tag { font-size: 0.7rem; color: #ffd54a; border: 1px solid #6b5a1f; border-radius: 4px; padding: 0 0.3rem; }
.cfg-rule { grid-column: 2 / 4; color: #ffb454; font-size: 0.76rem; line-height: 1.3; }
.cfg-rule[hidden] { display: none; }
.cfg-note { margin: 0.2rem 0 0; color: #b7bec7; font-size: 0.78rem; }
.cfg-message { margin: 0.2rem 0 0; min-height: 1.2em; color: #d8dce1; font-size: 0.8rem; }
/* [configurator] end */

/* photo mode (DESIGN 25.11): the overlay while the scene is prepared, the sample counter and the Save and Exit buttons; the panels that change the
   vehicle state or the layout are hidden while it is on */
.photo-overlay { position: fixed; inset: 0; z-index: 18; display: flex; align-items: center; justify-content: center; background: rgba(20, 23, 27, 0.72); }
.photo-overlay[hidden] { display: none; }
.photo-overlay .card { width: min(24rem, 88vw); padding: 1.25rem 1.5rem; }
.photo-overlay h2 { margin: 0 0 0.6rem; padding: 0; font-size: 1.05rem; }
.photo-overlay p { margin: 0 0 0.7rem; color: #cfd5dc; }
.photo-overlay progress { width: 100%; height: 0.5rem; margin-bottom: 0.75rem; accent-color: #6aa9ff; }
.photo-overlay button, .photo-panel button { font: inherit; font-size: 0.85rem; color: #e8eaed; background: #232830; border: 1px solid #4a525c; border-radius: 6px; padding: 0.3rem 0.65rem; cursor: pointer; }
.photo-overlay button:hover, .photo-panel button:hover { background: #2c3440; }
.photo-overlay button:focus-visible, .photo-panel button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.photo-panel { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 13; display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 0.85rem; }
.photo-panel[hidden] { display: none; }
.photo-panel output { min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.photo-note { color: #ffd54a; }
.photo-mode .controls-panel, .photo-mode .design-panel, .photo-mode .seat-bar, .photo-mode #scenario-player { display: none !important; }

/* A narrow window (720 px wide is the 1440 px one at 200 % zoom): the panels that sit at the top start under the last row of the toolbar, which wraps (ui.js sets
   --toolbar-bottom), and are as high as what is left. AC-5.11: nothing is covered or cut off. */
@media (max-width: 1100px) {
  .controls-panel { top: var(--toolbar-bottom, 64px); }
  .design-panel, .help-overlay { box-sizing: border-box; top: var(--toolbar-bottom, 64px); max-height: calc(100vh - var(--toolbar-bottom, 64px) - 10px); }
}