/* =============================================================
   DIYfinance — foglio di stile unico
   =============================================================
   L'idea guida: l'acqua. Lo zero è il pelo dell'acqua, sopra si
   galleggia, sotto si affonda.

   I tre colori delle aree non sono decorativi: ambra e viola
   distinguono svago e investimenti ovunque compaiano — barra,
   righe, legenda, curva. Stessa cosa, stesso colore.
   ============================================================= */

@font-face {
  font-family: 'Bricolage';
  src: url('../font/bricolage-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── Gettoni ──────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --plane:      #eef3f6;
  --superficie: #ffffff;
  --superficie-2: #f6fafb;
  --inchiostro: #0d1f2a;
  --inchiostro-tenue: #4c626e;
  --smorzato:   #71858f;
  --filo:       #dbe4ea;
  --filo-forte: #c3d2db;

  /* Colori di serie, tutti passati dal validatore su fondo bianco */
  --acqua:      #0089b8;   /* liquidità · costi */
  --svago:      #e08a00;   /* svago */
  --investimenti: #6b4fd8; /* investimenti */
  --tfr:        #b45309;   /* TFR: quarta serie del grafico */
  --altro-inv:  #be185d;   /* un secondo investimento distinto */
  --critico:    #d03b3b;   /* stato fisso, mai riusato come serie */
  --buono:      #0a7d0a;

  --display: 'Bricolage', ui-sans-serif, system-ui, sans-serif;
  --testo: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --raggio: 14px;
  --raggio-s: 10px;
  --colonna: 34rem;
  --colonna-larga: 66rem;

  --ombra: 0 1px 2px rgba(13, 31, 42, .05), 0 8px 24px -12px rgba(13, 31, 42, .16);
  --ombra-alta: 0 2px 4px rgba(13, 31, 42, .06), 0 20px 44px -20px rgba(13, 31, 42, .28);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane:      #0b1319;
    --superficie: #101a20;
    --superficie-2: #16232a;
    --inchiostro: #e9f1f5;
    --inchiostro-tenue: #a6bac4;
    --smorzato:   #8397a2;
    --filo:       #21313a;
    --filo-forte: #2c414c;
    /* Stessi tre colori, ristepati per il fondo scuro e rivalidati */
    --acqua:      #1f9fc9;
    --svago:      #c98500;
    --investimenti: #8b72e8;
    --tfr:        #d97706;
    --altro-inv:  #e0508f;
    --buono:      #0ca30c;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --ombra-alta: 0 2px 4px rgba(0, 0, 0, .45), 0 20px 44px -20px rgba(0, 0, 0, .8);
  }
}

/* ── Base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Nascondere vuol dire nascondere. Senza questa riga ogni elemento con
   un display suo — una griglia, una flex — resta in pagina nonostante
   l'attributo hidden, e la regola va riscritta caso per caso: e' cosi'
   che i campi dei buoni pasto restavano visibili a spunta spenta. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--plane);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--acqua);
  outline-offset: 2px;
  border-radius: 4px;
}

.e-critico { color: var(--critico); }

/* ── Testata ──────────────────────────────────────────────── */

.testata {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.5rem 1.25rem .5rem;
  max-width: var(--colonna-larga); margin-inline: auto;
}
.testata .marchio { grid-column: 2; }

.strumenti { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .15rem; }

.ingranaggio {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: .35rem .7rem; color: var(--smorzato); font-size: .85rem;
  cursor: pointer; transition: color .16s, border-color .16s;
}
.ingranaggio:hover { color: var(--inchiostro); border-color: var(--filo); }
.ingranaggio svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
/* Sotto i 44rem restano solo le icone: tre etichette non ci stanno,
   e schiacciare il marchio sarebbe peggio. */
@media (max-width: 44rem) {
  .ingranaggio span { display: none; }
  .ingranaggio { padding: .35rem .45rem; }
  .testata { padding-inline: .75rem; }
}

.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--inchiostro); }
.marchio__segno { width: 30px; height: 30px; flex: none; }
.marchio__segno circle { fill: none; stroke: var(--acqua); stroke-width: 1.6; opacity: .5; }
.marchio__onda { fill: none; stroke: var(--acqua); stroke-width: 2.2; stroke-linecap: round; }
.marchio__testo { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; }
.marchio__testo em { font-style: normal; font-weight: 400; color: var(--inchiostro-tenue); }

/* ── Impaginato delle schermate ───────────────────────────── */

.schermata { max-width: var(--colonna); margin: 0 auto; padding: 1rem 1.25rem 2rem; }
.schermata--larga { max-width: var(--colonna-larga); }

@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.schermata--entra { animation: entra .42s cubic-bezier(.22, .9, .3, 1) both; }

/* ── Intro ────────────────────────────────────────────────── */

.schermata--intro { position: relative; padding-top: 2.5rem; padding-bottom: 0; }
.intro { position: relative; z-index: 1; text-align: center; }

.occhiello {
  font-family: var(--display);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acqua); margin-bottom: .9rem;
}

.titolone {
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  font-weight: 700; letter-spacing: -.035em;
  max-width: 18ch; margin-inline: auto; text-wrap: balance;
}
.titolone__eco { color: var(--inchiostro-tenue); font-weight: 400; }

.sottotitolo { margin: 1.1rem auto 1.9rem; max-width: 32rem; color: var(--inchiostro-tenue); font-size: 1.06rem; }
.sottotitolo b { font-weight: 600; color: var(--inchiostro); }
.postilla { margin-top: 1rem; font-size: .85rem; color: var(--smorzato); }

/* Il pelo dell'acqua: annuncia la metafora prima ancora del grafico. */
.intro__acqua {
  position: relative; height: 190px;
  margin: 2.5rem -50vw 0; padding-left: 50vw; padding-right: 50vw;
  background-repeat: repeat-x;
  background-position: 0 bottom, 0 bottom;
  background-size: 1200px 120px, 900px 100px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,62 C150,112 300,12 450,62 C600,112 750,12 900,62 C1050,112 1200,12 1350,62 L1350,120 L0,120 Z' fill='%230089b8' fill-opacity='.10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C120,86 240,14 360,50 C480,86 600,14 720,50 C840,86 960,14 1080,50 L1080,100 L0,100 Z' fill='%230089b8' fill-opacity='.07'/%3E%3C/svg%3E");
}
@keyframes corrente { from { background-position-x: 0, 0; } to { background-position-x: -1200px, 900px; } }
@media (prefers-reduced-motion: no-preference) { .intro__acqua { animation: corrente 48s linear infinite; } }

/* ── Passi del wizard ─────────────────────────────────────── */

.passo { padding-top: 1.5rem; }
.passo__conta {
  font-family: var(--display); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--smorzato); margin-bottom: .8rem;
}
.passo__conta b { color: var(--acqua); font-weight: 700; }
.passo__domanda { font-size: clamp(1.6rem, 5.5vw, 2.1rem); }
.passo__aiuto { margin-top: .7rem; color: var(--inchiostro-tenue); max-width: 44rem; }
.passo__aiuto b { font-weight: 600; color: var(--inchiostro); }
.passo__azioni { display: flex; gap: .7rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }

/* ── Campi ────────────────────────────────────────────────── */

.campo { display: block; margin-top: 2rem; }

/* ── Extra sullo stipendio: tredicesima, ticket ───────────── */

.extra { border: 0; margin: 1.75rem 0 0; padding: 0; }

.spunta {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); padding: .65rem .85rem; cursor: pointer;
  transition: border-color .16s;
}
.spunta:hover { border-color: var(--filo-forte); }
.spunta:has(input:checked) { border-color: var(--acqua); background: color-mix(in srgb, var(--acqua) 5%, var(--superficie)); }
.spunta input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--acqua); flex: none; }
.spunta__corpo { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.spunta__corpo b { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.spunta__corpo i { font-style: normal; font-size: .8rem; color: var(--smorzato); }


/* ── Impostazioni ─────────────────────────────────────────── */

.scheda {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.1rem 1.15rem 1.2rem;
  margin-top: 1.25rem; box-shadow: var(--ombra);
}
.scheda__titolo { font-size: 1rem; margin-bottom: .9rem; }
.scheda__campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.scheda__nota { margin-top: .9rem; font-size: .85rem; color: var(--smorzato); }
.scheda__nota b { color: var(--inchiostro-tenue); }
.scheda select, .scheda input[type="number"] {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); padding: .45rem .55rem; outline: none;
}
.scheda select:focus, .scheda input:focus { border-color: var(--acqua); }

/* ── Bottoni ──────────────────────────────────────────────── */

.bottone {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--acqua); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: .75rem 1.4rem; cursor: pointer;
  transition: transform .16s cubic-bezier(.22,.9,.3,1), filter .16s, background-color .16s;
}
.bottone:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bottone:active { transform: translateY(0); }
.bottone--grande { font-size: 1.1rem; padding: .95rem 1.9rem; box-shadow: var(--ombra-alta); }
.bottone--calcola { padding-inline: 1.9rem; }
.bottone--fantasma { background: transparent; color: var(--inchiostro-tenue); border-color: var(--filo-forte); }
.bottone--fantasma:hover { background: var(--superficie); color: var(--inchiostro); filter: none; }
.bottone__icona { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── I passi con elenco: pannelli, catalogo, voci ────────────────────── */

/* Due colonne: le categorie da cui pescare e le voci aggiunte. Sotto i
   64rem diventano una pila, con le categorie in fila orizzontale — che
   su un telefono si scorre col pollice. */
.costi { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .costi {
    grid-template-columns: 14rem minmax(0, 40rem);
    justify-content: center; align-items: start; gap: 2rem;
  }
}

.categorie { display: grid; gap: .3rem; align-content: start; }
.categorie__titolo {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--smorzato); margin-bottom: .35rem;
}

.categoria {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  text-align: left; background: var(--superficie);
  border: 1px solid var(--filo); border-radius: var(--raggio-s);
  padding: .5rem .6rem; cursor: pointer; font-size: .9rem;
  transition: border-color .16s, transform .14s cubic-bezier(.22,.9,.3,1), box-shadow .16s;
}
.categoria:hover { border-color: var(--acqua); transform: translateX(2px); box-shadow: var(--ombra); }
.categoria:active { transform: translateX(0); }
.categoria__icona { width: 17px; height: 17px; flex: none; color: var(--acqua); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.categoria__nome { flex: 1; font-family: var(--display); font-weight: 600; line-height: 1.25; }
.categoria__piu { color: var(--filo-forte); font-size: 1.05rem; line-height: 1; }
.categoria:hover .categoria__piu { color: var(--acqua); }
.categoria__quante {
  flex: none; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--acqua); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .75rem;
}

@media (max-width: 63.99rem) {
  .categorie { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: .4rem; }
  .categorie__titolo { display: none; }
  .categoria { white-space: nowrap; }
  .categoria:hover { transform: none; }
}


/* ── Le famiglie di spesa ─────────────────────────────────────
   Novanta voci non si scorrono: si sceglie prima il campo.

   Le pastiglie vanno a capo, non scorrono di lato. Una striscia
   orizzontale con la rotella del mouse non si muove — vuole shift, o un
   trackpad — e metà di quello che contiene resterebbe invisibile a chi
   non lo sa. Quindici pastiglie su due righe si vedono tutte insieme, e
   il numero di righe non cambia mai: l'elenco sotto non balla. */
.famiglie {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.1rem;
}

.famiglia {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--filo); background: var(--superficie);
  border-radius: 999px; padding: .4rem .85rem; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--inchiostro-tenue);
  white-space: nowrap;
  transition: border-color .16s, background-color .16s, color .16s;
}
.famiglia:hover { border-color: var(--acqua); color: var(--acqua); }
.famiglia__icona {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Quella aperta è piena: fra quindici bottoni vicini una sfumatura non
   basta a dire quale elenco stai guardando. */
.famiglia[aria-pressed="true"] {
  background: var(--acqua); border-color: var(--acqua); color: #fff; font-weight: 600;
}
.famiglia__quante {
  min-width: 1.15rem; height: 1.15rem; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--superficie-2); color: var(--inchiostro-tenue);
}
.famiglia[aria-pressed="true"] .famiglia__quante {
  background: color-mix(in srgb, #fff 30%, transparent); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .famiglia { transition: none; }
}

/* ── I filtri delle uscite ───────────────────────────────────
   Due modi di restringere l'elenco, sotto le famiglie: le occasionali
   — quelle che si perdono di vista perché non tornano ogni mese — e le
   uscite di un mese preciso. */

.filtri {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}

.filtro {
  border: 1px solid var(--filo); border-radius: 999px;
  background: var(--superficie); color: var(--smorzato);
  font: inherit; font-size: .82rem; padding: .35rem .8rem;
  cursor: pointer; transition: border-color .16s, color .16s, background .16s;
}
.filtro:hover { border-color: var(--acqua); color: var(--acqua); }
.filtro--acceso {
  background: var(--acqua); border-color: var(--acqua); color: #fff; font-weight: 600;
}
.filtro--acceso:hover { color: #fff; }

.filtri__mese { display: flex; gap: .35rem; }
.filtri__mese .cella { width: auto; font-size: .82rem; padding: .3rem .45rem; }

.filtro__azzera {
  border: 0; background: none; padding: .35rem .2rem;
  font: inherit; font-size: .8rem; color: var(--acqua); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

.elenco { display: grid; gap: .5rem; }
.elenco__vuoto { color: var(--smorzato); font-size: .9rem; padding: .5rem 0; }

/* Sotto "Tutte" la colonna non elenca novanta bottoni: dice cosa fare. */
.categorie__invito {
  font-size: .84rem; color: var(--smorzato); line-height: 1.5;
  padding: .4rem .2rem;
}

.voce {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); padding: .6rem .75rem;
}

/* Una riga sola per spesa: icona, nome, importo, cadenza. */
.voce__riga { display: flex; align-items: center; gap: .6rem; }
.voce__icona { width: 19px; height: 19px; flex: none; color: var(--acqua); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.voce__ogni { font-size: .8rem; color: var(--smorzato); white-space: nowrap; }

/* ── Una riga, e la tabella quando la apri ────────────────────
   Chiusa mostra numero, nome e importo con cadenza: bastano a scorrere
   dodici voci e trovare quella da correggere. Aperta scopre la tabella
   ordinata, che è la stessa forma per ogni famiglia. */

.voce__numero {
  flex: none; min-width: 1.4rem; text-align: right;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  color: var(--filo-forte); font-variant-numeric: tabular-nums;
}

.voce__titolo {
  flex: 1 1 6rem; min-width: 0;
  font-family: var(--display); font-weight: 600; font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.voce__cifra {
  flex: none; font-size: .85rem; color: var(--inchiostro-tenue);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.voce__piega {
  flex: none; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; margin-left: -.2rem; padding: 0;
  background: none; border: 0; border-radius: var(--raggio-s);
  color: var(--filo-forte); cursor: pointer;
  transition: color .16s, background-color .16s;
}
.voce__piega:hover { color: var(--acqua); background: var(--superficie-2); }
.voce__piega svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}
.voce--aperta .voce__piega svg { transform: rotate(90deg); }

/* La tabella non esiste finché non apri: niente altezze da animare, e
   nessun campo raggiungibile col tab mentre è nascosto. */
.voce .tabella { display: none; }
.voce--aperta .tabella { display: block; }
.voce__nota { display: none; }
.voce--aperta .voce__nota:not([hidden]) { display: block; }

/* Due colonne, come le prime due del documento: cosa si compila e cosa
   ci scrivi. Su schermo stretto diventano due righe. */
.tabella {
  margin: .55rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--filo);
}
.riga {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr;
  align-items: center; gap: .5rem .9rem;
  padding: .28rem 0;
}
.riga + .riga { border-top: 1px solid color-mix(in srgb, var(--filo) 55%, transparent); }
.riga__campo { font-size: .82rem; color: var(--smorzato); }
.riga__valore { min-width: 0; }

.cella {
  width: 100%; max-width: 15rem;
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); padding: .35rem .5rem;
  font: inherit; font-size: .9rem; color: inherit; outline: none;
}
.cella:focus { border-color: var(--acqua); }
.cella--testo { font-family: var(--display); font-weight: 600; }
/* Un numero che calcola il sito: si legge e non si tocca, quindi non ha
   il bordo di una casella — sarebbe un invito a scriverci. */
.cella--letto {
  border: 0; background: none; padding-left: 0;
  font-family: var(--display); font-weight: 700; color: var(--acqua);
}
.riga__valore .minicampo { max-width: 15rem; }

/* Numero e unita' vanno letti insieme: "20 anni" e' una cosa sola, e
   scegliendo "per sempre" il numero sparisce perche' non c'e' piu' niente
   da contare. */
.durata { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.durata .minicampo { width: 5.5rem; max-width: 5.5rem; }

/* "Fino alla pensione" senza una cifra accanto è una promessa, non un
   dato: il sito conta gli anni e li scrive lì. */
/* Una nota accanto a un campo: dice cosa vuol dire il numero che stai
   scrivendo, senza rubargli la riga. */
/* Un avviso nei risultati: qualcosa che il piano non può fare come
   l'hai chiesto, e che il sito ha aggiustato da sé. */
#avvisi-fondi { margin: 1rem 0 0; }
/* Il nome "avviso" era già preso dalla notifica che compare in basso, che
   è position:fixed: questo riquadro ereditava quella regola e finiva fuori
   dal flusso, alto zero e invisibile in mezzo alla pagina. */
.avviso-fondo {
  margin: 0 0 .6rem;
  padding: .8rem 1rem;
  border-radius: var(--raggio-s);
  border: 1px solid color-mix(in srgb, var(--critico) 35%, var(--filo));
  background: color-mix(in srgb, var(--critico) 6%, var(--superficie));
  font-size: .86rem;
  line-height: 1.6;
  text-align: left;
  color: var(--inchiostro-tenue);
}
.avviso-fondo:last-child { margin-bottom: 0; }

.riga__eco {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--smorzato);
}

.durata__eco {
  font-size: .8rem;
  color: var(--acqua);
  white-space: nowrap;
}
.cella--unita { width: auto; max-width: none; }
.riga__valore .minicampo input { width: 100%; }

.voce__nota {
  margin: .6rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--filo);
  font-size: .82rem; color: var(--smorzato); line-height: 1.5;
}
.voce__nota b { color: var(--inchiostro-tenue); }

@media (max-width: 34rem) {
  .riga { grid-template-columns: 1fr; gap: .15rem; padding: .4rem 0; }
  .cella, .riga__valore .minicampo { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .voce__piega svg { transition: none; }
}

.voce__togli {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--filo); background: none; color: var(--smorzato);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: color .16s, border-color .16s;
}
.voce__togli:hover { color: var(--critico); border-color: var(--critico); }

.minicampo {
  display: flex; align-items: center; gap: .25rem; flex: none; width: 6.5rem;
  background: var(--superficie-2); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); padding: 0 .55rem;
  transition: border-color .16s;
}
.minicampo:focus-within { border-color: var(--acqua); }
.minicampo input {
  width: 100%; min-width: 0; border: 0; background: none; outline: none;
  padding: .42rem 0; font-family: var(--display); font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums;
}
.minicampo i { font-style: normal; color: var(--smorzato); font-size: .85rem; }

/* I segnaposto devono somigliare a un suggerimento, non a un dato:
   con il colore di default si confondono con un valore vero. */
.minicampo input::placeholder,
.voce__campo input::placeholder,
.scheda input::placeholder {
  color: var(--filo-forte); font-weight: 400; opacity: 1;
}

/* Il rendimento sta nella riga, non nei dettagli: su una voce di
   risparmio è metà dell'informazione, nasconderlo sarebbe assurdo. */
.minicampo--resa { width: 7.5rem; border-color: color-mix(in srgb, var(--investimenti) 35%, var(--filo)); }
.minicampo--resa input { color: var(--investimenti); }
.minicampo--resa i { font-size: .72rem; white-space: nowrap; }
.minicampo--resa:focus-within { border-color: var(--investimenti); }

/* Su schermo stretto la riga si spezza: nome e cestino sopra, importi sotto.
   Il cestino resta agganciato al nome, altrimenti finisce da solo in fondo
   e non si capisce più cosa stia cancellando. */
@media (max-width: 34rem) {
  .voce__riga { flex-wrap: wrap; row-gap: .55rem; }
  .voce__titolo { flex: 1 1 calc(100% - 3.6rem); order: -2; }
  .voce__togli { order: -1; }
  .voce__icona { order: -3; }
  .voce__piega { order: -4; }
  .minicampo--resa { width: 6.8rem; }
}

/* Data e durata servono di rado: stanno dietro una linguetta. */
.dettagli { margin-top: .3rem; }
.dettagli summary {
  cursor: pointer; font-size: .78rem; color: var(--smorzato);
  padding: .25rem 0 .1rem; list-style: none; width: max-content;
}
.dettagli summary::-webkit-details-marker { display: none; }
.dettagli summary::before { content: '▸ '; }
.dettagli[open] summary::before { content: '▾ '; }
.dettagli summary:hover { color: var(--acqua); }
.dettagli__campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; padding: .5rem 0 .2rem 1rem; }
.dettagli__peso { padding-left: 1rem; font-size: .8rem; color: var(--acqua); }

.voce__campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.voce__campo > span { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--smorzato); }
.voce__campo--spento { opacity: .45; }
.voce__campo input, .voce__campo select {
  width: 100%; min-width: 0; background: var(--superficie-2);
  border: 1px solid var(--filo); border-radius: var(--raggio-s);
  padding: .4rem .5rem; font-size: .9rem; outline: none; transition: border-color .16s;
}
.voce__campo input:focus, .voce__campo select:focus { border-color: var(--acqua); }

/* ── Dettaglio degli investimenti ─────────────────────────── */

.dettaglio {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.1rem 1.25rem 1.25rem;
  margin-top: 1.5rem; box-shadow: var(--ombra);
}
.dettaglio__titolo { font-size: 1.05rem; margin-bottom: .9rem; }
.dettaglio__scorri { overflow-x: auto; }
.dettaglio__intro { margin-bottom: .9rem; font-size: .92rem; color: var(--inchiostro-tenue); }
.dettaglio__intro b { font-family: var(--display); color: var(--inchiostro); }
.dettaglio__nota { margin-top: .9rem; font-size: .88rem; color: var(--smorzato); }

/* Il vantaggio fiscale di una spesa, detto in euro dentro i Dettagli. */
.dettagli__campi--fisco { border-top: 1px dashed var(--filo); padding-top: .7rem; margin-top: .3rem; }
.dettagli__fisco { padding-left: 1rem; margin-top: .4rem; font-size: .8rem; color: var(--buono); line-height: 1.5; }
.dettagli__fisco b { font-family: var(--display); }
.dettaglio__nota--allarme {
  color: var(--critico); background: color-mix(in srgb, var(--critico) 7%, transparent);
  border-radius: var(--raggio-s); padding: .7rem .85rem;
}
.riga--totale td { border-top: 2px solid var(--filo-forte); font-weight: 600; }
.riga--sospetta td { background: color-mix(in srgb, var(--critico) 8%, transparent); }

/* ── Fondo pensione ───────────────────────────────────────── */

.dettagli__scelta { margin: .6rem 0 .3rem 1rem; max-width: 22rem; }
.fondo__tetto {
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--filo);
  font-size: .82rem; color: var(--smorzato); line-height: 1.5;
}
.fondo__tetto b { color: var(--inchiostro-tenue); }
.fondo__tetto--allarme { color: var(--critico); }
.fondo__tetto--allarme b { color: var(--critico); }

.voce__marchietto {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--investimenti); background: color-mix(in srgb, var(--investimenti) 12%, transparent);
  padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.automatica__nota { margin-top: .8rem; font-size: .8rem; color: var(--smorzato); }
.automatica__vai {
  background: none; border: 0; padding: 0; margin-left: .3rem;
  color: var(--investimenti); font-size: .8rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* Un rimando dentro una frase: si legge come il testo che lo circonda,
   non come un pulsante, perche' interrompe una riga gia' cominciata. */
.rimando {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--acqua); font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.rimando:hover { color: var(--inchiostro); }

/* ── Scorciatoie sotto un campo ───────────────────────────────
   Sono tasti, non caselle: aiutano a compilare senza introdurre un
   secondo modo di digitare. Restano piccole e neutre, così il campo
   sopra resta identico a tutti gli altri del sito. */

.scorciatoie { display: flex; gap: .25rem; margin-top: .35rem; flex-wrap: wrap; }
.scorciatoia {
  border: 1px solid var(--filo); background: var(--superficie);
  color: var(--smorzato); border-radius: 999px;
  padding: .1rem .45rem; font-size: .74rem; font-family: var(--testo);
  cursor: pointer; transition: color .16s, border-color .16s, background-color .16s;
}
.scorciatoia:hover { color: var(--inchiostro); border-color: var(--filo-forte); }
.scorciatoia--attiva { background: var(--superficie-2); border-color: var(--filo-forte); color: var(--inchiostro-tenue); font-weight: 600; }

/* Un numero impossibile va segnalato accanto al campo che lo genera,
   non tre schermate dopo dentro un totale da miliardi. */
.voce__sospetto {
  margin-top: .5rem; padding: .5rem .7rem;
  border-radius: var(--raggio-s); font-size: .82rem;
  color: var(--critico); background: color-mix(in srgb, var(--critico) 8%, transparent);
}

/* ── Riordino ─────────────────────────────────────────────── */

.maniglia {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.9rem; margin-left: -.25rem;
  background: none; border: 0; border-radius: var(--raggio-s);
  color: var(--filo-forte); cursor: grab;
  transition: color .16s, background-color .16s;
}
.maniglia:hover { color: var(--acqua); background: var(--superficie-2); }
.maniglia:active { cursor: grabbing; }
.maniglia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; }

.voce--in-volo { opacity: .4; }
/* La linea di atterraggio dice dove finirà, prima di lasciare il dito. */
.voce--bersaglio-su { box-shadow: inset 0 3px 0 var(--acqua); }
.voce--bersaglio-giu { box-shadow: inset 0 -3px 0 var(--acqua); }

.ingranaggio--rischio:hover { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 40%, transparent); }

/* Le voci con più campi (entrate da lavoro, investimenti) diventano
   schede: una riga sola non basterebbe e comprimerebbe tutto. */
.voce--scheda { padding: .8rem .9rem 1rem; }
.voce__campi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .6rem; margin-top: .7rem;
}
.voce__scelte { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.spunta--piccola { padding: .4rem .7rem; }
.spunta--piccola .spunta__corpo b { font-size: .88rem; font-weight: 600; }
.spunta--piccola input { width: 1rem; height: 1rem; margin-top: .15rem; }

.voce__peso { margin-top: .7rem; font-size: .82rem; color: var(--acqua); min-height: 1.2em; }
.voce--scheda .voce__riga { margin-bottom: .2rem; }

/* Il totale in fondo a ogni passo: il riscontro immediato che prima
   stava nell'anteprima, ridotto a una riga sola. */
.totale {
  margin-top: 1.5rem; padding: .85rem 1.1rem;
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); color: var(--inchiostro-tenue);
  font-size: .95rem;
}
.totale b { font-family: var(--display); font-weight: 700; color: var(--inchiostro); }
.totale__eco { display: block; margin-top: .15rem; font-size: .85rem; color: var(--smorzato); }

.scomposizione {
  margin-top: -.2rem; margin-bottom: .5rem;
  font-size: .9rem; color: var(--smorzato); font-variant-numeric: tabular-nums;
}

/* Messaggio di servizio dopo scarica/carica: compare e se ne va. */
.avviso {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1.5rem);
  z-index: 20; max-width: min(32rem, calc(100vw - 2rem));
  background: var(--inchiostro); color: var(--plane);
  padding: .7rem 1.1rem; border-radius: 999px;
  font-size: .9rem; box-shadow: var(--ombra-alta);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s cubic-bezier(.22,.9,.3,1);
}
.avviso--visibile { opacity: 1; transform: translate(-50%, 0); }
.avviso--errore { background: var(--critico); color: #fff; }

/* ── Barra di ripartizione ────────────────────────────────── */

.barra { position: relative; }
.barra__pista { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; }
.barra__pista--vuota { background: var(--filo); }
.barra__tratto { display: block; height: 100%; min-width: 2px; transition: width .5s cubic-bezier(.22,.9,.3,1); }
.barra__tratto--costi { background: var(--acqua); }
.barra__tratto--svago  { background: var(--svago); }
.barra__tratto--investimenti { background: var(--investimenti); }
.barra__tratto--avanzo    { background: var(--filo-forte); }
.barra--sforata .barra__pista { box-shadow: 0 0 0 2px color-mix(in srgb, var(--critico) 55%, transparent); }

.barra--grande .barra__pista { height: 26px; border-radius: var(--raggio-s); }
.barra--grande { margin: 1.25rem 0 .5rem; }

/* I riferimenti 50 e 80 sono tacche sulla pista, non un secondo grafico. */
.barra__segno {
  position: absolute; top: -5px; bottom: -8px; width: 1px;
  background: var(--inchiostro-tenue); opacity: .3;
}
.barra__segno b {
  position: absolute; top: calc(100% + 2px); left: 4px;
  font-size: .68rem; font-weight: 600; color: var(--smorzato);
  font-family: var(--testo); white-space: nowrap;
}
.barra--grande { padding-bottom: 1.1rem; }

.ripartizione {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.1rem 1.25rem 1.25rem;
  margin-top: 1.75rem; box-shadow: var(--ombra);
}
.ripartizione__titolo { font-size: 1.1rem; }
.ripartizione__righe { display: grid; gap: .1rem; margin-top: 1.4rem; }
.ripartizione__nota {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--filo);
  color: var(--inchiostro-tenue); font-size: .93rem;
}

.riga {
  display: grid; align-items: baseline; gap: .3rem .7rem;
  grid-template-columns: auto 1fr auto auto;
  padding: .5rem 0; border-bottom: 1px solid var(--filo);
}
.riga:last-child { border-bottom: 0; }
.riga__segno {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  align-self: center; flex: none;
}
.riga__segno--costi { background: var(--acqua); }
.riga__segno--svago  { background: var(--svago); }
.riga__segno--investimenti { background: var(--investimenti); }
.riga__segno--avanzo    { background: var(--filo-forte); }
.riga__nome { font-family: var(--display); font-weight: 600; }
.riga__euro { font-variant-numeric: tabular-nums; color: var(--inchiostro-tenue); }
.riga__euro i { font-style: normal; font-size: .78rem; color: var(--smorzato); }
.riga__quota {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums;
}
.riga__regola { grid-column: 2 / -1; font-size: .78rem; color: var(--smorzato); }
.riga__regola--su { color: var(--svago); }
.riga__regola--giu { color: var(--smorzato); }

@media (max-width: 32rem) {
  .riga { grid-template-columns: auto 1fr auto; }
  .riga__euro { grid-column: 2; font-size: .85rem; }
  .riga__quota { grid-row: 1; grid-column: 3; }
}

/* ── Esito ────────────────────────────────────────────────── */

.esito { padding-top: 1rem; }
.esito__testa { text-align: center; }
.esito__occhiello {
  font-family: var(--display); font-size: .85rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--smorzato);
}
.cifrone {
  font-family: var(--display); font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 700; letter-spacing: -.045em; line-height: 1.02; margin: .35rem 0 .5rem;
}
.esito__riga { color: var(--inchiostro-tenue); max-width: 36rem; margin: 0 auto; }


.tela {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: .75rem .5rem 0;
  box-shadow: var(--ombra); overflow: hidden;
}
.tela__istruzioni { text-align: center; font-size: .82rem; color: var(--smorzato); margin-top: .7rem; }

.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; margin-top: 1.5rem; }
.riquadro { background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio); padding: .95rem 1.05rem; }
.riquadro__voce { font-size: .82rem; color: var(--inchiostro-tenue); }
.riquadro__cifra { font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.03em; margin-top: .15rem; }
.riquadro__nota { font-size: .8rem; color: var(--smorzato); margin-top: .1rem; }

.allarme {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-top: 1.2rem; padding: .95rem 1.1rem; border-radius: var(--raggio);
  border: 1px solid color-mix(in srgb, var(--critico) 35%, transparent);
  background: color-mix(in srgb, var(--critico) 8%, var(--superficie));
  font-size: .95rem;
}

.numeri { margin-top: 1.5rem; }
.numeri summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--inchiostro-tenue); padding: .5rem 0; }
.numeri__scorri { overflow-x: auto; }
.numeri__tabella { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.numeri__tabella th, .numeri__tabella td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--filo); white-space: nowrap; }
.numeri__tabella th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--smorzato); font-weight: 600; }
.numeri__tabella td:not(:first-child) { text-align: right; font-weight: 600; }

.numeri__guida { font-size: .85rem; color: var(--smorzato); margin-bottom: .6rem; }

/* ── Tabella esplorabile: anno → mese → movimenti ──────────── */

.tabella--esplora .apri {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .1rem 0; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--inchiostro);
}
.tabella--esplora .apri:hover { color: var(--acqua); }
.apri__punta { color: var(--smorzato); font-size: .75rem; width: .8rem; }
.apri--mese { font-weight: 400; font-size: .9rem; color: var(--inchiostro-tenue); padding-left: 1.1rem; }

.riga-oggi td { background: var(--superficie-2); font-weight: 600; }
.riga-anno--aperta td { background: color-mix(in srgb, var(--acqua) 5%, transparent); }
.riga-mese td { font-size: .88rem; color: var(--inchiostro-tenue); }
.riga-mese td:first-child { padding-left: .6rem; }
.riga-dettaglio > td { padding: 0; background: var(--superficie-2); }

/* Il mese aperto: cosa è entrato, cosa è uscito, dove sei rimasto. */
.mese { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 1rem; }
/* Quattro colonne che cominciano tutte alla stessa altezza e finiscono
   col tasto allineato: `stretch` invece di `start` le fa alte uguali, e
   il tasto spinto in fondo da `margin-top: auto` sta sulla stessa riga in
   tutte. Con altezze diverse l'occhio deve ripartire da capo ogni volta. */
/* Il pannello del mese vive dentro una cella della tabella, che tiene le
   cifre su una riga sola con white-space: nowrap. Qui dentro pero' ci sono
   frasi e nomi lunghi, e quel nowrap ereditato li tagliava a meta' parola:
   si azzera una volta alla radice invece che su ogni figlio. */
.mese { white-space: normal; }

.mese__gruppi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: .8rem; align-items: stretch;
}

.mese__gruppo {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--filo);
  border-left: 3px solid var(--filo-forte);
  border-radius: var(--raggio-s); padding: .7rem .85rem;
}
.mese__gruppo--entrata { border-left-color: var(--buono); }
.mese__gruppo--costi { border-left-color: var(--acqua); }
.mese__gruppo--svago { border-left-color: var(--svago); }
.mese__gruppo--investimenti { border-left-color: var(--investimenti); }
.mese__gruppo--tfr { border-left-color: var(--filo-forte); }

.mese__titolo {
  display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--smorzato);
  padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--filo);
}
.mese__titolo span { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--inchiostro); }

/* Una griglia e non un flex per riga: così le cifre di una scheda si
   incolonnano fra loro invece di finire ognuna dove la spinge il suo nome.
   Le voci sono già ordinate dalla più grossa: si legge dall'alto e si
   smette quando basta. */
.mese__voci {
  list-style: none; margin: 0; padding: 0;
  /* minmax(0, 1fr) e non 1fr: una colonna 1fr non scende sotto la
     larghezza minima del suo contenuto, e un nome lungo finisce sopra la
     cifra invece di andare a capo. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem;
  align-items: baseline;
}
.mese__voci li { display: contents; font-size: .85rem; }
/* I nomi vanno a capo invece di troncarsi: "Prevedi — contributo…" due
   volte non distingue il contrattuale dal datoriale, e una riga alta il
   doppio costa meno di un nome che non si sa cosa sia. */
.mese__voci span {
  color: var(--inchiostro-tenue); font-size: .85rem;
  min-width: 0; overflow-wrap: anywhere; hyphens: auto;
  padding: .16rem 0; line-height: 1.35;
}
.mese__voci b {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: right; font-size: .85rem; padding: .16rem 0;
}
/* Una riga di separazione ogni voce, tenue: serve a seguire il rigo con
   l'occhio quando i nomi sono lunghi, non a fare una tabella. */
.mese__voci li + li span,
.mese__voci li + li b { border-top: 1px solid color-mix(in srgb, var(--filo) 60%, transparent); }

/* Il titoletto che separa i versamenti veri da quello che diventa tuo
   senza passare dal conto. Sta fra due elenchi, quindi non ha bisogno di
   ripetere su ogni riga una cosa che vale per tutto il blocco. */
.mese__sezione {
  margin: .55rem 0 .3rem; padding-top: .45rem;
  border-top: 1px solid color-mix(in srgb, var(--filo) 70%, transparent);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--filo-forte);
}
/* `min-width: 0` non è un dettaglio: senza, un figlio di flex non scende
   mai sotto la larghezza del suo testo e la nota esce dal riquadro. */
.mese__nota {
  margin: .55rem 0 .1rem; padding-top: .5rem; border-top: 1px solid var(--filo);
  font-size: .76rem; color: var(--smorzato); line-height: 1.45;
  min-width: 0; overflow-wrap: anywhere;
}
.mese__gruppo > * { min-width: 0; }

.mese__chiusura { border-top: 1px solid var(--filo); padding-top: .8rem; display: grid; gap: .7rem; }
.mese__riga { font-size: .9rem; color: var(--inchiostro-tenue); }
.mese__riga b { font-family: var(--display); color: var(--inchiostro); }
.mese__saldi { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; }
.mese__saldi div { display: flex; align-items: baseline; gap: .4rem; }
.mese__saldi dt { font-size: .8rem; color: var(--smorzato); }
.mese__saldi dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.mese__nulla { font-size: .88rem; color: var(--smorzato); }

/* ── Le tre letture del patrimonio ────────────────────────────
   Tre risposte a tre domande diverse, non tre modi di dire la stessa
   cosa: quanto c'è, quanto resta dopo le tasse, quanto compra oggi.
   Stanno sotto il numero grande perché è quello che cambia — grafico e
   tabella restano sul lordo nominale, che è il diario del conto. */
.lente {
  display: inline-flex; margin: 1rem auto 0;
  border: 1px solid var(--filo); border-radius: 999px;
  background: var(--superficie); padding: 3px; gap: 2px;
}
.lente__tasto {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .82rem; color: var(--smorzato);
  padding: .32rem .95rem; border-radius: 999px;
  transition: background-color .16s, color .16s;
}
.lente__tasto:hover { color: var(--inchiostro); }
/* Il selezionato è pieno: fra tre tasti vicini una sfumatura non basta,
   e sapere quale delle tre cifre si sta guardando è tutto. */
.lente__tasto[aria-pressed="true"] {
  background: var(--acqua); color: #fff; font-weight: 650;
}
.lente__tasto:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }

.lente__nota {
  max-width: 36rem; margin: .6rem auto 0;
  font-size: .82rem; color: var(--smorzato); line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .lente__tasto { transition: none; }
}

.esito__azioni { display: flex; gap: .7rem; justify-content: center; margin-top: 1.8rem; flex-wrap: wrap; }

/* ── Il grafico ───────────────────────────────────────────── */

.grafico { position: relative; width: 100%; }
.grafico__tela { position: relative; width: 100%; }
.grafico__svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.grafico__svg:focus-visible { outline: 3px solid var(--acqua); outline-offset: -3px; border-radius: var(--raggio); }

.grafico__legenda { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; padding: 0 .25rem .6rem; }
.grafico__legenda button.chiave {
  border: 1px solid var(--filo); background: var(--superficie);
  border-radius: 999px; padding: .28rem .7rem; cursor: pointer; font: inherit;
  font-size: .82rem; transition: border-color .16s, color .16s, background-color .16s;
}
.grafico__legenda button.chiave:hover { border-color: var(--acqua); }

/* Acceso e spento devono distinguersi da fermi, non al confronto: il tasto
   di una curva accesa è pieno e ha il bordo marcato, quello di una spenta
   si svuota e il suo segno diventa un contorno. Prima le sei voci
   sembravano tutte uguali e il grafico ne mostrava due. */
.grafico__legenda button.chiave[aria-pressed="true"] {
  background: var(--superficie-2);
  border-color: var(--filo-forte);
  color: var(--inchiostro);
  font-weight: 600;
}
.chiave--spenta { color: var(--filo-forte); border-style: dashed; }
.chiave--spenta .chiave__segno { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

.chiave { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--inchiostro-tenue); }
.chiave__segno { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.chiave__segno--investimenti { background: var(--investimenti); }
.chiave__segno--liquido { background: var(--acqua); }
.chiave__segno--tfr,
.chiave__segno--tfr-solo { background: var(--tfr); }
.chiave__segno--inv-a { background: var(--investimenti); }
.chiave__segno--inv-b { background: var(--altro-inv); }
.chiave__segno--inv-c { background: var(--acqua); }

/* Il segno porta anche il tratteggio della curva: quando i colori finiscono
   e si ripetono, è la forma a distinguere. */
.chiave__segno--tratteggiata { background-image: repeating-linear-gradient(90deg, transparent 0 3px, var(--superficie) 3px 5px); }
.chiave__segno--punteggiata { background-image: repeating-linear-gradient(90deg, transparent 0 2px, var(--superficie) 2px 4px); }

/* Impilate e non sovrapposte, le due bande possono essere più piene senza
   impastarsi: prima ogni tinta doveva restare trasparente per lasciar
   vedere l'altra sotto, e il risultato era slavato. */
.stop-acqua-su    { stop-color: var(--acqua); stop-opacity: .34; }
.stop-acqua-giu   { stop-color: var(--acqua); stop-opacity: .12; }
.stop-messa-su    { stop-color: var(--investimenti); stop-opacity: .30; }
.stop-messa-giu   { stop-color: var(--investimenti); stop-opacity: .12; }
.stop-fondale-su  { stop-color: var(--critico); stop-opacity: .05; }
.stop-fondale-giu { stop-color: var(--critico); stop-opacity: .3; }

.grafico__linea { fill: none; stroke: var(--acqua); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico__linea--sotto { stroke: var(--critico); }
.grafico__linea--investimenti { stroke: var(--investimenti); }

/* Il bordo di sopra è il patrimonio: la curva che il titolo promette, e
   quella che si va a cercare. Più spessa delle altre perché in un grafico
   impilato la silhouette è la prima cosa che si legge. */
.grafico__linea--patrimonio { stroke: var(--investimenti); stroke-width: 2.75; }

/* La liquidità è il confine fra le due bande, non una curva a sé: più
   sottile, perché a marcarla troppo si legge come un secondo totale. */
.grafico__linea--liquido { stroke: var(--acqua); stroke-width: 1.75; }

/* Le serie in più sono linee sottili senza campitura: si leggono sopra le
   due aree senza coprirle. Il tratteggio è la seconda codifica che la
   norma chiede quando i colori si avvicinano in visione anomala. */
.grafico__linea--tfr,
.grafico__linea--tfr-solo { stroke: var(--tfr); stroke-width: 1.75; }
.grafico__linea--inv-a { stroke: var(--investimenti); stroke-width: 1.75; }
.grafico__linea--inv-b { stroke: var(--altro-inv); stroke-width: 1.75; }
.grafico__linea--inv-c { stroke: var(--acqua); stroke-width: 1.75; }
.grafico__linea--tratteggiata { stroke-dasharray: 6 4; }
.grafico__linea--punteggiata { stroke-dasharray: 2 3; }

.grafico__hairline { stroke: var(--filo); stroke-width: 1; }
.grafico__zero { stroke: var(--filo-forte); stroke-width: 1; }

.grafico__tacca, .grafico__anno {
  font-family: var(--testo); font-size: 11px; fill: var(--smorzato); font-variant-numeric: tabular-nums;
}
/* La scala sta nel margine: può essere netta senza finire in mezzo alle
   curve, e le linee di griglia si fanno più tenui perché ora c'è un
   riferimento scritto a cui appoggiarsi. */
.grafico__tacca { fill: var(--filo-forte); font-size: 10.5px; }
.grafico__hairline { stroke: color-mix(in srgb, var(--filo) 70%, transparent); }

.grafico__nodo { fill: var(--acqua); stroke: var(--superficie); stroke-width: 2; }
.grafico__nodo--critico { fill: var(--critico); }
.grafico__nodo--investimenti { fill: var(--investimenti); }
.grafico__nodo--cursore { fill: var(--acqua); }

.grafico__guida { stroke: var(--filo-forte); stroke-width: 1; }
.grafico__guida--critico { stroke: color-mix(in srgb, var(--critico) 55%, transparent); }

/* L'alone in colore superficie tiene le etichette leggibili anche quando
   passano sopra una linea di griglia: separa senza aggiungere inchiostro. */
.grafico__etichetta, .grafico__dettaglio, .grafico__valore-fine {
  paint-order: stroke fill; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round;
}
.grafico__etichetta { font-family: var(--display); font-size: 12.5px; font-weight: 700; fill: var(--inchiostro); }
.grafico__etichetta--critico { fill: var(--critico); }
.grafico__dettaglio { font-family: var(--testo); font-size: 11px; fill: var(--smorzato); }
.grafico__dettaglio--critico { fill: var(--critico); opacity: .85; }
.grafico__valore-fine { font-family: var(--display); font-size: 13px; font-weight: 700; fill: var(--inchiostro); }
/* La seconda etichetta e' una nota accanto alla prima, non un secondo
   titolo: piu' piccola, del colore della sua curva, e senza l'alone che
   la faceva sembrare incollata sopra il disegno. */
.grafico__valore-fine--secondo {
  font-size: 11.5px; fill: var(--acqua); font-weight: 600;
  stroke-width: 3px;
}

.grafico__crocefilo { stroke: var(--acqua); stroke-width: 1; opacity: .45; }
.grafico__zona { pointer-events: all; cursor: crosshair; }

.grafico__fumetto {
  position: absolute; top: 0; left: 0; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio-s); box-shadow: var(--ombra-alta);
  padding: .45rem .7rem; display: grid; gap: .1rem; white-space: nowrap; z-index: 2;
}
.grafico__fumetto-data { font-size: .74rem; color: var(--smorzato); }
.grafico__fumetto-valore { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.grafico__fumetto-riga { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.grafico__fumetto-riga strong { font-family: var(--display); font-size: 1rem; }

.grafico__lettura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grafico--mini .grafico__svg { touch-action: auto; }

/* ── Domande (contenuto stabile) ──────────────────────────── */

.domande { max-width: var(--colonna-larga); margin: 3.5rem auto 0; padding: 2.5rem 1.25rem 0; border-top: 1px solid var(--filo); }
.domande__titolo { font-size: 1.5rem; margin-bottom: 1.5rem; }
.domande__griglia { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .domande__griglia { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; } }
.domande h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.domande p { color: var(--inchiostro-tenue); font-size: .95rem; }
.domande b { color: var(--inchiostro); font-weight: 600; }

/* ── Piede ────────────────────────────────────────────────── */

.piede {
  max-width: var(--colonna-larga); margin: 3.5rem auto 0;
  padding: 1.75rem 1.25rem 2.5rem; border-top: 1px solid var(--filo);
  color: var(--smorzato); font-size: .85rem;
}
.piede strong { color: var(--inchiostro-tenue); font-family: var(--display); }
.piede__nota { margin-top: .5rem; max-width: 44rem; }
.piede__build { margin-top: .9rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .74rem; opacity: .7; }

/* ── Movimento ridotto ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── La scheda del mutuo ──────────────────────────────────── */

/* ── Da quando parte il calcolo ───────────────────────────────
   È una delle due decisioni che vengono prima di ogni numero — l'altra è
   chi c'è — e per un po' è stata una postilla in fondo alla pagina. Qui
   ha il peso che ha: un riquadro proprio, con i due selettori grandi. */

.partenza {
  max-width: 32rem;
  margin: 1.6rem auto 0;
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--acqua) 30%, var(--filo));
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--acqua) 5%, var(--superficie));
  text-align: left;
}

.partenza__occhiello {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acqua);
}

.partenza__nota {
  margin: .8rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--smorzato);
}

/* Partire da un mese già passato è una scelta legittima e non ovvia:
   vale la pena dire cosa comporta invece di lasciarla passare muta. */
.apertura__avviso {
  margin: .7rem 0 0;
  padding: .6rem .8rem;
  border-radius: var(--raggio-s);
  background: var(--superficie);
  border: 1px solid var(--filo);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--smorzato);
}

.partenza .mesebarra { margin: 0; }
.partenza .mesebarra .cella {
  font-size: 1.05rem;
  font-weight: 600;
  padding: .5rem .6rem;
}

/* ── Il selettore del mese di partenza ────────────────────────
   Mese e anno affiancati, sulla prima pagina: da quando si guarda. */

.mesebarra {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 auto .5rem;
  max-width: 42rem;
}

.mesebarra__mese { width: auto; min-width: 9rem; flex: 0 0 auto; }
.mesebarra__anno { width: auto; min-width: 5.5rem; flex: 0 0 auto; }

.scalini {
  margin-top: .8rem; padding: .7rem .85rem;
  background: var(--superficie-2); border: 1px solid var(--filo);
  border-radius: var(--raggio-s);
}
.scalini__titolo {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--smorzato); margin-bottom: .55rem;
}
.scalino { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; flex-wrap: wrap; }
.scalino__da { font-size: .85rem; color: var(--smorzato); }
.minicampo--stretto { width: 5.6rem; }
.minicampo--stretto i { font-size: .72rem; }
.scalini__aggiungi {
  background: none; border: 1px dashed var(--filo-forte); border-radius: var(--raggio-s);
  padding: .3rem .7rem; font-size: .82rem; color: var(--inchiostro-tenue); cursor: pointer;
}
.scalini__aggiungi:hover { border-color: var(--acqua); color: var(--acqua); }

/* Rata, interessi e detrazione: la risposta alla domanda che stai scrivendo */
.mutuo__esito {
  margin-top: .9rem; padding: .8rem .9rem;
  background: color-mix(in srgb, var(--acqua) 5%, var(--superficie-2));
  border: 1px solid color-mix(in srgb, var(--acqua) 20%, transparent);
  border-radius: var(--raggio-s);
}
.mutuo__cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem .9rem; }
.mutuo__cifre div { display: flex; flex-direction: column; }
.mutuo__cifre dt { font-size: .72rem; color: var(--smorzato); text-transform: uppercase; letter-spacing: .04em; }
.mutuo__cifre dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.mutuo__cifre dd i { font-style: normal; font-size: .7rem; font-weight: 400; color: var(--smorzato); }
.mutuo__nota { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--filo); font-size: .8rem; color: var(--smorzato); line-height: 1.5; }
.mutuo__nota b { color: var(--inchiostro-tenue); }
.mutuo__vuoto { font-size: .85rem; color: var(--smorzato); }
.scalini__nota { margin-top: .6rem; font-size: .78rem; color: var(--smorzato); line-height: 1.5; }
.scalini__vuoto { font-size: .82rem; color: var(--smorzato); margin-bottom: .5rem; }

/* Le spese che generano il conguaglio, dentro l'anno aperto. */
.riga-fiscale__nome { font-weight: 600; color: var(--inchiostro); }
.riga-fiscale__nota { font-style: normal; color: var(--critico); font-size: .8rem; }

/* L'anno in cui il tetto morde: recuperi il massimo, non di più. */
.cella--tetto { color: var(--critico); }

/* Il mutuo già in corso: dove sei, e cosa ti sei lasciato dietro. */
.mutuo__dove { font-size: .85rem; color: var(--inchiostro-tenue); margin: .6rem 0 0; line-height: 1.6; }
.riga--passata td { opacity: .45; }
.qui {
  font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  color: var(--acqua); text-transform: uppercase; margin-left: .35rem;
}

/* ── La barra delle sezioni ───────────────────────────────────
   Fissa in alto, sempre raggiungibile. Su schermo stretto scorre
   in orizzontale invece di andare a capo: una riga sola, sempre. */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--plane) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filo);
}
.barra__dentro {
  display: flex; gap: .25rem; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: .5rem 1rem;
  overflow-x: auto; scrollbar-width: none;
}
.barra__dentro::-webkit-scrollbar { display: none; }
.barra__voce {
  flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 500;
  color: var(--inchiostro-tenue);
  padding: .45rem .7rem; border-radius: var(--raggio-s);
  white-space: nowrap;
}
.barra__voce:hover { background: var(--superficie); color: var(--inchiostro); }
.barra__voce--qui { background: var(--superficie); color: var(--inchiostro); font-weight: 650; }
/* Nella barra e' l'unica cosa che agisce invece di spostarti: gli altri
   passi ti portano dove compili, questo mostra il risultato. Percio' e'
   pieno e non piatto — si vede che e' un'azione, non una destinazione. */
.barra__voce--calcola {
  margin-left: auto;
  background: var(--acqua); color: #fff; font-weight: 700;
  padding-left: 1.15rem; padding-right: 1.15rem;
  text-transform: uppercase; letter-spacing: .04em; font-size: .78rem;
}
.barra__voce--calcola:hover,
.barra__voce--calcola.barra__voce--qui { background: var(--inchiostro); color: #fff; }
.barra__voce:focus-visible { outline: 2px solid var(--acqua); outline-offset: 1px; }

/* ── L'etichetta costo/svago ──────────────────────────────────
   Un tasto, non un menù: sono due sole possibilità e si alternano. */
.etichetta {
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; text-transform: lowercase;
  padding: .18rem .5rem; border-radius: 999px;
  flex: 0 0 auto;
}
.etichetta--costo { background: color-mix(in srgb, var(--acqua) 12%, transparent); color: var(--acqua); }
.etichetta--svago { background: color-mix(in srgb, var(--svago) 16%, transparent); color: var(--svago); }
.etichetta:hover { border-color: currentColor; }
.etichetta:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ── Il conto del mese ────────────────────────────────────────
   E − C − S − R − L su una riga sola: si legge come un'equazione
   perché è un'equazione. Su schermo stretto scorre in orizzontale. */
.cassa {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.1rem 1.2rem; margin: 1.4rem 0;
}
.cassa__titolo { font-family: var(--display); font-size: 1.05rem; margin: 0 0 .9rem; }
.cassa__riga {
  display: flex; align-items: stretch; gap: .5rem;
  overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin;
}
.cassa__segno {
  display: flex; align-items: center;
  color: var(--smorzato); font-size: 1.1rem; flex: 0 0 auto;
}
.cassa__voce {
  flex: 1 1 0; min-width: 6.5rem;
  border-radius: var(--raggio-s); padding: .55rem .7rem;
  background: var(--superficie-2); border-top: 3px solid var(--filo-forte);
}
.cassa__voce dt { font-size: .74rem; color: var(--smorzato); margin-bottom: .15rem; }
.cassa__voce dd { margin: 0; font-size: 1rem; font-weight: 650; }
.cassa__voce--entrate { border-top-color: var(--buono); }
.cassa__voce--costi { border-top-color: var(--acqua); }
.cassa__voce--svago { border-top-color: var(--svago); }
.cassa__voce--investimenti { border-top-color: var(--investimenti); }
.cassa__voce--risparmi { border-top-color: var(--acqua); }
.cassa__voce--imprevisti {
  border-top-color: var(--buono);
  background: color-mix(in srgb, var(--buono) 8%, var(--superficie-2));
}

/* La lettera che nomina il termine: piccola, in alto, sempre nello stesso
   posto. È il filo che lega la barra in alto all'equazione qui sotto. */
.cassa__voce { position: relative; padding-top: 1.35rem; }
.cassa__lettera {
  position: absolute; top: .4rem; left: .7rem;
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; color: var(--smorzato);
}
.cassa__equazione {
  margin: -.5rem 0 .9rem; font-family: var(--display); font-size: .9rem;
  letter-spacing: .06em; color: var(--smorzato);
}
.cassa__liquidita {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--filo);
  font-size: .88rem; color: var(--inchiostro-tenue);
}
.cassa__formula {
  display: inline-block; margin-left: .5rem; font-family: var(--display);
  font-size: .78rem; color: var(--smorzato); letter-spacing: .04em;
}
.barra__lettera {
  display: inline-block; margin-right: .35rem;
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; color: var(--smorzato);
}
.barra__voce--qui .barra__lettera { color: var(--acqua); }
.cassa__voce--rosso {
  border-top-color: var(--critico);
  background: color-mix(in srgb, var(--critico) 10%, var(--superficie-2));
}
.cassa__voce--rosso dd { color: var(--critico); }
.cassa__esito { margin: .9rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--inchiostro-tenue); }
.cassa__esito--rosso { color: var(--critico); }

/* ── La tabella esplorabile, in due metà ──────────────────────
   A sinistra i flussi del periodo, a destra le giacenze. La riga
   di gruppo e il filo verticale dicono dove passa il confine. */
.testa--gruppi th {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--smorzato); font-weight: 700; padding-bottom: .15rem;
  border-bottom: 0;
}
.gruppo--flussi { text-align: left; }
.gruppo--saldi { text-align: left; border-left: 1px solid var(--filo-forte); padding-left: .6rem; }
.tabella--esplora .cella--stacco { border-left: 1px solid var(--filo-forte); padding-left: .6rem; }
.tabella--esplora .cella--vuota { color: var(--filo-forte); }
.tabella--esplora .cella--vuota::after { content: '—'; }

/* Una nota che segnala un problema, dentro una scheda di impostazioni. */
.scheda__nota--allarme { color: var(--critico); }

/* Il selettore "di chi è" quando sta in evidenza sulla riga della voce. */
.voce__chi {
  flex: 0 0 auto; font: inherit; font-size: .78rem;
  color: var(--inchiostro-tenue); background: var(--superficie-2);
  border: 1px solid var(--filo); border-radius: 999px; padding: .18rem .5rem;
}

/* ── Il blocco per insolvenza ─────────────────────────────────
   Prende il posto del patrimonio, non gli si affianca: finché il
   piano non regge, quel numero non esiste. */
.insolvenza {
  background: color-mix(in srgb, var(--critico) 8%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--critico) 35%, transparent);
  border-radius: var(--raggio); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem;
}
.insolvenza__titolo {
  font-family: var(--display); font-size: 1.3rem; margin: 0 0 .6rem;
  color: var(--critico);
}
.insolvenza__testo { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--inchiostro); }
.insolvenza__azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ── La dashboard: si guarda, non si tocca ────────────────────
   I mesi in cui il conto va sotto zero si trovano scorrendo, senza
   dover leggere ogni cifra. */
.riga-anno--rossa td:first-child::after,
.riga-mese--rossa td:first-child::after {
  content: '●'; color: var(--critico); margin-left: .4rem; font-size: .7rem;
}
.riga-mese--rossa td { background: color-mix(in srgb, var(--critico) 6%, transparent); }

/* Il ponte fra diagnosi e cura: da qui si va alla pagina che contiene
   la voce da cambiare, perché qui si legge soltanto. */
.mese__gruppo .mese__vai { margin-top: auto; align-self: flex-start; }
.mese__vai {
  margin-top: .5rem; border: 1px solid var(--filo-forte); background: var(--superficie);
  font: inherit; font-size: .74rem; color: var(--inchiostro-tenue);
  padding: .25rem .6rem; border-radius: 999px; cursor: pointer;
}
.mese__vai:hover { border-color: var(--acqua); color: var(--acqua); }
.mese__gruppo--imprevisti { border-left-color: var(--buono); }

/* ── Lo zoom sul grafico ──────────────────────────────────────
   Restringe la finestra guardata, non quella calcolata: i numeri
   restano gli stessi, cambia solo quanto ne vedi per volta. */
.zoom {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .5rem 0 0; font-size: .82rem; color: var(--inchiostro-tenue);
}
.zoom__campo { display: flex; align-items: center; gap: .3rem; }
.zoom__campo select { font: inherit; font-size: .82rem; padding: .18rem .3rem; }
.zoom__tutto {
  border: 1px solid var(--filo-forte); background: var(--superficie);
  font: inherit; font-size: .78rem; color: var(--inchiostro-tenue);
  padding: .2rem .6rem; border-radius: 999px; cursor: pointer;
}
.zoom__tutto:hover { border-color: var(--acqua); color: var(--acqua); }

/* Un deposito chiuso non ha un valore finale: è diventato liquidità. */
.chiuso { font-style: normal; font-weight: 500; font-size: .82rem; color: var(--smorzato); }

/* Il nome dell'intestatario dentro la cella dell'anno: risparmia una
   colonna, e con due persone la tabella resta larga come con una. */
.riga-anno__chi { font-style: normal; font-weight: 500; color: var(--smorzato); font-size: .85em; }

/* ── I numeri, anno per anno ──────────────────────────────────
   Una tabella di finanza personale spaventa quando chiede di leggere
   venti cifre per capire se le cose vanno bene. Qui le colonne sono
   cinque, le righe hanno aria, e la barra del patrimonio si legge
   senza leggere: la forma dice il verso prima che tu legga i numeri. */
.anni {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.3rem 1.4rem; margin-top: 1.6rem;
}
.anni__titolo { font-family: var(--display); font-size: 1.15rem; margin: 0 0 .25rem; }
.anni__guida { margin: 0 0 1rem; font-size: .85rem; color: var(--smorzato); }
.anni__scorri { overflow-x: auto; }

.anni__tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.anni__tabella th {
  text-align: right; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--smorzato);
  padding: 0 .7rem .6rem; border-bottom: 1px solid var(--filo);
  white-space: nowrap;
}
.anni__tabella th:first-child { text-align: left; }
.anni__tabella td {
  text-align: right; padding: .62rem .7rem; border-bottom: 1px solid var(--filo);
  white-space: nowrap; font-size: .92rem; color: var(--inchiostro-tenue);
}
.anni__tabella td:first-child { text-align: left; color: var(--inchiostro); }
.anni__tabella tr:last-child td { border-bottom: 0; }

/* La riga dell'anno porta il peso: è quella che si scorre. */
.anni__tabella .riga-anno td { font-weight: 600; color: var(--inchiostro); }
.anni__tabella .riga-anno:hover td { background: var(--superficie-2); }
.anni__tabella .riga-anno--aperta td { background: var(--superficie-2); }
.anni__tabella .riga-oggi td { color: var(--smorzato); font-style: italic; }

/* I mesi stanno sotto, rientrati e più leggeri: si capisce a occhio
   che sono un dettaglio dell'anno e non righe di pari grado. */
.anni__tabella .riga-mese td { font-size: .86rem; font-weight: 400; }
.anni__tabella .riga-mese td:first-child { padding-left: 1.6rem; color: var(--inchiostro-tenue); }
.anni__tabella .riga-mese--rossa td { background: color-mix(in srgb, var(--critico) 6%, transparent); }

.anni__tabella .apri {
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  padding: 0; display: inline-flex; align-items: center; gap: .45rem;
}
.anni__tabella .apri__punta { color: var(--smorzato); font-size: .7rem; }

/* L'unica intestazione che si clicca: aprendola, la colonna Investito
   si scompone in una colonna per investimento. */
.apri-colonna {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: .3rem;
}
.apri-colonna:hover { color: var(--acqua); }
.apri-colonna[aria-expanded="true"] { color: var(--investimenti); }

/* Le colonne di dettaglio stanno un gradino sotto al totale: si legge
   prima quanto fa, poi da dove viene. */
.anni__tabella .inv-dettaglio { color: var(--smorzato); font-size: .88em; }
.anni__tabella .apri:hover { color: var(--acqua); }
.anni__tabella .vuota::after { content: '—'; color: var(--filo-forte); }
.anni__tabella .giu { color: var(--critico); }

/* Il confine fra i gruppi. La classe si scriveva già in ogni cella ma
   nessuna regola la raccoglieva: le due metà della tabella erano
   annunciate dall'intestazione e poi non separate da niente. */
.anni__tabella .stacco { border-left: 1px solid var(--filo-forte); }
.anni__tabella th.stacco { padding-left: .8rem; }
.anni__tabella td.stacco { padding-left: .8rem; }

/* Dieci colonne di cifre si perdono di vista a metà riga: la riga sotto
   il dito si illumina, e si arriva in fondo sapendo ancora di che mese è. */
.anni__tabella .riga-mese:hover td { background: var(--superficie-2); }
.anni__tabella .riga-mese--rossa:hover td {
  background: color-mix(in srgb, var(--critico) 10%, transparent);
}

/* Il patrimonio: prima la barra, poi la cifra. Chi scorre legge la
   barra, chi controlla legge il numero. */
.anni__tabella .patrimonio { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.quota {
  flex: 0 0 4.5rem; height: 6px; border-radius: 3px;
  background: var(--filo); overflow: hidden;
}
.quota__piena { display: block; height: 100%; background: var(--acqua); border-radius: 3px; }
.anni__tabella .patrimonio b { font-weight: 700; color: var(--inchiostro); min-width: 5.5rem; }

@media (max-width: 640px) {
  .anni { padding: 1rem .9rem; }
  .quota { flex-basis: 2.5rem; }
  .anni__tabella td, .anni__tabella th { padding-left: .45rem; padding-right: .45rem; }
}


/* ── La pagina d'ingresso ─────────────────────────────────────
   Stesso peso della copertina: una domanda sola, grande, al centro.
   È il primo passo vero e deve sembrarlo — un campo sperduto in alto
   a sinistra non dice "comincia da qui". */
.apertura { text-align: center; max-width: 44rem; margin: 3.5rem auto 0; }
/* Il corpo scende quel tanto che basta perché la seconda riga —
   'concorrono al patrimonio?' — stia intera: l'a capo deve cadere dove
   l'ho messo io, non dove capita. */
.apertura .titolone { max-width: 100%; font-size: clamp(1.9rem, 6.5vw, 2.9rem); }
.apertura .sottotitolo { margin-bottom: 2.4rem; }

.apertura__persone {
  background: var(--superficie); border: 1px solid var(--filo);
  border-radius: var(--raggio); padding: 1.1rem 1.3rem;
  max-width: 26rem; margin-inline: auto; text-align: left;
}
.apertura__azioni { margin-top: 2rem; }

.avvio__aggiungi {
  margin-top: .8rem; width: 100%; cursor: pointer;
  border: 1px dashed var(--filo-forte); background: none; border-radius: var(--raggio-s);
  font: inherit; font-size: .85rem; color: var(--inchiostro-tenue); padding: .55rem;
}
.avvio__aggiungi:hover { border-color: var(--acqua); color: var(--acqua); border-style: solid; }
.avvio__aggiungi span { font-weight: 700; margin-right: .2rem; }

/* La persona: l'iniziale in un tondo, il nome grande, la croce — e sotto,
   nascita ed età pensionabile. Le ultime due non sono un dettaglio
   anagrafico: sono quello che permette a un lavoro di finire "alla
   pensione" senza che tu debba contare gli anni a mano. */
.persona {
  padding: .7rem 0; border-bottom: 1px solid var(--filo);
}
.persona:last-of-type { border-bottom: 0; }
.persona__testa { display: flex; align-items: center; gap: .8rem; }

.persona__eta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: .6rem 0 0 3.1rem;
}

.persona__campo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--smorzato);
}
.persona__campo .cella { width: auto; }
.persona__campo .minicampo { width: 6.2rem; }

/* Il tasso di sostituzione va spiegato: è l'unico campo della pagina che
   chiede una previsione invece di un dato, e senza il contesto sembra un
   numero da indovinare. */
.persona__nota {
  margin: .5rem 0 0 3.1rem;
  max-width: 34rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--smorzato);
}

.persona__campo--tasso { flex-basis: 100%; }

/* Quando va in pensione, calcolato: è la verifica che nascita ed età
   dicono quello che credi, e il numero che poi userà la durata. */
.persona__quando {
  margin: .45rem 0 0 3.1rem;
  font-size: .8rem;
  color: var(--acqua);
  min-height: 1.1em;
}

/* E quanto prenderà: è il numero che rende leggibile la percentuale.
   "65%" da solo non dice niente, "65% → 1.408 € al mese" sì. */
.persona__pensione-eco {
  margin: .2rem 0 0 3.1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--buono);
  min-height: 1.1em;
}

/* Quando il numero non c'è, la riga spiega perché: è un'informazione,
   non un successo. */
.persona__pensione-eco:not(:empty) { font-weight: 600; }

@media (max-width: 30rem) {
  .persona__eta,
  .persona__quando,
  .persona__nota,
  .persona__pensione-eco { margin-left: 0; }
}
.persona__segno {
  flex: 0 0 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--acqua) 14%, transparent);
  color: var(--acqua); font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.persona__nome {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--inchiostro);
  padding: .25rem 0; border-bottom: 1px solid transparent;
}
.persona__nome:focus { outline: none; border-bottom-color: var(--acqua); }
.persona__nome::placeholder { font-weight: 400; color: var(--smorzato); }