/* Computer · Tastiera di bordo (scripts/tastiera.js), uguale in tutta l'app.
   Blocchi LCARS piatti: lettere scure con filo lilla, tasti funzione pieni color pesca, invio a pillola ambra.
   Griglia a 20 colonne: una lettera ne occupa 2, i tasti larghi 3, 4, 7 o 9. */

.keyboard {
  --key-height: 42px;
  --key-gap: 5px;
  display: grid;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.keyboard__row { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: var(--key-gap); }

.keyboard__key {
  display: flex;
  grid-column: span 2;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-width: 0;
  height: var(--key-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-lilac) 10%, var(--color-screen));
  box-shadow: inset 0 0 0 1px var(--color-lilac-line);
  color: var(--color-ink);
  font: 500 calc(var(--text-2xl) * 1.15)/1 var(--font-display);
  letter-spacing: .02em;
  cursor: pointer;
}
.keyboard__key .ico { width: 20px; height: 20px; }
/* Seconda fila di lettere (9 tasti): rientra di mezza lettera per parte, come una tastiera vera. */
.keyboard__row--2 .keyboard__key:first-child { grid-column: 2 / span 2; }

.keyboard__key--w3 { grid-column: span 3; }
.keyboard__key--w4 { grid-column: span 4; }
.keyboard__key--w6 { grid-column: span 6; }
.keyboard__key--w7 { grid-column: span 7; }
.keyboard__key--w9 { grid-column: span 9; }

.keyboard__key--spazio { color: var(--color-faint); font-size: var(--text-lg); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* Tasti funzione: ⇧ ⌫ ?# pieni color pesca; ⇧ attivo ambra, bloccato con la barra sotto. */
.keyboard__key--fn {
  background: var(--color-peach);
  box-shadow: none;
  color: var(--color-on-amber);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}
.keyboard__key--fn[aria-pressed="true"] { background: var(--color-amber); }
.keyboard__key--bloccato { box-shadow: inset 0 -4px 0 var(--color-on-amber); }

/* Invio: pillola ambra come i pulsanti principali LCARS. */
.keyboard__key--invio {
  border-radius: 21px 4px 4px 21px;
  background: var(--color-amber);
  box-shadow: none;
  color: var(--color-on-amber);
  font-size: calc(var(--text-xl) * var(--display-scale));
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Pressione: lampo pieno lilla (classe messa al pointerdown: su iOS :active non basta). */
.keyboard__key--premuto { background: var(--color-lilac); box-shadow: none; color: var(--color-on-lilac); }
.keyboard__key--fn.keyboard__key--premuto, .keyboard__key--invio.keyboard__key--premuto { background: var(--color-ink); color: var(--color-screen); }

/* Tastiera dei campi delle sezioni: al posto della console finché si scrive (scripts/tastiera.js). */
.app--tastiera .console { display: none; }
.dock__keyboard--sezione { margin-bottom: var(--space-2); }

/* Spenta (verifica in corso): tasti a riposo, nessun tocco. */
.keyboard--spenta { pointer-events: none; }
.keyboard--spenta .keyboard__key { background: color-mix(in srgb, var(--color-lilac) 5%, var(--color-screen)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-lilac-line) 50%, transparent); color: var(--color-faint); }

/* Safari con le barre (altezza ridotta): tasti più bassi. */
@media (max-width: 699px) and (max-height: 740px) {
  .keyboard { --key-height: 38px; gap: 5px; }
}