/*
 * AI WhiteBox control plane v3 — il kit.
 * Immagine coordinata Lynx: fondo chiaro, navy per titoli e numeri, grigio per il
 * testo, card bianche con angolo morbido e ombra larga senza bordo.
 * Tutto legge tokens.css. Le classi v2 restano valide (le pagine v2 si ricolorano),
 * quelle nuove sono documentate in KIT.md.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3) 0;
}
h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-3) 0; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
table { border-collapse: collapse; width: 100%; }
button { font-family: inherit; }
strong, b { color: var(--text-strong); font-weight: var(--weight-bold); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* L'occhiello Lynx: solo sopra un titolo, mai altrove. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-code); font-size: 0.85em; color: var(--navy-mark); }
.muted { color: var(--text-subtle); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: var(--weight-bold); text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }
#wb-content:focus { outline: none; box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icone a tratto (WB.icon): stroke navy, niente riempimento. */
.ico { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 26px; height: 26px; }

/* IconBadge Lynx: icona a tratto in un cerchio bianco con anello. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--ring, var(--navy));
  color: var(--navy);
}
.icon-badge .ico { width: 22px; height: 22px; }
.icon-badge--sm { width: 36px; height: 36px; box-shadow: inset 0 0 0 2px var(--ring, var(--navy)); }
.icon-badge--sm .ico { width: 18px; height: 18px; }
.icon-badge--ok   { --ring: var(--ok-500); color: var(--ok-700); }
.icon-badge--warn { --ring: var(--warn-500); color: var(--warn-800); }
.icon-badge--stop { --ring: var(--stop-500); color: var(--stop-700); }
.icon-badge--soft { --ring: var(--blue-400); }

/* ============================================================
   SHELL — barra laterale bianca, contenuto su fondo chiaro
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  position: sticky; top: 0; height: 100vh;
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: 1px 0 0 var(--line-soft);
  z-index: 20;
}
.sidebar__brand { padding: var(--space-5) var(--space-5) var(--space-4); }
.sidebar__brand a { display: inline-block; }
.sidebar__logo { display: block; height: 38px; width: auto; }
.sidebar__product {
  margin-top: var(--space-2);
  font-size: var(--text-2xs); color: var(--text-subtle);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium);
}

.sidebar__nav { flex: 1; padding: var(--space-2) var(--space-3); overflow-y: auto; }
.sidebar__section {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle);
}
.sidebar__section:first-child { padding-top: var(--space-1); }

.sidebar__link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  margin: 1px 0;
  color: var(--text);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast);
}
.sidebar__link .ico { color: var(--blue-700); }
.sidebar__link:hover { background: var(--surface-panel); color: var(--navy); }
.sidebar__link.is-active { background: var(--navy); color: var(--white); font-weight: var(--weight-medium); }
.sidebar__link.is-active .ico { color: var(--white); }
.sidebar__link.is-locked { color: var(--text-subtle); cursor: default; }
.sidebar__link.is-locked .ico { color: var(--line); }
.sidebar__link.is-locked:hover { background: none; color: var(--text-subtle); }
.sidebar__badge {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--warn-100); color: var(--warn-800);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar__link.is-active .sidebar__badge { background: var(--white); color: var(--navy); }

.lock-icon { display: inline-flex; margin-left: auto; width: 14px; height: 14px; color: inherit; }
.lock-icon::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") center/contain no-repeat; }

.sidebar__foot {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.sidebar__by { font-size: var(--text-2xs); color: var(--text-subtle); }
.sidebar__marks { display: flex; align-items: center; gap: var(--space-4); }
.sidebar__marks img { display: block; height: 22px; width: auto; }
.sidebar__marks .mark-lynx { height: 26px; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  min-height: var(--header-h);
  padding: var(--space-3) var(--space-7);
  background: rgba(242, 244, 248, 0.88);
  backdrop-filter: blur(8px);
}
.topbar__title { font-size: var(--text-sm); color: var(--text-subtle); font-weight: var(--weight-medium); }
.topbar__title b { color: var(--navy); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.topbar__org { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--navy); font-weight: var(--weight-bold); }
.topbar__org .ico { width: 18px; height: 18px; stroke-width: 2.2; color: var(--navy); }

/* Percorso in alto (v6): sezione come etichetta nelle pagine di primo livello, poi fino a
   tre parti separate da ›, tutte cliccabili tranne l'ultima. */
.crumbs { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-subtle); }
.crumbs__section { font-weight: var(--weight-medium); }
.crumbs__link { color: var(--text-link); text-decoration: none; font-weight: var(--weight-medium); }
.crumbs__link:hover { text-decoration: underline; }
.crumbs__sep { color: var(--line); font-weight: var(--weight-regular); }
.crumbs b { color: var(--navy); }

.field-inline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.field-inline label { color: var(--text-subtle); }
.field-inline select { min-height: 38px; padding: 6px 32px 6px 12px; }
.inline-money { flex-wrap: wrap; }

.content {
  padding: var(--space-3) var(--space-7) var(--space-10);
  max-width: var(--container-xl);
  width: 100%;
}

/* Testata di pagina: occhiello, titolo grande navy, una frase che dice a cosa serve,
   azione principale a destra. */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-6);
}
.page-head__text { max-width: 760px; }
.page-head h1 { margin: var(--space-1) 0 var(--space-2); }
.page-head__context { font-size: var(--text-sm); color: var(--text-subtle); margin: 0; line-height: var(--leading-normal); }
.page-head__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin: var(--space-7) 0 var(--space-4); }
.section-title h2 { margin: 0; font-size: var(--text-lg); }
.section-title p { margin: 0; color: var(--text-subtle); font-size: var(--text-xs); }

/* ============================================================
   AGENT FRAME (pannello del singolo agente)
   ============================================================ */
.agent-frame { min-height: 100vh; background: var(--surface-page); }
.agent-frame__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-7);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}
.agent-frame__back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-link); text-decoration: none; font-weight: var(--weight-medium); }
.agent-frame__back:hover { text-decoration: underline; }
.agent-frame__banner { background: var(--blue-100); color: var(--navy); padding: var(--space-2) var(--space-7); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.agent-frame .content { margin: 0 auto; }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-5); }
/* v8: carte affiancate in una griglia = stessa altezza, niente scalino dal margine */
.grid > .card + .card, .stat-row > * + *, [class*="grid"] > .card + .card, [class*="-cards"] > .card + .card { margin-top: 0; }
.grid, .stat-row { align-items: stretch; }
.grid--equal > * { height: 100%; display: flex; flex-direction: column; }
.card--fill { height: 100%; display: flex; flex-direction: column; }
.card__foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.card--flat { box-shadow: none; background: var(--surface-soft); }
.card--tight { padding: var(--space-5); }
.card--link { cursor: pointer; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card__title { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--navy); margin-bottom: var(--space-3); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card__head h2, .card__head h3 { margin: 0; }
.card__sub { color: var(--text-subtle); font-size: var(--text-xs); margin: var(--space-1) 0 0; }

/* Fascia Lynx: card bianche appoggiate su una fascia grigia che sborda sotto. */
.band { position: relative; padding-bottom: var(--space-6); }
.band::after { content: ""; position: absolute; left: calc(var(--space-7) * -1); right: calc(var(--space-7) * -1); top: 40%; bottom: 0; background: var(--surface-canvas); z-index: -1; border-radius: 0; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spacer { flex: 1; }

/* ============================================================
   CARD CHE PARLA (.stat) — icona + numero + la riga che lo traduce + gesto
   ============================================================ */
.stat {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0;
  text-align: left; border: 0; font: inherit; color: inherit;
}
button.stat, a.stat { cursor: pointer; text-decoration: none; transition: box-shadow var(--duration-base), transform var(--duration-base); }
button.stat:hover, a.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat__top { display: flex; align-items: center; gap: var(--space-3); }
.stat__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy); }
.stat__value { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--navy); line-height: 1; letter-spacing: var(--tracking-tight); }
.stat__value small { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-subtle); letter-spacing: 0; margin-top: 6px; }
.stat__say { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-normal); margin: 0; }
.stat__say b { color: var(--navy); }
.stat__go { margin-top: auto; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--navy); display: inline-flex; gap: 6px; align-items: center; }
.stat__go::after { content: "→"; color: var(--blue-500); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }
/* v8: nelle carte affiancate la riga del titolo ha un'altezza minima comune, così i numeri
   partono dalla stessa base anche se un'etichetta va su due righe. */
.stat-row .stat__top { min-height: 56px; }
.stat-row--tight { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Anello (donut) per un rapporto su un totale. */
.ring { position: relative; width: 64px; height: 64px; flex: 0 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: var(--surface-canvas); }
.ring__fill { stroke: var(--navy); stroke-linecap: round; transition: stroke-dashoffset var(--duration-fill) var(--ease-out); }
.ring__fill.is-warn { stroke: var(--warn-500); }
.ring__fill.is-stop { stroke: var(--stop-500); }
.ring__txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--navy); }

/* KPI v2 (resta per compatibilità): numero navy, etichetta leggibile. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); }
.kpi__value { font-weight: var(--weight-bold); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--navy); line-height: 1.1; }
.kpi__label { font-size: var(--text-xs); color: var(--text); font-weight: var(--weight-medium); }
.kpi__note { font-size: var(--text-xs); color: var(--text-subtle); }

/* ============================================================
   TABELLA LEGGIBILE — righe alte, niente zebra, riga intera cliccabile
   ============================================================ */
.table-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); }
.table-tools .search { flex: 0 1 300px; }
.table-wrap { overflow-x: auto; }
/* v14 (2/10): tabelle larghe scorrono in orizzontale invece di comprimere le colonne */
.table-wrap--wide { overflow-x: auto; scrollbar-gutter: stable; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: var(--navy) var(--surface-canvas); }
.table-wrap--wide::-webkit-scrollbar { height: 10px; }
.table-wrap--wide::-webkit-scrollbar-track { background: var(--surface-canvas); border-radius: 5px; }
.table-wrap--wide::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 5px; }
@media (min-width: 641px) { .table-wrap--wide > .table { width: max-content; min-width: 100%; } }
.table { font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table td { height: var(--row-h); }
.table th {
  font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-subtle);
  letter-spacing: var(--tracking-wide); background: var(--surface); white-space: nowrap;
  position: sticky; top: 0;
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr { transition: background var(--duration-fast); }
.table tbody tr:hover { background: var(--blue-50); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:focus-visible { box-shadow: inset 3px 0 0 var(--blue-500); background: var(--blue-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-main { color: var(--navy); font-weight: var(--weight-medium); }
.cell-sub { display: block; color: var(--text-subtle); font-size: var(--text-xs); margin-top: 2px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line-soft); font-size: var(--text-xs); color: var(--text-subtle); }
.pager { display: flex; gap: var(--space-1); }
.pager button { min-width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--navy); cursor: pointer; }
.pager button.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pager button:disabled { opacity: .45; cursor: default; }

/* Ricerca e pillole di filtro */
.search { position: relative; display: flex; align-items: center; }
.search .ico { position: absolute; left: 12px; color: var(--text-subtle); pointer-events: none; width: 18px; height: 18px; }
.search input { width: 100%; padding-left: 38px !important; min-height: 40px; border-radius: var(--radius-pill) !important; }
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer;
  transition: all var(--duration-fast);
}
.filter-pill:hover { border-color: var(--blue-500); color: var(--navy); }
.filter-pill.is-active, .filter-pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-pill .count { font-weight: var(--weight-bold); opacity: .8; }

/* ============================================================
   CHIP / PILLOLE DI STATO — colore + icona + parola, mai solo colore
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  border: 0; white-space: nowrap; line-height: 1.5;
}
.chip .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.chip--ok        { background: var(--ok-100);   color: var(--ok-700); }
.chip--avviso    { background: var(--warn-100); color: var(--warn-800); }
.chip--degradato { background: var(--warn-100); color: var(--warn-800); }
.chip--bloccato  { background: var(--stop-100); color: var(--stop-700); }
.chip--neutral   { background: var(--surface-soft); color: var(--text); }
.chip--info      { background: var(--blue-100); color: var(--blue-800); }
.chip--navy      { background: var(--navy); color: var(--white); }
.alloc-note { font-size: var(--text-2xs); color: var(--text-subtle); }
/* Etichette e note di progetto: nascoste in demo, visibili se accese dalla Guida. */
body:not(.show-origins) .origin-chip, body:not(.show-origins) .origin-note { display: none !important; }
.origin-note { border-left: 3px solid var(--blue-400); background: var(--blue-50); padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-xs); color: var(--text); margin: var(--space-3) 0; }

/* ============================================================
   LA SCALA DEL BUDGET (.scale) — la cosa memorabile.
   Barra che si riempie; sopra, i gradini delle regole: 70% scende di modello,
   100% il comportamento scelto. Stessa forma ovunque; --compact in lista.
   ============================================================ */
.scale { --fill: 0%; display: flex; flex-direction: column; gap: var(--space-2); min-width: 200px; }
.scale__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.scale__who { font-weight: var(--weight-medium); color: var(--navy); }
.scale__who small { display: block; font-weight: var(--weight-regular); color: var(--text-subtle); font-size: var(--text-2xs); }
.scale__money { font-size: var(--text-xs); color: var(--text); white-space: nowrap; }
.scale__money b { font-size: var(--text-sm); }
.scale__track {
  position: relative; height: 14px; border-radius: var(--radius-pill);
  background: repeating-linear-gradient(90deg, var(--surface-canvas) 0 100%);
  overflow: visible;
}
.scale__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--blue-700), var(--navy));
  transition: width var(--duration-fill) var(--ease-out);
}
/* Oltre la soglia di discesa il tratto diventa ambra; al 100% rosso. */
.scale__over { position: absolute; top: 0; bottom: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--warn-500); transition: width var(--duration-fill) var(--ease-out); }
.scale.is-minimo .scale__over, .scale.is-bloccato .scale__over { background: var(--stop-500); }
.scale.is-sospeso .scale__fill { background: var(--line); }
.scale.is-sospeso .scale__over { display: none; }
.scale__step {
  position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px;
  background: var(--navy-deep);
}
.scale__step::after {
  content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--navy-deep);
}
.scale__step--end { left: 100%; }
.scale__labels { display: grid; gap: 0; font-size: var(--text-2xs); color: var(--text); line-height: 1.35; }
.scale__label { min-width: 0; padding-right: var(--space-2); overflow: hidden; }
.scale__label b { display: block; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scale__label--light { padding-left: 8px; border-left: 0; }
.scale__label--light b { color: var(--warn-800); }
.scale__now { font-size: var(--text-xs); color: var(--text); display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.scale__end { margin-left: auto; color: var(--text); }
.scale__now b { color: var(--navy); }
.scale--compact { gap: 6px; min-width: 160px; }
.scale--compact .scale__track { height: 8px; }
.scale--compact .scale__step { top: -4px; bottom: -4px; }
.scale--compact .scale__step::after { display: none; }
.scale--compact .scale__labels { display: none; }
.scale--big .scale__track { height: 20px; }
.scale--big .scale__labels { font-size: var(--text-xs); }

/* Barra consumo v2 (resta, ristilizzata) */
.bar { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.bar__track { position: relative; height: 8px; background: var(--surface-canvas); border-radius: var(--radius-pill); overflow: visible; }
.bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--navy); transition: width var(--duration-fill) var(--ease-out); }
.bar__fill.is-avviso, .bar__fill.is-degradato { background: var(--warn-500); }
.bar__fill.is-bloccato { background: var(--stop-500); }
.bar__marker { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--navy-deep); border-radius: 1px; }
.bar__caption { font-size: var(--text-2xs); color: var(--text); }
.bar__legend { font-size: var(--text-2xs); color: var(--text-subtle); }

/* ============================================================
   CAMPI
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); min-width: 0; }
.field label, .field__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--navy); }
.field .hint, .hint { font-size: var(--text-xs); color: var(--text-subtle); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--stop-500); }
.field__error { font-size: var(--text-xs); color: var(--stop-700); display: flex; gap: 6px; align-items: center; }

input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], select, textarea {
  font-family: inherit; font-size: var(--text-sm);
  min-height: 42px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--navy-mark);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--blue-400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--shadow-focus); }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002b58' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
textarea { resize: vertical; min-height: 84px; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-soft); color: var(--text-subtle); cursor: not-allowed; }

input[type="range"] { width: 100%; accent-color: var(--navy); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); width: 18px; height: 18px; }

/* Interruttore */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 42px; height: 24px; border-radius: var(--radius-pill); background: var(--line); position: relative; transition: background var(--duration-fast); flex: 0 0 auto; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--duration-base) var(--ease-standard); }
.switch input:checked + .switch__track { background: var(--navy); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--shadow-focus); }
.switch input:disabled + .switch__track { opacity: .5; }

/* Scelta a schede (radio/checkbox grandi) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.choice {
  position: relative; display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer; transition: box-shadow var(--duration-fast), background var(--duration-fast);
}
.choice:hover { box-shadow: inset 0 0 0 1px var(--blue-500); }
.choice input { position: absolute; opacity: 0; }
.choice__mark { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); flex: 0 0 auto; margin-top: 2px; transition: box-shadow var(--duration-fast); }
.choice--check .choice__mark { border-radius: 6px; }
.choice input:checked ~ .choice__mark { box-shadow: inset 0 0 0 6px var(--navy); }
.choice--check input:checked ~ .choice__mark { box-shadow: none; background: var(--navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center/14px no-repeat; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--navy); background: var(--blue-50); }
.choice:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--navy), var(--shadow-focus); }
.choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.choice__body { min-width: 0; }
.choice__title { font-weight: var(--weight-medium); color: var(--navy); display: block; }
.choice__desc { font-size: var(--text-xs); color: var(--text); display: block; margin-top: 2px; }
.choice__meta { font-size: var(--text-2xs); color: var(--text-subtle); display: block; margin-top: 6px; }

.locked-field { position: relative; }
.locked-field .lock-icon { color: var(--warn-600); margin-left: var(--space-1); }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus::after, [data-tip]:focus-within::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--navy-deep); color: var(--white);
  font-size: var(--text-2xs); font-weight: var(--weight-regular); line-height: 1.4;
  padding: 6px 10px; border-radius: var(--radius-sm);
  white-space: normal; width: max-content; max-width: 280px;
  z-index: 60; box-shadow: var(--shadow-lg);
  text-transform: none; letter-spacing: 0;
}
[data-tip]:hover::before, [data-tip]:focus::before, [data-tip]:focus-within::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 12px;
  border: 6px solid transparent; border-top-color: var(--navy-deep); border-bottom: 0; z-index: 60;
}

/* ============================================================
   BOTTONI — tre pesi, dimensione secondo l'importanza (linea del designer esterno)
   primario: navy pieno · secondario: il bottone Lynx a contorno · link con freccia
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.btn .ico { width: 18px; height: 18px; stroke-width: 2; }
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-hover); }
.btn--primary:active { background: var(--navy-deep); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--danger { background: var(--surface); color: var(--stop-700); border-color: var(--stop-500); }
.btn--danger:hover { background: var(--stop-700); color: var(--white); border-color: var(--stop-700); }
.btn--danger-solid { background: var(--stop-700); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); font-weight: var(--weight-medium); }
.btn--ghost:hover { background: var(--surface-soft); }
.btn--link { background: none; border: 0; padding: 0; min-height: auto; color: var(--navy); font-weight: var(--weight-bold); }
.btn--link::after { content: "→"; color: var(--blue-500); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--text-base); border-radius: var(--radius-md); }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: var(--text-xs); }
.btn--icon { width: 40px; padding: 0; }
.btn:disabled, .btn.is-locked { background: var(--surface-soft); color: var(--text-subtle); border-color: var(--line-soft); cursor: not-allowed; box-shadow: none; }
.btn--link:disabled { background: none; }

.lang-switch { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.lang-switch__btn { border-radius: 0; min-height: 36px; padding: 0 12px; font-size: var(--text-xs); }
.lang-switch__btn.is-active { background: var(--navy); color: var(--white); }
.lang-switch__btn.is-active:hover { background: var(--navy-hover); color: var(--white); }

/* ============================================================
   LINGUETTE — segmentate, per cambiare vista nella stessa pagina
   ============================================================ */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-5); background: var(--surface-canvas); border-radius: var(--radius-pill); overflow-x: auto; max-width: 100%; }
.tab { flex-shrink: 0; min-height: 36px; padding: 0 18px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text); background: none; border: none; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--duration-fast); }
.tab:hover { color: var(--navy); }
.tab.is-active { background: var(--surface); color: var(--navy); font-weight: var(--weight-bold); box-shadow: var(--shadow-xs); }

/* ============================================================
   DIALOGO (conferma, motivo)
   ============================================================ */
.overlay {
  position: fixed; inset: 0; background: var(--surface-overlay);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-4);
  animation: wb-fade var(--duration-base) var(--ease-standard);
}
.dialog {
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  width: 100%; max-width: 500px; padding: var(--space-6);
  animation: wb-pop var(--duration-base) var(--ease-out);
  /* Una finestra alta scorre dentro, con titolo e azioni fissi (BL-49). */
  max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; overscroll-behavior: contain;
}
.dialog--wide { max-width: 720px; }
/* v8: il titolo si aggancia al bordo della finestra (top negativo pari al riempimento), non al bordo interno: prima copriva i primi 24 px del contenuto.
   v10: titolo e azioni sono fissi (sticky) solo quando la finestra scorre davvero (`.dialog.is-scrolling`, messa dal kit):
   in una finestra bassa la barra delle azioni copriva le ultime righe del corpo. */
.dialog__title { z-index: 2; font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--navy); margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); padding: var(--space-6) var(--space-6) var(--space-2); background: var(--surface-card); }
.dialog__body { font-size: var(--text-sm); color: var(--text); margin-bottom: var(--space-5); }
.dialog__actions { z-index: 2; display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-3) var(--space-6) var(--space-6); background: var(--surface-card); }
.dialog.is-scrolling .dialog__title { position: sticky; top: calc(-1 * var(--space-6)); }
.dialog.is-scrolling .dialog__actions { position: sticky; bottom: calc(-1 * var(--space-6)); }

/* ============================================================
   PANNELLO DA DESTRA (drawer) — dettaglio, modifica, wizard.
   Titolo e sottotitolo in testa, contenuto che scorre, azioni fisse in fondo
   (primaria a destra). La pagina sotto resta visibile.
   ============================================================ */
.drawer-overlay { position: fixed; inset: 0; background: var(--surface-overlay); z-index: 90; animation: wb-fade var(--duration-base) var(--ease-standard); }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: var(--drawer-w); max-width: 96vw;
  background: var(--surface); box-shadow: var(--shadow-xl); z-index: 95;
  display: flex; flex-direction: column;
  animation: wb-slide var(--duration-slow) var(--ease-out);
}
.drawer--wide { width: 760px; }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.drawer__title { font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--navy); line-height: var(--leading-snug); margin: 0; }
.drawer__sub { font-size: var(--text-sm); color: var(--text); margin: var(--space-1) 0 0; }
.drawer__close { flex: 0 0 auto; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-6); }
.drawer__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line-soft); background: var(--surface); }
.drawer__foot .spacer { flex: 1; }
/* v2: drawer senza head/body/foot — il padding resta sul contenitore */
.drawer:not(:has(.drawer__body)) { padding: var(--space-6); overflow-y: auto; display: block; }

.dl { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.dl dt { color: var(--text-subtle); }
.dl dd { margin: 0; color: var(--navy-mark); font-weight: var(--weight-medium); min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   STEPPER (wizard)
   ============================================================ */
.stepper { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.stepper__item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-2xs); color: var(--text-subtle); counter-increment: step; }
.stepper__bar { height: 4px; border-radius: var(--radius-pill); background: var(--surface-canvas); overflow: hidden; }
.stepper__bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--navy); transition: width var(--duration-slow) var(--ease-out); }
.stepper__item.is-done .stepper__bar::after, .stepper__item.is-current .stepper__bar::after { width: 100%; }
.stepper__item.is-current .stepper__bar::after { background: var(--blue-500); }
.stepper__name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__name::before { content: counter(step) ". "; }
.stepper__item.is-current .stepper__name, .stepper__item.is-done .stepper__name { color: var(--navy); }
.stepper__item.is-current .stepper__name { font-weight: var(--weight-bold); }

/* Riepilogo sempre visibile (wizard) */
.summary { background: var(--surface-panel); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-xs); }
.summary__row { display: flex; gap: var(--space-3); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.summary__row:last-child { border-bottom: 0; }
.summary__k { color: var(--text-subtle); flex: 0 0 110px; }
.summary__v { color: var(--navy); font-weight: var(--weight-medium); min-width: 0; }
.summary__v.is-empty { color: var(--text-subtle); font-weight: var(--weight-regular); font-style: italic; }
.summary__v.is-todo, .summary__v.is-no, .summary__v.is-ok { display: inline-flex; align-items: center; gap: 6px; }
.summary__v.is-todo, .summary__v.is-no { color: var(--stop-700); }
.summary__v.is-ok { color: var(--ok-700); }
.wiz-foot-note { font-size: var(--text-xs); color: var(--stop-700); max-width: 320px; text-align: right; }
.wiz-foot-note[hidden] { display: none; }
.summary__v.is-todo .ico, .summary__v.is-no .ico, .summary__v.is-ok .ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Avviso in pagina (callout) */
.callout { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--blue-100); color: var(--navy-mark); font-size: var(--text-sm); }
.callout .ico { color: var(--blue-800); margin-top: 1px; }
.callout--warn { background: var(--warn-100); color: var(--warn-800); }
.callout--warn .ico { color: var(--warn-800); }
.callout--stop { background: var(--stop-100); color: var(--stop-700); }
.callout--stop .ico { color: var(--stop-700); }
.callout--ok { background: var(--ok-100); color: var(--ok-700); }
.callout--ok .ico { color: var(--ok-700); }
.callout p { margin: 0; }
.callout b { color: inherit; }

/* ============================================================
   STATI: vuoto, caricamento, errore
   ============================================================ */
.empty { text-align: center; padding: var(--space-9) var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.empty h3 { margin: var(--space-2) 0 0; font-size: var(--text-lg); }
.empty p { margin: 0 0 var(--space-3); color: var(--text); max-width: 420px; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-canvas); border-radius: var(--radius-sm); min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: wb-shimmer 1.3s infinite; }
.skeleton--line { height: 14px; margin: 8px 0; }
.skeleton--block { height: 120px; border-radius: var(--radius-lg); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack { position: fixed; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: 120; }
/* v10 (R11): nei colori del design system, fondo bianco, bordo e testo navy, icona del tono;
   la variante di errore (tone-danger) usa il tono stop. Nessun fondo nero. */
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); color: var(--navy); font-weight: var(--weight-medium);
  border: 1.5px solid var(--navy);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  box-shadow: var(--shadow-xl); min-width: 260px; max-width: 440px;
  animation: wb-rise var(--duration-base) var(--ease-out);
}
.toast__icon { flex: 0 0 auto; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-100); color: var(--navy); }
.toast__icon .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.toast__text { flex: 1 1 auto; }
.toast__close { flex: 0 0 auto; border: 0; background: none; color: var(--text); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); }
.toast__close:hover { color: var(--navy); }
.toast.tone-success .toast__icon { background: var(--ok-100); color: var(--ok-700); }
.toast.tone-warning .toast__icon { background: var(--warn-100); color: var(--warn-800); }
.toast.tone-danger { border-color: var(--stop-700); color: var(--stop-700); }
.toast.tone-danger .toast__icon { background: var(--stop-100); color: var(--stop-700); }

/* L'elemento appena cambiato si illumina un istante */
.just-changed { animation: wb-glow 1.6s var(--ease-out); }

@keyframes wb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wb-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wb-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wb-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wb-shimmer { to { transform: translateX(100%); } }
@keyframes wb-glow { 0% { box-shadow: 0 0 0 0 rgba(92,159,214,.0); background-color: var(--blue-100); } 100% { background-color: transparent; } }

/* ============================================================
   SCHERMATA DI ACCESSO
   ============================================================ */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); background: var(--surface); }
.login > * { min-width: 0; }
.login__photo { position: relative; background: var(--navy-deep) url("brand/cover-network.jpg") center/cover no-repeat; color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-8); }
.login__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,13,28,.35), rgba(0,13,28,.82)); }
.login__photo > * { position: relative; }
.login__claim { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.12; letter-spacing: var(--tracking-tight); max-width: 560px; margin: 0; color: var(--white); }
.login__claim-sub { font-size: var(--text-md); font-weight: var(--weight-light); max-width: 520px; margin: var(--space-4) 0 0; color: rgba(255,255,255,.86); }
.login__form { display: flex; flex-direction: column; justify-content: center; padding: var(--space-9) var(--space-9); max-width: 560px; }
.login__form h1 { font-size: var(--text-2xl); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .grid--main-side, .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { position: static; height: auto; flex: none; flex-direction: row; align-items: center; overflow-x: auto; box-shadow: 0 1px 0 var(--line-soft); }
  .sidebar__brand { padding: var(--space-3) var(--space-4); }
  .sidebar__logo { height: 28px; }
  .sidebar__product, .sidebar__section, .sidebar__foot { display: none; }
  .sidebar__nav { display: flex; flex: none; padding: 0 var(--space-2); overflow-x: auto; }
  .sidebar__link { white-space: nowrap; }
  .topbar { position: static; padding: var(--space-3) var(--space-4); }
  .content { padding: var(--space-3) var(--space-4) var(--space-8); }
  .grid--2 { grid-template-columns: 1fr; }
  .drawer, .drawer--wide { width: 100%; max-width: 100%; }
  .login { grid-template-columns: 1fr; }
  .login__photo { min-height: 280px; padding: var(--space-6); }
  .login__form { padding: var(--space-6); }
}
@media (max-width: 600px) {
  .topbar__org { display: none; }
  .list-detail { grid-template-columns: 1fr; }
  .list-detail__list { max-height: 260px; }
  .field-inline label { display: none; }
  .stat__value { font-size: var(--text-2xl); }
  h1 { font-size: var(--text-xl); }
}

/* ============================================================
   KIT v6 — etichetta di roadmap, salvataggio con motivo, elenco e dettaglio,
   riga osservata, dato non aggiornato, lucchetto con «Serve · Lo concede».
   Nessun colore nuovo: solo le variabili di tokens.css.
   ============================================================ */
/* v7: il segno discreto sui controlli non ancora disponibili (WB.roadmapTag): icona piccola,
   niente testo, suggerimento «Non ancora disponibile · vedi Dove siamo nella Guida». */
.roadmap-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--blue-700); background: var(--blue-50); cursor: help; vertical-align: middle; flex: 0 0 auto; }
.roadmap-mark .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.roadmap-mark:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.roadmap-band { display: none; } /* v7: la fascia sotto il titolo non si disegna più */
.roadmap-closed { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.btn.is-roadmap, .is-roadmap { opacity: .6; cursor: not-allowed; }

.costo-lavoro { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); align-items: center; }
.costo-lavoro dt { color: var(--text-subtle); margin: 0; }
.costo-lavoro dd { margin: 0; color: var(--navy); display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 480px) { .costo-lavoro { grid-template-columns: 1fr; } .costo-lavoro dd { margin-bottom: var(--space-2); } }
/* v14: nella carta stretta della pagina dell'agente le due colonne non stanno: etichetta sopra, valore sotto */
.stat .costo-lavoro { grid-template-columns: 1fr; gap: 0; }
.stat .costo-lavoro dt { font-size: var(--text-xs); }
.stat .costo-lavoro dd { margin-bottom: var(--space-2); }
.stat .costo-lavoro dd:last-child { margin-bottom: 0; }

.btn.is-locked { opacity: .65; cursor: not-allowed; }
.btn.is-locked .lock-icon { margin-left: 2px; }

.save-preview__intro { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.save-preview__title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.save-preview__list { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); list-style: none; background: var(--surface-soft); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--navy); }
.save-preview__list li + li { margin-top: var(--space-1); }
.field-error { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--stop-700); }
.request-dialog__to { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.request-dialog__to b { color: var(--navy); }

.observed-line { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text); }
.observed-line .ico { color: var(--blue-700); }

.stale-band { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.stale-band .ico { width: 14px; height: 14px; }
.stale-band--ok { background: var(--ok-100); color: var(--ok-700); }
.stale-band--warn { background: var(--warn-100); color: var(--warn-800); }
.stale-band--stop { background: var(--stop-100); color: var(--stop-700); }
.stale-band__note { font-weight: var(--weight-regular); }

.list-detail { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.list-detail__list { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100vh - var(--header-h) - var(--space-6)); display: flex; flex-direction: column; }
.list-detail__tools { padding: var(--space-4); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--space-3); }
.list-detail__items { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.list-detail__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.list-detail__item:hover { background: var(--surface-panel); }
.list-detail__item.is-active { background: var(--navy); color: var(--white); }
.list-detail__item.is-active .cell-main, .list-detail__item.is-active .cell-sub { color: var(--white); }
.list-detail__detail { min-width: 0; }
/* v14 (2/10): elenco e dettaglio con la stessa altezza, bordi alto e basso allineati */
@media (min-width: 901px) {
  .list-detail--eguali { align-items: stretch; }
  .list-detail--eguali .list-detail__list { position: static; max-height: none; }
  .list-detail--eguali .list-detail__items { flex: 1 1 0; min-height: 0; }
  .list-detail--eguali .list-detail__detail { display: flex; flex-direction: column; }
  .list-detail--eguali .list-detail__detail > .card { flex: 1 1 auto; }
}
@media (max-width: 900px) {
  .list-detail { grid-template-columns: 1fr; }
  .list-detail__list { position: static; max-height: none; }
}

/* ============================================================
   KIT v6, passo 9 — menu Demo, caricamento, carte sotto 640 px, spunte,
   blocco «Per tecnici», errore sotto il campo. Solo variabili di tokens.css.
   ============================================================ */
/* Il menu Demo: gli strumenti di chi presenta, in alto a destra (BL-31). */
.demo-menu { position: relative; }
.demo-menu > summary { list-style: none; cursor: pointer; }
.demo-menu > summary::-webkit-details-marker { display: none; }
.demo-menu[open] > summary { background: var(--surface-panel); color: var(--navy); }
.demo-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; width: min(320px, calc(100vw - 2 * var(--space-4))); padding: var(--space-4) var(--space-5); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: wb-pop var(--duration-base) var(--ease-out); }
.demo-menu__lead { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--text-subtle); }
.demo-menu__field { margin-bottom: var(--space-4); }
.demo-menu__switch { display: flex; margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.demo-menu__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.demo-menu__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 600px) { .demo-menu__panel { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; width: auto; } }

/* Il caricamento visibile a ogni apertura (BL-45): copre il contenuto per un attimo. */
.page-loading { position: fixed; z-index: 50; background: var(--surface-page); pointer-events: none; }
.page-loading__inner { padding: var(--space-6) var(--space-7); max-width: 900px; }
.page-loading__inner .skeleton--block { margin: var(--space-4) 0; }
@media (max-width: 900px) { .page-loading__inner { padding: var(--space-3) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* Le tabelle del kit diventano carte sotto 640 px (BL-49): ogni cella porta la sua intestazione. */
@media (max-width: 640px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr { display: block; width: 100%; }
  .table--stack tbody tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); height: auto; padding: 3px 0; border-bottom: 0; text-align: left; }
  .table--stack td::before { content: attr(data-label); flex: 0 0 38%; font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-subtle); padding-top: 2px; }
  .table--stack td:first-child { display: block; padding-bottom: var(--space-2); }
  .table--stack td:first-child::before { display: none; }
  .table--stack td.num { text-align: right; white-space: normal; }
  .table--stack td > * { min-width: 0; }
  .table--stack tbody tr.is-clickable:focus-visible { box-shadow: inset 3px 0 0 var(--blue-500); }
}
/* Le linguette e i chip vanno a capo sui telefoni invece di scorrere o di allargare la pagina. */
@media (max-width: 600px) {
  .tabs { flex-wrap: wrap; border-radius: var(--radius-md); overflow: visible; }
  .chip { white-space: normal; }
}

/* La lista di spunte di «Controlli prima di attivare» (wizard, pagina dell'agente). */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.check-list__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.check-list__item:last-child { border-bottom: none; }
.check-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-list__text { color: var(--navy-mark); }
.check-list__note { font-size: var(--text-xs); color: var(--text-subtle); }
.check-list__item.is-no .check-list__note { color: var(--stop-700); }
.dialog .check-list { max-height: 220px; overflow-y: auto; margin-bottom: var(--space-3); padding-right: var(--space-2); }

/* Il blocco «Per tecnici», chiuso. */
.tech-block { margin-top: var(--space-5); border-radius: var(--radius-md); background: var(--surface-soft); }
.tech-block > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy); list-style: none; }
.tech-block > summary::-webkit-details-marker { display: none; }
.tech-block > summary .ico { width: 16px; height: 16px; color: var(--blue-700); }
.tech-block__body { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--text); }
.tech-block__body .code { word-break: break-word; }

/* L'errore sotto il campo obbligatorio (BL-49). */
.field.has-error .field-error { display: block; }
.field-error[hidden] { display: none; }

/* ============================================================
   KIT v8 — dalla rev4.2: tendina dell'interfaccia, grafici con etichetta, link con
   la freccia sottolineato, data di oggi, menu con le iniziali, sfocatura dei pannelli.
   Nessun colore nuovo: solo le variabili di tokens.css.
   ============================================================ */

/* Sfondo dei pannelli laterali (WB.drawer): sfocatura leggera sopra il velo scuro.
   Senza supporto di backdrop-filter resta il velo di sempre. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drawer-overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}

/* Link testuale con la freccia: sottolineato al passaggio del mouse e al fuoco da tastiera,
   anche quando il mouse è sulla carta che lo contiene. .btn--underline = sempre sottolineato.
   Freccia: → di base, ↓ con .btn--down o .btn--toggle, ↑ con .btn--up o quando il toggle è
   aperto. Un link ha un solo movimento: la freccia non scorre più. */
.btn--link { text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn--link:hover, .btn--link:focus-visible, .btn--underline,
a:hover .btn--link, a:focus-visible .btn--link,
[role="button"]:hover .btn--link, [role="button"]:focus-visible .btn--link,
button:hover > .btn--link, button:focus-visible > .btn--link,
a.stat:hover .stat__go, button.stat:hover .stat__go, a.stat:focus-visible .stat__go, button.stat:focus-visible .stat__go {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.stat__go { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn--link::after, .stat__go::after { display: inline-block; text-decoration: none; }
.btn--link.btn--down::after, .btn--link.btn--toggle::after { content: "↓"; }
.btn--link.btn--up::after, .btn--link.btn--toggle[aria-expanded="true"]::after, details[open] > summary.btn--toggle::after { content: "↑"; }
summary.btn--link { list-style: none; }
summary.btn--link::-webkit-details-marker { display: none; }

/* Data di oggi (icona del calendario e data per esteso), sopra il titolo: WB.pageHead({today:true}) */
.today-stamp { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy); margin-bottom: var(--space-1); }
.today-stamp .ico { width: 18px; height: 18px; color: var(--blue-700); }

/* Menu della persona: cerchio con le iniziali, in alto a destra */
.user-menu { position: relative; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--white);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  cursor: pointer; transition: background var(--duration-fast), box-shadow var(--duration-fast);
}
button.avatar:hover { background: var(--navy-hover); }
button.avatar[aria-expanded="true"] { box-shadow: var(--ring-brand); }
button.avatar:focus-visible { border-radius: 50%; box-shadow: var(--shadow-focus); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-sm); flex: 0 0 auto; }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 250px; padding: var(--space-2);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-soft);
  animation: wb-pop var(--duration-base) var(--ease-out);
}
.user-menu__panel[hidden] { display: none; }
.user-menu__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.user-menu__head b { display: block; font-size: var(--text-sm); }
.user-menu__head small { display: block; font-size: var(--text-xs); color: var(--text); }
.user-menu__sep { height: 1px; background: var(--line-soft); margin: var(--space-1) var(--space-2); }
.user-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--navy-mark); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer;
}
.user-menu__item .ico { width: 18px; height: 18px; color: var(--blue-700); }
.user-menu__item:hover, .user-menu__item:focus { background: var(--blue-50); color: var(--navy); outline: none; box-shadow: none; }
.user-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-500); }
@media (max-width: 600px) { .user-menu__panel { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; min-width: 0; } }

/* Tendina dell'interfaccia (WB.enhanceSelect): il <select> nativo resta, invisibile */
.wb-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.wb-select { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.wb-select--block, .field .wb-select { display: flex; width: 100%; }
.wb-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
  min-height: 42px; padding: 8px 12px 8px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; font-size: var(--text-sm); color: var(--navy-mark); text-align: left; cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.wb-select__btn:hover { border-color: var(--blue-400); }
.wb-select__btn:focus-visible, .wb-select.is-open .wb-select__btn { outline: none; border-color: var(--blue-500); box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.wb-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-select__chev { width: 16px; height: 16px; color: var(--navy); stroke-width: 2.2; transition: transform var(--duration-fast); }
.wb-select.is-open .wb-select__chev { transform: rotate(180deg); }
.wb-select__btn:disabled, .wb-select__btn.is-locked { background: var(--surface-soft); color: var(--text-subtle); cursor: not-allowed; border-color: var(--line-soft); }
.wb-select__btn:disabled .wb-select__chev { color: var(--text-subtle); }
.wb-select--sm .wb-select__btn { min-height: 36px; padding: 4px 10px; font-size: var(--text-xs); }
.field-inline .wb-select__btn { min-height: 38px; }
.field.has-error .wb-select__btn { border-color: var(--stop-500); }
.wb-select__list {
  position: fixed; z-index: 140; margin: 0; padding: var(--space-2); list-style: none;
  max-height: 320px; overflow-y: auto; max-width: min(420px, 92vw);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-soft);
  font-size: var(--text-sm); animation: wb-pop var(--duration-fast) var(--ease-out);
}
.wb-select__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 38px; padding: 6px var(--space-3); border-radius: var(--radius-sm);
  color: var(--navy-mark); cursor: pointer; white-space: nowrap;
}
.wb-select__opt.is-active { background: var(--blue-50); color: var(--navy); }
.wb-select__opt[aria-selected="true"] { font-weight: var(--weight-bold); color: var(--navy); }
.wb-select__opt[aria-disabled="true"] { color: var(--text-subtle); cursor: not-allowed; }
.wb-select__tick { width: 16px; height: 16px; color: var(--navy); stroke-width: 2.4; }
.wb-select__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-2xs); color: var(--text-subtle); font-weight: var(--weight-medium); }

/* Grafici: l'elemento sotto il mouse resta pieno, gli altri si attenuano; l'etichetta ricca */
svg.wb-chart { outline: none; }
svg.wb-chart:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
svg.wb-chart text, svg.wb-chart line, svg.wb-chart polyline:not(.wb-mark) { pointer-events: none; }
svg.wb-chart .wb-mark { transition: opacity var(--duration-fast); cursor: default; }
svg.wb-chart.has-hot .wb-mark:not(.is-hot) { opacity: .35; }
svg.wb-chart .wb-mark.is-hot { opacity: 1; stroke: var(--navy-deep); stroke-width: 1.5; }
.chart-tip {
  position: fixed; z-index: 150; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; min-width: 132px; max-width: 280px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-soft);
  opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.chart-tip.is-on { opacity: 1; transform: none; }
.chart-tip__title { font-size: var(--text-xs); color: var(--text); font-weight: var(--weight-medium); }
.chart-tip__value { font-size: var(--text-lg); color: var(--navy); font-weight: var(--weight-bold); line-height: 1.2; }
.chart-tip__note { font-size: var(--text-xs); color: var(--text); }

/* Il grafico d'uso di un agente (WB.usageChart) */
.usage-chart { margin-top: var(--space-3); }
.usage-chart svg { display: block; width: 100%; height: auto; }

/* Nella barra grande la tacca porta il nome sulla stessa riga: «dal 70% · modello» */
.scale--big .scale__label b { display: inline; white-space: normal; }

/* ============================================================
   KIT v9 — riunione del 29/09: guardrail, overlay «agenti da ammettere»
   ============================================================ */
/* La lista dei guardrail (WB.guardrailList): interruttore del kit, nome, riga di spiegazione,
   chip «suggerito dall'agente», lucchetto «forzato dalla policy aziendale». */
.guard-rail-list { display: flex; flex-direction: column; gap: var(--space-3); }
.guard-rail-list__head { display: flex; align-items: center; gap: var(--space-2); }
.guard-rail-list__sub { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--text-xs); color: var(--text-subtle); }
.guard-rail-list__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy); }
.guard-rail-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guard-rail-list__item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.guard-rail-list__item:last-child { border-bottom: none; }
.guard-rail-list__switch { flex: 0 0 auto; margin-top: 2px; }
.guard-rail-list__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guard-rail-list__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--navy-mark); cursor: pointer; }
.guard-rail-list__item.is-forced .guard-rail-list__name, .guard-rail-list.is-readonly .guard-rail-list__name { cursor: default; }
.guard-rail-list__desc { font-size: var(--text-xs); color: var(--text); }
.guard-rail-list__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.guard-rail-list__chips .chip .ico { width: 12px; height: 12px; }
.guard-rail-list__lock { cursor: help; }
/* v10 (R12): i tre gruppi «Fissi della piattaforma», «Suggeriti dall'agente», «Attivabili» e la nota */
.guard-rail-list__group { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; }
.guard-rail-list__group + .guard-rail-list__group { border-top: 1px solid var(--line-soft); }
.guard-rail-list__group-title { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--navy); letter-spacing: 0; }
.guard-rail-list__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--warn-800); }
.guard-rail-list__note .ico { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--warn-800); }
@media (max-width: 640px) {
  .guard-rail-list__item { gap: var(--space-3); }
}

/* L'overlay «Ci sono N agenti da ammettere» (WB.overlayDaAmmettere), sulla finestra del kit.
   v10 (R1): sfondo sfocato come i pannelli e riquadro più grande. Le classi `--attiva` e
   `.attiva-list` restano per una fase come alias delle nuove. */
.overlay--ammetti, .overlay--attiva { background: rgba(0, 13, 28, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog--ammetti, .dialog--attiva { max-width: 640px; }
.dialog--ammetti .dialog__title, .dialog--attiva .dialog__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); padding-bottom: var(--space-4); }
.ammetti-list, .attiva-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-base); }
.ammetti-list li, .attiva-list li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-soft); }
.ammetti-list b, .attiva-list b { color: var(--navy); }

/* ============================================================
   KIT v14 — call dell'1/10 (93_RICHIESTE_CALL_0110.md, C1 e C2): overlay come notifica, campanella
   ============================================================ */
/* L'overlay all'apertura come notifica (WB.overlayDaAmmettere, dallo screenshot «notifica apertura.png»):
   bianco e blu, niente giallo. Le classi `.dialog--ammetti` e `.ammetti-list` restano per shot.py e le prove. */
.dialog--notifica { max-width: 700px; padding: var(--space-7, 32px) var(--space-6) var(--space-6); }
.dialog--notifica .notifica__head { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-5); }
.notifica__badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-100); color: var(--navy); }
.notifica__badge .ico { width: 30px; height: 30px; stroke-width: 1.7; }
.notifica__texts { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.notifica__eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.notifica__title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--navy); line-height: var(--leading-snug); }
.notifica__sub { margin: 0; font-size: var(--text-base); color: var(--text); }
.dialog--notifica .notifica__list { margin: 0 0 var(--space-5); gap: var(--space-3); }
.dialog--notifica .notifica__list li { padding: 0; background: none; }
.notifica__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text); text-decoration: none; font-size: var(--text-sm); transition: background var(--duration-fast), box-shadow var(--duration-fast); }
.notifica__row:hover { background: var(--blue-50); }
.notifica__row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.notifica__row .icon-badge--sm { --ring: var(--blue-400); background: var(--surface); }
.notifica__row-text { flex: 1 1 auto; min-width: 0; }
.notifica__row-text b { color: var(--navy); font-weight: var(--weight-bold); }
.notifica__arrow { width: 18px; height: 18px; color: var(--navy); flex: 0 0 auto; transform: rotate(-90deg); }
.dialog--ammetti:focus, .drawer:focus { outline: none; }
.notifica__actions { border-top: 1px solid var(--line-soft); margin-top: 0; padding-top: var(--space-5); }
.notifica__actions .btn .ico { margin-left: 2px; }
@media (max-width: 640px) {
  .dialog--notifica { padding: var(--space-5) var(--space-4) var(--space-4); }
  .dialog--notifica .notifica__head { gap: var(--space-3); }
  .notifica__badge { width: 52px; height: 52px; }
  .notifica__badge .ico { width: 24px; height: 24px; }
  .notifica__title { font-size: var(--text-lg); }
  .notifica__row { align-items: flex-start; }
  .notifica__row .icon-badge--sm { display: none; }
}

/* La campanella nella testata (renderBell), a sinistra della lingua: numero come la pastiglia del menu. */
.notif { position: relative; }
.notif__btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); padding: 0; background: var(--surface); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast), box-shadow var(--duration-fast); }
.notif__btn .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.notif__btn:hover { background: var(--surface-soft); }
.notif__btn[aria-expanded="true"] { box-shadow: var(--ring-brand); }
.notif__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.notif__count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--warn-100); color: var(--warn-800); font-size: var(--text-2xs); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.notif__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 380px; max-width: calc(100vw - 2 * var(--space-4)); max-height: min(70vh, 560px); overflow-y: auto; padding: var(--space-2); background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-soft); animation: wb-pop var(--duration-base) var(--ease-out); }
.notif__panel[hidden] { display: none; }
.notif__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-1); }
.notif__head h3 { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.notif__n { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--navy); }
.notif__empty { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--text-sm); color: var(--text-subtle); }
.notif__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--navy-mark); font-size: var(--text-sm); text-decoration: none; line-height: var(--leading-normal); }
.notif__item .ico { width: 18px; height: 18px; color: var(--blue-700); flex: 0 0 auto; margin-top: 2px; }
.notif__item:hover, .notif__item:focus { background: var(--blue-50); color: var(--navy); outline: none; box-shadow: none; }
.notif__item:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-500); }
.notif__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif__item.is-unread .notif__text > span:first-child { font-weight: var(--weight-medium); color: var(--navy); }
.notif__meta { font-size: var(--text-2xs); color: var(--text-subtle); }
.notif__arrow { margin-top: 2px; color: var(--navy); }
@media (max-width: 600px) { .notif__panel { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; width: auto; max-width: none; } }

/* ============================================================
   KIT v13 · Wizard (call dell'1/10, C9, C10): le schede degli strumenti ad accordion e la legenda
   del rischio (assets/strumenti.js: WB.toolAccordion, WB.rischioChip, WB.rischioLegenda).
   Prefisso tool-. L'etichetta del rischio sta in alto a destra, allineata su tutte le schede;
   il suggerimento del perché si apre verso sinistra, perché il chip sta al bordo destro.
   ============================================================ */
.tool-acc { display: flex; flex-direction: column; gap: var(--space-2); }
.tool-acc__item { position: relative; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tool-acc__item.is-open { box-shadow: inset 0 0 0 1px var(--blue-400); }
.tool-acc__item.is-quiet { background: var(--surface-soft); }
.tool-acc__head { position: relative; }
.tool-acc__toggle { display: flex; width: 100%; align-items: center; gap: var(--space-3); padding: var(--space-3) 190px var(--space-3) var(--space-4); background: none; border: 0; border-radius: var(--radius-md); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.tool-acc__toggle:hover { background: var(--surface-soft); }
.tool-acc__toggle:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.tool-acc__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tool-acc__name { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--navy); }
.tool-acc__desc { font-size: var(--text-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-acc__item.is-open .tool-acc__desc { white-space: normal; }
.tool-acc__item.is-open .tool-acc__toggle { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tool-acc__arrow { position: absolute; right: var(--space-4); top: 50%; margin-top: -10px; color: var(--navy); transition: transform var(--duration-fast) var(--ease-standard); }
.tool-acc__item.is-open .tool-acc__arrow { transform: rotate(180deg); }
.tool-acc__risk { position: absolute; right: 48px; top: 14px; }
.tool-risk { cursor: help; }
.tool-acc__risk .tool-risk[data-tip]::after { left: auto; right: 0; }
.tool-acc__risk .tool-risk[data-tip]::before { left: auto; right: 12px; }
.tool-acc__body { padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 36px + var(--space-3)); border-top: 1px solid var(--line-soft); font-size: var(--text-sm); color: var(--text); }
.tool-acc__body[hidden] { display: none; }
.tool-acc__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.tool-acc__facts > div { display: flex; gap: 6px; align-items: baseline; }
.tool-acc__facts dt { font-size: var(--text-xs); color: var(--text-subtle); }
.tool-acc__facts dt::after { content: ":"; }
.tool-acc__facts dd { margin: 0; font-size: var(--text-sm); color: var(--navy); font-weight: var(--weight-medium); }
.tool-acc__state, .tool-acc__gate { display: flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--warn-800); }
.tool-acc__gate { color: var(--text); }
.tool-acc__gate .ico, .tool-acc__state .ico { flex: 0 0 auto; }
.tool-acc__extra { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tool-legend { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-panel); }
.tool-legend__title { display: block; color: var(--navy); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 6px; }
.tool-legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tool-legend__list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text); }
.tool-legend__list li > .chip { flex: 0 0 auto; }
@media (max-width: 600px) {
  .tool-acc__toggle { padding-right: 48px; padding-bottom: 48px; }
  .tool-acc__risk { top: auto; bottom: var(--space-4); left: calc(var(--space-4) + 36px + var(--space-3)); right: auto; }
  .tool-acc__risk .tool-risk[data-tip]::after { left: 0; right: auto; }
  .tool-acc__risk .tool-risk[data-tip]::before { left: 12px; right: auto; }
  .tool-acc__body { padding-left: var(--space-4); }
  .tool-legend__list li { align-items: flex-start; }
}