/* ==========================================================================
   FRENETIC — telefono e tablet.
   Va caricato per ULTIMO: qui si sovrascrive di proposito quello che sta
   nei due fogli precedenti, e l'ordine e' l'unica cosa che lo garantisce
   senza dover alzare la specificita' dei selettori.
   ========================================================================== */

/* La nota "questo si fa dal computer" esiste solo dove serve: su schermo
   grande chi legge e' gia' davanti alla macchina su cui installare. */
.solo-computer { display: none; }

/* --- bersagli tattili --------------------------------------------------
   44 px e' la misura minima perche' un dito prenda un comando al primo
   colpo. Sotto, si sbaglia e si riprova — ed e' il modo piu' rapido per
   far sembrare lento un sito che lento non e'.
   Vale su tutto cio' che ha un puntatore GROSSOLANO (dito), non sulla
   larghezza dello schermo: un tablet largo si usa comunque col dito. */
@media (pointer: coarse) {
  .nav-torna { padding: 12px 18px; }
  .copia { min-height: 44px; padding: 0 18px; }
  .collega { padding: 4px 0; display: inline-block; }
  .enter { padding: 15px 28px; }
  .replay { padding: 12px 20px; }
}

@media (max-width: 767px) {
  .solo-computer { display: grid; }
  /* Il segnale della nota e' un punto esclamativo, non un numero: non e'
     un passo dell'installazione, e numerarlo farebbe contare quattro passi
     dove sono tre. */
  .solo-computer .k { color: var(--flame-high); font-weight: 700; }
  .solo-computer .passo-corpo p { color: var(--paper); }

  /* La barra in alto perde le maiuscole spaziate: a 375 px quel testo
     occupa mezza riga per dire due parole. */
  .nav-torna { letter-spacing: 0.06em; font-size: 0.68rem; padding: 11px 14px; }

  /* L'orb si fa piu' piccolo: a schermo stretto deve lasciare spazio alle
     parole, che sono quelle che convincono. */
  .orb-wrap { width: min(52vw, 210px); height: min(52vw, 210px); }
  .hero { padding-top: 30px; padding-bottom: 44px; }
  .wordmark { margin-top: 12px; }
  .hero-sub { max-width: 22ch; }

  /* I comandi da copiare: il pulsante va sotto, a tutta larghezza. Di
     fianco a un codice lungo restava una linguetta di trenta pixel che
     col dito non si prende. */
  .comando { flex-direction: column; align-items: stretch; }
  .comando code { white-space: pre-wrap; word-break: break-all; }
  .copia {
    border-left: none;
    border-top: 1px solid var(--rule-strong);
    padding: 13px 16px;
  }

  /* L'interruttore va a capo sotto la sua etichetta invece di schiacciarla
     contro il bordo. */
  .interruttore-riga { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Le tabelle restano scorrevoli dentro il loro riquadro: e' gia' cosi',
     qui si rende visibile che si possono trascinare. */
  .scroller { -webkit-overflow-scrolling: touch; }

  /* La corsa dei tempi: le etichette di corsia si accorciano. */
  .lane { grid-template-columns: 52px 1fr; gap: 8px; }
  .lane-name { font-size: 0.6rem; letter-spacing: 0.08em; }

  .foot-in { flex-direction: column; gap: 8px; }
}

/* --- schermi molto stretti (iPhone SE e simili) ------------------------ */
@media (max-width: 380px) {
  .orb-wrap { width: 46vw; height: 46vw; }
  .comando code { font-size: 0.7rem; }
  .navbar { padding-left: 16px; padding-right: 16px; }
}

/* --- tablet in verticale ----------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Due colonne stanno strette: i passi dell'installazione e la nota del
     costo respirano meglio una sotto l'altra. */
  .passi { grid-template-columns: 1fr; }
  .perim { grid-template-columns: 1fr; }
}

/* --- schermi bassi e larghi (telefono coricato) ------------------------ */
@media (max-height: 520px) and (orientation: landscape) {
  /* Con 500 px di altezza un orb da 46vmin mangia tutto lo schermo e il
     testo finisce sotto la piega senza che si capisca che c'e'. */
  .orb-wrap { width: min(30vh, 150px); height: min(30vh, 150px); }
  .hero { padding-top: 20px; padding-bottom: 28px; }
}