/* Ritocchi in prova per il laboratorio del capitolo 1 su schermi piccoli.
 *
 * Vive solo nella copia di sviluppo: la pagina pubblicata carica soltanto
 * sim-sg.css e resta com'e' finche' questi ritocchi non sono giudicati buoni.
 *
 * Il problema da cui si parte: su un telefono in orizzontale la finestra e' alta
 * 390 punti, ma l'intestazione ne prende 106 e il disegno dell'apparato ne
 * chiede 496. Tutto si comprime finche' le quote non si leggono piu': lo schema
 * si riduce a 391x78 e il vetrino a 61x49, cioe' a nulla.
 *
 * La cura non e' rimpicciolire meglio, e' mostrare una cosa sola. Su schermo
 * piccolo resta il vetrino, che e' il risultato dell'esperimento; lo schema
 * dell'apparato si apre a schermo intero con un pulsante, quando serve capire
 * la disposizione.
 */

/* --- schermi bassi: l'intestazione si fa da parte --- */
@media (max-height: 500px) {
  .con-head {
    padding-top: .3rem;
    padding-bottom: .3rem;
    gap: .4rem;
  }
  /* il titolo lungo diventa una riga sola, tagliata invece che avvolta */
  .con-head h1,
  .con-head .t1 {
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* il ritorno al capitolo e l'etichetta del laboratorio si stringono */
  .con-head .back,
  .con-head .badge {
    padding: .25rem .6rem;
    font-size: .72rem;
  }
  /* il selettore di lingua sta sulla stessa riga del titolo */
  .langsw {
    position: absolute;
    top: .3rem;
    right: .6rem;
    transform: scale(.85);
    transform-origin: right top;
  }
}

/* il pulsante che richiama lo schema: dichiarato PRIMA della media query che lo
   accende, altrimenti a parita' di specificita' vincerebbe l'ultimo scritto */
#apri-schema {
  display: none;
  align-items: center;
  gap: .4em;
  margin: .3rem 0 .5rem;
  padding: .4em .9em;
  border: 1px solid var(--accent, #7b2d26);
  border-radius: 7px;
  background: transparent;
  color: var(--accent, #7b2d26);
  font: 600 .78rem/1 system-ui, sans-serif;
  cursor: pointer;
}
#apri-schema:hover { background: var(--accent, #7b2d26); color: #fff; }

/* --- schermo piccolo: una cosa sola alla volta --- */
@media (max-height: 560px), (max-width: 760px) {
  /* lo schema esce di scena e lascia tutto lo spazio al vetrino */
  .panelbox:has(#cApp) { display: none; }
  #apri-schema { display: inline-flex; }
  /* il vetrino prende l'altezza che gli serve per essere leggibile */
  .panelbox:has(#cPlate) .cwrap { min-height: 40vh; }
}

/* --- lo schema a schermo intero --- */
body.schema-aperto .panelbox:has(#cApp) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 3.2rem .6rem .6rem;
  background: var(--paper, #fff);
  overflow: auto;
}
body.schema-aperto .panelbox:has(#cApp) .cwrap { min-height: 70vh; }

#chiudi-schema {
  display: none;
  position: fixed;
  top: .5rem;
  right: .6rem;
  z-index: 61;
  padding: .45em 1em;
  border: 1px solid var(--accent, #7b2d26);
  border-radius: 7px;
  background: var(--accent, #7b2d26);
  color: #fff;
  font: 600 .8rem/1 system-ui, sans-serif;
  cursor: pointer;
}
body.schema-aperto #chiudi-schema { display: block; }

/* Il vetrino divideva la riga in parti uguali con le colonne accanto e finiva a
   61 punti di larghezza su 391 disponibili. Su schermo piccolo e' lui il
   risultato dell'esperimento: prende la parte del leone. */
@media (max-height: 560px), (max-width: 760px) {
  .split .col:has(#cPlate) { flex: 4 1 0%; }
  .split .col:not(:has(#cPlate)) { flex: 1 1 0%; min-width: 0; }
}

/* Quando lo schema e' aperto nulla deve scorrere sotto di lui: su iPhone la
   barra di scorrimento e' un velo che il sistema disegna sopra ogni cosa, e
   comparirebbe attraverso lo schema. Se non c'e' nulla da scorrere, non appare. */
body.schema-aperto { overflow: hidden; }
body.schema-aperto .ctrlcol,
body.schema-aperto .verdict,
body.schema-aperto .stagecol { overflow: hidden !important; }
body.schema-aperto .panelbox:has(#cApp) { z-index: 999; }
body.schema-aperto #chiudi-schema { z-index: 1000; }

/* L'esito, quando scende in coda ai comandi, smette di essere un riquadro con
   lo scorrimento suo e si distende: lo si legge scorrendo la colonna. */
.verdict.in-coda {
  max-height: none !important;
  overflow: visible !important;
  margin-top: .6rem;
}