/* Token del design system: l'unico punto con valori grezzi. Le regole sotto usano solo var().
   `.scheda` (il foglio che legge l'azienda e che diventa PDF) ha i valori chiari anche col tema scuro: è carta, non interfaccia. */
:root, .scheda {
  /* Marchio: gli stessi colori sono scritti nei file di app/static/img/slancio/ (scripts/disegna_logo.py) */
  --color-brand: #38383b;
  --color-brand-raised: #4b4b50;
  --color-brand-accent: #f86030;     /* solo decoro e punto del marchio: 3.73:1 su antracite */
  --color-on-brand: #e3e3e6;
  --color-on-brand-strong: #ffffff;
  /* Fascia del foglio `.scheda`: il primario dell'organizzazione (`doc_theme.band`, nel suo foglio dei colori), altrimenti
     antracite; testo ed etichette bianchi, 11.7:1 su antracite, 5.64:1 sul blu #336b9c. */
  --color-sheet-band: #38383b;
  --color-on-sheet-band: #ffffff;

  /* Superfici e testo */
  --color-bg: #f4f4f3;
  --color-surface: #ffffff;
  --color-surface-sunken: #fafafa;
  --color-surface-column: #e9e9e7;
  --color-text: #232326;
  --color-text-muted: #62626a;
  --color-heading: #38383b;

  /* Bordi */
  --color-border: #8a8a8f;           /* bordo dei campi: 3.44:1 su bianco */
  --color-border-strong: #bfbfbc;
  --color-border-subtle: #dcdcda;

  /* Azione e collegamenti */
  --color-primary: #cc4513;          /* 4.74:1 col testo bianco */
  --color-primary-hover: #a23609;
  --color-on-primary: #ffffff;
  --color-link: #a23609;
  --color-link-hover: #cc4513;
  --color-highlight: #fde9e1;

  /* Stati: testo, fondo, bordo decorativo */
  --color-success: #2f6b4f;  --color-success-bg: #e6f0ea;  --color-success-border: #b9d6c5;
  --color-warning: #8a5e00;  --color-warning-bg: #fbf1d6;  --color-warning-border: #ead596;
  --color-danger:  #a23a2e;  --color-danger-bg:  #f8e4e0;  --color-danger-border:  #e6bdb6;
  --color-success-strong: #1f4c37;
  --color-warning-strong: #6a4800;
  --color-danger-strong: #7a2a21;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --color-focus: #cc4513;            /* 4.74:1 su bianco */
  --color-focus-on-brand: #ffffff;   /* 11.7:1 sulla barra antracite */

  /* Tipografia: solo font di sistema */
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Una sola scala: didascalia, testo, titolo di sezione, titolo di pagina; i numeri in evidenza hanno `display`. */
  --font-size-sm: 0.8rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.6rem;
  /* Il foglio `.scheda` è carta: tre misure in punti, uguali in pagina e nel PDF (mockup del profilo cifrato impaginato). */
  --font-size-sheet-title: 16.875pt;
  --font-size-sheet-body: 11.25pt;
  --font-size-sheet-caption: 9pt;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-code: 0.02em;
  --letter-spacing-stamp: 0.06em;
  --letter-spacing-caps: 0.08em;    /* etichette in maiuscolo del foglio */

  /* Spaziature, passo 0.25rem */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem;    --space-8: 3rem;
  --space-px: 1px;
  --space-0-5: 2px;

  /* Forme */
  --radius-sm: 8px;                /* etichette di codice, segni: prima 2px */
  --radius-md: 12px;               /* campi, menu, avvisi piccoli: prima 4px */
  --radius-lg: 16px;               /* colonne, avvisi, giorni dell'agenda: prima 6px */
  --radius-full: 999px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-accent: 3px;
  --border-width-sheet: 5px;

  /* Ombre: solo sovrapposizioni */
  --shadow-overlay: 0 8px 28px rgb(40 40 44 / 0.18);
  --color-backdrop: rgb(35 35 38 / 0.45);   /* fondo dietro una finestra modale */

  /* Interazione */
  --opacity-disabled: 0.5;
  --opacity-dragging: 0.45;
  --target-min: 24px;
  --target-touch: 44px;
  --duration-fast: 120ms;

  /* Layout. I punti di rottura non si possono usare in @media: sono 600px e 980px. */
  --sidebar-width: 216px;
  --topbar-height: 56px;
  --content-max-width: 1280px;
  --public-max-width: 834px;       /* il foglio A4 del dossier (210 mm) più i margini della pagina */
  --login-max-width: 380px;
  --auth-max-width: 26rem;
  --board-column-min: 176px;
  --board-column-min-height: 9rem;
  --picker-max-height: 15rem;
  --textarea-min-height: 4.6rem;
  --textarea-grow-min-height: 9rem;
  --meter-height: 0.75rem;
  --logo-sheet-height: 92px;
  --logo-login-width: 210px;
  --logo-brand-height: 26px;        /* marchio di Slancio nella barra */
  --timeline-dot: 8px;
  --modal-max-width: 40rem;
  --fasi-max-width: 52rem;        /* le quattro fasi: una colonna sola */
  --modal-ask-max-width: 26rem;   /* la domanda di uscita dalle fasi */
  --ring-size-sm: 3rem;           /* anello nella striscia «cosa manca» */
  --chip-check: "✓ ";             /* segno della pillola accesa: lo stato non è solo un colore */
  --feed-when-width: 10rem;   /* ci sta anche «scaduto il 17/10/2026» della pagina Oggi */
  --appt-time-width: 6.5rem;  /* «10:00 alle 11:00» */
  --month-cell-height: 4.5rem;
  --check-size: 1.1rem;
  --todo-check-size: 1.5rem;     /* la spunta di una cosa da fare, dentro il bersaglio da 44 px */
  --attivita-max-width: 46rem;   /* le pagine del candidato (Attività) si leggono a una colonna sola, come nel mockup */
  --appt-plain-time-width: 8.5rem;   /* «Mar 10/11 · 10:00» */
  --stack-label-width: 8.5rem;   /* etichetta a sinistra nelle righe di una tabella impilata */
  --inline-input-basis: 14rem;
  --repeat-field-min: 8rem;      /* campo più stretto di una voce ripetibile: sotto, la riga va a capo */
  --text-max-width: 42rem;
  --qr-max-width: 16rem;
  --meter-min-width: 6rem;
  --otp-tracking: 0.35em;
  --password-toggle-room: 5.5rem;
  --count-min-width: var(--count-min-width);
  --type-card-min: 19rem;
  --more-min-width: 15rem;
  --login-offset: 9vh;
  --font-size-code: 0.9em;
  --line-height-figure: 1.1;
  /* Stile elenco raggruppato (nato in Impostazioni, ora su tutta l'app) */
  --radius-xl: 20px;               /* gruppi, pannelli, finestre */
  --control-height: 36px;          /* campi e pulsanti: 44px sul telefono (--target-touch) */
  --control-height-sm: 32px;
  --ring-size: 4.5rem;
  --ring-stroke: 3;                /* in unità del disegno, su 36 */
  --color-fill-strong: #e2e2e0;      /* controlli secondari al passaggio del mouse */
  --color-knob: #ffffff;
  --color-switch-on: #2f6b4f;
  --radius-2xl: 28px;               /* pagina di accesso */
  --shadow-bar: 0 -4px 12px rgb(40 40 44 / 0.08);   /* barra dei comandi ferma in fondo: si stacca dal contenuto che scorre */
  --shadow-soft: 0 1px 2px rgb(40 40 44 / 0.04), 0 2px 12px rgb(40 40 44 / 0.05);
  --color-fill: #ededeb;             /* fondo dei controlli segmentati e dei binari spenti */
  --color-meter-rest: #e4e4e2;       /* parte restante di una barra */
  --font-size-display: 2.4rem;       /* numeri in evidenza */
  --meter-height-thin: 0.5rem;
  --switch-width: 3rem;
  --switch-height: 1.8rem;
  --switch-knob: 1.4rem;
  --settings-nav-width: 13rem;
  --section-nav-width: 12rem;       /* menu del candidato a sinistra, da 980 px */
  --settings-pane-max: 56rem;
  --row-min-height: 3.2rem;
  --mail-list-width: 24rem;         /* elenco delle conversazioni nella Posta */
  --z-overlay: 5;
  --z-skip-link: 10;
}
@media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; } }

/* Tema scuro: stessi nomi, valori nuovi. Segue il sistema; non vale in stampa né nelle pagine che si stampano come
   fogli (scheda del candidato), che mettono data-tema="chiaro" sull'elemento radice. Contrasti misurati: docs/design/2026-10-22-grafica-apple-tutta-app.md */
:root { color-scheme: light; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;
    --color-brand: #1b1b1f;
    --color-brand-raised: #2c2c32;
    --color-on-brand: #e3e3e6;
    --color-bg: #0f0f11;
    --color-surface: #1b1b1f;
    --color-surface-sunken: #151518;
    --color-surface-column: #26262b;
    --color-text: #ececef;
    --color-text-muted: #a6a6b0;
    --color-heading: #f5f5f7;
    --color-border: #85858f;
    --color-border-strong: #4b4b52;
    --color-border-subtle: #303036;
    --color-primary-hover: #b33c0e;
    --color-link: #ff9f7a;
    --color-link-hover: #ffbba0;
    --color-highlight: #3b2218;
    --color-success: #86d8ab;  --color-success-bg: #17301f;  --color-success-border: #2c5a42;
    --color-warning: #f1c765;  --color-warning-bg: #372c0d;  --color-warning-border: #5c4812;
    --color-danger:  #ffa393;  --color-danger-bg:  #3b1c18;  --color-danger-border:  #6b332c;
    --color-success-strong: #b0ebcb;
    --color-warning-strong: #f8dd98;
    --color-danger-strong: #ffc3ba;
    --color-focus: #ff9f7a;
    --color-fill: #2a2a30;
    --color-fill-strong: #36363d;
    --color-meter-rest: #2f2f36;
    --color-switch-on: #2f8a5f;
    --shadow-soft: 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-overlay: 0 10px 30px rgb(0 0 0 / 0.6);
    --shadow-bar: 0 -4px 12px rgb(0 0 0 / 0.4);
    --color-backdrop: rgb(0 0 0 / 0.65);
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; } /* rispetta la scelta dell'utente */
body { margin: 0; font-family: var(--font-family-sans); color: var(--color-text); background: var(--color-bg); line-height: var(--line-height-normal); }
a { color: var(--color-link); text-underline-offset: var(--space-0-5); }
a:hover { color: var(--color-link-hover); }
h1, h2, h3 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-heading); }
h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
p { margin: 0 0 var(--space-3); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-heading); padding: 0; margin-bottom: var(--space-3); font-size: var(--font-size-md); }
label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

/* Utilità di testo */
.muted { color: var(--color-text-muted); }
.small { font-size: var(--font-size-sm); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.code { font-family: var(--font-family-mono); font-size: var(--font-size-code); letter-spacing: var(--letter-spacing-code); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; }

/* ===== Struttura della pagina ===== */
.skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: var(--z-skip-link); padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-link); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); box-shadow: var(--shadow-overlay); transform: translateY(-300%); }
.skip-link:focus { transform: none; }
.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-brand); color: var(--color-on-brand); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.sidebar :focus-visible { outline-color: var(--color-focus-on-brand); }
.sidebar__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sidebar__menu { display: flex; flex-direction: column; flex: 1; gap: var(--space-6); }
.sidebar__foot { margin-top: auto; font-size: var(--font-size-sm); padding: 0 var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.brand { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-on-brand-strong); text-decoration: none; letter-spacing: var(--letter-spacing-tight); padding: 0 var(--space-3); } /* allineato al testo del menu */
.brand:hover { color: var(--color-on-brand-strong); }
.brand__logo { display: block; height: var(--logo-brand-height); width: auto; }
.nav { display: flex; flex-direction: column; gap: var(--space-0-5); }
.nav__link { display: flex; align-items: center; min-height: var(--control-height); color: var(--color-on-brand); text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); }
.nav__link:hover { background: var(--color-brand-raised); color: var(--color-on-brand-strong); }
.sidebar__user { color: var(--color-on-brand); }   /* 10:1 su antracite, come le voci del menu */
.sidebar__user:hover, .sidebar__user[aria-current="page"] { color: var(--color-on-brand-strong); }
.nav__link[aria-current="page"] { background: var(--color-brand-raised); color: var(--color-on-brand-strong); font-weight: var(--font-weight-semibold); }
.main { padding: var(--space-7) var(--space-7) var(--space-8); max-width: var(--content-max-width); width: 100%; min-width: 0; }
.main:focus { outline: none; }
.stack > * + * { margin-top: var(--space-7); }
.stack--tight > * + * { margin-top: var(--space-5); }
.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.section { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: var(--space-5); margin-top: var(--space-5); }
.subheading { font-size: var(--font-size-md); margin-bottom: var(--space-3); }

/* Pagine fuori dalla struttura: accesso e dossier pubblico */
.center { max-width: var(--login-max-width); margin: var(--login-offset) auto; padding: 0 var(--space-4); }
.center .brand { color: var(--color-heading); display: block; margin-bottom: var(--space-6); padding: 0; font-size: var(--font-size-xl); }
.center .brand__logo { width: var(--logo-login-width); height: auto; margin: 0 auto; }
/* Logo dell'agenzia sotto il marchio del prodotto, più piccolo: chi usa Slancio, non Slancio. */
.login-logo { display: block; max-width: var(--logo-login-width); max-height: var(--logo-sheet-height); width: auto; height: auto; margin: calc(-1 * var(--space-3)) auto var(--space-6); }
/* Secondo fattore: il segreto da copiare a mano e i codici di recupero, leggibili e senza tagli a metà gruppo. */
.steps-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.steps-list > li + li { margin-top: var(--space-2); }
.qr { display: block; width: 100%; max-width: var(--qr-max-width); aspect-ratio: 1; margin: var(--space-4) auto; background: var(--color-surface); border-radius: var(--radius-md); }
.secret-key { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); word-spacing: var(--space-2); overflow-wrap: anywhere; background: var(--color-fill); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.recovery-codes { list-style: none; margin: 0 0 var(--space-4); padding: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); background: var(--color-fill); border-radius: var(--radius-md); }
.public { max-width: var(--public-max-width); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-8); }

/* ===== Componenti (macro in _macros.html) ===== */

/* Intestazione di pagina */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-header__text { min-width: 0; }
.page-header__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); margin-bottom: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: none; }
.page-header__back:hover { color: var(--color-link); text-decoration: underline; }
.page-header__sub { color: var(--color-text-muted); margin-top: var(--space-1); max-width: var(--text-max-width); }
.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Pannello */
.panel { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-5); }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.panel__title { font-size: var(--font-size-lg); }
.panel__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Pulsanti */
.btn--primary, .btn--secondary, .btn--danger, .btn--link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: var(--space-1) var(--space-5);
  font: inherit; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); text-align: center;
  border: var(--border-width) solid transparent; border-radius: var(--radius-full);
  background: var(--color-fill); color: var(--color-heading); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.btn--secondary:hover { background: var(--color-fill-strong); color: var(--color-heading); }
.btn--secondary:active { background: var(--color-fill-strong); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover, .btn--primary:active { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--danger { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-surface); }
.btn--danger:hover, .btn--danger:active { color: var(--color-danger-strong); border-color: var(--color-danger-strong); background: var(--color-danger-bg); }
.btn--link { padding: 0; border: 0; background: none; color: inherit; font-weight: var(--font-weight-regular); text-decoration: underline; text-underline-offset: var(--space-0-5); }
.btn--link:hover { color: inherit; text-decoration-thickness: var(--border-width-thick); }
.btn--small { padding: var(--space-1) var(--space-4); font-size: var(--font-size-sm); min-height: var(--control-height-sm); }
.btn--primary[disabled], .btn--secondary[disabled], .btn--danger[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn--primary[disabled]:hover { background: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary[disabled]:hover { background: var(--color-fill); }
.btn--primary[hidden], .btn--secondary[hidden], .btn--danger[hidden], .btn--link[hidden] { display: none; }
/* Le varianti «check» e «checked» di ui.button: la spunta è un pulsante vero (funziona senza JavaScript e da tastiera): un quadrato vuoto per «da fare», con il segno per «fatta». */
.btn--check, .btn--checked { display: grid; place-items: center; width: var(--target-touch); height: var(--target-touch); padding: 0; border: 0; background: none; cursor: pointer; }
.btn--check::before, .btn--checked::before { content: ""; box-sizing: border-box; width: var(--check-size); height: var(--check-size); border: var(--border-width-accent) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.btn--check:hover::before, .btn--checked:hover::before { border-color: var(--color-primary); }
.btn--checked::before { content: "✓"; display: grid; place-items: center; line-height: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
[aria-busy="true"] { cursor: progress; }
/* Da computer l'etichetta sta su una riga, così due pulsanti dello stesso tipo sono alti uguali. */
@media (min-width: 600px) { .btn--primary, .btn--secondary, .btn--danger { white-space: nowrap; } }

/* Campi */
.field { margin-bottom: var(--space-4); }
.field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-bottom: var(--space-2); }
.field__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.field__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.field__error { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-danger); margin-top: var(--space-1); }
.field__row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.field__row > .input { flex: 1 1 var(--inline-input-basis); width: auto; min-width: 0; }
.input { display: block; width: 100%; min-height: var(--control-height); font: inherit; color: inherit; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.input:hover { border-color: var(--color-heading); }
.input:focus { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input[readonly] { background: var(--color-surface-sunken); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[type="file"] { padding: var(--space-1) var(--space-2); }
.input:not(.input--multiline) { height: var(--control-height); }   /* select, testo e file alti uguali */
.input--select { padding-block: 0; line-height: var(--line-height-tight); }   /* il testo scelto sta nell'altezza del campo: con il riempimento verticale del campo di testo veniva tagliato */
/* Campo file: senza JavaScript resta il campo del browser; con app.js (classe file--js) il campo si nasconde ma resta nel tab, e si vede il pulsante «Scegli il file» con il nome scelto accanto. */
.file__ui { display: none; }
.file--js .file__ui { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.file--js .file__input { position: absolute; width: var(--space-px); height: var(--space-px); padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.file--js .file__input:focus-visible + .file__ui .btn { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.file__name { flex: 1 1 10rem; min-width: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
.file__name.is-chosen { color: var(--color-text); }
.input--multiline { min-height: var(--textarea-min-height); resize: vertical; }
/* Cresce con il testo dove il browser lo sa fare (field-sizing); altrimenti le righe del modulo e il ridimensionamento. */
/* `.input.input--grow`: sotto i 600 px `.input` imposta un'altezza minima più bassa e verrebbe dopo. */
.input.input--grow { field-sizing: content; min-height: var(--textarea-grow-min-height); }
.input--copy { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-surface-sunken); }
.field--uncertain .input { border-color: var(--color-warning); background: var(--color-warning-bg); }
.field--inline { margin: 0; }
.field--inline .input--select { width: auto; }
.field--check { align-self: end; }
.field--check .check { min-height: var(--control-height); align-items: center; }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); color: var(--color-text); cursor: pointer; }
.check input, .choice input { accent-color: var(--color-primary); width: var(--check-size); height: var(--check-size); flex: none; margin: var(--space-1) 0 0; }
.field--check .check input { margin-top: 0; }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); background: var(--color-surface); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-text); cursor: pointer; }
.choice + .choice { margin-top: var(--space-2); }
.choice:hover { border-color: var(--color-border); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-highlight); }
.choices { margin-bottom: var(--space-5); }
.repeat { border-left: var(--border-width-thick) solid var(--color-border-subtle); padding: var(--space-1) 0 0 var(--space-4); margin-bottom: var(--space-5); }
.fieldset--uncertain .repeat { border-left-color: var(--color-warning); }
/* Voce ripetibile su una riga (lingue, formazione): campi affiancati, la X in fondo. Le etichette restano per chi legge con
   la voce e il segnaposto le ripete a vista; su schermo stretto i campi vanno a capo e la X resta in cima alla voce. */
.repeat-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.repeat-row__fields { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(var(--repeat-field-min), 1fr)); }
.repeat-row .field { margin-bottom: 0; }
.repeat-row .field__head { position: absolute; width: var(--space-px); height: var(--space-px); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.repeat-row__end { flex: none; }
.repeat-row__end .btn { min-width: var(--control-height); min-height: var(--control-height); padding: 0; color: var(--color-danger); font-size: var(--font-size-xl); }
.repeat-row__removed { display: none; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-height); }
.repeat-row__removed p { margin: 0; font-size: var(--font-size-sm); }
.repeat-row.is-removed > :not(.repeat-row__removed):not([type="hidden"]) { display: none; }
.repeat-row.is-removed > .repeat-row__removed { display: flex; }

/* Griglia dei form: 12 colonne */
/* Larghezze: span-2 numeri stretti (CAP, anni), span-3 date e valori brevi, span-4 medio, span-6 metà, span-8 e span-12 lungo.
   I campi si allineano in alto: note di altezza diversa non fanno scendere gli input a gradini. */
.form-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
/* Le colonne dipendono dalla larghezza del contenitore (pagina o pannello), non da quella della finestra. */
.main, .panel { container: form / inline-size; }
@container form (max-width: 720px) {
  .form-grid > .span-2, .form-grid > .span-3, .form-grid > .span-4 { grid-column: span 6; }
  .form-grid > .span-5, .form-grid > .span-6, .form-grid > .span-8, .form-grid > .span-12 { grid-column: span 12; }
}
@container form (max-width: 480px) {
  .form-grid.form-grid > * { grid-column: 1 / -1; }
}
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
/* Il pulsante principale è l'ultimo della riga, a destra: nel documento resta il primo, così la tastiera lo trova subito. */
.form-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-5); }
.group__pad > .form-actions { margin-top: 0; }
.form-section { margin-top: var(--space-7); }
.form-section:first-of-type { margin-top: 0; }
.form-section > legend { font-size: var(--font-size-lg); margin-bottom: var(--space-4); }
.form-section__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-4); max-width: var(--text-max-width); }

/* Coppie di campi corti (Nome e Cognome, Comune e CAP, RAL, Dal e Al): restano affiancate anche in una colonna stretta,
   finché c'è posto per due campi leggibili. */
@container form (min-width: 280px) {
  .form-grid--pairs.form-grid--pairs > .span-4 { grid-column: span 4; }
  .form-grid--pairs.form-grid--pairs > .span-6 { grid-column: span 6; }
  .form-grid--pairs.form-grid--pairs > .span-8 { grid-column: span 8; }
}
/* Nelle fasi, sotto i 600 px, una colonna sola: Nome e Cognome, Comune e CAP non si affiancano (il segnaposto del Comune si legge intero). */
@container form (max-width: 519px) {
  .fasi .form-grid--pairs.form-grid--pairs > * { grid-column: 1 / -1; }
}

/* Scelte a pillola (macro chip_choice) */
.chip-choice { border: 0; padding: 0; min-width: 0; }
.chip-choice__legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-bottom: var(--space-2); font-size: var(--font-size-md); }
.chip-choice__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; display: inline-flex; align-items: center; min-height: var(--control-height); max-width: 100%; padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); overflow-wrap: break-word; cursor: pointer; }
.chip:hover { border-color: var(--color-border); }
.chip__input { position: absolute; opacity: 0; width: var(--space-px); height: var(--space-px); margin: 0; }
.chip:has(.chip__input:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.chip:has(.chip__input:checked) { border-color: var(--color-primary); background: var(--color-highlight); color: var(--color-heading); font-weight: var(--font-weight-semibold); }
.chip:has(.chip__input:checked) .chip__text::before { content: var(--chip-check); }
.chip:has(.chip__input:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* Valore proposto dal sistema e non ancora confermato: tratteggiato, con la parola «proposto»; un tocco lo sceglie. */
.chip--proposed { border-style: dashed; border-color: var(--color-primary); }
.chip__note { margin-left: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.field--uncertain .chip { border-color: var(--color-warning); }
.chip-choice--invalid .chip { border-color: var(--color-danger); }

/* Vista Profilo: striscia «cosa manca», tre colonne (chi è, il lavoro, competenze e requisiti), esperienze sotto.
   Le colonne dipendono dallo spazio del modulo, non dalla finestra: stessa resa nella scheda e nelle fasi.
   L'ordine del documento non cambia mai: la griglia sposta, il tasto Tab segue il documento. */
.profile-form { container: profile / inline-size; }
/* Tre colonne portanti, ben riquadrate (Matteo, 1/11): ogni colonna e ogni sezione larga è un riquadro; il primo titolo di ogni
   riquadro ha lo stesso peso (xl), le sezioni che seguono nella colonna sono sottotitoli (lg) separati da una riga; etichette dei
   campi e delle pillole hanno una misura sola (sm). La spaziatura è una: lo stacco della griglia e il rientro del riquadro. */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.profile-layout__col, .profile-layout__wide { container: form / inline-size; min-width: 0; padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); }
.profile-layout__wide { grid-column: 1 / -1; }
.profile-layout__col > .form-section:first-child, .profile-layout__col > .chip-choice:first-child { margin-top: 0; }
.profile-layout__col > .form-section + .form-section, .profile-layout__col > .chip-choice + .form-section, .profile-layout__col > .form-section + .chip-choice, .profile-layout__col > .chip-choice + .chip-choice { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border-subtle); }
.profile-layout__col > .form-section:first-child > legend, .profile-layout__wide > .form-section:first-child > legend, .profile-layout__col > .chip-choice:first-child > .chip-choice__legend { font-size: var(--font-size-xl); margin-bottom: var(--space-4); }
.profile-form .chip-choice__legend { font-size: var(--font-size-sm); }
/* Un riquadro largo fatto di un solo campo (Informazioni aggiuntive): l'etichetta è il titolo del riquadro. */
.profile-layout__wide > .form-section > .field > .field__label { font-size: var(--font-size-lg); }
/* In una coppia le etichette possono andare a capo in modo diverso (comune con «Comune riconosciuto», CAP): le righe
   etichetta, campo e nota sono comuni alle due voci, così i due campi stanno alla stessa altezza. */
.form-grid--pairs > .field:not(.field--check) { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.form-section .chip-choice, .form-section .field--check { margin-bottom: var(--space-4); }
/* Una scelta a pillole che fa da gruppo da sola (Turni che accetta): stesso titolo delle altre sezioni della colonna. */
.profile-layout__col > .chip-choice { margin: 0; }
.profile-layout__col > .chip-choice > .chip-choice__legend { font-size: var(--font-size-lg); margin-bottom: var(--space-4); }
@container profile (max-width: 639px) {
  .profile-layout__col, .profile-layout__wide { padding: var(--space-4); }
}
@container profile (min-width: 640px) {
  .profile-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-layout__col--skills { grid-column: 1 / -1; }
}
@container profile (min-width: 960px) {
  .profile-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-layout__col--skills { grid-column: auto; }
}
/* Le quattro fasi della scheda (candidates/fasi.html): una colonna sola, i nomi delle fasi in fila sopra il contenuto, la barra con
   Indietro e Avanti sempre in vista in fondo. Senza JavaScript si vedono tutte le sezioni e un solo pulsante salva. */
.fasi { container: form / inline-size; max-width: var(--fasi-max-width); margin: 0 auto; }
.fasi__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.fasi__testa h1 { overflow-wrap: anywhere; }
.fasi__azioni { display: flex; align-items: center; gap: var(--space-2); }
.fasi__codice { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.fasi__passi ol { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.fasi__passi a { display: grid; align-content: start; min-height: var(--target-touch); padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: var(--border-width-accent) solid transparent; margin-bottom: calc(-1 * var(--border-width)); color: var(--color-text-muted); font-size: var(--font-size-sm); text-decoration: none; overflow-wrap: anywhere; }
.fasi__passi a:hover { color: var(--color-heading); }
.fasi__passi a[aria-current="step"] { color: var(--color-heading); font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-heading); }
.fasi__numero { font-variant-numeric: tabular-nums; }
.fase__titolo { margin-bottom: var(--space-1); font-size: var(--font-size-lg); }
.fase__titolo:focus { outline: none; }
.fase__legenda { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* I campi hanno già il loro margine: tra due gruppi di campi non serve altro, solo davanti a un elenco col titolo (Lingue, Formazione). */
.fase .form-section + .form-section { margin-top: 0; }
.fase .form-section--list { margin-top: var(--space-5); }
.fase .form-section--list > legend { margin-bottom: var(--space-2); font-size: var(--font-size-md); }
.fase .form-section:has(> .chip-choice--inline) + .form-section { margin-top: var(--space-4); }
.star { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.fasi__mancano { margin-top: var(--space-5); }
.fasi__avviso { margin-bottom: var(--space-4); }
.fasi__avviso .form-actions { margin-top: var(--space-3); flex-direction: row; }
.modal--domanda { width: min(var(--modal-ask-max-width), calc(100vw - 2 * var(--space-4))); }
.modal__azioni { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.fasi__barra { position: sticky; bottom: 0; z-index: var(--z-overlay); display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); margin-inline: calc(-1 * var(--space-4)); background: var(--color-surface); border-top: var(--border-width) solid var(--color-border-subtle); box-shadow: var(--shadow-bar); }
@container form (max-width: 480px) {
  .fasi__barra .btn { flex: 1 1 0; }
  .fasi__passi a { padding-right: var(--space-1); }
}
.profile-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.profile-status .ring__fig { width: var(--ring-size-sm); height: var(--ring-size-sm); }
.profile-status .ring__num { font-size: var(--font-size-sm); }
.profile-checks { margin-top: var(--space-4); }
/* Competenze a caselle (fase Competenze): ogni categoria è una riga chiusa, titolo a sinistra e conteggio a destra (macro fold),
   una sotto l'altra e separate da una linea, senza riquadri; il nome della categoria fa già da titolo delle caselle. */
.skill-flags { margin: 0 0 var(--space-4); }
.skill-flags .fold { border-top: var(--border-width) solid var(--color-border-subtle); }
.skill-flags .fold + .fold { margin-top: 0; }
.skill-flags .fold:last-child { border-bottom: var(--border-width) solid var(--color-border-subtle); }
.skill-flags .fold__summary { min-height: var(--control-height); padding: 0; }
.skill-flags .fold[open] > .fold__summary { border-bottom: 0; }
.skill-flags .fold__body { padding: 0 0 var(--space-3); }
.skill-flags .chip-choice { margin: 0; }
.skill-flags[data-star] .fold__title::after { content: " *"; content: " *" / ""; }
.skill-flags .chip-choice__legend { position: absolute; width: var(--space-px); height: var(--space-px); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Etichetta e pillole sulla stessa riga (Automunito, Patenti): la legenda galleggia a sinistra e le pillole, anche se vanno a
   capo, restano nella colonna a destra. Sul telefono l'etichetta sta sopra. */
.chip-choice--inline { --inline-label: calc(2 * var(--space-8)); margin-bottom: var(--space-2); }
.chip-choice--inline > .chip-choice__legend { float: left; align-items: center; width: var(--inline-label); min-height: var(--control-height); margin: 0; }
.chip-choice--inline > .chip-choice__list { margin-left: calc(var(--inline-label) + var(--space-3)); }
.form-section .chip-choice--inline { margin-bottom: var(--space-2); }
@media (max-width: 599px) {
  .chip-choice--inline > .chip-choice__legend { float: none; width: auto; min-height: 0; margin-bottom: var(--space-2); }
  .chip-choice--inline > .chip-choice__list { margin-left: 0; }
}
.repeat__more { margin-top: calc(-1 * var(--space-2)); }
.repeat .chip-choice { margin-bottom: 0; }
/* Esperienze (registro 38): una scheda per esperienza, su un fondo appena diverso dal pannello e senza bordo, così si
   distinguono senza mettere un riquadro dentro un riquadro. Il tasto «Aggiungi» è subito sotto l'ultima, largo al telefono. */
.esp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); align-items: start; background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-3) 0; margin-bottom: var(--space-3); }
.esp-card__body { display: contents; }
@media (max-width: 599px) {
  .esp-card { column-gap: var(--space-2); }   /* due pixel in più al campo: «Operatore di macchine utensili» entra intero a 390 */
}
.esp-card__main, .esp-card__when { grid-column: 1; min-width: 0; }
.esp-card__body > .form-grid { grid-column: 1 / -1; }
/* Dentro la scheda: mansione e azienda sulla stessa riga e il comune sotto (con tre campi su una riga «Officine Meccaniche
   Lombarde» si tagliava: un campo non va a capo, quindi si va a capo con i campi); dal, al e «lavora ancora qui» sotto; le
   mansioni crescono col testo e vuote restano basse. Sotto i 480 px di spazio (telefono) i campi vanno uno per riga, perché
   azienda e comune affiancati taglierebbero il testo; dal e al restano affiancati. */
.esp-card__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); align-items: start; }
.esp-card__when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-2); align-items: start; }
.esp-card__when > .field--check { grid-column: 1 / -1; }
.esp-card__when .check { font-size: var(--font-size-sm); }
@container form (min-width: 480px) {
  .esp-card__when { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
  .esp-card__when > .field--check { grid-column: auto; margin-top: var(--space-6); }
  .esp-card__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esp-card__main > :first-child { grid-column: 1 / -1; }
}
@container form (min-width: 720px) {
  .esp-card__main > :first-child { grid-column: auto; }
  .esp-card__when { grid-template-columns: 1fr 1fr 2fr; gap: 0 var(--space-4); }
}
.esp-card .field { margin-bottom: var(--space-3); }
.esp-card .input--multiline { field-sizing: content; min-height: 0; }
.fieldset--uncertain .esp-card { box-shadow: inset var(--border-width-accent) 0 0 var(--color-warning); }
.esp-card .chip-choice { margin-bottom: var(--space-3); }
/* Comandi della scheda, a fine voce: maniglia, su, giù ed elimina; ognuno di 44 px per il dito. Al telefono stanno in colonna
   accanto a mansione, azienda e comune e le righe sotto prendono tutta la larghezza; dove c'è spazio chiudono in fila la prima
   riga. Eliminata, la scheda si riduce alla riga con «Annulla» (l'eliminazione vale quando si salva). */
.esp-card__bar { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
@container form (min-width: 720px) {
  .esp-card__bar { flex-direction: row; align-self: end; }
}
.esp-card__bar .btn { min-width: var(--target-touch); min-height: var(--target-touch); padding: 0; font-size: var(--font-size-lg); }
.esp-card__bar [data-esp-handle] { cursor: grab; touch-action: none; }
.esp-card__bar [data-esp-delete] { color: var(--color-danger); font-size: var(--font-size-xl); }
.esp-card__bar [aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.esp-card__removed { display: none; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); }
.esp-card__removed p { margin: 0; font-size: var(--font-size-sm); }
.esp-card.is-removed > :not(.esp-card__removed):not([type="hidden"]) { display: none; }
.esp-card.is-removed > .esp-card__removed { display: flex; }
.esp-card.is-removed { border-style: dashed; }
.esp-card.is-dragging { box-shadow: var(--shadow-soft); border-color: var(--color-primary); }
.esp-list > [data-add-row] { width: 100%; min-height: var(--target-touch); }
@container form (min-width: 600px) { .esp-list > [data-add-row] { width: auto; } }
/* Nel modulo del profilo «Comune riconosciuto» resta per chi legge con la voce, non si ripete sotto ogni comune. */
.profile-form .picker__status { position: absolute; width: var(--space-px); height: var(--space-px); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-form .form-section > .disclosure, .profile-form .profile-layout__wide > .disclosure { margin-bottom: var(--space-4); }
.profile-layout__wide > .disclosure > .disclosure__summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-touch); font-size: var(--font-size-lg); }
.profile-layout__wide > .disclosure > .disclosure__summary::-webkit-details-marker { display: none; }
.profile-layout__wide > .disclosure > .disclosure__summary::before { content: "›"; color: var(--color-text-muted); }
.profile-layout__wide > .disclosure[open] > .disclosure__summary::before { content: "⌄"; }

/* Fila di controlli in linea: ricerca, cambio di stato, pulsanti di copia */
.toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.toolbar .field--inline:has(input[type="search"]) { flex: 1 1 var(--inline-input-basis); }
.toolbar--search { margin-bottom: var(--space-5); }

/* Scelta del comune */
.picker__control { position: relative; }
.picker__list { position: absolute; z-index: var(--z-overlay); left: 0; right: 0; top: 100%; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); margin: var(--space-1) 0 0; padding: var(--space-1) 0; list-style: none; max-height: var(--picker-max-height); overflow-y: auto; box-shadow: var(--shadow-overlay); }
.picker__list li { padding: var(--space-2) var(--space-3); min-height: var(--control-height); cursor: pointer; }
.picker__list li[aria-selected="true"], .picker__list li:hover { background: var(--color-highlight); }
.picker__list li.picker__empty { color: var(--color-text-muted); cursor: default; }
.picker__list li.picker__empty:hover { background: transparent; }
.picker__hint { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.picker__status { font-size: var(--font-size-sm); color: var(--color-success); }

/* Tabelle */
.table-wrap { overflow-x: auto; container: table / inline-size; }
.table { border-collapse: collapse; width: 100%; }
.table th { text-align: left; font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-subtle); white-space: nowrap; }
.table td { padding: var(--space-4) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-subtle); vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }
.table th.is-right, .table td.is-right { text-align: right; }
.table td.code { white-space: nowrap; }
/* Azioni in una cella di tabella: tutte uguali, collegamento sottolineato su una riga, anche quando aprono una conferma. */
.table td .table__act, .table td.is-right .disclosure__summary { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-link); text-decoration: underline; white-space: nowrap; }
.table td.is-right .disclosure__summary:hover { color: var(--color-link-hover); }

/* Coppie etichetta e valore */
.kv { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; }
.kv .kv__text { white-space: pre-line; overflow-wrap: anywhere; }
/* Etichetta sopra il valore, a ogni larghezza (Profilo). */
.kv--stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kv.kv--stack dt { font-size: var(--font-size-sm); margin-top: var(--space-3); }
.kv.kv--stack dt:first-child { margin-top: 0; }
.tel { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.tel__wa { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-touch); min-height: var(--target-touch); margin-block: calc(-1 * var(--space-2)); color: var(--color-text); border-radius: var(--radius-full); }
.tel__wa:hover { background: var(--color-fill-strong); }

/* Etichette di stato */
.tag { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); padding: var(--space-0-5) var(--space-3); border-radius: var(--radius-full); background: var(--color-fill); color: var(--color-text-muted); white-space: nowrap; }
.tag--neutral { background: var(--color-fill); color: var(--color-text-muted); }
.tag--success { background: var(--color-success-bg); color: var(--color-success); }
.tag--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.tag--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.tag--strong { background: var(--color-heading); color: var(--color-bg); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0; list-style: none; }

/* Avvisi */
.alert { padding: var(--space-3) var(--space-4); border: var(--border-width) solid; border-radius: var(--radius-lg); }
.alert:not(:last-child) { margin-bottom: var(--space-5); }
.stack > .alert:not(:last-child) { margin-bottom: 0; }   /* il vuoto tra i blocchi lo dà già .stack */
.alert--info { background: var(--color-surface); border-color: var(--color-border-subtle); box-shadow: var(--shadow-soft); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-strong); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-strong); }
.alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-strong); }
.alert a { color: inherit; font-weight: var(--font-weight-semibold); }
/* Avviso di blocco (Lancio fermo): titolo, le frasi e un pulsante alla fase da correggere, uno per posto. */
.alert--block { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4) var(--space-5); }
.alert--block h2 { font-size: var(--font-size-lg); color: inherit; }
.alert--block p { margin: 0; }
.alert--block .warnlist { display: grid; gap: var(--space-1); }
.alert--block .warnlist li { margin: 0; }
.alert--block .btn--secondary { background: var(--color-surface); min-height: var(--target-touch); }
.alert--danger .btn--secondary { border-color: var(--color-danger-border); color: var(--color-danger-strong); }
.alert--warning .btn--secondary { border-color: var(--color-warning-border); color: var(--color-warning-strong); }
.warnlist { margin: 0; padding-left: var(--space-5); }
.warnlist li { margin-bottom: var(--space-1); }

/* Riepilogo degli errori di un form */
.error-summary:focus { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.error-summary__title { margin-bottom: var(--space-2); }
.error-summary__list { margin: 0; padding-left: var(--space-5); }
.error-summary__list li + li { margin-top: var(--space-1); }
.field--invalid .check { color: var(--color-danger-strong); }

/* Navigazione dentro una sezione */
.subnav { margin-bottom: var(--space-6); }
.subnav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; }
.subnav__link { display: flex; align-items: center; min-height: var(--control-height); padding: var(--space-1) var(--space-4); color: var(--color-text); text-decoration: none; border-radius: var(--radius-full); background: var(--color-fill); }
.subnav__link:hover { background: var(--color-fill-strong); color: var(--color-heading); }
.subnav__link[aria-current="page"] { color: var(--color-heading); font-weight: var(--font-weight-semibold); background: var(--color-surface); box-shadow: var(--shadow-soft); }

/* Scelta tra viste della stessa pagina */
.segmented { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.segmented__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.segmented__option { display: inline-flex; align-items: center; min-height: var(--control-height-sm); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); background: var(--color-fill); color: var(--color-text); font-size: var(--font-size-sm); text-decoration: none; }
.oggi-schede .segmented__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.oggi-schede .segmented__option { padding-inline: var(--space-3); }
.segmented__option:hover { background: var(--color-fill-strong); color: var(--color-heading); }
.segmented__option[aria-current="true"] { background: var(--color-surface); box-shadow: var(--shadow-soft); color: var(--color-heading); font-weight: var(--font-weight-semibold); }

/* Contenuto che si apre e si chiude */
.disclosure__summary { cursor: pointer; padding: var(--space-2) 0; font-weight: var(--font-weight-semibold); color: var(--color-heading); border-radius: var(--radius-md); }
.disclosure__summary:hover { color: var(--color-link); }
.disclosure__body { padding-top: var(--space-3); }

/* Anteprima del logo dell'agenzia */
.logo-preview { display: block; max-height: var(--logo-sheet-height); width: auto; max-width: 100%; margin-bottom: var(--space-3); }

/* Finestra modale */
.modal { border: 0; padding: 0; border-radius: var(--radius-xl); width: min(var(--modal-max-width), calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); overscroll-behavior: contain; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); }
.modal::backdrop { background: var(--color-backdrop); }
.modal__head { position: sticky; top: 0; z-index: var(--z-overlay); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.modal__title { font-size: var(--font-size-lg); }
.modal__body { padding: var(--space-5); }

/* Cronologia delle attività */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { display: grid; grid-template-columns: var(--feed-when-width) minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.feed__item:first-child { padding-top: 0; }
.feed__item:last-child { border-bottom: 0; padding-bottom: 0; }
.feed__when { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.feed__body { min-width: 0; }
.feed__body p { margin: 0; }
.feed__title { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.feed__title .mail-icon { vertical-align: middle; }
.feed__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.feed__meta .code { white-space: nowrap; }
.feed__body .feed__text { margin-top: var(--space-1); white-space: pre-line; overflow-wrap: anywhere; }
.feed__item--masked .feed__title { color: var(--color-text-muted); }
.feed__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-width: 70ch; }
.feed__versions { margin: 0; padding-left: var(--space-5); white-space: pre-line; }

/* Agenda: un elenco per giorno; con 900 px di pagina la settimana in sette colonne (sotto, nelle larghezze). */
.agenda { display: grid; gap: var(--space-4); }
.agenda__day { min-width: 0; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-4) var(--space-5); }
.agenda__day.is-today { box-shadow: var(--shadow-soft), 0 0 0 var(--border-width-thick) var(--color-primary); }
.agenda__date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--font-size-md); }
.appts { list-style: none; margin: 0; padding: 0; }
.appt { display: grid; grid-template-columns: var(--appt-time-width) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.appt:first-child { padding-top: 0; }
.appt:last-child { border-bottom: 0; padding-bottom: 0; }
.appt__time { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.appt__end { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.appt__body { min-width: 0; }
.appt__body p { margin: 0; }
.appt__title { font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }
.appt__title .code { font-weight: var(--font-weight-regular); white-space: nowrap; }
.appt__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.appt__body .appt__text { margin-top: var(--space-1); white-space: pre-line; overflow-wrap: anywhere; }
.appt--masked .appt__title, .appt--cancelled .appt__title { color: var(--color-text-muted); }
.month { width: 100%; border-collapse: separate; border-spacing: var(--space-1); table-layout: fixed; }
.month th { padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-align: left; }
.month td { height: var(--month-cell-height); padding: 0; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); vertical-align: top; }
.month td.is-outside { background: transparent; box-shadow: none; }
.month td.is-today { box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-primary); }
.month__day { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.month__day:hover { background: var(--color-highlight); color: var(--color-heading); }
.month__number { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.is-outside .month__number { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.month__count { align-self: flex-start; min-width: var(--target-min); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; }

/* Prossimo passo in testa alla sezione Attività */
.next-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-4); }
.next-step__text { font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }

/* Stato vuoto */
.empty { padding: var(--space-7) var(--space-5); text-align: center; color: var(--color-text-muted); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.panel .empty, .group__body .empty, .fold .empty { background: none; box-shadow: none; border-radius: 0; padding: var(--space-3) 0; text-align: left; }
.group__body .empty { padding: var(--space-4) var(--space-5); }
.empty__heading { font-weight: var(--font-weight-semibold); color: var(--color-heading); margin-bottom: var(--space-1); }
.empty__action { margin-top: var(--space-3); }

/* Barre di misura (ui.meter, ui.bar_table). `appearance: none` serve a WebKit, che altrimenti ignora gli pseudo elementi. */
.meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: var(--meter-min-width); height: var(--meter-height-thin); border: 0; border-radius: var(--radius-full); background: var(--color-meter-rest); }
.meter::-webkit-meter-bar { background: var(--color-meter-rest); border: 0; border-radius: var(--radius-full); height: var(--meter-height-thin); }
.meter::-webkit-meter-optimum-value { background: var(--color-success); border-radius: var(--radius-full); }
.meter::-webkit-meter-suboptimum-value { background: var(--color-warning); border-radius: var(--radius-full); }
.meter::-webkit-meter-even-less-good-value { background: var(--color-danger); border-radius: var(--radius-full); }
.meter::-moz-meter-bar { background: var(--color-success); border-radius: var(--radius-full); }
.meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--color-warning); }
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-danger); }
.meter--plain::-webkit-meter-optimum-value, .meter--plain::-webkit-meter-suboptimum-value, .meter--plain::-webkit-meter-even-less-good-value { background: var(--color-heading); }
.meter--plain::-moz-meter-bar, .meter--plain:-moz-meter-sub-optimum::-moz-meter-bar, .meter--plain:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-heading); }
.table--bars .bar-cell { width: 40%; vertical-align: middle; }

/* ===== Componenti di una sola pagina, anche loro solo con token ===== */

/* Numeri in evidenza della pagina Oggi */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; }
.figure { padding: var(--space-5); text-decoration: none; color: var(--color-text-muted); display: block; font-size: var(--font-size-sm); transition: background-color var(--duration-fast); }
.figure + .figure { border-left: var(--border-width) solid var(--color-border-subtle); }
.figure:hover { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.figure:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.figure strong { display: block; font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-figure); color: var(--color-heading); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-tight); margin-bottom: var(--space-1); }

/* Referenti nella scheda azienda */
.contact + .contact { margin-top: var(--space-2); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.table td .row-actions { flex-wrap: nowrap; margin-top: 0; }
.aspect + .aspect { margin-top: var(--space-2); }
.aspect__reason { color: var(--color-text-muted); margin-top: var(--space-0-5); }

/* Bacheca del mandato */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--board-column-min), 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.board-column { background: var(--color-surface-column); border-radius: var(--radius-xl); padding: var(--space-2); min-height: var(--board-column-min-height); border: var(--border-width-thick) solid transparent; }
.board-column.is-over { border-color: var(--color-brand-accent); background: var(--color-highlight); }
.board-column__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); margin-bottom: var(--space-2); }
.board-card { background: var(--color-surface); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-2); cursor: grab; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.board-card.is-dragging { opacity: var(--opacity-dragging); }
.board-card a { font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-heading); }
.board-card a:hover { text-decoration: underline; }
.board-help { margin: var(--space-2) 0 0; }
.board-msg { margin-top: var(--space-2); }
.board-msg:empty { display: none; }
@media (pointer: coarse) { .board-card { cursor: auto; } }

/* Storia della candidatura */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: var(--border-width-thick) solid var(--color-border-strong); position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(var(--timeline-dot) / -2 - var(--space-px)); top: var(--space-4); width: var(--timeline-dot); height: var(--timeline-dot); border-radius: var(--radius-full); background: var(--color-brand-accent); }

/* ===== Elenco raggruppato (macro group, row, row_link, switch, seg_buttons, gauge, ring) =====
   Nato in Impostazioni, vale su tutta l'app. `.settings` è solo la struttura a due colonne di quelle pagine. */
.settings { display: grid; grid-template-columns: var(--settings-nav-width) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.settings__nav { position: sticky; top: var(--space-7); }
.settings__pane { max-width: var(--settings-pane-max); min-width: 0; }
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.menu__label { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.menu__link { display: flex; align-items: center; min-height: var(--control-height); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: background-color var(--duration-fast); }
.menu__link:hover { background: var(--color-fill); color: var(--color-heading); }
.menu__link[aria-current="page"] { background: var(--color-surface); box-shadow: var(--shadow-soft); color: var(--color-heading); font-weight: var(--font-weight-semibold); }
.menu--jump { display: none; }

/* Gruppo: titolo piccolo sopra, riquadro tondo con ombra leggera, righe separate da un filetto */
.group__title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.group__body { container: form / inline-size; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.group__body > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.group__body > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.group__body > * + * { border-top: var(--border-width) solid var(--color-border-subtle); }
.group__foot { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.group__pad { padding: var(--space-5); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: var(--row-min-height); padding: var(--space-3) var(--space-5); }
.row__label { display: block; font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }
.row__hint { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-0-5); }
.row__control { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; text-align: right; }
.row__value { color: var(--color-text-muted); overflow-wrap: anywhere; }
.row__chevron { color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1; }
.row--link { color: inherit; text-decoration: none; transition: background-color var(--duration-fast); }
.row--link:hover { background: var(--color-surface-sunken); color: inherit; }
.row--link:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.row form { margin: 0; }

/* Riepilogo in testa a Panoramica */
.hero__title { font-size: var(--font-size-lg); }
.hero__text { color: var(--color-text-muted); margin: var(--space-1) 0 0; max-width: var(--text-max-width); }

/* Misure: numero grande, unità piccola, barra sottile */
.gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.gauge__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.gauge__value { margin: var(--space-0-5) 0 var(--space-2); }
.gauge__number { font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-figure); color: var(--color-heading); letter-spacing: var(--letter-spacing-tight); }
.gauge__unit { font-size: var(--font-size-md); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.gauge__caption { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Interruttore: la casella vera resta, disegnata come binario e manopola */
.switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-touch); width: 100%; cursor: pointer; }
.switch__text { display: flex; flex-direction: column; min-width: 0; }
.switch__label { font-weight: var(--font-weight-semibold); color: var(--color-heading); font-size: var(--font-size-md); }
.switch__hint { font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; flex: none; width: var(--switch-width); height: var(--switch-height); border-radius: var(--radius-full); background: var(--color-border); transition: background-color var(--duration-fast); }
.switch__track::after { content: ""; position: absolute; top: calc((var(--switch-height) - var(--switch-knob)) / 2); left: calc((var(--switch-height) - var(--switch-knob)) / 2); width: var(--switch-knob); height: var(--switch-knob); border-radius: var(--radius-full); background: var(--color-knob); box-shadow: var(--shadow-soft); transition: transform var(--duration-fast); }
.switch__input:checked + .switch__track { background: var(--color-switch-on); }
.switch__input:checked + .switch__track::after { transform: translateX(calc(var(--switch-width) - var(--switch-height))); }
.switch__input:focus-visible + .switch__track { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.switch__input:disabled + .switch__track { opacity: var(--opacity-disabled); }
.row .switch { min-height: 0; }

/* Controllo segmentato a pulsanti */
.seg { display: flex; background: var(--color-fill); border-radius: var(--radius-md); padding: var(--space-0-5); gap: var(--space-0-5); }
.seg__option { flex: 1 1 0; min-height: var(--control-height); padding: var(--space-1) var(--space-3); font: inherit; font-size: var(--font-size-sm); color: var(--color-text); background: transparent; border: 0; border-radius: calc(var(--radius-md) - var(--space-0-5)); cursor: pointer; transition: background-color var(--duration-fast); }
.seg__option:hover { background: var(--color-surface-sunken); }
.seg__option[aria-pressed="true"] { background: var(--color-surface); box-shadow: var(--shadow-soft); font-weight: var(--font-weight-bold); color: var(--color-heading); }

/* Lettura del CV in cima al profilo: stato dell'AI prima del pulsante, ultimo esito sotto */
.cv-read { margin-bottom: var(--space-7); padding-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.panel > .cv-read:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cv-read__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.cv-read__file, .cv-read__state { margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.cv-read .form-actions { margin-top: 0; justify-content: flex-start; flex-direction: row; }
.cv-read__ring { margin-bottom: var(--space-4); }
.cv-read__last { margin: var(--space-3) 0 0; }

/* Anello di avanzamento: disegno SVG, il numero è scritto al centro; i colori seguono la stessa regola delle barre. */
.ring { display: flex; align-items: center; gap: var(--space-4); }
.ring__fig { position: relative; flex: none; width: var(--ring-size); height: var(--ring-size); }
.ring__svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track, .ring__value { fill: none; stroke-width: var(--ring-stroke); }
.ring__track { stroke: var(--color-meter-rest); }
.ring__value { stroke: var(--color-success); stroke-linecap: round; }
.ring--warning .ring__value { stroke: var(--color-warning); }
.ring--danger .ring__value { stroke: var(--color-danger); }
.ring--plain .ring__value { stroke: var(--color-heading); }
.ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.ring__label { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.ring__caption { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Sezione chiusa (macro fold): una riga col titolo e il conteggio; si apre sul posto, senza JavaScript */
.fold { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); scroll-margin-top: var(--space-4); }
.stack > .fold + .fold, .fold + .fold { margin-top: var(--space-2); }
.fold__summary { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-min-height); padding: var(--space-3) var(--space-5); border-radius: inherit; cursor: pointer; list-style: none; transition: background-color var(--duration-fast); }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::after { content: "›"; flex: none; color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1; transition: transform var(--duration-fast); }
.fold[open] > .fold__summary::after { transform: rotate(90deg); }
.fold__summary:hover { background: var(--color-surface-sunken); }
.fold__summary:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.fold[open] > .fold__summary { border-bottom: var(--border-width) solid var(--color-border-subtle); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fold__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.fold__meta { flex: 0 1 auto; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; }
.fold__body { container: form / inline-size; padding: var(--space-5); }
.fold__body--rows { padding: 0; }
.fold__body .form-section > legend { font-size: var(--font-size-md); }
.fold__body--rows > * + * { border-top: var(--border-width) solid var(--color-border-subtle); }
/* Piega piatta (`cls='fold--flat'`): senza sfondo, ombra e angoli, perché sta dentro un riquadro o dentro un'altra piega. Più pieghe in un
   riquadro (`.panel--folds`) sono righe separate da un filetto; la riga che si preme segue gli angoli del riquadro. */
.fold--flat, .skill-flags .fold { background: none; border-radius: 0; box-shadow: none; }
.panel.panel--folds { padding: 0; }
.panel--folds > .fold + .fold { margin-top: 0; border-top: var(--border-width) solid var(--color-border-subtle); }
.panel--folds > .fold:first-child > .fold__summary { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.panel--folds > .fold:last-child:not([open]) > .fold__summary { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.panel--folds > .fold:only-child:not([open]) > .fold__summary { border-radius: var(--radius-xl); }

/* Menu «Altro» (macro more, more_link): le azioni secondarie di una pagina */
.more { position: relative; display: inline-block; flex: none; }
.more__toggle { list-style: none; gap: var(--space-1); }
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle::after { content: "⌄"; line-height: 1; margin-top: calc(-1 * var(--space-1)); }
.more__menu { position: absolute; z-index: var(--z-overlay); top: calc(100% + var(--space-1)); right: 0; min-width: var(--more-min-width); max-width: calc(100vw - 2 * var(--space-4)); margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.more__menu form { margin: 0; }
.more__item { display: flex; align-items: center; width: 100%; min-height: var(--control-height); padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.more__item:hover { background: var(--color-fill); color: var(--color-heading); }
.more__form { padding: var(--space-2) var(--space-3); }
.more__form .toolbar { flex-wrap: nowrap; }
.more__form .field--inline { flex: 1 1 auto; min-width: 0; }

@media (max-width: 979px) {
  .settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .settings__nav { position: static; }
  .menu--side { display: none; }
  .menu--jump { display: block; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
  .menu__summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--target-touch); padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; }
  .menu__summary::-webkit-details-marker { display: none; }
  .menu__summary::after { content: "⌄"; color: var(--color-text-muted); }
  .menu__where { color: var(--color-text-muted); }
  .menu--jump[open] .menu__summary { border-bottom: var(--border-width) solid var(--color-border-subtle); }
  .menu--jump .menu__list { padding: var(--space-2); }
  .menu--jump .menu__link { min-height: var(--target-touch); }
}
@media (max-width: 599px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .row--link, .row:has(> .row__control > .switch) { grid-template-columns: minmax(0, 1fr) auto; }
  .row__control { justify-content: flex-start; text-align: left; }
  .row--link .row__control { justify-content: flex-end; }
  .group__pad { padding: var(--space-4); }
  .gauges { grid-template-columns: minmax(0, 1fr); }
  .fold__summary { min-height: var(--target-touch); padding: var(--space-2) var(--space-4); }
  .fold__body { padding: var(--space-4); }
  .fold__body--rows { padding: 0; }
  /* Sul telefono l'elenco si apre sotto il pulsante e spinge il contenuto: non copre nulla. */
  .page-header__actions > .btn--primary { flex: 1 1 auto; }
  .more[open] { flex: 1 1 100%; }
  .more[open] .more__toggle { width: 100%; }
  .more__menu { position: static; max-width: none; margin-top: var(--space-1); box-shadow: var(--shadow-soft); }
  .more__item { min-height: var(--target-touch); }
  .gauge__number { font-size: var(--font-size-xl); }
  }
@media (prefers-reduced-motion: reduce) { .switch__track::after, .fold__summary::after { transition: none; } }

/* ===== Accesso: pagina di login, codice, iscrizione al codice, conferma della password ===== */
.auth { max-width: var(--auth-max-width); margin: 0 auto; padding: var(--login-offset) var(--space-4) var(--space-7); }
.auth .brand { display: block; text-align: center; color: var(--color-heading); padding: 0; margin-bottom: var(--space-6); font-size: var(--font-size-xl); }
.auth .brand__logo { width: var(--logo-login-width); height: auto; margin: 0 auto; }
.auth .login-logo { margin-top: calc(-1 * var(--space-3)); }
.auth__card { display: block; background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); padding: var(--space-7); }
.auth__card--inline { max-width: var(--auth-max-width); }
.auth__title { font-size: var(--font-size-xl); margin-bottom: var(--space-4); }
.auth__lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.auth__help, .auth__foot { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; margin: var(--space-5) 0 0; }
.auth .input, .auth__card .input { min-height: var(--target-touch); }
.auth .input:not(.input--multiline), .auth__card .input:not(.input--multiline) { height: var(--target-touch); }
.auth .btn--primary, .auth .btn--secondary, .auth__card .btn--primary { min-height: var(--target-touch); width: 100%; }
.auth .form-actions, .auth__card .form-actions { margin-top: var(--space-5); }
.auth .section { border-top: 0; text-align: center; margin-top: var(--space-4); padding-top: 0; }
.input--otp { font-family: var(--font-family-mono); font-size: var(--font-size-xl); letter-spacing: var(--otp-tracking); text-align: center; }
.auth__card .input.input--otp { height: auto; min-height: calc(var(--target-touch) + var(--space-3)); }
.input--otp::placeholder { letter-spacing: var(--otp-tracking); }
.pw { position: relative; }
.pw__input { padding-right: var(--password-toggle-room); }
.pw .btn--link { position: absolute; top: 0; right: var(--space-1); height: 100%; min-height: var(--target-touch); padding: 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-link); }
@media (max-width: 599px) {
  .auth { padding-top: var(--space-6); }
  .auth__card { padding: var(--space-5); border-radius: var(--radius-xl); }
}

/* ===== Larghezze ===== */
@media (min-width: 980px) {
  /* La barra resta ferma mentre il contenuto scorre; il fondo scuro copre comunque tutta l'altezza. */
  .shell { background: linear-gradient(to right, var(--color-brand) var(--sidebar-width), var(--color-bg) var(--sidebar-width)); }
  [data-menu-toggle] { display: none; }
}

/* Le fasi della scheda non hanno la barra dell'app: una colonna, il modulo al centro. */
.shell.shell--procedura { grid-template-columns: minmax(0, 1fr); background: none; }
.shell--procedura .main { margin-inline: auto; }

/* La settimana a sette colonne dipende dallo spazio della pagina, non dalla finestra: con la barra laterale e un
   pannello accanto la stessa finestra può lasciare meno spazio. */
@container form (min-width: 900px) {
  .agenda--week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
  .agenda--week .agenda__day { padding: var(--space-3) var(--space-2); }
  .agenda--week .agenda__date { font-size: var(--font-size-sm); }
  .agenda--week .appt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Nella settimana a colonne: ora, tipo, codice e azienda; luogo, referente e organizzatore nella vista del giorno. */
  .agenda--week .appt__end, .agenda--week .appt__text, .agenda--week .appt__details { display: none; }
}

/* Telefono e tablet: barra in alto con il pulsante Menu */
@media (max-width: 979px) {
  .shell { grid-template-columns: 1fr; align-content: start; }  /* la barra resta alta quanto serve anche su pagine corte */
  .sidebar { position: static; height: auto; padding: 0; gap: 0; }
  .sidebar__bar { min-height: var(--topbar-height); padding: var(--space-2) var(--space-4); }
  .sidebar__menu { padding: var(--space-2) var(--space-4) var(--space-4); gap: var(--space-4); border-top: var(--border-width) solid var(--color-brand-raised); }
  .sidebar.is-collapsed .sidebar__menu { display: none; }
  .sidebar__foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 var(--space-3); }
  .sidebar__foot .btn--link { min-height: var(--target-touch); }
  .brand { padding: 0; }
  .nav__link { min-height: var(--target-touch); }
  .main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .cols { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(odd) { border-left: 0; }
  .figure:nth-child(n+3) { border-top: var(--border-width) solid var(--color-border-subtle); }
}

/* Telefono */
@media (max-width: 599px) {
  .row--extra { display: none; }
  .main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .page-header { margin-bottom: var(--space-5); }
  .figure { padding: var(--space-4); }
  .figure strong { font-size: var(--font-size-xl); }
  .page-header__actions, .toolbar { width: 100%; }
  .page-header__actions .field--inline, .toolbar .field--inline { flex: 1 1 100%; }
  .field--inline .input--select { width: 100%; }
  .page-header__actions > .btn--primary { order: -1; }   /* l'azione principale prima di ricerca e filtri */
  .panel { padding: var(--space-4); }
  .btn--primary, .btn--secondary, .btn--danger, .btn--link { min-height: var(--target-touch); }
  .subnav__link { min-height: var(--target-touch); }
  .segmented__option { min-height: var(--target-touch); }
  .disclosure__summary { padding: var(--space-3) 0; }
  .input { min-height: var(--target-touch); }
  .field--check .check { min-height: var(--target-touch); }
  .chip { min-height: var(--target-touch); }
  .input:not(.input--multiline) { height: var(--target-touch); }
  .form-actions > .btn--primary, .form-actions > .btn--secondary, .form-actions > .btn--danger { flex: 1 1 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .feed__item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .appt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .modal__head, .modal__body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .kv dt { margin-top: var(--space-2); }
  .public { padding: var(--space-4) var(--space-3) var(--space-7); }
}

/* Tabelle che diventano liste quando il loro spazio è stretto: a telefono, ma anche in una colonna di metà pagina. */
@container table (max-width: 600px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
  .table--stack tr:first-child { padding-top: 0; }
  .table--stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .table--stack td, .table--stack td.is-right, .table--stack td.code { border: 0; padding: var(--space-0-5) 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .table--stack td:first-child { padding-bottom: var(--space-1); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
  .table--stack td:first-child > a { font-weight: var(--font-weight-semibold); }
  .table--stack td:first-child .muted, .table--stack td:first-child .small, .table--stack td:first-child .code { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
  /* Etichetta e valore sulla stessa riga: l'etichetta pende a sinistra, il valore non le scorre sotto. */
  .table--stack td[data-label] { display: flow-root; padding-left: var(--stack-label-width); }
  .table--stack td[data-label]::before { content: attr(data-label); box-sizing: border-box; float: left; width: var(--stack-label-width); margin-left: calc(-1 * var(--stack-label-width)); padding-right: var(--space-3); font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); letter-spacing: normal; line-height: inherit; color: var(--color-text-muted); }
  .table--stack td:empty { display: none; }
  /* La cella con l'azione della riga non ha etichetta: il pulsante prende tutta la riga, a portata di pollice. */
  .table--stack td[data-label]:has(> .btn--primary, > .btn--secondary, > .btn--danger, > form) { padding: var(--space-2) 0 0; }
  .table--stack td[data-label]:has(> .btn--primary, > .btn--secondary, > .btn--danger, > form)::before { content: none; }
  .table--stack td .btn--primary, .table--stack td .btn--secondary { width: 100%; }
}

/* Tag scritti a mano (macro tag_input): pillola leggera come le altre, il testo va a capo anche senza spazi e non esce dalla
   colonna; la croce è un'area di tocco piena. */
.tag-input__chosen { margin-bottom: var(--space-2); min-width: 0; max-width: 100%; }
.tag-input__tag { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; padding: var(--space-1) 0 var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-heading); font-size: var(--font-size-sm); line-height: var(--line-height-tight); }
.tag-input__text { min-width: 0; overflow-wrap: anywhere; }
.tag-input__remove { flex: none; min-width: var(--target-touch); min-height: var(--target-touch); margin: calc(-1 * var(--space-1)) 0; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; }
@media (min-width: 600px) { .tag-input__remove { min-width: var(--control-height-sm); min-height: var(--control-height-sm); } }

/* ===== Posta: elenco a sinistra, conversazione a destra (stile Mail); sotto i 980 px una colonna alla volta ===== */
.mail-count { display: inline-block; min-width: var(--count-min-width); padding: 0 var(--space-1); margin-left: var(--space-1); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; }
.mail-filters { margin-bottom: 0; }
.mail { display: grid; grid-template-columns: var(--mail-list-width) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.mail__list, .mail__pane { min-width: 0; }
.mail__list { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
.mail__note { padding: var(--space-3) var(--space-4) 0; margin: 0; }
.mail__more { padding: var(--space-3) var(--space-4); margin: 0; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list > li + li { border-top: var(--border-width) solid var(--color-border-subtle); }
.mail-row { display: grid; grid-template-columns: var(--space-3) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; transition: background-color var(--duration-fast); }
.mail-row:hover { background: var(--color-surface-sunken); color: inherit; }
.mail-row:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.mail-row.is-selected { background: var(--color-highlight); }
.mail-row__dot { width: var(--space-2); height: var(--space-2); margin-top: var(--space-2); border-radius: var(--radius-full); }
.mail-row.is-open .mail-row__dot { background: var(--color-primary); }
.mail-row__main { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.mail-row__top { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.mail-row__who { font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row__when { flex: none; font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mail-row__subject { display: flex; gap: var(--space-1); align-items: center; color: var(--color-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-open .mail-row__subject { font-weight: var(--font-weight-semibold); }
.mail-row__snippet { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mail-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.mail-row__tags:empty { display: none; }
.mail-icon { display: inline-flex; flex: none; align-items: center; color: var(--color-text-muted); }
.mail-icon--in { color: var(--color-link); }
.mail-icon--reply { color: var(--color-success); }
.mail__back { display: none; margin: 0 0 var(--space-3); }
.mail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.mail__subject { font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.mail__empty { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-7); text-align: center; }
.mail-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-5); }
.mail-card + .mail-card { margin-top: var(--space-4); }
.mail-card--out { background: var(--color-surface-sunken); }
.mail-card__head { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); }
.mail-card__head .mail-icon { align-self: center; }
.mail-card__who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mail-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.mail-card__foot form { margin: 0; }
.mail-links { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.mail-links__title { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.mail-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-3); border-radius: var(--radius-full); background: var(--color-fill); font-size: var(--font-size-sm); }
.mail-chip__kind { color: var(--color-text-muted); }
.mail-chip form { margin: 0; display: inline; }
.mail-chip .btn--link { min-width: var(--target-min); min-height: var(--target-min); padding: 0; border-radius: var(--radius-full); color: var(--color-text-muted); text-decoration: none; }
.mail-chip .btn--link:hover { background: var(--color-fill-strong); color: var(--color-danger); }
.mail-chip__all { padding-right: var(--space-2); }
.mail-results { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.mail-results li + li { border-top: var(--border-width) solid var(--color-border-subtle); }
.mail-results form { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; margin: 0; }
.mail-results__text { min-width: 0; overflow-wrap: anywhere; }
.mail-draft { margin-top: var(--space-4); }
@media (max-width: 979px) {
  .mail { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .mail__list { position: static; max-height: none; }
  .mail--reading .mail__list, .mail:not(.mail--reading) .mail__pane { display: none; }
  .mail__back { display: block; }
  .stack:has(.mail--reading) > .subnav, .stack:has(.mail--reading) > .mail-filters { display: none; }
  .mail-card { padding: var(--space-4); }
  .mail-chip .btn--link { min-width: var(--target-touch); min-height: var(--target-touch); }
  .mail-results form .btn--secondary { min-height: var(--target-touch); }
}
@media (prefers-reduced-motion: reduce) { .mail-row { transition: none; } }

@media print {
  .panel, .group__body, .agenda__day, .figures, .fold { box-shadow: none; }
  .sidebar, .skip-link { display: none; }
  .shell { display: block; background: none; }
  body { background: var(--color-surface); }
}

/* Tipologie di offerta: schede di consultazione, una colonna stretta o tre larghe a seconda dello spazio. */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--type-card-min)), 1fr)); gap: var(--space-5); align-items: start; }
.type-card { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); transition: box-shadow var(--duration-fast), transform var(--duration-fast); }
.type-card:target { box-shadow: 0 0 0 var(--border-width-thick) var(--color-primary); }
.type-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.type-card__name { font-size: var(--font-size-lg); letter-spacing: var(--letter-spacing-tight); }
.type-card__default { align-self: flex-start; font-size: var(--font-size-sm); }
.type-card__lead { color: var(--color-text-muted); margin: 0; }
.type-card__block { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: var(--space-4); }
.type-card__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-stamp); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.type-card__list { margin: 0; padding-left: var(--space-5); }
.type-card__list li + li { margin-top: var(--space-1); }
.type-card__block p:last-child { margin-bottom: 0; }
.type-pick { margin: 0; padding: 0; border: 0; }
.type-pick .choice:has(input:checked) { background: var(--color-fill); }  /* scelta neutra: l'arancio chiaro sembra un errore */
.type-pick__help { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); }
@media (prefers-reduced-motion: reduce) { .type-card { transition: none; } }

.profile-form .field__label, .profile-form .form-section > legend { overflow-wrap: anywhere; }

/* Attività del candidato (giro 6 L1): elenchi piani come nel mockup «menu del candidato» e «quattro blocchi», senza riquadri.
   Le regole sono in ordine di lettura della pagina: gruppi, righe, appuntamenti, modulo, note. */
.attivita { display: grid; gap: var(--space-6); max-width: var(--attivita-max-width); }
.attivita > * { min-width: 0; }
.attivita p { margin: 0; overflow-wrap: anywhere; }
.attivita__gruppo { display: grid; gap: var(--space-1); }
.attivita__titolo { font-size: var(--font-size-md); }
.attivita__vuoto { display: grid; gap: var(--space-3); justify-items: start; }
.attivita__vuoto .attivita__titolo { font-size: var(--font-size-lg); }
.attivita__link, .attivita__altro a { display: inline-flex; align-items: center; min-height: var(--control-height); justify-self: start; }
.attivita__altro { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.righe { list-style: none; margin: 0; padding: 0; }
.riga { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-1); align-items: center; border-top: var(--border-width) solid var(--color-border-subtle); }
.riga:first-child { border-top: 0; }
.riga__testo { padding: var(--space-2) 0; }
.riga--fatta .riga__testo p:first-child { color: var(--color-text-muted); }
.attivita__scaduta { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
/* La spunta: un cerchio da 24 px dentro un bersaglio da 44, verde quando la cosa è fatta (mockup). */
.btn--check::before, .btn--checked::before { width: var(--todo-check-size); height: var(--todo-check-size); }
.btn--check:hover::before, .btn--checked:hover::before { border-color: var(--color-success); }
.btn--checked::before { background: var(--color-success); border-color: var(--color-success); }

/* Appuntamenti della scheda: «Mar 10/11 · 10:00» in una colonna, il resto accanto; sul telefono uno sopra l'altro. */
.appts--plain .appt { grid-template-columns: var(--appt-plain-time-width) minmax(0, 1fr); gap: 0 var(--space-4); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border-subtle); border-bottom: 0; }
.appts--plain .appt:first-child { border-top: 0; padding-top: var(--space-3); }
.appts--plain .appt:last-child { padding-bottom: var(--space-3); }
.appts--plain .appt__time { font-size: var(--font-size-md); }
.appts--plain .appt__title { font-weight: var(--font-weight-regular); color: var(--color-text); }

/* Il modulo di una nuova attività: chiuso finché non lo si apre, due campi e due comandi tra due linee. */
.attivita__modulo { display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-block: var(--border-width) solid var(--color-border-subtle); }
.attivita__modulo[hidden] { display: none; }
.attivita__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

/* Note: titolo con «Aggiungi una nota» a destra, poi le righe con il loro «Correggi». Il modulo di una nota e la correzione si
   aprono sotto, a tutta riga (`<details>`, funzionano anche senza JavaScript). */
.nota-sez { margin-top: var(--space-6); gap: var(--space-5); }
.nota-nuova { flex: 0 0 auto; }
.nota-nuova[open] { flex-basis: 100%; }
.nota-nuova > summary, .nota-azione--correggi > summary { list-style: none; cursor: pointer; }
.nota-nuova > summary::-webkit-details-marker, .nota-azione--correggi > summary::-webkit-details-marker { display: none; }
.nota-nuova > summary { width: fit-content; margin-left: auto; }
.nota-sez > .nota-nuova > summary { margin-left: 0; }
.nota-nuova > form { padding: var(--space-4) 0 0; }
.riga--nota { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding: var(--space-3) 0; }
.riga--nota .riga__testo { padding: 0; }
.riga--nota .feed__text { white-space: pre-line; }
.nota-azione--correggi > summary { color: var(--color-link); }
.nota-azione--correggi[open], .nota-azione--azienda { grid-column: 1 / -1; }
.nota-azione--correggi[open] > summary { margin-left: auto; width: fit-content; }
.nota-azione--correggi > form { padding-top: var(--space-3); }
.nota-azione--azienda .disclosure__summary { font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-link); }
/* Sul telefono «Aggiungi un'attività» sta solo nella barra in basso; i collegamenti sono alti quanto un dito. */
@media (max-width: 599px) {
  .attivita__aggiungi { display: none; }
  .attivita__link, .attivita__altro a { min-height: var(--target-touch); }
  .appts--plain .appt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nota-azione--azienda .disclosure__summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-touch); padding-block: 0; }
  .nota-azione--azienda .disclosure__summary::before { content: "\25B8"; }   /* con display flex il triangolo di <details> sparisce */
}

/* Il Profilo in sola lettura (scheda a fasi, 3.10): gruppi senza riquadro, etichetta sopra il valore. */
.profilo-lettura { display: grid; gap: var(--space-6); align-items: start; }
.profilo-gruppo { min-width: 0; }
.profilo-gruppo__title { font-size: var(--font-size-md); margin-bottom: var(--space-3); }
.profilo-lettura__esperienze { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.profilo-lettura__esperienze > li + li { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: var(--space-3); }
/* Le due colonne si sciolgono sul telefono; da 980 px sono due colonne vere. */
.profilo-lettura__col { display: contents; }
@media (min-width: 980px) {
  .profilo-lettura { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .profilo-lettura__col { display: grid; gap: var(--space-7); align-content: start; min-width: 0; }
}

/* Barra in fondo alla pagina sul telefono: il comando principale della pagina (il Lancio ne ha due). */
.bottom-bar { display: none; }
@media (max-width: 599px) {
  .bottom-bar { display: block; position: sticky; bottom: 0; z-index: var(--z-overlay); margin: var(--space-5) calc(-1 * var(--space-4)) calc(-1 * var(--space-7)); padding: var(--space-3) var(--space-4); background: var(--color-surface); border-top: var(--border-width) solid var(--color-border-subtle); box-shadow: var(--shadow-bar); }
  .bottom-bar .btn { width: 100%; }
  /* Su una pagina corta la barra sta in fondo allo schermo, non a metà (come nel mockup): la pagina riempie l'altezza. */
  .shell:has(.bottom-bar) { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .main:has(> .bottom-bar) { display: flex; flex-direction: column; }
  .main > .bottom-bar { margin-top: auto; }
  .main:has(> .bottom-bar) > :has(+ .bottom-bar) { margin-bottom: var(--space-5); }
}

/* Cornice del candidato (scheda a fasi, 3.10): testata, poi il menu delle sue pagine. Da 980 px il menu sta a sinistra del
   contenuto, come nel mockup; sotto è una barra in alto con tutte le voci in vista, la corrente sottolineata. «Modifica» e
   «Gestione» stanno solo nella testata. */
.cand-head .page-header { margin-bottom: var(--space-4); }
.cand-head .page-header__actions { flex-wrap: nowrap; }
/* Sul telefono «Modifica» sta nella barra in basso del Profilo (brief 10.6): la testata porta solo «Gestione». */
@media (max-width: 599px) { .cand-head .page-header__actions a[href$="/modifica"] { display: none; } }
.section-nav { margin-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.section-nav__list { flex-direction: row; gap: 0; }
.section-nav__list > li { flex: 1 1 auto; min-width: 0; }
.section-nav .menu__link { justify-content: center; text-align: center; min-height: calc(var(--target-touch) + var(--space-2)); padding: 0 var(--space-0-5); border-radius: 0; border-bottom: var(--border-width-accent) solid transparent; margin-bottom: calc(-1 * var(--border-width)); font-size: var(--font-size-md); line-height: var(--line-height-tight); white-space: nowrap; }
.section-nav .menu__link[aria-current="page"] { background: none; box-shadow: none; border-bottom-color: var(--color-heading); }
@media (min-width: 980px) {
  .main:has(> .section-nav) { display: grid; grid-template-columns: var(--section-nav-width) minmax(0, 1fr); column-gap: var(--space-7); align-content: start; }
  .main:has(> .section-nav) > * { grid-column: 2; }
  .main:has(> .section-nav) > .cand-head { grid-column: 1 / -1; }
  .main:has(> .section-nav) > .section-nav { grid-column: 1; grid-row: span 99; position: sticky; top: var(--space-7); align-self: start; margin: 0; border: 0; }
  .section-nav__list { flex-direction: column; gap: var(--space-0-5); }
  .section-nav .menu__link { justify-content: flex-start; text-align: left; min-height: var(--control-height); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); border-bottom: 0; margin-bottom: 0; white-space: normal; }
  .section-nav .menu__link[aria-current="page"] { background: var(--color-surface); box-shadow: var(--shadow-soft); }
}

/* Documenti (mockup del menu a quattro voci): righe piane con il nome a sinistra e «Scarica» a destra, senza riquadri. Il nome di una
   riga che porta altrove copre tutta la riga; i pulsanti restano sopra. */
.docs > section { display: grid; gap: var(--space-6); max-width: 46rem; }
.docs__titolo { font-size: var(--font-size-md); margin-bottom: calc(-1 * var(--space-4)); }
.docs > .cv-read { max-width: 46rem; margin: 0; padding: 0; border: 0; }
.docs .cv-read__title { font-size: var(--font-size-md); }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border-subtle); min-height: calc(var(--target-touch) + var(--space-5)); }
.doc:first-child { border-top: 0; }
.doc__t { flex: 1 1 12rem; min-width: 0; display: grid; }
.doc__t > span { overflow-wrap: anywhere; }
.doc__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.doc__nome a { color: inherit; text-decoration: none; }
.doc__nome a::after { content: ""; position: absolute; inset: 0; }
.doc__nome a:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.doc .btn { position: relative; z-index: 1; }
.doc--link:hover { background: var(--color-surface-sunken); }
.doc__manca { color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.testa__titolo { font-size: var(--font-size-lg); }
/* «‹ Documenti» e «‹ Attività»: il ritorno di una sotto-pagina, con il bersaglio da dito. */
.page-header__back--sub { min-height: var(--target-touch); margin-bottom: 0; font-size: var(--font-size-md); color: var(--color-link); }
.stack > .page-header__back--sub + * { margin-top: 0; }

/* Lancio: la frase con i conti e il pulsante, poi l'elenco a righe (nome, comune, chilometri, stato). Niente tabella, quindi niente etichette sul telefono. */
.lan-testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.conti { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 24rem; }
.lan-frase { margin: 0; font-size: var(--font-size-lg); line-height: var(--line-height-tight); color: var(--color-heading); font-weight: var(--font-weight-semibold); text-wrap: pretty; }
.conti p { margin: 0; }
.az-lista, .esc-righe, .esc-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.az-gruppo { margin: var(--space-5) 0 var(--space-1); }
.az-gruppo:first-child { margin-top: 0; }
.az-intest { display: none; }
.az { border-top: var(--border-width) solid var(--color-border-subtle); padding: var(--space-2) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-1) var(--space-3); align-items: center; }
.az--prima { grid-template-columns: minmax(0, 1fr) var(--target-touch); gap: 0 var(--space-3); }   /* telefono: il nome ha tutta la larghezza, la × a destra */
.az-lista > .az:first-child { border-top: 0; }
.az__nome { display: grid; min-width: 0; overflow-wrap: anywhere; }
a.az__nome { min-height: var(--target-touch); align-content: center; padding: var(--space-1) 0; color: var(--color-text); text-decoration: none; }   /* il blocco nome, comune e distanza è il collegamento */
a.az__nome:hover strong, a.az__nome:focus-visible strong { text-decoration: underline; text-underline-offset: var(--space-0-5); }
.az__km { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); grid-column: 2; text-align: right; }
.az__x { grid-column: 3; }
.az--prima .az__x { grid-column: 2; grid-row: 1; }
.az__km--c { display: none; }   /* telefono: la distanza sta sotto il comune */
.lan-testa__btn { display: contents; }
.az__x .btn { min-width: var(--target-touch); min-height: var(--target-touch); padding: 0; font-size: var(--font-size-lg); }
.az__st { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.az__st:empty { display: none; }
.az__tx { min-width: 0; overflow-wrap: anywhere; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.az__nome strong { color: var(--color-text); }
.az__nome a { color: inherit; text-decoration: none; }
.az__nome a:hover, .az__nome a:focus-visible { text-decoration: underline; }
/* Dopo il lancio la riga è un pulsante (summary) che apre le azioni: «+» a destra, «−» da aperta. */
.az--dopo { display: block; padding: 0; }
.az__riga { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "nome pm" "st st"; column-gap: var(--space-3); row-gap: var(--space-1); align-items: center; min-height: var(--target-touch); padding: var(--space-2) 0; cursor: pointer; list-style: none; color: var(--color-text); }
.az__riga::-webkit-details-marker { display: none; }
.az__riga:hover { background: var(--color-fill); }
.az__riga::after { content: "+"; grid-area: pm; justify-self: end; font-size: var(--font-size-lg); color: var(--color-text-muted); padding-right: var(--space-1); }
.az__d[open] > .az__riga::after { content: "\2212"; }
.az__riga .az__nome { grid-area: nome; }
.az__riga .az__km { grid-area: km; }
.az__riga .az__st { grid-area: st; }
.az__riga--sola { grid-template-areas: "st pm"; grid-template-columns: minmax(0, 1fr) 28px; }
.az__sotto { grid-column: 1 / -1; }
.az__det { display: grid; gap: var(--space-3); padding: var(--space-1) 0 var(--space-4); max-width: 46rem; }
.az__az { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.az__az > a { display: inline-flex; align-items: center; min-height: var(--target-touch); }
.az--saltata { grid-template-columns: minmax(0, 1fr); }
.az--saltata .tolta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); min-height: var(--target-touch); color: var(--color-text-muted); }
.az--saltata .tolta .btn { min-height: var(--target-touch); }
.esc-riga { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-2) 0; border-top: var(--border-width) solid var(--color-border-subtle); min-height: var(--target-touch); }
.esc-righe > .esc-riga:first-child { border-top: 0; }
.esc-riga__nome { display: grid; min-width: 0; overflow-wrap: anywhere; }
.esc-riga__dx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.esc-riga__dx .btn--link { min-height: var(--target-touch); }
.esc-lista { gap: var(--space-2); margin-top: var(--space-2); }
.esc-lista li { display: grid; }
/* «Altre azioni»: l'ultima riga del riquadro dell'elenco, chiusa. Dentro, due righe che portano altrove (`.rigalink`) e la zona, una piega dentro la piega. */
.altre { border-top: var(--border-width) solid var(--color-border-subtle); margin-top: var(--space-2); }
.altre--sola { margin-top: 0; border-top: 0; }
.altre > .fold__summary { padding-left: 0; padding-right: 0; }
.altre[open] > .fold__summary { border-bottom: 0; }
.altre > .fold__body { padding: 0 0 var(--space-2); }
.altre .fold { border-top: var(--border-width) solid var(--color-border-subtle); }
.altre .fold > .fold__summary { min-height: var(--target-touch); padding: 0; }
.altre .fold > .fold__summary:hover { background: none; }
.altre .fold[open] > .fold__summary { border-bottom: 0; }
.altre .fold > .fold__body { padding: var(--space-2) 0 var(--space-3); display: grid; gap: var(--space-4); }
.altre .fold > .fold__body > * { margin: 0; }   /* il vuoto tra le righe è solo il gap della griglia */
.altre .fold .form-actions { margin-top: 0; }
.rigalink { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-touch); color: var(--color-heading); text-decoration: none; font-weight: var(--font-weight-semibold); border-top: var(--border-width) solid var(--color-border-subtle); }
.rigalink:hover { color: var(--color-link); }
.rigalink .fold__meta { font-weight: var(--font-weight-regular); }
.rigalink::after { content: "›"; flex: none; color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1; }
@media (max-width: 599px) { .lan-testa__btn { display: none; } }
@media (min-width: 700px) {
  .az-intest { display: grid; grid-template-columns: minmax(0, 1fr) 9rem var(--target-touch); gap: var(--space-4); padding: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .az-intest--dopo { grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.5fr) 28px; }
  .az-intest span:nth-child(2) { text-align: right; }
  .az { grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.5fr); column-gap: var(--space-4); }
  .az--prima { grid-template-columns: minmax(0, 1fr) 9rem var(--target-touch); gap: var(--space-1) var(--space-4); }
  .az--prima .az__x { grid-column: 3; grid-row: 1; }
  .az__km { grid-column: 2; text-align: right; }
  .az__km--c { display: block; }
  .az__km--s { display: none; }
  .az__riga { grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.5fr) 28px; grid-template-areas: "nome km st pm"; column-gap: var(--space-4); }
  .az__riga--sola { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "st pm"; }
  .az__riga .az__st { flex-wrap: nowrap; }
  .az__riga .az__tx { flex: 1 1 0; }
  .esc-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .esc-riga__dx { justify-content: flex-end; }
}

/* Telefono: ogni comando da toccare è alto almeno quanto un dito (--target-touch, 44 px): la piega delle fasi, la × delle righe e il
   titolo che porta altrove (azienda nel Lancio, documento in Documenti) e il collegamento che manda a correggere una mancanza. */
@media (max-width: 599px) {
  .skill-flags .fold__summary { min-height: var(--target-touch); }
  .repeat-row__end .btn { min-width: var(--target-touch); min-height: var(--target-touch); }
  .warnlist a, .az__nome a, .doc__nome a, .esc-riga a, .altre .form-actions a { display: inline-flex; align-items: center; min-height: var(--target-touch); }
}

/* Foto del candidato in alto nella scheda interna: cerchio di 96 px (6rem) con la foto o l'iniziale */
.photo-block { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-6); }
.photo-block__image { flex: none; width: calc(var(--space-8) * 2); height: calc(var(--space-8) * 2); border-radius: var(--radius-full); object-fit: cover; border: var(--border-width) solid var(--color-border-subtle); background: var(--color-surface-column); }
.photo-block__initial { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-heading); }
.photo-block__body { min-width: 0; flex: 1; max-width: 32rem; }
.photo-block .form-actions { justify-content: flex-start; flex-direction: row; margin-top: var(--space-3); }
@media (max-width: 599px) { .photo-block { flex-direction: column; align-items: center; } .photo-block__body { width: 100%; } }