/* ui.css — sistema di design «clinica del futuro» (docs/UI-REDESIGN.md).

   Calmo, luminoso, preciso: neutri caldi chiari, un primario teal profondo, un accento corallo usato
   con parsimonia (la linea «adesso», il focus, le cose da fare subito). Ogni colore di stato o di
   setting ha anche un'icona o un'etichetta: mai il solo colore.

   Ordine dei fogli: app.css sta nel livello «legacy» (@layer), questo foglio no: le sue regole
   vincono sempre su quelle storiche, senza gare di specificità. Le pagine non ancora ridisegnate
   ereditano i token (le variabili storiche --brand, --fg, --line… puntano a quelle nuove).

   Indice: 1 font · 2 token (chiaro, scuro, densità, movimento) · 3 base · 4 guscio · 5 primitive
   (pulsanti, campi, card, tabelle, badge, chip, avvisi) · 6 componenti nuovi (palette dei comandi,
   toast, finestre, oscuramento, scorciatoie) · 7 movimento e transizioni di vista. */

/* --- 1. Font (self-hosted, OFL 1.1: static/fonts/*-OFL.txt) ------------------------------------- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- 2. Token ------------------------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Tavolozza di base: neutri caldi, teal profondo, corallo. Non usarli direttamente nei componenti:
     passano dai token semantici più sotto, che il tema scuro ridefinisce. */
  --n-0: #ffffff;
  --n-25: #fcfbf8;
  --n-50: #f6f4ef;
  --n-100: #efece5;
  --n-150: #e8e4db;
  --n-200: #e2ddd3;
  --n-300: #cfc8bb;
  --n-400: #a59f94;
  --n-500: #7b766d;
  --n-600: #5c5851;
  --n-700: #44413c;
  --n-800: #2b2926;
  --n-900: #1a1917;
  --p-50: #e9f4f3;
  --p-100: #d2e9e7;
  --p-200: #a6d3cf;
  --p-300: #6fb6b0;
  --p-400: #3c9790;
  --p-500: #1c7a73;
  --p-600: #13645e;
  --p-700: #0f514c;
  --p-800: #0c3f3b;
  --p-900: #082c29;
  --a-300: #f6b394;
  --a-400: #f08a5d;
  --a-500: #e8693a;
  --a-600: #c4511f;
  --a-700: #9c3f17;

  /* Superfici e testo */
  --bg-page: var(--n-50);
  --bg-surface: var(--n-0);
  --bg-raised: var(--n-0);
  --bg-sunken: var(--n-100);
  --bg-muted: var(--n-25);
  --bg-hover: rgb(19 100 94 / 0.06);
  --bg-active: rgb(19 100 94 / 0.11);
  --bg-selected: var(--p-50);
  --bg-shell: rgb(252 251 248 / 0.82);
  --bg-overlay: rgb(26 25 23 / 0.38);
  --fg: #1b2625;
  --fg-muted: #56605e;
  --fg-subtle: #656f6d;
  --fg-on-primary: #ffffff;
  --fg-on-err: #ffffff;
  --line: #e4dfd5;
  --line-strong: #cbc4b6;
  --line-focus: var(--a-600);

  /* Marchio e azione */
  --primary: var(--p-600);
  --primary-hover: var(--p-700);
  --primary-active: var(--p-800);
  --primary-soft: var(--p-50);
  --primary-soft-2: var(--p-100);
  --primary-ink: var(--p-700);
  /* Evidenza (corallo): poche cose, quelle da notare subito. --accent resta il primario per app.css. */
  --hl: var(--a-500);
  --hl-ink: var(--a-700);
  --hl-soft: #fdeee6;
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);

  /* Esiti generici */
  --ok: #217a45;
  --ok-bg: #e6f3ea;
  --ok-fg: #185a33;
  --warn: #b97a0c;
  --warn-bg: #fdf3dc;
  --warn-fg: #6f4a05;
  --err: #c2372f;
  --err-bg: #fbebe9;
  --err-fg: #8f231d;
  --info: #2f6bcf;
  --info-bg: #eaf1fd;
  --info-fg: #1c4d9a;

  /* Stati della seduta: tinta piena (bordo, icona), fondo tenue, testo sul fondo (>= 4,5:1). */
  --st-scheduled: #2f6bcf;
  --st-scheduled-bg: #eaf1fd;
  --st-scheduled-fg: #1c4d9a;
  --st-confirmed: #0f8698;
  --st-confirmed-bg: #e2f4f6;
  --st-confirmed-fg: #0a5865;
  --st-done: #2c8a4b;
  --st-done-bg: #e6f3ea;
  --st-done-fg: #1d5f34;
  --st-noshow: #cf3f3f;
  --st-noshow-bg: #fbeaea;
  --st-noshow-fg: #932323;
  --st-cancelled: #808892;
  --st-cancelled-bg: #f0f1f2;
  --st-cancelled-fg: #4a525b;
  --st-reschedule: #c4830b;
  --st-reschedule-bg: #fdf2d8;
  --st-reschedule-fg: #6f4805;
  --st-substitution: #7656d4;
  --st-substitution-bg: #f0ecfc;
  --st-substitution-fg: #4e34a3;
  --st-recovery: #4a58cf;
  --st-recovery-bg: #eceefc;
  --st-recovery-fg: #313b9a;
  --st-proposed: var(--p-500);
  --st-proposed-bg: #f4faf9;
  --st-proposed-fg: var(--p-700);

  /* Setting: ogni setting ha colore, icona ed etichetta (macro setting_chip). */
  --set-amb: #13847a;
  --set-amb-bg: #e3f3f1;
  --set-amb-fg: #0c5a53;
  --set-dom: #b5701b;
  --set-dom-bg: #fbf0e1;
  --set-dom-fg: #6e420c;
  --set-semi: #7c4fd0;
  --set-semi-bg: #f2ecfc;
  --set-semi-fg: #52309a;
  --set-adi: #c9406e;
  --set-adi-bg: #fbeaf0;
  --set-adi-fg: #8a2148;
  --set-sr2: #3f63c9;
  --set-sr2-bg: #e9effc;
  --set-sr2-fg: #2b4593;
  --set-other: #6d7680;
  --set-other-bg: #f0f1f2;
  --set-other-fg: #454c54;

  /* Tipografia */
  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Inter Variable", system-ui, sans-serif;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-display: 3rem;
  --lh-tight: 1.2;
  --lh: 1.5;
  --tracking-tight: -0.015em;
  --tracking-caps: 0.06em;

  /* Spaziature (multipli di 4 px), raggi, bordi */
  --s-0: 0.125rem;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;
  --bw: 1px;

  /* Profondità: ombre morbide con un velo caldo, un solo livello di vetro (guscio e palette). */
  --sh-0: 0 0 0 1px rgb(27 38 37 / 0.06);
  --sh-1: 0 1px 2px rgb(27 38 37 / 0.06), 0 0 0 1px rgb(27 38 37 / 0.05);
  --sh-2: 0 2px 6px -1px rgb(27 38 37 / 0.08), 0 10px 24px -8px rgb(27 38 37 / 0.12),
    0 0 0 1px rgb(27 38 37 / 0.05);
  --sh-3: 0 24px 56px -12px rgb(27 38 37 / 0.28), 0 4px 12px rgb(27 38 37 / 0.08),
    0 0 0 1px rgb(27 38 37 / 0.06);
  --glass-blur: blur(16px) saturate(1.5);

  /* Densità: comoda (predefinita). La compatta ridefinisce questi valori più sotto. */
  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --row-pad-y: 0.6rem;
  --row-pad-x: 0.75rem;
  --card-pad: 1.25rem;
  --gap: 1rem;

  /* Movimento: brevi e naturali; prefers-reduced-motion li azzera (sezione 7). */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Guscio */
  --nav-width: 15.5rem;
  --topbar-h: 3.5rem;

  /* Variabili storiche di app.css (livello legacy) puntate sui token nuovi. */
  --brand: var(--primary);
  --brand-strong: var(--primary-hover);
  --brand-soft: var(--primary-soft);
  --brand-salvia: var(--p-300);
  --brand-ink: var(--p-800);
  --brand-ink-fg: #ffffff;
  --bg: var(--bg-surface);
  --page: var(--bg-page);
  --surface-2: var(--bg-muted);
  --muted: var(--fg-muted);
  --accent-strong: var(--primary-hover);
  --accent-fg: var(--fg-on-primary);
  --focus: var(--line-focus);
  --state-scheduled: var(--st-scheduled);
  --state-scheduled-soft: var(--st-scheduled-bg);
  --state-scheduled-fg: var(--st-scheduled-fg);
  --radius: var(--r-2);
  --space: 0.75rem;
}
/* Tema scuro: notte profonda con un velo di teal; contrasti AA ricontrollati sui fondi scuri. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page: #0e1415;
    --bg-surface: #151d1e;
    --bg-raised: #1a2425;
    --bg-sunken: #0b1011;
    --bg-muted: #182122;
    --bg-hover: rgb(111 214 204 / 0.07);
    --bg-active: rgb(111 214 204 / 0.13);
    --bg-selected: #173533;
    --bg-shell: rgb(18 26 27 / 0.82);
    --bg-overlay: rgb(0 0 0 / 0.55);
    --fg: #e5ecea;
    --fg-muted: #a1aeab;
    --fg-subtle: #7d8a88;
    --fg-on-primary: #06201e;
    --fg-on-err: #2a0b09;
    --line: #263234;
    --line-strong: #364547;
    --line-focus: var(--a-400);
    --primary: #5cc3b9;
    --primary-hover: #7fd3ca;
    --primary-active: #a4e2db;
    --primary-soft: #143533;
    --primary-soft-2: #1b4643;
    --primary-ink: #8fdcd3;
    --hl: var(--a-400);
    --hl-ink: var(--a-300);
    --hl-soft: #3a2116;
    --ok: #52bd7a;
    --ok-bg: #133222;
    --ok-fg: #8fe0ad;
    --warn: #e2a63b;
    --warn-bg: #362810;
    --warn-fg: #f3cd85;
    --err: #ef6a5f;
    --err-bg: #3a1716;
    --err-fg: #f8aba4;
    --info: #6d9ff0;
    --info-bg: #15243f;
    --info-fg: #acc8f8;
    --st-scheduled: #6d9ff0;
    --st-scheduled-bg: #15243f;
    --st-scheduled-fg: #b3cdf9;
    --st-confirmed: #4cc2d3;
    --st-confirmed-bg: #0f2f35;
    --st-confirmed-fg: #9fe3ec;
    --st-done: #55b979;
    --st-done-bg: #132f20;
    --st-done-fg: #9bdcb2;
    --st-noshow: #ef6a6a;
    --st-noshow-bg: #3b1819;
    --st-noshow-fg: #f6b0b0;
    --st-cancelled: #8d969f;
    --st-cancelled-bg: #212829;
    --st-cancelled-fg: #c3cad0;
    --st-reschedule: #e2a63b;
    --st-reschedule-bg: #36280f;
    --st-reschedule-fg: #f4d08f;
    --st-substitution: #a68cf0;
    --st-substitution-bg: #261d42;
    --st-substitution-fg: #d3c6fa;
    --st-recovery: #8e98f2;
    --st-recovery-bg: #1d2148;
    --st-recovery-fg: #c9cefa;
    --st-proposed: #5cc3b9;
    --st-proposed-bg: #112624;
    --st-proposed-fg: #9adfd7;
    --set-amb: #4cc0b4;
    --set-amb-bg: #102d2a;
    --set-amb-fg: #9be0d7;
    --set-dom: #e0a352;
    --set-dom-bg: #33240f;
    --set-dom-fg: #f3cf9c;
    --set-semi: #ae8cf0;
    --set-semi-bg: #261b42;
    --set-semi-fg: #d6c6fa;
    --set-adi: #ec7ba1;
    --set-adi-bg: #3a1726;
    --set-adi-fg: #f7bcd0;
    --set-sr2: #7f9ff0;
    --set-sr2-bg: #17223f;
    --set-sr2-fg: #c0cff8;
    --set-other: #97a0a8;
    --set-other-bg: #222a2b;
    --set-other-fg: #c9d0d6;
    --sh-0: 0 0 0 1px rgb(255 255 255 / 0.05);
    --sh-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
    --sh-2: 0 2px 6px -1px rgb(0 0 0 / 0.5), 0 12px 28px -8px rgb(0 0 0 / 0.55),
      0 0 0 1px rgb(255 255 255 / 0.06);
    --sh-3: 0 28px 64px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.4),
      0 0 0 1px rgb(255 255 255 / 0.08);
    --brand-ink: #0b1213;
  }
}
/* Lo stesso tema scuro scelto a mano (data-theme="dark" su <html>, impostato da prefs.js). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0e1415;
  --bg-surface: #151d1e;
  --bg-raised: #1a2425;
  --bg-sunken: #0b1011;
  --bg-muted: #182122;
  --bg-hover: rgb(111 214 204 / 0.07);
  --bg-active: rgb(111 214 204 / 0.13);
  --bg-selected: #173533;
  --bg-shell: rgb(18 26 27 / 0.82);
  --bg-overlay: rgb(0 0 0 / 0.55);
  --fg: #e5ecea;
  --fg-muted: #a1aeab;
  --fg-subtle: #7d8a88;
  --fg-on-primary: #06201e;
  --fg-on-err: #2a0b09;
  --line: #263234;
  --line-strong: #364547;
  --line-focus: var(--a-400);
  --primary: #5cc3b9;
  --primary-hover: #7fd3ca;
  --primary-active: #a4e2db;
  --primary-soft: #143533;
  --primary-soft-2: #1b4643;
  --primary-ink: #8fdcd3;
  --hl: var(--a-400);
  --hl-ink: var(--a-300);
  --hl-soft: #3a2116;
  --ok: #52bd7a;
  --ok-bg: #133222;
  --ok-fg: #8fe0ad;
  --warn: #e2a63b;
  --warn-bg: #362810;
  --warn-fg: #f3cd85;
  --err: #ef6a5f;
  --err-bg: #3a1716;
  --err-fg: #f8aba4;
  --info: #6d9ff0;
  --info-bg: #15243f;
  --info-fg: #acc8f8;
  --st-scheduled: #6d9ff0;
  --st-scheduled-bg: #15243f;
  --st-scheduled-fg: #b3cdf9;
  --st-confirmed: #4cc2d3;
  --st-confirmed-bg: #0f2f35;
  --st-confirmed-fg: #9fe3ec;
  --st-done: #55b979;
  --st-done-bg: #132f20;
  --st-done-fg: #9bdcb2;
  --st-noshow: #ef6a6a;
  --st-noshow-bg: #3b1819;
  --st-noshow-fg: #f6b0b0;
  --st-cancelled: #8d969f;
  --st-cancelled-bg: #212829;
  --st-cancelled-fg: #c3cad0;
  --st-reschedule: #e2a63b;
  --st-reschedule-bg: #36280f;
  --st-reschedule-fg: #f4d08f;
  --st-substitution: #a68cf0;
  --st-substitution-bg: #261d42;
  --st-substitution-fg: #d3c6fa;
  --st-recovery: #8e98f2;
  --st-recovery-bg: #1d2148;
  --st-recovery-fg: #c9cefa;
  --st-proposed: #5cc3b9;
  --st-proposed-bg: #112624;
  --st-proposed-fg: #9adfd7;
  --set-amb: #4cc0b4;
  --set-amb-bg: #102d2a;
  --set-amb-fg: #9be0d7;
  --set-dom: #e0a352;
  --set-dom-bg: #33240f;
  --set-dom-fg: #f3cf9c;
  --set-semi: #ae8cf0;
  --set-semi-bg: #261b42;
  --set-semi-fg: #d6c6fa;
  --set-adi: #ec7ba1;
  --set-adi-bg: #3a1726;
  --set-adi-fg: #f7bcd0;
  --set-sr2: #7f9ff0;
  --set-sr2-bg: #17223f;
  --set-sr2-fg: #c0cff8;
  --set-other: #97a0a8;
  --set-other-bg: #222a2b;
  --set-other-fg: #c9d0d6;
  --sh-0: 0 0 0 1px rgb(255 255 255 / 0.05);
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
  --sh-2: 0 2px 6px -1px rgb(0 0 0 / 0.5), 0 12px 28px -8px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
  --sh-3: 0 28px 64px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.08);
  --brand-ink: #0b1213;
}

/* Densità compatta (data-density="compact"): righe e controlli più bassi per chi vede molte righe
   insieme. Solo con un puntatore preciso: sul touch i bersagli restano di 44 px (WCAG 2.5.8). */
@media (pointer: fine) {
  :root[data-density="compact"] {
    --control-h: 2.125rem;
    --control-h-sm: 1.875rem;
    --row-pad-y: 0.3rem;
    --row-pad-x: 0.6rem;
    --card-pad: 0.9rem;
    --gap: 0.75rem;
    --fs-base: 0.875rem;
  }
}

/* --- 3. Base ------------------------------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh);
  font-feature-settings: "cv11", "ss03";
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: 650; margin: 0 0 var(--s-4); }
h2 { font-size: var(--fs-xl); font-weight: 620; margin: var(--s-6) 0 var(--s-3); }
h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
p { text-wrap: pretty; }
a { color: var(--primary-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
/* Orari e numeri sempre a cifre tabulari: le colonne non ballano. */
time, .num, .tnum, td, th, .time, .badge, .chip, .tile-number { font-variant-numeric: tabular-nums; }
::selection { background: var(--primary-soft-2); color: var(--fg); }
hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--s-6) 0; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 0.05em 0.4em;
  border: var(--bw) solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-1);
  background: var(--bg-surface); color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.4;
}
/* Focus: anello corallo e alone del fondo, visibile su ogni superficie (WCAG 2.4.11/2.4.13). */
:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--line-focus) 22%, transparent);
  border-radius: var(--r-1);
}
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.icon {
  width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon.sm { width: 1em; height: 1em; }
.icon.lg { width: 1.4em; height: 1.4em; }
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--s-2); top: -4rem; z-index: 200; padding: var(--s-2) var(--s-4);
  background: var(--primary); color: var(--fg-on-primary); border-radius: var(--r-2); box-shadow: var(--sh-2);
  text-decoration: none; font-weight: 600; transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--s-2); left: var(--s-2); }

/* --- 4. Guscio --------------------------------------------------------------------------------------
   Telefono: testata fissa con marchio, «Cerca» e «Menu»; il menu scorre da sinistra sopra la pagina.
   Desktop (>= 64rem): colonna a sinistra chiara, con il vetro smerigliato, menu con icone, utente in
   fondo con tema, densità e oscuramento dello schermo. */
.topbar {
  position: sticky; top: 0; z-index: 40; background: var(--bg-shell);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: var(--bw) solid var(--line);
}
.topbar-head {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--topbar-h); padding: var(--s-2) var(--s-3);
  background: transparent; color: var(--fg); border-bottom: 0;
}
.brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
.brand a {
  display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg); text-decoration: none;
  font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); letter-spacing: var(--tracking-tight);
  line-height: 1.15; overflow-wrap: anywhere;
}
.brand-mark {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--r-2);
  background: linear-gradient(145deg, var(--p-400), var(--p-700)); color: #fff; box-shadow: var(--sh-1);
}
.brand-mark .icon { width: 1.1rem; height: 1.1rem; }
.logo { height: 2rem; width: auto; background: #fff; border-radius: var(--r-1); padding: 2px; box-shadow: var(--sh-0); }
.nav-toggle, .shell-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.75rem;
  min-width: 2.75rem; padding: 0 var(--s-3); font: inherit; font-weight: 600; font-size: var(--fs-sm);
  color: var(--fg); background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-2);
  cursor: pointer; box-shadow: var(--sh-0);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.nav-toggle:hover, .shell-button:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { background: currentColor; }
.nav-toggle-icon { flex: none; } /* sotto i 390px si stringe il nome della struttura, non l'icona */
.app-menu { padding: var(--s-2) var(--s-3) var(--s-4); }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-group {
  margin: var(--s-4) var(--s-3) var(--s-1); font-size: var(--fs-2xs); font-weight: 650; color: var(--fg-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.mainnav a {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 2.5rem; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2); color: var(--fg-muted); text-decoration: none; font-weight: 520; border-left: 0;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.mainnav a .icon { color: var(--fg-subtle); transition: color var(--dur-1) var(--ease-out); }
.mainnav a:hover { background: var(--bg-hover); color: var(--fg); }
.mainnav a:hover .icon { color: var(--primary); }
.mainnav a[aria-current] { background: var(--bg-hover); color: var(--fg); font-weight: 600; }
.mainnav a[aria-current="page"] {
  background: var(--bg-surface); color: var(--primary-ink); font-weight: 650; box-shadow: var(--sh-1);
}
.mainnav a[aria-current="page"] .icon, .mainnav a[aria-current] .icon { color: var(--primary); }
/* Indicatore della voce attiva: una barretta che scorre tra le pagine (transizione di vista). */
.mainnav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -0.5rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 3px;
  background: var(--primary);
}
.mainnav a[aria-current="page"] { view-transition-name: nav-current; }
.nav-kbd { margin-left: auto; display: none; gap: 2px; }
.session-box {
  margin: var(--s-4) 0 0; padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--bg-surface); box-shadow: var(--sh-1); display: grid; gap: var(--s-2); justify-items: stretch;
}
.who { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); align-items: center; }
.who-avatar {
  grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; font-size: var(--fs-sm);
}
.who strong { font-weight: 620; font-size: var(--fs-sm); line-height: 1.25; }
.who-role { color: var(--fg-muted); font-size: var(--fs-xs); }
.session-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); }
.session-tools { display: flex; gap: var(--s-1); align-items: center; }
.session-tools .shell-button { min-height: 2.25rem; min-width: 2.25rem; padding: 0; }
.session-box form.inline { display: block; }
.session-box form.inline .button { width: 100%; }
/* Sede di lavoro della sessione (giro Z): sotto il marchio, sempre visibile, con «Cambia sede». */
.work-site {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0;
  padding: var(--s-1) var(--s-3) var(--s-2); font-size: var(--fs-sm); color: var(--fg); overflow-wrap: anywhere;
}
.work-site .icon { color: var(--primary); }
.work-site strong { font-weight: 650; }
.work-site a { font-size: var(--fs-xs); }
/* Ruolo attivo accanto alla sede (U-R0, D-801): leggibile anche a menu chiuso sul telefono. */
.nav-context-role { color: var(--fg-muted); font-weight: 600; }
.nav-context-sep { color: var(--fg-subtle); }
/* Accessi rapidi del menu (D-801): un pulsante a tutta larghezza sopra le voci. */
.nav-quick { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-1); }
.nav-quick .button { width: 100%; justify-content: flex-start; }
.network-view {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4);
  padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--r-2); background: var(--bg-surface); font-size: var(--fs-sm);
}
.footer { padding: var(--s-6) var(--s-4); color: var(--fg-subtle); font-size: var(--fs-xs); text-align: center; }
.container { padding: var(--s-4); max-width: 1680px; margin: 0 auto; }
.with-nav main:focus { outline: none; }

/* Testata del telefono e menu a cassetto. */
@media (max-width: 63.99rem) {
  /* Il vetro smerigliato sta in uno strato dietro la testata: un backdrop-filter sulla testata stessa la
     renderebbe il riferimento del cassetto (position: fixed), che resterebbe alto quanto la testata. */
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
  .topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-shell);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .with-nav .app-menu {
    /* Sotto tutta la testata, riga di sede e ruolo compresa (D-801): restano leggibili a menu aperto. */
    position: fixed; inset: var(--shell-h, var(--topbar-h)) 0 0 0; z-index: 39; overflow-y: auto; padding: var(--s-3) var(--s-4) var(--s-8);
    background: var(--bg-page); animation: drawer-in var(--dur-3) var(--ease-out);
  }
  .topbar.is-collapsed .app-menu { display: none; }
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 64rem) {
  .with-nav { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); min-height: 100vh; }
  .with-nav .topbar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; grid-row: 1 / span 2; display: flex; flex-direction: column;
    border-bottom: 0; border-right: var(--bw) solid var(--line); scrollbar-width: thin;
  }
  .with-nav .topbar-head { min-height: 4rem; padding: var(--s-4) var(--s-4) var(--s-2); }
  .with-nav .app-menu { display: flex !important; flex-direction: column; flex: 1 1 auto; padding: var(--s-1) var(--s-3) var(--s-4); }
  .with-nav .mainnav { flex: 1 1 auto; }
  .with-nav .nav-toggle { display: none; }
  .with-nav .container { padding: var(--s-6) var(--s-8); }
  .with-nav .footer { grid-column: 2; }
  .nav-kbd { display: inline-flex; }
}

/* --- 5. Primitive -------------------------------------------------------------------------------- */
/* Contenitori */
.card {
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-3);
  padding: var(--card-pad); margin: 0 0 var(--gap); box-shadow: var(--sh-1);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.cards { gap: var(--s-3); }
.card-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--card-pad);
  font-weight: 620; color: var(--fg); text-decoration: none; border-radius: inherit;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card-link:hover { background: var(--bg-hover); text-decoration: none; }
.auth-card { max-width: 28rem; margin: var(--s-10) auto; padding: var(--s-8); border-radius: var(--r-4); box-shadow: var(--sh-2); }
.error-page { border-color: var(--err); }
.error-page h1 { color: var(--err-fg); }
.breadcrumb { margin: calc(var(--s-2) * -1) 0 var(--s-4); color: var(--fg-muted); font-size: var(--fs-sm); }
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-ink); text-decoration: underline; }
.dl { gap: var(--s-2) var(--s-5); }
.dl dt { font-weight: 560; color: var(--fg-muted); font-size: var(--fs-sm); }
.dl dd { font-size: var(--fs-base); }
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6);
  margin: 0 0 var(--s-5);
}
.page-head h1 { margin: 0; }
.page-head .eyebrow { margin: 0 0 var(--s-1); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 650; color: var(--fg-subtle); text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Moduli */
.form { gap: var(--gap); }
.form-field { gap: var(--s-1); }
.form-field label, .fieldset legend { font-weight: 560; font-size: var(--fs-sm); color: var(--fg); }
.form-field small, .form-field .hint { color: var(--fg-muted); font-size: var(--fs-xs); }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"],
select, textarea, .form-field input, .form-field select, .form-field textarea {
  font: inherit; font-size: max(16px, var(--fs-base)); color: var(--fg); background: var(--bg-surface);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-2); padding: 0 var(--s-3);
  min-height: var(--control-h); width: 100%; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.03);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}
textarea, .form-field textarea { padding: var(--s-2) var(--s-3); line-height: var(--lh); min-height: 6rem; }
input:hover, select:hover, textarea:hover { border-color: var(--fg-subtle); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 16%, transparent);
}
select, .form-field select {
  appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 1.15rem; height: 1.15rem; }
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg-sunken); color: var(--fg-subtle); cursor: not-allowed; }
.form-actions { gap: var(--s-2); }
.form-error {
  padding: var(--s-3) var(--s-4); border: var(--bw) solid color-mix(in srgb, var(--err) 35%, transparent);
  border-left: 4px solid var(--err); background: var(--err-bg); color: var(--err-fg); border-radius: var(--r-2);
}

/* Avvisi: barra di colore più il testo; mai il solo colore. */
.notice {
  margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border: var(--bw) solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-left: 4px solid var(--warn); background: var(--warn-bg); color: var(--warn-fg); border-radius: var(--r-2);
}
.notice.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); }
.notice.bad { border-color: color-mix(in srgb, var(--err) 35%, transparent); border-left-color: var(--err); background: var(--err-bg); color: var(--err-fg); }
.notice.info { border-color: color-mix(in srgb, var(--info) 35%, transparent); border-left-color: var(--info); background: var(--info-bg); color: var(--info-fg); }

/* Pulsanti: primario pieno, secondario a contorno, fantasma, pericolo. Altezza dalla densità. */
.button, .button-link {
  gap: var(--s-2); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; min-height: var(--control-h);
  padding: 0 var(--s-4); border-radius: var(--r-2); letter-spacing: 0.005em;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.button {
  background: var(--primary); color: var(--fg-on-primary); border: var(--bw) solid var(--primary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button:active { transform: translateY(1px) scale(0.99); background: var(--primary-active); }
.button.secondary { background: var(--bg-surface); color: var(--fg); border-color: var(--line-strong); box-shadow: var(--sh-0); }
.button.secondary:hover { background: var(--bg-hover); border-color: var(--fg-subtle); color: var(--fg); }
.button.ghost { background: transparent; color: var(--fg-muted); border-color: transparent; box-shadow: none; }
.button.ghost:hover { background: var(--bg-hover); color: var(--fg); }
.button.danger { background: var(--bg-surface); color: var(--err-fg); border-color: color-mix(in srgb, var(--err) 55%, transparent); box-shadow: none; }
.button.danger:hover { background: var(--err-bg); border-color: var(--err); }
.danger-zone .button.danger { background: var(--err); border-color: var(--err); color: var(--fg-on-err); }
.danger-zone .button.danger:hover { background: var(--err-fg); border-color: var(--err-fg); }
.button.sm { min-height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.button.icon-only { padding: 0; width: var(--control-h); }
.button.icon-only.sm { width: var(--control-h-sm); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.button-link { background: transparent; color: var(--primary-ink); border: var(--bw) solid transparent; padding: 0 var(--s-3); text-decoration: none; }
.button-link:hover { background: var(--bg-hover); text-decoration: underline; }
.button.choice { background: var(--bg-surface); color: var(--fg); border-color: var(--line); justify-content: flex-start; }
.button.choice:hover { border-color: var(--primary); background: var(--bg-hover); }
.button.choice.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
@media (pointer: coarse) { .button, .button-link, .button.sm { min-height: 2.75rem; } }

/* Tabelle: righe ariose ma dense, intestazione discreta e appiccicosa nei contenitori. */
.table-wrap {
  border: var(--bw) solid var(--line); border-radius: var(--r-3); background: var(--bg-surface); box-shadow: var(--sh-1);
}
.table { font-size: var(--fs-base); }
.table caption { padding: var(--s-3) var(--row-pad-x); color: var(--fg-muted); font-size: var(--fs-sm); }
.table th, .table td { padding: var(--row-pad-y) var(--row-pad-x); border-top: var(--bw) solid var(--line); vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-muted); color: var(--fg-muted); border-top: 0;
  font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  border-bottom: var(--bw) solid var(--line);
}
.table tbody tr { transition: background var(--dur-1) var(--ease-out); }
.table tbody tr:hover { background: var(--bg-hover); }
.table td.num, .table th.num { text-align: right; }
/* Righe di gruppo della tabella degli indicatori (app.css): in scuro --brand-ink è il fondo della testata,
   non un colore di testo. */
.kpi-process th { color: var(--primary-ink); }

/* Badge (stato breve) e chip (filtri, conteggi). */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em; padding: 0.1rem 0.55rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; border: var(--bw) solid var(--line);
  background: var(--bg-muted); color: var(--fg-muted); white-space: nowrap;
}
.badge.ok, .badge.approved, .badge.status-pianificato, .badge.status-in-corso, .badge.proposal-confirmed,
.badge.recovery-scheduled {
  background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.badge.requested, .badge.status-da-pianificare, .badge.status-pianificato-parziale, .badge.proposal-proposed,
.badge.recovery-open {
  background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.badge.rejected, .badge.status-scaduto-con-residuo, .badge.proposal-rejected, .badge.alert-action {
  background: var(--err-bg); color: var(--err-fg); border-color: color-mix(in srgb, var(--err) 35%, transparent);
}
.badge.status-pronto-alla-chiusura { background: var(--primary-soft); color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.badge.off, .badge.status-sospeso, .badge.status-chiuso, .badge.status-interrotto, .badge.proposal-expired,
.badge.proposal-draft, .badge.recovery-cancelled {
  background: var(--bg-sunken); color: var(--fg-muted); border-color: var(--line);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2rem; padding: 0 var(--s-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--bg-surface); color: var(--fg-muted);
  font-size: var(--fs-sm); font-weight: 550; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
a.chip:hover, button.chip:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--fg); }
.chip[aria-current], .chip[aria-pressed="true"], .chip.is-active {
  background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary-ink);
}
.chip strong { color: var(--fg); }
.fieldset legend { margin-bottom: var(--s-2); }

/* --- 6. Componenti nuovi --------------------------------------------------------------------------- */
/* Pulsante della palette nella colonna: sembra un campo di ricerca, apre la palette (Ctrl/⌘ K). */
.palette-trigger {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 2.5rem; margin: 0 0 var(--s-2);
  padding: 0 var(--s-2) 0 var(--s-3); font: inherit; font-size: var(--fs-sm); color: var(--fg-subtle); cursor: pointer;
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-2); box-shadow: var(--sh-0);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.palette-trigger:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); color: var(--fg-muted); }
.palette-trigger-text { flex: 1 1 auto; text-align: left; }
.palette-trigger-kbd { display: inline-flex; gap: 2px; }
@media (min-width: 64rem) { .palette-trigger-mobile { display: none; } }
@media (max-width: 63.99rem) { .app-menu .palette-trigger { display: none; } }

/* Finestre: <dialog> modale con fondo velato; la palette sta in alto, il foglio al centro. */
dialog { color: var(--fg); }
dialog::backdrop { background: var(--bg-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.palette {
  width: min(40rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 6rem)); margin: 12vh auto auto; padding: 0;
  border: var(--bw) solid var(--line); border-radius: var(--r-4); background: var(--bg-raised); box-shadow: var(--sh-3);
  overflow: hidden;
}
.palette[open] { animation: pop-in var(--dur-2) var(--ease-out); }
.palette-box { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.palette-input-row { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-bottom: var(--bw) solid var(--line); }
.palette-input-row > .icon { color: var(--fg-subtle); width: 1.25rem; height: 1.25rem; }
.palette-input, .palette .palette-input {
  flex: 1 1 auto; min-height: 3.5rem; border: 0; padding: 0; background: transparent; box-shadow: none;
  font-size: var(--fs-lg); font-family: var(--font-sans);
}
.palette-input:focus-visible { box-shadow: none; outline: none; }
.palette-results { list-style: none; margin: 0; padding: var(--s-2); overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.palette-group {
  padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-2xs); font-weight: 650; color: var(--fg-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.palette-option {
  display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding: 0 var(--s-3); border-radius: var(--r-2);
  cursor: pointer; color: var(--fg);
}
.palette-option .icon { color: var(--fg-subtle); }
.palette-option.is-active { background: var(--primary-soft); color: var(--primary-ink); }
.palette-option.is-active .icon { color: var(--primary); }
.palette-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-meta { color: var(--fg-subtle); font-size: var(--fs-xs); }
.palette-empty { padding: var(--s-6) var(--s-4); color: var(--fg-muted); text-align: center; }
.palette-hint {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: var(--s-2) var(--s-4);
  border-top: var(--bw) solid var(--line); background: var(--bg-muted); color: var(--fg-subtle); font-size: var(--fs-xs);
}
.palette-hint span { display: inline-flex; align-items: center; gap: 3px; }
.palette-hint-more { margin-left: auto; }
.palette-esc { flex: 0 0 auto; }

.sheet {
  width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 0; border: var(--bw) solid var(--line);
  border-radius: var(--r-4); background: var(--bg-raised); box-shadow: var(--sh-3);
}
.sheet[open] { animation: pop-in var(--dur-2) var(--ease-out); }
.sheet-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: var(--bw) solid var(--line); background: var(--bg-raised);
}
.sheet-head h2 { margin: 0; font-size: var(--fs-lg); }
.sheet-head form { margin: 0; }
.sheet-body { padding: var(--s-5); }
.confirm-dialog { width: min(30rem, calc(100vw - 2rem)); }
.confirm-dialog .sheet-body { margin: 0; }
.confirm-head { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); }
.confirm-head h2 { margin: 0; font-size: var(--fs-lg); }
.confirm-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.confirm-dialog.is-danger .confirm-icon { background: var(--err-bg); color: var(--err); }
.confirm-message { margin: 0; color: var(--fg); line-height: var(--lh); }
.button.danger-solid { background: var(--err); border-color: var(--err); color: var(--fg-on-err); }
.button.danger-solid:hover { background: var(--err-fg); border-color: var(--err-fg); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin: var(--s-5) 0 0; }
.shortcut-groups { display: grid; gap: var(--s-2) var(--s-8); padding: var(--s-2) var(--s-5) var(--s-5); }
.shortcut-groups h3 { font-size: var(--fs-sm); color: var(--fg-muted); font-family: var(--font-sans); font-weight: 650; }
.shortcut-list { margin: 0; display: grid; gap: var(--s-1); }
.shortcut-list div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-3); align-items: center; padding: var(--s-1) 0; }
.shortcut-list dt { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; color: var(--fg-subtle); font-size: var(--fs-xs); }
.shortcut-list dd { margin: 0; font-size: var(--fs-sm); }
.shortcut-note { margin: var(--s-3) 0 0; font-size: var(--fs-sm); }
@media (min-width: 48rem) { .shortcut-groups { grid-template-columns: 1fr 1fr; } }

/* Avvisi temporanei: in basso a destra (in basso al centro sul telefono), sopra a tutto. */
.toast-region {
  position: fixed; z-index: 120; right: var(--s-4); bottom: var(--s-4); display: grid; gap: var(--s-2);
  width: min(26rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-3); background: #1d2726; color: #eef3f2; box-shadow: var(--sh-3); pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-spring);
}
:root[data-theme="dark"] .toast { background: #e9efed; color: #142020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #e9efed; color: #142020; } }
.toast.is-leaving { animation: toast-out var(--dur-2) var(--ease-in-out) forwards; }
.toast-text { margin: 0; flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 520; }
.toast-ok .toast-text::before { content: "✓ "; color: #6fd6a0; font-weight: 700; }
.toast-action, .toast-close {
  font: inherit; font-size: var(--fs-sm); font-weight: 650; color: inherit; background: transparent; border: 0; cursor: pointer;
  min-height: 2.25rem; padding: 0 var(--s-2); border-radius: var(--r-1);
}
.toast-action { color: var(--a-300); }
.toast-close { opacity: 0.7; font-size: 1.25rem; line-height: 1; }
.toast-action:hover, .toast-close:hover { background: rgb(255 255 255 / 0.12); opacity: 1; }
@media (max-width: 40rem) { .toast-region { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--s-3); } }

/* Oscuramento rapido: copre tutto, nessun contenuto visibile dietro (niente vetro trasparente). */
.privacy-screen {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--s-6);
  background: radial-gradient(circle at 30% 20%, #16413d, #0a1514 70%); color: #e5ecea;
  animation: fade-in var(--dur-2) var(--ease-out);
}
.privacy-screen[hidden] { display: none; }
.privacy-card { display: grid; justify-items: center; gap: var(--s-3); max-width: 24rem; text-align: center; }
.privacy-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.privacy-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; }
.privacy-text { margin: 0; color: #b6c4c1; }
.privacy-screen kbd { background: transparent; color: #e5ecea; border-color: rgb(255 255 255 / 0.3); }

/* Strumenti dell'utente: il pulsante del tema mostra l'icona della modalità attiva. */
[data-ui-action="theme"] .icon { display: none; }
[data-ui-action="theme"][data-theme-mode="system"] .theme-icon-system,
[data-ui-action="theme"][data-theme-mode="light"] .theme-icon-light,
[data-ui-action="theme"][data-theme-mode="dark"] .theme-icon-dark { display: block; }
[data-ui-action="theme"]:not([data-theme-mode]) .theme-icon-system { display: block; }
button[data-ui-action="density"][aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* Stato della seduta: tinta, icona ed etichetta. */
.state-chip {
  --c: var(--st-scheduled); --c-bg: var(--st-scheduled-bg); --c-fg: var(--st-scheduled-fg);
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.12rem 0.55rem 0.12rem 0.45rem; border-radius: var(--r-pill);
  background: var(--c-bg); color: var(--c-fg); border: var(--bw) solid color-mix(in srgb, var(--c) 32%, transparent);
  font-size: var(--fs-xs); font-weight: 620; line-height: 1.45; white-space: nowrap;
}
.state-chip .icon { color: var(--c); width: 0.95em; height: 0.95em; }
.state-chip.compact { padding: 0.05rem 0.4rem; }
.st-scheduled { --c: var(--st-scheduled); --c-bg: var(--st-scheduled-bg); --c-fg: var(--st-scheduled-fg); }
.st-confirmed { --c: var(--st-confirmed); --c-bg: var(--st-confirmed-bg); --c-fg: var(--st-confirmed-fg); }
.st-done { --c: var(--st-done); --c-bg: var(--st-done-bg); --c-fg: var(--st-done-fg); }
.st-noshow { --c: var(--st-noshow); --c-bg: var(--st-noshow-bg); --c-fg: var(--st-noshow-fg); }
.st-cancelled { --c: var(--st-cancelled); --c-bg: var(--st-cancelled-bg); --c-fg: var(--st-cancelled-fg); }
.st-reschedule { --c: var(--st-reschedule); --c-bg: var(--st-reschedule-bg); --c-fg: var(--st-reschedule-fg); }
.st-substitution { --c: var(--st-substitution); --c-bg: var(--st-substitution-bg); --c-fg: var(--st-substitution-fg); }
.st-recovery { --c: var(--st-recovery); --c-bg: var(--st-recovery-bg); --c-fg: var(--st-recovery-fg); }
.st-proposed { --c: var(--st-proposed); --c-bg: var(--st-proposed-bg); --c-fg: var(--st-proposed-fg); }
.state-chip.st-proposed { border-style: dashed; }
.state-chip.st-cancelled .state-chip-label { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Setting: tinta, icona ed etichetta. */
.setting-chip {
  --c: var(--set-other); --c-bg: var(--set-other-bg); --c-fg: var(--set-other-fg);
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1rem 0.5rem; border-radius: var(--r-1);
  background: var(--c-bg); color: var(--c-fg); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.setting-chip .icon { color: var(--c); width: 0.95em; height: 0.95em; }
.set-amb { --c: var(--set-amb); --c-bg: var(--set-amb-bg); --c-fg: var(--set-amb-fg); }
.set-dom { --c: var(--set-dom); --c-bg: var(--set-dom-bg); --c-fg: var(--set-dom-fg); }
.set-semi { --c: var(--set-semi); --c-bg: var(--set-semi-bg); --c-fg: var(--set-semi-fg); }
.set-adi { --c: var(--set-adi); --c-bg: var(--set-adi-bg); --c-fg: var(--set-adi-fg); }
.set-sr2 { --c: var(--set-sr2); --c-bg: var(--set-sr2-bg); --c-fg: var(--set-sr2-fg); }

/* Stato vuoto: illustrazione leggera (anello e icona), una frase, l'azione suggerita. */
.empty-state { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; color: var(--fg-muted); }
.empty-art { position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--s-2); color: var(--primary); }
.empty-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft) 55%, transparent 56%), conic-gradient(from 200deg, var(--p-200), transparent 60%, var(--a-300), transparent);
  opacity: 0.9;
}
.empty-art .icon { position: relative; width: 1.75rem; height: 1.75rem; }
.empty-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 620; color: var(--fg); }
.empty-text { margin: 0 0 var(--s-2); max-width: 34rem; }

/* Anello di avanzamento del piano (svolte su previste), sempre con il numero scritto accanto. */
.progress-ring { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 4; }
.ring-value { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray var(--dur-3) var(--ease-out); }
.progress-ring[data-pct="100"] .ring-value { stroke: var(--ok); }

/* Scheletri di caricamento al posto degli indicatori che girano. */
.skeleton {
  display: block; border-radius: var(--r-1); min-height: 1em;
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--bg-muted) 40%, var(--bg-sunken) 80%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}

.st-elsewhere { --c: var(--st-cancelled); --c-bg: var(--bg-muted); --c-fg: var(--st-cancelled-fg); }
.state-chip.st-elsewhere { border-style: dotted; }

/* --- 8. Schermate ----------------------------------------------------------------------------------- */
/* Testata di sezione dentro una card: titolo a sinistra, azione a destra. */
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.section-head h2, .section-head h3 { margin: 0; }
.count-pill {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.25rem; padding: 0 0.4rem; margin-left: var(--s-1);
  border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg-muted); font-family: var(--font-sans);
  font-size: var(--fs-2xs); font-weight: 700; vertical-align: 0.15em; font-variant-numeric: tabular-nums;
}

/* Numeri del giorno: riquadri cliccabili, il numero in display con cifre tabulari. */
.stat-row {
  list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.stat-tile {
  --tone: var(--primary);
  position: relative; display: grid; gap: var(--s-1); height: 100%; padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1);
  color: var(--fg); text-decoration: none; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.stat-tile::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--tone); opacity: 0.85;
  transform: scaleX(0.18); transform-origin: left; transition: transform var(--dur-3) var(--ease-out);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); color: var(--fg); text-decoration: none; }
.stat-tile:hover::after { transform: scaleX(1); }
.stat-label { display: flex; align-items: center; gap: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 560; }
.stat-label .icon { color: var(--tone); }
.stat-value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-foot { color: var(--fg-subtle); font-size: var(--fs-xs); }
@media (max-width: 40rem) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .stat-tile { padding: var(--s-3); }
  .stat-value { font-size: var(--fs-2xl); }
  .stat-foot { display: none; }
}
.tone-done { --tone: var(--st-done); }
.tone-noshow { --tone: var(--st-noshow); }
.tone-action { --tone: var(--hl); }
.tone-action .stat-value { color: var(--hl-ink); }
.tone-pending { --tone: var(--warn); }
.count-pill.tone-pending { background: var(--warn-bg); color: var(--warn-fg); }

/* Oggi: due colonne sui grandi schermi, la barra «Da gestire» appiccicosa a destra. */
.today-hero { align-items: flex-end; }
.today-hero .today-role { margin: var(--s-1) 0 0; font-size: var(--fs-sm); }
.today-date { color: var(--primary-ink); }
/* Esito dell'azione appena fatta (ritorno da una seduta o dalla barra): staccato dai numeri del giorno. */
.today-outcome { margin: 0 0 var(--s-4); }
.today-layout { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) {
  .today-layout.with-side { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); }
  .today-side { position: sticky; top: var(--s-6); max-height: calc(100vh - 3rem); overflow-y: auto; scrollbar-width: thin; border-radius: var(--r-3); }
}
.today-section h2 { font-size: var(--fs-lg); }
.today-group { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); font-family: var(--font-sans); font-weight: 650; color: var(--fg-muted); }
.today-counts { margin: 0 0 var(--s-2); }
.today-done-note { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 0 color-mix(in srgb, var(--hl) 60%, transparent); animation: live 1.8s var(--ease-out) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hl) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Righe di seduta: ora, codice e dettagli, stato; barra di colore a sinistra (con l'etichetta accanto). */
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:where(.session-row) { --c: var(--line-strong); }
.session-row {
  position: relative; display: grid; grid-template-columns: 6.75rem minmax(min(11rem, 100%), 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3);
  padding: var(--row-pad-y) var(--row-pad-x) var(--row-pad-y) calc(var(--row-pad-x) + 4px); border-radius: var(--r-2);
  background: var(--bg-surface); transition: background var(--dur-1) var(--ease-out);
}
.session-row::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 3px; background: var(--c); }
.session-row:hover { background: var(--bg-hover); }
.session-time { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--fg); font-size: var(--fs-sm); }
.session-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-width: 0; }
.session-code { font-weight: 650; color: var(--fg); text-decoration: none; letter-spacing: 0.01em; }
a.session-code:hover { color: var(--primary-ink); text-decoration: underline; }
/* Tutta la riga apre la seduta (bersaglio di tocco ampio, non il solo codice): il collegamento del codice
   si allarga sulla riga con uno strato trasparente; il focus da tastiera si vede sulla riga intera. */
.session-row a.session-code::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.session-row:has(a.session-code) { cursor: pointer; }
.session-row:has(a.session-code):hover a.session-code { color: var(--primary-ink); text-decoration: underline; }
.session-row a.session-code:focus-visible { outline: none; box-shadow: none; }
/* Un pulsante nella riga (Apri il referto, N3) resta sopra il collegamento che copre la riga. */
.session-row form { position: relative; z-index: 2; }
/* Così il pulsante-collegamento della riga («Avvia la pratica» in «Oggi» dell'assistente sociale, D-542). */
.session-row > a.button { position: relative; z-index: 2; }
.session-row:has(a.session-code:focus-visible) {
  outline: 2px solid var(--line-focus); outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--line-focus) 22%, transparent);
}
@media (pointer: coarse) { .session-row:has(a.session-code) { min-height: 2.75rem; } }
/* «break-word» e non «anywhere»: con «anywhere» la larghezza minima del testo scende a una lettera e la
   colonna, stretta dalle azioni accanto, impaginava il richiamo lettera per lettera (U-R0, D-800). */
.session-meta { color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: break-word; min-width: 0; }
/* Le azioni della riga (richiami: Completa, Non riuscito, Riprogramma, Apri) vanno su una riga propria sotto
   il contatto: nella terza colonna «auto» toglievano tutto lo spazio al contatto (D-800). */
.session-row > .row-actions { grid-column: 2 / -1; min-width: 0; }
.session-list.is-live .session-row { background: color-mix(in srgb, var(--hl-soft) 55%, var(--bg-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 28%, transparent); }
.session-list.is-past .session-row { opacity: 0.78; }
.session-list.is-past .session-row:hover { opacity: 1; }
/* Seduta conclusa ancora senza esito: piena tra le concluse, con l'etichetta «Esito da segnare». */
.session-list.is-past .session-row.is-unmarked { opacity: 1; }
.session-flag { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--warn-fg); font-size: var(--fs-xs); font-weight: 650; }
@media (max-width: 40rem) {
  .session-row { grid-template-columns: 1fr auto; }
  .session-row .session-time { grid-column: 1; }
  .session-row .session-main { grid-column: 1 / -1; grid-row: 2; }
  .session-row .state-chip { grid-column: 2; grid-row: 1; justify-self: end; }
}
.now-line { position: relative; display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); color: var(--hl-ink); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.now-line::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--hl); flex: 0 0 auto; }
.now-line::after { content: ""; flex: 1 1 auto; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--hl), transparent); }
.today-finished { margin-top: var(--s-3); border-top: var(--bw) solid var(--line); padding-top: var(--s-1); }
.today-finished summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; min-height: 2.75rem; border-radius: var(--r-2); padding: 0 var(--s-2); }
.today-finished summary::-webkit-details-marker { display: none; }
.today-finished summary:hover { background: var(--bg-hover); }
.today-finished summary .today-group { margin: 0; }
.today-finished summary .icon { color: var(--fg-subtle); transition: transform var(--dur-2) var(--ease-out); }
.today-finished[open] summary .icon { transform: rotate(180deg); }

/* Sezioni del ruolo (chi non ha viste del giorno): riquadri con icona. */
.section-tiles { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.section-tile {
  display: flex; align-items: center; gap: var(--s-3); min-height: 3.25rem; padding: 0 var(--s-4); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); background: var(--bg-surface); color: var(--fg); text-decoration: none; font-weight: 560;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.section-tile .icon { color: var(--primary); }
.section-tile .chevron { margin-left: auto; color: var(--fg-subtle); }
.section-tile:hover { border-color: var(--primary); background: var(--bg-hover); transform: translateX(2px); color: var(--fg); text-decoration: none; }

/* Barra «Da gestire»: sezioni con conteggio, voci come card d'azione, proposte del motore leggibili. */
.todo-bar { padding: var(--card-pad); }
.todo-bar > h2 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.todo-pause { width: 100%; justify-content: flex-start; }
.todo-section {
  display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 650; color: var(--fg);
}
.todo-section .badge { margin-left: auto; }
.todo-priority { color: var(--hl-ink); }
.todo-priority > span[aria-hidden="true"] {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--hl-soft);
  color: var(--hl-ink); font-size: var(--fs-xs); font-weight: 800;
}
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.todo-item {
  margin: 0; padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-2); background: var(--bg-muted);
  font-size: var(--fs-sm); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.todo-item:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.todo-item p { margin: 0 0 var(--s-1); }
.todo-item p:last-child { margin-bottom: 0; }
.todo-item-priority { border-color: color-mix(in srgb, var(--hl) 35%, var(--line)); background: color-mix(in srgb, var(--hl-soft) 45%, var(--bg-surface)); }
.todo-title { font-weight: 620; }
.todo-title a { color: var(--fg); text-decoration: none; }
.todo-title a:hover { color: var(--primary-ink); text-decoration: underline; }
.todo-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.todo-actions .button { min-height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.todo-warning { color: var(--warn-fg); }
.todo-group { margin: 0 0 var(--s-3); }
.todo-causes { margin: var(--s-1) 0; padding-left: var(--s-4); color: var(--fg-muted); }
/* Liste lunghe della barra: le prime voci e «Mostra altre N» (le altre restano nella pagina, con i
   loro id stabili per il ripristino del focus). */
.todo-more { margin-top: var(--s-2); }
.todo-more > summary {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.25rem; padding: 0 var(--s-3); cursor: pointer;
  border-radius: var(--r-pill); border: var(--bw) solid var(--line); background: var(--bg-surface); color: var(--fg-muted);
  font-size: var(--fs-xs); font-weight: 600; list-style: none;
}
.todo-more > summary::-webkit-details-marker { display: none; }
.todo-more > summary:hover { background: var(--bg-hover); color: var(--fg); }
.todo-more[open] > summary { margin-bottom: var(--s-2); }
.todo-section .badge {
  min-width: 1.5rem; justify-content: center; padding: 0 0.45rem; background: var(--bg-sunken); border-color: transparent;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.todo-priority .badge { background: var(--hl-soft); color: var(--hl-ink); }
.todo-meta { color: var(--fg-muted); font-size: var(--fs-xs); }
.todo-empty { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-sm); }
.todo-empty .icon { color: var(--ok); }
.todo-all { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }

/* Proposte del motore come card: chi e quando, da dove a dove, perché, quanto resta della riserva. */
.todo-card { background: var(--bg-surface); box-shadow: var(--sh-0); }
.todo-card-head { display: flex; align-items: flex-start; gap: var(--s-2); }
.todo-card-head .todo-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.todo-timer {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--warn-bg); color: var(--warn-fg); font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.todo-move { display: grid; gap: 2px; margin: var(--s-2) 0; padding: var(--s-2); border-radius: var(--r-1); background: var(--bg-muted); }
.todo-move p { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); }
.todo-move .icon { flex: 0 0 auto; margin-top: 1px; }
.todo-from { color: var(--fg-muted); }
.todo-from .icon { color: var(--st-noshow); }
.todo-to .icon { color: var(--ok); }
.todo-why { position: relative; margin: var(--s-2) 0; padding-left: var(--s-3); border-left: 2px solid var(--primary-soft); color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.45; }
.todo-why-label { display: block; color: var(--primary-ink); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.todo-warning { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-xs); }
.todo-warning .icon { flex: 0 0 auto; margin-top: 2px; }
.todo-group {
  padding: var(--s-3); border-radius: var(--r-3); background: color-mix(in srgb, var(--primary-soft) 45%, var(--bg-surface));
  border: var(--bw) solid color-mix(in srgb, var(--primary) 18%, var(--line));
}
.todo-group-head { display: grid; gap: var(--s-2); margin: 0 0 var(--s-2); }
.todo-group-head .todo-title { margin: 0; color: var(--primary-ink); line-height: 1.35; }
.todo-group-head .todo-title .icon { margin-right: var(--s-1); vertical-align: -0.15em; }
.todo-confirm-all { width: 100%; }
.todo-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.todo-links .todo-section { margin-top: var(--s-4); }
.todo-link {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
  border: var(--bw) solid var(--line); background: var(--bg-surface); color: var(--fg); font-size: var(--fs-sm); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.todo-link > span { flex: 1 1 auto; }
.todo-link .icon { color: var(--primary); flex: 0 0 auto; }
.todo-link .chevron { color: var(--fg-subtle); }
.todo-link:hover { border-color: var(--primary); background: var(--bg-hover); text-decoration: none; color: var(--fg); }
.todo-empty a { color: var(--primary-ink); font-weight: 600; }
/* Chi arriva da un collegamento (#todo-bar dal numero «Da gestire», #todo-residue dall'accesso rapido
   dei Piani) vede il titolo intero: sul telefono la testata appiccicosa lo coprirebbe. */
#todo-bar, .todo-bar .todo-section { scroll-margin-top: var(--s-4); }
@media (max-width: 63.99rem) {
  #todo-bar, .todo-bar .todo-section { scroll-margin-top: calc(var(--shell-h, var(--topbar-h)) + var(--s-4)); }
}
/* Sul touch anche i pulsanti piccoli e i collegamenti della barra arrivano a 44 px. */
@media (pointer: coarse) {
  .todo-actions .button, .todo-more > summary, .todo-link { min-height: 2.75rem; }
}

/* Errore sotto un campo: icona e testo, collegato al campo con aria-describedby. */
.field-error { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--err-fg); font-size: var(--fs-xs); font-weight: 560; }
.form-field .field-error { color: var(--err-fg); }

/* --- 9. Guida di stile (/styleguide) ---------------------------------------------------------------- */
.sg-toc { padding: var(--s-3); }
.sg-section { scroll-margin-top: var(--s-6); }
.sg-section > h2 { margin-bottom: var(--s-2); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; }
.sg-list { margin-top: var(--s-3); }
.sg-swatches { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.sg-swatch { display: grid; gap: 2px; font-size: var(--fs-sm); }
.sg-swatch code { color: var(--fg-subtle); font-size: var(--fs-2xs); }
.sg-chip { display: block; height: 3rem; margin-bottom: var(--s-1); border-radius: var(--r-2); border: var(--bw) solid var(--line); background: var(--sw); }
.sw-primary { --sw: var(--primary); }
.sw-primary-soft { --sw: var(--primary-soft); }
.sw-hl { --sw: var(--hl); }
.sw-hl-soft { --sw: var(--hl-soft); }
.sw-page { --sw: var(--bg-page); }
.sw-surface { --sw: var(--bg-surface); }
.sw-sunken { --sw: var(--bg-sunken); }
.sw-line { --sw: var(--line-strong); }
.sw-fg { --sw: var(--fg); }
.sw-fg-muted { --sw: var(--fg-muted); }
.sw-ok { --sw: var(--ok); }
.sw-warn { --sw: var(--warn); }
.sw-err { --sw: var(--err); }
.sw-info { --sw: var(--info); }
.sg-type > * { margin: 0 0 var(--s-2); }
.sg-display { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.sg-tabular { display: flex; gap: var(--s-4); font-variant-numeric: tabular-nums; font-weight: 600; }
.sg-form { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); align-items: start; }
.sg-check { display: flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; font-weight: 450; }
.sg-rings { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-6); }
.sg-rings li { display: flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.sg-rings .progress-ring { width: 2.5rem; height: 2.5rem; }
.sg-split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 48rem) { .sg-split { grid-template-columns: 1fr 1fr; } }
.sg-skeletons { display: grid; gap: var(--s-3); }
.sg-sk-title { height: 1.75rem; width: 60%; }
.sg-sk-short { width: 40%; }
.sg-row .button.choice { width: auto; }
.sg-section > .table-wrap, .sg-section > .waitlist-tiles { margin-bottom: var(--gap); }
.sg-dialog { width: min(32rem, calc(100vw - 2rem)); }
.sg-blocks { list-style: none; display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.sg-blocks .grid-block { margin: 0; height: 5.5rem; }
.sg-inline { display: inline-block; }
.sg-panel { box-shadow: none; border: 0; padding: 0; background: none; max-width: 24rem; }
.sg-panel .panel-actions { width: 100%; }
.sg-narrow { max-width: 24rem; }

/* --- 10. Calendario multi-risorsa (/week) ------------------------------------------------------------ */
/* Impaginazione: la griglia nella colonna principale, a destra il dettaglio (appiccicoso) e «Da gestire». */
.cal-head { margin-bottom: var(--s-3); }
.week-layout { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.week-main, .week-side { min-width: 0; }
.week-side { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 72rem) {
  .week-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .week-side { position: sticky; top: var(--s-4); max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-2); scrollbar-width: thin; }
}

/* Filtri compatti in riga: si applicano da soli (calendar.js); «Mostra» resta per chi non ha script. */
.cal-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.cal-filters .form-field { flex: 1 1 9.5rem; max-width: 15rem; margin: 0; }
.cal-filters .form-field label { font-size: var(--fs-xs); color: var(--fg-muted); }
.cal-filters .form-actions { flex: 0 0 auto; }
:root.js .cal-filters #week-show { display: none; }

/* Barra: settimana precedente, oggi, successiva; il titolo; le sedute forzate. */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.week-nav { display: inline-flex; gap: var(--s-1); margin: 0; }
.week-title { flex: 1 1 18rem; margin: 0; font-size: var(--fs-lg); font-weight: 620; letter-spacing: -0.01em; }
.cal-force { margin-left: auto; }

/* Schede dei giorni: un controllo a segmenti che scorre di lato sul telefono. */
.day-tabs { margin: 0 0 var(--s-3); overflow-x: auto; scrollbar-width: none; }
.day-tabs ul {
  list-style: none; display: inline-flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; border-radius: var(--r-2);
  background: var(--bg-sunken); border: var(--bw) solid var(--line);
}
.day-tabs a {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.25rem; padding: 0 var(--s-3); white-space: nowrap;
  border: 0; border-radius: calc(var(--r-2) - 3px); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 560;
  text-decoration: none; font-variant-numeric: tabular-nums; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.day-tabs a:hover { background: var(--bg-hover); color: var(--fg); }
.day-tabs a.is-active, .day-tabs a[aria-current] { background: var(--bg-surface); color: var(--primary-ink); box-shadow: var(--sh-1); font-weight: 650; }
.day-tabs a .muted { color: var(--hl-ink); font-weight: 600; }
.day-tabs a.is-active .muted { color: var(--hl-ink); }
@media (pointer: coarse) { .day-tabs a { min-height: 2.75rem; } }
/* Giorno prima e dopo la settimana (frecce della tastiera al bordo): collegamenti nascosti. */
.day-tabs a[hidden] { display: none; }

/* Strumenti della griglia (zoom, orientamento, viste salvate): compaiono con JavaScript. */
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cal-tools[hidden] { display: none; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-2); background: var(--bg-sunken); border: var(--bw) solid var(--line); }
.segmented button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 2.25rem; min-width: 2.25rem; padding: 0 var(--s-2);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); background: transparent; border: 0;
  border-radius: calc(var(--r-2) - 3px); cursor: pointer;
}
.segmented button:hover { background: var(--bg-hover); color: var(--fg); }
.segmented button[aria-pressed="true"] { background: var(--bg-surface); color: var(--primary-ink); box-shadow: var(--sh-1); }
.segmented button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (pointer: coarse) { .segmented button { min-height: 2.75rem; min-width: 2.75rem; } }
.cal-zoom-level { display: inline-grid; place-items: center; min-width: 2.75rem; text-align: center; font-size: var(--fs-xs); font-weight: 650; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; }
.saved-views .eyebrow { margin: 0; }
.saved-views[hidden] { display: none; }
.saved-views .chip { gap: var(--s-1); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.saved-views .chip .icon { width: 0.9em; height: 0.9em; }
.saved-view-remove { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: -0.35rem; border-radius: 50%; color: var(--fg-subtle); }
.saved-view-remove:hover { background: var(--bg-sunken); color: var(--err-fg); }

/* Contenitore della griglia: scorre in entrambe le direzioni con intestazioni e ore appiccicose. */
.grid-scroll {
  --grid-time-w: 4rem; position: relative; overflow: auto; max-height: calc(100vh - 13rem); min-height: 18rem;
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1);
  scroll-padding: 4.5rem 0 0 var(--grid-time-w); scrollbar-width: thin; overscroll-behavior: contain;
}
.grid-scroll:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
/* Un'altra settimana in arrivo: la griglia vecchia si attenua e non risponde (calendar.js, inert). */
#week-content[aria-busy="true"] { cursor: progress; }
#week-content[aria-busy="true"] .grid-scroll { opacity: 0.55; transition: opacity var(--dur-2) var(--ease-out); }
.week-grid { --slot-h: 1.75rem; --grid-col-w: 8.75rem; font-size: var(--fs-sm); }
/* Al 75% le colonne restano larghe abbastanza per icona e codice del paziente interi sulla prima riga
   di un blocco da 15 minuti (codici di 11 caratteri, circa 93 px): le righe si accorciano, le colonne poco. */
:root[data-grid-zoom="1"] .week-grid { --slot-h: 1.15rem; --grid-col-w: 8.25rem; }
:root[data-grid-zoom="1"] .week-grid .block-link { padding-left: var(--s-1); padding-right: var(--s-1); }
:root[data-grid-zoom="3"] .week-grid { --slot-h: 2.5rem; --grid-col-w: 11rem; }
:root[data-grid-zoom="4"] .week-grid { --slot-h: 3.5rem; --grid-col-w: 13rem; }

.grid-head {
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid var(--line); border-left: var(--bw) solid var(--line);
  padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); font-weight: 640; line-height: 1.25; color: var(--fg);
}
.grid-head small { display: block; font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-head[data-initials] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: center; align-content: center; }
.grid-head[data-initials]::before {
  content: attr(data-initials) / ""; grid-row: span 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em;
}
.grid-head.is-today { color: var(--hl-ink); box-shadow: inset 0 -2px 0 var(--hl); }
.grid-corner { color: var(--fg-subtle); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.grid-time {
  background: var(--bg-muted); color: var(--fg-subtle); padding: 0 var(--s-2) 0 0; text-align: right;
  border-right: var(--bw) solid var(--line); border-top: var(--bw) solid transparent; font-size: var(--fs-2xs); line-height: 1; padding-top: 3px;
}
.grid-time.hour { color: var(--fg-muted); font-weight: 650; border-top-color: var(--line); }
:root[data-grid-zoom="1"] .grid-time:not(.hour) { color: transparent; }
.grid-cell { border-left: var(--bw) solid var(--line); border-top: var(--bw) solid color-mix(in srgb, var(--line) 40%, transparent); font-size: var(--fs-2xs); padding: 0 var(--s-2); }
.grid-cell.hour { border-top-color: var(--line); }
.grid-cell.grid-cover { border: 0; padding: 0; background: none; }
.state-free { background: transparent; }
.state-off { background: repeating-linear-gradient(135deg, var(--bg-surface) 0 5px, color-mix(in srgb, var(--bg-sunken) 50%, var(--bg-surface)) 5px 10px); color: var(--fg-subtle); }
.state-absent { background: repeating-linear-gradient(135deg, var(--warn-bg) 0 6px, color-mix(in srgb, var(--warn) 16%, var(--bg-surface)) 6px 12px); color: var(--warn-fg); font-weight: 650; }
.state-closed { background: repeating-linear-gradient(135deg, var(--err-bg) 0 6px, color-mix(in srgb, var(--err) 14%, var(--bg-surface)) 6px 12px); color: var(--err-fg); font-weight: 650; }
.grid-cell.state-off, .grid-cell.state-absent, .grid-cell.state-closed { padding-top: 3px; }

/* Stati dei blocchi (services/week.py, BlockStatus.key) sui token del design: tinta, icona ed etichetta. */
.block-scheduled { --c: var(--st-scheduled); --c-bg: var(--st-scheduled-bg); --c-fg: var(--st-scheduled-fg); }
.block-done { --c: var(--st-done); --c-bg: var(--st-done-bg); --c-fg: var(--st-done-fg); }
.block-no-show { --c: var(--st-noshow); --c-bg: var(--st-noshow-bg); --c-fg: var(--st-noshow-fg); }
.block-recovery { --c: var(--st-recovery); --c-bg: var(--st-recovery-bg); --c-fg: var(--st-recovery-fg); }
.block-substitution { --c: var(--st-substitution); --c-bg: var(--st-substitution-bg); --c-fg: var(--st-substitution-fg); }
.block-hold { --c: var(--st-proposed); --c-bg: var(--st-proposed-bg); --c-fg: var(--st-proposed-fg); }
.block-elsewhere, .block-other, .block-expired, .block-rejected { --c: var(--st-cancelled); --c-bg: var(--bg-muted); --c-fg: var(--fg-muted); }
.grid-block, .legend-swatch, .cal-session, .badge[class*="block-"] {
  background: var(--c-bg, var(--bg-muted)); color: var(--c-fg, var(--fg)); border-color: color-mix(in srgb, var(--c, var(--line-strong)) 35%, transparent);
}
.grid-block {
  position: relative; z-index: 1; margin: 1px 3px 2px; border: var(--bw) solid color-mix(in srgb, var(--c) 30%, transparent); border-left: 3px solid var(--c);
  border-radius: var(--r-1); overflow: hidden; line-height: 1.3; box-shadow: var(--sh-0);
  transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.grid-block:hover { z-index: 3; box-shadow: var(--sh-2); }
.grid-block:focus-within { z-index: 4; outline: 2px solid var(--line-focus); outline-offset: 1px; }
.grid-block.is-selected { z-index: 3; box-shadow: 0 0 0 2px var(--primary), var(--sh-2); }
/* La seduta appena spostata: anello dell'esito positivo finché si resta sulla pagina (con il testo
   «appena spostata qui» per i lettori di schermo e il messaggio in alto che dice dove è finita). */
.grid-block.is-moved { z-index: 3; box-shadow: 0 0 0 2px var(--ok), 0 0 0 5px color-mix(in srgb, var(--ok) 25%, transparent), var(--sh-2); }
.grid-block.is-moved.is-selected { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px color-mix(in srgb, var(--ok) 35%, transparent), var(--sh-2); }
.block-hold, .grid-block.block-hold { border-style: dashed; border-left-style: solid; }
.grid-block.block-elsewhere, .grid-block.block-expired, .grid-block.block-rejected { border-style: dotted; border-left-style: solid; }
.grid-block.is-autonomous { border-left-style: double; border-left-width: 5px; }
.block-link { display: block; height: 100%; padding: 3px var(--s-2); color: inherit; text-decoration: none; overflow: hidden; }
a.block-link:hover { text-decoration: none; }
a.block-link:hover .block-code { text-decoration: underline; text-underline-offset: 2px; }
a.block-link:focus-visible { outline: none; box-shadow: none; }
.block-link > span:not(.sr-only) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Il codice del paziente non si tronca con i puntini dopo poche lettere («C…»): se lo spazio non basta
   (timeline) va a capo e resta leggibile per intero. Nelle corsie affiancate in colonne, più strette di
   un codice, il taglio si vede («…») e l'etichetta al passaggio mostra il codice intero (più sotto). */
.block-link > span.block-code, .block-head > span.block-code { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.block-time { font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.9; }
.block-code { font-size: var(--fs-xs); font-weight: 720; color: var(--fg); letter-spacing: 0.01em; }
.block-line { font-size: var(--fs-2xs); opacity: 0.88; }
.block-status { font-size: var(--fs-2xs); font-weight: 650; }
.block-status > span[aria-hidden="true"], .block-icon, .block-full-icon, .legend-swatch {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; vertical-align: -0.2em;
  background: var(--c); color: var(--bg-surface); font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.block-autonomous { font-size: var(--fs-2xs); font-weight: 650; }
/* Blocchi fino a mezz'ora: icona e codice sulla prima riga, l'ora accanto se c'è spazio, altrimenti a
   capo (in un blocco da 15 minuti la riga in più resta nascosta: l'ora è quella della riga della griglia
   e i lettori di schermo la leggono comunque). */
.grid-block.short .block-link { padding-top: 1px; padding-bottom: 0; line-height: 1.2; }
.grid-block.short .block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 3px; white-space: normal; text-overflow: clip; }
.grid-block.short .block-head .block-icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
.grid-block.short .block-head .block-code { flex: 0 1 auto; min-width: 0; }
.grid-block.short .block-head .block-time { flex: 0 0 auto; }
/* Al 75% un blocco da mezz'ora ha posto per due righe: riga, stanza e «Autonoma» escono dalla vista (si
   leggono nel dettaglio) ma restano per i lettori di schermo, con la tecnica di .sr-only e non con
   display: none: il nome accessibile del blocco non cambia con lo zoom. */
:root[data-grid-zoom="1"]:not([data-grid-axis="x"]) .grid-block.short :is(.block-line, .block-autonomous) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Al 75% un blocco da 15 minuti ha circa 14 px utili: icona più piccola e un rigo senza interlinea. */
:root[data-grid-zoom="1"]:not([data-grid-axis="x"]) .grid-block.short.len-1 { margin-bottom: 1px; }
:root[data-grid-zoom="1"]:not([data-grid-axis="x"]) .grid-block.short.len-1 .block-link { padding-top: 0; line-height: 1.1; }
:root[data-grid-zoom="1"]:not([data-grid-axis="x"]) .grid-block.short.len-1 .block-icon { width: 0.8rem; height: 0.8rem; font-size: 0.58rem; }
.grid-group { position: relative; z-index: 1; }
/* Corsie affiancate in colonne (D-098): una corsia può essere larga 40-65 px, meno di un codice di 11
   caratteri. Il codice viene prima di tutto: padding ridotto, carattere più piccolo, spezzato dove serve
   (prima al trattino) sulle righe che il blocco ha; se non bastano, l'ultima riga finisce con «…»
   (line-clamp): il taglio si vede, mai un pezzo di codice che sembri intero. Nei blocchi brevi icona e
   codice scorrono insieme su --lane-lines righe (per durata e zoom), nei più lunghi il codice ha tre
   righe. L'ora, che è quella della riga della griglia, resta per i lettori di schermo e nell'etichetta
   al passaggio (block-full, qui sotto). */
:root:not([data-grid-axis="x"]) .grid-group .grid-block.short { --lane-lines: 1; }
:root:not([data-grid-axis="x"]) .grid-group .grid-block.short.len-2 { --lane-lines: 3; }
:root[data-grid-zoom="1"]:not([data-grid-axis="x"]) .grid-group .grid-block.short.len-2 { --lane-lines: 2; }
:root[data-grid-zoom="3"]:not([data-grid-axis="x"]) .grid-group .grid-block.short { --lane-lines: 2; }
:root[data-grid-zoom="3"]:not([data-grid-axis="x"]) .grid-group .grid-block.short.len-2 { --lane-lines: 5; }
:root[data-grid-zoom="4"]:not([data-grid-axis="x"]) .grid-group .grid-block.short { --lane-lines: 3; }
:root[data-grid-zoom="4"]:not([data-grid-axis="x"]) .grid-group .grid-block.short.len-2 { --lane-lines: 7; }
:root:not([data-grid-axis="x"]) .grid-group .block-link { padding-left: 3px; padding-right: 2px; }
:root:not([data-grid-axis="x"]) .grid-group .grid-block.short .block-head,
:root:not([data-grid-axis="x"]) .grid-group .grid-block:not(.short) .block-link > .block-code {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lane-lines, 3); line-clamp: var(--lane-lines, 3);
  overflow: hidden; font-size: var(--fs-2xs); line-height: 1.2;
}
:root:not([data-grid-axis="x"]) .grid-group .grid-block.short .block-head .block-icon { width: 0.8rem; height: 0.8rem; font-size: 0.58rem; vertical-align: -0.12em; }
:root:not([data-grid-axis="x"]) .grid-group .block-code { font-size: var(--fs-2xs); letter-spacing: 0; }
:root:not([data-grid-axis="x"]) .grid-group .block-link .block-time {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Nelle corsie, al passaggio del puntatore e con il focus, un'etichetta sopra il blocco mostra icona,
   codice intero e ora (block-full, aria-hidden: i lettori di schermo leggono il nome del collegamento).
   Non riceve il puntatore: il clic e il passaggio alla corsia accanto arrivano ai blocchi sotto. Nell'ultima
   corsia si apre verso sinistra, per restare nella colonna. Sul touch il tocco apre il pannello, che
   mostra il codice intero. */
.block-full { display: none; }
.grid-group:has(> .grid-block:is(:hover, :focus-within)) { z-index: 4; }
.grid-group > .grid-block:is(:hover, :focus-within) { overflow: visible; }
.grid-group > .grid-block:is(:hover, :focus-within) > .block-full {
  display: block; position: absolute; z-index: 1; top: -1px; left: -3px; width: max-content; max-width: 16rem;
  padding: 1px var(--s-1) 1px 3px; border: var(--bw) solid var(--c); border-left: 3px solid var(--c); border-radius: var(--r-1);
  background: var(--bg-surface); color: var(--fg); box-shadow: var(--sh-2); pointer-events: none;
  font-size: var(--fs-xs); line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
}
:root:not([data-grid-axis="x"]) .grid-group.lanes-2 > .lane-1 > .block-full,
:root:not([data-grid-axis="x"]) .grid-group.lanes-3 > .lane-2 > .block-full { left: auto; right: -1px; }
.block-full-icon { width: 0.95rem; height: 0.95rem; }
.block-full-code { font-weight: 720; letter-spacing: 0.01em; }
.block-full-time { font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-muted); }

/* Legenda e aiuto sotto la griglia. */
.cal-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-6); margin: var(--s-3) 0; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--fg-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-1); }
.legend-swatch { border: 0; }
.legend-swatch.state-off, .legend-swatch.state-absent, .legend-swatch.state-closed { width: 1.4rem; height: 1rem; border-radius: 3px; border: var(--bw) solid var(--line); }
.grid-help { display: flex; gap: var(--s-2); align-items: flex-start; max-width: 40rem; margin: 0; font-size: var(--fs-xs); }
.grid-help .icon { flex: 0 0 auto; margin-top: 2px; }
.worksheet-links { margin-top: var(--s-2); }

/* Trascinamento: il blocco di partenza sbiadisce, l'anteprima mostra dove atterra (agganciata ai quarti
   d'ora) e l'esito della verifica del server: libero, in verifica o in conflitto, sempre a parole. */
.can-move .grid-block [draggable="true"] { cursor: grab; }
.grid-block.is-dragging { opacity: 0.4; }
.is-dragging-grid .grid-cell[data-drop-date] { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.is-dragging-grid .grid-cell:not([data-drop-date]):not(.grid-cover) { cursor: not-allowed; }
.grid-cell.drop-over { outline: 0; background: var(--primary-soft); }
.drop-preview {
  position: relative; z-index: 6; margin: 1px 3px 2px; padding: 3px var(--s-2); border-radius: var(--r-1); pointer-events: none;
  border: 2px dashed var(--primary); background: color-mix(in srgb, var(--primary-soft) 80%, transparent); color: var(--primary-ink);
  font-size: var(--fs-2xs); font-weight: 650; line-height: 1.3; overflow: hidden; box-shadow: var(--sh-2);
  animation: pop-in var(--dur-1) var(--ease-out);
}
.drop-preview .icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.drop-preview.is-ok { border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--ok-bg) 90%, transparent); color: var(--ok-fg); }
.drop-preview.is-conflict {
  border-style: solid; border-color: var(--err); color: var(--err-fg);
  background: repeating-linear-gradient(135deg, var(--err-bg) 0 6px, color-mix(in srgb, var(--err) 12%, var(--bg-surface)) 6px 12px);
}
.drop-preview.is-checking { animation: pulse 1s var(--ease-in-out) infinite; }
.drop-preview span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Linea «adesso»: un elemento della griglia sulla riga dell'ora attuale, spostato della frazione di quarto. */
.now-marker { position: relative; z-index: 5; height: 0; align-self: start; pointer-events: none; }
.now-marker::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--slot-h) * var(--now-frac, 0)); height: 2px; margin-top: -1px;
  background: var(--hl); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-surface) 70%, transparent);
}
.now-marker::after {
  content: ""; position: absolute; left: -5px; top: calc(var(--slot-h) * var(--now-frac, 0)); width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--hl);
}
.now-pill {
  position: sticky; left: 0; z-index: 6; align-self: start; justify-self: end; height: 0; pointer-events: none;
}
.now-pill span {
  position: absolute; right: 4px; top: calc(var(--slot-h) * var(--now-frac, 0)); transform: translateY(-50%);
  padding: 1px 6px; border-radius: var(--r-pill); background: var(--hl); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Timeline orizzontale (data-grid-axis="x"): un operatore (o un giorno) per riga, il tempo in orizzontale.
   Le posizioni scambiate sono in grid.css; qui misure, intestazioni appiccicose e linea verticale. */
:root[data-grid-axis="x"] .week-grid {
  --slot-w: 2.75rem; --grid-head-w: 11.5rem; --lane-h: 4.5rem;
  grid-template-columns: var(--grid-head-w); grid-template-rows: auto; grid-auto-columns: var(--slot-w);
  grid-auto-rows: minmax(var(--lane-h), auto); width: max-content; min-width: 100%;
}
/* Al 75% mezz'ora resta larga quanto la parte dopo il trattino di un codice («DEMO0026»): il codice va a
   capo solo al trattino, mai a metà delle cifre. */
:root[data-grid-axis="x"][data-grid-zoom="1"] .week-grid { --slot-w: 2.5rem; }
:root[data-grid-axis="x"][data-grid-zoom="3"] .week-grid { --slot-w: 4rem; }
:root[data-grid-axis="x"][data-grid-zoom="4"] .week-grid { --slot-w: 5.5rem; }
:root[data-grid-axis="x"] .week-grid .grid-head { grid-column: 1; top: auto; left: 0; border-left: 0; border-top: var(--bw) solid var(--line); border-right: var(--bw) solid var(--line); border-bottom: 0; z-index: 3; }
:root[data-grid-axis="x"] .week-grid .grid-corner { grid-row: 1; top: 0; z-index: 5; border-top: 0; }
:root[data-grid-axis="x"] .week-grid .grid-time {
  grid-row: 1; position: sticky; top: 0; left: auto; z-index: 2; text-align: left; padding: var(--s-2) 0 var(--s-2) 4px;
  border-right: 0; border-top: 0; border-left: var(--bw) solid transparent; border-bottom: var(--bw) solid var(--line); white-space: nowrap;
}
:root[data-grid-axis="x"] .week-grid .grid-time.hour { border-left-color: var(--line); }
:root[data-grid-axis="x"] .week-grid .grid-cell { border-left: var(--bw) solid color-mix(in srgb, var(--line) 40%, transparent); border-top: var(--bw) solid var(--line); padding: var(--s-1); }
:root[data-grid-axis="x"] .week-grid .grid-cell.hour { border-left-color: var(--line); }
:root[data-grid-axis="x"] .week-grid .grid-group { grid-auto-rows: auto; grid-auto-columns: var(--slot-w); }
:root[data-grid-axis="x"] .week-grid .grid-block { margin: 3px 1px; border-left-width: 1px; border-top: 3px solid var(--c); }
:root[data-grid-axis="x"] .week-grid .grid-block.short .block-link { padding-left: var(--s-1); padding-right: var(--s-1); }
:root[data-grid-axis="x"][data-grid-zoom="1"] .week-grid .grid-block.short .block-code { font-size: var(--fs-2xs); }
:root[data-grid-axis="x"] .week-grid .grid-block.is-autonomous { border-left-width: 1px; border-top-style: double; border-top-width: 5px; }
:root[data-grid-axis="x"] .week-grid .drop-preview { margin: 3px 1px; }
:root[data-grid-axis="x"] .grid-scroll { scroll-padding: 2.5rem 0 0 11.5rem; }
:root[data-grid-axis="x"] .now-marker { height: auto; width: 0; align-self: stretch; justify-self: start; }
:root[data-grid-axis="x"] .now-marker::before { left: calc(var(--slot-w) * var(--now-frac, 0)); right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; }
:root[data-grid-axis="x"] .now-marker::after { left: calc(var(--slot-w) * var(--now-frac, 0)); top: -5px; margin: 0 0 0 -5px; }
:root[data-grid-axis="x"] .now-pill { top: 0; left: auto; justify-self: start; align-self: end; height: auto; width: 0; }
:root[data-grid-axis="x"] .now-pill span { right: auto; left: calc(var(--slot-w) * var(--now-frac, 0)); top: auto; bottom: 2px; transform: translateX(-50%); }

/* Pannello della seduta: testata con stato, azioni in alto, dettagli in due colonne compatte. */
.appointment-panel { padding: var(--s-4); margin: 0; scroll-margin-top: var(--s-4); }
.appointment-panel:has(.panel-hint) { padding: var(--s-3) var(--s-4); box-shadow: none; background: var(--bg-muted); border-style: dashed; }
.appointment-panel:has(.panel-hint) h2 { font-size: var(--fs-sm); margin: 0 0 var(--s-1); color: var(--fg-muted); }
.panel-hint { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); }
.panel-hint .icon { flex: 0 0 auto; margin-top: 3px; }
.appointment-panel > h2, .panel-top h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-1); padding-right: var(--s-8); }
.appointment-panel.htmx-request { opacity: 0.7; transition: opacity var(--dur-1) var(--ease-out); }
.appointment-panel { position: relative; }
.panel-top { margin: 0 0 var(--s-3); }
.panel-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.panel-close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; }
.appointment-panel .panel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-4); }
.appointment-panel .panel-actions > * { min-width: 0; margin: 0; }
.appointment-panel .panel-actions .button { width: 100%; justify-content: flex-start; padding: 0 var(--s-3); }
.appointment-panel .panel-actions .panel-primary { grid-column: 1 / -1; justify-content: center; }
.kbd-hint {
  margin-left: auto; padding: 0 0.3rem; min-width: 1.15rem; border-radius: 4px; border: var(--bw) solid currentColor;
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 650; line-height: 1.35; text-align: center; opacity: 0.55; box-shadow: none; background: transparent; color: inherit;
}
.panel-primary .kbd-hint { margin-left: var(--s-2); }
:root:not(.js) .kbd-hint { display: none; }
@media (pointer: coarse) { .kbd-hint { display: none; } }
.appointment-panel .dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-sm); }
.appointment-panel .dl dt { font-size: var(--fs-xs); padding-top: 2px; }
.appointment-panel .dl dd { margin: 0; overflow-wrap: anywhere; }
/* «Operatore assente?» per chi non registra le assenze (events/_absence_note.html): il tasto O ci porta
   il focus, che si vede anche quando arriva da uno script dopo un clic. */
.absence-note { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.absence-note .icon { margin-top: 3px; }
.absence-note:focus { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.panel-more { margin: var(--s-3) 0 0; }
.panel-more .button-link { padding-left: 0; gap: var(--s-1); }
.panel-history { margin-top: var(--s-2); border-top: var(--bw) solid var(--line); }
.panel-history > summary {
  display: flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; cursor: pointer; font-weight: 620; font-size: var(--fs-sm); list-style: none;
}
.panel-history > summary::-webkit-details-marker { display: none; }
.panel-history[open] > summary { color: var(--primary-ink); }
.appointment-panel .table-wrap { box-shadow: none; }
.appointment-panel .form-grid { grid-template-columns: minmax(0, 1fr); }

/* Sotto i 72rem il dettaglio non ha colonna: diventa un foglio dal basso (telefono) o una scheda
   fluttuante in basso a destra (tablet), con «Chiudi» ed Esc; vuoto non occupa spazio. */
@media (max-width: 71.99rem) {
  .appointment-panel:has(.panel-hint) { display: none; }
  .appointment-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: min(80vh, 44rem); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0; box-shadow: 0 -12px 40px rgb(0 0 0 / 0.2);
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); animation: sheet-up var(--dur-3) var(--ease-out);
  }
  .appointment-panel::before {
    content: ""; display: block; width: 2.5rem; height: 4px; margin: calc(var(--s-1) * -1) auto var(--s-3); border-radius: 2px; background: var(--line-strong);
  }
}
@media (min-width: 40rem) and (max-width: 71.99rem) {
  .appointment-panel { left: auto; right: var(--s-4); bottom: var(--s-4); width: 27rem; border-radius: var(--r-4); border-bottom: var(--bw) solid var(--line); }
  .appointment-panel::before { content: none; }
}
/* Il campione della guida di stile usa le classi del pannello solo per i pulsanti: resta nella pagina. */
.appointment-panel.sg-panel { position: static; max-height: none; overflow: visible; margin: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; padding: 0; animation: none; }
.appointment-panel.sg-panel::before { content: none; }
@media (max-width: 39.99rem) {
  .cal-tools [data-cal-save], .cal-tools .segmented:first-child { display: none; }
  .day-tabs ul { flex-wrap: nowrap; }
  .week-title { font-size: var(--fs-base); }
}

/* --- 11. Paziente e piano ------------------------------------------------------------------------------ */
/* Testata del piano: titolo, stato e scadenza a sinistra; avanzamento (anello e barra) a destra. */
.plan-hero {
  display: grid; gap: var(--s-4) var(--s-6); align-items: center; margin: 0 0 var(--s-4); padding: var(--s-5);
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-4); box-shadow: var(--sh-1);
}
@media (min-width: 56rem) { .plan-hero { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); } }
.plan-hero h1 { margin: 0 0 var(--s-2); }
.plan-hero .breadcrumb { margin: 0 0 var(--s-1); }
.plan-summary { margin: 0 0 var(--s-2); color: var(--fg-muted); }
.plan-hero-meta { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.plan-hero-meta .icon { margin-right: var(--s-1); vertical-align: -0.15em; }
.plan-progress { display: flex; align-items: center; gap: var(--s-4); }
.plan-ring { position: relative; flex: 0 0 auto; width: 5.5rem; height: 5.5rem; }
.plan-ring .progress-ring { width: 100%; height: 100%; }
.plan-ring .ring-track, .plan-ring .ring-value { stroke-width: 3.5; }
.plan-ring-value {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg);
}
.plan-progress-body { flex: 1 1 auto; min-width: 0; }
.plan-bar { display: block; width: 100%; height: 0.6rem; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; }
.plan-bar .seg-done { fill: var(--st-done); }
.plan-bar .seg-upcoming { fill: var(--st-scheduled); }
.plan-bar .seg-pending { fill: var(--warn); }
.plan-progress-legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 2px var(--s-3); margin: var(--s-2) 0 0; padding: 0; font-size: var(--fs-xs); color: var(--fg-muted); }
.plan-progress-legend li { display: flex; align-items: center; gap: var(--s-1); }
.plan-progress-legend li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--bg-sunken); border: var(--bw) solid var(--line-strong); }
.plan-progress-legend .seg-done::before { background: var(--st-done); border-color: transparent; }
.plan-progress-legend .seg-upcoming::before { background: var(--st-scheduled); border-color: transparent; }
.plan-progress-legend .seg-pending::before { background: var(--warn); border-color: transparent; }
.plan-progress-legend strong { color: var(--fg); font-variant-numeric: tabular-nums; }

/* Indice delle sezioni del piano e passi del wizard: appiccicosi in cima al contenuto, scorrono di lato
   sul telefono. */
.section-nav, .wizard-nav {
  position: sticky; top: 0; z-index: 20; margin: 0 calc(var(--s-2) * -1) var(--s-4); padding: var(--s-2);
  background: color-mix(in srgb, var(--bg-page) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow-x: auto; scrollbar-width: none;
}
.section-nav .chips, .wizard-nav ol { flex-wrap: nowrap; margin: 0; }
.section-nav .chip, .wizard-nav a { white-space: nowrap; }
main [id$="-heading"], .wizard-step { scroll-margin-top: 4.5rem; }
/* Telefono e tablet: la testata resta fissa in alto, quindi indice e passi si fermano subito sotto di
   lei, dove si toccano, e i titoli raggiunti dall'indice non finiscono sotto nessuno dei due.
   --shell-h è l'altezza vera della testata (app.js; il nome della struttura può andare su due righe);
   senza JavaScript vale l'altezza prevista. */
@media (max-width: 63.99rem) {
  .section-nav, .wizard-nav { top: var(--shell-h, var(--topbar-h)); }
  main [id$="-heading"], .wizard-step { scroll-margin-top: calc(var(--shell-h, var(--topbar-h)) + 4.5rem); }
}

/* «Sospendi il piano» nel dettaglio: il riquadro si apre da un pulsante con l'icona e la freccia che
   gira quando è aperto. */
.disclosure > summary.button { display: inline-flex; width: auto; list-style: none; }
.disclosure > summary.button::-webkit-details-marker { display: none; }
.disclosure-chevron { transition: transform var(--dur-2) var(--ease-out); }
.disclosure[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.suspend-disclosure[open] { padding: var(--s-3) var(--s-4) var(--s-1); border: var(--bw) solid var(--line); border-radius: var(--r-3); }
.suspend-effects > p { margin-top: 0; }

/* Modifica della testata richiusa sotto i dati. */
.plan-edit { margin-top: var(--s-4); border-top: var(--bw) solid var(--line); }
.plan-edit > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; cursor: pointer; list-style: none; }
.plan-edit > summary::-webkit-details-marker { display: none; }
.plan-edit > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.plan-edit[open] > summary::before { content: "−"; }
.plan-edit > summary h3 { margin: 0; font-size: var(--fs-sm); color: var(--primary-ink); }

/* Dati in due colonne compatte sul desktop. */
@media (min-width: 64rem) {
  section[aria-labelledby="header-heading"] > .dl, section[aria-labelledby="data-heading"] > .dl {
    grid-template-columns: 11rem minmax(0, 1fr) 11rem minmax(0, 1fr);
  }
}

/* Calendario del piano per settimane: sedute come piccole card con la tinta dello stato. */
.cal-session { border: var(--bw) solid color-mix(in srgb, var(--c, var(--line-strong)) 30%, transparent); border-left: 3px solid var(--c, var(--line-strong)); border-radius: var(--r-1); padding: var(--s-1) var(--s-2); }
.cal-session .cal-status > span[aria-hidden="true"] {
  display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c); color: var(--bg-surface); font-size: 0.65rem; font-weight: 800;
}
.plan-calendar .cal-session { overflow-wrap: anywhere; }
/* Lo stato porta al dettaglio della seduta: il collegamento copre tutta la scheda (bersaglio grande,
   prima 59 per 16 px); il «Perché» delle proposte resta sopra e si apre da solo. */
.cal-session.has-link { position: relative; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.cal-session.has-link:hover { border-color: var(--c, var(--line-strong)); box-shadow: var(--sh-1); }
.cal-session .cal-status a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cal-session .cal-why { position: relative; z-index: 1; }
/* La tabella entra nel riquadro accanto alla barra «Da gestire»: colonne fisse, la settimana stretta e i
   giorni uguali (sabato e domenica solo se hanno sedute). Con sette giorni in un riquadro stretto
   scorre di lato: l'avviso sopra la tabella (app.js) e l'ombra sul bordo che continua lo dicono. */
@media (min-width: 40rem) {
  .plan-calendar { table-layout: fixed; }
  .plan-calendar th.cal-week { width: 7rem; white-space: normal; }
  .plan-calendar .cal-count { display: block; }
  .plan-calendar td.cal-day { min-width: 0; padding: var(--s-2) var(--s-1); }
  .plan-calendar.days-5 { min-width: 42rem; }
  .plan-calendar.days-6 { min-width: 49rem; }
  .plan-calendar.days-7 { min-width: 56rem; }
}
.scroll-hint { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); }
.cal-wrap {
  background:
    linear-gradient(to right, var(--bg-surface) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--bg-surface) 30%, transparent) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.18), transparent) left center / 0.8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.18), transparent) right center / 0.8rem 100% no-repeat scroll,
    var(--bg-surface);
}

/* Scheda del paziente: testata con codice e stato, piani in evidenza. */
.patient-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-4); }
.patient-avatar {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-3); flex: 0 0 auto;
  background: var(--primary-soft); color: var(--primary-ink); box-shadow: var(--sh-1);
}
.patient-avatar .icon { width: 1.6rem; height: 1.6rem; }
.patient-hero h1 { margin: 0; }
.patient-hero .breadcrumb { margin: 0 0 var(--s-1); }
.patient-hero-actions { margin-left: auto; }
.plan-cards { list-style: none; display: grid; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.plan-card {
  display: grid; gap: var(--s-1); height: 100%; padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--bg-surface); color: var(--fg); text-decoration: none; box-shadow: var(--sh-0);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.plan-card:hover { border-color: var(--primary); box-shadow: var(--sh-2); transform: translateY(-1px); color: var(--fg); text-decoration: none; }
.plan-card-type { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 650; }
.plan-card-meta { color: var(--fg-muted); font-size: var(--fs-xs); }
.plan-card-residual { font-size: var(--fs-sm); }
.plan-card-residual strong { font-family: var(--font-display); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.avail-grid td, .avail-grid th { text-align: center; }
.avail-grid tbody th { text-align: left; }
.avail-grid .badge.ok { min-width: 2.25rem; justify-content: center; }

/* Wizard del piano, passo 3: una scheda per riga con le etichette visibili; i campi vanno a capo dentro
   il riquadro a ogni larghezza (niente scorrimento di lato). */
.plan-lines { display: grid; gap: var(--s-3); }
.plan-line {
  display: grid; gap: var(--s-3); min-width: 0; margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-3); border: var(--bw) solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--r-3); background: var(--bg-surface); box-shadow: var(--sh-0);
}
.plan-line-title { padding: 0 var(--s-1); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 650; }
.plan-line-grid, .plan-line-subgrid, .plan-line-groups { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* Etichette su due righe (impegnativa): i campi restano allineati in basso. */
.plan-line-subgrid { align-items: end; }
.plan-line-group { min-width: 0; padding: var(--s-2) var(--s-3) var(--s-3); border: var(--bw) dashed var(--line-strong); border-radius: var(--r-2); }
.plan-line-group > legend, .plan-line-options > legend { padding: 0 var(--s-1); margin-bottom: var(--s-1); }
.plan-line-checks { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.plan-line-actions { display: flex; justify-content: flex-end; margin-top: calc(var(--s-2) * -1); }
@media (min-width: 40rem) {
  .plan-line-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .plan-line-subgrid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .plan-line-wide { grid-column: span 2; }
}
@media (min-width: 64rem) { .plan-line-groups { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } }
/* Schermi larghi: figura, trattamento, ruolo e i due conteggi in una sola fila. */
@media (min-width: 80rem) {
  .plan-line-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.2fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr); }
  .plan-line-main .plan-line-wide { grid-column: auto; }
}
/* Passo 4: durata delle sedute riga per riga, dalle regole di durata. */
.check-durations { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-2); background: var(--bg-muted); }
.check-subtitle { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.check-duration-list { margin: 0 0 var(--s-2); padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.check-durations > p:last-child { margin: 0; font-size: var(--fs-xs); }
/* Caselle e scelte del wizard: 24 px, con l'etichetta che le avvolge alta 44 px (bersaglio di tocco). */
.wizard input[type="checkbox"], .wizard input[type="radio"] { width: 1.5rem; height: 1.5rem; }
.wizard .checkbox-list label { min-height: 2.75rem; }

/* --- 12. Assenze e liste d'attesa --------------------------------------------------------------------- */
.absence-effect {
  display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3); background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-sm); line-height: 1.5;
}
.absence-effect .icon { flex: 0 0 auto; margin-top: 3px; }
.absence-effect a { color: inherit; font-weight: 650; }
.who-avatar.sm { display: inline-grid; grid-row: auto; width: 1.75rem; height: 1.75rem; margin-right: var(--s-2); font-size: var(--fs-2xs); vertical-align: middle; }
.absence-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.absence-type { min-height: 1.6rem; font-size: var(--fs-xs); }
.row-actions { gap: var(--s-2); }
.row-actions form { gap: var(--s-2); }
.row-actions input { background: var(--bg-surface); border-color: var(--line-strong); border-radius: var(--r-2); }
.row-actions .decision.reject { padding-top: var(--s-2); border-top: var(--bw) dashed var(--line); }
section > h2 .count-pill { vertical-align: 0.2em; }

/* Liste d'attesa dei piani (N1, /plans/waiting) e accessi del Planner: un riquadro per lista, il residuo
   dei piani in corso per primo. Dall'elenco dei piani resta un collegamento con l'icona. */
.plans-waitlists-link a { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; }
.planner-todo { margin-top: var(--s-4); }
.waitlists { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.waitlists-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.waitlists-head h2 { margin: 0; font-size: var(--fs-lg); }
.waitlists-head p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.waitlist-tiles { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.waitlist-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; height: 100%;
  padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-3); background: var(--bg-surface); color: var(--fg);
  text-decoration: none; box-shadow: var(--sh-0); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.waitlist-tile:hover { border-color: var(--primary); box-shadow: var(--sh-2); color: var(--fg); text-decoration: none; }
.waitlist-tile[aria-current] { border-color: var(--primary); background: var(--primary-soft); }
.waitlist-tile .icon { grid-row: span 2; width: 1.4rem; height: 1.4rem; color: var(--primary); }
.waitlist-name { font-weight: 650; font-size: var(--fs-sm); }
.waitlist-meta { color: var(--fg-muted); font-size: var(--fs-xs); }
.waitlist-tile.is-priority { border-color: color-mix(in srgb, var(--hl) 40%, var(--line)); background: color-mix(in srgb, var(--hl-soft) 50%, var(--bg-surface)); }
.waitlist-tile.is-priority .icon { color: var(--hl-ink); }
/* Conteggio della lista accanto al nome; senza residuo il riquadro non è un collegamento e lo dice. */
.waitlist-count {
  display: inline-grid; place-items: center; min-width: 1.5rem; margin-left: var(--s-1); padding: 0 0.4rem; border-radius: var(--r-pill);
  background: var(--hl-soft); color: var(--hl-ink); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
p.waitlist-tile { margin: 0; box-shadow: none; }
.waitlist-tile.is-empty { border-style: dashed; background: var(--bg-muted); }
.waitlist-tile.is-empty .icon { color: var(--ok); }
.waitlist-tile.is-empty .waitlist-count { background: var(--bg-sunken); color: var(--fg-muted); }

/* «Pronto» o «Manca: …» sotto lo stato dei piani in lista d'attesa: icona e testo, mai il solo colore. */
.readiness { display: flex; align-items: flex-start; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.readiness .icon { flex: 0 0 auto; margin-top: 1px; }
.readiness.is-ready { color: var(--ok-fg); }
.readiness.is-ready .icon { color: var(--ok); }
.readiness.is-missing { color: var(--warn-fg); }

/* Elenchi Piani e Pazienti sul telefono: ogni riga diventa una scheda, la prima cella (codice) in testa
   e le altre con l'etichetta della colonna (data-label) su due colonne. Niente scorrimento di lato. */
@media (max-width: 39.99rem) {
  .table.list-cards thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table.list-cards, .table.list-cards tbody { display: block; width: 100%; }
  .table.list-cards caption { display: block; text-align: left; }
  .table.list-cards tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--row-pad-x); border-top: var(--bw) solid var(--line);
  }
  .table.list-cards tbody tr:hover { background: transparent; }
  .table.list-cards td { display: block; min-width: 0; padding: 0; border-top: 0; overflow-wrap: anywhere; }
  .table.list-cards td.num { text-align: left; }
  .table.list-cards td.card-head, .table.list-cards td.card-wide { grid-column: 1 / -1; }
  .table.list-cards td.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-weight: 650; }
  .table.list-cards td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; color: var(--fg-subtle); font-size: var(--fs-2xs);
    font-weight: 650; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  }
  /* Piani: percorso e stato (con «Pronto» o «Manca») subito sotto il codice e il tipo. */
  .table.list-cards td.card-head { order: -3; }
  .table.list-cards td.card-wide { order: -2; }
  .table.list-cards td.card-key { order: -1; }
  /* Pazienti: quattro dati brevi, una sola riga sotto il codice. */
  .table.patient-list tbody tr { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

/* Filtri degli elenchi: una riga compatta di campi che va a capo, i pulsanti in fondo alla riga. */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3);
  background: var(--bg-surface); border: var(--bw) solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-0);
}
.filters .form-field { flex: 1 1 10rem; max-width: 16rem; margin: 0; }
.filters .form-field label { font-size: var(--fs-xs); color: var(--fg-muted); }
.filters .form-field label + input, .filters .form-field label + select { margin-bottom: 0; }
.filters .form-field > label:not(:first-child) { margin-top: var(--s-2); }
.filters .form-actions { flex: 0 0 auto; display: flex; gap: var(--s-2); margin: 0; }
.cal-filters { padding: 0; background: none; border: 0; box-shadow: none; }
/* I codici dei pazienti e dei piani non vanno a capo nelle tabelle. */
.table a[href^="/plans/"], .table a[href^="/patients/"], .table a[href^="/proposals/"] { white-space: nowrap; }

/* --- 13. Impostazioni ---------------------------------------------------------------------------------- */
.settings-filter {
  display: flex; align-items: center; gap: var(--s-2); min-width: min(100%, 18rem); padding: 0 var(--s-3);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-surface);
}
.settings-filter[hidden] { display: none; }
.settings-filter .icon { color: var(--fg-subtle); }
.settings-filter input { border: 0; box-shadow: none; padding: 0; background: transparent; }
.settings-filter:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent); }
.settings-filter input:focus-visible { box-shadow: none; }
.settings-group { margin: 0 0 var(--s-6); }
.settings-group[hidden] { display: none; }
.settings-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-3); }
.settings-group-head h2 { margin: 0; font-size: var(--fs-lg); }
.settings-group-head p { margin: 0; font-size: var(--fs-sm); }
.settings-cards { list-style: none; display: grid; gap: var(--s-3); margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.settings-card { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.settings-card[hidden] { display: none; }
.settings-card:hover { border-color: var(--primary); box-shadow: var(--sh-2); }
.settings-card .card-link { justify-content: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-1); }
.settings-card .card-link .chevron { margin-left: auto; color: var(--fg-subtle); }
.settings-card .card-text { margin: 0; padding: 0 var(--s-4) var(--s-3) calc(var(--s-4) + 2.25rem + var(--s-3)); color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.45; }
.settings-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--r-2); background: var(--primary-soft); color: var(--primary); }
.settings-empty[hidden] { display: none; }

/* --- 14. Proposta di calendario (C9) ----------------------------------------------------------------
   La copertura spiega i numeri riga per riga; le righe non collocabili sono card con finestra, operatori
   provati e azioni; senza sedute proposte il rifiuto resta in fondo, richiudibile. */
.dl dd .dd-help { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.45; }
.coverage-table .coverage-why { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.45; }
.coverage-table td small { white-space: normal; }
.unplaced-list { list-style: none; display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); padding: 0; }
.unplaced-card { margin: 0; border-left: 4px solid var(--warn); }
.unplaced-title { margin: 0 0 var(--s-2); }
.unplaced-facts { margin: 0 0 var(--s-3); }
.unplaced-operators { margin: 0 0 var(--s-1); padding-left: 1.1rem; }
.unplaced-operators li { margin: 0 0 var(--s-1); }
.unplaced-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.unplaced-actions form { margin: 0; }
.unplaced-help { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }
.decision-options { margin: 0 0 var(--s-3); padding-left: 1.1rem; }
.decision-options li { margin: 0 0 var(--s-1); }
.decision-reject-more { margin: var(--s-3) 0 0; }
.decision-reject-more > summary { display: inline-flex; width: auto; }
@media (max-width: 40rem) {
  .unplaced-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .unplaced-facts dd { margin-bottom: var(--s-2); }
  .unplaced-actions .button { width: 100%; justify-content: center; }
  .unplaced-actions form { width: 100%; }
}

/* Stampa: la pagina senza testata, menu e collegamento «Vai al contenuto» (comparivano a metà foglio). */
@media print {
  .skip-link, .topbar, .htmx-error { display: none !important; }
}

/* Bersagli touch di almeno 44 px anche per chip, avvisi e pulsanti piccoli a sola icona. */
@media (pointer: coarse) {
  a.chip, button.chip, .toast-action, .toast-close, .button.icon-only.sm, .panel-history > summary, .plan-edit > summary { min-height: 2.75rem; }
  .toast-close, .button.icon-only.sm { min-width: 2.75rem; }
}

/* Controlli che esistono solo con JavaScript: con la classe «js» (prefs.js, prima del disegno) si vedono
   dal primo disegno, senza spostare la pagina quando ui.js toglie «hidden». Sul telefono il cassetto del
   menu resta chiuso finché app.js non prende in mano il pulsante «Menu» (niente lampo del menu aperto). */
:root.js .session-tools[hidden], :root.js .cal-tools[hidden], :root.js .settings-filter[hidden] { display: flex; }
:root.js .session-tools [data-ui-action][hidden] { display: inline-flex; }
@media (min-width: 64rem) { :root.js .app-menu .palette-trigger[hidden] { display: flex; } }
@media (max-width: 63.99rem) {
  :root.js .palette-trigger-mobile[hidden], :root.js .nav-toggle[hidden] { display: inline-flex; }
  :root.js .with-nav .topbar:has(.nav-toggle[hidden]) .app-menu { display: none; }
}

/* --- 7. Movimento e transizioni di vista ----------------------------------------------------------- */
/* Tra una pagina e l'altra (stessa origine) il contenuto sfuma e il menu resta fermo: si vede cosa
   cambia. Elementi con view-transition-name si trasformano da una pagina all'altra. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--dur-2) var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in var(--dur-3) var(--ease-out) both; }
.topbar { view-transition-name: shell; }
::view-transition-old(shell), ::view-transition-new(shell) { animation: none; mix-blend-mode: normal; }
::view-transition-group(nav-current) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-emph); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes flash-ok { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.just-updated { animation: flash-ok 0.7s var(--ease-out); }
.htmx-added { animation: fade-in var(--dur-2) var(--ease-out); }

/* Movimento ridotto: solo dissolvenze brevi, niente spostamenti né transizioni di vista animate. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Contatti e triage (N2): stato della richiesta e destinazione del contatto. Il colore accompagna sempre il
   testo dello stato, mai da solo. */
.badge.req-incomplete, .badge.req-to_route, .badge.dest-request {
  background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.badge.req-awaiting_doctor, .badge.req-routed, .badge.dest-triage {
  background: var(--primary-soft); color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.badge.req-waiting_visit, .badge.dest-booked {
  background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.badge.req-archived, .badge.req-expired, .badge.dest-archived, .badge.dest-info {
  background: var(--bg-sunken); color: var(--fg-muted); border-color: var(--line);
}
.contact-days { margin-bottom: var(--s-3); }
.contact-call .row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Revisione dei contatti (D-730…D-754): tema scuro attuale, più compatto. Ogni colore accompagna un'icona e
   un testo, mai da solo. */
.compact-head { margin-bottom: var(--s-3); }
.compact-head h1 { margin-bottom: var(--s-1); }
.compact-card { padding: var(--s-3) var(--s-4); }
.compact-card h2 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.compact-grid { gap: var(--s-2) var(--s-3); }
.fieldset.compact { padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.compact-dl { row-gap: var(--s-1); }
.subhead { font-size: var(--fs-md); margin: var(--s-3) 0 var(--s-2); }
.small { font-size: var(--fs-sm); }
.text-warn { color: var(--warn-fg); }
.contact-form .segmented { flex-wrap: wrap; }
.segmented .segment { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--r-2); cursor: pointer; }
.segmented .segment:has(input:checked) { background: var(--bg-surface); color: var(--primary-ink); box-shadow: var(--sh-1); font-weight: 600; }
.segmented .segment:has(input:focus-visible) { outline: 2px solid var(--line-focus); outline-offset: 2px; }

/* Modulo progressivo: i campi compaiono quando servono (nessuno script). */
.contact-form:not(:has(input[name="subject"]:checked)) .when-person,
.contact-form:has(#subject-ANONYMOUS:checked) .when-person,
.contact-form:not(:has(#subject-ANONYMOUS:checked)) .when-anonymous,
.contact-form:not(:has(#subject-THIRD_PARTY:checked)) .when-third,
.contact-form:not(:has(#subject-THIRD_PARTY:checked)) .when-third-inline,
.contact-form:has(#subject-THIRD_PARTY:checked) .when-self-inline,
.contact-form:not(:has(#reason_id option[data-detail]:checked)) .reason-detail,
.contact-form:not(:has(#notice-GIVEN:checked)) .notice-mode,
.contact-form:not(:has(#channel option[value="EMAIL"]:checked, #channel option[value="WEB"]:checked, #channel option[value="OTHER"]:checked)) .when-deferred,
.action-panel:not(:has(option[data-detail]:checked)) .closing-detail,
#action-form.is-anonymous .when-person { display: none; }

/* Le sei azioni: colore, icona e testo. */
.action-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }
.action-bar > * { flex: 0 1 auto; }
.action-btn {
  --c: var(--primary); --c-bg: var(--primary-soft); --c-fg: var(--primary-ink);
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2); border: var(--bw) solid color-mix(in srgb, var(--c) 55%, transparent);
  background: var(--c-bg); color: var(--c-fg); font-weight: 620; cursor: pointer; text-decoration: none; list-style: none;
}
.action-btn::-webkit-details-marker { display: none; }
.action-btn:hover { border-color: var(--c); color: var(--c-fg); text-decoration: none; filter: brightness(1.06); }
.action-btn:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.action-btn .icon { color: var(--c); }
.action-green { --c: var(--ok); --c-bg: var(--ok-bg); --c-fg: var(--ok-fg); }
.action-blue { --c: var(--info); --c-bg: var(--info-bg); --c-fg: var(--info-fg); }
.action-orange { --c: var(--set-dom); --c-bg: var(--set-dom-bg); --c-fg: var(--set-dom-fg); }
.action-teal { --c: var(--st-confirmed); --c-bg: var(--st-confirmed-bg); --c-fg: var(--st-confirmed-fg); }
.action-grey { --c: var(--st-cancelled); --c-bg: var(--bg-sunken); --c-fg: var(--fg-muted); }
.action-red { --c: var(--err); --c-bg: transparent; --c-fg: var(--err-fg); border-style: dashed; }
.action-plain { --c: var(--line-strong); --c-bg: var(--bg-surface); --c-fg: var(--fg); }
.button.action-green { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.action-panel { flex-basis: auto; }
.action-panel[open] { flex-basis: 100%; order: 10; }
.action-panel[open] > summary { margin-bottom: var(--s-2); }
.action-panel-body { display: grid; gap: var(--s-2); padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-2); background: var(--bg-muted); }
.action-panel-body > .action-btn { justify-self: start; }

/* Stato operativo del contatto. */
.state-chip.cs-new { --c: var(--info); --c-bg: var(--info-bg); --c-fg: var(--info-fg); }
.state-chip.cs-in_progress { --c: var(--primary); --c-bg: var(--primary-soft); --c-fg: var(--primary-ink); }
.state-chip.cs-forwarded, .state-chip.cs-awaiting_reply { --c: var(--warn); --c-bg: var(--warn-bg); --c-fg: var(--warn-fg); }
.state-chip.cs-reply_available { --c: var(--st-confirmed); --c-bg: var(--st-confirmed-bg); --c-fg: var(--st-confirmed-fg); }
.state-chip.cs-to_call_back { --c: var(--set-dom); --c-bg: var(--set-dom-bg); --c-fg: var(--set-dom-fg); }
.state-chip.cs-closed { --c: var(--ok); --c-bg: var(--ok-bg); --c-fg: var(--ok-fg); }
.state-chip.cs-legacy { --c: var(--st-cancelled); --c-bg: var(--bg-sunken); --c-fg: var(--fg-muted); border-style: dashed; }
.badge.req-in_review { background: var(--primary-soft); color: var(--primary-ink); }
.badge.req-resolved { background: var(--ok-bg); color: var(--ok-fg); }
tr.is-overdue td:first-child, .session-row.is-overdue { box-shadow: inset 3px 0 0 var(--err); }
.contact-stats { margin-bottom: var(--s-3); }
.contact-stats .stat-tile { padding: var(--s-2) var(--s-3); }
.contact-stats .stat-value { font-size: var(--fs-2xl); }
.compact-filters { gap: var(--s-2); }
.task-groups { margin-bottom: var(--s-2); }
.contact-columns { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.matches-box { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: var(--bw) dashed var(--warn); border-radius: var(--r-2); background: var(--warn-bg); color: var(--warn-fg); }
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.match-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.forward-list, .timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.forward-item { padding: var(--s-2) var(--s-3); border-left: 3px solid var(--line-strong); background: var(--bg-muted); border-radius: var(--r-1, 4px); }
.forward-item p { margin: 0 0 var(--s-1); }
.forward-item.fw-open, .forward-item.fw-taken { border-left-color: var(--warn); }
.forward-item.fw-answered, .forward-item.fw-closed { border-left-color: var(--ok); }
.quote { margin: var(--s-1) 0; padding: var(--s-2) var(--s-3); background: var(--bg-sunken); border-radius: var(--r-2); white-space: pre-line; overflow-wrap: anywhere; }
.timeline-list li { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); }
.timeline-list time { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.contact-call .row-actions form.inline, .contact-call .row-actions details { display: inline-block; }
details.reschedule[open] { flex-basis: 100%; }
@media (max-width: 40rem) {
  .action-btn { width: 100%; justify-content: flex-start; }
  .action-bar > span { width: 100%; }
  .contact-call .row-actions { grid-column: 1 / -1; min-width: 0; }
}

/* Giro U-R0 (D-803): i codici tecnici (azione dell'audit, codice del KPI) restano nel dettaglio, piccoli. */
details.tech-code { display: inline-block; margin-left: var(--s-1); font-size: var(--fs-xs); color: var(--fg-muted); }
details.tech-code summary { cursor: pointer; text-decoration: underline dotted; }
.kpi-code { white-space: nowrap; }
.kpi-details > summary { cursor: pointer; list-style-position: inside; }
.kpi-details > summary h2 { display: inline; margin: 0; }

/* Azione non disponibile con il motivo (U-R0, D-805): testo, non pulsante; icona e parole, mai il solo colore. */
.action-unavailable { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.action-unavailable-row {
  display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; padding: var(--s-2) var(--s-3);
  border: var(--bw) dashed var(--line-strong); border-radius: var(--r-2); background: var(--bg-sunken);
  color: var(--fg); font-size: var(--fs-sm); overflow-wrap: break-word; min-width: 0;
}
.action-unavailable-row .icon { flex: 0 0 auto; margin-top: 0.15em; color: var(--fg-muted); }
.action-unavailable-label { font-weight: 650; }
.forward-steps { margin: 0 0 var(--s-3); padding-left: 1.25rem; font-size: var(--fs-sm); color: var(--fg-muted); }

/* Giro U-R1a (D-830...D-834): agenda contatti a schede, barra dei filtri, passi di «Nuovo contatto», «Oggi». */
.tabs ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-3); padding: 0; list-style: none; border-bottom: var(--bw) solid var(--line-strong); }
.tab {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); min-height: 2.5rem;
  border: var(--bw) solid transparent; border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0;
  color: var(--fg); text-decoration: none; font-weight: 600;
}
.tab:hover { background: var(--bg-sunken); }
.tab.is-active { background: var(--bg-raised, var(--bg)); border-color: var(--line-strong); box-shadow: inset 0 -3px 0 var(--accent, currentColor); }
.agenda-indicators > summary { cursor: pointer; font-weight: 600; }
.scope-note { margin: 0 0 var(--s-2); }
.filterbar { display: grid; gap: var(--s-2); margin: var(--s-2) 0; }
.filterbar-main { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: flex-end; }
.filterbar-main .form-field { min-width: min(100%, 11rem); flex: 0 1 14rem; }
.filterbar-main .filterbar-search { flex: 1 1 16rem; }
.filter-more > summary { cursor: pointer; font-weight: 600; padding: var(--s-1) 0; }
.filter-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.filter-chips { align-items: center; }
.chip-remove { display: inline-flex; align-items: center; margin-left: var(--s-1); color: inherit; }
.chip-remove:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
.attention-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-1) 0 0; padding: 0; list-style: none; }
.attention-tags .badge { display: inline-flex; align-items: center; gap: 0.25rem; white-space: normal; }
.sort-link { color: inherit; text-decoration: underline dotted; }
.pager { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.pager p { margin: 0; flex: 1 1 100%; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
.step-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); padding: 0; list-style: none; font-size: var(--fs-sm); }
.step-list a { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; }
.step-title { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-lg, 1.125rem); }
.step-title:first-of-type { margin-top: 0; }
.step-number {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg, #fff); font-size: var(--fs-sm); font-weight: 700;
}
.field-error { margin: var(--s-1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--err-fg); border-left: 3px solid var(--err); padding-left: var(--s-2); }


/* Giro U-R1b (D-852): riepilogo dell'oggetto in testa a contatto, richiesta e inoltro; passi del triage (D-855). */
.object-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: start; margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border, #cbd5e1); border-left-width: 4px; border-radius: 0.5rem; background: var(--surface, #fff); }
.object-summary .os-what { margin: 0 0 0.25rem; }
.object-summary .os-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; }
.object-summary .os-facts div { display: flex; gap: 0.35rem; }
.object-summary .os-facts dt { color: var(--muted, #475569); }
.object-summary .os-facts dt::after { content: ":"; }
.object-summary .os-facts dd { margin: 0; font-weight: 600; }
.object-summary .os-next p { margin: 0; }
.object-summary .os-related { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 40rem) { .object-summary { grid-template-columns: minmax(0, 1fr); } .object-summary .os-next .button { width: 100%; text-align: center; } }
.triage-step { margin: 0 0 0.75rem; border: 1px solid var(--border, #cbd5e1); border-radius: 0.5rem; background: var(--surface, #fff); }
.triage-step > summary { cursor: pointer; padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.triage-step > summary .step-no { font-weight: 700; }
.triage-step > summary .step-state { color: var(--muted, #475569); font-size: 0.9em; }
.triage-step.is-active { border-left: 4px solid var(--accent, #0f766e); }
.triage-step .step-body { padding: 0 1rem 1rem; }
.triage-step .step-body > .card { border: 0; padding-left: 0; padding-right: 0; box-shadow: none; }
.missing-links { margin: 0.5rem 0; padding-left: 1.25rem; }
.dirty-warning { margin: 0.5rem 0; }
.forward-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }

/* --- Giro R2b: calendario, Planner, allarmi --- */
.legend-swatch.state-free { background: var(--bg-surface); border: var(--bw, 1px) dashed var(--line); width: 1.4rem; height: 1rem; border-radius: 3px; }
.week-scope { flex-basis: 100%; margin: 0; }
.alert-group { list-style: none; border-left: 3px solid var(--line); padding-left: .75rem; }
.alert-group > .alert-list { margin-top: .5rem; }
.alert-state, .alert-intervention { margin: .25rem 0; }
.todo-scope { margin: 0 0 .5rem; font-size: .875rem; }


/* U-R2a: schede del piano, quattro dimensioni, zona di chiusura (D-870…D-874) */
.dimension-list { display: grid; gap: var(--s-3); margin: 0; }
.dimension-list > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--s-1) var(--s-3); }
.dimension-list dt { font-weight: 650; }
.dimension-list dd { margin: 0; overflow-wrap: anywhere; }
.dimension-defs { margin: 0 0 var(--s-3); padding-left: 1.1rem; }
.close-facts { margin: 0 0 var(--s-2); padding-left: 1.1rem; }
@media (max-width: 40rem) { .dimension-list > div { grid-template-columns: minmax(0, 1fr); } }


/* --- Giro U-R3b: pagina unica «Richieste» (D-930) --- */
.req-tabs, .req-states { margin: 0 0 .5rem; }
.req-split { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.req-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.req-row { display: grid; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg-surface); color: inherit; text-decoration: none; }
.req-row:hover { border-color: var(--accent, currentColor); }
.req-row.is-selected { border-left: 4px solid var(--accent, currentColor); }
.req-row.is-overdue { border-color: var(--warn); }
.req-row .badge { justify-self: start; }
.req-panel { padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg-surface); min-width: 0; }
.req-panel h2 { margin: .1rem 0 .5rem; }
.req-next { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent, currentColor); border-radius: .5rem; }
.req-next h3 { margin: 0 0 .25rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.req-secondary { display: flex; flex-wrap: wrap; gap: .5rem; }
.req-history { margin-top: .75rem; }
.req-back { display: none; margin: 0 0 .5rem; }
@media (max-width: 48rem) {
  .req-split { grid-template-columns: minmax(0, 1fr); }
  .req-split.has-sel .req-list { display: none; }
  .req-split:not(.has-sel) .req-panel { display: none; }
  .req-back { display: block; }
  .req-next .button { width: 100%; text-align: center; }
}
.req-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; }
.req-facts div { display: flex; gap: .35rem; }
.req-facts dt { color: var(--muted); }
.req-facts dt::after { content: ":"; }
.req-facts dd { margin: 0; font-weight: 600; }


/* Giro U-R3a (D-910...D-929): otto aree con schede, «Il lavoro di oggi», esiti da registrare, scheda della persona,
   registro dei documenti. */
.area-tabs { margin: 0 0 var(--s-4); }
.area-tabs ul { gap: var(--s-1); }
.today-counters { margin-bottom: var(--s-4); }
.now-list { list-style: none; margin: 0; padding: 0; display: grid; }
.now-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0; border-top: var(--bw) solid var(--line);
}
.now-row:first-child { border-top: 0; }
.now-main { display: grid; gap: var(--s-1); min-width: 0; flex: 1 1 16rem; justify-items: start; }
.now-title { overflow-wrap: anywhere; }
.now-meta { color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.now-action { flex: 0 0 auto; }
.person-sections { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.person-section h2 { margin-top: 0; }
.person-section ul { margin: 0; padding-left: 1.1rem; }
.person-journey { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.doc-registry td, .doc-registry th { overflow-wrap: anywhere; }
/* Giro U-R4 (D-970…D-976): Nuovo contatto con la persona in cima, azioni come schede, triage a passi. */
.person-search { border-left: 4px solid var(--primary); }
.person-search .patient-lookup input[type="search"] { width: 100%; font-size: var(--fs-md, 1rem); min-height: 2.75rem; }
.patient-found:empty { display: none; }
.add-anagraphic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; }
.contact-form > .card { margin-bottom: var(--s-3); }
.action-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.action-cell { display: flex; min-width: 0; }
.action-tile { width: 100%; min-height: 4.25rem; align-items: center; justify-content: flex-start; text-align: left; font: inherit; }
.action-tile .action-text { display: grid; gap: 2px; min-width: 0; }
.action-tile .action-name { font-weight: 650; }
.action-tile .action-effect { font-size: var(--fs-sm); font-weight: 400; color: var(--fg-muted); }
.action-dialog .dialog-head h2 { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-lg, 1.2rem); }
.action-dialog-body { display: grid; gap: var(--s-2); margin: var(--s-2) 0; }
.contact-form:has(input[name="patient_pick"]:checked) .book-missing,
.contact-form:not(:has(input[name="patient_pick"]:checked)) .book-ready,
.contact-form:not(:has(input[name="patient_pick"]:checked)) #contact-form-dlg-BOOK .action-confirm { display: none; }
.book-ready { display: flex; gap: var(--s-2); align-items: center; color: var(--ok-fg); font-weight: 600; }
.np-sex { border: 0; padding: 0; margin: 0; }
.np-sex legend { font-weight: 600; margin-bottom: var(--s-1); }
.np-sex .segmented { flex-wrap: wrap; }

/* Ingresso e uscita di un'azione (D-975). */
.io-card { margin: var(--s-2) 0; border: var(--bw) solid var(--line); border-radius: var(--r-2); background: var(--bg-muted); font-size: var(--fs-sm); }
.io-card > summary { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); cursor: pointer; list-style: none; }
.io-card > summary::-webkit-details-marker { display: none; }
.io-card > summary::after { content: "Dettaglio dei sei elementi"; color: var(--primary-ink); text-decoration: underline; font-size: var(--fs-xs, .75rem); }
.io-card[open] > summary::after { content: "Chiudi il dettaglio"; }
.io-line { overflow-wrap: anywhere; }
.io-tag { display: inline-block; min-width: 3.2rem; padding: 0 var(--s-1); margin-right: var(--s-1); border-radius: var(--r-1, 4px); font-weight: 700; text-align: center; }
.io-in { background: var(--info-bg); color: var(--info-fg); }
.io-out { background: var(--ok-bg); color: var(--ok-fg); }
.io-grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; padding: 0 var(--s-3) var(--s-2); }
.io-grid dt { color: var(--fg-muted); }
.io-grid dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .io-grid { grid-template-columns: minmax(0, 1fr); } .io-grid dd { margin-bottom: var(--s-1); } }

/* Triage: pagina leggera e finestra a passi. */
.triage-overview { display: grid; gap: var(--s-3); }
.triage-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.triage-progress li { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-1) var(--s-2); border-radius: var(--r-2); background: var(--bg-muted); font-size: var(--fs-sm); min-width: 0; }
.triage-progress li.is-done { background: var(--ok-bg); color: var(--ok-fg); }
.triage-progress li.is-now { background: var(--primary-soft); color: var(--primary-ink); font-weight: 650; }
.triage-progress .tp-no { font-weight: 700; white-space: nowrap; }
.triage-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.triage-cta .button { font-size: var(--fs-md, 1rem); }
.triage-dialog { width: min(52rem, calc(100vw - 1rem)); padding: 0; display: none; }
.triage-dialog[open] { display: flex; flex-direction: column; }
.triage-dialog .dialog-head { padding: var(--s-3) var(--s-3) 0; margin: 0; }
.triage-dialog .t-counter { margin: 0; font-weight: 650; color: var(--primary-ink); }
.t-steps { list-style: none; display: flex; gap: var(--s-1); margin: 0; padding: var(--s-2) var(--s-3); overflow-x: auto; border-bottom: var(--bw) solid var(--line); }
.t-steps a { display: inline-flex; align-items: center; gap: 4px; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill, 999px); color: var(--fg-muted); text-decoration: none; white-space: nowrap; font-size: var(--fs-sm); border: var(--bw) solid transparent; }
.t-steps a.is-done { color: var(--ok-fg); }
.t-steps a[aria-current="step"] { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); font-weight: 650; }
.t-body { padding: var(--s-3); overflow: auto; flex: 1 1 auto; min-height: 0; }
.t-body h3 { margin-top: 0; }
.t-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: var(--bw) solid var(--line); background: var(--bg-muted); }
.t-group { border: var(--bw) solid var(--line); border-radius: var(--r-2); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); min-width: 0; }
.t-group legend { font-weight: 650; padding: 0 var(--s-1); }
.t-q { display: grid; gap: var(--s-1); margin: 0 0 var(--s-2); }
.t-q > .t-label { font-weight: 600; }
.t-choices { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.t-choices .segment, .t-choice { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.5rem; padding: var(--s-1) var(--s-3); border: var(--bw) solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-surface); cursor: pointer; }
.t-choices .segment:has(input:checked), .t-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 650; }
.t-choices .segment:has(input:focus-visible), .t-choice:has(input:focus-visible) { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.t-cards { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.t-card { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-surface); cursor: pointer; }
.t-card:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.t-card:has(input:focus-visible) { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.t-card .t-card-title { font-weight: 650; display: flex; gap: var(--s-1); align-items: center; }
.t-card .t-card-sub { font-size: var(--fs-sm); color: var(--fg-muted); }
.t-tag { display: inline-block; padding: 0 var(--s-1); border-radius: var(--r-1, 4px); background: var(--ok-bg); color: var(--ok-fg); font-size: var(--fs-xs, .75rem); font-weight: 700; }
.t-proposal { padding: var(--s-3); border-radius: var(--r-2); background: var(--info-bg); color: var(--info-fg); }
.t-proposal p { margin: 0 0 var(--s-1); }
.t-outcome-form { display: none; margin-top: var(--s-3); }
.tstep-5:has(#esito-visit:checked) .esito-visit,
.tstep-5:has(#esito-archive:checked) .esito-archive,
.tstep-5:has(#esito-expired:checked) .esito-expired { display: block; }
.t-done { text-align: left; padding: var(--s-3); border-radius: var(--r-2); background: var(--ok-bg); color: var(--ok-fg); }
.t-done h3 { margin: 0 0 var(--s-1); }
.t-next-primary { margin: var(--s-3) 0 var(--s-2); }
.t-next-primary .button { font-size: var(--fs-md, 1rem); }
@media (max-width: 40rem) {
  .triage-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .t-nav .button, .t-next-primary .button, .triage-cta .button { width: 100%; text-align: center; justify-content: center; }
}
.triage-dialog > * { flex-shrink: 0; }
.triage-dialog > .t-body { flex: 1 1 auto; min-height: 0; }
fieldset.t-q { border: 0; padding: 0; margin: 0 0 var(--s-3); min-width: 0; }
fieldset.t-q > legend { padding: 0; margin-bottom: var(--s-1); }
.dialog h2[tabindex="-1"]:focus, .tstep h3[tabindex="-1"]:focus { outline: none; }

/* --- Percorso del paziente (J1a, D-1001): barra a sei tappe e «Prossimo passo» ------------------------ */
.journey-steps { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.journey-step { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2) 2px 2px; border: var(--bw) solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); background: var(--bg); }
.journey-mark { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: var(--bw) solid var(--line); font-weight: 600; }
.journey-step.is-done { color: var(--ok-fg); border-color: var(--ok); background: var(--ok-bg); }
.journey-step.is-done .journey-mark { border-color: var(--ok); }
.journey-step.is-ongoing { color: var(--fg, inherit); border-color: var(--primary); border-width: 2px; font-weight: 600; }
.journey-step.is-ongoing .journey-mark { background: var(--primary); border-color: var(--primary); color: var(--accent-fg); }
.journey-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.journey-now p { margin: 0; flex: 1 1 18rem; min-width: 0; }
.journey-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.journey-box { border-left: 4px solid var(--primary); }