/* keyboard.css — /testers/keyboard/ */

.kb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.kb-counter { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.kb-count {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.kb-count-of { font-size: .9375rem; color: var(--text-sec); }
/* --success is too light for text on white, so the complete state uses a
 * darker green, matching the other hardcoded status text colors. */
.kb-counter.complete .kb-count { color: #15803d; }
.kb-done {
  display: none;
  align-self: center;
  padding: .15rem .55rem;
  border-radius: var(--r-sm);
  background: var(--success-bg);
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: .8125rem;
  font-weight: 600;
}
.kb-counter.complete .kb-done { display: inline-block; }
.kb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* A keyboard cannot reflow, so below its natural width it scrolls sideways
   rather than shrinking its labels into illegibility. */
.kb-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .375rem;
}
.kb-board { min-width: 620px; }
.kb-svg { display: block; width: 100%; height: auto; }

/* ===== KEY STATES ===== */
.kb-key .kb-cap {
  fill: var(--surface-2);
  stroke: var(--border-input);
  stroke-width: 1;
  transition: fill .08s linear, stroke .08s linear;
}
.kb-label {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  fill: var(--text-sec);
  pointer-events: none;
}
.kb-label.small { font-size: 14px; }
.kb-label.tiny  { font-size: 11px; }

.kb-key.tested .kb-cap { fill: #bfdbfe; stroke: #60a5fa; }
.kb-key.tested .kb-label { fill: #1e3a8a; }

.kb-key.active .kb-cap { fill: var(--primary); stroke: var(--primary-hover); }
.kb-key.active .kb-label { fill: #fff; }

/* Untestable keys are drawn but struck through: they exist on the board and
   must not look like keys you simply have not reached yet. */
.kb-key.dead .kb-cap {
  fill: repeating-linear-gradient(0deg, #e2e8f0, #e2e8f0);
  fill: #eef2f6;
  stroke: var(--border);
  stroke-dasharray: 4 3;
}
.kb-key.dead .kb-label { fill: var(--text-muted); font-style: italic; }

/* The main event: everything still untested, outlined at once. */
.kb-board.show-untested .kb-key:not(.tested):not(.active):not(.dead) .kb-cap {
  fill: var(--warning-bg);
  stroke: var(--warning);
  stroke-width: 2.5;
}
.kb-board.show-untested .kb-key:not(.tested):not(.active):not(.dead) .kb-label { fill: #92400e; }

/* ===== LEGEND ===== */
.kb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.125rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--text-sec);
}
.kb-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.kb-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-input);
  display: inline-block;
}
.kb-swatch.neutral { background: var(--surface-2); }
.kb-swatch.active  { background: var(--primary); border-color: var(--primary-hover); }
.kb-swatch.tested  { background: #bfdbfe; border-color: #60a5fa; }
.kb-swatch.dead    { background: #eef2f6; border-style: dashed; }

.kb-notes p { font-size: .875rem; color: var(--text-sec); line-height: 1.6; }
.kb-focus-note,
.kb-hint { font-size: .8125rem; color: var(--text-muted); margin-top: .75rem; }

.kb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

@media (max-width: 560px) {
  .kb-count { font-size: 1.375rem; }
  .kb-actions { width: 100%; }
  .kb-actions .btn { flex: 1; }
}