/* Vista de solo teclado: la tablet se convierte en la máquina y nada más.
   El texto se lee en la otra pantalla, así que aquí sobra todo lo demás. */

.screenbar {
  display: none;
  align-items: center;
  gap: 1.5vw;
  font-size: min(1.6vh, 1.6vw);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

.screenbar__button {
  padding: 0.35em 1em;
  border: 1px solid color-mix(in srgb, var(--label) 45%, transparent);
  border-radius: 1em;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.screenbar__button:hover {
  background: color-mix(in srgb, var(--label) 18%, transparent);
}

.screenbar__link {
  margin-right: auto; /* empuja los botones a la derecha */
}

.screenbar__link::before {
  content: "● ";
}

/* Nadie mirando: escribirías a ciegas y sin que se vea en ningún sitio. */
.screenbar__link--alone {
  color: var(--red);
}

:root[data-view="keyboard"] .plate,
:root[data-view="keyboard"] .crt,
:root[data-view="keyboard"] .lesson,
:root[data-view="keyboard"] .hint {
  display: none;
}

:root[data-view="keyboard"] .screenbar {
  display: flex;
}

/* Sin lo de arriba, el teclado puede crecer a lo alto. A lo ancho NO: el límite
   son las 11 columnas, que no cambian por quitar la cabecera. Pasado 7.8vw las
   teclas de los extremos se salen de la pantalla, y como el body no hace scroll
   se cortan sin avisar. */
:root[data-view="keyboard"] {
  --key-size: min(7.8vw, 19vh);
}

:root[data-view="keyboard"] .machine {
  justify-content: center;
  gap: 2.5vh;
}