/* ============================================================================
   Calendario delle sessioni — foglio di stile unico.

   Tre pelli selezionabili, ognuna un mondo completo (fondo, materiale,
   tipografia, forma, resa dell'oro), applicate con [data-pelle] su <html>:

     grimorio   nero inchiostro e oro, sera tardi, telefono in mano
     tabellone  foglio bianco appeso su un tavolo da gioco verde
     asciutto   strumento neutro, colore solo dove porta informazione

   Dentro ogni pelle le due campagne restano distinguibili con la propria
   coppia di accenti, applicata con [data-tema] su <body>.

   Tutti i valori di colore sono stati verificati per contrasto WCAG:
   testo normale >= 4.5:1, testo grande e icone >= 3:1.
   ========================================================================== */

/* ---------- Token comuni: scala, ritmo, tempi ---------- */

:root {
    --testo-xs: 0.78rem;
    --testo-s: 0.875rem;
    --testo-m: 1rem;
    --testo-l: 1.125rem;
    --testo-xl: 1.375rem;
    --testo-xxl: 1.75rem;

    --spazio-1: 0.25rem;
    --spazio-2: 0.5rem;
    --spazio-3: 0.75rem;
    --spazio-4: 1rem;
    --spazio-5: 1.5rem;
    --spazio-6: 2rem;

    --tocco: 2.75rem;

    /* uscita esponenziale: la fine del movimento è quasi impercettibile */
    --curva: cubic-bezier(0.22, 1, 0.36, 1);
    --tempo-breve: 140ms;
    --tempo-medio: 220ms;
    --tempo-lungo: 420ms;

    /* scala z semantica: nessun 999 */
    --z-dettaglio: 10;
    --z-pannello: 30;
    --z-finestra: 40;
}

/* ---------- Pelle: grimorio (predefinita) ---------- */

:root,
[data-pelle="grimorio"] {
    --fondo: #0a0c11;
    --lastra: #161920;
    --lastra-alta: #20242c;
    --bordo: #333842;
    --bordo-forte: #4b5160;
    --inchiostro: #e8ebf1;
    --inchiostro-tenue: #a6abb5;
    --su-fondo: #e8ebf1;
    --su-fondo-tenue: #a6abb5;

    --si: #4cb86a;
    --forse: #ab8be3;
    --no: #e36364;
    --oro: #e8b543;
    --oro-inchiostro: #2e1a01;
    --mix-stato: 30%;
    --mix-oro-tenue: 28%;

    --raggio: 10px;
    --raggio-s: 7px;
    --gap-griglia: 5px;
    --spessore-rete: 0px;
    --ombra-lastra: 0 14px 32px -20px rgb(0 0 0 / 0.9);
    --ombra-oro: 0 6px 20px -8px rgb(232 181 67 / 0.45);
    --ombra-sospesa: 0 18px 40px -20px rgb(0 0 0 / 0.7);
    --velo: rgb(5 7 10 / 0.72);
    --luce-alta: inset 0 1px 0 rgb(255 255 255 / 0.045);
    --raggio-dock: 50%;
    --maiuscoletto-titolo: normal;

    --famiglia-titolo: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --famiglia-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --famiglia-cifre: var(--famiglia-testo);
    --peso-titolo: 600;
    --peso-cifre: 600;
    --tracking-titolo: 0.005em;
    --maiuscolo-titolo: none;

    color-scheme: dark;
}

[data-pelle="grimorio"] [data-tema="kumarian"] {
    --accento: #7acf7e;
    --alone: rgb(122 207 126 / 0.10);
}

[data-pelle="grimorio"] [data-tema="numeria"] {
    --accento: #73b6fa;
    --alone: rgb(115 182 250 / 0.10);
}

[data-pelle="grimorio"] [data-tema="errore"] {
    --accento: #e36364;
    --alone: rgb(227 99 100 / 0.10);
}

[data-pelle="grimorio"] [data-tema="approdo"] {
    --accento: #e8b543;
    --alone: rgb(232 181 67 / 0.08);
}

/* ---------- Pelle: tabellone ---------- */

[data-pelle="tabellone"] {
    --fondo: #325642;
    --lastra: #f1f4f6;
    --lastra-alta: #ffffff;
    --bordo: #cdd1d6;
    --bordo-forte: #9aa1aa;
    --inchiostro: #222933;
    --inchiostro-tenue: #5b6470;
    --su-fondo: #eff8f2;
    --su-fondo-tenue: #c9d9cf;

    --si: #246e3a;
    --forse: #6d5398;
    --no: #a43b38;
    --oro: #edb24d;
    --oro-inchiostro: #3b220d;
    --mix-stato: 16%;
    --mix-oro-tenue: 26%;

    --raggio: 4px;
    --raggio-s: 3px;
    --gap-griglia: 6px;
    --spessore-rete: 0px;
    --ombra-lastra: 0 18px 34px -22px rgb(9 24 15 / 0.75);
    --ombra-oro: 0 8px 18px -10px rgb(59 34 13 / 0.5);
    --ombra-sospesa: 0 18px 34px -18px rgb(9 24 15 / 0.55);
    --velo: rgb(10 28 18 / 0.7);
    --luce-alta: none;
    --raggio-dock: var(--raggio);
    --maiuscoletto-titolo: normal;

    --famiglia-titolo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --famiglia-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --famiglia-cifre: var(--famiglia-testo);
    --peso-titolo: 800;
    --peso-cifre: 700;
    --tracking-titolo: 0.04em;
    --maiuscolo-titolo: uppercase;

    color-scheme: light;
}

[data-pelle="tabellone"] [data-tema="kumarian"] {
    --accento: #206133;
    --alone: rgb(0 0 0 / 0.18);
}

[data-pelle="tabellone"] [data-tema="numeria"] {
    --accento: #085491;
    --alone: rgb(0 0 0 / 0.18);
}

[data-pelle="tabellone"] [data-tema="errore"] {
    --accento: #a43b38;
    --alone: rgb(0 0 0 / 0.18);
}

[data-pelle="tabellone"] [data-tema="approdo"] {
    --accento: #206133;
    --alone: rgb(0 0 0 / 0.18);
}

/* ---------- Pelle: asciutto ---------- */

[data-pelle="asciutto"] {
    --fondo: #f7f7f7;
    --lastra: #ffffff;
    --lastra-alta: #fafafa;
    --bordo: #cfcfcf;
    --bordo-forte: #9c9c9c;
    --inchiostro: #1b1b1b;
    --inchiostro-tenue: #585858;
    --su-fondo: #1b1b1b;
    --su-fondo-tenue: #585858;

    --si: #397247;
    --forse: #5f5f84;
    --no: #984742;
    --oro: #f6c330;
    --oro-inchiostro: #2e1e0a;
    --mix-stato: 12%;
    --mix-oro-tenue: 30%;

    --raggio: 2px;
    --raggio-s: 2px;
    --gap-griglia: 1px;
    --spessore-rete: 1px;
    --ombra-lastra: none;
    --ombra-oro: none;
    --ombra-sospesa: none;
    --velo: rgb(30 30 30 / 0.62);
    --luce-alta: none;
    --raggio-dock: var(--raggio);
    /* Nell'asciutto il titolo non può essere il sans di sistema lasciato nudo:
       il maiuscoletto spaziato è il trattamento proprio di questo mondo, preso
       dal suo stesso registro da strumento, senza travestimenti monospaziati. */
    --maiuscoletto-titolo: all-small-caps;

    --famiglia-titolo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --famiglia-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --famiglia-cifre: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --peso-titolo: 600;
    --peso-cifre: 500;
    --tracking-titolo: 0.14em;
    --maiuscolo-titolo: none;

    color-scheme: light;
}

[data-pelle="asciutto"] [data-tema="kumarian"] {
    --accento: #2b6339;
    --alone: transparent;
}

[data-pelle="asciutto"] [data-tema="numeria"] {
    --accento: #23588a;
    --alone: transparent;
}

[data-pelle="asciutto"] [data-tema="errore"] {
    --accento: #984742;
    --alone: transparent;
}

[data-pelle="asciutto"] [data-tema="approdo"] {
    --accento: #1b1b1b;
    --alone: transparent;
}

/* ---------- Impianto ---------- */

* {
    box-sizing: border-box;
}

/* Le classi qui sotto impostano display: flex/grid, che batte la regola del
   browser per [hidden]. Senza questa riga un elemento nascosto via JS resta
   visibile: è già costato il pulsante di chiusura del cancello d'ingresso. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: var(--spazio-4) var(--spazio-4) var(--spazio-6);
    background:
        radial-gradient(130% 90% at 50% 0%, var(--alone), transparent 62%),
        var(--fondo);
    color: var(--su-fondo);
    font-family: var(--famiglia-testo);
    font-size: var(--testo-m);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
}

.impianto {
    max-width: 46rem;
    margin: 0 auto;
}

/* Il tabellone monta il calendario su un foglio appoggiato al tavolo. */
/* Il panno del tavolo: due trame incrociate a bassissimo contrasto, generate
   dai gradienti (nessun file da caricare via FTP). Il foglio ci appoggia sopra
   con un bordo tagliato e la propria ombra. */
[data-pelle="tabellone"] body {
    background:
        repeating-linear-gradient(45deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.045) 0 1px, transparent 1px 4px),
        radial-gradient(130% 90% at 50% 0%, var(--alone), transparent 62%),
        var(--fondo);
}

[data-pelle="tabellone"] .impianto {
    background: var(--lastra);
    border: 1px solid color-mix(in oklab, var(--bordo-forte) 55%, transparent);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-lastra);
    padding: var(--spazio-5) var(--spazio-4) var(--spazio-5);
    color: var(--inchiostro);
}

[data-pelle="tabellone"] .impianto {
    --su-fondo: var(--inchiostro);
    --su-fondo-tenue: var(--inchiostro-tenue);
}

/* Sul foglio del tabellone il pannello non può essere del colore del foglio. */
[data-pelle="tabellone"] .dettaglio,
[data-pelle="tabellone"] .pelli,
[data-pelle="tabellone"] .finestra,
[data-pelle="tabellone"] .finestra__testa {
    background: var(--lastra-alta);
}

/* ---------- Testata ---------- */

.testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
    flex-wrap: wrap;
    margin-bottom: var(--spazio-5);
}

/* Identità e strumenti viaggiano insieme: restano appaiati a destra anche
   quando il titolo va a capo, ed è il riquadro a cui si ancora il pannello
   delle pelli. */
.testata__strumenti {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
    /* tiene il gruppo a destra anche quando il titolo si prende tutta la riga */
    margin-left: auto;
}

.testata h1 {
    margin: 0;
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-xxl);
    font-weight: var(--peso-titolo);
    letter-spacing: var(--tracking-titolo);
    text-transform: var(--maiuscolo-titolo);
    font-variant-caps: var(--maiuscoletto-titolo);
    text-wrap: balance;
    color: var(--accento);
}

/* Il filo d'oro sotto la testata è la firma del grimorio. */
[data-pelle="grimorio"] .testata {
    padding-bottom: var(--spazio-4);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in oklab, var(--oro) 70%, transparent) 18%,
        color-mix(in oklab, var(--oro) 70%, transparent) 82%,
        transparent 100%
    ) 1;
}

[data-pelle="tabellone"] .testata {
    padding-bottom: var(--spazio-3);
    border-bottom: 2px solid var(--accento);
}

[data-pelle="asciutto"] .testata {
    padding-bottom: var(--spazio-3);
    border-bottom: 1px solid var(--bordo);
}

/* ---------- Identità: chi sono su questo dispositivo ---------- */

.identita {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-2);
    min-height: var(--tocco);
    padding: var(--spazio-1) var(--spazio-3) var(--spazio-1) var(--spazio-1);
    background: var(--lastra);
    color: var(--inchiostro);
    border: 1px solid var(--bordo);
    border-radius: calc(var(--tocco) / 2);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                background-color var(--tempo-breve) var(--curva);
}

.identita:hover,
.identita:focus-visible {
    border-color: var(--accento);
}

.identita:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.identita__sigillo {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accento) 26%, var(--lastra-alta));
    border: 1px solid color-mix(in oklab, var(--accento) 55%, transparent);
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-m);
    font-weight: 700;
    line-height: 1;
    color: var(--inchiostro);
}

.identita__nome {
    font-weight: 600;
}

/* Il segno al posto della parola «cambia»: la pillola porta già il nome, e il
   nome accessibile del pulsante dice per intero che cosa succede a premerlo. */
.identita__cambia {
    display: grid;
    place-items: center;
    color: var(--inchiostro-tenue);
    transition: color var(--tempo-breve) var(--curva);
}

.identita__cambia .icona {
    width: 1.05rem;
    height: 1.05rem;
}

.identita:hover .identita__cambia,
.identita:focus-visible .identita__cambia {
    color: var(--accento);
}

/* ---------- Navigazione tra i mesi ---------- */

.mesi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-2);
    margin-bottom: var(--spazio-3);
}

.mesi__etichetta {
    margin: 0;
    font-size: var(--testo-l);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

.mesi__freccia {
    display: grid;
    place-items: center;
    width: var(--tocco);
    height: var(--tocco);
    flex: none;
    border-radius: var(--raggio);
    border: 1px solid var(--bordo);
    background: var(--lastra);
    color: var(--inchiostro);
    text-decoration: none;
    transition: border-color var(--tempo-breve) var(--curva),
                color var(--tempo-breve) var(--curva);
}

.mesi__freccia:hover,
.mesi__freccia:focus-visible {
    border-color: var(--accento);
    color: var(--accento);
}

.mesi__freccia:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.icona {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Calendario ---------- */

/* Il calendario non esiste finché non si è detto chi si è: l'attributo è
   scritto prima della prima pittura, così non lampeggia. */
[data-scelta="attesa"] .calendario {
    display: none;
}

.calendario[hidden] {
    display: none;
}

.settimana,
.griglia {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--gap-griglia);
}

.settimana {
    margin-bottom: var(--gap-griglia);
    font-size: var(--testo-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    text-align: center;
}

[data-pelle="grimorio"] .settimana {
    color: var(--su-fondo-tenue);
}

/* Nell'asciutto le celle condividono le righe: la griglia è una tabella. */
[data-pelle="asciutto"] .griglia {
    background: var(--bordo);
    border: 1px solid var(--bordo);
}

.cella {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 4.25rem;
    padding: var(--spazio-1);
    background: var(--lastra-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--inchiostro);
    font: inherit;
    cursor: pointer;
    transition: transform var(--tempo-breve) var(--curva),
                border-color var(--tempo-breve) var(--curva),
                background-color var(--tempo-breve) var(--curva);
    box-shadow: var(--luce-alta);
}

[data-pelle="asciutto"] .cella {
    border: none;
    border-radius: 0;
}

.cella--inerte {
    cursor: default;
}

.cella[data-nel-mese="0"] {
    opacity: 0.34;
}

/* Nell'asciutto la rete a 1px traspare sotto le celle trasparenti e i giorni
   fuori mese diventerebbero blocchi grigi più pesanti di quelli del mese. */
[data-pelle="asciutto"] .cella[data-nel-mese="0"] {
    opacity: 1;
    background: color-mix(in oklab, var(--bordo) 22%, var(--lastra));
    color: var(--inchiostro-tenue);
}

.cella__giorno {
    font-family: var(--famiglia-cifre);
    font-size: var(--testo-xl);
    font-weight: var(--peso-cifre);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cella__mio {
    display: grid;
    place-items: center;
    height: 1.15rem;
}

.cella__mio .icona {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 2.25;
}

/* Il gruppo non è un numero ma un elenco. Tanti tratti quante le persone, in
   ordine fisso — prima i sì, poi i forse, poi i no, e in fondo il vuoto di chi
   tace — così a portare l'informazione è il punto in cui la barra si ferma, non
   la tinta: si legge anche in bianco e nero e anche di sbieco. Un rapporto
   «3 / 5» non sapeva distinguere due no da due silenzi, che è la differenza fra
   un giorno morto e un giorno a un messaggio di distanza. */
.cella__gruppo {
    position: relative;
    flex: none;
    width: 82%;
    /* 5px e non 4: il tratto «no» è un contorno, e sotto i 4px i suoi due
       filetti si toccano e tornano a leggersi come pieno. */
    height: 5px;
    background-color: color-mix(in oklab, var(--bordo-forte) 45%, transparent);
    background-image: var(--tratti-gruppo);
    /* La tacca di 1px fra un tratto e l'altro è ciò che rende la barra un
       gruppo e non una percentuale: si contano le persone. È una maschera e non
       uno strato di fondo perché il buco deve lasciar vedere la casella, che
       cambia colore con la risposta di chi guarda. */
    -webkit-mask-image: var(--tacche-gruppo);
    mask-image: var(--tacche-gruppo);
    /* Finché nessuno ha risposto la barra non ha niente da dire, e trentadue
       caselle su quarantadue sono in quel caso: una traccia grigia ripetuta
       trentadue volte è la cosa più presente della griglia e significa niente.
       Sparisce come sulla casella d'oro e per la stessa ragione, e come lì lo
       spazio resta in piedi perché la casella non cambi altezza quando qualcuno
       finalmente parla. */
    opacity: var(--ha-voce, 1);
}

/* Chi c'è è pieno, chi non c'è è un contorno vuoto, chi tace non è disegnato.
   Prima i tre stati si distinguevano per la sola tinta, e fra sì e no correvano
   sei livelli di luminosità su duecentocinquantacinque: in bianco e nero, o di
   sbieco, o su un telefono al sole, era una barra sola. Il pieno contro il vuoto
   invece regge in qualunque condizione. Sì e forse restano distinti dal solo
   colore ed è voluto: sono entrambi «può venire», e la distinzione che conta è
   quella fra chi può e chi no. */
.cella__gruppo,
.pastiglia--gruppo {
    --tratti-gruppo: linear-gradient(
        to right,
        var(--si) 0 var(--fino-si),
        var(--forse) var(--fino-si) var(--fino-forse),
        transparent var(--fino-forse) 100%
    );
    --tacche-gruppo: repeating-linear-gradient(
        to right,
        #000 0 calc(100% / var(--quanti) - 1px),
        transparent calc(100% / var(--quanti) - 1px) calc(100% / var(--quanti))
    );
}

/* Il contorno dei «no» sta in un solo strato steso da una soglia all'altra: le
   tacche del padre lo tagliano in tanti riquadri quante le persone, perché la
   maschera vale anche per ciò che l'elemento contiene. Senza --ha-no, quando
   nessuno dice no lo strato resta largo zero ma i suoi due lati verticali si
   vedono lo stesso: due pixel di rosso per una persona che non esiste. */
.cella__gruppo::after,
.pastiglia--gruppo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fino-forse);
    right: calc(100% - var(--fino-no));
    box-shadow: inset 0 0 0 1px var(--no);
    opacity: var(--ha-no, 1);
}

/* Sulla casella d'oro la barra non ha niente da riassumere: hanno detto sì
   tutti. Toglierla lascia al giorno buono l'unico campo pulito della griglia,
   così l'oro guadagna unicità invece di spartirla. Resta in piedi lo spazio,
   perché una casella non deve cambiare altezza mentre qualcuno risponde. */
.cella[data-evidenza="oro"] .cella__gruppo {
    visibility: hidden;
}

/* Oggi: un anello, non un colore, così non compete con gli stati. */
.cella[data-oggi="1"]::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid var(--accento);
    border-radius: inherit;
    pointer-events: none;
}

[data-pelle="asciutto"] .cella[data-oggi="1"]::after {
    inset: 0;
    border-width: 2px;
}

/* Il mio stato tinge la cella; l'icona lo ripete senza affidarsi al colore. */
.cella[data-stato="si"] {
    background: color-mix(in oklab, var(--si) var(--mix-stato), var(--lastra-alta));
    border-color: var(--si);
}

.cella[data-stato="forse"] {
    background: color-mix(in oklab, var(--forse) var(--mix-stato), var(--lastra-alta));
    border-color: var(--forse);
}

.cella[data-stato="no"] {
    background: color-mix(in oklab, var(--no) var(--mix-stato), var(--lastra-alta));
    border-color: var(--no);
}

.cella[data-stato="si"] .cella__mio { color: var(--si); }
.cella[data-stato="forse"] .cella__mio { color: var(--forse); }
.cella[data-stato="no"] .cella__mio { color: var(--no); }

/* Sul fondo scuro il segno del proprio stato si legge meglio in inchiostro che
   nel colore dello stato. L'esclusione dell'oro non è cosmetica: senza di essa
   questa regola (più specifica) vincerebbe su quella dell'oro e lascerebbe un
   segno chiarissimo sul campo dorato, cioè illeggibile proprio sulla casella
   per cui esiste il prodotto. */
[data-pelle="grimorio"] .cella[data-stato="si"]:not([data-evidenza="oro"]) .cella__mio,
[data-pelle="grimorio"] .cella[data-stato="forse"]:not([data-evidenza="oro"]) .cella__mio,
[data-pelle="grimorio"] .cella[data-stato="no"]:not([data-evidenza="oro"]) .cella__mio {
    color: var(--inchiostro);
}

/* Evidenziazione di gruppo: l'oro è il momento del prodotto. */
/* La trama diagonale è ciò che distingue «tutti hanno risposto» dall'oro pieno
   anche senza colore: il rapporto non basta, perché 3 / 5 può essere anche un
   giorno a cui metà del gruppo non ha ancora risposto. */
.cella[data-evidenza="tenue"] {
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in oklab, var(--oro) 45%, transparent) 0 2px,
            transparent 2px 6px
        ),
        color-mix(in oklab, var(--oro) var(--mix-oro-tenue), var(--lastra-alta));
    border-color: color-mix(in oklab, var(--oro) 60%, transparent);
}

.cella[data-evidenza="oro"] {
    background: var(--oro);
    border-color: var(--oro);
    color: var(--oro-inchiostro);
    box-shadow: var(--ombra-oro);
}

.cella[data-evidenza="oro"] .cella__mio {
    color: var(--oro-inchiostro);
}

.cella[data-evidenza="oro"]::after {
    border-color: var(--oro-inchiostro);
}

[data-pelle="asciutto"] .cella[data-evidenza="oro"] {
    box-shadow: inset 0 0 0 1px var(--oro-inchiostro);
}

/* L'unico momento animato: l'oro che si accende quando il gruppo è al completo. */
@keyframes accensione {
    from {
        clip-path: circle(0% at 50% 60%);
    }
    to {
        clip-path: circle(150% at 50% 60%);
    }
}

.cella--accesa {
    animation: accensione var(--tempo-lungo) var(--curva);
}

.cella:not(.cella--inerte):hover {
    transform: translateY(-2px);
    border-color: var(--accento);
}

.cella:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
    z-index: 1;
}

.cella--scelta {
    box-shadow: inset 0 0 0 2px var(--accento), var(--luce-alta);
}

/* ---------- Dettaglio del giorno ---------- */

.dettaglio {
    position: relative;
    margin-top: var(--spazio-4);
    background: var(--lastra);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--spazio-3) var(--spazio-4);
    color: var(--inchiostro);
}

/* Il pannello si chiude: leggere chi c'è è una cosa che si fa quando serve, e
   sul telefono il riquadro ancorato è il pezzo di schermo che costa di più. */
.dettaglio__chiudi {
    position: absolute;
    top: var(--spazio-2);
    right: var(--spazio-2);
    display: grid;
    place-items: center;
    width: var(--tocco);
    height: var(--tocco);
    padding: 0;
    border: none;
    border-radius: var(--raggio-s);
    background: none;
    color: var(--inchiostro-tenue);
    cursor: pointer;
    transition: color var(--tempo-breve) var(--curva);
}

.dettaglio__chiudi:hover,
.dettaglio__chiudi:focus-visible {
    color: var(--accento);
}

.dettaglio__chiudi:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.dettaglio__chiudi .icona {
    width: 1.1rem;
    height: 1.1rem;
}

.dettaglio__data {
    margin: 0 0 var(--spazio-3);
    /* la data non passa sotto la chiusura */
    padding-right: var(--tocco);
    font-size: var(--testo-l);
    font-weight: 600;
}

.dettaglio__data span {
    font-weight: 400;
    color: var(--inchiostro-tenue);
}

.dettaglio__righe {
    margin: 0;
    display: grid;
    gap: var(--spazio-2);
}

.dettaglio__vuoto {
    margin: 0;
    font-size: var(--testo-s);
    color: var(--inchiostro-tenue);
}

.dettaglio__riga {
    margin: 0;
    display: grid;
    grid-template-columns: 1.5rem 8.5rem 1fr;
    align-items: baseline;
    gap: var(--spazio-2);
    font-size: var(--testo-s);
}

.dettaglio__riga dt {
    display: contents;
    color: var(--inchiostro-tenue);
}

.dettaglio__segno {
    justify-self: center;
    display: grid;
    place-items: center;
}

.dettaglio__segno .icona {
    width: 1rem;
    height: 1rem;
}

.dettaglio__riga dd {
    margin: 0;
    color: var(--inchiostro);
}

.dettaglio__riga--vuota dd {
    color: var(--inchiostro-tenue);
}

.dettaglio__si .dettaglio__segno { color: var(--si); }
.dettaglio__forse .dettaglio__segno { color: var(--forse); }
.dettaglio__no .dettaglio__segno { color: var(--no); }

/* ---------- La mia risposta: i tre pulsanti sotto la casella armata ---------- */

/* Compaiono solo dove il tocco ha puntato un giorno: col mouse il ciclo sulla
   casella basta e il pannello resta di sola lettura. */
.risposta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spazio-2);
    margin-top: var(--spazio-3);
    padding-top: var(--spazio-3);
    border-top: 1px solid var(--bordo);
}

.risposta__scelta {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--spazio-1);
    min-height: var(--tocco);
    padding: var(--spazio-2) var(--spazio-1);
    background: var(--lastra-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--inchiostro);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                background-color var(--tempo-breve) var(--curva);
}

/* Ogni pulsante porta la tinta dello stato che dichiara, non l'accento: l'accento
   non ha mai significato di disponibilità. */
.risposta__scelta[data-stato="si"] { --tinta: var(--si); }
.risposta__scelta[data-stato="forse"] { --tinta: var(--forse); }
.risposta__scelta[data-stato="no"] { --tinta: var(--no); }

.risposta__scelta .icona {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--tinta);
}

/* Il testo va a capo e l'altezza di due righe è riservata sempre: «Tolgo il mio
   sì» non sta su una riga sola in un terzo di un telefono da 320px, e senza lo
   spazio già in piedi il gruppo dei pulsanti crescerebbe di una riga al primo
   tocco — cioè il pannello si alzerebbe sotto il dito che ha appena premuto. */
.risposta__testo {
    font-size: var(--testo-xs);
    line-height: 1.2;
    min-height: 2.4em;
    text-align: center;
}

/* Il pulsante premuto è la casella che produce: stessa miscela, stesso bordo.
   Il peso del testo è il canale che resta anche senza colore. */
.risposta__scelta[aria-pressed="true"] {
    background: color-mix(in oklab, var(--tinta) var(--mix-stato), var(--lastra-alta));
    border-color: var(--tinta);
    box-shadow: inset 0 0 0 1px var(--tinta);
}

.risposta__scelta[aria-pressed="true"] .risposta__testo {
    font-weight: 600;
}

.risposta__scelta:hover,
.risposta__scelta:focus-visible {
    border-color: var(--accento);
}

.risposta__scelta:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

/* ---------- Legenda ---------- */

.legenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2) var(--spazio-4);
    margin: var(--spazio-4) 0 0;
    padding: 0;
    font-size: var(--testo-xs);
    color: var(--su-fondo-tenue);
}

.legenda li {
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
}

.pastiglia {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--raggio-s);
    border: 1px solid var(--bordo);
    background: var(--lastra-alta);
    color: var(--inchiostro);
    line-height: 1;
}

.pastiglia .icona {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.25;
}

.pastiglia[data-stato="si"] {
    background: color-mix(in oklab, var(--si) var(--mix-stato), var(--lastra-alta));
    border-color: var(--si);
    color: var(--si);
}

.pastiglia[data-stato="forse"] {
    background: color-mix(in oklab, var(--forse) var(--mix-stato), var(--lastra-alta));
    border-color: var(--forse);
    color: var(--forse);
}

.pastiglia[data-stato="no"] {
    background: color-mix(in oklab, var(--no) var(--mix-stato), var(--lastra-alta));
    border-color: var(--no);
    color: var(--no);
}

[data-pelle="grimorio"] .pastiglia[data-stato] {
    color: var(--inchiostro);
}

.pastiglia[data-evidenza="oro"] {
    background: var(--oro);
    border-color: var(--oro);
    color: var(--oro-inchiostro);
}

/* L'oro su carta chiara è un campo chiaro dentro un bordo del suo stesso
   colore: 1,54:1 contro il pannello nell'asciutto, e nel tabellone va peggio —
   1,72:1 la pastiglia d'oro, 1,38:1 quella tenue. La cella si chiude già con un
   anello interno in queste due pelli; la pastiglia che la spiega deve chiudersi
   allo stesso modo, o il campione del segnale più importante del prodotto è
   l'unico a non avere un contorno. Il grimorio non entra qui: sul nero l'oro
   sta a 9,31:1 e si stacca da solo. */
[data-pelle="asciutto"] .pastiglia[data-evidenza="oro"],
[data-pelle="asciutto"] .pastiglia[data-evidenza="tenue"],
[data-pelle="tabellone"] .pastiglia[data-evidenza="oro"],
[data-pelle="tabellone"] .pastiglia[data-evidenza="tenue"] {
    border-color: var(--oro-inchiostro);
}

/* La barra del gruppo si spiega mostrandola: stessa costruzione della casella,
   larga abbastanza da far contare i tratti. */
.pastiglia--gruppo {
    position: relative;
    width: 3rem;
    height: 6px;
    border: none;
    border-radius: 0;
    background-color: color-mix(in oklab, var(--bordo-forte) 45%, transparent);
    background-image: var(--tratti-gruppo);
    -webkit-mask-image: var(--tacche-gruppo);
    mask-image: var(--tacche-gruppo);
}

/* Oro e tenue non possono distinguersi in legenda solo per tinta: il tenue
   porta una trama diagonale, leggibile anche in bianco e nero. */
.pastiglia[data-evidenza="tenue"] {
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in oklab, var(--oro) 70%, transparent) 0 2px,
            transparent 2px 5px
        ),
        color-mix(in oklab, var(--oro) var(--mix-oro-tenue), var(--lastra-alta));
    border-color: color-mix(in oklab, var(--oro) 60%, transparent);
}

/* ---------- Avvisi ---------- */

.avviso {
    margin: var(--spazio-4) 0 0;
    padding: var(--spazio-3) var(--spazio-4);
    border-radius: var(--raggio);
    background: color-mix(in oklab, var(--no) var(--mix-stato), var(--lastra));
    border: 1px solid var(--no);
    color: var(--inchiostro);
    font-size: var(--testo-s);
}

.avviso[hidden] {
    display: none;
}

.avviso--fisso {
    margin: 0 0 var(--spazio-4);
}

/* L'avviso di salvataggio sta dentro il pannello, dove l'occhio è già: in coda
   alla colonna nasceva sotto la piega e un salvataggio fallito restava muto
   proprio sul telefono, che è il modo in cui questo calendario si usa. */
/* L'avviso comincia sotto la riga della chiusura: sovrapposte, la X sembrava
   chiudere il messaggio d'errore invece del pannello. */
.avviso--dettaglio {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--spazio-3);
    margin: calc(var(--tocco) - var(--spazio-1)) 0 var(--spazio-3);
    padding: var(--spazio-2) var(--spazio-3);
}

/* Con un errore in testa restano poche righe, e l'elenco si taglia a metà di
   una parola. Il pannello si alza quel tanto che basta a non mozzare una riga.
   Dove :has() non c'è, resta l'altezza di prima: l'elenco scorre comunque. */
.dettaglio:has(> .avviso:not([hidden])) {
    max-height: min(64vh, 23rem);
}

.avviso__testo {
    flex: 1;
}

/* Un errore che non offre il gesto per uscirne fa ripetere il gesto a mano. */
.avviso__riprova {
    flex: none;
    min-height: var(--tocco);
    padding: 0 var(--spazio-3);
    border: 1px solid var(--no);
    border-radius: var(--raggio-s);
    background: var(--lastra-alta);
    color: var(--inchiostro);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                color var(--tempo-breve) var(--curva);
}

.avviso__riprova:hover,
.avviso__riprova:focus-visible {
    border-color: var(--accento);
    color: var(--accento);
}

.avviso__riprova:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

/* ---------- Dock: guida e pelle ---------- */

/* I due strumenti stanno in testata accanto all'identità. Erano ancorati in
   basso a destra: occupavano la zona del pollice con le due cose che non si
   usano quasi mai, e obbligavano pannello e legenda a tenersi libera una colonna
   che si vedeva come un buco a destra. Qui non tolgono spazio a nessuno. */
.dock {
    display: flex;
    gap: var(--spazio-2);
}

.dock__pulsante {
    display: grid;
    place-items: center;
    width: var(--tocco);
    height: var(--tocco);
    border-radius: var(--raggio-dock);
    /* Non sono più pezzi sospesi: niente ombra e bordo normale. Il --bordo-forte
       e l'ombra servivano a staccarli dal contenuto su cui galleggiavano. */
    border: 1px solid var(--bordo);
    background: var(--lastra);
    color: var(--inchiostro-tenue);
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                color var(--tempo-breve) var(--curva),
                transform var(--tempo-breve) var(--curva);
}

.dock__pulsante:hover,
.dock__pulsante:focus-visible {
    border-color: var(--accento);
    color: var(--accento);
    transform: translateY(-2px);
}

.dock__pulsante:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.dock__pulsante .icona {
    width: 1.4rem;
    height: 1.4rem;
}

.dock__pulsante[aria-expanded="true"] {
    border-color: var(--accento);
    color: var(--accento);
}

/* ---------- Pannello delle pelli ---------- */

/* Si apre sotto il pulsante che lo apre, ancorato al gruppo degli strumenti:
   prima era fisso in basso a destra, lontano dal proprio comando. */
.pelli {
    position: absolute;
    top: calc(100% + var(--spazio-2));
    right: 0;
    z-index: var(--z-pannello);
    width: min(17rem, calc(100vw - 2 * var(--spazio-4)));
    padding: var(--spazio-3);
    background: var(--lastra);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-sospesa);
    color: var(--inchiostro);
}

/* Senza ombre, un pannello sospeso si stacca dal contenuto col bordo. */
[data-pelle="asciutto"] .pelli,
[data-pelle="asciutto"] .finestra,
[data-pelle="asciutto"] .dock__pulsante {
    border-color: var(--bordo-forte);
}

.pelli[hidden] {
    display: none;
}

.pelli__titolo {
    margin: 0 0 var(--spazio-2);
    font-size: var(--testo-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.pelli__elenco {
    display: grid;
    gap: var(--spazio-2);
}

.pelle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spazio-3);
    width: 100%;
    min-height: var(--tocco);
    padding: var(--spazio-2);
    background: var(--lastra-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--inchiostro);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva);
}

.pelle:hover,
.pelle:focus-visible {
    border-color: var(--accento);
}

.pelle:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.pelle[aria-pressed="true"] {
    border-color: var(--accento);
    box-shadow: inset 0 0 0 1px var(--accento);
}

.pelle__nome {
    font-weight: 600;
    font-size: var(--testo-s);
}

.pelle__nota {
    display: block;
    font-size: var(--testo-xs);
    font-weight: 400;
    color: var(--inchiostro-tenue);
}

/* Il campione mostra il mondo, non un pallino di colore: fondo, lastra, oro. */
.pelle__campione {
    display: flex;
    width: 3.25rem;
    height: 2.25rem;
    flex: none;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid var(--bordo-forte);
}

.pelle__campione span {
    flex: 1;
}

.pelle__campione span:nth-child(1) { flex: 1.4; }

.pelle__campione--grimorio span:nth-child(1) { background: #0a0c11; }
.pelle__campione--grimorio span:nth-child(2) { background: #20242c; }
.pelle__campione--grimorio span:nth-child(3) { background: #e8b543; }

.pelle__campione--tabellone span:nth-child(1) { background: #325642; }
.pelle__campione--tabellone span:nth-child(2) { background: #ffffff; }
.pelle__campione--tabellone span:nth-child(3) { background: #edb24d; }

.pelle__campione--asciutto span:nth-child(1) { background: #f7f7f7; }
.pelle__campione--asciutto span:nth-child(2) { background: #cfcfcf; }
.pelle__campione--asciutto span:nth-child(3) { background: #f6c330; }

/* ---------- Finestre modali ---------- */

.finestra {
    width: min(30rem, calc(100vw - 2 * var(--spazio-4)));
    max-height: calc(100vh - 2 * var(--spazio-5));
    margin: auto;
    padding: 0;
    /* la guida è più alta di un telefono: deve scorrere dentro la finestra */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lastra);
    color: var(--inchiostro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-sospesa);
    z-index: var(--z-finestra);
}

/* Anche il velo appartiene al mondo: un nero-blu da stanza buia sulle due pelli
   chiare era l'unico pezzo che non seguiva la pelle. Nell'asciutto perde anche
   la sfocatura, perché quella pelle è piatta per statuto. */
.finestra::backdrop {
    background: var(--velo);
    backdrop-filter: blur(3px);
}

[data-pelle="asciutto"] .finestra::backdrop {
    backdrop-filter: none;
}

.finestra__corpo {
    padding: 0 var(--spazio-4) var(--spazio-5);
}

.finestra__corpo:focus {
    outline: none;
}

.finestra__titolo {
    margin: 0 0 var(--spazio-2);
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-xl);
    font-weight: var(--peso-titolo);
    letter-spacing: var(--tracking-titolo);
    text-transform: var(--maiuscolo-titolo);
    font-variant-caps: var(--maiuscoletto-titolo);
    color: var(--accento);
    text-wrap: balance;
}

.finestra__nota {
    margin: 0 0 var(--spazio-4);
    font-size: var(--testo-s);
    color: var(--inchiostro-tenue);
    max-width: 60ch;
}

/* La testa resta agganciata in alto: la guida è più alta di un telefono e la
   chiusura non deve andare a cercarsi scorrendo. */
.finestra__testa {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
    margin: 0 calc(-1 * var(--spazio-4)) var(--spazio-2);
    padding: var(--spazio-3) var(--spazio-4) var(--spazio-2);
    background: var(--lastra);
}

.finestra__titolo {
    margin: 0;
}

.finestra__chiudi {
    display: grid;
    place-items: center;
    width: var(--tocco);
    height: var(--tocco);
    flex: none;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--raggio-s);
    color: var(--inchiostro-tenue);
    cursor: pointer;
}

.finestra__chiudi:hover,
.finestra__chiudi:focus-visible {
    border-color: var(--bordo);
    color: var(--inchiostro);
}

.finestra__chiudi:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .finestra[open] {
        animation: comparsa var(--tempo-medio) var(--curva);
    }
}

@keyframes comparsa {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Scelta del personaggio ---------- */

.personaggi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--spazio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.personaggio {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spazio-3);
    width: 100%;
    min-height: var(--tocco);
    padding: var(--spazio-2) var(--spazio-3) var(--spazio-2) var(--spazio-2);
    background: var(--lastra-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--inchiostro);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                transform var(--tempo-breve) var(--curva);
}

.personaggio:hover,
.personaggio:focus-visible {
    border-color: var(--accento);
    transform: translateY(-1px);
}

.personaggio:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.personaggio[aria-pressed="true"] {
    border-color: var(--accento);
    box-shadow: inset 0 0 0 1px var(--accento);
}

.personaggio__sigillo {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accento) 26%, var(--lastra-alta));
    border: 1px solid color-mix(in oklab, var(--accento) 55%, transparent);
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-m);
    font-weight: 700;
    line-height: 1;
}

.personaggio__nome {
    font-weight: 600;
}

.personaggio__giocatore {
    display: block;
    font-size: var(--testo-xs);
    font-weight: 400;
    color: var(--inchiostro-tenue);
}

.finestra__aiuto {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-2);
    min-height: var(--tocco);
    margin-top: var(--spazio-4);
    padding: var(--spazio-2) var(--spazio-3);
    background: none;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--inchiostro-tenue);
    font: inherit;
    font-size: var(--testo-s);
    cursor: pointer;
    transition: border-color var(--tempo-breve) var(--curva),
                color var(--tempo-breve) var(--curva);
}

.finestra__aiuto:hover,
.finestra__aiuto:focus-visible {
    border-color: var(--accento);
    color: var(--inchiostro);
}

.finestra__aiuto:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

/* ---------- Guida ---------- */

.guida {
    font-size: var(--testo-s);
    max-width: 68ch;
}

.guida h3 {
    margin: var(--spazio-5) 0 var(--spazio-2);
    font-size: var(--testo-s);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.guida h3:first-child {
    margin-top: 0;
}

.guida p {
    margin: 0 0 var(--spazio-3);
    text-wrap: pretty;
}

.guida__passi {
    margin: 0;
    padding-left: 1.4rem;
    display: grid;
    gap: var(--spazio-2);
}

.guida__stati {
    list-style: none;
    margin: 0 0 var(--spazio-4);
    padding: 0;
    display: grid;
    gap: var(--spazio-2);
}

.guida__stati li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: center;
    gap: var(--spazio-3);
}

/* I campioni della barra sono larghi il doppio di una pastiglia: in una colonna
   da 1.5rem sbordavano sotto la prima parola della spiegazione. La misura è
   fissa e non `auto` perché ogni voce è una griglia a sé, e con una colonna
   elastica le tre spiegazioni partirebbero da tre punti diversi. */
.guida__stati--barre li {
    grid-template-columns: 3rem 1fr;
}

/* ---------- Errore e approdo ---------- */

.errore {
    max-width: 34rem;
    margin: 15vh auto 0;
    text-align: center;
}

.errore h1 {
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-xxl);
    font-weight: var(--peso-titolo);
    letter-spacing: var(--tracking-titolo);
    text-transform: var(--maiuscolo-titolo);
    font-variant-caps: var(--maiuscoletto-titolo);
    color: var(--accento);
    margin: 0 0 var(--spazio-3);
}

.errore p {
    color: var(--su-fondo-tenue);
}

.approdo {
    max-width: 30rem;
    margin: 12vh auto 0;
}

.approdo h1 {
    font-family: var(--famiglia-titolo);
    font-size: var(--testo-xxl);
    font-weight: var(--peso-titolo);
    letter-spacing: var(--tracking-titolo);
    text-transform: var(--maiuscolo-titolo);
    font-variant-caps: var(--maiuscoletto-titolo);
    margin: 0 0 var(--spazio-5);
    color: var(--su-fondo);
}

.approdo__elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spazio-3);
}

.approdo__voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
    min-height: var(--tocco);
    padding: var(--spazio-3) var(--spazio-4);
    background: var(--lastra);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--inchiostro);
    text-decoration: none;
    font-size: var(--testo-l);
    font-weight: 600;
    transition: border-color var(--tempo-breve) var(--curva),
                transform var(--tempo-breve) var(--curva);
}

.approdo__voce:hover,
.approdo__voce:focus-visible {
    border-color: var(--accento);
    transform: translateY(-2px);
}

.approdo__voce:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.approdo__voce .icona {
    color: var(--accento);
}

/* ---------- Adattamenti ---------- */

@media (max-width: 30rem) {
    body {
        padding-left: var(--spazio-3);
        padding-right: var(--spazio-3);
    }

    :root {
        --testo-xxl: 1.5rem;
        --testo-xl: 1.25rem;
    }

    /* Su telefono la legenda è la chiave dell'oro e non deve finire sotto la
       piega: lo spazio si recupera stringendo l'interlinea delle celle, non
       rimpicciolendo i segni che portano lo stato. */
    .cella {
        min-height: 3.7rem;
        gap: 0.1rem;
        padding: 2px;
    }

    .cella__giorno {
        line-height: 1;
    }

    .cella__mio,
    .cella__mio .icona {
        height: 1rem;
        width: 1rem;
    }

    /* Un pixel meno che su schermo largo, non due: il contorno del «no» ha
       bisogno di quattro pixel per restare vuoto in mezzo. */
    .cella__gruppo {
        height: 4px;
        width: 86%;
    }

    .dettaglio {
        padding: var(--spazio-3);
    }

    .legenda {
        margin-top: var(--spazio-3);
        gap: var(--spazio-2) var(--spazio-3);
    }

    /* La testata sta su una riga sola come su desktop. Ci stava già in larghezza
       — titolo, nome e due pulsanti da 44px sommano meno di quanto sembri — ma
       non alla scala del titolo di prima: con `--testo-xxl` il KUMARIAN
       maiuscolo del tabellone misura 145px dove il graziato del grimorio ne
       misura 108, e la differenza fra le pelli era quanto bastava a mandare a
       capo proprio il tabellone. Il titolo scende di un gradino della scala:
       resta il pezzo più grande della riga, e la riga regge in tutti e tre i
       mondi invece che in uno solo. Andare a capo era la resa precedente, e
       costava una riga di schermo a ogni caricamento.

       Non è un ritorno alla riga fragile: il titolo può stringersi (`min-width:
       0`) e nel caso estremo tronca. A cedere è lui e non il nome del
       personaggio, perché un titolo accorciato resta riconoscibile mentre un
       nome accorciato smette di dire chi sei — ed è il nome che risponde alla
       domanda «sto segnando come chi?». */
    /* `nowrap` non è ridondante con il troncamento del titolo: un contenitore
       flex decide di mandare a capo *prima* di comprimere, guardando la
       larghezza intera del titolo e non quella a cui potrebbe ridursi. Con il
       wrap aperto, il tabellone e l'asciutto tornavano su due righe a 320px
       nonostante il titolo avesse il permesso di stringersi. */
    .testata {
        gap: var(--spazio-2);
        margin-bottom: var(--spazio-3);
        flex-wrap: nowrap;
    }

    .testata h1 {
        flex: 0 1 auto;
        min-width: 0;
        font-size: var(--testo-xl);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sul telefono il foglio del tabellone non deve raddoppiare i margini del
       body: gli 8px per lato che restano bastano a farlo leggere come foglio e
       restituiscono alla griglia la larghezza che gli serve. */
    [data-pelle="tabellone"] .impianto {
        padding-left: var(--spazio-2);
        padding-right: var(--spazio-2);
    }

    /* Su telefono il sigillo cede il posto: da quando i due strumenti stanno in
       testata, il ritratto è la sola cosa lì dentro che non si tocca e non dice
       niente che il nome non dica già. Resta su desktop, dove lo spazio c'è. */
    .identita__sigillo {
        display: none;
    }

    .identita {
        padding-left: var(--spazio-3);
    }

    /* Anche sullo stretto i nomi stanno sulla riga della loro etichetta. La
       colonna si stringe rispetto agli 8.5rem del desktop ma resta fissa: ogni
       riga è un <dl> a sé, e con una colonna elastica i nomi partirebbero da
       quattro punti diversi. 6.75rem è quanto serve a «Non disponibili». */
    .dettaglio__riga {
        grid-template-columns: 1.5rem 6.75rem minmax(0, 1fr);
    }

}

/* Sotto i 360px la colonna delle etichette non ci sta più: nel tabellone il
   foglio si prende un altro bordo e due padding, e a «nessuno» restavano
   quarantaquattro pixel dentro un pannello che taglia. La colonna si stringe e
   i nomi lunghi imparano ad andare a capo: meglio due righe che una parola
   sparita. */
@media (max-width: 22.5rem) {
    /* Sul telefono più stretto la larghezza si recupera dove non porta
       informazione — i margini e le intercapedini — per darla alle caselle, che
       sono l'unica cosa che si tocca. Va detto per intero: con sette colonne
       nemmeno così la casella arriva ai 44px di --tocco, perché 7×44 non sta in
       320px. Ci arriva l'altezza, che resta sopra i 55px. */
    body {
        padding-left: var(--spazio-2);
        padding-right: var(--spazio-2);
    }

    .griglia,
    .settimana {
        --gap-griglia: 3px;
    }

    [data-pelle="asciutto"] .griglia,
    [data-pelle="asciutto"] .settimana {
        --gap-griglia: 1px;
    }

    /* Il titolo scende di un altro gradino e la pillola perde la freccia: sono i
       due prelievi che tengono la riga sola fin quaggiù. Il caso che li impone è
       il più stretto di tutti — 320px, il maiuscolo spaziato del tabellone e il
       nome più lungo del gruppo — e senza di loro sarebbe il titolo a doversi
       accorciare. Un titolo intero un gradino più piccolo vale più di uno grande
       con tre puntini.

       La freccia è il segno che dice «puoi cambiare personaggio»: il nome
       accessibile del pulsante lo dice per intero, e una parola dentro una
       pillola bordata si legge come premibile anche senza. È la stessa ragione
       per cui a questa soglia era già sparito il sigillo, e a questa soglia la
       pillola resta il solo nome. */
    .testata h1 {
        font-size: var(--testo-l);
    }

    .identita__cambia {
        display: none;
    }

    .identita {
        padding-right: var(--spazio-3);
    }

    .dettaglio__riga {
        grid-template-columns: 1.5rem 5rem minmax(0, 1fr);
        gap: var(--spazio-1);
    }

    .dettaglio__riga dd {
        overflow-wrap: break-word;
    }

    /* Una riga che dice «nessuno» si stringe: a questa larghezza «Non
       disponibili» e «Senza risposta» non stanno in cinquanta pixel e vanno a
       capo, e due etichette a capo per dire due volte niente sono le righe che
       spingevano fuori dal pannello proprio «Senza risposta» — la sola riga che
       chiede di fare qualcosa, perché sono le persone da sollecitare. Un corpo
       più piccolo le riporta su una riga sola e le mette al loro posto nella
       gerarchia: pesano quanto dicono. */
    .dettaglio__riga--vuota {
        font-size: var(--testo-xs);
    }
}

/* Dove non c'è hover il pannello è l'unico modo di leggere chi c'è, ma nasce
   sotto la piega: su un telefono da 667px di altezza è fuori schermo, così il
   tocco cambierebbe una casella senza mostrare la risposta che lo giustifica.
   Ancorato al fondo della finestra resta sempre sotto il pollice, e la griglia
   gli scorre dietro. */
@media (hover: none) {
    .dettaglio {
        position: sticky;
        bottom: var(--spazio-3);
        z-index: var(--z-dettaglio);
        /* alto quanto basta a tre righe: oltre, si mangerebbe il mese */
        max-height: min(48vh, 17rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--ombra-sospesa);
    }

    /* Scorre solo l'elenco di chi ha risposto: la data in cima e i pulsanti in
       fondo non si vanno a cercare. */
    .dettaglio__corpo {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .dettaglio__righe {
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }

    /* Senza ombre, il pannello sospeso si stacca dal contenuto col bordo. */
    [data-pelle="asciutto"] .dettaglio {
        border-color: var(--bordo-forte);
    }
}

/* Sul telefono più stretto i nomi vanno a capo, le quattro righe crescono e la
   quarta esce dai 17rem del cap. La quarta è «Senza risposta»: l'unica riga del
   pannello che chiede di fare qualcosa — sono le persone da sollecitare — e
   spariva proprio dove il calendario si usa davvero. Il cap sale e le righe si
   stringono; il mese sopra perde qualche riga, ma il pannello si apre solo dopo
   un tocco e si chiude con la sua X. */
@media (hover: none) and (max-width: 22.5rem) {
    .dettaglio {
        max-height: min(66vh, 22rem);
    }

    .dettaglio__righe {
        gap: var(--spazio-1);
    }
}

/* Telefono coricato: impilare data, elenco e pulsanti lascerebbe al pannello
   metà dello schermo e all'elenco una riga tagliata. Qui lo spazio sta in
   larghezza, quindi i pulsanti salgono accanto alla data e si distendono. */
@media (hover: none) and (max-height: 30rem) {
    /* La griglia sale dal corpo al pannello e il corpo si fa trasparente, così
       la chiusura — che nel documento è sorella del corpo e non figlia — può
       prendersi una colonna vera. Restando assoluta finiva nell'angolo dove qui
       si distendono i tre pulsanti, e copriva mezzo «Non ci sono»: il gesto per
       dire che non vieni stava sotto il gesto per chiudere. Una colonna larga
       quanto il tocco è l'unico modo che ha la X di non sovrapporsi a niente. */
    .dettaglio {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto var(--tocco);
        grid-template-rows: auto auto minmax(0, 1fr);
        column-gap: var(--spazio-4);
    }

    .dettaglio__corpo {
        display: contents;
    }

    .dettaglio__chiudi {
        position: static;
        grid-area: 2 / 3;
        align-self: start;
    }

    /* L'errore resta in cima, largo quanto il pannello. Il margine che lo
       faceva scendere sotto la X non serve più: la X ha smesso di stargli
       sopra. */
    .avviso--dettaglio {
        grid-area: 1 / 1 / 2 / 4;
        margin: 0 0 var(--spazio-3);
    }

    .dettaglio__data {
        grid-area: 2 / 1;
        align-self: center;
        margin-bottom: var(--spazio-2);
        padding-right: 0;
    }

    .dettaglio__righe,
    .dettaglio__vuoto {
        grid-area: 3 / 1 / 4 / 4;
    }

    .risposta {
        grid-area: 2 / 2;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .risposta__scelta {
        grid-auto-flow: column;
        align-items: center;
        padding: var(--spazio-1) var(--spazio-3);
    }

    /* Coricato lo spazio sta in larghezza: le due righe riservate all'etichetta
       costerebbero altezza che qui non c'è. */
    .risposta__testo {
        min-height: 0;
    }
}

@media (min-width: 48rem) {
    .cella {
        min-height: 5rem;
    }

    :root {
        --testo-xl: 1.5rem;
    }
}

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

    .cella:not(.cella--inerte):hover,
    .dock__pulsante:hover,
    .personaggio:hover,
    .approdo__voce:hover {
        transform: none;
    }
}