@charset "utf-8";
/* ==========================================================================
   /keyboard-reaction-time-test/ — tool.css
   Page-specific rules ONLY. Everything else comes from design-system.css.

   Three things here are genuinely local to this page:
     1. The signal / false-start stage fills. The shared system has
        --armed/--running/--done, but this test needs an unmistakable
        full-bleed GREEN "go" surface and a full-bleed RED "too early"
        surface. Both use --on-solid so the text stays AA on the fill in
        both themes.
     2. The stage is a real <button>, so it needs width + cursor fixes that
        the shared .stage (authored for <div>) does not carry.
     3. Small layout helpers: the control bar, the attempt dots, the
        two-up chart grid.
   ========================================================================== */

/* --------------------------------------------------------------- controls */

.rt-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-block-end: var(--space);
}

.rt-controls .field {
  inline-size: 100%;
  max-inline-size: 12rem;
}

/* ------------------------------------------------------------------ stage */

/* .stage was authored for a <div>; as a <button> it must fill its column and
   inherit the page text alignment rather than the UA's centred button text. */
button.stage {
  inline-size: 100%;
  font: inherit;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.rt-stage__msg {
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
  font-weight: 650;
  line-height: 1.2;
  max-inline-size: 26ch;
}

.rt-stage__sub {
  font-size: 0.9375rem;
  color: var(--text-2);
  max-inline-size: 44ch;
}

/* The two states the shared system does not provide. Colour is never the only
   signal: the stage text changes at the same moment ("PRESS NOW" / "Too
   early"), so this is redundant reinforcement, not the message itself. */
.stage--signal {
  border-style: solid;
  border-color: var(--good);
  background-color: var(--good);
  background-image: none;
  color: var(--on-solid);
}

.stage--signal .rt-stage__sub,
.stage--early .rt-stage__sub { color: inherit; opacity: 0.85; }

.stage--early {
  border-style: solid;
  border-color: var(--bad);
  background-color: var(--bad);
  background-image: none;
  color: var(--on-solid);
}

/* ------------------------------------------------------------ attempt dots */

.rt-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
  margin-block-start: 0.85rem;
}

.rt-dots li {
  inline-size: 1.75rem;
  block-size: 0.35rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.rt-dots li.is-done { background: var(--accent); border-color: var(--accent); }
.rt-dots li.is-now { background: var(--amber); border-color: var(--amber); }
.rt-dots li.is-void { background: var(--bad); border-color: var(--bad); }

/* ----------------------------------------------------------------- status */

.rt-status {
  margin-block-start: 0.85rem;
  min-block-size: 1.5em;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.rt-status b { color: var(--text); }

/* ----------------------------------------------------------------- charts */

.rt-charts {
  display: grid;
  gap: var(--space);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rt-charts { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- table bits */

.rt-flag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.rt-flag--ok { color: var(--good); }
.rt-flag--void { color: var(--bad); }

/* Keycap-ish rendering for the key name column. */
.rt-key {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  button.stage,
  .stage--signal,
  .stage--early { transition: none; }
}