/* ==========================================================================
   /n-key-rollover-test/ — page-specific rules only.
   Everything structural comes from /assets/css/design-system.css.
   ========================================================================== */

/* The stage carries a very large live counter, so its own hint text needs to
   stay compact and the block must not grow taller than one screen on a phone. */
.nkro-stage {
  gap: 0.35rem;
}

.nkro-stage__unit {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* The status line changes only when an attempt finishes, so it is safe to make
   it a polite live region — it never announces while keys are being held. */
.nkro-stage__status {
  min-block-size: 2.8em;
  color: var(--text-2);
}

.nkro-stage[data-held="1"] .stage__big { color: var(--accent); }

/* ------------------------------------------------------------- held key set */

.keyset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 0.75rem 0;
  padding: 0;
  list-style: none;
  /* Two rows of chips at 320px, so the layout does not jump on every press. */
  min-block-size: 2.4rem;
}

.keychip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: 0.8125rem;
  line-height: 1.15;
  max-inline-size: 100%;
}

.keychip__name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.keychip__code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* Modifiers get a dashed edge as well as a different tint: state must never be
   colour-only (BUILD-SPEC §3.4). */
.keychip--mod {
  border-style: dashed;
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
}

.keychip--empty {
  border-style: dashed;
  border-color: var(--border-ui);
  background: transparent;
  color: var(--text-2);
  font-style: italic;
  justify-content: center;
}

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

.nkro-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-block: 0.9rem;
}

/* Best-attempt keys stay marked after release. Dashed outline is the non-colour
   cue; it sits inside the cap so it cannot widen the key box. */
.kbd-key.is-best {
  outline: 2px dashed var(--amber);
  outline-offset: -4px;
}

/* Legend swatches mirror the three key states above. */
.lg {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  vertical-align: -1px;
  border: 1px solid var(--border-ui);
}

.lg--held { background: var(--accent); border-color: var(--accent); }
.lg--hit { background: color-mix(in srgb, var(--good) 40%, var(--surface-2)); border-color: var(--good); }
.lg--best { background: transparent; border: 2px dashed var(--amber); }

/* ------------------------------------------------------------------ tables */

/* The key-set column is the only free-text column and would otherwise stretch
   the table far past the viewport on a long attempt. */
.tbl td[data-cell="set"] {
  min-inline-size: 16rem;
  max-inline-size: 32rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tbl tr[data-best="1"] th,
.tbl tr[data-best="1"] td {
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

/* Text badge, not colour alone, marks the record row. */
.rowflag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
}

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