/* Nimag Speedtest - the test page. No library: one small sheet, so the page is
   up as soon as this server answers. Colours and fonts are the Nimag charter's
   (Dark Root, Pulse Link, Copper Data, Clean Shell).

   Nothing here blurs, glows or animates while a test runs: the page stays out
   of the measurement's way. The other pages add pages.css on top of this one. */

@font-face { font-family: "Chillax"; src: url("../fonts/Chillax-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("../fonts/Chillax-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("../fonts/Chillax-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Radix"; src: url("../fonts/radix-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1c2427;
  --ink-2: #232e32;
  --ink-3: #2c393d;
  --line: #3a4a4f;
  --teal: #95bfbe;
  --copper: #bea486;
  --shell: #fdf8ef;
  --soft: rgba(253, 248, 239, .68);
  --faint: rgba(253, 248, 239, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ink); color: var(--shell);
  font-family: "Chillax", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55;
}
p, ol, ul, dl, dd { margin: 0; padding: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--shell); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- The bar --- */
.bar { display: flex; align-items: center; gap: 20px; padding: 14px 24px; max-width: 1120px; width: 100%; margin: 0 auto; }
.logo img { display: block; height: 28px; width: auto; }
.bar nav { display: flex; gap: 2px; margin-left: auto; }
.bar nav a { color: var(--soft); text-decoration: none; padding: 7px 12px; border-radius: 999px; font-size: 15px; }
.bar nav a:hover { color: var(--shell); background: rgba(253, 248, 239, .07); }
.bar nav a[aria-current] { color: var(--shell); background: rgba(149, 191, 190, .16); }
.lang { display: flex; gap: 2px; font-size: 13px; }
.lang button { background: none; border: 0; padding: 6px 8px; border-radius: 8px; color: var(--faint); font-weight: 500; }
.lang button[aria-pressed="true"] { color: var(--shell); }
.lang button:hover { color: var(--teal); }

/* --- The test --- */
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 20px 40px; }
.stage { display: flex; flex-direction: column; align-items: center; }

.gauge { position: relative; width: min(84vw, 380px, 50vh); min-width: 240px; aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; display: block; }
.gauge circle {
  fill: none; stroke-width: 16; stroke-linecap: round;
  transform: rotate(135deg); transform-origin: 150px 150px;
}
/* 270 degrees of a circle of radius 112: 527.8 of its 703.7. */
.track { stroke: var(--ink-3); stroke-dasharray: 527.8 703.7; }
.value { stroke: var(--teal); stroke-dasharray: 0 703.7; visibility: hidden; }
.gauge[data-phase="ul"] .value { stroke: var(--copper); }
.ticks text { fill: var(--faint); font-size: 11px; font-family: "Chillax", sans-serif; }

.go {
  position: absolute; inset: 25%; border-radius: 50%; border: 0;
  background: var(--teal); color: var(--ink);
  font-family: "Radix", "Chillax", sans-serif; font-weight: 700; font-size: clamp(1.25rem, 5vw, 1.7rem);
  box-shadow: 0 0 0 10px rgba(149, 191, 190, .14);
  transition: transform .15s, background-color .15s, box-shadow .15s;
}
.go:hover { background: var(--shell); box-shadow: 0 0 0 14px rgba(149, 191, 190, .2); }
.go:active { transform: scale(.97); }
.readout { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge:not([data-phase="idle"]) .go { display: none; }
.gauge:not([data-phase="idle"]) .readout { display: flex; }
.phase { color: var(--teal); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; min-height: 1.5em; }
.gauge[data-phase="ul"] .phase { color: var(--copper); }
.big {
  font-family: "Radix", "Chillax", sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(2.8rem, 15vw, 4.4rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.unit { color: var(--soft); font-size: 15px; margin-top: 4px; }

/* Stop and "again" sit in the opening at the bottom of the arc. */
.controls { min-height: 44px; margin-top: -52px; display: flex; align-items: center; position: relative; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: none; color: var(--shell); font-weight: 500; font-size: 15px; text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.pill:hover { border-color: var(--teal); color: var(--teal); }
.pill-main { background: var(--teal); border-color: var(--teal); color: var(--ink); font-weight: 600; }
.pill-main:hover { background: var(--shell); border-color: var(--shell); color: var(--ink); }

/* --- The four results --- */
.tiles { list-style: none; width: 100%; margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; overflow: hidden; padding: 14px 16px 16px; border-radius: 14px; background: var(--ink-2); border: 1px solid transparent; }
.tile.on { border-color: var(--line); background: var(--ink-3); }
.label { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 13px; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.dot-ul { background: var(--copper); }
.num { margin-top: 4px; font-family: "Radix", "Chillax", sans-serif; font-weight: 700; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num small { font-family: "Chillax", sans-serif; font-weight: 400; font-size: 12px; color: var(--faint); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.progress b { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.progress b.ul { background: var(--copper); }

.conn { margin-top: 16px; text-align: center; color: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
.conn strong { color: var(--shell); font-weight: 500; }
.live:not(.sr), .notice { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(190, 164, 134, .16); color: var(--shell); text-align: center; }

.share { width: 100%; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--ink-2); }
.share-title { font-size: 13px; font-weight: 500; color: var(--soft); margin-bottom: 10px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share input {
  flex: 1 1 220px; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--ink); color: var(--shell); font: inherit; font-size: 14px;
}

/* --- Under the test --- */
/* minmax(0, 1fr): a fold is as wide as the page, however long a line of code in it. */
.more { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
details { border-radius: 12px; background: var(--ink-2); }
summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 18px; position: relative; font-weight: 500; border-radius: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg);
}
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details > :not(summary) { padding: 0 18px 16px; color: var(--soft); font-size: 15px; }
details ol { padding-left: 38px; display: grid; gap: 6px; }
details dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
details dt { color: var(--shell); font-weight: 500; }
details dd { min-width: 0; overflow-wrap: anywhere; }
details pre { margin: 10px 18px 16px; padding: 12px 14px !important; border-radius: 10px; background: var(--ink); color: var(--teal); overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.offer {
  margin-top: 16px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--shell);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
}
.offer:hover { border-color: var(--teal); color: var(--shell); }
.offer strong { display: block; font-weight: 600; }
.offer span span { color: var(--soft); font-size: 15px; }
.offer-go { color: var(--ink); background: var(--copper); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; }

footer { padding: 20px 24px 28px; text-align: center; color: var(--faint); font-size: 13px; display: grid; gap: 4px; }
footer a { color: var(--soft); }

/* --- Narrower screens --- */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .bar nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .bar nav a { white-space: nowrap; font-size: 14px; padding: 6px 10px; }
  .lang { margin-left: auto; }
  main { padding: 0 14px 32px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  details dl { grid-template-columns: 1fr; gap: 2px; }
  details dd { margin-bottom: 8px; }
}
/* A laptop's short window: the gauge, the button and the four results stay on screen together. */
@media (max-height: 760px) and (min-width: 641px) {
  .gauge { width: min(320px, 46vh); }
  .tiles { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }