/* ==========================================================================
   QUADRA — il sistema visivo (Brand Standards 3.6)

   Il primo foglio che la pagina carica, e l'unico che definisce l'aspetto di
   fondo: caratteri, token, base, guscio, componenti, primitive di pagina,
   plancia, viste, movimento. `style.css`, `tef.css` e `marketing.css` portano
   solo la geometria delle singole pagine e leggono questi token.

   Le regole che non si discutono (DESIGN.md):
     · il logo è solo nero o solo bianco (`currentColor`), mai del colore
       dell'agenzia; l'agenzia è l'area di lavoro accanto, mai fusa al logo;
     · Inter per l'interfaccia, Sora per i titoli, Quadra Display solo per le
       cifre chiave — le unità restano in Inter;
     · Argento: neutri fissi, uguali per tutti; l'utente sceglie soltanto
       l'accento (Argento di serie, o uno degli otto colori), e l'accento vive
       nei token della sezione 2 — nessun componente ha un colore suo. I
       grafici portano l'accento. Verde, giallo e rosso sono STATI, mai
       decorazione né serie di dati;
     · tutto smussato, con la scala dei raggi;
     · la geometria non si muove al passaggio del puntatore: cambiano luce e
       opacità. L'ingresso sale di 8 px, 60 ms fra un elemento e il successivo;
       i grafici si disegnano una volta; il movimento ridotto è rispettato.

    1. Caratteri          7. Primitive di pagina
    2. Token              8. Tabelle
    3. Nomi storici       9. Plancia a una schermata
    4. Base              10. Viste
    5. Guscio            11. Movimento
    6. Componenti ui-*   12. Telefono
   ========================================================================== */

/* ============================== 1 · CARATTERI ============================= */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/sora-500.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/sora-700.woff2") format("woff2"); }
/* Quadra Display non ha €, % né &, ed è solo maiuscolo: quando manca un segno
   il browser prende quello di Inter, e comunque le unità stanno in `.u`. */
@font-face { font-family: "Quadra Display"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/quadra-display.woff2") format("woff2"); }

/* ================================ 2 · TOKEN =============================== */
:root {
  /* ARGENTO (Brand Standards 3.8 · Colore): i neutri sono fissi, gli stessi
     per ogni agenzia e ogni utente. Chiaro. */
  --app-bg: #EDEDF0;         /* Alluminio: il fondo dell'applicazione */
  --paper: #FFFFFF;          /* la carta */
  --panel: #F7F7F9;
  --soft: #EBEBEF;
  --line: #D9D9DE;
  --ink: #1D1D1F;            /* Siderale: 16,8:1 sulla carta */
  --ink-2: #636368;          /* Grafite: 6,0:1 sulla carta, 5,1:1 sul fondo · AA */

  /* L'ACCENTO: l'unica cosa che l'utente sceglie (sezione 2-bis). Di serie è
     Argento: il blocco d'argento sui pulsanti, siderale per i segni sottili.
       --pri          i controlli piccoli: interruttore, spunta, avanzamento
       --pri-fill     le superfici primarie: pulsante principale, voce e
                      pastiglia scelte, distintivo pieno, l'area di lavoro
       --pri-ink      solo il TESTO d'accento, leggibile su ogni carta
       --data         ogni segno di un grafico; --ramp-1..5 le sue tonalità */
  --pri: #1D1D1F; --on-pri: #FFFFFF;
  --pri-fill: linear-gradient(160deg, #FAFAFB 0%, #E9E9ED 36%, #D6D6DC 64%, #E2E2E7 84%, #CDCDD3 100%);
  --pri-fill-h: linear-gradient(160deg, #F3F3F5 0%, #E1E1E6 36%, #CDCDD3 64%, #D9D9DE 84%, #C4C4CB 100%);
  --on-pri-fill: #1D1D1F;
  --pri-edge: inset 0 0 0 1px rgba(0, 0, 0, .06);
  --pri-ink: #1D1D1F;
  --data: #1D1D1F; --on-data: #FFFFFF;
  --ramp-1: #DCDCDC; --ramp-2: #B4B4B5; --ramp-3: #8D8D8E; --ramp-4: #656567; --ramp-5: #3A3A3C;
  /* I nove campioni dell'accento, uguali in chiaro e in scuro: il colore vero
     di ognuno (2-bis lo usa per i grafici) e il blocco d'argento. Il menu
     dell'accento li mostra tutti, qualunque sia quello scelto. */
  --tinta-argento: linear-gradient(160deg, #FAFAFB 0%, #E9E9ED 36%, #D6D6DC 64%, #E2E2E7 84%, #CDCDD3 100%);
  --tinta-blu: #0A84FF; --tinta-azzurro: #32ADE6; --tinta-viola: #9D4EDD; --tinta-rossetto: #C4124C;
  --tinta-rosso: #E3000F; --tinta-arancio: #FF9F0A; --tinta-giallo: #FFD60A; --tinta-verde: #30D158;

  /* gli stati: solo stati */
  --ok: #1D7A4B;             /* 5,4:1 sulla carta */
  --warn: #9A6200;           /* 5,0:1 */
  --err: #BE3A2C;            /* 5,4:1 */
  /* Il testo di stato SU UNA TINTA (pastiglie, contatori, avvisi): un gradino
     più scuro, perché su una tinta sopra il grigio del guscio lo stato pieno
     scende sotto 4,5:1. Al buio coincide con lo stato. */
  --ok-t: #15603A; --warn-t: #7A4D00; --err-t: #9F2F23;

  /* i caratteri */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Sora", "Inter", system-ui, sans-serif;
  --display: "Quadra Display", "Sora", system-ui, sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spazio */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --pad: 24px; --grid-gap: 16px;

  /* raggi: tutto è smussato */
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-md: 10px; --r-lg: 16px;
  --r-xl: 22px; --r-2xl: 28px; --r-full: 999px; --r-sig: 999px;

  /* controlli */
  --ctl-h: 40px; --ctl-h-sm: 32px; --ctl-h-lg: 48px; --row-h: 44px;
  --fs-ui: 14.5px; --fs-ui-sm: 13.5px; --fs-label: 12px; --fs-small: 15px;

  /* movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --t-press: 120ms; --t-panel: 180ms; --t-plate: 260ms; --t-reveal: 620ms;
  --t-toast: 260ms;

  /* gli strati: una scala sola, dal basso. Un menu o un pannello che si apre
     dentro la pagina sta a `--z-pop`; ciò che copre la pagina intera sale di
     gradino in gradino e non «vince» con un numero grande. Il dock del
     telefono sta SOTTO la lastra e la lente: il dock è il guscio, gli strati
     sono il lavoro in corso. Il foglio del menu (telefono) non convive con
     nessuno strato; il cartellino sta sopra tutto e non si fa mai cliccare. */
  --z-su: 1; --z-testata: 30; --z-pop: 40; --z-avviso: 50; --z-dock: 60;
  --z-lastra-velo: 62; --z-lastra: 64; --z-lente-velo: 70; --z-lente: 72;
  --z-foglio-velo: 78; --z-foglio: 80; --z-cartellino: 90; --z-salta: 500;

  /* guscio */
  --side: 252px;
  --rail: 72px;

  --hatch: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px);

  /* alias dei componenti del design system */
  --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --bd: var(--line);
  --sf: var(--panel); --sf-2: var(--soft);
  --font-num: var(--display);

  --ombra-menu: 0 0 0 1px var(--line), 0 18px 50px -18px rgba(0, 0, 0, .35);
  --ombra-foglio: 0 0 0 1px var(--line), 0 24px 64px -16px rgba(0, 0, 0, .4);

  color-scheme: light;
}
/* scuro — automatico, oppure scelto (data-theme, ricordato nel browser) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #000000; --paper: #161617; --panel: #1C1C1E; --soft: #2C2C2E;
    --line: #38383A; --ink: #F5F5F7; --ink-2: #A1A1A6;
    --pri: #D1D1D6; --on-pri: #1D1D1F;
    --pri-fill: linear-gradient(160deg, #F4F4F6 0%, #E1E1E6 36%, #CACAD0 64%, #D7D7DC 84%, #BEBEC5 100%);
    --pri-fill-h: linear-gradient(160deg, #FFFFFF 0%, #EAEAEE 36%, #D3D3D9 64%, #E0E0E5 84%, #C8C8CE 100%);
    --on-pri-fill: #1D1D1F; --pri-edge: none;
    --pri-ink: #D1D1D6;
    --data: #D1D1D6; --on-data: #1D1D1F;
    --ramp-1: #383839; --ramp-2: #5D5D60; --ramp-3: #828286; --ramp-4: #A8A8AC; --ramp-5: #D1D1D6;
    --ok: #4FC28A; --warn: #E3A94B; --err: #F0776A;
    --ok-t: var(--ok); --warn-t: var(--warn); --err-t: var(--err);
    --ombra-menu: 0 0 0 1px var(--line), 0 18px 50px -18px rgba(0, 0, 0, .8);
    --ombra-foglio: 0 0 0 1px var(--line), 0 24px 64px -16px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app-bg: #000000; --paper: #161617; --panel: #1C1C1E; --soft: #2C2C2E;
  --line: #38383A; --ink: #F5F5F7; --ink-2: #A1A1A6;
  --pri: #D1D1D6; --on-pri: #1D1D1F;
  --pri-fill: linear-gradient(160deg, #F4F4F6 0%, #E1E1E6 36%, #CACAD0 64%, #D7D7DC 84%, #BEBEC5 100%);
  --pri-fill-h: linear-gradient(160deg, #FFFFFF 0%, #EAEAEE 36%, #D3D3D9 64%, #E0E0E5 84%, #C8C8CE 100%);
  --on-pri-fill: #1D1D1F; --pri-edge: none;
  --pri-ink: #D1D1D6;
  --data: #D1D1D6; --on-data: #1D1D1F;
  --ramp-1: #383839; --ramp-2: #5D5D60; --ramp-3: #828286; --ramp-4: #A8A8AC; --ramp-5: #D1D1D6;
  --ok: #4FC28A; --warn: #E3A94B; --err: #F0776A;
  --ok-t: var(--ok); --warn-t: var(--warn); --err-t: var(--err);
  --ombra-menu: 0 0 0 1px var(--line), 0 18px 50px -18px rgba(0, 0, 0, .8);
  --ombra-foglio: 0 0 0 1px var(--line), 0 24px 64px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---- 2-bis · gli otto accenti ------------------------------------------------
   `html[data-tint="…"]`, scritto dal server (e dallo script nel <head>) prima
   della prima pittura; senza l'attributo vale Argento. Un accento è LO STESSO
   colore in chiaro e in scuro: pulsante, controlli e segni dei grafici hanno
   lo stesso esadecimale nei due temi, e il testo sopra è nero sui colori
   chiari, bianco sugli altri. Cambia per tema soltanto il testo d'accento
   (`--pri-ink`, da `--pri-ink-c` in chiaro e `--pri-ink-s` in scuro) e, di
   conseguenza, le tonalità, che si mescolano verso la carta del tema.
   `html:root` (0,2,1) passa sopra le regole del tema (0,2,0): i fondi, le
   linee, il testo, il logo e gli stati non cambiano mai. */
html:root[data-tint] {
  --pri-fill: var(--pri);
  --on-pri-fill: var(--on-pri); --pri-edge: none;
  --pri-ink: var(--pri-ink-c);
  --ramp-1: color-mix(in srgb, var(--data) 18%, var(--paper));
  --ramp-2: color-mix(in srgb, var(--data) 38%, var(--paper));
  --ramp-3: color-mix(in srgb, var(--data) 58%, var(--paper));
  --ramp-4: color-mix(in srgb, var(--data) 78%, var(--paper));
  --ramp-5: var(--data);
}
@media (prefers-color-scheme: dark) { html:root[data-tint]:not([data-theme="light"]) { --pri-ink: var(--pri-ink-s); } }
html:root[data-tint][data-theme="dark"] { --pri-ink: var(--pri-ink-s); }
/* Per ogni accento: il pulsante e i controlli; il pulsante al passaggio, che
   si allontana dal colore del testo (scurisce sotto il bianco, schiarisce
   sotto il nero) e così il contrasto sale invece di scendere; il testo sopra;
   il colore dei grafici; il testo d'accento in chiaro e in scuro. */
html:root[data-tint="blu"]      { --pri: #0974E0; --pri-fill-h: #0866C5; --on-pri: #FFFFFF; --data: var(--tinta-blu); --on-data: #000000; --pri-ink-c: #0972DB; --pri-ink-s: #0A84FF; }
html:root[data-tint="azzurro"]  { --pri: #32ADE6; --pri-fill-h: #4BB7E9; --on-pri: #000000; --data: var(--tinta-azzurro); --on-data: #000000; --pri-ink-c: #247DA6; --pri-ink-s: #32ADE6; }
html:root[data-tint="viola"]    { --pri: #9D4EDD; --pri-fill-h: #8A45C2; --on-pri: #FFFFFF; --data: var(--tinta-viola); --on-data: #FFFFFF; --pri-ink-c: #9A4CD9; --pri-ink-s: #A760E0; }
html:root[data-tint="rossetto"] { --pri: #C4124C; --pri-fill-h: #AC1043; --on-pri: #FFFFFF; --data: var(--tinta-rossetto); --on-data: #FFFFFF; --pri-ink-c: #C4124C; --pri-ink-s: #D5547E; }
html:root[data-tint="rosso"]    { --pri: #E3000F; --pri-fill-h: #C8000D; --on-pri: #FFFFFF; --data: var(--tinta-rosso); --on-data: #FFFFFF; --pri-ink-c: #E3000F; --pri-ink-s: #EA424D; }
html:root[data-tint="arancio"]  { --pri: #FF9F0A; --pri-fill-h: #FFAB27; --on-pri: #000000; --data: var(--tinta-arancio); --on-data: #000000; --pri-ink-c: #A36606; --pri-ink-s: #FF9F0A; }
html:root[data-tint="giallo"]   { --pri: #FFD60A; --pri-fill-h: #FFDB27; --on-pri: #000000; --data: var(--tinta-giallo); --on-data: #000000; --pri-ink-c: #856F05; --pri-ink-s: #FFD60A; }
html:root[data-tint="verde"]    { --pri: #30D158; --pri-fill-h: #49D76C; --on-pri: #000000; --data: var(--tinta-verde); --on-data: #000000; --pri-ink-c: #1F8638; --pri-ink-s: #30D158; }

/* ============================== 3 · NOMI STORICI ==========================
   I fogli delle pagine sono stati scritti con altri nomi. Qui ognuno punta al
   token nuovo, e nessuno ha un valore suo: è così che le pagine sono diventate
   bianco e nero, chiaro e scuro, senza una regola copiata. Un foglio nuovo usa
   i nomi della sezione 2. */
:root {
  --bg-alto: var(--paper);
  --surface: var(--paper);
  --surface-2: var(--panel);
  --surface-3: var(--soft);
  --border: var(--line);
  --border-strong: color-mix(in srgb, var(--ink) 22%, var(--line));
  --text: var(--ink);
  --muted: var(--ink-2);
  --dim: var(--ink-2);

  /* `--accent` è il controllo pieno (`--pri`); le sue tinte leggere e la linea
     vengono dal colore dei dati, che in Argento è siderale. Il TESTO d'accento
     non usa questi nomi: usa `--pri-ink`. */
  --accent: var(--pri);
  --accent-soft: color-mix(in srgb, var(--data) 9%, transparent);
  --accent-line: color-mix(in srgb, var(--data) 38%, transparent);
  --accent-dim: color-mix(in srgb, var(--data) 5%, transparent);
  --accent-ink: var(--on-pri);

  --bad: var(--err);
  --info: var(--ink);
  --ok-line: color-mix(in srgb, var(--ok) 40%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 8%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 42%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 8%, transparent);
  --bad-line: color-mix(in srgb, var(--err) 42%, transparent);
  --bad-soft: color-mix(in srgb, var(--err) 8%, transparent);
  --info-line: var(--line);
  --info-soft: var(--panel);

  /* I grafici portano l'accento (Brand Standards 12.14): ogni segno è
     `--data` o una sua tonalità, mai un'altra tinta. Il «segnalato» non è
     rosso: è il colore pieno contro una popolazione schiarita — e porta
     sempre anche la forma del punto e la sua parola. Il riferimento e il
     metro sono arredo del grafico, non dati: restano in inchiostro. */
  --chart-dato: var(--data);
  --chart-segnalato: var(--data);
  --chart-sfondo: var(--ramp-2);
  --chart-riferimento: var(--ink-2);
  --chart-metro: var(--ink-2);
  --seq-0: var(--soft);
  --coda: var(--ramp-1);
  --seq-1: var(--ramp-1);
  --seq-2: var(--ramp-2);
  --seq-3: var(--ramp-3);
  --seq-4: var(--ramp-4);
  --seq-5: var(--ramp-5);
  --seq-ink-scuro: var(--on-data);   /* sopra i passi 4 e 5 */
  --seq-ink-chiaro: var(--ink);      /* sopra i passi 1, 2 e 3 */
  /* Il testo SOPRA un passo della rampa (celle, piastrelle, spicchi). Con
     nove accenti e due temi «chiaro sotto il terzo passo, scuro sopra» non
     regge: il quarto passo del Viola in chiaro vuole il nero, il terzo del
     Giallo in scuro anche. Dove il browser sa leggere la luce di un colore
     (sotto), il testo è nero o bianco secondo la luminanza del passo —
     L* 49,4, la soglia oltre la quale il nero legge meglio del bianco, sempre
     almeno 4,6:1. Altrove resta la regola dei passi. */
  --seq-ink-1: var(--seq-ink-chiaro); --seq-ink-2: var(--seq-ink-chiaro); --seq-ink-3: var(--seq-ink-chiaro);
  --seq-ink-4: var(--seq-ink-scuro); --seq-ink-5: var(--seq-ink-scuro);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  --font-ui: var(--sans);
  --font-mono: var(--code);
  /* Le tacche degli assi sulle tele: Inter come ogni altra cifra (tre
     famiglie, Brand Standards 4), mai sotto i dieci pixel. */
  --font-asse: var(--sans); --fs-asse: 10px; --fs-asse-pieno: 11px;
  --fs-0: 11px; --fs-1: 12px; --fs-2: 13px; --fs-3: 13.5px; --fs-4: 14.5px;
  --fs-5: 18px; --fs-6: 24px; --fs-7: 30px; --fs-fig: 38px; --fs-mono: 12.5px;
  --lh-tight: 1.25; --lh-head: 1.3; --lh-body: 1.55; --lh-cell: 1.45;
  --track-label: .07em;

  --r-1: var(--r-sm);
  --r-2: var(--r-md);
  --r-3: var(--r-lg);
  --r-pill: var(--r-full);

  --sidebar-w: var(--side);
  --content-max: 1480px;

  --ombra-lastra: 0 0 0 1px var(--line), 0 24px 64px -16px rgba(0, 0, 0, .35);
  --ombra-sollevata: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(0, 0, 0, .35);
  --luce-alto: none;
  --alone-accento: 0 0 0 1px var(--ink-2);

  --molla: linear(0, 0.0331, 0.1125, 0.2155, 0.3264, 0.4355, 0.5368, 0.6272,
                  0.7052, 0.771, 0.8253, 0.8692, 0.904, 0.9312, 0.9521, 0.9678,
                  0.9793, 0.9877, 0.9935, 0.9975, 1.0001, 1.0017, 1.0025,
                  1.0029, 1);
  --molla-lastra: linear(0, 0.0264, 0.0915, 0.179, 0.2766, 0.3761, 0.472,
                  0.5607, 0.6404, 0.7103, 0.7703, 0.8209, 0.8628, 0.897,
                  0.9245, 0.9462, 0.963, 0.9759, 0.9855, 0.9925, 0.9974,
                  1.0008, 1.003, 1.0042, 1.0048, 1.005, 1.0049, 1.0046, 1);
  --t-pressione: var(--t-press);
  --t-stato: var(--t-panel);
  --t-disco: var(--t-reveal);
  --t-lastra: var(--t-plate);
  --t-molla: 384ms;
  --t-molla-lastra: 448ms;
  --t-forma: 540ms;
  --t-uscita: 160ms;
  --sfalso: 60ms;
}

@supports (color: lab(from red l a b)) {
  :root {
    --seq-ink-1: lab(from var(--seq-1) clamp(0, (49.4 - l) * 1000, 100) 0 0);
    --seq-ink-2: lab(from var(--seq-2) clamp(0, (49.4 - l) * 1000, 100) 0 0);
    --seq-ink-3: lab(from var(--seq-3) clamp(0, (49.4 - l) * 1000, 100) 0 0);
    --seq-ink-4: lab(from var(--seq-4) clamp(0, (49.4 - l) * 1000, 100) 0 0);
    --seq-ink-5: lab(from var(--seq-5) clamp(0, (49.4 - l) * 1000, 100) 0 0);
  }
}

/* ================================= 4 · BASE =============================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--app-bg);
  color: var(--ink);
  font: 400 var(--fs-ui)/1.55 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}
/* Un indirizzo scritto per intero va a capo dove serve: un collegamento
   esterno lungo allargava la pagina di Collegamenti a 820 e 1100 px. */
a[href^="http"] { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--head); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; }
code, kbd, samp, pre { font-family: var(--code); font-size: .9em; }
table { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--data) 26%, transparent); }
:focus { outline: none; }
/* L'anello di fuoco porta l'accento, nella versione che si legge su ogni
   carta (`--pri-ink`, ≥ 4,5:1): giallo, arancio, verde e azzurro pieni sulla
   carta chiara scendono sotto 3:1, e un anello che non si vede non è un anello. */
:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
a, button, select, input, textarea, summary, [tabindex] { outline-color: var(--pri-ink); }
/* Una tela si legge anche da tastiera (grafici.js): l'anello sta dentro il
   suo riquadro, che spesso taglia ciò che sborda. */
canvas:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.num, .tab { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.lab { font: 500 11.5px/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ui-ico { display: block; flex: none; }
/* la cifra chiave: Quadra Display, e l'unità in Inter accanto */
.cifra, .big-num { font-family: var(--display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.u { font: 500 .62em var(--sans); margin-left: 3px; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.salta { position: fixed; left: var(--s-3); top: var(--s-3); z-index: var(--z-salta); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md); background: var(--ink); color: var(--paper); font-weight: 500;
  text-decoration: none; transform: translateY(-160%); transition: transform var(--t-panel) var(--ease-out); }
.salta:focus-visible { transform: none; outline-offset: 3px; }

/* ================================ 5 · GUSCIO ==============================
   La barra sulla sinistra, sul fondo dell'applicazione; il contenuto in un
   pannello di carta rientrato e arrotondato. Ritirata, la barra è un binario
   di 72 px di sole icone. Sotto i 900 px diventa il foglio che sale dal
   basso, e in fondo resta il dock. */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100dvh; }

.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-3) var(--s-4); min-width: 0; overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar > * { flex: none; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  height: 36px; padding: 0 0 0 var(--s-2); }
.brandlink { display: flex; align-items: center; color: var(--ink); border-radius: var(--r-sm); }
.brandlink .q-full { height: 22px; width: 94px; display: block; fill: currentColor; }
.brandlink .q-sym { display: none; width: 28px; height: 28px; fill: currentColor; }
.icb { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 36px; height: 36px;
  border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-2);
  transition: background var(--t-press), color var(--t-press); }
.icb:hover { background: var(--soft); color: var(--ink); }
.icb:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }

.ws { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); padding: var(--s-2);
  border-radius: var(--r-md); background: var(--paper); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.ws .av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--pri-fill); color: var(--on-pri-fill); box-shadow: var(--pri-edge); font: 600 14px var(--sans); flex: none; }
.ws-t { min-width: 0; }
.ws b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws small { display: block; font-size: 12px; color: var(--ink-2); }
.demo-tag { font: 600 var(--fs-0)/1 var(--sans); letter-spacing: .06em; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--soft); color: var(--ink); }

/* La barra della DEMO pubblica (solo nel suo processo: `demo_pubblica.py`).
   Una riga sola con le cose che si fanno: il ruolo, i Permessi, il giro
   guidato. Sta sopra la pagina e non la sostituisce; sul telefono va a capo
   senza scorrere di lato. */
.demo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: 6px 6px 6px var(--s-3); margin-bottom: var(--s-4); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: 0 0 0 1px var(--line); font-size: var(--fs-2); }
.demo-barra form { margin: 0; }
.demo-ruolo { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.demo-ruolo-e { color: var(--ink-2); }
.demo-barra-f { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
/* La lingua della DEMO: italiano o inglese, ricordata in un cookie. La scelta
   attiva è piena, come il ruolo; fuori dal guscio (errori, pagine legali) la
   mette `lingua.js` in un angolo. Fino al primo giro della traduzione la
   pagina inglese resta nascosta, al più 1,5 s. */
.demo-lingua { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.demo-lingua-e { display: inline-flex; align-items: center; gap: 5px; }
.demo-lingua-breve { display: none; }
.demo-lingua .ui-seg > [aria-current] { background: var(--pri-fill); color: var(--on-pri-fill); box-shadow: var(--pri-edge); }
.demo-lingua-volante { position: fixed; z-index: var(--z-avviso); left: 16px; bottom: 16px; display: inline-flex;
  gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: var(--ombra-menu); font: 600 12.5px/1 var(--sans); }
.demo-lingua-volante a { padding: 8px 12px; border-radius: 999px; color: inherit; text-decoration: none; }
.demo-lingua-volante a[aria-current] { background: var(--pri-fill); color: var(--on-pri-fill); box-shadow: var(--pri-edge); }
html.lingua-attesa body { visibility: hidden; animation: lingua-mostra 0s 1.5s forwards; }
@keyframes lingua-mostra { to { visibility: visible; } }
.demo-btn { --h: 32px; height: 32px; gap: 6px; padding: 0 10px; font-size: var(--fs-2); }
.demo-btn.demo-qui { background: var(--soft); }
.demo-giro { position: relative; }
.demo-giro > summary { list-style: none; cursor: pointer; }
.demo-giro > summary::-webkit-details-marker { display: none; }
.demo-giro[open] > summary:not(.btn-primo) { background: var(--soft); }
.demo-giro-l { position: absolute; z-index: var(--z-pop); top: calc(100% + 6px); right: 0; width: min(420px, calc(100vw - 32px));
  margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--ombra-menu); color: var(--ink-2); line-height: 1.55; }
.demo-giro-l li + li { margin-top: 6px; }
.demo-giro-l a { color: var(--ink); font-weight: 600; }
/* L'avviso della prima visita: le modifiche restano in questo browser. */
.demo-avviso { position: fixed; z-index: var(--z-avviso); right: var(--s-4); bottom: var(--s-4);
  width: min(360px, calc(100vw - 32px)); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--ombra-menu); font-size: var(--fs-2); line-height: 1.5; }
.demo-avviso[hidden] { display: none; }
.demo-avviso p { margin: 0 0 var(--s-3); color: var(--ink-2); }
.demo-avviso b { color: var(--ink); }
.demo-avviso-c { display: flex; gap: var(--s-2); }
@media (max-width: 760px) {
  .demo-avviso { left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .demo-avviso-c .demo-btn { flex: 1 1 0; }
}
@media (max-width: 760px) {
  .demo-barra { gap: 6px; padding: 6px; margin-bottom: var(--s-3); }
  .demo-ruolo { flex: 1 1 0; gap: 6px; }
  .demo-ruolo .ui-seg { flex: 1 1 auto; }
  .demo-ruolo-e { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .demo-lingua { margin-left: auto; }
  .demo-lingua-lunga { display: none; }
  .demo-lingua-breve { display: inline; }
  .demo-ruolo { flex: 1 1 100%; }
  .demo-barra-f { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 6px; margin-left: 0; }
  .demo-barra-f > * { min-width: 0; }
  .demo-btn { width: 100%; height: 44px; padding: 0 6px; }
  .demo-giro-l { position: fixed; left: 16px; right: 16px; top: auto; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom)); max-height: 60vh; overflow: auto; }
}

/* La sezione non concessa a un ruolo (`sezione_chiusa.html`) e i Permessi
   dei ruoli. Le voci non concesse non sono nel menu: questa pagina la vede
   solo chi ne apre l'indirizzo a mano. */
.sez-chiusa { max-width: 520px; margin: var(--s-8) auto; text-align: center; }
.sez-chiusa-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--soft); color: var(--ink); }
.sez-chiusa h1 { margin: var(--s-4) 0 var(--s-2); }
.sez-chiusa p { color: var(--ink-2); line-height: 1.55; }
.sez-chiusa-c { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }
.perm-scorre { overflow-x: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); background: var(--paper); }
.perm-tab { min-width: 520px; }
.perm-tab th, .perm-tab td { padding: 10px var(--s-4); vertical-align: middle; }
.perm-tab th[scope="row"] { text-align: left; font-weight: 400; }
.perm-tab th[scope="row"] b { display: block; font-weight: 600; }
.perm-tab th[scope="row"] small { display: block; color: var(--ink-2); font-size: var(--fs-1); margin-top: 2px; }
.perm-tab .perm-c { width: 108px; text-align: center; }
.perm-fisso, .perm-no { display: inline-grid; place-items: center; color: var(--ink-2); }
.perm-casella { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.perm-casella input { width: 18px; height: 18px; accent-color: var(--pri); cursor: pointer; }
.perm-riservata th, .perm-riservata td { background: var(--panel); }
.perm-azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }


.sw-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); margin-top: var(--s-2); }
.dept { position: relative; min-width: 0; }
.deptb { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px 0 var(--s-2); border-radius: 12px; font: 600 19px/1 var(--head);
  letter-spacing: -.025em; color: var(--ink); transition: background var(--t-press); max-width: 100%; }
.deptb:hover, .deptb[aria-expanded="true"] { background: var(--soft); }
.deptb .ui-ico { color: var(--ink-2); margin-top: 2px; }
.deptb:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
.dshort { display: none; }
.dmenu { position: absolute; z-index: var(--z-pop); top: calc(100% + 6px); left: 0; min-width: 300px; padding: 6px;
  display: grid; border-radius: 18px; background: var(--paper); box-shadow: var(--ombra-menu);
  transform-origin: top left; }
.dmenu:not([hidden]) { animation: menu-entra var(--t-panel) var(--ease-out); }
@keyframes menu-entra { from { opacity: 0; scale: .97; translate: 0 -4px; } }
.dmenu a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: var(--s-3); align-items: center;
  padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.dmenu a:hover, .dmenu a:focus { background: var(--soft); outline: none; }
.dmenu a:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.dmenu a b { display: block; font: 500 15.5px/1.3 var(--sans); }
.dmenu a small { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.dmenu a .ui-ico { opacity: 0; }
.dmenu a[aria-checked="true"] .ui-ico { opacity: 1; }
/* Senza JavaScript il menu resta aperto: i reparti sono due collegamenti. */
.senza-js .dmenu[hidden] { display: grid !important; position: static; min-width: 0; box-shadow: none; padding: 0; }

.nav { display: grid; gap: 1px; position: relative; margin-top: var(--s-1); }
.nav .grp { padding: var(--s-4) var(--s-3) var(--s-2); font: 500 11px/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }
.nav a { position: relative; display: flex; align-items: center; gap: var(--s-3); height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-md); text-decoration: none; color: var(--ink-2); font-size: 14px;
  transition: color var(--t-press), background var(--t-press); }
.nav a .ui-ico { flex: none; opacity: .85; }
.nav a .lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--soft) 60%, transparent); }
/* La voce attiva porta l'accento: una tinta del 12 % e l'icona nel colore. */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500;
  background: color-mix(in srgb, var(--data) 12%, var(--paper)); }
.nav a[aria-current="page"] .ui-ico { color: var(--data); opacity: 1; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--pri); }
.nav a:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
/* In linea, non a blocco: la stessa pastiglia sta nella barra (dove
   `margin-left: auto` la spinge a destra della voce) e dentro una cella o una
   frase, dove a blocco si allungava per tutta la larghezza. */
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full);
  display: inline-grid; place-items: center; width: max-content; max-width: 100%; vertical-align: middle;
  white-space: nowrap; background: var(--soft); color: var(--ink);
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.nav-badge-bad { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }
.nav-spia { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-2); }
.nav-spia.viva { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.nav-spia.parziale, .nav-spia.stantia { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.nav-spia.assente { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }

.owner { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding: var(--s-3);
  border-radius: var(--r-lg); text-decoration: none; background: var(--paper); box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--t-press); min-width: 0; }
.owner:hover { box-shadow: 0 0 0 1px var(--ink-2); }
.owner[aria-current="page"] { box-shadow: 0 0 0 1.5px var(--ink); }
.owner .lk { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); flex: none; }
.owner b { display: block; font-weight: 600; font-size: 13.5px; }
.owner small { display: block; font-size: 12px; color: var(--ink-2); }
.owner:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }

.sidebar-foot { display: grid; gap: var(--s-3); padding: 0 var(--s-3); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sidebar-foot b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sidebar-tools { display: flex; gap: 4px; margin-left: -8px; align-items: center; }
.sidebar-esci { margin: 0; display: contents; }
.tema-chiaro { display: none; }
:root[data-theme="dark"] .tema-scuro { display: none; }
:root[data-theme="dark"] .tema-chiaro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-scuro { display: none; }
  :root:not([data-theme="light"]) .tema-chiaro { display: block; }
}
/* L'accento: il pallino accanto al tema apre Argento e gli otto colori, su
   due colonne, con il campione e la spunta su quello scelto. Si comporta come
   il menu del reparto (frecce, Invio, Esc che rende il fuoco); sale verso
   l'alto perché sta in fondo alla barra. Senza JavaScript non c'è: la scelta
   vive nel browser e nel registro, e resta Argento. */
.acc-pop { position: relative; display: inline-flex; }
.senza-js .acc-pop { display: none; }
.accdot { width: 14px; height: 14px; border-radius: var(--r-full); display: inline-block; flex: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.acc-attuale { background: var(--pri-fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.acc-menu { position: absolute; z-index: var(--z-pop); bottom: calc(100% + 6px); left: -4px; min-width: 272px; padding: 6px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--ombra-menu); transform-origin: bottom left; }
.acc-menu:not([hidden]) { animation: menu-sale var(--t-panel) var(--ease-out); }
@keyframes menu-sale { from { opacity: 0; scale: .97; translate: 0 4px; } }
.acc-menu [role="menuitemradio"] { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center;
  gap: var(--s-2); min-height: 34px; padding: 0 10px; border-radius: var(--r-sm); font: 400 13.5px/1.2 var(--sans); color: var(--ink); }
.acc-menu [role="menuitemradio"]:hover, .acc-menu [role="menuitemradio"]:focus { background: var(--soft); outline: none; }
.acc-menu [role="menuitemradio"]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.acc-menu [role="menuitemradio"][aria-checked="true"] { font-weight: 600; }
.acc-menu [role="menuitemradio"] .ui-ico { margin-left: auto; opacity: 0; }
.acc-menu [role="menuitemradio"][aria-checked="true"] .ui-ico { opacity: 1; }

/* il pannello del contenuto */
main.mn { min-width: 0; margin: 8px 8px 8px 0; background: var(--paper); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; min-height: calc(100dvh - 16px);
  container: pg / inline-size; }
main.mn:focus { outline: none; }
.pg { padding: var(--s-6) clamp(var(--s-5), 3.4vw, var(--s-7)) var(--s-7); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-content: start; flex: 1; min-width: 0; }
.pf { display: flex; gap: var(--s-2) var(--s-5); justify-content: space-between; flex-wrap: wrap;
  padding: var(--s-5) clamp(var(--s-5), 3.4vw, var(--s-7)); border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.pf a { color: var(--ink-2); }
.pf a:hover { color: var(--ink); }
.pfl { white-space: nowrap; }

/* il binario: la barra ritirata */
@media (min-width: 901px) {
  /* `sticky` fa della barra un piano a sé: i suoi menu (reparto, accento)
     escono sopra il pannello solo se la barra sta sopra di lui. */
  .sidebar { z-index: var(--z-pop); }
  .app { transition: grid-template-columns var(--t-plate) var(--ease-out); }
  :root[data-barra="ritirata"] .app { grid-template-columns: var(--rail) minmax(0, 1fr); }
  :root[data-barra="ritirata"] .sidebar { padding-left: 12px; padding-right: 12px; align-items: center; }
  :root[data-barra="ritirata"] .sidebar > * { width: 100%; }
  :root[data-barra="ritirata"] .brandlink .q-full,
  :root[data-barra="ritirata"] .ws-t,
  :root[data-barra="ritirata"] .deptb .dept-nome,
  :root[data-barra="ritirata"] .deptb > .ui-ico,
  :root[data-barra="ritirata"] .nav .lbl,
  :root[data-barra="ritirata"] .owner-t,
  :root[data-barra="ritirata"] .sidebar-fresh { display: none; }
  :root[data-barra="ritirata"] .brandlink { justify-content: center; }
  :root[data-barra="ritirata"] .brandlink .q-sym { display: block; }
  :root[data-barra="ritirata"] .sidebar-top { flex-direction: column; height: auto; gap: var(--s-2); padding: 0; }
  :root[data-barra="ritirata"] .ws { justify-content: center; padding: 0; box-shadow: none; background: none; }
  :root[data-barra="ritirata"] .sw-row { flex-direction: column; gap: var(--s-2); }
  :root[data-barra="ritirata"] .dept { display: grid; justify-items: center; }
  :root[data-barra="ritirata"] .deptb { padding: 0; width: 44px; height: 44px; justify-content: center; }
  :root[data-barra="ritirata"] .dshort { display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: var(--r-md); background: var(--ink); color: var(--paper); font: 600 13px var(--sans); letter-spacing: 0; }
  :root[data-barra="ritirata"] .dmenu { left: 0; }
  :root[data-barra="ritirata"] .nav { justify-items: center; }
  :root[data-barra="ritirata"] .nav a { width: 44px; padding: 0; justify-content: center; }
  :root[data-barra="ritirata"] .nav a[aria-current="page"]::before { left: -14px; }
  :root[data-barra="ritirata"] .nav .grp { height: 1px; width: 28px; padding: 0; margin: 10px 0;
    background: var(--line); font-size: 0; }
  :root[data-barra="ritirata"] .nav-badge { position: absolute; top: 3px; right: 1px; min-width: 16px;
    height: 16px; padding: 0 4px; font-size: var(--fs-0); }
  :root[data-barra="ritirata"] .nav-spia { position: absolute; top: 8px; right: 8px; margin: 0; }
  :root[data-barra="ritirata"] .owner { width: 44px; padding: 6px; justify-content: center; }
  :root[data-barra="ritirata"] .sidebar-foot { padding: 0; justify-items: center; }
  :root[data-barra="ritirata"] .sidebar-tools { flex-direction: column; margin: 0; align-items: center; }
  :root[data-barra="ritirata"] .acc-menu { left: calc(100% + 8px); bottom: 0; }
}
/* Nella barra ritirata il menu dei reparti esce di lato: lì la barra non
   taglia. Aperta, la barra scorre dentro di sé e non allunga mai la pagina. */
@media (min-width: 901px) and (min-height: 760px) { :root[data-barra="ritirata"] .sidebar { overflow: visible; } }
/* Su uno schermo basso le voci si stringono prima di dover scorrere. */
@media (min-width: 901px) and (max-height: 900px) {
  .sidebar { gap: var(--s-2); padding-top: var(--s-4); }
  .nav a { height: 32px; }
  .nav a[aria-current="page"]::before { top: 8px; bottom: 8px; }
  .nav .grp { padding-top: var(--s-3); }
}

/* il dock e il foglio: solo sotto i 900 px */
.dockbar, .dock-velo { display: none; }

/* ============================ 6 · COMPONENTI ui-* ========================= */
/* bottone */
.ui-btn { --h: var(--ctl-h); position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); height: var(--h); padding: 0 var(--s-4); font: 500 var(--fs-ui)/1 var(--sans);
  letter-spacing: -.005em; border: 1px solid transparent; border-radius: var(--r-md); background: var(--pri-fill);
  color: var(--on-pri-fill); box-shadow: var(--pri-edge); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out),
    border-color var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out), opacity var(--t-press); }
.ui-btn:hover { background: var(--pri-fill-h); }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.ui-btn.sec { background: var(--soft); color: var(--ink); box-shadow: none; }
.ui-btn.sec:hover { background: color-mix(in srgb, var(--soft) 70%, var(--ink) 8%); }
.ui-btn.out { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.ui-btn.out:hover { background: var(--ink); color: var(--paper); }
.ui-btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
.ui-btn.ghost:hover { background: var(--soft); }
.ui-btn.danger { background: var(--err); color: var(--paper); box-shadow: none; }
.ui-btn.danger:hover { background: color-mix(in srgb, var(--err) 86%, var(--ink)); }
.ui-btn.link { background: none; box-shadow: none; color: var(--pri-ink); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; }
.ui-btn.sm { --h: var(--ctl-h-sm); padding: 0 var(--s-3); font-size: var(--fs-ui-sm); border-radius: var(--r-sm); }
.ui-btn.lg { --h: var(--ctl-h-lg); padding: 0 var(--s-5); font-size: 15px; border-radius: var(--r-lg); }
.ui-btn.icon { width: var(--h); padding: 0; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.ui-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: 500 11px/1 var(--sans); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 var(--line);
  border-radius: var(--r-xs); background: var(--paper); }

/* segmentato */
.ui-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px;
  background: var(--soft); border-radius: var(--r-full); isolation: isolate; }
.ui-seg > button, .ui-seg > a { all: unset; box-sizing: border-box; cursor: pointer; height: calc(var(--ctl-h) - 6px);
  padding: 0 var(--s-4); display: grid; place-items: center; font: 500 var(--fs-ui-sm)/1 var(--sans); color: var(--ink-2);
  z-index: 1; border-radius: var(--r-full); white-space: nowrap; transition: color var(--t-panel) var(--ease-out), background var(--t-panel); }
.ui-seg > [aria-pressed="true"], .ui-seg > [aria-current="page"], .ui-seg > [aria-selected="true"] {
  color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.ui-seg > button:focus-visible, .ui-seg > a:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.ui-seg.sm > button, .ui-seg.sm > a { height: 28px; padding: 0 var(--s-3); font-size: 12.5px; }

/* campi */
.ui-field { display: grid; gap: var(--s-2); min-width: 0; }
.ui-field > label, .ui-label { font: 500 var(--fs-ui-sm)/1.3 var(--sans); color: var(--ink); }
.ui-field .hint, .hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ui-input, .ui-select, .ui-textarea { width: 100%; height: var(--ctl-h); padding: 0 var(--s-3); font: 400 var(--fs-ui)/1.4 var(--sans);
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); min-width: 0; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ink-2); opacity: .85; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--ink)); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ui-textarea { height: auto; min-height: 96px; padding: var(--s-3); resize: vertical; border-radius: var(--r-lg); }
.ui-select { appearance: none; padding-right: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.ui-check { display: inline-flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; font-size: var(--fs-ui); line-height: 1.4; }
.ui-switch { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 36px; height: 20px; border-radius: 10px;
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t-panel) var(--ease-out); flex: none; }
.ui-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 8px;
  background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--t-panel) var(--ease-io); }
.ui-switch[aria-checked="true"] { background: var(--pri); box-shadow: none; }
.ui-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-pri); }

/* distintivi e bandiere di stato */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font: 500 12px/1 var(--sans);
  border-radius: var(--r-full); background: var(--soft); color: var(--ink); white-space: nowrap; }
.ui-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ui-badge.ok { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-t); }
.ui-badge.warn { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.ui-badge.err { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }
.ui-badge.line { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* menu a comparsa */
.ui-pop { position: relative; display: inline-block; }
.ui-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; z-index: var(--z-pop); background: var(--paper);
  box-shadow: var(--ombra-menu); padding: 6px; display: grid; border-radius: var(--r-lg); transform-origin: top left;
  opacity: 0; scale: .97; translate: 0 -4px; visibility: hidden;
  transition: opacity var(--t-panel) var(--ease-out), scale var(--t-panel) var(--ease-out),
    translate var(--t-panel) var(--ease-out), visibility 0s var(--t-panel); }
.ui-menu.open { opacity: 1; scale: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
.ui-menu.right { left: auto; right: 0; transform-origin: top right; }
.ui-menu [role^="menuitem"] { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center;
  gap: var(--s-3); min-height: 34px; padding: 0 var(--s-3); font: 400 var(--fs-ui)/1.2 var(--sans); color: var(--ink); border-radius: var(--r-sm); }
.ui-menu [role^="menuitem"]:hover, .ui-menu [role^="menuitem"]:focus { background: var(--soft); outline: none; }
.ui-menu .sep { height: 1px; background: var(--line); margin: 6px -6px; }
.ui-menu .grp { padding: var(--s-2) var(--s-3) var(--s-1); font: 500 11px/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }

/* dialoghi e tavolozza dei comandi */
dialog.ui-dialog { border: 0; padding: 0; background: var(--paper); color: var(--ink); width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombra-foglio);
  opacity: 0; scale: .97; transition: opacity var(--t-panel) var(--ease-out), scale var(--t-panel) var(--ease-out),
    overlay var(--t-panel) allow-discrete, display var(--t-panel) allow-discrete; }
dialog.ui-dialog[open] { opacity: 1; scale: 1; }
@starting-style { dialog.ui-dialog[open] { opacity: 0; scale: .97; } }
dialog.ui-dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background var(--t-panel) var(--ease-out),
  overlay var(--t-panel) allow-discrete, display var(--t-panel) allow-discrete; }
dialog.ui-dialog[open]::backdrop { background: rgba(0, 0, 0, .42); }
@starting-style { dialog.ui-dialog[open]::backdrop { background: rgba(0, 0, 0, 0); } }
dialog.ui-cmd { width: min(560px, calc(100vw - 32px)); margin-top: 12vh; }
.ui-cmd .q { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ui-cmd .q input { flex: 1; height: 52px; border: 0; background: transparent; color: var(--ink); font: 400 16px var(--sans); outline: none; min-width: 0; }
.ui-cmd ul { list-style: none; margin: 0; padding: var(--s-2); max-height: min(360px, 50dvh); overflow-y: auto; display: grid; }
.ui-cmd li.grp { padding: var(--s-2) var(--s-3) var(--s-1); font: 500 11px/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }
.ui-cmd li[role="option"] { display: flex; align-items: center; gap: var(--s-3); min-height: 38px; padding: 0 var(--s-3);
  font-size: var(--fs-ui); cursor: pointer; border-radius: var(--r-md); }
.ui-cmd li[role="option"] .k { margin-left: auto; color: var(--ink-2); font-size: 12px; }
.ui-cmd li[role="option"][aria-selected="true"] { background: var(--soft); }
.ui-cmd .empty { padding: var(--s-6); text-align: center; color: var(--ink-2); font-size: var(--fs-ui); }
.ui-cmd .foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }

/* ========================= 7 · PRIMITIVE DI PAGINA ========================
   I nomi sono quelli di sempre (i modelli, gli script e le prove li leggono);
   l'aspetto è quello del prototipo:
     .page-head  testata (titolo Sora, stato, comandi a destra)
     .piano      sezione: titolo chiuso da un filo, misure a destra
     .card       pannello di carta con il filo tutt'intorno
     .pannello   pannello su fondo grigio
     .kpi .mini  cifre: etichetta, valore in Quadra Display, nota
     .chip       bandiera di stato; .tag classificazione; .badge
     .banner     avviso di pagina; .note avviso locale; .chiosa provenienza
     .btn        bottoni; .field e i campi; .dropzone; .empty-state
   ========================================================================== */

/* --- testata di pagina ----------------------------------------------------- */
.page-head { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3) var(--s-4);
  flex-wrap: wrap; min-width: 0; }
.page-head h1 { font: 600 clamp(26px, 2.4vw, 32px)/1.1 var(--head); letter-spacing: -.03em; margin: 0; }
.page-head > .head-right, .page-head > form.head-right, .head-right { margin-left: auto; }
.page-head .ph-sub, .page-head > p { flex-basis: 100%; margin: -6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.page-head { align-items: flex-start; }
.page-head > h1 { align-self: center; }
.page-head > .chip, .page-head > .ph-flags { align-self: center; }
.ph-t { display: grid; gap: 6px; min-width: 0; flex: 1 1 300px; }
.ph-t > h1 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ph-sub { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ph-flags { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ph-acts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
/* un collegamento che porta alla pagina dove una cosa si approfondisce */
.go { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; margin: -6px -8px; border-radius: var(--r-sm);
  font: 500 13px/1 var(--sans); color: var(--pri-ink); text-decoration: none; white-space: nowrap;
  transition: background var(--t-press), color var(--t-press); }
.go:hover { background: var(--soft); color: var(--ink); }
.go:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
/* Una testata con la navigazione di sezione resta in vista mentre si scorre:
   la pagina è lunga, e le ancore servono lì. È carta piena, non un velo. */
.page-head:has(.sezioni) { position: sticky; top: 0; z-index: var(--z-testata); background: var(--paper);
  margin: calc(var(--s-6) * -1) calc(clamp(var(--s-5), 3.4vw, var(--s-7)) * -1) 0;
  padding: var(--s-5) clamp(var(--s-5), 3.4vw, var(--s-7)) var(--s-3);
  border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 1px solid var(--line); }
.page-head.is-stuck { border-radius: 0; box-shadow: 0 8px 20px -18px rgba(0, 0, 0, .5); }
.stuck-sentinella { height: 1px; margin-bottom: -1px; }
.page-head.compatta h1 { font-size: clamp(22px, 2vw, 26px); }
/* La testata in una riga (elenchi, Publisher, Marketing): titolo, il contesto
   che serve e i comandi, e poi lo schermo è del lavoro. Il sottotitolo si
   tronca prima di andare a capo; sotto i 760 px la riga si spezza. */
.page-head.testa-riga { flex-wrap: nowrap; align-items: center; gap: var(--s-3) var(--s-5); }
.testa-riga .ph-t { display: flex; align-items: baseline; gap: 6px var(--s-3); flex: 1 1 auto; min-width: 0; }
.testa-riga .ph-t > h1, .testa-riga > h1 { font-size: clamp(22px, 1.9vw, 26px); white-space: nowrap; flex: none; }
.testa-riga .ph-sub, .testa-riga .ph-t > p { margin: 0; flex: 0 1 auto; min-width: 0; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testa-riga .ph-acts, .testa-riga .tef-azioni { flex: none; flex-wrap: nowrap; }
.pg:has(> .page-head.testa-riga) { gap: 14px; padding-top: 22px; }
@media (max-width: 760px) {
  .page-head.testa-riga { flex-wrap: wrap; }
  .testa-riga .ph-t { flex-wrap: wrap; flex-basis: 100%; }
  .testa-riga .ph-sub, .testa-riga .ph-t > p { white-space: normal; }
  .testa-riga .ph-acts, .testa-riga .tef-azioni { flex-wrap: wrap; flex: 1 1 100%; }
  .testa-riga .ph-flags { flex-wrap: wrap; }
}
.sezioni { flex-basis: 100%; display: flex; gap: 2px; margin: 0 0 -13px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.sezioni::-webkit-scrollbar { display: none; }
.sez { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font: 500 13.5px/1 var(--sans);
  color: var(--ink-2); text-decoration: none; border-radius: 10px 10px 0 0; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--t-press), box-shadow var(--t-panel) var(--ease-out), background var(--t-press); }
.sez:hover { color: var(--ink); background: var(--panel); }
.sez[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pri); }
.sez:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
[data-sezione] { scroll-margin-top: calc(var(--testata, 112px) + var(--s-4)); }

/* --- titoli e testo --------------------------------------------------------- */
h1 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: 18px; margin: 0 0 var(--s-3); }
h3 { font-size: 15px; letter-spacing: -.01em; margin: 0 0 var(--s-2); }
h4 { font-size: 14px; margin: var(--s-4) 0 var(--s-1); }
.lead { font-size: 14.5px; color: var(--ink-2); max-width: 78ch; margin: 0; }
.small { font-size: 13px; line-height: 1.45; }
.mono { font-family: var(--code); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.file-name { font-family: var(--code); font-size: 12.5px; word-break: break-all; color: var(--ink); }
.prov { display: inline-block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
code { font: 12.5px/1.5 var(--code); background: var(--panel); padding: 2px 6px; border-radius: var(--r-xs); color: var(--ink); }
/* I collegamenti dentro una frase sono testo d'accento (`--pri-ink`); quelli
   di una tabella restano inchiostro: sono il nome della riga, non un invito. */
.card p a:not(.btn):not(.chip):not(.go), .card li a:not(.btn):not(.chip):not(.go), .lead a:not(.btn):not(.chip):not(.go), .empty-state a:not(.btn):not(.chip):not(.go), .piano p a:not(.btn):not(.chip):not(.go), .pannello p a:not(.btn):not(.chip):not(.go), .chiosa a:not(.btn):not(.chip):not(.go), .banner a:not(.btn):not(.chip):not(.go), .note a:not(.btn):not(.chip):not(.go) {
  color: var(--pri-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pri-ink) 35%, transparent);
  text-underline-offset: 3px; transition: text-decoration-color var(--t-press); }
td a:not(.btn):not(.chip):not(.go) {
  color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
  text-underline-offset: 3px; transition: text-decoration-color var(--t-press); }
.card p a:not(.btn):not(.chip):not(.go):hover, .card li a:not(.btn):not(.chip):not(.go):hover, .lead a:not(.btn):not(.chip):not(.go):hover, .empty-state a:not(.btn):not(.chip):not(.go):hover, .piano p a:not(.btn):not(.chip):not(.go):hover, .pannello p a:not(.btn):not(.chip):not(.go):hover, .chiosa a:not(.btn):not(.chip):not(.go):hover, .banner a:not(.btn):not(.chip):not(.go):hover, .note a:not(.btn):not(.chip):not(.go):hover, td a:not(.btn):not(.chip):not(.go):hover { text-decoration-color: currentColor; }
.checklist, .roadmap { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.checklist li, .roadmap li { margin-bottom: var(--s-2); }
.mt { margin-top: var(--s-3); }

/* --- il ritmo della pagina: lo decide la griglia, non i margini ------------- */
.pg > * { margin-top: 0; margin-bottom: 0; }

/* --- sezione ---------------------------------------------------------------- */
.piano { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; margin: 0; }
.piano-testa { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4);
  flex-wrap: wrap; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin: 0; }
.piano-testa h2, .piano-testa h3 { margin: 0; font: 600 18px/1.3 var(--head); letter-spacing: -.015em; }
.piano-q { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 80ch; }
.piano-misure { display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-left: auto;
  font-size: 13px; color: var(--ink-2); }
.piano-misure b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.piano-corpo { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.piano-corpo > * { margin-top: 0; margin-bottom: 0; }

/* --- pannelli ------------------------------------------------------------- */
.card { position: relative; min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-5); border: 0; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.card > h2, .card > .card-head h2, .card .slot-head h2 { font: 600 15px/1.35 var(--head); letter-spacing: -.01em; margin: 0 0 var(--s-3); }
.pg > .card > h2, .pg > section.card > h2, .card.forma > h2 { font-size: 17px; }
.card h3 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.card p, .card ul, .card ol, .card dl { margin: 0 0 var(--s-3); }
.card > p, .card > ul, .card > ol { max-width: 86ch; }
.card > *:last-child { margin-bottom: 0; }
.card > h2 + p, .card > h3 + p { margin-top: calc(var(--s-1) * -1); }
.card:has(> table) { overflow-x: auto; }
.grid .card, .piano-corpo .card { margin-bottom: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.card-head h2 { margin: 0; }
.card .sub { margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--line); }
.card-error { background: color-mix(in srgb, var(--err) 6%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 28%, transparent); }
.card-warn { background: color-mix(in srgb, var(--warn) 8%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.pannello { min-width: 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.grid { display: grid; gap: var(--grid-gap); margin: 0 0 var(--s-4); min-width: 0; }
.pg > .grid, .piano-corpo > .grid { margin: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.tight { gap: var(--s-2); }
@container pg (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pg (max-width: 720px) { .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* --- provenienza e note ---------------------------------------------------- */
.chiosa { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 80ch; }
.chiosa strong, .chiosa b { color: var(--ink); font-weight: 500; }
.chiosa + .chiosa { margin-top: var(--s-2); }
.note { margin: var(--s-3) 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 86ch; }
.note-warn::before, .note-bad::before { display: inline-block; margin-right: 6px; font-weight: 700; }
.note-warn::before { content: "▲"; color: var(--warn); font-size: .8em; }
.note-bad::before { content: "✕"; color: var(--err); }
details.note { margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); max-width: none; }
details.note summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
details.note summary:hover, details.note[open] summary { color: var(--ink); }
details.note[open] summary { margin-bottom: var(--s-2); }
.warn-text { color: var(--warn); }
.bad-text, .pos-bad { color: var(--err); }
.pos-bad { font-weight: 600; }
.error-text { white-space: pre-wrap; color: var(--err); font: 12.5px/1.5 var(--code); background: var(--panel);
  border-radius: var(--r-md); padding: var(--s-3); margin: 0 0 var(--s-3); overflow-x: auto;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 28%, transparent); }

/* --- avvisi di pagina ------------------------------------------------------ */
.banner { position: relative; display: block; margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5) var(--s-4) 52px; border: 0;
  border-radius: var(--r-lg); background: var(--panel); font-size: 14px; line-height: 1.55; color: var(--ink); }
.banner::before { content: "i"; position: absolute; left: 20px; top: calc(var(--s-4) + 1px); display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; font: 700 12px/1 var(--sans); background: var(--soft); color: var(--ink); }
.banner > p, .banner > ul { margin: 0; }
.banner > * + * { margin-top: var(--s-2); }
.banner-ok { background: color-mix(in srgb, var(--ok) 8%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent); }
.banner-warn { background: color-mix(in srgb, var(--warn) 9%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.banner-bad { background: color-mix(in srgb, var(--err) 7%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 28%, transparent); }
.banner-ok::before { content: "✓"; background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-t); }
.banner-warn::before { content: "!"; background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.banner-bad::before { content: "✕"; background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }

/* --- bandiere di stato ----------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-full);
  font: 500 12.5px/1 var(--sans); background: var(--soft); color: var(--ink); white-space: nowrap; text-decoration: none;
  vertical-align: middle; }
.chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-ok, .chip-collegato { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-t); }
.chip-stale, .chip-loading, .chip-parziale, .chip-permesso, .chip-no_report { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.chip-no_input, .chip-errore, .chip-bloccato { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }
.chip-off, .chip-previsto, .chip-configurabile, .chip-manuale { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.chip-off::before, .chip-previsto::before, .chip-configurabile::before, .chip-manuale::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip-action { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  transition: box-shadow var(--t-press), background var(--t-press); }
.chip-action::before { display: none; }
.chip-action:hover { box-shadow: inset 0 0 0 1px var(--ink-2); background: var(--panel); }
.chip:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
a.chip:not(.chip-action):hover { box-shadow: inset 0 0 0 1px currentColor; }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 0; border-radius: var(--r-xs);
  font: 600 var(--fs-0)/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; background: var(--soft); color: var(--ink-2);
  vertical-align: 1px; white-space: nowrap; }
.tag-active { background: var(--pri-fill); color: var(--on-pri-fill); box-shadow: var(--pri-edge); }
.tag-hb, .tag-nota { background: color-mix(in srgb, var(--data) 12%, var(--paper)); color: var(--ink); }
.tag-pt { background: var(--soft); color: var(--ink-2); }
.tag-warn { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.tag-bad { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }
.tag-ok { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-t); }
.tag-duro { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--err); }
.tag-preferenza { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--warn); }
.tag-segnale { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font: 500 11.5px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.badge-ok { color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.badge-warn { color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.pri { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font: 600 var(--fs-0)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pri-alta { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err-t); }
.pri-media { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.pri-bassa { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.stato-caso { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  font: 500 12px/1 var(--sans); background: var(--soft); color: var(--ink-2); white-space: nowrap; }
.stato-in_prova { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn-t); }
.stato-adottato, .stato-procedura { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-t); }
.stato-scartato { background: transparent; box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; }

/* --- cifre ------------------------------------------------------------------ */
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kpi-label, .card.kpi > h2, .grid .card.kpi > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px;
  min-height: 0; font: 500 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.kpi-value { margin: 0; font: 400 clamp(28px, 2.8vw, 38px)/1.05 var(--display); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.kpi-value.kpi-testo { font: 600 22px/1.2 var(--sans); letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere; }
.kpi-value.kpi-testo.mono { font: 500 16px/1.3 var(--code); }
.kpi-value small { font: 400 14px var(--sans); color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.card.kpi > .kpi-value + p { align-self: stretch; margin: 2px 0 0; padding: 0; border: 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.grid .card.kpi { justify-content: flex-start; }
.kpi-alert { box-shadow: 0 0 0 1px color-mix(in srgb, var(--err) 30%, transparent); }
.kpi-alert .kpi-value { color: var(--err); }
.mini { display: grid; gap: 2px; align-content: start; padding: 0; border: 0; background: none; box-shadow: none; }
.mini-v { font: 400 clamp(20px, 1.8vw, 24px)/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mini-l { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.pop { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 var(--s-6); margin: var(--s-2) 0 0; }
.pop-wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pop > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 14px; }
.pop dt { color: var(--ink-2); min-width: 0; }
.pop dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prop-strip { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.prop-strip > div { display: flex; flex-direction: column; gap: 3px; }
.prop-strip .k { font-size: 12.5px; color: var(--ink-2); }
.prop-strip strong { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; }
.src-recap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line); font-size: 13px; }
.recap-item em { font-style: normal; color: var(--ink-2); margin-right: 6px; }
.chart-box { position: relative; height: 220px; margin-top: var(--s-2); }

/* --- bottoni --------------------------------------------------------------- */
.btn, .btn-primo { --h: var(--ctl-h); position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); height: var(--h); padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-md);
  font: 500 var(--fs-ui)/1 var(--sans); letter-spacing: -.005em; background: var(--pri-fill); color: var(--on-pri-fill);
  box-shadow: var(--pri-edge); text-decoration: none; white-space: nowrap; cursor: pointer; vertical-align: middle;
  transition: background var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out),
    box-shadow var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out), opacity var(--t-press); }
.btn:hover { background: var(--pri-fill-h); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-ghost { background: var(--soft); color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--soft) 70%, var(--ink) 8%); }
.btn-quieto { background: transparent; color: var(--ink); box-shadow: none; }
.btn-quieto:hover { background: var(--soft); }
.btn-small { --h: var(--ctl-h-sm); padding: 0 var(--s-3); font-size: var(--fs-ui-sm); border-radius: var(--r-sm); }
.btn-danger, .btn-pericolo { background: var(--err); color: var(--paper); box-shadow: none; }
.btn-danger:hover, .btn-pericolo:hover { background: color-mix(in srgb, var(--err) 86%, var(--ink)); }
.card > .btn, .card > p + .btn { margin-top: var(--s-3); }
.linkish { background: none; border: 0; padding: 0; color: var(--pri-ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--t-press); }
.linkish:hover { text-decoration-color: currentColor; }

/* --- campi ----------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-sm { flex: 0 1 200px; }
.field-grow { flex: 1 1 240px; }
.field > span:not(.field-help), .gen-form label, .gate-form label, .field > label {
  font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.field-help { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; max-width: 52ch; }
select, textarea,
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"])) {
  min-width: 0; max-width: 100%; min-height: var(--ctl-h); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); font: 400 var(--fs-ui)/1.4 var(--sans);
  transition: border-color var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
textarea { min-height: 96px; padding: var(--s-3); border-radius: var(--r-lg); resize: vertical; }
select:not([multiple]) { appearance: none; padding-right: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
select[multiple] { padding: var(--s-2); }
select:hover, textarea:hover, input:where(:hover:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
  border-color: color-mix(in srgb, var(--line) 50%, var(--ink)); }
select:focus, textarea:focus, input:where(:focus:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .85; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--pri); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; vertical-align: -3px; cursor: pointer; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
input[type="file"] { font-size: 13px; color: var(--ink-2); max-width: 100%; }
input[type="file"]::file-selector-button { height: 32px; padding: 0 12px; margin-right: 12px; border: 0; border-radius: var(--r-sm);
  background: var(--soft); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.gen-form, .upload-form { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.upload-form { display: block; }
.gen-form .field { gap: 6px; }
.gate-form { display: flex; align-items: flex-end; gap: var(--s-3); margin: var(--s-4) 0 var(--s-1); }
.gate-form .field { flex: 1; }

/* --- caricamento file ------------------------------------------------------ */
.dropzone { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); border: 1.5px dashed color-mix(in srgb, var(--ink) 25%, var(--paper));
  border-radius: var(--r-xl); background: var(--panel); cursor: pointer; transition: border-color var(--t-press), background var(--t-press); }
.dropzone:hover, .dropzone.over, .dropzone:focus-within { border-color: var(--ink); }
.dropzone:focus-within { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.dz-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: 22px; font-weight: 300; }
.dz-text strong { display: block; font: 600 16px/1.3 var(--head); }
.dz-text em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.dz-chosen { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--panel);
  font: 12.5px var(--code); color: var(--ink); word-break: break-all; }
.upload-actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }

/* --- vuoti e attese -------------------------------------------------------- */
.empty-state { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-5); border: 0; border-radius: var(--r-lg);
  background: var(--panel); text-align: center; }
.card.empty-state { box-shadow: none; }
.empty-mark { width: 48px; height: 48px; margin: 0; display: grid; place-items: center; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line); font-size: 20px; color: var(--ink); }
.empty-state h2, .empty-state h3 { margin: 0; font: 600 16px/1.3 var(--head); letter-spacing: -.01em; color: var(--ink); }
.empty-state p { max-width: 52ch; margin: 0 auto; font-size: 14px; color: var(--ink-2); }
.job-card { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.progress { height: 4px; margin: var(--s-3) 0; overflow: hidden; border-radius: var(--r-full); background: var(--soft); }
.progress-bar { height: 100%; width: 32%; border-radius: inherit; background: var(--pri); animation: slide 1.4s var(--ease-io) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.job-card p { font: 12.5px/1.5 var(--code); color: var(--ink-2); }
.log { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); max-height: 340px; overflow: auto; white-space: pre-wrap;
  border-radius: var(--r-md); background: var(--panel); font: 12px/1.6 var(--code); color: var(--ink-2); }
[aria-busy="true"] { cursor: progress; }

/* ================================ 8 · TABELLE =============================
   Un contorno arrotondato, l'intestazione su fondo grigio e mai maiuscola, le
   righe separate da un filo; le colonne numeriche a destra, in cifre
   tabellari. Scorrono di lato nel loro contenitore, mai la pagina. */
.tbl-scroll { overflow: auto; margin: 0; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line);
  min-width: 0; }
.tbl-scroll > table { margin: 0; }
/* Una tabella più larga della sua cornice lo DICE: un'ombra sul bordo da cui
   continua, che sparisce quando si arriva in fondo. Le prime due sfumature
   scorrono con il contenuto (`local`) e coprono l'ombra agli estremi; le due
   ombre restano ferme sui bordi. Tutto nel fondo della cornice, sotto le
   righe (che sono trasparenti): niente JavaScript e niente che tagli i
   pannelli a comparsa. Fino al 2026-09-28 a 1100–1280 px l'ultima colonna
   dell'Elenco e dei Clienti era tagliata senza un indizio. */
.tbl-scroll {
  background:
    linear-gradient(90deg, var(--paper) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 16px 100% no-repeat,
    linear-gradient(270deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 16px 100% no-repeat,
    var(--paper);
}
/* Il testo per i lettori di schermo dentro una cella (`.sr-only`, assoluto)
   stava dove l'avrebbe messo la tabella senza cornice, cioè fuori dalla
   pagina, e la faceva scorrere di lato: la cornice che scorre è anche il suo
   riferimento. */
.tbl-scroll { position: relative; }
.card .tbl-scroll, .pannello .tbl-scroll { margin: var(--s-3) 0; }
.card > .tbl-scroll:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin: var(--s-3) 0; }
.tbl-scroll table, .card > table:last-child { margin: 0; }
th, td { text-align: left; padding: 11px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
thead th { position: sticky; top: 0; z-index: 1; font: 500 12px/1.2 var(--sans); letter-spacing: .02em; text-transform: none;
  color: var(--ink-2); background: var(--panel); white-space: nowrap; vertical-align: bottom; padding-top: 12px; padding-bottom: 12px; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr { transition: background var(--t-press); }
tbody tr:hover { background: var(--panel); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
td.num small, td.num .small, td.num .muted { display: inline-block; }
td .small, td.small { font-size: 12.5px; line-height: 1.5; }
td strong { font-weight: 600; }
td .note { margin-top: var(--s-2); }
td .prov { margin-top: 2px; }
.sortable thead th { cursor: pointer; user-select: none; }
.sortable thead th:hover { color: var(--ink); }
.sortable thead th.sorted-asc::after { content: " ↑"; color: var(--ink); }
.sortable thead th.sorted-desc::after { content: " ↓"; color: var(--ink); }
.row-active { background: color-mix(in srgb, var(--data) 7%, var(--paper)); box-shadow: inset 3px 0 0 var(--pri); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline-block; margin-left: var(--s-2); }
.src-table td { vertical-align: top; }

/* ============================ LA LASTRA ===================================
   Il dettaglio che si apre senza lasciare la pagina: un foglio a destra,
   staccato dal bordo e arrotondato, sopra un velo che lascia leggere il
   contesto. È l'unico elemento con un'ombra vera. */
.lastra { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: var(--z-lastra); width: min(440px, calc(100vw - 16px));
  display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--ombra-foglio);
  transform: translateX(calc(100% + 16px)); visibility: hidden; overflow: hidden;
  transition: transform var(--t-plate) var(--ease-out), visibility 0s linear var(--t-plate); }
.lastra.aperta { transform: none; visibility: visible; transition: transform var(--t-plate) var(--ease-out), visibility 0s; }
.lastra.lastra-larga { width: min(720px, calc(100vw - 16px)); }
.lastra-velo { position: fixed; inset: 0; z-index: var(--z-lastra-velo); background: rgba(0, 0, 0, .42); opacity: 0; visibility: hidden;
  transition: opacity var(--t-plate) var(--ease-out), visibility 0s linear var(--t-plate); }
.lastra-velo.aperta { opacity: 1; visibility: visible; transition: opacity var(--t-plate) var(--ease-out), visibility 0s; }
.lastra-testa { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--line); }
.lastra-testa h2 { margin: 0; font: 600 18px/1.3 var(--head); }
.lastra-testa p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lastra-chiudi { flex: none; margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background var(--t-press), color var(--t-press), transform var(--t-press) var(--ease-out); }
.lastra-chiudi:hover { background: var(--soft); color: var(--ink); }
.lastra-chiudi:active { transform: scale(.94); }
.lastra-chiudi:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.lastra-corpo { flex: 1; padding: var(--s-5); overflow-y: auto; overscroll-behavior: contain; }
.lastra-corpo > * + * { margin-top: var(--s-5); }
@media (prefers-reduced-motion: reduce) { .lastra { transform: none; } }

/* La lastra CENTRATA — il dettaglio di un'analisi (2026-09-26).
   Un modulo, un gruppo di un grafico, un contenuto: si apre al centro, sopra
   la pagina che resta ferma dietro il velo, largo quanto serve e mai quanto lo
   schermo; il corpo scorre dentro. Cresce dal riquadro che l'ha aperta
   (app.js), quindi l'origine delle trasformazioni è l'angolo in alto a
   sinistra: la stessa in cui app.js misura da dove parte. La lastra laterale
   resta per chi la chiede (`laterale`): lavoro su un record, non lettura. */
.lastra { transform-origin: 0 0; }
.lastra.lastra-centrata { top: 0; right: 0; bottom: 0; left: 0; margin: auto;
  width: min(680px, calc(100vw - 48px)); height: fit-content; max-height: min(760px, calc(100dvh - 48px));
  transform: scale(.98); opacity: 0;
  transition: transform var(--t-uscita) var(--ease-out), opacity var(--t-uscita) var(--ease-out),
    visibility 0s linear var(--t-uscita); }
.lastra.lastra-centrata.aperta { transform: none; opacity: 1;
  transition: transform var(--t-plate) var(--ease-out), opacity var(--t-plate) var(--ease-out), visibility 0s; }
.lastra.lastra-centrata.lastra-larga { width: min(1180px, calc(100vw - 64px)); height: min(860px, calc(100dvh - 48px)); max-height: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .lastra.lastra-centrata, .lastra.lastra-centrata.lastra-larga {
    inset: calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    margin: 0; width: auto; height: auto; max-height: none; border-radius: var(--r-lg); }
}

/* ======================= 9 · PLANCIA A UNA SCHERMATA ======================
   Le pagine che si guardano e non si leggono (Analitiche, Qualità dati,
   Analitiche clienti, Richieste web, le sei del Marketing) stanno in una
   finestra: sopra i 1100 × 680 px la pagina non scorre. Testata, una striscia
   di cinque cifre, e una griglia esplicita di riquadri; ciò che è lungo scorre
   DENTRO il suo riquadro. Sotto quella misura i riquadri si impilano e la
   pagina torna a scorrere.

   Due modi di scrivere la griglia, stesso aspetto:
     .plancia  i moduli della plancia (`_plancia.html`), casella in
               `grid-area`, apribili nella lastra, disposizione modificabile;
     .fitgrid  riquadri semplici (`.cd-fit`), posizione in `--c` e `--r`,
               colonne e righe in `--cols` e `--rows` sul contenitore.
   ========================================================================== */

/* la striscia delle cifre (`.sommario`) */
.sommario { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-lg); background: var(--paper); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), inset 0 3px 0 var(--pri); }
.som-voce { flex: 1 1 150px; display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background var(--t-press); }
.som-voce:first-child { border-left: 0; }
a.som-voce:hover { background: var(--panel); }
a.som-voce:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.som-e { font: 500 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.som-v { font: 400 clamp(24px, 2.4vw, 32px)/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.som-v .an-vuoto, .som-v em { font: 600 20px/1.2 var(--sans); font-style: normal; color: var(--ink-2); }
.som-guida .som-v { color: var(--pri-ink); }
.som-s { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
/* «Come si conta» (e l'indicazione «si apre» della striscia di Analitiche):
   un'icona, con il testo che resta il nome accessibile e il suggerimento. */
.som-apri { flex: none; align-self: center; margin: 0 var(--s-3); width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: var(--r-full); background: transparent; color: var(--ink-2); font-size: 0; cursor: pointer;
  display: grid; place-items: center; overflow: hidden; }
.som-apri::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat; }
span.som-apri::before { --ico-info: var(--ico-chev-r); }
.som-apri:hover { background: var(--soft); color: var(--ink); }
.som-apri:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
:root { --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v6M12 7v2'/%3E%3C/svg%3E");
  --ico-chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
/* L'occhiello va a capo invece di troncarsi: «CLIENTI IN CO…» non è
   un'etichetta più corta, è un'altra etichetta. */
@container pg (max-width: 1000px) {
  .som-e { font-size: 11px; letter-spacing: .03em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; line-height: 1.2; }
}
@container pg (max-width: 980px) {
  .som-voce { flex-basis: 45%; border-top: 1px solid var(--line); }
  .som-apri { margin: var(--s-3) var(--s-4); } }

/* i moduli della plancia */
.plancia { display: grid; gap: var(--grid-gap); min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto); }
@media (max-width: 1099px), (max-height: 679px) { .plancia > .mod { grid-area: auto !important; order: var(--ordine, 0); } }
@container pg (max-width: 720px) { .plancia { grid-template-columns: minmax(0, 1fr); } }
.mod { position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; min-height: 0; padding: var(--s-4) var(--s-5);
  border: 0; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--ink);
  text-align: left; font: inherit; overflow: hidden; container-type: inline-size;
  transition: box-shadow var(--t-press), transform var(--t-press) var(--ease-out); }
.mod[data-apre] { cursor: pointer; }
.mod[data-apre]:hover { box-shadow: 0 0 0 1px var(--ink-2); }
.mod[data-apre]:active { transform: scale(.995); }
.mod[data-apre]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.mod[data-tono="warn"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.mod[data-tono="bad"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--err) 40%, transparent); }
/* La testata di un modulo: titolo a sinistra, lo stato a destra sulla STESSA
   linea di base («per spesa», «0 nel periodo», «pubblicati nel periodo»). Lo
   spazio a destra per il segno «si apre» c'è solo dove il modulo si apre. */
.mod-testa { flex: none; display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; padding-right: 22px; margin: 0; }
.mod:not([data-apre]) > .mod-testa { padding-right: 0; }
.mod-testa .mod-stato { font-variant-numeric: tabular-nums; }
/* Il titolo non si accorcia per fare posto allo stato: prende la sua misura
   (fino alla riga intera) e lo stato usa ciò che resta, o sparisce. */
.mod-testa h2 { flex: 0 0 auto; max-width: 100%; min-width: 0; margin: 0; font: 600 14.5px/1.35 var(--head); letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* il titolo ha la precedenza: lo stato si accorcia per primo */
.mod-testa .mod-stato { flex: 0 1000 auto; min-width: 0; margin-left: auto; font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 230px) { .mod-testa .mod-stato { display: none; } }
.mod-apri { position: absolute; top: var(--s-4); right: var(--s-4); width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--ink-2); opacity: .55; transition: opacity var(--t-press); pointer-events: none; }
.mod[data-apre]:hover .mod-apri, .mod[data-apre]:focus-visible .mod-apri { opacity: 1; }
.mod-apri svg { width: 12px; height: 12px; }
/* Il corpo è un CONTENITORE (`corpo`): le forme dentro si misurano su di lui,
   non sulla finestra. In larghezza sempre; in altezza sulla plancia a una
   schermata, dove il riquadro ha un'altezza sua (più sotto). § 9b. */
.mod-corpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-2); overflow: hidden;
  container: corpo / inline-size; }
.mod-corpo > * { margin-block: 0; }
.mod-presa { display: none; }
.plancia-comandi { display: flex; gap: var(--s-2); align-items: center; }

/* la griglia dei riquadri semplici */
.fitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--grid-gap); min-width: 0; }
.fitgrid > * { min-width: 0; margin: 0; }
.cd-fit { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.cd-fit > header { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cd-fit > header h2, .cd-fit > header h3 { margin: 0; font: 600 15px/1.35 var(--head); letter-spacing: -.01em; }
.cd-fit > header .x { font-size: 12.5px; color: var(--ink-2); }
.cd-fit > .fill { min-width: 0; display: grid; gap: var(--s-3); }
.cd-fit > .fill.scroll { max-height: 440px; overflow: auto; }
.cd-fit > .fill > * { margin: 0; }
.cd-fit .tbl-scroll { box-shadow: none; border-radius: 0; overflow: visible; }

/* la finestra: sopra i 1100 × 680 la pagina non scorre */
@media (min-width: 1100px) and (min-height: 680px) {
  body.una-schermata main.mn { height: calc(100dvh - 16px); min-height: 0; overflow: hidden auto; }
  /* Una pagina che a 1100 × 680 non ci sta (la casella vuota di Richieste web,
     con la sua spiegazione) scorre DENTRO il corpo, invece di traboccare
     sopra il piede; una plancia che ci sta non mostra niente di diverso. */
  /* Lo spazio della finestra è quello della scala (Brand Standards 5.4): fra
     i blocchi della pagina e fra i riquadri il gutter `--s-4`, il margine da
     `--s-5` a `--s-6` con la finestra. Fino al 2026-09-27 qui c'erano 14, 18
     e 22 pixel: valori di mezzo che nessun'altra pagina usava. */
  body.una-schermata .pg { flex: 1; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-5) clamp(var(--s-5), 2.4vw, var(--s-6)) var(--s-4); }
  body.una-schermata .pg > * { flex: none; }
  body.una-schermata .pg > .plancia, body.una-schermata .pg > .fitgrid,
  body.una-schermata .pg > .una-riempie { flex: 1 1 auto; min-height: 0; }
  /* Una tabella che riempie la finestra scorre dentro di sé, con la testata ferma. */
  body.una-schermata .pg > .tbl-scroll.una-riempie { flex: 0 1 auto; overflow: auto; scrollbar-width: thin; }
  body.una-schermata .pg > .tbl-scroll.una-riempie thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  /* Analitiche: il periodo scambia un contenitore intero (portafoglio.js) */
  body.una-schermata .pg > #periodo-contenuto { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-4); }
  body.una-schermata #periodo-contenuto > * { flex: none; }
  body.una-schermata #periodo-contenuto > .plancia { flex: 1 1 auto; min-height: 0; }
  body.una-schermata .pf { flex-wrap: nowrap; padding: 9px clamp(24px, 2.4vw, 36px); font-size: 11.5px; }
  body.una-schermata .pft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.una-schermata .page-head { align-items: center; row-gap: var(--s-2); }
  body.una-schermata .page-head h1 { font-size: 26px; }
  body.una-schermata .ph-sub, body.una-schermata .page-head p.muted { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.una-schermata .som-voce { padding: var(--s-3) var(--s-4); }
  body.una-schermata .som-v { font-size: clamp(22px, 2vw, 28px); }
  body.una-schermata .som-s { font-size: 12px; -webkit-line-clamp: 1; }
  body.una-schermata .banner { padding-top: 10px; padding-bottom: 10px; }
  body.una-schermata .banner::before { top: 11px; }

  body.una-schermata .plancia { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto; gap: var(--s-4); }
  body.una-schermata .plancia[data-plancia="portafoglio"],
  body.una-schermata .plancia[data-plancia="clienti"] { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  /* Il riquadro tiene il suo padding, `--s-4` sopra e sotto e `--s-5` ai lati,
     com'è fuori dalla plancia: non si stringe per farci stare di più. Ciò che
     non ci sta lo decide il contenuto (§ 9b), non il bordo. */
  body.una-schermata .mod-corpo { overflow: auto; scrollbar-width: thin; margin-right: -8px; padding-right: 8px;
    container-type: size; }

  body.una-schermata .fitgrid { grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr))); grid-template-rows: var(--rows, 1fr); gap: var(--s-4); }
  body.una-schermata .fitgrid > * { grid-column: var(--c, auto); grid-row: var(--r, auto); min-height: 0; }
  body.una-schermata .fitgrid > .cd-fit { overflow: hidden; padding: var(--s-4) var(--s-5); }
  body.una-schermata .fitgrid > .cd-fit > .fill { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin;
    margin-right: -8px; padding-right: 8px; align-content: start; }
  body.una-schermata .fitgrid > .cd-fit > .fill.scroll { max-height: none; }
}
/* La disposizione modificabile: in modifica i moduli mostrano la presa. */
body.plancia-modifica .mod-presa { display: grid; place-items: center; position: absolute; top: 10px; left: 8px; width: 10px; color: var(--ink-2); }

/* ================== 9b · DENTRO IL RIQUADRO: SPAZIO E FORME ===============
   (2026-09-28) Il riquadro ha una misura che non sceglie: la decide la
   casella in cui il titolare l'ha messo e la finestra. Le forme dentro non
   possono quindi contare su un'altezza scritta in pixel né su una soglia di
   finestra: si misurano sul corpo del modulo (`container: corpo`), che sulla
   plancia a una schermata è un contenitore in tutte e due le dimensioni.

   Tre regole, e valgono per ogni modulo:
     1. la forma prende lo spazio che resta (`flex: 1`, lati in `cqh`/`cqw`),
        con un pavimento sotto cui smette di essere leggibile;
     2. le letture secondarie CEDONO in ordine quando l'altezza manca, invece
        di spingere la forma fuori dal bordo: `.cede-1` sotto i 200 px di
        corpo, `.cede-2` sotto i 130. Ciò che cede è sempre nel dettaglio che
        il modulo apre: si toglie la ripetizione, mai l'informazione;
     3. dove la larghezza manca cambia la scrittura, non il dato (un nome
        breve, due righe di comandi invece di una tagliata).
   ========================================================================== */
/* Le celle strette (Brand Standards 5.4: «s-5 sempre, s-4 solo sotto i 600
   px o nelle celle strette»). Sotto i 880 px di plancia un modulo da sei
   colonne su ventiquattro scende sotto i duecento pixel: lì il padding ai
   lati è `--s-4` per tutti i riquadri della plancia, così restano uguali
   fra loro. */
.plancia { container: plancia / inline-size; }
@container plancia (max-width: 879px) { .plancia > .mod { padding-inline: var(--s-4); } }
/* LA LACUNA — un dato che non c'è non diventa mai zero (DESIGN.md). Una
   superficie tratteggiata con scritto perché, uguale a ogni scala: la cella
   di una tabella, una misura, un riquadro, una tela (`data-lacuna` lo mette
   `grafici.js` sul contenitore della tela, con il motivo che il server ha
   scritto in `data-vuoto`). Non è un errore: niente rosso, niente bordo di
   stato. */
.lacuna, [data-lacuna] { background: var(--hatch), var(--panel); box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md); color: var(--ink-2); }
[data-lacuna] { position: relative; display: grid; place-items: center; min-height: 72px; }
[data-lacuna] > canvas { display: none !important; }
[data-lacuna]::after { content: attr(data-lacuna); max-width: 40ch; margin: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); background: var(--paper); font: 400 12.5px/1.45 var(--sans); color: var(--ink-2);
  text-align: center; }
@container corpo (max-height: 199px) { .cede-1 { display: none !important; } }
@container corpo (max-height: 129px) { .cede-2 { display: none !important; } }

/* ============================= 11 · MOVIMENTO =============================
   L'ingresso di una pagina: ogni blocco sale di 8 px e si accende, 60 ms dopo
   il precedente. Una volta sola, all'arrivo.

   Due regole, e tutte e due vengono da un guasto misurato (2026-09-26).
   · `backwards`, mai `both`: con `both`, finita l'animazione, ogni blocco
     restava con `transform: matrix(1,0,0,1,0,0)` — un contesto di
     impilamento per blocco, che intrappolava i menu e i pannelli della
     testata sotto il blocco successivo.
   · Il primo fotogramma si legge: si parte da metà opacità, non da zero. Se
     la linea del tempo delle animazioni non avanza (una scheda in secondo
     piano, una cattura automatica in Safari) la pagina resta leggibile,
     invece di restare vuota con il contenuto presente nel documento.
   Lo spostamento usa `translate`, non `transform`: `transform` resta libero
   per chi anima un blocco per altre ragioni. */
@keyframes rise { from { opacity: .5; translate: 0 8px; } }
:root[data-moto="si"] .pg > * { animation: rise var(--t-reveal) var(--ease-out) backwards; }
:root[data-moto="si"] .pg > :nth-child(2) { animation-delay: 60ms; }
:root[data-moto="si"] .pg > :nth-child(3) { animation-delay: 120ms; }
:root[data-moto="si"] .pg > :nth-child(4) { animation-delay: 180ms; }
:root[data-moto="si"] .pg > :nth-child(5) { animation-delay: 240ms; }
:root[data-moto="si"] .pg > :nth-child(n+6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================== 12 · TELEFONO =============================
   Sotto i 900 px la barra non si stringe: diventa un foglio che sale dal
   basso, e in fondo resta un dock con quattro sezioni del reparto e «Menu». */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: auto 0 0 0; height: auto; max-height: 85dvh; z-index: var(--z-foglio); background: var(--paper);
    border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .4); transform: translateY(105%);
    visibility: hidden; transition: transform var(--t-plate) var(--ease-out), visibility 0s linear var(--t-plate);
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .sidebar[data-aperto] { transform: none; visibility: visible; transition: transform var(--t-plate) var(--ease-out), visibility 0s; }
  .sidebar-top [data-barra-ritira] { display: none; }
  .owner { margin-top: var(--s-2); }
  main.mn { margin: 0; border-radius: 0; box-shadow: none; min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .dockbar { display: flex; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-dock); gap: 4px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(0, 0, 0, .35); }
  .dockbar a, .dockbar button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: grid;
    justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 14px; font: 500 11px/1.1 var(--sans); color: var(--ink-2);
    text-align: center; }
  .dockbar a span, .dockbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dockbar a[aria-current="page"] { background: var(--soft); color: var(--ink); }
  .dockbar button { flex: none; min-width: 60px; padding: 8px 6px; background: var(--ink); color: var(--paper); }
  .dockbar a:focus-visible, .dockbar button:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
  .dock-velo { display: block; position: fixed; inset: 0; z-index: var(--z-foglio-velo); background: rgba(0, 0, 0, 0);
    transition: background var(--t-plate) var(--ease-out); }
  .dock-velo.aperto { background: rgba(0, 0, 0, .42); }
  .dock-velo[hidden] { display: none !important; }
}
@media (max-width: 600px) {
  .pg { padding: var(--s-5) var(--s-4) var(--s-6); gap: var(--s-5); }
  .pf { padding: var(--s-4); }
}
/* Il bersaglio da dito vale per OGNI comando, non solo per i bottoni
   (DESIGN.md, «Accessibilità»). Fino al 2026-09-28 lo rispettavano bottoni,
   campi e tendine; le pastiglie delle viste e dei periodi, i segmentati, il
   ritorno all'elenco, i sommari dei gruppi di un modulo e i collegamenti del
   piede restavano fra 15 e 34 px — la misura sotto la quale un tocco finisce
   sul vicino. I collegamenti dentro una frase restano testo. */
@media (max-width: 760px) {
  .seg, .ui-seg > button, .ui-seg > a, .tef-vista, .vbar a, .crm-viste-altre a, .mk2-scorciatoie a { min-height: 44px; }
  .ui-seg > button, .ui-seg > a { height: auto; }
  .som-apri { width: 44px; height: 44px; }
  .tef-ritorno a, .tef-occhiello a, .page-foot-legale a, .pfl a { display: inline-flex; align-items: center; min-height: 44px; }
  details > summary { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  /* Le voci dell'accento, nel foglio della barra. */
  .acc-menu [role="menuitemradio"] { min-height: 44px; }
  /* La casella si tocca sulla sua riga intera (l'etichetta la contiene): è la
     riga ad avere il bersaglio, e la casella resta un quadratino. */
  .tef-casella { display: flex; gap: var(--s-2); min-height: 44px; align-items: center; }
  .tef-casella input[type="checkbox"], .tef-casella input[type="radio"] { flex: none; width: 22px; }
  /* Le celle del territorio sono comandi (aprono il comune): sul telefono la
     fascia è alta un polpastrello. */
  .plancia .mod-corpo .terr-pista { height: 44px; }
}

/* ========================= UTILITÀ E DETTAGLI ============================ */
.nowrap { white-space: nowrap; }
.report-dettaglio { margin-top: var(--s-2); }
.report-dettaglio > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.report-dettaglio > summary:hover { color: var(--ink); }
.report-dettaglio .error-text { margin: var(--s-2) 0 0; }
/* Il paragrafo che apre una pagina è il suo sottotitolo: sta sotto il titolo,
   non a una sezione di distanza. */
.pg > .page-head + .lead, .pg > .page-head + p.muted { margin-top: calc(var(--s-6) * -1 + 6px); font-size: 14.5px; }
.gen-form > .field { min-width: 0; }
.gen-form .field select, .gen-form .field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.page-head > div { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
/* Una sezione di pagina scritta come `section.card` è una SEZIONE, come nel
   prototipo: titolo chiuso da un filo, niente riquadro. Restano riquadri gli
   stati (errore, avviso), i lavori in corso, le cifre e i vuoti. */
.pg > section.card:not(.card-error):not(.card-warn):not(.kpi):not(.job-card):not(.empty-state) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
  padding: 0; background: none; box-shadow: none; border-radius: 0; }
.pg > section.card:not(.card-error):not(.card-warn):not(.kpi):not(.job-card):not(.empty-state) > * { margin-top: 0; margin-bottom: 0; }
.pg > section.card:not(.card-error):not(.card-warn):not(.kpi):not(.job-card):not(.empty-state) > h2,
.pg > section.card:not(.card-error):not(.card-warn):not(.kpi):not(.job-card):not(.empty-state) > .card-head {
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); font: 600 18px/1.3 var(--head); letter-spacing: -.015em; }
.pg > section.card > .card-head > h2 { font: 600 18px/1.3 var(--head); }

/* ========================= LE GRIGLIE A UNA COLONNA ======================
   Sotto la finestra larga, i riquadri del Publisher e delle pagine del
   Marketing si impilano: le tabelle hanno bisogno di tutta la larghezza. */
.pub-griglia, .mk2-griglia { grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* ========================= PUBLISHER ===================================== */
.pub-canali .canali { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-3); }
.pub-canali .canale { padding: var(--s-4); gap: var(--s-2); }
.pub-canali .canale-testa { grid-template-columns: 32px minmax(0, 1fr); }
.pub-canali .canale-segno { width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 11px; }
.pub-canali .canale-manca { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pub-canali > header .x { margin-left: auto; }
.pub-canali > header h2 { margin-right: var(--s-2); }
/* «Come funziona»: il pannello a comparsa del testo lungo. */
.pub-come { position: relative; }
.pub-come > summary { list-style: none; cursor: pointer; font-size: 13px; }
.pub-come > summary::-webkit-details-marker { display: none; }
.pub-come-corpo { position: absolute; left: 0; top: calc(100% + 8px); z-index: var(--z-pop); width: min(560px, 80vw);
  display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pub-come-corpo > p { margin: 0; }
.pub-come-corpo strong { color: var(--ink); }
.pub-contenuti .tag { font-size: 11px; }
.pub-contenuti td.row-actions { white-space: nowrap; text-align: right; }
@media (min-width: 1100px) and (min-height: 680px) {
  body.una-schermata .pub-canali > .fill { overflow: visible; }
  body.una-schermata .pub-contenuti .tbl-scroll { overflow: visible; }
  body.una-schermata .pub-contenuti thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
}

/* ========================= LE FORME DI UN ELENCO ==========================
   Elenco immobili e Clienti: la barra delle forme, le schede, i gruppi che
   si aprono, le colonne per fase. */
.vbar { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.vbar::-webkit-scrollbar { display: none; }
.vbar > a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  font: 500 13.5px var(--sans); color: var(--ink-2); text-decoration: none; border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--t-press), box-shadow var(--t-panel) var(--ease-out), background var(--t-press); }
.vbar > a:hover { color: var(--ink); background: var(--panel); }
.vbar > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pri); }
.vbar > a:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.vbar svg { width: 16px; height: 16px; }

.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.pcard { display: grid; height: 100%; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none;
  transition: box-shadow var(--t-press), transform var(--t-press) var(--ease-out); }
.pcard:hover { box-shadow: 0 0 0 1px var(--ink-2), 0 10px 24px -16px rgba(0, 0, 0, .35); }
.pcard:active { transform: scale(.99); }
.pcard:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.pc-cover { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--soft);
  color: var(--ink-2); font-size: 12.5px; }
.pc-cover .pc-img { width: 100%; height: 100%; object-fit: cover; }
.pc-flag { position: absolute; left: 10px; top: 10px; background: color-mix(in srgb, var(--paper) 90%, transparent); }
.pc-b { display: grid; gap: 4px; align-content: start; padding: var(--s-3) var(--s-4) var(--s-4); }
.pc-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.pc-ref { font: 400 22px/1.1 var(--display); letter-spacing: .005em; overflow-wrap: anywhere; }
.pc-p { font: 600 15px var(--sans); font-variant-numeric: tabular-nums; }
.pc-m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.pc-m .sp { flex: 1; }
.pc-t { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.ghead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); font-size: 13.5px; color: var(--ink-2); }
.ghead b { color: var(--ink); }
.gdist { flex: 1; min-width: 160px; display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: var(--r-full); }
.gdist i { display: block; height: 100%; }
.gtools { display: flex; gap: 4px; }
.grps { display: grid; gap: var(--s-2); }
.grpv { overflow: hidden; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.grpv > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: var(--s-4); padding: 12px var(--s-5);
  grid-template-columns: minmax(170px, 1.4fr) minmax(90px, 1fr) 64px 150px 104px 70px 24px; transition: background var(--t-press); }
.grpv > summary::-webkit-details-marker { display: none; }
.grpv > summary:hover { background: var(--panel); }
.grpv > summary:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; border-radius: var(--r-lg); }
.gn { min-width: 0; }
.gn b { display: block; font: 600 14.5px/1.3 var(--sans); }
.gn small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.gbar { height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--soft); }
.gbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--ramp-4); }
.gc b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.gc small, .gv small { display: block; font-size: 11.5px; color: var(--ink-2); }
.gv b { display: block; white-space: nowrap; font: 600 13.5px var(--sans); font-variant-numeric: tabular-nums; }
.grpv .chev { display: grid; color: var(--ink-2); transition: transform var(--t-panel) var(--ease-out); }
.grpv[open] .chev { transform: rotate(180deg); }
.grpv .tbl-scroll { max-height: 420px; overflow: auto; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.grpv .tef-sotto { display: block; }
.grpv .ccards { padding: var(--s-4); border-top: 1px solid var(--line); }
@container pg (max-width: 900px) {
  .grpv > summary { grid-template-columns: minmax(0, 1fr) 56px 24px; }
  .grpv .gbar, .grpv .gv { display: none; }
}

.ccards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.ccard { display: grid; gap: 10px; height: 100%; align-content: start; padding: var(--s-4); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-press); }
.ccard:hover { box-shadow: 0 0 0 1px var(--ink-2); }
.ccard:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.cc-h { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cc-h .av { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ink);
  color: var(--paper); font: 600 13px var(--sans); }
.cc-h > span:last-child { min-width: 0; }
.cc-h b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cc-h small { font-size: 12.5px; color: var(--ink-2); }
.cc-r { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--ink-2); }
.cc-f { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cc-f .sp { flex: 1; }
.cc-meter { height: 6px; overflow: hidden; border-radius: var(--r-full); background: var(--soft); }
.cc-meter i { display: block; height: 100%; background: var(--ramp-4); }

.kan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: 4px; }
.kcol { display: grid; align-content: start; gap: var(--s-3); min-height: 260px; padding: var(--s-3); border-radius: var(--r-lg); background: var(--panel); }
.kcol > header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; font-size: 13.5px; }
.kcol > header span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kempty { margin: 0; padding: var(--s-4); border-radius: var(--r-md); border: 1px dashed color-mix(in srgb, var(--ink) 18%, var(--paper));
  text-align: center; font-size: 12.5px; color: var(--ink-2); }
.kcard { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); box-shadow: 0 0 0 1px var(--line);
  color: var(--ink); text-decoration: none; }
.kcard:hover { box-shadow: 0 0 0 1px var(--ink-2); }
.kcard:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.kcard b { font-weight: 600; }
.kcard small { font-size: 12.5px; color: var(--ink-2); }
.grpv-corto > summary { grid-template-columns: minmax(170px, 1.4fr) minmax(90px, 2fr) 64px 24px; }
.grp-altri { margin: 0; padding: 0 var(--s-4) var(--s-4); font-size: 13px; }
.kcol-senza { background: color-mix(in srgb, var(--panel) 60%, var(--paper)); box-shadow: inset 0 0 0 1px var(--line); }
@container pg (max-width: 900px) { .grpv-corto > summary { grid-template-columns: minmax(0, 1fr) 56px 24px; } .grpv-corto .gbar { display: none; } }

/* I moduli a griglia non si allargano oltre la colonna per un figlio lungo. */
.tef-form, .crm-rapido-corpo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 780px) {
  .an-filtri { flex: 1 1 100%; min-width: 0; }
  .an-filtri select { min-width: 0; }
}

/* ======================= 13 · IL CONTENUTO SOSTITUITO =====================
   `parziale.js` cambia forma, filtro, ordine, pagina o periodo senza
   ricaricare il guscio. Due stati, e nessuno dei due mente sul dato:
   · IN ATTESA la regione si smorza, ma solo se la risposta tarda (140 ms):
     un cambio che arriva subito non deve lampeggiare. È uno stato «sto
     chiedendo», non un dato vecchio travestito da nuovo.
   · ARRIVATO, il contenuto nuovo sale di 4 px da tre quarti di opacità:
     le cifre si leggono dal primo fotogramma, si muove solo il blocco.
     `backwards`, mai `both`; con il movimento ridotto non si muove niente. */
[data-parziale] { transition: opacity var(--t-panel) var(--ease-out); }
[data-parziale][data-attesa] { opacity: .55; transition-delay: 140ms; }
@keyframes parz-entra { from { opacity: .75; translate: 0 4px; } }
:root[data-moto="si"] [data-parziale][data-entrato] { animation: parz-entra var(--t-plate) var(--ease-out) backwards; }
:root[data-moto="no"] [data-parziale][data-entrato] { animation: none; }
/* La stessa entrata per la lettura scelta dentro un modulo (le viste della
   Visibilità): è contenuto sostituito da una scelta, e dice la stessa cosa. */
:root[data-moto="si"] [data-vista-pannello][data-entrato] { animation: parz-entra var(--t-plate) var(--ease-out) backwards; }
[data-premuto] { opacity: .7; }

/* ======================= 14 · LA PANORAMICA IMMOBILI ======================
   Una schermata da 1100 × 680 in su: la striscia delle cifre, e tre riquadri
   (le voci da guardare, il movimento, la forma) più i posti del lavoro. Le
   voci sono righe intere cliccabili: cifra, che cosa, dove si risolve. */
.pano-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.pano-voce + .pano-voce { border-top: 1px solid var(--line); }
.pano-voce > a, .pano-voce > .pano-ferma { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: 10px 6px; margin: 0 -6px; border-radius: var(--r-md); color: var(--ink); text-decoration: none;
  transition: background var(--t-press); }
.pano-voce > a:hover { background: var(--panel); }
.pano-voce > a:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.pano-v { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.pano-v small { font: 500 12px var(--sans); color: var(--ink-2); }
.pano-t { min-width: 0; display: grid; gap: 2px; }
.pano-t b { font: 600 14px/1.3 var(--sans); }
.pano-t small { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pano-go { display: inline-flex; align-items: center; gap: 4px; font: 500 12.5px var(--sans); color: var(--pri-ink); white-space: nowrap; }
.pano-voce > a:hover .pano-go { color: var(--ink); }
/* La gravità è un segno a sinistra della cifra, non un colore sulla cifra. */
.pano-voce.grav-alta .pano-v, .pano-voce.allarme .pano-v { box-shadow: inset -3px 0 0 var(--err); padding-right: 10px; }
.pano-voce.grav-media .pano-v { box-shadow: inset -3px 0 0 var(--warn); padding-right: 10px; }
.pano-voce.grav-bassa .pano-v, .pano-voce:not(.grav-alta):not(.grav-media):not(.allarme) .pano-v { box-shadow: inset -3px 0 0 var(--line); padding-right: 10px; }
.pano-segno { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ramp-3); }
.pano-mv { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px var(--s-3); margin: 0; }
.pano-mv b { font: 400 30px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.pano-mv span { font-size: 13px; color: var(--ink-2); }
.pano-cambio .md { display: grid; gap: 4px; }
.pano-cambio .go { justify-self: start; margin-top: auto; }
.ora-scena.pano-scena { display: grid; align-items: center; align-content: center; gap: var(--s-4);
  grid-template-columns: minmax(120px, 176px) minmax(0, 1fr); flex: 1; min-height: 0; }
.pano-sommario { flex-wrap: nowrap; }
.pano-sommario .som-voce { flex: 1 1 auto; min-width: 0; }
/* Una cifra non si tronca mai: si stringe l'etichetta, non il numero. */
.pano-sommario .som-v { font-size: clamp(19px, 1.9vw, 28px); white-space: nowrap; overflow: visible; }
.pano-sommario .som-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testa-riga .ph-flags { min-width: 0; overflow: hidden; flex-wrap: nowrap; flex: 0 1 auto; }
.testa-riga .ph-flags > * { flex: none; }
.testa-riga .ph-flags .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-scena .qdr { width: min(100%, 176px); max-width: 176px; }
.pano-scena .qdr-cifra span { font-size: 24px; }
.pano-scena .qdr-cifra i { font-size: 10px; letter-spacing: .08em; }
.pano-forma { container-type: inline-size; }
/* L'anello della forma segue la regola degli anelli di tutta l'applicazione
   (la Tipologia, § 51 di style.css): sulla schermata unica il lato del disco
   è il minore fra l'altezza della scena e metà della sua larghezza, fra 120 e
   260 px. Prima stava fermo a 176 px in un riquadro alto il triplo. */
@media (min-width: 1100px) and (min-height: 680px) {
  body.una-schermata .ora-scena.pano-scena { container: scena / size; grid-template-columns: auto minmax(0, 1fr); }
  body.una-schermata .pano-scena .qdr { width: clamp(120px, min(100cqh, 48cqw), 260px); max-width: none; }
  body.una-schermata .pano-scena .qdr-cifra span { font-size: clamp(18px, 9cqmin, 30px); }
}
@container (max-width: 420px) {
  .ora-scena.pano-scena { grid-template-columns: 108px minmax(0, 1fr); gap: var(--s-3); }
  .pano-scena .qdr-cifra span { font-size: 17px; }
  .pano-scena .qdr-cifra i { display: none; }
  .pano-leggenda .ora-e { font-size: 12px; gap: 6px; }
  .pano-leggenda .ora-v { font-size: 15px; }
  .pano-leggenda .ora-b { padding: 5px 6px; gap: 6px; }
}
.ora-fascia.pano-leggenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; }
.pano-leggenda .ora-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 7px 8px;
  box-shadow: none; border-radius: var(--r-md); }
.pano-leggenda .ora-b:hover { background: var(--panel); box-shadow: none; }
.pano-leggenda .ora-e { letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink); }
.pano-leggenda .ora-v { font-size: 18px; }
.pano-forma .chiosa { margin-top: auto; }
.pano-note { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--s-4); margin: 0; font-size: 13.5px; }
.pano-note dt { font-weight: 600; }
.pano-note dd { margin: 0; color: var(--ink-2); }
@media (max-width: 1099px), (max-height: 679px) {
  .pano-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .pano-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pano-azioni { grid-column: 1 / -1; }
}
.comparsa-fissa { z-index: var(--z-pop); }
@media (max-width: 760px) {
  .pano-sommario { flex-wrap: wrap; }
  .pano-sommario .som-voce { flex: 1 1 40%; border-top: 1px solid var(--line); }
  .pano-voce > a, .pano-voce > .pano-ferma { grid-template-columns: 52px minmax(0, 1fr); }
  .pano-voce .pano-go { grid-column: 2; }
}