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

/* --------------------------------------------------------------------------
   1 — Held-key chips inside the stage
   The stage already centres its children; the chip row just needs to wrap and
   stay readable when a dozen keys are down at once.
   -------------------------------------------------------------------------- */

.heldlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-inline-size: 56ch;
}

.heldlist:empty { display: none; }

.heldlist li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.32rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2 — Keyboard map wrapper
   The horizontal scroller is moved from .kbd-map onto the labelled, focusable
   mount so the map has exactly one tab stop and that tab stop is the element
   carrying the accessible name. The map itself then sizes to its content so
   its border and background span the full width of the widest row.
   -------------------------------------------------------------------------- */

.kbd-mount {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r);
}

.kbd-mount > .kbd-map {
  overflow-x: visible;
  inline-size: max-content;
  min-inline-size: 100%;
}

.kbd-mount:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3 — Two extra key states this page needs
   ::after is already taken by .kbd-key--hit, so both markers use ::before.
   Each state pairs a colour with a glyph so it is never colour-only.
   -------------------------------------------------------------------------- */

.kbd-key--target {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

.kbd-key--target::before,
.kbd-key--miss::before {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 2px;
  font-size: max(7px, calc(var(--u) * 0.2));
  line-height: 1;
  pointer-events: none;
}

.kbd-key--target::before {
  content: "\25C6";              /* ◆ target of the selected combination */
  color: var(--amber);
}

.kbd-key--miss {
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad);
}

.kbd-key--miss::before {
  content: "\2715";              /* ✕ did not register on the last attempt */
  color: var(--bad);
}

/* A key that is down right now outranks both markers. */
.kbd-key--active::before { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   4 — Legend swatches
   -------------------------------------------------------------------------- */

.kbd-map__legend .lg {
  inline-size: 11px;
  block-size: 11px;
  border-radius: 2px;
  border: 1px solid var(--border-ui);
  flex: none;
}

.kbd-map__legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lg--active { 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--target { background: transparent; border-color: var(--amber); }
.lg--miss   { background: transparent; border-color: var(--bad); }

/* --------------------------------------------------------------------------
   5 — Control row (layout selects)
   -------------------------------------------------------------------------- */

.ctlrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0.75rem;
  align-items: end;
}

.subhead {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-2);
  margin-block-start: 1.25rem;
}

/* --------------------------------------------------------------------------
   6 — Preset combination cards
   -------------------------------------------------------------------------- */

.combogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0.75rem;
  margin-block-start: 0.6rem;
}

.combo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 0.8rem 0.9rem;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border-ui);
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.combo:hover { border-color: var(--accent); background: var(--surface-2); }

/* Selection is announced by aria-pressed; the ring and the "Selected" prefix in
   the status pill are the visual and textual equivalents. */
.combo[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
}

.combo__name {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.combo__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-2);
}

.combo__status { margin-block-start: 0.15rem; }

/* --------------------------------------------------------------------------
   7 — Result panel
   -------------------------------------------------------------------------- */

.keyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
}

.keyrow li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-ui);
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
}

.keyrow--ok li   { border-color: var(--good); }
.keyrow--miss li { border-color: var(--bad); }
.keyrow--warn li { border-color: var(--warn); }

.resultline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* The four-causes list shown whenever a combination came back incomplete. */
.causes { padding-inline-start: 1.25em; }
.causes li + li { margin-block-start: 0.3rem; }

@media (prefers-reduced-motion: reduce) {
  .combo { transition: none; }
}