@charset "utf-8";
/* ==========================================================================
   /keyboard-tester/ — page-specific rules only.
   Everything else comes from /assets/css/design-system.css.
   ========================================================================== */

/* Layout picker row. minmax(min(...)) so three selects collapse to one column
   at 320px instead of forcing the page sideways. */
.kt-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.75rem;
  margin-block-end: var(--space);
}

.kt-actions { margin-block-end: 0.6rem; }
.kt-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 44px;
  font-size: 0.8125rem;
  color: var(--text-2);
  cursor: pointer;
}

.kt-check input { inline-size: 1rem; block-size: 1rem; accent-color: var(--accent); cursor: pointer; }

.kt-hint { max-inline-size: var(--maxw-prose); margin-block-end: 0.75rem; }
.kt-hint kbd { font-size: 0.75em; }

/* ---- the map mount ------------------------------------------------------
   The mount is the focus target: focusing it arms key capture. The scrolling
   box is .kbd-map inside it, styled by the design system. */

.kt-map { border-radius: var(--r); }
.kt-map:focus { outline: none; }

.kt-map:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--ring);
}

.kt-map.is-capturing .kbd-map {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

/* Legend swatches mirror the three keycap states so the colours are never the
   only cue. */
.kt-sw {
  display: inline-block;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border-radius: 3px;
  border: 1px solid var(--border-ui);
  vertical-align: -1px;
}

.kt-sw--idle   { background: var(--surface-2); }
.kt-sw--hit    { background: color-mix(in srgb, var(--good) 20%, var(--surface-2)); border-color: var(--good); }
.kt-sw--active { background: var(--accent); border-color: var(--accent); }
.kt-sw--dead   {
  border-style: dashed;
  border-color: var(--border);
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--bad) 40%, transparent) 0 2px,
    transparent 2px 5px
  );
}

/* ---- results grid ------------------------------------------------------- */

.kt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--space);
  margin-block-start: var(--space);
}

.kt-grid > * { min-inline-size: 0; }

.kt-cov-line {
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.35rem);
  color: var(--text);
}

/* Coverage bar. The number beside it carries the same information as text, so
   the bar itself is decorative. */
.kt-bar {
  block-size: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.kt-bar > span {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--good);
  transition: inline-size 0.18s ease;
}

.kt-sub {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-2);
  margin-block-start: 1rem;
}

/* Chips for untested / unmapped key names. Not .tag: key legends such as
   "PgUp" must keep their capitalisation. */
.kt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-block-size: 13rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.keychip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-ui);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.keychip--unmapped { color: var(--text); border-color: var(--amber); }

/* ---- key detail list ---------------------------------------------------- */

.kt-dl {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.9375rem;
}

.kt-dl dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  align-self: center;
}

.kt-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.kt-unmapped { margin-block-start: var(--space); }
.kt-adv { margin-block-start: var(--space); }

/* NOTE: the page-local --u override that used to live here is gone.
   It was gated behind @media (min-width: 768px), which suppressed it exactly
   where it was needed: below 768px this page fell back to the old shared 22px
   floor and rendered all 87 keycaps at 18x18px with a 7px legend. The keycap
   size policy is now defined once, in design-system.css §14 (40px floor, 48px
   on coarse pointers), and applies at every width. Do not re-add one here. */