/* =============================================================================
   MARCA GROUP — DESIGN SYSTEM · SUPERFICI SOVRAPPOSTE, CORNICE, INDICATORI
   Dipende da tokens.css e system.css: caricali PRIMA, in quest'ordine.
   Documentazione: File_MD/18_SUPERFICI_E_CORNICE.md · movimento: File_MD/16

   IL PROBLEMA CHE QUESTO FILE RISOLVE

   Il sistema vieta ombre ed elevazioni. Ma un menu, una finestra di dialogo e
   un suggerimento devono staccarsi da ciò che hanno sotto. La risposta non è
   attenuare il divieto: è sostituire l'elevazione con tre dispositivi, in
   quest'ordine, e mai con un quarto.

   1. FILO DI STACCO — 1px in --marca-border-overlay (grafite su chiaro,
      carta su scuro). Non è il filo strutturale da 1px Neutral/200: è un
      taglio netto, e la differenza di valore è ciò che sostituisce l'ombra.
   2. SUPERFICIE PIENA E OPACA — mai traslucida.
   3. VELO DI CONTESTO — solo per finestre e pannelli sovrapposti, con
      --marca-scrim, l'unica trasparenza del sistema.

   E il corollario che tiene tutto insieme: una tendina non fluttua, CRESCE
   dal controllo che l'ha aperta. Bordo superiore a filo di quello inferiore
   del controllo, nessun distacco, nessun raggio. Gutter zero anche qui.

   IL MOVIMENTO CHE NE DERIVA
   Senza asse Z niente si avvicina. Restano quattro meccanismi: RIVELAZIONE
   (si sposta una frontiera), SCORRIMENTO (l'oggetto percorre la propria
   misura lungo un asse), COSTRUZIONE (si assembla per parti), SCAMBIO (non
   si muove niente: cambia un token).
   ============================================================================= */

/* =============================================================================
   1 · TABELLA — ordinamento, selezione, paginazione
   ============================================================================= */

.mg-th-sort {
  /* Il verso dell'ordinamento sta su ::before, così ::after resta al secondo
     filo dell'anello di focus. */
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mg-th-sort:hover { color: var(--marca-text); }

/* Il verso dell'ordinamento è un segno disegnato, non un carattere che ruota:
   la rotazione è vietata dal sistema di movimento.
   Sta su ::before con `order: 1` — visivamente dopo l'etichetta, come prima —
   perché ::after è il posto del secondo filo dell'anello di focus: su ::after
   le due regole hanno la stessa specificità e il segno ereditava
   `position: absolute; inset: -5px`, saltando fuori dall'angolo del pulsante. */
.mg-th-sort::before {
  content: '';
  order: 1;
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-end: 5px solid currentColor;
  opacity: 0;
}

/* `aria-sort` è un attributo della CELLA di intestazione, non del pulsante:
   cercandolo sul pulsante il segno non compariva mai. */
th[aria-sort]:not([aria-sort='none']) .mg-th-sort::before { opacity: 1; }
th[aria-sort='descending'] .mg-th-sort::before {
  border-block-end: 0;
  border-block-start: 5px solid currentColor;
}

th[aria-sort]:not([aria-sort='none']) { color: var(--marca-text); }

/* Riga selezionata: wash più barra. Il wash da solo è 1,10:1.
   La barra è un `inset` a sfocatura zero: è un filo disegnato dentro la cella,
   non un'ombra. Un bordo vero sposterebbe il contenuto di 4px a ogni
   selezione. È l'unica eccezione al divieto, ed è esplicita. */
.mg-table tbody tr[aria-selected='true'] { background: var(--marca-identity-wash); }

.mg-table tbody tr[aria-selected='true'] td:first-child {
  box-shadow: inset var(--marca-active-bar) 0 0 0 var(--marca-mark);
}

/* Il passaggio è lo stato più debole e cede alla selezione. Senza la guardia
   pesa (0,2,2) come la riga selezionata ed è scritto dopo: il puntatore
   spegneva il wash proprio mentre si guardava la riga. La guardia si scrive
   anche quando a salvare la situazione sarebbe l'ordine — vedi §17. */
.mg-table tbody tr:not([aria-selected='true']):hover {
  background: var(--marca-field-alt);
}

/* Una riga che si apre dichiara di essere interattiva anche col puntatore. */
.mg-table tbody tr[aria-expanded] { cursor: pointer; }

/* Riga di dettaglio espandibile: rivelazione, non scorrimento. */
.mg-row-detail > td { padding: 0; border-block-end: 0; }

/* La cella è azzerata perché la rivelazione anima la propria riga di griglia:
   il padding torna sul corpo del dettaglio, come in .mg-accordion-body. */
.mg-row-detail-body { padding: var(--marca-space-2); }

/* Chiuso vale chiuso anche per la tabulazione e per la lettura assistita:
   vedi il commento in .mg-menu. */
.mg-row-detail-inner {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  /* Uscita 4T contro l'entrata 5T: «un gradino sotto l'entrata, minimo 2T».
     Entrambe erano 5T e la regola che §16 dichiara non era rispettata qui. */
  transition: grid-template-rows var(--marca-motion-field) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-field);
}

.mg-row-detail-inner > * { overflow: hidden; min-block-size: 0; }

tr[aria-expanded='true'] + .mg-row-detail .mg-row-detail-inner {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--marca-motion-panel) var(--marca-ease-enter),
    visibility 0s;
}

.mg-pagination {
  display: flex;
  align-items: center;
  gap: var(--marca-space-2);
  /* R2: il filo superiore è assorbito dal padding, così la riga di paginazione
     chiude su 32 invece che su 33. */
  padding-block: calc(var(--marca-space-2) - var(--marca-border-width))
    var(--marca-space-2);
  border-block-start: var(--marca-border-width) solid var(--marca-border);
}

/* Un filo si sovrappone, non si somma. Subito sotto una tabella l'ultima riga
   porta già il proprio filo di piede: due linee contigue da 1px sono un bordo
   spesso il doppio, e il conto della cornice — 1 + 15 + 16 = 32 — ne conta una
   sola. La paginazione tira indietro il proprio filo di 1px, come fa la tendina
   sotto al campo che la apre. Vale SOLO su questo giunto: da sola, o dopo
   qualunque altra cosa, la riga resta dov'è. */
.mg-table + .mg-pagination,
.mg-table-wrap + .mg-pagination {
  margin-block-start: calc(-1 * var(--marca-border-width));
}

.mg-pagination-info {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  font-variant-numeric: tabular-nums;
  color: var(--marca-text-subtle);
  margin-inline-end: auto;
}

.mg-pagination-page {
  min-inline-size: var(--marca-control-height-s);
  min-block-size: var(--marca-control-height-s);
  padding-inline: var(--marca-space-1);
  display: grid;
  place-items: center;
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  font-variant-numeric: tabular-nums;
  color: var(--marca-text-muted);
  border: var(--marca-border-width) solid transparent;
}

.mg-pagination-page:hover { background: var(--marca-field-alt); color: var(--marca-text); }

.mg-pagination-page[aria-current='page'] {
  border-color: var(--marca-mark);
  color: var(--marca-text);
  font-weight: var(--marca-weight-bold);
}

/* =============================================================================
   2 · SCHEDE E SEZIONI COLLASSABILI
   ============================================================================= */

.mg-tabs { display: flex; flex-direction: column; }

/* R7: l'altezza sta sulla STRISCIA, non sulle schede — con 48 su ogni scheda
   il filo inferiore ci si sommava sopra e la striscia misurava 49. Le schede si
   allungano, disegnano 47, e il bersaglio da 48 lo restituisce .mg-hit, che non
   partecipa al layout (R8). */
.mg-tablist {
  display: flex;
  min-block-size: var(--marca-control-height);
  border-block-end: var(--marca-border-width) solid var(--marca-border);
  overflow-x: auto;
}

.mg-tab {
  position: relative;
  min-block-size: 0;
  padding-inline: var(--marca-space-2);
  white-space: nowrap;
  color: var(--marca-text-muted);
  font-size: var(--marca-type-text-size);
  transition: color var(--marca-motion-control) var(--marca-ease-state),
    background-color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-tab:hover { color: var(--marca-text); background: var(--marca-field-alt); }

.mg-tab[aria-selected='true'] {
  color: var(--marca-text);
  font-weight: var(--marca-weight-medium);
}

/* Scorrimento orizzontale ⇒ barra sul lato inferiore. */
.mg-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  /* A zero e non a −1px: la striscia porta `overflow-x: auto`, quindi calcola
     anche `overflow-y: auto` e ritaglia al proprio padding box — un pixel
     fuori spariva, e la barra non stava «a cavallo del filo» come dichiarato. */
  inset-block-end: 0;
  block-size: var(--marca-active-bar);
  background: var(--marca-mark);
}

.mg-tabpanel { padding-block-start: var(--marca-space-3); }

/* Accordion: la frontiera del campo si sposta. Nessuna altezza in pixel,
   nessun calcolo in JavaScript. */
.mg-accordion { border-block-start: var(--marca-border-width) solid var(--marca-border); }

.mg-accordion-item { border-block-end: var(--marca-border-width) solid var(--marca-border); }

.mg-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--marca-space-2);
  inline-size: 100%;
  /* R2: il filo della voce è assorbito qui, o la riga misura 65 invece dei 64
     dichiarati. 63 disegnati + 1 di filo = 64, e il bersaglio resta sopra i 48. */
  min-block-size: calc(var(--marca-control-height-l) - var(--marca-border-width));
  padding-inline: var(--marca-space-2);
  text-align: start;
  font-size: var(--marca-type-text-size);
  font-weight: var(--marca-weight-medium);
  color: var(--marca-text);
  transition: background-color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-accordion-trigger:hover { background: var(--marca-field-alt); }

/* Aperto e chiuso si distinguono per il segno, non per una rotazione:
   due fili incrociati diventano uno solo. */
.mg-accordion-mark {
  position: relative;
  flex-shrink: 0;
  inline-size: var(--marca-space-2);
  block-size: var(--marca-space-2);
}

.mg-accordion-mark::before,
.mg-accordion-mark::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  translate: 0 -50%;
}

.mg-accordion-mark::after {
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 2px;
  block-size: auto;
  translate: -50% 0;
  transition: opacity var(--marca-motion-state) var(--marca-ease-state);
}

.mg-accordion-trigger[aria-expanded='true'] .mg-accordion-mark::after { opacity: 0; }

/* Chiuso vale chiuso anche per la tabulazione e per la lettura assistita:
   vedi il commento in .mg-menu. */
.mg-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  /* Uscita 4T contro l'entrata 5T, come la riga di dettaglio. */
  transition: grid-template-rows var(--marca-motion-field) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-field);
}

.mg-accordion-panel > * { overflow: hidden; min-block-size: 0; }

.mg-accordion-panel[data-open] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--marca-motion-panel) var(--marca-ease-enter),
    visibility 0s;
}

.mg-accordion-body { padding: var(--marca-space-2) var(--marca-space-2) var(--marca-space-3); }

/* =============================================================================
   3 · SUPERFICI SOVRAPPOSTE
   ============================================================================= */

/* Chi porta una superficie sovrapposta porta anche il proprio inchiostro.
   Al buio la superficie sale di due gradini (vedi --marca-surface-overlay) e
   i ruoli di testo salgono con lei: il terziario calibrato sul campo darebbe
   3,90:1 su Neutral/700, sotto la soglia di lettura. Il ruolo «campo
   secondario» diventa qui la riga al passaggio del pannello. */
.mg-menu,
.mg-listbox,
.mg-drawer,
.mg-modal,
.mg-toast,
.mg-calendar { background: var(--marca-surface-overlay); }

/* E salgono con lei anche i FILI, per la stessa ragione e con lo stesso passo.
   La superficie sovrapposta sale di due gradini (Neutral/900 → 700): un filo
   calibrato sul campo si ritrova allora sulla propria stessa tinta —
   --marca-border e --marca-surface-overlay risolvevano entrambi a Neutral/700,
   cioè 1,00:1, e il separatore di menu, la testa e il piede della finestra e
   ogni tabella dentro un pannello semplicemente non esistevano.
   I fili salgono dunque di due gradini a loro volta: 700 → 500 (2,29:1 sul
   pannello, 1,60:1 sulla riga al passaggio) e strong 500 → 400 (3,90:1 e
   2,72:1), che tiene separati i due pesi anche qui dentro. */
:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar) {
  --marca-text-subtle: var(--marca-neutral-300);
  --marca-field-alt: var(--marca-surface-overlay-alt);
  --marca-border: var(--marca-neutral-500);
  --marca-border-strong: var(--marca-neutral-400);
  /* L'inchiostro «spento» sale con la superficie come tutti gli altri: il
     ruolo è calibrato sul campo (3,38:1 su Neutral/900) e su Neutral/700
     scendeva a 2,29:1. Neutral/400 lo riporta a 3,90:1 — un controllo spento
     deve apparire spento, ma la sua etichetta deve continuare a dire QUALE
     azione è bloccata. */
  --marca-text-disabled: var(--marca-neutral-400);
  /* Idem per l'inchiostro d'errore, che qui veste la voce «Elimina» di un
     menu: Alert/300 dava 3,30:1 sulla riga al passaggio. Alert/200 dà 6,94:1
     sul pannello e 4,84:1 sulla riga. */
  --marca-error-text: var(--marca-alert-200);
  /* E il filo di CONTROLLO, che è quello a cui il sistema chiede i 3:1 di
     WCAG 1.4.11: Neutral/400 dava 2,72:1 sulla riga del pannello, cioè sotto
     la soglia proprio sul token il cui compito è reggerla. Neutral/300 dà
     6,01:1 sul pannello e 4,19:1 sulla riga. Riguarda il filo laterale dei
     messaggi, la traccia dell'interruttore, l'affisso, lo stepper. */
  --marca-border-control: var(--marca-neutral-300);
  /* E l'accento tecnico, che è inchiostro di testo: Orange/400 dava 4,02:1
     sul pannello e 2,80:1 sulla riga. Orange/200 dà 7,30:1 e 5,09:1. */
  --marca-accent-text: var(--marca-orange-200);
}

/* La traccia di un indicatore è una SUPERFICIE, non un filo — e qui la
   distinzione conta. `--marca-border` sale di due gradini insieme al pannello
   perché deve restare visibile *come filo*; ma la traccia di un avanzamento,
   di un caricamento o di un cursore usa lo stesso token come *fondo*, e su
   Neutral/500 il riempimento Green/500 si appiattirebbe a 1,88:1 — lo stesso
   difetto che la banda di caricamento aveva sulla propria traccia fuori di
   qui. Dentro il pannello la traccia scende al campo, che il pannello non
   rimappa: Green/500 su Neutral/900 vale 6,37:1, e la traccia stacca 1,48:1
   dal pannello, esattamente come fa fuori. */
:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar) .mg-progress {
  background: var(--marca-field);
}

/* Il caricamento non ha una traccia piena: la sua traccia È il filo del campo,
   ispessito. Scende anch'esso, per la stessa ragione. */
:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar) .mg-loading {
  border-block-start-color: var(--marca-field);
}

/* La traccia del cursore vive in uno pseudo-elemento del browser, che non
   accetta `:is()`: le due righe restano separate, una per motore. */
:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar)
  .mg-slider input[type='range']::-webkit-slider-runnable-track {
  background: var(--marca-field);
}

:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar)
  .mg-slider input[type='range']::-moz-range-track {
  background: var(--marca-field);
}

/* E dentro il pannello la superficie secondaria è Neutral/600, non
   Neutral/800: chi la porta rialza il terziario di un altro gradino, o
   scenderebbe a 4,19:1. Con Neutral/200: 5,59:1.
   L'ELENCO È LO STESSO della lista gemella in system.css, voce per voce: sono
   due condizioni della stessa regola — chi porta la superficie secondaria
   porta anche i propri inchiostri — e un insieme diverso significherebbe che
   al buio, dentro un pannello, un campo secondario resta senza correzione.
   `.mg-input:disabled` è in lista perché dipinge `--marca-field-alt`, e il suo
   segnaposto legge il terziario. */
:root[data-theme='dark'] :is(.mg-menu, .mg-listbox, .mg-drawer, .mg-modal, .mg-toast, .mg-calendar) :where(
  .mg-field--alt,
  .mg-note,
  .mg-banner,
  .mg-statusbar,
  .mg-tag,
  .mg-affix,
  .mg-input:disabled,
  .mg-table tbody tr:hover
) {
  --marca-text-subtle: var(--marca-neutral-200);
}

/* Menu contestuale. Cresce dal controllo: nessun distacco, nessun raggio. */
.mg-menu {
  position: absolute;
  z-index: 50;
  /* La misura di una tendina è quella del proprio CONTENUTO, mai meno del
     controllo da cui cresce e mai oltre il tetto. Con un minimo fisso a 224px
     un pulsante da 131 apriva un pannello largo quasi il doppio: la tendina
     smetteva di sembrare cresciuta da lì e sembrava arrivata da fuori.
     `100%` è la misura del controllo perché il contenitore posizionato lo
     avvolge — è la regola che §18 dichiara già. */
  min-inline-size: 100%;
  inline-size: max-content;
  max-inline-size: var(--marca-menu-max);
  border: var(--marca-border-width) solid var(--marca-border-overlay);
  display: grid;
  grid-template-rows: 0fr;
  /* Ritagliare non basta a chiudere. `grid-template-rows: 0fr` più
     `overflow: hidden` toglie il pannello alla vista, non alla TABULAZIONE:
     le voci restavano raggiungibili col tasto di tabulazione dentro un menu
     che nessuno vedeva, e il fuoco spariva in un punto invisibile della
     pagina. Chiude anche allo schermo con la stessa grammatica del pannello
     laterale — `visibility` commutata a fine corsa, così la chiusura si vede
     ancora mentre avviene. */
  visibility: hidden;
  transition: grid-template-rows var(--marca-motion-control) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-control);
}

.mg-menu > * { overflow: hidden; min-block-size: 0; }

.mg-menu[data-open] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--marca-motion-field) var(--marca-ease-enter),
    visibility 0s;
}

/* Chiuso non dipinge: a riposo il pannello è alto 2px ma largo quanto la
   propria misura minima, e appoggiava una striscia piena sotto il controllo. */
.mg-menu:not([data-open]) {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

/* Ancoraggio predefinito: cresce dal bordo inferiore del controllo, a filo. */
.mg-menu--sotto {
  inset-inline-start: 0;
  inset-block-start: 100%;
  margin-block-start: calc(-1 * var(--marca-border-width));
}

.mg-menu-item {
  display: flex;
  align-items: center;
  gap: var(--marca-space-2);
  inline-size: 100%;
  min-block-size: var(--marca-control-height);
  padding-inline: var(--marca-space-2);
  text-align: start;
  color: var(--marca-text);
  font-size: var(--marca-type-text-size);
}

/* Una voce spenta non risponde al passaggio: cambiarle il fondo la fa sembrare
   raggiungibile, ed è anche la superficie su cui l'inchiostro «spento» ha meno
   contrasto. Hover è lo stato più debole: cede anche a questo. */
.mg-menu-item:hover:not([aria-disabled='true']),
.mg-menu-item[data-active] { background: var(--marca-field-alt); }
.mg-menu-item[aria-disabled='true'] { color: var(--marca-text-disabled); cursor: not-allowed; }
.mg-menu-item--danger { color: var(--marca-error-text); }

.mg-menu-sep {
  block-size: var(--marca-border-width);
  background: var(--marca-border);
  /* R2: il filo è assorbito dallo spazio che lo precede — 7 + 1 + 8 — così il
     gruppo di voci chiude su 16 invece che su 17 e la pila del menu resta sul
     ritmo. Stessa correzione della riga di paginazione, applicata a un filo che
     sta NEL flusso invece che sul perimetro di una scatola. */
  margin-block: calc(var(--marca-space-1) - var(--marca-border-width))
    var(--marca-space-1);
}

/* L'interlinea si dichiara insieme al corpo: i token vanno a coppie. Presa in
   eredità dal corpo del documento valeva 24, e l'etichetta chiudeva su
   8 + 24 + 8 = 40 invece dei 32 dichiarati. */
.mg-menu-label {
  padding: var(--marca-space-1) var(--marca-space-2);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-xs-size);
  line-height: var(--marca-type-mono-xs-lh);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--marca-text-subtle);
}

/* Suggerimento. È l'unico elemento che compare in opacità, perché non ha
   una frontiera di campo da rivelare: è un'etichetta, non una superficie. */
.mg-tooltip {
  position: absolute;
  z-index: 60;
  max-inline-size: var(--marca-menu-max);
  padding: var(--marca-space-1) var(--marca-space-2);
  background: var(--marca-surface-invert);
  color: var(--marca-text-invert);
  font-size: var(--marca-type-text-s-size);
  line-height: var(--marca-type-text-s-lh);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--marca-motion-state) var(--marca-ease-exit);
}

.mg-tooltip[data-open] {
  opacity: 1;
  transition: opacity var(--marca-motion-control) var(--marca-ease-enter);
}

/* Ancoraggio sotto il bersaglio, a 1U. Il suggerimento non cresce dal
   controllo: è un'etichetta, e un'etichetta si stacca. */
.mg-tooltip--sotto {
  inset-block-start: calc(100% + var(--marca-space-1));
  inset-inline-start: 0;
}

/* Pannello laterale. Scorre per la PROPRIA misura lungo un asse della
   matrice: non «arriva», entra nella sua cella. */
.mg-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 70;
  inline-size: min(var(--marca-panel-s), 100vw);
  display: flex;
  flex-direction: column;
  border-inline-start: var(--marca-border-width) solid var(--marca-border-overlay);
  translate: 100% 0;
  visibility: hidden;
  transition: translate var(--marca-motion-panel) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-panel);
}

.mg-drawer[data-open] {
  translate: 0 0;
  visibility: visible;
  transition: translate var(--marca-motion-surface) var(--marca-ease-enter),
    visibility 0s;
}

.mg-drawer--start {
  inset-inline: 0 auto;
  border-inline-start: 0;
  border-inline-end: var(--marca-border-width) solid var(--marca-border-overlay);
  translate: -100% 0;
}

.mg-drawer--start[data-open] { translate: 0 0; }

/* Velo. L'unica trasparenza del sistema, dichiarata una volta sola. */
.mg-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--marca-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--marca-motion-control) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-control);
}

.mg-scrim[data-open] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--marca-motion-field) var(--marca-ease-enter), visibility 0s;
}

/* Finestra di dialogo. NON centrata: si aggancia alla corsia, come tutto il
   resto del sistema. Il velo la separa dal contesto, il filo la delimita. */
.mg-modal {
  position: fixed;
  inset-block-start: var(--marca-space-12);
  inset-inline-start: var(--marca-grid-margin);
  z-index: 80;
  inline-size: min(var(--marca-panel-m), calc(100vw - var(--marca-grid-margin) * 2));
  max-block-size: calc(100vh - var(--marca-space-12) * 2);
  display: flex;
  flex-direction: column;
  border: var(--marca-border-width) solid var(--marca-border-overlay);
  padding: 0;
  margin: 0;
}

.mg-modal--s { inline-size: min(var(--marca-panel-s), calc(100vw - var(--marca-grid-margin) * 2)); }
.mg-modal--l { inline-size: min(var(--marca-panel-l), calc(100vw - var(--marca-grid-margin) * 2)); }

.mg-modal::backdrop { background: var(--marca-scrim); }

.mg-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--marca-space-2);
  /* R2: il filo inferiore è assorbito dal padding, così la testa chiude su 48
     invece che su 49. */
  padding: var(--marca-space-3) var(--marca-space-3)
    calc(var(--marca-space-3) - var(--marca-border-width));
  border-block-end: var(--marca-border-width) solid var(--marca-border);
}

.mg-modal-body { padding: var(--marca-space-3); overflow-y: auto; }

/* Dentro una superficie sovrapposta vale lo stesso ritmo di flusso del campo. */
:where(.mg-modal-body, .mg-modal-head > div) > * + * { margin-top: var(--marca-space-2); }

.mg-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marca-space-2);
  /* R2: il filo superiore è assorbito dal padding, così il piede chiude su 48
     invece che su 49. */
  padding: calc(var(--marca-space-3) - var(--marca-border-width))
    var(--marca-space-3) var(--marca-space-3);
  border-block-start: var(--marca-border-width) solid var(--marca-border);
}

/* =============================================================================
   4 · CORNICE DELL'APPLICAZIONE
   ============================================================================= */

/* Barra di stato: la riga in fondo che dichiara dove sei e su cosa stai
   lavorando. Config Mono, separatore con spazi attorno al punto medio. */
/* La barra avvolge invece di tagliare: senza `flex-wrap` a 390px la riga
   chiedeva 488px dentro 341 e perdeva metà dei metadati oltre il filo destro,
   senza scorrimento che li recuperasse. La barra di stato è dichiarata «il
   posto dei metadati»: perderne metà è perdita di contenuto, non un
   adattamento. Col padding di riga resta 40 su una riga e passa a 48 su due —
   sempre sul ritmo. */
.mg-statusbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0;
  column-gap: var(--marca-space-2);
  min-block-size: var(--marca-row-s);
  /* R2: il filo superiore è assorbito dal padding, così la barra chiude su 48
     con due righe invece che su 49. Con una riga il conto non ci arriva — 16
     di interlinea più padding e filo fanno 32 — e a tenerla a 40 è il minimo
     dichiarato qui sopra. */
  padding-block: calc(var(--marca-space-1) - var(--marca-border-width))
    var(--marca-space-1);
  padding-inline: var(--marca-space-2);
  background: var(--marca-field-alt);
  border-block-start: var(--marca-border-width) solid var(--marca-border);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-xs-size);
  line-height: var(--marca-type-mono-xs-lh);
  color: var(--marca-text-muted);
}

.mg-statusbar-item { white-space: nowrap; }
/* Il separatore è un GLIFO, non un filo: vale la soglia del testo, non quella
   degli oggetti grafici. In `--marca-border-strong` dava 2,53:1 — un carattere
   che porta gerarchia, illeggibile. L'inchiostro terziario è il ruolo giusto,
   e sulla superficie secondaria della barra vale 6,87:1. */
.mg-statusbar-item + .mg-statusbar-item::before { content: ' · '; color: var(--marca-text-subtle); }
.mg-statusbar-item--end { margin-inline-start: auto; }

/* Quando la barra avvolge, la spinta al bordo opposto sparisce: su una riga
   propria diventerebbe una centratura di fatto. */
@media (max-width: 640px) {
  .mg-statusbar-item--end { margin-inline-start: 0; }
  .mg-toolbar-end { margin-inline-start: 0; }
}

/* Percorso di navigazione. Il separatore è una barra, come nei metadati. */
.mg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marca-space-1);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
}

/* L'elenco ordinato porta la semantica, non il layout: i suoi elementi sono
   figli diretti della riga. */
.mg-breadcrumb ol { display: contents; }

.mg-breadcrumb a { color: var(--marca-text-subtle); text-decoration: none; }
.mg-breadcrumb a:hover { color: var(--marca-text); text-decoration: underline; }
/* Anche questo è un glifo, non un filo: 2,69:1 in `--marca-border-strong`,
   4,58:1 con l'inchiostro terziario sul fondo pagina. Vedi .mg-statusbar-item. */
.mg-breadcrumb li + li::before { content: '/ '; color: var(--marca-text-subtle); }
.mg-breadcrumb [aria-current='page'] { color: var(--marca-text); }

/* Striscia di pulsanti icona: celle quadrate che si toccano. */
/* Stessa regola: l'altezza sta sulla striscia, non sulle celle. */
.mg-iconbar {
  display: flex;
  min-block-size: var(--marca-hit-min);
  background: var(--marca-field-alt);
  border: var(--marca-border-width) solid var(--marca-border);
  inline-size: fit-content;
}

.mg-iconbtn {
  position: relative;
  inline-size: var(--marca-hit-min);
  block-size: auto;
  display: grid;
  place-items: center;
  color: var(--marca-text-muted);
  transition: background-color var(--marca-motion-state) var(--marca-ease-state),
    color var(--marca-motion-state) var(--marca-ease-state);
}

.mg-iconbar .mg-iconbtn + .mg-iconbtn {
  border-inline-start: var(--marca-border-width) solid var(--marca-border);
}

.mg-iconbtn:hover { background: var(--marca-field); color: var(--marca-text); }

.mg-iconbtn[aria-pressed='true'] {
  background: var(--marca-identity-wash);
  color: var(--marca-text);
}

.mg-iconbtn[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--marca-active-bar);
  background: var(--marca-mark);
}

/* =============================================================================
   5 · INDICATORI
   ============================================================================= */

.mg-progress {
  position: relative;
  block-size: var(--marca-progress-height);
  inline-size: 100%;
  background: var(--marca-border);
  overflow: hidden;
}

.mg-progress-bar {
  block-size: 100%;
  inline-size: var(--mg-progress, 0%);
  background: var(--marca-mark);
  transition: inline-size var(--marca-motion-panel) var(--marca-ease-linear);
}

/* Indeterminato: una banda che percorre la traccia a velocità costante.
   Nessun respiro, nessuna pulsazione, nessuna rotazione. */
.mg-progress--indeterminate .mg-progress-bar {
  inline-size: 33%;
  animation: mg-indeterminate var(--marca-motion-loop) var(--marca-ease-linear) infinite;
}

@keyframes mg-indeterminate {
  from { translate: -100% 0; }
  to { translate: 300% 0; }
}

/* Il valore è sempre scritto accanto alla barra. */
.mg-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--marca-space-2);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  font-variant-numeric: tabular-nums;
}

/* Caricamento: il filo del campo diventa più spesso e verde. Non esiste
   nessuna rotella che gira: la rotazione è vietata. */
.mg-loading {
  position: relative;
  border-block-start: 2px solid var(--marca-border);
  /* La banda va RITAGLIATA, come la traccia dell'avanzamento. Senza, traslando
     fino al 300% della propria misura usciva di 76px dal campo e continuava a
     scorrere sopra il contenuto accanto: due righe in movimento invece di una.
     `clip` e non `hidden` perché il taglio è solo orizzontale — la banda vive a
     −2px, sul filo, e in verticale deve restare visibile.
     Il margine di taglio riporta il bordo del ritaglio dal padding box al
     border box, così la banda percorre esattamente il filo e non una traccia
     più corta di due padding. */
  overflow-x: clip;
  overflow-clip-margin: var(--mg-field-pad, 0px);
}

/* La banda è --marca-mark e non --marca-identity: su Neutral/200 — la traccia
   che ha sotto — Green/500 staccava 1,86:1 e l'indicatore non si distingueva
   dalla propria traccia. Green/700 dà 4,86:1. È la stessa regola che il token
   dichiara già: «ogni riempimento verde che porta un segno — riempimento di
   traccia, avanzamento — è Green/700». */
.mg-loading::after {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  /* Parte dal bordo del campo, non dal padding: il filo che percorre è quello
     del border box. */
  inset-inline-start: calc(-1 * var(--mg-field-pad, 0px));
  block-size: 2px;
  inline-size: 33%;
  background: var(--marca-mark);
  animation: mg-indeterminate var(--marca-motion-loop) var(--marca-ease-linear) infinite;
}

/* Scheletro: fermo. Nessun luccichio, nessun gradiente in movimento.
   Una superficie che dichiara la forma di ciò che arriverà. */
/* La larghezza è un parametro del campione, non uno stile: si dichiara con
   --mg-skeleton-w, come --mg-bar per le barre di un grafico. */
.mg-skeleton {
  background: var(--marca-field-alt);
  border: var(--marca-border-width) solid var(--marca-border);
  block-size: var(--marca-space-2);
  inline-size: var(--mg-skeleton-w, 100%);
}

.mg-skeleton--text { block-size: var(--marca-type-text-lh); border: 0; }
.mg-skeleton--title { block-size: var(--marca-space-4); border: 0; }
.mg-skeleton + .mg-skeleton { margin-block-start: var(--marca-space-1); }

/* Stato vuoto: a bandiera sinistra, con un'azione. Non un'icona centrata
   con una frase sotto. */
.mg-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--marca-space-2);
  /* 24, non 48: la tabella di File_MD/17 dichiara 48 come distanza «gruppo ↔
     gruppo». Usato come inset interno faceva 96px di padding attorno a 168px
     di contenuto. Il padding di un contenitore è quello del campo, e il filo
     lo assorbe (R2) perché la scatola chiuda su U. */
  padding: calc(var(--marca-space-3) - var(--marca-border-width));
  border: var(--marca-border-width) solid var(--marca-border);
  background: var(--marca-field);
  text-align: start;
}

/* Corpo e interlinea insieme: da solo il corpo ereditava i 24 del testo. */
.mg-empty-title {
  font-size: var(--marca-type-body-m-size);
  line-height: var(--marca-type-body-m-lh);
  font-weight: var(--marca-weight-medium);
}
.mg-empty-text { color: var(--marca-text-muted); max-inline-size: 60ch; }

.mg-empty-code {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  color: var(--marca-text-subtle);
}

/* =============================================================================
   6 · MESSAGGI
   ============================================================================= */

/* Banner persistente: attraversa il campo, filo sopra e sotto, non si chiude
   da solo. */
.mg-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--marca-space-2);
  /* R2: qui i fili sono DUE, sopra e sotto, e vanno assorbiti entrambi — o la
     fascia chiude su 34. Con 15 + 1 per lato fa 32. */
  padding: calc(var(--marca-space-2) - var(--marca-border-width))
    var(--marca-space-3);
  border-block: var(--marca-border-width) solid var(--marca-border);
  /* Stessa correzione del messaggio in linea: il filo laterale è il secondo
     segnale e deve reggere 3:1 sul proprio fondo. Vedi .mg-note in system.css. */
  border-inline-start: var(--marca-active-bar) solid var(--marca-border-control);
  background: var(--marca-field-alt);
}

/* Attenzione porta l'INCHIOSTRO dello stato e non il ruolo pieno, sola
   asimmetria fra i quattro: `--marca-warning` dà 2,56:1 sul proprio fondo e
   2,99:1 sul campo bianco, sotto i 3:1 di WCAG 1.4.11 in entrambi i posti.
   Deroga dichiarata per esteso accanto a .mg-note, in system.css. */
.mg-banner--info { border-inline-start-color: var(--marca-info); background: var(--marca-info-wash); }
.mg-banner--success { border-inline-start-color: var(--marca-success); background: var(--marca-success-wash); }
.mg-banner--warning { border-inline-start-color: var(--marca-warning-text); background: var(--marca-warning-wash); }
.mg-banner--error { border-inline-start-color: var(--marca-error); background: var(--marca-error-wash); }

.mg-banner-body { flex: 1; min-inline-size: 0; }

.mg-banner-title {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  font-weight: var(--marca-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Notifica temporanea.
   Sta in basso a DESTRA, non a sinistra: a sinistra vive la corsia, e una
   notifica che le si sovrappone copre proprio l'elemento che orienta. Entra
   scorrendo per la propria misura, dal lato in cui vive.
   Non è centrata — il sistema non centra — ma non è nemmeno sopra la
   navigazione: sta nell'angolo che non porta struttura. */
.mg-toast-region {
  position: fixed;
  inset-block-end: var(--marca-space-3);
  inset-inline-end: var(--marca-space-3);
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--marca-space-2);
  inline-size: min(var(--marca-panel-s), calc(100vw - var(--marca-space-6)));
  pointer-events: none;
}

/* Il filo di stacco è quello degli overlay — grafite su chiaro — perché la
   notifica sta sopra tutto e deve leggersi su qualunque cosa abbia sotto.
   Il filo laterale da 4px porta il colore del ruolo: è il terzo segnale,
   dopo il titolo e il testo. */
.mg-toast {
  pointer-events: auto;
  display: grid;
  gap: var(--marca-space-1);
  /* R2: il perimetro porta un filo sopra e uno sotto e il padding li assorbe
     entrambi, o la notifica chiude su 34 invece che su 32. */
  padding: calc(var(--marca-space-2) - var(--marca-border-width))
    var(--marca-space-3);
  border: var(--marca-border-width) solid var(--marca-border-overlay);
  border-inline-start-width: var(--marca-active-bar);
  translate: calc(100% + var(--marca-space-3)) 0;
  transition: translate var(--marca-motion-control) var(--marca-ease-exit);
}

.mg-toast[data-open] {
  translate: 0 0;
  transition: translate var(--marca-motion-field) var(--marca-ease-enter);
}

/* Stessa deroga della fascia e del messaggio in linea: attenzione porta
   l'inchiostro dello stato, non il ruolo pieno. Vedi .mg-note in system.css. */
.mg-toast--success { border-inline-start-color: var(--marca-success); }
.mg-toast--warning { border-inline-start-color: var(--marca-warning-text); }
.mg-toast--error { border-inline-start-color: var(--marca-error); }

/* Il titolo dichiara l'esito in una parola, il corpo lo circostanzia.
   Una notifica che dice solo «fatto» non è leggibile: non si sa cosa. */
.mg-toast-title {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  line-height: var(--marca-type-mono-s-lh);
  font-weight: var(--marca-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--marca-text);
}

.mg-toast--success .mg-toast-title { color: var(--marca-success-text); }
.mg-toast--warning .mg-toast-title { color: var(--marca-warning-text); }
.mg-toast--error .mg-toast-title { color: var(--marca-error-text); }

.mg-toast-body {
  min-inline-size: 0;
  font-size: var(--marca-type-text-size);
  line-height: var(--marca-type-text-lh);
  color: var(--marca-text);
}

/* Terza riga della notifica: le altre due dichiarano la propria interlinea,
   questa la ereditava a 24 invece dei 16 che il token accoppia all'11. */
.mg-toast-meta {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-xs-size);
  line-height: var(--marca-type-mono-xs-lh);
  color: var(--marca-text-subtle);
}

/* Il contratto del movimento ridotto è in system.css, in un blocco solo:
   qui non se ne tiene una copia, perché due copie divergono. */