/* Test area card, GO button, live speed number, stage line, progress bar (07 §1.2, 08 §7.1).
   The card never changes size between states (CLS < 0.05). */
.test-area {
  position: relative; max-width: var(--test-max); min-height: var(--test-area-min-h); margin: var(--space-5) auto 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  /* One column that never grows past the card: without it the 640 px ping chart widens the column (no-JS view). */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Title + tools on one row; the optional lead (home) spans the full width under them. */
.test-area__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); }
.test-area__title { font-size: var(--text-h1); line-height: 1.2; font-weight: 700; }
.test-area__lead { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: 60ch; }
.test-area__tools { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.test-area__body { display: grid; place-items: center; text-align: center; }

.go-btn {
  width: var(--go-size); height: var(--go-size); border-radius: 50%;
  border: 3px solid var(--color-primary); background: transparent; color: var(--color-primary);
  font-size: var(--text-h1); font-weight: 700; letter-spacing: .04em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.go-btn:hover { background: var(--color-primary); color: var(--color-on-primary); }
.go-btn:focus-visible { outline-offset: 4px; }

.speed { display: grid; justify-items: center; }
.speed__value {
  display: block; min-width: 4ch; height: var(--speed-box-h);
  font-size: var(--text-speed); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--color-text);
}
.speed__unit { font-size: var(--text-speed-unit); font-weight: 600; color: var(--color-text-muted); }
.speed__stage {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-muted);
}
.speed__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); animation: live-pulse 1.2s var(--ease) infinite; }
@keyframes live-pulse { 50% { opacity: .3; } }

/* Done state: ↓ and ↑ side by side at result size */
.speed-done { display: flex; justify-content: center; gap: var(--space-7); flex-wrap: wrap; }
.speed-done__item { display: grid; justify-items: center; }
.speed-done__label { font-size: var(--text-small); color: var(--color-text-muted); font-weight: 600; }
.speed-done__value { font-size: var(--text-result); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }

.test-error { display: grid; gap: var(--space-3); justify-items: center; color: var(--color-text); }
.test-error__icon { color: var(--color-bad); width: var(--icon-lg); height: var(--icon-lg); }

/* Stage progress (not speed) along the bottom edge of the card */
.test-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.test-progress__bar { height: 100%; width: 0; background: var(--color-live); transition: width var(--dur-slow) linear; }

/* Auto-start countdown under GO: space reserved in the ready state, visible only while counting (no layout shift). */
.countdown {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); margin-top: var(--space-3);
  font-size: var(--text-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; visibility: hidden;
}
.countdown.is-active { visibility: visible; }
.test-area:not([data-state="ready"]) .countdown { display: none; }
.test-note { font-size: var(--text-small); color: var(--color-text-muted); text-align: center; }

.test-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.test-actions__auto { flex: 1 1 100%; justify-content: center; font-size: var(--text-small); color: var(--color-text-muted); }
@media (max-width: 575.98px) { .test-actions .btn { flex: 1 1 100%; } }