/* EDU-SSH · SSH Lab
   Palette della collana EDU-*: telaio scuro, inchiostro freddo, un solo accento fosforo.
   Solo tema scuro: qui il tema scuro non e' un'opzione, e' l'identita' della collana. */

:root {
    --chassis:    #1c2128;
    --panel:      #222831;
    --panel-2:    #262d38;
    --panel-edge: #3a434e;
    --ink:        #cdd9e5;
    --ink-soft:   #8b98a5;
    --ink-faint:  #6b7681;
    --amber:      #e3b341;
    --screen:     #06141a;
    --phosphor:   #5ad7e6;   /* ciano-terminale: l'accento di questo lab */
    --violet:     #c9a0dc;   /* riservato al livello PRO */
    --verde:      #57e389;
    --rosso:      #f47067;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --r: 6px;
}

* { box-sizing: border-box; }

/* SCORRE LA PAGINA, E BASTA.
   La versione precedente bloccava l'altezza e teneva tre aree con un overflow
   ciascuna — capitolo, terminali, esercizi. Il risultato: il capitolo ridotto a una
   fessura col testo tagliato a meta' riga, gli esercizi tagliati sopra e sotto, e
   la sensazione che il layout spezzasse tutto. E' lo stesso errore che il lab
   fratello aveva gia' fatto e documentato; qui era stato reintrodotto dalla porta
   di servizio, cioe' impilando invece di affiancare ma tenendo le altezze bloccate.
   Una sola area di scorrimento: quella del browser. */
html, body { height: auto; }

body {
    margin: 0;
    background: var(--chassis);
    color: var(--ink);
    font: 15px/1.65 var(--sans);
}

code, kbd, pre { font-family: var(--mono); }

code {
    background: #1a2029;
    border: 1px solid #2c3540;
    border-radius: 4px;
    padding: 0 .32em;
    font-size: .9em;
    color: #b9e8f0;
}

a { color: var(--phosphor); }

/* ---------------------------------------------------------------- barra */

.barra {
    display: flex; align-items: center; gap: 14px;
    padding: 9px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--panel-edge);
    flex-wrap: wrap;
    /* Resta in cima mentre si scorre. Ora che scorre la pagina intera, senza questo
       il sommario e il cambio lingua sparirebbero appena si scende ai terminali. */
    position: sticky; top: 0; z-index: 20;
}
.marchio { display: flex; align-items: baseline; gap: 9px; flex: 1; min-width: 0; }
.sigla {
    font: 600 11px/1 var(--mono); letter-spacing: .14em;
    color: var(--screen); background: var(--phosphor);
    padding: 4px 6px; border-radius: 3px;
    /* Senza questo il browser spezza sul trattino: "EDU-" e "SSH" su due righe
       dentro il riquadro, che e' la prima cosa che si vedeva sul telefono. */
    white-space: nowrap;
}
.nome { font-weight: 600; font-size: 16px; }
.claim { color: var(--ink-faint); font-size: 12.5px; }
@media (max-width: 900px) { .claim { display: none; } }

/* Sotto i 560px il marchio e i quattro comandi non stanno piu' sulla stessa riga.
   Il marchio ha min-width:0 e quindi si stringe volentieri, ma il testo che avanza
   non sparisce: esce dal suo riquadro e finisce SOTTO i pulsanti — "SSH Lab" si
   leggeva a meta' dietro "Capitoli". Qui il nome si toglie (la sigla dice gia' di
   che lab si tratta) e i comandi vanno a capo tra loro invece che fuori schermo. */
@media (max-width: 560px) {
    /* I comandi vanno a capo tra loro: la sigla resta in cima, allineata alla prima
       riga di pulsanti invece che a meta' delle due (con align-items:center finiva
       a mezz'aria in un buco a sinistra). */
    .barra { gap: 8px 10px; padding: 8px 12px; align-items: flex-start; }
    .marchio { flex: 0 0 auto; }
    .sigla { padding: 9px 7px; }
    .nome { display: none; }
    .azioni { flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 8px 6px; }
    .btn { padding: 6px 9px; }
    .switch button { padding: 6px 8px; }
}

.azioni { display: flex; align-items: center; gap: 8px; }

.btn {
    background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--panel-edge); border-radius: var(--r);
    padding: 6px 11px; font: 500 13px var(--sans); cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--phosphor); color: #fff; }
.btn:disabled { opacity: .35; cursor: default; }
.btn.mini { padding: 3px 8px; font-size: 12px; }
.btn.primario { background: var(--phosphor); color: var(--screen); border-color: var(--phosphor); font-weight: 600; }
.btn.primario:hover { filter: brightness(1.12); color: var(--screen); }

.switch { display: flex; border: 1px solid var(--panel-edge); border-radius: var(--r); overflow: hidden; }
.switch button {
    background: var(--panel-2); color: var(--ink-soft); border: 0;
    padding: 6px 10px; font: 600 11.5px var(--mono); letter-spacing: .06em; cursor: pointer;
}
.switch button.on { background: var(--phosphor); color: var(--screen); }
#switchDepth button[data-depth="pro"].on { background: var(--violet); }

.progresso { height: 2px; background: #161b21; }
#barraProgresso { height: 100%; width: 0; background: var(--phosphor); transition: width .3s; }

/* ---------------------------------------------------------------- impaginato */

/* Il capitolo sopra, il laboratorio sotto, a tutta larghezza. Il lab fratello mette
   il terminale in una colonna laterale e funziona, perche' li' il terminale e' uno.
   Qui sono due, e affiancati in una colonna stretta verrebbero 53 colonne l'uno —
   meno di un'impronta SHA256, che e' proprio la cosa che questo lab deve far
   leggere. A tutta larghezza ognuno ne ha ~90. */
/* Niente griglia e niente altezze: il capitolo e il laboratorio sono due sezioni
   una sotto l'altra, in flusso normale. `min-width: 0` resta necessario perche'
   xterm ha una larghezza propria (80 colonne) e senza vincolo la fa valere,
   allargando la pagina oltre la finestra. */
#impaginato { display: block; min-width: 0; }

.capitolo {
    padding: 26px 30px 34px;
    max-width: 860px; width: 100%; margin: 0 auto;
}
@media (max-width: 700px) { .capitolo { padding: 18px 16px 30px; } }

/* ---------------------------------------------------------------- capitolo */

.cap-numero { font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--amber); }
.capitolo h1 { font-size: 27px; line-height: 1.2; margin: 6px 0 4px; }
.cap-oneliner { color: var(--ink-soft); font-size: 15px; margin: 0 0 26px; }

.blocco { margin: 0 0 22px; }

.hook {
    border-left: 3px solid var(--amber);
    padding: 2px 0 2px 15px;
    color: #dbe6f0;
}
.analogia {
    background: #1a2029; border: 1px solid #2c3540; border-radius: var(--r);
    padding: 13px 16px;
}
.analogia::before {
    content: "≈"; color: var(--amber); font: 700 15px var(--mono);
    margin-right: 8px;
}

/* esempio lavorato */
.mostra { border: 1px solid var(--panel-edge); border-radius: var(--r); overflow: hidden; }
.mostra-riga { border-bottom: 1px solid #2a323c; }
.mostra-riga:last-child { border-bottom: 0; }
.mostra-cmd {
    background: var(--screen); padding: 7px 12px;
    font: 13px/1.5 var(--mono); color: #b9e8f0;
}
.mostra-cmd::before { content: "$ "; color: var(--phosphor); }
.mostra-out {
    background: #0b1a20; padding: 6px 12px; margin: 0;
    font: 12.5px/1.5 var(--mono); color: var(--ink-soft); white-space: pre-wrap;
}
.mostra-nota { padding: 8px 12px; background: var(--panel); font-size: 13.5px; color: var(--ink-soft); }

/* trappole */
.trappole { background: #221d17; border: 1px solid #4a3a22; border-radius: var(--r); padding: 12px 16px; }
.trappole h3 { margin: 0 0 8px; font-size: 13px; color: var(--amber); letter-spacing: .04em; text-transform: uppercase; }
.trappole ul { margin: 0; padding-left: 18px; }
.trappole li { margin: 5px 0; font-size: 14px; }

/* riepilogo */
.recap h3 { font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.recap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.recap th { text-align: left; color: var(--ink-faint); font-weight: 500; font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--panel-edge); }
.recap td { padding: 6px 8px; border-bottom: 1px solid #262d36; vertical-align: top; }
.recap td:first-child { font-family: var(--mono); color: var(--phosphor); white-space: nowrap; }

/* PRO: appare solo con body.pro, puramente via CSS */
.probox {
    display: none;
    border-left: 3px solid var(--violet);
    background: #1e1a24; border-radius: 0 var(--r) var(--r) 0;
    padding: 12px 16px;
}
body.pro .probox { display: block; }
.probox h3 { margin: 0 0 7px; font-size: 12px; color: var(--violet); letter-spacing: .08em; text-transform: uppercase; }
.probox p { margin: 0 0 9px; font-size: 14px; }
.probox p:last-child { margin-bottom: 0; }

.prereq {
    background: #1a2029; border: 1px dashed var(--panel-edge); border-radius: var(--r);
    padding: 9px 13px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px;
}
.prereq button { margin-left: 8px; }

/* ---------------------------------------------------------------- laboratorio */

/* Il laboratorio e' una sezione della pagina, non un riquadro con vita propria:
   comincia dove finisce il capitolo e finisce dove finiscono gli esercizi.
   Il bordo fosforo dice che si e' entrati in un'altra zona. */
.lab {
    display: block;
    border-top: 2px solid var(--phosphor); background: var(--panel);
    box-shadow: 0 -12px 24px -18px #000;
}

.lab-testa {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-bottom: 1px solid var(--panel-edge);
    /* I tre pulsanti devono poter andare a capo: su schermo stretto uscivano dal
       riquadro e "Reimposta le macchine" — cioe' la rete di sicurezza — restava
       tagliata fuori dalla finestra, irraggiungibile proprio quando serve. */
    flex-wrap: wrap;
}
.lab-titolo { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--ink-faint); }
.lab-stato { font-size: 12px; color: var(--ink-soft); }
.lab-stato.pronta { color: var(--verde); }
.lab-stato.preparazione { color: var(--amber); }
.lab-stato.errore { color: var(--rosso); }
.spazio { flex: 1; }

/* ------------------------------------------------------------- il banco a due
   Due terminali affiancati, e qui la larghezza non e' un gusto: e' un requisito.
   Il font mono a 13px avanza ~7,8px, quindi 80 colonne vogliono ~620px. Una riga
   di impronta —
       256 SHA256:ow2XD2iEk9ifz0CDq3hglZz4aqh7eXEuA7tAx3vv+xg andrea@pc (ED25519)
   — sono 74 caratteri, ed e' l'oggetto centrale di meta' dei capitoli: se va a
   capo in mezzo al base64 il lab sembra scadente proprio dove dovrebbe brillare.
   Per questo il laboratorio qui prende tutta la larghezza della pagina, invece di
   stare in una colonna stretta come nel lab fratello. */

.banco { position: relative; display: flex; min-height: 0; flex: 0 0 auto; width: 100%; overflow: hidden; }

.host {
    /* `flex: 1 1 0` e non `1 1 50%`: xterm disegna una griglia con una larghezza
       PROPRIA (80 colonne finche' nessuno gli dice altro), e con una base del 50%
       quella larghezza spingeva i due riquadri oltre la finestra — pagina larga il
       doppio e barra di scorrimento orizzontale. Con base 0 e min-width 0 comanda
       il contenitore, e xterm si adatta a lui invece del contrario. */
    flex: 1 1 0; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--panel-edge);
    /* Quale sto guidando: il riquadro senza fuoco si smorza. Lo stato invisibile
       e' il difetto che il lab fratello ha pagato tre volte, e con due terminali
       "dove sto scrivendo" e' il primo che inganna. */
    opacity: .62; transition: opacity .15s;
}
.host:last-child { border-right: 0; }
.host.attivo { opacity: 1; }

.host-testa {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; background: var(--panel-2);
    border-bottom: 1px solid var(--panel-edge);
    font: 12px var(--mono);
}
.host-pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.host-nome { font-weight: 700; letter-spacing: .04em; }
.host-utente { color: var(--ink-soft); }
.host-utente::before { content: "@"; opacity: .5; }
.host-ip { color: var(--ink-faint); }
.host-ruolo { color: var(--ink-faint); font-size: 11px; }

/* Il colore E' l'identita' della macchina: ciano il pc, ambra il server. Gli
   stessi due colori tornano nel cursore di xterm (js/lab/terminal.js). */
.host-pc    .host-pallino { background: var(--phosphor); }
.host-pc    .host-nome    { color: var(--phosphor); }
.host-server .host-pallino { background: var(--amber); }
.host-server .host-nome    { color: var(--amber); }
.host-pc.attivo    { box-shadow: inset 0 2px 0 var(--phosphor); }
.host-server.attivo { box-shadow: inset 0 2px 0 var(--amber); }

.host-schermo {
    background: var(--screen); padding: 6px 4px 6px 8px; height: 300px;
    min-width: 0; overflow: hidden;      /* vedi la nota su .host */
}
.host-schermo .xterm { height: 100%; }
.lab.preparazione .host-schermo {
    opacity: .38; pointer-events: none; filter: saturate(.35);
}
.lab.preparazione .banco::after {
    content: attr(data-busy-label); position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center; pointer-events: all;
    background: rgb(13 17 23 / .58); color: var(--amber);
    font: 600 13px var(--mono); letter-spacing: .04em;
}

/* le schede: servono solo su schermo stretto */
.schede { display: none; }
.scheda {
    flex: 1; padding: 8px; background: var(--panel-2); color: var(--ink-soft);
    border: 0; border-bottom: 2px solid transparent; font: 600 12px var(--mono); cursor: pointer;
}
.scheda.on { color: var(--ink); border-bottom-color: var(--phosphor); background: var(--panel); }
.scheda[data-host="server"].on { border-bottom-color: var(--amber); }
.pallino {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--amber); margin-left: 6px; vertical-align: middle;
}

.esercizi { padding: 14px 16px 26px; border-top: 1px solid var(--panel-edge); }

/* ---------------------------------------------------------------- esercizi */

.es {
    border: 1px solid var(--panel-edge); border-radius: var(--r);
    margin-bottom: 10px; background: var(--panel-2); overflow: hidden;
}
.es.aperto { border-color: #4a5663; }
.es.fatto { border-color: #2f5c43; }

.es-testa {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; cursor: pointer; user-select: none;
}
.es-testa:hover { background: #2b333e; }
.es-pallino {
    width: 15px; height: 15px; border-radius: 50%; flex: none;
    border: 2px solid var(--panel-edge);
}
.es.fatto .es-pallino { background: var(--verde); border-color: var(--verde); }
.es-nome { font-weight: 600; font-size: 13.5px; }
.es-tipo { font: 10.5px var(--mono); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }

.es-corpo { padding: 0 12px 12px; display: none; }
.es.aperto .es-corpo { display: block; }
.es-brief { font-size: 14px; margin: 0 0 11px; }

.es-come-consegnare { font-size: 13px; color: var(--ink-soft); margin: -5px 0 11px; }

.basi h3 { margin: 18px 0 6px; }
.basi-lineone { color: var(--ink-soft); font-style: italic; margin: 0 0 4px; }
.basi-recap { border-collapse: collapse; width: 100%; }
.basi-recap td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--panel-edge); vertical-align: top; font-size: 13.5px; }
.basi-recap em { color: var(--ink-faint); font-style: normal; }
.basi-glossario { color: var(--ink-faint); margin-top: 14px; }
.basi > .btn { margin-top: 16px; }

.es-barra { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

.verdetto { border-radius: var(--r); overflow: hidden; border: 1px solid var(--panel-edge); }
.verdetto.ok { border-color: #2f5c43; }
.controllo { padding: 8px 11px; border-bottom: 1px solid #2a323c; font-size: 13.5px; }
.controllo:last-child { border-bottom: 0; }
.controllo.pass { color: var(--verde); }
.controllo.pass::before { content: "✓ "; }
.controllo.fail::before { content: "✗ "; color: var(--rosso); }
.controllo.pro-tag { opacity: .8; }
.controllo .fatto-macchina {
    display: block; font: 12px var(--mono); color: var(--amber);
    background: #1a2029; border-radius: 4px; padding: 3px 7px; margin: 5px 0;
}
.controllo .perche { display: block; color: var(--ink); font-size: 13.5px; margin: 4px 0; }
.controllo .spinta {
    display: block; font-size: 13px; color: var(--ink-soft);
    border-left: 2px solid var(--phosphor); padding-left: 9px; margin-top: 6px;
}
.controllo .spinta b { color: var(--phosphor); font-weight: 500; }

.sonda {
    margin-top: 9px; border: 1px solid var(--panel-edge); border-radius: var(--r);
    background: #1a2029;
}
.sonda summary { cursor: pointer; padding: 6px 11px; font-size: 12.5px; color: var(--ink-soft); }
.sonda table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.sonda td { padding: 3px 11px; border-top: 1px solid #262d36; }
.sonda td:first-child { color: var(--ink-faint); width: 30%; }

.aiuto { margin-top: 9px; font-size: 13.5px; }
.aiuto p { background: #1a2029; border-left: 2px solid var(--amber); padding: 7px 11px; margin: 6px 0; }

/* ---------------------------------------------------------------- capitoli locali */

.locale {
    border: 1px solid #4a3a22; background: #221d17; border-radius: var(--r);
    padding: 14px 16px; margin-bottom: 22px;
}
.locale h3 { margin: 0 0 8px; font-size: 14px; color: var(--amber); }
.locale pre {
    background: var(--screen); border-radius: var(--r); padding: 10px 12px; margin: 10px 0 6px;
    font-size: 12.5px; overflow-x: auto; color: #b9e8f0;
}

.passo { border: 1px solid var(--panel-edge); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.passo-cmd { background: var(--screen); padding: 8px 12px; font: 13px var(--mono); color: #b9e8f0; }
.passo-cmd::before { content: "$ "; color: var(--phosphor); }
.passo-out { background: #0b1a20; margin: 0; padding: 8px 12px; font: 12.5px/1.5 var(--mono); color: var(--ink-soft); white-space: pre-wrap; overflow-x: auto; }
.passo-out .evidenzia { color: var(--amber); background: #2a2415; }
.passo-nota { padding: 8px 12px; background: var(--panel); font-size: 13.5px; color: var(--ink-soft); }

.predizione { background: #1a2029; border: 1px solid var(--panel-edge); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.predizione h4 { margin: 0 0 9px; font-size: 13.5px; color: var(--phosphor); }
.predizione button {
    display: block; width: 100%; text-align: left; margin: 5px 0;
    background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: var(--r);
    color: var(--ink); padding: 7px 11px; font: 13.5px var(--sans); cursor: pointer;
}
.predizione button:hover { border-color: var(--phosphor); }
.predizione button.giusta { border-color: var(--verde); color: var(--verde); }
.predizione button.sbagliata { border-color: var(--rosso); opacity: .65; }
.predizione .esito { margin-top: 8px; font-size: 13.5px; }

/* ---------------------------------------------------------------- piede e velo */

.piede {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; background: var(--panel); border-top: 1px solid var(--panel-edge);
}
.etichetta { flex: 1; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* «Segnala un problema»: presente ma discreto. Sulle larghezze strette il piede
   va a capo e il link finisce da solo sulla seconda riga, allineato a destra. */
.piede .segnala {
    margin-left: auto; white-space: nowrap;
    color: var(--ink-faint); font-size: 12px; text-decoration: none;
}
.piede .segnala:hover { color: var(--ink); text-decoration: underline; }
/* Perche' `Successivo` e' spento. Smorzata: e' una spiegazione, non un annuncio. */
.piede-nota { opacity: .7; }
.piede-nota::before { content: " · "; }

.velo {
    position: fixed; inset: 0; background: rgba(6,10,14,.82);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.velo[hidden] { display: none; }
.velo-box {
    background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 9px;
    max-width: 780px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 22px 26px;
}
.velo-box h2 { margin-top: 0; }
.velo-box .chiudi-riga { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* sommario */
.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; }
.toc button {
    display: flex; align-items: center; gap: 9px; text-align: left;
    background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: var(--r);
    color: var(--ink); padding: 8px 11px; cursor: pointer; font: 13px var(--sans);
}
.toc button:hover:not(:disabled) { border-color: var(--phosphor); }
.toc button:disabled { opacity: .45; cursor: default; }
.toc button.corrente { border-color: var(--phosphor); background: #1e2a30; }
.toc .n { font: 600 11px var(--mono); color: var(--amber); flex: none; }
.toc .stato { margin-left: auto; font-size: 11px; color: var(--ink-faint); flex: none; }
.toc .pieno { color: var(--verde); }
.toc .rt { font: 10px var(--mono); color: var(--ink-faint); }

/* quaderno */
.quaderno table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.quaderno td { padding: 5px 9px; border-bottom: 1px solid #262d36; }
.quaderno td:first-child { font-family: var(--mono); color: var(--phosphor); white-space: nowrap; }

.avviso-mobile {
    background: #221d17; border: 1px solid #4a3a22; border-radius: var(--r);
    padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--amber);
}

/* ------------------------------------------------------------- schermi stretti
   Due punti di rottura, e in mezzo una scelta: sotto i 1200px i due terminali si
   IMPILANO invece di stringersi. Stringendoli si perderebbero le colonne, che e'
   esattamente la cosa che qui non si puo' perdere; impilandoli ogni host tiene la
   larghezza piena della pagina e ci guadagna. */
@media (max-width: 1200px) {
    .banco { flex-direction: column; }
    .host { flex: none; border-right: 0; border-bottom: 1px solid var(--panel-edge); }
    .host:last-child { border-bottom: 0; }
    .host-schermo { height: 240px; }
}

/* Sotto i 760px due terminali non sono due terminali: sono due fessure. Meglio
   uno solo per volta, con un pallino sulla scheda nascosta quando quella macchina
   ha stampato qualcosa — se il server risponde e non lo vedi, sembra che non
   abbia risposto. */
@media (max-width: 760px) {
    .schede { display: flex; }
    .host { display: none; opacity: 1; }
    .host.mostrato { display: flex; }
    .host-schermo { height: 260px; }

    /* Lo spaziatore elastico spingerebbe i pulsanti fuori dallo schermo: qui sparisce
       e i tre si dividono una riga tutta loro, sotto il titolo. Meglio due righe di
       intestazione che un bottone che non si puo' premere. */
    .lab-testa .spazio { display: none; }
    .lab-testa .btn.mini { flex: 1 1 auto; text-align: center; }
    .lab-testa { gap: 6px; }

    /* La tabella del riepilogo, con tre colonne su 360px, diventa illeggibile:
       si spezza in blocchi, uno per comando. */
    .recap thead { display: none; }
    .recap tr { display: block; padding: 8px 0; border-bottom: 1px solid #262d36; }
    .recap td { display: block; border: 0; padding: 2px 0; }
    .recap td:first-child { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------- "come si fa"
   Sempre aperto, a differenza dei suggerimenti: e' il minimo per cominciare —
   quali comandi esistono e su QUALE delle due macchine si scrivono. Un esercizio
   che chiede di fare una cosa senza dire con che attrezzi lascia fermi davanti a
   un cursore che lampeggia. */
.come { margin: 10px 0 4px; }
.come h4 {
    margin: 0 0 6px; font: 600 11px var(--mono); letter-spacing: .12em;
    color: var(--ink-faint); text-transform: uppercase;
}
.come ol { margin: 0; padding-left: 20px; }
.come li { margin-bottom: 7px; font-size: 13.5px; line-height: 1.5; }
.come-cmd {
    display: inline-block; margin-left: 6px;
    background: var(--screen); color: #b9e8f0;
    border: 1px solid var(--panel-edge); border-radius: 4px;
    padding: 1px 7px; font: 12.5px var(--mono);
}
/* Su quale macchina si scrive: la pastiglia usa gli stessi due colori dei riquadri,
   cosi' l'occhio la collega senza doverla leggere. */
.come .dove {
    display: inline-block; margin-right: 7px; padding: 0 6px;
    border-radius: 3px; font: 600 10.5px var(--mono); letter-spacing: .06em;
    text-transform: uppercase; vertical-align: 1px;
}
.come .dove-pc     { background: #10323b; color: var(--phosphor); border: 1px solid #1d4d5c; }
.come .dove-server { background: #33290f; color: var(--amber);    border: 1px solid #4a3a22; }
.come-nota {
    margin: 8px 0 0; padding: 7px 10px; font-size: 13px; color: var(--ink-soft);
    background: #1a2029; border-left: 2px solid var(--amber); border-radius: 0 var(--r) var(--r) 0;
}