/* ==========================================================================
   /keyboard-key-test/ — tool.css
   Only genuinely page-specific rules. Everything else comes from
   /assets/css/design-system.css.
   ========================================================================== */

/* The stage doubles as the readout here, so it needs a little more room than
   the shared default and its children must be allowed to shrink at 320px. */
.kt-stagewrap { min-inline-size: 0; }

#kt-stage {
  gap: 0.65rem;
  min-block-size: clamp(230px, 38vh, 340px);
}

#kt-stage > * { max-inline-size: 100%; min-inline-size: 0; }

.kt-status { margin: 0; }

/* The pressed key itself. .stage__big sets the mono/tabular face and the
   default clamp; long key names (AudioVolumeUp, ArrowDown) would blow past
   320px at that size, so tool.js swaps in a smaller step by length. */
.kt-glyph {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-inline: 0.25rem;
}

.kt-glyph--med  { font-size: clamp(1.75rem, 1.1rem + 4vw, 3rem); }
.kt-glyph--long { font-size: clamp(1.25rem, 0.95rem + 2.2vw, 2rem); }
.kt-glyph--none { color: var(--text-3); }

.kt-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-2);
  max-inline-size: 46ch;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- properties */

.kt-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0.5rem;
  margin: 0;
}

.kt-prop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  min-inline-size: 0;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.kt-prop dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}

.kt-prop dd {
  margin: 0;
  min-inline-size: 0;
  font-size: 0.9375rem;
  color: var(--text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.kt-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ------------------------------------------------------------- matched pair */

.kt-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.kt-pair__cell {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-inline-size: 0;
}

.kt-pair__k {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}

.kt-pair__v { font-size: 1.125rem; font-weight: 650; }
.kt-pair__cell--lead .kt-pair__v { font-size: 1.375rem; color: var(--accent); }
.kt-pair__u { font-size: 0.75rem; color: var(--text-2); }
.kt-pair__arrow { color: var(--text-2); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- advanced */

.kt-adv { padding: 0 1rem 0.9rem; }
.kt-adv > * + * { margin-block-start: 0.55rem; }

@media (max-width: 420px) {
  .kt-pair__arrow { display: none; }
  .kt-pair { gap: 0.35rem 0.7rem; }
}