/* ══════════════════════════════════════════════════════════════════════════
   STUDIO LEGALE LIZZANI — COMPONENTI
   Dipende da: tokens.css, base.css
   Ogni componente legge solo gli alias di registro (--bg, --fg, --line,
   --accent…): funziona identico su carta e su grafite senza essere duplicato.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 01 · MARCHIO ═══════════════════════════════════════════════════════════
   Il monogramma è una coppia di parentesi quadre che racchiude tre celle
   sovrapposte. Le parentesi quadre sono contemporaneamente la notazione
   matriciale dell'algebra lineare e la parentesi della citazione giuridica: un
   unico segno che dice diritto e scienza senza dirlo.

   Le tre celle non sono un'invenzione: sono la «i» di LIZZANI del marchio
   dello Studio, che nel logo è composta da tre quadrati sovrapposti — bianco,
   grigio, blu. Il monogramma cita il marchio invece di sostituirlo, e il
   marchio per esteso compare nel piè di pagina, dove il registro è scuro e la
   sua resa è quella per cui è stato disegnato.                              */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--fg); }
.brand__mark .bkt { stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.brand__mark .cell { fill: currentColor; }
.brand__mark .cell--mid { fill: var(--marchio-grigio); }
.brand__mark .cell--on  { fill: var(--marchio-blu); }

/* Marchio per esteso: sta solo sul registro scuro, perché il lettering è
   bianco. La larghezza è fissata in `ch` così che accompagni il corpo del
   testo accanto invece di combatterci. */
.brand-full { display: block; width: min(15rem, 62vw); height: auto; }
.brand__text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--fg);
  font-variation-settings: 'opsz' 20;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 400px) { .brand__sub { display: none; } }

/* ══ 02 · BOTTONI ═══════════════════════════════════════════════════════════
   Quattro varianti, nessun gradiente, nessuna ombra colorata. La freccia si
   sposta di 3px all'hover: è l'unico movimento concesso a un bottone.        */
.btn {
  /* --ctl-line, non --line-strong: per .btn--outline il filetto e l’unico
     confine del controllo, e un filetto in alfa al 26% vale 1.80:1. */
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--ctl-line);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--bw) solid var(--btn-line);
  border-radius: var(--r-1);
  font-family: var(--font-ui);
  font-size: var(--t-md); font-weight: 600;
  letter-spacing: var(--tr-normal); line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur-2) var(--ease); }
.btn:hover svg.icon-arrow { transform: translateX(3px); }
.btn:hover svg.icon-arrow-ne { transform: translate(2px, -2px); }

.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-line: var(--accent); }
.btn--primary:hover { --btn-bg: var(--blueprint-800); --btn-line: var(--blueprint-800); }
.reg-dark .btn--primary:hover { --btn-bg: var(--blueprint-200); --btn-line: var(--blueprint-200); }

.btn--ink { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-line: var(--fg); }
.btn--ink:hover { --btn-bg: var(--accent); --btn-line: var(--accent); --btn-fg: var(--on-accent); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--ctl-line); }
.btn--outline:hover { --btn-line: var(--fg); --btn-bg: var(--bg-sunken); }

.btn--quiet { --btn-line: transparent; --btn-fg: var(--fg-soft); padding-inline: var(--sp-3); }
.btn--quiet:hover { --btn-fg: var(--fg); --btn-bg: var(--bg-sunken); }

.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--t-sm); }
.btn--block { width: 100%; }

/* Link con freccia — la forma di collegamento più usata del sistema. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--t-md); font-weight: 600;
  color: var(--accent-text);
  padding-bottom: 2px;
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover { border-bottom-color: var(--accent-line); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ══ 03 · BADGE NORMATIVO ═══════════════════════════════════════════════════
   Il componente più caratterizzante del sistema. Ogni riferimento di legge è
   un oggetto tipografico riconoscibile: monospaziato, cifre tabulari, filetto.
   Tre livelli di enfasi, mai colorati per decorazione.                       */
.ref {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-2) 4px;
  background: var(--bg-sunken);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: 0.015em; line-height: 1.35;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ref--accent { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-wash); }
/* Un riferimento normativo non si spezza mai: «art. 844 c.c.» su due righe non
   è più un codice. Una frase lunga, però, non è un riferimento — e se le si
   impone `nowrap` sfonda la pagina su schermo stretto. La variante `--wrap`
   serve a quel caso: la applica la composizione oltre una certa lunghezza. */
.ref--wrap   { white-space: normal; max-width: 100%; text-align: left; }
.ref--bare   { background: transparent; border-color: var(--line-strong); }
.ref--lead   { border-color: var(--line-strong); color: var(--fg); font-weight: 600; }
.ref-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Indicatore di stato (usato dalla dashboard e dal footer) */
.dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--sig-stab); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-stab) 18%, transparent);
}

/* ══ 04 · SUPERFICI ═════════════════════════════════════════════════════════*/
.panel {
  background: var(--bg-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-1);
  padding: var(--sp-8);
}
.panel--sunken { background: var(--bg-sunken); }
.panel--flat   { background: transparent; }
.panel--pad-sm { padding: var(--sp-5); }

/* ══ 05 · CARD AREA DI PRATICA ══════════════════════════════════════════════
   Numerata come un articolo di codice. Nessuna ombra: all'hover cambia la
   superficie, si scurisce il filetto e il numero passa all'accento. Il bordo
   superiore a 2px è l'unico elemento che si "accende".                       */
.area-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--bg-raised);
  border: var(--bw) solid var(--line);
  border-top: var(--bw-2) solid var(--line-strong);
  border-radius: var(--r-1);
  min-height: 100%;
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.area-card:hover, .area-card:focus-within {
  background: var(--bg-sunken);
  border-color: var(--line-strong);
  border-top-color: var(--accent);
}
.area-card__num {
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--tr-mono);
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease);
}
.area-card:hover .area-card__num { color: var(--accent-text); }
.area-card__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: 400;
  font-variation-settings: 'opsz' 22;
  letter-spacing: var(--tr-tight); line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}
.area-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.area-card__glyph { width: 26px; height: 26px; flex: none; color: var(--fg-faint);
                    transition: color var(--dur-2) var(--ease); }
.area-card:hover .area-card__glyph { color: var(--accent); }
.area-card__body { font-size: var(--t-md); line-height: var(--lh-relaxed); color: var(--fg-soft); flex: 1; }
.area-card__foot { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: var(--bw) solid var(--line); }
/* L'intera card è cliccabile ma il nome accessibile resta quello del link. */
.area-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* ══ 06 · CIFRA / STATISTICA ════════════════════════════════════════════════
   Numero editoriale in Newsreader, etichetta in monospaziato, filetto sopra.
   Nessun conteggio animato: un numero che sale è intrattenimento.            */
.figure-item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--bw-2) solid var(--line-strong);
}
.figure-item__value {
  font-family: var(--font-display);
  font-size: var(--t-4xl); font-weight: 400;
  font-variation-settings: 'opsz' 40;
  letter-spacing: var(--tr-display); line-height: .96;
  color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.figure-item__unit {
  font-family: var(--font-mono);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--fg-mute); letter-spacing: 0;
}
.figure-item__label {
  font-family: var(--font-ui);
  font-size: var(--t-md); font-weight: 600;
  color: var(--fg); line-height: var(--lh-snug);
}
.figure-item__note { font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-normal); }

/* ══ 07 · CALLOUT ═══════════════════════════════════════════════════════════
   Filetto verticale a 2px nel colore semantico. Nessun fondo colorato acceso:
   l'avviso deve informare, non allarmare.                                    */
.callout {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-sunken);
  border: var(--bw) solid var(--line);
  border-left: var(--bw-2) solid var(--fg-faint);
  border-radius: var(--r-1);
  font-size: var(--t-md); line-height: var(--lh-relaxed); color: var(--fg-body);
}
.callout--warn { border-left-color: var(--sig-elev); }
.callout--crit { border-left-color: var(--sig-crit); }
.callout--note { border-left-color: var(--accent-line); }
.callout__icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--fg-soft); }
.callout strong { color: var(--fg); font-weight: 600; }

/* ══ 08 · TABELLA DATI ══════════════════════════════════════════════════════
   Righe separate da filetti, nessuna cornice esterna. Riferimenti e misure in
   monospaziato con cifre tabulari, così che le colonne numeriche si allineino
   otticamente. Scorre orizzontalmente dentro il proprio contenitore, mai la
   pagina.                                                                    */
.table-scroll { overflow-x: auto; border-top: var(--bw-2) solid var(--fg); }
.table-scroll:focus-visible { box-shadow: var(--ring); }
.dtable { font-size: var(--t-md); min-width: 44rem; }
/* Nessun position: sticky qui: .table-scroll ha overflow-x auto, quindi e lui
   il contenitore di scorrimento piu vicino, e non scorre mai in verticale.
   Una dichiarazione inerte e peggio di una mancante: promette e non mantiene. */
.dtable thead th {
  background: var(--bg);
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: var(--bw) solid var(--line-strong);
  white-space: nowrap;
}
.dtable tbody td {
  padding: var(--sp-4);
  border-bottom: var(--bw) solid var(--line);
  vertical-align: top; line-height: var(--lh-normal);
  color: var(--fg-body);
}
.dtable tbody tr:hover td { background: var(--bg-sunken); }
.dtable .cell-key   { color: var(--fg); font-weight: 600; }
.dtable .cell-num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
                      color: var(--fg); font-weight: 500; white-space: nowrap; }
.dtable .cell-note  { color: var(--fg-mute); font-size: var(--t-sm); }
.table-caption { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--fg-mute); }

/* ══ 09 · SCADENZE / TERMINI ════════════════════════════════════════════════*/
.term {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-1);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.term:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.term__value {
  font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: 400;
  font-variation-settings: 'opsz' 30;
  line-height: 1; letter-spacing: var(--tr-tight);
  color: var(--fg); font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.term__unit { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-mute); letter-spacing: .04em; }
.term__title { font-size: var(--t-md); font-weight: 600; color: var(--fg); line-height: var(--lh-snug); }
.term__body { font-size: var(--t-sm); color: var(--fg-soft); line-height: var(--lh-relaxed); flex: 1; }
.term__src { margin-top: var(--sp-1); }

/* ══ 10 · PASSI / METODO ════════════════════════════════════════════════════*/
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: var(--bw) solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: var(--bw) solid var(--line); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--tr-mono); color: var(--fg-mute);
  padding-top: 5px; font-variant-numeric: tabular-nums;
}
.step__title { font-family: var(--font-display); font-size: var(--t-2xl); font-variation-settings: 'opsz' 22;
               letter-spacing: var(--tr-tight); color: var(--fg); line-height: var(--lh-snug); }
.step__body  { margin-top: var(--sp-2); font-size: var(--t-md); color: var(--fg-soft); max-width: var(--measure); }
@media (max-width: 640px) { .step { grid-template-columns: minmax(0,1fr); gap: var(--sp-2); } }

/* ══ 11 · FAQ ═══════════════════════════════════════════════════════════════
   <details> nativo: funziona senza JavaScript, è navigabile da tastiera e
   ricercabile dal browser. Il segno +/− è disegnato in CSS, non è un'icona.  */
.faq { border-top: var(--bw) solid var(--line-strong); }
.faq__item { border-bottom: var(--bw) solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-ui);
  font-size: var(--t-lg); font-weight: 600;
  letter-spacing: var(--tr-tight); line-height: var(--lh-snug);
  color: var(--fg);
  transition: color var(--dur-2) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-text); }
.faq__q:focus-visible { box-shadow: var(--ring); }
.faq__idx {
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--tr-mono); color: var(--fg-mute);
  padding-top: 7px; flex: none; width: 2.25rem;
  font-variant-numeric: tabular-nums;
}
.faq__sign { position: relative; width: 14px; height: 14px; flex: none; margin: 7px 0 0 auto; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; background: var(--fg-soft);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.faq__sign::before { inset: 6px 0 auto; height: var(--bw-2); }
.faq__sign::after  { inset: 0 6px auto; width: var(--bw-2); height: 14px; }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding: 0 0 var(--sp-6) calc(2.25rem + var(--sp-4)); max-width: var(--measure); }
.faq__a > * + * { margin-top: var(--sp-4); }
.faq__a { font-size: var(--t-md); line-height: var(--lh-prose); color: var(--fg-body); }
.faq__a strong { color: var(--fg); font-weight: 600; }
@media (max-width: 640px) { .faq__a { padding-left: 0; } .faq__idx { width: 1.75rem; } }

/* ══ 12 · PUBBLICAZIONE ═════════════════════════════════════════════════════*/
.pub {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: var(--bw) solid var(--line-strong);
  transition: border-color var(--dur-2) var(--ease);
}
.pub:hover { border-top-color: var(--accent); }
.pub__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pub__title {
  font-family: var(--font-display); font-size: var(--t-2xl);
  font-variation-settings: 'opsz' 24;
  letter-spacing: var(--tr-tight); line-height: var(--lh-snug);
  color: var(--fg); text-wrap: pretty;
  transition: color var(--dur-2) var(--ease);
}
.pub:hover .pub__title { color: var(--accent-text); }
.pub__body { font-size: var(--t-md); color: var(--fg-soft); line-height: var(--lh-relaxed); flex: 1; }
.pub__link::after { content: ''; position: absolute; inset: 0; }

/* ══ 13 · FORM ══════════════════════════════════════════════════════════════
   Etichette sempre visibili sopra il campo (mai placeholder come etichetta:
   sparisce quando serve e non è accessibile). Filetto sotto invece della
   cornice completa: meno rumore, stessa affordance.                          */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--fg-soft);
}
.field__label .req { color: var(--accent-text); margin-left: 2px; }
.field__input, .field__select, .field__area {
  width: 100%;
  padding: var(--sp-3) 0;
  background: transparent;
  color: var(--fg);
  /* --ctl-line, non --line-strong: il perimetro di un campo è un componente
     d'interfaccia e deve reggere 3:1 (WCAG 1.4.11). Vedi tokens.css § 7-bis. */
  border: 0; border-bottom: var(--bw) solid var(--ctl-line);
  border-radius: 0;
  font-size: var(--t-base); font-family: var(--font-ui);
  transition: border-color var(--dur-2) var(--ease);
}
.field__area { resize: vertical; min-height: 7rem; line-height: var(--lh-relaxed); }
.field__input::placeholder, .field__area::placeholder { color: var(--fg-mute); opacity: 1; }
/* Un hover alza il contrasto, mai lo abbassa: --fg-faint scendeva a 2.59:1. */
.field__input:hover, .field__select:hover, .field__area:hover { border-bottom-color: var(--fg); }
/* :focus-visible, non :focus — e box-shadow: var(--ring), non un box-shadow
   proprio, che per specificita sostituirebbe l’anello di focus di sistema
   proprio sui controlli di modulo. */
.field__input:focus, .field__select:focus, .field__area:focus { border-bottom-color: var(--accent); }
.field__input:focus-visible, .field__select:focus-visible, .field__area:focus-visible {
  outline: none; border-bottom-color: var(--accent); box-shadow: var(--ring);
}
.field__select {
  appearance: none; cursor: pointer; padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field__hint { font-size: var(--t-sm); color: var(--fg-mute); }

/* Stato di errore: mai affidato al solo colore (WCAG 1.4.1). Il campo cambia
   filetto, e sotto compare un messaggio con il proprio glifo e il proprio
   testo — chi non distingue il rosso legge comunque cosa non va.            */
.field--error .field__input,
.field--error .field__select,
.field--error .field__area { border-bottom-color: var(--sig-crit); box-shadow: 0 1px 0 0 var(--sig-crit); }
.field__error {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--t-sm); color: var(--sig-crit); line-height: var(--lh-normal);
}
.field__error svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.check { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--sp-3); align-items: start; cursor: pointer; }
.check input {
  appearance: none; width: 18px; height: 18px; margin-top: 2px;
  border: var(--bw) solid var(--ctl-line); border-radius: var(--r-1);
  background: var(--bg-raised); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.check input:hover { border-color: var(--fg-faint); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: ''; display: block; width: 10px; height: 5px; margin: 4px auto 0;
  border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
}
.check input:focus-visible { box-shadow: var(--ring); }
.check__text { font-size: var(--t-sm); color: var(--fg-soft); line-height: var(--lh-relaxed); }

/* ══ 14 · DASHBOARD LEXRISK ═════════════════════════════════════════════════
   Mockup di prodotto. Regola non negoziabile: deve reggere il confronto con uno
   screenshot di un vero prodotto enterprise. Niente bagliori, niente vetro,
   niente gradienti; barre a spigolo vivo, cifre tabulari, timestamp reali,
   colore usato solo come semantica del rischio.                              */
.dash {
  background: var(--graphite-950);
  border: var(--bw) solid var(--rule-dark-strong);
  border-radius: var(--r-1);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-d1);
}
.dash__bar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--graphite-850);
  border-bottom: var(--bw) solid var(--rule-dark);
  flex-wrap: wrap;
}
.dash__app {
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--chalk-050);
}
.dash__tenant {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--chalk-400); padding: 2px var(--sp-2);
  border: var(--bw) solid var(--rule-dark-strong); border-radius: var(--r-1);
}
.dash__live { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto;
              font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--chalk-400); }
.dash__live .dot { background: var(--sig-stable-lum); box-shadow: 0 0 0 3px rgba(111,191,151,.16); }
.dash__body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
@media (max-width: 780px) { .dash__body { grid-template-columns: minmax(0,1fr); } }

.dash__score {
  padding: var(--sp-6) var(--sp-5);
  border-right: var(--bw) solid var(--rule-dark);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
@media (max-width: 780px) { .dash__score { border-right: 0; border-bottom: var(--bw) solid var(--rule-dark); } }
.dash__score-val {
  font-family: var(--font-display); font-size: 4.25rem; line-height: .88;
  font-variation-settings: 'opsz' 60;
  color: var(--chalk-050); letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 3px;
}
.dash__score-max { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--chalk-600); letter-spacing: 0; }
.dash__score-lab { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--tr-mono);
                   text-transform: uppercase; color: var(--chalk-400); }
.dash__score-sub { font-size: var(--t-sm); color: var(--chalk-400); line-height: var(--lh-normal); }

.dash__lines { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.dash__line { display: grid; grid-template-columns: minmax(0,1fr) 3rem; gap: var(--sp-3) var(--sp-4); align-items: baseline; }
.dash__line-name { font-size: var(--t-sm); color: var(--chalk-200); }
.dash__line-val  { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
                   text-align: right; color: var(--chalk-050); }
.meter { grid-column: 1 / -1; height: 4px; background: var(--graphite-800); border-radius: 0; overflow: hidden; }
.meter__fill { height: 100%; background: var(--chalk-600); }
.meter__fill--crit { background: var(--sig-critical-lum); }
.meter__fill--elev { background: var(--sig-elevated-lum); }
.meter__fill--stab { background: var(--sig-stable-lum); }

.dash__queue { border-top: var(--bw) solid var(--rule-dark); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.dash__queue-h { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--tr-mono);
                 text-transform: uppercase; color: var(--chalk-600); margin-bottom: var(--sp-3); }
.dash__task { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: var(--sp-3);
              align-items: baseline; padding: var(--sp-2) 0; border-top: var(--bw) solid var(--rule-dark);
              font-size: var(--t-sm); color: var(--chalk-200); }
.dash__task:first-of-type { border-top: 0; }
/* Stato di attenzione con fondo OPACO: dentro una tabella l'alfa si somma alla
   riga zebrata e produce quattro tinte invece di due. */
.dash__task--attn { background: var(--attention-bed-dark); margin-inline: calc(var(--sp-5) * -1);
                    padding-inline: var(--sp-5); }
.dash__task-flag { width: 6px; height: 6px; margin-top: 6px; background: var(--chalk-600); }
.dash__task-flag--crit { background: var(--sig-critical-lum); }
.dash__task-flag--elev { background: var(--sig-elevated-lum); }
.dash__task-due { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--chalk-600); white-space: nowrap; }
/* L'avvertenza deontologica usa --chalk-400 (6.6:1 su graphite-850), non
   --chalk-600: era l'unico testo del pannello impostato sul token piu debole,
   ed e proprio quello che deve essere letto. */
.dash__foot { padding: var(--sp-3) var(--sp-4); background: var(--graphite-850);
              border-top: var(--bw) solid var(--rule-dark);
              font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--chalk-400);
              line-height: 1.6; }

/* ══ 15 · TESTATA DI SITO ═══════════════════════════════════════════════════*/
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: var(--bw) solid var(--rule);
  transition: border-color var(--dur-2) var(--ease);
}
.site-nav__in { height: 100%; display: flex; align-items: center; gap: var(--sp-6); }
.site-nav__links { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-md); font-weight: 500; color: var(--ink-700);
  border-radius: var(--r-1);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink-900); background: var(--paper-sunken); }
.nav-link__caret { width: 9px; height: 9px; transition: transform var(--dur-2) var(--ease); }
.nav-link[aria-expanded="true"] .nav-link__caret { transform: rotate(180deg); }
.site-nav__side { display: flex; align-items: center; gap: var(--sp-3); }

.lang-switch { display: inline-flex; border: var(--bw) solid var(--rule-strong); border-radius: var(--r-1); overflow: hidden; }
.lang-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; min-width: 40px;
  padding: 0 var(--sp-3);
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .08em; color: var(--ink-600);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lang-switch button + button { border-left: var(--bw) solid var(--rule-strong); }
.lang-switch button[aria-pressed="true"] { background: var(--ink-900); color: var(--paper); }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
              border: var(--bw) solid var(--rule-strong); border-radius: var(--r-1); color: var(--ink-800); }
.nav-toggle svg { width: 18px; height: 18px; }

/* Pannello mega-menu */
.nav-panel {
  position: absolute; inset: 100% 0 auto; display: none;
  background: var(--paper-raised);
  border-bottom: var(--bw) solid var(--rule-strong);
  box-shadow: var(--shadow-2);
}
.nav-panel.is-open { display: block; }
.nav-panel__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
                 gap: var(--sp-8); padding-block: var(--sp-8); }
.nav-group__h { margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: var(--bw) solid var(--rule); }
.nav-group a {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 7px 0; font-size: var(--t-md); color: var(--ink-700);
  transition: color var(--dur-1) var(--ease);
}
.nav-group a:hover { color: var(--blueprint-800); }
/* Testo vero, non decorazione: --ink-300 qui darebbe 2.59:1. */
.nav-group a .i {
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-mute);
  font-variant-numeric: tabular-nums; flex: none;
}

@media (max-width: 1080px) {
  .site-nav__links, .site-nav__side .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Cassetto mobile */
.site-drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: var(--z-drawer);
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-6) 0 var(--sp-16);
  display: none;
}
.site-drawer.is-open { display: block; }
.drawer-group + .drawer-group { margin-top: var(--sp-8); }
.drawer-group__h { margin-bottom: var(--sp-2); }
.drawer-group a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; font-size: var(--t-lg); color: var(--ink-800);
  border-bottom: var(--bw) solid var(--rule);
}
.drawer-group a svg { width: 14px; height: 14px; color: var(--ink-300); flex: none; }

/* ══ 16 · BRICIOLE ══════════════════════════════════════════════════════════*/
.crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
          font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-mute);
          letter-spacing: .04em; }
.crumbs a { color: var(--fg-soft); }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.crumbs__sep { color: var(--fg-mute); }

/* ══ 17 · NAVIGAZIONE INTERNA DI PAGINA ═════════════════════════════════════*/
.pagenav {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid var(--line);
}
.pagenav__in { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.pagenav__in::-webkit-scrollbar { display: none; }
.pagenav a {
  padding: var(--sp-4) var(--sp-3);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--fg-mute); white-space: nowrap;
  border-bottom: var(--bw-2) solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pagenav a:hover { color: var(--fg); }
.pagenav a.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ══ 18 · ASSISTENTI AI ═════════════════════════════════════════════════════*/
.assist {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-1);
  height: 100%;
}
.assist__head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3);
                border-bottom: var(--bw) solid var(--line); }
.assist__glyph { width: 30px; height: 30px; flex: none; color: var(--accent);
                 border: var(--bw) solid var(--accent-line); border-radius: var(--r-1); padding: 5px; }
.assist__name { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600;
                letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg); }
.assist__title { font-size: var(--t-md); font-weight: 600; color: var(--fg); line-height: var(--lh-snug); }
.assist__body { font-size: var(--t-sm); color: var(--fg-soft); line-height: var(--lh-relaxed); flex: 1; }

/* ══ 19 · RECAPITO ══════════════════════════════════════════════════════════*/
.contact-row {
  display: grid; grid-template-columns: 6.5rem minmax(0,1fr); gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--line); align-items: baseline;
}
.contact-row__v { font-size: var(--t-md); color: var(--fg); line-height: var(--lh-relaxed); word-break: break-word; }
.contact-row__v a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 560px) { .contact-row { grid-template-columns: minmax(0,1fr); gap: var(--sp-1); } }

/* ══ 20 · PIÈ DI PAGINA ═════════════════════════════════════════════════════*/
.site-foot { background: var(--graphite-950); color: var(--chalk-400); }
/* La prima colonna ospita il marchio per esteso e ha una larghezza minima: con
   `minmax(0, 1.4fr)` le cinque colonne di collegamenti la schiacciavano a poco
   più di cento pixel e il marchio si riduceva a una miniatura illeggibile.
   Le soglie sono dichiarate una per una invece di affidarsi a `min(100%, …)`
   dentro `minmax()`: la percentuale lì si risolve sul contenitore, non sulla
   traccia, e su schermo stretto il calcolo faceva stare due colonne dove ce ne
   entrava una sola — con la pagina che scorreva in orizzontale. */
.site-foot__top { display: grid; gap: var(--sp-10); padding-block: var(--band-tight); }
@media (min-width: 40rem) {
  .site-foot__top { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (min-width: 64rem) {
  .site-foot__top { grid-template-columns: minmax(15rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr)); }
}
.foot-group__h { margin-bottom: var(--sp-4); }
.foot-group a { display: block; padding: 5px 0; font-size: var(--t-md); color: var(--chalk-400);
                transition: color var(--dur-1) var(--ease); }
.foot-group a:hover { color: var(--chalk-050); }
.site-foot__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
                     align-items: center; justify-content: space-between;
                     padding-block: var(--sp-5); border-top: var(--bw) solid var(--rule-dark); }
.site-foot__legal { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--chalk-600);
                    letter-spacing: .02em; line-height: 1.7; }
.site-foot__legal a { color: var(--chalk-400); }
.site-foot__legal a:hover { color: var(--chalk-050); text-decoration: underline; text-underline-offset: .2em; }

/* ══ 21 · SCHEDA TECNICA D'AREA ═════════════════════════════════════════════
   Apre ogni pagina di area di pratica, prima della prosa. Campi fissi, sempre
   gli stessi, sempre nello stesso ordine: norme di riferimento · autorità
   competente · termini · ultimo aggiornamento.

   È l'antidoto al rischio principale di un impianto editoriale: un general
   counsel che atterra sulla pagina non deve leggere un paragrafo per capire se
   siamo nel merito. Legge quattro campi in due secondi. Nessun tema in vendita
   può contenerlo, perché presuppone di sapere cosa scriverci dentro.          */
.spec {
  border-top: var(--bw-2) solid var(--fg);
  border-bottom: var(--bw) solid var(--line);
  background: var(--bg-sunken);
}
.spec__row {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
  align-items: baseline;
}
.spec__row:last-child { border-bottom: 0; }
.spec__k { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500;
           letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-mute); line-height: 1.4; }
.spec__v { font-size: var(--t-md); color: var(--fg); line-height: var(--lh-relaxed); }
.spec__v .ref-set { margin-top: 2px; }
@media (max-width: 640px) { .spec__row { grid-template-columns: minmax(0,1fr); gap: var(--sp-2); } }

/* ══ 21-bis · SCHEDA CATALOGRAFICA ══════════════════════════════════════════
   I dati identificativi composti come un record d'archivio: chiave a sinistra
   in monospaziato, valore a destra. Sostituisce la fotografia di repertorio
   nell'apertura della home — al posto di un'immagine che non dice niente,
   informazione che si legge in tre secondi.                                  */
.record { border-top: var(--bw-2) solid var(--fg); }
.record__row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--line); align-items: baseline;
}
.record__v { font-size: var(--t-md); color: var(--fg); line-height: var(--lh-normal); }
@media (max-width: 30rem) { .record__row { grid-template-columns: minmax(0,1fr); gap: var(--sp-1); } }

/* Didascalia breve: la riga di commento che accompagna una tavola o una figura. */
.note-cap { font-size: var(--t-sm); color: var(--fg-soft); line-height: var(--lh-relaxed); }

/* ══ 22 · NOTA DI DATO ══════════════════════════════════════════════════════
   Obbligatoria sotto ogni tabella, figura o schema normativo. Uno studio che
   pubblica una tabella di distanze legali senza data di aggiornamento e senza
   avvertenza pubblica, di fatto, un'informazione che invecchia da sola.      */
.data-note {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--fg-mute); line-height: 1.6;
}
.data-note__caveat { font-family: var(--font-ui); font-size: var(--t-sm);
                     color: var(--fg-soft); flex-basis: 100%; letter-spacing: 0; }

/* ══ 23 · TORNA SU ══════════════════════════════════════════════════════════*/
.to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-raised); color: var(--ink-800);
  border: var(--bw) solid var(--rule-strong); border-radius: var(--r-1);
  box-shadow: var(--shadow-1);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top:hover { border-color: var(--ink-900); }
.to-top svg { width: 15px; height: 15px; }

/* ══ 24 · BOTTONE PIANO ═════════════════════════════════════════════════════
   Terza voce accanto a «ink» e «outline»: nessun perimetro finché non serve.
   Riservato alle azioni che non devono competere con l'azione principale —
   «Scegli» accanto ad «Accetta», «Annulla» accanto a «Salva».              */
.btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-fg: var(--fg-soft); }
.btn--ghost:hover { --btn-fg: var(--fg); --btn-line: var(--ctl-line); }

/* ══ 25 · POSTILLA ══════════════════════════════════════════════════════════
   L'avvertenza deontologica in chiusura di pagina. Piccola ma non grigia sul
   grigio: resta sopra il minimo di contrasto del sistema.                   */
.fine-print {
  font-size: var(--t-sm); line-height: var(--lh-relaxed);
  color: var(--fg-soft); border-top: var(--bw) solid var(--line);
  padding-top: var(--sp-4);
}

/* ══ 26 · GRIGLIA AREE DI INTERVENTO ════════════════════════════════════════
   Le schede non hanno perimetro proprio: il filetto è lo spazio della griglia
   che lascia intravedere il fondo. Una regola sola per tutte le pagine.     */
.interventions {
  display: grid; gap: var(--bw);
  background: var(--rule); border: var(--bw) solid var(--rule);
}
@media (min-width: 44rem) { .interventions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .interventions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.interventions .area-card { border: 0; border-top: var(--bw-2) solid transparent; }
.interventions .area-card:hover { border-top-color: var(--blueprint-700); }

/* ══ 27 · RIMANDO DI CHIUSURA ═══════════════════════════════════════════════*/
.rel-link {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--line);
  font-weight: 500; color: var(--fg-body);
}
.rel-link:hover { color: var(--accent-text); }

/* ══ 28 · CONSENSO AI COOKIE ════════════════════════════════════════════════
   Il pannello non oscura la pagina e non intrappola il focus: non è un muro,
   è una domanda. «Rifiuta» ha lo stesso peso tipografico di «Accetta» — un
   rifiuto reso più difficile dell'assenso non è un consenso libero
   (art. 4 n. 11 GDPR; Linee guida EDPB 03/2022 sui dark pattern).           */
.cc {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  padding: var(--sp-4); animation: cc-in var(--dur-3) var(--ease-out) both;
}
@keyframes cc-in { from { transform: translateY(1rem); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .cc { animation: none } }

.cc__panel {
  max-width: var(--shell); margin-inline: auto;
  display: grid; gap: var(--sp-6); align-items: start;
  padding: var(--sp-6);
  background: var(--paper-raised); color: var(--ink-800);
  border: var(--bw-2) solid var(--rule-strong); border-radius: var(--r-1);
  box-shadow: var(--shadow-2);
}
@media (min-width: 56rem) {
  .cc__panel { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-10); }
}
.cc__text {
  margin-top: var(--sp-3); max-width: 76ch;
  font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--ink-700);
}
.cc__text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

.cc__choices {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--line);
}
.cc__choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3);
  align-items: start;
  font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--ink-700);
}
.cc__choice input { margin-top: 3px; accent-color: var(--blueprint-700); width: 16px; height: 16px; }
.cc__choice input:disabled + span { color: var(--fg-mute); }

.cc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-content: start; }
@media (min-width: 56rem) { .cc__actions { flex-direction: column; min-width: 12rem; } }
.cc__actions .btn { justify-content: center; }