/* keyboard.css — theme overrides for simple-keyboard.
   The library ships a light default; everything below re-skins it to match the
   app and adds the three highlight states we drive from capture.js.

   IMPORTANT: simple-keyboard uses whatever selector you construct it with as
   its ROOT CLASS — it does not add `.simple-keyboard` when you pass your own.
   Ours mounts on `.drill-keyboard`, so scoping these rules to `.simple-keyboard`
   silently matches nothing and the keyboard stays white. Scope to
   `.drill-keyboard.kb-theme`, which also out-specifies the library's own
   `.hg-theme-default .hg-button` (0,3,0 vs 0,2,0). */

.keyboard-hud {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.drill-keyboard.kb-theme {
  background: var(--bg-2);
  padding: .55rem;
  font-family: "Segoe UI", system-ui, sans-serif;
}

.drill-keyboard.kb-theme .hg-row { margin-bottom: 4px; }
.drill-keyboard.kb-theme .hg-row:last-child { margin-bottom: 0; }

.drill-keyboard.kb-theme .hg-button {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  height: 30px;
  font-size: .72rem;
  font-weight: 500;
  box-shadow: none;
  transition: background .08s ease, color .08s ease, border-color .08s ease;
}

.drill-keyboard.kb-theme .hg-button:active,
.drill-keyboard.kb-theme .hg-button.hg-activeButton {
  background: var(--surface-2);
}

/* Modifiers read as furniture rather than as targets. */
.drill-keyboard.kb-theme .hg-button[data-skbtn="{ctrl}"],
.drill-keyboard.kb-theme .hg-button[data-skbtn="{alt}"],
.drill-keyboard.kb-theme .hg-button[data-skbtn="{shift}"],
.drill-keyboard.kb-theme .hg-button[data-skbtn="{meta}"],
.drill-keyboard.kb-theme .hg-button[data-skbtn="{tab}"],
.drill-keyboard.kb-theme .hg-button[data-skbtn="{enter}"] {
  color: var(--text);
}

/* The arrow cluster is its own row and would otherwise stretch to full width,
   giving three enormous keys that read as more important than the letters. */
.drill-keyboard.kb-theme .hg-row:last-child { justify-content: center; }
.drill-keyboard.kb-theme .hg-row:last-child .hg-button { max-width: 54px; }

/* ------------------------------------------------------- highlight states
   Driven from js/ui/keyboard.js, which derives them from capture.js's
   normaliser rather than simple-keyboard's own physical-key handling — two
   sources of truth about which key was pressed is the one bug class this app
   cannot afford. */

.drill-keyboard.kb-theme .hg-button.kb-pressed {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--bg);
}

.drill-keyboard.kb-theme .hg-button.kb-wrong {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg);
}

/* Declared after .kb-wrong so that a key which is both pressed-wrongly and part
   of the right answer reads as correct — equal specificity, later wins. */
.drill-keyboard.kb-theme .hg-button.kb-correct {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
  font-weight: 700;
}

@media (max-width: 46rem) {
  .drill-keyboard.kb-theme .hg-button { height: 26px; font-size: .64rem; }
}