/* La soglia — l'unica pagina senza la barra: chi non e' entrato non ha dove andare.
 *
 * Portata dal Tema Leadora il 19/08. Vive in un foglio suo perche' e' l'unica pagina che
 * non carica ne' style.css ne' guscio.css: quelli vestono l'app dietro il cancello, e
 * questa e' la porta.
 *
 * ⚠️ LA COLONNA E' CENTRATA DAL VUOTO, non da un margine. La domanda ha `margin: auto` sopra
 * e una misura fissa sotto: cosi' l'insegna resta in alto, il gruppo sta in mezzo, e il
 * piede in fondo — a qualunque altezza di finestra, senza calcoli. Un margine fisso
 * sull'insegna si sommerebbe a quell'auto e farebbe scendere tutto il blocco di quei pixel
 * senza che nessuno l'abbia chiesto. */

/* ⚠️ `clip` E NON `hidden`, ed e' la differenza che conta su un telefono. `overflow-x:
   hidden` NON si limita a nascondere: rende l'elemento un contenitore di SCORRIMENTO, e il
   browser gli dà di conseguenza uno scorrimento verticale suo. Su WebKit — che e' anche il
   motore di Chrome su iPhone, non solo di Safari — il risultato e' stato peggio di prima:
   la pagina si muoveva di piu'. `clip` taglia e basta, senza creare niente da scorrere.
   (Provato e ritirato il 19/08 sul telefono di Raffaele.) */
/* ⚠️ DUE LEVE DIVERSE PER DUE COSE DIVERSE, e per un giro le ho confuse.
   `overflow-x` governa lo SCORRIMENTO: c'e' del contenuto oltre il bordo e si puo'
   raggiungere. `overscroll-behavior-x` governa il RIMBALZO: non c'e' niente da
   raggiungere, ma il dito trascina lo stesso e la pagina si sposta e torna — quello che
   nello screenshot di Raffaele lasciava una striscia vuota di fianco.
   Qui non c'e' niente da scorrere di lato, quindi si dicono tutte e due: `clip` taglia
   cio' che eccede, `none` toglie l'elastico. Il `clip` e non `hidden` perche' hidden
   trasforma l'elemento in un contenitore di scorrimento e peggiorava.
   ⚠️ E vanno su ENTRAMBI: su WebKit il rimbalzo lo fa l'elemento che scorre davvero, che
   a seconda dei casi e' l'uno o l'altro. */
html.soglia-radice { overflow-x: clip; overscroll-behavior-x: none; }
body.soglia { overflow-x: clip; overscroll-behavior-x: none; }

body.soglia {
  display: flex;
  flex-direction: column;
  /* ⚠️ `dvh` E NON `vh`, ed e' la ragione per cui su telefono la pagina scorreva. Su iOS
     `100vh` misura la finestra SENZA la barra degli indirizzi, cioe' piu' di quanto se ne
     veda: il piede finiva sotto il bordo e per leggerlo bisognava trascinare una schermata
     che non ha niente da scorrere. `dvh` e' l'altezza che si vede davvero, e si accorcia da
     sola quando la barra ricompare. Il `vh` resta sopra come ripiego per i browser che
     `dvh` non lo conoscono. (Raffaele, 19/08.) */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.soglia-colonna {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: min(400px, 92vw);
  margin: 0 auto;
  padding: 32px 0 0;
  text-align: center;
}

/* --- l'insegna ------------------------------------------------------------------- */
/* Stessa misura e stesso rapporto della barra, dagli stessi token: e' la stessa insegna,
   e passando dall'accesso all'app non si deve vedere cambiare di un pixel. */
.soglia-insegna { display: block; text-decoration: none; }

.soglia-insegna__logo {
  display: block;
  height: calc(var(--insegna) * 1.425);   /* -25% rispetto alla prima misura (Raffaele, 06/09) */
  width: auto;
  margin: 0 auto;
}

/* --- la domanda ------------------------------------------------------------------ */
.soglia-domanda {
  margin: auto 0 32px;
  font: 400 var(--testo-titolo)/1.22 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* La rincorsa e' la prima meta' della domanda, non una didascalia: tiene il serif e sta a
   22, che e' un gradino della scala. A 15 sotto un titolo da 30 si leggerebbe come una
   nota — che e' il ruolo di un altro elemento. */
.soglia-domanda__rincorsa {
  display: block;
  margin-bottom: 8px;
  font: 400 var(--testo-forte)/1.3 var(--display);
  color: var(--muted);
}

.soglia-domanda b { display: block; color: var(--accento-testo); font-weight: inherit; }

/* --- il modulo -------------------------------------------------------------------- */
/* Piu' stretto del titolo: il titolo puo' allargarsi perche' e' una frase, il modulo no. */
/* ⚠️ IL SECONDO `auto` E' QUELLO CHE TIENE IL BLOCCO IN MEZZO. La domanda ne ha uno sopra;
   senza uno sotto, i due `auto` non si bilanciano e tutto il gruppo scende in fondo alla
   pagina — nel tema quel contrappeso era il margine del «Ho dimenticato la password», che
   qui non c'e' perche' il recupero non esiste ancora. Il vuoto va tolto dove stava lui. */
.soglia-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(272px, 100%);
  margin: 0 auto auto;
}

/* Il fondo bianco arriva da tokens.css, dove vale per tutti i campi dell'app. Qui si
   aggiungono solo la forma e l'allineamento della soglia. */
.soglia-campo {
  border-radius: var(--raggio-pill);
  padding: 10px 20px;
  text-align: center;
  font-size: var(--testo);
}

/* Il campo con l'occhio: il bottone sta DENTRO, sovrapposto, invece di affiancare un
   secondo riquadro. Un gruppo di due caselle romperebbe la pastiglia in due, e su una
   colonna centrata si vedrebbe subito. */
.soglia-segreto { position: relative; display: flex; }
.soglia-segreto .soglia-campo { flex: 1; padding-right: 44px; }

.soglia-occhio {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: var(--testo-nota);
  cursor: pointer;
  transition: color .2s var(--dolce);
}

.soglia-occhio:hover { color: var(--ink); }
.soglia-occhio[aria-pressed="true"] { color: var(--accento-testo); }

/* Non largo quanto il modulo: un gesto e' un gesto, e allargato a tutta la colonna
   sembrerebbe una barra. La sua misura la da' il testo piu' il fiato ai lati. */
.soglia-entra {
  align-self: center;
  margin-top: 12px;
  /* ⚠️ PADDING ASIMMETRICO, e non e' una svista. Col disco in fondo alla capsula i due lati
     non possono essere uguali: misurato sul tema, il testo ha 16px a sinistra e il disco ne
     lascia 8 a destra — la meta'. Un cerchio pieno pesa otticamente piu' di una lettera, e
     tenuto alla stessa distanza del testo sembra spinto dentro. Con 32 da entrambe le parti
     ne restavano 23, e il bottone pendeva a sinistra. */
  padding: 10px 16px 10px 32px;
  border: none;
  border-radius: var(--raggio-pill);
  background: var(--accento-testo);
  color: var(--paper);
  font-size: var(--testo);
  box-shadow: var(--alzata);
  transition: background .2s var(--dolce), box-shadow .2s var(--dolce);
}

.soglia-entra:hover:not(:disabled) { background: var(--accento); color: var(--paper); }
.soglia-entra:disabled { opacity: .7; }

/* IL DISCO DENTRO LA CAPSULA — il gesto di tutti i comandi principali (tema, 18/08).
 *
 * ⚠️ E' PIENO E ROVESCIATO rispetto alla capsula: chiaro sul bottone terracotta. Fatto
 * trasparente col colore del testo annacquato si vedrebbe appena, e un disco che non stacca
 * non e' un disco, e' un alone.
 *
 * ⚠️ Il margine negativo lo fa rientrare nel respiro della pastiglia: senza, il comando si
 * allunga e smette di essere della misura degli altri.
 *
 * ⚠️ E il disco NON usa `--alzato`: quella e' la superficie di cio' che sta sopra la carta,
 * e un segno dentro una capsula non sta sopra niente. */
.soglia-entra {
  gap: 0;
  --disco: var(--paper);
  --disco-segno: var(--accento-testo);
}

.disco {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -7px -9px -7px 12px;
  border-radius: 50%;
  background: var(--disco);
  color: var(--disco-segno);
}

.disco svg { width: 13px; height: 13px; }

/* --- l'avviso --------------------------------------------------------------------- */
/* Sopra il modulo e non sotto: si legge prima di riprovare, non dopo aver gia' ridigitato. */
.soglia-avviso {
  width: min(272px, 100%);
  margin: 0 auto 16px;
  padding: 8px 12px;
  border-radius: var(--raggio);
  background: var(--nebbia);
  border: 1px solid var(--line);
  color: var(--accento-testo);
  font-size: var(--testo);
}

/* --- il piede --------------------------------------------------------------------- */
/* Centrato come tutto il resto: era l'unica cosa della pagina appoggiata a sinistra, e su
   una schermata fatta di una colonna sola in mezzo si notava proprio per quello. Il piede
   dell'APP resta a sinistra, dove sotto c'e' del contenuto allineato a sinistra a cui
   appartiene: qui non c'e' niente a cui appartenere. (Raffaele, 19/08.) */
.soglia-pie {
  text-align: center;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--testo-nota);
}

/* Su telefono il vuoto non si distribuisce, si dosa. In verticale ne avanza tanto, e i due
   margini automatici lo spaccavano a meta': ne restava una voragine fra l'insegna e la
   domanda, e il gruppo che si legge — domanda, campi, gesto — finiva schiacciato in fondo.
   Qui l'insegna sta in alto con la sua aria, il gruppo si centra in cio' che resta, e il
   piede e' subito dopo. (Raffaele, 19/08.) */
/* ⚠️ L'INSEGNA STA A 24px DAL BORDO, misurati sul tema (19/08) e non scelti a occhio: e'
   la stessa distanza che ha li', e passando dall'accesso all'app non si deve vedere
   cambiare niente. Provata prima a centrarla insieme al gruppo — «troppo bassa», ed era
   vero: l'insegna e' una firma, e una firma sta in cima al foglio. I margini automatici
   restano a distribuire il vuoto sotto, come fa il tema. */
@media (max-width: 599px) {
  .soglia-colonna { padding: 24px 0 0; }
  .soglia-domanda { margin: auto 0 28px; }
}