/* ===========================================================================
   Il cartello «da qui non si lavora», per telefoni e tablet.

   Sta in un foglio suo e non in app.css perche' lo carica anche login.html,
   che di app.css non sa niente: il cartello deve comparire PRIMA dell'accesso.
   Le variabili (`--ui-ink`, `--ui-fondo`…) sono dichiarate in tutt'e due i
   fogli, quindi qui si usano e basta; i valori di ripiego servono al caso in
   cui questo foglio arrivasse da solo.

   Il carattere e' quello di sistema e non Geist, come per la schermata d'avvio:
   un cartello che dice «vai altrove» deve leggersi subito, non dopo che sono
   arrivati i caratteri.

   Chi accende e spegne tutto e' js/solo-desktop.js, con la classe `sd-fermo`
   sulla radice del documento.
   =========================================================================== */

/* Fermi: in pagina resta solo il cartello. `!important` perche' quasi tutto
   quello che c'e' sotto ha un `display` dichiarato in un foglio — `.app` e'
   una griglia, `.avvio` sta fisso sopra ogni cosa — e vincerebbe. */
html.sd-fermo > body > *:not(.sd-schermo) { display: none !important; }

.sd-schermo { display: none; }

html.sd-fermo > body > .sd-schermo {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  padding: 24px;
  overflow: auto;
  background: var(--ui-fondo, #f6f6f4);
  color: var(--ui-ink, #1d1d1b);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
}

.sd-riquadro {
  width: 100%; max-width: 340px;
  background: var(--ui-carta, #fff);
  border: 1px solid var(--ui-bordo, #e3e3e0);
  border-radius: var(--ui-r, 6px);
  padding: 28px 26px 26px;
}

.sd-marchio {
  margin: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.sd-marchio span { font-weight: 400; color: var(--ui-ink-3, #9a9a97); }

.sd-occhiello {
  margin: 2px 0 22px;
  font-size: 12px; color: var(--ui-ink-3, #9a9a97);
}

.sd-titolo {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}

.sd-testo { margin: 0 0 14px; color: var(--ui-ink-2, #6b6b69); }

/* Il rimedio: cambiare macchina, oppure allargare la finestra. E' l'unica riga
   che chi legge deve portarsi via, e sta staccata dal resto per questo. */
.sd-come {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--ui-bordo, #e3e3e0);
  font-weight: 500;
}