/* Keep the established desktop order; put the controls first on small screens. */
.speed-dashboard{display:flex;flex-direction:column}
.speed-heading{order:0}
.speed-steps{order:1}
.speed-visual{order:2}
#speed-progress{order:3}
.speed-metrics{order:4}
.speed-controls{order:5}
.speed-method{order:6}
.speed-controls .actions{margin-top:25px}
.speed-data-note{margin:10px 0 0}

@media(max-width:760px){
    /* The page title already identifies the test; avoid three stacked headings. */
    .tool-workspace[data-tool="speed-test"]>.workspace-heading,
    .speed-heading{display:none}
    .speed-controls{order:0;margin-bottom:20px}
    .speed-controls .actions{margin:0;align-items:stretch}
    .speed-controls .actions button{flex:1;min-height:48px;font-size:15px}
    .speed-controls .actions>.muted{width:100%;font-size:12px;line-height:1.5}
    .speed-data-note{font-size:12px;line-height:1.6}
    .speed-steps{order:1;gap:6px;margin:0 0 14px}
    .speed-steps li{padding:9px 7px;font-size:11px;text-align:center}
    .speed-steps li span{display:block;margin:3px 0 0}
    .speed-visual{display:contents}
    .speed-dial{order:2;width:200px;max-width:100%;min-height:155px;margin:0 auto}
    .speed-readout{inset:50px 0 0}
    .speed-readout strong{font-size:36px}
    #speed-progress{order:3;margin:8px 0 16px}
    .speed-metrics{order:4;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .speed-metrics>div{padding:12px;border-radius:12px}
    .speed-metrics strong{font-size:26px;margin:3px 0}
    .speed-metrics span{font-size:11px}
    .speed-chart-wrap{order:5;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
    #speed-chart{height:100px;margin:8px 0}
    .speed-chart-label{font-size:10px;flex-wrap:wrap}
    #speed-live-note{min-height:0;margin-top:10px}
    .speed-method{order:6;margin-top:16px}
}