/* ============================================================================
   Keyboard Tester — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool: the on-screen keyboard grid, the stat strip and the
   live-event readout.

   Accent — indigo, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #818cf8  6.34:1 on --bg   5.85:1 on --surface   6.56:1 on --bg-sunk
     light #4338ca  7.58:1 on --bg   7.90:1 on --surface   6.94:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #818cf8; --accent-dim: rgba(129, 140, 248, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #4338ca; --accent-dim: rgba(67, 56, 202, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* ---------------------------------------------------------------- tool -- */

.kbt-tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.kbt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.9rem;
}

.kbt-intercept {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.kbt-intercept input { margin-top: 0.2em; flex: 0 0 auto; width: auto; }

.kbt-note { margin-bottom: 1.25rem; }

/* -------------------------------------------------------------- board --- */

.kbt-scroll {
  overflow-x: auto;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-bottom: 0.5rem;
}

.kbt-board {
  --ku: clamp(22px, 3.4vw, 34px);
  position: relative;
  margin: 0 auto;
  min-width: calc(var(--ku) * 23);
}

.kbt-key {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.35rem;
  transition: background-color 0.08s ease, border-color 0.08s ease, color 0.08s ease;
  overflow: hidden;
}

.kbt-key-label {
  font-family: var(--mono);
  font-size: clamp(0.5625rem, 0.5rem + 0.3vw, 0.75rem);
  color: var(--text-dim);
  line-height: 1;
  white-space: nowrap;
}

.kbt-key.is-tested {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
.kbt-key.is-tested .kbt-key-label { color: var(--ok); }

.kbt-key.is-active,
.kbt-key.is-tested.is-active {
  background: var(--accent);
  border-color: var(--accent);
}
.kbt-key.is-active .kbt-key-label { color: var(--on-accent); }

/* --------------------------------------------------------------- stats -- */

.kbt-stats { margin: 1.5rem 0; }
.kbt-stats .stat-value { color: var(--accent); }

/* ------------------------------------------------------------ readout --- */

.kbt-readout { margin-top: 0.5rem; }
.kbt-readout > h3 { margin: 0 0 0.9rem; }

.kbt-readout-grid {
  display: grid;
  gap: 0.9rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.kbt-readout-val {
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
  word-break: break-word;
}

/* ---------------------------------------------------------- article ---- */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }