/*
 * Il telefono di Fallthere: di base come DOPE (il nero e l'inchiostro, nessun colore d'accento tranne dove sei), e
 * l'identità dell'organizzazione cambia i colori dei bottoni, di dove sei e gli angoli (le variabili le mette lo
 * script, dalla veste che manda il servizio). Pensato per il dito: ogni tocco è alto almeno 44 px.
 *
 * Ogni misura viene da una scala qui sotto (gli spazi, le taglie, gli angoli, i livelli): il censimento dell'interfaccia
 * (`estensioni/panfold/src/censimento-ui.ts`) conta i numeri scritti nelle regole, e qui non ce ne sono.
 */
:root {
  --sfondo: #000000;
  --carta: #111111;
  --linea: #262626;
  --testo: #f2f2f2;
  --sommesso: #9a9a9a;
  /* I bottoni: l'inchiostro, col fondo sopra (sul buio il nero, sul chiaro il bianco della carta). */
  --bottone: var(--testo);
  --sopra-bottone: var(--sfondo);
  /* Dove sei: il blu di serie di Fallthere o il colore dell'organizzazione, leggibile su questo fondo (lo calcola il servizio). */
  --dove-chiaro: #2b51cf;
  --dove-scuro: #6988ed;
  --dove: var(--dove-scuro);
  /* Il testo sopra il colore di dove sei (il numero che aspetta): il nero sul buio, il bianco sul chiaro. */
  --sopra-dove: var(--sfondo);

  /* La scala condivisa di tutto Fallthere (gettoni.ts): gli spazi, le taglie, gli angoli. */
  /* ⚙ inizio gettoni */
  --panfold-spazio-1: 4px;
  --panfold-spazio-2: 8px;
  --panfold-spazio-3: 12px;
  --panfold-spazio-4: 16px;
  --panfold-spazio-5: 24px;
  --panfold-spazio-6: 32px;
  --panfold-testo-piccolo: 12px;
  --panfold-testo-base: 14px;
  --panfold-icona-piccola: 16px;
  --panfold-icona-media: 20px;
  --panfold-icona-grande: 24px;
  --panfold-icona-peso: 1.5;
  --panfold-raggio-piccolo: 8px;
  --panfold-raggio: 12px;
  --panfold-raggio-grande: 20px;
/* ⚙ fine gettoni */
  /* I nomi locali sono solo alias: niente divergenze fra telefono e catalogo. */
  --spazio-mezzo: 2px;
  --spazio-1: var(--panfold-spazio-1);
  --spazio-2: var(--panfold-spazio-2);
  --spazio-3: var(--panfold-spazio-3);
  --spazio-4: var(--panfold-spazio-4);
  --spazio-5: var(--panfold-spazio-5);
  --spazio-6: var(--panfold-spazio-6);
  /* Le taglie locali che la scala condivisa non nomina: il numero, il tasto, la carta, il titolo. */
  --testo-numero: var(--panfold-testo-piccolo);
  --testo-piccolo: var(--panfold-testo-piccolo);
  --testo-tasto: 15px;
  --testo-base: var(--panfold-testo-base);
  --testo-carta: 17px;
  --testo-titolo: 22px;
  /* Gli angoli: alias della stessa scala del catalogo. I ruoli: i campi (controllo), i bottoni
     (azione), le carte e gli avvisi (superficie). Alla densità del dito l'azione diventa una pillola. */
  --raggio-piccolo: var(--panfold-raggio-piccolo);
  --raggio: var(--panfold-raggio);
  --raggio-grande: var(--panfold-raggio-grande);
  --raggio-controllo: var(--raggio);
  --raggio-azione: calc(var(--raggio) * 2);
  --raggio-superficie: var(--raggio-grande);
  --raggio-numero: 10px;
  /* I livelli, con un nome: la fila in basso sta sopra la pagina. */
  --livello-fila: 10;
  --dito: 44px;
  /* La fila in basso: alta 56 px, e ogni tasto si tocca per tutta l'altezza. */
  --fila: 56px;
  /* Le ombre: i tre gradi esterni del catalogo (controlli, superfici, finestre), morbidi e senza
     gradienti né riflessi interni. Il colore è il filo del tema, così valgono sul buio e sul chiaro. */
  --ombra-controllo: 0 2px 3px -1px var(--linea), 0 5px 10px -4px var(--linea);
  --ombra-1: 0 4px 8px -4px var(--linea), 0 18px 36px -12px var(--linea);
  --ombra-2: 0 6px 12px -4px var(--linea), 0 24px 56px -12px var(--linea);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --sfondo: #f7f7f5;
    --carta: #ffffff;
    --linea: #e3e3e0;
    --testo: #111111;
    --sommesso: #666666;
    --sopra-bottone: var(--carta);
    --dove: var(--dove-chiaro);
    --sopra-dove: var(--carta);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo); }
body {
  font: var(--testo-base)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: max(var(--spazio-4), env(safe-area-inset-top)) max(var(--spazio-4), env(safe-area-inset-right)) max(var(--spazio-6), env(safe-area-inset-bottom)) max(var(--spazio-4), env(safe-area-inset-left));
  -webkit-text-size-adjust: 100%;
}
main { max-width: 560px; margin: 0 auto; }
header { display: flex; align-items: center; gap: var(--spazio-3); margin: var(--spazio-1) 0 var(--spazio-5); }
header .chi { flex: 1 1 auto; min-width: 0; }
h1 { margin: 0; font-size: var(--testo-titolo); font-weight: 650; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: var(--testo-carta); font-weight: 650; }
p { margin: 0; }
.sommesso { color: var(--sommesso); }
.piccolo { font-size: var(--testo-piccolo); }
.carta {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-superficie);
  box-shadow: var(--ombra-1);
  padding: var(--spazio-4) var(--spazio-4) var(--spazio-2);
  margin: 0 0 var(--spazio-4);
}
.carta .testa { display: flex; align-items: center; gap: var(--spazio-2); margin-bottom: var(--spazio-1); }
.carta .testa h2 { flex: 1 1 auto; }
.riassunto { margin: var(--spazio-mezzo) 0 var(--spazio-1); }
ul { list-style: none; margin: 0; padding: 0; }
li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-3); padding: var(--spazio-3) 0; border-top: 1px solid var(--linea); min-height: var(--dito); }
li:first-child { border-top: 0; }
li .cosa { flex: 1 1 180px; min-width: 0; }
li .testo { overflow-wrap: anywhere; white-space: pre-wrap; }
li .dettaglio { font-size: var(--testo-piccolo); color: var(--sommesso); overflow-wrap: anywhere; }
/* I gesti di una riga (Sì e No, Chiama e Scrivi, Registra): a destra, e sotto il testo quando non ci stanno accanto. */
li .gesti { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-left: auto; justify-content: flex-end; }
.vuoto { padding: var(--spazio-3) 0; color: var(--sommesso); }
button, .bottone {
  font: inherit;
  font-weight: 600;
  min-height: var(--dito);
  padding: 0 var(--spazio-4);
  border-radius: var(--raggio-azione);
  border: 1px solid var(--bottone);
  box-shadow: var(--ombra-controllo);
  background: var(--bottone);
  color: var(--sopra-bottone);
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button.secondario, .bottone.secondario { background: transparent; color: var(--testo); border-color: var(--linea); }
button:disabled { opacity: 0.5; }
a { color: inherit; }
.collegamento { font-size: var(--testo-piccolo); color: var(--sommesso); min-height: var(--dito); display: inline-flex; align-items: center; padding: 0 var(--spazio-1); }
input, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--dito);
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-controllo);
  border: 1px solid var(--linea);
  box-shadow: var(--ombra-controllo);
  background: var(--sfondo);
  color: var(--testo);
}
textarea { resize: vertical; min-height: 88px; }
.chiedi { display: flex; flex-direction: column; gap: var(--spazio-2); padding: var(--spazio-1) 0 var(--spazio-3); }
.chiedi button { align-self: flex-end; }
/* Cercare (Persone, il Browser): il campo e il bottone su una riga, sopra l'elenco. */
.chiedi.in-cima { flex-direction: row; align-items: center; padding: 0 0 var(--spazio-2); }
.chiedi.in-cima input { flex: 1 1 auto; min-width: 0; }
.chiedi.in-cima button { align-self: auto; }
.sotto { display: flex; flex-direction: column; gap: var(--spazio-2); }
.sotto:empty { display: none; }
.sotto > button { align-self: flex-start; margin-bottom: var(--spazio-3); }
.codice { letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.modulo { display: flex; flex-direction: column; gap: var(--spazio-3); margin-top: var(--spazio-5); }
/* Una cosa da sapere si separa anche col tono, oltre che con la cornice: il fondo della carta. */
.avviso { margin: 0 0 var(--spazio-4); padding: var(--spazio-3); border-radius: var(--raggio-superficie); border: 1px solid var(--linea); background: var(--carta); }
.avviso[hidden], [hidden] { display: none !important; }
footer { margin-top: var(--spazio-6); display: flex; flex-wrap: wrap; gap: var(--spazio-2); justify-content: space-between; }
/* «Installa l'app» (Chrome su computer e Android): in fondo, fisso, sopra la fila dei tasti quando c'è. */
.installa {
  position: fixed;
  left: 50%;
  z-index: var(--livello-fila);
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--spazio-4)));
  bottom: calc(var(--spazio-4) + env(safe-area-inset-bottom));
  box-shadow: var(--ombra-2);
}
body.con-tasti .installa { bottom: calc(var(--fila) + var(--spazio-4) + env(safe-area-inset-bottom)); }
/* Il ripiego quando Chrome non propone l'installazione (vedi `apk.ts`): il tasto APK, o l'istruzione per Apple. */
a.installa.apk { text-decoration: none; }
.installa.appunto {
  position: static;
  transform: none;
  width: auto;
  bottom: auto;
  margin: 0 0 var(--spazio-4);
  padding: var(--spazio-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-superficie);
  background: var(--carta);
  color: var(--sommesso);
  font-size: var(--testo-piccolo);
}
/* «Oggi» quando niente aspetta: una riga calma, non un avviso. */
.vuoto.calmo { padding: var(--spazio-2) var(--spazio-mezzo) var(--spazio-5); }
/* Spazi: ogni riga è un collegamento alto un dito. */
ul.app li { padding: 0; }
ul.app a.voce { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: var(--dito); padding: var(--spazio-3) 0; text-decoration: none; }
ul.app a.voce .testo { font-weight: 600; }
ul.app a.voce .dettaglio { font-size: var(--testo-piccolo); color: var(--sommesso); }
/* La fila in basso, «Oggi · Pan · Spazi»: fuori da main, sempre in fondo, sopra la riga di casa dell'iPhone. Dove sei ha il colore di
   «dove sei» e una riga sopra; gli altri sono sommessi. */
body.con-tasti { padding-bottom: calc(var(--fila) + var(--spazio-6) + env(safe-area-inset-bottom)); }
.tasti {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--livello-fila);
  display: flex;
  background: var(--carta);
  box-shadow: var(--ombra-2);
  border-top: 1px solid var(--linea);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.tasti .tasto {
  flex: 1 1 0;
  min-width: 0;
  height: var(--fila);
  min-height: var(--fila);
  padding: 0 var(--spazio-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sommesso);
  font: inherit;
  font-size: var(--testo-tasto);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
}
.tasti .tasto[aria-current="page"] { color: var(--dove); }
.tasti .tasto[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--dove); }
.tasti .tasto:focus-visible { outline: 2px solid var(--dove); outline-offset: -4px; }
/* Il numero che aspetta, accanto a «Oggi»: nel colore di dove sei (come i numeri del computer). */
.tasti .tasto .numero {
  margin-left: var(--spazio-1);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spazio-1);
  border-radius: var(--raggio-numero);
  background: var(--dove);
  color: var(--sopra-dove);
  font-size: var(--testo-numero);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Un posto che arriverà (Pan a voce, le riunioni in presenza): una carta calma che lo dice. */
.carta.segnaposto { padding: var(--spazio-4); display: flex; flex-direction: column; gap: var(--spazio-1); }