/* Ratiomea - foglio di stile unico (bozza grafica, 20/10/2026).
   Regole di Alessio: font Roboto; solo nero (entrate) e rosso (uscite); pulsanti squadrati, neri con testo bianco,
   all'hover senza riempimento e con bordo piu spesso (2,5px); i link non hanno grafica, solo la sottolineatura all'hover. */

/* ---------- Font (Roboto, ospitato sul sito: nessuna richiesta a servizi esterni) ---------- */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

/* ---------- Colori e misure ---------- */
:root {
    --ink: #111;          /* nero: testo, entrate, pulsanti */
    --paper: #fff;
    --red: #c62828;       /* rosso: uscite ed errori */
    --line: #d4d4d4;      /* linee sottili delle tabelle */
    --soft: #f4f4f4;      /* sfondo molto tenue (intestazioni, righe di totale) */
    --width: 68rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    /* colonna a tutta altezza: il piè di pagina sta in fondo anche quando la pagina è corta */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- Link: nessuna grafica, solo la sottolineatura al passaggio del mouse ---------- */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

/* ---------- Intestazione ---------- */
/* Su schermo largo: tre colonne, logo a sinistra, menù al centro, Profilo e Esci a destra. */
body > header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .9rem max(1rem, calc((100% - var(--width)) / 2 + 1rem));
    border-bottom: 1px solid var(--ink);
    /* l'intestazione (e quindi il menù) resta sempre in vista in cima allo schermo, mentre la pagina scorre */
    position: sticky; top: 0; z-index: 40; background: var(--paper);
}
/* Logo testuale (Site::logoHtml): due parti, «Ratio» + «mea». Solo testo, nessuna immagine. La variante in uso si sceglie
   con Site::LOGO_STYLE (attributo data-logo sul body); le altre restano qui, pronte da recuperare. */
.brand { justify-self: start; font-size: 1.35rem; }
.brand-a { font-weight: 700; }
/* Dicitura «Beta» accanto al logo (Site::BETA, deciso da Alessio il 04/11/2026): solo CSS, il testo del logo non cambia */
body[data-beta] .brand::after { content: "Beta"; display: inline-block; margin-left: .55rem; padding: .1rem .35rem; border: 1px solid var(--ink); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; vertical-align: .3em; }
.brand-b { font-weight: 400; }

/* Variante «registro» (la prima, approvata da Alessio il 02/11/2026): «Ratio» grassetto + «mea» leggero, doppia sottolineatura
   sottile come la «linea del totale» dei registri contabili. */
body[data-logo="registro"] .brand, body[data-logo="registro"] .brand:hover { letter-spacing: .06em; text-decoration: underline double; text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* Variante «totale» (parente della prima): come nei conti, una riga sotto il subtotale e due sotto il totale. «Ratio» grassetto
   con una sottolineatura sottile; «mea» leggero con la doppia. */
body[data-logo="totale"] .brand, body[data-logo="totale"] .brand:hover { letter-spacing: .06em; text-decoration: none; }
body[data-logo="totale"] .brand-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
body[data-logo="totale"] .brand-b { text-decoration: underline double; text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* Variante «totale-rosso» (la «totale» con «mea» in corsivo e rosso): «Ratio» grassetto nero con la riga sottile; «mea» corsivo
   leggero, rosso, con la doppia riga NERA (Alessio, 02/11/2026); anche la riga sotto «Ratio» è nera (provata rossa, scartata). Il corsivo è generato dal browser: il sito non ha un Roboto corsivo. */
body[data-logo="totale-rosso"] .brand, body[data-logo="totale-rosso"] .brand:hover { letter-spacing: .06em; text-decoration: none; }
body[data-logo="totale-rosso"] .brand-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
body[data-logo="totale-rosso"] .brand-b { font-style: italic; color: var(--red); text-decoration: underline double; text-decoration-color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* Variante «colonna»: tutto maiuscolo e spaziato, «RATIO» grassetto, una sottile riga verticale rossa (come la riga rossa
   di margine dei libri contabili) e «MEA» leggero. La riga è un bordo: il testo resta «Ratiomea». */
body[data-logo="colonna"] .brand, body[data-logo="colonna"] .brand:hover { text-transform: uppercase; letter-spacing: .16em; font-size: 1.2rem; text-decoration: none; }
body[data-logo="colonna"] .brand-b { margin-left: .5em; padding-left: .5em; border-left: 2px solid var(--red); }

nav.menu { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; }
nav.menu details { position: relative; }
nav.menu > a { padding: .25rem 0; font-weight: 500; }   /* voci semplici (menù di chi non è collegato): stesso aspetto dei titoli a tendina */
nav.menu > a:hover { text-decoration: underline; }
nav.menu summary { cursor: pointer; font-weight: 500; list-style: none; padding: .25rem 0; }
nav.menu summary::-webkit-details-marker { display: none; }
nav.menu summary::after { content: "▾"; margin-left: .3em; font-size: .8em; }
nav.menu summary:hover { text-decoration: underline; }
nav.menu ul {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    min-width: 12rem;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--paper);
    border: 2px solid var(--ink);
}
nav.menu li a { display: block; padding: .4rem 1rem; white-space: nowrap; }
nav.menu li a:hover { background: var(--soft); }

.user-area { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1rem; }
.user-area form { margin: 0; display: flex; align-items: center; gap: 1rem; }
.user-area a { font-weight: 500; }

/* Pannello del menù: su schermo largo è trasparente (i suoi figli stanno nella griglia dell'intestazione); il pulsante e la parte alta servono solo su smartphone */
.menu-panel { display: contents; }
.menu-toggle, .menu-panel-top { display: none; }

/* ---------- Contenuto ---------- */
main { flex: 1 0 auto; width: 100%; max-width: var(--width); margin: 0 auto; padding: 1.5rem 1rem 2rem; }

/* ---------- Piè di pagina ---------- */
/* Pagine informative (stessa larghezza di tutto il sito); la data di aggiornamento è discreta */
.info ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.info li { margin-bottom: .4rem; }
.site-footer a { white-space: nowrap; }   /* un link non si spezza su due righe */
.info-date { color: #6b6b6b; font-size: .85rem; }
.site-footer { padding: 1.25rem 1rem 1.5rem; text-align: center; font-size: .85rem; color: #6b6b6b; }

h1 { margin: 0 0 1.25rem; font-size: 1.75rem; line-height: 1.2; font-weight: 700; }
h2 { margin: 2rem 0 .75rem; padding-bottom: .35rem; font-size: 1.15rem; font-weight: 700; border-bottom: 1px solid var(--ink); }
main > h2.plain:first-child { margin-top: 0; }   /* primo titolo della pagina: niente spazio sopra */
h2.plain { padding-bottom: 0; border-bottom: 0; }   /* titolo sopra una tabella: niente riga, la tabella ha le sue */
h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1rem; }
/* Profilo e scelta delle categorie (.profile, .blocks): niente linea nera sotto i titoli dei blocchi; una linea grigio chiaro separa un blocco dall'altro (non sopra il primo) */
:is(.profile, .blocks) h2 { margin: 0 0 .75rem; padding-bottom: 0; border-bottom: 0; }
:is(.profile, .blocks) section { margin-top: 2rem; }
:is(.profile, .blocks) section, :is(.profile, .blocks) h2:not(:first-child) { padding-top: 1.5rem; border-top: 1px solid var(--line); }
:is(.profile, .blocks) h2:not(:first-child) { margin-top: 2rem; }
:is(.profile, .blocks) section:first-of-type { padding-top: 0; border-top: 0; }

/* Pulsante che sembra un link (con le parentesi quadre attorno), per azioni secondarie dentro una riga di testo */
.inline-form { display: inline; margin: 0; }
button.link-button, button.link-button:hover {
    padding: 0; font-weight: 400; color: inherit; background: none; border: 0; box-shadow: none;
}
/* Riga del dispositivo: nome e link sulla stessa riga (se il nome è lungo va a capo lui, il link resta a fianco); su desktop il link è staccato dal nome */
.device-head { display: flex; align-items: baseline; gap: .6rem; }
.device-name { min-width: 0; }
button.link-button { white-space: nowrap; }
form.inline-form button.link-button[type="submit"]:only-of-type { width: auto; }   /* su smartphone i pulsanti «invia» soli nel modulo sono a tutta larghezza: questi no, sono link in una riga */
@media (min-width: 40.01rem) { .device-head { gap: 1.25rem; } }

/* Pagina «Le tue categorie»: azioni di ogni riga (Rinomina / Nascondi) a destra, ben staccate; le categorie nascoste in grigio */
th.row-links, td.row-links { text-align: right; white-space: nowrap; }
td.row-links > * { margin-left: .5rem; }   /* smartphone: azioni vicine, così la pagina non scorre di lato */
@media (min-width: 40.01rem) { td.row-links > * { margin-left: 1.25rem; } }
table.categories td:first-child { overflow-wrap: anywhere; }   /* un nome lungo va a capo invece di allargare la tabella */
td.row-links a { color: inherit; }
table.categories tr.is-hidden td:first-child { color: #6b6b6b; }
/* Nella pagina delle categorie la linea grigia tra i due blocchi non serve: ci pensa già la linea della tabella delle entrate */
.blocks.categories-blocks h2:not(:first-child) { padding-top: 0; border-top: 0; }

/* Scelta delle categorie standard: caselle grandi, righe alte e distanziate (facili da toccare); «Vedi tutte» è un link che sparisce quando l'elenco si apre, «Vedi meno» lo richiude */
.pick-list { margin: 0; padding: 0; list-style: none; }
.pick-list label { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; cursor: pointer; }
.pick-list input[type="checkbox"] { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
details.more > summary { display: inline-block; padding: .5rem 0; cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { display: none; }
.more-link { text-decoration: underline; font-weight: 500; }
details.more > a.more-link { display: inline-block; padding: .5rem 0; }
details.more > a.more-link[hidden] { display: none; }

/* Percorso guidato: la riga «Passo X di 3» resta ferma sotto l'intestazione del sito (sfondo bianco: le categorie non si vedono passare) e i pulsanti Indietro/Avanti restano fermi in basso, sopra il piè di pagina fisso (2,5rem). Le altezze dell'intestazione sono approssimate: ~4,6rem su smartphone, ~3,95rem su desktop */
.wizard-steps { position: sticky; top: 4.6rem; z-index: 30; margin: 0 0 1rem; padding: .6rem 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.wizard-steps p { margin: 0; }
.wizard-actions { position: fixed; z-index: 21; left: 0; right: 0; bottom: 2.5rem; display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem max(1rem, calc((100% - var(--width)) / 2 + 1rem)); background: var(--paper); border-top: 1px solid var(--line); }
.wizard-actions > :only-child { margin-left: auto; }
@media (max-width: 40rem) { .wizard-actions { bottom: 3.25rem; } }   /* piè di pagina più alto su smartphone (3,25rem) */   /* un pulsante solo (primo passo): a destra */
.wizard-actions.wizard-actions button[type="submit"] { width: auto; }   /* a larghezza del testo anche su smartphone */
main:has(.wizard-actions) { padding-bottom: 6rem; }   /* spazio perché l'ultima categoria non resti sotto i pulsanti fissi */
@media (min-width: 40rem) { .wizard-steps { top: 3.95rem; } }

/* Categorie personalizzate: una casella per riga, ben distanziate; «Aggiungi un'altra categoria» è un link; il pulsante Invio nascosto fa da «Avanti» */
.custom-row { margin-bottom: .75rem; }
.custom-row input { display: block; }
.custom-row [role="alert"] { display: block; margin-top: .25rem; }
button.add-row, button.add-row:hover { display: inline-block; padding: .5rem 0; font-weight: 500; color: inherit; background: none; border: 0; box-shadow: none; text-decoration: underline; }
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; overflow: hidden; }

/* Link «al contrario»: sottolineato a riposo, senza sottolineatura all'hover (come i pulsanti «inverse»: a riposo vuoti, all'hover pieni) */
a.link-inverse { font-weight: 500; text-decoration: underline; }
a.link-inverse:hover { text-decoration: none; }

/* Pulsanti affiancati (poi a capo, uno sotto l'altro, su schermi stretti) */
.button-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.button-row form { flex: 0 1 auto; margin: 0; }
@media (max-width: 40rem) { .button-row form { flex: 1 1 auto; } }   /* smartphone: affiancati e della stessa larghezza; se non ci stanno vanno a capo, ciascuno a tutta larghezza */

/* Pulsante al contrario degli altri: a riposo vuoto con bordo, all'hover nero */
button.button-inverse, a.button.button-inverse { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 .5px var(--ink); }
button.button-inverse:hover, a.button.button-inverse:hover { color: var(--paper); background: var(--ink); box-shadow: none; }
button.link-button::before { content: "["; }
button.link-button::after { content: "]"; }
button.link-button:hover { text-decoration: underline; }
.unverified-intro { font-size: 1.15rem; }
.unverified-resend { margin-top: 2.5rem; }
.unverified-hint { margin-top: 2rem; }
small { color: #555; }

/* Messaggi: esito (bordo nero) ed errori (bordo e testo rossi) */
[role="status"], [role="alert"] { padding: .6rem .9rem; border-left: 4px solid var(--ink); background: var(--soft); }
[role="alert"] { border-left-color: var(--red); color: var(--red); background: var(--paper); font-weight: 500; }
/* Errore accanto a un campo: solo il testo rosso, senza riquadro */
label [role="alert"], td [role="alert"] { display: inline-block; padding: 0; margin-top: .25rem; border: 0; background: none; font-size: .9rem; }
[role="note"] { color: var(--red); font-size: .9rem; }

/* ---------- Pulsanti: squadrati, neri; all'hover vuoti con bordo piu spesso ---------- */
button, .button {
    display: inline-block;
    padding: .6rem 1.2rem;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: var(--paper);
    background: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
}
button:hover, .button:hover {
    color: var(--ink);
    background: transparent;
    /* Il bordo resta di 2px (cosi la pagina non si sposta mai) e si aggiunge mezzo pixel all'interno: 2,5px in tutto */
    box-shadow: inset 0 0 0 .5px var(--ink);
    text-decoration: none;
}
button:disabled { opacity: .4; cursor: not-allowed; }
/* Nell'intestazione i pulsanti sono piu piccoli */
body > header button, body > header a.button { padding: .35rem .9rem; font-size: .95rem; }

/* Titolo della pagina con un pulsante a destra, allineato in verticale al titolo */
.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.page-title h1 { margin: 0; }
.floating-actions { display: flex; align-items: center; gap: 1rem; }   /* desktop: pulsanti affiancati con «Oppure» in mezzo (su smartphone sono fissi in basso, uno sopra l'altro) */

/* ---------- Tour guidato del primo accesso (public/js/tour.js) ---------- */
.tour-highlight { outline: 3px solid var(--ink); outline-offset: 4px; }
.tour-box { position: absolute; z-index: 100; width: min(22rem, calc(100vw - 16px)); padding: 1rem 1.1rem; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.tour-box p { margin: .4rem 0 .5rem; }
.tour-box .tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.tour-box .tour-skip { margin-right: auto; color: var(--ink); background: transparent; border-color: transparent; text-decoration: underline; }
.tour-box.tour-anchored { position: fixed; }   /* schermo largo: posizione rispetto allo schermo, non alla pagina */
.tour-box.tour-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* smartphone: riquadro fisso in alto o in basso (dalla parte opposta alla voce evidenziata), a tutta larghezza meno un piccolo margine */
.tour-box.tour-top, .tour-box.tour-bottom { position: fixed; left: 8px; right: 8px; width: auto; }
.tour-box.tour-top { top: 8px; }
.tour-box.tour-bottom { bottom: 8px; }

/* ---------- Moduli ---------- */
form p { margin-bottom: 1.1rem; }
label { font-weight: 500; }
label input[type="radio"], label input[type="checkbox"] { margin-right: .4em; accent-color: var(--ink); }
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea {
    width: 100%;
    max-width: 26rem;
    margin-top: .25rem;
    padding: .55rem .7rem;
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 0;
}
textarea { max-width: 40rem; min-height: 6rem; }
/* Moduli con campi uguali (nuova categoria): casella di testo e menù a tendina con la stessa altezza e la stessa larghezza */
form.same-fields input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), form.same-fields select { display: block; width: 100%; height: 2.75rem; }   /* la larghezza massima è quella di tutti i campi: 26rem su desktop, nessun limite su smartphone */
@media (min-width: 40.01rem) { form.same-fields fieldset { max-width: 26rem; } }   /* il riquadro «Tipo» largo come i campi (su smartphone sono tutti a tutta larghezza) */

fieldset { margin: 0 0 1.1rem; padding: .75rem 1rem; border: 1px solid var(--ink); }
legend { padding: 0 .4rem; font-weight: 500; }
fieldset label { margin-right: 1.25rem; }

/* Filtri dell'elenco movimenti: in riga su schermo largo */
/* Le caselle (testo, menu a tendina, date) sono tutte della stessa misura: colonne di uguale larghezza e stessa altezza */
form.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem 1rem; align-items: end; margin-bottom: 1.5rem; padding: 1rem; background: var(--soft); border: 1px solid var(--line); }
form.filters label { display: block; margin: 0 0 .5rem; }
form.filters p { grid-column: 1 / -1; margin: 0 0 .5rem; }
/* Pulsante «Filtra» e link «Azzera i filtri»: su schermo largo sono due celle della griglia (la riga dei filtri), con le misure delle caselle, incolonnati con loro */
form.filters p:has(> button[type="submit"]) { display: contents; }
/* Filtri istantanei (public/js/instant-filters.js, classe sulla pagina): il pulsante «Filtra» non serve e si nasconde; senza JavaScript resta */
.instant-filters form.filters button[type="submit"] { display: none; }
/* Riquadro dell'anno nei riepiloghi: come i filtri ma con un solo campo, largo quanto basta (e senza il riquadro grigio troppo alto) */
form.year-filter { grid-template-columns: minmax(0, 14rem); margin-bottom: 1.25rem; padding: .75rem 1rem .25rem; }
form.year-filter label { margin-bottom: .5rem; }
form.filters button[type="submit"] { display: block; width: 100%; height: 2.75rem; padding-top: 0; padding-bottom: 0; margin: 0 0 .5rem; }
form.filters p:has(> button[type="submit"]) a { display: flex; align-items: center; align-self: end; height: 2.75rem; margin: 0 0 .5rem; text-decoration: underline; }
form.filters input:not([type="hidden"]), form.filters select { display: block; width: 100%; max-width: none; min-width: 0; height: 2.75rem; }

/* Filtri a scomparsa (elenco conti): su schermo largo il riquadro è sempre aperto e senza titolo; su smartphone parte chiuso (public/js/filters.js) */
details.filter-box > summary { display: none; }
details.filter-box > form.filters { margin-top: 0; }

/* ---------- Tabelle ---------- */
table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
th, td { padding: .6rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }   /* righe tutte alte uguali (equal-rows.js): contenuto centrato in verticale */
thead th { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--soft); border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 500; }
tfoot th, tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
tfoot th.expense { color: var(--red); }
th.amount, td.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.expense { color: var(--red); }                 /* uscite in rosso, entrate in nero */
th.actions, td.actions { text-align: center; white-space: nowrap; }
/* Totali dei movimenti: restano sempre visibili in fondo allo schermo mentre si scorre l'elenco (sticky: smettono di seguire quando la tabella arriva alla fine) */
table.totals { max-width: 32rem; margin: 0 0 .5rem auto; position: sticky; bottom: 0; z-index: 5; background: var(--paper); box-shadow: 0 -1px 0 var(--line), 0 -.4rem 1rem rgba(0, 0, 0, .06); }
table.totals th { font-weight: 500; }
table.totals caption.totals-note { display: table-caption; caption-side: bottom; padding: .35rem .55rem .4rem; text-align: center; font-size: .8rem; color: #6b6b6b;
    /* sfondo bianco pieno anche sotto la nota (l'ombra bianca scende di .75rem sotto il pulsante fisso, che sta sopra): fuori dal riquadro dei totali i record non si vedono passare */
    background: var(--paper); box-shadow: 0 .75rem 0 var(--paper); }   /* nota sui giroconti: in fondo al riquadro dei totali */
p.totals-note { display: none; }
table.totals tbody tr:last-child > * { border-bottom: 0; }   /* l'ultima riga (Risparmio) non ha la linea grigia sotto: la nota sta attaccata ai totali */
/* Azioni dei movimenti: solo icone (su ogni schermo), staccate tra loro e abbastanza grandi per non sbagliare tasto; le parole restano per i lettori di schermo via aria-label */
td.actions .action-text, td.actions .action-sep { display: none; }
td.actions a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0 .35rem; text-decoration: none; }
td.actions a:hover { background: var(--soft); }
td.actions .icon { display: block; }
/* Elenco movimenti: tetto inferiore alla larghezza delle colonne di testo (data, descrizione, conto), su ogni schermo */
table.movements:not(.totals) th:first-child, table.movements:not(.totals) td:first-child { min-width: 6.5rem; }
table.movements:not(.totals) th:nth-child(3), table.movements:not(.totals) td:nth-child(3) { min-width: 11rem; }
table.movements:not(.totals) th:nth-child(4), table.movements:not(.totals) td:nth-child(4) { min-width: 8.5rem; }

/* Riepilogo per categoria: 12 colonne, scorrono in orizzontale; la prima colonna resta ferma */
div.scroll { overflow-x: auto; margin-bottom: 1.25rem; }
div.scroll table { margin-bottom: 0; }
div.scroll th[scope="row"] { position: sticky; left: 0; background: var(--paper); }
div.scroll table.report thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--soft); }   /* anche il titolo «Categoria» resta fermo a sinistra quando si scorre la tabella di lato, come i nomi sotto */
/* Elenco conti: la colonna «Conto» resta ferma (anche l'intestazione, anche il totale) e il resto scorre; una linea sottile la separa */
table.account-activity thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--soft); }
/* Nota sopra la tabella dei conti (periodo scelto): la tabella ha sopra una fascia bianca di circa 1,6rem (ombra o ::before dell'intestazione fissa) che coprirebbe la parte bassa della nota, quindi serve più margine sotto */
p.period-note { margin-bottom: 2.25rem; }
table.account-activity th:first-child { box-shadow: 1px 0 0 var(--line); min-width: 13rem; max-width: 24rem; overflow-wrap: anywhere; }   /* min-width: la colonna non si restringe sotto questa misura, anche se la tabella è stretta (altrimenti le lettere andrebbero a capo una per riga) */   /* i nomi lunghi vanno a capo; public/js/equal-rows.js porta tutte le righe all'altezza della più alta */

/* ---------- Varie ---------- */
nav[aria-label="Pagine"] { margin: 1rem 0; }
/* Riepiloghi a «schedario»: tre linguette sopra una finestra con il bordo nero; la linguetta aperta (bianca, bordo nero) copre il bordo della finestra e si fonde con lei, le altre sono grigie */
nav.tabs { margin: 1.25rem 0 0; }
nav.tabs ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
nav.tabs li { flex: 1 1 auto; position: relative; margin-bottom: -1px; }
nav.tabs a, nav.tabs strong { display: block; padding: .65rem .4rem; text-align: center; font-weight: 500; line-height: 1.2; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-bottom-color: var(--ink); }
nav.tabs a:hover { text-decoration: underline; }
nav.tabs li.current { z-index: 2; }
nav.tabs strong { font-weight: 700; background: var(--paper); border-color: var(--ink); border-bottom-color: var(--paper); }
.tab-panel { padding: 1.25rem .75rem .5rem; border: 1px solid var(--ink); margin-bottom: 1.25rem; }
/* Titoli dei blocchi dentro la finestra dei riepiloghi (Entrate / Uscite): niente linea nera sotto; una linea grigio chiaro separa un blocco dall'altro (non sopra il primo). Le tabelle finiscono con la riga dei totali, senza linea grigia sotto: nessuna doppia riga */
.tab-panel h2 { margin: 1.5rem 0 .75rem; padding-bottom: 0; border-bottom: 0; }
.tab-panel h2:first-of-type { margin-top: .5rem; }
.tab-panel h2:not(:first-of-type) { padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 40.01rem) { .tab-panel { padding: 1.5rem 1.25rem .75rem; } nav.tabs ul { justify-content: flex-start; } nav.tabs li { flex: 0 0 auto; } nav.tabs a, nav.tabs strong { padding: .65rem 1.5rem; } }
ul { padding-left: 1.25rem; }

/* ---------- Pagine centrate (accesso): niente intestazione, nome del sito sopra il riquadro ---------- */
main.centered { display: flex; flex-direction: column; align-items: center; max-width: none; padding: 2rem 1rem; }
main.centered .brand { margin-bottom: 1.5rem; font-size: 1.75rem; }
main.centered .box { width: 100%; max-width: 26rem; padding: 2rem; border: 1px solid var(--ink); }
main.centered .box h1 { font-size: 1.5rem; }
main.centered .box input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) { max-width: none; }
main.centered .box form button[type="submit"] { width: 100%; }
main.centered .box > :last-child { margin-bottom: 0; }
@media (min-width: 40rem) {
    main.centered { justify-content: center; }   /* desktop: centrato in altezza e in larghezza */
}

/* ---------- Schermi piccoli (smartphone) ---------- */
@media (max-width: 40rem) {
    /* Menù a pannello (solo con JavaScript, classe «menu-js» sulla pagina): pulsante hamburger a destra del logo, pannello a tutta pagina che scorre da destra */
    .menu-js body > header { flex-direction: row; align-items: center; justify-content: space-between; }
    .menu-js .menu-toggle, .menu-js .menu-close {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 2.75rem; height: 2.75rem; padding: 0 .6rem; color: var(--ink); background: transparent; border: 0; box-shadow: none;
    }
    .menu-js .menu-toggle:hover, .menu-js .menu-close:hover { padding: 0 .6rem; background: transparent; box-shadow: none; }
    .menu-js .menu-toggle span { display: block; height: 2px; background: var(--ink); }
    .menu-js .menu-close { align-items: center; font-size: 2.25rem; font-weight: 400; line-height: 1; }
    .menu-js .menu-panel {
        display: flex; flex-direction: column;
        position: fixed; inset: 0; z-index: 50; overflow-y: auto;
        padding: .9rem 1rem 1.5rem; background: var(--paper);
        transform: translateX(100%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    .menu-js .menu-panel.open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
    .menu-js .menu-panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
    .menu-js .menu-close { margin-right: -.6rem; }
    .menu-js body.menu-open { overflow: hidden; }
    /* Le voci una sotto l'altra: voce principale in evidenza, sottovoci rientrate */
    .menu-js nav.menu { display: block; width: 100%; order: 0; }   /* order: 0 perché la regola per la riga dell'intestazione lo manda in fondo (order: 3) */
    .menu-js nav.menu details { margin-bottom: 1.25rem; }
    .menu-js nav.menu summary { padding: 0; font-size: 1.25rem; font-weight: 700; cursor: default; pointer-events: none; }
    .menu-js nav.menu summary::after { content: none; }
    .menu-js nav.menu > a { display: block; margin-bottom: 1.25rem; padding: 0; font-size: 1.25rem; font-weight: 700; }   /* voci semplici (visitatori): come i titoli delle tendine */
    .menu-js .user-area { gap: 1.5rem; }
    .menu-js nav.menu ul { position: static; min-width: 0; margin: .25rem 0 0; padding: 0 0 0 1.25rem; border: 0; }
    .menu-js nav.menu li a { padding: .55rem 0; font-size: 1.05rem; }
    .menu-js nav.menu li a:hover { background: none; text-decoration: underline; }
    /* Profilo ed Esci in fondo, al centro, separati da una linea sottile */
    .menu-js .user-area { margin-left: 0; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); justify-content: center; }
    .menu-js .user-area form { justify-content: center; gap: 1.5rem; }
    .menu-js .user-area a { font-size: 1.05rem; }
    @media (prefers-reduced-motion: reduce) { .menu-js .menu-panel, .menu-js .menu-panel.open { transition: none; } }

    /* Senza menù a pannello (email non ancora verificata, o senza JavaScript): logo a sinistra, Profilo ed Esci a destra sulla stessa riga; l'eventuale menù va sotto a tutta larghezza */
    body > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    nav.menu { order: 3; width: 100%; justify-content: flex-start; gap: .25rem 1.5rem; }
    .user-area { margin-left: auto; }
    main { padding-top: 1rem; }
    main.centered { padding-top: 1.5rem; }
    main.centered .box { padding: 0; border: 0; }   /* su smartphone niente bordo attorno al riquadro */
    h1 { font-size: 1.5rem; }

    /* Campi e pulsanti a tutta larghezza: piu facili da toccare */
    input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea { max-width: none; font-size: 1rem; }
    form:not(.filters) button[type="submit"]:only-of-type { width: 100%; }

    form.filters { display: block; }
    form.filters label { margin-bottom: .9rem; }

    /* Il titolo «Applica filtri +» che apre il riquadro: testo al centro, con strisce oblique a 45° prima e dopo; diverso da pulsanti e link */
    details.filter-box > summary { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1rem; padding: .6rem 0; font-weight: 500; cursor: pointer; list-style: none; }
    details.filter-box > summary::-webkit-details-marker { display: none; }
    /* Il motivo prima e dopo «Applica filtri»: se ne usa uno solo, scelto qui sotto. Per tornare alle strisce oblique basta
       scrivere nella riga di --filter-pattern: var(--filter-pattern-stripes) (strisce oblique), var(--filter-pattern-plus) (segni +) o var(--filter-pattern-slash) (segni /). */
    details.filter-box {
        --filter-pattern-stripes: repeating-linear-gradient(-45deg, var(--ink) 0, var(--ink) 1.5px, transparent 1.5px, transparent 7.0711px);   /* 7,0711px sulla diagonale = 10px in orizzontale: le linee sono tutte uguali */
        --filter-pattern-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%23111' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / 16px 16px space;   /* tanti «+», distribuiti in modo uniforme */
        --filter-pattern-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16'%3E%3Cpath d='M3 13L9 3' stroke='%23111' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / 12px 16px space;   /* tanti «/», distribuiti in modo uniforme */
        --filter-pattern: var(--filter-pattern-slash);
    }
    details.filter-box .stripes { flex: 1; height: 1.1rem; background: var(--filter-pattern); }
    details.filter-box .label { white-space: nowrap; }
    details.filter-box .sign::after { content: "[+]"; margin-left: .15rem; font-weight: 500; }
    details.filter-box[open] .sign::after { content: "[\2212]"; }
    details.filter-box > form.filters { border-top: 0; }

    /* Il pulsante «Filtra» ha le misure e gli spazi di una casella: stessa larghezza e altezza, stesso posto di un campo (spazio del titolo + casella + margine sotto) */
    form.filters p:has(> button[type="submit"]) { display: block; margin: 1.75rem 0 .9rem; }
    form.filters button[type="submit"] { margin: 0; }
    form.filters p:has(> button[type="submit"]) a { display: block; height: auto; margin: 1.5rem 0 .5rem; text-align: center; }

    /* Le tabelle larghe scorrono in orizzontale invece di uscire dallo schermo */
    main > table, main > form > table { display: block; overflow-x: auto; }
    th, td { padding: .5rem .55rem; }

    /* Schermata principale: piu aria sotto titolo e pulsante; le tabelle di conti e statistiche occupano tutta la larghezza del contenuto, con gli stessi margini di titoli e pulsanti */
    .page-title { margin-bottom: 2rem; }
    /* «Nuovo conto» nell'elenco conti: uno scalino in basso, a tutta larghezza, sopra l'elenco che scorre sotto di lui */
    .floating-action {
        position: fixed; z-index: 20; left: 1rem; right: 1rem; bottom: 4.25rem;   /* 4,25rem: sopra il piè di pagina fisso (3,25rem) */
        text-align: center; background: var(--ink); box-shadow: 0 0 0 1rem var(--paper), 0 -.5rem 1.25rem 1rem rgba(0, 0, 0, .12);
    }
    .floating-action:hover { background: var(--paper); }   /* all'hover non deve diventare trasparente: la tabella è sotto */
    /* Piè di pagina sempre fisso in basso (2,5rem), come su desktop (Alessio, 29/10/2026), sotto agli eventuali pulsanti fissi; la pagina ha spazio in fondo per non coprire l'ultima riga */
    body .site-footer { position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; height: 3.25rem; padding: 0 .75rem; font-size: .78rem; line-height: 1.25;   /* link sopra e copyright sotto: stanno nei 3,25rem */ display: flex; align-items: center; justify-content: center; background: var(--paper); border-top: 1px solid var(--line); }
    body { padding-bottom: 3.25rem; }
    main:has(> .page-title > .floating-action) { padding-bottom: 5.75rem; }   /* spazio per il pulsante fisso (4,25rem + 2,6rem - 3,25rem del piè di pagina) */
    /* Più pulsanti fissi in basso (pagina delle categorie): uno sopra l'altro, a tutta larghezza, sopra il piè di pagina fisso; il principale è nero, l'altro «inverso» */
    .floating-actions { position: fixed; z-index: 20; left: 1rem; right: 1rem; bottom: 4.25rem; display: flex; flex-direction: column; align-items: stretch; gap: .5rem; background: var(--paper); box-shadow: 0 0 0 1rem var(--paper), 0 -.5rem 1.25rem 1rem rgba(0, 0, 0, .12); }
    .floating-actions .button { text-align: center; }
    .floating-actions .or { text-align: center; font-size: .9rem; line-height: 1; }   /* «Oppure» tra i due pulsanti, piccolo per non rubare altezza */
    main:has(.floating-actions) { padding-bottom: 10.25rem; }   /* spazio per i due pulsanti fissi e la scritta tra loro */
    /* Elenco movimenti: i record che si avvicinano al riquadro fisso dei totali si sfocano poco a poco (fascia trasparente con sfocatura, sempre sopra al riquadro; l'altezza del riquadro è approssimata) */
    body:has(table.totals)::after { content: ""; position: fixed; z-index: 20; left: 0; right: 0; bottom: 16.75rem; height: 2rem; pointer-events: none;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
    /* Elenco conti: la colonna ferma non deve occupare mezzo schermo, anche con nomi lunghi */
    table.account-activity th:first-child { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }
    h2.plain { margin-bottom: 1.25rem; }
    /* Totali dei movimenti: più spazio sopra e tutta la larghezza, con gli stessi margini del resto */
    /* qui i totali formano un solo riquadro fisso con il pulsante «Nuovo movimento»: stessa larghezza e stesso alone bianco, appoggiati sopra al pulsante (che occupa circa 4,75rem dal fondo); sono più compatti.
       Sono sopra al pulsante (z-index più alto) perché l'alone del pulsante non li copra. */
    main > table.totals { display: table; position: fixed; z-index: 21; left: 1rem; width: calc(100% - 2rem); max-width: none; margin: 0; bottom: 8rem;
        box-shadow: 0 0 0 1rem var(--paper), 0 -.5rem 1.25rem 1rem rgba(0, 0, 0, .12); }
    main > table.totals th, main > table.totals td { padding: .3rem .55rem; font-size: .9rem; }
    /* la nota sui giroconti sta in fondo al riquadro fisso, sotto i totali (e non più, tagliata, in alto nella pagina) */
    main > table.totals caption.totals-note { padding: .35rem .55rem 0; }
    main div.scroll:has(> table.movements) { max-height: calc(100vh - 22rem); max-height: calc(100dvh - 22rem); }

    /* Elenco movimenti: la colonna «Data» resta ferma (anche l'intestazione) e il resto scorre; descrizione e conto un po' più larghi */
    table.movements:not(.totals) thead th:first-child, table.movements:not(.totals) tbody td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); white-space: nowrap; }
    table.movements:not(.totals) thead th:first-child { background: var(--soft); }
    table.movements:not(.totals) tbody td:first-child { background: var(--paper); }
    /* Elenco conti e Elenco movimenti: la tabella è un riquadro che scorre da solo (in verticale e in orizzontale), alto al massimo quanto lo schermo;
       la riga dei nomi dei campi resta ferma in alto (anche quando scorre in orizzontale) e l'angolo con la prima colonna resta fermo in entrambe le direzioni.
       Con le righe di una sola schermata il riquadro non scorre: è alto quanto la tabella. */
    div.scroll:has(> table.account-activity), div.scroll:has(> table.movements) { max-height: calc(100vh - 15.25rem); max-height: calc(100dvh - 15.25rem); overflow: auto; overscroll-behavior: contain; }
    /* Il riquadro che chiude la pagina (movimenti; conti: l'ultimo) resta agganciato sotto l'intestazione del sito (alta ~4,6rem) con ~1rem di stacco, finché si scorre la pagina: così la riga dei nomi è sempre visibile.
       Il bianco sopra riempie lo stacco (arriva sotto l'intestazione, che sta sopra), così i record non si vedono passare. A fine tabella lo scorrimento prosegue sulla pagina (niente «contain»).
       Perché regga fino in fondo: il riquadro deve essere l'ultima cosa della pagina (note e pagine dei movimenti stanno sopra, vedi «order») e il piè di pagina deve essere basso, altrimenti il fondo della pagina "spinge su" il riquadro. */
    div.scroll:has(> table.movements), main > div.scroll:last-child:has(> table.account-activity) { position: sticky; top: 5.6rem; z-index: 2; box-shadow: 0 -1.5rem 0 var(--paper); overscroll-behavior: auto; }
    main:has(> div.scroll > table.movements) { display: flex; flex-direction: column; }
    main:has(> div.scroll > table.movements) > div.scroll { order: 10; }   /* ultimo, dopo la nota sui giroconti e la paginazione */
    /* spazio vuoto in fondo (nel contenuto di «main», non nel padding): serve perché la pagina possa scorrere abbastanza da portare il riquadro in cima, e perché non venga spinto su a fine pagina */
    main:has(> div.scroll > table.movements)::after { content: ""; display: block; order: 11; height: 12rem; }
    main:has(> div.scroll:last-child > table.account-activity)::after { content: ""; display: block; height: 5.75rem; }
    /* con il bordo «collapse» la linea sotto l'intestazione resterebbe indietro mentre scorre: la disegno come ombra interna */
    table.account-activity thead th, table.movements:not(.totals) thead th { position: sticky; top: 0; z-index: 2; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--ink); }
    table.account-activity thead th:first-child, table.movements:not(.totals) thead th:first-child { z-index: 3; box-shadow: 1px 0 0 var(--line), inset 0 -2px 0 var(--ink); }
    main > table.accounts { display: table; width: 100%; }   /* stessi margini di titolo e pulsanti, per tutta la larghezza del contenuto */
}

/* Desktop (schermo abbastanza largo perché le tabelle stiano intere): la riga con i nomi dei campi resta ferma sotto l'intestazione del sito mentre la pagina scorre.
   Il contenitore «scroll» non deve scorrere da solo, altrimenti l'intestazione si fermerebbe nel contenitore e non seguirebbe la pagina. Sotto i 70rem resta com'era (tabella che scorre in orizzontale, intestazione non ferma). */
@media (min-width: 70rem) {
    div.scroll:has(> table.account-activity), div.scroll:has(> table.movements) { overflow: visible; }
    table.account-activity thead th, table.movements:not(.totals) thead th { position: sticky; top: 5rem; z-index: 2; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--ink); }   /* 5rem: l'intestazione del sito è alta circa 4rem (3,94rem misurati), restano ~1rem di stacco */
    /* sfondo bianco pieno nello stacco tra intestazione del sito e riga dei nomi (si estende anche sotto l'intestazione, che sta sopra): i record non si vedono passare; 1,6rem = poco più dello spazio sotto il riquadro dei filtri (1,5rem) */
    table.account-activity thead th::before, table.movements:not(.totals) thead th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.6rem; background: var(--paper); }
}

/* ===== PROVA DESKTOP (26/10/2026): piè di pagina sempre ancorato in basso, con i totali dei movimenti appoggiati sopra =====
   Per tornare alla versione precedente (totali agganciati al fondo dello schermo, piè di pagina in fondo alla pagina): cancellare tutto questo blocco, fino a «FINE PROVA DESKTOP». */
@media (min-width: 40rem) {
    body { padding-bottom: 2.5rem; }
    .site-footer { position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; height: 2.5rem; padding: 0 1rem; display: flex; align-items: center; justify-content: center; background: var(--paper); border-top: 1px solid var(--line); }
    /* i totali, fissi sopra al piè di pagina, larghi come tutto il contenuto (al massimo 68rem, con gli stessi margini della tabella dei movimenti) */
    main > table.totals { position: fixed; z-index: 21; bottom: 2.5rem; margin: 0; max-width: none; width: min(calc(var(--width) - 2rem), calc(100% - 2rem)); left: max(1rem, calc((100% - var(--width)) / 2 + 1rem));
        /* l'ultima ombra è un fondo bianco pieno sotto i totali (fino sotto al pulsante, che sta sopra): tra totali e pulsante i record non si vedono passare, qualunque sia l'altezza reale del pulsante */
        box-shadow: 0 -1px 0 var(--line), 0 -.4rem 1rem rgba(0, 0, 0, .06), 0 1.5rem 0 var(--paper); }
    /* «Nuovo movimento» (presente con i totali): fisso sopra al piè di pagina, sotto ai totali, come su smartphone (nero, larghezza dei totali, alone bianco) */
    body:has(table.totals) .floating-action { position: fixed; z-index: 22; display: block; text-align: center; background: var(--ink); bottom: 3.25rem; width: min(calc(var(--width) - 2rem), calc(100% - 2rem)); left: max(1rem, calc((100% - var(--width)) / 2 + 1rem)); box-shadow: 0 0 0 .75rem var(--paper); }
    body:has(table.totals) .floating-action:hover { background: var(--paper); }
    main > table.totals { bottom: 6.6rem; }   /* sopra al pulsante: 2,5rem (piè) + .75rem + pulsante (2,6rem) + .75rem */
    body:has(table.totals)::after { left: max(1rem, calc((100% - var(--width)) / 2 + 1rem)); right: auto; width: min(calc(var(--width) - 2rem), calc(100% - 2rem)); bottom: 16.5rem; }   /* fascia di sfocatura sopra ai totali, larga come loro */
    body:has(table.totals) { padding-bottom: 16rem; }   /* totali e pulsante sono fissi: il fondo della pagina non deve restare coperto */
    /* Pagina delle categorie: i due pulsanti fissi in fondo, sopra al piè di pagina, come i pulsanti del percorso guidato («Nuova categoria» a sinistra, l'altro a destra: stesso ordine di smartphone), senza «Oppure» */
    .floating-actions { position: fixed; z-index: 21; left: 0; right: 0; bottom: 2.5rem; justify-content: space-between; margin: 0; padding: .75rem max(1rem, calc((100% - var(--width)) / 2 + 1rem)); background: var(--paper); border-top: 1px solid var(--line); }
    .floating-actions .or { display: none; }
    main:has(.floating-actions) { padding-bottom: 6rem; }   /* l'ultima categoria non resta sotto ai pulsanti */
}
/* ===== FINE PROVA DESKTOP ===== */

/* ===== Piè di pagina: link informativi in evidenza, separati dalla dicitura del copyright (04/11/2026) =====
   Smartphone: due righe, prima i link (scuri e in grassetto), sotto il copyright in grigio. Desktop: una riga, copyright a sinistra e link a destra. */
body .site-footer { flex-direction: column; gap: .3rem; line-height: 1.3; }
.footer-links { color: #8a8a8a; font-size: 1rem; }          /* il separatore « | » resta più tenue dei link */
.footer-links a { color: var(--ink); font-weight: 700; }   /* i link spiccano */
.site-footer .copy { font-size: .8rem; }
@media (min-width: 40rem) {
    body .site-footer { flex-direction: row; justify-content: space-between; gap: 1.5rem; padding: 0 max(1rem, calc((100% - var(--width)) / 2 + 1rem)); font-size: .85rem; }
    .footer-links { font-size: 1em; }
    .site-footer .copy { order: -1; font-size: 1em; }
}

/* ===== Contatore delle registrazioni del mese (piano gratuito, 04/11/2026): ben visibile, con barra ===== */
.usage { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 2px solid var(--ink); }
.usage p { margin: 0; }
.usage-line { font-size: 1.1rem; }
.usage-line span { color: #6b6b6b; }
.usage-bar { height: .75rem; margin: .6rem 0; border: 1px solid var(--ink); background: var(--paper); }
.usage-bar span { display: block; height: 100%; background: var(--ink); }
.usage-note { font-size: .85rem; color: #6b6b6b; }
.usage-high .usage-bar span, .usage-full .usage-bar span { background: var(--red, #c4161c); }
.usage-full { border-color: var(--red, #c4161c); }
.usage-full .usage-line strong { color: var(--red, #c4161c); }

/* ===== Pagina Admin: barretta dell'andamento delle iscrizioni (04/11/2026) ===== */
.admin-bar { display: inline-block; height: .7rem; min-width: 1px; background: var(--ink); vertical-align: middle; }
.admin td:last-child .admin-bar { max-width: 100%; }