/* comune.css — il terreno su cui stanno tutte le pagine.
   Colori, tipografia, intestazioni, impaginato, testata, campi e bottoni.

   Qui NON c'è niente della singola pagina: se una regola serve a una sola
   schermata sta nel foglio di quella schermata. È questa separazione che
   permette di rifare una pagina senza guardare le altre.

   Colori: fondo var(--carta-chiara), testo var(--inchiostro), accento var(--accento) (terracotta),
   secondario var(--secondario), bordi var(--bordo) / var(--bordo-forte). */

/* --- I CARATTERI ----------------------------------------------------------------
   Dal 14/09/2026 il testo è in AVENIR NEXT, lo stesso carattere che Andrea usa
   in Bear. Sta già su ogni Mac, iPhone e iPad: non si scarica niente. Dove non
   c'è — un computer che non è Apple — prende il suo posto Nunito Sans, il
   parente gratuito più vicino, da Google Fonts.

   PERCHÉ UN NOME NOSTRO, «Testo Ensō», e non «Avenir Next» scritto e basta.
   Avenir Next non ha il peso chiaro, il 300, che l'applicazione usa ovunque
   per i titoli grandi e i campi. Chiesto a un carattere che non lo ha, il
   browser scende al peso più sottile che trova — l'Ultra Light — e metà
   dell'applicazione diventerebbe un filo: illeggibile per chi fatica già a
   distinguere i colori. Qui ogni peso dice a quale faccia vera corrisponde.

     300 e 400  Regular     il testo
     500        Medium      le etichette, i nomi
     600        Demi Bold   quello che deve staccare
     700        Bold        i titoli delle scatole e delle schede

   I caratteri si chiamano per ruolo, come i colori: --font-testo per quasi
   tutto, --font-numeri per le cifre in colonna, --font-scritto per quello che
   scrive Andrea. Una famiglia riscritta in un foglio di pagina è una famiglia
   che al prossimo cambio resta indietro: ne erano rimaste cinquanta copie. */
@font-face { font-family: 'Testo Enso'; font-weight: 300; src: local('Avenir Next Regular'), local('AvenirNext-Regular'); }
@font-face { font-family: 'Testo Enso'; font-weight: 400; src: local('Avenir Next Regular'), local('AvenirNext-Regular'); }
@font-face { font-family: 'Testo Enso'; font-weight: 500; src: local('Avenir Next Medium'), local('AvenirNext-Medium'); }
@font-face { font-family: 'Testo Enso'; font-weight: 600; src: local('Avenir Next Demi Bold'), local('AvenirNext-DemiBold'); }
@font-face { font-family: 'Testo Enso'; font-weight: 700; src: local('Avenir Next Bold'), local('AvenirNext-Bold'); }

:root {
  /* LA CARTA È IL PIANO, NON IL FOGLIO — ed è la seconda volta che scende.
     var(--carta-chiara) → #f5f1e7 → var(--carta).
     
     Il primo giro aveva i blocchi PIÙ SCURI della pagina: un foglio di sabbia
     posato su un piano chiaro. Funzionava e non convinceva, e il motivo è che
     è il rovescio di come stanno le cose: un foglio appoggiato su un tavolo è
     la cosa CHIARA, e il mondo intorno è più scuro. È una disposizione più
     antica di qualunque cruscotto, e l'occhio non deve fare nessuno sforzo per
     accettarla — regge un distacco maggiore senza che i blocchi sembrino
     saltare fuori. */
  --carta: #eee8db;
  --inchiostro: #2a2723;
  --inchiostro-medio: #3d3831;
  --secondario: #6b6357;
  --tenue: #a29a8b;
  --spento: #8b8375;
  --bordo: #e3ddd0;
  --bordo-forte: #ddd6c8;
  --accento: #8f5d47;
  /* Il secondo accento. Serviva da quando esiste una pagina che mette in fila
     denaro che entra e denaro che esce: con un colore solo la differenza
     restava affidata al segno meno, che è un carattere di sei pixel.
     Indaco e non blu: stessa densità della terracotta e stessa aria di cosa
     stampata, così i due stanno nella stessa pagina senza che uno gridi. */
  --indaco: #42557a;
  /* Sceso con la carta: un separatore tarato su un fondo chiaro sparisce
     quando il fondo si abbassa, e le linee della barra di navigazione erano le
     prime ad andarsene. */
  --linea: #ded6c5; /* il grigio dei separatori: verticali e orizzontali */

  /* --- 領 I QUATTRO COLORI DELLE AREE DELLA VITA ---------------------------
     Scelti da Andrea il 13/09/2026, e non sono quattro tinte messe in fila:
     sono QUATTRO GRADINI DI CHIAREZZA lungo l'asse blu→giallo — L* 25, 41,
     63, 78 — che è l'unico asse che il daltonismo rosso-verde risparmia.
     Sotto deuteranopia la coppia piu vicina resta a ΔE 12, e in bianco e nero
     si separano di quasi quindici punti.

     LA REGOLA: IL COLORE È UN PIENO, MAI UN TRATTO. L'ambra su carta dà
     1,57:1 — invisibile come linea, perfetta come disco. Quindi ogni area ha
     tre toni:

       --area-*   il pieno: dischi, quadretti, superfici
       --su-*     l'inchiostro che ci va SOPRA, scelto per contrasto (5,2:1
                  il peggiore)
       --linea-*  il gemello smorzato per barre, fili e contorni, portato a
                  3:1 sulla carta

     E il fatto/non fatto resta comunque una FORMA — disco pieno, interruttore
     spostato, barra lunga — così si legge anche stampato in grigio. Un
     semaforo qui non c'è: nessuna delle quattro aree vale piu di un'altra. */
  --area-benessere: #2ea8b8;    --su-benessere: #2a2723;    --linea-benessere: #2995a3;
  --area-spiritualita: #7c4e8f; --su-spiritualita: #f8f5ee; --linea-spiritualita: #7c4e8f;
  --area-business: #0b3d6b;     --su-business: #f8f5ee;     --linea-business: #0b3d6b;
  --area-relazioni: #f0b849;    --su-relazioni: #2a2723;    --linea-relazioni: #b67e0f;

  /* I valori di ripiego: se un elemento non dichiara la sua area, prende
     l'indaco e non sparisce. */
  --area: var(--indaco);
  --su: var(--carta-chiara, #f8f5ee);
  --linea-area: var(--indaco);

  /* --- LA FORMA, e perché sta qui e non in un foglio di pagina -------------
     Fino a oggi ogni schermata sceglieva i suoi raggi a occhio: 3 e 4 px sul
     Quadro, 9 e 13 sulla Cassa, niente sulla Rotta. Tre pagine della stessa
     applicazione con tre idee di angolo, e il disordine si vede anche quando
     ogni singola pagina è a posto.
     
     UNA SCALA, come per i corpi del testo. Piccolo per i segni, medio per i
     blocchi, grande per le superfici, pillola per tutto ciò che è una barra:
     una barra è una quantità che scorre, e una quantità che scorre non ha
     spigoli. */
  --raggio-s: 7px;
  --raggio-m: 13px;
  --raggio-l: 20px;
  --pillola: 999px;

  /* --- I DUE PIANI ---------------------------------------------------------
     La pagina è la carta; i blocchi sono FOGLI appoggiati sopra, di un tono di
     sabbia più fondo. Prima erano separati da un filetto in cima, e un filetto
     SEPARA ma non RAGGRUPPA: con quattro blocchi vicini non si capiva dove
     finisse uno.
     
     Il foglio è più SCURO della carta e non più chiaro. Schiarirlo di tre
     punti — la prima strada — dava una differenza che si misura e non si vede:
     il blocco spariva e restava in piedi solo l'ombra. */
  --foglio: #f3efe4;
  /* IL FOGLIO SOPRA IL FOGLIO: il riquadro dove si risponde, dentro un
     blocco. Più chiaro del foglio per la stessa ragione per cui il foglio è
     più chiaro della carta — la cosa appoggiata sopra prende più luce. È il
     colore che la carta aveva al primo giro. */
  --carta-chiara: #f8f5ee;
  /* Il binario delle barre: quello che una barra NON ha ancora riempito. Sul
     foglio di sabbia un grigio al 2,8% (il vecchio valore dello striping)
     diventa invisibile, e una barra senza binario non fa più vedere quanto
     manca. */
  --binario: rgba(42, 39, 35, 0.085);
  /* Le righe alterne degli elenchi, alzate per lo stesso motivo. */
  --riga-alterna: rgba(42, 39, 35, 0.045);

  /* L'INDACO TENUE. Stava a 0.30 sparso in quattro fogli; sul foglio di sabbia
     si avvicina troppo al binario e le quantità in indaco sparivano dentro di
     lui — una barra piena che sembrava mezza vuota. Cambiare il fondo cambia
     OGNI colore che ci sta sopra, e i tenui cedono per primi. */
  --indaco-tenue: rgba(66, 85, 122, 0.45);
  /* La terracotta a mezza forza: i costi, il gradino di mezzo. Era 0.5 in due
     fogli e 0.45 in un terzo — la stessa cosa scritta in due modi. */
  --terracotta-tenue: rgba(143, 93, 71, 0.45);

  /* LE VELATURE: un accento steso appena, per le pastiglie e le fasce. Le
     pagine nuove le avevano scritte a mano, ciascuna con il suo decimale. */
  --indaco-velo: rgba(66, 85, 122, 0.1);
  --indaco-velo-lieve: rgba(66, 85, 122, 0.06);
  --accento-velo: rgba(143, 93, 71, 0.1);
  --accento-velo-lieve: rgba(143, 93, 71, 0.06);

  /* --- L'OMBRA, IN CINQUE STRATI ------------------------------------------
     Un'ombra sola non regge: è la cosa che fa sembrare finto un riquadro,
     perché nella realtà non esiste una sfocatura unica. Ne servono tre di
     natura diversa, più due segni che non sono ombre affatto.

       luce      una riga chiarissima sul bordo ALTO, dentro. È il ciglio del
                 foglio che prende la luce, ed è il dettaglio che separa «un
                 rettangolo con un'ombra» da «una superficie».
       anello    il contorno di un pixel, dentro l'ombra e non nel bordo, così
                 non occupa spazio e non sposta il contenuto di mezzo pixel.
       contatto  cortissima e appena sotto: dice dove il foglio TOCCA. Senza,
                 il riquadro sembra sospeso a un centimetro.
       vicina    la penombra a pochi pixel, quella che dà lo spessore.
       ambiente  larga, molto sfocata, quasi trasparente: è la luce della
                 stanza, e senza di lei il foglio è ritagliato.

     Tutte di INCHIOSTRO CALDO e mai di nero: un'ombra grigia su una carta
     color avorio la fa sembrare sporca.

     La riga di luce ha senso solo perché il foglio è PIÙ CHIARO del piano: su
     una superficie più scura sarebbe un riflesso senza fonte. È la ragione per
     cui questi cinque strati sono arrivati qui insieme al rovesciamento dei
     due piani, e non prima. */
  --ombra:
    inset 0 1px 0 rgba(255, 253, 247, 0.7),
    0 0 0 1px rgba(61, 48, 33, 0.05),
    0 1px 1px rgba(61, 48, 33, 0.05),
    0 4px 8px -3px rgba(61, 48, 33, 0.07),
    0 18px 34px -16px rgba(61, 48, 33, 0.23);
  /* L'OMBRA BASSA: per un riquadro dentro un foglio, non appoggiato sul
     piano. Stessi cinque strati — se ne cambiasse la natura si vedrebbe che
     sono due sistemi diversi — ma dimezzati: deve dire «staccato di poco»,
     e con l'ombra piena una scheda dentro una scheda sembra volare. */
  --ombra-bassa:
    inset 0 1px 0 rgba(255, 253, 247, 0.5),
    0 0 0 1px rgba(61, 48, 33, 0.045),
    0 1px 1px rgba(61, 48, 33, 0.04),
    0 3px 6px -3px rgba(61, 48, 33, 0.06),
    0 10px 18px -11px rgba(61, 48, 33, 0.18);
  --ombra-alta:
    inset 0 1px 0 rgba(255, 253, 247, 0.78),
    0 0 0 1px rgba(61, 48, 33, 0.06),
    0 2px 3px rgba(61, 48, 33, 0.06),
    0 8px 16px -5px rgba(61, 48, 33, 0.1),
    0 28px 48px -20px rgba(61, 48, 33, 0.26);
  /* Il bordo è uscito dalla regola `border` ed è rientrato come primo strato
     dell'ombra: un contorno disegnato a parte resta uguale su tutti e quattro i
     lati, e i quattro lati di un foglio appoggiato non ricevono la stessa
     luce. Resta il nome perché tre fogli lo usano già. */
  --bordo-foglio: transparent;

  /* UNA CURVA SOLA per tutto il movimento dell'applicazione. Parte decisa e
     arriva morbida: è il modo in cui si ferma una cosa che ha una massa, e due
     curve diverse sulla stessa schermata si notano come un difetto. */
  --molla: cubic-bezier(0.22, 0.75, 0.2, 1);
  --durata: 0.62s;

  /* --- Le tre distanze ---------------------------------------------------
     Il problema non era la quantità di spazio ma la sua uniformità: 92px
     identici fra cose con rapporti diversi non dicono niente sulla gerarchia.
     Tre valori crescenti, e nient'altro:

       affiancati  blocchi che stanno nella stessa fascia
       interno     le sezioni dentro un blocco (Opportunità / Progetti / …)
       fasce       il cambio di momento della giornata

     Chi aggiunge una spaziatura nuova qui sotto sta quasi sempre sbagliando:
     una quarta distanza rimette la pagina dov'era. */
  --spazio-affiancati: clamp(36px, 5vw, 56px);
  --spazio-interno: 34px;
  --spazio-fasce: clamp(76px, 9vw, 108px);

  /* La misura di riga da libro: 65-70 caratteri. Vive sul TESTO, non sul
     blocco che lo contiene — è la riga a essere corta, non la colonna. */
  --riga-libro: 33em;

  /* La larghezza della barra di navigazione quando è a sinistra. Sotto la
     soglia non esiste e questo numero non serve a nessuno; sopra, lo leggono
     in due — la barra stessa e il rientro del corpo — e devono restare
     d'accordo. È la stessa ragione per cui `--spazio-fasce` è una variabile e
     non un valore ripetuto: due posti che leggono lo stesso numero non possono
     scoprirlo ognuno per conto suo. */
  --barra: 156px;

  /* Il corpo della prosa di Rabdy. In Karla dall'11/09/2026, e quindi più
     piccolo: diciotto pixel di Karla si leggono come ventidue di Newsreader,
     che ha l'occhio più basso. Una variabile sola perché la riga della prosa
     e il riquadro della domanda si misurano tutti e due su di lei, e due
     numeri separati divergono al primo ritocco. */
  --corpo-prosa: 18px;

  /* LA SCALA DEI CORPI, dal 14/09/2026. Erano ventinove misure, da 9,5 a 36
     pixel, scelte una alla volta: 13 e 13,5, 14 e 14,5, 11 e 11,5 — mezzi pixel
     che l'occhio non distingue e che fanno sembrare scritte da mani diverse due
     righe accanto. Nove passi, e nient'altro; i piccoli arrotondati in su,
     perché qui si legge ogni mattina. */
  --corpo-micro: 10.5px; /* le annotazioni dentro i grafici */
  --corpo-xs: 12px;      /* le etichette, le date, i conti */
  --corpo-s: 13px;       /* le righe secondarie */
  --corpo-m: 14px;       /* le righe di elenco, i pulsanti */
  --corpo: 15px;         /* il testo */
  --corpo-l: 18px;       /* i nomi delle schede, i titoli dei riquadri */
  --corpo-xl: 22px;      /* le cifre nelle schede */
  --corpo-2xl: 27px;     /* i titoli di sezione */
  --corpo-3xl: 36px;     /* la testata */

  /* I tre caratteri, per ruolo. Vedi «I caratteri» qui sopra. */
  --font-testo: 'Testo Enso', 'Avenir Next', 'Nunito Sans', system-ui, sans-serif;
  --font-numeri: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-scritto: Newsreader, Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

/* I CONTROLLI DI MODULO NON EREDITANO IL CARATTERE, e nessuno se lo aspetta:
   `button`, `input`, `select` e `textarea` partono dal carattere di sistema —
   Arial, qui — invece che da quello della pagina. Su Giorno erano ventotto
   elementi: i nomi degli argomenti e le loro righe di dettaglio, tutti dentro
   un `<button>`, tutti in Arial in mezzo a una pagina in Karla.
   
   È un difetto vecchio, e si vedeva solo confrontando due schermi affiancati —
   Arial e Karla sono entrambi grotteschi, e la differenza passa per una
   sfumatura. `font: inherit` la chiude per tutti e quattro i tipi. */
button,
input,
select,
textarea { font: inherit; }

/* `hidden` deve vincere sempre: le regole con selettore di ID (#cancello-aperto,
   #stato-due) hanno specificità maggiore della regola `[hidden]` del browser,
   e senza questo restano visibili anche con l'attributo messo. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--carta);
}

body {
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-numeri);
  font-weight: 300;
  font-size: var(--corpo);
  line-height: 1.55;
  color: var(--secondario);
}

/* LA PROSA È IN KARLA dall'11/09/2026, come il resto dell'applicazione. Il
   serif resta SOLO per quello che scrivi tu — il campo della risposta, le tue
   risposte, le tue lezioni: un testo di Rabdy in serif sembrava una pagina di
   libro incollata dentro un'applicazione, e il libro è quello che scrivi tu. */
.prosa {
  font-family: var(--font-testo);
  font-size: var(--corpo-prosa);
  font-weight: 400;
  line-height: 1.7;
  color: var(--inchiostro);
  max-width: var(--riga-libro);
  text-wrap: pretty;
  margin: 0;
}

/* La prosa può arrivare in più paragrafi — la domenica sono tre. Dentro un
   solo elemento le righe vuote sparirebbero: l'HTML le collassa, e i tre
   paragrafi diventerebbero un blocco unico. */
.prosa p { margin: 0; }
.prosa p + p { margin-top: 0.9em; }

/* --- Intestazioni ---------------------------------------------------------
   Kanji, titolo, e sotto la traduzione. Il kanji sta in una gronda di
   larghezza fissa: i caratteri hanno larghezze diverse, i titoli devono
   partire tutti dalla stessa ascissa.

   `align-items: baseline` sul titolo e non sulla colonna intera: la linea di
   base di una colonna flex è quella della sua PRIMA riga, quindi il kanji si
   appoggia al titolo e la traduzione resta sotto. */

.sezione {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-size: var(--corpo-2xl);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--inchiostro);
}

/* --- I SEGNI ---------------------------------------------------------------
   Dal 14/09/2026 al posto dei kanji (vista/segni.js, pubblico/segni.svg). Un
   segno è grande quanto il testo che accompagna — `1em` — e ne prende il
   colore: così una regola sola li fa stare giusti nel titolo di una pagina, in
   una voce di menù e in una pastiglia su una riga. */
.segno-svg {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: visible;
}

/* Il segno di sezione: nella stessa gronda dove stava il kanji, e con lo stesso
   tono chiaro — grande E scuro competerebbe col titolo. Un po' più piccolo del
   corpo e abbassato di un soffio: un disegno pieno alto un em sembra più grande
   di una lettera alta un em, perché la lettera ha l'aria dentro. */
.sezione .segno-titolo {
  flex: none;
  width: 1.55em; /* la gronda: proporzionale al corpo del titolo */
  display: inline-flex;
  color: var(--spento);
}
.sezione .segno-titolo .segno-svg { width: 0.92em; height: 0.92em; transform: translateY(0.14em); }

.titolo-blocco { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.titolo-riga { line-height: 1.25; }

/* --- IL RIFERIMENTO DI SEZIONE --------------------------------------------
   «02 / 04 · COSTI FISSI» sopra il segno, sulle pagine lunghe. Non è
   decorazione: Rotta e Cassa sono lunghe tre schermate e mezza, e scorrendo si
   perde il conto di quante sezioni restano. Giorno e Stato non lo ricevono —
   due sezioni non hanno bisogno di un indice, e metterlo lì farebbe sembrare
   che ci sia dell'altro sotto.

   La lineetta prima del numero è l'unico pezzo decorativo, ed è quella che lo
   fa leggere come un riferimento e non come un dato: senza, «02 / 04» in cima
   a una sezione sembra una misura. */
.dove-sono {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font-size: var(--corpo-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondario);
}

.lineetta {
  display: block;
  width: 34px;
  height: 0;
  border-top: 1px solid var(--bordo-forte);
}

.traduzione {
  font-family: var(--font-numeri);
  font-size: var(--corpo-s);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--secondario);
}

/* --- IL GRADINO DELLA SCALA -----------------------------------------------
   Sopra il nome — di una trattativa su 道 Rotta, di un'opportunità su 日
   Giorno — e SOLO per chi sta sopra il primo gradino.
   Il caso normale — il lavoro su misura — non porta etichetta: marcare anche
   quello vorrebbe dire marcare tutto, cioè niente. È lo stesso principio delle
   righe di totale: si toglie peso a ciò che non conta, non si aggiunge
   contrasto a ciò che conta.

   NIENTE MEDAGLIETTA. Un rettangolo pieno con dentro una parola in maiuscolo è
   il primo distintivo dell'applicazione, e sarebbe anche l'unico: qui la
   gerarchia la fanno il peso e la posizione, come dappertutto. La parola sta
   sopra il nome perché è la prima cosa che si legge della riga — e quello che
   dice è che quella riga è un altro mestiere.

   STA QUI E NON IN `quadro.css` perché due pagine lo mostrano, e sono pagine
   che non condividono nessun altro foglio. Una seconda copia sarebbe divergita
   al primo ritocco, e sarebbe divergita in silenzio: le due pagine non si
   guardano mai una accanto all'altra.

   È DEL REGISTRO, cioè monospace: da quando il gradino porta un carattere —
   «積 composto» — è la stessa cosa della riga sotto ogni kanji di sezione, e
   prende la stessa forma di `.traduzione`. La regola dei caratteri dice che il
   monospace incolonna cifre e il sans fa il lavoro; l'eccezione dichiarata è
   che la riga del kanji è del registro, qualunque cosa dica.

   Via il maiuscoletto per la stessa ragione: `text-transform: uppercase` non
   tocca 積 ma alza «composto», e il risultato sarebbe un carattere giapponese
   accanto a una parola urlata. Nel registro si scrive minuscolo. */
.gradino {
  margin: 0 0 3px;
  font-family: var(--font-numeri);
  font-size: var(--corpo-s);
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--secondario);
}

/* 積 composto è l'unico gradino che cambia il modello: prende l'inchiostro
   pieno e un segno davanti. Il segno è una linea, non un pallino colorato — si
   vede anche stampata, e non introduce una tinta nuova. Serve ancora, adesso
   che c'è il carattere: 積 e 品 a tredici pixel si distinguono solo da chi li
   sa leggere, la linea si vede da lontano. */
.livello-composto .gradino { color: var(--inchiostro); }

.livello-composto .gradino::before {
  content: '——— ';
  color: var(--indaco);
  letter-spacing: 0;
}

/* L'emergenza: una cosa che moltiplica, ferma in Ipotesi oltre la soglia. Il
   tempo fermo si scrive accanto al gradino invece che in fondo alla riga,
   perché lì è la ragione per cui quella riga è in cima all'attenzione. */
.gradino-ferma { color: var(--accento); }

/* --- LE ETICHETTE E LE NOTE SONO PAROLE ----------------------------------
   Sans e non monospace. Il monospace incolonna cifre; qui non c'è niente da
   incolonnare — «quello che c'è sul conto · anno 2026, al 66%» sono undici
   parole e due numeri.

   IL CORPO VA RIDICHIARATO. Queste classi non ne avevano uno proprio: se lo
   prendevano da `.mono`, che oltre alla famiglia porta corpo, peso e
   interlinea. Tolta la classe dal markup cadrebbero al corpo del `body`, che
   non è un passo della scala. Una classe che porta quattro proprietà sotto un
   nome che ne promette una è una trappola, e va disinnescata qui. */
.etichetta-parte,
.nota,
.nota-scrittura,
.anello-target,
.anello-perche,
.fase-quante,
.fase-margine,
.marcatura,
.trattativa-meta,
.dettaglio-densa,
.voce-meta,
.chi {
  font-family: var(--font-testo);
  font-size: var(--corpo);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0;
}


/* --- Impaginato ----------------------------------------------------------
   Le fasce sono figlie dirette della pagina e larghe quanto lei: nessuna ha
   un margine sinistro proprio, ed è così che condividono l'asse. */

.pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-fasce);
  width: 100%;
  /* UNA LARGHEZZA SOLA PER TUTTE E CINQUE LE PAGINE. Mille pixel era la
     misura da lettura, giusta quando le pagine erano prosa; poi le pagine a
     blocchi sono state allargate a 1280 con un `max-width` loro, e il Quadro a
     1400 con un altro ancora. Tre larghezze, e l'ASSE SINISTRO — la regola su
     cui è costruito tutto l'impaginato — si spostava passando da una pagina
     all'altra.

     1280 le tiene tutte: le dashboard hanno lo spazio che chiedevano, e la
     prosa non si allunga perché la RIGA di lettura è capata da `--riga-libro`,
     che è il posto giusto dove capare la lettura — sul testo, non sulla
     pagina. Il numero sta qui e in nessun altro posto. */
  max-width: 1280px;
  margin: 0 auto;
  /* Il padding superiore è più corto di prima: la differenza è la riga della
     navigazione, che ci si infila dentro. La testata resta alla stessa
     altezza di quando la navigazione non c'era. */
  padding: clamp(30px, 6vw, 66px) clamp(18px, 5vw, 64px) clamp(72px, 14vw, 130px);
}

.fascia { display: flex; flex-direction: column; gap: var(--spazio-affiancati); }

.testa {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: baseline;
}

/* La testata usa la stessa struttura delle sezioni, solo più grande: il
   kanji e la gronda scalano da soli perché sono espressi in `em`. */
.marchio { font-size: clamp(27px, 5.5vw, 36px); }

.marchio-nome {
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Lo slogan usa il carattere del sottotitolo (IBM Plex Mono), ma alzato di un
   grado su tre fronti — corpo 12 -> 14, peso 300 -> 400, grigio chiaro ->
   grigio medio — così risalta senza diventare un secondo titolo. */
.motto {
  margin-top: 6px;
  font-family: var(--font-numeri);
  font-size: var(--corpo);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--secondario);
  max-width: 28em;
  text-wrap: pretty;
}

.saluto { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.saluto-nome { font-size: var(--corpo-xl); letter-spacing: -0.01em; }
/* IL PROPRIO NOME PORTA ALLE IMPOSTAZIONI (fase 4): un collegamento muto, che si scopre
   sotto il dito — la stessa regola dei collegamenti del Giorno. */
.nome-mio { color: inherit; text-decoration: none; }
.nome-mio:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--bordo-forte); }
.nome-mio:focus-visible { outline: 2px solid var(--indaco); outline-offset: 3px; border-radius: 3px; }


/* Il silenzio dichiarato. Sta sull'asse sinistro come le fasce, e occupa
   abbastanza pagina da sembrare intenzionale: una riga sperduta in mezzo al
   bianco si legge come un caricamento che non è arrivato. */
.attesa {
  margin: 0;
  padding: clamp(56px, 9vw, 96px) 0;
  font-size: var(--corpo-xl);
  font-weight: 300;
  line-height: 1.6;
  color: #5f584c;
}

/* La riga che compare quando Notion non risponde. Una riga, non una schermata
   di errore: il resto della pagina resta usabile. */
.guasto {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--accento);
  background: var(--accento-velo-lieve);
  font-size: var(--corpo-l);
  font-weight: 300;
  line-height: 1.6;
  /* La riga del guasto è contenuto, non una nota: quando compare è la cosa
     più importante della schermata. Sta all'inchiostro pieno come tutto il
     resto del contenuto, non a un grigio intermedio. */
  color: var(--inchiostro);
  max-width: 36em;
}

@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
.dissolvi { animation: dissolvi .55s ease both; }

/* --- Titoli -------------------------------------------------------------- */

/* IL BLOCCO È UN FOGLIO, come i riquadri delle altre pagine. Era l'ultimo
   contenitore rimasto piatto sul piano: 日 Giorno carica solo il suo foglio e
   non ha mai visto `quadro.css`, quindi il rovesciamento dei due piani l'aveva
   lasciata più scura e basta — peggio di prima, non meglio.
   
   Lo usa anche il blocco «Lettura» in fondo a 道 Rotta e 調 Forma, e va bene
   così: è un blocco come gli altri, e finora era l'unico a non sembrarlo. */
.blocco {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--foglio);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra);
  padding: 24px 26px 26px;
}

.testa-blocco {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
}

/* Riscontro delle scritture: discreto quando va bene, in terracotta quando no. */
.nota-scrittura { margin: 0; line-height: 1.6; }
.nota-scrittura.nota-errore { color: var(--accento); }

/* --- Campi e bottoni ----------------------------------------------------- */

input[type='text'],
textarea {
  font: inherit;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: transparent;
  outline: none;
  transition: border-color .4s ease;
}

input[type='text'] { flex: 1 1 240px; padding: 10px 2px; font-size: var(--corpo-l); font-weight: 300; }

textarea {
  width: 100%;
  max-width: 36em;
  resize: vertical;
  padding: 6px 2px 14px;
  font-size: var(--corpo-l);
  font-weight: 300;
  line-height: 1.8;
}

input[type='text']:focus,
textarea:focus { border-bottom-color: var(--accento); }
::placeholder { color: #b3ac9f; }

.azione {
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 2px 0;
  font: inherit;
  font-size: var(--corpo-l);
  color: var(--spento);
  cursor: default;
  flex: none;
  transition: color .45s ease, border-color .45s ease;
}

.azione:not([disabled]) {
  color: var(--accento);
  border-bottom-color: var(--accento);
  cursor: pointer;
}

.collegamento {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--corpo);
  font-weight: 300;
  color: var(--secondario);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .4s ease;
}

.collegamento:hover { color: var(--inchiostro); }
.azione:focus-visible, .collegamento:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

.nota { margin: 0; }

/* --- La navigazione --------------------------------------------------------
   UNA BARRA SOLA, su ogni schermo. Sopra i mille pixel è ferma a sinistra;
   sotto, è la stessa barra chiusa dietro il pulsante a tre linee e si apre da
   sinistra sopra la pagina. Qui c'è come è fatta dentro — il marchio, le voci
   in riga, la data in fondo — e vale per tutte e due; dove sta lo decidono le
   due soglie più sotto.

   NIENTE RIQUADRI E NIENTE SFONDI per le voci: quella in cui sei si distingue
   per PESO e COLORE — inchiostro pieno contro grigio — più una linea sottile in
   terracotta sotto il nome, lo stesso segno che l'app usa per dire «attivo». */

.navigazione {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  overflow-y: auto;
  background: var(--carta);
}

/* IL MARCHIO IN CIMA: l'ensō e il nome, separati dalle voci da una linea. Il
   cerchio prende l'inchiostro e il nome il grigio: il segno pesa più della
   parola, come in ogni intestazione. */
.marchio-barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 14px 22px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 4px;
}

.enso {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--inchiostro);
}

.marchio-barra-nome {
  font-size: var(--corpo);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondario);
}

/* LA DATA IN FONDO, spezzata in due righe: giorno sopra, cifre sotto.
   `margin-top: auto` la spinge in basso, qualunque sia il numero delle voci.
   Un elemento solo, con l'id: a mezzanotte pubblico/giorno.js lo riscrive. */
.data-barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  padding: 22px 14px 6px;
  border-top: 1px solid var(--linea);
  font-family: var(--font-numeri);
  font-size: var(--corpo-s);
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--spento);
}
.data-giorno { color: var(--secondario); }
.data-cifre { color: var(--tenue); }

/* LA VERSIONE, in fondo sotto la data: dopo un `git push` dice quale versione
   si sta guardando senza aprire /health. */
.versione-barra {
  display: block;
  padding: 0 14px 14px;
  text-align: center;
  font-family: var(--font-numeri);
  font-size: var(--corpo-xs);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--tenue);
}

/* --- 週 I RIQUADRI DELLA REVISIONE ------------------------------------------

   Cinque sezioni che si guardano insieme, non un elenco che si scorre: la
   griglia si riempie da sola con quante ne stanno, e sotto i seicento pixel
   torna una colonna.

   Ogni riquadro ha il suo foglio e la sua linea, così si vede dove finisce
   uno e comincia l'altro senza titoli più grandi: la separazione la fa il
   bordo, non il corpo del carattere. */
/* A COLONNE E NON A GRIGLIA. In una griglia le righe sono alte quanto il
   riquadro più alto della riga: «Le abitudini» è sette righe corte e «Si è
   mosso» è sei righe lunghe, e sotto il primo restava un buco alto quanto la
   differenza. Le colonne del testo invece impilano: ogni riquadro comincia
   dove finisce quello sopra, e i buchi non esistono.

   L'ordine si legge lo stesso: si scende la prima colonna e si risale in cima
   alla seconda, che è come si legge un giornale. `break-inside: avoid` perché
   un riquadro spezzato a metà fra due colonne sarebbe peggio di un buco. */
.riquadri-revisione {
  display: flex;
  gap: 14px;
  align-items: start;
}

.colonna-riquadri { flex: 1 1 0; min-width: 0; }

.riquadro-revisione {
  margin-bottom: 14px;
  padding: 14px 16px 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--carta-chiara, var(--foglio));
}

.riquadro-revisione .titolo-parte { margin: 0 0 8px; }

/* I punti dell'elenco SPORGONO di diciotto pixel — in pagina è giusto, perché
   allinea il testo alla prosa — ma dentro un riquadro cadrebbero fuori dal
   bordo. Qui l'elenco rientra di altrettanto, e i punti tornano dentro. */
.riquadro-revisione .elenco-revisione { margin: 0 0 0 18px; }

/* --- I rami della revisione -------------------------------------------------

   PREDEFINITO: una riga di pillole sotto il testo, come su ogni altra pagina.
   Attraversano tutte e due le colonne, perché la prima è quella della figura e
   una pillola lì dentro non ci sta.

   SOPRA I MILLECENTO PIXEL diventano un indice nella colonna della figura, che
   la domenica resta vuota per tutta l'altezza del testo. Lì si vede cosa c'è
   dentro la settimana prima di leggere il giudizio, invece di trovare sei
   pillole in fondo a una prosa lunga — l'ultimo posto dove si guarda.

   LA SOGLIA È MILLECENTO E NON NOVECENTO: sotto, i duecentotrenta pixel
   dell'indice si prendono un terzo della riga e la prosa si allunga di cinque
   righe. L'indice deve stare in uno spazio che avanza, non in uno che serve. */
.rami-revisione {
  grid-column: 1 / -1;
  gap: 10px;
  margin-top: 20px;
}

/* LA FIGURA NON CRESCE CON LA COLONNA. `.rabdy-disegno` è larga quanto la sua
   colonna, e portandola da centootto a duecentotrenta pixel il coniglio è
   diventato alto duecentottantotto: il primo peso della pagina era un disegno,
   e l'indice cominciava trecento pixel sotto il titolo. Resta della misura di
   sempre, e l'indice sale. */
@media (min-width: 1101px) {
  .rabdy-due.rabdy-disteso .rabdy-disegno { max-width: 108px; }
}

/* Il numero della settimana e il titolo del giudizio stanno vicini: sono
   l'apertura, non due blocchi. Sessantaquattro pixel fra i due leggevano come
   una sezione mancante in mezzo. */
.revisione .numero-settimana + .titolo-parte { margin-top: 18px; }

/* I due gruppi di rami uno sotto l'altro, nella stessa colonna. */
.rami-colonna { display: contents; }

@media (min-width: 1101px) {
  .rabdy-due.rabdy-disteso .rami-colonna {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .rabdy-due.rabdy-disteso .rami-colonna .rami { margin-top: 20px; }
}

@media (min-width: 1101px) {
  .rabdy-due.rabdy-disteso .rabdy-considerazioni {
    grid-template-columns: 230px minmax(0, 1fr);
    /* DUE RIGHE, E IL TESTO LE ATTRAVERSA. Senza, i rami finiscono nella riga
       dopo — cioè sotto TUTTA la prosa — e restano appesi in fondo a duecento
       pixel di vuoto, staccati dalla figura. Con la prima riga alta quanto il
       coniglio e il testo che scavalca tutte e due, la seconda riga della
       prima colonna è esattamente lo spazio sotto di lui. */
    grid-template-rows: auto 1fr;
  }

  .rabdy-due.rabdy-disteso .testo-meditazione { grid-row: 1 / span 2; }

  .rabdy-due.rabdy-disteso .rami-revisione {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Più grandi di una pillola normale, perché qui sono un menù e non
     un'appendice: si leggono da sole, in colonna, e il conto e la freccia
     stanno agli estremi come in un indice. Duecentotrenta pixel sono quanto
     basta alla più lunga senza mandarla a capo. */
  .rabdy-due.rabdy-disteso .rami-revisione .ramo {
    justify-content: space-between;
    padding: 11px 14px 11px 16px;
    font-size: var(--corpo);
    white-space: normal;
    text-align: left;
  }

  .rabdy-due.rabdy-disteso .rami-revisione .ramo-conto { margin-left: auto; }

  /* Anche «Le lezioni» e «Le domande passate» in colonna: nello stesso posto
     si comportano allo stesso modo, se no sono due indici con due grammatiche. */
  .rabdy-due.rabdy-disteso #rami-meditazione {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .rabdy-due.rabdy-disteso #rami-meditazione .ramo {
    justify-content: space-between;
    padding: 11px 14px 11px 16px;
    font-size: var(--corpo);
    white-space: normal;
    text-align: left;
  }

  /* Il conto accanto alla freccia come nelle altre: nell'indice tutte le
     pillole si leggono con lo stesso movimento dell'occhio. */
  .rabdy-due.rabdy-disteso #rami-meditazione .ramo-conto { margin-left: auto; }
}


/* L'ultimo riquadro di una colonna non lascia il suo margine: sarebbe il vuoto
   che si sta togliendo, spostato in fondo. */
.colonna-riquadri .riquadro-revisione:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .riquadri-revisione { flex-direction: column; }
}

/* LE VOCI IN RIGA: il segno accanto al nome, come nelle barre di Bear e del
   Finder. Fino al 14/09/2026 il segno stava sopra il nome in bande alte
   novantacinque pixel: con nove pagine la colonna superava l'altezza di un
   portatile. In riga una voce è alta quarantaquattro pixel. */
.voce-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  font-size: var(--corpo);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--secondario);
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease;
}

.voce-nav .segno-nav { display: inline-flex; font-size: 20px; flex: none; color: inherit; }

.voce-nav:hover { background: var(--riga-alterna); color: var(--inchiostro-medio); }

.voce-nav.attiva { color: var(--inchiostro); font-weight: 400; }

/* Il segno dell'attiva sotto la PAROLA, e lo spazio lo tengono tutte: dandolo
   alla sola attiva, la sua riga crescerebbe di quattro pixel cambiando pagina. */
.nome-nav {
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.voce-nav.attiva .nome-nav { border-bottom-color: var(--accento); }

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

/* La croce per chiudere e la barra in cima esistono solo sotto i mille pixel. */
.chiudi-menu,
.barra-mobile,
.velo-menu { display: none; }

/* --- Entrata --------------------------------------------------------------
   Il form del segreto. Stava scritto negli attributi `style` dentro `app.js`,
   dove nessuno lo trovava e dove i colori erano numeri esadecimali copiati a
   mano invece delle variabili. Sta qui perché l'entrata è comune: non è una
   pagina, è la porta di tutte. */

.entrata { max-width: 34em; }
.errore-entrata { color: var(--accento); }

/* Nessun `font: inherit`: il campo del segreto usa il carattere di sistema,
   come faceva prima. È l'unico posto dove si digita una password, e vederla
   in un carattere diverso dal resto ricorda che non è un pensiero. */
.entrata input[type='password'] {
  flex: 1 1 240px;
  padding: 10px 2px;
  font-size: var(--corpo-l);
  font-weight: 300;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: transparent;
  outline: none;
}

.azione-entrata {
  color: var(--accento);
  border-bottom-color: var(--accento);
  cursor: pointer;
}

/* --- LA BARRA A SINISTRA -------------------------------------------------
   Sopra i mille pixel la navigazione smette di essere una riga sopra la
   testata e diventa una colonna ferma a sinistra.

   IL MOTIVO NON È ESTETICO. Con quattro voci una riga in cima bastava: si
   arriva in fondo a una pagina, si risale, si cambia. Con cinque — e con la
   sesta in arrivo — quel «si risale» è tre schermate e mezza su Rotta e su
   Cassa, cioè il costo di cambiare pagina è diventato più alto di quello di
   leggerla. Una barra ferma toglie il viaggio: la voce è dove la lasci.

   E una colonna cresce dove una riga si spezza. La riga a 375 pixel andava già
   a capo alla quinta voce, e ogni pagina nuova la peggiorava; in verticale la
   sesta voce costa diciotto pixel di altezza in una colonna che ne ha
   ottocento vuoti.

   `position: fixed` E NON `sticky`. Sticky si stacca dal flusso solo quando lo
   raggiunge lo scorrimento, e per raggiungerlo bisogna comunque risalire —
   che è il problema. Fissa vuol dire che non si muove mai, e il posto dove
   guardare è sempre lo stesso.

   IL RIENTRO STA SUL `body` e non sulla pagina. La pagina è centrata dentro
   quello che resta, quindi continua a centrarsi da sola e il suo asse sinistro
   resta il suo: nessuna delle cinque pagine sa che la barra esiste. Con un
   `padding-left` sulla pagina, invece, il corpo si sarebbe spostato DENTRO i
   1280, spingendo il bianco tutto a destra e rompendo l'asse.

   `:has(.navigazione)` perché l'entrata non ha navigazione: senza, il form del
   segreto si troverebbe rientrato di centocinquantasei pixel per fare posto a
   una barra che lì non c'è.

   TRE LINEE, E SONO L'UNICO POSTO DELL'APPLICAZIONE DOVE CE NE SONO. Una
   verticale fra la barra e il corpo, e una sottile fra una voce e l'altra. Nel
   resto dell'impaginato le cose si separano con lo spazio, e qui no per una
   ragione precisa: una colonna alta ottocento pixel con cinque parole dentro
   non ha abbastanza spazio da spendere per farsi capire con lo spazio. Le voci
   diventerebbero cinque parole sospese nel bianco, e il bianco fra la barra e
   il corpo sarebbe indistinguibile dal margine della pagina.

   La verticale dice DOVE FINISCE LA BARRA; le orizzontali dicono DOVE FINISCE
   UNA VOCE. Insieme fanno di ogni voce una banda — un riquadro di cui si
   vedono solo i lati che servono — e sono in `--linea`, il grigio con cui
   l'applicazione separa già da sempre: nessun segno nuovo, solo un posto
   nuovo dove usarlo. */
@media (min-width: 1000px) {
  body:has(.navigazione) { padding-left: var(--barra); }

  .navigazione {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--barra);
    height: 100vh;
    /* In alto si toglie l'imbottitura del marchio, così resta alla quota della
       testata: l'asse orizzontale vale quanto quello verticale. */
    padding: calc(clamp(30px, 6vw, 66px) - 16px) 0 0;
    border-right: 1px solid var(--linea);
  }
}

/* --- Il menù sotto i mille pixel -----------------------------------------------------
   LA BARRA IN CIMA resta ferma mentre si scorre: il pulsante a sinistra, e
   accanto il segno e il nome della pagina in cui sei. È alta quanto un dito
   (quarantaquattro pixel il pulsante) e prende il colore della carta, così
   quello che scorre sotto non si legge attraverso.

   LA BARRA LATERALE è fuori dallo schermo a sinistra, e il pulsante la fa
   entrare. Chiusa è anche `visibility: hidden`: fuori dallo schermo e basta,
   il tasto Tab ci entrerebbe dentro e il fuoco sparirebbe dove non si vede. */
@media (max-width: 999px) {
  .barra-mobile {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: calc(-1 * clamp(30px, 6vw, 66px)) calc(-1 * clamp(18px, 5vw, 64px)) calc(10px - var(--spazio-fasce));
    padding: 8px clamp(10px, 4vw, 56px);
    background: var(--carta);
    border-bottom: 1px solid var(--linea);
  }

  .apri-menu {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--raggio-s);
    background: transparent;
    color: var(--inchiostro);
    cursor: pointer;
  }
  .apri-menu:focus-visible { outline: 2px solid var(--accento); outline-offset: 0; }

  /* Le tre linee: tonde come i segni, e con lo stesso tratto. */
  .linee-menu { display: flex; flex-direction: column; gap: 5px; width: 20px; }
  .linee-menu i { display: block; height: 1.6px; border-radius: var(--pillola); background: currentColor; }
  .linee-menu i:nth-child(2) { width: 70%; }

  .dove-mobile {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--corpo);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--inchiostro);
  }
  .dove-mobile .segno-nav { display: inline-flex; font-size: 20px; color: var(--inchiostro-medio); }

  .navigazione {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(290px, 84vw);
    padding: 12px 0 0;
    box-shadow: var(--ombra);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  }
  .navigazione.aperta {
    transform: none;
    visibility: visible;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }

  /* Nel menù aperto le voci prendono un corpo in più: si toccano con un dito. */
  .navigazione .voce-nav { padding: 13px 22px; font-size: var(--corpo-l); }
  .navigazione .voce-nav .segno-nav { font-size: 22px; }

  .chiudi-menu {
    display: block;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    margin: 0 8px -36px 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--secondario);
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
  .chiudi-menu:focus-visible { outline: 2px solid var(--accento); outline-offset: -4px; }

  .velo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(42, 39, 35, 0.28);
  }
  .velo-menu[hidden] { display: none; }

  body.menu-aperto { overflow: hidden; }
}

@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .navigazione, .navigazione.aperta { transition: none; }
}

/* --- La barra sugli schermi bassi ------------------------------------------------
   Un portatile piccolo, con Safari e le sue barre aperte, lascia alla pagina
   settecento pixel o meno. Lì la barra si stringe — il marchio più piccolo, le
   voci un filo più basse — invece di scorrere: una navigazione che scorre
   nasconde proprio le ultime pagine, e sono quelle che si aprono di meno. */
@media (min-width: 1000px) and (max-height: 760px) {
  .marchio-barra { padding: 8px 14px 14px; gap: 6px; }
  .enso { width: 34px; height: 34px; }
  .voce-nav { padding: 8px 18px; }
  .data-barra { padding-top: 14px; }
}

/* --- Telefono ------------------------------------------------------------ */

@media (max-width: 720px) {
  :root {
    --spazio-fasce: 60px;
    --spazio-affiancati: 40px;
    --spazio-interno: 30px;
    /* Il corpo della lettura non scende sul telefono: è un corpo da leggere,
       e su uno schermo piccolo serve più che su uno grande, non meno. Prima
       scendeva per far stare più righe, che è il ragionamento di chi impagina
       un elenco, non un testo. */
    --corpo-prosa: 18px;
  }

  /* In cima il margine bianco è 48px, non 120: la navigazione non ci sta
     dentro tutta. Si accorcia quello che si può — padding e stacco — e la
     testata scende di dieci pixel invece che di trentaquattro. */
  .pagina { padding: 20px 20px clamp(72px, 14vw, 130px); }

  .testa { gap: 12px; }
  .saluto { align-items: flex-start; }

  /* La barra in cima sul telefono: la pagina ha venti pixel di imbottitura, e
     la barra li recupera per arrivare ai bordi. */
  .barra-mobile { margin: -20px -20px calc(8px - var(--spazio-fasce)); padding: 6px 10px; }

  .attesa { padding: 48px 0; font-size: var(--corpo-l); }

  .mono { font-size: var(--corpo); }
}

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


/* --- Scorrere nel tempo: ‹ oggi › --------------------------------------------

   Nate sulle schede della meditazione di 日 Giorno per risalire le voci di
   un'area, sono diventate il modo dell'applicazione per muoversi su una linea
   del tempo: 道 Rotta scorre gli anni con lo stesso comando. Stanno qui perche
   due copie identiche in due fogli sono due cose da tenere d'accordo, e la
   seconda si dimentica.

   LE FRECCE SI SPENGONO QUANDO LA STRADA FINISCE, non spariscono: una freccia
   che sparisce fa saltare di qualche pixel quello che le sta accanto a ogni
   passo, e l'etichetta ballerebbe mentre la si legge. */
.passi {
  display: flex;
  align-items: center;
  gap: 4px;
}

.passo {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-s);
  background: var(--foglio);
  color: var(--secondario);
  font-size: var(--corpo);
  line-height: 1;
  cursor: pointer;
  transition: background var(--durata) var(--molla), color 0.2s ease;
}

.passo:hover:not(:disabled) {
  background: var(--riga-alterna);
  color: var(--inchiostro);
}

.passo:disabled {
  color: var(--bordo-forte);
  cursor: default;
}

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

/* A larghezza fissa: quello che ci sta dentro cambia lunghezza — «oggi»,
   «11 ago», «2027» — e senza una misura le frecce si sposterebbero a ogni
   passo. */
.passo-etichetta {
  min-width: 4.4em;
  text-align: center;
  font-size: var(--corpo-m);
  color: var(--secondario);
}

/* --- Rabdy, accanto a quello che dice ---------------------------------------

   Ovunque parli Rabdy — la nota della settimana sul Bonsai, la lettura del
   Giorno — la sua figura sta a sinistra del testo: chi parla e cosa dice
   nella stessa riga. Sta qui e non nel foglio di una pagina perché è la
   stessa figura dappertutto, e due copie dello stesso layout divergono alla
   prima correzione.

   I colori della figura stanno nel disegno, in vista/rabdy.js: sono il suo
   costume, non tinte della pagina, e nessuna regola di un foglio li deve
   poter prendere. */
.con-rabdy {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.rabdy { margin: 0; }
.rabdy-disegno { display: block; width: 100%; height: auto; }

/* Sul telefono la figura sale sopra il testo e si fa piccola: una colonna da
   centootto pixel su trecentosettantacinque lascerebbe al testo meno di due
   terzi della riga. */
@media (max-width: 560px) {
  .con-rabdy { grid-template-columns: 1fr; gap: 10px; }
  .rabdy-disegno { width: 80px; }
}

/* --- La lezione imparata ------------------------------------------------------

   Sotto la risposta da cui è nata, sul Giorno e sul Bonsai. È un tuo
   pensiero, quindi in serif; l'etichetta con l'area è informazione, in sans e
   piccola. Il filo a sinistra è indaco: una lezione è una cosa che resta. */
.lezione {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--indaco);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lezione-etichetta { font-size: var(--corpo-xs); letter-spacing: 0.06em; color: var(--secondario); }

.lezione-testo {
  font-family: var(--font-scritto);
  font-size: var(--corpo);
  line-height: 1.45;
  color: var(--inchiostro);
}

/* --- 観 La Meditazione: il tronco ---------------------------------------------

   Il blocco di Rabdy su Giorno, Stato, Cassa e Rotta (vista/meditazione.js).
   Tre pezzi, ognuno nel suo recinto e senza scalini a sinistra: la testa, il
   testo accanto alla figura, il riquadro della domanda.

   LE DISTANZE LE DECIDE IL BLOCCO, e non la fascia. `.fascia` mette fra i
   suoi figli la distanza fra blocchi affiancati, fino a cinquantasei pixel, e
   sul Giorno era il vuoto fra il titolo e il testo: più largo di quello fra il
   testo e la domanda, cioè al contrario di come stanno le cose. */
.meditazione { gap: 0; }

.testa-meditazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.comandi-meditazione {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Quando è stata scritta: un'informazione SULLA lettura, quindi nella testa
   accanto al comando che la rifà, e non in coda al testo come una sua riga. */
.ora-meditazione {
  font-size: var(--corpo-s);
  font-weight: 400;
  white-space: nowrap;
}

/* IL PULSANTE È UN PULSANTE. Era un collegamento grigio sottolineato, e un
   collegamento promette di portarti da un'altra parte: questo invece chiede a
   Rabdy di riscrivere, e la pagina resta dov'è. La pillola è la forma dei
   comandi; il fondo chiaro la stacca dal foglio senza colorarla — il colore
   d'azione resta a «Salva», che è l'unica scrittura. */
.chiedi-rabdy,
.ramo {
  padding: 7px 16px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--pillola);
  background: var(--carta-chiara);
  font-size: var(--corpo-m);
  font-weight: 500;
  color: var(--inchiostro-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}

.chiedi-rabdy:hover,
.ramo:hover { border-color: var(--secondario); color: var(--inchiostro); }
.chiedi-rabdy:disabled { cursor: progress; color: var(--secondario); border-color: var(--bordo-forte); }
.chiedi-rabdy:focus-visible,
.ramo:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

/* Lo stacco dalla testa sta sulle due parti insieme, non sul testo: se
   restasse sul testo, la domanda a destra partirebbe più in alto di lui. */
.meditazione .rabdy-due { margin-top: 26px; }
.corpo-meditazione .prosa,
/* LA REVISIONE DENTRO IL BLOCCO NON HA MARGINE PROPRIO. `--margine-lettura` è
   centoventi pixel per lato, ed è giusto quando la revisione è una fascia
   larga quanto la pagina: è quello che le dà la misura di riga. Dentro la
   colonna della Meditazione la misura ce l'ha già la colonna, e centoventi
   pixel per lato le toglievano duecentoquaranta — su una colonna da
   trecentonovantaquattro restavano centocinquantaquattro pixel di testo, cioè
   quattro parole per riga. È il vuoto più grosso della domenica, e c'era anche
   prima dei riquadri. */
.corpo-meditazione .revisione { margin-top: 0; margin-inline: 0; }

/* Il motivo per cui una lettura non è arrivata, sotto il testo che resta
   com'era. */
#nota-lettura { margin-top: 12px; }

/* --- Rabdy in due parti ---------------------------------------------------------

   OVUNQUE PARLI RABDY — la Meditazione su Giorno, Forma, Cassa e Rotta, la
   nota della settimana sul Bonsai — la sezione è in due: a sinistra le sue
   considerazioni accanto alla figura, a destra la domanda con il campo dove
   rispondi. Da una parte si legge, dall'altra si risponde, sulla stessa
   schermata, e la domanda non scivola in fondo sotto tutto il resto. Provato
   sul Bonsai e voluto da Andrea su tutte le sezioni di Rabdy l'11/09/2026.

   Senza una domanda la colonna di destra non c'è (`.senza-domanda`), e le
   considerazioni prendono tutta la larghezza invece di lasciare un buco. */
.rabdy-due {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}

.rabdy-due.senza-domanda { grid-template-columns: minmax(0, 1fr); }

/* DISTESO: una colonna sola, ma la domanda c'è e scende sotto. È la domenica,
   quando la lettura non è di tre frasi ma di dieci: mezza colonna le
   trasformerebbe in un nastro alto quanto la pagina. Non è `senza-domanda`,
   che toglie la scheda; qui la scheda resta e cambia solo posto. */
.rabdy-due.rabdy-disteso { grid-template-columns: minmax(0, 1fr); }
.rabdy-due.rabdy-disteso .risposta-blocco { margin-top: 26px; }

/* LA DOMANDA TORNA A DESTRA QUANDO C'È POSTO. La prosa ha una misura di riga
   sua e non si allunga: in una sezione da millecentocinquanta pixel, con
   l'indice a sinistra, restavano duecentoventisei pixel di vuoto alla sua
   destra per tutta l'altezza del testo. Quel vuoto è largo quanto una scheda,
   ed è la scheda della domanda: sopra i millequattrocento risale accanto al
   testo, come negli altri giorni, invece di stare sotto. */
@media (min-width: 1400px) {
  /* La domanda prende quanto le basta e non di più: la prosa è quella che si
     legge, e con quattrocento pixel alla scheda restavano trecentonovantaquattro
     al testo — la colonna più stretta delle tre era quella che conta. */
  .rabdy-due.rabdy-disteso { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); }
  /* LA SCHEDA ARRIVA IN FONDO, e quello che cresce è il campo. La colonna
     dell'indice è la più alta delle tre e detta l'altezza della sezione: con la
     scheda ferma alla sua misura restavano trecentottanta pixel di vuoto sotto
     di lei. Adesso si distende, e i pixel in più vanno tutti al campo della
     risposta — che è l'unica cosa della pagina che li usa davvero: la domenica
     si scrive più di un rigo.

     `min-height: 0` sul campo perché in una colonna flessibile il minimo
     predefinito è il contenuto, e senza quella riga il campo non si
     restringerebbe mai sotto le sue cinque righe e mezza — cioè crescerebbe
     e basta, sfondando la scheda invece di riempirla. */
  .rabdy-due.rabdy-disteso .risposta-blocco {
    margin-top: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .rabdy-due.rabdy-disteso .campo-risposta {
    flex: 1;
    min-height: 5.4em;
  }
}

/* In mezza colonna la gronda della figura si stringe: centootto pixel su
   quattrocentosettanta lascerebbero al testo una riga troppo corta. */
.rabdy-considerazioni { grid-template-columns: 84px minmax(0, 1fr); gap: 20px; }

/* La domanda in cima alla sua colonna, alla stessa altezza del testo, e larga
   quanto la colonna. */
.rabdy-due .risposta-blocco { margin-top: 0; max-width: none; }

/* Le soglie dalla più larga alla più stretta. Sotto i novecento pixel le due
   parti si mettono una sotto l'altra; sotto i cinquecentosessanta anche la
   figura sale sopra il testo. La seconda regola ripete quella di `.con-rabdy`
   più su, perché `.rabdy-considerazioni`, scritta dopo, la coprirebbe. */
@media (max-width: 900px) {
  .rabdy-due { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .rabdy-considerazioni { grid-template-columns: 1fr; gap: 10px; }
}

/* --- La domanda di Rabdy, e dove le si risponde --------------------------------

   UN RIQUADRO, e non più un filo a sinistra con un rientro. La domanda, il
   campo, il salvataggio e la lezione sono una cosa sola — la conversazione di
   oggi — e un recinto con i suoi bordi lo dice prima ancora di leggere.

   LARGO QUANTO LA PROSA. La misura di riga vive sul corpo del testo (33em a
   diciotto pixel), e il riquadro prende il corpo della prosa solo per
   misurarsi con lei: tutto quello che ci sta dentro ha il suo corpo in pixel. */
.risposta-blocco {
  margin-top: 28px;
  padding: 18px 20px 20px;
  max-width: var(--riga-libro);
  font-size: var(--corpo-prosa);
  background: var(--carta-chiara);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-m);
}

.capo-domanda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* L'AREA È UNA PILLOLA che si legge al primo sguardo: a undici pixel in
   grigio chiaro non la vedeva nessuno, ed è l'unica cosa che dice di quale
   parte della vita si sta parlando. Inchiostro e non un colore: le aree non
   sono uno stato, e un colore per ciascuna le farebbe sembrare un semaforo. */
.area-domanda,
.area-pillola {
  padding: 3px 10px;
  border-radius: var(--pillola);
  background: rgba(42, 39, 35, 0.07);
  font-size: var(--corpo-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--inchiostro-medio);
}

.etichetta-domanda {
  font-size: var(--corpo-s);
  font-weight: 500;
  color: var(--secondario);
}

/* La domanda PIÙ GRANDE E PIÙ PIENA della prosa: è la cosa a cui rispondere.
   Più piccola del testo sopra sembrava una nota a margine; nel carattere
   dell'app, come tutto quello che scrive Rabdy, si stacca col peso. */
.domanda-lettura {
  margin: 12px 0 16px;
  font-size: var(--corpo-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--inchiostro);
  text-wrap: pretty;
}

/* Il campo è un pozzo nel riquadro: più scuro, con il suo bordo. E IN SERIF:
   è l'unico posto della pagina dove scrivi tu, e il serif è il carattere di
   quello che scrivi tu — come se fosse la pagina di un libro. */
.campo-risposta {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 5.4em;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-s);
  background: var(--foglio);
  color: var(--inchiostro);
  font-family: var(--font-scritto);
  font-size: var(--corpo-l);
  font-weight: 400;
  line-height: 1.6;
}

.campo-risposta:focus { border-color: var(--secondario); }
.campo-risposta:focus-visible { outline: 2px solid var(--secondario); outline-offset: 2px; }

/* Il riscontro a sinistra, il pulsante a destra: così «Salva» sta sempre
   nello stesso posto, ci sia una nota o no. */
.piede-risposta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}

.piede-risposta .azione { margin-left: auto; }

/* Il riscontro sotto il campo, su ogni pagina di Rabdy — anche sul Bonsai,
   dove non ha un ID. L'errore ripete il selettore intero: con uno più corto
   peserebbe meno di questa regola, e la nota di un salvataggio fallito
   resterebbe grigia. */
.piede-risposta .nota-scrittura { font-size: var(--corpo-m); font-weight: 400; color: var(--secondario); }
.piede-risposta .nota-scrittura.nota-errore { color: var(--accento); }

/* LA LEZIONE in fondo al riquadro, sotto un filo: fa parte della stessa
   conversazione ma è un'altra cosa — non la scrivi tu, la trova Rabdy in
   quello che hai scritto. Il filo indaco a sinistra, che resta sul Bonsai,
   qui sarebbe il terzo scalino; l'indaco passa all'etichetta. */
.risposta-blocco .lezione {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-left: 0;
  border-top: 1px solid var(--linea);
  gap: 4px;
}

.risposta-blocco .lezione-etichetta {
  font-size: var(--corpo-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--indaco);
}

.risposta-blocco .lezione-testo { font-size: var(--corpo-l); line-height: 1.45; }

/* Sul telefono il riquadro si stringe ai lati: ogni pixel di margine è un
   pixel tolto alla risposta. */
@media (max-width: 560px) {
  .risposta-blocco { padding: 14px 14px 16px; }
  .meditazione .rabdy-due { margin-top: 18px; }
}

/* --- I rami ----------------------------------------------------------------------

   I pulsanti col loro conto: «Le lezioni · 6», «Le domande passate · 12», «Il
   percorso», «Tutte le azioni · 23». Sono la porta di un ramo — la stessa
   pillola di «chiedi a Rabdy», e la freccia dice che si apre qualcosa di lato.

   Li usano le sezioni di Rabdy (pubblico/rami-rabdy.js) e la giornata di 日
   Giorno, che ha i suoi: il vocabolario delle etichette e le azioni dietro i
   fronti. */
.rami {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ramo { display: inline-flex; align-items: center; gap: 6px; }

.ramo-conto {
  font-family: var(--font-numeri);
  font-size: var(--corpo-s);
  font-weight: 400;
  color: var(--secondario);
}

.ramo-freccia {
  font-size: var(--corpo-l);
  line-height: 1;
  color: var(--secondario);
  transition: transform .3s var(--molla);
}

.ramo:hover .ramo-freccia { transform: translateX(2px); }

/* --- I PEZZI DELLE PAGINE DI LAVORO ---------------------------------------------------
   Dal 14/09/2026, quando Progetti e Opportunità si sono accorte di avere gli
   stessi pezzi scritti due volte — le caselle delle attività, i campi, le
   tendine, le cifre in testa, i pulsanti — ognuna con il suo blu. Sono qui una
   volta sola, e l'azione è sempre INDACO: il blu notte resta all'area Business
   delle abitudini, dove è un'identità e non un pulsante. */

/* Le cifre in testa: un foglio per numero. */
.cifra-testa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--foglio);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-bassa, var(--ombra));
  min-width: 0;
}
.cifra-etichetta { font-size: var(--corpo-s); font-weight: 600; letter-spacing: 0.04em; color: var(--secondario); }
.cifra-numero { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; color: var(--inchiostro); letter-spacing: -0.02em; }
.cifra-sotto { font-size: var(--corpo-s); line-height: 1.45; color: var(--secondario); }

.piede-testa {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.piede-testa .rami { margin: 0; }
.apice-nome { font-weight: 600; }
.apice-conto { font-size: var(--corpo-xs); color: var(--secondario); }

/* Il segno dell'apice: in parole e con la sua vetta, mai con un colore solo. */
.segno-apice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: var(--pillola);
  background: var(--indaco-velo);
  color: var(--indaco);
  font-size: var(--corpo-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* La regola scritta sotto un titolo: una scelta che dice come è stata fatta. */
.regola { margin: 0; font-size: var(--corpo-xs); color: var(--secondario); }

/* La scheda su cui si agisce: un foglio sopra il foglio. */
.scheda-azione {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 16px;
  background: var(--carta-chiara);
  border-radius: var(--raggio-m);
  box-shadow: var(--ombra-bassa, var(--ombra));
  cursor: pointer;
  min-width: 0;
  transition: transform 0.18s ease;
}
.scheda-azione:hover { transform: translateY(-1px); }
/* Il ritardo è un bordo pieno a sinistra: una forma, che resta anche in grigio. */
.scheda-azione[data-ritardo="si"],
.scheda-azione[data-tardi="si"] { box-shadow: inset 4px 0 0 var(--accento), var(--ombra-bassa, var(--ombra)); }
.scheda-nome { margin: 0; font-size: var(--corpo-l); line-height: 1.3; font-weight: 700; }
.scheda-denaro { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cifra-scheda { font-size: var(--corpo-xl); letter-spacing: -0.02em; color: var(--inchiostro); }
.scheda-passo { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; }
.etichetta-passo { font-size: var(--corpo-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--secondario); }

/* La casella di un'attività. */
.attivita-riga {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  cursor: pointer;
  font-size: var(--corpo);
  line-height: 1.4;
  color: var(--inchiostro);
}
.attivita-riga .spunta {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.6px var(--indaco);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.attivita-riga .spunta::after {
  content: '';
  width: 10px;
  height: 5px;
  border: solid var(--carta-chiara);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
.attivita-riga .spunta:checked { background: var(--indaco); box-shadow: none; }
.attivita-riga .spunta:checked::after { opacity: 1; }
.attivita-riga .spunta:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; }
.attivita-riga .spunta:disabled { cursor: progress; }
.attivita-testo { min-width: 0; overflow-wrap: anywhere; }
/* Il testo che apre la scheda del to-do (la pila, dal 15/09/2026): la casella spunta, il testo apre. */
.attivita-apri { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.attivita-apri:hover { text-decoration: underline; text-decoration-color: var(--tenue); text-underline-offset: 3px; }
.attivita-apri:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; border-radius: 3px; }
.attivita-riga.attivita-aperta,
.voce-ordine.attivita-aperta { background: var(--indaco-velo); box-shadow: -8px 0 0 var(--indaco-velo), 8px 0 0 var(--indaco-velo); border-radius: 4px; }
.attivita-riga.fatto .attivita-testo { color: var(--tenue); text-decoration: line-through; text-decoration-color: var(--tenue); }
.attivita-quando { font-size: var(--corpo-xs); color: var(--secondario); white-space: nowrap; padding-top: 2px; }
.attivita-stato { grid-column: 2; font-size: var(--corpo-xs); color: var(--secondario); }

/* Il campo del prossimo passo: lo scrive Andrea, quindi nel suo carattere. */
.nuovo-passo { display: flex; align-items: center; gap: 10px; }
.nuovo-passo .campo-passo { flex: 1 1 auto; min-width: 0; padding: 8px 2px; font-size: var(--corpo); font-weight: 400; font-family: var(--font-scritto); }
.nuovo-passo .campo-passo:focus { border-bottom-color: var(--indaco); }

/* I due pulsanti: pieno per il gesto principale, a contorno per quello accanto. */
.tasto-pieno,
.tasto-contorno {
  flex: none;
  font: inherit;
  font-size: var(--corpo-s);
  font-weight: 600;
  padding: 6px 13px;
  border: 0;
  border-radius: var(--pillola);
  cursor: pointer;
  white-space: nowrap;
}
.tasto-pieno { background: var(--indaco); color: var(--carta-chiara); }
.tasto-pieno:disabled { background: var(--binario); color: var(--tenue); cursor: default; }
.tasto-contorno { background: transparent; color: var(--indaco); box-shadow: inset 0 0 0 1.5px var(--indaco); }
.tasto-contorno:hover:not(:disabled) { background: var(--indaco); color: var(--carta-chiara); box-shadow: none; }
.tasto-contorno:disabled { color: var(--tenue); box-shadow: inset 0 0 0 1.5px var(--bordo-forte); cursor: default; }
.tasto-pieno:focus-visible,
.tasto-contorno:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; }

/* La pastiglia: una scelta rapida, della stessa famiglia dei filtri. */
.pastiglia {
  font: inherit;
  font-size: var(--corpo-xs);
  font-weight: 500;
  padding: 4px 11px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--pillola);
  background: transparent;
  color: var(--inchiostro-medio);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease;
}
.pastiglia:hover:not(:disabled) { border-color: var(--indaco); color: var(--indaco); }
.pastiglia:disabled { opacity: 0.5; cursor: progress; }
.pastiglia:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; }

.conferma .collegamento { font-size: var(--corpo-s); }

/* La tendina di dettaglio: sezioni con un titolo, coppie etichetta e valore. */
.dettaglio { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 20px; }
.dettaglio + .dettaglio { border-top: 1px solid var(--linea); }
.dettaglio-titolo {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--corpo-s);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--inchiostro);
}
.dettaglio-conto { font-size: var(--corpo-xs); font-weight: 400; letter-spacing: 0; color: var(--secondario); }
.coppia { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr); gap: 12px; font-size: var(--corpo-m); line-height: 1.45; }
.coppia-etichetta { color: var(--secondario); }
.coppia-valore { color: var(--inchiostro); overflow-wrap: anywhere; }
.vuoto-dettaglio { margin: 0; font-size: var(--corpo-m); line-height: 1.55; color: var(--secondario); }
.su-notion { font-size: var(--corpo-s); color: var(--secondario); text-decoration: none; white-space: nowrap; }
.su-notion:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.piede-dettaglio { margin: 4px 0 0; }
.nota-tendina { margin: 12px 0 0; font-size: var(--corpo-m); }

/* --- La tendina: il dettaglio che si apre da destra ---------------------------

   Il ramo della mappa (pubblico/tendina.js). Alta quanto lo schermo, larga
   quanto basta per leggere una domanda senza andare a capo ogni tre parole, e
   sul telefono tutta la larghezza. Il foglio è lo stesso dei blocchi: è un
   pezzo della pagina che si è aperto, non un'altra applicazione.

   `display` SOLO SU [open]: un <dialog> chiuso è nascosto da una regola del
   browser, e un `display: flex` sulla classe lo terrebbe in pagina anche
   chiuso. */
/* LA TENDINA LARGA: solo quando dentro ci vanno riquadri affiancati. La
   revisione della domenica ha cinque sezioni, e in cinquecentoventi pixel
   starebbero in colonna una sotto l'altra — cioè il nastro stretto da cui la
   revisione a riquadri voleva uscire. Sotto la soglia torna larga quanto lo
   schermo come tutte le altre, e i riquadri si impilano: su un telefono
   affiancare due colonne di elenchi non si legge. */
.tendina.tendina-larga { width: min(780px, 100vw); }

.tendina {
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--linea);
  background: var(--foglio);
  color: var(--inchiostro);
  box-shadow: -28px 0 60px -36px rgba(42, 39, 35, 0.6);
}

.tendina[open] {
  display: flex;
  flex-direction: row;
  animation: tendina var(--durata) var(--molla);
}

/* --- LA PILA DELLE SCHEDE (pubblico/tendina.js, dal 15/09/2026) ---------------------------
   Dentro la tendina i livelli stanno in fila: a sinistra le linguette dei livelli di prima,
   poi il livello padre quando c'è spazio (da 1400 pixel), poi quello in cima. La larghezza
   della tendina la calcola tendina.js: le schede visibili più le linguette. */
.pila-linguette { flex: none; display: flex; flex-direction: row; }
.pila-linguetta {
  width: 46px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border: 0;
  border-right: 1px solid var(--linea);
  background: var(--carta-chiara);
  color: var(--secondario);
  font: inherit;
  cursor: pointer;
}
.pila-linguetta:hover { color: var(--inchiostro); background: var(--foglio); }
.pila-linguetta:focus-visible { outline: 2px solid var(--indaco); outline-offset: -3px; }
.pila-linguetta-freccia {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--indaco-velo); color: var(--indaco); font-size: var(--corpo-l); line-height: 1;
}
.pila-linguetta-titolo {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--corpo-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(100% - 60px);
}
.pila-livelli { flex: 1; min-width: 0; display: flex; flex-direction: row; }
.tendina-livello { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--foglio); }
.tendina-livello.livello-padre { flex: 0 0 520px; border-right: 1px solid var(--linea); background: var(--carta-chiara); }
.tendina-livello.livello-padre.livello-largo { flex-basis: 780px; }
.tendina-livello.livello-cima { animation: livello .32s var(--molla); }
@keyframes livello { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tendina-livello.livello-cima { animation: none; } }

/* Il percorso, sopra il titolo del livello in cima: ogni tappa si tocca. */
.tendina-percorso {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  padding: 14px 16px 0 24px; font-size: var(--corpo-xs); color: var(--secondario);
}
.tendina-percorso-tappa {
  max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: none; padding: 0; font: inherit; color: var(--indaco); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--indaco-tenue); text-underline-offset: 3px;
}
.tendina-percorso-tappa:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; }
.tendina-percorso-qui { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--inchiostro); }
.tendina-percorso-sep { color: var(--tenue); }

/* Sul telefono, al posto del percorso: la barra per tornare al livello di prima. */
.tendina-barra {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  margin: 12px 16px 0; padding: 9px 12px; border: 0; border-radius: var(--raggio-m);
  background: var(--indaco-velo); color: var(--indaco); font: inherit; font-size: var(--corpo-s); text-align: left; cursor: pointer;
}
.tendina-barra-freccia { font-size: var(--corpo-l); line-height: 1; }
.tendina-barra-titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--inchiostro-medio); }

@keyframes tendina {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tendina[open] { animation: none; }
}

/* Il velo chiaro della scheda del Bonsai: dietro c'è la pagina da cui la
   tendina è nata, e deve restare leggibile. */
.tendina::backdrop { background: rgba(238, 232, 219, 0.45); }

.tendina-capo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 16px 16px 24px;
  border-bottom: 1px solid var(--linea);
}

.tendina-titoli { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tendina-titolo {
  margin: 0;
  font-size: var(--corpo-xl);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--inchiostro);
}

/* Il titolo prende il fuoco all'apertura (pubblico/tendina.js), ma non è un
   comando: niente anello. */
.tendina-titolo:focus { outline: none; }

.tendina-sottotitolo { margin: 0; font-size: var(--corpo-s); font-weight: 400; }

/* La croce in alto a destra, staccata dal titolo: è un comando, non una riga
   della tendina. */
.tendina-chiudi {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: -4px 0 0;
  background: none;
  border: 0;
  border-radius: var(--pillola);
  font-size: var(--corpo-xl);
  line-height: 1;
  color: var(--secondario);
  cursor: pointer;
}

.tendina-chiudi:hover { background: var(--riga-alterna); color: var(--inchiostro); }
.tendina-chiudi:focus-visible { outline: 2px solid var(--indaco); outline-offset: 2px; }

/* Scorre il corpo e non la tendina: il titolo e la croce restano sempre in
   vista, anche in fondo a sessanta domande. */
.tendina-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 24px 32px;
}

/* I filtri per area: pillole che si accendono. Accesa è a inchiostro pieno e
   non a colore: un'area non è uno stato. */
.filtri-tendina {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 10px;
}

/* Tarati perché le quattro aree e «tutte» stiano su una riga sola, anche con
   i conti a due cifre: una pillola che va a capo da sola sembra un'altra
   cosa. Misurati: 449 pixel di pillole su 472 di riga. Sul telefono vanno a
   capo, com'è giusto. */
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--pillola);
  background: transparent;
  font-size: var(--corpo-s);
  font-weight: 500;
  color: var(--inchiostro-medio);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.filtro:hover { border-color: var(--secondario); }
.filtro:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.filtro-conto {
  font-family: var(--font-numeri);
  font-size: var(--corpo-xs);
  font-weight: 400;
  color: var(--secondario);
}

.filtro[aria-pressed='true'] {
  background: var(--inchiostro-medio);
  border-color: var(--inchiostro-medio);
  color: var(--carta-chiara);
}

.filtro[aria-pressed='true'] .filtro-conto { color: var(--carta-chiara); }

/* Una voce della tendina: la testa (area, pagina, giorno) e sotto il
   contenuto. Il filo separa le voci fra loro e non la prima dal titolo, che
   ha già il suo. */
.voce-tendina { padding: 16px 0; }
.voce-tendina + .voce-tendina { border-top: 1px solid var(--linea); }

.voce-capo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voce-etichette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voce-tipo { font-size: var(--corpo-s); font-weight: 500; color: var(--secondario); }
.voce-giorno { font-size: var(--corpo-s); font-weight: 400; white-space: nowrap; }

/* Le stesse voci del riquadro, più piccole perché qui si scorre: la domanda
   di Rabdy nel carattere dell'app, la tua risposta e la lezione in serif,
   perché sono parole tue. */
.voce-domanda {
  margin: 10px 0 0;
  font-size: var(--corpo);
  font-weight: 500;
  line-height: 1.4;
  color: var(--inchiostro);
}

.voce-risposta {
  margin: 6px 0 0;
  font-family: var(--font-scritto);
  font-size: var(--corpo-l);
  line-height: 1.5;
  color: var(--inchiostro-medio);
  white-space: pre-line;
}

.voce-senza { margin: 6px 0 0; font-size: var(--corpo-m); color: var(--secondario); }

.voce-lezione {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.voce-lezione-etichetta {
  font-size: var(--corpo-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--indaco);
}

.voce-lezione-testo {
  margin: 0;
  font-family: var(--font-scritto);
  font-size: var(--corpo-l);
  line-height: 1.45;
  color: var(--inchiostro);
}

.voce-tendina > .voce-lezione-testo { margin-top: 10px; }

/* Il percorso nella tendina: una voce per parte, dal substrato in su, con i
   conti in parole e nessun totale — le parti non sono la stessa unità. */
.voce-parte { font-size: var(--corpo); font-weight: 500; color: var(--inchiostro); }

.voce-obiettivi {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voce-obiettivo {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.voce-obiettivo-testo { font-size: var(--corpo-m); line-height: 1.5; color: var(--inchiostro-medio); }

@media (max-width: 560px) {
  .tendina-capo { padding: 18px 12px 14px 18px; }
  .tendina-corpo { padding: 2px 18px 28px; }
}


/* --- 領 Chi dichiara la sua area eredita i suoi tre toni --------------------
   Quattro regole invece di sedici, e valgono su qualunque elemento: la
   scatola su 日 Giorno, la tendina del dettaglio, il filo di una tabella. */
[data-area="benessere"]    { --area: var(--area-benessere);    --su: var(--su-benessere);    --linea-area: var(--linea-benessere); }
[data-area="spiritualita"] { --area: var(--area-spiritualita); --su: var(--su-spiritualita); --linea-area: var(--linea-spiritualita); }
[data-area="business"]     { --area: var(--area-business);     --su: var(--su-business);     --linea-area: var(--linea-business); }
[data-area="relazioni"]    { --area: var(--area-relazioni);    --su: var(--su-relazioni);    --linea-area: var(--linea-relazioni); }