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

   This page is a developer inspector, so it needs three things the shared
   system deliberately does not provide:
     1. a dense label/value property grid (.props)
     2. a segmented mode switch (.seg)
     3. code snippet blocks with a copy affordance (.snippet)
   ========================================================================== */

/* ------------------------------------------------------------ control rows */

/* Wraps at every width; each child may shrink, so 320px never overflows. */
.evt-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-block-end: 0.75rem;
}
.evt-controls > * { min-inline-size: 0; }
.evt-controls .field { flex: 1 1 11rem; max-inline-size: 18rem; }

/* Checkbox + label pairs. 44px min height keeps the touch target legal. */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 44px;
  font-size: 0.875rem;
  color: var(--text-2);
  cursor: pointer;
}
.chk input[type="checkbox"] {
  flex: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.chk code { font-size: 0.85em; }

/* --------------------------------------------------------- segmented mode */

/* .seg / .seg__btn geometry and the selected plate come from the shared
   component (design-system.css §10.1), which understands .is-on as well as
   aria-pressed/checked/selected. This page keeps only the extra non-colour
   marker below — three implementations of one control was two too many. */

/* State is never colour-only: the on button also carries aria-checked="true". */
.seg__btn.is-on::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-end: 0.45em;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  vertical-align: middle;
}

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

/* The inspector stage is a permanent readout rather than a timed test surface,
   so it is shorter than the shared default and shows the raw key value. */
#stage { min-block-size: clamp(140px, 22vh, 200px); }
#stage-key { max-inline-size: 100%; overflow-wrap: anywhere; }

/* ------------------------------------------------------- property grid */

.props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.85rem;
  align-items: start;
}
.props-grid > * { min-inline-size: 0; }

.props-grid .card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  margin-block-end: 0.6rem;
}

.props { display: grid; gap: 1px; background: var(--border); border-radius: var(--r-sm); overflow: hidden; }

.prop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.4rem 0.55rem;
  background: var(--surface);
}
.prop dt {
  font-size: 0.75rem;
  font-family: var(--mono);
  color: var(--text-2);
  min-inline-size: 0;
}
.prop dd {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-align: end;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
/* Boolean readouts are colour + text, never colour alone: the value word
   ("true"/"false") is always present next to the hue. */
.prop dd[data-v="true"] { color: var(--good); }
.prop dd[data-v="false"] { color: var(--text-2); }
.prop dd[data-v="warn"] { color: var(--warn); }

/* --------------------------------------------------------------- snippets */

.snippet {
  font-size: 0.8125rem;
  white-space: pre;
  tab-size: 2;
  max-block-size: 22rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.snippet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shortcut-combo {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 650;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- log table */

/* Seven columns of short values: the shared 30rem minimum is wider than needed
   and forces a scrollbar on tablets where the table would otherwise fit. */
#log-table { min-inline-size: 26rem; }
#log-table td, #log-table th { padding-block: 0.4rem; }
#log-table tbody td { font-size: 0.8125rem; }

.log-empty td { color: var(--text-2); text-align: center; padding-block: 1.25rem; }

/* Event type is identified by its text, never by colour alone. */
.log-type { font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }
.log-type--keydown { color: var(--accent); }
.log-type--keyup { color: var(--c4); }
.log-type--keypress { color: var(--warn); }
.log-type--composition { color: var(--c2); }

.log-mods { font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); white-space: nowrap; }
.log-rep { color: var(--warn); font-weight: 700; }

/* Newest row highlight, dropped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .log-new td { animation: klt-evt-flash 0.6s ease-out; }
  @keyframes klt-evt-flash {
    from { background: color-mix(in srgb, var(--accent) 22%, transparent); }
    to { background: transparent; }
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .evt-controls, .btnrow, #stage { display: none !important; }
}