/* TINA — foglio di stile unico. Prima il telefono: una colonna, testo grande
   abbastanza da leggersi in piedi in una fiera rumorosa.

   **Nessun esadecimale qui**: i colori sono in colori.css, per ruolo, e le tinte
   intermedie si mescolano da quelli (color-mix). Il terracotta si guarda, il
   petrolio si legge. */

:root {
  --tenue: color-mix(in srgb, var(--testo) 75%, var(--fondo));
  --filo: color-mix(in srgb, var(--testo) 18%, var(--fondo));
  --velo-marchio: color-mix(in srgb, var(--marchio-tenue) 18%, var(--fondo));
  --velo-inchiostro: color-mix(in srgb, var(--inchiostro) 9%, var(--fondo));
  --velo-attenzione: color-mix(in srgb, var(--attenzione) 45%, var(--fondo));
  --velo-neutro: color-mix(in srgb, var(--testo) 10%, var(--fondo));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  font: 1.05rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--fondo);
}

main { max-width: 44rem; margin: 0 auto; }
main:has(.piano) { max-width: none; }

/* Il titolo grande è in terracotta: si guarda. Testo grande, quindi 3 : 1 basta
   (4,2 : 1 sul crema); il testo corrente resta al petrolio e al testo scuro. */
h1 { font-size: 2rem; margin: 1.5rem 0 0.25rem; letter-spacing: 0.02em; color: var(--marchio); }
h2 { font-size: 1.25rem; margin-top: 2rem; color: var(--inchiostro); }
h3 { color: var(--inchiostro); }
h2 small, h3 small { color: var(--tenue); font-weight: normal; }
a { color: var(--inchiostro); }

.occhiello { color: var(--tenue); margin-top: 0; }
.tenue { color: var(--tenue); }

.nastro {
  margin: 0 -1rem 1rem;
  padding: 0.4rem 1rem;
  background: var(--inchiostro);
  color: var(--bianco);
  font-size: 0.9rem;
  text-align: center;
}

.stato { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
.stato dt { color: var(--tenue); }
.stato dd { margin: 0; }

.avviso { color: var(--testo); background: var(--velo-marchio); border-left: 4px solid var(--marchio); padding: 0.5rem 0.8rem; border-radius: 4px; }
.fatto { color: var(--inchiostro); background: var(--bianco); border-left: 4px solid var(--inchiostro); padding: 0.5rem 0.8rem; border-radius: 4px; }
.senza-script { color: var(--testo); background: var(--velo-attenzione); padding: 0.8rem; border-radius: 6px; }

footer {
  max-width: 44rem;
  margin: 3rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--filo);
  color: var(--tenue);
  font-size: 0.85rem;
}
.lingue { display: flex; gap: 0.5rem; }
.lingue button[aria-current] { color: var(--inchiostro); border-color: var(--inchiostro); font-weight: 600; }

/* --- moduli --------------------------------------------------------------- */
label { display: block; margin-top: 1rem; font-weight: 600; }
input, textarea, select {
  width: 100%; font: inherit; padding: 0.7rem;
  color: var(--testo); background: var(--bianco);
  border: 1px solid var(--filo); border-radius: 6px;
}
fieldset { border: 1px solid var(--filo); border-radius: 6px; margin-top: 1rem; }
label.scelta { display: flex; gap: 0.5rem; align-items: center; font-weight: normal; margin: 0.4rem 0; }
label.scelta input { width: auto; }
/* Una casella o un pallino non si allargano mai a tutta riga, anche senza la classe. */
input[type="radio"], input[type="checkbox"] { width: auto; }
.modulo { margin-bottom: 1.5rem; }
details summary { cursor: pointer; color: var(--inchiostro); margin: 0.6rem 0; }
progress { width: 100%; height: 0.8rem; accent-color: var(--inchiostro); }

button, .pulsante {
  font: inherit; padding: 0.75rem 1.1rem; border-radius: 6px;
  border: 1px solid var(--inchiostro); background: var(--bianco); color: var(--inchiostro);
  text-decoration: none; display: inline-block;
}
/* Bianco su terracotta fa 4,6 : 1: basta, ma solo se il testo non si rimpicciolisce. */
button.primario, .pulsante {
  background: var(--marchio); border-color: var(--marchio); color: var(--bianco);
  font-size: 1.05rem; font-weight: 600;
}
button.primario { margin-top: 1rem; width: 100%; }
button.sobrio { border-color: var(--filo); color: var(--testo); background: var(--fondo); padding: 0.35rem 0.7rem; }
.elenco-scelte button { display: block; width: 100%; margin: 0.5rem 0; text-align: left; }

/* --- barra e messaggi ----------------------------------------------------- */
.barra { max-width: 44rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; color: var(--tenue); font-size: 0.95rem; }
.barra a { color: var(--inchiostro); text-decoration: none; font-weight: 600; }
.messaggi { max-width: 44rem; margin: 0.5rem auto; }

/* --- inizio --------------------------------------------------------------- */
.relazioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.relazione { background: var(--bianco); border: 1px solid var(--filo); border-top: 4px solid var(--marchio); border-radius: 8px; padding: 0.7rem 0.9rem; color: var(--testo); text-decoration: none; }
.relazione strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--inchiostro); }

/* --- agende: da telefono, una riga per quarto d'ora ------------------------ */
.agenda { list-style: none; padding: 0; margin: 0; }
.riga { display: flex; gap: 0.8rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--filo); }
.riga .ora { font-variant-numeric: tabular-nums; min-width: 6.5rem; color: var(--tenue); }
.riga.incontro { border-left: 4px solid var(--marchio); padding-left: 0.5rem; }
.riga.incontro .cosa { font-weight: 600; }
.riga.neutralizzato { color: var(--tenue); background: var(--velo-neutro); }
.riga.proposte_ricevute .cosa, .riga.invito_mandato .cosa { color: var(--inchiostro); }

/* --- piano della giornata: la tabella larga scorre dentro di sé ------------ */
.scorre { overflow-x: auto; max-width: 100%; }
.giorni { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.giorni a[aria-current] { font-weight: 700; }
.giorni-mancanti { font-size: 1.15rem; }
.piano { border-collapse: collapse; font-size: 0.75rem; }
.piano th, .piano td { border: 1px solid var(--filo); padding: 0.2rem 0.3rem; white-space: nowrap; }
.piano td { min-width: 1.4rem; height: 1.4rem; }
.piano td { padding: 0; }
.piano td a { display: block; min-width: 1.4rem; height: 1.4rem; }   /* tutta la cella è il collegamento */
.piano td.incontro { background: var(--inchiostro); color: var(--bianco); }
.piano td.libero { background: var(--velo-attenzione); }   /* i buchi, in evidenza */
.piano td.neutralizzato, .piano td.tavolo_sospeso { background: var(--velo-neutro); }
.piano td.conto { font-variant-numeric: tabular-nums; text-align: right; }

/* --- catalogo, schede, inviti --------------------------------------------- */
.completezza { background: var(--bianco); border: 1px solid var(--filo); border-radius: 8px; padding: 0.4rem 0.9rem; margin: 1rem 0; }
.catalogo { list-style: none; padding: 0; }
.scheda-breve { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--filo); color: var(--testo); text-decoration: none; }
.scheda-breve strong { color: var(--inchiostro); }
.scheda-breve .perche { color: var(--inchiostro); font-size: 0.9rem; }
.suggeriti { background: var(--velo-marchio); border-radius: 8px; padding: 0.2rem 0.9rem 0.6rem; }
.logo { max-height: 2.5rem; max-width: 6rem; object-fit: contain; }
.logo-grande { max-height: 5rem; max-width: 12rem; object-fit: contain; margin-top: 1rem; }
.miniatura { max-width: 8rem; max-height: 8rem; object-fit: cover; border-radius: 6px; }
.in-linea { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.in-linea input[type=file] { width: auto; border: none; padding: 0; background: var(--fondo); }
.media, .prodotto, .invito { border-top: 1px solid var(--filo); padding: 0.5rem 0; }
.invita { background: var(--velo-marchio); border-radius: 8px; padding: 0.2rem 0.9rem 0.8rem; margin: 1rem 0; }
.messaggio-invito { font-style: italic; }
.messaggio { border-top: 1px solid var(--filo); padding-top: 0.5rem; }
.messaggio pre { white-space: pre-wrap; color: var(--testo); background: var(--velo-neutro); padding: 0.6rem; border-radius: 6px; }

/* --- verifica delle destinazioni prima di neutralizzare -------------------------- */
table.verifica { border-collapse: collapse; margin: 0.5rem 0 1rem; }
table.verifica th, table.verifica td { border: 1px solid var(--filo); padding: 0.3rem 0.5rem; text-align: left; }
table.verifica tr.occupata td { background: var(--velo-marchio); }
form.modulo > button { margin-top: 0.6rem; }

/* --- T7 · la giornata ------------------------------------------------------------- */
.quarto { border-top: 1px solid var(--filo); margin-top: 1rem; }
.quarto.in-corso h2 { border-left: 4px solid var(--marchio); padding-left: 0.5rem; }
.presenze { list-style: none; padding: 0; }
.presenza { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--filo); }
.presenza .tavolo { font-weight: 700; min-width: 2.2rem; color: var(--inchiostro); }
.presenza .assente { text-decoration: line-through; color: var(--tenue); }
form.in-linea { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
details.tocco summary { margin: 0; }
dl.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
dl.numeri div { background: var(--bianco); border: 1px solid var(--filo); border-radius: 6px; padding: 0.5rem 0.7rem; }
dl.numeri dt { color: var(--tenue); font-size: 0.85rem; }
dl.numeri dd { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--inchiostro); }
table.report { border-collapse: collapse; }
table.report th, table.report td { border: 1px solid var(--filo); padding: 0.3rem 0.6rem; text-align: right; }
table.report th:first-child { text-align: left; }
ol.stati-evento { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; padding: 0; list-style: none; }
ol.stati-evento li + li::before { content: "→ "; color: var(--tenue); }
ol.stati-evento li.attuale { font-weight: 700; color: var(--inchiostro); text-decoration: underline; }

/* --- l'agenda stampata: solo l'agenda ------------------------------------------------- */
@media print {
  .nastro, .barra, footer, form, details, .messaggi, nav.giorni { display: none !important; }
  body { background: var(--bianco); }
  .riga { break-inside: avoid; }
}
.avviso-esportazione { background: var(--bianco); border-left: 4px solid var(--attenzione); padding: 0.4rem 1rem; border-radius: 4px; }

/* --- B11b · relazioni e opportunità ------------------------------------------------ */
.relazione.accesa { border-top-color: var(--attenzione); }
.relazioni.secondarie .relazione { border-top-color: var(--filo); }
.relazioni.secondarie .relazione strong { font-size: 1.4rem; }
.pastiglia { background: var(--attenzione); color: var(--inchiostro); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.85rem; font-weight: 600; }
.azione { border-left: 4px solid var(--filo); padding-left: 0.6rem; }
.azione.scaduta { border-left-color: var(--attenzione); }
.opportunita { background: var(--bianco); border: 1px solid var(--filo); border-radius: 8px; padding: 0.4rem 1rem 0.8rem; margin: 1rem 0; }
.opportunita.aperta { border-left: 4px solid var(--attenzione); }
.opportunita h3 { margin-bottom: 0.2rem; }
.storia { list-style: none; padding: 0; }
.storia li { border-left: 3px solid var(--filo); padding: 0.2rem 0 0.2rem 0.6rem; margin: 0.3rem 0; }

/* --- blocco A · impostazione ------------------------------------------------------- */
table.elenco td, table.elenco th { text-align: left; }
code.segreto { font-size: 1.1rem; word-break: break-all; background: var(--bianco); padding: 0.2rem 0.4rem; border: 1px solid var(--filo); border-radius: 4px; }
form.regole fieldset { margin-bottom: 0.8rem; }

/* --- blocco C · i candidati del recupero, uno per riga ------------------------------ */
form.candidato { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem;
                 padding: 0.6rem 0; border-bottom: 1px solid var(--filo); }