/* Drive page: the field on top, results and panels below. */
.stage-box { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.stage { position: relative; height: min(64vh, 620px); min-height: 320px; background: #070d1e; outline: none; touch-action: none; }
.stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.stage canvas { display: block; width: 100%; height: 100%; }
.hud { position: absolute; inset: 10px 10px auto 10px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.hud > div { background: rgba(7, 13, 30, .78); color: #fff; border-radius: 10px; padding: 6px 14px; display: grid; line-height: 1.15; }
.hud span { font-size: 13px; color: #b9c3d6; text-transform: uppercase; letter-spacing: .06em; }
.hud b { font-size: 30px; font-variant-numeric: tabular-nums; }
.hud-score { text-align: right; }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(7, 13, 30, .85); color: #fff; border-radius: 999px; padding: 6px 16px; font-weight: 700; opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; }
.stage-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 12px; }
.opt { display: flex; gap: 6px; align-items: center; font-size: 15px; cursor: pointer; }
.stage-note { margin: 0; padding: 0 12px 10px; }

.drive-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .drive-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 12px 14px; min-width: 0; }
.card-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.card-table th { text-align: left; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); padding: 4px 6px; }
.card-table td { border-bottom: 1px solid var(--soft); padding: 6px; vertical-align: top; }
.card-table td:first-child small { display: block; color: var(--muted); }
.card-table kbd { font-family: var(--mono); font-size: 13px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.card-table .state { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-table tr.fixed td { color: var(--muted); }
.parts { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin: 0; font-variant-numeric: tabular-nums; }
.parts dt { color: var(--muted); }
.parts dd { margin: 0; font-weight: 700; text-align: right; }
.parts .sum { border-top: 1px solid var(--line); padding-top: 4px; color: var(--ink); }

.results { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 14px; display: grid; gap: 10px; }
.results-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.results-head h2 { margin: 0; font-size: 22px; }

/* score-over-time chart: palette slots 1 to 6 of the dataviz reference palette, light and dark validated */
.viz-root {
  --surface-1: var(--panel); --text-primary: var(--ink); --text-secondary: var(--muted); --grid: var(--soft); --axis: var(--line);
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300;
  --band: rgba(120, 120, 120, .08);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --band: rgba(255, 255, 255, .05); }
}
:root[data-theme="dark"] .viz-root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --band: rgba(255, 255, 255, .05); }
.viz-root { display: grid; gap: 8px; position: relative; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-secondary); }
.viz-legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-svg text { font: 12px var(--body); fill: var(--text-secondary); }
.viz-svg .lbl { fill: var(--text-primary); font-weight: 700; }
.viz-tip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--axis); border-radius: 8px; padding: 6px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.15); display: grid; gap: 2px; min-width: 150px; z-index: 2; }
.viz-tip .row { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; }
.viz-tip .row b { font-variant-numeric: tabular-nums; color: var(--text-primary); text-align: right; }
.viz-tip .row span { color: var(--text-secondary); }
.viz-tip .key { width: 12px; height: 2px; border-radius: 1px; }
.viz-tip .head { font-weight: 700; color: var(--text-primary); }
.viz-table { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; width: 100%; }
.viz-table th, .viz-table td { padding: 4px 8px; border-bottom: 1px solid var(--soft); text-align: right; }
.viz-table th:first-child, .viz-table td:first-child { text-align: left; }
.viz-scroll { overflow-x: auto; }