/* Lo stile comune delle pagine per le persone: la direzione «Quaderno», penna blu ed evidenziatore.
   Perché questi colori e queste forme: docs/2026-10-13-12-21-32-colori-e-fiducia-ricerca.md (la ricerca) e
   docs/2026-10-13-11-41-54-l-aspetto-del-sito.md (il lavoro). In una riga: chi usa GlowUp deve sentirsi al sicuro,
   preso sul serio, e con voglia di fare una cosa piccola. Fondo chiaro e calmo, un solo colore intenso dove c'è da
   agire, una luce calda sotto la missione del giorno, forme arrotondate.
   Regole della skill design-taste-frontend (.claude/skills/taste-skill) rispettate qui: un solo accento, un sistema di
   angoli dichiarato (sotto, «Gli angoli»), niente bianco e nero puri, ombre tinte, tema scuro con gli stessi ruoli. */

/* Il carattere, tenuto nel progetto e non preso da Google Fonts: ogni visita manderebbe a Google l'indirizzo di chi usa
   l'app. Bricolage Grotesque, licenza SIL Open Font License (vendor/caratteri/OFL.txt), un file a peso variabile dal 200
   all'800 con la grandezza ottica: le lettere si stringono da sole nei titoli e si aprono nel testo piccolo. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("vendor/caratteri/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Carta e inchiostro. Il fondo è bianco appena caldo, non grigio: il grigio è il colore che chi è ansioso o giù di
     morale sceglie per descriversi (ruota dei colori di Manchester, 2010). Il testo è blu-nero, come l'inchiostro. */
  --carta: #fafaf7;
  --foglio: #fffffd;
  --inchiostro: #1b1d26;
  --grafite: #4b4f5c;   /* testo secondario: 8:1 sulla carta */
  --matita: #5d6170;    /* note piccole: 6:1 sulla carta */
  --filo: #e8e8e2;      /* il bordo dei fogli e i separatori: si vede appena */
  --bordo: #cfd0d6;     /* il contorno dei bottoni secondari */
  --bordo-campo: #7b7f8e; /* il contorno dei campi: 4:1 sul bianco, per vedere dove si scrive */

  /* La penna: l'unico colore intenso, solo dove c'è da agire (bottoni principali, collegamenti, la scelta fatta).
     Il blu è il preferito di quasi tutti, anche di chi è ansioso o giù (Manchester 2010; Hurlbert e Ling 2007);
     scuro abbastanza da non essere il blu chiaro degli ospedali. 8:1 sul bianco. */
  --penna: #2b3fc4;
  --penna-scura: #1f2e96;
  --penna-velo: #ebedfb;
  --su-penna: #fbfbff;

  /* L'evidenziatore: il fondo della sola missione del giorno. Il giallo è il colore dell'umore normale e quello verso
     cui ci si sente più attratti (Manchester 2010); tenue, perché non sia il giallo-arancio del semaforo. */
  --evidenziatore: #fff1c2;
  --su-evidenziatore: #1f2c8f;   /* il testo della missione: blu penna scuro, 10:1 sul giallo */
  --evidenziatore-nota: #5b4e1f; /* le righe piccole sul giallo: 7:1 */

  /* Gli stati che il progetto ha già scelto, con le loro ragioni nelle pagine. */
  --avviso-fondo: #fff8e3;
  --avviso-bordo: #e6d9a6;
  --avviso-testo: #5a4f2a;
  --ocra: #a87f45;
  --errore: #a3261e;

  /* Ombre tinte d'inchiostro, larghe e leggerissime: carta appoggiata, non scatole che galleggiano. */
  --ombra: 0 1px 2px rgb(27 29 38 / 0.04), 0 10px 28px -14px rgb(27 29 38 / 0.12);

  --carattere: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Gli angoli. Una regola sola, uguale ovunque: quello che si preme è una pillola; le righe di risposta, che possono
     andare a capo, sono morbide (16); i campi un po' meno (14); i fogli (20). Due casi nelle pagine, scritti lì: le
     tessere dei capi nella scheda (12, sono piccole) e l'angolo da cui «parla» una bolla della chat (6). Le forme
     arrotondate mettono meno in allarme degli spigoli (Bar e Neta, 2006-2007). */
  --raggio: 999px;
  --raggio-riga: 16px;
  --raggio-campo: 14px;
  --raggio-foglio: 20px;

  /* Il dito: 44 pixel è il minimo per un bersaglio, 48 per le righe da scegliere. */
  --tocco: 2.75rem;
  --colonna: 36rem;

  /* Il movimento risponde solo ai tocchi: niente animazioni che partono da sole. */
  --morbido: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light dark;
  accent-color: var(--penna);
}

/* Il tema scuro arriva da solo quando il telefono è in modalità scura: al buio è più riposante, con la luce si legge
   meglio sul chiaro (Piepenbrock e colleghi), quindi decide il telefono. Stessi ruoli, stessi contrasti.
   È la FONTE dei colori scuri: la pagina della chat ne ha una copia per la notte (`:root[data-notte]`, sotto), e la
   verifica confronta le due. Cambiando un valore qui, va cambiato anche lì. */
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #121318;
    --foglio: #1b1c22;
    --inchiostro: #ececef;
    --grafite: #b7bac5;
    --matita: #9c9fac;
    --filo: #2a2c34;
    --bordo: #3c3f4a;
    --bordo-campo: #767a88;
    --penna: #8e9cff;
    --penna-scura: #aab5ff;
    --penna-velo: #23264a;
    --su-penna: #10133a;
    --evidenziatore: #2a2717;
    --su-evidenziatore: #ffe7a3;
    --evidenziatore-nota: #d2c597;
    --avviso-fondo: #2a2615;
    --avviso-bordo: #4a4326;
    --avviso-testo: #eadfb4;
    --ocra: #c9a46a;
    --errore: #ff8f85;
    --ombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.5);
  }
}

/* La notte (14 ottobre 2026, docs/2026-10-14-14-48-31-le-notti-difficili.md). La ricerca sul sonno chiede alla chat, di notte,
   un'interfaccia poco stimolante (docs/ricerche/INSONNIA/cbti-glow-up.md, «Chat AI», «Forma della risposta»). Dalle 23:00 alle 5:59 sul
   telefono di lei la pagina della chat mette `data-notte` sull'elemento radice (chat.html, `eNotte` in src/stato-della-chat.ts)
   e questo blocco le dà il tema scuro anche se il telefono è in modalità chiara: stessi ruoli, stessi contrasti. Di giorno
   l'attributo non c'è e decide il telefono, come prima, qui sopra. Nessun'altra pagina lo mette.
   UNA SOLA FONTE DI VERITÀ: il blocco `prefers-color-scheme: dark` qui sopra. Questo ne ripete i valori, uno per uno, perché
   CSS non sa dire «questa media query OPPURE questo attributo» in un blocco solo, quindi le copie sono due. Chi cambia un colore
   scuro lo cambia in tutti e due i posti: strumenti/verifica-notte.ts confronta le due copie e diventa rossa se divergono.
   In più dice al browser che qui il colore è scuro (`color-scheme`): i campi, la barra di scorrimento e le selezioni seguono. */
:root[data-notte] {
  color-scheme: dark;
  --carta: #121318;
  --foglio: #1b1c22;
  --inchiostro: #ececef;
  --grafite: #b7bac5;
  --matita: #9c9fac;
  --filo: #2a2c34;
  --bordo: #3c3f4a;
  --bordo-campo: #767a88;
  --penna: #8e9cff;
  --penna-scura: #aab5ff;
  --penna-velo: #23264a;
  --su-penna: #10133a;
  --evidenziatore: #2a2717;
  --su-evidenziatore: #ffe7a3;
  --evidenziatore-nota: #d2c597;
  --avviso-fondo: #2a2615;
  --avviso-bordo: #4a4326;
  --avviso-testo: #eadfb4;
  --ocra: #c9a46a;
  --errore: #ff8f85;
  --ombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: var(--colonna);
  padding: 1.25rem clamp(1rem, 4vw, 1.5rem) 4.5rem;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--carattere);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Sul computer la colonna resta stretta (si legge meglio), ma la pagina respira di più in alto. */
@media (min-width: 48rem) {
  body { padding-top: 2.5rem; }
}

h1 {
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--inchiostro);
  margin: 2.75rem 0 .85rem;
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }

a { color: var(--penna); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s var(--morbido); }
a:hover { color: var(--penna-scura); text-decoration-thickness: 2px; }

strong { font-weight: 650; }
::selection { background: var(--evidenziatore); color: var(--su-evidenziatore); }
[hidden] { display: none !important; }

/* Il marchio in cima a ogni pagina. Non è un collegamento: a metà del questionario un tocco sul marchio porterebbe via la
   pagina con le risposte non ancora salvate. Dal 30 ottobre 2026 è il logo di Filippo (docs/2026-10-30-17-00-05-il-logo-e-la-favicon.md):
   il quadrato col mezzo sole e la scritta. La scritta è una maschera colorata con la penna, così nel tema scuro diventa azzurra
   come il resto; le misure vengono dal logo intero (alto 255, scritta 495×233, 63 di spazio dopo il quadrato). Il nome scritto
   resta per chi legge con la voce. Le regole del testo servono alla chat, che qui mette il nome che lui le ha dato. */
.marchio {
  --logo: 2.75rem;
  display: flex;
  align-items: center;
  gap: calc(var(--logo) * 63 / 255);
  margin: 0 0 2.25rem;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--inchiostro);
}
.logo-quadrato { display: block; width: var(--logo); height: var(--logo); flex: none; }
.logo-scritta {
  display: block; flex: none;
  width: calc(var(--logo) * 495 / 255); height: calc(var(--logo) * 233 / 255);
  background: var(--penna);
  -webkit-mask: url("icone/logo-scritta.png") no-repeat center / contain;
  mask: url("icone/logo-scritta.png") no-repeat center / contain;
}
.logo-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Il menu a tre linee (src/menu.ts, docs/2026-10-19-21-54-05): il bottone a sinistra del marchio, e un pannello che
   entra da sinistra. Sulle pagine senza menu il marchio resta com'era. */
.testata { display: flex; align-items: center; gap: .5rem; margin: 0 0 2.25rem; }
.testata .marchio { margin: 0; }
button.tre-linee {
  display: inline-grid; place-items: center;
  width: var(--tocco); padding: 0; margin-left: -.6rem;
  border-color: transparent; background: transparent;
}
button.tre-linee:hover { border-color: transparent; background: var(--penna-velo); }
dialog.menu {
  margin: 0; inset: 0 auto 0 0; width: min(20rem, 85vw); height: 100dvh; max-height: none; padding: 0;
  border: 0; border-right: 1px solid var(--filo); background: var(--foglio); color: var(--inchiostro); box-shadow: var(--ombra);
}
dialog.menu::backdrop { background: rgb(27 29 38 / 0.35); }
.menu-dentro { min-height: 100%; padding: 1rem .75rem; }
button.chiudi-menu { margin: 0 0 1rem; }
dialog.menu nav a {
  display: flex; align-items: center; min-height: var(--tocco); padding: .7rem 1rem; margin-bottom: .25rem;
  border-radius: var(--raggio-riga); color: var(--inchiostro); text-decoration: none; font-size: 1.0625rem; font-weight: 600;
}
dialog.menu nav a:hover { background: var(--penna-velo); }
dialog.menu nav a[aria-current="page"] { background: var(--penna-velo); color: var(--penna); }
/* «Accedi» e «Registrati», sotto le voci e solo per chi non ha ancora l'email: la prima in evidenza come un bottone
   principale, la seconda più piccola e nel colore del testo secondario. */
dialog.menu nav.entrate { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filo); }
dialog.menu nav a.evidenza { justify-content: center; background: var(--penna); color: var(--su-penna); }
dialog.menu nav a.evidenza:hover { background: var(--penna-scura); }
dialog.menu nav a.secondaria { justify-content: center; font-size: .9375rem; font-weight: 500; color: var(--grafite); }

/* Le note: quello che si legge dopo, in piccolo ma non minuscolo. */
.nota { font-size: .9375rem; line-height: 1.5; color: var(--grafite); }

/* --- I bottoni ------------------------------------------------------------------------------------------- */

button {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: var(--tocco);
  padding: .65rem 1.3rem;
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--foglio);
  color: var(--inchiostro);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s var(--morbido), border-color .2s var(--morbido), color .2s var(--morbido),
              transform .2s var(--morbido);
}
button:hover { border-color: var(--inchiostro); }
button:active { transform: scale(0.98); }
/* Il bottone che porta avanti: l'unico punto di colore pieno della schermata. */
button.principale { background: var(--penna); border-color: var(--penna); color: var(--su-penna); }
button.principale:hover { background: var(--penna-scura); border-color: var(--penna-scura); }
/* Scelto in un gruppo di bottoni (i numeri della revisione, l'area, l'aiuto): il bordo della penna e il suo velo. */
button.scelto { border-color: var(--penna); background: var(--penna-velo); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--penna); }
/* Il bottone che cancella per sempre (docs/2026-10-13-15-46-28, punto 7): il rosso dell'errore, e solo qui. Il testo
   è il colore della carta: 7:1 sul rosso scuro del tema chiaro, e scuro sul rosso chiaro del tema scuro. */
button.pericolo { background: var(--errore); border-color: var(--errore); color: var(--carta); }
button.pericolo:hover { border-color: var(--inchiostro); }
button:disabled { opacity: .5; cursor: default; transform: none; }

/* --- I campi --------------------------------------------------------------------------------------------- */

/* 16 pixel e non meno: sotto quella misura l'iPhone ingrandisce la pagina quando si tocca il campo. */
input[type="text"], input[type="email"], input[type="date"], input[type="time"], select, textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--inchiostro);
  background: var(--foglio);
  border: 1.5px solid var(--bordo-campo);
  border-radius: var(--raggio-campo);
  padding: .65rem .9rem;
  min-height: var(--tocco);
  max-width: 100%;
  transition: border-color .2s var(--morbido);
}
textarea { line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--matita); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--penna); }
/* Il campo che ha un errore: il bordo del colore dell'errore, e la frase che dice cosa manca subito sotto
   (docs/2026-10-13-15-46-28, punto 8). Resta rosso anche col cursore dentro, finché non cambia. */
input[aria-invalid="true"], input[aria-invalid="true"]:focus { border-color: var(--errore); }

/* Il campo per la foto: il bottone del browser prende l'aspetto del bottone principale. */
input[type="file"] { font: inherit; font-size: .9375rem; color: var(--grafite); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  min-height: var(--tocco);
  margin-right: .85rem;
  padding: .65rem 1.3rem;
  border: 1.5px solid var(--penna);
  border-radius: var(--raggio);
  background: var(--penna);
  color: var(--su-penna);
  cursor: pointer;
}
input[type="file"]:disabled::file-selector-button { opacity: .5; cursor: default; }

/* Una risposta da scegliere (questionario, e le domande «prima di tagliare» della scheda). Tutta la riga è il
   bersaglio, alta 48 pixel. La riga scelta prende il bordo della penna e il suo velo, come i bottoni scelti. */
label.opz {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3rem;
  padding: .65rem 1rem;
  margin-bottom: .5rem;
  background: var(--foglio);
  border: 1.5px solid var(--filo);
  border-radius: var(--raggio-riga);
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .2s var(--morbido), border-color .2s var(--morbido);
}
label.opz:hover { border-color: var(--bordo-campo); }
label.opz:has(input:checked) { border-color: var(--penna); background: var(--penna-velo); box-shadow: inset 0 0 0 1px var(--penna); }
label.opz input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; }
/* Il contorno passa dal pallino alla riga intera, ma solo dove il browser sa leggere :has(): altrimenti resta
   sul pallino, e non sparisce. */
@supports selector(:has(*)) {
  label.opz input:focus-visible { outline: none; }
  label.opz:has(input:focus-visible) { outline: 3px solid var(--penna); outline-offset: 2px; }
}

/* Una risposta di una lista corta a scelta multipla: un gettone che si accende, non una colonna di quadratini
   (docs/2026-10-13-15-46-28, punto 27; `comeGettoni` in src/domande.ts decide quando). Una pillola, come quello che si
   preme. Scelto, prende il velo e il bordo della penna (la regola di label.opz qui sopra) e un segno di spunta, perché la
   scelta non si legga solo dal colore. Il quadratino resta per la tastiera e per il lettore di schermo: si nasconde alla
   vista solo dove il browser sa leggere :has(), che è anche quello che accende il gettone. */
label.opz.gettone {
  display: inline-flex;
  min-height: var(--tocco);
  margin: 0 .4rem .5rem 0;
  padding: .55rem 1.1rem;
  border-radius: var(--raggio);
  vertical-align: top;
}
@supports selector(:has(*)) {
  label.opz.gettone { position: relative; gap: .45rem; }
  label.opz.gettone input { position: absolute; opacity: 0; pointer-events: none; }
  label.opz.gettone:has(input:checked)::before { content: "✓"; font-weight: 700; color: var(--penna); }
}

/* Una fila di bottoni. */
.azioni { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Dove si trova chi usa la tastiera: un contorno della penna, staccato dal bordo, su tutto quello che si attiva. */
:focus-visible { outline: 3px solid var(--penna); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* --- La carta -------------------------------------------------------------------------------------------- */

/* Un foglio: la superficie su cui sta un gruppo di cose. Un filo appena visibile e un'ombra larga e leggera. */
.foglio {
  background: var(--foglio);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-foglio);
  box-shadow: var(--ombra);
  padding: 1.25rem;
}

/* Il consenso alla chat e alle caselle dove la persona racconta di sé (docs/2026-10-29-19-19-42-le-parole-libere-sotto-consenso.md, src/consenso.ts):
   la schermata della chat, il blocco al posto di una casella nel questionario e nella pagina Missione, e la riga gentile dopo il «No, grazie».
   Il «Sì» e il «No, grazie» sono due bottoni uguali. */
.consenso p { margin: 0 0 .7rem; line-height: 1.55; }
.consenso .azioni { margin-top: 1rem; }
/* Dentro la missione il blocco sta in un riquadro suo: senza, i suoi due bottoni stanno subito sopra quelli della missione
   («Scelgo questa», «Salto») e sembrano quattro risposte alla stessa domanda. */
.missione .consenso { border: 1px solid var(--bordo-campo); border-radius: var(--raggio-foglio); padding: 1rem; margin: .5rem 0 1rem; }

/* La missione del giorno, quella del percorso (`.missione`) e gli esempi della home: il foglio sotto l'evidenziatore,
   con il testo in blu penna. È l'unico posto del sito dove c'è il giallo. */
.missione, .foglio-evidenziato {
  background: var(--evidenziatore);
  color: var(--inchiostro);
  border: 1px solid transparent; /* con l'alto contrasto di Windows diventa un bordo vero */
  border-radius: var(--raggio-foglio);
  padding: 1.35rem 1.25rem;
}

/* Il look disegnato, sulla scheda e in chat: tre tessere in fila anche sul telefono, ognuna un quadrato con il capo
   dentro. La tessera resta chiara anche nel tema scuro, come un campione di stoffa: i colori dei capi si giudicano su
   un grigio senza tinta, né caldo né freddo. Per questo il suo testo ha colori fissi, non quelli del tema. */
.tessere { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .4rem; }
.tessera { margin: 0; background: #f2f2f1; color: #1b1d26; border-radius: 12px; padding: .35rem .35rem .5rem; }
.tessera svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.tessera figcaption { font-size: .8125rem; line-height: 1.25; margin-top: .2rem; }
.tessera .tinta { display: block; color: #4b4f5c; font-size: .75rem; margin-top: .1rem; }

/* --- Il calendario delle missioni (31 ottobre 2026, docs/2026-10-30-19-47-17-il-calendario-delle-missioni.md) ------------------------ */

/* Il testo che solo i lettori di schermo leggono: il nome dell'elenco del passato, «Togli» sull'icona del cestino. */
.solo-voce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* La griglia in cima alla pagina Missione: il mese, sette caselle da oggi, e sotto «Prima», «Torna a oggi», «Avanti». Ogni casella su due
   righe, abbreviazione e numero. Il segno piccolo, uguale per tutte, dice solo che quel giorno ha una missione sua: nessun colore che
   giudichi, nessuna casella che si distingua per com'e' andata. Oggi ha il bordo della penna. */
.griglia { margin: 0 0 1.25rem; }
.griglia-mese { margin: 0 0 .4rem; font-size: .875rem; font-weight: 650; color: var(--grafite); }
.griglia-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
/* La fila per scegliere un giorno («Quando la fai?», «Spostala», la chat): le stesse sette caselle, un po' piu' strette perche' stanno dentro
   un foglio. Le parole «oggi» e «domani» sono piu' piccole, per starci anche in inglese. */
.fila-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; margin: .4rem 0 .5rem; }
.fila-giorni button.casella .abb { font-size: .6875rem; }
.fila-comandi { display: flex; justify-content: flex-end; margin: 0 0 .5rem; }
button.casella {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 3.5rem; padding: .35rem .1rem .6rem;
  border-radius: var(--raggio-riga);
  line-height: 1.1; overflow: hidden;
}
button.casella .abb { font-size: .75rem; font-weight: 500; color: var(--grafite); max-width: 100%; overflow-wrap: anywhere; }
button.casella .num { font-size: 1.0625rem; font-weight: 650; }
button.casella.oggi { border-color: var(--penna); }
button.casella.oggi .abb { color: var(--penna); font-weight: 650; }
.segno { display: inline-block; flex: none; width: .4rem; height: .4rem; border-radius: var(--raggio); background: var(--penna); }
button.casella .segno { position: absolute; bottom: .3rem; inset-inline: 0; margin-inline: auto; }
.griglia-comandi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.griglia-comandi .avanti { margin-inline-start: auto; }
button.piccolo { min-height: var(--tocco); padding: .45rem 1rem; font-size: .9375rem; }

/* Un giorno che viene: il giorno per esteso sopra la sua missione (o sopra la casella per scriverne una sua). */
.giorno-titolo { margin: 0 0 .6rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.giorno-vuoto .domanda { margin: 0 0 .6rem; font-weight: 600; color: var(--inchiostro); }
.giorno-vuoto .nota.bloccata { margin: 0 0 .6rem; }

/* La missione di oggi: il cestino e' un'icona piccola nell'angolo, lontana da «Fatta» (che sta in fondo, nei bottoni). */
.missione-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.missione-testa .testo { flex: 1 1 auto; min-width: 0; }
button.togli {
  flex: none; display: inline-grid; place-items: center;
  width: var(--tocco); min-height: var(--tocco); padding: 0; margin: -.55rem -.6rem 0 0;
  border-color: transparent; background: transparent; color: var(--evidenziatore-nota);
}
button.togli:hover { border-color: var(--evidenziatore-nota); }

/* La riga degli ostacoli sotto «Cambiala» e «Più piccola»: una riga ferma, che si tocca per aprire i motivi. Come le voci piccole in fondo
   alla pagina: si trova, ma non chiede attenzione. */
.ostacolo { margin-top: 1rem; }
button.ostacolo-riga {
  background: none; border-color: transparent; padding-inline: 0; font-weight: 400; text-align: left; border-radius: var(--raggio-riga);
  color: var(--evidenziatore-nota); text-decoration: underline; text-underline-offset: .2em;
}
button.ostacolo-riga:hover { color: var(--inchiostro); border-color: transparent; }
.ostacolo .azioni { margin-top: .6rem; }

/* La fila dei giorni sotto una missione («Spostala», «Rifalla»), la domanda dei due sullo stesso giorno, la missione scritta che arriva dopo. */
.sposta, .scritta-dopo { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--bordo); }
.sposta .domanda { margin: 0 0 .25rem; }
.stesso-giorno { margin-top: .75rem; }
.stesso-giorno .nota, .scritta-dopo .nota { margin: 0 0 .6rem; font-weight: 600; }

/* Il cestino: «Tolta.» con «Rimettila» al posto della missione, e la riga facoltativa «Non mi sembrava sicura». */
.tolta-missione { margin: 0 0 .9rem; padding: .9rem 1.1rem; background: var(--foglio); border: 1px solid var(--filo); border-radius: var(--raggio-foglio); }
.tolta-missione .nota { margin: 0 0 .5rem; }
.tolta-missione button { min-height: var(--tocco); padding: .35rem .95rem; font-size: .9375rem; }

/* Il passato, dietro «Prima»: un elenco dei soli giorni con una missione sua, separato dalla griglia da una linea e senza intestazione
   visibile. Ogni riga ha il giorno e lo stesso segno piccolo; il titolo c'e' solo aprendola. */
.passato { margin: 0 0 1rem; padding-top: .4rem; border-top: 1px solid var(--filo); }
.passato ul { list-style: none; margin: 0; padding: 0; }
.passato li { border-bottom: 1px solid var(--filo); }
button.giorno-passato {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
  min-height: var(--tocco); padding: .5rem .1rem; border: 0; border-radius: 0; background: none; font-weight: 500; text-align: left;
}
.passato-dentro { padding: 0 .1rem 1rem; }
.passato-missione { margin: 0 0 1rem; }
.passato-missione .testo-passato { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; }
.passato-missione .nota { margin: 0 0 .5rem; }

/* Chi ha chiesto al sistema meno movimento non vede nemmeno le piccole transizioni. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  button:active { transform: none; }
}

/* Con i colori forzati di Windows (alto contrasto) i bordi restano, e una scelta fatta si riconosce dal colore di
   sistema per la selezione. */
@media (forced-colors: active) {
  button, .foglio, .missione, .foglio-evidenziato { border: 1px solid CanvasText; }
  button.scelto { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  /* Il segno del calendario e' uno sfondo, che i colori forzati toglierebbero: resta del colore del testo. */
  .segno { forced-color-adjust: none; background: CanvasText; }
  label.opz:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}