@charset "utf-8";
/* ==========================================================================
   /keyboard-performance-test/ — tool.css
   Page-specific rules ONLY. Everything else comes from design-system.css.
   Additions here: the numbered stepper, the progress bar, the per-stage panel
   rhythm, and the twelve key-coverage chips. Nothing else was needed.
   ========================================================================== */

/* ---------------------------------------------------------------- runner */

.runner__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- stepper */

.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.stepper > li { min-inline-size: 0; }

.step {
  inline-size: 100%;
  min-block-size: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem 0.45rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.6875rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.step:hover { border-color: var(--accent); color: var(--text); }

.step__n {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-ui);
  border-radius: 50%;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.step__name { display: block; font-weight: 600; }

.step__state {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* State is carried by the .step__state word as well as the colour, per §3.4.
   Order matters: the "which stage am I looking at" cue must win over the
   "what happened to this stage" cue, so .is-active is declared last. */
.step.is-done { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }

.step.is-done .step__n {
  background: color-mix(in srgb, var(--good) 22%, transparent);
  border-color: var(--good);
}

.step.is-done .step__state { color: var(--good); }

.step.is-skipped .step__n { border-style: dashed; color: var(--text-3); }
.step.is-skipped .step__state { color: var(--amber); }

.step.is-running { border-color: var(--accent); }
.step.is-running .step__state { color: var(--accent); }

.step.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  color: var(--text);
}

.step.is-active .step__n {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Below 700px the stage names are kept for assistive technology but taken out
   of the visual flow — five names side by side cannot fit a 320px viewport. */
@media (max-width: 699px) {
  .step__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --------------------------------------------------------------- progress */

.progress__track {
  block-size: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

/* Width is driven by a custom property so tool.js never has to choose between
   the logical and physical CSSOM property names. */
.progress__fill {
  display: block;
  block-size: 100%;
  inline-size: var(--p, 0%);
  background: var(--accent);
  transition: inline-size 0.22s ease;
}

.progress__text {
  margin-block-start: 0.4rem;
  color: var(--text-2);
}

/* ----------------------------------------------------------------- panels */

.panel {
  margin-block-start: var(--space);
  padding-block-start: var(--space);
  border-block-start: 1px solid var(--border);
}

.panel > * + * { margin-block-start: 0.85rem; }

.panel__title { font-size: 1.0625rem; }

.panel__lede {
  color: var(--text-2);
  max-inline-size: var(--maxw-prose);
  font-size: 0.9375rem;
}

.panel__status {
  min-block-size: 1.5em;
  font-size: 0.9375rem;
  color: var(--text);
}

.panel__chart { --chart-h: clamp(160px, 34vw, 260px); }

.panel__peak { overflow-wrap: anywhere; }

.excl { color: var(--text-2); }

.runner__foot {
  margin-block-start: var(--space);
  padding-block-start: var(--space);
  border-block-start: 1px solid var(--border);
}

/* Stage 3 holds a grid of keycaps rather than one big number, so it opts out
   of the centred single-readout layout the shared .stage uses. */
.stage--flat {
  place-content: start center;
  min-block-size: auto;
  padding-block: clamp(0.9rem, 2.5vw, 1.4rem);
}

/* ------------------------------------------------------- coverage keycaps */

.covkeys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.covkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-inline-size: 3.5rem;
  padding: 0.35rem 0.4rem 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border-ui);
  border-radius: var(--r-sm);
}

.covkey__label {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--text);
}

.covkey__code {
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.2;
  color: var(--text-2);
}

.covkey__state {
  font-size: 0.625rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

/* "registered" text plus the tick is the non-colour cue. */
.covkey--hit {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 16%, var(--surface-2));
}

.covkey--hit .covkey__state {
  color: var(--good);
  font-weight: 700;
}

.covkey--hit .covkey__state::before { content: "\2713\00a0"; }

/* ----------------------------------------------------------------- report */

/* Class, not #report-card: an id here would out-specify every override below. */
.report-card > * + * { margin-block-start: var(--space); }

.report__h3 { font-size: 1.0625rem; }

.report__prose {
  color: var(--text-2);
  max-inline-size: var(--maxw-prose);
  font-size: 0.9375rem;
}

.report__h3 + .report__prose,
.report__prose + .report__prose { margin-block-start: 0.6rem; }

.report__skipped {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.report__chart { --chart-h: clamp(180px, 36vw, 300px); }

.env-coarse { margin-block-start: 0.85rem; }

.tool-intro { margin-block-end: var(--space); }

.report-card > #save-note { margin-block-start: 0.75rem; }