/* La forma da computer. Stessa app, altro mestiere: in aula c'è un pollice e
   quindici minuti, in segreteria c'è un mouse e tutta la giornata da guardare.

   Si carica dopo appello.css e lavora per aggiunte: sotto i 1000 px non fa
   quasi niente. Stessi token, nessun colore nuovo — cambiano le distanze, la
   frase in cima si fa più grande e il contenuto si centra. */

.telaio { display: block; }
.solo-pc { display: none; }

@media (min-width: 1000px) {

  .solo-pc { display: revert; }
  .solo-telefono { display: none !important; }

  /* la barra galleggia anche qui: stesso modello di navigazione ovunque */
  body { padding-bottom: calc(110px + var(--sicuro-sotto)) !important; }
  .navbar { max-width: 420px; }

  .telaio { display: block; }

  /* ------------------------------------------------------------- contenuto */

  .lastra { flex: 1; min-width: 0; }

  /* La testata da computer è il nome della schermata, non una barra: il dato
     lo dice la frase grande subito sotto. */
  /* Il margine e il tetto stanno in un posto solo (appello.css, --margine):
     qui si eredita, se no testata e contenuto si sfalsano di qualche pixel e
     il titolo non cade sopra la prima scheda. */
  .testata { padding: 30px var(--margine) 0; max-width: none; margin: 0; }
  .testata .titolo strong { font-size: 17px; }
  .testata .titolo span { font-size: 13px; }

  main { padding: 14px var(--margine) 48px; max-width: none; }

  /* Le tabelle si leggono per righe: oltre la misura una riga diventa un
     viaggio per l'occhio. Ancorate a sinistra, non centrate. */
  .tabella-guscio, .tabella { max-width: var(--misura); }

  h1 { font-size: 40px; letter-spacing: -.04em; }
  h2 { font-size: 18px; margin: 34px 4px 12px; }

  .scheda { padding: 22px 24px; }
  .scheda.cliccabile:hover { box-shadow: 0 2px 4px rgba(26, 22, 38, .05), 0 18px 40px -22px rgba(26, 22, 38, .3); }
  .scheda.cliccabile:active { transform: scale(.996); }
  /* col mouse la scheda smorzata si riaccende passandoci sopra: è il modo di
     dire «si può ancora aprire» senza scriverlo */
  .scheda.fatta:hover { background: var(--carta); box-shadow: inset 0 0 0 1.5px var(--riga-scura); }

  /* Il bottone grosso resta grosso ma non attraversa mille pixel di scheda. */
  .scheda > .bottone { max-width: 340px; }

  /* auto-fit, non auto-fill: se le schede sono meno delle colonne possibili
     si allargano invece di lasciare colonne vuote in fondo alla riga */
  /* `auto-fill` e non `auto-fit`: con due soli corsi, auto-fit fa sparire le
     colonne vuote e stira le due schede per tutta la larghezza — su un monitor
     largo diventano due lenzuoli con dentro tre righe di testo. Con auto-fill
     le colonne restano, le schede restano schede, e quando i corsi saranno
     dodici riempiranno le righe da sé. */
  .griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
             gap: 14px; max-width: var(--misura); }
  .griglia > .scheda { margin-bottom: 0; }
  .griglia.larga { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

  /* ------------------------------------------------------- righe e liste */

  .allievo { padding: 11px 16px; min-height: 50px; }
  .allievo:hover { background: var(--fondo); }
  .allievi.appello .allievo:hover { background: var(--carta); }

  /* Col mouse e lo spazio, il comando torna di fianco al nome e la riga si
     accorcia: si vedono quattordici allievi senza scorrere. */
  .allievi.appello .allievo {
    grid-template-columns: 1fr 240px; align-items: center; gap: 16px;
    padding: 9px 16px;
  }
  .allievi.appello .presenza { width: 240px; }
  .allievi.appello .presenza .opzione { min-height: 38px; font-size: 13.5px; }

  /* --------------------------------------------------------- una tabella */

  /* Una scheda bianca con le righe dentro, non un reticolo: le linee sono
     solo dove servono a non perdere il segno. */
  .tabella {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--carta); border-radius: var(--r-grande);
    overflow: hidden; font-size: 14.5px;
  }
  .tabella th {
    position: sticky; top: 0; z-index: 1; text-align: left;
    padding: 14px 20px; font-weight: 600; font-size: 12.5px; line-height: 1;
    letter-spacing: -.01em; color: var(--tenue);
    background: var(--carta); box-shadow: inset 0 -1.5px 0 var(--riga);
  }
  .tabella td { padding: 13px 20px; box-shadow: inset 0 1px 0 var(--riga); }
  .tabella tbody tr:first-child td { box-shadow: none; }
  .tabella tbody tr:hover td { background: var(--fondo); }
  .tabella td:not(:first-child) { color: var(--tenue); }
  .tabella td:first-child { font-weight: 600; color: var(--nero); }
  .tabella .conta, .tabella td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
  .tabella .lezione-corso { margin-left: 6px; }

  /* -------------------------------------------------------------- comandi */

  /* La barra dei bottoni esce dal fondo dello schermo e torna nel flusso. */
  .barra {
    position: static; background: none; box-shadow: none; border: 0;
    border-radius: 0; padding: 22px 0 0;
  }
  .barra .dentro { max-width: none; justify-content: flex-end; }
  .barra .bottone { flex: none; min-width: 230px; }
  .barra .bottone.stretto { min-width: 0; }

  .bottone:hover:not(:disabled) { opacity: .9; }
  .indietro:hover, .tondo:hover { background: var(--fondo); }
  .tondo.pieno:hover { background: var(--viola-cupo); border-color: var(--viola-cupo); opacity: 1; }
  .scelta:hover { background: var(--fondo); }
  .scelta[aria-pressed="true"]:hover { background: #000; }

  .brindello { bottom: 26px; }

  /* Il velo non sale dal basso: si posa al centro, come una finestra. */
  .velo { place-items: center; }
  .foglio {
    border-radius: var(--r-grande); max-width: 600px; max-height: 86vh;
    padding: 26px 28px; box-shadow: var(--ombra-alta);
    animation: comparsa .18s ease-out;
  }
  .foglio::before { display: none; }
  @keyframes comparsa { from { opacity: 0; transform: scale(.98) } }

  .due, .tre { gap: 12px; }
}

/* Oltre i millequattro non si allarga più il tetto: si allarga il margine,
   che sta in --margine ed è già più generoso da 1500 in su. Una riga di
   tabella oltre i milleseicento diventa un viaggio per l'occhio. */

/* Di cosa è fatto il totale delle ore di assenza: aula e guida, sotto il numero. */
.spacco { display: block; font-size: 11px; font-weight: 500; color: var(--tenue);
  letter-spacing: 0; white-space: nowrap; margin-top: 2px; }