/* ============================================================
   COLORI
   Tutti i colori sono variabili CSS ("--nome"): si cambiano qui
   una volta sola e valgono in tutta la pagina.
   Palette navy/blu: quasi bianco e bianco nel tema chiaro, navy profondo in quello scuro.
   Un solo colore d'accento, #0066cc, uguale nei due temi (smart, pulsanti); nel tema scuro i testi
   in blu (--print: nomi dei mesi, anello di oggi) usano una sua versione più chiara, leggibile sul navy.
   Ogni stato del giorno è un segno: tratteggio = proposto, timbro = fissato,
   evidenziatore = ferie. Giallo (ferie) e rosso (festivi, errori) restano fuori palette
   perché devono distinguersi dagli smart a colpo d'occhio.
   ============================================================ */
:root {
  /* Segue il tema del sistema; il pulsante tema lo forza con data-theme (sotto).
     light-dark(chiaro, scuro): ogni colore scritto una volta sola per i due temi. */
  color-scheme: light dark; /* anche i colori nativi del browser (checkbox, campi numerici, barre di scorrimento) */
  accent-color: #0066cc; /* checkbox, radio e calendario dei campi data nel blu della pagina */
  --bg: light-dark(#f0f6fc, #010b1a); --card: light-dark(#fff, #031733); --text: light-dark(#031733, #f0f6fc);
  --muted: light-dark(#46566e, #9bb3cf); --line: light-dark(#b2d1f0, #173e72);
  --print: light-dark(#0066cc, #4d94db); /* blu "stampato": nomi dei mesi; nel tema scuro più chiaro, #0066cc sul navy era sotto 3,2:1 */
  --btn: #0066cc; --btn-text: #fff; /* pulsante principale */
  --smart: #0066cc; --smart-text: #fff;
  --smart-auto: light-dark(#d9e8f7, #0a2a5c); --smart-auto-text: light-dark(#004c99, #b2d1f0);
  --office: light-dark(#0a2a5c, #b2d1f0); --office-text: light-dark(#031733, #f0f6fc); /* --office: colore delle righe oblique */
  --ferie: light-dark(#f3da5b, #cdb447); --ferie-text: light-dark(#3b3410, #221d05);
  --holiday: light-dark(#fbe1df, #4a1f2b); /* scuro: si stacca dal navy senza pesare più degli smart */ --holiday-text: light-dark(#a12a22, #ff9f92);
  --past: light-dark(#f0f6fc, #021128); /* fondo dei mesi passati */
  --warn: light-dark(#8a5a00, #e0b050); --over: light-dark(#d7261b, #ff6b5e);
  /* Vetro: fondo semitrasparente (mesi, legenda, finestre), bordo chiaro "di luce", aloni blu dello sfondo */
  --glass: light-dark(rgb(255 255 255 / .55), rgb(3 23 51 / .5));
  --glass-strong: light-dark(#fff, rgb(3 23 51 / .8)); /* chiaro pieno: trasparente sopra lo sfondo scurito diventava grigio, e la barra dei pulsanti in fondo si vedeva come una striscia */
  --glass-edge: light-dark(rgb(255 255 255 / .85), rgb(178 209 240 / .14));
  --glow-a: light-dark(rgb(0 102 204 / .4), rgb(0 102 204 / .48));
  --glow-b: light-dark(rgb(102 163 224 / .5), rgb(102 163 224 / .22));
  --shadow: light-dark(rgb(0 40 100 / .14), rgb(0 0 0 / .35));
  --r: 12px; /* angoli arrotondati: un solo raggio per tutto */
}
/* Tema scelto col pulsante: vale qualunque sia quello del sistema */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ============================================================
   FONT: Titillium Web, file nella cartella fonts/ del repo (licenza OFL in fonts/OFL.txt).
   Solo caratteri latini (bastano per l'italiano) e pesi 400, 600, 700: il 500 non c'è.
   "swap": finché il file non arriva si vede il font di sistema.
   ============================================================ */
@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url(fonts/titillium-web-400.woff2) format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url(fonts/titillium-web-600.woff2) format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url(fonts/titillium-web-700.woff2) format("woff2"); }

/* ============================================================
   STRUTTURA GENERALE DELLA PAGINA
   ============================================================ */
/* Larghezze calcolate includendo bordo e padding (evita sorprese nei layout) */
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1240px; padding: 40px 24px 64px; background: var(--bg); color: var(--text);
       font: 14px/1.6 "Titillium Web", "Helvetica Neue", system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; }
/* Sfondo sfumato: due aloni blu su fondo pieno, fissi mentre si scorre, con sopra una grana leggera
   (rumore SVG) che evita le "bande" nelle sfumature.
   Sta in ::before (position: fixed) perché background-attachment: fixed non va su telefono. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
               background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"),
                           radial-gradient(60% 50% at 0% 0%, var(--glow-a), transparent 70%),
                           radial-gradient(55% 60% at 100% 100%, var(--glow-b), transparent 70%),
                           radial-gradient(40% 35% at 85% 10%, var(--glow-b), transparent 70%); }
/* Effetto vetro: fondo semitrasparente, bordo chiaro uguale su tutti i lati, ombra morbida tinta di blu.
   I mesi non sfocano: dietro c'è solo la sfumatura, e 12 sfocature costano a ogni scorrimento e animazione.
   La sfocatura resta dove passa sopra altro contenuto (legenda fissa, finestre, menu). */
.month, body > .legend, dialog { background: var(--glass); }
body > .legend, dialog { backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
/* Numeri (contatori, anno, giorni) a cifre di uguale larghezza: le colonne restano allineate */
#year, .count, .d, output { font-variant-numeric: tabular-nums; }
/* Su telefono meno margine ai lati */
@media (max-width: 640px) { body { padding: 24px 16px 80px; } } /* 80px in fondo: l'ultima riga di dicembre non finisce sotto "annulla" flottante */

/* Barra in alto, a griglia: sopra titolo e anno; sotto schema e "inverti settimane" a sinistra, icone a destra */
header { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px 12px; margin-bottom: 28px;
         grid-template-areas: "title title title year" "seg flip . tools"; }
/* Titolo grande: cresce con la larghezza dello schermo (clamp: minimo, preferito, massimo) */
h1 { grid-area: title; font-size: clamp(38px, 6vw, 60px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0; }
/* S fatta di giorni, come nell'icona, nel colore del titolo: alta quanto le maiuscole di Titillium (0,69 em), poggiata sulla riga di base */
.logo-s { height: .69em; width: auto; vertical-align: baseline; margin-right: .03em; fill: currentColor; }
/* Pulsanti "fantasma": solo bordo sottile, si scuriscono un poco al passaggio */
header button { font: inherit; min-height: 32px; min-width: 32px; padding: 4px 12px; border: 1px solid var(--line);
                border-radius: var(--r); background: var(--card); color: var(--text); cursor: pointer; }
header button:hover { border-color: var(--muted); }
/* Pulsanti con icona (frecce dell'anno, calendario, tema, suoni, guida): tutti quadrati della stessa misura */
#prev, #next, #undo, #ics, #settings, #help { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }

/* Anno: grande come il nome di un mese, è ciò che stai guardando; le frecce senza bordo finché non ci passi sopra */
.yearnav { grid-area: year; display: flex; align-items: center; gap: 4px; }
#prev, #next { border-color: transparent; background: none; font-size: 20px; }
#year { font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1; min-width: 2.6em; text-align: center; }

/* Schema: due segmenti dentro un solo contorno, quello scelto è pieno e blu.
   I radio veri restano (tastiera e lettori di schermo) ma sono invisibili.
   Due colonne uguali (1fr 1fr: larghe quanto la scritta più lunga), così la pillola blu (::before) è metà dell'interno
   e scorre da una metà all'altra come nel video (Demo.tsx: spring con damping 16, il testo cambia colore a metà corsa).
   2px di margine interno tra contorno e pillola: lo stesso anello di #flip premuto. */
.seg { grid-area: seg; display: grid; grid-template-columns: 1fr 1fr; position: relative; margin: 0; padding: 2px; min-inline-size: 0;
       border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.seg::before { content: ''; position: absolute; inset: 2px auto 2px 2px; width: calc(50% - 2px); border-radius: calc(var(--r) - 3px); background: var(--btn);
               transition: translate .9s linear(0, 0.095, 0.291, 0.498, 0.676, 0.81, 0.903, 0.961, 0.993, 1.009, 1.015, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1.001, 1); }
.seg:has([value="weekend"]:checked)::before { translate: 100%; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; padding: 2px 12px; min-height: 30px; border-radius: calc(var(--r) - 3px); /* + contorno e margine = 36px, come .tools e #flip; angoli concentrici: meno bordo + margine */
             color: var(--text); white-space: nowrap; cursor: pointer; transition: color 0s .15s; } /* .15s: la pillola è a metà */
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:not(:has(:checked)):hover { background: var(--bg); }
.seg label:has(:checked) { color: var(--btn-text); }
@media (prefers-reduced-motion: reduce) { .seg::before { transition: none; } } /* il "*" più sotto non prende i ::before */
.seg label:has(:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
#flip { grid-area: flip; justify-self: start; min-height: 36px; } /* alto come il contorno di .tools (pulsanti da 32 + margine 1 + bordo 1) */
/* "inverti settimane" attivo: blu come il segmento scelto, con lo stesso anello di 2px del colore del fondo tra contorno e blu */
#flip[aria-pressed="true"] { background: var(--btn); color: var(--btn-text); box-shadow: inset 0 0 0 2px var(--card); }
/* Non disponibile con lo schema "vicino al weekend" */
header button:disabled { opacity: .5; cursor: default; }
header button:disabled:hover { border-color: var(--line); }

/* Icone di servizio: un unico contorno, i pulsanti dentro senza bordo */
.tools { grid-area: tools; justify-self: end; display: flex; padding: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tools button { border-color: transparent; background: none; border-radius: calc(var(--r) - 2px); }
.tools button:hover { border-color: transparent; background: var(--bg); }
.tools button:disabled:hover { border-color: transparent; background: none; }

/* Telefono: titolo e anno; schema a tutta larghezza; sotto "inverti settimane" e le icone.
   Tre colonne: la barra delle icone (più larga dell'anno) prende le ultime due, così non toglie spazio al titolo */
@media (max-width: 640px) {
  header { grid-template-columns: 1fr auto auto; gap: 12px 4px; /* 4px: a 360px il titolo ci sta di poco */ grid-template-areas: "title title year" "seg seg seg" "flip tools tools"; }
  #year { font-size: 24px; }
}
/* Schermi strettissimi (iPhone SE vecchio): l'anno scende sotto il titolo */
@media (max-width: 359px) {
  header { grid-template-areas: "title title title" "year year year" "seg seg seg" "flip tools tools"; }
  .yearnav { justify-self: start; }
}
.help { color: var(--muted); margin: 0 0 12px; max-width: 75ch; }
.help a { color: inherit; }
/* Niente parola sola sull'ultima riga dei paragrafi */
p, li, small { text-wrap: pretty; }

/* Legenda: quadratini colorati (<i>) seguiti dalla descrizione */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 28px; color: var(--muted); font-size: 13px; }
/* La legenda della pagina resta in cima mentre si scorre (position: sticky), così i colori
   si leggono sempre, anche su telefono. Galleggia 10px sotto il bordo della finestra
   come una lastra intera, invece di sembrare tagliata in alto. */
body > .legend { position: sticky; top: 10px; z-index: 1; padding: 10px 14px; margin: 0 0 18px;
                 border: 1px solid var(--glass-edge); border-radius: var(--r);
                 box-shadow: 0 8px 24px -12px var(--shadow); }
@media (max-width: 640px) { body > .legend { font-size: 12px; gap: 4px 12px; } }
/* Il quadratino usa gli stessi segni dei giorni (variabili --fill/--edge definite per ogni stato, più sotto).
   Raggio ridotto in proporzione: con --r pieno su 14px diventava un cerchio, non la casella che rappresenta */
/* Legenda: il festivo ha il bordo del suo numero rosso */
.legend i.holiday { --edge: var(--holiday-text); }
/* "automatico" nel menu: casella tratteggiata vuota, decide la pagina */
#menu [data-set="auto"] i { --edge: var(--muted); --dash: dashed; }
.legend i, #menu i { display: inline-block; width: 14px; height: 14px; border-radius: calc(var(--r) / 3); vertical-align: -2px; margin-right: 6px;
                    background: var(--fill, none); border: 1px var(--dash, solid) var(--edge, transparent); }

/* Feedback "fisico" alla pressione e anello per chi naviga con la tastiera (Tab).
   :focus-visible compare solo da tastiera, non al click col mouse. */
button { transition: transform .15s cubic-bezier(.16, 1, .3, 1), border-color .15s, background-color .15s; }
button:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Link per saltare i comandi in alto con la tastiera: nascosto finché non riceve il focus */
.skip { position: absolute; left: 16px; top: 8px; z-index: 2; padding: 6px 14px; border-radius: var(--r);
        background: var(--btn); color: var(--btn-text); font-weight: 600; text-decoration: none; translate: 0 -200%; }
.skip:focus { translate: none; }
/* Chi ha chiesto al sistema meno animazioni non le vede */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   GRIGLIA DEI MESI
   auto-fill + minmax: il browser mette quante colonne ci stanno
   (larghe almeno 250px). 1 colonna su telefono, 3 su PC.
   Ogni mese è una lastra di vetro (vedi "Effetto vetro" più su).
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.month { border: 1px solid var(--glass-edge); border-radius: var(--r); padding: 16px;
         box-shadow: 0 12px 32px -16px var(--shadow); }
/* Mese che sfora un limite (più smart della quota o più del massimo in una settimana): bordo rosso */
.month.over { border-color: var(--over); box-shadow: inset 0 0 0 1px var(--over); }
/* Mesi passati: cartoncino più scuro e segni sbiaditi. Restano modificabili:
   passandoci sopra (o entrando con la tastiera) tornano leggibili. */
.month.past { background: color-mix(in srgb, var(--past) 55%, transparent); }
.month.past > * { opacity: .6; filter: saturate(.35); transition: opacity .15s; }
.month.past:hover > *, .month.past:focus-within > * { opacity: 1; }
/* Su touch non c'è il passaggio del mouse: niente velo, restano il fondo più scuro e i colori spenti */
@media (hover: none) { .month.past > * { opacity: 1; } }
/* Il mese corrente apre sempre una riga nuova: con i passati aperti nessuno gli sta accanto */
#current { grid-column-start: 1; }
/* Pulsante dei mesi passati: striscia tratteggiata e tenue, come uno smart solo proposto
   (c'è, ma non in primo piano). La freccia si gira quando sono aperti. */
#past { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 16px; padding: 10px 16px;
        font: inherit; color: var(--muted); background: none; border: 1px dashed var(--line);
        border-radius: var(--r); cursor: pointer; }
#past[hidden] { display: none; }
#past:hover { color: var(--text); border-color: var(--muted); }
#past svg { transition: rotate .2s; }
#past[aria-expanded="true"] svg { rotate: 180deg; }
/* Intestazione del mese: nome, contatore, pulsante reset */
/* flex-wrap: se il contatore non ci sta, scende intero sulla riga sotto invece di spezzarsi */
/* justify-content: flex-end: se −/+ e reset scendono sulla riga sotto, restano a destra */
.mh { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; margin-bottom: 12px; }
/* −/+ e reset insieme: vanno a capo in blocco, mai "reset" da solo */
.ctl { display: inline-flex; align-items: baseline; gap: 8px; }
/* Nome del mese grande e blu, come l'intestazione stampata di un modulo */
.mh h2 { margin: 0 auto 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--print); }
.count { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Meno smart della quota nel mese: contatore ambra (quota non sfruttata) */
.count.under { color: var(--warn); }
.month.over .count { color: var(--over); font-weight: 600; }
/* − / + per cambiare quanti smart fare in quel mese (24px: misura minima comoda da toccare) */
.step { display: inline-flex; gap: 3px; }
.step button { font: inherit; font-size: 14px; line-height: 1; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line);
               border-radius: min(var(--r), 30%); background: transparent; color: var(--text); cursor: pointer; } /* 30%: a 24px niente cerchio */
.step button:hover { border-color: var(--muted); }
/* Al limite (0 o quota normale) il pulsante resta raggiungibile da tastiera ma appare spento */
.step button[aria-disabled="true"] { opacity: .5; cursor: default; }
.reset { font: inherit; font-size: 12px; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 3px 0; margin: -3px 0; } /* alto 24px, stesso posto nel testo */
.reset:hover { color: var(--text); }
/* Su telefono tutto ciò che si tocca è alto almeno 40–44px, la misura comoda per il dito
   (barra in alto, −/+ e reset dei mesi, menu del giorno, finestre) */
@media (max-width: 640px) {
  header button { min-height: 44px; }
  #undo, #ics, #settings, #help { width: 44px; height: 44px; }
  #prev, #next { width: 32px; height: 44px; }   /* strette: a 360px titolo e anno devono stare su una riga */
  .seg label { min-height: 42px; }              /* + contorno e margine interno = 48px, come .tools (44 + 2 + 2) */
  #flip { min-height: 48px; }
  .step button { width: 40px; height: 40px; }
  .reset { padding: 12px 6px; margin: -12px -6px; } /* area da toccare più grande, stesso posto nel testo */
  #menu button, .toggle, .range button, .range input, .range select, dialog form button, .nav button { min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
}
/* Telefono: "annulla" esce dalla barra in alto e resta in basso a destra mentre scorri (lì non c'è Ctrl+Z).
   Copre solo la colonna della domenica, la meno toccata; compare solo quando c'è qualcosa da annullare. */
@media (max-width: 640px) {
  #undo { position: fixed; right: 16px; bottom: 16px; z-index: 2; width: 48px; height: 48px;
          border-radius: var(--r); background: var(--btn); color: var(--btn-text); box-shadow: 0 8px 24px -8px var(--shadow); }
  #undo:hover { background: var(--btn); }
  #undo:disabled { display: none; }
}

/* ============================================================
   CALENDARIO DEL MESE: 7 colonne (lun → dom). Minimale: niente righe né caselle colorate,
   si vedono solo i numeri e i segni degli stati. 2px tra le caselle: l'evidenziatore
   delle ferie sborda di 1px per lato, così più giorni di fila fanno una striscia unica.
   ============================================================ */
.days, .mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Intestazioni L M M G V S D: piccole e spente */
.dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 0 4px; }
/* Singolo giorno: casella quadrata (aspect-ratio: 1) con il numero centrato.
   Il segno dello stato (timbro, matita, evidenziatore) è disegnato da ::before, dietro al numero. */
.d { position: relative; isolation: isolate; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
     font: inherit; font-size: 14px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--fg, var(--text)); }
.d::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: var(--r);
             background: var(--fill, none); border: 1px var(--dash, solid) var(--edge, transparent); }
/* I giorni cliccabili sono <button>, i festivi sono <span> */
button.d { cursor: pointer; scroll-margin-top: 80px; } /* non finire sotto la legenda fissa */
button.d:hover { background: color-mix(in srgb, var(--print) 10%, transparent); }
/* Oggi: anello blu sottile (1,5px: non deve gridare più degli stati) a quadrato arrotondato. Sta 1px dentro la casella,
   fuori dal segno (che sta a 4-5px), con lo stesso raggio (--r) */
.d.today { font-weight: 700; }
.d.today::after { content: ""; position: absolute; inset: 1px; border: 1.5px solid var(--print); border-radius: var(--r);
                  pointer-events: none; }

/* Un segno per ogni stato del giorno. Il nome della classe è lo stesso
   nome di stato usato nel JavaScript (vedi planMonth in js/plan.js).
   Ogni stato imposta solo variabili: --fill (fondo), --edge/--dash (bordo), --fg (numero);
   le usano le caselle, la legenda e il fumetto. */
/* .auto (ufficio automatico): nessun segno, solo il numero (e niente voce in legenda) */
.weekend { --fg: color-mix(in srgb, var(--muted) 85%, transparent); }  /* 85%: almeno 4,5:1 anche nel tema chiaro */  /* weekend: numero spento */
.holiday { --fill: var(--holiday); --fg: var(--holiday-text); font-weight: 700; }
.smart-auto { --fill: var(--smart-auto); --edge: color-mix(in srgb, var(--smart-auto-text) 55%, transparent); --dash: dashed; --fg: var(--smart-auto-text); } /* a matita */
.smart { --fill: var(--smart); --fg: var(--smart-text); font-weight: 700; }                     /* timbro */
.office { --fill: repeating-linear-gradient(135deg, color-mix(in srgb, var(--office) 45%, transparent) 0 1.5px, transparent 1.5px 5px);
          --edge: var(--office); --fg: var(--office-text); font-weight: 700; }                  /* timbro a righe */
/* Alone del colore del mese attorno al numero: le righe oblique non lo attraversano più */
.d.office { text-shadow: 0 0 2px var(--card), 0 0 4px var(--card), 0 0 6px var(--card); }
.ferie { --fill: var(--ferie); --fg: var(--ferie-text); }                                       /* evidenziatore */
/* Timbri (smart e ufficio fissati): 1px più piccoli degli altri segni */
.d.smart::before, .d.office::before { inset: 5px; }
/* Evidenziatore: striscia bassa che sborda nelle caselle vicine, così più giorni di ferie di fila fanno una riga unica */
.d.ferie::before { inset: 26% -1px 22%; border-radius: var(--r); }
/* Tra due giorni di ferie attaccati gli angoli interni restano dritti: la striscia non si strozza */
.d.ferie + .d.ferie::before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.d.ferie:has(+ .d.ferie)::before { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Giorni appena cambiati (classe .land messa da render()): il segno nuovo "cade" come un timbro,
   l'evidenziatore delle ferie si stende da sinistra. --i è l'ordine del giorno tra quelli cambiati nel mese:
   arrivano uno dopo l'altro, a tempo con i pop (al massimo 6 passi, poi tutti insieme); il giorno cliccato
   non ha --i e parte subito. "both": prima di partire il segno resta nascosto. */
.land::before { animation: stamp .25s cubic-bezier(.3, 1.6, .5, 1) both;
                animation-delay: calc(.18s + min(var(--i, -2), 6) * .09s); }
.land.ferie::before { animation-name: sweep; animation-timing-function: cubic-bezier(.16, 1, .3, 1); transform-origin: left; }
@keyframes stamp { from { scale: 1.35; opacity: 0; } }
@keyframes sweep { from { scale: .2 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .land::before { animation: none !important; } }
/* Menu che si apre sopra il giorno cliccato per sceglierne lo stato (vedi openMenu in js/app.js).
   È un popover: sta sopra a tutto e si chiude da solo con Esc o cliccando fuori. */
#menu { position: fixed; inset: auto; margin: 0; padding: 4px; border: 1px solid var(--glass-edge); border-radius: var(--r);
        background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
        color: var(--text); box-shadow: 0 12px 32px -12px var(--shadow); animation: menuIn .15s ease-out; }
#menu button { display: flex; align-items: center; width: 100%; font: inherit; font-size: 14px; padding: 6px 10px; border: 0;
               border-radius: var(--r); background: none; color: inherit; cursor: pointer; white-space: nowrap; text-align: left; }
#menu button:hover { background: var(--line); }
/* Stato attuale del giorno: in grassetto */
#menu [aria-current] { font-weight: 700; }
/* Giorno fisso: separato dagli stati, con la spunta quando la regola è attiva */
#menu [data-weekly][hidden] { display: none; } /* sabato e domenica */
/* Le due voci (ufficio ogni…, smart ogni…) stanno sotto una sola riga di separazione */
#menu [data-weekly="office"] { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }
#menu [data-weekly="smart"] { border-radius: 0 0 var(--r) var(--r); }
#menu [data-weekly][aria-pressed="true"]::after { content: "✓"; margin-left: auto; padding-left: 12px; font-weight: 700; }
@keyframes menuIn { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { #menu { animation: none; } }
/* Smart in una settimana che supera il massimo: casella con anello rosso */
.d.over { box-shadow: inset 0 0 0 2px var(--over); }
label { color: var(--muted); }

/* Desktop (schermo largo almeno 1024px): pagina più larga, 3 mesi per riga e caselle più grandi */
@media (min-width: 1024px) {
  body { max-width: 1440px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .month { padding: 20px 22px; }
  .mh h2 { font-size: 26px; }
  .d { font-size: 15px; }
}

/* ============================================================
   TUTORIAL: <dialog> è la finestra modale nativa del browser
   ============================================================ */
dialog { max-width: 460px; width: calc(100% - 32px); border: 1px solid var(--glass-edge); border-radius: var(--r);
         background: var(--glass-strong); color: var(--text); padding: 28px;
         box-shadow: 0 24px 48px -16px rgb(1 11 26 / .35); } /* ombra tinta di navy, non nera */
/* Le finestre entrano con un piccolo rimbalzo, lo sfondo dietro sfuma (all'apertura; la chiusura resta secca) */
dialog[open] { animation: dlgIn .22s cubic-bezier(.3, 1.4, .5, 1); }
dialog[open]::backdrop { animation: fadeIn .2s ease-out; }
@keyframes dlgIn { from { opacity: 0; scale: .94; } }
@keyframes fadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog[open], dialog[open]::backdrop { animation: none; } }
/* ::backdrop è lo sfondo dietro la finestra aperta, leggermente sfocato */
dialog::backdrop { background: rgb(1 11 26 / .45); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
dialog ol { padding-left: 20px; margin: 0 0 20px; }
/* Titoli di sezione nella guida (es. "I tuoi dati") */
dialog h3 { margin: 24px 0 6px; font-size: 17px; font-weight: 600; }
dialog li { margin-bottom: 8px; }
dialog li::marker { color: var(--muted); }
dialog .legend { margin: 0 0 16px; }
dialog form { text-align: right; }
/* Pulsanti in fondo alle finestre: se il contenuto scorre restano incollati in basso (-28px = margine interno della finestra) */
dialog > form:last-child, #onboard .nav { position: sticky; bottom: -28px; margin: 0 -28px -28px; padding: 12px 28px 28px;
  background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
/* Pulsante principale: pieno, blu */
dialog form button { font: inherit; font-weight: 600; padding: 8px 18px; border: 0; border-radius: var(--r);
                     background: var(--btn); color: var(--btn-text); cursor: pointer; }
dialog form button:hover { opacity: .88; }
/* Easter egg: tutto il resto della pagina oscurato */
#car::backdrop { background: rgb(1 11 26 / .75); }
/* "No" più spento del "Sì", e così "Annulla" nella finestra del calendario */
#car button[value="no"], #icsDlg button[value=""] { background: none; color: var(--muted); border: 1px solid var(--line); }
/* ============================================================
   ONBOARDING (#onboard): procedura a passi, solo alla prima apertura
   ============================================================ */
#onboard { max-width: 520px; }
#onboard h2:focus { outline: none; } /* riceve il focus a ogni passo solo per i lettori di schermo */
/* Pallini di avanzamento: quello del passo attuale è pieno e più lungo */
.dots { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.dots i { width: 8px; height: 8px; border-radius: var(--r); background: var(--line); transition: width .2s, background-color .2s; }
.dots i.on { width: 20px; background: var(--btn); }
.dots span { margin-left: auto; }
/* Riga "etichetta ........ [−] 10 [+]" */
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stepper > span { margin-right: auto; }
.stepper button { font: inherit; font-size: 18px; line-height: 1; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line);
                  border-radius: var(--r); background: var(--card); color: var(--text); cursor: pointer; }
.stepper button:hover { border-color: var(--muted); }
.stepper output { font-size: 24px; font-weight: 700; min-width: 2ch; text-align: center; }
/* Schede dello schema: il radio è nascosto alla vista ma resta usabile da tastiera */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cards label { position: relative; display: block; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--text); cursor: pointer; }
.cards label:hover { border-color: var(--muted); }
.cards label:has(:checked) { border-color: var(--btn); box-shadow: inset 0 0 0 1px var(--btn); }
.cards label:has(:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.cards input { position: absolute; opacity: 0; }
.cards b { display: block; margin-bottom: 8px; }
.cards small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.4; }
/* Mini settimane disegnate nelle schede (L M M G V) */
.mini { grid-template-columns: repeat(5, 1fr); margin-top: 4px; border-radius: var(--r); }
.mini .d { font-size: 10px; }
.mini .d::before { border-radius: calc(var(--r) / 2); } /* caselle piccole: con --r pieno sembravano cerchi */
@media (max-width: 420px) { .cards { grid-template-columns: 1fr; } }
/* Campi data delle ferie (onboarding), pulsanti Esporta/Importa (impostazioni) e campi del calendario */
.range { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 8px; }
.range label { display: flex; flex-direction: column; font-size: 12px; }
.range input, .range select { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); }
/* Sotto i 16px Safari su iPhone ingrandisce la pagina quando tocchi il campo */
@media (max-width: 640px) { .range input, .range select { font-size: 16px; } }
.range button { font: inherit; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r);
                background: var(--card); color: var(--text); cursor: pointer; }
.range button:hover { border-color: var(--muted); }
/* Interruttori delle impostazioni (tema scuro, suoni): tutta la riga è il pulsante, a destra la levetta,
   blu e spostata a destra quando è acceso */
.toggle { font: inherit; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 0;
          border: 0; background: none; color: var(--text); cursor: pointer; }
.toggle i { position: relative; width: 40px; height: 24px; border-radius: var(--r); background: var(--line); transition: background-color .2s; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r);
                   background: var(--card); box-shadow: 0 1px 2px var(--shadow); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.toggle[aria-pressed="true"] i { background: var(--btn); }
.toggle[aria-pressed="true"] i::after { transform: translateX(16px); }
/* "Reset tutto" (impostazioni, I tuoi dati) cancella tutto: testo spento, diventa rosso al passaggio */
#resetAll { color: var(--muted); }
#resetAll:hover { border-color: var(--over); color: var(--over); }
/* Finestra calendario: campi uno sotto l'altro, tutti larghi uguali */
#icsDlg .range { flex-direction: column; align-items: stretch; }
#icsDlg .range label { font-size: 13px; }
/* Copia del mese corrente dentro la procedura (anteprima cliccabile) */
#preview .month { margin-bottom: 20px; }
/* Indietro (spento) a sinistra, Avanti/Inizia (pieno) a destra */
.nav { display: flex; justify-content: space-between; }
.nav button { font: inherit; font-weight: 600; padding: 8px 18px; border: 0; border-radius: var(--r);
              background: var(--btn); color: var(--btn-text); cursor: pointer; }
.nav button:hover { opacity: .88; }
.nav #obBack { background: none; color: var(--muted); border: 1px solid var(--line); }
.nav #obBack[hidden] { display: inline-block; visibility: hidden; } /* tiene il posto: "Avanti" resta a destra */