/* AEQUOR — il design system dell'area riservata, servito UNA volta.
   Generato da pagine/build-pagine.py (blocco V2, 11/09): NON si edita a mano.
   Fonti: _parti/css-ar-copiato.txt (intero, tutto scopato sotto .ar-demo) +
   le regole .ar-demo/.ar-vista di _parti/css-ar-scena.txt.
   Lo usano le 66 pagine Per chi?/figure/ruoli per la finestra dell'area riservata. */
/* ============================================================
   DESIGN SYSTEM DELL'AREA RISERVATA — COPIA SCOPATA SOTTO .ar-demo
   Generato da estrai-ar-css.py: NON si edita a mano, si rigenera.
   Fonte (sola lettura): 2_Aequor_AR/AR_1_Aequor/app/public/assets/css/
   Adozione cross-spazio ratificata da Davide il 2026-08-28.
   ============================================================ */


/* ---------- TOKEN dell'AR (:root -> .ar-demo)  (tokens.css:1-234) ---------- */
.ar-demo {
    --font-family-base: "Inter", sans-serif;
    --font-optical-sizing: auto;

    /* Scala tipografica 4-step (batch 1 typography refresh):
     * 28 = display / page-title / title — un solo step "grande"
     * 20 = section / lead
     * 15 = body
     * 12 = caption / meta
     * Gerarchia data da size + interazione/colore, NON da font-weight (tutto 500). */

    --text-display-size: 28px;
    --text-display-weight: 500;
    --text-display-line-height: 1.18;

    --text-title-size: 28px;
    --text-title-weight: 500;
    --text-title-line-height: 1.18;

    --text-page-title-size: 28px;
    --text-page-title-weight: 500;
    --text-page-title-line-height: 1.18;

    --text-section-size: 20px;
    --text-section-weight: 500;
    --text-section-line-height: 1.28;

    --text-lead-size: 20px;
    --text-lead-weight: 500;
    --text-lead-line-height: 1.38;

    --text-body-size: 15px;
    --text-body-weight: 500;
    --text-body-line-height: 1.45;

    --text-caption-size: 12px;
    --text-caption-weight: 500;
    --text-caption-line-height: 1.38;

    --text-meta-size: 12px;
    --text-meta-weight: 500;
    --text-meta-line-height: 1.35;

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

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    /* 2xl = card/isola standard. Rimappato da 28 a 30 per matchare i mockup Figma. */
    --radius-2xl: 30px;
    --radius-pill: 999px;

    /* Batch 2: thin promosso a 0.5px globale. main e thin ora coincidono.
     * thin resta per backward compat dei 351 consumer storici; main e' alias semantico. */
    --border-width-thin: 0.5px;
    --border-width-main: 0.5px;
    --border-subtle-alpha: 0.16;

    --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-peak: 0 8px 28px rgba(43, 23, 17, 0.08);

    --motion-fast: 140ms;
    --motion-base: 200ms;
    --motion-peak: 320ms;
    --motion-stagger: 40ms;
    /* Color/border micro-interactions */
    --motion-ease: ease;
    /* Spatial moves (drawer, optional entrance) — single coherent curve */
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-spring: cubic-bezier(0.34, 1.15, 0.4, 1);

    --size-icon-sm: 18px;
    --space-control-y: 6px;

    --color-brand: #f95100;
    --color-on-brand: #ffffff;
    --color-accent-strong: #ff451b;
    /* Colore del logo Aequor (SVG inline currentColor in sidebar-or-nav.php):
       default brand, i temi possono ridefinirlo (mist: nero caldo). */
    --color-logo: var(--color-brand);
    --color-overlay-scrim: rgba(0, 0, 0, 0.28);

    /* Velo modale unico (cluster modal-blur-unico, MC utente 2026-08-24).
     * Nomi PINNED: li consumano anche chat parallele con fallback su questi
     * valori — non rinominarli, non cambiarne la forma. Ogni scrim modale del
     * sito consuma questi token, niente valori hardcoded. */
    --modal-scrim-bg: rgba(20, 16, 14, 0.55);
    --modal-scrim-blur: 6px;
    /* Ingresso/uscita dei modal: fade morbido simmetrico ~300ms con curva
     * in-out dolce, "come il cambio light/dark" (cross-fade 300ms, theme.js).
     * Il set --motion-* non ha una curva in-out: questa nasce qui, dedicata
     * ai modal. Reduced-motion: la durata va a 0 (media query in fondo). */
    --modal-anim-duration: 300ms;
    --modal-anim-ease: cubic-bezier(0.45, 0.05, 0.25, 1);

    --color-ok-base: #1f9b6d;
    --color-warning-base: #ce7a07;
    --color-critical-base: #c73939;

    /* Align sidebar + main chrome (logo row vs top utilities) */
    --app-chrome-padding-top: 30px;

    /* Scala opacita' tipografica — gerarchia testi via trasparenza vs sfondo.
     * strong = titoli (100%) / base = body (78%) / soft = caption-meta-desc (56%).
     * Derivati da --color-text-primary, seguono automaticamente light/dark
     * perche' var() viene risolta al consumer (lazy). */
    --color-text-strong: var(--color-text-primary);
    --color-text-base: color-mix(in srgb, var(--color-text-primary) 78%, transparent);
    --color-text-soft: color-mix(in srgb, var(--color-text-primary) 56%, transparent);

    /* Tooltip — sistema globale .p-tooltip (4 varianti: micro/rich/coachmark/status).
     * Il tooltip viene appeso a <body> via portal JS (primitives.js) per uscire da
     * qualsiasi overflow:hidden e stare sopra modali/drawer.
     * z-index molto alto: modale Aequor sta tipicamente a 1000-2000. */
    --z-tooltip: 9999;
    /* Radius generoso per look "moderno premium": passa da --radius-sm (10px) a 14px.
     * Le card di Aequor stanno su --radius-md/lg/2xl, il tooltip qui usa 14px per
     * sembrare "card morbida" senza confondersi coi contenuti veri (che restano lg+). */
    --tooltip-radius: 14px;
    --tooltip-arrow-size: 6px;
    --tooltip-offset-micro: 8px;
    /* Rich con stacco maggiore (12 → 16): il glass effect comunica "card galleggiante",
     * lo stacco extra rafforza la percezione di overlay separato dal layout sotto. */
    --tooltip-offset-rich: 16px;
    --tooltip-max-width-micro: 240px;
    --tooltip-max-width-rich: 320px;
    --tooltip-max-width-coachmark: 360px;
    --tooltip-shadow: 0 14px 44px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.18);
    /* Glass effect "frosted premium" su nero: alpha 0.88 (era 0.78) + blur 24px
     * (era 16) + saturate 180% (era 140) per un effetto piu' tangibile, vicino al
     * pattern macOS Sonoma / Arc Browser. Lo sfondo dietro traspare meno ma la
     * texture "frosted" diventa piu' definita. Fallback a solid bg dove backdrop
     * non supportato. */
    --tooltip-bg: rgba(20, 12, 8, 0.88);
    --tooltip-bg-fallback: #1a0e09;
    --tooltip-blur: 24px;
    --tooltip-saturate: 180%;
    --tooltip-fg: #ffffff;
    --tooltip-fg-soft: rgba(255, 255, 255, 0.74);
    --tooltip-border: rgba(255, 255, 255, 0.1);
    /* Accent brand dentro il tooltip (icona rich/coachmark e counter).
       Token-izzato (era scoped html[data-theme=light] in primitives.css)
       cosi' anche i temi custom con tooltip chiaro ereditano il giusto accent. */
    --tooltip-accent-fg: color-mix(in srgb, var(--color-brand) 42%, #ffffff);
    --tooltip-accent-bg: color-mix(in srgb, var(--color-brand) 28%, transparent);
    --tooltip-counter-fg: color-mix(in srgb, var(--color-brand) 42%, var(--tooltip-fg));
    --tooltip-counter-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);

    /* Tutorial primo accesso v2 — panel checklist bottom-right (ancorato
     * allo stesso "angolo" del toast stack 9998). Il modal di conferma
     * "Salta il tour?" sta sopra il panel ma sotto il tooltip portal. */
    --z-tutorial-backdrop: 9996;
    --z-tutorial-panel: 9997;
    --z-tutorial-modal: 9998;
    --tutorial-panel-width: 360px;
    --tutorial-panel-radius: var(--radius-lg);
    --tutorial-pill-radius: var(--radius-pill);

    /* =====================================================================
       Token utility mancanti (pulizia temi 2026-06-11).
       Prima erano consumati senza definizione: ogni uso cascava sul proprio
       fallback hardcoded (o si invalidava in silenzio). Definirli qui rende
       il comportamento unico e prevedibile.
       ===================================================================== */
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --space-8: 40px;
    --line-height-tight: 1.2;

    /* =====================================================================
       ALIAS LEGACY → token canonici (pulizia temi 2026-06-11).
       Nei CSS storici convivevano piu' nomi per lo stesso concetto, ciascuno
       con fallback hex diversi: cambiando tema quei punti NON seguivano la
       palette. Gli alias risolvono al token canonico dell'elemento che li
       consuma (risoluzione lazy), quindi seguono light/dark E i temi custom.
       Nuovo codice: usare SOLO i canonici. Questi nomi sono compat.
       ===================================================================== */
    /* testo: scala canonica strong/base(secondary)/soft */
    --color-text: var(--color-text-primary);
    --color-text-muted: var(--color-text-secondary);
    --color-text-tertiary: var(--color-text-soft);
    /* superfici e bordi */
    --color-surface: var(--color-surface-1);
    --color-surface-muted: var(--color-surface-2);
    --color-surface-elevated: var(--color-surface-peak);
    --color-border: var(--color-border-subtle);
    --color-border-secondary: var(--color-border-soft);
    --color-border-strong: var(--color-border-subtle);
    /* brand e link */
    --color-accent: var(--color-brand);
    --color-brand-hover: var(--color-accent-strong);
    --color-brand-bg: color-mix(in srgb, var(--color-brand) 8%, transparent);
    --color-link-soft: color-mix(in srgb, var(--color-link) 40%, transparent);
    /* stato ok */
    --color-ok: var(--color-ok-fg);
    --color-success: var(--color-ok-fg);
    /* stato warning */
    --color-warning: var(--color-warning-fg);
    --color-warn-fg: var(--color-warning-fg);
    --color-warn-bg: var(--color-warning-bg);
    --color-warning-text: var(--color-warning-fg);
    --color-warning-dark: var(--color-warning-fg);
    /* stato critical/error/danger: un solo concetto, tre famiglie di nomi */
    --color-critical: var(--color-critical-fg);
    --color-critical-text: var(--color-critical-fg);
    --color-error: var(--color-critical-fg);
    --color-error-bg: var(--color-critical-bg);
    --color-error-border: var(--color-critical-border);
    --color-err-fg: var(--color-critical-fg);
    --color-danger: var(--color-critical-fg);
    --color-danger-fg: var(--color-critical-fg);
    /* info: nel design system l'accento informativo e' il brand */
    --color-info-fg: var(--color-brand);
    --color-info-bg: var(--color-nav-item-active-bg);
    /* tipografia / motion / ombre */
    --font-mono: var(--font-family-mono);
    --font-size-body: var(--text-body-size);
    --font-size-meta: var(--text-meta-size);
    --motion-normal: var(--motion-base);
    --shadow-xs: var(--shadow-soft);
    --shadow-2: var(--shadow-peak);
    --shadow-popover: var(--shadow-soft);
}

/* ---------- TOKEN light/dark dell'AR, rimappati sul front  (tokens.css:241-340) ---------- */
.ar-demo {
    /* Canvas = bianco puro. Le card si distinguono SOLO grazie allo stroke
     * (--color-border-subtle = #BBC7C7 main, --color-border-soft = #F5F5F5 quiet).
     * Era #f5f5f5 (poi promosso a stroke-soft per stati quiet/disabled). */
    --color-canvas: #ffffff;
    --color-surface-1: #ffffff;
    --color-surface-2: #fcfcfc;
    --color-text-primary: #2b1711;
    /* Batch 2: secondary promosso ad alias di text-base (78% trasparente).
     * Tutti i consumer legacy adottano la nuova scala opacita'. */
    --color-text-secondary: var(--color-text-base);
    /* Border main = grigio-blu BBC7C7 (era rgba(43,23,17,0.16) — promosso a #BBC7C7).
     * Usato come stroke principale ovunque (era 351 punti). */
    --color-border-subtle: #bbc7c7;
    /* Border soft = grigio chiarissimo, per stati "quiet" / disabled / divider deboli. */
    --color-border-soft: #f5f5f5;
    --color-nav-surface: #fff7f3;
    --color-nav-item: #6a5b56;
    --color-nav-item-active-bg: rgba(249, 81, 0, 0.12);
    --color-nav-item-active-text: #3c211a;
    --color-link: #f95100;
    --color-link-hover: #ff451b;

    --color-ok-fg: #0d6c49;
    --color-ok-bg: rgba(31, 155, 109, 0.14);
    --color-ok-border: rgba(13, 108, 73, 0.24);

    --color-warning-fg: #8a5200;
    --color-warning-bg: rgba(206, 122, 7, 0.15);
    --color-warning-border: rgba(138, 82, 0, 0.24);

    --color-critical-fg: #892a2a;
    --color-critical-bg: rgba(199, 57, 57, 0.14);
    --color-critical-border: rgba(137, 42, 42, 0.24);

    --color-surface-peak: #ffffff;

    /* Loading skeleton: base piatta tenue + riflesso leggermente piu' chiaro. */
    --color-skeleton-base: color-mix(in srgb, var(--color-surface-2) 84%, var(--color-text-primary) 9%);
    --color-skeleton-sheen: color-mix(in srgb, var(--color-surface-1) 72%, var(--color-text-primary) 4%);

    /* Tooltip light theme: glass effect "frosted premium" su bianco.
     * Alpha 0.92 (era 0.82) per piu' opacita' tangibile, blur+saturate ereditati
     * dai token globali (24px / 180%). Border piu' definito (0.12) per contorni
     * netti su canvas chiaro. Shadow rinforzata (16px blur / 0.16 alpha). */
    --tooltip-bg: rgba(255, 255, 255, 0.92);
    --tooltip-bg-fallback: #fbf8f5;
    --tooltip-fg: #2b1711;
    --tooltip-fg-soft: rgba(43, 23, 17, 0.66);
    --tooltip-border: rgba(43, 23, 17, 0.12);
    --tooltip-shadow: 0 14px 40px rgba(43, 23, 17, 0.16), 0 2px 6px rgba(43, 23, 17, 0.06);
    /* Su glass chiaro il brand-light perderebbe contrasto: brand pieno + bg piu' tenue. */
    --tooltip-accent-fg: var(--color-brand);
    --tooltip-accent-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
    --tooltip-counter-fg: var(--color-brand);
    --tooltip-counter-bg: color-mix(in srgb, var(--color-brand) 12%, transparent);

    color-scheme: light;
}


/* ---------- scala tipografica text-*  (tokens.css:365-428) ---------- */
.ar-demo .text-display {
    font-size: var(--text-display-size);
    font-weight: var(--text-display-weight);
    line-height: var(--text-display-line-height);
    font-style: normal;
}
.ar-demo .text-title {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    line-height: var(--text-title-line-height);
    font-style: normal;
}
.ar-demo .text-body {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    font-style: normal;
}
.ar-demo .text-caption {
    font-size: var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-line-height);
    font-style: normal;
}
.ar-demo .text-meta {
    font-size: var(--text-meta-size);
    font-weight: var(--text-meta-weight);
    line-height: var(--text-meta-line-height);
    font-style: normal;
    color: var(--color-text-secondary);
}
.ar-demo .text-section {
    font-size: var(--text-section-size);
    font-weight: var(--text-section-weight);
    line-height: var(--text-section-line-height);
    font-style: normal;
}
.ar-demo .text-lead {
    font-size: var(--text-lead-size);
    font-weight: var(--text-lead-weight);
    line-height: var(--text-lead-line-height);
    font-style: normal;
}
.ar-demo .text-page-title {
    font-size: var(--text-page-title-size);
    font-weight: var(--text-page-title-weight);
    line-height: var(--text-page-title-line-height);
    letter-spacing: -0.03em;
    font-style: normal;
}
.ar-demo .text-page-title--drawer {
    font-size: calc(var(--text-page-title-size) + 6px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

/* ---------- app-shell + isoletta topbar  (tokens.css:430-552) ---------- */
.ar-demo .app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr;
}
/* Main column: utility actions only (brand lives in sidebar) */
.ar-demo .app-top-utilities {
    position: sticky;
    top: calc(var(--app-chrome-padding-top) + env(safe-area-inset-top, 0px));
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: -10px 0 var(--space-4);
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
.ar-demo .app-top-utilities--actions-only {
    justify-content: flex-end;
}
.ar-demo .app-top-utilities__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: var(--space-2);
    /* Isola a capsula: estremi completamente tondi invece di angoli arrotondati */
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface-1) 94%, transparent);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 85%, transparent);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: auto;
}
.ar-demo .app-top-utilities__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    /* Hover/active circolare, coerente con l'isola a capsula */
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.9;
    -webkit-appearance: none;
    appearance: none;
    transition:
        color var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease);
}
.ar-demo .app-top-utilities__icon-btn:hover {
    color: var(--color-link);
    background: var(--color-nav-item-active-bg);
    opacity: 1;
}
.ar-demo .app-top-utilities__icon-btn:active {
    transform: scale(0.97);
}
/* "Aggiorna adesso" in corso (2026-07-14): primitives.js mette data-loading sul link
   fino alla navigazione. Il ricalcolo puo' durare parecchio (fan-out API), quindi il
   feedback e' obbligatorio: l'icona gira. Il click resta inerte via pointer-events —
   su un <a> l'attributo disabled non esiste (vedi commento in primitives.js). */
.ar-demo .app-top-utilities__icon-btn[data-loading="true"] {
    pointer-events: none;
    color: var(--color-link);
    opacity: 1;
}
.ar-demo .app-top-utilities__icon-btn[data-loading="true"] .p-icon {
    animation: ard-aequor-refresh-spin 0.9s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes ard-aequor-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .app-top-utilities__icon-btn[data-loading="true"] .p-icon {
        animation: none;
        opacity: 0.55;
      }
}
/* Stato attivo (es. Novità quando si e sulla relativa pagina) */
.ar-demo .app-top-utilities__icon-btn.is-active {
    color: var(--color-link);
    background: var(--color-nav-item-active-bg);
    opacity: 1;
}
.ar-demo .app-top-utilities__icon-btn .p-icon {
    font-size: 22px;
}

/* ---------- sidebar (brand, nav, link attivo)  (tokens.css:554-713) ---------- */
.ar-demo .sidebar {
    background: var(--color-canvas);
    border-right: var(--border-width-thin) solid var(--color-border-subtle);
    padding: var(--space-4);
    padding-top: var(--app-chrome-padding-top);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll senza barra visibile (evita restringimento del contenuto quando si espande il pannello) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ar-demo .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}
.ar-demo .sidebar__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-3);
    border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
}
.ar-demo .sidebar__brand-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.ar-demo .sidebar__brand-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}
.ar-demo .sidebar__brand-link:hover .sidebar__brand-logo {
    opacity: 0.85;
}
.ar-demo .sidebar__brand-logo {
    display: block;
    width: min(100%, 132px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 2px;
    /* SVG inline currentColor: il logo segue il tema. */
    color: var(--color-logo);
}
.ar-demo .sidebar__brand-name {
    font-size: var(--text-caption-size);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.ar-demo .sidebar__brand-company {
    font-size: var(--text-caption-size);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Voci switch azienda/sede (sessione utente): link di navigazione al contesto */
/* risolta a 1440px e scartata: @media (max-width: 1240px) */
/* risolta a 1440px e scartata: @media (max-width: 720px) */
.ar-demo .sidebar__nav {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    position: relative;
}
.ar-demo .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-nav-item);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-weight: 500;
    font-size: var(--text-body-size);
    position: relative;
    padding-right: calc(var(--space-3) + 20px);
    transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.ar-demo .sidebar__link-icon {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    font-size: 22px;
    line-height: 1;
    opacity: 0.88;
}
.ar-demo .sidebar__link:hover {
    color: var(--color-text-primary);
}
.ar-demo .sidebar__link.active {
    background: var(--color-nav-item-active-bg);
    color: var(--color-link);
}
.ar-demo .sidebar__link.active .sidebar__link-icon {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
    color: var(--color-link);
    opacity: 1;
}
.ar-demo .sidebar__link::after {
    content: "";
    position: absolute;
    right: var(--space-3);
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateY(-50%) scale(0.72);
    opacity: 0;
    transition:
        opacity var(--motion-fast) var(--motion-ease-out),
        transform var(--motion-fast) var(--motion-ease-out);
}

/* ---------- content-area e content-shell (il padding della colonna main)  (tokens.css:779-800) ---------- */
.ar-demo .content-area {
    padding: var(--space-5);
    padding-top: var(--app-chrome-padding-top);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ar-demo .content-area > .content-shell {
    flex: 1 1 auto;
    min-height: 0;
}
.ar-demo .content-shell {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 420px;
    box-shadow: none;
}

/* ---------- topbar: :root della colonna overlay bottom-right: --overlay-column-width e --overlay-c  (tokens.css:888-899) ---------- */
/* Colonna overlay bottom-right: tutto cio' che compare in basso a destra
   (toast stack, pannello tour) vive nello spazio del companion rail — stessa
   larghezza e stesso bordo destro — senza farne parte. Il canvas e' uniforme
   a 1440px centrato su TUTTE le pagine (vedi companion-rail.css), quindi la
   colonna e' calcolabile anche dove il rail non esiste o e' collassato.
   --overlay-base-offset = altezza del pannello tour quando visibile (settata
   da gratification.js): i toast si impilano sopra, il tour resta alla base. */
.ar-demo {
    --overlay-column-width: var(--companion-rail-width, 300px);
    --overlay-column-right: calc(max(0px, (100vw - var(--desktop-canvas-max-with-rail, 1440px)) / 2) + var(--space-5));
    --overlay-base-offset: 0px;
}

/* ---------- muted  (tokens.css:938-940) ---------- */
.ar-demo .muted {
    color: var(--color-text-secondary);
}

/* ---------- DESKTOP: canvas 1440, sidebar 212, isoletta  (tokens.css:1121-1219) ---------- */
/* sempre vera sul canvas 1440px: @media (min-width: 1024px) */
.ar-demo {
        --desktop-sidebar-width: 212px;
        --desktop-canvas-max: 1200px;
    }
.ar-demo .app-shell {
        max-width: var(--desktop-canvas-max);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr);
    }
.ar-demo .sidebar {
        padding: var(--space-3);
        padding-top: var(--app-chrome-padding-top);
    }
.ar-demo .sidebar__brand {
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-2);
    }
.ar-demo .sidebar__brand-logo {
        width: min(100%, 118px);
    }
.ar-demo .sidebar__nav {
        margin-top: var(--space-2);
        padding-top: var(--space-2);
    }
/* Compact type only inside sidebar (main column keeps global :root scale) */
.ar-demo .sidebar .sidebar__brand-name,
.ar-demo .sidebar .sidebar__brand-company {
        font-size: 11px;
    }
.ar-demo .sidebar .sidebar__link {
        gap: var(--space-2);
        padding: 6px var(--space-2);
        padding-right: calc(var(--space-2) + 20px);
        margin-bottom: var(--space-1);
        font-size: 14px;
    }
.ar-demo .sidebar .sidebar__link-icon {
        font-size: 20px;
    }
.ar-demo .content-area {
        padding: var(--space-4);
        padding-top: var(--app-chrome-padding-top);
    }
/* Main column fills grid; no second max-width (avoids gap between sidebar and content) */
.ar-demo .content-shell {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
/* Sticky bar full width of main column; framed pill hugs only support + theme */
.ar-demo .app-top-utilities {
        position: sticky;
        top: calc(var(--app-chrome-padding-top) + env(safe-area-inset-top, 0px));
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 50;
        margin: -10px 0 var(--space-4);
        min-height: 0;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
    }
.ar-demo .app-top-utilities__actions {
        gap: var(--space-2);
        pointer-events: auto;
    }
.ar-demo .app-top-utilities__icon-btn {
        width: 36px;
        height: 36px;
    }
.ar-demo .app-top-utilities__icon-btn .p-icon {
        font-size: 20px;
    }

/* ---------- override Figma cross-page: isoletta piccola, sidebar senza bordo, fade del rail  (tokens.css:1221-1455) ---------- */
/* =========================================================================
   Aggiornamenti UI cross-page (Figma 2026-05-28)
   - sidebar: niente bordo destro, logo piccolo, link compatti, footer in basso
   - filter bar: nessun box (no border / no bg / no padding)
   - page header (titolo + sottotitolo + linea sotto): nascosto ovunque
   - companion rail: header "Suggerimenti" nascosto
   - topbar: isola più piccola
   Override scoped per classe esistente per essere additivi.
   ========================================================================= */
/* Sidebar: rimuovo la linea verticale di separazione sidebar/main */
.ar-demo .sidebar {
    border-right: none;
}
/* Brand: niente linea sotto al logo, niente box.
   Altezza 42px = match con l'isola actions del topbar (top:30, h:42),
   padding-left = padding interno dei link nav, così il logo si allinea
   verticalmente all'isola di destra e orizzontalmente alle icone della nav. */
.ar-demo .sidebar__brand {
    height: 42px;
    padding: 0 0 0 var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: none;
    background: none;
    box-shadow: none;
    justify-content: center;
}
.ar-demo .sidebar__brand-logo {
    width: min(100%, 96px);
}
/* Footer della sidebar: Impostazioni + selettore azienda spinti in fondo */
.ar-demo .sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* Separator tra trigger sede e coppia Impostazioni/Esci. Hairline coerente
   con il divider tra brand e nav. */
.ar-demo .sidebar__divider {
    border: 0;
    border-top: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
    margin: var(--space-2) var(--space-2) var(--space-1);
}
/* "Esci": link bottom-anchored con tono leggermente muted per segnalare che
   e' un'azione (non navigazione). Hover -> torna al colore primario, come gli
   altri link nav. Regola UI: stesso footprint visivo degli altri sidebar__link. */
.ar-demo .sidebar__link--logout {
    color: var(--color-text-secondary);
}
.ar-demo .sidebar__link--logout .sidebar__link-icon {
    opacity: 0.7;
}
.ar-demo .sidebar__link--logout:hover,
.ar-demo .sidebar__link--logout:focus-visible {
    color: var(--color-text-primary);
}
.ar-demo .sidebar__link--logout:hover .sidebar__link-icon,
.ar-demo .sidebar__link--logout:focus-visible .sidebar__link-icon {
    opacity: 1;
}
/* Link nav: più compatti */
.ar-demo .sidebar__nav {
    margin-top: var(--space-2);
    padding-top: 0;
}
.ar-demo .sidebar__link {
    padding: 6px var(--space-2);
    margin-bottom: 2px;
    font-size: 13px;
    gap: var(--space-2);
    padding-right: calc(var(--space-2) + 18px);
}
.ar-demo .sidebar__link-icon {
    font-size: 18px;
}
/* Indicatore di caricamento link: riallineato al nuovo padding-right */
.ar-demo .sidebar__link::after {
    right: var(--space-2);
    width: 14px;
    height: 14px;
}
/* Topbar: isola a capsula più piccola */
.ar-demo .app-top-utilities__actions {
    padding: 4px;
    gap: 4px;
}
.ar-demo .app-top-utilities__icon-btn {
    width: 32px;
    height: 32px;
}
.ar-demo .app-top-utilities__icon-btn .p-icon {
    font-size: 18px;
}
/* Theme toggle: track ridotto per coerenza con i btn 32px */
.ar-demo .theme-toggle.theme-toggle--switch {
    height: 32px;
}
.ar-demo .theme-toggle__track {
    width: 52px;
    height: 28px;
}
/* Filter bar: niente box (no border, no bg, no padding) — solo gap */
.ar-demo .p-filter-bar {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}
/* Page header (title + subtitle + linea sotto): nascosto ovunque.
   Il primitive page-intro-metrics rende sempre .c-scadenze-context-bar,
   quindi targeting quella classe copre tutte le pagine.
   Selettore "body .x" per vincere sulla regola base in primitives.css,
   visto che tokens.css è caricato prima. */
.ar-demo.ar-demo .c-scadenze-context-bar {
    display: none;
}
/* Companion rail: header "Suggerimenti N" nascosto.
   "body .x" per vincere su companion-rail.css caricato dopo. */
.ar-demo.ar-demo .companion-rail__header {
    display: none;
}
/* Rail destro: fade ::before scroll-edge attivo SOLO durante scroll del body.
   - A riposo (data-rail-scrolled="false" o assente): opacity 0 → invisibile.
   - Durante scroll (data-rail-scrolled="true"): opacity 1 → fade morbido.
   Transizione di opacità per smoothness. Il JS che setta l'attributo è inline
   nel companion-rail.php. */
.ar-demo.ar-demo .companion-rail::before {
    top: -72px;
    height: 110px;
    background: linear-gradient(
        to bottom,
        var(--color-canvas) 0%,
        var(--color-canvas) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 180ms ease-out;
}
.ar-demo.ar-demo .companion-rail[data-rail-scrolled="true"]::before {
    opacity: 1;
}
.ar-demo.ar-demo .companion-rail::after {
    height: 14px;
}
/* Stacco verticale top: nello screen di riferimento il primo box del rail
   destro (card "Formazione in corso") è il riferimento di allineamento per
   nav sidebar e banner main. La card rail è a y ≈ 110, nav+banner devono
   raggiungerla → ~48px di stacco totale dall'isola/logo. */
.ar-demo .sidebar__nav {
    margin-top: calc(var(--space-6) + var(--space-6));
}
.ar-demo .app-top-utilities {
    margin-bottom: calc(var(--space-6) + var(--space-6));
}
.ar-demo.ar-demo .companion-rail {
    top: calc(var(--app-chrome-padding-top) + 64px);
}
/* Rail body: il padding-top di var(--space-4)=16px spinge la prima card
   sotto la y di banner/nav. Azzero a render iniziale per allineare a 110. */
.ar-demo.ar-demo .companion-rail__body {
    padding-top: 0;
}
/* Filter bar (search + select): input senza border, solo background.
   Scoping sotto le filter form delle pagine per non toccare altri input. */
.ar-demo .p-filter-bar .p-search-input__control,
.ar-demo .p-filter-bar .p-input,
.ar-demo .p-filter-bar .p-select,
.ar-demo .c-scadenze-filter-form .p-search-input__control,
.ar-demo .c-scadenze-filter-form .p-input,
.ar-demo .c-scadenze-filter-form .p-select,
.ar-demo .c-lavoratori-filter-form .p-search-input__control,
.ar-demo .c-lavoratori-filter-form .p-input,
.ar-demo .c-lavoratori-filter-form .p-select,
.ar-demo .c-adempimenti-filter-form .p-search-input__control,
.ar-demo .c-adempimenti-filter-form .p-input,
.ar-demo .c-adempimenti-filter-form .p-select {
    border-color: transparent;
}
/* Filter bar: label sopra l'input ("CERCA") nascosta — nel Figma c'è solo
   l'input col placeholder, nessuna etichetta.
   Selettore "body ..." per vincere su primitives.css caricato dopo. */
.ar-demo.ar-demo .p-filter-bar .p-control-label,
.ar-demo.ar-demo .c-scadenze-filter-form .p-control-label,
.ar-demo.ar-demo .c-lavoratori-filter-form .p-control-label,
.ar-demo.ar-demo .c-adempimenti-filter-form .p-control-label {
    display: none;
}
/* =========================================================================
   Isoletta topbar — Task #10
   Override e nuovo design sono in primitives.css sezione "Isoletta topbar
   Dynamic Island". Qui lasciamo solo lo stato "visto" del pallino Novita'
   per coerenza con la baseline gia' definita sopra (.app-top-utilities__).
   Il vecchio scaling +40% (Task #4a) e' stato rimosso: ora l'isoletta ha
   misure ridotte (-20% rispetto al +40%) gestite nel CSS dedicato.
   ========================================================================= */
/* Stato "visto": pallino Novità nascosto via data-flag sull'<a>.
   Il flag viene messo dal modulo notifications-seen.js quando tutti gli
   articoli freschi correnti sono stati aperti almeno una volta. */
.ar-demo .app-top-utilities__icon-btn[data-novita-seen="true"] .app-top-utilities__novita-dot {
    display: none;
}

/* ---------- sidebar: footer, divider, esci  (tokens.css:1255-1280) ---------- */
.ar-demo .sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* Separator tra trigger sede e coppia Impostazioni/Esci. Hairline coerente
   con il divider tra brand e nav. */
.ar-demo .sidebar__divider {
    border: 0;
    border-top: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
    margin: var(--space-2) var(--space-2) var(--space-1);
}
/* "Esci": link bottom-anchored con tono leggermente muted per segnalare che
   e' un'azione (non navigazione). Hover -> torna al colore primario, come gli
   altri link nav. Regola UI: stesso footprint visivo degli altri sidebar__link. */
.ar-demo .sidebar__link--logout {
    color: var(--color-text-secondary);
}
.ar-demo .sidebar__link--logout .sidebar__link-icon {
    opacity: 0.7;
}

/* ---------- adempimenti: reset .p-filter-bar (padding 0, niente bordo/sfondo/radius). Serve per capire   (tokens.css:1342-1348) ---------- */
/* Filter bar: niente box (no border, no bg, no padding) — solo gap */
.ar-demo .p-filter-bar {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

/* ---------- organigramma: body .c-scadenze-context-bar { display: none } — spegne OVUNQUE l'header di pa  (tokens.css:1350-1357) ---------- */
/* Page header (title + subtitle + linea sotto): nascosto ovunque.
   Il primitive page-intro-metrics rende sempre .c-scadenze-context-bar,
   quindi targeting quella classe copre tutte le pagine.
   Selettore "body .x" per vincere sulla regola base in primitives.css,
   visto che tokens.css è caricato prima. */
.ar-demo.ar-demo .c-scadenze-context-bar {
    display: none;
}

/* ---------- rail: body .companion-rail__header { display:none } — override che SPEGNE l'header '  (tokens.css:1359-1363) ---------- */
/* Companion rail: header "Suggerimenti N" nascosto.
   "body .x" per vincere su companion-rail.css caricato dopo. */
.ar-demo.ar-demo .companion-rail__header {
    display: none;
}

/* ---------- rail: Override dei fade ::before/::after del companion rail: sposta il ::before a to  (tokens.css:1365-1389) ---------- */
/* Rail destro: fade ::before scroll-edge attivo SOLO durante scroll del body.
   - A riposo (data-rail-scrolled="false" o assente): opacity 0 → invisibile.
   - Durante scroll (data-rail-scrolled="true"): opacity 1 → fade morbido.
   Transizione di opacità per smoothness. Il JS che setta l'attributo è inline
   nel companion-rail.php. */
.ar-demo.ar-demo .companion-rail::before {
    top: -72px;
    height: 110px;
    background: linear-gradient(
        to bottom,
        var(--color-canvas) 0%,
        var(--color-canvas) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 180ms ease-out;
}
.ar-demo.ar-demo .companion-rail[data-rail-scrolled="true"]::before {
    opacity: 1;
}
.ar-demo.ar-demo .companion-rail::after {
    height: 14px;
}

/* ---------- adempimenti: filter bar: border-color transparent sugli input scopati anche a .c-adempiment  (tokens.css:1413-1438) ---------- */
/* Filter bar (search + select): input senza border, solo background.
   Scoping sotto le filter form delle pagine per non toccare altri input. */
.ar-demo .p-filter-bar .p-search-input__control,
.ar-demo .p-filter-bar .p-input,
.ar-demo .p-filter-bar .p-select,
.ar-demo .c-scadenze-filter-form .p-search-input__control,
.ar-demo .c-scadenze-filter-form .p-input,
.ar-demo .c-scadenze-filter-form .p-select,
.ar-demo .c-lavoratori-filter-form .p-search-input__control,
.ar-demo .c-lavoratori-filter-form .p-input,
.ar-demo .c-lavoratori-filter-form .p-select,
.ar-demo .c-adempimenti-filter-form .p-search-input__control,
.ar-demo .c-adempimenti-filter-form .p-input,
.ar-demo .c-adempimenti-filter-form .p-select {
    border-color: transparent;
}
/* Filter bar: label sopra l'input ("CERCA") nascosta — nel Figma c'è solo
   l'input col placeholder, nessuna etichetta.
   Selettore "body ..." per vincere su primitives.css caricato dopo. */
.ar-demo.ar-demo .p-filter-bar .p-control-label,
.ar-demo.ar-demo .c-scadenze-filter-form .p-control-label,
.ar-demo.ar-demo .c-lavoratori-filter-form .p-control-label,
.ar-demo.ar-demo .c-adempimenti-filter-form .p-control-label {
    display: none;
}

/* ---------- utility u-sr-only / u-stack  (primitives.css:1-26) ---------- */
.ar-demo .u-sr-only,
.ar-demo .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ar-demo .u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ar-demo .u-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------- p-icon / p-focus-ring / p-button / p-badge  (primitives.css:33-232) ---------- */
.ar-demo .p-icon {
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
/* icon-system: icona SVG (sprite same-origin) che sostituisce il font icone SVG.
   Si dimensiona via font-size (1em) e si colora via currentColor, esattamente come
   faceva la ligature -> tutte le regole di sizing/colore per-contesto continuano a valere
   ritargettate su .p-icon. Vedi .claude/contracts/icon-system.md. */
.ar-demo .p-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    /* allinea l'icona alla baseline del testo come faceva il glifo del font */
    vertical-align: -0.15em;
    line-height: 1;
}
.ar-demo .p-icon use { pointer-events: none; }
.ar-demo .p-focus-ring:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}
.ar-demo .p-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-line-height);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-button:disabled,
.ar-demo .p-button[aria-disabled="true"] {
    opacity: 0.62;
    cursor: not-allowed;
}
.ar-demo .p-button--primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-color: var(--color-brand);
}
.ar-demo .p-button--primary:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    transform: translateY(-1px);
}
.ar-demo .p-button--secondary {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    border-color: var(--color-border-subtle);
}
.ar-demo .p-button--secondary:hover {
    border-color: var(--color-link);
}
.ar-demo .p-button--ghost {
    background: transparent;
    color: var(--color-text-primary);
    border-color: transparent;
}
.ar-demo .p-button--ghost:hover {
    background: var(--color-nav-item-active-bg);
}
.ar-demo .p-button--danger {
    background: var(--color-critical-bg);
    color: var(--color-critical-fg);
    border-color: var(--color-critical-border);
}
.ar-demo .p-button--danger:hover {
    border-color: var(--color-critical-fg);
}
.ar-demo .p-button__icon {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
    font-size: 18px;
    line-height: 1;
}
.ar-demo .p-button--primary .p-button__icon,
.ar-demo .p-button--secondary .p-button__icon {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}
.ar-demo .p-button--icon-only {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
}
.ar-demo .p-button--icon-only .p-button__icon {
    font-size: 22px;
}
@media (prefers-reduced-motion: no-preference) {
  .ar-demo .p-button:active:not(:disabled):not([aria-disabled="true"]) {
        transform: scale(0.96);
        transition-duration: var(--motion-fast);
      }
  .ar-demo .p-button--primary:active:not(:disabled):not([aria-disabled="true"]) {
        box-shadow: 0 6px 22px color-mix(in srgb, var(--color-brand) 42%, transparent);
      }
}
.ar-demo .p-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.72;
}
.ar-demo .p-button--disabled-aria.p-button--primary {
    opacity: 0.85;
}
.ar-demo .p-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    padding: 2px var(--space-2);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-line-height);
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast) var(--motion-ease);
}
/* Sistema label (spec 2026-06-17): tone neutro esplicito per info/counter.
   Alias dello stile base .p-badge (grigio): rende intenzionale il "non e' un
   semaforo", senza dipendere dall'assenza di modificatore. */
.ar-demo .p-badge--neutral {
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
}
.ar-demo .p-badge--ok {
    color: var(--color-ok-fg);
    border-color: var(--color-ok-border);
}
.ar-demo .p-badge--warning {
    color: var(--color-warning-fg);
    border-color: var(--color-warning-border);
}
.ar-demo .p-badge--critical {
    color: var(--color-critical-fg);
    border-color: var(--color-critical-border);
}
/* Alias neutro: i badge "info"/anagrafici (glossario) non sono semafori, quindi
   usano gli stessi token di .p-badge--neutral. Niente piu' blu link ne' bordo
   brand arancio. Classe mantenuta perche' molti consumatori la usano. */
.ar-demo .p-badge--info {
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
}
.ar-demo .p-badge--compact {
    padding: 1px var(--space-control-y);
}
/* Icona dentro un badge (es. segnalatore posti): dimensionata alla caption. */
.ar-demo .p-badge .p-badge__icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* ---------- impostazioni: .p-card-shell + .p-card-shell > .text-section — il guscio di TUTTE le <article  (primitives.css:234-249) ---------- */
.ar-demo .p-card-shell {
    background: var(--color-surface-1);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-none);
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-card-shell > .text-section {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- lavoratori: Primitive del campo di ricerca: .p-input-wrap/.p-select-wrap/.p-search-input,   (primitives.css:256-396) ---------- */
.ar-demo .p-input-wrap,
.ar-demo .p-select-wrap,
.ar-demo .p-search-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .p-control-label {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-caption-size);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ar-demo .p-input,
.ar-demo .p-select,
.ar-demo .p-search-input__control {
    min-height: 40px;
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    padding: 0 var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
}
.ar-demo .p-input::placeholder,
.ar-demo .p-search-input__control::placeholder {
    color: var(--color-text-secondary);
}
.ar-demo .p-search-input__icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: var(--size-icon-sm);
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}
.ar-demo .p-search-input__inner {
    position: relative;
    min-width: 0;
}
.ar-demo .p-search-input__control {
    width: 100%;
    padding-left: 38px;
}
.ar-demo .p-search-input__control--no-icon {
    padding-left: var(--space-3);
}
/* ─── Variante "brand": shape unificata coerente con l'hero ──────────────
 * Bordo 1px arancione, icona 'assistant' a sx, submit tondo brand a dx.
 * Usata su scadenze-search, lavoratori-search, adempimenti-search.
 * Stati submit (loading/success) gestiti da ui-search-brand.js.
 *
 * Doppia classe (.p-search-input.p-search-input--brand) per battere gli
 * override contestuali di .c-scadenze-filter-form e .c-lavoratori-search
 * che hanno specificity (0,2,0). */
.ar-demo .p-search-input.p-search-input--brand {
    width: 100%;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__inner {
    display: block;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill, 999px);
    padding-left: 40px;
    background: var(--color-surface-1, var(--color-surface-2));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control:focus,
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control:focus-visible {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline: none;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control--with-submit {
    padding-right: 44px;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__icon {
    color: var(--color-brand);
    opacity: 1;
    left: 12px;
    font-size: 18px;
}
/* Submit tondo arancione dentro l'input (coerente con d-command-hero__submit). */
.ar-demo .p-search-input__submit {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.ar-demo .p-search-input__submit:hover {
    filter: brightness(1.05);
}
.ar-demo .p-search-input__submit:active {
    transform: translateY(-50%) scale(0.96);
}
.ar-demo .p-search-input__submit-icon {
    font-size: 18px;
    line-height: 1;
}
/* Stati: di default solo "idle" è visibile. */
.ar-demo .p-search-input__submit-icon--loading,
.ar-demo .p-search-input__submit-icon--success {
    display: none;
}

/* ---------- adempimenti: .p-input-wrap/.p-select-wrap/.p-search-input (flex column), .p-control-label,   (primitives.css:256-415) ---------- */
.ar-demo .p-input-wrap,
.ar-demo .p-select-wrap,
.ar-demo .p-search-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .p-control-label {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-caption-size);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ar-demo .p-input,
.ar-demo .p-select,
.ar-demo .p-search-input__control {
    min-height: 40px;
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    padding: 0 var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
}
.ar-demo .p-input::placeholder,
.ar-demo .p-search-input__control::placeholder {
    color: var(--color-text-secondary);
}
.ar-demo .p-search-input__icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: var(--size-icon-sm);
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}
.ar-demo .p-search-input__inner {
    position: relative;
    min-width: 0;
}
.ar-demo .p-search-input__control {
    width: 100%;
    padding-left: 38px;
}
.ar-demo .p-search-input__control--no-icon {
    padding-left: var(--space-3);
}
/* ─── Variante "brand": shape unificata coerente con l'hero ──────────────
 * Bordo 1px arancione, icona 'assistant' a sx, submit tondo brand a dx.
 * Usata su scadenze-search, lavoratori-search, adempimenti-search.
 * Stati submit (loading/success) gestiti da ui-search-brand.js.
 *
 * Doppia classe (.p-search-input.p-search-input--brand) per battere gli
 * override contestuali di .c-scadenze-filter-form e .c-lavoratori-search
 * che hanno specificity (0,2,0). */
.ar-demo .p-search-input.p-search-input--brand {
    width: 100%;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__inner {
    display: block;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill, 999px);
    padding-left: 40px;
    background: var(--color-surface-1, var(--color-surface-2));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control:focus,
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control:focus-visible {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline: none;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__control--with-submit {
    padding-right: 44px;
}
.ar-demo .p-search-input.p-search-input--brand .p-search-input__icon {
    color: var(--color-brand);
    opacity: 1;
    left: 12px;
    font-size: 18px;
}
/* Submit tondo arancione dentro l'input (coerente con d-command-hero__submit). */
.ar-demo .p-search-input__submit {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.ar-demo .p-search-input__submit:hover {
    filter: brightness(1.05);
}
.ar-demo .p-search-input__submit:active {
    transform: translateY(-50%) scale(0.96);
}
.ar-demo .p-search-input__submit-icon {
    font-size: 18px;
    line-height: 1;
}
/* Stati: di default solo "idle" è visibile. */
.ar-demo .p-search-input__submit-icon--loading,
.ar-demo .p-search-input__submit-icon--success {
    display: none;
}
.ar-demo [data-p-search-brand].is-loading .p-search-input__submit-icon--idle,
.ar-demo [data-p-search-brand].is-success .p-search-input__submit-icon--idle {
    display: none;
}
.ar-demo [data-p-search-brand].is-loading .p-search-input__submit-icon--loading {
    display: inline-block;
    animation: ard-p-search-spin 0.9s linear infinite;
}
.ar-demo [data-p-search-brand].is-success .p-search-input__submit-icon--success {
    display: inline-block;
}
.ar-demo [data-p-search-brand].is-success .p-search-input__submit {
    /* Verde brand-friendly per feedback positivo. */
    background: var(--color-ok-base);
}
@keyframes ard-p-search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- lavoratori: .p-filter-bar + modificatore .p-filter-bar--bare (il box filtri della pagina l  (primitives.css:417-435) ---------- */
.ar-demo .p-filter-bar {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    background: var(--color-surface-2);
}
/* Modifier "bare": nessun box wrapper attorno al filter bar. Usato quando
 * dentro c'è la barra brand (p-search-input--brand) che porta già una sua
 * identità visiva. Senza box: l'allineamento al layout della pagina
 * (titolo / banner / contenuti) resta coerente. */
.ar-demo .p-filter-bar.p-filter-bar--bare {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

/* ---------- adempimenti: .p-filter-bar base (grid, padding space-4, bordo, radius-xl, surface-2), il mo  (primitives.css:417-450) ---------- */
.ar-demo .p-filter-bar {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    background: var(--color-surface-2);
}
/* Modifier "bare": nessun box wrapper attorno al filter bar. Usato quando
 * dentro c'è la barra brand (p-search-input--brand) che porta già una sua
 * identità visiva. Senza box: l'allineamento al layout della pagina
 * (titolo / banner / contenuti) resta coerente. */
.ar-demo .p-filter-bar.p-filter-bar--bare {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.ar-demo .p-filter-bar__controls {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, 220px)) auto auto;
    align-items: end;
}
.ar-demo .p-filter-bar__controls > * {
    min-width: 0;
}
.ar-demo .p-filter-bar__meta {
    color: var(--color-text-secondary);
}

/* ---------- dashboard-main: Commento + regola .d-dashboard: la colonna centrale, --dashboard-col-max: 635p  (primitives.css:821-827) ---------- */
/* Dashboard: single focused column (~85% of former Priorità block width) */
.ar-demo .d-dashboard {
    --dashboard-col-max: 635px;
    max-width: var(--dashboard-col-max);
    margin-inline: 0;
    width: 100%;
}

/* ---------- dashboard-main: .d-dashboard__zones (flex column, gap --space-7) + .d-dashboard__zone (min-wid  (primitives.css:869-883) ---------- */
.ar-demo .d-dashboard__zones {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}
.ar-demo .d-dashboard__zone {
    min-width: 0;
    position: relative;
    z-index: 1;
}
.ar-demo .d-dashboard__zone--command {
    z-index: 2;
}

/* ---------- lavoratori: Filter disclosure lavoratori/adempimenti: __head, __search, __actions, __panel  (primitives.css:1552-1592) ---------- */
/* ─── Filter disclosure lavoratori / adempimenti ────────────────────────
 * Stesso pattern di scadenze (testa: barra + 2 icone; pannello collassato
 * con i select), riusati come modificatori indipendenti per evitare il
 * doppio binding JS sul toggle. */
.ar-demo .c-lavoratori-filter-disclosure__head,
.ar-demo .c-adempimenti-filter-disclosure__head {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}
.ar-demo .c-lavoratori-filter-disclosure__search,
.ar-demo .c-adempimenti-filter-disclosure__search {
    min-width: 0;
}
.ar-demo .c-lavoratori-filter-disclosure__actions,
.ar-demo .c-adempimenti-filter-disclosure__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}
.ar-demo .c-lavoratori-filter-disclosure__panel[hidden],
.ar-demo .c-adempimenti-filter-disclosure__panel[hidden] {
    display: none;
}
.ar-demo .c-lavoratori-filter-disclosure__panel,
.ar-demo .c-adempimenti-filter-disclosure__panel {
    padding-top: var(--space-2);
}
.ar-demo .c-lavoratori-filter-disclosure__controls {
    display: grid;
    grid-template-columns: minmax(180px, 280px);
    gap: var(--space-2);
}
.ar-demo .c-adempimenti-filter-disclosure__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: var(--space-2);
    align-items: end;
}

/* ---------- adempimenti: blocco 'Filter disclosure lavoratori / adempimenti': .c-adempimenti-filter-dis  (primitives.css:1552-1597) ---------- */
/* ─── Filter disclosure lavoratori / adempimenti ────────────────────────
 * Stesso pattern di scadenze (testa: barra + 2 icone; pannello collassato
 * con i select), riusati come modificatori indipendenti per evitare il
 * doppio binding JS sul toggle. */
.ar-demo .c-lavoratori-filter-disclosure__head,
.ar-demo .c-adempimenti-filter-disclosure__head {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}
.ar-demo .c-lavoratori-filter-disclosure__search,
.ar-demo .c-adempimenti-filter-disclosure__search {
    min-width: 0;
}
.ar-demo .c-lavoratori-filter-disclosure__actions,
.ar-demo .c-adempimenti-filter-disclosure__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}
.ar-demo .c-lavoratori-filter-disclosure__panel[hidden],
.ar-demo .c-adempimenti-filter-disclosure__panel[hidden] {
    display: none;
}
.ar-demo .c-lavoratori-filter-disclosure__panel,
.ar-demo .c-adempimenti-filter-disclosure__panel {
    padding-top: var(--space-2);
}
.ar-demo .c-lavoratori-filter-disclosure__controls {
    display: grid;
    grid-template-columns: minmax(180px, 280px);
    gap: var(--space-2);
}
.ar-demo .c-adempimenti-filter-disclosure__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: var(--space-2);
    align-items: end;
}
/* risolta a 1440px e scartata: @media (max-width: 720px) */

/* ---------- lavoratori: Override D4 filtro Sede: .c-lavoratori-filter-disclosure__head passa a flex pe  (primitives.css:1599-1650) ---------- */
/* ── D4 filtro Sede (capogruppo multi-sede) ──────────────────────────────
 * La testa lavoratori puo' avere 3 figli (search | sede | refresh): il grid a 2
 * colonne sopra mandava il refresh a capo e il <select> nativo era senza stile.
 * Override SOLO per lavoratori -> flex (adempimenti resta sul grid). Select
 * compatto, allineato all'altezza del campo ricerca (40px), chevron custom. */
.ar-demo .c-lavoratori-filter-disclosure__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.ar-demo .c-lavoratori-filter-disclosure__search {
    flex: 1 1 240px;
    min-width: 0;
}
.ar-demo .c-lavoratori-filter-disclosure__sede {
    flex: 0 0 auto;
}
.ar-demo .c-lavoratori-filter-disclosure__actions {
    flex: 0 0 auto;
}
.ar-demo .c-lavoratori-sede-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    margin: 0;
}
.ar-demo .c-lavoratori-sede-filter__label {
    flex: 0 0 auto;
}
.ar-demo .c-lavoratori-sede-filter__select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    max-width: 220px;
    padding: 0 calc(var(--space-3) + 16px) 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
}
.ar-demo .c-lavoratori-sede-filter__select:hover {
    border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border-subtle));
}

/* ---------- tabella di lista (base)  (primitives.css:1909-1941) ---------- */
.ar-demo .c-listing-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--text-caption-size);
}
.ar-demo .c-listing-table thead th {
    text-align: left;
    padding: 0 var(--space-2) var(--space-2) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-caption-size);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
}
.ar-demo .c-listing-table tbody td {
    padding: var(--space-4) var(--space-2) var(--space-4) 0;
    vertical-align: top;
    border: none;
    border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
    background: transparent;
    transition: background-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .c-listing-table tbody tr:hover td {
    background: color-mix(in srgb, var(--color-surface-2) 62%, transparent);
}

/* ---------- adempimenti: 'Adempimenti — tabella premium': .c-adempimenti .c-adempimenti-list (la CARD c  (primitives.css:1940-2018) ---------- */
/* Adempimenti — tabella premium. Scopato sotto .c-adempimenti perche'
   .c-listing-table e' condivisa con documenti/lavoratori. */
.ar-demo .c-adempimenti .c-adempimenti-list {
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    padding: var(--space-4) var(--space-5);
}
.ar-demo .c-adempimenti .c-adempimenti-list__head {
    margin-bottom: var(--space-3);
}
.ar-demo .c-adempimenti .c-listing-table thead th {
    padding: 0 var(--space-3) var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.ar-demo .c-adempimenti .c-listing-table tbody td {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    vertical-align: middle;
}
.ar-demo .c-adempimenti .c-listing-table tbody tr:last-child td {
    border-bottom: none;
}
.ar-demo .c-adempimenti .c-listing-table tbody tr:hover td {
    background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
}
/* Chip scadenza colorata per urgenza (scaduto / entro 30g) */
.ar-demo .c-adempimenti-scad {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-caption-size);
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.ar-demo .c-adempimenti-scad .p-icon {
    font-size: 15px;
    line-height: 1;
}
.ar-demo .c-adempimenti-scad--warning {
    color: var(--color-warning-fg);
    background: color-mix(in srgb, var(--color-warning-fg) 12%, transparent);
}
.ar-demo .c-adempimenti-scad--critical {
    color: var(--color-critical-fg);
    background: color-mix(in srgb, var(--color-critical-fg) 12%, transparent);
}
/* Download brand compatto (riusa .p-button--primary).
   Regola UI/UX: i bottoni della stessa pagina hanno la STESSA dimensione visiva
   (W e H). Si fissa la W sul caso peggiore della pagina — qui il summary della
   tendina "Scarica (NN)" con caret e numero a 2 cifre — cosi' "Scarica" singolo
   e "Scarica (4)" hanno solo piu' padding interno, non un footprint diverso. */
.ar-demo .c-adempimenti .c-adempimenti-download.p-button {
    min-height: 32px;
    min-width: 168px;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3);
    font-weight: 500;
    justify-content: center;
}
.ar-demo .c-adempimenti .c-adempimenti-download.p-button .p-button__icon {
    font-size: 16px;
}

/* ---------- lavoratori: Header di pagina reso da components/primitives/page-intro-metrics.php: .c-scad  (primitives.css:3419-3457) ---------- */
/* Context bar */
.ar-demo .c-scadenze-context-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 40%, transparent);
}
.ar-demo .c-scadenze-context-bar__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ar-demo .c-scadenze-context-bar__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 auto;
}
.ar-demo .c-scadenze-context-bar__title {
    margin: 0;
}
.ar-demo .c-scadenze-context-bar__subtitle {
    margin: 0;
    max-width: 52ch;
}
.ar-demo .c-scadenze-context-bar__cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- lavoratori: Banner CTA lavoratori: .c-lavoratori-cta-banner (sfondo pesca brand-tinted), _  (primitives.css:4034-4092) ---------- */
/* --- Lavoratori domain (read-only integration) --- */
/* Banner d'ingresso flusso (Aggiungi lavoratore / Iscrivi a corso): allineato
   1:1 al look del banner "Nomine mancanti" dell'organigramma (.org-nomine-banner):
   sfondo pesca brand-tinted + bordo brand, cosi' tutti i banner-azione in cima
   alle pagine hanno la stessa firma visiva. L'organigramma resta la SSOT visiva
   e non viene toccato; qui ci si allinea ai suoi stessi token. */
.ar-demo .c-lavoratori-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface-1));
    border: 1px solid color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
    border-radius: var(--radius-md);
}
.ar-demo .c-lavoratori-cta-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.ar-demo .c-lavoratori-cta-banner__icon {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--color-brand);
}
.ar-demo .c-lavoratori-cta-banner__text {
    margin: 0;
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text-primary);
}
/* CTA "Aggiungi" del banner lavoratori: ospita un badge sede destinataria inline.
   Il bottone resta gap-based per mantenere allineamento icona/label/badge. */
.ar-demo .c-lavoratori-cta-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* Badge sede sul CTA primario (Aggiungi, Avvia, ...): contrasto su brand background.
   Sfondo translucido bianco per leggibilita' sopra primary; bordo trasparente; icona compatta. */
.ar-demo .c-cta-sede-badge {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-on-brand);
    border-color: transparent;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .c-cta-sede-badge .p-badge__icon {
    flex-shrink: 0;
}

/* ---------- iscrizioni-attive: Banner CTA di testa pagina (.c-lavoratori-cta-banner, __content, __icon, __tex  (primitives.css:4036-4096) ---------- */
/* Banner d'ingresso flusso (Aggiungi lavoratore / Iscrivi a corso): allineato
   1:1 al look del banner "Nomine mancanti" dell'organigramma (.org-nomine-banner):
   sfondo pesca brand-tinted + bordo brand, cosi' tutti i banner-azione in cima
   alle pagine hanno la stessa firma visiva. L'organigramma resta la SSOT visiva
   e non viene toccato; qui ci si allinea ai suoi stessi token. */
.ar-demo .c-lavoratori-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface-1));
    border: 1px solid color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
    border-radius: var(--radius-md);
}
.ar-demo .c-lavoratori-cta-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.ar-demo .c-lavoratori-cta-banner__icon {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--color-brand);
}
.ar-demo .c-lavoratori-cta-banner__text {
    margin: 0;
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text-primary);
}
/* CTA "Aggiungi" del banner lavoratori: ospita un badge sede destinataria inline.
   Il bottone resta gap-based per mantenere allineamento icona/label/badge. */
.ar-demo .c-lavoratori-cta-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* Badge sede sul CTA primario (Aggiungi, Avvia, ...): contrasto su brand background.
   Sfondo translucido bianco per leggibilita' sopra primary; bordo trasparente; icona compatta. */
.ar-demo .c-cta-sede-badge {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-on-brand);
    border-color: transparent;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .c-cta-sede-badge .p-badge__icon {
    flex-shrink: 0;
}
/* Banner CTA — copy micro mobile-only (--short) + freccia CTA (--arrow): default
   NASCOSTE su desktop, mostrate solo dentro @media(767). Additivo, desktop intatto. */
.ar-demo .c-lavoratori-cta-banner__text--short { display: none; }
.ar-demo .c-lavoratori-cta-banner__cta-arrow { display: none; }

/* ---------- lavoratori: Default desktop del banner: __text--short e __cta-arrow nascosti (senza questo  (primitives.css:4093-4096) ---------- */
/* Banner CTA — copy micro mobile-only (--short) + freccia CTA (--arrow): default
   NASCOSTE su desktop, mostrate solo dentro @media(767). Additivo, desktop intatto. */
.ar-demo .c-lavoratori-cta-banner__text--short { display: none; }
.ar-demo .c-lavoratori-cta-banner__cta-arrow { display: none; }

/* ---------- lavoratori: .c-lavoratori (max-width 1160px del contenuto), .c-lavoratori-filter-form e l'  (primitives.css:4271-4286) ---------- */
.ar-demo .c-lavoratori {
    max-width: 1160px;
}
.ar-demo .c-lavoratori-filter-form {
    margin: 0;
}
.ar-demo .c-lavoratori-filter-form .p-filter-bar {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 38%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
}

/* ---------- lavoratori: .c-lavoratori-search (wrapper posizionato dell'autocomplete) e il padding-left  (primitives.css:4302-4313) ---------- */
/* ── Live worker autocomplete ─────────────────────────────────────── */
.ar-demo .c-lavoratori-search {
    position: relative;
    min-width: 0;
    align-self: end;
}
/* Mantiene lo spazio per l'icona di ricerca anche oltre il breakpoint
   desktop (min-width:1024px), dove la regola globale azzera il padding. */
.ar-demo .c-lavoratori-search .p-search-input__control {
    padding-left: 38px;
}

/* ---------- lavoratori: .c-lavoratori-main (container query), .c-lavoratori-layout (griglia lista+dett  (primitives.css:4636-4672) ---------- */
.ar-demo .c-lavoratori-main {
    container-type: inline-size;
    container-name: lavoratori-main;
    /* Allinea il gap search bar → "Elenco lavoratori" allo shift di
       /scadenze, dove .c-scadenze-section ha padding-top var(--space-3)
       in aggiunta al gap dell'u-stack. */
    padding-top: var(--space-3);
}
.ar-demo .c-lavoratori-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 600px);
    gap: var(--space-3);
    align-items: start;
}
@container lavoratori-main (max-width: 760px) {
  .ar-demo .c-lavoratori-layout {
        grid-template-columns: minmax(0, 1fr);
      }
  .ar-demo .c-lavoratori-detail {
        max-width: none;
        justify-self: stretch;
      }
}
.ar-demo .c-lavoratori-list {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
    overflow-x: auto;
    container-type: inline-size;
    container-name: lavoratori-list;
}

/* ---------- lavoratori: .c-lavoratori-list__head (riga titolo elenco, flex space-between)  (primitives.css:4748-4755) ---------- */
.ar-demo .c-lavoratori-list__head,
.ar-demo .c-lavoratori-scadenze__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* ---------- tabella Lavoratori  (primitives.css:4780-4958) ---------- */
.ar-demo .c-lavoratori-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.ar-demo .c-lavoratori-table thead th {
    font-size: var(--text-caption-size);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-secondary) 82%, var(--color-text-primary) 18%);
    padding: 6px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
    background: color-mix(in srgb, var(--color-surface-2) 40%, transparent);
    text-align: left;
}
.ar-demo .c-lavoratori-table thead th:nth-child(2),
.ar-demo .c-lavoratori-table tbody td:nth-child(2) {
    width: 90px;
}
.ar-demo .c-lavoratori-table thead th:nth-child(3),
.ar-demo .c-lavoratori-table tbody td:nth-child(3) {
    width: 56px;
    text-align: center;
}
.ar-demo .c-lavoratori-table thead th:last-child,
.ar-demo .c-lavoratori-table tbody td:last-child {
    width: 64px;
    white-space: nowrap;
    text-align: end;
    padding-inline-end: var(--space-2);
}
.ar-demo .c-lavoratori-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 40%, transparent);
}
.ar-demo .c-lavoratori-table__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-transform: inherit;
    letter-spacing: inherit;
}
.ar-demo .c-lavoratori-table__sort-btn:hover {
    color: var(--color-text-primary);
}
.ar-demo .c-lavoratori-table__sort-btn[data-sort-dir] {
    color: var(--color-text-primary);
    font-weight: 500;
}
.ar-demo .c-lavoratori-table__sort-icon {
    font-size: 14px;
    opacity: 0.6;
}
.ar-demo .c-lavoratori-table__sort-btn[data-sort-dir] .c-lavoratori-table__sort-icon {
    opacity: 1;
    color: var(--color-brand);
}
.ar-demo .c-lavoratori-table tbody td .p-badge {
    white-space: nowrap;
}
.ar-demo .c-lavoratori-table tbody tr {
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .c-lavoratori-table tbody tr:hover td {
    background: color-mix(in srgb, var(--color-surface-2) 56%, transparent);
}
.ar-demo .c-lavoratori-table tbody tr.is-selected:hover td {
    background: color-mix(in srgb, var(--color-link-soft) 18%, var(--color-surface-1));
}
.ar-demo .c-lavoratori-table tr.is-selected {
    position: relative;
}
.ar-demo .c-lavoratori-table tr.is-selected::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--color-brand);
    z-index: 1;
}
.ar-demo .c-lavoratori-table tr.is-selected td {
    background: color-mix(in srgb, var(--color-link-soft) 14%, var(--color-surface-1));
    border-block-color: color-mix(in srgb, var(--color-border-subtle) 60%, transparent);
}
.ar-demo .c-lavoratori-table__worker-cell {
    display: grid;
    /* 2px -> 3px: un filo d'aria in piu' tra nome e meta (ruolo/unita). */
    gap: 3px;
    min-width: 0;
}
.ar-demo .c-lavoratori-table__worker-name {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .c-lavoratori-table__worker-meta {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--text-caption-size) - 0.5px);
    color: color-mix(in srgb, var(--color-text-secondary) 58%, transparent);
    letter-spacing: 0.01em;
}
.ar-demo .c-lavoratori-table__worker-meta .p-icon {
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text-secondary) 58%, transparent);
}
/* D4: label sede per-lavoratore (elenco, solo capogruppo multi-sede). Riga sotto
 * il CF, tono brand tenue per distinguerla dalla meta neutra senza gridare. */
.ar-demo .c-lavoratori-table__worker-sede {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    min-width: 0;
    font-size: calc(var(--text-caption-size) - 0.5px);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--color-brand) 78%, var(--color-text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .c-lavoratori-table__worker-sede-icon {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}
.ar-demo .c-lavoratori-table__scadenze-cell {
    white-space: nowrap;
}
.ar-demo .c-lavoratori-table__scadenze-indicator {
    min-width: 32px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: calc(var(--text-caption-size) + 1px);
}

/* ---------- lavoratori: Etichetta sede per-riga D4: .c-lavoratori-table__worker-sede e __worker-sede-i  (primitives.css:4926-4946) ---------- */
/* D4: label sede per-lavoratore (elenco, solo capogruppo multi-sede). Riga sotto
 * il CF, tono brand tenue per distinguerla dalla meta neutra senza gridare. */
.ar-demo .c-lavoratori-table__worker-sede {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    min-width: 0;
    font-size: calc(var(--text-caption-size) - 0.5px);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--color-brand) 78%, var(--color-text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .c-lavoratori-table__worker-sede-icon {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---------- iscrizioni-attive: Wrapper di pagina .c-calendario { max-width: 100% } con il commento di dominio  (primitives.css:7098-7102) ---------- */
/* --- Calendario domain (read-only integrazione lezioni) --- */
.ar-demo .c-calendario {
    max-width: 100%;
}

/* ---------- adempimenti: 'Adempimenti domain (read-only integration)': .c-adempimenti (max-width 1100px  (primitives.css:9041-9141) ---------- */
/* --- Adempimenti domain (read-only integration) --- */
.ar-demo .c-adempimenti {
    max-width: 1100px;
}
.ar-demo .c-adempimenti-filter-form {
    margin: 0 0 var(--space-3);
}
.ar-demo .c-adempimenti-filter-form .p-filter-bar {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 38%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
}
.ar-demo .c-adempimenti-filter-form .p-filter-bar__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 180px)) min-content min-content;
    gap: var(--space-2);
    align-items: end;
}
.ar-demo .c-adempimenti-list {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
.ar-demo .c-adempimenti-list__head {
    margin-bottom: var(--space-2);
}
.ar-demo .c-adempimenti-table {
    width: 100%;
    border-collapse: collapse;
}
.ar-demo .c-adempimenti-pagination {
    justify-content: flex-start;
    padding-top: var(--space-2);
}
/* risolta a 1440px e scartata: @media (max-width: 900px) */
/* risolta a 1440px e scartata: @media (max-width: 640px) */

/* ---------- densita' desktop dei bottoni (dentro la @media min-width:1024, che qui si risolve vera)  (primitives.css:9160-9168) ---------- */
.ar-demo .p-button {
        min-height: 34px;
        padding: 0 var(--space-2);
    }
.ar-demo .p-button--icon-only {
        min-width: 36px;
        min-height: 36px;
    }

/* ---------- dashboard a tutta la colonna main a desktop  (primitives.css:9194-9204) ---------- */
/* Dashboard: full width of main column (shell is already max-width centered) */
.ar-demo .d-dashboard {
        --dashboard-col-max: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
.ar-demo .d-dashboard__intro {
        max-width: 100%;
    }

/* ---------- lavoratori: Listing expand: .c-listing-expand-wrap, __viewport (+ --truncated / --expanded  (primitives.css:9286-9371) ---------- */
/* --- Listing expand (progressive +10, teaser 12 righe) --- */
.ar-demo .c-listing-expand-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    position: relative;
}
.ar-demo .c-listing-expand__viewport {
    --listing-expand-row-height: 3.1rem;
    --listing-expand-visible-rows: 12;
    --listing-expand-fade-rows: 2;
    --listing-expand-fade-end: var(--color-canvas);
    position: relative;
    width: 100%;
    min-width: 0;
}
.ar-demo .c-listing-expand__viewport--truncated {
    max-height: calc(var(--listing-expand-visible-rows) * var(--listing-expand-row-height));
    overflow: hidden;
}
.ar-demo .c-listing-expand__viewport--expanded {
    /* After at least one expand: no height cap, all loaded items visible. */
}
.ar-demo .c-listing-expand__inner {
    position: relative;
    z-index: 0;
}
.ar-demo .c-listing-expand__fade {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--listing-expand-fade-rows) * var(--listing-expand-row-height));
    z-index: 1;
    /* Usiamo rgb(from ...) per mantenere la hue del canvas anche allo stop 0%.
       Con `transparent` puro l'interpolazione passa per rgba(0,0,0,0): in dark
       mode (#2b1711) si vedeva un alone nerastro tra fade e fondo. */
    background: linear-gradient(
        to bottom,
        rgb(from var(--listing-expand-fade-end) r g b / 0) 0%,
        rgb(from var(--listing-expand-fade-end) r g b / 0.55) 52%,
        var(--listing-expand-fade-end) 100%
    );
}
.ar-demo .c-listing-expand__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--space-5));
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
}
.ar-demo .c-listing-expand__more.p-button {
    min-width: 8.5rem;
    justify-content: center;
    position: relative;
    padding-right: calc(var(--space-3) + 18px);
}
.ar-demo .c-listing-expand__more.p-button::after {
    content: "";
    position: absolute;
    right: var(--space-2);
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 999px;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
}

/* ---------- dashboard-main: Commento + primitiva .d-section (flex column, gap --space-3, padding-top --spa  (primitives.css:9974-9988) ---------- */
/* Section primitive — flat, no card-shell, quiet divider */
.ar-demo .d-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--d-section-divider);
}
.ar-demo .d-dashboard__zone > .d-section:first-child,
.ar-demo .d-dashboard-grid > .d-module > .d-section:first-child,
.ar-demo .d-dashboard-grid > .d-module:first-child > .d-section {
    border-top: none;
    padding-top: 0;
}

/* ---------- d-command-hero (variante trigger)  (primitives.css:10056-10358) ---------- */
.ar-demo .d-command-hero {
    display: flex;
    justify-content: center;
    padding: clamp(calc(var(--space-6) * 3), 14vw, calc(var(--space-7) * 3)) 0 200px;
}
.ar-demo .d-command-hero__inner {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    text-align: center;
}
.ar-demo .d-command-hero__title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}
.ar-demo .d-command-hero__subtitle {
    margin: 0;
}
/* Twinkle del pattern dotted dietro la barra: due layer di dot sfalsati di
   mezza cella pulsano in controfase, cosi' la luminosita' complessiva resta
   stabile ma il sottoinsieme "acceso" si alterna (vedi /grill 2026-06-11). */
@keyframes ard-d-hero-dots-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}
.ar-demo .d-command-hero__shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    min-height: 64px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    border: 1px solid var(--d-hero-ring);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-2) 80%, transparent),
        0 8px 20px color-mix(in srgb, var(--color-brand) 10%, transparent);
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .d-command-hero__shell:focus-within {
    border-color: color-mix(in srgb, var(--color-brand) 70%, var(--color-border-subtle));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-2) 80%, transparent),
        0 14px 32px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.ar-demo .d-command-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface-2));
    color: color-mix(in srgb, var(--color-brand) 75%, var(--color-text-primary));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ar-demo .d-command-hero__pill-icon { font-size: 14px; }
/* Floating variant: renders above the shell, outside the card */
.ar-demo .d-command-hero__pill--floating {
    align-self: flex-start;
    margin-bottom: var(--space-1);
}
.ar-demo .d-command-hero__input {
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--color-text-primary);
    padding: var(--space-2) 0;
    outline: none;
}
.ar-demo .d-command-hero__input::placeholder {
    color: color-mix(in srgb, var(--color-text-secondary) 85%, transparent);
}
.ar-demo .d-command-hero__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .d-command-hero__submit:hover,
.ar-demo .d-command-hero__submit:focus-visible {
    transform: translateY(-1px);
    background: var(--color-accent-strong);
    outline: none;
}
.ar-demo .d-command-hero__submit .p-icon { font-size: 20px; }
/*
 * Variante "trigger": l'hero non e' piu' una search bar autonoma ma un
 * fake-input che apre il modal Global Search (vedi /grill 2026-06-04).
 * Iterazione 8: ridotto 1/3 dei valori dell'iter 7 (top/bottom moltiplicati
 * per 2/3) su richiesta esplicita utente. Token --space-7=32px.
 *   top:    56→37px   /   112→75px
 *   vw top: 11→7.33vw
 *   bot:    160→107px /   320→213px
 *   vw bot: 32→21.33vw
 */
.ar-demo .d-command-hero--trigger {
    position: relative;
    /* isolation: i dots vivono su ::before/::after con z-index:-1; senza uno
       stacking context isolato finirebbero dietro al background della pagina
       invece che dietro al solo contenuto della hero. */
    isolation: isolate;
    padding:
        clamp(calc(var(--space-7) * 1.17), 7.33vw, calc(var(--space-7) * 2.33)) 0
        clamp(calc(var(--space-7) * 3.33), 21.33vw, calc(var(--space-7) * 6.67));
}
/* Pattern dotted brand dietro la barra (dot 2px, cella 24px). Colore pieno:
   l'intensita' percepita la governano l'opacity del layer e la mask radiale
   centrata sulla barra, che dissolve i dot verso i bordi della sezione. */
.ar-demo .d-command-hero--trigger::before,
.ar-demo .d-command-hero--trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--color-brand) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000, transparent 75%);
    opacity: 1;
    animation: ard-d-hero-dots-twinkle 4.5s ease-in-out infinite;
}
/* Secondo layer sfalsato di mezza cella, in controfase sul twinkle. */
.ar-demo .d-command-hero--trigger::after {
    background-position: 12px 12px;
    animation-delay: -2.25s;
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .d-command-hero--trigger::before,
.ar-demo .d-command-hero--trigger::after { animation: none;   }
}
.ar-demo .d-command-hero__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    min-height: 64px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    border: 1px solid var(--d-hero-ring);
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    font: inherit;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-2) 80%, transparent),
        0 8px 20px color-mix(in srgb, var(--color-brand) 10%, transparent);
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .d-command-hero__trigger:hover {
    border-color: color-mix(in srgb, var(--color-brand) 50%, var(--color-border-subtle));
    transform: translateY(-1px);
}
.ar-demo .d-command-hero__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--color-brand) 70%, var(--color-border-subtle));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-2) 80%, transparent),
        0 14px 32px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.ar-demo .d-command-hero__trigger-icon {
    font-size: 22px;
    color: color-mix(in srgb, var(--color-brand) 70%, var(--color-text-primary));
    flex-shrink: 0;
}
.ar-demo .d-command-hero__trigger-placeholder {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    color: color-mix(in srgb, var(--color-text-secondary) 85%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .d-command-hero__trigger-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
.ar-demo .d-command-hero__trigger-kbd-mod {
    font-size: 14px;
}
.ar-demo .d-command-hero__chips {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}
.ar-demo .d-command-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    font-size: 12px;
    text-decoration: none;
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .d-command-hero__chip:hover,
.ar-demo .d-command-hero__chip:focus-visible {
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface-1));
    border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border-subtle));
    outline: none;
    text-decoration: none;
}
.ar-demo .d-command-hero__chip-icon {
    font-size: 14px;
    color: color-mix(in srgb, var(--color-brand) 70%, var(--color-text-primary));
}
.ar-demo .d-command-hero__caption,
.ar-demo .d-command-hero__status {
    margin: 0;
}
/* risolta a 1440px e scartata: @media (max-width: 640px) */

/* ---------- dashboard-main: Blocco 'Lean Dashboard — people-first layout': .d-dashboard--lean definisce --  (primitives.css:11445-11465) ---------- */
/* =====================================================================
   Lean Dashboard — people-first layout
   ===================================================================== */
.ar-demo .d-dashboard--lean {
    --d-section-divider: color-mix(in srgb, var(--color-border-subtle) 60%, transparent);
    --d-hero-halo: color-mix(in srgb, var(--color-brand) 18%, transparent);
    --d-hero-ring: color-mix(in srgb, var(--color-brand) 44%, var(--color-border-subtle));
}
.ar-demo .d-dashboard--lean .d-dashboard__zones--lean {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* Lean zones wrap modules without .d-dashboard-grid — drop section hairlines (spacing comes from zone gap). */
.ar-demo .d-dashboard--lean .d-module > .d-section:first-child {
    border-top: none;
    padding-top: 0;
}

/* ---------- d-qa-dock (dock azioni rapide)  (primitives.css:11845-12088) ---------- */
.ar-demo .d-qa-dock {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--color-surface-1);
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 62%, transparent);
    border-radius: var(--radius-pill);
    /* ombra morbida e LUNGA (blur ampio, opacita' bassa), mai dura */
    box-shadow:
        0 18px 48px rgba(43, 23, 17, 0.07),
        0 2px 10px rgba(43, 23, 17, 0.04);
    padding: var(--space-1);
}
/* Pillola scorrevole: sta SOTTO i contenuti e si muove con transition su
   left/width (settati dal JS). Stessa forma tonda delle estremita' del dock. */
.ar-demo .d-qa-dock__pill {
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: 0;
    width: 0;
    border-radius: var(--radius-pill);
    /* Tinta hover uguale all'isola topbar (.app-top-utilities__icon-btn:hover):
       brand 14% su transparent -> stesso arancione in light e dark mode. */
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-brand) 14%, transparent);
    opacity: 0;
    pointer-events: none;
    transition:
        left var(--motion-peak) var(--motion-ease-spring),
        width var(--motion-peak) var(--motion-ease-spring),
        opacity var(--motion-base) var(--motion-ease);
}
.ar-demo .d-qa-dock__pill.is-visible { opacity: 1; }
/* Primo ingresso: appare gia' in posizione (niente scivolata da left:0). */
.ar-demo .d-qa-dock__pill.is-teleport { transition: opacity var(--motion-base) var(--motion-ease); }
.ar-demo .d-qa-dock__item {
    position: relative;
    z-index: 1;
    /* proporzionale al contenuto: le label lunghe non troncano (vanno a capo). */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 52px;
    border-radius: var(--radius-pill);
    text-align: center;
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 0.85rem;
    line-height: 1.25;
    outline: none;
}
.ar-demo .d-qa-dock__item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-brand) 55%, transparent);
    outline-offset: 2px;
}
/* Divider sottili sfumati tra i segmenti: si dissolvono quando la pillola passa. */
.ar-demo .d-qa-dock__item + .d-qa-dock__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--color-border-subtle) 70%, transparent) 30%,
        color-mix(in srgb, var(--color-border-subtle) 70%, transparent) 70%,
        transparent
    );
    transition: opacity var(--motion-base) var(--motion-ease);
}
.ar-demo .d-qa-dock__item:hover::before,
.ar-demo .d-qa-dock__item:hover + .d-qa-dock__item::before { opacity: 0; }
/* Icona brand: sizing via font-size, colore via currentColor (sistema .p-icon). */
.ar-demo .d-qa-dock__icon {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--color-brand);
    transition: transform var(--motion-peak) var(--motion-ease-spring);
}
.ar-demo .d-qa-dock__item:hover .d-qa-dock__icon,
.ar-demo .d-qa-dock__item:focus-visible .d-qa-dock__icon {
    transform: translateY(-1px) scale(1.14);
}
.ar-demo .d-qa-dock__label {
    /* MAI troncata: va a capo su max 2 righe, centrata. */
    white-space: normal;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    transition: color var(--motion-fast) var(--motion-ease);
}
.ar-demo .d-qa-dock__item:hover .d-qa-dock__label,
.ar-demo .d-qa-dock__item:focus-visible .d-qa-dock__label {
    /* Brand pieno, come il testo dell'isola topbar in hover (non il mix
       72%+testo che virava su un arancione brunito, fuori palette). */
    color: var(--color-brand);
}
/* Chevron FUORI dal flusso (assoluto a destra): non ruba spazio alla label,
   si materializza in hover scivolando da sinistra. */
.ar-demo .d-qa-dock__chevron {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--color-brand);
    opacity: 0;
    transform: translateY(-50%) translateX(-5px);
    transition:
        opacity var(--motion-base) var(--motion-ease),
        transform var(--motion-peak) var(--motion-ease-spring);
}
.ar-demo .d-qa-dock__item:hover .d-qa-dock__chevron,
.ar-demo .d-qa-dock__item:focus-visible .d-qa-dock__chevron {
    opacity: 0.55;
    transform: translateY(-50%) translateX(0);
}
/* Variante --done (gating: niente da iscrivere): check verde (unico verde
   ammesso = stato gia' fatto), non cliccabile, la pillola lo salta. */
.ar-demo .d-qa-dock__item--done { cursor: default; }
.ar-demo .d-qa-dock__item--done .d-qa-dock__icon { color: var(--color-ok-fg); }
.ar-demo .d-qa-dock__item--done:hover .d-qa-dock__icon { transform: none; }
.ar-demo .d-qa-dock__item--done .d-qa-dock__label,
.ar-demo .d-qa-dock__item--done:hover .d-qa-dock__label { color: var(--color-text-secondary); }
/* Loading (p-btn-loadable): tiene il contenuto leggibile, lo spinner prende il
   posto dell'ICONA a sinistra. Specificita' 2-classi per battere il default
   .p-btn-loadable che nasconde i figli / centra lo spinner.

   2026-07-24 (segnalazione utente "spinner strano, si sovrappone al testo").
   Prima lo spinner stava assoluto a destra, nel posto del chevron: ma il
   chevron e' fuori dal flusso e NON riserva spazio, quindi con le label lunghe
   il cerchio finiva SOPRA il testo. Misurato: "Iscrivi lavoratori" -> testo
   fino a x 572, spinner da x 571 (1px di sovrapposizione); "Aggiungi nomina
   mancante" -> 0px di distanza. Ora lo ::after esce dal posizionamento
   assoluto e diventa flex item (order:-1) al posto dell'icona, che va in
   display:none: nessuna sovrapposizione con nessuna label, e la larghezza del
   bottone non cambia (18px + 2px di margine = i 20px dell'icona). */
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="true"],
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="success"] {
    -webkit-text-fill-color: currentColor;
}
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="true"] > *,
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="success"] > * {
    opacity: 1;
    visibility: visible;
}
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="true"] .d-qa-dock__chevron,
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="success"] .d-qa-dock__chevron {
    opacity: 0;
    visibility: hidden;
}
/* L'icona lascia il posto allo spinner (stessa cella del flex, zero salti). */
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="true"] .d-qa-dock__icon,
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="success"] .d-qa-dock__icon {
    display: none;
}
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="true"]::after {
    /* IN FLUSSO: lo ::after di un flex container e' esso stesso un flex item.
       order:-1 lo mette dove stava l'icona, prima della label. */
    position: static;
    order: -1;
    flex: 0 0 auto;
    top: auto;
    right: auto;
    left: auto;
    width: 18px;
    height: 18px;
    /* 18 + 1 + 1 = i 20px dell'icona sostituita: il bottone non si muove. */
    margin: 0 1px;
    color: var(--color-brand);
}
.ar-demo .d-qa-dock .d-qa-dock__item[data-loading="success"]::after {
    position: static;
    order: -1;
    flex: 0 0 auto;
    top: auto;
    right: auto;
    left: auto;
    width: 20px;
    height: 20px;
    margin: 0;
    /* in flusso non serve piu' la centratura per traslazione della primitive */
    transform: none;
    color: var(--color-brand);
}
/* Responsive: sotto 720px il dock diventa 2x2 di capsule-card (niente pillola). */
/* risolta a 1440px e scartata: @media (max-width: 720px) */
@media (prefers-reduced-motion: reduce) {
  .ar-demo .d-qa-dock__pill,
.ar-demo .d-qa-dock__icon,
.ar-demo .d-qa-dock__chevron,
.ar-demo .d-qa-dock__label { transition: none;   }
}

/* ---------- lavoratori: Vista di atterraggio --list-only: cognome in evidenza + tabella riscritta come  (primitives.css:12586-12662) ---------- */
/* Cognome in evidenza: il nome resta piu leggero del cognome (grassetto). */
.ar-demo .c-lavoratori-table__worker-text .c-lavoratori-table__worker-name { font-weight: 500 !important; }
.ar-demo .c-lavoratori-table__worker-name strong { font-weight: 500; color: var(--color-text-primary); }
/* === Atterraggio: elenco a tutta larghezza come griglia di card (nessuna selezione).
   Selettori con .c-lavoratori-main (3 classi) + !important per vincere sugli override
   table forzati altrove nel monolite (display:table-*, max-width:0, width:36px). === */
.ar-demo .c-lavoratori-layout--list-only { grid-template-columns: minmax(0, 1fr); }
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-list { overflow-x: visible; }
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable thead,
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable colgroup {
    display: none !important;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable tbody {
    display: grid !important;
    grid-template-columns: 1fr; /* colonna singola: righe full-width al primo impatto */
    gap: var(--space-2);
    width: 100% !important;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 46%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    /* Stage I: box piu alti come la lista persone in /formazione. */
    padding: var(--space-3) var(--space-4);
    min-height: 64px;
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
/* Avatar piu grande e nome a body size in list-only. */
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-avatar__status {
    width: 17px;
    height: 17px;
    right: -3px;
    bottom: -3px;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-avatar__status .p-icon {
    font-size: 17px;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable .c-lavoratori-table__worker-name {
    font-size: var(--text-body-size, 0.9375rem) !important;
    line-height: 1.3 !important;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table__worker-meta {
    font-size: 0.75rem;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable tbody tr:hover {
    border-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table--sortable tbody td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table__scadenze-cell { text-align: center; }
.ar-demo .c-lavoratori-main .c-lavoratori-layout--list-only .c-lavoratori-table__action-cell { justify-self: end; }

/* ---------- lavoratori: Hard-clamp 28x28 del bottone azione di riga in tutti gli stati + hover brand.   (primitives.css:12760-12787) ---------- */
/* Hard-clamp the action button to 28x28 in all states.
   Stage H: tondo come .p-search-input__submit on hover / riga attiva (brand pieno). */
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-btn,
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-btn.is-contextual-opened,
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-btn.is-contextual-loading,
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-cell .p-button,
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-cell a.p-contextual-trigger {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    background: transparent;
    color: var(--color-text-secondary);
    transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.ar-demo .c-lavoratori-table--sortable tr:hover .c-lavoratori-table__action-btn,
.ar-demo .c-lavoratori-table--sortable .c-lavoratori-table__action-btn:hover {
    background: var(--color-brand) !important;
    color: #fff !important;
}

/* ---------- impostazioni: primitiva .p-switch (commento + .p-switch, __input sr-only, __track, __thumb,   (primitives.css:13786-13860) ---------- */
/* ── Primitiva switch on/off ─────────────────────────────────────────────
   Toggle accessibile costruito su un checkbox reale (input nascosto + track).
   Stato on = brand. Usato dall'hub Impostazioni; riutilizzabile altrove. */
.ar-demo .p-switch {
    display: inline-flex;
    align-items: center;
    flex: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ar-demo .p-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.ar-demo .p-switch__track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-text-secondary) 22%, transparent);
    transition: background 140ms ease, border-color 140ms ease;
}
.ar-demo .p-switch__thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface-1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: translate(0, -50%);
    transition: transform 140ms ease;
}
.ar-demo .p-switch__input:checked + .p-switch__track {
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.ar-demo .p-switch__input:checked + .p-switch__track .p-switch__thumb {
    transform: translate(20px, -50%);
}
/* Master parziale (alcune attive, altre no). */
.ar-demo .p-switch__input:indeterminate + .p-switch__track {
    background: color-mix(in srgb, var(--color-brand) 45%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
}
.ar-demo .p-switch__input:indeterminate + .p-switch__track .p-switch__thumb {
    transform: translate(10px, -50%);
}
.ar-demo .p-switch__input:focus-visible + .p-switch__track {
    outline: 2px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
    outline-offset: 2px;
}
.ar-demo .p-switch__input:disabled + .p-switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- impostazioni: blocco '── Pagina Impostazioni (hub email automatiche)': .c-impostazioni__cate  (primitives.css:13862-14433) ---------- */
/* ── Pagina Impostazioni (hub email automatiche) ─────────────────────────── */
.ar-demo .c-impostazioni__category {
    padding: var(--space-4) var(--space-5);
}
.ar-demo .c-impostazioni__category-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}
.ar-demo .c-impostazioni__category-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ar-demo .c-impostazioni__category-master {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
}
/* Card "Reportistica dettagliata in dashboard" — stesso pattern head delle
 * categorie email ma senza border-bottom (la card è solo header, niente lista). */
.ar-demo .c-impostazioni__reportistica-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.ar-demo .c-impostazioni__reportistica-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.ar-demo .c-impostazioni__reportistica-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}
/* Atterraggio deep-link /impostazioni#reportistica: glow brand temporaneo
   (~2.4s) che sfuma, applicato da impostazioni-page.js insieme allo scroll
   centrato. Solo box-shadow (niente background) per non coprire il fondo
   della p-card-shell. */
.ar-demo .c-impostazioni .is-deeplink-target {
    animation: ard-c-impostazioni-deeplink-glow 2.4s var(--motion-ease) forwards;
}
/* Stesso principio del glow formazione: niente anello 2px (leggeva come
   bordo), solo alone diffuso che sfuma. */
@keyframes ard-c-impostazioni-deeplink-glow {
    0% {
        box-shadow: 0 0 32px 3px color-mix(in srgb, var(--color-brand) 38%, transparent);
    }
    60% {
        box-shadow: 0 0 16px 1px color-mix(in srgb, var(--color-brand) 22%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
.ar-demo .c-impostazioni__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ar-demo .c-impostazioni__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
.ar-demo .c-impostazioni__item + .c-impostazioni__item {
    border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.ar-demo .c-impostazioni__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ar-demo .c-impostazioni__item-title {
    font-weight: 500;
}
.ar-demo .c-impostazioni__save-status {
    min-height: 1em;
    transition: opacity 120ms ease;
}
.ar-demo .c-impostazioni__save-status[data-state="saving"] {
    color: var(--color-text-secondary);
}
.ar-demo .c-impostazioni__save-status[data-state="saved"] {
    color: color-mix(in srgb, var(--color-brand) 70%, var(--color-text-secondary));
}
.ar-demo .c-impostazioni__save-status[data-state="error"] {
    color: var(--color-critical-fg);
}
/* ─── ID Card azienda (Impostazioni) ──────────────────────────────────────
 * Card a 2 colonne: identità fiscale (sx) + contatti/indirizzo (dx).
 * Stacca a 1 colonna sotto 720px. */
.ar-demo .c-impostazioni__id-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ar-demo .c-impostazioni__id-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ar-demo .c-impostazioni__id-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.ar-demo .c-impostazioni__id-card-col {
    min-width: 0;
}
/* risolta a 1440px e scartata: @media (max-width: 720px) */
/* ─── Sedi (Impostazioni) ─────────────────────────────────────────────────
 * Lista sedi: corrente attiva + altre disabilitate (CTA in arrivo).
 * I dati reali arrivano con una sorgente dedicata. */
.ar-demo .c-impostazioni__sedi {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ar-demo .c-impostazioni__sedi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.ar-demo .c-impostazioni__sedi-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.ar-demo .c-impostazioni__sedi-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .c-impostazioni__sedi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-main) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
}
.ar-demo .c-impostazioni__sedi-item.is-current {
    background: color-mix(in srgb, var(--color-ok-base) 6%, var(--color-surface-1));
    border-color: color-mix(in srgb, var(--color-ok-base) 24%, var(--color-border-subtle));
}
.ar-demo .c-impostazioni__sedi-item.is-disabled {
    opacity: 0.68;
}
.ar-demo .c-impostazioni__sedi-item-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.ar-demo .c-impostazioni__sedi-item-icon {
    color: var(--color-text-secondary);
    font-size: 22px;
}
.ar-demo .c-impostazioni__sedi-item-label {
    min-width: 0;
}
.ar-demo .c-impostazioni__sedi-item-badge {
    margin-left: var(--space-2);
}
.ar-demo .c-impostazioni__sedi-footnote {
    margin: 0;
}
/* Albero a 3 livelli (2026-07-30): la lista sedi riceve anche le nipoti
   (depth 2 dal companySwitch VM). Indentazione SOLO per loro: le liste a
   2 livelli non cambiano di un pixel. */
.ar-demo .c-impostazioni__sedi-item--nipote {
    margin-left: var(--space-5);
}
.ar-demo .c-impostazioni__sedi-item-meta {
    flex: none;
    white-space: nowrap;
}
/* =========================================================================
   Tema picker — Task #13
   Card preview cliccabili (radio nascosti, label = intera card).
   Ogni card mostra un mini-preview con i colori chiave del tema.
   Stato selezionato: border brand + check icone SVG overlay.
   ========================================================================= */
.ar-demo .c-impostazioni__theme-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.ar-demo .c-impostazioni__theme-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 280px;
}
.ar-demo .c-impostazioni__theme-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* .p-button ha display:flex e vince su [hidden] del browser.
   Forzato display:none per quando il bottone Ripristina e' inattivo. */
.ar-demo .c-impostazioni__theme [data-theme-reset][hidden] {
    display: none;
}
/* Auto card sopra il grid (full-width, layout orizzontale).
   Mood: e' una "scelta speciale" — niente preview colorato, solo info. */
.ar-demo .c-impostazioni__theme-auto {
    display: block;
    position: relative;
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-surface-1);
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .c-impostazioni__theme-auto:hover {
    border-color: color-mix(in srgb, var(--color-brand) 50%, var(--color-border-subtle));
}
.ar-demo .c-impostazioni__theme-auto-input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.ar-demo .c-impostazioni__theme-auto-input:focus-visible + .c-impostazioni__theme-auto-body {
    outline: 2px solid color-mix(in srgb, var(--color-brand) 55%, transparent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.ar-demo .c-impostazioni__theme-auto:has(.c-impostazioni__theme-auto-input:checked) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface-1));
    box-shadow: 0 0 0 1px var(--color-brand);
}
.ar-demo .c-impostazioni__theme-auto-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
}
.ar-demo .c-impostazioni__theme-auto-icon {
    font-size: 28px;
    color: var(--color-text-secondary);
}
.ar-demo .c-impostazioni__theme-auto:has(.c-impostazioni__theme-auto-input:checked) .c-impostazioni__theme-auto-icon {
    color: var(--color-brand);
}
.ar-demo .c-impostazioni__theme-auto-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ar-demo .c-impostazioni__theme-auto-check {
    display: none;
    color: var(--color-brand);
    font-size: 24px;
}
.ar-demo .c-impostazioni__theme-auto:has(.c-impostazioni__theme-auto-input:checked) .c-impostazioni__theme-auto-check {
    display: inline-flex;
}
.ar-demo .c-impostazioni__theme-grid {
    display: grid;
    /* auto-FIT (non fill): col set ridotto a 4 temi l'auto-fill lasciava
       tracce vuote a destra della riga — le card ora si allargano a coprirla. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.ar-demo .c-impostazioni__theme-card {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .c-impostazioni__theme-card:hover {
    border-color: color-mix(in srgb, var(--color-brand) 50%, var(--color-border-subtle));
    transform: translateY(-1px);
}
.ar-demo .c-impostazioni__theme-card:active {
    transform: translateY(0);
}
.ar-demo .c-impostazioni__theme-card-input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.ar-demo .c-impostazioni__theme-card-input:focus-visible ~ .c-impostazioni__theme-card-preview {
    outline: 2px solid color-mix(in srgb, var(--color-brand) 55%, transparent);
    outline-offset: -4px;
}
.ar-demo .c-impostazioni__theme-card:has(.c-impostazioni__theme-card-input:checked) {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand);
}
/* Preview: mini-finta dell'app — 3 zone (canvas, nav, surface) + 1 brand bar */
.ar-demo .c-impostazioni__theme-card-preview {
    display: grid;
    grid-template-columns: 28% 1fr;
    height: 96px;
    background: var(--c-preview-canvas, #ffffff);
    color: var(--c-preview-text, #000);
}
.ar-demo .c-impostazioni__theme-card-preview-sidebar {
    background: var(--c-preview-nav, #f2f2f2);
    border-right: 1px solid var(--c-preview-border, rgba(0,0,0,0.08));
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ar-demo .c-impostazioni__theme-card-preview-sidebar::before,
.ar-demo .c-impostazioni__theme-card-preview-sidebar::after {
    content: "";
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-preview-text, #000) 22%, transparent);
}
.ar-demo .c-impostazioni__theme-card-preview-sidebar::after {
    width: 60%;
    background: var(--c-preview-link, var(--color-brand));
}
.ar-demo .c-impostazioni__theme-card-preview-main {
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ar-demo .c-impostazioni__theme-card-preview-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--c-preview-link, var(--color-brand));
    width: 40%;
}
.ar-demo .c-impostazioni__theme-card-preview-line {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-preview-text, #000) 16%, transparent);
}
.ar-demo .c-impostazioni__theme-card-preview-line--short { width: 55%; }
.ar-demo .c-impostazioni__theme-card-preview-line--medium { width: 75%; }
.ar-demo .c-impostazioni__theme-card-preview-status {
    display: flex;
    gap: 4px;
    margin-top: auto;
}
.ar-demo .c-impostazioni__theme-card-preview-status > span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}
.ar-demo .c-impostazioni__theme-card-preview-status > .is-ok { background: var(--c-preview-ok, #1f9b6d); }
.ar-demo .c-impostazioni__theme-card-preview-status > .is-warn { background: var(--c-preview-warn, #ce7a07); }
.ar-demo .c-impostazioni__theme-card-preview-status > .is-crit { background: var(--c-preview-crit, #c73939); }
.ar-demo .c-impostazioni__theme-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-1);
    border-top: var(--border-width-thin) solid var(--color-border-soft);
}
.ar-demo .c-impostazioni__theme-card-name {
    font-size: var(--text-caption-size);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.ar-demo .c-impostazioni__theme-card-check {
    display: none;
    color: var(--color-brand);
    font-size: 18px;
    line-height: 1;
}
.ar-demo .c-impostazioni__theme-card:has(.c-impostazioni__theme-card-input:checked) .c-impostazioni__theme-card-check {
    display: inline-flex;
}
/* Per-card preview color sets (CSS custom properties locali, niente !important).
   Sono valori esatti hex perche' devono renderizzare il preview anche quando
   l'utente NON sta usando quel tema. */
.ar-demo .c-impostazioni__theme-card[data-preview="light"] {
    --c-preview-canvas: #ffffff;
    --c-preview-nav: #fff7f3;
    --c-preview-text: #2b1711;
    --c-preview-link: #f95100;
    --c-preview-border: rgba(43,23,17,0.10);
    --c-preview-ok: #1f9b6d;
    --c-preview-warn: #ce7a07;
    --c-preview-crit: #c73939;
}
.ar-demo .c-impostazioni__theme-card[data-preview="dark"] {
    --c-preview-canvas: #2b1711;
    --c-preview-nav: #26150f;
    --c-preview-text: #fff1eb;
    --c-preview-link: #ff6f4d;
    --c-preview-border: rgba(255,241,235,0.10);
    --c-preview-ok: #7de2b9;
    --c-preview-warn: #ffd58d;
    --c-preview-crit: #ffb2ad;
}
/* Preview riallineate alle palette v2 reali dei file themes/ (2026-06-11):
   prima mostravano le palette pre-refresh (mono chiaro, slate scuro, ecc.)
   e il picker "prometteva" un tema diverso da quello applicato. */
.ar-demo .c-impostazioni__theme-card[data-preview="mono"] {
    --c-preview-canvas: #000000;
    --c-preview-nav: #0d0d0d;
    --c-preview-text: #f3f3f3;
    --c-preview-link: #008cfb;
    --c-preview-border: rgba(243,243,243,0.12);
    --c-preview-ok: #f3f3f3;
    --c-preview-warn: #f3f3f3;
    --c-preview-crit: #008cfb;
}
.ar-demo .c-impostazioni__theme-card[data-preview="mist"] {
    /* v3 2026-06-12: canvas grigio-verde chiaro, testo nero, accento arancio. */
    --c-preview-canvas: #dcdece;
    --c-preview-nav: #dcded1;
    --c-preview-text: #000000;
    --c-preview-link: #f95100;
    --c-preview-border: rgba(0,0,0,0.12);
    --c-preview-ok: #000000;
    --c-preview-warn: #000000;
    --c-preview-crit: #f95100;
}
/* Icone SVG nei titoli h2 di sezione (Impostazioni).
 * Pattern: icona .p-icon davanti al testo del titolo.
 * Inline-flex + gap-2 allinea icona e testo sulla stessa baseline ottica.
 * Icona dimensionata appena sopra al titolo (text-section = 20px → 22px) per
 * compensare il peso ottico del glifo, colore secondary per leggere ma non urlare. */
.ar-demo .c-impostazioni h2.text-section {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ar-demo .c-impostazioni h2.text-section > .p-icon {
    font-size: 22px;
    color: var(--color-text-secondary);
    flex: none;
}

/* ---------- adempimenti: 'Adempimenti — rifinitura barra filtri': override tardivo .c-adempimenti-filte  (primitives.css:14700-14719) ---------- */
/* ═══════════════════════════════════════════════════════════════
   Adempimenti — rifinitura barra filtri (coerenza visiva col sito)
   ═══════════════════════════════════════════════════════════════ */
.ar-demo .c-adempimenti-filter-form .p-filter-bar {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-color: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
    border-radius: calc(var(--radius-lg) * 1.1);
}
.ar-demo .c-adempimenti-filter-form .p-filter-bar__controls {
    gap: var(--space-3);
    align-items: end;
}
.ar-demo .c-adempimenti-list__head {
    margin-bottom: var(--space-3);
}
.ar-demo .c-adempimenti-list__head .text-section {
    font-size: 1rem;
    font-weight: 500;
}

/* ---------- adempimenti: override globali 'BATCH 2': font-weight 500 !important su tutto tranne .p-icon  (primitives.css:14721-14746) ---------- */
/* ============================================================
 * BATCH 2 typography refresh — promozione globale
 * Tutto il sito a Inter 500. icone SVG escluso
 * (icon font, weight semantico per peso visivo dell'icona).
 * Sovrascrive tutti i 188x600 + 119x700 + 18x800 + altri pesi
 * presenti in primitives.css e nelle page-specific CSS.
 * ============================================================ */
.ar-demo,
.ar-demo,
.ar-demo.ar-demo *:not(.p-icon) {
    font-weight: 500 !important;
}
.ar-demo.ar-demo :is(h1,
.ar-demo h2,
.ar-demo h3,
.ar-demo h4,
.ar-demo h5,
.ar-demo h6) {
    font-weight: 500 !important;
}
/* ============================================================
 * BATCH 2 borders refresh — unify weight a 0.5px ovunque.
 * Sovrascrive i 19x2px (primitives), 1.5px residui (ruoli,
 * nuovo-lavoratore, wizard-todo), e qualsiasi hardcoded futuro.
 * Outline NON toccato (focus ring a11y). Color non toccato
 * (selezione brand, stati error, ecc. preservati).
 * Bordi con border-style: none restano invisibili.
 * ============================================================ */
.ar-demo.ar-demo * {
    border-width: var(--border-width-thin) !important;
}

/* ---------- topbar: Sezione 'Isoletta topbar — Dynamic Island (Task #10)': e' l'OVERRIDE che decid  (primitives.css:14748-15007) ---------- */
/* ============================================================
 * Isoletta topbar — Dynamic Island (Task #10)
 *
 * Pill con 3 btn hot (Novita', Attivita', Assistenza) che vive in
 * alto a destra. Stato a riposo "compact": solo icone 20px in btn
 * 36x36 cerchio. Stato "expanded" (hover/focus/touch): la pill
 * cresce in larghezza e le label "Novita'/Attivita'/Assistenza"
 * compaiono inline a destra di ciascuna icona.
 *
 * Glass effect: surface 85% + backdrop blur 22px saturate 180%,
 * border subtle, inset highlight + drop-shadow soft. Brand glow
 * solo sui btn al hover.
 *
 * Mobile <768px: l'isoletta sparisce (display:none). Il task #14
 * implementera' la bottom-bar mobile come placeholder dei 3 hot.
 *
 * Scoping sotto .app-top-utilities per non collidere con altri
 * pill/btn nel layout (es. companion-rail).
 * ============================================================ */
/* Task #16: lo slot search a sinistra e' stato rimosso. Il btn search ora vive
   DENTRO la pill isoletta (primo dei 5 btn) per condividere il morphing glass. */
.ar-demo.ar-demo .app-top-utilities.app-top-utilities--actions-only {
    justify-content: flex-end;
    gap: var(--space-3);
}
/* Pill: morphing container. Override completo delle misure base
   in tokens.css per allinearsi al nuovo design system isoletta. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-inline: 6px;
    padding-block: 6px;
    /* Pill height = btn 36 + padding 6+6 = 48 → radius = 24 */
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-surface-1) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    /* Inset highlight in alto + soft drop shadow per "rialzare" la pill */
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-peak) 30%, transparent) inset,
        0 6px 24px -8px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
    pointer-events: auto;
    /* Morphing: la larghezza si adatta al contenuto (icone vs icone+label).
       Transizione su gap + padding per fluidita'. */
    transition:
        gap 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        padding-inline 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Stato espanso: padding maggiore tra btn perche' compaiono label. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions[data-island-state="expanded"] {
    gap: 6px;
    padding-inline: 10px;
}
/* Btn hot: 36x36 cerchio, transparent a riposo.
   Task #16 fix #2: rimosso `overflow: hidden` che clippava il pallino Novita'
   (assoluto a top/right -2px). Il ripple ::after ora si auto-clippa con
   clip-path: circle(50%) — vedi piu' avanti. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 9999px;
    color: var(--color-text-primary);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    -webkit-appearance: none;
    appearance: none;
    transition:
        width 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        padding 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
        color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Icon icone SVG a 20px */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn .p-icon {
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}
/* Label inline: a riposo (compact) nascosta, in expanded fade-in
   con leggero delay per dare la sensazione di "rivelazione". */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    margin-left: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    transition:
        max-width 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        margin-left 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms;
}
/* Stato espanso: btn si allarga, label appare. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions[data-island-state="expanded"] .app-top-utilities__icon-btn {
    width: auto;
    padding-inline: 10px 12px;
}
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions[data-island-state="expanded"] .app-top-utilities__label {
    max-width: 120px;
    margin-left: 6px;
    opacity: 1;
}
/* Hover/focus btn: background brand-tinted + brand color icona,
   subtle glow ring brand 18%. Scale 1.06 per micro-bounce. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn:hover,
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn:focus-visible {
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    color: var(--color-brand);
    transform: scale(1.06);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
/* Stato attivo (pagina corrente: Novita'). */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn.is-active {
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    color: var(--color-brand);
}
/* Click feedback: contrazione minima al :active. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn:active {
    transform: scale(0.96);
}
/* Focus ring esplicito (a11y) — usa outline per non sovrapporsi
   alla box-shadow di glow brand. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
/* ─── Pallino Novità ────────────────────────────────────────────
   8x8, brand color, border 2px surface-1 per leggibilita'. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__novita-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
    border: 2px solid var(--color-surface-1);
    box-sizing: content-box;
    pointer-events: none;
    z-index: 2;
}
/* Spring on arrival quando il btn ha .is-fresh (id non visti) e
   non e' gia' "seen". L'animazione gira una sola volta al paint. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn.is-fresh:not([data-novita-seen="true"]) .app-top-utilities__novita-dot {
    animation: ard-noviteDotAppear 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ard-noviteDotAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* ─── Badge Activity ────────────────────────────────────────────
   Task #16 fix #3: il badge mostrava il count numerico ("3", "9+").
   Ora e' solo un dot 8x8 (stesso pattern del pallino Novita').
   Il modifier --dot azzera il testo via font-size:0 + color:transparent
   (mantiene la API JS in activity-center.js che setta textContent senza
   rompere — niente breaking changes). */
.ar-demo.ar-demo .app-top-utilities .c-activity-center-trigger__badge--dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--color-brand);
    border: 2px solid var(--color-surface-1);
    box-sizing: content-box;
    /* Nasconde il textContent scritto dal JS senza modificare la sua API. */
    font-size: 0;
    line-height: 0;
    color: transparent;
    pointer-events: none;
    z-index: 2;
    animation: ard-noviteDotAppear 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* ─── Click ripple (Material) sui 3 btn ─────────────────────────
   Pseudo-elemento ::after triggerato dalla classe .is-ripple
   aggiunta dal JS al pointerdown. Centro del btn → scale 0→2.4
   con fade opacity 0.35→0 in 360ms. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand) 35%, transparent);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    /* Task #16 fix #2: clip locale al ripple (cerchio del btn) per evitare
       overflow visible sull'animazione scale 2.4×, senza ricorrere a
       overflow:hidden sul btn (che clipperebbe il pallino Novita'). */
    clip-path: circle(50% at 50% 50%);
}
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn.is-ripple::after {
    animation: ard-islandRipple 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ard-islandRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.35;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.4);
        opacity: 0;
    }
}

/* ---------- topbar: Theme toggle 'locked' (Task #16 fix #4): in stato expanded il btn --locked res  (primitives.css:15014-15032) ---------- */
/* ─── Theme toggle "locked": Task #16 fix #4 ────────────────────
   Il theme toggle nell'isoletta (5° btn) NON deve espandersi con la
   pill, resta sempre icona-only 36x36. Il modifier --locked + l'attr
   data-island-locked sopprimono il morphing width/padding/label. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions[data-island-state="expanded"] .app-top-utilities__icon-btn--locked {
    width: 36px;
    min-width: 36px;
    padding: 0;
}
/* Micro-animation rotation sull'icona del theme toggle al click.
   Triggerata da theme.js che aggiunge .is-theme-flip per 320ms. */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn--locked .p-icon {
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn--locked .p-icon.is-theme-flip {
    transform: rotate(180deg);
}

/* ---------- topbar: Kbd hint dentro il btn Cerca: .app-top-utilities__icon-btn-kbd a riposo (min-w  (primitives.css:15075-15119) ---------- */
/* ─── Kbd hint dentro il search btn (Task #16 fix #1) ───────────
   Il vecchio search-trigger esterno aveva un kbd "⌘K"; ora il search
   e' un .app-top-utilities__icon-btn integrato nella pill, e il kbd
   appare a destra della label "Cerca" SOLO in stato expanded (segue
   la max-width della label, stesso timing). */
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__icon-btn-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width:0 in compatto: altrimenti il kbd manterrebbe i 24px nonostante
       max-width:0 (spec CSS: min-width vince su max-width) e l'icona search
       risulterebbe spostata a sinistra. La min-width:24px viene riattivata
       nella regola [data-island-state="expanded"] piu' sotto. */
    min-width: 0;
    height: 18px;
    max-width: 0;
    margin-left: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-family-mono);
    letter-spacing: 0.02em;
    line-height: 1;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition:
        max-width 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        margin-left 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        padding 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms;
}
.ar-demo.ar-demo .app-top-utilities .app-top-utilities__actions[data-island-state="expanded"] .app-top-utilities__icon-btn-kbd {
    min-width: 24px;
    max-width: 56px;
    margin-left: 6px;
    padding: 0 5px;
    opacity: 1;
}

/* ---------- impostazioni: primitiva .p-confirm-modal (commento + contenitore, [hidden], .is-visible, __b  (primitives.css:15996-16121) ---------- */
/* ─── .p-confirm-modal ────────────────────────────────────────────────────
 * Modal di conferma riusabile sito-wide. Generalizza il pattern del wizard
 * nuovo-lavoratore (vedi nuovo-lavoratore-page.css `.c-nuovo-lav-confirm*`,
 * che resta per backward compat in attesa di migrazione).
 *
 * Usato in: impostazioni hub (disattivazione switcher email).
 * API JS: l'apertura aggiunge `.is-visible` al contenitore; il backdrop e i
 * bottoni [data-p-confirm-close] chiudono; [data-p-confirm-submit] conferma.
 * ─────────────────────────────────────────────────────────────────────── */
.ar-demo .p-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* Fade unificato dei modal (contratto modal-blur-unico). La seconda
       dichiarazione (display allow-discrete) tiene il nodo renderizzato per
       tutto il fade-out anche quando il JS setta [hidden] nello stesso frame;
       dove allow-discrete non esiste resta la prima riga (comportamento di
       oggi). */
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease);
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease), display var(--modal-anim-duration) var(--modal-anim-ease) allow-discrete;
}
.ar-demo .p-confirm-modal[hidden] {
    display: none;
}
.ar-demo .p-confirm-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.ar-demo .p-confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    /* Velo modale unico (token in tokens.css, contratto modal-blur-unico). */
    background: var(--modal-scrim-bg);
    backdrop-filter: blur(var(--modal-scrim-blur));
    -webkit-backdrop-filter: blur(var(--modal-scrim-blur));
}
.ar-demo .p-confirm-modal__card {
    position: relative;
    z-index: 1;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: 1.5rem;
    padding: var(--space-7) var(--space-6) var(--space-6);
    width: min(92vw, 480px);
    box-shadow:
        0 32px 80px rgba(20, 14, 10, 0.32),
        0 8px 24px rgba(20, 14, 10, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(16px) scale(0.96);
    /* Stessa durata/curva del velo (niente overshoot: micro-movimento sottile). */
    transition:
        transform var(--modal-anim-duration) var(--modal-anim-ease),
        opacity var(--modal-anim-duration) var(--modal-anim-ease);
    opacity: 0;
}
.ar-demo .p-confirm-modal.is-visible .p-confirm-modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
/* Ingresso animato anche quando il JS apre senza reflow (hidden=false +
   is-visible nello stesso frame, es. modal azioni iscrizione): al primo
   render lo stile di partenza arriva da qui e il fade parte comunque. */
/* scartata dalla copia: @starting-style */
.ar-demo .p-confirm-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-warning-bg, rgba(245, 158, 11, 0.12));
    color: var(--color-warning-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.ar-demo .p-confirm-modal__icon .p-icon {
    font-size: 28px;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.ar-demo .p-confirm-modal__title {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.25;
}
.ar-demo .p-confirm-modal__desc {
    margin: 0 0 var(--space-5);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.ar-demo .p-confirm-modal__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* ---------- impostazioni: .p-modal core + .p-modal[hidden]{display:none} + .p-modal.is-visible — i due m  (primitives.css:16596-16612) ---------- */
.ar-demo .p-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5, 20px);
    opacity: 0;
    pointer-events: none;
    /* Fade unificato (contratto modal-blur-unico): uscita animata via display
       allow-discrete, fallback = prima riga (swap secco come oggi). */
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease);
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease), display var(--modal-anim-duration) var(--modal-anim-ease) allow-discrete;
}
.ar-demo .p-modal[hidden] { display: none; }
.ar-demo .p-modal.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- elenco sedi nel rail sinistro (p-sede-rail)  (primitives.css:17414-17718) ---------- */
.ar-demo .p-sede-rail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ar-demo .p-sede-rail__group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-2) 0 2px;
    padding: 0 var(--space-2);
    /* Sentence case: niente etichette in maiuscolo (regola standing). */
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-soft);
}
.ar-demo .p-sede-rail__count {
    flex: none;
    font-size: 11px;
    color: var(--color-text-soft);
}
.ar-demo .p-sede-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ar-demo .p-sede-rail__item {
    margin: 0;
}
/* Riga: il pallino occupa la prima colonna su entrambe le righe (nome + meta),
   cosi' resta allineato al centro anche quando la meta e' presente. */
.ar-demo .p-sede-rail__row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    width: 100%;
    padding: 5px var(--space-2);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-nav-item);
    text-align: left;
    text-decoration: none;
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease);
}
.ar-demo a.p-sede-rail__row:hover,
.ar-demo a.p-sede-rail__row:focus-visible {
    background: color-mix(in srgb, var(--color-brand) 7%, transparent);
    color: var(--color-text-primary);
}
/* Il pallino e' un ELEMENTO DI ELENCO, non uno stato: stesso colore per tutte
   le sedi. Si accende solo sulla riga corrente. */
.ar-demo .p-sede-rail__dot {
    grid-row: 1 / span 2;
    width: 7px;
    height: 7px;
    margin: 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-primary) 26%, transparent);
}
.ar-demo .p-sede-rail__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .p-sede-rail__meta {
    grid-column: 2;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Sede corrente: fondo tenue + bordo su TUTTI E 4 i lati + pallino pieno.
   Niente box-shadow inset su un lato solo (regola standing: la barra di
   accento laterale e' bandita come segnale di selezione). */
.ar-demo .p-sede-rail__row.is-current {
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 32%, transparent);
    color: var(--color-text-primary);
}
.ar-demo .p-sede-rail__row.is-current .p-sede-rail__dot {
    background: var(--color-brand);
}
.ar-demo .p-sede-rail__row.is-current .p-sede-rail__meta {
    color: color-mix(in srgb, var(--color-link) 82%, transparent);
}
/* Riga della madre (che e' anche la vista consolidata): pallino ad anello,
   la distingue dalle unita' locali senza aggiungere un secondo segnale. */
.ar-demo .p-sede-rail__row--main .p-sede-rail__dot {
    background: transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-text-primary) 40%, transparent);
}
.ar-demo .p-sede-rail__row--main.is-current .p-sede-rail__dot {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--color-brand);
}
/* "Mostra le altre N": allineata al testo delle righe, non al pallino. */
.ar-demo .p-sede-rail__more {
    width: 100%;
    margin-top: 2px;
    padding: 5px var(--space-2) 5px 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-link);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-sede-rail__more:hover {
    background: color-mix(in srgb, var(--color-brand) 7%, transparent);
}
/* ============================================================
   Albero sedi a 3 livelli (nonna -> madri -> sedi) + risalita (2026-07-30)
   Partial: _sede-rail.php (sezione --tree e riga __up), _sede-popover.php
   (item--nipote, item--up, row-count). Tutto quello che cambia la resa del
   caso a 2 livelli e' scoped sotto .p-sede-rail--tree o su classi nuove:
   una famiglia madre+figlie (Hafele) non cambia di un pixel.
   ============================================================ */
/* Riga di risalita alla capogruppo: navigazione, non voce di elenco.
   Card tenue con bordo su 4 lati (niente barra di accento laterale). */
.ar-demo .p-sede-rail__up {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 6px;
    padding: 6px var(--space-2);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-2) 72%, transparent);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-sede-rail__up:hover {
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 28%, transparent);
    color: var(--color-text-primary);
    /* Ombra brand morbida e LUNGA (standing: mai corta/dura). */
    box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--color-brand) 55%, transparent);
}
.ar-demo .p-sede-rail__up-icon {
    flex: none;
    display: inline-flex;
}
.ar-demo .p-sede-rail__up-icon .p-icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-soft);
    /* La freccia "sale" di 1px all'hover: microgesto discreto, coerente col brand. */
    transition:
        transform var(--motion-fast) var(--motion-ease-out),
        color var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-sede-rail__up:hover .p-sede-rail__up-icon .p-icon {
    transform: translateY(-1px);
    color: var(--color-brand);
}
.ar-demo .p-sede-rail__up-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ar-demo .p-sede-rail__up-name {
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .p-sede-rail__up-meta {
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--color-text-soft);
}
/* Nodo madre: anello piu' piccolo della nonna — la gerarchia dei tre livelli
   si legge dai pallini (anello grande > anello piccolo > punto pieno). */
.ar-demo .p-sede-rail--tree .p-sede-rail__row--madre .p-sede-rail__dot {
    width: 6px;
    height: 6px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-text-primary) 38%, transparent);
}
.ar-demo .p-sede-rail--tree .p-sede-rail__row--madre.is-current .p-sede-rail__dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-brand);
}
.ar-demo .p-sede-rail--tree .p-sede-rail__item--madre {
    margin-top: 3px;
}
/* Sedi della madre: annidate sotto un connettore sottile (elemento di elenco,
   non un segnale di stato) che si accende col brand quando la famiglia e'
   attraversata dal puntatore o dal focus. */
.ar-demo .p-sede-rail__sublist {
    margin: 1px 0 2px 12px;
    padding-left: 9px;
    border-left: 1px solid color-mix(in srgb, var(--color-border-subtle) 85%, transparent);
    list-style: none;
    transition: border-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-sede-rail--tree .p-sede-rail__item--madre:hover > .p-sede-rail__sublist,
.ar-demo .p-sede-rail--tree .p-sede-rail__item--madre:focus-within > .p-sede-rail__sublist {
    border-left-color: color-mix(in srgb, var(--color-brand) 38%, transparent);
}
.ar-demo .p-sede-rail__sublist .p-sede-rail__row {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
}
.ar-demo .p-sede-rail__sublist .p-sede-rail__dot {
    width: 5px;
    height: 5px;
}
/* Sede corrente nell'albero: al fondo tenue si aggiunge un alone brand morbido
   e lungo (mai sul 2 livelli: la non-regressione visiva resta piena). */
.ar-demo .p-sede-rail--tree .p-sede-rail__row.is-current {
    box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--color-brand) 50%, transparent);
}
/* "Mostra le altre N" per gruppo: rientra col sotto-elenco della sua madre. */
.ar-demo .p-sede-rail__more--group {
    margin: 0 0 2px 12px;
    width: calc(100% - 12px);
    padding-left: 33px;
    font-size: 11px;
}
/* Le righe scoperte da "Mostra le altre" entrano con una dissolvenza breve:
   solo nei sotto-gruppi dell'albero, il 2 livelli resta senza animazione. */
.ar-demo .p-sede-rail__sublist .p-sede-rail__item--extra:not([hidden]) {
    animation: ard-p-sede-rail-reveal 180ms var(--motion-ease-out) both;
}
@keyframes ard-p-sede-rail-reveal {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .p-sede-rail__sublist .p-sede-rail__item--extra:not([hidden]) {
        animation: none;
      }
  .ar-demo .p-sede-rail__up-icon .p-icon {
        transition: none;
      }
}

/* ---------- sidebar: Box 'Faccelo sapere' nel rail sinistro: commento di sezione datato 2026-07-27   (primitives.css:17768-17814) ---------- */
/* ============================================================
   Box "Faccelo sapere" nel rail sinistro + modal (2026-07-27)
   Partial: app/views/layout/_feedback-box.php
   Sparisce per sempre dopo il primo invio riuscito: e' arredamento
   temporaneo, per questo non ruba piu' altezza del necessario.
   ============================================================ */
.ar-demo .p-feedback-box {
    margin: 0 0 10px;
    padding: 9px var(--space-2) 8px;
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-canvas));
}
.ar-demo .p-feedback-box__text {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.002em;
    color: var(--color-text-secondary);
}
/* CTA a destra (regola standing). */
.ar-demo .p-feedback-box__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.ar-demo .p-feedback-box__cta {
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-brand) 45%, transparent);
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-link);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .p-feedback-box__cta:hover {
    background: color-mix(in srgb, var(--color-brand) 20%, transparent);
}

/* ---------- dashboard: vista consolidata delle sedi (.d-consolidated-box)  (primitives.css:18091-18254) ---------- */
/* ============================================================
   Vista consolidata (dashboard capogruppo, plan-multisede)
   Visual upgrade grillui 2026-06-11: linguaggio .d-da-fare-box
   ============================================================ */
.ar-demo .d-consolidated-box {
    /* Gradient hero in testa (grillui 2026-06-11b): il calore brand si
       concentra dietro l'header e sfuma su surface-1, righe identiche a
       Da fare. Bordo brand fisso: e la card "livello azienda". */
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--color-brand) 12%, var(--color-surface-1)) 0%,
        var(--color-surface-1) 42%
    );
    border: 1px solid color-mix(in srgb, var(--color-brand) 35%, var(--color-border-subtle));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ar-demo .d-consolidated-box__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ar-demo .d-consolidated-box__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ar-demo .d-consolidated-box__icon {
    color: var(--color-brand);
    font-size: 22px;
}
.ar-demo .d-consolidated-box__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-primary);
}
.ar-demo .d-consolidated-box__meta {
    margin: 0;
}
.ar-demo .d-consolidated-box__empty {
    margin: 0;
}
.ar-demo .d-consolidated-box__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ar-demo .d-consolidated-box__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--motion-fast, 120ms) ease;
}
.ar-demo a.d-consolidated-box__row:hover {
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-2));
}
.ar-demo a.d-consolidated-box__row:hover .d-consolidated-box__chevron {
    color: var(--color-brand);
    transform: translateX(2px);
}
.ar-demo .d-consolidated-box__row-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ar-demo .d-consolidated-box__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.ar-demo .d-consolidated-box__main-tag {
    margin-left: var(--space-1);
}
.ar-demo .d-consolidated-box__row-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    flex: 0 0 auto;
    white-space: nowrap;
}
.ar-demo .d-consolidated-box__chevron {
    font-size: 18px;
    color: var(--color-text-secondary);
    flex: none;
    transition: transform var(--motion-fast, 120ms) ease, color var(--motion-fast, 120ms) ease;
}
/* Sede principale double-size: "mini Stato Formazione" in scala riga —
   nome grande, percent prominente a destra, detail X su Y, track 6px. */
.ar-demo .d-consolidated-box__item--main .d-consolidated-box__row {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}
.ar-demo .d-consolidated-box__item--main .d-consolidated-box__name {
    font-size: 15px;
    font-weight: 500;
}
.ar-demo .d-consolidated-box__main-percent {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-brand);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.ar-demo .d-consolidated-box__main-detail {
    margin: 0;
}
.ar-demo .d-consolidated-box__item--main .d-consolidated-box__track {
    height: 6px;
}
/* Mini progress per sede: stessa grammatica del track org-progress
   (percent = scadenze non scadute su totali; il numero resta nel testo). */
.ar-demo .d-consolidated-box__track {
    height: 4px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    overflow: hidden;
}
.ar-demo .d-consolidated-box__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand) 75%, transparent), var(--color-brand));
    transition: width var(--motion-peak, 320ms) ease-out;
}

/* ---------- box unico 'Formazione da sistemare'  (primitives.css:19395-19989) ---------- */
/* ═══════════════════════════════════════════════════════════════════════════
   Box unico "Formazione da sistemare" — dashboard (2026-07-27)
   Variante "Il rapporto", scelta dall'utente fra tre proposte del judge
   (.tmp/judge/2026-07-27-dashboard-box-unificato/VERDICT.md).

   Sostituisce i due box separati "Scadenze formazione" + "Corsi mai fatti":
   un totale in testa, una barra che lo scompone nelle tre categorie, e tre
   righe apribili con l'elenco dei lavoratori.

   TUTTO SCOPATO SOTTO .d-dashboard: primitives.css e' il file piu' condiviso
   del sito e il prefisso .ar-* e' corto. Fuori dalla dashboard queste regole
   non devono esistere.
   Niente ombra dura sul box: bordo + gradient, come faceva
   .d-priority-card--scadenze (ombra rimossa su richiesta utente il 2026-06-19).
   ═══════════════════════════════════════════════════════════════════════════ */
.ar-demo .d-dashboard .ar-box,
.ar-demo .d-dashboard .ar-box {
    --ar-veil: rgba(249, 81, 0, 0.10);
    --ar-veil-ok: rgba(31, 155, 109, 0.12);
    --ar-bar-track: color-mix(in srgb, #2b1711 9%, transparent);
    --ar-row-bg: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
    --ar-row-bg-hover: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
    --ar-panel-bg: color-mix(in srgb, #2b1711 3%, transparent);
    --ar-shadow-lift: 0 22px 48px -28px rgba(43, 23, 17, 0.28);
}

.ar-demo .d-dashboard .ar-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    background:
        linear-gradient(180deg, var(--ar-veil), transparent 55%),
        linear-gradient(160deg, var(--color-surface-1) 0%, var(--color-surface-2) 100%);
    box-shadow: none;
    color: var(--color-text-primary);
    overflow: hidden;
    animation: ard-ar-in 0.5s var(--motion-ease-out) both;
}
.ar-demo .d-dashboard .ar-box--ok {
    background:
        linear-gradient(180deg, var(--ar-veil-ok), transparent 58%),
        linear-gradient(160deg, var(--color-surface-1) 0%, var(--color-surface-2) 100%);
    border-color: var(--color-ok-border);
}
@keyframes ard-ar-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
/* ----- Testata: titolo a sinistra, IL NUMERO a destra ----- */
.ar-demo .d-dashboard .ar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}
.ar-demo .d-dashboard .ar-head__titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ar-demo .d-dashboard .ar-box__title {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.012em;
    color: var(--color-text-primary);
}
.ar-demo .d-dashboard .ar-head__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-text-soft);
    max-width: 42ch;
}
.ar-demo .d-dashboard .ar-total {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 1px;
}
/* Il numero e' grande di SIZE, mai di peso: il font resta 500 come tutto il sito. */
.ar-demo .d-dashboard .ar-total__num {
    font-size: 52px;
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
    animation: ard-ar-num-in 0.6s var(--motion-ease-out) 0.12s both;
}
.ar-demo .d-dashboard .ar-total__unit {
    font-size: 12.5px;
    letter-spacing: 0.005em;
    color: var(--color-text-soft);
    white-space: nowrap;
    line-height: 1.25;
}
/* Stato "tutto a posto": al posto del numero, il medaglione e la parola. Mai lo 0. */
.ar-demo .d-dashboard .ar-total--ok {
    align-items: flex-end;
    gap: var(--space-1);
}
.ar-demo .d-dashboard .ar-total__medal {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    color: var(--color-ok-fg);
    background: var(--color-ok-bg);
    border: var(--border-width-thin) solid var(--color-ok-border);
    box-shadow: 0 18px 40px -22px rgba(31, 155, 109, 0.55);
    animation: ard-ar-medal-in 0.55s var(--motion-ease-out) 0.1s both;
}
.ar-demo .d-dashboard .ar-total__okword {
    font-size: 20px;
    letter-spacing: -0.015em;
    color: var(--color-ok-fg);
}
@keyframes ard-ar-num-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes ard-ar-medal-in {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: none; }
}
/* ----- Barra di composizione: le tre categorie sullo stesso binario ----- */
.ar-demo .d-dashboard .ar-compo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .d-dashboard .ar-compo__track {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 10px;
    width: 100%;
    border-radius: var(--radius-pill);
    background: var(--ar-bar-track);
    overflow: hidden;
}
.ar-demo .d-dashboard .ar-compo__seg {
    flex-grow: var(--n, 1);
    flex-shrink: 1;
    flex-basis: 0;
    /* Pavimento: il segmento minuscolo (In scadenza vale il 2% del totale) resta
       visibile. Lo sovra-rappresenta di poco: la cifra esatta la da' l'equazione
       qui sotto, che e' la fonte da cui si legge il numero. */
    min-width: 8px;
    border-radius: var(--radius-pill);
    transform-origin: left center;
    animation: ard-ar-seg-in 0.7s var(--motion-ease-out) both;
    transition: opacity var(--motion-base) ease;
}
.ar-demo .d-dashboard .ar-compo__seg--t1 { background: var(--color-accent-strong); animation-delay: 0.20s; }
.ar-demo .d-dashboard .ar-compo__seg--t2 { background: var(--color-brand); animation-delay: 0.28s; }
.ar-demo .d-dashboard .ar-compo__seg--t3 {
    background: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base));
    animation-delay: 0.36s;
}
@keyframes ard-ar-seg-in {
    from { opacity: 0; transform: scaleX(0.04); }
    to { opacity: 1; transform: none; }
}
.ar-demo .d-dashboard .ar-compo__track--ok {
    background: var(--color-ok-bg);
    border: var(--border-width-thin) solid var(--color-ok-border);
}
/* L'equazione: la stessa informazione della barra, ma verificabile contando. */
.ar-demo .d-dashboard .ar-eq {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.ar-demo .d-dashboard .ar-eq__t {
    font-size: 14px;
    letter-spacing: -0.01em;
    transition: opacity var(--motion-base) ease;
}
.ar-demo .d-dashboard .ar-eq__t--t1 { color: var(--color-accent-strong); }
.ar-demo .d-dashboard .ar-eq__t--t2 { color: var(--color-brand); }
.ar-demo .d-dashboard .ar-eq__t--t3 { color: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base)); }
.ar-demo .d-dashboard .ar-eq__op { color: var(--color-text-soft); opacity: 0.7; }
.ar-demo .d-dashboard .ar-eq__sum { font-size: 14px; letter-spacing: -0.01em; color: var(--color-text-primary); }
.ar-demo .d-dashboard .ar-eq__unit { color: var(--color-text-soft); }
.ar-demo .d-dashboard .ar-eq--ok { color: var(--color-ok-fg); }
/* Legatura barra <-> riga: la riga puntata resta accesa, il resto si attenua. */
.ar-demo .d-dashboard .ar-box.is-hl .ar-compo__seg:not(.is-hl),
.ar-demo .d-dashboard .ar-box.is-hl .ar-eq__t:not(.is-hl) { opacity: 0.28; }
/* ----- Le tre righe ----- */
.ar-demo .d-dashboard .ar-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .d-dashboard .ar-row {
    border-radius: var(--radius-lg);
    border: var(--border-width-thin) solid transparent;
    background: var(--ar-row-bg);
    overflow: hidden;
    transition: background var(--motion-base) ease, border-color var(--motion-base) ease, box-shadow var(--motion-peak) ease;
    animation: ard-ar-row-in 0.5s var(--motion-ease-out) both;
}
.ar-demo .d-dashboard .ar-row:nth-of-type(1) { animation-delay: 0.10s; }
.ar-demo .d-dashboard .ar-row:nth-of-type(2) { animation-delay: 0.17s; }
.ar-demo .d-dashboard .ar-row:nth-of-type(3) { animation-delay: 0.24s; }
@keyframes ard-ar-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.ar-demo .d-dashboard .ar-row:hover {
    background: var(--ar-row-bg-hover);
    border-color: color-mix(in srgb, var(--color-brand) 26%, transparent);
}
.ar-demo .d-dashboard .ar-row.is-open {
    background: var(--ar-row-bg-hover);
    border-color: color-mix(in srgb, var(--color-brand) 32%, transparent);
    box-shadow: var(--ar-shadow-lift);
}
.ar-demo .d-dashboard .ar-row__h { margin: 0; font-size: inherit; }
.ar-demo .d-dashboard .ar-row__head {
    width: 100%;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto 18px;
    grid-template-areas: "sw main meta chev";
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-lg);
    color: inherit;
    cursor: pointer;
}
.ar-demo .d-dashboard .ar-row__head--static { cursor: default; }
.ar-demo .d-dashboard .ar-row__swatch {
    grid-area: sw;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    justify-self: center;
}
.ar-demo .d-dashboard .ar-row__swatch--t1 { background: var(--color-accent-strong); }
.ar-demo .d-dashboard .ar-row__swatch--t2 { background: var(--color-brand); }
.ar-demo .d-dashboard .ar-row__swatch--t3 { background: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base)); }
.ar-demo .d-dashboard .ar-row__swatch--done {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-ok-fg);
}
.ar-demo .d-dashboard .ar-row__main {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ar-demo .d-dashboard .ar-row__label { font-size: 15px; letter-spacing: -0.005em; color: var(--color-text-primary); }
.ar-demo .d-dashboard .ar-row__desc { font-size: 12px; line-height: 1.35; color: var(--color-text-soft); }
.ar-demo .d-dashboard .ar-row__meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-5);
    font-variant-numeric: tabular-nums;
}
.ar-demo .d-dashboard .ar-row__n {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 5.4ch;
    justify-content: flex-end;
}
/* Gerarchia: la size del numero segue il peso della categoria, mai il font-weight. */
.ar-demo .d-dashboard .ar-row__num { font-size: 26px; line-height: 1; letter-spacing: -0.03em; }
.ar-demo .d-dashboard .ar-row__num--t1 { color: var(--color-accent-strong); }
.ar-demo .d-dashboard .ar-row__num--t2 { color: var(--color-brand); }
.ar-demo .d-dashboard .ar-row__num--t3 { color: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base)); }
.ar-demo .d-dashboard .ar-row__nunit { font-size: 12px; color: var(--color-text-soft); }
.ar-demo .d-dashboard .ar-row__ppl { font-size: 12.5px; color: var(--color-text-soft); min-width: 11.5ch; text-align: right; }
.ar-demo .d-dashboard .ar-row__chev {
    grid-area: chev;
    display: grid;
    place-items: center;
    color: var(--color-text-soft);
    transition: transform var(--motion-peak) var(--motion-ease-out), color var(--motion-base) ease;
}
.ar-demo .d-dashboard .ar-row.is-open .ar-row__chev { transform: rotate(180deg); color: var(--color-brand); }
/* ----- Riga completata: fondo tenue + bordo su TUTTI E 4 i lati + check.
   Mai la barra di accento laterale (bandita), mai il numero 0. ----- */
.ar-demo .d-dashboard .ar-row--done {
    background: var(--color-ok-bg);
    border-color: var(--color-ok-border);
}
.ar-demo .d-dashboard .ar-row--done:hover {
    background: var(--color-ok-bg);
    border-color: var(--color-ok-border);
}
.ar-demo .d-dashboard .ar-row--done .ar-row__desc {
    color: color-mix(in srgb, var(--color-ok-fg) 78%, var(--color-text-soft));
}
.ar-demo .d-dashboard .ar-badge-ok {
    grid-area: meta;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    letter-spacing: 0.005em;
    color: var(--color-ok-fg);
    background: color-mix(in srgb, var(--color-ok-fg) 12%, transparent);
    border: var(--border-width-thin) solid var(--color-ok-border);
    animation: ard-ar-ok-in 0.5s var(--motion-ease-out) 0.3s both;
}
@keyframes ard-ar-ok-in {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: none; }
}
/* Il badge arriva fino alla colonna del chevron: le righe restano allineate a
   destra anche quando una e' completata e il chevron non c'e'. */
/* sempre vera sul canvas 1440px: @media (min-width: 768px) */
.ar-demo .d-dashboard .ar-badge-ok { grid-column: meta-start / chev-end; }
/* Il segno di spunta si disegna. */
.ar-demo .d-dashboard .ar-check path {
    stroke-dasharray: 26;
    stroke-dashoffset: 0;
    animation: ard-ar-check-draw 0.6s var(--motion-ease-out) 0.34s both;
}
@keyframes ard-ar-check-draw {
    from { stroke-dashoffset: 26; }
    to { stroke-dashoffset: 0; }
}
/* ----- Pannello aperto ----- */
.ar-demo .d-dashboard .ar-panel {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: var(--border-width-thin) solid var(--color-border-subtle);
    background: var(--ar-panel-bg);
    animation: ard-ar-panel-in var(--motion-peak) var(--motion-ease-out) both;
}
@keyframes ard-ar-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.ar-demo .d-dashboard .ar-panel__cap {
    margin: 0 0 var(--space-2);
    font-size: 12.5px;
    color: var(--color-text-soft);
    letter-spacing: 0.005em;
}
.ar-demo .d-dashboard .ar-plist { display: flex; flex-direction: column; }
.ar-demo .d-dashboard .ar-p-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 7px var(--space-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    border: var(--border-width-thin) solid transparent;
    transition: background var(--motion-base) ease, border-color var(--motion-base) ease, transform var(--motion-base) var(--motion-ease-out);
    animation: ard-ar-p-in 0.42s var(--motion-ease-out) both;
    animation-delay: calc(0.05s + var(--i, 0) * 0.035s);
}
.ar-demo .d-dashboard .ar-p-row:hover {
    background: var(--ar-row-bg-hover);
    border-color: color-mix(in srgb, var(--color-brand) 22%, transparent);
    transform: translateX(2px);
}
@keyframes ard-ar-p-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}
.ar-demo .d-dashboard .ar-p-row__name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--color-text-primary);
    /* I nomi lunghi ("Fraternale Cesaroni Valerio") vanno a capo: il nome del
       lavoratore non si tronca con l'ellissi. */
    overflow-wrap: anywhere;
}
.ar-demo .d-dashboard .ar-p-row__lead {
    flex: 1 1 var(--space-4);
    min-width: var(--space-3);
    height: 1px;
    align-self: flex-end;
    margin-bottom: 5px;
    border-bottom: 1px dotted var(--color-border-subtle);
    opacity: 0.7;
}
.ar-demo .d-dashboard .ar-p-row__n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ar-demo .d-dashboard .ar-p-row__num { font-size: 13.5px; letter-spacing: -0.01em; }
.ar-demo .d-dashboard .ar-p-row__num--t1 { color: var(--color-accent-strong); }
.ar-demo .d-dashboard .ar-p-row__num--t2 { color: var(--color-brand); }
.ar-demo .d-dashboard .ar-p-row__num--t3 { color: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base)); }
/* ----- Il prospetto: rende visibile che i conti tornano ----- */
.ar-demo .d-dashboard .ar-ledger {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface-1) 55%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.ar-demo .d-dashboard .ar-ledger__line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 12.5px;
    color: var(--color-text-soft);
}
.ar-demo .d-dashboard .ar-ledger__k { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ar-demo .d-dashboard .ar-ledger__dots {
    flex: 1 1 var(--space-4);
    min-width: var(--space-3);
    height: 1px;
    align-self: flex-end;
    margin-bottom: 5px;
    border-bottom: 1px dotted var(--color-border-subtle);
    opacity: 0.6;
}
.ar-demo .d-dashboard .ar-ledger__v {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--color-text-primary);
    min-width: 4ch;
    text-align: right;
}
.ar-demo .d-dashboard .ar-ledger__line--tot {
    padding-top: 7px;
    border-top: var(--border-width-thin) solid var(--color-border-subtle);
    color: var(--color-text-primary);
}
.ar-demo .d-dashboard .ar-ledger__line--tot .ar-ledger__v { font-size: 15px; letter-spacing: -0.015em; }
.ar-demo .d-dashboard .ar-ledger__v--t1 { color: var(--color-accent-strong); }
.ar-demo .d-dashboard .ar-ledger__v--t2 { color: var(--color-brand); }
.ar-demo .d-dashboard .ar-ledger__v--t3 { color: color-mix(in srgb, var(--color-brand) 48%, var(--color-text-base)); }
.ar-demo .d-dashboard .ar-ledger__note { margin: 0; font-size: 12px; color: var(--color-text-soft); }
/* Azione del pannello: sempre a destra. */
.ar-demo .d-dashboard .ar-panel__act { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
/* ----- Footer del box: link quieto a sinistra, CTA SEMPRE a destra ----- */
.ar-demo .d-dashboard .ar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ar-demo .d-dashboard .ar-foot__link,
.ar-demo .d-dashboard .ar-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.005em;
    text-decoration: none;
    color: var(--color-text-soft);
    border-bottom: var(--border-width-thin) solid transparent;
    transition: color var(--motion-base) ease, border-color var(--motion-base) ease;
}
.ar-demo .d-dashboard .ar-foot__link:hover,
.ar-demo .d-dashboard .ar-more:hover {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
}
.ar-demo .d-dashboard .ar-foot__link .p-icon,
.ar-demo .d-dashboard .ar-more .p-icon,
.ar-demo .d-dashboard .ar-cta .p-icon {
    font-size: 16px;
    transition: transform var(--motion-peak) var(--motion-ease-out);
}
.ar-demo .d-dashboard .ar-foot__link:hover .p-icon,
.ar-demo .d-dashboard .ar-more:hover .p-icon,
.ar-demo .d-dashboard .ar-cta:hover .p-icon { transform: translateX(3px); }
.ar-demo .d-dashboard .ar-cta {
    /* CTA sempre a destra, anche quando manca il link a sinistra. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 14px;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(160deg, var(--color-brand), var(--color-accent-strong));
    box-shadow: 0 18px 34px -18px rgba(249, 81, 0, 0.7);
    transition: transform var(--motion-base) var(--motion-ease-out), box-shadow var(--motion-peak) ease;
}
.ar-demo .d-dashboard .ar-cta:hover { transform: translateY(-1px); box-shadow: 0 22px 40px -18px rgba(249, 81, 0, 0.8); }
.ar-demo .d-dashboard .ar-cta--quiet {
    color: var(--color-text-primary);
    background: transparent;
    border: var(--border-width-thin) solid var(--color-border-subtle);
    box-shadow: none;
}
.ar-demo .d-dashboard .ar-cta--quiet:hover {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
    color: var(--color-brand);
}
/* ----- Mobile: i numeri scendono su una seconda riga, i nomi vanno a capo ----- */
/* risolta a 1440px e scartata: @media (max-width: 767px) */
/* ----- Motion ridotto: tutto fermo. Scopato al box (NON un reset globale su *),
   perche' qui siamo in primitives.css e un * spegnerebbe il sito intero. ----- */
@media (prefers-reduced-motion: reduce) {
  .ar-demo .d-dashboard .ar-box,
.ar-demo .d-dashboard .ar-box *,
.ar-demo .d-dashboard .ar-box *::before,
.ar-demo .d-dashboard .ar-box *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
}

/* ---------- organigramma: Intestazione del file (Organigramma V3) + .c-ruoli: il contenitore di pagina,   (ruoli-page.css:1-10) ---------- */
/* ═══════════════════════════════════════════════════════════════
   Organigramma V3 — Redesign
   Clean, compact, interactive org-chart with fixed 4+4 columns.
   ═══════════════════════════════════════════════════════════════ */
.ar-demo .c-ruoli {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---------- organigramma: .org-controls — barra controlli (flex, align-items center, wrap, gap --space-2  (ruoli-page.css:16-24) ---------- */
/* ─── Controls Bar (view switch + search + filters, right-aligned) ─── */
.ar-demo .org-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------- organigramma: .org-print-header { display: none } — l'header di stampa e' nel DOM ma spento   (ruoli-page.css:26-30) ---------- */
/* ─── Print-only header ─────────────────────────────────────── */
.ar-demo .org-print-header {
    display: none;
}

/* ---------- organigramma: .org-search + .org-search__icon + .org-search__input (+ :focus e ::placeholder  (ruoli-page.css:65-101) ---------- */
/* ─── Search ─────────────────────────────────────────────────── */
.ar-demo .org-search {
    position: relative;
    display: flex;
    align-items: center;
}
.ar-demo .org-search__icon {
    position: absolute;
    left: 10px;
    font-size: 18px;
    color: var(--color-text-soft);
    pointer-events: none;
}
.ar-demo .org-search__input {
    padding: 7px 12px 7px 34px;
    font-size: var(--text-caption-size);
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 60%, transparent);
    border-radius: var(--radius-pill);
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    width: 240px;
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-search__input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}
.ar-demo .org-search__input::placeholder {
    color: var(--color-text-soft);
}

/* ---------- organigramma: .org-filters e .org-filter-chip con tutte le varianti (--active, --warning, --  (ruoli-page.css:103-161) ---------- */
/* ─── Filter Chips ───────────────────────────────────────────── */
.ar-demo .org-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ar-demo .org-filter-chip {
    padding: 5px 12px;
    font-size: calc(var(--text-meta-size) + 1px);
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-filter-chip:hover {
    background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
}
.ar-demo .org-filter-chip--active {
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-color: var(--color-brand);
}
.ar-demo .org-filter-chip--warning {
    border-color: color-mix(in srgb, var(--color-warning-fg) 40%, transparent);
    color: var(--color-warning-fg);
}
.ar-demo .org-filter-chip--warning.org-filter-chip--active {
    background: var(--color-warning-fg);
    color: var(--color-surface-1);
    border-color: var(--color-warning-fg);
}
/* Stato disabilitato dei chip filtro formazione durante il drain lazy del semaforo
   (decisione #2): finche' i badge non sono idratati i filtri sono inerti e VISIBILMENTE
   disabilitati (niente dead-click silenzioso). pointer-events:none blocca hover/click;
   l'hover e' neutralizzato anche esplicitamente per battere la regola base :hover. */
.ar-demo .org-filter-chip--disabled,
.ar-demo .org-filter-chip--disabled:hover,
.ar-demo .org-filter-chip[aria-disabled="true"],
.ar-demo .org-filter-chip[aria-disabled="true"]:hover {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
}
.ar-demo .org-filter-chip:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ---------- organigramma: .org-download-btn (+ :hover, :focus-visible, .p-icon interna) — CTA piena bran  (ruoli-page.css:163-194) ---------- */
/* ─── Download PDF button (tutto a destra nella barra controlli) ─ */
.ar-demo .org-download-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: var(--text-caption-size);
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand) 22%, transparent);
    transition: background var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-download-btn:hover {
    background: color-mix(in srgb, var(--color-brand) 88%, #000);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-brand) 28%, transparent);
}
.ar-demo .org-download-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.ar-demo .org-download-btn .p-icon {
    font-size: 18px;
}

/* ---------- organigramma: Blocco modale PDF (.org-pdf-modal, __scrim con velo unico a token, __card, __c  (ruoli-page.css:196-346) ---------- */
/* ─── Modal scelta versione PDF ──────────────────────────────── */
.ar-demo .org-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* Fade unificato (contratto modal-blur-unico): display allow-discrete
       completa il fade-out anche quando il JS ri-applica [hidden] a meta'
       transizione; senza supporto resta la prima riga (comportamento di oggi). */
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease);
    transition: opacity var(--modal-anim-duration) var(--modal-anim-ease), display var(--modal-anim-duration) var(--modal-anim-ease) allow-discrete;
}
.ar-demo .org-pdf-modal[hidden] {
    display: none;
}
.ar-demo .org-pdf-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.ar-demo .org-pdf-modal__scrim {
    position: absolute;
    inset: 0;
    /* Velo modale unico (token in tokens.css, contratto modal-blur-unico). */
    background: var(--modal-scrim-bg);
    backdrop-filter: blur(var(--modal-scrim-blur));
    -webkit-backdrop-filter: blur(var(--modal-scrim-blur));
}
.ar-demo .org-pdf-modal__card {
    position: relative;
    z-index: 1;
    width: min(92vw, 440px);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: 1.25rem;
    padding: var(--space-6) var(--space-5) var(--space-5);
    box-shadow: 0 32px 80px rgba(20, 14, 10, 0.32), 0 8px 24px rgba(20, 14, 10, 0.16);
    transform: translateY(12px) scale(0.97);
    opacity: 0;
    /* Stessa durata/curva del velo (niente overshoot, contratto modal-blur-unico). */
    transition: transform var(--modal-anim-duration) var(--modal-anim-ease), opacity var(--modal-anim-duration) var(--modal-anim-ease);
}
.ar-demo .org-pdf-modal.is-visible .org-pdf-modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ar-demo .org-pdf-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-pdf-modal__close:hover {
    background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
    color: var(--color-text-primary);
}
.ar-demo .org-pdf-modal__title {
    margin: 0 0 4px;
    font-size: var(--text-section-size, 1.05rem);
    font-weight: 500;
    color: var(--color-text-primary);
}
.ar-demo .org-pdf-modal__desc {
    margin: 0 0 var(--space-4);
    font-size: var(--text-caption-size);
    color: var(--color-text-secondary);
}
.ar-demo .org-pdf-modal__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .org-pdf-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md, 0.75rem);
    background: var(--color-surface-1);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-pdf-option:hover {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface-1));
}
.ar-demo .org-pdf-option:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.ar-demo .org-pdf-option__icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--color-brand);
}
.ar-demo .org-pdf-option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ar-demo .org-pdf-option__title {
    font-size: var(--text-caption-size);
    font-weight: 500;
    color: var(--color-text-primary);
}
.ar-demo .org-pdf-option__desc {
    font-size: var(--text-meta-size);
    color: var(--color-text-secondary);
}
.ar-demo .org-pdf-option__chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-soft);
}

/* ---------- organigramma: .org-chart-view (min-height 480px), .org-viewport-wrapper, .org-viewport (card  (ruoli-page.css:348-380) ---------- */
/* ─── Chart View Layout ──────────────────────────────────────── */
.ar-demo .org-chart-view {
    display: flex;
    gap: 0;
    min-height: 480px;
}
.ar-demo .org-viewport-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* ─── Viewport ───────────────────────────────────────────────── */
.ar-demo .org-viewport {
    position: relative;
    flex: 1;
    overflow: auto;
    background: var(--color-surface-1);
    border: var(--border-width-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-4);
    scroll-behavior: smooth;
    box-shadow: var(--shadow-none);
}
.ar-demo .org-viewport__content {
    position: relative;
    transform-origin: top left;
}

/* ---------- organigramma: .org-row e le tre righe (--root centrata, --primary a 4 colonne fisse, --secon  (ruoli-page.css:403-493) ---------- */
/* ─── Org Rows ───────────────────────────────────────────────── */
.ar-demo .org-row {
    position: relative;
    z-index: 1;
}
.ar-demo .org-row--root {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
}
.ar-demo .org-row--primary,
.ar-demo .org-row--secondary {
    display: grid;
    /* Il gap e' anche il binario su cui corre il separatore verticale fra colonne
       (blocco "Separatori" qui sotto): tenerlo in una custom property impedisce che
       i due valori divergano se un domani si tocca la spaziatura. */
    --org-col-gap: clamp(12px, 1.5vw, 24px);
    gap: var(--org-col-gap);
    margin-bottom: var(--space-4);
}
.ar-demo .org-row--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Secondary: le colonne visibili (altri_ruoli filtrato) occupano tutta
   la larghezza disponibile, qualunque sia il loro numero. */
.ar-demo .org-row--secondary {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-bottom: 0;
}
/* Ruoli speciali: riga aggiuntiva di colonne dinamiche (una per nomina fuori
   dal set fisso), stesso stile delle colonne normate. auto-fit con un min reale
   (200px) cosi' vanno a capo su piu' righe quando sono molte, senza schiacciare
   (la secondaria usa minmax(0,1fr) e NON wrappa di proposito). Il 4+4 resta
   identico; questa riga vive sotto. */
.ar-demo .org-row--special {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
    margin-top: var(--space-4);
    margin-bottom: 0;
}
/* ─── Separatori verticali fra le colonne ────────────────────── */
/* 2026-07-27 (cluster organigramma-colonne-ruolo, punto 2 del batch utente): le
   colonne erano solo affiancate nella griglia e si leggevano come un blocco unico.
   La linea vive NEL GAP, a meta' strada fra due colonne, ed e' in famiglia col
   border-bottom brand 20% dell'header di colonna (:454) — stesso colore, intensita'
   piu' bassa perche' corre per tutta l'altezza. Non e' una barra di accento su un
   lato (bandita dalla regola standing): e' un separatore neutro fra pari.

   La soppressione e' per BREAKPOINT, non un `:not(:first-child)`. Motivo misurato:
   primary e secondary passano a 2 colonne sotto 1025px e a 1 colonna sotto 769px,
   quindi le colonne che aprono riga cambiano a ogni breakpoint e una regola ingenua
   lascerebbe una linea appesa nel vuoto a sinistra di quasi ogni colonna su tablet
   e mobile (misurato).

   La riga --special NON ha separatori di proposito: usa auto-fit e va a capo in base
   alla larghezza disponibile, quindi nessun :nth-child sarebbe esatto. Decisione
   utente 2026-07-27: griglia della riga speciale intatta, meglio nessuna linea che
   una linea sbagliata. */
.ar-demo .org-row--primary .org-column,
.ar-demo .org-row--secondary .org-column {
    position: relative;
}
.ar-demo .org-row--primary .org-column::before,
.ar-demo .org-row--secondary .org-column::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--org-col-gap) / -2);
    width: 1px;
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    pointer-events: none;
}
/* Desktop: primary = 4 colonne fisse -> apre riga la 1a, la 5a, ...; secondary =
   auto-fit minmax(0, 1fr), che NON va a capo -> apre riga solo la prima. */
.ar-demo .org-row--primary .org-column:nth-child(4n + 1)::before,
.ar-demo .org-row--secondary .org-column:first-child::before {
    content: none;
}

/* ---------- organigramma: .org-column e tutta la testata di colonna: __header col border-bottom brand 20  (ruoli-page.css:495-632) ---------- */
/* ─── Columns ────────────────────────────────────────────────── */
.ar-demo .org-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.ar-demo .org-column__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--space-1);
    border-bottom: 2px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    margin-bottom: 2px;
}
.ar-demo .org-column__title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.ar-demo .org-row--primary .org-column__title,
.ar-demo .org-row--secondary .org-column__title,
.ar-demo .org-row--special .org-column__title {
    font-size: 0.95rem;
    color: var(--color-brand);
}
.ar-demo .org-column__count {
    font-weight: 500;
    color: color-mix(in srgb, var(--color-brand) 65%, var(--color-text-secondary));
}
.ar-demo .org-column__warning {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(var(--text-meta-size));
    font-weight: 500;
    /* Contatore "N nomine mancanti" = counter, fuori dalla regola binaria: neutro
       grigio, niente giallo (glossario; il badge nomina mancante resta rosso). */
    color: var(--color-text-secondary);
}
.ar-demo .org-column__warning .p-icon {
    font-size: 14px;
}
.ar-demo .org-column__disabled-note {
    margin: 0;
    font-size: var(--text-meta-size);
    font-weight: 500;
    font-style: italic;
    color: var(--color-text-soft);
}
.ar-demo .org-column__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ar-demo .org-column__empty {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption-size);
    font-style: italic;
    color: var(--color-text-soft);
    padding: var(--space-2);
    border: 1px dashed color-mix(in srgb, var(--color-border-subtle) 40%, transparent);
    border-radius: var(--radius-md);
}
.ar-demo .org-column__empty .p-icon {
    font-size: 18px;
    opacity: 0.5;
}
/* ─── Disabled Column (Altri ruoli) ──────────────────────────── */
.ar-demo .org-column--disabled {
    opacity: 0.55;
}
.ar-demo .org-column--disabled .org-column__title {
    color: var(--color-text-soft);
}
.ar-demo .org-column--disabled .org-card {
    border-style: dashed;
    background: color-mix(in srgb, var(--color-surface-2) 60%, var(--color-surface-1));
}
/* ─── Column Toggle ──────────────────────────────────────────── */
.ar-demo .org-column__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    margin-top: 2px;
    border: none;
    background: transparent;
    font-size: calc(var(--text-meta-size) + 1px);
    font-weight: 500;
    color: var(--color-brand);
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-column__toggle:hover {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
    border-radius: var(--radius-sm);
}
.ar-demo .org-column__toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.ar-demo .org-column__toggle-icon {
    font-size: 18px;
    transition: transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-column__toggle[aria-expanded="true"] .org-column__toggle-icon {
    transform: rotate(180deg);
}

/* ---------- organigramma: .org-card e stati (--collapsed display:none, --root, :hover con inset brand se  (ruoli-page.css:634-796) ---------- */
/* ─── Cards ──────────────────────────────────────────────────── */
.ar-demo .org-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--color-surface-1);
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    /* In hover NON cambiamo border-width né padding: la box rimane
       della stessa size (no shift del badge "Da aggiornare" o degli altri),
       e simuliamo lo spessore brand con box-shadow inset. */
    transition:
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease);
    position: relative;
}
.ar-demo .org-card--collapsed {
    display: none;
}
.ar-demo .org-card--root {
    padding: 14px 16px;
    gap: 6px;
    text-align: center;
    align-items: center;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
    background: color-mix(in srgb, var(--color-brand) 2%, var(--color-surface-1));
}
.ar-demo .org-card--root .org-card__icon {
    font-size: 28px;
    color: var(--color-brand);
    margin-bottom: 2px;
}
.ar-demo .org-card--root .org-card__name {
    font-size: 1rem;
}
/* Card states */
.ar-demo .org-card:hover {
    border-color: var(--color-brand);
    /* inset 0 0 0 1px brand = secondo bordo "interno" da 1px che, sommato
       al border 1px esistente, dà lo stesso spessore percepito di un
       border 2px — senza modificare il box model (no layout shift). */
    box-shadow:
        inset 0 0 0 1px var(--color-brand),
        0 6px 16px color-mix(in srgb, var(--color-brand) 12%, transparent);
    transform: translateY(-2px);
}
.ar-demo .org-card:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.ar-demo .org-card[aria-selected="true"] {
    border: 2px solid var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
    background: color-mix(in srgb, var(--color-brand) 3%, var(--color-surface-1));
}
.ar-demo .org-card--vacant {
    border-style: dashed;
    opacity: 0.72;
}
.ar-demo .org-card--vacant:hover {
    opacity: 1;
}
/* Nomina-based accent removed per design direction */
/* Card filtered out */
.ar-demo .org-card[data-org-filtered="out"] {
    opacity: 0.15;
    pointer-events: none;
}
/* Card contents */
.ar-demo .org-card__name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .org-card__vacant {
    font-style: italic;
    font-weight: 500;
    color: var(--color-text-soft);
}
/* 2026-07-27: via `text-transform: uppercase` + `letter-spacing: 0.03em` (regola
   standing "niente etichette maiuscole"). Ora che la label sopravvive solo nelle
   colonne a ruoli misti — dove porta informazione vera, non e' piu' un'eco del
   titolo — il maiuscolo pesava come un'etichetta di sistema. Le sigle vere (RSPP,
   ASPP, RLS) restano maiuscole da sole: arrivano cosi' dalla sorgente. */
.ar-demo .org-card__role {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--color-text-soft);
    opacity: 0.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* La label ruolo RIDONDANTE (un solo ruolo canonico nella colonna E titolo che la
   ripete — il criterio sta in app/views/ruoli/index.php, closure
   $columnRoleLabelIsRedundant) esce dalla VISTA ma non dal DOM.
   NON sostituire con `display: none`: `applyFilter` (ruoli-page.js:635) filtra le
   card su card.textContent e il campo promette "Cerca persona, ruolo o area" —
   togliere la label dal markup romperebbe la ricerca per ruolo. Col pattern sr-only
   textContent resta intatto, la ricerca funziona senza toccare una riga di JS, e la
   label resta disponibile allo screen reader.
   Vale anche in stampa: gli override di .org-card__role in @media print toccano solo
   font-size/opacity/letter-spacing, non position/clip -> nel PDF resta nascosta. */
.ar-demo .org-card__role--redundant {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ar-demo .org-card__icon {
    line-height: 1;
}
/* Allineato ai titoli di colonna (Medico competente, RSPP, ecc.):
   stesso font-size, color brand, niente uppercase. */
.ar-demo .org-card__role-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-brand);
    line-height: 1.2;
}

/* ---------- organigramma: .org-nomina-badge + __icon + i tre toni canonici del glossario (--ok, --critic  (ruoli-page.css:798-833) ---------- */
/* ─── Nomina Badge ───────────────────────────────────────────── */
.ar-demo .org-nomina-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.ar-demo .org-nomina-badge__icon {
    font-size: 13px;
}
/* Tone canonici dal glossario SSOT (StatusGlossary), allineati a .org-training-badge:
   solo verde (ok), rosso (critical) e neutro grigio. Niente giallo/warning:
   "Nomina mancante" = rosso, "Nomina non verificata" = neutro, "Nomina presente"
   = verde. La classe e' il tone, non piu lo stato grezzo. */
.ar-demo .org-nomina-badge--ok {
    color: var(--color-ok-fg);
    background: color-mix(in srgb, var(--color-ok-fg) 10%, transparent);
}
.ar-demo .org-nomina-badge--critical {
    color: var(--color-critical-fg);
    background: color-mix(in srgb, var(--color-critical-fg) 10%, transparent);
}
.ar-demo .org-nomina-badge--neutral {
    color: var(--color-text-soft);
    background: color-mix(in srgb, var(--color-text-secondary) 6%, transparent);
}

/* ---------- organigramma: .org-toolbar (border-top) e .org-toolbar__btn con hover/focus e dimensione ico  (ruoli-page.css:835-873) ---------- */
/* ─── Toolbar ────────────────────────────────────────────────── */
.ar-demo .org-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-1);
    border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 30%, transparent);
}
.ar-demo .org-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 45%, transparent);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--text-meta-size);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.ar-demo .org-toolbar__btn:hover {
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-1));
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 35%, transparent);
}
.ar-demo .org-toolbar__btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.ar-demo .org-toolbar__btn .p-icon {
    font-size: 16px;
}

/* ---------- organigramma: .org-training-badge + __icon + toni --ok/--critical/--neutral (pill, 0.7rem).  (ruoli-page.css:875-910) ---------- */
/* ─── Training Badge ─────────────────────────────────────────── */
.ar-demo .org-training-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.ar-demo .org-training-badge__icon {
    font-size: 13px;
}
/* Tone canonici dal glossario SSOT (StatusGlossary): solo verde (ok), rosso
   (critical) e neutro grigio. Niente giallo/warning: "in scadenza" e "scaduto"
   sono rosso, "iscritto" e stato sconosciuto sono neutri. La classe e' il tone,
   non piu lo stato grezzo. */
.ar-demo .org-training-badge--ok {
    color: var(--color-ok-fg);
    background: color-mix(in srgb, var(--color-ok-fg) 10%, transparent);
}
.ar-demo .org-training-badge--critical {
    color: var(--color-critical-fg);
    background: color-mix(in srgb, var(--color-critical-fg) 10%, transparent);
}
.ar-demo .org-training-badge--neutral {
    color: var(--color-text-soft);
    background: color-mix(in srgb, var(--color-surface-2) 50%, transparent);
}

/* ---------- organigramma: .org-card__badges — riga flex wrap che tiene affiancati badge nomina e badge f  (ruoli-page.css:945-952) ---------- */
/* ─── Card Badges Container ─────────────────────────────────── */
.ar-demo .org-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ---------- token del rail + canvas 1440  (companion-rail.css:8-24) ---------- */
.ar-demo {
    --companion-rail-width: 300px;
    --companion-rail-gap: var(--space-5);
    --desktop-canvas-max-with-rail: 1440px;
}
/* Canvas width costante a >=1440px su TUTTE le pagine, anche quelle senza
   companion rail (es. impostazioni, dove la route ha `disableCompanionRail`).
   Senza questa uniformità la sidebar si sposta orizzontalmente cambiando
   pagina (1200px senza rail vs 1440px con rail → shift di ~120px verso il
   centro). Le pagine senza rail mostrano semplicemente più aria a destra
   del contenuto, ma il posto della sidebar resta lo stesso. */
/* sempre vera sul canvas 1440px: @media (min-width: 1440px) */
.ar-demo .app-shell {
        max-width: var(--desktop-canvas-max-with-rail);
    }

/* ---------- companion rail (contenitore + body)  (companion-rail.css:65-163) ---------- */
.ar-demo .companion-rail {
    position: sticky;
    top: calc(var(--app-chrome-padding-top) + 56px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    max-height: calc(100vh - var(--app-chrome-padding-top) - 80px);
    /* visible: lascia respirare le ombre delle card oltre la colonna rail
       (lo scroll verticale è gestito da .companion-rail__body). */
    overflow: visible;
}
.ar-demo .companion-rail::before,
.ar-demo .companion-rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: none;
    z-index: 3;
}
.ar-demo .companion-rail::before {
    top: 30px;
    background: linear-gradient(to bottom, var(--color-canvas), transparent);
}
.ar-demo .companion-rail::after {
    bottom: 0;
    background: linear-gradient(to top, var(--color-canvas), transparent);
}
.ar-demo .companion-rail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-1);
}
.ar-demo .companion-rail__title-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}
.ar-demo .companion-rail__title {
    margin: 0;
    font-size: var(--text-caption-size);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .companion-rail__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
    letter-spacing: 0;
}
/* toggle removed — rail is always visible */
.ar-demo .companion-rail__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Lo scroll verticale clippa anche in orizzontale: margine negativo +
       padding equivalente danno spazio alle ombre senza restringere le card. */
    padding: var(--space-4) var(--space-5) calc(var(--space-5) + var(--space-2)) var(--space-5);
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ar-demo .companion-rail__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ---------- sedi-rail + rail-compliance  (companion-rail.css:1441-1587) ---------- */
.ar-demo .companion-rail .sedi-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}
.ar-demo .companion-rail .sedi-rail__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-1, 4px);
}
.ar-demo .companion-rail .sedi-rail__title {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-primary);
}
.ar-demo .companion-rail .sedi-rail__meta {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.ar-demo .companion-rail .sedi-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
.ar-demo .companion-rail .sedi-rail__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-md, 14px);
    border: var(--border-width-thin, 1px) solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}
/* Sede principale: stesso linguaggio "gradient hero + bordo brand" della card. */
.ar-demo .companion-rail .sedi-rail__card--main {
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border-subtle));
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--color-brand) 12%, var(--color-surface-2)) 0%,
        var(--color-surface-2) 60%
    );
}
.ar-demo a.sedi-rail__card:hover {
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-2));
    border-color: color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
}
.ar-demo .companion-rail .sedi-rail__card-top {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}
.ar-demo .companion-rail .sedi-rail__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .companion-rail .sedi-rail__tag {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--color-text-secondary);
}
.ar-demo .companion-rail .sedi-rail__chevron {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--color-text-secondary);
    transition: transform 120ms ease, color 120ms ease;
}
.ar-demo a.sedi-rail__card:hover .sedi-rail__chevron {
    color: var(--color-brand);
    transform: translateX(2px);
}
.ar-demo .companion-rail .sedi-rail__metric {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}
.ar-demo .companion-rail .sedi-rail__pct {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}
.ar-demo .companion-rail .sedi-rail__card--main .sedi-rail__pct {
    font-size: 24px;
}
.ar-demo .companion-rail .sedi-rail__track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    overflow: hidden;
}
.ar-demo .companion-rail .sedi-rail__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-brand) 75%, transparent),
        var(--color-brand)
    );
}
.ar-demo .companion-rail .sedi-rail__detail {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .companion-rail .sedi-rail__card,
.ar-demo .companion-rail .sedi-rail__chevron {
        transition: none;
      }
}
/* Responsive (scelta utente 2026-06-19): la consolidata vive nel rail >=1200px;
   sotto i 1200px il rail inline non esiste, quindi la card "Sedi" resta nella
   colonna principale (partial consolidated.php). Qui la nascondo dal main solo
   >=1200px, dove e' gia' nel rail: nessuna duplicazione a video, nessuna perdita
   dato su tablet/mobile. Il breakpoint combacia con quello del rail (1199/1200). */
/* sempre vera sul canvas 1440px: @media (min-width: 1200px) */
.ar-demo .d-dashboard__zone--consolidated {
        display: none;
    }
/* ============================================================================ */
/* Box "Formazione in regola — questa sede" (#1+#3+#7, 2026-06-22).              */
/* Riusa il linguaggio visivo di .sedi-rail (pct grande arancione + barra,      */
/* token brand, niente semaforo). Wrapper .rail-compliance: solo la card mini   */
/* attorno alla metrica (le classi .sedi-rail__* fanno il resto).               */
/* ============================================================================ */
.ar-demo .companion-rail .rail-compliance {
    margin-bottom: var(--space-3, 12px);
}

/* ---------- la vista consolidata si spegne sopra i 1200: a 1440 il confronto sedi vive nel rail  (companion-rail.css:1568-1577) ---------- */
/* Responsive (scelta utente 2026-06-19): la consolidata vive nel rail >=1200px;
   sotto i 1200px il rail inline non esiste, quindi la card "Sedi" resta nella
   colonna principale (partial consolidated.php). Qui la nascondo dal main solo
   >=1200px, dove e' gia' nel rail: nessuna duplicazione a video, nessuna perdita
   dato su tablet/mobile. Il breakpoint combacia con quello del rail (1199/1200). */
/* sempre vera sul canvas 1440px: @media (min-width: 1200px) */
.ar-demo .d-dashboard__zone--consolidated {
        display: none;
    }

/* ---------- iscrizioni-attive: Blocco 'Iscrizioni attive — two-column layout': .c-enrollment-columns (+ --err  (formazione-page.css:1697-1973) ---------- */
/* ═══════════════════════════════════════════════════════════════════════
   Iscrizioni attive — two-column layout (Presenza/FAD · E-learning)
   ═══════════════════════════════════════════════════════════════════════ */
/* Card "neutra": niente background/border per non sembrare un blocco
   autonomo intitolato dall'accordion "In scadenza" sopra. Lo stacco dalla
   sezione precedente si crea con un padding-top maggiore. */
.ar-demo .c-enrollment-columns {
    padding: var(--space-6) 0 0;
    margin-bottom: var(--space-2);
}
/* Stati error/empty: ripristinano il "card box" perché il messaggio
   standalone ha bisogno di contenitore visibile (la versione "ha contenuti"
   è invece neutra per evitare confusione col titolo "In scadenza" sopra). */
.ar-demo .c-enrollment-columns--error,
.ar-demo .c-enrollment-columns--empty {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.ar-demo .c-enrollment-columns--error {
    color: var(--color-text-secondary);
}
.ar-demo .c-enrollment-columns--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.ar-demo .c-enrollment-columns__empty {
    max-width: 36rem;
    text-align: center;
}
.ar-demo .c-enrollment-columns__empty-title {
    margin: 0;
    font-size: var(--text-section-size, 1rem);
    /* Inter 500: gerarchia via size, mai peso (regola ferrea calendario) */
    font-weight: 500;
    color: var(--color-text-primary);
}
.ar-demo .c-enrollment-columns__empty-desc {
    margin: var(--space-2) 0 0;
    font-size: var(--text-caption-size, 0.8125rem);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
/* Mobile tab switcher — hidden on desktop, both columns shown side by side. */
.ar-demo .c-enrollment-columns__tabs {
    display: none;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}
.ar-demo .c-enrollment-columns__tab {
    flex: 1 1 0;
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    font-size: 0.8125rem;
    /* Inter 500: gerarchia via size, mai peso (regola ferrea calendario) */
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.ar-demo .c-enrollment-columns__tab[aria-selected="true"] {
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.04));
}
.ar-demo .c-enrollment-columns__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}
.ar-demo .c-enrollment-columns--single .c-enrollment-columns__grid {
    grid-template-columns: 1fr;
}
/* ── Column ─────────────────────────────────────────────────────────────── */
.ar-demo .c-enrollment-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.ar-demo .c-enrollment-col + .c-enrollment-col {
    border-left: 1px solid var(--color-border-subtle);
    padding-left: var(--space-4);
}
.ar-demo .c-enrollment-col__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
/* Header colonna — tono ARANCIONE/neutro (REGOLA STANDING: zero verde nel ramo
   calendario, ORA unico consumer di questa famiglia di classi). Il verde
   --color-ok-* e' sostituito alla SORGENTE con il brand: icona e titolo neutri,
   chip e count in tono brand tenue. Peso Inter 500 (gerarchia via size/colore/
   spacing, mai peso). */
.ar-demo .c-enrollment-col__icon {
    font-size: 20px;
    color: color-mix(in srgb, var(--color-brand) 72%, var(--color-text-secondary));
}
.ar-demo .c-enrollment-col__title {
    font-size: var(--text-section-size, 1rem);
    font-weight: 500;
    margin: 0;
    color: var(--color-text-primary);
    min-width: 0;
}
/* Chip "tipo iscrizione" (In presenza / FAD · E-learning): tono brand tenue.
   Spinge il count all'estremo destro con margin-left: auto. */
.ar-demo .c-enrollment-col__type {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: color-mix(in srgb, var(--color-brand) 82%, var(--color-text-primary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.ar-demo .c-enrollment-col__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 0.6875rem;
    font-weight: 500;
    margin-left: auto;
}
/* ── Search ─────────────────────────────────────────────────────────────── */
.ar-demo .c-enrollment-col__search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    transition: border-color 120ms ease, background 120ms ease;
}
.ar-demo .c-enrollment-col__search:focus-within {
    border-color: var(--color-brand);
    background: var(--color-surface-1);
}
.ar-demo .c-enrollment-col__search .p-icon {
    font-size: 18px;
    color: var(--color-text-secondary);
}
.ar-demo .c-enrollment-col__search-input {
    flex: 1 1 0;
    min-width: 0;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}
.ar-demo .c-enrollment-col__search-input:focus {
    outline: none;
}
/* ── Course list + "vedi altri" ─────────────────────────────────────────── */
.ar-demo .c-enrollment-col__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .c-enrollment-col__extra {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: calc(-1 * var(--space-2));
    transition: grid-template-rows 420ms cubic-bezier(0.76, 0, 0.24, 1),
        margin-top 420ms cubic-bezier(0.76, 0, 0.24, 1);
}
.ar-demo .c-enrollment-col__extra-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .c-enrollment-col.is-expanded .c-enrollment-col__extra,
.ar-demo .c-enrollment-col.is-searching .c-enrollment-col__extra {
    grid-template-rows: 1fr;
    margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .c-enrollment-col__extra {
        transition: none;
      }
}
/* "Vedi altri N corsi" — tono ARANCIONE tenue (era verde --color-ok-*, R2) e
   peso Inter 500 (era 700). Neutralizzato alla sorgente: meno override-stacking. */
.ar-demo .c-enrollment-col__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-brand) 26%, var(--color-border-subtle));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    color: color-mix(in srgb, var(--color-brand) 82%, var(--color-text-primary));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.ar-demo .c-enrollment-col__more:hover {
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
}
.ar-demo .c-enrollment-col__more-icon {
    font-size: 18px;
}
.ar-demo .c-enrollment-col__empty {
    margin: 0;
    padding: var(--space-3);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ---------- card corso con iscritti (base)  (formazione-page.css:1977-2064) ---------- */
.ar-demo .c-enrollment-course {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ar-demo .c-enrollment-course.is-hidden {
    display: none;
}
.ar-demo .c-enrollment-course__heading {
    margin: 0;
    font: inherit;
}
.ar-demo .c-enrollment-course__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    appearance: none;
    border: 0;
    background: var(--color-surface-2);
    padding: 10px var(--space-3);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 120ms ease;
}
.ar-demo .c-enrollment-course__head:hover {
    background: color-mix(in srgb, var(--color-text-primary) 4%, var(--color-surface-2));
}
.ar-demo .c-enrollment-course__chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-secondary);
    transition: transform 200ms cubic-bezier(0.76, 0, 0.24, 1);
}
.ar-demo .c-enrollment-course.is-open .c-enrollment-course__chevron {
    transform: rotate(90deg);
}
.ar-demo .c-enrollment-course__info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* NB: .c-enrollment-course__name e' usata solo dal branch formazione del partial
   (codice morto a runtime: il calendario usa .cal-course__name). Porto comunque
   il peso a Inter 500 per azzerare il debito (angolo sorgente-pulita). */
.ar-demo .c-enrollment-course__name {
    font-size: var(--text-body-size, 0.875rem);
    font-weight: 500;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.ar-demo .c-enrollment-course__meta {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Count "N iscritti" della card — tono brand tenue (era verde --color-ok-*, R2)
   e Inter 500 (era 700). Condiviso col ramo calendario (.cal-course__count). */
.ar-demo .c-enrollment-course__count {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: color-mix(in srgb, var(--color-brand) 82%, var(--color-text-primary));
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- iscrizioni attive: pannello iscritti, caricamento, spinner  (formazione-page.css:2065-2115) ---------- */
.ar-demo .c-enrollment-course__panel {
    border-top: 1px solid var(--color-border-subtle);
}
/* Lazy loading state */
.ar-demo .c-enrollment-course__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.ar-demo .c-enrollment-course__loading[hidden] {
    display: none;
}
.ar-demo .c-enrollment-course__spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-brand);
    animation: ard-c-enrollment-spin 620ms linear infinite;
}
@keyframes ard-c-enrollment-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .c-enrollment-course__spinner {
        animation-duration: 1600ms;
      }
}
.ar-demo .c-enrollment-course__no-match {
    margin: 0;
    padding: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* ── Worker row ─────────────────────────────────────────────────────────── */
.ar-demo .c-enrollment-course__workers {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- wizard: layout, card, head, stepper  (iscrizioni-page.css:1-402) ---------- */
/* ============================================================
   Iscrizioni Wizard — full-screen enrollment flow
   ============================================================ */
/* -------------------------------------------------------
   Wizard layout: single card + vertical stepper on the right
   ------------------------------------------------------- */
.ar-demo .c-iscrizioni {
    display: block;
    width: 100%;
    /* No background: page canvas already has one. The card itself is the visual container. */
}
/* Reset peso: nel wizard (e nei suoi modali) gli <strong>/<b> restano Inter 500,
   mai il bold di default dello user-agent. Regola standing "Inter solo 500". */
.ar-demo .c-iscrizioni strong,
.ar-demo .c-iscrizioni b,
.ar-demo .c-pf-confirm strong,
.ar-demo .c-pf-confirm b {
    font-weight: 500;
}
.ar-demo .c-iscrizioni__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-6);
    align-items: start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5) 0;
}
/* Con la rail "to-do" (componente wizard-todo): card e stepper restano com'erano,
   la rail (260px) si aggiunge a destra. Da >=1500px la pagina allarga il frame app
   (pattern companion-rail) per non stringere la zona di compilazione; sotto, la
   rail si nasconde (vedi wizard-todo.css) e resta il layout originale a 2 colonne. */
/* risolta a 1440px e scartata: @media (min-width: 1500px) */
/* Single visual container for the whole wizard (header fused in card). */
.ar-demo .c-iscrizioni__card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 0 1px 2px rgba(43, 23, 17, 0.04);
    overflow: hidden;
    min-width: 0;
    /* Card ad altezza viewport: body con scroll interno + barra azioni ancorata
       in fondo, cosi Indietro/Avanti restano sempre nello stesso punto a schermo
       (coerente con nuovo-lavoratore). */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}
/* Card header (fused, no separate background) */
.ar-demo .c-iscrizioni__card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    border-radius: 0.5rem;
    transition: background 0.14s ease, color 0.14s ease;
    flex-shrink: 0;
}
.ar-demo .c-iscrizioni__back:hover {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}
.ar-demo .c-iscrizioni__back .p-icon {
    font-size: 1.1rem;
}
.ar-demo .c-iscrizioni__breadcrumb {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    min-width: 0;
}
.ar-demo .c-iscrizioni__breadcrumb-sep {
    color: var(--color-text-soft);
    opacity: 0.5;
}
.ar-demo .c-iscrizioni__breadcrumb-current {
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .c-iscrizioni__step-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni__step-indicator-sep {
    opacity: 0.4;
}
.ar-demo [data-iscrizioni-step-current] {
    color: var(--color-brand);
}
/* Chip sede destinataria dell'iscrizione: stesso pattern del wizard nuovo-lavoratore.
   Posizionato tra breadcrumb e step-indicator nella header del wizard. */
.ar-demo .c-iscrizioni__sede-badge {
    margin-left: auto;
    margin-right: var(--space-2);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-demo .c-iscrizioni__sede-badge .p-badge__icon {
    flex-shrink: 0;
}
/* risolta a 1440px e scartata: @media (max-width: 720px) */
/* Body keeps comfortable reading width inside the card */
.ar-demo .c-iscrizioni__body {
    padding: var(--space-7) var(--space-6) 0;
    min-width: 0;
    /* Scroll-container interno: il contenuto scorre qui, header e barra azioni fissi. */
    flex: 1 1 auto;
    overflow-y: auto;
}
/* -------------------------------------------------------
   Vertical stepper (right side)
   ------------------------------------------------------- */
.ar-demo .c-iscrizioni__stepper {
    position: sticky;
    top: calc(var(--app-chrome-padding-top, 0px) + var(--space-5));
    align-self: start;
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 0 1px 2px rgba(43, 23, 17, 0.04);
}
.ar-demo .c-iscrizioni__stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: stepper;
}
.ar-demo .c-iscrizioni__stepper-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-2) 0;
    transition: opacity 0.2s ease;
}
/* Vertical connector between markers */
.ar-demo .c-iscrizioni__stepper-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 36px;
    width: 2px;
    bottom: -8px;
    background: var(--color-border-subtle);
    transition: background 0.25s ease;
    border-radius: 1px;
}
.ar-demo .c-iscrizioni__stepper-item.is-done:not(:last-child)::before {
    background: var(--color-ok-fg, var(--color-brand));
}
.ar-demo .c-iscrizioni__stepper-marker {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1.5px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}
.ar-demo .c-iscrizioni__stepper-num,
.ar-demo .c-iscrizioni__stepper-check {
    position: absolute;
    inset: 0;
    /* margin:auto centra l'icona SVG (dimensione fissa) nel box inset:0:
       il vecchio span-glyph veniva centrato dal flex, l'<svg> no. */
    margin: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ar-demo .c-iscrizioni__stepper-check {
    font-size: 18px !important;
    opacity: 0;
    transform: scale(0.6);
}
.ar-demo .c-iscrizioni__stepper-item.is-current .c-iscrizioni__stepper-marker {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
    transform: scale(1.05);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 12%, transparent);
}
.ar-demo .c-iscrizioni__stepper-item.is-done .c-iscrizioni__stepper-marker {
    background: var(--color-ok-fg, var(--color-brand));
    border-color: var(--color-ok-fg, var(--color-brand));
    color: var(--color-on-brand);
}
/* Dark mode: gli step completati usano la coppia di colori del badge "ok"
   (sfondo verde translucido + verde menta), invece del verde pieno. */
.ar-demo html[data-theme-mood="dark"] .c-iscrizioni__stepper-item.is-done .c-iscrizioni__stepper-marker {
    background: var(--color-ok-bg);
    border-color: var(--color-ok-fg);
    color: var(--color-ok-fg);
}
.ar-demo .c-iscrizioni__stepper-item.is-done .c-iscrizioni__stepper-num {
    opacity: 0;
    transform: scale(0.6);
}
.ar-demo .c-iscrizioni__stepper-item.is-done .c-iscrizioni__stepper-check {
    opacity: 1;
    transform: scale(1);
}
.ar-demo .c-iscrizioni__stepper-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    min-width: 0;
}
.ar-demo .c-iscrizioni__stepper-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}
.ar-demo .c-iscrizioni__stepper-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    opacity: 0.7;
}
.ar-demo .c-iscrizioni__stepper-item.is-current .c-iscrizioni__stepper-label {
    color: var(--color-text-primary);
}
.ar-demo .c-iscrizioni__stepper-item.is-done .c-iscrizioni__stepper-label {
    color: var(--color-text-primary);
}
.ar-demo .c-iscrizioni__stepper-item.is-upcoming {
    opacity: 0.6;
}
/* Collapse to single column < 1024px: stepper becomes horizontal at top */
/* risolta a 1440px e scartata: @media (max-width: 1023px) */
/* risolta a 1440px e scartata: @media (max-width: 600px) */

/* ---------- wizard: step, kicker, titolo  (iscrizioni-page.css:404-460) ---------- */
.ar-demo .c-iscrizioni-step {
    display: none;
    animation: ard-step-in 0.22s ease forwards;
}
.ar-demo .c-iscrizioni-step.is-active {
    display: block;
}
.ar-demo .c-iscrizioni-step.is-exiting {
    animation: ard-step-out 0.16s ease forwards;
}
@keyframes ard-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ard-step-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
/* -------------------------------------------------------
   Step headings
   ------------------------------------------------------- */
.ar-demo .c-iscrizioni__step-kicker {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand);
    margin: 0 0 var(--space-2);
}
.ar-demo .c-iscrizioni__step-title {
    font-size: var(--text-section-size);
    line-height: var(--text-section-line-height);
    margin: 0 0 var(--space-2);
    color: var(--color-text-strong);
}
/* Sub-stepper "Scegli edizione" (D5-b/E11): pill sotto al titolo con la
   posizione nell'elenco ("Corso X di Y" / "Lavoratore X di Y"). */
.ar-demo .c-iscrizioni__substep-indicator {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--space-3);
    padding: 2px var(--space-3);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
}

/* ---------- wizard: descrizione dello step  (iscrizioni-page.css:629-635) ---------- */
.ar-demo .c-iscrizioni__step-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    line-height: 1.5;
}

/* ---------- wizard step 1: card lavoratore  (iscrizioni-page.css:640-748) ---------- */
.ar-demo .c-iscrizioni-workers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.ar-demo .c-iscrizioni-worker-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
}
.ar-demo .c-iscrizioni-worker-card.is-selected {
    border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border-subtle));
}
.ar-demo .c-iscrizioni-worker-card.is-excluded {
    opacity: 0.5;
}
.ar-demo .c-iscrizioni-worker-card__toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ar-demo .c-iscrizioni-worker-card__toggle .p-icon { font-size: 18px; }
.ar-demo .c-iscrizioni-worker-card.is-selected .c-iscrizioni-worker-card__toggle {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
}
/* ──────────────────────────────────────────────────────────────────────────
   Step 1 — Multiselezione lavoratori: upgrade visual + raggruppamento
   (con edizioni in alto, senza sotto con label). Scoped a .c-iscrizioni-workers
   per non toccare le varianti --pf / --selectable.
   ────────────────────────────────────────────────────────────────────────── */
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card {
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    flex-wrap: wrap;
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card:hover:not(.is-excluded) {
    border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border-subtle));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card.is-selected {
    border-color: var(--color-brand);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-brand) 6%, transparent) 0%, transparent 60%),
        var(--color-surface-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 14%, transparent);
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface-2));
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card__name { font-weight: 500; }
/* Card SENZA edizione (gruppo "Senza edizioni — da richiedere"): trattamento NEUTRO
   grigio ANCHE da selezionata (bordo/sfondo, avatar, selettore), per distinguerla
   nettamente dalle card con-edizione (arancioni). Non e' un'iscrizione confermabile:
   e' un corso "da richiedere". L'unico accento brand resta il bottone azione sotto. */
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card--no-edition,
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card--no-edition.is-selected {
    border-color: var(--color-border-subtle);
    background: var(--color-surface-1);
    box-shadow: none;
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card--no-edition:hover:not(.is-excluded) {
    border-color: var(--color-border-subtle);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card--no-edition .c-iscrizioni-worker-card__avatar {
    background: color-mix(in srgb, var(--color-text-secondary) 12%, var(--color-surface-2));
    color: var(--color-text-secondary);
}
.ar-demo .c-iscrizioni-workers .c-iscrizioni-worker-card--no-edition.is-selected .c-iscrizioni-worker-card__toggle {
    background: var(--color-surface-2);
    border-color: var(--color-border-subtle);
    color: var(--color-text-soft);
}

/* ---------- wizard step 1: etichette gruppo, empty, coperture  (iscrizioni-page.css:836-960) ---------- */
.ar-demo .c-iscrizioni-workers__group-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ar-demo .c-iscrizioni-workers__group-label .p-icon { font-size: 16px; opacity: 0.8; }
/* Variante con CTA unica del gruppo: label-testo a sinistra, bottone "Richiedi
   attivazione corsi" a destra (la selezione dei senza-edizione non esiste piu':
   l'azione e' una sola, di gruppo). */
.ar-demo .c-iscrizioni-workers__group-label--no-editions {
    justify-content: space-between;
    flex-wrap: wrap;
}
.ar-demo .c-iscrizioni-workers__group-label-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
/* CTA unica "Richiedi attivazione corsi": outline brand pulito (border 1px brand,
   fill brand tenue, color brand), radius pill, Inter 500, niente uppercase. */
.ar-demo .c-iscrizioni-workers__request-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px 5px 10px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid color-mix(in srgb, var(--color-brand) 55%, transparent);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    color: var(--color-brand);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}
.ar-demo .c-iscrizioni-workers__request-all:hover {
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 70%, transparent);
}
.ar-demo .c-iscrizioni-workers__request-all .p-icon { font-size: 16px; opacity: 1; }
/* Lavoratori esclusi nello step 1: nascosti negli step successivi */
.ar-demo [data-worker-date-section][hidden],
.ar-demo [data-worker-accordion][hidden],
.ar-demo [data-final-summary-row][hidden] { display: none !important; }
/* Bottoni nascosti nella cta-row (pre/post invio) */
.ar-demo .c-iscrizioni__cta-row [hidden] { display: none; }
/* Blocco launch nascosto (display:flex altrimenti vince su [hidden]) */
.ar-demo .c-pf-launch[hidden] { display: none; }
/* Empty state compatto — "Nessuna edizione disponibile" nello step date */
.ar-demo .c-iscrizioni-empty.c-iscrizioni-empty--compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    min-height: 0;
}
.ar-demo .c-iscrizioni-empty--compact .c-iscrizioni-empty__icon {
    font-size: 1.25rem;
    margin: 0;
    flex: 0 0 auto;
    color: var(--color-text-soft);
}
.ar-demo .c-iscrizioni-empty--compact .c-iscrizioni-empty__text {
    flex: 1 1 auto;
    min-width: 0;
}
.ar-demo .c-iscrizioni-empty--compact .c-iscrizioni-empty__title {
    font-size: 0.85rem;
    margin: 0;
}
.ar-demo .c-iscrizioni-empty--compact .c-iscrizioni-empty__desc {
    font-size: 0.76rem;
    margin: 1px 0 0;
}
.ar-demo .c-iscrizioni-empty__link {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-brand);
    text-decoration: none;
    white-space: nowrap;
}
.ar-demo .c-iscrizioni-empty__link:hover { text-decoration: underline; }
/* Bottone "Richiedi attivazione" nell'empty state compatto dello step Date:
   resta sulla riga (flex row icona|testo|azioni) senza stirarsi. */
.ar-demo .c-iscrizioni .c-iscrizioni-empty__request {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-block: var(--space-1);
    font-size: 0.8rem;
}
/* Badge di copertura nella revisione (step 3) */
.ar-demo .c-worker-accordion__summary-coverage {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: var(--space-2);
}
.ar-demo .c-worker-accordion__summary-coverage:empty { display: none; }
.ar-demo .c-iscrizioni-worker-card.is-newly-added {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
    animation: ard-card-highlight 0.6s ease forwards;
}

/* ---------- wizard-step2: Date picker (Step 2): .c-iscrizioni-date-section + :last-child, __header, __wo  (iscrizioni-page.css:1058-1111) ---------- */
/* -------------------------------------------------------
   Date picker (Step 2)
   ------------------------------------------------------- */
.ar-demo .c-iscrizioni-date-section {
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni-date-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.ar-demo .c-iscrizioni-date-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ar-demo .c-iscrizioni-date-section__worker {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}
/* Proposta C (2026-06-27): il chip-corso dello Step 2 diventa TESTO IN RIGA
   (niente background/border-radius/padding) come .c-instance-card__lesson. */
.ar-demo .c-iscrizioni-date-section__course-chip {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 500;
    /* Testo lungo del corso: va a capo invece di sforare (era white-space:nowrap). */
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}
.ar-demo .c-iscrizioni-date-section__course-chip .p-icon {
    font-size: 0.85rem;
    flex-shrink: 0; /* icona school non si schiaccia quando il titolo va a capo */
}
.ar-demo .c-iscrizioni-date-section__course-chip--hint {
    color: var(--color-info-fg);
}

/* ---------- wizard: sezione data per lavoratore  (iscrizioni-page.css:1062-1170) ---------- */
.ar-demo .c-iscrizioni-date-section {
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni-date-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.ar-demo .c-iscrizioni-date-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ar-demo .c-iscrizioni-date-section__worker {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}
/* Proposta C (2026-06-27): il chip-corso dello Step 2 diventa TESTO IN RIGA
   (niente background/border-radius/padding) come .c-instance-card__lesson. */
.ar-demo .c-iscrizioni-date-section__course-chip {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 500;
    /* Testo lungo del corso: va a capo invece di sforare (era white-space:nowrap). */
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}
.ar-demo .c-iscrizioni-date-section__course-chip .p-icon {
    font-size: 0.85rem;
    flex-shrink: 0; /* icona school non si schiaccia quando il titolo va a capo */
}
.ar-demo .c-iscrizioni-date-section__course-chip--hint {
    color: var(--color-info-fg);
}
/* Riga "corso · Nessuna edizione" del wizard singolo (header sezione): contenitore
   compatto con separatore e stato SOFT inline, coerente con la card multi (Prop C). */
.ar-demo .c-iscrizioni-date-section__meta-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px var(--space-1);
    min-width: 0;
}
.ar-demo .c-iscrizioni-date-section__meta-sep {
    color: var(--color-border-subtle);
    font-size: 0.6875rem;
    line-height: 1;
}
.ar-demo .c-iscrizioni-date-section__edition-state {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.ar-demo .c-iscrizioni-date-section__edition-state .p-icon {
    font-size: 0.85rem;
    opacity: 0.75;
}
/* Il CORSO REALE delle edizioni offerte (2026-07-16). Il chip sopra porta il titolo del
   fabbisogno (la BASE); questa riga dice a quale corso ci si iscrive davvero — tipicamente
   il rinnovo, che ha un nome diverso. Informativa, non un avviso: tono secondario, nessun
   fondo colorato e nessuna barra di accento laterale (regola standing). */
.ar-demo .c-iscrizioni-date-section__real-course {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    /* Sta FUORI dall'header (flex-row senza wrap: dentro si affiancherebbe al chip). Il
       margin-top negativo annulla il margin-bottom dell'header e tiene la riga attaccata al
       titolo che qualifica; sotto resta il respiro verso le card edizione. */
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Il nome del corso e' il dato che l'utente sta verificando: colore pieno, stesso peso
   (Inter 500 ovunque: la gerarchia passa da colore, non dal weight). */
.ar-demo .c-iscrizioni-date-section__real-course strong {
    color: var(--color-text);
    font-weight: 500;
}
.ar-demo .c-session-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---------- wizard: card edizione  (iscrizioni-page.css:1302-1499) ---------- */
.ar-demo .c-instance-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .c-instance-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 2px solid var(--color-border-subtle);
    border-radius: 0.75rem;
    background: var(--color-surface-1);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ar-demo .c-instance-card:hover {
    border-color: var(--color-brand);
    background: var(--color-nav-item-active-bg);
}
.ar-demo .c-instance-card.is-selected {
    border-color: var(--color-brand);
    background: var(--color-nav-item-active-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}
.ar-demo .c-instance-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.ar-demo .c-instance-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    border: 1px solid var(--color-border-subtle);
}
.ar-demo .c-instance-card.is-selected .c-instance-card__icon {
    background: var(--color-nav-item-active-bg);
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}
.ar-demo .c-instance-card__body {
    flex: 1;
    min-width: 0;
}
/* Edizione al completo: card non selezionabile, segnalata dal badge critical. */
.ar-demo .c-instance-card--full {
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    border-color: var(--color-border-subtle);
    background: var(--color-surface-2);
}
/* Task 1: posti disponibili inline a destra. Chip modalita a sinistra, badge posti a
   destra sulla stessa riga in cima alla card (piu visibile del vecchio badge in fondo). */
.ar-demo .c-instance-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 4px;
}
.ar-demo .c-instance-card__top .c-instance-card__modality {
    align-self: auto;   /* dentro il wrapper resta centrato, non flex-start */
    margin-bottom: 0;   /* il gap del wrapper sostituisce il margine del chip */
}
.ar-demo .c-instance-card__top .p-badge--availability {
    margin-top: 0;      /* niente stacco verticale: ora e' inline a destra */
    flex-shrink: 0;     /* il badge resta leggibile, non si comprime */
}
.ar-demo .c-instance-card__date {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}
.ar-demo .c-instance-card__meta {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.ar-demo .c-instance-card__meta-sep {
    color: var(--color-border-subtle);
}
.ar-demo .c-instance-card__check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-border-subtle);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ar-demo .c-instance-card.is-selected .c-instance-card__check {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: white;
}
.ar-demo .c-instance-card.is-selected .c-instance-card__check .p-icon {
    font-size: 0.85rem;
    color: white;
}
.ar-demo .c-instance-card__lessons {
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-2) var(--space-4) var(--space-3);
}
.ar-demo .c-instance-card__lesson {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.ar-demo .c-instance-card__lesson-icon {
    font-size: 0.9rem;
    opacity: 0.7;
    color: var(--color-text-secondary);
}
.ar-demo .c-instance-card__lesson-text {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* Reset peso: gli <strong> della riga-lezione restano Inter 500 (mai bold UA). */
.ar-demo .c-instance-card__lesson-text strong {
    font-weight: 500;
}
/* -------------------------------------------------------
   Editions expand / collapse (max 3 visible by default)
   ------------------------------------------------------- */
.ar-demo .c-editions-group {
    position: relative;
}
.ar-demo .c-instance-card--preview-fade {
    position: relative;
    pointer-events: none;
    max-height: 3.5rem;
    overflow: hidden;
    opacity: 0.45;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    transition: max-height 0.25s ease, opacity 0.25s ease;
}
.ar-demo .c-instance-card--overflow-hidden {
    display: none !important;
}
.ar-demo .c-editions-group.is-expanded .c-instance-card--preview-fade {
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
}
.ar-demo .c-editions-group.is-expanded .c-instance-card--overflow-hidden {
    display: flex !important;
}

/* ---------- wizard-step2: ELENCO LEZIONI dentro la card edizione: .c-instance-card__lessons (border-top   (iscrizioni-page.css:1437-1462) ---------- */
.ar-demo .c-instance-card__lessons {
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-2) var(--space-4) var(--space-3);
}
.ar-demo .c-instance-card__lesson {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.ar-demo .c-instance-card__lesson-icon {
    font-size: 0.9rem;
    opacity: 0.7;
    color: var(--color-text-secondary);
}
.ar-demo .c-instance-card__lesson-text {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* Reset peso: gli <strong> della riga-lezione restano Inter 500 (mai bold UA). */
.ar-demo .c-instance-card__lesson-text strong {
    font-weight: 500;
}

/* ---------- wizard-step2: .c-editions-microcopy — la riga 'Il lavoratore parteciperà a tutte le lezioni   (iscrizioni-page.css:1529-1537) ---------- */
.ar-demo .c-editions-microcopy {
    margin: var(--space-3) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

/* ---------- wizard step 4: accordion di revisione + riepilogo  (iscrizioni-page.css:1552-1740) ---------- */
.ar-demo .c-iscrizioni-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.ar-demo .c-worker-accordion {
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.875rem;
    background: var(--color-surface-1);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.ar-demo .c-worker-accordion[open] {
    border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
}
.ar-demo .c-worker-accordion > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.14s ease;
}
.ar-demo .c-worker-accordion > summary::-webkit-details-marker { display: none; }
.ar-demo .c-worker-accordion > summary:hover {
    background: var(--color-surface-2);
}
.ar-demo .c-worker-accordion__summary-worker {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .c-worker-accordion__summary-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: 0.375rem;
    background: var(--color-ok-bg);
    color: var(--color-ok-fg);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.ar-demo .c-worker-accordion__summary-date--empty {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}
.ar-demo .c-worker-accordion__chevron {
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ar-demo .c-worker-accordion[open] .c-worker-accordion__chevron {
    transform: rotate(180deg);
}
.ar-demo .c-worker-accordion__content {
    padding: 0 var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}
.ar-demo .c-worker-accordion__detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0 var(--space-5);
}
.ar-demo .c-worker-accordion__detail-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
/* [hidden] deve vincere sul display:flex qui sopra (l'attributo da solo perde contro
   una regola d'autore): serve per nascondere il tile "Sede" sulle edizioni a distanza. */
.ar-demo .c-worker-accordion__detail-tile[hidden] {
    display: none;
}
.ar-demo .c-worker-accordion__detail-icon {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
.ar-demo .c-worker-accordion__detail-dl {
    margin: 0;
}
.ar-demo .c-worker-accordion__detail-dt {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0;
}
.ar-demo .c-worker-accordion__detail-dd {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0.1rem 0 0;
}
/* Inline date change */
.ar-demo .c-worker-accordion__date-change-panel {
    display: none;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border-subtle);
}
.ar-demo .c-worker-accordion__date-change-panel.is-open {
    display: block;
    animation: ard-step-in 0.18s ease forwards;
}
/* -------------------------------------------------------
   Summary table (Step 4)
   ------------------------------------------------------- */
.ar-demo .c-iscrizioni-summary {
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.875rem;
    overflow: hidden;
    margin-bottom: var(--space-6);
    background: var(--color-surface-1);
}
.ar-demo .c-iscrizioni-summary__row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni-summary__row:last-child {
    border-bottom: none;
}
.ar-demo .c-iscrizioni-summary__row--header {
    background: var(--color-surface-2);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
.ar-demo .c-iscrizioni-summary__cell {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .c-iscrizioni-summary__cell--date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-ok-fg);
    font-weight: 500;
}

/* ---------- wizard: barra CTA  (iscrizioni-page.css:1908-1928) ---------- */
.ar-demo .c-iscrizioni__cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    /* CTA (incluso "Indietro") raggruppate a destra. */
    justify-content: flex-end;
    /* Barra azioni ancorata in fondo al body (scroll-container): i bottoni
       restano nello stesso punto a schermo qualunque sia la lunghezza dello step. */
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--space-5) calc(-1 * var(--space-6)) 0;
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-1);
    border-top: 1px solid var(--color-border-subtle);
}
.ar-demo .c-iscrizioni__cta-row--reverse {
    flex-direction: row-reverse;
}

/* ---------- wizard: stato vuoto  (iscrizioni-page.css:1964-1993) ---------- */
.ar-demo .c-iscrizioni-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--color-text-secondary);
}
.ar-demo .c-iscrizioni-empty__icon {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.45;
}
.ar-demo .c-iscrizioni-empty__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}
.ar-demo .c-iscrizioni-empty__desc {
    font-size: 0.875rem;
    margin: 0;
    max-width: 30ch;
    line-height: 1.5;
}

/* ---------- wizard: messaggio di validazione  (iscrizioni-page.css:2143-2161) ---------- */
.ar-demo .c-iscrizioni__validation-msg {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 0.625rem;
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--space-3);
    border: 1px solid var(--color-warning-border);
}
.ar-demo .c-iscrizioni__validation-msg.is-visible {
    display: flex;
    animation: ard-step-in 0.18s ease forwards;
}

/* ---------- wizard step 3: legenda della copertura  (iscrizioni-page.css:2966-3017) ---------- */
.ar-demo .c-pf-cov-legend {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.75rem;
}
.ar-demo .c-pf-cov-legend__title {
    margin: 0 0 var(--space-2);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
.ar-demo .c-pf-cov-legend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ar-demo .c-pf-cov-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ar-demo .c-pf-cov-legend__item .c-pf-badge {
    flex: none;
    min-width: 172px;
    justify-content: flex-start;
}
/* Campione legenda = segmento selezionato (col pallino), cosi' spiega l'indicatore. */
.ar-demo .c-pf-cov-legend__item .c-pf-state-seg__btn {
    flex: none;
    min-width: 188px;
    justify-content: flex-start;
    cursor: default;
}
.ar-demo .c-pf-cov-legend__desc {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ---------- wizard step 5: lancio  (iscrizioni-page.css:3192-3281) ---------- */
.ar-demo .c-pf-launch {
    --pf-green: var(--color-ok-fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-3) var(--space-3);
}
.ar-demo .c-pf-launch__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    width: 100%;
}
/* Medaglione con spunta — compatto e coerente in entrambi i wizard (più piccolo
   del precedente 152px: lascia spazio ai suggerimenti, l'azione successiva). */
.ar-demo .c-pf-launch__medal {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
}
.ar-demo .c-pf-launch__medal::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface-1));
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 55%, transparent);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}
.ar-demo .c-pf-launch.is-done .c-pf-launch__medal::before {
    background: color-mix(in srgb, var(--pf-green) 16%, var(--color-surface-1));
    box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--pf-green) 60%, transparent);
}
.ar-demo .c-pf-launch.is-done .c-pf-launch__medal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--pf-green);
    animation: ard-pf-pulse 1s ease-out 0.1s;
}
.ar-demo .c-pf-launch__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ar-demo .c-pf-launch__ring-track {
    fill: none;
    stroke: color-mix(in srgb, var(--color-border-subtle) 90%, transparent);
    stroke-width: 5;
}
.ar-demo .c-pf-launch__ring-fill {
    fill: none;
    stroke: var(--color-brand);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    opacity: 0;
    transition: stroke-dashoffset 0.5s ease, stroke 0.45s ease, opacity 0.3s ease;
}
.ar-demo .c-pf-launch.is-launching .c-pf-launch__ring-fill,
.ar-demo .c-pf-launch.is-done .c-pf-launch__ring-fill { opacity: 1; }
.ar-demo .c-pf-launch.is-done .c-pf-launch__ring-fill {
    stroke: var(--pf-green);
    stroke-dashoffset: 0;
}

/* ---------- wizard: chip modalita'  (iscrizioni-page.css:4425-4448) ---------- */
.ar-demo .c-instance-card__modality {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-text-secondary) 7%, transparent);
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ar-demo .c-instance-card__modality .p-icon {
    font-size: 15px;
    opacity: 0.85;
}

/* ---------- wizard-step2: CHIP MAPPA: commento + .c-corso-place, __sede (+ .p-icon), __maps (bordo brand  (iscrizioni-page.css:4475-4512) ---------- */
/* ──────────────────────────────────────────────────────────────────────────
   Dettagli corso nei due wizard — sede + bottone "Mappa" IDENTICO a quello del
   dettaglio lavoratori (.lav-rail-lesson__sede/__maps) e blocco "Quando" con
   etichette esplicite (Inizio / Fine / Orario / Durata).
   ────────────────────────────────────────────────────────────────────────── */
.ar-demo .c-corso-place {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ar-demo .c-corso-place__sede {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
}
.ar-demo .c-corso-place__sede .p-icon { font-size: 14px; }
.ar-demo .c-corso-place__maps {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: var(--radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--color-brand) 50%, transparent);
    color: var(--color-brand);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ar-demo .c-corso-place__maps:hover,
.ar-demo .c-corso-place__maps:focus-visible {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}
.ar-demo .c-corso-place__maps .p-icon { font-size: 14px; }

/* ---------- wizard-step2: Riga in testa della card edizione (2026-07-27): .c-instance-card__headline, __  (iscrizioni-page.css:4552-4623) ---------- */
/* ──────────────────────────────────────────────────────────────────────────
   2026-07-27 — Riga in testa della card edizione: QUANDO + MODALITA' grandi.
   La card e' una SCELTA: quando si tiene e com'e' fatto si leggono in una riga
   sola a 1.5rem; sede, lezioni e durata scendono nella riga meta in tono minore.
   Sostituisce, per le card dello Step 2, il chip modalita' + il blocco "Quando"
   a celle impilate (regole sopra: restano, le usa ancora il wizard SINGOLO).
   ARANCIONE = E-LEARNING: la modalita' e' smorzata su tutte le altre, cosi' il
   colore resta un segnale e non una decorazione.
   ────────────────────────────────────────────────────────────────────────── */
.ar-demo .c-instance-card__headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px var(--space-3);
    margin: 0 0 6px;
}
.ar-demo .c-instance-card__when {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    white-space: nowrap;
}
/* Freccia del range date: stessa altezza, tono muto (non e' un dato). */
.ar-demo .c-instance-card__when-to {
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--color-text-soft);
}
.ar-demo .c-instance-card__mode {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    white-space: nowrap;
}
/* Badge posti spinto a destra sulla stessa riga (era .c-instance-card__top). */
.ar-demo .c-instance-card__headline-end {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Etichetta minuta della durata dentro la riga meta — stesso trattamento di
   .c-corso-quando__lab, ma inline (qui non c'e' la colonna). */
.ar-demo .c-instance-card__meta-lab {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    opacity: 0.7;
    margin-right: 5px;
}
/* La riga meta ora ospita valori di altezze diverse (etichetta + valore): la
   baseline li allinea meglio del center. */
.ar-demo .c-instance-card__headline ~ .c-instance-card__meta {
    align-items: baseline;
}
/* Sotto i 560px la riga in testa va a capo e il badge posti torna a sinistra:
   con "Disponibile da subito" + "E-learning" a 1.5rem non ci sta nulla altro. */
/* risolta a 1440px e scartata: @media (max-width: 560px) */

/* ---------- wizard: headline della card edizione  (iscrizioni-page.css:4561-4612) ---------- */
.ar-demo .c-instance-card__headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px var(--space-3);
    margin: 0 0 6px;
}
.ar-demo .c-instance-card__when {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    white-space: nowrap;
}
/* Freccia del range date: stessa altezza, tono muto (non e' un dato). */
.ar-demo .c-instance-card__when-to {
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--color-text-soft);
}
.ar-demo .c-instance-card__mode {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    white-space: nowrap;
}
/* Badge posti spinto a destra sulla stessa riga (era .c-instance-card__top). */
.ar-demo .c-instance-card__headline-end {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Etichetta minuta della durata dentro la riga meta — stesso trattamento di
   .c-corso-quando__lab, ma inline (qui non c'e' la colonna). */
.ar-demo .c-instance-card__meta-lab {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    opacity: 0.7;
    margin-right: 5px;
}
/* La riga meta ora ospita valori di altezze diverse (etichetta + valore): la
   baseline li allinea meglio del center. */
.ar-demo .c-instance-card__headline ~ .c-instance-card__meta {
    align-items: baseline;
}

/* ---------- wizard step 3: segmenti di stato  (iscrizioni-page.css:5032-5115) ---------- */
.ar-demo .c-pf-state-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-2);
    border-radius: 999px;
    flex: none;
    /* Track piatto: nessun bordo/stroke, i pallini radio comunicano la scelta. */
}
.ar-demo .c-pf-state-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Densità compatta: liste con molti partecipanti restano scorribili. */
    padding: 4px 10px;
    border: none;
    /* Inattivi ghost (trasparenti): solo l'attivo ha un fondo pieno. */
    background: transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--motion-fast, 120ms) ease, color var(--motion-fast, 120ms) ease, box-shadow var(--motion-fast, 120ms) ease;
    white-space: nowrap;
}
.ar-demo .c-pf-state-seg__btn .p-icon { font-size: 0.95rem; }
/* Indicatore: anello vuoto grigio di default; quando il segmento e' scelto diventa
   un cerchio pieno del colore semantico con spunta bianca (Material 'check'). */
.ar-demo .c-pf-state-seg__btn::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    box-sizing: border-box;
    opacity: 0.55;
    /* pronto a ospitare la spunta bianca (Material 'check') quando attivo */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease, color var(--motion-fast, 120ms) ease;
}
.ar-demo .c-pf-state-seg__btn.is-active::before {
    content: "";
    opacity: 1;
    border: none;
    /* cerchio pieno del colore semantico (sotto) con spunta bianca centrata */
    background-image: url("/assets/icons/check-white.svg?v=2");
    background-position: center;
    background-size: 11px;
    background-repeat: no-repeat;
}
.ar-demo .c-pf-state-seg__btn--ok.is-active::before { background-color: var(--color-ok-fg); }
/* verde = barra posti */
.ar-demo .c-pf-state-seg__btn--quota.is-active::before { background-color: var(--color-brand); }
.ar-demo .c-pf-state-seg__btn--esc.is-active::before { background-color: var(--color-text-secondary); }
.ar-demo .c-pf-state-seg__btn:hover:not(.is-active) {
    color: var(--color-text-strong);
    background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}
.ar-demo .c-pf-state-seg__btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}
/* Segmento selezionato: niente fill (piatto). Lo stato lo segnala il check-circle;
   testo e cerchio prendono il colore semantico. Arancio = a pagamento. */
.ar-demo .c-pf-state-seg__btn.is-active {
    font-weight: 500;
}
.ar-demo .c-pf-state-seg__btn--ok.is-active { color: var(--color-ok-fg); }
/* verde = incluso (stesso della barra posti) */
.ar-demo .c-pf-state-seg__btn--quota.is-active { color: var(--color-brand); }
/* arancio = a pagamento */
.ar-demo .c-pf-state-seg__btn--esc.is-active { color: var(--color-text-secondary); }
/* grigio = non partecipa */
/* Dark: --color-ok-fg e' menta chiaro -> spunta scura nel cerchio per leggibilita'. */
.ar-demo html[data-theme-mood="dark"] .c-pf-state-seg__btn--ok.is-active::before { color: var(--color-canvas); }

/* ---------- Iscrizioni attive: card con la data-titolo  (calendario-enrollment.css:16-194) ---------- */
.ar-demo .c-calendario .c-enrollment-worker__pill {
    display: none;
}
/* --- R5: card-corso PIATTA (ombra-drop rimossa 2026-06-19 su richiesta utente) -- */
/* La card eredita border+radius da .c-enrollment-course (formazione-page.css);
   niente elevazione: si appoggia a bordo + sfondo. Scoped al ramo calendario. */
.ar-demo .c-calendario .c-enrollment-course.cal-course {
    background: var(--color-surface-1);
    box-shadow: none;
    transition: box-shadow .3s ease, transform .3s ease;
}
.ar-demo .c-calendario .c-enrollment-course.cal-course.is-open {
    transform: translateY(-1px);
    box-shadow: none;
}
/* --- INTERVENTO A: testa-card con DATA come titolo ----------------------- */
.ar-demo .c-calendario .cal-course__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    width: 100%;
    text-align: left;
    padding: var(--space-4, 16px);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
/* E-learning: senza dateline, centra verticalmente nome-titolo e chevron. */
.ar-demo .c-calendario .cal-course__head--elearning {
    align-items: center;
}
.ar-demo .c-calendario .cal-course__chevron {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 20px;
    color: var(--color-text-secondary);
    transition: transform var(--motion-fast, 140ms) var(--motion-ease, ease);
}
.ar-demo .c-calendario .cal-course.is-open .cal-course__chevron {
    transform: rotate(90deg);
}
.ar-demo .c-calendario .cal-course__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* La DATA e' il titolo: prominenza SOLO via size + letter-spacing + colore.
   Peso 500 come tutto il resto (mai bold). */
.ar-demo .c-calendario .cal-course__dateline {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    min-width: 0;
}
.ar-demo .c-calendario .cal-course__date {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}
.ar-demo .c-calendario .cal-course__time {
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text-secondary) 90%, transparent);
    letter-spacing: 0;
}
/* Sottotitolo = nome corso (presenza/FAD). La modalita NON c'e' piu' nelle card
   (R3: e' gia nel titolo della colonna). */
.ar-demo .c-calendario .cal-course__subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    font-size: 13.5px;
}
/* DECISIONE UTENTE 1 — il nome corso va a capo INTERO, sempre. Niente ellissi /
   line-clamp: la card cresce in altezza quanto serve. Vale sia per il
   sottotitolo (presenza/FAD) sia per il titolo e-learning. */
.ar-demo .c-calendario .cal-course__name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    color: color-mix(in srgb, var(--color-text-primary) 78%, transparent);
}
/* E-learning (R4): il nome corso E' il titolo della card -> piu' prominente
   (size/colore), peso 500 come tutto il resto. */
.ar-demo .c-calendario .cal-course__name--title {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
/* Countdown pill: tono unico arancione (mai semaforo: cambia solo il testo). */
.ar-demo .c-calendario .cal-course__countdown {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: color-mix(in srgb, var(--color-brand) 82%, var(--color-text-primary));
    font-size: 11.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ar-demo .c-calendario .cal-course__countdown .p-icon {
    font-size: 14px;
}
.ar-demo .c-calendario .cal-course__countdown-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-brand);
    flex: 0 0 auto;
    position: relative;
}
.ar-demo .c-calendario .cal-course__countdown-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-brand);
    animation: ard-cal-pulse 2.4s ease-out infinite;
}
@keyframes ard-cal-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}
/* E5 — chip MODALITA sulla card (riapre R3 in modo ratificato). Compare su ogni
   card con modalita nota (In presenza/FAD/sincrona/asincrona). Tono arancione/neutro
   come il countdown (brand 12% sfondo, brand 82% testo), MAI verde (riservato a
   "iscritto"/conteggi). Scoped sotto .c-calendario .cal-course per non collidere. */
.ar-demo .c-calendario .cal-course__modality {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
    color: color-mix(in srgb, var(--color-brand) 80%, var(--color-text-primary));
    font-size: 11.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ar-demo .c-calendario .cal-course__modality .p-icon {
    font-size: 14px;
}

/* ---------- iscrizioni attive: colonna destra della card + pill conteggio (verde)  (calendario-enrollment.css:192-213) ---------- */
/* CALENDARIO-FIX-V2 (T1): chevron + conteggio raggruppati a DESTRA in colonna —
   chevron in alto, "N iscritti" in basso (align-self stretch + space-between).
   Il titolo (data/corso) resta a sinistra nell'.info. */
.ar-demo .c-calendario .cal-course__aside {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}
/* T5 — il NUMERO di iscritti torna VERDE (eccezione sanzionata utente:
   "iscritto"/"N iscritti" sono uno stato positivo confermato). La pill base e'
   arancione (brand 12%): qui la riportiamo a tono VERDE (sfondo + testo), cosi il
   conteggio e' coerentemente verde e non verde-su-arancione. */
.ar-demo .c-calendario .cal-course__count {
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--color-ok-fg) 14%, transparent);
    color: var(--color-ok-fg);
}

/* ---------- iscrizioni-attive: Header colonna ramo calendario (.c-calendario .cal-col__title: 13px, uppercase  (calendario-enrollment.css:402-432) ---------- */
/* ========================================================================== */
/* HEADER COLONNA (R3) — il titolo e' la MODALITA (uppercase, letter-spacing).  */
/* ========================================================================== */
.ar-demo .c-calendario .cal-col__title {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
/* ========================================================================== */
/* EMPTY-STATE colonna (R5) — curato, non box piatto: dashed + icona + tono.    */
/* ========================================================================== */
.ar-demo .c-calendario .c-enrollment-col__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-5, 20px) var(--space-3, 12px);
    border: 1px dashed color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
    color: var(--color-text-secondary);
}
.ar-demo /* L'attributo [hidden] (impostato da clearSearch/applySearch in enrollment-columns.js)
   deve poter nascondere il box: senza questa regola il display:flex sopra vince sullo
   stile UA [hidden] {display:none}
.ar-demo e l'empty resta visibile anche a query vuota / sotto
   una colonna piena (= il difetto E8). Stesso pattern di global-search/ruoli/companion-rail. */
.c-calendario .c-enrollment-col__empty[hidden] {
    display: none;
}

/* ---------- iscrizioni attive: chevron a pasticca tonda (R5)  (calendario-enrollment.css:434-455) ---------- */
/* ========================================================================== */
/* CHEVRON (R5) — pasticca tonda tonale 32px (fedele alla preview).             */
/* ========================================================================== */
.ar-demo .c-calendario .cal-course__chevron {
    margin-top: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
    color: var(--color-text-secondary);
}
.ar-demo .c-calendario .cal-course__head--elearning .cal-course__chevron {
    align-self: center;
}
.ar-demo .c-calendario .cal-course.is-open .cal-course__chevron {
    color: color-mix(in srgb, var(--color-brand) 78%, var(--color-text-primary));
    border-color: color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
}

/* ---------- organigramma: Banner 'Nomine mancanti da regolarizzare': .org-nomine-banner + __content, __i  (nomine-wizard.css:491-537) ---------- */
/* =====================================================================
   Banner ingresso wizard (in cima all'organigramma, sopra le pill).
   Stile coerente con `.c-scadenze-pf-banner` di Formazione.
   ===================================================================== */
.ar-demo .org-nomine-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-brand) 30%, var(--color-border-subtle));
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface-1));
}
.ar-demo .org-nomine-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.ar-demo .org-nomine-banner__icon {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--color-brand);
}
.ar-demo .org-nomine-banner__text { min-width: 0; }
.ar-demo .org-nomine-banner__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
}
.ar-demo .org-nomine-banner__subtitle {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.ar-demo .org-nomine-banner__cta { flex-shrink: 0; }

/* ---------- topbar: Topbar dot indicator cross-page: .app-top-utilities__icon-btn[data-page-key='n  (news-page.css:566-585) ---------- */
/* ============================================================================
 * Topbar dot indicator (cross-page, news-page.css caricato globalmente).
 * Punto brand 8px sull'icon-btn "Novità" se esistono articoli <= 14gg.
 * ========================================================================== */
.ar-demo .app-top-utilities__icon-btn[data-page-key="novita"] {
    position: relative;
}
.ar-demo .app-top-utilities__novita-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-surface-1);
    pointer-events: none;
}

/* ---------- impostazioni: intero blocco 'Altri corsi': header del file, .c-impostazioni__altri-corsi, gu  (impostazioni-page.css:1-192) ---------- */
/* ==========================================================================
   impostazioni-page.css — stili della pagina Impostazioni NON presenti in
   primitives.css (file HOT, non toccato). Oggi: sezione "Altri corsi".
   Tutto scopato sotto .c-impostazioni; temi light/dark via token esistenti
   (nessun colore fisso: i token cambiano da soli col tema).
   ========================================================================== */
.ar-demo .c-impostazioni .c-impostazioni__altri-corsi {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ar-demo /* Guardia hidden: i box degraded/dup sono flex di classe e il display di
   classe vince sulla regola UA [hidden] {display:none}
.ar-demo — senza questa guardia
   l'attributo hidden non li spegne. !important e' l'idioma della guardia. */
.c-impostazioni__altri-corsi [hidden] { display: none !important; }
.ar-demo .c-impostazioni .c-impostazioni__ac-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
/* Stato degradato (radice famiglia non risolvibile): messaggio di servizio
   retry-able. Fondo tenue + bordo su 4 lati (mai barre d'accento laterali). */
.ar-demo .c-impostazioni .c-impostazioni__ac-degraded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning-border, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning-base) 8%, transparent);
    color: var(--color-warning-text);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border-secondary, var(--color-border));
}
.ar-demo .c-impostazioni .c-impostazioni__ac-item:last-child {
    border-bottom: 0;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-main {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-item.is-archiviato .c-impostazioni__ac-nome {
    color: var(--color-text-muted);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-azioni,
.ar-demo .c-impostazioni .c-impostazioni__ac-editor {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-editor {
    flex: 1 1 100%;
    justify-content: flex-end;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-editor .p-input {
    flex: 1 1 200px;
    max-width: 360px;
}
/* Evidenziazione della riga suggerita ("Usa quello" del dedup): glow brand
   morbido e lungo che si spegne da solo, mai un bordo duro. */
.ar-demo .c-impostazioni .c-impostazioni__ac-item.is-ac-evidenziata {
    animation: ard-c-impostazioni-ac-glow 2.4s ease-out;
    border-radius: var(--radius-sm);
}
@keyframes ard-c-impostazioni-ac-glow {
    0% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 22%, transparent),
            0 10px 34px color-mix(in srgb, var(--color-brand) 18%, transparent);
        background: color-mix(in srgb, var(--color-brand) 7%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background: transparent;
    }
}
.ar-demo .c-impostazioni .c-impostazioni__ac-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-secondary, var(--color-border));
}
.ar-demo .c-impostazioni .c-impostazioni__ac-campi {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-campo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 260px;
    min-width: 0;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-campo--mesi {
    flex: 0 1 200px;
}
/* Suggerimento duplicato (409): fondo brand tenue + bordo 4 lati, scelte
   affiancate a destra come le altre azioni. */
.ar-demo .c-impostazioni .c-impostazioni__ac-dup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand) 7%, transparent);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-dup-azioni {
    display: flex;
    gap: var(--space-2);
}
/* CTA a destra, feedback di stato a sinistra (stesso schema del save-status). */
.ar-demo .c-impostazioni .c-impostazioni__ac-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-footer .c-impostazioni__ac-status {
    margin-right: auto;
}
.ar-demo .c-impostazioni .c-impostazioni__ac-status[data-state="error"] {
    color: var(--color-critical-text);
}
.ar-demo .c-impostazioni .c-impostazioni__ac-status[data-state="saved"] {
    color: var(--color-ok);
}
/* risolta a 1440px e scartata: @media (max-width: 640px) */

/* ---------- lavoratori: .c-lavoratori-cta-banner__actions, il wrapper flex delle due azioni del banner  (impostazioni-page.css:404-412) ---------- */
/* --- Banner: wrapper delle due azioni. Il banner resta flex space-between
   (content a sinistra, azioni a destra): il wrapper non cambia nulla del
   layout esistente, tiene solo affiancate secondaria + primaria. --- */
.ar-demo .c-lavoratori-cta-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* ---------- wizard-step2: HELP contestuale '?': .c-wizard-help (wrapper inline), __btn (18x18, hover/ari  (wizard-todo.css:256-322) ---------- */
/* ── Help contestuale: icona "?" + popover on-demand ─────────────────────── */
.ar-demo .c-wizard-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}
.ar-demo .c-wizard-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 120ms ease;
}
.ar-demo .c-wizard-help__btn:hover { color: var(--color-brand); }
.ar-demo .c-wizard-help__btn .p-icon { font-size: 16px; }
.ar-demo .c-wizard-help__btn[aria-expanded="true"] { color: var(--color-brand); }
/* Popover: posizionato in `fixed` da JS (coordinate dal bottone, clampate al
   viewport) per non essere mai tagliato dagli overflow:hidden dei contenitori
   del wizard. Qui solo l'aspetto. */
.ar-demo .c-wizard-help__pop {
    position: fixed;
    z-index: 1200;
    width: 260px;
    max-width: calc(100vw - 24px);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-peak);
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 12px 32px rgba(43, 23, 17, 0.22), 0 2px 8px rgba(43, 23, 17, 0.12);
    /* Reset dell'ereditarieta dal contesto (es. label uppercase). */
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-primary);
    text-align: left;
    white-space: normal;
}
.ar-demo .c-wizard-help__pop[hidden] { display: none; }
.ar-demo .c-wizard-help__pop-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-brand);
    margin-top: 1px;
}
.ar-demo .c-wizard-help__pop-text { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .ar-demo .c-wizard-help__btn { transition: none;   }
}

/* ---------- wizard-step2: .p-scroll-soft — scrollbar discreta del body wizard (class sul .c-iscrizioni__  (scroll-ux.css:16-42) ---------- */
/* ── Scrollbar discreta ──────────────────────────────────────────────────── */
.ar-demo .p-scroll-soft {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: color-mix(in srgb, var(--color-text-secondary) 26%, transparent) transparent;
}
.ar-demo .p-scroll-soft::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.ar-demo .p-scroll-soft::-webkit-scrollbar-track {
    background: transparent;
}
.ar-demo .p-scroll-soft::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-secondary) 20%, transparent);
    border-radius: 999px;
    /* Bordo trasparente + clip: lascia un po' d'aria attorno al thumb sottile. */
    border: 2px solid transparent;
    background-clip: padding-box;
}
.ar-demo .p-scroll-soft:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-secondary) 38%, transparent);
    background-clip: padding-box;
}

/* ---------- wizard-step2: PILLOLA SCORRI: .p-scroll-hint (absolute, pillola con label+chevron), .is-visi  (scroll-ux.css:44-131) ---------- */
/* ── Hint di scrollabilita ───────────────────────────────────────────────── */
.ar-demo .p-scroll-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-2) 94%, transparent);
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 4px 14px rgba(43, 23, 17, 0.18);
    color: var(--color-text-secondary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 3;
    font-size: 12px;
    line-height: 1;
}
.ar-demo .p-scroll-hint.is-visible {
    opacity: 0.92;
    /* Pulse arancione sincronizzato col rimbalzo del chevron: testo "scorri" +
       freccia passano al brand pieno due volte per ciclo, per rinforzare
       l'hint "c'e altro sotto". Il colore e' ereditato dal chevron. */
    animation: ard-p-scroll-hint-pulse 4s ease-in-out infinite;
}
/* Variante self-anchored: il hint vive DENTRO lo scrollEl (non nella card
   parent) ed e' position:sticky, cosi' resta in vista mentre l'utente
   scrolla. Usata quando il container scrollabile non ha una "card-wrapper"
   propria (es. <aside class="c-lavoratori-detail">). */
.ar-demo .p-scroll-hint--sticky {
    position: sticky;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* In sticky il transform inline rotto da CSS lo lasciamo. Centriamo via
       margin auto: il bottone e' inline-flex, lo wrappiamo in un trick di
       width fit-content per attivare il centraggio. */
    width: fit-content;
    transform: none;
}
.ar-demo .p-scroll-hint__label {
    /* Etichetta "scorri" accanto al chevron: stessa famiglia testo, peso
       medio, niente uppercase (per non aggressivare il hint discreto). */
    font-weight: 500;
    letter-spacing: 0.01em;
}
.ar-demo .p-scroll-hint .p-icon {
    font-size: 18px;
}
/* Rimbalzo "ogni tanto": fermo per buona parte del ciclo, poi due rimbalzi. */
.ar-demo .p-scroll-hint.is-visible .p-icon {
    animation: ard-p-scroll-hint-bounce 4s ease-in-out infinite;
}
@keyframes ard-p-scroll-hint-bounce {
    0%, 62%, 100% { transform: translateY(0); }
    70% { transform: translateY(4px); }
    78% { transform: translateY(0); }
    86% { transform: translateY(4px); }
    92% { transform: translateY(0); }
}
/* Picco arancione a 70% e 86%: stessi istanti dei due rimbalzi del chevron,
   cosi' colore e movimento partono insieme. Resto del ciclo: grigio discreto. */
@keyframes ard-p-scroll-hint-pulse {
    0%, 60% { color: var(--color-text-secondary); }
    70% { color: var(--color-brand); }
    80% { color: var(--color-text-secondary); }
    86% { color: var(--color-brand); }
    94%, 100% { color: var(--color-text-secondary); }
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo .p-scroll-hint.is-visible .p-icon { animation: none;   }
  .ar-demo .p-scroll-hint.is-visible { animation: none;   }
  .ar-demo .p-scroll-hint { transition: none;   }
}

/* ---------- token del pannello Report  (report-drawer.css:11-37) ---------- */
.ar-demo {
    /* Superficie del foglio: brand pieno (decisione utente). Il pannello NON
       cambia col tema: stessi identici colori in chiaro e in scuro. */
    --rp-sheet-bg: var(--color-brand);
    --rp-ink: var(--color-on-brand);
    --rp-ink-soft: color-mix(in srgb, var(--color-on-brand) 76%, transparent);
    /* Fronte pulsante della barra: brand impastato di nero. */
    --rp-deep: color-mix(in srgb, var(--rp-sheet-bg) 52%, #000000);
    /* Guasto sulla barra: il critico del DS (il tono scuro del marchio no:
       e gia il fronte in avanzamento). */
    --rp-fail: var(--color-critical-fg);
    /* Le pillole vuote devono appena appena vedersi: sono il letto della barra. */
    --rp-pill-empty: color-mix(in srgb, var(--color-on-brand) 17%, transparent);
    --rp-veil: color-mix(in srgb, var(--color-on-brand) 15%, transparent);
    --rp-veil-strong: color-mix(in srgb, var(--color-on-brand) 26%, transparent);
    --rp-ring-track: color-mix(in srgb, var(--color-on-brand) 35%, transparent);
    --rp-scrim: color-mix(in srgb, var(--color-surface-1) 58%, transparent);
    --rp-glow: color-mix(in srgb, var(--color-brand) 20%, transparent);

    --rp-sheet-h: min(max(546px, 64vh), calc(100vh - 48px));
    /* La barra si adatta all'altezza della finestra: su schermi bassi si
       accorcia invece di far sforare le tre righe (la scrollbar che compariva
       occupava larghezza e spostava tutto il layout). */
    --rp-bar-h: clamp(62px, 10vh, 92px);
    --rp-tab-h: 33px;
    --rp-ease-sheet: cubic-bezier(.45, .05, .15, 1);
}

/* ---------- topbar: Fill esplicito delle icone dentro .rp-sheet / .rp-tab / .rp-top (display:inlin  (report-drawer.css:39-43) ---------- */
/* Le icone dentro il pannello: fill esplicito (fuori dal foglio arriva dalla
   pipeline standard del sito, qui il contesto e nostro). */
.ar-demo .rp-sheet .p-icon,
.ar-demo .rp-tab .p-icon,
.ar-demo .rp-top .p-icon { display: inline-block; vertical-align: middle; fill: currentColor; }

/* ---------- icone dentro il pannello Report  (report-drawer.css:41-44) ---------- */
.ar-demo .rp-sheet .p-icon,
.ar-demo .rp-tab .p-icon,
.ar-demo .rp-top .p-icon { display: inline-block; vertical-align: middle; fill: currentColor; }

/* ---------- topbar: Maniglia bassa: .rp-tab (fixed bottom 0, right var(--overlay-column-right), h   (report-drawer.css:55-119) ---------- */
/* ---------------------------------------------------------------- maniglia */
.ar-demo .rp-tab {
    position: fixed;
    bottom: 0;
    right: var(--overlay-column-right, 24px);
    z-index: 40;
    height: var(--rp-tab-h);
    min-width: 130px;
    padding: 0 var(--space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--rp-sheet-bg);
    color: var(--rp-ink);
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: filter var(--motion-base) var(--motion-ease);
}
.ar-demo .rp-tab:hover { filter: brightness(1.07); }
.ar-demo .rp-tab:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 3px;
}
/* Raccordi concavi 9x9 che fondono la maniglia col bordo (dal prototipo). */
.ar-demo .rp-tab__notch {
    position: absolute;
    bottom: 0;
    width: 9px;
    height: 9px;
}
.ar-demo .rp-tab__notch--l { left: -9px; background: radial-gradient(circle at 0 0, transparent 9px, var(--rp-sheet-bg) 9.5px); }
.ar-demo .rp-tab__notch--r { right: -9px; background: radial-gradient(circle at 100% 0, transparent 9px, var(--rp-sheet-bg) 9.5px); }
.ar-demo .rp-tab__ring { display: inline-flex; align-items: center; gap: 6px; }
.ar-demo .rp-tab__ring[hidden] { display: none; }
.ar-demo .rp-tab__pct { font-size: 10px; font-variant-numeric: tabular-nums; }
.ar-demo .rp-ring { width: 17px; height: 17px; flex: none; }
.ar-demo .rp-ring__track { fill: none; stroke: var(--rp-ring-track); stroke-width: 4.5; }
.ar-demo .rp-ring__bar {
    fill: none;
    stroke: var(--rp-ink);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 75.4;
    transition: stroke-dashoffset .2s linear;
}
/* Gemella dentro il foglio: stessa forma, chiude invece di aprire. */
.ar-demo .rp-tab--sheet {
    position: absolute;
    bottom: auto;
    top: calc(-1 * var(--rp-tab-h));
    z-index: 2;
}
.ar-demo .rp-tab--sheet:focus-visible { outline-color: var(--color-on-brand); }

/* ---------- topbar: Pill 'Report' della topbar: .app-top-utilities--actions-only align-items:cente  (report-drawer.css:146-198) ---------- */
/* ------------------------------------------- pill "Report" nella topbar
   Gemella di vetro dell'isola (.app-top-utilities__actions, primitives.css):
   stessa superficie, stesso blur, stessa ombra, altezza 48. Sta FUORI dalla
   pill isoletta, sempre allineata (la nav e flex-end). Durante un download a
   pannello chiuso porta l'anello e la percentuale. */
.ar-demo .app-top-utilities.app-top-utilities--actions-only { align-items: center; }
.ar-demo .rp-top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding-inline: 16px;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-surface-1) 85%, transparent);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-peak) 30%, transparent) inset,
        0 6px 24px -8px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
    color: var(--color-text-primary);
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    pointer-events: auto;
    transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .rp-top:hover {
    background: color-mix(in srgb, var(--color-surface-1) 96%, transparent);
    transform: translateY(-1px);
}
.ar-demo .rp-top:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.ar-demo .rp-top .p-icon { width: 20px; height: 20px; }
.ar-demo .rp-top .rp-ring__track { stroke: color-mix(in srgb, var(--color-text-primary) 18%, transparent); }
.ar-demo .rp-top .rp-ring__bar { stroke: var(--color-brand); }
.ar-demo .rp-top .rp-tab__pct { font-size: 11px; color: var(--color-text-secondary); }
/* Slot che ospita la pill del tutorial quando il welcome e collassato
   (direttiva 2026-08-05: la pill sale in alto, a sinistra dell'isola).
   La pill porta le sue classi (.t-panel__pill): qui solo l'aggancio.
   pointer-events: la nav .app-top-utilities e' trasparente ai click
   (tokens.css:433) e ogni abitante deve riattivarli — senza questa riga la
   pill nello slot si clicca solo con click sintetici, mai col mouse
   (difetto reale demoarea 2026-08-05). */
.ar-demo .app-top-utilities__welcome-slot { display: none; }
.ar-demo .app-top-utilities__welcome-slot.is-filled {
    display: inline-flex;
    align-items: center;
    pointer-events: auto;
}
.ar-demo .app-top-utilities__welcome-slot .t-panel__pill { animation: none; }

/* ---------- pill Report in topbar  (report-drawer.css:153-184) ---------- */
.ar-demo .rp-top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding-inline: 16px;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-surface-1) 85%, transparent);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--color-surface-peak) 30%, transparent) inset,
        0 6px 24px -8px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
    color: var(--color-text-primary);
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    pointer-events: auto;
    transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .rp-top:hover {
    background: color-mix(in srgb, var(--color-surface-1) 96%, transparent);
    transform: translateY(-1px);
}
.ar-demo .rp-top:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.ar-demo .rp-top .p-icon { width: 20px; height: 20px; }
.ar-demo .rp-top .rp-ring__track { stroke: color-mix(in srgb, var(--color-text-primary) 18%, transparent); }
.ar-demo .rp-top .rp-ring__bar { stroke: var(--color-brand); }
.ar-demo .rp-top .rp-tab__pct { font-size: 11px; color: var(--color-text-secondary); }

/* ---------- foglio del pannello Report  (report-drawer.css:265-273) ---------- */
.ar-demo .rp-sheet__inner {
    position: relative;
    height: 100%;
    display: flex;
    background: var(--rp-sheet-bg);
    /* Stacco morbido e lungo, mai drop shadow dura (regola standing). */
    box-shadow: 0 -28px 64px var(--rp-glow);
}

/* ---------- pannello Report: colonna, righe, CTA vetro  (report-drawer.css:286-830) ---------- */
.ar-demo .rp-aside {
    width: 272px;
    flex: none;
    padding: 88px 36px 30px 44px;
    display: flex;
    flex-direction: column;
}
.ar-demo .rp-aside__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    max-width: 212px;
}
/* Stessa forma della riga sede del rail (.p-sede-rail__row.is-current),
   tradotta su fondo brand: dove il rail usa "brand 10% + bordo brand 32%" su
   superficie chiara, qui il segnale e il bianco alle stesse intensita. */
.ar-demo .rp-sede {
    margin-top: var(--space-4);
    max-width: 192px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: var(--space-2);
    align-items: center;
    padding: 5px var(--space-2);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-on-brand) 32%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-on-brand) 10%, transparent);
    color: var(--rp-ink);
    font-weight: 500;
    line-height: 1.35;
}
.ar-demo .rp-sede__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    grid-row: 1 / span 2;
    margin: 0 auto;
    background: var(--color-on-brand);
}
.ar-demo .rp-sede__name {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-demo .rp-sede__meta {
    grid-column: 2;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--rp-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Gemello di .p-sede-rail__more: stessa misura e stesso rientro per
   allinearsi al TESTO, non al pallino. */
.ar-demo .rp-sede-cambia {
    margin-top: var(--space-1);
    padding: 5px var(--space-2) 5px 30px;
    border: 0;
    background: none;
    color: var(--rp-ink-soft);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease);
}
.ar-demo .rp-sede-cambia:hover { color: var(--color-on-brand); }
.ar-demo .rp-sede-cambia:focus-visible { outline: 2px solid var(--color-on-brand); outline-offset: 3px; }
/* ------------------------------------------------------------ area contenuti */
.ar-demo .rp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 60px 8px 0;
}
.ar-demo .rp-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* La barra di scorrimento non deve MAI comparire: quando compariva
       occupava larghezza, restringeva le barre e spostava il layout. */
    scrollbar-width: none;
    /* Il livello ombra del bottone vetro e 2em piu largo del bottone: la parte
       trasparente sporgerebbe a destra creando una barra di scorrimento. */
    overflow-x: clip;
    display: flex;
    flex-direction: column;
}
.ar-demo .rp-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* La riga e una colonna sola: titolo e formato a sinistra, stato e CTA spinti
   a destra sulla stessa linea, barra sotto a tutta la larghezza. */
.ar-demo .rp-row {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3px 0;
}
.ar-demo .rp-sheet[open] .rp-row {
    animation: ard-rp-row-in .55s var(--motion-ease-out) both;
    animation-delay: calc(.18s + var(--i) * .09s);
}
/* Gruppo stato + CTA: nella fascia del titolo, allineato al bordo destro
   della BARRA (non del pannello): il rientro vale quanto la colonna numero
   piu il suo gap. min-height fissa: bottone (40) e badge (28) si alternano
   senza far saltare la testata. */
.ar-demo .rp-row__actions {
    min-height: 40px;
    margin-left: auto;
    margin-right: calc(240px + var(--space-5));
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* Badge di stato: pillola di vetro con la spunta. */
.ar-demo .rp-state {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3) 5px 5px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-on-brand) 16%, transparent);
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
}
.ar-demo .rp-radio {
    width: 15px; height: 15px;
    flex: none;
    border: 2px solid var(--color-on-brand);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ar-demo .rp-radio::after {
    content: "";
    width: 5px; height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-on-brand);
}
.ar-demo .rp-tick {
    width: 18px; height: 18px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--color-on-brand);
    color: var(--rp-sheet-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: ard-rp-checkpop .45s var(--motion-ease-spring) both;
}
.ar-demo .rp-tick .p-icon { width: 12px; height: 12px; }
.ar-demo .rp-row__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Lo stato sta qui, spinto a destra: sulla linea del titolo e quindi
   direttamente sopra la barra, allineato al suo bordo destro. */
.ar-demo .rp-row__head .rp-state { margin-left: auto; }
.ar-demo .rp-row__title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.15; }
/* Il formato non sta sepolto nel titolo: e una pillola autonoma. */
.ar-demo .rp-fmt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--rp-veil-strong);
    font-size: 10.5px;
    letter-spacing: .04em;
}
.ar-demo .rp-fmt .p-icon { width: 12px; height: 12px; }
.ar-demo .rp-nota {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--rp-ink-soft);
}
.ar-demo .rp-nota .p-icon { width: 12px; height: 12px; }
.ar-demo .rp-row__desc {
    /* -4px: fra titolo e sottotitolo restava l'aria del leading anche a zero. */
    margin: -4px 0 4px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--rp-ink-soft);
}
/* Altezza costante del blocco barra+parole: a riposo la barra e piena; durante
   il download si accorcia esattamente di quanto occupano le parole (26px). */
.ar-demo .rp-bar {
    display: flex;
    gap: 5px;
    height: var(--rp-bar-h);
    transition: height .45s var(--rp-ease-sheet);
}
.ar-demo .rp-row[data-state="idle"] .rp-bar { cursor: pointer; }
.ar-demo .rp-row[data-state="run"] .rp-bar { height: calc(var(--rp-bar-h) - 26px); }
.ar-demo .rp-pill {
    flex: 1;
    border-radius: var(--radius-pill);
    background: var(--rp-pill-empty);
    transition: background .22s var(--motion-ease);
}
.ar-demo .rp-pill[data-fill="1"] { background: var(--color-on-brand); }
/* Se il download fallisce la barra lo dice: le pillole sbattono nel rosso
   critico, si schiacciano a cascata da sinistra a destra e si spengono. Dura
   un secondo, poi la riga torna da scaricare. */
@keyframes ard-rp-fail-pill {
    0%   { background: var(--rp-fail); transform: scaleY(1); }
    50%  { background: var(--rp-fail); transform: scaleY(.5); }
    100% { background: var(--rp-pill-empty); transform: scaleY(1); }
}
@keyframes ard-rp-fail-shake {
    0%, 100% { transform: translateX(0); }
    22%      { transform: translateX(-3px); }
    48%      { transform: translateX(3px); }
    74%      { transform: translateX(-2px); }
}
.ar-demo .rp-row[data-state="errore"] .rp-bar { animation: ard-rp-fail-shake 420ms var(--motion-ease) both; }
.ar-demo .rp-row[data-state="errore"] .rp-pill {
    transform-origin: center;
    animation: ard-rp-fail-pill 560ms var(--motion-ease) both;
    animation-delay: calc(var(--p, 0) * 8ms);
}
.ar-demo .rp-pill[data-fill="edge"] {
    background: var(--rp-deep);
    animation: ard-rp-pulse .85s ease-in-out infinite;
}
.ar-demo .rp-words {
    display: flex;
    overflow: hidden;
    height: 0;
    margin-top: 0;
    opacity: 0;
    transition:
        height .45s var(--rp-ease-sheet),
        margin-top .45s var(--rp-ease-sheet),
        opacity .3s var(--motion-ease);
}
.ar-demo .rp-row[data-state="run"] .rp-words { height: 18px; margin-top: 8px; opacity: 1; }
.ar-demo .rp-word {
    font-size: 10.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    opacity: .26;
    transition: opacity .35s var(--motion-ease);
}
.ar-demo .rp-word[data-w="past"] { opacity: .72; }
.ar-demo .rp-word[data-w="now"] { opacity: 1; animation: ard-rp-wordpop .45s var(--motion-ease-spring) both; }
/* ------------------------------------------------------------------- la CTA
   In produzione vive SOLO la variante D (vetro liquido), scelta utente
   2026-08-05. Base comune presa da .p-button; testo a 13px perche la CTA e
   isolata su una superficie ampia. Le varianti A/B/C restano nell'archivio
   design (varianti-bottone.html), non qui. */
.ar-demo .rp-go-wrap {
    position: relative;
    z-index: 2;
    display: none;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: transform var(--rp-glass-time, 400ms) var(--rp-glass-ease, cubic-bezier(0.25, 1, 0.5, 1));
}
.ar-demo .rp-row[data-state="idle"] .rp-go-wrap { display: inline-block; }
.ar-demo .rp-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-5);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease);
}
.ar-demo .rp-go .p-icon { width: 18px; height: 18px; flex: none; }
.ar-demo .rp-go:active { transform: scale(.96); }
/* Il ring di focus del sito e brand: su fondo brand sarebbe invisibile
   (stesso rimedio di ruoli-page.css). */
.ar-demo .rp-go:focus-visible {
    outline: 2px solid var(--color-on-brand);
    outline-offset: 3px;
}
/* --- D: vetro liquido. Codice fornito dall'utente il 2026-08-05, portato sul
   nostro contesto: inchiostro bianco, misure ancorate al testo 13px, tutto
   scopato a .rp-sheet[data-cta="d"] (nessuna regola tocca i <button> del
   sito). Le due proprieta angolari sono registrate con @property: senza
   registrazione un angolo dentro un gradiente non e interpolabile. */
/* scartata dalla copia: @property --rp-a1 */
/* scartata dalla copia: @property --rp-a2 */
.ar-demo .rp-go-shadow { display: none; }
.ar-demo .rp-sheet[data-cta="d"] .rp-go {
    --rp-bw: clamp(1px, 0.0625em, 4px);
    all: unset;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    cursor: pointer;
    font-size: 13px;
    border-radius: var(--radius-pill);
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(
        -75deg,
        color-mix(in srgb, var(--color-on-brand) 6%, transparent),
        color-mix(in srgb, var(--color-on-brand) 22%, transparent),
        color-mix(in srgb, var(--color-on-brand) 6%, transparent)
    );
    box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go:hover {
    transform: scale(0.975);
    backdrop-filter: blur(0.01em);
    -webkit-backdrop-filter: blur(0.01em);
    box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
        0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5);
}
/* Il testo (e l'icona) portano il padding: e lo span a dare forma al bottone. */
.ar-demo .rp-sheet[data-cta="d"] .rp-go__label {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 1em;
    letter-spacing: -0.01em;
    color: var(--color-on-brand);
    text-shadow: 0 0.2em 0.05em rgba(0, 0, 0, 0.12);
    padding-inline: 1.5em;
    padding-block: 0.8em;
    transition: text-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go:hover .rp-go__label { text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.14); }
/* Riflesso che scorre sul vetro. */
.ar-demo .rp-sheet[data-cta="d"] .rp-go__label::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: calc(100% - var(--rp-bw));
    height: calc(100% - var(--rp-bw));
    top: calc(var(--rp-bw) / 2);
    left: calc(var(--rp-bw) / 2);
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    overflow: clip;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(
        var(--rp-a2),
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 40% 50%,
        rgba(255, 255, 255, 0) 55%
    );
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    transition:
        background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
        --rp-a2 500ms cubic-bezier(0.25, 1, 0.5, 1);
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go:hover .rp-go__label::after { background-position: 25% 50%; }
.ar-demo .rp-sheet[data-cta="d"] .rp-go:active .rp-go__label::after { background-position: 50% 15%; --rp-a2: -15deg; }
/* Bordo: anello conico che ruota, ritagliato con mask-composite. */
.ar-demo .rp-sheet[data-cta="d"] .rp-go::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    width: calc(100% + var(--rp-bw));
    height: calc(100% + var(--rp-bw));
    top: calc(0% - var(--rp-bw) / 2);
    left: calc(0% - var(--rp-bw) / 2);
    padding: var(--rp-bw);
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    pointer-events: none;
    background:
        conic-gradient(
            from var(--rp-a1) at 50% 50%,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0) 5% 40%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0) 60% 95%,
            rgba(0, 0, 0, 0.5)
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    box-shadow: inset 0 0 0 calc(var(--rp-bw) / 2) rgba(255, 255, 255, 0.5);
    transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), --rp-a1 500ms ease;
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go:hover::after { --rp-a1: -125deg; }
.ar-demo .rp-sheet[data-cta="d"] .rp-go:active::after { --rp-a1: -75deg; }
/* Ombra portata, in un livello suo che puo sfocare senza tagliarsi. */
.ar-demo .rp-sheet[data-cta="d"] .rp-go-shadow {
    --rp-cut: 2em;
    display: block;
    position: absolute;
    font-size: 13px;
    width: calc(100% + var(--rp-cut));
    height: calc(100% + var(--rp-cut));
    top: calc(0% - var(--rp-cut) / 2);
    left: calc(0% - var(--rp-cut) / 2);
    filter: blur(clamp(2px, 0.125em, 12px));
    pointer-events: none;
    overflow: visible;
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go-shadow::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    width: calc(100% - var(--rp-cut) - 0.25em);
    height: calc(100% - var(--rp-cut) - 0.25em);
    top: calc(var(--rp-cut) - 0.5em);
    left: calc(var(--rp-cut) - 0.875em);
    padding: 0.125em;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.12));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:hover) .rp-go-shadow { filter: blur(clamp(2px, 0.0625em, 6px)); }
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:hover) .rp-go-shadow::after { top: calc(var(--rp-cut) - 0.875em); }
/* Alla pressione il bottone si inclina davvero, come nel codice originale. */
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:active) { transform: rotate3d(1, 0, 0, 25deg); }
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:active) .rp-go {
    box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
        0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
        0 0.25em 0 0 rgba(255, 255, 255, 0.6),
        inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:active) .rp-go-shadow::after { top: calc(var(--rp-cut) - 0.5em); opacity: .75; }
.ar-demo .rp-sheet[data-cta="d"] .rp-go-wrap:has(.rp-go:active) .rp-go__label { text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.14); }
.ar-demo .rp-sheet[data-cta="d"] .rp-go:focus-visible { outline: 2px solid var(--color-on-brand); outline-offset: 4px; }
/* Su schermi touch gli angoli restano fermi (come nel codice originale). */
@media (hover: none) and (pointer: coarse) {
  .ar-demo .rp-sheet[data-cta="d"] .rp-go__label::after,
.ar-demo .rp-sheet[data-cta="d"] .rp-go:active .rp-go__label::after { --rp-a2: -45deg;   }
  .ar-demo .rp-sheet[data-cta="d"] .rp-go::after,
.ar-demo .rp-sheet[data-cta="d"] .rp-go:hover::after,
.ar-demo .rp-sheet[data-cta="d"] .rp-go:active::after { --rp-a1: -75deg;   }
}
/* Loading: il disabled del sito porta opacity .62 e su arancione slaverebbe il
   bottone. Qui resta pieno, cambia solo il contenuto. */
.ar-demo .rp-go[data-loading] { opacity: 1; pointer-events: none; }
/* Annulla: il toast di avanzamento e spento, quindi il comando vive qui. */
.ar-demo .rp-stop {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px var(--space-3);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-on-brand) 34%, transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--rp-ink-soft);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.ar-demo .rp-stop:hover { color: var(--color-on-brand); border-color: var(--color-on-brand); }
.ar-demo .rp-stop:focus-visible { outline: 2px solid var(--color-on-brand); outline-offset: 3px; }
.ar-demo .rp-stop .p-icon { width: 12px; height: 12px; }

/* ---------- pannello Report: barra di caricamento, percentuale, stati  (report-drawer.css:832-865) ---------- */
/* Corpo della riga: barra a sinistra che si allarga, numero grande a destra
   incolonnato col bordo del pannello e centrato sull'altezza della barra. */
.ar-demo .rp-row__body {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.ar-demo .rp-row__barcol { flex: 1; min-width: 0; }
.ar-demo .rp-row__num {
    width: 240px;
    flex: none;
    text-align: right;
    /* Il numero non deve mai superare l'altezza della barra: se cresce, cresce
       la riga e tutto il resto scivola. */
    max-height: var(--rp-bar-h);
    overflow: hidden;
}
.ar-demo .rp-pct {
    display: none;
    /* 76px: imponente ma dentro l'altezza della barra (che e variabile). */
    font-size: min(76px, calc(var(--rp-bar-h) * 0.84));
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.ar-demo .rp-pct.is-pop { animation: ard-rp-pctpop .5s var(--motion-ease-spring) both; }
.ar-demo .rp-row[data-state="run"] .rp-state--run { display: inline-flex; }
.ar-demo .rp-row[data-state="run"] .rp-pct { display: block; }
.ar-demo .rp-row[data-state="run"] .rp-stop { display: inline-flex; }
.ar-demo .rp-row[data-state="done"] .rp-state--done { display: inline-flex; }
.ar-demo .rp-row[data-state="done"] .rp-go-wrap { display: inline-block; }
.ar-demo .rp-row[data-state="done"] .rp-pct { display: block; }

/* ---------- regole DARK dell'AR, rimappate sui due contesti del front
   (l'AR scrive sempre data-theme, il front puo' non averlo: default sistema) ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ar-demo {
    --color-canvas: #2b1711;
    /* Card in tinta col canvas (era #36201a): gerarchia affidata a bordi e
       surface-2/peak. Scelta dall'editor /lab/themes, patch 2026-06-12. */
    --color-surface-1: #2b1711;
    --color-surface-2: #3c261f;
    --color-text-primary: #fff1eb;
    --color-text-secondary: var(--color-text-base);
    --color-border-subtle: rgba(255, 241, 235, 0.14);
    /* Border soft dark: variante piu' tenue del subtle, per stati quiet. */
    --color-border-soft: rgba(255, 241, 235, 0.06);
    --color-nav-surface: #26150f;
    --color-nav-item: #e8cbc0;
    --color-nav-item-active-bg: rgba(255, 69, 27, 0.22);
    --color-nav-item-active-text: #ffffff;
    --color-link: #ff6f4d;
    --color-link-hover: #ff8c71;

    --color-ok-fg: #7de2b9;
    --color-ok-bg: rgba(28, 145, 101, 0.26);
    --color-ok-border: rgba(125, 226, 185, 0.3);

    --color-warning-fg: #ffd58d;
    --color-warning-bg: rgba(179, 117, 25, 0.3);
    --color-warning-border: rgba(255, 213, 141, 0.3);

    --color-critical-fg: #ffb2ad;
    --color-critical-bg: rgba(166, 56, 56, 0.3);
    --color-critical-border: rgba(255, 178, 173, 0.3);

    --color-surface-peak: #3f2a22;

    /* Loading skeleton: base piatta tenue + riflesso leggermente piu' chiaro.
       In dark il 7% originale era quasi invisibile sul fondo scuro (skeleton
       "assente" percepito durante gli hard load): alzato il contrasto. */
    --color-skeleton-base: color-mix(in srgb, var(--color-surface-2) 78%, var(--color-text-primary) 13%);
    --color-skeleton-sheen: color-mix(in srgb, var(--color-surface-2) 56%, var(--color-text-primary) 22%);

    color-scheme: dark;
}
:root:not([data-theme="light"]) .ar-demo .d-dashboard .ar-box {
    --ar-veil: rgba(255, 69, 27, 0.16);
    --ar-veil-ok: rgba(31, 155, 109, 0.20);
    --ar-bar-track: rgba(255, 241, 235, 0.12);
    --ar-row-bg: color-mix(in srgb, var(--color-surface-2) 68%, transparent);
    --ar-row-bg-hover: color-mix(in srgb, var(--color-surface-peak) 92%, transparent);
    --ar-panel-bg: rgba(255, 241, 235, 0.04);
    --ar-shadow-lift: 0 26px 54px -30px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] .ar-demo {
    --color-canvas: #2b1711;
    /* Card in tinta col canvas (era #36201a): gerarchia affidata a bordi e
       surface-2/peak. Scelta dall'editor /lab/themes, patch 2026-06-12. */
    --color-surface-1: #2b1711;
    --color-surface-2: #3c261f;
    --color-text-primary: #fff1eb;
    --color-text-secondary: var(--color-text-base);
    --color-border-subtle: rgba(255, 241, 235, 0.14);
    /* Border soft dark: variante piu' tenue del subtle, per stati quiet. */
    --color-border-soft: rgba(255, 241, 235, 0.06);
    --color-nav-surface: #26150f;
    --color-nav-item: #e8cbc0;
    --color-nav-item-active-bg: rgba(255, 69, 27, 0.22);
    --color-nav-item-active-text: #ffffff;
    --color-link: #ff6f4d;
    --color-link-hover: #ff8c71;

    --color-ok-fg: #7de2b9;
    --color-ok-bg: rgba(28, 145, 101, 0.26);
    --color-ok-border: rgba(125, 226, 185, 0.3);

    --color-warning-fg: #ffd58d;
    --color-warning-bg: rgba(179, 117, 25, 0.3);
    --color-warning-border: rgba(255, 213, 141, 0.3);

    --color-critical-fg: #ffb2ad;
    --color-critical-bg: rgba(166, 56, 56, 0.3);
    --color-critical-border: rgba(255, 178, 173, 0.3);

    --color-surface-peak: #3f2a22;

    /* Loading skeleton: base piatta tenue + riflesso leggermente piu' chiaro.
       In dark il 7% originale era quasi invisibile sul fondo scuro (skeleton
       "assente" percepito durante gli hard load): alzato il contrasto. */
    --color-skeleton-base: color-mix(in srgb, var(--color-surface-2) 78%, var(--color-text-primary) 13%);
    --color-skeleton-sheen: color-mix(in srgb, var(--color-surface-2) 56%, var(--color-text-primary) 22%);

    color-scheme: dark;
}
:root[data-theme="dark"] .ar-demo .d-dashboard .ar-box {
    --ar-veil: rgba(255, 69, 27, 0.16);
    --ar-veil-ok: rgba(31, 155, 109, 0.20);
    --ar-bar-track: rgba(255, 241, 235, 0.12);
    --ar-row-bg: color-mix(in srgb, var(--color-surface-2) 68%, transparent);
    --ar-row-bg-hover: color-mix(in srgb, var(--color-surface-peak) 92%, transparent);
    --ar-panel-bg: rgba(255, 241, 235, 0.04);
    --ar-shadow-lift: 0 26px 54px -30px rgba(0, 0, 0, 0.6);
}

/* ---- SITO, non AR (master, 14/09): regola di Davide, nessun testo sopra i 34 px, anche dentro le finte schermate. Conta
   la misura a video: a Paracadute la finestra ha scala 0,96 e il totale da 52 px si vedeva a 50. Stesso selettore della
   regola copiata qui sopra, in coda: vince per ordine. Nell'area riservata vera resta 52. ---- */
.ar-demo .d-dashboard .ar-total__num{font-size:34px}


/* ---- adattamenti della finestra (da css-ar-scena.txt) ---- */
.pk-arwin .ar-vista{
  width:var(--vista-w,1440px);
   
  zoom:var(--k,1);
}
.pk-arwin.ar-demo{
   
  font-family:var(--font-family-base);
  font-weight:500;
  font-size:var(--text-body-size);
  line-height:var(--text-body-line-height);
  color:var(--color-text-primary);
   
  --app-chrome-padding-top:16px;
}
.pk-arwin.ar-demo ol,.pk-arwin.ar-demo ul{list-style:none;margin:0;padding:0}
.pk-arwin.ar-demo .app-shell{
  min-height:0;                  
  background:var(--color-canvas);
}
.pk-arwin.ar-demo .sidebar{
  height:auto;max-height:none;   
  position:sticky;top:0;align-self:start;
}
.pk-arwin.ar-demo .companion-rail{
   
  position:sticky;top:56px;
  max-height:none;               
}
.pk-arwin.ar-demo .app-top-utilities{
  position:sticky;top:0;
   
}
.pk-arwin.ar-demo .content-area{min-height:0}
.pk-arwin.ar-demo .content-shell{display:block}
.pk-arwin.ar-demo .content-shell.has-companion{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--space-5);
  align-items:start;
}
.pk-arwin.ar-demo .d-dashboard__zones{display:flex;flex-direction:column;gap:var(--space-5)}
.pk-arwin.ar-demo [hidden]{display:none !important}
.pk-arwin.ar-demo .c-iscrizioni__layout{padding:var(--space-4) 0;max-width:none}
.pk-arwin.ar-demo .c-iscrizioni__card{height:auto}
.pk-arwin.ar-demo [data-inerte]{cursor:default}
@media (max-width: 1199px){
.pk-arwin.ar-demo .content-shell.has-companion .companion-rail{display:flex}
}
@media (min-width: 1040px) and (max-width: 1199px){
.pk-arwin.ar-demo .content-shell.has-companion{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width: 1039px){
.pk-arwin.ar-demo .content-shell.has-companion{
     
    display:flex;flex-direction:column;gap:var(--space-4);
     
    align-items:stretch;
  }
.pk-arwin.ar-demo .content-shell.has-companion .companion-rail{position:static;top:auto}
}
@media (max-width: 767px){
.pk-arwin.ar-demo .app-top-utilities{display:none}
}

/* ---- la pagina area riservata (L-AR, 14/09): _parti/css-ar-pagina.txt ---- */
/* ============================================================
   LA FINTA AREA RISERVATA DELLA PAGINA /it/area-riservata (innesto del lab C di L-AR, 14/09).
   GENERATO da `.tmp/judge/2026-09-13-l-ar/innesto/build-innesto-ar.py`: non si edita a mano.
   Va in CODA ad ar.css (pagine/build-pagine.py, scrivi_ar_css): dopo il design system dell'AR, come nel lab,
   cosi' gli adattamenti vincono per ordine. Tutto sotto `.pg-ar`: sulle altre 66 pagine che scaricano ar.css non
   colpisce niente.
   Parte 1: le regole di css-ar-scena.txt che vestono finestra, vista e vetrine, riscopate.
   Parte 2: la finestra del lab (scala, taglio, wizard, scroll finto, manina di D5), il pin, le vetrine a due colonne.
   ============================================================ */

/* ---- parte 1: da css-ar-scena.txt ---- */
.pg-ar .ar-win{
  position:absolute;
  display:flex;flex-direction:column;
  background:var(--color-canvas);
  border:1px solid var(--color-border-subtle);
  border-radius:8px;    
   
  box-shadow:var(--shadow-lift);    
  overflow:hidden;
   
  transition:box-shadow .2s ease;
}
.pg-ar .ar-win[hidden]{display:none}
.pg-ar .ar-win__bar{
  flex:none;
  display:flex;align-items:center;gap:10px;
  height:38px;padding:0 12px;
  background:var(--color-surface-2);
  border-bottom:1px solid var(--color-border-subtle);
  cursor:grab;
  user-select:none;-webkit-user-select:none;
   
  touch-action:none;
}
.pg-ar .ar-win__titolo{
  font-size:12px;color:var(--color-text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg-ar .ar-win .win-glifi{display:flex;gap:14px;flex:none;margin-left:14px;color:var(--color-text-secondary)}
.pg-ar .ar-win .win-glifi svg{width:12px;height:12px;display:block}
.pg-ar .ar-win .win-url{flex:none;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border-subtle);font-size:12px;color:var(--color-text-secondary);white-space:nowrap}
.pg-ar .ar-win .win-url svg{width:12px;height:12px;flex:none}
.pg-ar .ar-win__body{flex:1 1 auto;min-height:0;overflow:hidden}
.pg-ar .ar-win > .rp-tab{position:absolute;bottom:0;right:24px;z-index:4}
.pg-ar .ar-vista{
  width:var(--vista-w,1440px);
   
  zoom:var(--k,1);
}
.pg-ar .ar-win.is-vivo .ar-win__body{overflow:auto}
.pg-ar .ar-win.is-tagliata.is-vivo .ar-win__body{overflow:auto}
.pg-ar .ar-win__body::-webkit-scrollbar{width:10px;height:10px}
.pg-ar .ar-win__body::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  border-radius:999px;border:3px solid var(--color-canvas);
}
.pg-ar .ar-demo{
   
  font-family:var(--font-family-base);
  font-weight:500;
  font-size:var(--text-body-size);
  line-height:var(--text-body-line-height);
  color:var(--color-text-primary);
   
  --app-chrome-padding-top:16px;
}
.pg-ar .ar-demo ol,.pg-ar .ar-demo ul{list-style:none;margin:0;padding:0}
.pg-ar .ar-demo .app-shell{
  min-height:0;                  
  background:var(--color-canvas);
}
.pg-ar .ar-demo .sidebar{
  height:auto;max-height:none;   
  position:sticky;top:0;align-self:start;
}
.pg-ar .ar-demo .companion-rail{
   
  position:sticky;top:56px;
  max-height:none;               
}
.pg-ar .ar-demo .app-top-utilities{
  position:sticky;top:0;
   
}
.pg-ar .ar-demo .content-area{min-height:0}
.pg-ar .ar-demo .content-shell{display:block}
.pg-ar .ar-demo .content-shell.has-companion{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--space-5);
  align-items:start;
}
.pg-ar .ar-demo .d-dashboard__zones{display:flex;flex-direction:column;gap:var(--space-5)}
.pg-ar .ar-demo [hidden]{display:none !important}
.pg-ar .ar-demo .c-iscrizioni__layout{padding:var(--space-4) 0;max-width:none}
.pg-ar .ar-demo .c-iscrizioni__card{height:auto}
.pg-ar .ar-demo [data-inerte]{cursor:default}
.pg-ar .kf-vetro :is(span,button,a,label)[data-inerte],.pg-ar .kf-vetro button{cursor:pointer}
@media (max-width: 1299px){
}
@media (max-width: 1199px){
.pg-ar .ar-demo .content-shell.has-companion .companion-rail{display:flex}
}
@media (min-width: 1040px) and (max-width: 1199px){
.pg-ar .ar-demo .content-shell.has-companion{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width: 1039px){
.pg-ar .ar-demo .content-shell.has-companion{
     
    display:flex;flex-direction:column;gap:var(--space-4);
     
    align-items:stretch;
  }
.pg-ar .ar-demo .content-shell.has-companion .companion-rail{position:static;top:auto}
}
@media (max-width: 767px){
.pg-ar .ar-demo .app-top-utilities{display:none}
}
.pg-ar .kf{padding:0 var(--bordo-sx);margin-top:120px}
.pg-ar .kf-testata{margin-bottom:44px;max-width:1180px}
.pg-ar .kf-titolo{font-size:34px;line-height:1.15;letter-spacing:-.015em}
.pg-ar .kf-sotto{font-size:34px;line-height:1.15;letter-spacing:-.015em;color:var(--muted)}
@media (max-width:1180px){
.pg-ar .kf-titolo,.pg-ar .kf-sotto{font-size:28px}
}
@media (max-width:720px){
.pg-ar .kf-titolo,.pg-ar .kf-sotto{font-size:23px}
}
.pg-ar .kf-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1240px){
.pg-ar .kf-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
.pg-ar .kf-griglia{grid-template-columns:1fr}
}
.pg-ar .kf-card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 0 0 26px;       
  display:flex;flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.pg-ar .kf-t{font-size:19px;letter-spacing:-.01em;margin-bottom:8px;padding-right:26px}
.pg-ar .kf-d{font-size:14.5px;line-height:1.5;color:var(--muted);padding-right:26px}
.pg-ar .kf-link{
  display:inline-block;margin:16px 0 26px;
  font-size:14.5px;color:var(--brand-text);
  transition:color var(--t-hover-out, .55s) var(--e-hover, cubic-bezier(.25,.8,.25,1));
}
.pg-ar .kf-link:hover{color:var(--brand-text-hover)}
.pg-ar .kf-vetro{
  position:relative;
  margin-top:auto;
  height:430px;
  border-top-left-radius:var(--r-md);
  border-top:1px solid var(--color-border-subtle);
  border-left:1px solid var(--color-border-subtle);
  background:var(--color-canvas);
  color:var(--color-text-primary);
  font-family:var(--font-family-base);font-weight:500;
  font-size:var(--text-body-size);line-height:var(--text-body-line-height);
  overflow:hidden;
}
.pg-ar .kf-barra{
  height:26px;display:flex;align-items:center;gap:5px;padding-left:11px;
  background:var(--color-surface-2);
  border-bottom:1px solid var(--color-border-subtle);
}
.pg-ar .kf-barra i{
  width:7px;height:7px;border-radius:50%;display:block;
  background:color-mix(in srgb, var(--color-text-primary) 16%, transparent);
}
.pg-ar .kf-schermo{position:relative;height:calc(100% - 26px);overflow:hidden}
.pg-ar .kf-vista{
  width:var(--vista-w,1210px);
  zoom:.85;
   
  margin-top:var(--taglio-y,0);
  margin-left:var(--taglio-x,0);
}
.pg-ar .kf-vetro .content-shell__main{min-width:0}
.pg-ar .kf-vetro .content-area{padding-top:var(--space-4)}
.pg-ar .kf-pill-riga{display:flex;justify-content:flex-end;padding:14px 16px 0}
.pg-ar .kf-tendina{
  position:absolute;left:0;right:0;bottom:0;height:340px;
  color:var(--rp-ink);
}
.pg-ar .kf-tendina .rp-row__head{
   
  display:grid;
   
  grid-template-columns:minmax(0,1fr) auto 112px;
  align-items:center;
  gap:8px;
}
.pg-ar .kf-tendina .rp-row__actions{min-width:0;overflow:hidden;justify-content:flex-end}
.pg-ar .kf-tendina 
.kf-scarica{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:100%;height:26px;padding:0 8px;
  border:1px solid color-mix(in srgb, var(--color-on-brand) 34%, transparent);
  border-radius:var(--radius-pill);
  background:var(--rp-veil-strong);
  color:var(--color-on-brand);
  font:inherit;font-size:11px;line-height:1;
  white-space:nowrap;
}
.pg-ar .kf-scarica .p-icon{width:13px;height:13px;flex:none}
.pg-ar .kf-tendina .rp-nota{display:none}
.pg-ar .kf-tendina .rp-row__desc{font-size:11.5px;margin:2px 0 6px}
.pg-ar .kf-tendina .rp-row__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.pg-ar .kf-tendina .rp-row__num{min-width:46px;text-align:right}
.pg-ar .kf-tendina .rp-bar{--rp-bar-h:30px;width:100%}
.pg-ar .kf-tendina .rp-row__barcol{flex:1 1 0;min-width:0}
.pg-ar .kf-tendina .rp-pct{font-size:17px}
.pg-ar .kf-tendina .rp-state{font-size:10.5px}
.pg-ar .kf-tendina .rp-sheet__inner{
  border-top-left-radius:var(--r-md);
   
  flex-direction:column;
}
.pg-ar .kf-tendina .rp-main{order:1;padding:20px 20px 8px}
.pg-ar .kf-tendina .rp-aside{
  order:2;width:100%;
  padding:12px 20px 16px;
  border-top:1px solid color-mix(in srgb, var(--color-on-brand) 18%, transparent);
  flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;
}
.pg-ar .kf-tendina .rp-aside__lead{font-size:11.5px;max-width:none;flex:1 1 150px}
.pg-ar .kf-tendina .rp-row__title{font-size:15px}
.pg-ar .kf-tendina .rp-row{padding:2px 0}
.pg-ar .kf-vetro{container-type:inline-size}
@container (max-width:330px){
.pg-ar .kf-tendina .rp-row__head{grid-template-columns:minmax(0,1fr) auto}
.pg-ar .kf-tendina .kf-scarica{grid-column:1 / -1;justify-self:end;width:auto}
}
@media (max-width:520px){
.pg-ar .kf-card{padding:22px 0 0 20px}
.pg-ar .kf-t,.pg-ar .kf-d{padding-right:20px}
}
.pg-ar .kf-link:hover{
  transition-duration:var(--t-hover-in, .38s);
}

/* ---- parte 2: dal lab C ---- */
.pg-ar .lar-scena .lar-win{
  position:relative;left:auto;top:auto;right:auto;bottom:auto;
  width:min(1240px,100%);height:auto;margin:0 auto;
  aspect-ratio:1240 / 672;min-height:460px;
}
.pg-ar .lar-win{
   
  container-type:inline-size;
}
.pg-ar .lar-win .ar-win__bar{cursor:default;touch-action:auto}
.pg-ar .lar-win .ar-win__presa{display:none}
.pg-ar .lar-win .ar-win__body{
  -webkit-mask-image:linear-gradient(#000 85%,transparent);
  mask-image:linear-gradient(#000 85%,transparent);
}
.pg-ar .lar-win .ar-vista{--vista-w:1440px;zoom:.72}
.pg-ar .lar-win[data-lar-pagina="wizard"] .ar-vista{--vista-w:1200px}
@supports (width:1cqw){
  .pg-ar .lar-win .ar-vista{zoom:max(.72, calc(100cqw / 1440px))}
  .pg-ar .lar-win[data-lar-pagina="wizard"] .ar-vista{zoom:max(.72, calc(100cqw / 1200px))}
  @container (max-width:1036.8px){
    .pg-ar .lar-win .ar-vista{margin-left:-212px}
    .pg-ar .lar-win[data-lar-pagina="wizard"] .ar-vista{margin-left:0}
  }
}
.pg-ar .lar-win[data-lar-pagina="wizard"] .sidebar,
.pg-ar .lar-win[data-lar-pagina="wizard"] .app-top-utilities{display:none}
.pg-ar .lar-win[data-lar-pagina="wizard"] .app-shell{grid-template-columns:minmax(0,1fr)}
.pg-ar .ar-demo :is(span,button,a,label)[data-inerte],.pg-ar .ar-demo button{cursor:pointer}
.pg-ar[data-lar-modo="vivo"] .lar-win [data-ar-pagina] > .content-shell__main{
  transform:translateY(calc(var(--lar-y, 0px) * -1));
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.pg-ar .lar-win [data-ar-pagina].lar-entra{animation:lar-entra .35s cubic-bezier(.25,.8,.25,1) both}
@keyframes lar-entra{from{opacity:0}to{opacity:1}}
.pg-ar .lar-win .app-top-utilities{z-index:6}
.pg-ar .lar-kf .kf{padding:0;margin-top:0}
.pg-ar .lar-kf .kf-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:800px){
.pg-ar .lar-kf .kf-griglia{grid-template-columns:minmax(0,1fr)}
}