/* Speed test light/dark theme: toggle button and hand-tuned values.
   speedtest-light.css is generated from the dark styles; adjust light-mode details here. */

/* Colours read by the canvas graphs and inline notes (see stThemeColor in speedtest.php). */
:root{--st-graph-bg:rgba(255,255,255,0.03);--st-graph-grid:rgba(255,255,255,0.08);--st-note:#a9bed2;--st-note-warn:#ffcf9f}
html[data-theme="light"]{--st-graph-bg:rgba(11,45,73,0.03);--st-graph-grid:rgba(11,45,73,0.12);--st-note:#3d5671;--st-note-warn:#9a5b00;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* Toggle button: top-right of the speed test header, 44px touch target. */
.speedtest-hero-row{position:relative}
.st-theme-toggle{position:absolute;top:0;right:0;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border:1px solid rgba(151,190,214,.35);border-radius:999px;background:rgba(10,30,47,.7);color:#f4f8fc;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,border-color .2s}
.st-theme-toggle:hover{border-color:#7df0e2}
.st-theme-toggle:focus-visible{outline:3px solid #7df0e2;outline-offset:2px}
.st-theme-icon{position:relative;display:inline-block;width:18px;height:18px}
/* Sun (shown in dark mode: "switch to light") */
.st-theme-sun{border-radius:50%;background:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.25)}
.st-theme-sun{width:12px;height:12px;margin:3px}
/* Moon (shown in light mode: "switch to dark") */
.st-theme-moon{display:none;border-radius:50%;box-shadow:inset -5px -2px 0 1px #0b3553}
html[data-theme="light"] .st-theme-sun{display:none}
html[data-theme="light"] .st-theme-moon{display:inline-block}
html[data-theme="light"] .st-theme-toggle{border-color:#c9d8e2;background:#fff;color:#0b2d49;box-shadow:0 4px 14px rgba(11,45,73,.08)}
html[data-theme="light"] .st-theme-toggle:hover{border-color:#00766d}
html[data-theme="light"] .st-theme-toggle:focus-visible{outline-color:#00766d}
/* Keep the title clear of the button. */
.speedtest-hero h1{padding-right:110px}
@media(max-width:575px){
  .st-theme-toggle{top:-4px;padding:0 10px;min-height:36px}
  .st-theme-label{display:none}
  .speedtest-hero h1{padding-right:52px}
}
@media(prefers-reduced-motion:reduce){.st-theme-toggle{transition:none}}
/* Buttons built from the accent variables become dark in light mode: use white text on them. */ html[data-theme="light"] .location-ask-button{color:#fff!important}
/* Text instead of a number in a metric box: smaller and never split mid-word. */
.st-metric-missing{font-size:14px!important;line-height:1.3!important;overflow-wrap:normal!important;word-break:keep-all!important}
/* Light mode: the Done/primary gradient ends in deep blue, so dark text fell to ~1.7-2.8:1. */
html[data-theme="light"] .result-popup-footer-actions button:last-child,html[data-theme="light"] #resultPopupDone,html[data-theme="light"] .result-popup .popup-done{color:#fff!important}
html[data-theme="light"] #runSpeedTest{color:#fff!important}
html[data-theme="light"] #runSpeedTest,html[data-theme="light"] #resultPopupDone{background:linear-gradient(135deg,#0e7c72 0%,#0054eb 55%,#280fdc 100%)!important}
/* Don't interrupt a running test with the app-install banner. */
body.st-testing .pwa-install-notice{display:none!important}
/* Result quality: say what the icons mean. */
.result-popup-quality{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.result-popup-quality .quality-good-for{color:var(--st-muted);font-size:12px;font-weight:700;margin-left:4px}
.result-popup-quality .quality-uses{color:var(--st-ink);font-size:12px;font-weight:700}
/* Graph lines per theme (light: deeper hues so lines stand out on white). */
:root{--st-graph-down:#5da8ff;--st-graph-down-fill:rgba(93,168,255,0.16);--st-graph-up:#8cbbff;--st-graph-up-fill:rgba(140,187,255,0.14);--st-graph-popup-up:#7df6ed;--st-graph-popup-up-fill:rgba(125,246,237,0.17)}
html[data-theme="light"]{--st-graph-down:#1f6fe0;--st-graph-down-fill:rgba(31,111,224,0.14);--st-graph-up:#00857a;--st-graph-up-fill:rgba(0,133,122,0.14);--st-graph-popup-up:#00857a;--st-graph-popup-up-fill:rgba(0,133,122,0.14)}
/* The location prompt bar shifted the dial mid-test; hold it until the test ends (Client details already explains). */
body.st-testing.st-loc-bar-was-hidden #locationAskBar{display:none!important}

/* ---- Light theme visual fixes (2026-10-18) ---- */
/* Dial face: the converted dark radial became a murky grey with a dark smudge. Use a clean light face. */
html[data-theme="light"] .gauge-inner{background:radial-gradient(circle at 50% 30%,#ffffff 0%,#f4f8fb 55%,#e8f0f5 100%)!important;box-shadow:inset 0 2px 10px rgba(11,45,73,.08),0 8px 24px rgba(11,45,73,.10)!important;border:1px solid rgba(11,45,73,.08)}
html[data-theme="light"] .gauge-inner .mode-label{color:#3d5671!important}
/* Ambient glow blobs are a dark-theme effect; on white they read as blue smudges. */
html[data-theme="light"] .speedtest-stage::before,html[data-theme="light"] .speedtest-stage::after{opacity:.25!important}
/* FAQ headers had a solid dark navy underline from the dark styles. */
html[data-theme="light"] .speedtest-shell .panel .panel-heading{border-bottom-color:rgba(11,45,73,.12)!important}
html[data-theme="light"] .speedtest-shell .panel{box-shadow:0 2px 10px rgba(11,45,73,.05)!important}
/* Empty graph boxes: lighter placeholder so they don't look like disabled blocks. */
html[data-theme="light"]{--st-graph-bg:rgba(11,45,73,0.02)}
html[data-theme="light"] .graph-card .graph-canvas{background:rgba(11,45,73,.025)!important}

/* ---- Visual experience fixes, both themes (2026-10-18) ---- */
/* Keyboard focus was invisible on most controls (the site resets outlines). */
.speedtest-shell :is(a,button,summary,input,select):focus-visible,
.result-popup :is(a,button,summary):focus-visible,
#stThemeToggle:focus-visible{outline:3px solid #7df0e2!important;outline-offset:3px!important;border-radius:6px}
html[data-theme="light"] .speedtest-shell :is(a,button,summary,input,select):focus-visible,
html[data-theme="light"] .result-popup :is(a,button,summary):focus-visible,
html[data-theme="light"] #stThemeToggle:focus-visible{outline-color:#00766d!important}
/* "Open Network Suite" was a 20px-tall tap target. */
.speedtest-shell .network-suite-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
/* Result pop-up was taller than small screens (e.g. 19px past the bottom at 320x568). */
.result-popup-card{max-height:calc(100vh - 24px)!important}
@supports (height:100dvh){.result-popup-card{max-height:calc(100dvh - 24px)!important}}
@media(max-height:640px){
  .result-popup-graphs canvas{height:44px!important}
  .result-popup-head{padding-top:12px!important;padding-bottom:8px!important}
}
/* Short screens: the overlay's 72px top padding pushed the card past the bottom edge; centre it with even margins. */ @media(max-height:700px){.result-popup{align-items:center!important;padding:12px!important}}