/* POV colors are independent of the surrounding light/dark application theme. */
.camera-switch{position:absolute;top:105px;left:20px;z-index:6;display:flex;gap:4px;padding:5px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 12px #00000012}
.camera-switch button{padding:8px 13px;min-height:34px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:10px;cursor:pointer;transition:background-color 140ms ease,transform 140ms ease-out}
.camera-switch button[aria-pressed=true]{background:#c72d21;color:#fff;box-shadow:0 1px 3px #0003}.camera-switch button:active{transform:scale(.97)}.camera-switch button:focus-visible{outline:2px solid #e3a744;outline-offset:2px}
.stage:is([data-camera=cockpit],[data-camera=tcam]){--ink:#f7f5eb;--muted:#c3cbd2;--line:#ffffff26;--soft:#ffffff15;color:#f7f5eb;background:#111b22}
.stage:is([data-camera=cockpit],[data-camera=tcam]) canvas{image-rendering:pixelated}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .stage-heading{left:0;right:0;top:0;padding:18px 22px 26px;background:linear-gradient(#101a24eb,#101a24b0 65%,transparent);color:#fff;pointer-events:none;text-shadow:0 1px 2px #0006}
.stage:is([data-camera=cockpit],[data-camera=tcam]) h1{font-size:30px;color:#fff}.stage:is([data-camera=cockpit],[data-camera=tcam]) .track-meta{color:#fff}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .overline,.stage:is([data-camera=cockpit],[data-camera=tcam]) .track-meta span{color:#c7d3db}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .camera-switch{background:#15212cf2;color:#d7e0e7;border-color:#ffffff26;box-shadow:0 3px 15px #0003}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-hud,.stage:is([data-camera=cockpit],[data-camera=tcam]) .next-hud{background:#111c27f2;border:1px solid #ffffff26;border-top:2px solid #d1aa66;box-shadow:0 4px 20px #0002;border-radius:5px;padding:14px;color:#fff;width:145px;top:auto;bottom:82px;transform:none}
.stage:is([data-camera=cockpit],[data-camera=tcam]) #gear{color:#fff;font-size:74px;line-height:1;letter-spacing:-3px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-unit{color:#b8c7d4}.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-hud h2{color:#f2f5f7}.stage:is([data-camera=cockpit],[data-camera=tcam]) #nextName{color:#fff;font-size:17px}.stage:is([data-camera=cockpit],[data-camera=tcam]) #nextGear{color:#f4d399;font-size:28px}.stage:is([data-camera=cockpit],[data-camera=tcam]) #distance{color:#d0dbe3}.stage:is([data-camera=cockpit],[data-camera=tcam]) .phase{color:#f2d398}.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-rail i{background:#53606b}.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-rail i.filled{background:#efa967}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .session-readout{background:#111c27f2;color:#c8d2dc;border:1px solid #ffffff26;padding:9px 12px;border-radius:5px;bottom:20px}.stage:is([data-camera=cockpit],[data-camera=tcam]) #lapPercent{color:#fff}.stage:is([data-camera=cockpit],[data-camera=tcam]) .phase-track span{color:#bcc9d3}.stage:is([data-camera=cockpit],[data-camera=tcam]) .phase-track span.active{color:#fff;background:#ffffff20}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .view-actions{display:none}.stage:is([data-camera=cockpit],[data-camera=tcam]) .scene-toolbar>span{display:block;color:#e3e7e8;background:#111c27e8;padding:8px 11px;border:1px solid #ffffff20;border-radius:5px;font-size:9px}
@media(hover:hover) and (pointer:fine){.camera-switch button:not([aria-pressed=true]):hover{background:#80808022}}
@media(max-width:700px){.camera-switch{left:16px;top:94px}.camera-switch button{padding:7px 10px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .stage-heading{padding:18px 16px}.stage:is([data-camera=cockpit],[data-camera=tcam]) h1{font-size:24px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .gear-hud{left:12px;width:118px;bottom:72px;padding:11px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .next-hud{right:12px;width:126px;bottom:72px;padding:11px}.stage:is([data-camera=cockpit],[data-camera=tcam]) #gear{font-size:60px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .session-readout{left:12px;bottom:18px}.stage:is([data-camera=cockpit],[data-camera=tcam]) .scene-toolbar{display:none}}
@media(prefers-reduced-motion:reduce){.camera-switch button{transition:none}}
.speed-readout{display:flex;align-items:baseline;gap:6px;margin:9px 0;color:var(--ink);font-variant-numeric:tabular-nums}.speed-readout strong{font-size:23px;line-height:1}.speed-readout>span{font-size:9px;color:var(--muted)}.speed-readout small{font-size:7px;margin-left:3px}
.stage:is([data-camera=cockpit],[data-camera=tcam]) .speed-readout{color:#fff}.stage:is([data-camera=cockpit],[data-camera=tcam]) .speed-readout>span{color:#c3cbd2}
/* Touch screens use a normal document layout, with telemetry below the viewport. */
@media(max-width:1100px){
 .drive-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
 .drive-panel .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'heading heading' 'cameras cameras' 'scene scene' 'gear next' 'session session' 'toolbar toolbar';gap:0;height:auto;min-height:0;border-radius:12px;overflow:hidden;padding:0;background:var(--panel)}
 .drive-panel .stage .stage-heading{grid-area:heading;position:relative;inset:auto;padding:18px 18px 12px;margin:0;background:none;min-width:0;gap:12px;text-shadow:none}
 .drive-panel .stage .stage-heading h1{font-size:28px;line-height:1.15;overflow-wrap:anywhere;margin:6px 0 0}
 .drive-panel .stage .track-meta{font-size:15px;padding-top:0;gap:14px}
 .drive-panel .stage .camera-switch{grid-area:cameras;position:relative;inset:auto;margin:0 18px 16px;padding:4px;justify-self:start;box-shadow:none;max-width:calc(100% - 36px)}
 .drive-panel .stage .camera-switch button{min-height:44px;min-width:95px;padding:10px 14px;font-size:11px}
 .drive-panel .stage .canvas-wrap{grid-area:scene;position:relative;inset:auto;width:100%;height:clamp(310px,47vw,470px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .drive-panel .stage .gear-hud,.drive-panel .stage .next-hud{position:relative;inset:auto;transform:none;width:auto;min-width:0;margin:0;padding:18px;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:auto;text-align:left}
 .drive-panel .stage .gear-hud{grid-area:gear;border-right:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-content:start}
 .drive-panel .stage .gear-hud>.overline{grid-column:1/-1}.drive-panel .stage .gear-line{grid-column:1;grid-row:2/5;align-self:center;margin:9px 0 0;gap:5px}.drive-panel .stage #gear{font-size:58px;letter-spacing:-2px;line-height:1}
 .drive-panel .stage .speed-readout{grid-column:2;grid-row:2;margin:14px 0 4px}.drive-panel .stage .speed-readout strong{font-size:21px}
 .drive-panel .stage .gear-unit{font-size:12px}.drive-panel .stage .gear-rail{grid-column:2;grid-row:3;width:100%;margin:6px 0 0;gap:3px}.drive-panel .stage .phase{grid-column:2;grid-row:4;font-size:9px;margin:8px 0 0}.drive-panel .stage .gear-hud h2{grid-column:1/-1;margin:12px 0 0;font-size:12px;line-height:1.5}
 .drive-panel .stage .next-hud{grid-area:next;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.drive-panel .stage #nextName{font-size:20px;line-height:1.3;margin:0;overflow-wrap:anywhere}.drive-panel .stage .next-data{justify-content:space-between;gap:8px}.drive-panel .stage #nextGear{font-size:28px}.drive-panel .stage #distance{font-size:12px;white-space:nowrap}
 .drive-panel .stage .session-readout{grid-area:session;position:relative;inset:auto;margin:0;padding:12px 18px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;gap:8px;font-size:10px;min-width:0;flex-wrap:wrap}
 .drive-panel .stage .phase-track{display:flex;margin-left:auto;gap:4px}.drive-panel .stage .phase-track span{font-size:9px;padding:5px 7px}
 .drive-panel .stage .scene-toolbar{grid-area:toolbar;position:relative;inset:auto;padding:0 18px 14px;display:flex;pointer-events:auto}.drive-panel .stage .scene-toolbar>span{display:none}.drive-panel .stage .view-actions{width:100%;justify-content:flex-end}.drive-panel .stage .view-actions button{min-height:44px}
 .drive-panel .stage:is([data-camera=cockpit],[data-camera=tcam]){background:#111b22}.drive-panel .stage:is([data-camera=cockpit],[data-camera=tcam]) .scene-toolbar{display:none}
 .drive-panel .controls{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-height:0}.drive-panel .controls-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.drive-panel .play-group{grid-column:1;grid-row:1;min-width:0}.drive-panel .play{min-width:0;flex:1;min-height:44px}.drive-panel .icon-button{min-width:44px;min-height:44px}.drive-panel .speed{grid-column:2;grid-row:1;gap:6px}.drive-panel .speed>span{display:block}.drive-panel .speed select{min-height:44px}.drive-panel .lap-position{grid-column:1/-1;grid-row:2;text-align:left;width:auto;order:initial;margin:0}.drive-panel #progress{display:block;width:100%;margin:10px 0 0;height:24px}
}
@media(max-width:700px){
 .drive-panel .stage .stage-heading{padding:16px 14px 12px}.drive-panel .stage .stage-heading h1{font-size:25px}.drive-panel .stage .track-meta{display:none}.drive-panel .stage .camera-switch{margin:0 14px 14px;justify-self:stretch;max-width:none}.drive-panel .stage .camera-switch button{flex:1;min-width:0;padding:10px 6px}.drive-panel .stage .canvas-wrap{height:clamp(270px,76vw,400px)}
 .drive-panel .stage .gear-hud,.drive-panel .stage .next-hud{padding:14px 12px}.drive-panel .stage .gear-hud{column-gap:8px}.drive-panel .stage .overline{font-size:8px;letter-spacing:.7px}.drive-panel .stage #gear{font-size:48px}.drive-panel .stage .gear-unit{font-size:10px}.drive-panel .stage .speed-readout strong{font-size:18px}.drive-panel .stage .speed-readout>span{font-size:8px}.drive-panel .stage .speed-readout small{display:none}.drive-panel .stage #nextName{font-size:16px}.drive-panel .stage #nextGear{font-size:24px}.drive-panel .stage #distance{font-size:10px}.drive-panel .stage .gear-hud h2{font-size:10px}.drive-panel .stage .session-readout{padding:12px;font-size:9px}.drive-panel .stage .phase-track{gap:2px}.drive-panel .stage .phase-track span{padding:5px 4px;font-size:8px}.drive-panel .stage .scene-toolbar{padding:0 12px 12px}.drive-panel .controls{padding:12px}.drive-panel .controls-row{gap:10px 8px}.drive-panel .play-group{gap:4px}.drive-panel .icon-button{min-width:40px}.drive-panel .play{padding:10px 6px}.drive-panel .play span{font-size:10px}.drive-panel .speed>span{display:none}
}
@media(max-width:359px){.drive-panel .stage .gear-hud{grid-template-columns:1fr}.drive-panel .stage .gear-line{grid-row:2;grid-column:1}.drive-panel .stage .speed-readout{grid-row:3;grid-column:1;margin-top:8px}.drive-panel .stage .gear-rail{display:none}.drive-panel .stage .phase{grid-row:4;grid-column:1}.drive-panel .stage .phase-track{width:100%;margin-left:0}.drive-panel .play .icon-stack{display:none}}
/* Realistic onboard rendering: no nearest-neighbor upscale. */
.stage:is([data-camera=cockpit],[data-camera=tcam]) canvas{image-rendering:auto;cursor:default}

.gear-hud #instruction[data-cue="green"]{color:#23734e}
.gear-hud #instruction[data-cue="yellow"]{color:#956600}
.gear-hud #instruction[data-cue="red"]{color:#d12820}

.gear-hud #shiftTarget{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:3px;grid-column:1/-1}

.pov-minimap{position:absolute;top:110px;right:14px;width:180px;z-index:5;pointer-events:none;background:#111c27de;border:1px solid #ffffff26;border-radius:10px;box-shadow:0 3px 14px #0003;padding:9px 6px 2px;color:#e5edf4}
.pov-minimap[hidden]{display:none}.pov-minimap svg{display:block;width:100%;height:auto}.minimap-label{display:block;font-size:9px;letter-spacing:1.2px;text-align:center;font-weight:600}
@media(max-width:700px){.pov-minimap{width:120px;top:auto;bottom:12px;right:10px;padding-top:7px}.minimap-label{font-size:8px;letter-spacing:.6px}}

.track-guide{display:block;font-size:10px;color:var(--muted);margin:0 0 12px;text-underline-offset:3px}.corner-reference{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:8px;text-underline-offset:3px}