/* DRIP System 16 — il design system unico di DRIP Studio.
   Una sola fonte per sito, editor, Hub, Account, Site Manager, FiscoFlow e DRIP Urban.
   Canone ripreso dal tema 10.28.2: carta calda #F3EFE8, inchiostro #0D0D0D, powder blue #83B4D1,
   toni di sezione (warm, blue, pink, green, yellow, red, orange), DRIP Ginto + Playfair Display ExtraBold Italic.
   I file dei font sono dichiarati a parte (drip-fonts.css) perché ogni applicazione li serve dal proprio percorso.
   Documentazione: docs/design-16.md. */

/* l'attributo hidden vince sempre: nessuna regola display di un componente può lasciare visibile (o cliccabile) ciò che è nascosto */
[hidden] { display: none !important; }
/* modello del box unico per tutte le app: larghezze al 100% includono bordo e padding (prima solo le pagine con base.css) */
*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;

  /* ——— Font ——— */
  --font-sans: 'Ginto', 'DRIP Ginto', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-voice: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* largo editoriale: titoli-manifesto del sito, numeri grandi, campagne (mai nel testo corrente né nelle app) */
  --font-wide: 'Ginto Nord', 'Ginto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* ——— Colore: superfici e testo. Fonte: pagina Brand (Off White #F3EFE8, Off Black #0D0D0D). Il chiaro ha un disegno suo:
     fondo Off White schiarito col bianco (limpido, non beige ovunque), Off White pieno per le superfici incassate, schede bianche. ——— */
  --paper: #F9F7F4;          /* fondo: Off White schiarito (50% bianco) */
  --paper-2: #F3EFE8;        /* fasce secondarie */
  --paper-3: #E5E1DB;        /* incisi, campi, tracce */
  --card: #FFFFFF;           /* superfici di lavoro: bianche sul fondo neutro */
  --ink: #0D0D0D;            /* testo, il nero del logo */
  --ink-2: #4D4C4A;          /* testo secondario (≥ 7:1 sulla carta) */
  --ink-3: #747370;          /* note, didascalie (≥ 4.5:1) */
  --line: rgba(13, 13, 13, .10);
  --line-2: rgba(13, 13, 13, .18);

  /* ——— Colore: i sei colori della pagina Brand (content.json /brand). Fonte canonica: non se ne inventano altri ——— */
  --brand-off-white: #F3EFE8; --brand-off-black: #0D0D0D; --brand-powder-blue: #83B4D1;
  --brand-powder-pink: #D6A6B3; --brand-cobalt: #3150FF; --brand-orange: #EF643C;
  /* ——— Colore: marchio ——— */
  --drip: #83B4D1;           /* powder blue del marchio: superfici, barre, accenti grandi */
  --drip-ink: #376783;       /* lo stesso blu quando deve essere testo o bordo sottile (AA sulla carta) */
  --drip-soft: #DCEBF2;
  --on-drip: #0D0D0D;
  --accent: var(--drip);     /* ogni pagina/prodotto può ridefinirlo */
  --accent-ink: var(--drip-ink);

  /* ——— Toni di sezione (il ritmo del vecchio sito) ——— */
  --tone-warm: #EEE5DB;   --on-warm: #0D0D0D;
  --tone-blue: #83B4D1;   --on-blue: #0D0D0D;
  --tone-pink: #D6A6B3;   --on-pink: #0D0D0D;
  --tone-green: #66866F;  --on-green: #F3EFE8;
  --tone-yellow: #E2BD53; --on-yellow: #0D0D0D;
  --tone-red: #D64C53;    --on-red: #F3EFE8;
  --tone-orange: #EF643C; --on-orange: #0D0D0D;
  --tone-night: #0D0D0D;  --on-night: #F3EFE8;
  --fst: #7B2438;         --on-fst: #F3EFE8;   /* amaranto di Frattamaggiore Si Trasforma */

  /* ——— Stati (applicazioni) ——— */
  --ok: #3F7656;   --ok-soft: #DCE8DF;
  --warn: #9A6B0E; --warn-soft: #F4E6C2;
  --bad: #B23A3A;  --bad-soft: #F3D9D6;
  --info: var(--drip-ink); --info-soft: var(--drip-soft);

  /* ——— Scala tipografica (sezione aurea sui display, 18px di lettura) ——— */
  --fs-2xs: 12px; --fs-xs: 13px; --fs-s: 15px; --fs-b: 18px; --fs-l: clamp(20px, 1.5vw, 23px);
  --fs-h5: clamp(19px, 1.4vw, 22px);
  --fs-h4: clamp(23px, 2vw, 30px);
  --fs-h3: clamp(30px, 3.2vw, 48px);
  --fs-h2: clamp(42px, 5.6vw, 92px);
  --fs-h1: clamp(56px, 8.6vw, 156px);
  --fs-mega: clamp(72px, 14vw, 248px);
  --lh-tight: .92; --lh-head: 1.02; --lh-body: 1.58;
  --track-display: -.035em; --track-head: -.025em; --track-ui: -.01em;

  /* ——— Ruoli tipografici delle applicazioni (docs/design-dna.md §3) ———
     Stessa radice della scala del sito, più densa: lettura a 15px e passi di √φ ≈ 1.272 (φ ogni due passi):
     12 · 13 · 15 · 19 · 24 · 31 · 50. Il sito resta sulla scala --fs-* qui sopra. Sotto 12px niente testo. */
  --phi: 1.618;
  --type-display-size: clamp(39px, 3.4vw, 50px);
  --type-page-size: clamp(26px, 2.2vw, 31px);
  --type-section-size: 24px;
  --type-subsection-size: 19px;
  --type-body-size: 15px;
  --type-label-size: 13px;
  --type-caption-size: 12px;
  --type-data-size: 13px;
  --type-display: 700 var(--type-display-size)/1.02 var(--font-sans);
  --type-page: 700 var(--type-page-size)/1.1 var(--font-sans);
  --type-section: 700 var(--type-section-size)/1.2 var(--font-sans);
  --type-subsection: 600 var(--type-subsection-size)/1.3 var(--font-sans);
  --type-body: 400 var(--type-body-size)/1.55 var(--font-sans);
  --type-label: 500 var(--type-label-size)/1.3 var(--font-sans);
  --type-caption: 400 var(--type-caption-size)/1.45 var(--font-sans);
  --type-meta: 500 var(--type-caption-size)/1.4 var(--font-sans);
  --type-data: 400 var(--type-data-size)/1.4 var(--font-sans);
  --type-mono: 400 var(--type-data-size)/1.5 var(--font-mono);

  /* ——— Spazio (Fibonacci) e struttura ——— */
  --s1: 5px; --s2: 8px; --s3: 13px; --s4: 21px; --s5: 34px; --s6: 55px; --s7: 89px; --s8: 144px; --s9: 233px;
  --edge: clamp(21px, 4.2vw, 68px);
  --gap: clamp(13px, 1.9vw, 34px);
  --section: clamp(110px, 14vw, 233px);
  --maxw: 1600px; --measure: 38em;
  /* proporzioni auree dove la composizione ne guadagna (elenco/dettaglio, binario/contenuto, finestre); mai su fogli
     di calcolo, tavole CAD o tabelle dense, dove decide l'uso */
  --split-major: 61.8%; --split-minor: 38.2%; --split-rail: 23.6%;
  --grid-master-detail: minmax(280px, 38.2fr) minmax(0, 61.8fr);
  --grid-rail-main: minmax(220px, 23.6fr) minmax(0, 76.4fr);
  --dialog-s: 382px; --dialog-m: 618px; --dialog-l: 1000px;
  --header: 78px;

  /* ——— Forma ———
     Scala Fibonacci 4 · 8 · 13 · 21 · 34. Il raggio segue la gerarchia (docs/design-dna.md), mai un numero inventato:
     più l'oggetto è piccolo e frequente, più è stretto; foto e superfici editoriali restano a spigolo vivo. */
  --r-xs: 4px; --r-s: 8px; --r-m: 13px; --r-l: 21px; --r-xl: 34px; --r-pill: 999px;
  --r-sm: var(--r-s); --r-md: var(--r-m); --r-lg: var(--r-l); /* nomi della direttiva del 2026-10-16: xs · sm · md · lg · xl · pill */
  --r-sharp: 0;              /* foto, fasce, tagli editoriali */
  --r-tag: var(--r-xs);      /* badge, kbd, chip piccoli, scheletri */
  --r-control: var(--r-s);   /* campi, pulsanti-strumento, righe di menu, segmenti */
  --r-card: var(--r-m);      /* schede e riquadri dentro una pagina */
  --r-panel: var(--r-m);     /* pannelli di un'app: ispettori, liste, popover, menu */
  --r-modal: var(--r-l);     /* finestre, fogli, launcher, palette */
  --r-editorial: var(--r-xl);/* grandi finestre editoriali (schermate incorniciate, aperture) — raro */
  --slash: 13deg;            /* inclinazione della barra di DR/P: l'unico ornamento */
  --shadow-1: 0 1px 2px rgba(16, 18, 24, .05);
  --shadow-2: 0 4px 12px rgba(16, 18, 24, .06), 0 18px 40px -20px rgba(16, 18, 24, .18);
  --shadow-3: 0 8px 24px rgba(16, 18, 24, .08), 0 32px 72px -32px rgba(16, 18, 24, .28);
  /* elevazione = superficie + ombra + filo. Nel chiaro il filo è caldo; nello scuro una luce in alto separa i piani */
  --rim: inset 0 0 0 1px var(--line);
  --elev-1: var(--rim), var(--shadow-1);
  --elev-2: var(--rim), var(--shadow-2);
  --elev-3: var(--rim), var(--shadow-3);
  /* figurine da collezione del sito (i lavori come album): la lamina olografica nei colori di carattere del marchio
     (Powder Blue, Powder Pink) e il riflesso che segue il puntatore (--gx, --gy). Solo lì, mai sulle interfacce */
  --fx-foil: repeating-linear-gradient(115deg, transparent 0 7%, rgba(243, 239, 232, .5) 10%, rgba(131, 180, 209, .42) 12.5%, rgba(214, 166, 179, .42) 15%, transparent 18% 25%);
  --fx-glare: radial-gradient(farthest-corner circle at var(--gx, 30%) var(--gy, 20%), rgba(243, 239, 232, .55), transparent 52%);
  --fx-sheen: linear-gradient(180deg, rgba(243, 239, 232, .16), transparent 34%);
  /* motivi delle copertine dei quaderni (Work, Notes): disegnati nel colore del testo della copertina (currentColor) */
  --pat-lines: repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, currentColor 24%, transparent) 13px 14px);
  --pat-grid: repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, currentColor 18%, transparent) 13px 14px), repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, currentColor 18%, transparent) 13px 14px);
  --pat-dots: radial-gradient(circle, color-mix(in srgb, currentColor 34%, transparent) 1.3px, transparent 1.7px) 0 0 / 14px 14px;
  --pat-diagonal: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, currentColor 22%, transparent) 11px 13px);

  /* ——— Superfici tonali: profondità sottile, mai neon, mai gradienti viola ——— */
  --grad-paper: var(--paper);
  --grad-panel: var(--surface-2);
  --grad-night: radial-gradient(120% 90% at 18% 0%, #23211D 0%, #131210 52%, #0C0B0A 100%);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--surface-1)) 0%, var(--surface-1) 62%);
  --veil: color-mix(in srgb, var(--paper) 78%, transparent);   /* barre traslucide */

  /* ——— Accenti di prodotto (docs/design-dna.md). Superficie, testo/bordo (AA) e velo per ogni prodotto ——— */
  --p-hub: #959EA8; --p-hub-ink: #404851;
  --p-hub-100: #E4E2DE; --p-hub-300: #C6C8C9; --p-hub-500: #959EA8; --p-hub-700: #404851;
  --p-cms: #BFD158; --p-cms-ink: #556313;
  --p-cms-100: #EBEAD1; --p-cms-300: #DAE1A3; --p-cms-500: #BFD158; --p-cms-700: #556313;
  --p-editor: var(--p-cms); --p-editor-ink: var(--p-cms-ink);
  --p-id: #0D0D0D;       --p-id-ink: #0D0D0D;
  --p-fiscoflow: #7FA7BF; --p-fiscoflow-ink: #2D5469;
  --p-fiscoflow-100: #DDE7EE; --p-fiscoflow-300: #AFC9DA; --p-fiscoflow-500: #7FA7BF; --p-fiscoflow-700: #2D5469;
  --p-urban: #93B08B; --p-urban-ink: #425C3C;
  --p-urban-100: #E4E5D9; --p-urban-300: #C5D1BB; --p-urban-500: #93B08B; --p-urban-700: #425C3C;
  --p-voice: #B9A48E;    --p-voice-ink: #6A5642;
  --p-elios: #EF643C;    --p-elios-ink: #A2401F;
  --p-docs: #8E99E2; --p-docs-ink: #3B4596;
  --p-docs-100: #E3E1E7; --p-docs-300: #C3C6E5; --p-docs-500: #8E99E2; --p-docs-700: #3B4596;
  --p-sheets: #6CC79A; --p-sheets-ink: #20664A;
  --p-sheets-100: #DDE9DC; --p-sheets-300: #B2DCC3; --p-sheets-500: #6CC79A; --p-sheets-700: #20664A;
  --p-pdf: #EE8569; --p-pdf-ink: #983823;
  --p-pdf-100: #F2DED4; --p-pdf-300: #F1BCAB; --p-pdf-500: #EE8569; --p-pdf-700: #983823;
  --p-meet: #5CC0BF; --p-meet-ink: #196564;
  --p-meet-100: #DBE7E1; --p-meet-300: #ABD8D4; --p-meet-500: #5CC0BF; --p-meet-700: #196564;
  --p-calendar: #6DB5E6; --p-calendar-ink: #1D5D8A;
  --p-calendar-100: #DEE6E8; --p-calendar-300: #B3D3E7; --p-calendar-500: #6DB5E6; --p-calendar-700: #1D5D8A;
  --p-contacts: #F2A876; --p-contacts-ink: #8C471A;
  --p-contacts-100: #F3E4D6; --p-contacts-300: #F3CDB1; --p-contacts-500: #F2A876; --p-contacts-700: #8C471A;
  --p-drive: #E6B04E; --p-drive-ink: #7A5210;
  --p-drive-100: #F1E5CF; --p-drive-300: #EDD19E; --p-drive-500: #E6B04E; --p-drive-700: #7A5210;
  --p-mail: #AE95DE; --p-mail-ink: #583C93;
  --p-mail-100: #E8E1E6; --p-mail-300: #D2C4E3; --p-mail-500: #AE95DE; --p-mail-700: #583C93;
  --p-health: #E89AA6; --p-health-ink: #8C3445;
  --p-health-100: #F1E1DD; --p-health-300: #EEC6C8; --p-health-500: #E89AA6; --p-health-700: #8C3445;

  /* ——— Movimento ——— */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);      /* solo per uscire */
  /* shell condivisa: le stesse misure in ogni app (docs/recomposition/visual-system.md §3) */
  /* vetro della testata (sito e shell): il campo sotto resta appena visibile, la testata segue sempre il suo colore */
  --chrome-tint: 80%; --chrome-glass: saturate(1.6) blur(20px);
  --shell-h: 60px; --shell-pad: clamp(13px, 2vw, 21px); --shell-btn: 40px; --shell-icon: 20px; --shell-gap: 4px; --shell-avatar: 34px; --shell-ctx-h: 36px; --shell-pop-gap: 8px;
  /* colonna di navigazione di ogni app (lavoro, Hub, CMS): stessa larghezza ovunque */
  --app-rail: 256px;
  /* pagina di un'app (docs/design-dna.md §2): margine laterale 16 → 34, 21 → 55 sopra il titolo, 89 in fondo */
  --page-pad: clamp(16px, 2.4vw, 34px); --page-top: clamp(21px, 3.8vw, 55px); --page-end: var(--s7);
  /* altezze dei controlli, quattro ruoli: righe dense e barre · icone e shell · pulsanti e campi · grandi inviti */
  --ctl-s: 32px; --ctl-m: 40px; --ctl-l: 44px; --ctl-xl: 56px;
  --target-min: 24px;        /* bersaglio minimo di un collegamento o controllo isolato (WCAG 2.5.8); dentro un testo vale la riga */
  --t-1: .18s; --t-2: .32s; --t-3: .6s; --t-4: 1.1s;
  /* ruoli: entrare con ease-out, uscire più in fretta (≈ 60%) con ease-in; i gesti con lo spring */
  --m-hover: var(--t-1) var(--ease-out);
  --m-menu: .2s var(--ease-out);         --m-menu-out: .12s var(--ease-in);
  --m-popover: .26s var(--ease-out);     --m-popover-out: .14s var(--ease-in);
  --m-modal: .42s var(--ease-out);       --m-modal-out: .22s var(--ease-in);
  --m-launcher: .52s var(--ease-out);    --m-launcher-out: .2s var(--ease-in);
  --m-panel: .36s var(--ease-io);
  --m-page: .6s var(--ease-io);
  --m-app-in: .34s var(--ease-out); --m-app-out: .16s var(--ease-in); /* passaggio tra le app: stessa curva del sito, ampiezza da app */
  --m-loading: 1.4s linear;
  --m-theme: .4s var(--ease-io);
  /* token di movimento della direttiva (livelli 0–4): 0 nessun moto · 1 risposta (instant/fast) · 2 componente (base)
     · 3 cambio di contesto (emphasis) · 4 marchio, passaggi tra prodotti e sito (brand). Le app usano questi. */
  --motion-duration-instant: 90ms; --motion-duration-fast: 160ms; --motion-duration-base: 240ms;
  --motion-duration-emphasis: 420ms; --motion-duration-brand: 720ms;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1); --motion-ease-enter: var(--ease-out);
  --motion-ease-exit: var(--ease-in); --motion-ease-emphasis: var(--ease-io);
  /* livelli di moto della direttiva editoriale (docs/brand-system/motion-system.md): un solo sistema per il sito, l'editor
     e le app. L0 risposta (hover, pressione, fuoco) · L1 componente (menu, dialoghi, schede, filtri) · L2 pagina (stesso
     capitolo o prodotto) · L3 rotta maggiore (Home → Work, Work → progetto) · L4 momento del marchio (hero, scena
     spaziale, passaggio importante: mai di continuo). La curva sportiva: un respiro all'indietro (3,5%) nel primo 12%,
     poi l'accelerazione di --ease-out e un arresto preciso. Profondità e prospettiva hanno quattro gradini. */
  --motion-l0: 140ms; --motion-l1: 220ms; --motion-l2: 520ms; --motion-l3: 760ms; --motion-l4: 980ms;
  --ease-sport: linear(0 0%, -.025 3%, -.035 6%, -.025 9%, 0 12%, .199 15%, .366 18%, .541 22%, .669 26%, .76 30%, .851 36%, .908 42%, .952 50%, .981 60%, .995 72%, .999 86%, 1 100%);
  --z-1: -60px; --z-2: -140px; --z-3: -260px; --z-4: -600px;
  --persp-near: 900px; --persp: 1100px; --persp-far: 1600px;
  --rot-max: 13deg; --scale-max: 1.12;
  --stagger: 28ms;                       /* ritardo tra le righe che entrano in sequenza */
  --lift: 6px;                           /* distanza d'ingresso di menu e popover */

  /* ——— Livelli ——— */
  --z-base: 1; --z-sticky: 20; --z-header: 50; --z-menu: 80; --z-overlay: 90; --z-popover: 92; --z-toast: 95; --z-consent: 96; --z-cursor: 99;

  /* ——— Ruoli semantici (applicazioni, documentazione, shell): usare questi, non i colori grezzi ———
     Elevazione: 0 fondo · 1 pannelli e schede · 2 menu, popover, launcher · 3 finestre. Il chiaro ha un disegno suo: fondo neutro limpido, superfici bianche, ombre solo per ciò che galleggia. */
  --surface-0: var(--paper);
  --surface-1: var(--card);
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --sunken: var(--paper-2);          /* aree incassate: barre laterali, binari, intestazioni di tabella */
  --field: #FFFFFF;                  /* campi di testo */
  --field-line: var(--line-2);
  --hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --press: color-mix(in srgb, var(--ink) 9%, transparent);
  --selected: color-mix(in srgb, var(--drip) 22%, var(--surface-1));
  --selected-line: color-mix(in srgb, var(--drip-ink) 55%, transparent);
  --disabled-ink: color-mix(in srgb, var(--ink) 38%, transparent);
  --disabled-bg: color-mix(in srgb, var(--ink) 5%, transparent);
  --icon: var(--ink-2);
  --row-alt: color-mix(in srgb, var(--paper-2) 45%, transparent);
  --code-bg: #F3EFE8;               /* blocchi di codice, log, valori: carta più scura, non grigio freddo */
  --code-ink: #1C1C1B;
  --code-mute: #747370;
  --code-key: #2F5F7A; --code-str: #48683F; --code-num: #8A5A12; --code-lit: #8C3B5A;
  --tooltip-bg: #0D0D0D; --tooltip-ink: #F3EFE8;
  --overlay: rgba(13, 13, 13, .32);
  --skeleton: color-mix(in srgb, var(--ink) 7%, transparent);
  --skeleton-hi: color-mix(in srgb, var(--ink) 3%, transparent);
  --focus: var(--drip-ink);
  /* grafici: sei serie distinguibili in entrambi i temi, sempre accompagnate da etichette */
  --chart-1: #376783; --chart-2: #B5552F; --chart-3: #4F7A5C; --chart-4: #9A6B0E; --chart-5: #8C4E68; --chart-6: #5E5A86;
  --chart-grid: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* Scuro: l'Off Black del marchio (#0D0D0D) e neutri senza dominante blu; testo Off White; i colori dei prodotti restano pieni. */
:root[data-theme='dark'], .dark {
  color-scheme: dark;
  --paper: #0D0D0D;
  --paper-2: #141414;
  --paper-3: #1C1C1C;
  --card: #151515;
  --ink: #F3EFE8;
  --ink-2: #BDB9B2;
  --ink-3: #8E8B86;
  --line: rgba(243, 239, 232, .10);
  --line-2: rgba(243, 239, 232, .18);
  --drip-ink: #A3C6DB;
  --drip-soft: #222B30;
  --tone-warm: #1A1917;   --on-warm: #F3EFE8;
  --tone-blue: #1C2A32;   --on-blue: #F3EFE8;
  --tone-pink: #2E2125;   --on-pink: #F3EFE8;
  --tone-green: #1A221C;  --on-green: #F3EFE8;
  --tone-yellow: #2A2414; --on-yellow: #F3EFE8;
  --tone-red: #2E1A1A;    --on-red: #F3EFE8;
  --tone-orange: #2F1C15; --on-orange: #F3EFE8;
  --tone-night: #080808;  --on-night: #F3EFE8;
  --fst: #8E2C44;
  --ok: #86B898;   --ok-soft: #1C2A21;
  --warn: #D9B65A; --warn-soft: #2D2613;
  --bad: #E0918C;  --bad-soft: #341D1C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .4), 0 26px 56px -24px rgba(0, 0, 0, .7);
  --shadow-3: 0 4px 14px rgba(0, 0, 0, .45), 0 44px 96px -36px rgba(0, 0, 0, .8);
  /* nello scuro i piani si separano con una luce in alto, non con l'ombra sola */
  --rim: inset 0 1px 0 rgba(238, 240, 244, .05), inset 0 0 0 1px var(--line);
  --grad-paper: var(--paper);
  --grad-panel: var(--surface-2);
  --grad-night: radial-gradient(120% 90% at 18% 0%, #22201C 0%, #121110 55%, #0A0908 100%);
  --veil: color-mix(in srgb, var(--paper) 74%, transparent);
  /* accenti nello scuro: stesse tinte, più basse di saturazione come superficie e più chiare come testo */
  --p-hub: #79828C; --p-hub-ink: #CDD2D8;
  --p-hub-100: #252626; --p-hub-300: #414448; --p-hub-500: #79828C; --p-hub-700: #CDD2D8;
  --p-cms: #AFC443; --p-cms-ink: #DCE8A0;
  --p-cms-100: #2B2E18; --p-cms-300: #505824; --p-cms-500: #9AAD3C; --p-cms-700: #DCE8A0;
  --p-editor: var(--p-cms); --p-editor-ink: var(--p-cms-ink);
  --p-id: #F3EFE8;       --p-id-ink: #F3EFE8;
  --p-fiscoflow: #6B98B3; --p-fiscoflow-ink: #BBD3E2;
  --p-fiscoflow-100: #1C252B; --p-fiscoflow-300: #2D4452; --p-fiscoflow-500: #6B98B3; --p-fiscoflow-700: #BBD3E2;
  --p-urban: #7DB06E; --p-urban-ink: #C6D8C1;
  --p-urban-100: #252921; --p-urban-300: #404C3B; --p-urban-500: #76926F; --p-urban-700: #C6D8C1;
  --p-voice: #8F7D69;    --p-voice-ink: #D3C1AC;
  --p-elios: #C9583A;    --p-elios-ink: #F0A487;
  --p-docs: #7C8AF0; --p-docs-ink: #C3C9F4;
  --p-docs-100: #242530; --p-docs-300: #3C4061; --p-docs-500: #6F79C4; --p-docs-700: #C3C9F4;
  --p-sheets: #3FB984; --p-sheets-ink: #A7E3C5;
  --p-sheets-100: #1E2D23; --p-sheets-300: #2E5541; --p-sheets-500: #4FA67C; --p-sheets-700: #A7E3C5;
  --p-pdf: #EC6E55; --p-pdf-ink: #F6B7A5;
  --p-pdf-100: #34221C; --p-pdf-300: #663A2D; --p-pdf-500: #CC6A50; --p-pdf-700: #F6B7A5;
  --p-meet: #2EB7B0; --p-meet-ink: #A2E0DF;
  --p-meet-100: #1B2C2A; --p-meet-300: #275250; --p-meet-500: #3FA09F; --p-meet-700: #A2E0DF;
  --p-calendar: #4EA3E4; --p-calendar-ink: #AED6F3;
  --p-calendar-100: #1E2A30; --p-calendar-300: #2E4D61; --p-calendar-500: #4F95C4; --p-calendar-700: #AED6F3;
  --p-contacts: #EB9558; --p-contacts-ink: #F8CBAA;
  --p-contacts-100: #35281E; --p-contacts-300: #684832; --p-contacts-500: #D08A5B; --p-contacts-700: #F8CBAA;
  --p-drive: #DEA63C; --p-drive-ink: #F0CB82;
  --p-drive-100: #342A18; --p-drive-300: #654D23; --p-drive-500: #C9963A; --p-drive-700: #F0CB82;
  --p-mail: #9C84EE; --p-mail-ink: #D2C3F0;
  --p-mail-100: #292430; --p-mail-300: #4A3F5F; --p-mail-500: #8E76C0; --p-mail-700: #D2C3F0;
  --p-health: #DE7D91; --p-health-ink: #F3C6CD;
  --p-health-100: #332525; --p-health-300: #634146; --p-health-500: #C47A87; --p-health-700: #F3C6CD;

  --surface-2: #1C1C1C;
  --surface-3: #242424;
  --field: #111111;
  --hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --press: color-mix(in srgb, var(--ink) 10%, transparent);
  --selected: color-mix(in srgb, var(--drip) 16%, var(--surface-1));
  --icon: var(--ink-2);
  --row-alt: color-mix(in srgb, var(--ink) 2.5%, transparent);
  --code-bg: #080808;
  --code-ink: #E6E2DB;
  --code-mute: #8E8B86;
  --code-key: #9CC2D8; --code-str: #A9C79A; --code-num: #D9B65A; --code-lit: #D9A3B9;
  --tooltip-bg: #F3EFE8; --tooltip-ink: #0D0D0D;
  --overlay: rgba(0, 0, 0, .6);
  --skeleton: color-mix(in srgb, var(--ink) 8%, transparent);
  --skeleton-hi: color-mix(in srgb, var(--ink) 13%, transparent);
  --chart-1: #8DB8D2; --chart-2: #E0906B; --chart-3: #8DBB98; --chart-4: #D9B65A; --chart-5: #CE93AB; --chart-6: #A7A2D6;
}

/* ——— Ruoli del brand (direttiva «Unified Brand & Spatial», punti 4, 7 e 8; docs/brand-system/) ———
   Due livelli: i primitivi sopra (--brand-*, --s*, --r-xs…xl, --fs-*, --type-*-size) e i ruoli qui sotto, che sono
   l'interfaccia pubblica del sistema. Un foglio nuovo usa i ruoli; nessun ruolo ha un valore suo, tutti ripetono un
   primitivo. Si ridichiarano nel tema scuro e dentro .dark perché una variabile si calcola dove è dichiarata. */
:root, :root[data-theme='dark'], .dark {
  /* brand.background / brand.text: il telaio Off White / Off Black, che si inverte col tema */
  --brand-background-primary: var(--surface-0);
  --brand-background-secondary: var(--sunken);
  --brand-background-raised: var(--surface-1);
  --brand-text-primary: var(--ink);
  --brand-text-secondary: var(--ink-2);
  --brand-text-tertiary: var(--ink-3);
  --brand-line: var(--line);
}
:root {
  /* brand.color: i colori pieni della pagina Brand, uguali nei due temi (sono materia, non superficie) */
  --brand-color-black: var(--brand-off-black);
  --brand-color-white: var(--brand-off-white);
  --brand-color-blue: var(--brand-powder-blue);
  --brand-color-rose: var(--brand-powder-pink);
  --brand-color-cobalt: var(--brand-cobalt);
  --brand-color-coral: var(--brand-orange);
  /* testo sopra i colori pieni: il nero regge su blu, rosa e corallo; il bianco su cobalto e nero */
  --brand-on-black: var(--brand-off-white); --brand-on-white: var(--brand-off-black);
  --brand-on-blue: var(--brand-off-black); --brand-on-rose: var(--brand-off-black);
  --brand-on-cobalt: var(--brand-off-white); --brand-on-coral: var(--brand-off-black);

  /* geometria: cinque ruoli, ricavati dalla scala Fibonacci del Brand (4 · 8 · 13 · 21 · 34 · pill) */
  --radius-control: var(--r-control);   /* 8: pulsanti, campi, righe di menu, segmenti */
  --radius-surface: var(--r-card);      /* 13: schede, pannelli, popover */
  --radius-media: var(--r-editorial);   /* 34: foto e schermate incorniciate (in fascia o al vivo: --r-sharp, 0) */
  --radius-large: var(--r-modal);       /* 21: finestre, fogli, launcher, palette */
  --radius-full: var(--r-pill);         /* pillole, avatar, interruttori */

  /* tipografia: una scala, due densità ufficiali. Brand (sito, campagne) usa i passi larghi; Product (app) gli stessi
     nomi con i passi densi, accesi da [data-density='product'] sul contenitore dell'app */
  --text-display-size: var(--fs-mega);  /* manifesto, una parola */
  --text-hero-size: var(--fs-h1);       /* apertura di pagina */
  --text-h1-size: var(--fs-h2);
  --text-h2-size: var(--fs-h3);
  --text-h3-size: var(--fs-h4);
  --text-h4-size: var(--fs-h5);
  --text-section-size: var(--type-section-size);
  --text-body-size: var(--fs-b);
  --text-small-size: var(--fs-s);
  --text-caption-size: var(--type-caption-size);
  --text-label-size: var(--type-label-size);
  --text-numeric-size: var(--type-data-size);
  --text-numeric-features: lining-nums tabular-nums;
}
[data-density='product'] {
  --text-display-size: var(--type-display-size);
  --text-hero-size: var(--type-display-size);
  --text-h1-size: var(--type-page-size);
  --text-h2-size: var(--type-section-size);
  --text-h3-size: var(--type-subsection-size);
  --text-h4-size: var(--type-body-size);
  --text-body-size: var(--type-body-size);
  --text-small-size: var(--type-label-size);
}

/* ——— Tipografia condivisa: Ginto per la struttura, Playfair ExtraBold Italic come voce.
   Mai tutto maiuscolo: maiuscolo solo nelle sigle. ——— */
.ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--track-display); line-height: var(--lh-tight); text-wrap: balance; }
.ds-h1 { font-size: var(--fs-h1); }
.ds-h2 { font-size: var(--fs-h2); }
.ds-h3 { font-size: var(--fs-h3); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.ds-h4 { font-size: var(--fs-h4); line-height: 1.08; letter-spacing: var(--track-head); }
:is(.ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4) em, .ds-voice { font-family: var(--font-voice); font-style: italic; font-weight: 800; letter-spacing: -.02em; }
.ds-label { display: inline-flex; align-items: center; gap: .6em; font: 500 var(--fs-s)/1 var(--font-sans); letter-spacing: var(--track-ui); color: var(--ink-2); }
.ds-label::before { content: ''; width: .42em; height: 1.05em; background: var(--accent); transform: skewX(calc(var(--slash) * -1)); flex: none; }
.ds-num { font-family: var(--font-voice); font-style: italic; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.ds-tabular { font-variant-numeric: tabular-nums; }
/* ruoli tipografici delle applicazioni: usare questi, non dimensioni scelte schermata per schermata */
[data-density="compact"] { --type-page-size: clamp(24px, 2vw, 28px); --type-section-size: 21px; --type-subsection-size: 17px; --type-body-size: 14px; --type-label-size: 12.5px; --type-data-size: 12.5px; }
.ds-type-display { font: var(--type-display); letter-spacing: var(--track-display); text-wrap: balance; }
.ds-type-page { font: var(--type-page); letter-spacing: var(--track-head); text-wrap: balance; }
.ds-type-section { font: var(--type-section); letter-spacing: var(--track-head); text-wrap: balance; }
.ds-type-subsection { font: var(--type-subsection); letter-spacing: var(--track-ui); }
.ds-type-body { font: var(--type-body); text-wrap: pretty; }
.ds-type-label { font: var(--type-label); letter-spacing: var(--track-ui); }
.ds-type-caption { font: var(--type-caption); color: var(--ink-3); }
.ds-type-meta { font: var(--type-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ds-type-data { font: var(--type-data); font-variant-numeric: tabular-nums lining-nums; }
.ds-type-mono { font: var(--type-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* ——— Bottoni condivisi ——— */
/* ——— Pulsanti (direttiva di ricostruzione, punto 77): niente pillola nera ovunque. Gerarchia:
   primario = colore pieno (Powder Blue del marchio nella piattaforma; il colore del prodotto dentro un servizio),
   neutral = Off Black pieno, ghost/outline = contorno, quiet = tonale, danger = distruttivo pieno.
   Il gesto resta la barra inclinata di DR/P che attraversa il pulsante al passaggio. ——— */
:root { --btn-bg: var(--drip); --btn-ink: var(--on-drip); --btn-sweep: var(--ink); --btn-sweep-ink: var(--paper); }
[data-product]:not([data-product='id']):not([data-product='hub']) { --btn-bg: var(--accent-main); --btn-ink: var(--on-product); --btn-sweep: var(--accent-strong); --btn-sweep-ink: #FFFFFF; }
.ds-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: var(--ctl-l); padding: 0 var(--s4); border-radius: var(--r-control); border: 0; font: 700 15px/1 var(--font-sans); letter-spacing: var(--track-ui); background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; overflow: hidden; isolation: isolate; transition: color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out); white-space: nowrap; text-decoration: none; }
.ds-btn::before { content: ''; position: absolute; inset: -2px -30%; z-index: -1; background: var(--btn-sweep); transform: translateX(-112%) skewX(calc(var(--slash) * -1)); transition: transform var(--t-3) var(--ease-out); }
.ds-btn:hover::before, .ds-btn:focus-visible::before { transform: translateX(0) skewX(calc(var(--slash) * -1)); }
.ds-btn:hover, .ds-btn:focus-visible { color: var(--btn-sweep-ink); }
.ds-btn:active { transform: scale(.97); }
.ds-btn.neutral { --btn-bg: var(--ink); --btn-ink: var(--paper); --btn-sweep: var(--drip); --btn-sweep-ink: var(--on-drip); }
.ds-btn:is(.ghost, .outline) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); --btn-sweep: var(--ink); --btn-sweep-ink: var(--paper); }
:is(.ds-btn, .btn):is(.quiet, .secondary) { background: var(--paper-2); color: var(--ink); box-shadow: none; --btn-sweep: var(--paper-3); --btn-sweep-ink: var(--ink); }
:is(.ds-btn, .btn).accent { --btn-bg: var(--accent-main, var(--drip-ink)); --btn-ink: var(--on-product, #fff); --btn-sweep: var(--accent-strong, var(--ink)); --btn-sweep-ink: #FFFFFF; }
.ds-btn.danger { --btn-bg: var(--bad); --btn-ink: #FFFFFF; --btn-sweep: color-mix(in srgb, var(--bad) 72%, #000); --btn-sweep-ink: #FFFFFF; }
.ds-btn:is(.ghost, .outline).danger { color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent); --btn-sweep: var(--bad); }
.ds-btn:disabled, .ds-btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.ds-btn:disabled::before { display: none; }

/* ——— Campi ——— */
.ds-field { display: grid; gap: var(--s2); font: 500 var(--fs-s)/1.3 var(--font-sans); color: var(--ink-2); }
.ds-input { width: 100%; min-height: var(--ctl-l); padding: 9px var(--s3); border-radius: var(--r-s); border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font: 400 16px/1.4 var(--font-sans); transition: border-color var(--t-1), box-shadow var(--t-1); }
/* al tocco le righe dense e le icone salgono verso i 44 px (WCAG 2.5.5, HIG): le misure restano a ruoli */
@media (pointer: coarse) { :root { --ctl-s: 40px; --ctl-m: 44px; } }
.ds-input:focus { outline: none; border-color: var(--drip-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--drip) 38%, transparent); }
.ds-input[aria-invalid='true'] { border-color: var(--bad); }

/* ——— Accessibilità ——— */
.ds-focus:focus-visible, :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--drip-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  :root { --t-1: .01s; --t-2: .01s; --t-3: .01s; --t-4: .01s; --lift: 0px; --stagger: 0ms;
    --m-hover: .01s linear; --m-menu: .01s linear; --m-menu-out: .01s linear; --m-popover: .01s linear; --m-popover-out: .01s linear;
    --m-modal: .01s linear; --m-modal-out: .01s linear; --m-launcher: .01s linear; --m-launcher-out: .01s linear;
    --m-panel: .01s linear; --m-page: .01s linear; --m-app-in: .01s linear; --m-app-out: .01s linear; --m-theme: .01s linear;
    --motion-duration-fast: 1ms; --motion-duration-base: 1ms; --motion-duration-emphasis: 1ms; --motion-duration-brand: 1ms; }
}

/* ——— Prodotto: ogni app dichiara data-product sull'<html> (o su un contenitore) e prende il suo accento ——— */
[data-product='hub'] { --accent: var(--p-hub); --accent-ink: var(--p-hub-ink); }
[data-product='cms'] { --accent: var(--p-cms); --accent-ink: var(--p-cms-ink); }
[data-product='editor'] { --accent: var(--p-editor); --accent-ink: var(--p-editor-ink); }
[data-product='fiscoflow'] { --accent: var(--p-fiscoflow); --accent-ink: var(--p-fiscoflow-ink); }
[data-product='urban'] { --accent: var(--p-urban); --accent-ink: var(--p-urban-ink); }
[data-product='voice'] { --accent: var(--p-voice); --accent-ink: var(--p-voice-ink); }
[data-product='elios'] { --accent: var(--p-elios); --accent-ink: var(--p-elios-ink); }
[data-product='docs'] { --accent: var(--p-docs); --accent-ink: var(--p-docs-ink); }
[data-product='sheets'] { --accent: var(--p-sheets); --accent-ink: var(--p-sheets-ink); }
[data-product='drive'] { --accent: var(--p-drive); --accent-ink: var(--p-drive-ink); }
[data-product='pdf'] { --accent: var(--p-pdf); --accent-ink: var(--p-pdf-ink); }
[data-product='meet'] { --accent: var(--p-meet); --accent-ink: var(--p-meet-ink); }
[data-product='calendar'] { --accent: var(--p-calendar); --accent-ink: var(--p-calendar-ink); }
[data-product='contacts'] { --accent: var(--p-contacts); --accent-ink: var(--p-contacts-ink); }
[data-product='mail'] { --accent: var(--p-mail); --accent-ink: var(--p-mail-ink); }
[data-product='account'], [data-product='id'] { --accent: var(--drip); --accent-ink: var(--drip-ink); }
/* campo tonale: l’accento come superficie (testate, selezione, pannello attivo) */
:root, [data-product] { --accent-field: color-mix(in srgb, var(--accent, var(--drip)) 14%, var(--surface-1)); --accent-field-2: color-mix(in srgb, var(--accent, var(--drip)) 24%, var(--surface-1)); }

/* ——— Fuoco: un solo anello in tutti i prodotti ——— */
.ds-focus:focus-visible, .ds-btn:focus-visible, .ds-input:focus-visible, .dp-tool:focus-visible, .ds-lockup:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ——— Rappresentazione dei prodotti (docs/design-dna.md §Prodotti) ———
   Lockup: "DRIP" in Ginto 700 + nome del prodotto in Playfair ExtraBold Italic, separati dalla barra a 13°.
   <a class="ds-lockup" data-product="cms"><b>DRIP</b><i></i><em>CMS</em></a>
   Icona dell'app: tessera quadrata (raggio controllo), fondo nel tono del prodotto, sigla o segno; mai emoji. */
.ds-lockup { display: inline-flex; align-items: baseline; gap: .34em; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; }
.ds-lockup b { font: 700 1em/1 var(--font-sans); letter-spacing: var(--track-head); }
.ds-lockup i { align-self: center; width: .2em; height: .86em; background: currentColor; transform: skewX(calc(var(--slash) * -1)); }
.ds-lockup em { font: italic 800 1.06em/1 var(--font-voice); letter-spacing: -.01em; }
.ds-lockup.is-soon { color: var(--ink-3); }
.ds-appicon { --size: 40px; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none;
  border-radius: calc(var(--size) * .24); background: var(--p, var(--accent)); color: var(--on-p, var(--ink)); overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ds-appicon svg { width: 62%; height: 62%; }
.ds-appicon img { width: 100%; height: 100%; object-fit: cover; }
.ds-appicon.is-soon { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ——— Tema: cambio istantaneo (core/theme.js aggiunge la classe per due fotogrammi) ——— */
:root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

/* Selettore Chiaro · Scuro · Sistema (menu dell'account in tutti i prodotti, sito, Account) */
.theme-pick.ds-segmented { display: grid; grid-template-columns: repeat(3, 1fr); } /* tema chiaro/scuro/sistema: un .ds-segmented a tre parti */
.theme-pick.ds-segmented > button { padding: 0 var(--s2); }
.theme-pick button svg { width: 15px; height: 15px; flex: none; }

/* ——— Primitivi condivisi da applicazioni e documentazione ——— */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-kbd, kbd.ds-kbd { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface-1); color: var(--ink-2); font: 600 11.5px/1 var(--font-mono); }
/* Codice e valori: carta incassata, monospazio, copia */
.ds-code { position: relative; margin: 0; border-radius: var(--r-s); background: var(--code-bg); color: var(--code-ink); font: 13.5px/1.6 var(--font-mono); tab-size: 2; }
.ds-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; scrollbar-width: thin; font: inherit; }
.ds-code:has(.ds-copy) pre { padding-top: 46px; } /* striscia in alto: lingua a sinistra, Copia a destra, mai sopra il codice */
.ds-code:has(.ds-copy)::after { content: ''; position: absolute; left: 0; right: 0; top: 36px; border-top: 1px solid color-mix(in srgb, var(--code-ink) 10%, transparent); pointer-events: none; }
.ds-code[data-lang]::before { content: attr(data-lang); position: absolute; left: 18px; top: 10px; color: var(--code-mute); font: 600 11.5px/16px var(--font-mono); }
.ds-code .tk-k { color: var(--code-key); } .ds-code .tk-s { color: var(--code-str); } .ds-code .tk-n { color: var(--code-num); } .ds-code .tk-l { color: var(--code-lit); } .ds-code .tk-c { color: var(--code-mute); font-style: italic; }
.ds-copy { position: absolute; right: 6px; top: 5px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-xs); background: color-mix(in srgb, var(--surface-1) 88%, transparent); color: var(--ink-2); font: 600 12px/1 var(--font-sans); cursor: pointer; opacity: .82; box-shadow: 0 0 0 1px var(--line); transition: opacity var(--t-1), color var(--t-1); }
.ds-copy:hover, .ds-copy:focus-visible { opacity: 1; color: var(--ink); }
.ds-copy[data-done] { color: var(--ok); }
.ds-copy svg { width: 14px; height: 14px; }
/* Avvisi in pagina: nota, consiglio, attenzione, pericolo. Barra obliqua del marchio, niente riquadri gonfi. */
.ds-callout { position: relative; display: grid; gap: 4px; margin: 0; padding: 14px 18px 14px 26px; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--info-soft); color: var(--ink); font-size: 15.5px; line-height: 1.55; --bar: var(--drip-ink); }
.ds-callout::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 5px; background: var(--bar); transform: skewX(calc(var(--slash) * -1)); }
.ds-callout > b:first-child { font: 700 13px/1.3 var(--font-sans); color: var(--bar); }
.ds-callout.tip { background: var(--ok-soft); --bar: var(--ok); }
.ds-callout.warn { background: var(--warn-soft); --bar: var(--warn); }
.ds-callout.bad { background: var(--bad-soft); --bar: var(--bad); }
.ds-callout p { margin: 0; }
/* Scheletro di caricamento */
.ds-skel, .dp-skel { display: block; height: 12px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--skeleton) 0 40%, var(--skeleton-hi) 50%, var(--skeleton) 60% 100%) 0 0 / 300% 100%; animation: ds-shimmer 1.4s linear infinite; }
.dp-skel + .dp-skel { margin-top: 8px; } .dp-skel.s { width: 62%; }
@keyframes ds-shimmer { to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ds-skel, .dp-skel { animation: none; } }
/* scheletro con la struttura della destinazione (docs/brand-system/loading.md, ProductSkeleton): colonna dell'app e
   contenuto; invisibile sotto i 400 ms (un caricamento breve non mostra nulla) */
.ds-skelshell { display: grid; grid-template-columns: var(--app-rail) minmax(0, 1fr); gap: var(--s6); min-height: calc(100svh - var(--shell-h)); padding: var(--page-top) var(--page-pad); animation: ds-skel-in var(--motion-duration-base) var(--ease-out) 400ms both; }
.ds-skelshell-rail, .ds-skelshell-main { display: grid; align-content: start; gap: var(--s3); }
.ds-skelshell-main { gap: var(--s4); }
.ds-skelshell .ds-skel.is-title { height: 44px; width: min(420px, 60%); border-radius: var(--r-control); }
.ds-skelshell .ds-skel.is-row { height: 34px; border-radius: var(--r-control); }
.ds-skelshell .ds-skel.is-card { height: 96px; border-radius: var(--r-card); }
.ds-skelshell-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
@keyframes ds-skel-in { from { opacity: 0; } }
@media (max-width: 760px) { .ds-skelshell { grid-template-columns: 1fr; } .ds-skelshell-rail { display: none; } }
/* ——— caricamento della destinazione (direttiva zero-based 68–75): mentre l'app legge i dati si vede la forma di ciò che
   arriva, non un testo «Apro…». <div class="ds-boot" data-boot="month|page|grid|list|stage" role="status" aria-label="…">
   b = la colonna o la barra, span = il contenuto (i = celle, righe, linee). Respiro quieto, nessuna sfumatura ——— */
.ds-boot { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s4); min-height: calc(100svh - var(--shell-h)); box-sizing: border-box; padding: var(--page-top) var(--page-pad); animation: ds-skel-in var(--motion-duration-base) var(--ease-out) 120ms both; }
.ds-boot :is(b, span > i) { display: block; border-radius: var(--r-xs); background: var(--skeleton); animation: ds-boot-breathe var(--m-loading) infinite alternate; }
.ds-boot span { display: grid; gap: var(--s2); }
@keyframes ds-boot-breathe { to { opacity: .55; } }
.ds-boot[data-boot='month'] { grid-template-columns: var(--app-rail) minmax(0, 1fr); }
.ds-boot[data-boot='month'] b { height: 233px; }
.ds-boot[data-boot='month'] span { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(89px, calc((100svh - var(--shell-h) - 2 * var(--page-top)) / 5 - var(--s2))); gap: 2px; }
.ds-boot[data-boot='month'] span > i { border-radius: 0; }
.ds-boot[data-boot='page'] { justify-items: center; }
.ds-boot[data-boot='page'] b { width: min(816px, 100%); height: 40px; }
.ds-boot[data-boot='page'] span { width: min(816px, 100%); min-height: 70svh; box-sizing: border-box; padding: var(--s7) var(--s6); border-radius: var(--r-s); background: var(--surface-1); box-shadow: var(--rim); align-content: start; gap: var(--s3); }
.ds-boot[data-boot='page'] span > i { height: 13px; }
.ds-boot[data-boot='page'] span > i:first-child { width: 55%; height: 34px; margin-bottom: var(--s4); }
.ds-boot[data-boot='page'] span > i:nth-child(4n) { width: 72%; }
.ds-boot[data-boot='grid'] { padding: var(--s3) var(--page-pad); gap: var(--s2); }
.ds-boot[data-boot='grid'] b { height: 34px; }
.ds-boot[data-boot='grid'] span { grid-template-columns: 55px repeat(11, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.ds-boot[data-boot='grid'] span > i { height: 27px; border-radius: 0; background: none; box-shadow: inset -1px -1px 0 var(--line); animation: none; }
.ds-boot[data-boot='grid'] span > i:nth-child(-n + 12), .ds-boot[data-boot='grid'] span > i:nth-child(12n + 1) { background: var(--skeleton); }
.ds-boot[data-boot='list'] b { width: min(377px, 60%); height: 34px; }
.ds-boot[data-boot='list'] span > i { height: 55px; border-radius: var(--r-control); }
.ds-boot[data-boot='stage'] { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.ds-boot[data-boot='stage'] b { aspect-ratio: 16 / 9; border-radius: var(--r-l); }
.ds-boot[data-boot='stage'] span > i { height: 89px; border-radius: var(--r-m); }
@media (max-width: 760px) {
  .ds-boot[data-boot='month'], .ds-boot[data-boot='stage'] { grid-template-columns: 1fr; }
  .ds-boot[data-boot='month'] b { display: none; }
  .ds-boot[data-boot='month'] span { grid-auto-rows: 55px; }
  .ds-boot[data-boot='grid'] span { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); }
  .ds-boot[data-boot='page'] span { padding: var(--s5) var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .ds-boot :is(b, span > i) { animation: none; } }
/* Suggerimento: data-tip sull'elemento */
[data-tip] { position: relative; }
[data-tip]:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--z-menu); width: max-content; max-width: 260px; padding: 6px 9px; border-radius: var(--r-xs); background: var(--tooltip-bg); color: var(--tooltip-ink); font: 500 12.5px/1.35 var(--font-sans); white-space: normal; pointer-events: none; box-shadow: var(--shadow-1); }

/* ——— Shell di ecosistema: strumenti, launcher, ELIOS, notifiche (core/admin-shell.js, core/launcher.js) ——— */
.dp-tool { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; font: inherit; border-radius: var(--r-s); background: transparent; color: var(--icon); cursor: pointer; transition: background var(--t-1), color var(--t-1); }
.dp-tool svg { width: 19px; height: 19px; }
.dp-tool:hover, .dp-tool[aria-expanded='true'] { background: var(--hover); color: var(--ink); }
.dp-tool:active { background: var(--press); }
.dp-tool.has-dot::after { content: ''; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-orange); box-shadow: 0 0 0 2px var(--surface-0); }
.dp-launch-btn svg { width: 18px; height: 18px; }
.dp-launch-btn[aria-expanded='true'] { color: var(--drip-ink); }

/* Launcher dei servizi (core/launcher.js): il concetto della v18, cioè pannello chiaro accanto all'avatar e servizi
   subito visibili in griglia, con l'icona vera e il nome. Raggio del pannello = modale, delle tessere = scheda. */
.dpl { position: fixed; z-index: var(--z-menu); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: var(--r-modal); background: var(--grad-panel); background-color: var(--surface-2); color: var(--ink); box-shadow: var(--elev-3); opacity: 0; transform: translateY(calc(var(--lift) * -1)) scale(.985); transform-origin: top right; transition: opacity var(--m-launcher-out), transform var(--m-launcher-out); font-family: var(--font-sans); text-align: left; }
.dpl.on { opacity: 1; transform: none; transition: opacity var(--m-popover), transform var(--m-launcher); }
.dpl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); padding: var(--s4) var(--s4) var(--s1); }
.dpl-head .dpl-search { grid-column: 1 / -1; }
/* «Dove vuoi andare?»: una domanda in Ginto, non un'etichetta */
.dpl-t { margin: 0; font: 700 var(--type-subsection-size)/1.2 var(--font-sans); color: var(--ink); letter-spacing: -.01em; }
.dpl-x { display: none; place-items: center; width: var(--ctl-l); height: var(--ctl-l); margin: calc(var(--s2) * -1) calc(var(--s2) * -1) calc(var(--s2) * -1) 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); cursor: pointer; }
.dpl-x:hover { background: var(--hover); color: var(--ink); }
.dpl-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dpl-x svg { width: var(--shell-icon); height: var(--shell-icon); }
.dpl-grab { display: none; }
.dpl.is-search .dpl-t { display: none; }
.dpl-search { display: none; align-items: center; gap: 8px; height: var(--ctl-m); padding: 0 12px; border-radius: var(--r-control); background: var(--field); box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink-3); }
.dpl.is-search .dpl-search, .dpl-search:focus-within { display: flex; }
.dpl-search:focus-within { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px color-mix(in srgb, var(--drip) 28%, transparent); }
.dpl-search svg { width: 16px; height: 16px; flex: none; }
.dpl-search input { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--ink); font: 500 15px/1 var(--font-sans); }
.dpl-search input:focus, .dpl-search input:focus-visible { outline: none; box-shadow: none; }
.dpl-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; scrollbar-width: thin; }
.dpl-sec + .dpl-sec { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.dpl-sec h3 { margin: 0; padding: 8px 8px 2px; font: 600 12px/1.2 var(--font-sans); color: var(--ink-3); letter-spacing: 0; }
.dpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding-top: 6px; }
/* lo staff sta in fondo, separato da una riga piena e con il nome nel colore DRIP */
.dpl-sec.is-staff { border-top-color: var(--line-2); }
.dpl-sec.is-staff h3 { color: var(--drip-ink); }
@media (min-width: 640px) {
  .dpl-body.has-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .dpl-body.has-pair > :not(.is-half) { grid-column: 1 / -1; }
  .dpl-sec.is-half .dpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dpl-sec.is-half + .dpl-sec.is-half { margin-left: var(--s1); padding-left: var(--s1); border-left: 1px solid var(--line); }
}
.dpl-tile { --i: 0; position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; min-height: 96px; padding: 12px 4px 10px; border-radius: var(--r-card); color: inherit; text-decoration: none; transition: background var(--m-hover); }
.dpl-tile:hover { background: var(--hover); }
.dpl-tile:active { background: var(--press); }
.dpl-tile:focus-visible { background: var(--hover); outline: 2px solid var(--focus); outline-offset: -2px; }
.dpl-tile[hidden] { display: none; }
.dpl-ic { position: relative; display: grid; transition: transform var(--m-hover); }
.dpl-tile:hover .dpl-ic { transform: translateY(-1px); }
.dpl-n { max-width: 100%; font: 500 13px/1.25 var(--font-sans); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dpl-tile.is-here .dpl-n { font-weight: 700; }
/* recenti: scorciatoie in riga (icona piccola, nome accanto), mai un'altra griglia uguale a quella dei servizi */
.dpl-sec[data-sec='recent'] .dpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpl-sec[data-sec='recent'] .dpl-tile { grid-template-columns: 28px minmax(0, 1fr); justify-items: start; align-items: center; align-content: center; gap: 10px; min-height: 44px; padding: 6px 8px; }
.dpl-sec[data-sec='recent'] .dpl-ic > * { width: 28px; height: 28px; }
.dpl-sec[data-sec='recent'] .dpl-n { text-align: left; -webkit-line-clamp: 1; }
.dpl-sec[data-sec='recent'] .dpl-a { display: none; }
/* scoperta: prodotti che qui non si aprono ancora (si attivano o si acquistano) */
.dpl-tile.is-available { gap: 6px; }
.dpl-tile.is-available .dpl-ic { opacity: .72; transition: opacity var(--m-hover), transform var(--m-hover); }
.dpl-tile.is-available:hover .dpl-ic, .dpl-tile.is-available:focus-visible .dpl-ic { opacity: 1; }
.dpl-a { margin-top: -4px; font: 500 11px/1.2 var(--font-sans); color: var(--ink-3); text-align: center; }
.dpl-tile.is-here .dpl-ic::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--drip); }
.dpl-st { position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); }
.dpl-st.is-down { background: var(--bad); } .dpl-st.is-degraded { background: var(--warn); }
.dpl-foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.dpl-foot a { font: 600 13px/1 var(--font-sans); color: var(--ink-2); text-decoration: none; }
.dpl-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dpl-none, .dpl-note { margin: 8px 8px 2px; font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); }
/* icone: tessera monocroma, inchiostro con il segno in carta; nello scuro si inverte. Segno ufficiale (maschera
   dell'asset), segno provvisorio (core/app-icons.js) o sigla: sempre un colore solo. */
.ds-appicon.is-mark, .ds-appicon.is-glyph, .ds-appicon.is-mono { background: var(--ink); color: var(--paper); box-shadow: none; }
.ds-appicon.is-mark i { width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--mark) center / 100% no-repeat; mask: var(--mark) center / 100% no-repeat; }
.ds-appicon.is-glyph svg { width: 54%; height: 54%; }
.ds-appicon .sl { fill: currentColor; stroke: none; }
.ds-appicon.is-mono b { font: 700 calc(var(--size) * .4)/1 var(--font-sans); letter-spacing: -.03em; color: currentColor; }
.ds-appicon.is-img { background: var(--paper); }
/* tessera del servizio: colore pieno del prodotto e segno bianco, mai sfumature (direttiva 21, 22, 64: i gradienti stanno
   nelle composizioni, non nelle icone); DRIP e DRIP ID restano monocromi. Colore e icona si cambiano dal Hub (Catalogo →
   Icone e colori, products.js applica le personalizzazioni) */
.ds-appicon.is-tone { background: var(--p); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 10%, transparent); }
.ds-appicon.is-tone.has-custom svg, .ds-appicon.is-tone.has-custom i { display: none; }
.ds-appicon.is-tone.has-custom::after { content: ''; position: absolute; inset: 21%; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .dpl.on .dpl-tile { animation: dpl-in .34s var(--ease-out) both; animation-delay: calc(min(var(--i), 12) * 14ms); }
}
@keyframes dpl-in { from { opacity: 0; transform: translateY(4px); } }
.dpl:focus { outline: none; }
/* telefono: foglio a tutta altezza dal basso, tre colonne (due sotto i 360 px), bersagli grandi, chiusura esplicita */
@media (max-width: 639px) {
  .dpl { inset: auto 0 0 0; width: auto; max-height: none; height: calc(100dvh - var(--s4)); border-radius: var(--r-modal) var(--r-modal) 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transform-origin: bottom center; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 34%, transparent), var(--elev-3); }
  .dp-shell .dpl { top: auto; }
  .dpl.on { transform: none; }
  .dpl-grab { display: block; justify-self: center; width: var(--s6); height: var(--s1); margin-top: var(--s2); border-radius: var(--r-pill); background: var(--line); }
  .dpl { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .dpl-x { display: grid; }
  .dpl-t { font: var(--type-section); }
  .dpl-body { padding: var(--s1) var(--s3) var(--s4); }
  .dpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
  .dpl-tile { min-height: 104px; }
  .dpl-n { font-size: 14px; }
}
@media (max-width: 359px) { .dpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dpl, .dpl.on { transition: none; transform: none; } }

/* Menu dell'account: uno solo per sito, Hub, CMS, Editor, Account (mountMe in core/admin-shell.js).
   Avatar sempre ultimo a destra della barra. Identità in testa, poi DRIP ID, account, organizzazione, sicurezza,
   tema, lingua, esci. */
.dp-me { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.dp-role { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: 600 12.5px/1 var(--font-sans); white-space: nowrap; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.dp-role.ok { background: var(--ok-soft); color: var(--ok); } .dp-role.warn { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 1000px) { .dp-me .dp-role { display: none; } }
.dp-avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; overflow: hidden; border-radius: 50%; background: var(--drip); color: var(--on-drip); font: 700 12.5px/1 var(--font-sans); letter-spacing: .02em; border: 0; cursor: pointer; transition: box-shadow var(--m-hover); }
.dp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dp-avatar.is-anon { background: var(--surface-1); color: var(--ink-2); box-shadow: var(--rim); }
.dp-avatar.is-anon svg { width: 18px; height: 18px; }
.dp-avatar:hover, .dp-avatar[aria-expanded='true'] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--drip) 35%, transparent); }
.dp-avatar.sub { box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--drip); }
.dp-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menu); width: 300px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: grid; border-radius: var(--r-panel); background: var(--grad-panel); background-color: var(--surface-2); color: var(--ink); box-shadow: var(--elev-2); font-family: var(--font-sans); text-align: left; opacity: 0; transform: translateY(calc(var(--lift) * -1)); transition: opacity var(--m-menu-out), transform var(--m-menu-out); }
.dp-menu.on { opacity: 1; transform: none; transition: opacity var(--m-menu), transform var(--m-popover); }
.dp-menu-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 2px 13px; margin: 0; padding: 10px 10px 12px; }
.dp-menu-who .dp-avatar { width: 44px; height: 44px; grid-row: span 2; cursor: default; font-size: 15px; }
.dp-menu-who b { font: 700 15px/1.2 var(--font-sans); letter-spacing: var(--track-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-menu-who small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.dp-menu-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 6px; padding: 11px 13px; border-radius: var(--r-control); background: var(--surface-1); box-shadow: var(--rim); color: var(--ink); text-decoration: none; font: 600 13.5px/1.2 var(--font-sans); transition: box-shadow var(--m-hover); }
.dp-menu-id .ds-lockup { font-size: 15px; }
.dp-menu-id:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.dp-menu-id span:last-child { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.dp-menu-note { margin: 0; padding: 0 10px 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.dp-menu-links { display: grid; padding: 4px 0; border-top: 1px solid var(--line); }
.dp-menu-links :is(a, button) { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; min-height: var(--ctl-m); padding: 0 10px; border-radius: var(--r-control); font: 500 14px/1.2 var(--font-sans); color: var(--ink); text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer; transition: background var(--m-hover); }
.dp-menu-links :is(a, button):not(:has(svg)) { grid-template-columns: minmax(0, 1fr); }
.dp-menu-links svg { width: 18px; height: 18px; color: var(--icon); }
.dp-menu-links :is(a, button):hover, .dp-menu-links :is(a, button):focus-visible { background: var(--hover); }
.dp-menu-links [data-dp-out] { color: var(--bad); } .dp-menu-links [data-dp-out] svg { color: currentColor; }
.dp-menu-row { display: grid; gap: 7px; padding: 10px 10px 12px; border-top: 1px solid var(--line); }
.dp-menu-row > span { font: 500 12.5px/1.2 var(--font-sans); color: var(--ink-3); }
.dp-lang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: var(--r-control); background: var(--sunken); }
.dp-lang button { min-height: var(--ctl-s); border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font: 600 12.5px/1 var(--font-sans); cursor: pointer; }
.dp-lang button[aria-checked='true'] { background: var(--surface-1); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.dp-menu .dp-apps-menu { border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .dp-menu.on > * { animation: dpl-in .3s var(--ease-out) both; }
  .dp-menu.on > :nth-child(2) { animation-delay: 20ms; } .dp-menu.on > :nth-child(3) { animation-delay: 40ms; } .dp-menu.on > :nth-child(n+4) { animation-delay: 60ms; }
}

/* Notifiche */
.dp-anchor { position: relative; display: inline-flex; }
.dp-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menu); width: min(340px, calc(100vw - 24px)); padding: 6px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--ink); font-family: var(--font-sans); text-align: left; }
.dp-pop-t { margin: 0; padding: 8px 10px 6px; font: 600 12.5px/1.2 var(--font-sans); color: var(--ink-3); }
.dp-pop-empty { margin: 0; padding: 4px 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.dp-feed { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.dp-feed li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 10px; border-radius: var(--r-s); font-size: 13.5px; }
.dp-feed li.new { background: var(--selected); }
.dp-feed li > a { display: contents; color: inherit; text-decoration: none; }
.dp-feed li:has(> a) { cursor: pointer; } .dp-feed li:has(> a:hover) { background: var(--hover, var(--sunken)); }
.dp-feed li:has(> a:focus-visible) { outline: 2px solid var(--drip-ink, var(--ink)); outline-offset: -2px; }
.dp-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-pop-act { margin-right: 6px; padding: 4px 8px; border-radius: var(--r-s); font: 600 12.5px/1 var(--font-sans); color: var(--drip-ink, var(--ink)); }
.dp-pop-act:hover { background: var(--sunken); } .dp-pop-act:focus-visible { outline: 2px solid var(--drip-ink, var(--ink)); }
.dp-feed b { font-weight: 600; overflow-wrap: anywhere; } .dp-feed span { grid-column: 1; color: var(--ink-3); font-size: 12.5px; } .dp-feed time { grid-row: 1; grid-column: 2; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.dp-pop-more { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--line); color: var(--drip-ink); font: 600 13px/1 var(--font-sans); text-decoration: none; }

/* ELIOS: pannello laterale */
.dp-sheet { position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: var(--z-overlay); width: min(420px, calc(100vw - 20px)); display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-m); background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-family: var(--font-sans); text-align: left; opacity: 0; transform: translateX(14px); transition: opacity .2s var(--ease-out), transform .3s var(--ease-out); }
.dp-sheet.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dp-sheet { transform: none; transition: opacity .01s; } }
.dp-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.dp-sheet-t { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 15px/1 var(--font-sans); letter-spacing: -.01em; }
.dp-elios-i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tone-orange) 18%, var(--surface-1)); color: var(--tone-orange); }
.dp-elios-i svg { width: 15px; height: 15px; }
.dp-sheet-b { overflow-y: auto; padding: 18px; display: grid; align-content: start; gap: 18px; }
.dp-sheet-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .dp-sheet-note a { color: var(--drip-ink); }
.dp-turn { display: grid; gap: 8px; }
.dp-q { justify-self: end; max-width: 88%; margin: 0; padding: 9px 13px; border-radius: var(--r-m) var(--r-m) 4px var(--r-m); background: var(--sunken); font-size: 14.5px; line-height: 1.45; }
.dp-a { font-size: 14.5px; line-height: 1.55; } .dp-a p { margin: 0 0 8px; } .dp-a ol, .dp-a ul { margin: 0 0 8px; padding-left: 20px; }
.dp-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .dp-src a { padding: 4px 9px; border-radius: var(--r-xs); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); color: var(--drip-ink); font: 600 12.5px/1.2 var(--font-sans); text-decoration: none; }
.dp-a .dp-err { color: var(--ink-2); }
.dp-sheet-f { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 12px; border-top: 1px solid var(--line); }
.dp-sheet-f textarea { resize: none; min-height: 44px; max-height: 140px; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font: 400 15px/1.4 var(--font-sans); }
.dp-sheet-f textarea:focus { outline: none; border-color: var(--drip-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--drip) 30%, transparent); }
.ds-btn.sm { min-height: var(--ctl-s); padding: 0 var(--s3); font-size: 13.5px; }

/* ——— "Invia a…" (core/send-to.js): stesso pannello in Docs, Sheets e PDF ——— */
.ds-send { width: min(520px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: var(--r-modal); background: var(--surface-1, var(--card)); color: var(--ink); box-shadow: var(--elev-3); font-family: var(--font-sans); }
.ds-send::backdrop { background: color-mix(in srgb, #0D0D0D 42%, transparent); }
.ds-send-in { display: flex; flex-direction: column; max-height: inherit; }
.ds-send-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 8px 24px; }
.ds-send-h h2 { margin: 0; font: 700 20px/1.2 var(--font-sans); letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-send-h em { font: italic 800 1.04em/1 var(--font-voice); }
.ds-send-x, .ds-send-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--r-pill); }
.ds-send-x { width: 40px; height: 40px; justify-content: center; }
.ds-send-x:hover, .ds-send-back:hover { background: var(--hover); }
.ds-send-b { overflow-y: auto; padding: 8px 24px 24px; }
.ds-send-l { margin: 4px 0 12px; font: 600 13px/1.3 var(--font-sans); color: var(--ink-2); }
.ds-send-t, .ds-send-r { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ds-send-t button, .ds-send-r button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ds-send-t button:hover, .ds-send-r button:hover, .ds-send-t button:focus-visible, .ds-send-r button:focus-visible { background: var(--hover); outline: none; }
.ds-send-t button[aria-disabled='true'] { cursor: not-allowed; } .ds-send-t button[aria-disabled='true'] .ds-send-ic, .ds-send-t button[aria-disabled='true'] b { opacity: .5; }
.ds-send-ni { display: grid; place-items: center; width: 36px; height: 36px; border-radius: calc(36px * .24); background: var(--ink); color: var(--paper); }
.ds-send-tt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ds-send-tt b, .ds-send-r b { font: 600 14.5px/1.3 var(--font-sans); }
.ds-send-tt small, .ds-send-r small { font-size: 12.5px; color: var(--ink-3); }
.ds-send-r button { display: grid; gap: 2px; }
.ds-send-go { color: var(--ink-3); flex: none; }
.ds-send-back { min-height: 34px; margin: 0 0 12px -8px; padding: 0 12px 0 8px; font: 600 13.5px/1 var(--font-sans); }
.ds-send-q { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 10px; padding: 0 12px; border-radius: var(--r-control); background: var(--sunken); color: var(--ink-2); }
.ds-send-q input { flex: 1; min-width: 0; height: var(--ctl-m); border: 0; background: transparent; color: var(--ink); font: 500 15px/1 var(--font-sans); outline: none; }
.ds-send-none { padding: 12px; color: var(--ink-3); font-size: 14px; } .ds-send-none.bad { color: var(--bad); }
.ds-send-f { display: grid; gap: 14px; }
.ds-send-a { display: flex; justify-content: flex-end; gap: 8px; }
.ds-send-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--ink-3); } .ds-send-msg.bad { color: var(--bad); }
.ds-send-done { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 0; }
.ds-send-done p { flex: 1; margin: 0; display: grid; } .ds-send-done span { color: var(--ink-3); font-size: 13px; }
/* menu della persona: organizzazione corrente sotto l'identità */
.dp-menu-cur { display: grid; gap: 1px; margin: 0 6px 8px; padding: 8px 10px; border-radius: var(--r-control); background: var(--sunken); }
.dp-menu-cur small { font: 600 11.5px/1.2 var(--font-sans); color: var(--ink-3); }
.dp-menu-cur b { font: 600 14px/1.3 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ——— Shell condivisa: misure da token, identiche in ogni prodotto ——— */
/* una sola impronta: 60 px a ogni larghezza; margine laterale sulla scala (13 → 21 px, --s3 → --s4). Gli slot vuoti
   (ricerca, contesto, strumenti del prodotto) si chiudono, l'altezza no. Misure: tools/header-metrics-verify.mjs */
.dp-shell { box-sizing: border-box; height: var(--shell-h); min-height: var(--shell-h); padding-inline: var(--shell-pad); }
/* strumenti del prodotto in una seconda riga dentro la testata (.dp-subbar, es. la barra della tela del CMS): la testata
   si allunga, la riga della shell resta di --shell-h */
.dp-shell:has(.dp-subbar) { height: auto; }
:where(.dp-shell) .dp-tools { gap: var(--shell-gap); }
:where(.dp-shell) .dp-tools > .dp-tool, :where(.dp-shell) .dp-tools .dp-anchor > .dp-tool, :where(.dp-shell) .dp-tools > .dp-slot > .dp-tool { width: var(--shell-btn); height: var(--shell-btn); border-radius: 50%; }
/* marchio nella barra: è allineato in basso alla riga del nome in Playfair, quindi il simbolo /D cadrebbe 0,133 × l'altezza
   delle maiuscole sotto il centro; il margine in basso lo riporta al centro ottico a ogni taglia (--cap) */
:is(.dp-shell, .dp-bar) .dp-brand { margin-bottom: calc(var(--cap, 17px) * .266); }
/* bersaglio di tocco alto come i pulsanti della shell; l'imbottitura è simmetrica: il marchio resta dov'è */
:is(.dp-shell, .dp-bar) .dp-brand { padding-block: calc((var(--shell-btn) - var(--cap, 17px)) / 2); min-width: 24px; justify-content: center; }
:where(.dp-shell) .dp-tools .dp-tool svg { width: var(--shell-icon); height: var(--shell-icon); }
.dp-me { gap: var(--shell-gap); margin-left: var(--shell-gap); }
.dp-me > .dp-avatar { width: var(--shell-avatar); height: var(--shell-avatar); margin: calc((var(--shell-btn) - var(--shell-avatar)) / 2); }
.dp-shell :is(.dp-pop, .dp-menu, .dpl) { top: calc(100% + var(--shell-pop-gap)); }

/* ——— Menu del profilo: identità al centro, un'azione principale, tre secondarie, tema ——— */
.dp-menu--me { width: 344px; padding: 22px 14px 12px; text-align: center; }
.dp-menu--me .dp-menu-who { display: grid; justify-items: center; grid-template-columns: none; gap: 3px; padding: 0 6px 16px; }
.dp-menu--me .dp-menu-who .dp-avatar { width: 72px; height: 72px; grid-row: auto; margin-bottom: 9px; font-size: 24px; }
.dp-menu--me .dp-menu-who b { font: 700 17px/1.25 var(--font-sans); max-width: 100%; }
.dp-menu--me .dp-menu-who small { font-size: 13px; }
.dp-menu--me .dp-menu-cur { display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 0; padding: 5px 11px; border-radius: var(--r-pill); background: var(--accent-field, color-mix(in srgb, var(--drip) 18%, var(--surface-1))); font: 600 12.5px/1.2 var(--font-sans); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-menu--me .dp-menu-cur::before { content: ''; width: 4px; height: 11px; flex: none; background: var(--accent, var(--drip)); transform: skewX(calc(var(--slash) * -1)); }
.dp-menu--me .dp-menu-cta { width: 100%; min-height: var(--ctl-l); margin: 0 0 12px; }
.dp-menu-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding: 4px 0 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.dp-menu-acts :is(a, button) { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-s); padding: 0 9px; white-space: nowrap; border-radius: var(--r-control); color: var(--ink-2); font: 500 13px/1 var(--font-sans); text-decoration: none; transition: background var(--m-hover), color var(--m-hover); }
.dp-menu-acts svg { width: 16px; height: 16px; color: var(--icon); }
.dp-menu-acts :is(a, button):hover, .dp-menu-acts :is(a, button):focus-visible { background: var(--hover); color: var(--ink); }
.dp-menu-acts [data-dp-out] { color: var(--bad); } .dp-menu-acts [data-dp-out] svg { color: currentColor; }
.dp-menu--me .dp-menu-theme { display: flex; justify-content: center; padding: 10px 0 2px; border-top: 1px solid var(--line); }

/* ——— Stato di sincronizzazione condiviso (core/sync-state.js) ——— */
.ds-sync { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); color: var(--ink-2); font: 500 13px/1 var(--font-sans); white-space: nowrap; transition: background var(--m-hover), color var(--m-hover); }
.ds-sync i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
.ds-sync[data-tone='busy'] i, .ds-sync[data-tone='warn-busy'] i { width: 12px; height: 12px; background: none; border: 2px solid color-mix(in srgb, var(--accent, var(--drip)) 30%, transparent); border-top-color: var(--accent-ink, var(--drip-ink)); animation: ds-sync-spin .8s linear infinite; }
.ds-sync[data-tone='warn-busy'] i { border-color: color-mix(in srgb, var(--warn) 30%, transparent); border-top-color: var(--warn); }
.ds-sync[data-tone='warn'] i { background: var(--warn); }
.ds-sync[data-tone='bad'] { background: var(--bad-soft, color-mix(in srgb, var(--bad) 12%, transparent)); color: var(--bad); }
.ds-sync[data-tone='bad'] i { background: var(--bad); }
.ds-sync[data-tone='warn'], .ds-sync[data-tone='warn-busy'] { background: var(--warn-soft, color-mix(in srgb, var(--warn) 12%, transparent)); color: var(--ink); }
.ds-sync button { margin-left: 2px; padding: 3px 8px; border: 0; border-radius: var(--r-control); background: var(--surface-2); color: var(--ink); font: 600 12px/1 var(--font-sans); cursor: pointer; box-shadow: var(--rim); }
.ds-sync button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .ds-sync:not([data-tone='bad']) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ds-sync:not([data-tone='bad']) { padding: 0 6px; } }
@keyframes ds-sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-sync i { animation: none !important; } }
.ds-sync:empty { display: none; }
/* gli strumenti della barra stanno sempre a destra, anche senza ricerca o titolo che li spinga (PDF, home delle app) */
.dp-shell > .dp-tools { margin-inline-start: auto; }

/* famiglie-prodotto: inizio (generato da tools/product-colors.mjs, non modificare a mano) */
:root {
  /* principale acceso (tessere, accenti, transizioni) e famiglia derivata; i tenui 100/300/500/700 restano sopra.
     --product-<id>-primary è il ruolo pubblico (product.<id>.primary): i fogli nuovi usano quello */
  --p-hub-main: #566679; --p-hub-on: #FFFFFF; --p-hub-softest: color-mix(in srgb, #566679 9%, var(--paper)); --p-hub-soft: color-mix(in srgb, #566679 22%, var(--paper)); --p-hub-strong: color-mix(in srgb, #566679 70%, #000); --product-hub-primary: var(--p-hub-main); --product-hub-on: var(--p-hub-on);
  --p-cms-main: #6A9614; --p-cms-on: #FFFFFF; --p-cms-softest: color-mix(in srgb, #6A9614 9%, var(--paper)); --p-cms-soft: color-mix(in srgb, #6A9614 22%, var(--paper)); --p-cms-strong: color-mix(in srgb, #6A9614 70%, #000); --product-cms-primary: var(--p-cms-main); --product-cms-on: var(--p-cms-on);
  --p-fiscoflow-main: #5587A2; --p-fiscoflow-on: #FFFFFF; --p-fiscoflow-softest: color-mix(in srgb, #5587A2 9%, var(--paper)); --p-fiscoflow-soft: color-mix(in srgb, #5587A2 22%, var(--paper)); --p-fiscoflow-strong: color-mix(in srgb, #5587A2 70%, #000); --product-fiscoflow-primary: var(--p-fiscoflow-main); --product-fiscoflow-on: var(--p-fiscoflow-on);
  --p-urban-main: #3C8A49; --p-urban-on: #FFFFFF; --p-urban-softest: color-mix(in srgb, #3C8A49 9%, var(--paper)); --p-urban-soft: color-mix(in srgb, #3C8A49 22%, var(--paper)); --p-urban-strong: color-mix(in srgb, #3C8A49 70%, #000); --product-urban-primary: var(--p-urban-main); --product-urban-on: var(--p-urban-on);
  --p-voice-main: #8D6A48; --p-voice-on: #FFFFFF; --p-voice-softest: color-mix(in srgb, #8D6A48 9%, var(--paper)); --p-voice-soft: color-mix(in srgb, #8D6A48 22%, var(--paper)); --p-voice-strong: color-mix(in srgb, #8D6A48 70%, #000); --product-voice-primary: var(--p-voice-main); --product-voice-on: var(--p-voice-on);
  --p-elios-main: #DE4E1E; --p-elios-on: #FFFFFF; --p-elios-softest: color-mix(in srgb, #DE4E1E 9%, var(--paper)); --p-elios-soft: color-mix(in srgb, #DE4E1E 22%, var(--paper)); --p-elios-strong: color-mix(in srgb, #DE4E1E 70%, #000); --product-elios-primary: var(--p-elios-main); --product-elios-on: var(--p-elios-on);
  --p-docs-main: #4F5DE3; --p-docs-on: #FFFFFF; --p-docs-softest: color-mix(in srgb, #4F5DE3 9%, var(--paper)); --p-docs-soft: color-mix(in srgb, #4F5DE3 22%, var(--paper)); --p-docs-strong: color-mix(in srgb, #4F5DE3 70%, #000); --product-docs-primary: var(--p-docs-main); --product-docs-on: var(--p-docs-on);
  --p-sheets-main: #119157; --p-sheets-on: #FFFFFF; --p-sheets-softest: color-mix(in srgb, #119157 9%, var(--paper)); --p-sheets-soft: color-mix(in srgb, #119157 22%, var(--paper)); --p-sheets-strong: color-mix(in srgb, #119157 70%, #000); --product-sheets-primary: var(--p-sheets-main); --product-sheets-on: var(--p-sheets-on);
  --p-pdf-main: #E04A2D; --p-pdf-on: #FFFFFF; --p-pdf-softest: color-mix(in srgb, #E04A2D 9%, var(--paper)); --p-pdf-soft: color-mix(in srgb, #E04A2D 22%, var(--paper)); --p-pdf-strong: color-mix(in srgb, #E04A2D 70%, #000); --product-pdf-primary: var(--p-pdf-main); --product-pdf-on: var(--p-pdf-on);
  --p-meet-main: #0A928F; --p-meet-on: #FFFFFF; --p-meet-softest: color-mix(in srgb, #0A928F 9%, var(--paper)); --p-meet-soft: color-mix(in srgb, #0A928F 22%, var(--paper)); --p-meet-strong: color-mix(in srgb, #0A928F 70%, #000); --product-meet-primary: var(--p-meet-main); --product-meet-on: var(--p-meet-on);
  --p-calendar-main: #1A7FD4; --p-calendar-on: #FFFFFF; --p-calendar-softest: color-mix(in srgb, #1A7FD4 9%, var(--paper)); --p-calendar-soft: color-mix(in srgb, #1A7FD4 22%, var(--paper)); --p-calendar-strong: color-mix(in srgb, #1A7FD4 70%, #000); --product-calendar-primary: var(--p-calendar-main); --product-calendar-on: var(--p-calendar-on);
  --p-contacts-main: #DB6A1E; --p-contacts-on: #FFFFFF; --p-contacts-softest: color-mix(in srgb, #DB6A1E 9%, var(--paper)); --p-contacts-soft: color-mix(in srgb, #DB6A1E 22%, var(--paper)); --p-contacts-strong: color-mix(in srgb, #DB6A1E 70%, #000); --product-contacts-primary: var(--p-contacts-main); --product-contacts-on: var(--p-contacts-on);
  --p-drive-main: #C9760D; --p-drive-on: #FFFFFF; --p-drive-softest: color-mix(in srgb, #C9760D 9%, var(--paper)); --p-drive-soft: color-mix(in srgb, #C9760D 22%, var(--paper)); --p-drive-strong: color-mix(in srgb, #C9760D 70%, #000); --product-drive-primary: var(--p-drive-main); --product-drive-on: var(--p-drive-on);
  --p-mail-main: #7C55E8; --p-mail-on: #FFFFFF; --p-mail-softest: color-mix(in srgb, #7C55E8 9%, var(--paper)); --p-mail-soft: color-mix(in srgb, #7C55E8 22%, var(--paper)); --p-mail-strong: color-mix(in srgb, #7C55E8 70%, #000); --product-mail-primary: var(--p-mail-main); --product-mail-on: var(--p-mail-on);
  --p-health-main: #D1466A; --p-health-on: #FFFFFF; --p-health-softest: color-mix(in srgb, #D1466A 9%, var(--paper)); --p-health-soft: color-mix(in srgb, #D1466A 22%, var(--paper)); --p-health-strong: color-mix(in srgb, #D1466A 70%, #000); --product-health-primary: var(--p-health-main); --product-health-on: var(--p-health-on);
  --p-storage-main: #2F6F96; --p-storage-on: #FFFFFF; --p-storage-softest: color-mix(in srgb, #2F6F96 9%, var(--paper)); --p-storage-soft: color-mix(in srgb, #2F6F96 22%, var(--paper)); --p-storage-strong: color-mix(in srgb, #2F6F96 70%, #000); --product-storage-primary: var(--p-storage-main); --product-storage-on: var(--p-storage-on);
  --p-workspace-main: #7C55E8; --p-workspace-on: #FFFFFF; --p-workspace-softest: color-mix(in srgb, #7C55E8 9%, var(--paper)); --p-workspace-soft: color-mix(in srgb, #7C55E8 22%, var(--paper)); --p-workspace-strong: color-mix(in srgb, #7C55E8 70%, #000); --product-workspace-primary: var(--p-workspace-main); --product-workspace-on: var(--p-workspace-on);
  --p-id-main: #2F6F96; --p-id-on: #FFFFFF; --p-id-softest: color-mix(in srgb, #2F6F96 9%, var(--paper)); --p-id-soft: color-mix(in srgb, #2F6F96 22%, var(--paper)); --p-id-strong: color-mix(in srgb, #2F6F96 70%, #000); --product-id-primary: var(--p-id-main); --product-id-on: var(--p-id-on);
  --p-work-main: #A23C9E; --p-work-on: #FFFFFF; --p-work-softest: color-mix(in srgb, #A23C9E 9%, var(--paper)); --p-work-soft: color-mix(in srgb, #A23C9E 22%, var(--paper)); --p-work-strong: color-mix(in srgb, #A23C9E 70%, #000); --product-work-primary: var(--p-work-main); --product-work-on: var(--p-work-on);
  --p-notes-main: #8A6D12; --p-notes-on: #FFFFFF; --p-notes-softest: color-mix(in srgb, #8A6D12 9%, var(--paper)); --p-notes-soft: color-mix(in srgb, #8A6D12 22%, var(--paper)); --p-notes-strong: color-mix(in srgb, #8A6D12 70%, #000); --product-notes-primary: var(--p-notes-main); --product-notes-on: var(--p-notes-on);
  --p-console-main: #9C4B2E; --p-console-on: #FFFFFF; --p-console-softest: color-mix(in srgb, #9C4B2E 9%, var(--paper)); --p-console-soft: color-mix(in srgb, #9C4B2E 22%, var(--paper)); --p-console-strong: color-mix(in srgb, #9C4B2E 70%, #000); --product-console-primary: var(--p-console-main); --product-console-on: var(--p-console-on);
  --accent-main: var(--drip-ink); --accent-strong: var(--drip-ink);
}
/* alias semantici (si usano questi, non gli esadecimali): ridefiniti dentro ogni [data-product], perché una variabile
   che ne usa un'altra si calcola dove è dichiarata */
:root, [data-product] {
  --surface-product: color-mix(in srgb, var(--accent-main) 8%, var(--surface-1));
  --surface-product-hover: color-mix(in srgb, var(--accent-main) 13%, var(--surface-1));
  --surface-product-selected: color-mix(in srgb, var(--accent-main) 20%, var(--surface-1));
  --border-product: color-mix(in srgb, var(--accent-main) 42%, transparent);
  --text-product: var(--accent-strong);
  --icon-product: var(--accent-main);
  --on-product: #FFFFFF;
}
:root[data-theme='dark'], .dark {
  --p-hub-main: color-mix(in srgb, #566679 88%, #fff); --p-hub-softest: color-mix(in srgb, #566679 12%, #0D0D0D); --p-hub-soft: color-mix(in srgb, #566679 26%, #0D0D0D); --p-hub-strong: color-mix(in srgb, #566679 55%, #fff); --product-hub-primary: var(--p-hub-main);
  --p-cms-main: color-mix(in srgb, #6A9614 88%, #fff); --p-cms-softest: color-mix(in srgb, #6A9614 12%, #0D0D0D); --p-cms-soft: color-mix(in srgb, #6A9614 26%, #0D0D0D); --p-cms-strong: color-mix(in srgb, #6A9614 55%, #fff); --product-cms-primary: var(--p-cms-main);
  --p-fiscoflow-main: color-mix(in srgb, #5587A2 88%, #fff); --p-fiscoflow-softest: color-mix(in srgb, #5587A2 12%, #0D0D0D); --p-fiscoflow-soft: color-mix(in srgb, #5587A2 26%, #0D0D0D); --p-fiscoflow-strong: color-mix(in srgb, #5587A2 55%, #fff); --product-fiscoflow-primary: var(--p-fiscoflow-main);
  --p-urban-main: color-mix(in srgb, #3C8A49 88%, #fff); --p-urban-softest: color-mix(in srgb, #3C8A49 12%, #0D0D0D); --p-urban-soft: color-mix(in srgb, #3C8A49 26%, #0D0D0D); --p-urban-strong: color-mix(in srgb, #3C8A49 55%, #fff); --product-urban-primary: var(--p-urban-main);
  --p-voice-main: color-mix(in srgb, #8D6A48 88%, #fff); --p-voice-softest: color-mix(in srgb, #8D6A48 12%, #0D0D0D); --p-voice-soft: color-mix(in srgb, #8D6A48 26%, #0D0D0D); --p-voice-strong: color-mix(in srgb, #8D6A48 55%, #fff); --product-voice-primary: var(--p-voice-main);
  --p-elios-main: color-mix(in srgb, #DE4E1E 88%, #fff); --p-elios-softest: color-mix(in srgb, #DE4E1E 12%, #0D0D0D); --p-elios-soft: color-mix(in srgb, #DE4E1E 26%, #0D0D0D); --p-elios-strong: color-mix(in srgb, #DE4E1E 55%, #fff); --product-elios-primary: var(--p-elios-main);
  --p-docs-main: color-mix(in srgb, #4F5DE3 88%, #fff); --p-docs-softest: color-mix(in srgb, #4F5DE3 12%, #0D0D0D); --p-docs-soft: color-mix(in srgb, #4F5DE3 26%, #0D0D0D); --p-docs-strong: color-mix(in srgb, #4F5DE3 55%, #fff); --product-docs-primary: var(--p-docs-main);
  --p-sheets-main: color-mix(in srgb, #119157 88%, #fff); --p-sheets-softest: color-mix(in srgb, #119157 12%, #0D0D0D); --p-sheets-soft: color-mix(in srgb, #119157 26%, #0D0D0D); --p-sheets-strong: color-mix(in srgb, #119157 55%, #fff); --product-sheets-primary: var(--p-sheets-main);
  --p-pdf-main: color-mix(in srgb, #E04A2D 88%, #fff); --p-pdf-softest: color-mix(in srgb, #E04A2D 12%, #0D0D0D); --p-pdf-soft: color-mix(in srgb, #E04A2D 26%, #0D0D0D); --p-pdf-strong: color-mix(in srgb, #E04A2D 55%, #fff); --product-pdf-primary: var(--p-pdf-main);
  --p-meet-main: color-mix(in srgb, #0A928F 88%, #fff); --p-meet-softest: color-mix(in srgb, #0A928F 12%, #0D0D0D); --p-meet-soft: color-mix(in srgb, #0A928F 26%, #0D0D0D); --p-meet-strong: color-mix(in srgb, #0A928F 55%, #fff); --product-meet-primary: var(--p-meet-main);
  --p-calendar-main: color-mix(in srgb, #1A7FD4 88%, #fff); --p-calendar-softest: color-mix(in srgb, #1A7FD4 12%, #0D0D0D); --p-calendar-soft: color-mix(in srgb, #1A7FD4 26%, #0D0D0D); --p-calendar-strong: color-mix(in srgb, #1A7FD4 55%, #fff); --product-calendar-primary: var(--p-calendar-main);
  --p-contacts-main: color-mix(in srgb, #DB6A1E 88%, #fff); --p-contacts-softest: color-mix(in srgb, #DB6A1E 12%, #0D0D0D); --p-contacts-soft: color-mix(in srgb, #DB6A1E 26%, #0D0D0D); --p-contacts-strong: color-mix(in srgb, #DB6A1E 55%, #fff); --product-contacts-primary: var(--p-contacts-main);
  --p-drive-main: color-mix(in srgb, #C9760D 88%, #fff); --p-drive-softest: color-mix(in srgb, #C9760D 12%, #0D0D0D); --p-drive-soft: color-mix(in srgb, #C9760D 26%, #0D0D0D); --p-drive-strong: color-mix(in srgb, #C9760D 55%, #fff); --product-drive-primary: var(--p-drive-main);
  --p-mail-main: color-mix(in srgb, #7C55E8 88%, #fff); --p-mail-softest: color-mix(in srgb, #7C55E8 12%, #0D0D0D); --p-mail-soft: color-mix(in srgb, #7C55E8 26%, #0D0D0D); --p-mail-strong: color-mix(in srgb, #7C55E8 55%, #fff); --product-mail-primary: var(--p-mail-main);
  --p-health-main: color-mix(in srgb, #D1466A 88%, #fff); --p-health-softest: color-mix(in srgb, #D1466A 12%, #0D0D0D); --p-health-soft: color-mix(in srgb, #D1466A 26%, #0D0D0D); --p-health-strong: color-mix(in srgb, #D1466A 55%, #fff); --product-health-primary: var(--p-health-main);
  --p-storage-main: color-mix(in srgb, #2F6F96 88%, #fff); --p-storage-softest: color-mix(in srgb, #2F6F96 12%, #0D0D0D); --p-storage-soft: color-mix(in srgb, #2F6F96 26%, #0D0D0D); --p-storage-strong: color-mix(in srgb, #2F6F96 55%, #fff); --product-storage-primary: var(--p-storage-main);
  --p-workspace-main: color-mix(in srgb, #7C55E8 88%, #fff); --p-workspace-softest: color-mix(in srgb, #7C55E8 12%, #0D0D0D); --p-workspace-soft: color-mix(in srgb, #7C55E8 26%, #0D0D0D); --p-workspace-strong: color-mix(in srgb, #7C55E8 55%, #fff); --product-workspace-primary: var(--p-workspace-main);
  --p-id-main: color-mix(in srgb, #2F6F96 88%, #fff); --p-id-softest: color-mix(in srgb, #2F6F96 12%, #0D0D0D); --p-id-soft: color-mix(in srgb, #2F6F96 26%, #0D0D0D); --p-id-strong: color-mix(in srgb, #2F6F96 55%, #fff); --product-id-primary: var(--p-id-main);
  --p-work-main: color-mix(in srgb, #A23C9E 88%, #fff); --p-work-softest: color-mix(in srgb, #A23C9E 12%, #0D0D0D); --p-work-soft: color-mix(in srgb, #A23C9E 26%, #0D0D0D); --p-work-strong: color-mix(in srgb, #A23C9E 55%, #fff); --product-work-primary: var(--p-work-main);
  --p-notes-main: color-mix(in srgb, #8A6D12 88%, #fff); --p-notes-softest: color-mix(in srgb, #8A6D12 12%, #0D0D0D); --p-notes-soft: color-mix(in srgb, #8A6D12 26%, #0D0D0D); --p-notes-strong: color-mix(in srgb, #8A6D12 55%, #fff); --product-notes-primary: var(--p-notes-main);
  --p-console-main: color-mix(in srgb, #9C4B2E 88%, #fff); --p-console-softest: color-mix(in srgb, #9C4B2E 12%, #0D0D0D); --p-console-soft: color-mix(in srgb, #9C4B2E 26%, #0D0D0D); --p-console-strong: color-mix(in srgb, #9C4B2E 55%, #fff); --product-console-primary: var(--p-console-main);
}
:root[data-theme='dark'], :root[data-theme='dark'] [data-product], .dark, .dark [data-product] {
  --surface-product: color-mix(in srgb, var(--accent-main) 12%, var(--surface-1));
  --surface-product-hover: color-mix(in srgb, var(--accent-main) 18%, var(--surface-1));
  --surface-product-selected: color-mix(in srgb, var(--accent-main) 26%, var(--surface-1));
  --text-product: var(--accent-strong);
}
[data-product='hub'] { --accent-main: var(--p-hub-main); --accent-strong: var(--p-hub-strong); }
[data-product='cms'] { --accent-main: var(--p-cms-main); --accent-strong: var(--p-cms-strong); }
[data-product='fiscoflow'] { --accent-main: var(--p-fiscoflow-main); --accent-strong: var(--p-fiscoflow-strong); }
[data-product='urban'] { --accent-main: var(--p-urban-main); --accent-strong: var(--p-urban-strong); }
[data-product='voice'] { --accent-main: var(--p-voice-main); --accent-strong: var(--p-voice-strong); }
[data-product='elios'] { --accent-main: var(--p-elios-main); --accent-strong: var(--p-elios-strong); }
[data-product='docs'] { --accent-main: var(--p-docs-main); --accent-strong: var(--p-docs-strong); }
[data-product='sheets'] { --accent-main: var(--p-sheets-main); --accent-strong: var(--p-sheets-strong); }
[data-product='pdf'] { --accent-main: var(--p-pdf-main); --accent-strong: var(--p-pdf-strong); }
[data-product='meet'] { --accent-main: var(--p-meet-main); --accent-strong: var(--p-meet-strong); }
[data-product='calendar'] { --accent-main: var(--p-calendar-main); --accent-strong: var(--p-calendar-strong); }
[data-product='contacts'] { --accent-main: var(--p-contacts-main); --accent-strong: var(--p-contacts-strong); }
[data-product='drive'] { --accent-main: var(--p-drive-main); --accent-strong: var(--p-drive-strong); }
[data-product='mail'] { --accent-main: var(--p-mail-main); --accent-strong: var(--p-mail-strong); }
[data-product='health'] { --accent-main: var(--p-health-main); --accent-strong: var(--p-health-strong); }
[data-product='storage'] { --accent-main: var(--p-storage-main); --accent-strong: var(--p-storage-strong); }
[data-product='workspace'] { --accent-main: var(--p-workspace-main); --accent-strong: var(--p-workspace-strong); }
[data-product='id'] { --accent-main: var(--p-id-main); --accent-strong: var(--p-id-strong); }
[data-product='work'] { --accent-main: var(--p-work-main); --accent-strong: var(--p-work-strong); }
[data-product='notes'] { --accent-main: var(--p-notes-main); --accent-strong: var(--p-notes-strong); }
[data-product='console'] { --accent-main: var(--p-console-main); --accent-strong: var(--p-console-strong); }
/* famiglie-prodotto: fine */

/* ——— Pulsanti: forme speciali (colori e varianti sono nella definizione unica di .ds-btn più sopra):
   icon · toolbar · split. Taglie: sm, lg. Stato: aria-busy="true". Premuto scala .97, risposta entro --motion-duration-fast. ——— */
:is(.ds-btn, .btn).icon { width: var(--b-size, var(--ctl-m)); min-width: 0; min-height: var(--b-size, var(--ctl-m)); padding: 0; border-radius: var(--r-control); }
:is(.ds-btn, .btn).icon svg { width: 18px; height: 18px; }
:is(.ds-btn, .btn).toolbar { min-height: var(--ctl-s); padding: 0 10px; border-radius: var(--r-control, 8px); background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13.5px; box-shadow: none; }
:is(.ds-btn, .btn).toolbar::before { display: none; }
:is(.ds-btn, .btn).toolbar:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
:is(.ds-btn, .btn).toolbar[aria-pressed='true'] { background: var(--surface-product-selected, color-mix(in srgb, var(--ink) 12%, transparent)); color: var(--text-product, var(--ink)); }
:is(.ds-btn, .btn).lg { min-height: var(--ctl-xl); padding: 0 30px; font-size: 16px; }
:is(.ds-btn, .btn)[aria-busy='true'] { color: transparent !important; pointer-events: none; }
:is(.ds-btn, .btn)[aria-busy='true']::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--paper) transparent var(--paper) transparent; animation: ds-spin .8s linear infinite; }
:is(.ds-btn, .btn):is(.ghost, .secondary, .quiet, .toolbar)[aria-busy='true']::after { border-color: var(--ink) transparent var(--ink) transparent; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* diviso: azione principale + menu delle alternative, un solo oggetto visivo */
.ds-split { display: inline-flex; isolation: isolate; }
.ds-split > :is(.ds-btn, .btn):first-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.ds-split > :is(.ds-btn, .btn):last-child { width: 40px; min-width: 0; padding: 0; margin-left: 2px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
@media (prefers-reduced-motion: reduce) { :is(.ds-btn, .btn)[aria-busy='true']::after { animation-duration: 2.4s; } }
/* ——— Applicazioni (html[data-product]): nelle app il serif corsivo non è la voce di ogni titolo: --font-voice diventa
   «DRIP Accento» (Ginto dritto) e la seconda parte dei titoli prende il colore del prodotto. Il sito resta editoriale.
   --fill/--on-fill sono alias dei token dei pulsanti (una sola regola: vedi .ds-btn più sopra). ——— */
:root, html[data-product] { --fill: var(--btn-bg); --on-fill: var(--btn-ink); }
html[data-product] { --font-voice: 'DRIP Accento', 'Ginto', var(--font-sans); }
html[data-product] :is(h1, h2, h3, h4, .ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4, .hub-h1, .cm-h1) em,
html[data-product] .ds-voice { color: var(--text-product); }
/* il marchio accanto al logo (DRIP Docs, DRIP FiscoFlow…) resta nella voce del brand */
html[data-product] :is(.dp-prod, .ff-brand__prod) { font-family: 'Playfair Display', Georgia, serif; }
/* ——— Segmentato unico (punto 10): <div class="ds-segmented" role="radiogroup|group"> con <button aria-checked|aria-pressed>
   oppure <label><input type="radio"></label>. Fondo incassato, voce scelta sollevata (superficie 2 + filo), raggio dei
   controlli, voci a --ctl-s; .is-fill divide la larghezza in parti uguali. ——— */
.ds-segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-control); background: var(--sunken); }
.ds-segmented.is-fill { display: flex; } .ds-segmented.is-fill > * { flex: 1 1 0; }
.ds-segmented > :is(button, label) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ctl-s); padding: 0 var(--s3); border: 0; border-radius: calc(var(--radius-control) - 3px); background: transparent; color: var(--ink-2); font: 600 var(--type-label-size)/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard); }
.ds-segmented > :is(button, label):hover { color: var(--ink); background: var(--hover); }
.ds-segmented > :is([aria-checked='true'], [aria-pressed='true'], [aria-selected='true'], .is-on, label:has(input:checked)) { background: var(--surface-2); color: var(--ink); box-shadow: var(--rim), var(--shadow-1); }
.ds-segmented > :is(button, label) span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-segmented > label input { position: absolute; opacity: 0; pointer-events: none; }
.ds-segmented > :is(button:focus-visible, label:has(input:focus-visible)) { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .ds-segmented > :is(button, label) { transition: none; } }

/* ——— Interruttore unico (direttiva «Unified Brand & Spatial», punto 10): <label class="ds-switch"><input type="checkbox"
   role="switch"><span>Etichetta</span></label>. Acceso nel colore del prodotto (nella piattaforma il blu di DRIP), pollice
   Off White; bersaglio pieno della riga (l'etichetta è cliccabile), anello di fuoco unico. ——— */
.ds-switch { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target-min); cursor: pointer; font: 600 var(--type-label-size)/1.2 var(--font-sans); color: var(--ink-2); }
.ds-switch input { appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-full); background: var(--sunken); cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard); }
.ds-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--ink-3); transition: transform var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard); }
.ds-switch input:checked { background: var(--accent-main, var(--drip-ink)); border-color: var(--accent-main, var(--drip-ink)); }
.ds-switch input:checked::after { transform: translateX(16px); background: var(--brand-color-white); }
.ds-switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-switch input:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ds-switch input, .ds-switch input::after { transition: none; } }

/* ——— Avviso breve unico (core/toast.js; direttiva «Unified Brand & Spatial», punto 10): una pila in basso al centro, il
   fondo del suggerimento (Off Black nel chiaro, Off White nello scuro), l'errore nel rosso di stato, un'azione tonale.
   Sale di --lift con il ruolo del popover, esce più in fretta; con riduci-movimento solo la dissolvenza. ——— */
.ds-toasts { position: fixed; left: 50%; bottom: max(var(--s4), env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; gap: var(--s2); justify-items: center; width: max-content; max-width: calc(100vw - 2 * var(--s4)); transform: translateX(-50%); pointer-events: none; }
.ds-toast { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl-l); padding: var(--s2) var(--s2) var(--s2) var(--s3); border-radius: var(--radius-control); background: var(--tooltip-bg); color: var(--tooltip-ink); font: 500 var(--type-body-size)/1.4 var(--font-sans); box-shadow: var(--shadow-2); pointer-events: auto; animation: ds-toast-in var(--m-popover) both; transition: opacity var(--motion-duration-fast) var(--ease-in), transform var(--motion-duration-fast) var(--ease-in); }
.ds-toast > span { padding-block: var(--s1); }
.ds-toast:not(:has(button)) { padding-right: var(--s3); }
.ds-toast.is-err { background: var(--bad); color: #FFFFFF; }
.ds-toast.is-out { opacity: 0; transform: translateY(var(--lift)); }
.ds-toast a { color: inherit; }
.ds-toast button { min-height: var(--ctl-s); padding: 0 var(--s3); border: 0; border-radius: var(--r-tag); background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font: 600 var(--type-label-size)/1 var(--font-sans); cursor: pointer; }
.ds-toast button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(var(--lift)); } }
@media (prefers-reduced-motion: reduce) { .ds-toast { animation: none; transition: opacity var(--motion-duration-fast) linear; } .ds-toast.is-out { transform: none; } }

/* ——— Stato vuoto unico (direttiva di ricostruzione, punti 76 e 78): spazio, un messaggio chiaro, una sola azione
   principale, l'identità del prodotto nella barra inclinata di DR/P. Le classi delle app (.ml-empty, .dv-empty…) sono
   questo stesso componente; .is-page per lo stato vuoto di una pagina intera. ——— */
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96) {
  position: relative; display: grid; justify-items: start; align-content: start; gap: var(--s2);
  max-width: 560px; margin: 0; padding: var(--s5) 0 var(--s5) calc(var(--s4) + 4px);
  border: 0; border-radius: 0; background: none; color: var(--ink-2); font: var(--type-body); text-align: left;
}
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96)::before { content: ''; position: absolute; left: 2px; top: calc(var(--s5) + 3px); width: 6px; height: 24px; background: var(--accent-main, var(--drip)); transform: skewX(calc(var(--slash) * -1)); }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96):has(> [class$='-empty-i'])::before { display: none; }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96):has(> [class$='-empty-i']) { padding-left: 0; }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96) > :is(b, strong, h2, h3, [class$='-empty-t']) { display: block; margin: 0; font: 700 var(--type-section-size)/1.2 var(--font-sans) !important; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96) > :is(b, strong, h2, h3, [class$='-empty-t']) em { font: inherit; font-style: normal; color: var(--text-product, var(--accent-ink)); }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96) p { margin: 0; max-width: 52ch; }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96) > :is(.ds-btn, .btn, .ds-btns, .acc-btns) { margin-top: var(--s2); }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96).is-page, .ml-shell > .ml-nobox, .dv-main > .dv-empty { margin: clamp(48px, 11vh, 120px) auto; padding-top: 0; }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96).is-page::before, .ml-shell > .ml-nobox::before, .dv-main > .dv-empty::before { top: 3px; height: 34px; }

/* ——— Primo avvio di un'app (livello B, docs/brand-system/data-and-empty.md): il posto in cui si lavora è vuoto del tutto.
   Un campo nel colore del prodotto che è già la zona di lavoro, la banda di DR/P, un titolo grande con una parola nella
   voce, una o due azioni. Con un filtro o una ricerca vuota resta .ds-empty, piccolo. ——— */
.ds-start { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3); min-height: clamp(320px, 56vh, 680px); padding: var(--s6); border-radius: var(--r-panel); background: color-mix(in srgb, var(--accent-main) 12%, var(--surface-1)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-main) 36%, transparent); overflow: hidden; color: var(--ink-2); }
.ds-start::before { content: ''; position: absolute; right: var(--s6); top: var(--s5); width: clamp(34px, 5vw, 89px); height: clamp(120px, 22vh, 233px); background: var(--accent-main); transform: skewX(calc(var(--slash) * -1)); animation: ds-start-band var(--motion-duration-brand) var(--ease-out) both; }
.ds-start > * { animation: ds-enter var(--motion-duration-emphasis) var(--ease-out) both; }
.ds-start > :nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.ds-start > :nth-child(n+3) { animation-delay: calc(var(--stagger) * 4); }
.ds-start-k { margin: 0; font: 600 var(--type-label-size)/1.2 var(--font-sans); color: var(--ink-3); }
.ds-start h2 { margin: 0; max-width: 14ch; font: 700 clamp(34px, 5.2vw, 89px)/.98 var(--font-sans); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.ds-start h2 em { font: italic 800 1.02em/1 var(--font-voice); letter-spacing: -.01em; color: var(--accent-strong); }
.ds-start > p:not(.ds-start-k) { margin: 0; max-width: 52ch; font-size: 16px; color: var(--ink-2); }
.ds-start-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.ds-start-acts svg { width: 18px; height: 18px; }
@keyframes ds-start-band { from { opacity: 0; transform: translate3d(0, 21%, 0) skewX(calc(var(--slash) * -1)); } }
@media (max-width: 560px) { .ds-start { padding: var(--s4); min-height: 52vh; } .ds-start::before { right: var(--s4); top: var(--s4); } }
@media (prefers-reduced-motion: reduce) { .ds-start::before, .ds-start > * { animation: none; } }
:is(.ds-empty, .ml-empty, .dv-empty, .pf-empty, .sh-empty, .cl-empty, .ct-empty, .mt-empty, .dc-empty-p, .hub-emptybox, .hub-empty-state, .ff-empty-state, .ff-empty.empty-v96).is-page > :is(b, strong, h2, h3, [class$='-empty-t']), .ml-shell > .ml-nobox > b, .dv-main > .dv-empty > b { font-size: var(--type-page-size) !important; line-height: 1.1 !important; }
.ml-shell > .ml-nobox { grid-column: 1 / -1; width: min(560px, 100% - 48px); }
/* l'icona dello stato vuoto è una tessera piena del prodotto con il segno bianco, come le icone dei servizi */
[class$='-empty-i'], .ff-empty-state > svg.lucide { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2); border-radius: var(--r-card); background: var(--accent-main, var(--drip)); color: var(--on-product, #fff); }
[class$='-empty-i'] svg { width: 24px; height: 24px; }
.ff-empty-state > svg.lucide { box-sizing: border-box; padding: 12px; }
:is(.ff-empty-state):has(> svg.lucide)::before { display: none; }
:is(.ff-empty-state):has(> svg.lucide) { padding-left: 0; }
/* DRIP CMS: le quattro modalità di un solo prodotto (packages/shell/src/cms-modes.js) — Contenuto · Design · Anteprima · Pubblica */
.dp-cmsmodes { display: inline-flex; gap: 2px; padding: 3px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-control); background: var(--paper-2); }
.dp-cmsmodes::-webkit-scrollbar { display: none; }
.dp-cmsmodes a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: calc(var(--r-control) - 2px); color: var(--ink-2); font: var(--type-label); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; flex: none; transition: background var(--m-hover), color var(--m-hover); }
.dp-cmsmodes a:hover { color: var(--ink); background: var(--hover); }
.dp-cmsmodes a[aria-current='page'] { background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-1); }
.dp-cmsmodes a[aria-current='page']::before { content: ''; width: 4px; height: 12px; margin-right: 8px; background: var(--accent-main, var(--drip)); transform: skewX(calc(var(--slash) * -1)); }
.dp-cmsmodes a[hidden] { display: none; }
@media (max-width: 760px) { .dp-cmsmodes a { padding: 0 var(--s2); } }
/* pulsante «crea» nella colonna delle app (Nuovo documento, Crea contatto, Scrivi, Nuova riunione, Nuovo evento…):
   lo stesso .ds-btn nel colore del prodotto, con le stesse misure in ogni app (direttiva master 30–32, 37) */
.ds-btn.ds-create { justify-content: flex-start; align-self: flex-start; min-height: var(--ctl-l); gap: var(--s2); margin: 0 0 var(--s3); padding: 0 var(--s4) 0 var(--s3); font: var(--type-label); font-weight: 700; }
.ds-btn.ds-create svg { width: 20px; height: 20px; flex: none; }
/* campo di ricerca delle app (Drive, Mail, Docs, Contacts…): uno solo, fondo incassato, raggio da controllo, lente a
   sinistra dentro il campo; al focus la superficie del campo e l'anello di focus del sistema (direttiva master 30–32) */
.ds-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ds-search > svg, .ds-search > .ds-search-i { position: absolute; left: var(--s3); top: 50%; display: flex; width: 18px; height: 18px; color: var(--ink-3); transform: translateY(-50%); pointer-events: none; }
.ds-search .ds-search-i svg { width: 18px; height: 18px; }
.ds-search input { width: 100%; min-height: var(--ctl-m); padding: 0 var(--s3) 0 calc(var(--s3) + 18px + var(--s2)); border: 1px solid transparent; border-radius: var(--r-control); background-color: var(--sunken); color: var(--ink); font: var(--type-body); box-shadow: none; outline: none; transition: background-color var(--m-hover), border-color var(--m-hover), box-shadow var(--m-hover); }
.ds-search input::placeholder { color: var(--ink-3); }
.ds-search input:focus { background-color: var(--field); border-color: var(--field-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent); }
/* ingresso del contenuto delle app (packages/shell/src/admin-shell.js): breve, una volta per vista.
   Profondità (direttiva master, 69–73): il contenuto arriva da poco dietro il piano dello schermo, in prospettiva, e si
   posa. Token: --motion-perspective (distanza dell'occhio), --motion-depth (quanto indietro parte), --motion-tilt
   (inclinazione). Solo transform e opacity: niente layout, niente WebGL, interrompibile. */
:root { --motion-perspective: 1400px; --motion-depth: -28px; --motion-tilt: 1.2deg; }
.ds-enter { animation: ds-enter var(--motion-duration-base, 240ms) var(--motion-ease-standard, cubic-bezier(.2, 0, 0, 1)) both; transform-origin: 50% 0; backface-visibility: hidden; }
/* entrate in profondità: mai verso chi guarda (Z positivo, bordo che si avvicina), altrimenti l'elemento durante
   l'animazione è più largo dello schermo e la pagina scorre in orizzontale */
@keyframes ds-enter { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 6px, var(--motion-depth)) rotateX(calc(var(--motion-tilt) * -1)); } }
/* movimento consapevole della destinazione (direttiva di ricostruzione, punto 40; master, 71): stesso DNA, gesto diverso.
   Docs e PDF: il foglio che sale verso chi legge · Sheets: la griglia che si apre dall'alto, rapida · Mail e Contacts:
   l'elenco che scorre di lato su un piano girato · Meet: la presenza che si avvicina · CMS: la tela che torna al suo
   piano · FiscoFlow: operativo, breve · Calendar: il piano del tempo che si raddrizza. */
html[data-product='docs'] .ds-enter, html[data-product='pdf'] .ds-enter { animation-name: ds-enter-paper; }
html[data-product='sheets'] .ds-enter { animation-name: ds-enter-grid; animation-duration: var(--motion-duration-fast, 160ms); transform-origin: top; }
html[data-product='mail'] .ds-enter, html[data-product='contacts'] .ds-enter { animation-name: ds-enter-list; transform-origin: 0 50%; }
html[data-product='meet'] .ds-enter { animation-name: ds-enter-near; transform-origin: 50% 50%; }
html[data-product='cms'] .ds-enter { animation-name: ds-enter-canvas; transform-origin: 50% 50%; }
html[data-product='fiscoflow'] .ds-enter { animation-name: ds-enter-ops; animation-duration: var(--motion-duration-fast, 160ms); }
html[data-product='calendar'] .ds-enter { animation-name: ds-enter-time; }
@keyframes ds-enter-paper { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 14px, calc(var(--motion-depth) * 1.4)) rotateX(-2deg); } }
@keyframes ds-enter-grid { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 0, calc(var(--motion-depth) * .5)) rotateX(-1.5deg); } }
@keyframes ds-enter-list { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(-10px, 0, calc(var(--motion-depth) * .7)) rotateY(1.6deg); } }
@keyframes ds-enter-near { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 0, calc(var(--motion-depth) * 1.3)); } }
@keyframes ds-enter-canvas { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 0, calc(var(--motion-depth) * .4)); } }
@keyframes ds-enter-ops { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 4px, calc(var(--motion-depth) * .5)); } }
@keyframes ds-enter-time { from { opacity: 0; transform: perspective(var(--motion-perspective)) translate3d(0, 8px, var(--motion-depth)) rotateX(-3.5deg); } }
@media (max-width: 760px) { :root { --motion-depth: -16px; --motion-tilt: .8deg; } }
@media (prefers-reduced-motion: reduce) { .ds-enter { animation: none; } }

/* ——— Colonna dell'app sotto gli 860 px (core/rail.js): cassetto da sinistra, non colonne impilate; «Nuovo» flottante.
   La colonna resta quella del desktop, fuori schermo: nessuna seconda versione dei contenuti. ——— */
.ds-rail-btn, .ds-fab { display: none; }
@media (max-width: 860px) {
  body:has([data-app-rail]) .ds-rail-btn { display: grid; }
  /* col pulsante del menu la testata tiene il simbolo /D e il nome del prodotto: la scritta DR/P lascia il posto */
  body:has([data-app-rail]) .dp-shell .dp-wm { display: none; }
  .ds-rail-btn { place-items: center; flex: none; width: var(--shell-btn); height: var(--shell-btn); margin-right: var(--s1); padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer; }
  .ds-rail-btn:hover { background: var(--hover, color-mix(in srgb, var(--ink) 6%, transparent)); }
  :root [data-app-rail][data-app-rail] { position: fixed; left: 0; top: var(--shell-h); bottom: 0; z-index: var(--z-overlay); width: min(300px, 86vw); height: auto; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; border: 0; background: var(--surface-1); box-shadow: var(--shadow-3); visibility: hidden; transform: translateX(-105%);
    transition: transform var(--motion-duration-base) var(--motion-ease-standard), visibility 0s linear var(--motion-duration-base); }
  :root body.ds-rail-open [data-app-rail][data-app-rail] { visibility: visible; transform: none; transition-delay: 0s; }
  :root [data-app-rail] [data-app-rail-create] { display: none; }
  body:has([data-app-rail] [data-app-rail-create]:not([hidden])) .ds-fab { display: inline-flex; }
  .ds-fab { position: fixed; right: var(--page-pad); bottom: max(var(--page-pad), env(safe-area-inset-bottom)); z-index: var(--z-sticky); align-items: center; gap: var(--s2);
    min-height: var(--ctl-xl); padding: 0 var(--s4) 0 var(--s3); border: 0; border-radius: var(--r-card); background: var(--accent-main, var(--drip)); color: var(--on-product, var(--on-drip)); font: 700 15px/1 var(--font-sans); box-shadow: var(--shadow-3); cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { :root [data-app-rail][data-app-rail] { transition: none; } }
/* ——— Contesto (organizzazione) al telefono: una riga sola. Il nome del prodotto lascia il posto al selettore, che prende
   lo spazio libero e si apre come foglio dal basso (DRIP Picker); il simbolo /D e il colore restano l’identità. ——— */
@media (max-width: 560px) {
  .dp-shell:has(label:not([hidden]) select[data-org]) .dp-prod { display: none; }
  /* lo spazio della riga va al selettore: passi stretti tra gli elementi, niente spaziatori vuoti */
  .dp-shell:has(label:not([hidden]) select[data-org]) { column-gap: var(--s1); }
  .dp-shell:has(label:not([hidden]) select[data-org]) > .ct-grow { display: none; }
  .dp-shell :is(label, .dp-slot, .dp-tools):has(select[data-org]) { flex: 1 1 auto; min-width: 0; }
  .dp-shell label:has(select[data-org]) :is(.dpk, .dpk-b, select) { width: 100%; min-width: 0; max-width: 100%; }
}

/* Moduli legali come flussi (packages/shell/src/legal.js, mountLegalFlows): righe con il filo, stato in parole, conferma
   esplicita sotto la riga. Stessi token in ogni prodotto che li ospita (Account, Hub). */
.dl-flows { display: grid; gap: var(--s2); }
.dl-flows-t { margin: 0; font: var(--type-section); }
.dl-flows-l { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dl-flow { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.dl-flow-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s4); }
.dl-flow-h b { display: block; font: 700 15px/1.3 var(--font-sans); }
.dl-flow-h small { display: block; margin-top: 2px; font: var(--type-caption); color: var(--ink-3); }
.dl-state { margin: var(--s1) 0 0; font: var(--type-caption); color: var(--ink-2); }
.dl-ok, .dl-todo { font-weight: 700; }
.dl-ok { color: var(--ok); } .dl-todo { color: var(--warn); }
.dl-acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.dl-form { display: grid; gap: var(--s3); max-width: 560px; margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.dl-form[hidden] { display: none; }
.dl-check { display: flex; gap: var(--s2); align-items: flex-start; font: var(--type-body); }
.dl-check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent, var(--drip)); }
.dl-err { margin: 0; font: var(--type-caption); color: var(--bad); }

/* ——— Card dati (direttiva di espansione, punti 8–12; docs/brand-system/components.md): una grammatica sola per i numeri
   che contano, in ogni prodotto. <article class="ds-stat" data-kind="hero|score|matchup|status|timeline|entity|live"
   data-tone="paper|product|cobalt|ink|alert">: etichetta (__k), numero (__v), contesto (__meta), andamento (__trend),
   misura (__bar), confronto (__vs). Contenitore pieno e arrotondato, filetto obliquo a 13° come bordo d'identità, numero
   grande in Ginto. Solo per sintesi, stato e scelta: il lavoro denso resta a tabelle e registri. ——— */
.ds-stat { --stat-bg: var(--surface-1); --stat-ink: var(--ink); --stat-mute: var(--ink-3); --stat-edge: var(--accent-main, var(--drip));
  position: relative; display: grid; align-content: start; gap: var(--s2); min-width: 0; padding: var(--s4); border-radius: var(--radius-large);
  background: var(--stat-bg); color: var(--stat-ink); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; isolation: isolate;
  transition: transform var(--m-hover), box-shadow var(--m-hover); }
.ds-stat::before { content: ""; position: absolute; top: 0; left: var(--s4); width: var(--s6); height: 4px; background: var(--stat-edge); transform: skewX(-13deg); }
.ds-stat[data-tone="product"] { --stat-bg: var(--accent-main, var(--drip)); --stat-ink: var(--on-product, var(--on-drip)); --stat-mute: color-mix(in srgb, var(--stat-ink) 72%, transparent); --stat-edge: var(--stat-ink); box-shadow: none; }
.ds-stat[data-tone="cobalt"] { --stat-bg: var(--brand-cobalt); --stat-ink: var(--brand-off-white); --stat-mute: color-mix(in srgb, var(--brand-off-white) 76%, transparent); --stat-edge: var(--brand-off-white); box-shadow: none; }
.ds-stat[data-tone="ink"] { --stat-bg: var(--brand-off-black); --stat-ink: var(--brand-off-white); --stat-mute: color-mix(in srgb, var(--brand-off-white) 70%, transparent); --stat-edge: var(--accent-main, var(--drip)); box-shadow: none; }
.ds-stat[data-tone="alert"] { --stat-edge: var(--bad); }
/* in scuro l'inchiostro diventa carta: la card resta piena e non sparisce nel fondo Off Black */
:is(:root[data-theme='dark'], .dark) .ds-stat[data-tone="ink"] { --stat-bg: var(--brand-off-white); --stat-ink: var(--brand-off-black); --stat-mute: color-mix(in srgb, var(--brand-off-black) 68%, transparent); }
.ds-stat[data-tone="alert"] .ds-stat__v { color: var(--bad); }
a.ds-stat:hover, button.ds-stat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--elev-2); }
:is(a, button).ds-stat[data-tone]:not([data-tone="paper"], [data-tone="alert"]):hover { box-shadow: var(--elev-2); }
a.ds-stat:active, button.ds-stat:active { transform: scale(.985); transition-duration: var(--motion-l0); }
.ds-stat__k { margin: 0; font: var(--type-label); color: var(--stat-mute); }
.ds-stat__v { margin: 0; font: 700 var(--fs-h4)/1.02 var(--font-wide); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-stat[data-kind="hero"] .ds-stat__v { font-size: var(--fs-h2); letter-spacing: -.045em; }
.ds-stat__meta { margin: 0; font: var(--type-caption); color: var(--stat-mute); }
.ds-stat__meta b { color: var(--stat-ink); font-weight: 700; }
.ds-stat__trend { justify-self: start; display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--stat-ink) 9%, transparent); font: 700 var(--fs-2xs)/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.ds-stat__trend[data-dir="up"]::before { content: "↗"; } .ds-stat__trend[data-dir="down"]::before { content: "↘"; }
.ds-stat__bar { display: flex; gap: 2px; height: 8px; margin-top: var(--s1); border-radius: var(--r-xs); overflow: hidden; background: color-mix(in srgb, var(--stat-ink) 10%, transparent); }
.ds-stat__bar > i { display: block; height: 100%; background: var(--stat-ink); }
.ds-stat__bar > i[data-k="late"] { background: var(--bad); }
.ds-stat__vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--s3); }
.ds-stat__vs > :last-child { text-align: right; }
.ds-stat__vs small { display: block; font: var(--type-caption); color: var(--stat-mute); }
.ds-stat__vs em { font: 700 var(--fs-xs)/1 var(--font-sans); font-style: normal; color: var(--stat-mute); }
.ds-stat[data-kind="timeline"] { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s3); }
.ds-stat[data-kind="timeline"] time { grid-row: span 2; display: grid; place-items: center; min-width: var(--s7); padding: var(--s2); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--stat-ink) 7%, transparent); font: 700 var(--fs-h5)/1 var(--font-wide); text-align: center; }
.ds-stat[data-kind="timeline"] time small { display: block; font: 500 var(--fs-2xs)/1.2 var(--font-sans); }
.ds-stat[data-kind="live"] .ds-stat__k::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s1); border-radius: var(--r-pill); background: var(--ok); animation: ds-stat-live var(--m-loading) infinite; }
@keyframes ds-stat-live { 50% { opacity: .35; } }
/* ingresso come una composizione sola: le card salgono insieme di un passo, con un ritardo breve e uguale (--i) */
.ds-stat-enter > * { animation: ds-stat-in var(--motion-l2) var(--ease-sport) both; animation-delay: calc(var(--i, 0) * var(--stagger, 28ms)); }
@keyframes ds-stat-in { from { opacity: 0; transform: translateY(var(--s3)); } }
@media (prefers-reduced-motion: reduce) { .ds-stat, .ds-stat-enter > * { animation: none; transition: none; } .ds-stat[data-kind="live"] .ds-stat__k::before { animation: none; } }

/* ——— Cursore DRIP (packages/shell/src/pointer.js): sul sito un punto che, sopra un controllo, prende il suo rettangolo e
   il suo raggio; nei servizi solo il sollevamento dei controlli, il puntatore nativo resta. ——— */
.dp-cur { position: fixed; left: 0; top: 0; z-index: 2147483600; width: 10px; height: 10px; border-radius: var(--r-pill); pointer-events: none; opacity: 0; will-change: transform, width, height;
  background: var(--brand-off-white); mix-blend-mode: difference; transition: background-color var(--motion-l1) var(--ease-out); }
.dp-cur.is-lift { mix-blend-mode: normal; background: color-mix(in srgb, var(--cur-tint, currentColor) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cur-tint, currentColor) 10%, transparent); }
.dp-cur.is-lift:not(.m-site) { background: color-mix(in srgb, var(--cur-tint, currentColor) 9%, transparent); }
html.dp-cur-on, html.dp-cur-on * { cursor: none; }
html.dp-cur-on :is(input, textarea, [contenteditable=""], [contenteditable="true"]) { cursor: text; }
html.dp-cur-on [data-cursor="native"], html.dp-cur-on [data-cursor="native"] * { cursor: auto; }
@media (forced-colors: active) { .dp-cur { display: none; } html.dp-cur-on, html.dp-cur-on * { cursor: auto; } }

/* ——— Lente d'ingrandimento (packages/shell/src/lens.js): un cerchio che segue il puntatore sopra l'area dell'app. ——— */
.dp-lens { position: fixed; left: 0; top: 0; z-index: 2147483500; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; scale: .86;
  background: var(--surface-0, var(--brand-off-white)); box-shadow: 0 0 0 1px var(--line-strong, var(--line)), 0 21px 55px rgba(13, 13, 13, .24);
  transition: opacity var(--motion-l1) var(--ease-out), scale var(--motion-l1) var(--ease-out); }
.dp-lens.is-on { opacity: 1; scale: 1; }
.dp-lens-in { position: absolute; inset: 0; }
.dp-lens-z { position: absolute; left: 50%; bottom: 13px; translate: -50% 0; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink, var(--brand-off-black)); color: var(--surface-0, var(--brand-off-white)); font: 600 11px/1.4 var(--font-sans); }
html.dp-lens-on [data-dp-lens] { color: var(--accent, var(--drip)); }
@media (prefers-reduced-motion: reduce) { .dp-lens { transition: none; scale: 1; } }