/* Keyboard: a board mode, same 10×6 geometry, never a modal. */
#kb { flex: 1; display: none; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(6, 1fr); gap: var(--gap); }
body.kb #grid { display: none; }
body.kb #kb { display: grid; }
/* Keycaps size their glyph from the key's own box
   (container-type: size): letters fill the key instead of hitting a
   px clamp. Char keys are white; space, backspace, and the dead key wear
   utility colors. */
.kb-key {
  container-type: size;
  border-radius: 12px;
  border: 3px solid var(--edge);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--word-font);
  font-weight: 700;
  color: var(--ink-text);
  overflow: hidden;
  padding: 0;
}
.kb-key .kc { font-size: min(70cqh, 80cqw); line-height: 1; }
.kb-key:active { filter: brightness(0.92); }
.kb-util { border-color: var(--muted); background: var(--tray); }
.kb-util .kc { font-size: min(34cqh, 22cqw); }
.kb-key.latched { box-shadow: inset 0 0 0 3px var(--muted); background: #ddd6c4; }
/* Partner keys carry their sense's Fitzgerald color. */
.kb-partner { border-color: var(--rb); background: var(--rf); }
.kb-partner .kc { padding: 0 6px; }
.kb-partner.flash { filter: brightness(0.82); }
/* Device mode: the field holds the word in progress; the system
   keyboard covers rows 3–6. */
#kb-device {
  resize: none;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  font-family: var(--word-font);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink-text);
  padding: 0.4em 0.6em;
  line-height: 1.2;
  overflow: hidden;
}
.kb-spacekey .sub {
  font-family: -apple-system, "Helvetica Neue", sans-serif;
  font-size: min(16cqh, 12cqw);
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}