/*
 * The speed test page (server.mjs), after the blog's stylesheet. The blog's is in the cascade layer
 * "blog"; these are in no layer, so they win. The page is <main id="st">: everything else in <body> is
 * the blog's (header, footer, loading screen, cookie notice, its pop-ups).
 *
 * 1. The blog's rules for plain elements (h1, button, table…) don't reach the page.
 * 2. Dracula (Alucard in light mode); light or dark follows the blog header's button.
 *    Each part of the test has its color: download purple to pink, upload cyan to green, ping orange, jitter yellow.
 * 3. The page: the gauge (the one thing that moves), the readings, your connection, recent tests.
 */

/* ---------- 1. The blog's styles stay out of the page ---------- */
@layer blog {
  body > #st, body > #st *, body > #st *::before, body > #st *::after { all: revert-layer; }
}

/* ---------- 2. Dracula ---------- */
html:not(#st-never) {
  --st-fg: #1f1f1f; --st-soft: #6c664b; --st-comment: #635d97;
  --st-surface: #fffbeb; --st-surface-2: #efebd6; --st-tonal: #e4dfc6; --st-line: #ddd8c0; --st-on-accent: #fffbeb;
  --st-purple: #644ac9; --st-pink: #a3144d; --st-cyan: #036a96; --st-green: #14710a; --st-orange: #a34d14; --st-yellow: #846e15; --st-red: #cb3a2a;
  --st-shadow: 0 2px 12px rgba(60, 50, 20, .12); --st-glow-a: .16;
}
html[data-theme='dark']:not(#st-never) {
  --st-fg: #f8f8f2; --st-soft: #a7aed3; --st-comment: #6272a4;
  --st-surface: #1c1d26; --st-surface-2: #262833; --st-tonal: #343746; --st-line: #2c2e3b; --st-on-accent: #14151c;
  --st-purple: #bd93f9; --st-pink: #ff79c6; --st-cyan: #8be9fd; --st-green: #50fa7b; --st-orange: #ffb86c; --st-yellow: #f1fa8c; --st-red: #ff5555;
  --st-shadow: 0 6px 26px rgba(0, 0, 0, .45); --st-glow-a: .22;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):not(#st-never) {
    --st-fg: #f8f8f2; --st-soft: #a7aed3; --st-comment: #6272a4;
    --st-surface: #1c1d26; --st-surface-2: #262833; --st-tonal: #343746; --st-line: #2c2e3b; --st-on-accent: #14151c;
    --st-purple: #bd93f9; --st-pink: #ff79c6; --st-cyan: #8be9fd; --st-green: #50fa7b; --st-orange: #ffb86c; --st-yellow: #f1fa8c; --st-red: #ff5555;
    --st-shadow: 0 6px 26px rgba(0, 0, 0, .45); --st-glow-a: .22;
  }
}

/* ---------- 3. The page ---------- */
/* The blog's header and footer sit right in the page, as on the blog */
unix3r-header, unix3r-footer { display: contents; }
unix3r-header, unix3r-footer, #blog-embed { font: 400 1.0625rem/1.65 var(--font-body, Georgia, serif); color: var(--ink); }

#st {
  display: block; box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 32px 16px 12px;
  font: 400 .95rem/1.5 var(--font-ui, system-ui), system-ui, sans-serif; color: var(--st-fg);
}
@media (min-width: 720px) { #st { padding: 44px 32px 12px; } }
#st *, #st *::before, #st *::after { box-sizing: border-box; }
#st a { color: var(--st-purple); }
#st a:hover { color: var(--st-pink); }
#st button { font: inherit; color: inherit; cursor: pointer; }
#st button:focus-visible { outline: 2px solid var(--st-purple); outline-offset: 3px; }
#st [hidden] { display: none !important; }
#st ::selection { background: color-mix(in srgb, var(--st-purple) 30%, transparent); }

/* The heading */
.st-intro { margin-bottom: 26px; }
.st-intro h1 { margin: 0; font: 800 clamp(2rem, 4.6vw, 2.9rem)/1.05 var(--font-head, system-ui), system-ui, sans-serif; letter-spacing: -.025em; }
.st-intro p { max-width: 60ch; margin: 12px 0 0; color: var(--st-soft); font-size: 1rem; }

/* The board: the gauge, and the four readings beside it */
.st-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .st-board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } }

.st-gauge-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 18px 22px; border: 1px solid var(--st-line); border-radius: 22px; background: var(--st-surface); box-shadow: var(--st-shadow);
}
/* A glow behind the gauge, in the color of the part being measured */
.st-gauge-card::before {
  content: ''; position: absolute; inset: 8% 10% auto; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--st-c, var(--st-purple)) calc(var(--st-glow-a) * 100%), transparent), transparent);
  transition: background .6s ease;
}
.st-gauge-card:has([data-phase='up']) { --st-c: var(--st-cyan); }
.st-gauge-card:has([data-phase='ping']) { --st-c: var(--st-orange); }
.st-gauge-card:has([data-phase='done']) { --st-c: var(--st-pink); }

/* The steps: ping, then download, then upload */
.st-steps { position: relative; display: flex; gap: 8px; font-size: .8rem; font-weight: 600; }
.st-steps span { padding: 4px 12px; border-radius: 999px; color: var(--st-soft); background: var(--st-surface-2); border: 1px solid var(--st-line); transition: color .2s, background .2s, border-color .2s; }
.st-steps span[data-state='active'] { color: var(--st-fg); border-color: var(--st-c, var(--st-purple)); background: color-mix(in srgb, var(--st-c, var(--st-purple)) 14%, var(--st-surface)); }
.st-steps span[data-state='done'] { color: var(--st-green); border-color: color-mix(in srgb, var(--st-green) 45%, var(--st-line)); }
.st-steps span[data-state='done']::before { content: '✓ '; }
.st-gauge-card:has([data-phase='down']) { --st-c: var(--st-purple); }

/* The gauge */
.st-gauge { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin-top: -4px; }
.st-gauge > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-ring, .st-ring-fill, .st-track, .st-fill { fill: none; stroke-linecap: round; }
.st-ring { stroke: var(--st-line); stroke-width: 2; }
.st-ring-fill { stroke: var(--st-c, var(--st-purple)); stroke-width: 2; stroke-dasharray: 0 100; transition: stroke-dasharray .3s linear; }
.st-track { stroke: var(--st-surface-2); stroke-width: 18; }
.st-fill { stroke: url(#g-down); stroke-width: 18; stroke-dasharray: 0 100; transition: stroke-dasharray .35s cubic-bezier(.3, .7, .4, 1); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--st-c, var(--st-purple)) 45%, transparent)); }
.st-gauge[data-phase='up'] .st-fill { stroke: url(#g-up); }
#g-down .s-a { stop-color: var(--st-purple); }
#g-down .s-b { stop-color: var(--st-pink); }
#g-up .s-a { stop-color: var(--st-cyan); }
#g-up .s-b { stop-color: var(--st-green); }
.st-tick { stroke: var(--st-comment); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.st-mark { fill: var(--st-soft); font: 600 11px var(--font-code, ui-monospace), ui-monospace, monospace; text-anchor: middle; }

.st-center { position: absolute; inset: 0; display: grid; place-items: center; }
.st-read { display: grid; justify-items: center; gap: 2px; margin-top: 10px; }
.st-gauge[data-phase='idle'] .st-read { display: none; }
.st-gauge:not([data-phase='idle']) .st-go { display: none; }
.st-phase { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--st-soft); }
.st-phase::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--st-c, var(--st-purple)); }
.st-num { font: 800 clamp(3rem, 11vw, 4.6rem)/1 var(--font-head, system-ui), system-ui, sans-serif; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--st-fg); }
.st-unit { font: 600 .85rem var(--font-code, ui-monospace), ui-monospace, monospace; color: var(--st-comment); }

/* Start: the round button in the middle of the gauge, with a slow pulse while it waits */
.st-go {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; width: 136px; height: 136px; border: 0; border-radius: 50%;
  color: var(--st-on-accent) !important; background: linear-gradient(135deg, var(--st-purple), var(--st-pink));
  font: 800 1.15rem/1 var(--font-head, system-ui), system-ui, sans-serif !important; letter-spacing: .01em;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--st-pink) 35%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.st-go::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--st-pink) 55%, transparent); animation: st-pulse 2.4s ease-out infinite; }
.st-go:hover { transform: scale(1.04); box-shadow: 0 14px 40px color-mix(in srgb, var(--st-pink) 45%, transparent); }
.st-go svg { width: 34px; height: 34px; margin-left: 4px; }
.st-go svg path { fill: currentColor; stroke: none; stroke-linejoin: round; }
/* At zero the arcs are hidden: their round ends would show as dots */
.st-fill[data-zero], .st-ring-fill[data-zero] { opacity: 0; }
@keyframes st-pulse { from { transform: scale(.94); opacity: 1; } to { transform: scale(1.22); opacity: 0; } }

/* Under the gauge: Stop, Test again, Copy results, and a message if something fails */
.st-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 40px; margin-top: -18px; }
.st-actions button {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-weight: 600 !important; font-size: .875rem !important;
  border: 1px solid var(--st-line); background: var(--st-surface-2); color: var(--st-fg);
}
.st-actions button:hover { border-color: color-mix(in srgb, var(--st-purple) 50%, var(--st-line)); background: var(--st-tonal); }
.st-actions .st-again { border: 0; color: var(--st-on-accent) !important; background: linear-gradient(135deg, var(--st-purple), var(--st-pink)); }
.st-actions .st-again svg path, .st-actions .st-stop svg path { fill: currentColor; stroke: none; }
.st-msg { position: relative; flex-basis: 100%; max-width: 46ch; margin: 4px 0 0; text-align: center; color: var(--st-orange); font-size: .85rem; }
.st-msg:empty { display: none; }

/* The readings */
.st-metrics { display: grid; gap: 14px; align-content: stretch; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-metric {
  --c: var(--st-purple); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 14px;
  border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface);
  box-shadow: inset 3px 0 0 var(--c);
}
.st-metric[data-k='down'] { --c: var(--st-purple); --c2: var(--st-pink); }
.st-metric[data-k='up'] { --c: var(--st-cyan); --c2: var(--st-green); }
.st-metric[data-k='ping'] { --c: var(--st-orange); }
.st-metric[data-k='jitter'] { --c: var(--st-yellow); }
.st-mhead { display: flex; align-items: center; gap: 8px; color: var(--st-soft); font-size: .85rem; font-weight: 600; }
.st-mico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.st-mval { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 0; }
.st-mval b { font: 800 clamp(1.8rem, 3.4vw, 2.3rem)/1 var(--font-head, system-ui), system-ui, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--st-fg); }
.st-mval b[data-empty] { color: var(--st-comment); font-weight: 500; }
.st-mval span { font: 600 .8rem var(--font-code, ui-monospace), ui-monospace, monospace; color: var(--st-comment); }
.st-spark { display: block; width: 100%; height: 44px; margin-top: 10px; overflow: visible; touch-action: none; }
.st-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st-area { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: none; }
.st-dot { fill: var(--c); stroke: var(--st-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.st-tip {
  position: absolute; bottom: 52px; transform: translateX(-50%); margin-left: 18px; padding: 3px 8px; border-radius: 7px; pointer-events: none; white-space: nowrap;
  font: 600 .75rem var(--font-code, ui-monospace), ui-monospace, monospace; color: var(--st-fg); background: var(--st-tonal); border: 1px solid var(--st-line);
}
.st-running .st-metric[data-k] { transition: border-color .3s; }

/* Your connection */
.st-conn { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 18px; border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); overflow: hidden; }
.st-conn > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 14px 18px; border-left: 1px solid var(--st-line); margin-left: -1px; min-width: 0; }
.st-cico { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--st-cyan); background: color-mix(in srgb, var(--st-cyan) 13%, transparent); }
.st-clabel { font-size: .78rem; color: var(--st-soft); }
.st-conn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-conn b[data-c='ip'] { font-family: var(--font-code, ui-monospace), ui-monospace, monospace; font-size: .9rem; }

/* Recent tests */
.st-history { margin-top: 28px; }
.st-hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-history h2 { margin: 0; font: 700 1.2rem/1.3 var(--font-head, system-ui), system-ui, sans-serif; }
.st-clear { border: 0; background: none; padding: 4px 2px; font-size: .85rem !important; color: var(--st-soft) !important; text-decoration: underline; text-underline-offset: 3px; }
.st-clear:hover { color: var(--st-red) !important; }
.st-note { margin: 4px 0 12px; font-size: .8rem; color: var(--st-soft); }
.st-table-wrap { overflow-x: auto; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); }
.st-history table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.st-history th { text-align: left; font-weight: 600; font-size: .78rem; color: var(--st-soft); padding: 10px 16px; border-bottom: 1px solid var(--st-line); white-space: nowrap; }
.st-history td { padding: 10px 16px; border-bottom: 1px solid var(--st-line); white-space: nowrap; }
.st-history tr:last-child td { border-bottom: 0; }
.st-history td.d { color: var(--st-purple); font-weight: 600; }
.st-history td.u { color: var(--st-cyan); font-weight: 600; }

.st-about { margin: 30px 0 6px; padding-top: 14px; border-top: 1px solid var(--st-line); font-size: .8rem; line-height: 1.55; color: var(--st-soft); max-width: 90ch; }

@media (max-width: 600px) {
  .st-gauge-card { padding: 16px 10px 18px; border-radius: 18px; }
  .st-go { width: 112px; height: 112px; }
  .st-metric { padding: 14px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-go::after { animation: none; opacity: .5; }
  .st-fill, .st-ring-fill, .st-gauge-card::before, .st-go { transition: none; }
}