/*!
 * Starlink speed test - page styles
 * Loaded only on /starlink-speed-test/.
 *
 * The dial, the result tiles and the rating colours all come from style.css;
 * this file only adds the three things that page has and no other does: the
 * comparison bars against Starlink's published figures, the latency timeline,
 * and the network detection card.
 */

:root {
  --sl-band-download: rgba(31, 111, 235, .12);
  --sl-band-upload: rgba(128, 208, 199, .22);
  --sl-band-scan: rgba(19, 84, 122, .07);
  --sl-line: #1f6feb;
  --sl-drop: #c4432b;
  --sl-good: #157a5b;
  --sl-warn: #9a6206;
}

:root[data-theme="dark"] {
  --sl-band-download: rgba(88, 150, 255, .16);
  --sl-band-upload: rgba(128, 208, 199, .16);
  --sl-band-scan: rgba(157, 194, 255, .07);
  --sl-line: #7fb0ff;
  --sl-drop: #f08a72;
  --sl-good: #69dfa4;
  --sl-warn: #f0c274;
}

/* ------------------------------------------------------------ test card */

.sl-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin-top: 1rem;
}
.sl-options .form-check { margin: 0; }
.sl-options .form-check-label { font-size: .9rem; }

.sl-duration {
  font-size: .85rem;
  color: var(--wst-muted);
}

/* ------------------------------------------------- comparison bars */

.sl-bench + .sl-bench { margin-top: 1.1rem; }

.sl-bench__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.sl-bench__label {
  font-weight: 600;
  color: var(--wst-ink);
}
.sl-bench__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wst-ink);
}

.sl-bench__track {
  position: relative;
  height: 16px;
  margin: .45rem 0 .3rem;
  border-radius: var(--wst-radius-pill);
  background: var(--wst-gauge-track);
}

/* The published typical range, drawn behind the marker. */
.sl-bench__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--wst-radius-pill);
  background: var(--wst-mint);
  opacity: .55;
}

.sl-bench__marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--wst-blue);
  border: 2px solid var(--wst-surface);
  box-shadow: var(--wst-shadow-sm);
}
[data-band="above"] .sl-bench__marker { background: var(--sl-good); }
[data-band="below"] .sl-bench__marker { background: var(--sl-warn); }

.sl-bench__scale {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: .75rem;
  color: var(--wst-muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------- latency timeline */

.sl-chart-wrap {
  margin-top: .5rem;
  padding: .5rem .25rem 0;
  border-radius: var(--wst-radius-sm);
  background: var(--wst-surface-2);
  border: 1px solid var(--wst-line);
}

.sl-chart {
  display: block;
  width: 100%;
  height: auto;
}

.sl-chart__band[data-phase="download"] { fill: var(--sl-band-download); }
.sl-chart__band[data-phase="upload"] { fill: var(--sl-band-upload); }
.sl-chart__band[data-phase="scan"] { fill: var(--sl-band-scan); }

.sl-chart__grid { stroke: var(--wst-line); stroke-width: 1; }
.sl-chart__cycle {
  stroke: var(--wst-gauge-tick);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.sl-chart__line {
  fill: none;
  stroke: var(--sl-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-chart__drop {
  stroke: var(--sl-drop);
  stroke-width: 2;
  opacity: .45;
}
.sl-chart__label {
  fill: var(--wst-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .6rem 0 0;
  padding: 0 .5rem .6rem;
  list-style: none;
  font-size: .78rem;
  color: var(--wst-muted);
}
.sl-legend li {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.sl-legend__key {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.sl-legend__key--download { background: var(--sl-band-download); outline: 1px solid var(--wst-line); }
.sl-legend__key--upload { background: var(--sl-band-upload); outline: 1px solid var(--wst-line); }
.sl-legend__key--scan { background: var(--sl-band-scan); outline: 1px solid var(--wst-line); }
.sl-legend__key--cycle {
  height: 12px;
  width: 0;
  border-left: 2px dashed var(--wst-gauge-tick);
  border-radius: 0;
}
.sl-legend__key--drop {
  height: 12px;
  width: 0;
  border-left: 2px solid var(--sl-drop);
  border-radius: 0;
}

/* ------------------------------------------------------ stability stats */

.sl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .75rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.sl-stats__value {
  font-family: var(--wst-font-title);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--wst-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.sl-stats__unit {
  font-size: .8rem;
  font-weight: 600;
  color: var(--wst-muted);
  margin-left: .15rem;
}
.sl-stats__label {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wst-muted);
}

/* --------------------------------------------------- network detection */

.sl-net {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--wst-line);
  border-left: 4px solid var(--wst-gauge-tick);
  border-radius: var(--wst-radius-sm);
  padding: 1rem 1.1rem;
  background: var(--wst-surface-2);
}
.sl-net[data-network="starlink"] { border-left-color: var(--sl-good); }
.sl-net[data-network="other"] { border-left-color: var(--sl-warn); }
.sl-net[data-network="checking"] { border-left-color: var(--wst-blue); }

.sl-net__body { flex: 1 1 18rem; min-width: 0; }

.sl-net__label {
  margin: 0 0 .2rem;
  font-weight: 700;
  color: var(--wst-ink);
}
.sl-net[data-network="starlink"] .sl-net__label { color: var(--sl-good); }

.sl-net__detail {
  margin: 0;
  font-size: .92rem;
  overflow-wrap: anywhere;
}

.sl-net__note {
  margin: .6rem 0 0;
  font-size: .82rem;
  color: var(--wst-muted);
}