/* osir.co.uk: Internet Stability Checker (builds on speedtest.css) */
.sc-opts { display: grid; gap: 12px; margin-top: 12px; }
.sc-opts > div > span { display: block; font-size: 13px; font-weight: 650; color: var(--text-2); margin-bottom: 4px; }
.sc-seg .t-tab:disabled { cursor: not-allowed; opacity: .6; }
.sc-readouts { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sc-canvas-wrap { position: relative; }
.sc-chart canvas { display: block; width: 100%; height: 240px; cursor: crosshair; }
.sc-key-lost { display: inline-block; width: 3px; height: 12px; margin: 0 6px 0 4px; background: var(--st-bad); vertical-align: -1px; }

.sc-score { width: auto; min-width: 92px; padding: 0 14px; }
.sc-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sc-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.sc-use { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--muted); min-width: 0; }
.sc-use.u-good { border-left-color: var(--st-good); }
.sc-use.u-warn { border-left-color: var(--st-warn); }
.sc-use.u-serious { border-left-color: var(--st-serious); }
.sc-use.u-bad { border-left-color: var(--st-bad); }
.sc-use-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-use h3 { font-size: 15px; font-weight: 800; }
.sc-use p { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }

#sc-advice .t-verdict { margin-top: 10px; }
#sc-advice .t-verdict:first-child { margin-top: 14px; }
.sc-adv-title { display: block; font-weight: 750; margin-bottom: 2px; }

.barlist li.is-lost .bl-track i { background: var(--st-bad); }
.barlist .bl-track i { background: var(--st-dl); }

@media (max-width: 1000px) { .sc-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sc-uses, .sc-tiles { grid-template-columns: 1fr 1fr; } .sc-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-chart canvas { height: 200px; } }
@media print { #sc-live { display: none !important; } }