/* Cotidie — il foglio di base, caricato da OGNI pagina.
 *
 * Qui stanno i materiali della casa (SPECIFICA sezione 11) e le regole di tutti
 * i controlli: campi, etichette, pulsanti, tabelle, zone di trascinamento. Un
 * controllo che non passa di qui esce con l'aspetto del browser — bianco,
 * monospazio, etichette in linea — che non è nessuno dei nostri materiali.
 *
 * I fogli di pagina contengono solo ciò che è specifico della loro pagina.
 * Se una regola serve a due pagine, sta qui.
 */

@import url('/css/font.css');

:root{
  /* Tre colori, e nient'altro. */
  --carta:#F4F2ED;
  --inchiostro:#1A1A19;
  --pietra:#8A8880;
  --pietra-velo:rgba(138,136,128,.28);
  --pietra-ombra:rgba(138,136,128,.14);
  --pietra-alone:rgba(138,136,128,.08);   /* Pietra, appena: l'alone della fase che pulsa */
  --carta-vetro:rgba(244,242,237,0);   /* Carta, del tutto trasparente: per le sfumature */
  --pietra-vetro:rgba(138,136,128,0);  /* Pietra, del tutto trasparente: per l'anello che pulsa */

  /* Due caratteri: la lettera e l'interfaccia. */
  --font-lettera:"Dante MT Std","Dante MT","Dante","EB Garamond","Charter","Iowan Old Style",Georgia,serif;
  --font-ui:"Forma DJR Text","Forma DJR Micro","Forma DJR Display","Figtree","Helvetica Neue",-apple-system,"Segoe UI",sans-serif;

  /* Misure ricorrenti. */
  --col:34em;
  --raggio:10px;
  --bersaglio:44px;
  --t-fast:200ms;
  --t-lettera:300ms;

  color-scheme:light;
}

*{box-sizing:border-box}

/* hidden deve vincere sempre: senza questo, una regola con la classe (per
   esempio .navigazione a) lo scavalca e l'elemento resta visibile. */
[hidden]{display:none !important}
.nascosto{display:none !important}

/* Nessuna regolazione automatica del testo da parte del browser: le
   impostazioni di carattere del telefono valgono, e tutte le misure sono in
   rem, così le seguono. */
html{background:var(--carta)}
/* La dimensione del testo scelta nel Profilo: normale, grande, più grande.
   Sta sulla radice perché i rem si misurano da lì; si moltiplica con quella
   del telefono, non la sostituisce. */
:root.testo-grande{font-size:115%}
:root.testo-piu-grande{font-size:130%}
:root.testo-molto-grande{font-size:150%}
body{
  margin:0;color:var(--inchiostro);background:var(--carta);
  font-family:var(--font-ui);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Il bersaglio del fuoco è lo stesso ovunque: si vede dove si è. */
button:focus-visible,a:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,label:focus-visible{
  outline:2px solid var(--inchiostro);outline-offset:3px;border-radius:4px;
}

/* ---------------------------------------------------------- i controlli */

/* L'etichetta sta SOPRA il campo, in Pietra, piccola: si legge come una
   didascalia, non come parte del testo che si sta scrivendo. */
label{display:block;font-family:var(--font-ui);font-size:0.8125rem;color:var(--pietra);margin:18px 0 6px}
label:first-child{margin-top:0}
/* Una sola eccezione, dichiarata: la casella con la sua parola accanto. */
label.in-linea{display:inline;font-size:inherit;color:inherit;margin:0 0 0 10px}
label.in-linea input{width:auto}

/* Tutti i campi hanno lo stesso corpo. Senza `font:inherit` il browser mette il
   suo monospazio; senza `background` mette il bianco; senza `appearance` mette
   la sua cornice grigia. */
input[type="text"],input[type="email"],input[type="password"],input[type="date"],
input[type="search"],input[type="tel"],input[type="url"],input[type="number"],
input[type="file"],textarea,select{
  -webkit-appearance:none;appearance:none;
  width:100%;padding:11px 12px;
  font-family:var(--font-ui);font-size:0.9375rem;line-height:1.5;
  color:var(--inchiostro);background:transparent;
  border:1px solid var(--pietra-velo);border-radius:var(--raggio);
  transition:border-color var(--t-fast) ease;
}
input::placeholder,textarea::placeholder{color:var(--pietra);opacity:1}
input:hover,textarea:hover,select:hover{border-color:var(--pietra)}
input:disabled,textarea:disabled,select:disabled{color:var(--pietra);cursor:not-allowed}
textarea{min-height:92px;resize:vertical}
/* La freccia del menù a tendina la disegniamo noi, in Pietra: quella di
   sistema arriva con il grigio del browser. */
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--pietra) 50%),
                   linear-gradient(135deg,var(--pietra) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:36px;
}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:var(--inchiostro)}
input[type="file"]{padding:9px 12px;cursor:pointer}
input[type="file"]::file-selector-button{
  font-family:var(--font-ui);font-size:0.875rem;color:var(--inchiostro);
  background:transparent;border:1px solid var(--pietra-velo);border-radius:999px;
  padding:6px 14px;margin-right:12px;cursor:pointer;
}
input[type="file"]::file-selector-button:hover{border-color:var(--inchiostro)}

/* Invisibile ma non `display:none`: un input tolto dalla pagina non si apre in
   modo affidabile dall'etichetta. */
/* Il secondo selettore serve: `input[type="file"]` da solo batte una classe e
   rimetterebbe width:100% e il padding, e l'input invisibile sfonderebbe a
   destra facendo scorrere la pagina di lato. */
.campo-invisibile,input[type="file"].campo-invisibile{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------- i pulsanti */

button{font-family:var(--font-ui);color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* Primario: si preme per fare la cosa. */
.bottone,.invia{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--bersaglio);padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--inchiostro);color:var(--carta);
  font-family:var(--font-ui);font-size:0.9375rem;white-space:nowrap;
  transition:opacity var(--t-fast) ease;
}
.invia{min-height:40px;padding:0 14px;font-size:0.875rem}
.bottone:disabled,.invia:disabled{opacity:.5;cursor:not-allowed}

/* Secondario: bordato, sullo stesso fondo. */
.bottone.tenue,.nuovo{
  background:var(--carta);color:var(--inchiostro);border:1px solid var(--inchiostro);
}
.nuovo{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;border-radius:999px;
  font-family:var(--font-ui);font-size:0.875rem;white-space:nowrap;cursor:pointer;
}
.nuovo.pieno{background:var(--inchiostro);color:var(--carta);border-color:var(--inchiostro)}

/* Terziario: un testo sottolineato, per le azioni che non si fanno spesso. */
.testo,.azione-testo,.annulla{
  font-family:var(--font-ui);font-size:0.875rem;background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--pietra-velo);text-underline-offset:4px;
  transition:color var(--t-fast) ease,text-decoration-color var(--t-fast) ease;
}
.testo,.azione-testo{color:var(--inchiostro);min-height:36px}
.annulla{color:var(--pietra);min-height:40px}
.testo:hover,.azione-testo:hover{text-decoration-color:var(--inchiostro)}
.annulla:hover{color:var(--inchiostro)}
.testo:disabled,.azione-testo:disabled,.annulla:disabled{opacity:.5;cursor:not-allowed}
.bottoni{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px}

/* ---------------------------------------------------------- le tabelle */

/* Righe, non griglie: una linea sotto ciascuna e nient'altro. */
table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:0.9062rem}
th{
  text-align:left;font-weight:400;color:var(--pietra);font-size:0.8125rem;
  padding:0 10px 8px 0;border-bottom:1px solid var(--pietra);
}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--pietra-velo);vertical-align:top}
td.nome{font-weight:500}
td.pietra,span.pietra{color:var(--pietra)}
td.az{white-space:nowrap;text-align:right}
td.az button{
  font-family:var(--font-ui);font-size:0.875rem;background:none;border:0;cursor:pointer;
  color:var(--pietra);margin-left:12px;min-height:32px;
  text-decoration:underline;text-decoration-color:var(--pietra-velo);text-underline-offset:4px;
}
td.az button:hover{color:var(--inchiostro)}

/* ------------------------------------------------- la zona dei file */

.zona-file{
  margin:10px 0 12px;padding:22px 18px;
  border:2px dashed var(--pietra);border-radius:12px;
  min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;
  transition:border-color var(--t-fast) ease,background var(--t-fast) ease;
}
.zona-file.sopra{border-color:var(--inchiostro);background:var(--pietra-ombra)}
.zona-file .invito{
  font-family:var(--font-lettera);font-style:italic;font-size:1.1875rem;color:var(--inchiostro);margin:0;
}
/* Un'etichetta che si comporta da pulsante: cliccabile senza una riga di
   codice, e visibile come un pulsante vero. */
.bottone-file{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--bersaglio);padding:0 20px;border-radius:999px;cursor:pointer;
  border:1px solid var(--inchiostro);background:var(--carta);color:var(--inchiostro);
  font-family:var(--font-ui);font-size:0.9688rem;margin:0;
  transition:background var(--t-fast) ease,color var(--t-fast) ease;
}
.bottone-file:hover{background:var(--inchiostro);color:var(--carta)}
.bottone-file.piccolo{min-height:40px;padding:0 16px;font-size:0.875rem}
.scelta-file{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap}
.scelta-file .nome-file{margin:0}

/* ------------------------------------------------- il campo della chat */

/* Fisso in fondo, su una sfumatura di Carta: il campo per scrivere a Plinio e
   ad Aurelio è lo stesso. Prima stava nel foglio di pagina, dopo una riga
   rotta: il browser lo scartava e il campo finiva in basso a sinistra. */
.scrivi{
  position:fixed;left:0;right:0;bottom:0;padding:12px 22px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--carta) 72%,var(--carta-vetro));
}
.scrivi-interno{max-width:40em;margin:0 auto;display:flex;gap:10px;align-items:flex-end}
.scrivi textarea{flex:1;min-height:48px;max-height:140px;border-radius:12px;background:var(--carta)}
.scrivi .bottone{flex:none}
/* «Allega»: un'etichetta legata al campo dei file, che si legge come un'azione
   secondaria accanto al campo. */
.allega{
  display:inline-flex;align-items:center;min-height:var(--bersaglio);padding:0 12px;cursor:pointer;margin:0;
  font-family:var(--font-ui);font-size:0.9375rem;color:var(--pietra);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pietra-velo);
  transition:color var(--t-fast) ease;
}
.allega:hover{color:var(--inchiostro)}

/* --------------------------------------------------------- la voce */

/* Il microfono: un cerchio del bersaglio, bordato; premuto si riempie. Si
   tiene premuto e si parla, come in un citofono. */
.microfono{
  flex:none;width:var(--bersaglio);height:var(--bersaglio);border-radius:50%;
  border:1px solid var(--inchiostro);background:var(--carta);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  touch-action:none;-webkit-user-select:none;user-select:none;
  transition:background var(--t-fast) ease;
}
.microfono .punto{width:12px;height:18px;border-radius:7px;background:var(--inchiostro);display:block}
.microfono.registra{background:var(--inchiostro)}
.microfono.registra .punto{background:var(--carta)}
/* Aperto da un tocco: un anello in Pietra che pulsa finché ascolta. */
.microfono.ascolto{animation:anello 1.4s ease-out infinite}
@keyframes anello{
  0%{box-shadow:0 0 0 0 var(--pietra-velo)}
  70%{box-shadow:0 0 0 12px var(--pietra-vetro)}
  100%{box-shadow:0 0 0 0 var(--pietra-vetro)}
}
/* «Ferma»: compare solo mentre la voce parla, al posto del silenzio. */
.ferma-voce{
  flex:none;min-height:var(--bersaglio);padding:0 14px;border-radius:999px;
  border:1px solid var(--inchiostro);background:var(--carta);color:var(--inchiostro);
  font-family:var(--font-ui);font-size:0.9375rem;cursor:pointer;
}

/* --------------------------------------------------- messaggi e note */

.messaggio{
  margin:16px 0;padding:12px 14px;border-radius:8px;
  border:1px solid var(--pietra-velo);display:none;font-size:0.9375rem;
}
.messaggio.visibile{display:block}
.messaggio.errore{border-color:var(--inchiostro)}
.messaggio.successo{color:var(--pietra)}
/* Un avviso non è un errore: dice che cosa è successo, non che è andata male. */
.messaggio.avviso{border-left:3px solid var(--pietra)}

.aiuto{font-family:var(--font-ui);font-size:0.875rem;color:var(--pietra);margin:6px 0 0}
/* Un numero che è andato a zero non deve leggersi come gli altri. */
.allarme{color:var(--inchiostro);font-weight:600}
.elenco-piatto{list-style:none;margin:0;padding:0}
.elenco-piatto li{padding:12px 0;border-bottom:1px solid var(--pietra-velo)}
.riga-scheda{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}

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