/* Header controls stay at the screen edges in both layouts. */
.site-header,body.is-measuring .site-header{max-width:none;width:100%;margin:0;padding-left:24px;padding-right:24px;position:relative}
.site-header .brand{margin-right:auto}
.header-controls{margin-left:auto}
.screen-switch{display:flex;justify-content:center;gap:8px;position:absolute;left:50%;transform:translateX(-50%)}
.screen-switch button{border:1px solid #708496;border-right-color:#253644;border-bottom-color:#253644;border-radius:2px;background:linear-gradient(145deg,#405467,#243746);color:#f4f6f8;box-shadow:inset 1px 1px 0 #bdcbd34d,2px 3px 4px #0003;padding:10px 15px;font-size:13px;line-height:1.3;white-space:nowrap}
.screen-switch button[aria-pressed="true"],.screen-switch button:active{background:linear-gradient(145deg,#172734,#334b5d);border-color:#172633 #718795 #718795 #172633;box-shadow:inset 2px 3px 5px #0008;color:#fff}
html[data-theme="light"] .screen-switch button{background:linear-gradient(145deg,#e7edf2,#b3c3d0);color:#172b3b;border-color:#f8fbfe #7b8f9e #7b8f9e #f8fbfe}
html[data-theme="light"] .screen-switch button[aria-pressed="true"],html[data-theme="light"] .screen-switch button:active{background:linear-gradient(145deg,#9dabb8,#d3dfe7);border-color:#718595 #f5f8fb #f5f8fb #718595;box-shadow:inset 2px 3px 5px #21334444}
/* Screen 2 uses the saved single-dial layout and its original artwork. */
html[data-screen="2"] .instruments{display:contents}
html[data-screen="2"] .aux-instrument,html[data-screen="2"] .dial-heading,html[data-screen="2"] .reference-face,html[data-screen="2"] #main-bezel-edge,html[data-screen="2"] #main-bezel-inner,html[data-screen="2"] #speed-quality-marker{display:none}
/* All dark instrument faces match the pure black page. */
html[data-theme="dark"][data-screen="1"] #speed-gauge .reference-face>circle:first-child,html[data-theme="dark"][data-screen="1"] .instruments .aux-face{fill:#000000}
html[data-theme="dark"][data-screen="1"] #speed-gauge .reference-face>circle:last-child,html[data-theme="dark"][data-screen="1"] .aux-dial>svg>circle[fill="url(#dial-weave)"]{display:none}
html[data-screen="1"] .instruments .aux-needle{filter:drop-shadow(0 0 4px var(--needle-colour))}
html[data-screen="1"] .instruments .aux-needle{transition:none}
html[data-theme="light"][data-screen="1"] .instruments .aux-needle-shadow{filter:drop-shadow(3px 4px 1.5px #172430a6)}
html[data-theme="light"][data-screen="1"] .instruments .aux-needle{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--needle-colour) 65%,transparent))}
/* Upload thresholds apply to the moving band in either screen. */
html[data-screen="2"] .speed-gauge[data-phase="upload"] .gauge-arc,html[data-screen="2"] .speed-gauge[data-phase="upload"] .gauge-inner-arc,html[data-screen="2"] .speed-gauge[data-phase="upload"] .gauge-inner-glow{stroke:var(--quality-colour,#b98aff)}
@media(max-width:760px){
 .site-header,body.is-measuring .site-header{height:116px;padding:0 16px 44px;gap:12px}
 .header-controls{gap:16px}.brand{font-size:20px}
 .screen-switch{top:68px;left:16px;right:16px;transform:none;gap:8px}
 .screen-switch button{flex:1;padding:8px 9px;font-size:12px}
 body:not(.is-measuring) .test-section{min-height:calc(100svh - 116px)}
 body.is-measuring .test-section{min-height:calc(100svh - 116px)}
 html[data-screen="1"] body.is-measuring .measurement-dashboard{width:min(100%,calc((100svh - 358px)*1.14322))}
}
@media(max-width:600px){
 html[data-screen="1"] .measurement-dashboard .live-metrics{top:8.18%;height:14.8%}
 html[data-screen="1"] .measurement-dashboard .instruments{top:28.13%}
 html[data-screen="1"] .measurement-dashboard .chart-wrap{top:75.02%}
 html[data-screen="1"] .measurement-dashboard .gauge-progress{top:85.85%}
 html[data-screen="1"] .measurement-dashboard .gauge-status{top:87.9%}
}
@media(min-width:361px) and (max-width:600px){
 html[data-screen="2"] body.is-complete .measurement-dashboard .speed-gauge{width:min(248px,100%,calc((100svh - 590px)*1.17647))}
}
@media(max-width:360px){
 html[data-screen="2"] .measurement-dashboard{padding-top:16px}
 html[data-screen="2"] body.is-complete .measurement-dashboard .speed-gauge{width:120px;min-width:0}
}
