/* The speed test on a dark page.
 *
 * The test (assets/speedtest, the site's own files, left as served) is drawn
 * for a white page: its sheet and the colours it writes into the page as it
 * starts are white grounds and grey ink. This is the app's, and only answers
 * when the page is dark (`dark` on <html>): the same parts, each one's own
 * selector with `html.dark` before it, on the page's near-black with light
 * ink and the brand's lighter teal.
 */
html.dark .stc-wrapper {
  --st-ground: var(--color-neutral-900);
  --st-raised: var(--color-neutral-800);
  --st-line: var(--color-neutral-700);
  --st-ink: rgb(245 245 245 / 0.85);
  --st-ink-soft: rgb(245 245 245 / 0.45);
  --st-teal: #38c8da;
}

/* Grounds: the test's own, the dial's face, and the dial's unfilled part. */
html.dark .stc-wrapper .test,
html.dark .stc-wrapper .test--in-progress {
  background-color: var(--st-ground);
}
html.dark .stc-wrapper .gauge-face-cutout,
html.dark .stc-wrapper .gauge {
  background-color: var(--st-ground);
  color: var(--st-ground);
}
html.dark .stc-wrapper .gauge-loading .gauge-fill,
html.dark .stc-wrapper .progress-bar {
  background-color: var(--st-line);
}
html.dark .stc-wrapper .stroke-background {
  stroke: var(--st-line);
}
html.dark .stc-wrapper .gauge-needle {
  color: var(--st-ink);
}

/* Ink: the numbers and labels, and the quieter second line under them. */
html.dark .stc-wrapper .fill-monochrome-primary,
html.dark .stc-wrapper .monochrome-primary {
  color: var(--st-ink);
}
html.dark .stc-wrapper .fill-monochrome-secondary,
html.dark .stc-wrapper .monochrome-secondary {
  color: var(--st-ink-soft);
}
html.dark .stc-wrapper .stroke-monochrome-secondary {
  stroke: var(--st-ink-soft);
}
html.dark .stc-wrapper .number--empty::after {
  background: linear-gradient(
      to right,
      var(--st-ink-soft) 0,
      var(--st-ink-soft) 70%,
      transparent 70%,
      transparent 100%
    )
    repeat-x left bottom;
}

/* The brand's teal, lighter, where it is ink or a line on the dark ground. */
html.dark .stc-wrapper .text-primary,
html.dark .stc-wrapper .text-primary-hover:hover,
html.dark .stc-wrapper .text-primary-hover:focus {
  color: var(--st-teal);
}
html.dark .stc-wrapper .fill-primary,
html.dark .stc-wrapper .fill-primary-hover:hover,
html.dark .stc-wrapper .fill-primary-hover:focus {
  color: var(--st-teal);
  fill: var(--st-teal);
}
html.dark .stc-wrapper .stroke-primary {
  stroke: var(--st-teal);
}
html.dark .stc-wrapper .border-primary {
  border-color: var(--st-teal);
}
html.dark .stc-wrapper .share-button--go,
html.dark .stc-wrapper .share__links {
  color: var(--st-teal) !important;
}

/* The four results: a tile each, the one being measured lifted off the page. */
html.dark .stc-wrapper .results-container .result-tile {
  background-color: rgb(38 38 38 / 0.85);
}
html.dark .stc-wrapper .results-container .result-active-test {
  box-shadow:
    0 0 0 1px var(--st-line),
    0 0 20px 5px rgb(0 0 0 / 0.55);
}

/* Buttons. */
html.dark .stc-wrapper .pure-button-primary-outline {
  border-color: var(--st-teal);
  color: var(--st-teal);
}
html.dark .stc-wrapper .pure-button-primary-outline:hover,
html.dark .stc-wrapper .pure-button-primary-outline:focus {
  background-color: var(--st-teal);
  color: var(--color-neutral-900);
}
html.dark .stc-wrapper .pure-button-tertiary {
  color: var(--st-teal);
  border-color: var(--st-ink-soft);
}
html.dark .stc-wrapper .pure-button-tertiary:hover,
html.dark .stc-wrapper .pure-button-tertiary:focus {
  background-color: var(--st-raised);
}

/* The list of servers, where the test offers one. */
html.dark .stc-wrapper .modal {
  background: var(--st-raised);
  color: var(--st-ink);
}
html.dark .stc-wrapper .host-listview__search__input,
html.dark .stc-wrapper .host-listview__search__input:focus {
  background: var(--st-ground);
  color: var(--st-ink);
}
html.dark .stc-wrapper .host-listview__list {
  border-top-color: var(--st-line);
}
html.dark .stc-wrapper .host-listview__list-item {
  border-bottom-color: var(--st-line);
}
html.dark .stc-wrapper .server-list-radio:checked + label::before {
  background-image: radial-gradient(var(--st-teal) 4px, var(--st-ground) 4px);
}