/* Geometry follows the physical layout; shared theme owns colors. */
main.test-page[data-page="keyboard"] .test-workspace { min-width: 0; }
.keyboard-controls { gap: 12px; flex-wrap: wrap; }
.keyboard-layout-field { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.keyboard-layout-field select { min-width: 175px; padding: 10px 34px 10px 12px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
main.test-page .test-workspace .keyboard-stage { min-width: 0; padding: 16px !important; }
main.test-page .test-workspace .keyboard-scroll { padding: 10px 2px 16px; scrollbar-width: thin; }
main.test-page .test-workspace .keyboard-board.keyboard-physical { display: grid; gap: 0; padding: 12px; box-sizing: border-box; margin-inline: auto; border-radius: 14px; }
main.test-page .test-workspace .keyboard-physical .keyboard-key { height: auto; min-height: 0; margin: 2px; padding: 2px; font-size: 12px; line-height: 1.05; gap: 1px; border-radius: 5px; overflow: hidden; }
.keyboard-physical .keyboard-key small { font-size: 11px; color: var(--muted); }
.keyboard-physical .keyboard-key.pressed small { color: inherit; }
.keyboard-physical .keyboard-key.pressed { transition: none; }
.keyboard-fn-state { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface); }
.keyboard-fn-state b { font-size: 12px; }
.keyboard-fn-state.seen { background: var(--accent-soft); border-color: var(--accent-text); color: var(--accent-text); }
.keyboard-fn-state.pressed { background: var(--action); border-color: var(--action-hover); color: var(--on-action); }
.keyboard-physical .key-wide { align-items: flex-start; padding-inline: 6px !important; }
html[data-theme] .keyboard-physical .key-hardware { background: var(--surface2); color: var(--muted); border-style: dashed; box-shadow: none; }
.keyboard-reference { margin-left: auto; font-family: var(--mono, monospace); font-size: 10px; color: var(--muted); }
.keyboard-hardware-note { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.keyboard-hardware-note[hidden] { display: none; }
.keyboard-event-info { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.6 var(--mono, monospace); overflow-wrap: anywhere; }
main.test-page[data-page="keyboard"] .test-workspace > .keyboard-coverage { grid-column: 1 / -1; }
@media (min-width: 1101px) {
  main.test-page[data-page="keyboard"] .test-workspace { grid-template-columns: 1.15fr 1fr; }
}
@media (max-width: 700px) {
  main.test-page .test-workspace .keyboard-physical .keyboard-key { font-size: 11px; }
  .keyboard-layout-field { flex-basis: 100%; justify-content: space-between; }
  .keyboard-layout-field select { flex: 1; max-width: 240px; }
  main.test-page .test-workspace .keyboard-stage { padding: 12px !important; }
  .keyboard-reference { margin-left: 0; }
}