/* =============================================================================
   MARCA GROUP — DESIGN SYSTEM · CONTROLLI DI MODULO E SELEZIONE
   Dipende da tokens.css e system.css: caricali PRIMA, in quest'ordine.
   Documentazione: File_MD/17_CONTROLLI_E_MODULI.md

   TRE REGOLE CHE GOVERNANO TUTTO QUESTO FILE

   1. Il divieto di gutter riguarda i CAMPI, non i controlli.
      Due campi si toccano; due controlli indipendenti si separano. Gli unici
      valori ammessi fra controlli sono 0 (fanno un oggetto solo, si toccano
      con un filo), 16px (controlli indipendenti), 24px (blocchi di modulo),
      48px (gruppi). Nient'altro.

   2. Il verde che porta un segno bianco è Green/700, non Green/500.
      Bianco su Green/500 dà 2,65:1. Ogni spunta, pomello acceso, giorno
      selezionato, riempimento di traccia usa il token --marca-mark.

   3. Il wash non è mai il segnale.
      Green/50 su bianco è 1,10:1: invisibile in scala di grigi. Ogni stato
      selezionato porta ANCHE un segno strutturale — barra da 4px, quadratino
      pieno, filo che cambia colore, peso Medium.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   AREA DI TOCCO
   I controlli disegnati sotto i 48px estendono l'area con uno pseudo-elemento
   che non partecipa al layout: le misure di disegno restano sul ritmo, l'area
   di tocco è invisibile e non sposta nulla.
   -------------------------------------------------------------------------- */

/* Il bersaglio si applica DA SÉ ai controlli che il sistema disegna sotto i 48.
   `.mg-hit` era dichiarato, prescritto da R8 e da §06, e applicato in zero
   punti del markup: otto controlli restavano sotto soglia. Un bersaglio che
   dipende da una classe che si può dimenticare non è una garanzia — se il
   sistema sa già quali controlli disegna piccoli, glielo dà lui.
   `.mg-hit` resta per i casi che il sistema non conosce.
   `.mg-iconbtn` è in lista pur essendo largo 48: la striscia che lo contiene è
   alta 48 con un filo per lato, e con `box-sizing: border-box` al pulsante
   restano 46 di altezza. 48 × 46 è sotto soglia quanto 46 × 46, e il
   bersaglio lo riporta a 48 × 48 sconfinando di 1px sui due fili — che non
   sposta nulla, perché lo pseudo-elemento non partecipa al layout.
   Esclusi i pulsanti che aprono un menu: là ::before porta già il segno, e per
   la stessa ragione l'esclusione vale anche sul pulsante icona. */
/* `.mg-search-clear` non è in questa lista e non ci deve tornare: è già
   `position: absolute` di suo (sezione 1), che è anch'esso un blocco
   contenitore per lo pseudo-elemento. Dichiararle `relative` qui era una riga
   morta — la vinceva la propria regola, più in basso nello stesso foglio. */
.mg-hit,
.mg-tab,
.mg-tag-remove,
.mg-pagination-page,
.mg-calendar-day,
.mg-segmented-item,
.mg-iconbtn:not([aria-haspopup='true']),
.mg-btn--s:not([aria-haspopup='true']) { position: relative; }

.mg-hit::before,
.mg-tab::before,
.mg-tag-remove::before,
.mg-search-clear::before,
.mg-pagination-page::before,
.mg-calendar-day::before,
.mg-segmented-item::before,
.mg-iconbtn:not([aria-haspopup='true'])::before,
.mg-btn--s:not([aria-haspopup='true'])::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--marca-hit-min);
  block-size: var(--marca-hit-min);
  translate: -50% -50%;
  pointer-events: auto;
}

/* =============================================================================
   1 · INSERIMENTO
   ============================================================================= */

/* Area di testo — stesse regole del campo, altezza in righe intere. */
.mg-textarea {
  min-block-size: calc(var(--marca-control-height) * 2);
  padding: var(--marca-space-2);
  resize: vertical;
  font-family: var(--marca-font-primary);
  line-height: var(--marca-type-text-lh);
}

/* Lo stato di errore vale per OGNI campo, non solo per quello di riga: senza
   questa riga l'area di testo si stringeva di un pixel (per la compensazione
   qui sotto) senza mostrare alcun filo rosso. */
textarea.mg-textarea[aria-invalid='true'] {
  border-color: var(--marca-error);
  border-width: var(--marca-focus-width);
}

/* Il padding dell'area è 2U su tutti i lati, non 1U/2U come il campo di riga:
   a fuoco riassorbe il filo dalla propria misura, non da quella del campo. */
textarea.mg-textarea:focus-visible,
textarea.mg-textarea[aria-invalid='true'] {
  padding: calc(var(--marca-space-2) - var(--marca-border-width));
}

/* Gruppo: più elementi che formano UN solo oggetto. Si toccano, separati da
   un filo interno; il gruppo porta un filo solo attorno a sé. */
/* L'altezza sta QUI, sul contenitore che il sistema nomina: se la si mette sui
   figli, il bordo da 1px ci si somma sopra e il gruppo misura 50px invece dei
   48 dichiarati. I figli si allungano, non si quotano. */
.mg-inputgroup {
  display: flex;
  align-items: stretch;
  min-block-size: var(--marca-control-height);
  inline-size: 100%;
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-control);
  background: var(--marca-field);
  overflow: hidden;
}

.mg-inputgroup:focus-within { border-color: var(--marca-text-muted); }

.mg-inputgroup > .mg-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
}

/* L'anello di focus è del gruppo, non del campo interno: un oggetto solo,
   un solo indicatore.
   Il gruppo è un <div> e un ::after potrebbe disegnarlo — ma `overflow:
   hidden` ritaglia tutto ciò che esce dal suo campo, e il secondo filo sta
   fuori per definizione. Anche qui la coppia passa allora a cavallo del
   bordo, come sui campi rimpiazzati: verde dentro allo spessore del focus,
   contenimento fuori, contigui. Il campo interno riassorbe il pixel in più,
   così il testo non si muove (R2). */
/* Le due righe che tolgono l'anello al campo interno valgono SOLO dove il
   selettore che lo rimette sul gruppo è supportato: senza la guardia, un motore
   senza `:has()` scarta la regola del gruppo e tiene queste, lasciando il
   gruppo senza alcun indicatore. */
@supports selector(:has(*)) {
  .mg-inputgroup > .mg-input:focus-visible { outline: none; }
  .mg-inputgroup > .mg-input:focus-visible::after { content: none; }
}
/* L'errore è del gruppo, per la stessa ragione dell'anello: il campo interno
   ha `border: 0`, quindi `[aria-invalid]` gli cambiava colore e spessore di un
   filo che non c'è e lo stato non si vedeva affatto — un campo non valido che
   non lo dice. Il filo lo porta il gruppo, esattamente come porta l'anello, e
   il campo interno riassorbe il pixel in più (R2).
   La regola sta PRIMA di quella del fuoco e pesa uguale (0,3,0): a fuoco vince
   il fuoco, come su ogni campo del sistema. L'errore non si perde — resta nel
   messaggio obbligatorio e in `aria-invalid` — e torna appena il fuoco se ne va. */
.mg-inputgroup:has(> .mg-input[aria-invalid='true']) {
  border-color: var(--marca-error);
  border-width: var(--marca-focus-width);
}
.mg-inputgroup:has(> .mg-input:focus-visible) {
  outline: var(--marca-border-width) solid var(--marca-focus-ring-contrast);
  outline-offset: 0;
  border-color: var(--marca-focus-ring);
  border-width: var(--marca-focus-width);
}
/* Il rientro è lo stesso nei due stati a filo doppio — 7 / 15 — e si dichiara
   una volta sola: il testo non si sposta né a fuoco né in errore. */
.mg-inputgroup:has(> .mg-input[aria-invalid='true']) > .mg-input,
.mg-inputgroup:has(> .mg-input:focus-visible) > .mg-input {
  padding: calc(var(--marca-space-1) - var(--marca-border-width))
    calc(var(--marca-space-2) - var(--marca-border-width));
}

/* Affisso: unità di misura, valuta, prefisso di codice. Non è interattivo. */
.mg-affix {
  display: grid;
  place-items: center;
  padding-inline: var(--marca-space-2);
  background: var(--marca-field-alt);
  color: var(--marca-text-muted);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  white-space: nowrap;
  user-select: none;
}

.mg-affix--start { border-inline-end: var(--marca-border-width) solid var(--marca-border-control); }
.mg-affix--end { border-inline-start: var(--marca-border-width) solid var(--marca-border-control); }

/* Stepper numerico. I due pulsanti e il campo sono un oggetto solo. */
.mg-stepper {
  display: flex;
  align-items: stretch;
  min-block-size: var(--marca-control-height);
  inline-size: fit-content;
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-control);
  background: var(--marca-field);
  overflow: hidden;
}

.mg-stepper-btn {
  inline-size: var(--marca-control-height);
  display: grid;
  place-items: center;
  background: var(--marca-field-alt);
  color: var(--marca-text);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-size);
  transition: background-color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-stepper-btn:hover:not(:disabled) { background: var(--marca-border); }
.mg-stepper-btn:disabled { color: var(--marca-text-disabled); cursor: not-allowed; }
.mg-stepper-btn--minus { border-inline-end: var(--marca-border-width) solid var(--marca-border-control); }
.mg-stepper-btn--plus { border-inline-start: var(--marca-border-width) solid var(--marca-border-control); }

/* L'unica centratura ammessa nel sistema, e vale solo qui: il valore sta fra
   due pulsanti simmetrici, e allinearlo a un lato lo farebbe saltare a ogni
   incremento. È simmetria funzionale, non composizione.

   La larghezza è R2 sull'asse in linea, cioè lo stesso conto del corollario di
   R7 sull'asse in blocco: dentro un contenitore che porta un filo per lato il
   figlio DISEGNA la misura meno i due fili. Lo stepper chiude su 192 = 24U
   (48 + 96 + 48) e il valore ne disegna 94, non 96: con 96 la scatola misurava
   194, che non è un multiplo di U, e saliva a 196 appena il filo passava a 2 —
   mentre il contratto dichiara che a fuoco il layout non cambia. */
.mg-stepper .mg-input {
  border: 0;
  border-radius: 0;
  inline-size: calc(var(--marca-space-10) + var(--marca-space-2) - 2 * var(--marca-border-width));
  min-block-size: 0;
  text-align: center;
  font-family: var(--marca-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Come il gruppo di campi: il campo interno non ha filo proprio, quindi
   l'anello è dell'oggetto intero e passa a cavallo del suo bordo. */
@supports selector(:has(*)) {
  .mg-stepper > .mg-input:focus-visible { outline: none; }
}
/* Anche l'errore è dell'oggetto intero, e per la stessa ragione: il campo
   interno ha `border: 0` e il filo rosso non aveva dove disegnarsi.
   Sta PRIMA del fuoco e pesa uguale (0,3,0): a fuoco vince il fuoco. */
.mg-stepper:has(> .mg-input[aria-invalid='true']) {
  border-color: var(--marca-error);
  border-width: var(--marca-focus-width);
}
.mg-stepper:has(> .mg-input:focus-visible) {
  outline: var(--marca-border-width) solid var(--marca-focus-ring-contrast);
  outline-offset: 0;
  border-color: var(--marca-focus-ring);
  border-width: var(--marca-focus-width);
}
/* Il filo passa da 1 a 2 su entrambi gli assi e il valore lo riassorbe su
   entrambi: 94 diventa 92 in linea, 8 diventa 7 in blocco. La scatola resta
   192 × 48 e non si muove di un pixel. */
.mg-stepper:has(> .mg-input[aria-invalid='true']) > .mg-input,
.mg-stepper:has(> .mg-input:focus-visible) > .mg-input {
  inline-size: calc(var(--marca-space-10) + var(--marca-space-2) - 2 * var(--marca-focus-width));
  padding-block: calc(var(--marca-space-1) - var(--marca-border-width));
}

/* Ricerca. Espansa di norma; la variante che si apre sta in surfaces.css. */
.mg-search { position: relative; display: flex; align-items: center; }
.mg-search .mg-input { padding-inline-start: var(--marca-space-6); }
/* La riserva per il glifo resta 6U a fuoco E in errore: si stringe del solo
   pixel che il filo si è preso, come gli altri tre lati — 48 diventa 47.
   L'errore va dichiarato quanto il fuoco: la regola generica di system.css
   `:is(input, select, textarea).mg-input[aria-invalid='true']` (0,2,1) riscrive
   il `padding` per intero, e senza questa riga la riserva crollava da 48 a 15
   proprio nel campo non valido — il testo finiva sotto la lente. */
.mg-search .mg-input:focus-visible,
.mg-search .mg-input[aria-invalid='true'] { padding-inline-start: calc(var(--marca-space-6) - var(--marca-border-width)); }

.mg-search-icon {
  position: absolute;
  inset-inline-start: var(--marca-space-2);
  color: var(--marca-text-subtle);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.mg-search-clear {
  position: absolute;
  inset-inline-end: var(--marca-space-1);
  inline-size: var(--marca-control-height-s);
  block-size: var(--marca-control-height-s);
  display: grid;
  place-items: center;
  color: var(--marca-text-subtle);
  border-radius: var(--marca-radius-control);
}

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

/* =============================================================================
   2 · SELEZIONE
   ============================================================================= */

/* Select nativa. Il glifo è disegnato dal contenitore: una freccia dentro
   il carattere sarebbe tipografia usata come icona. */
.mg-select-wrap { position: relative; display: block; }

.mg-select {
  appearance: none;
  inline-size: 100%;
  min-block-size: var(--marca-control-height);
  padding: var(--marca-space-1) var(--marca-space-6) var(--marca-space-1) var(--marca-space-2);
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-control);
  background: var(--marca-field);
  color: var(--marca-text);
  font-family: var(--marca-font-primary);
  font-size: var(--marca-type-text-size);
  cursor: pointer;
  /* Un valore più lungo della cella si tronca in modo leggibile invece di
     essere tagliato dal filo: il valore intero resta disponibile da aperto. */
  text-overflow: ellipsis;
  transition: border-color var(--marca-motion-control) var(--marca-ease-state);
}

/* Il passaggio cede al focus e all'errore, come sul campo di testo. */
.mg-select:hover:not(:disabled):not(:focus-visible):not([aria-invalid='true']) { border-color: var(--marca-text-muted); }

.mg-select[aria-invalid='true'] {
  border-color: var(--marca-error);
  border-width: var(--marca-focus-width);
}

/* La riserva per il glifo è 6U sul lato di chiusura: a fuoco si stringe del
   solo pixel del filo, come gli altri tre lati. */
select.mg-select:focus-visible,
select.mg-select[aria-invalid='true'] {
  padding: calc(var(--marca-space-1) - var(--marca-border-width))
    calc(var(--marca-space-6) - var(--marca-border-width))
    calc(var(--marca-space-1) - var(--marca-border-width))
    calc(var(--marca-space-2) - var(--marca-border-width));
}
.mg-select:disabled { background: var(--marca-field-alt); color: var(--marca-text-disabled); cursor: not-allowed; }

/* Il glifo non ruota mai: la rotazione è vietata dal sistema di movimento.
   Aperto e chiuso si distinguono per il segno, non per il moto. */
.mg-select-wrap::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--marca-space-2);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: var(--marca-mark-square);
  block-size: var(--marca-mark-square);
  border-inline-end: 2px solid var(--marca-text-muted);
  border-block-end: 2px solid var(--marca-text-muted);
  rotate: 45deg;
  margin-block-start: -3px;
  pointer-events: none;
}

/* Il glifo si spegne col campo. Vive sul contenitore e non sul `select`, così
   non seguiva `:disabled`: una tendina spenta mostrava una freccia a pieno
   contrasto, che invita a un'azione che non c'è. Il contratto di §17 dà allo
   stato disabilitato un inchiostro solo, e vale anche per i segni. */
.mg-select-wrap:has(> .mg-select:disabled)::after {
  border-inline-end-color: var(--marca-text-disabled);
  border-block-end-color: var(--marca-text-disabled);
}

/* Combobox: campo + tendina. La tendina cresce dal controllo, a filo:
   margin-block-start -1px, nessun distacco, nessun raggio. */
.mg-combobox { position: relative; }

/* Il grilletto di una tendina NON è un pulsante: è un campo che si apre, e
   deve dirlo. Porta lo stesso segno della select nativa — due fili che formano
   un angolo, disegnati dal controllo, perché una freccia dentro il carattere
   sarebbe tipografia usata come icona.
   Il segno non ruota: §16 lo vieta esplicitamente per chevron e indicatori.
   Aperto e chiuso si distinguono per il TOKEN — è lo scambio, il quarto
   archetipo — e per la sagoma, mai per il moto. */
.mg-combobox > .mg-input {
  position: relative;
  padding-inline-end: var(--marca-space-6);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mg-combobox > .mg-input::before {
  content: '';
  position: absolute;
  inset-inline-end: var(--marca-space-2);
  inset-block-start: 50%;
  inline-size: var(--marca-mark-square);
  block-size: var(--marca-mark-square);
  border-inline-end: 2px solid var(--marca-text-muted);
  border-block-end: 2px solid var(--marca-text-muted);
  translate: 0 -50%;
  rotate: 45deg;
  margin-block-start: -3px;
  pointer-events: none;
  transition: border-color var(--marca-motion-state) var(--marca-ease-state);
}

/* Aperta, controllo e tendina sono UN oggetto solo: stessa superficie, stesso
   filo di stacco, e lo spigolo inferiore si squadra perché le due parti
   formino una sagoma sola. Senza, si leggono come due pezzi appiccicati.
   Lo stato non è affidato al colore: c'è aria-expanded, cambia la sagoma, e
   compare la tendina. */
.mg-combobox > .mg-input[aria-expanded='true'] {
  background: var(--marca-surface-overlay);
  border-color: var(--marca-border-overlay);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.mg-combobox > .mg-input[aria-expanded='true']::before {
  border-color: var(--marca-mark);
}

.mg-listbox {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  margin-block-start: calc(-1 * var(--marca-border-width));
  z-index: 40;
  max-block-size: var(--marca-listbox-max);
  overflow-y: auto;
  border: var(--marca-border-width) solid var(--marca-border-overlay);
  border-radius: 0;
  /* Rivelazione: si sposta una frontiera, non l'oggetto. */
  display: grid;
  grid-template-rows: 0fr;
  /* Chiusa vale chiusa anche per la tabulazione: ritagliare l'altezza non
     toglie le opzioni all'ordine di tabulazione, e il fuoco finiva dentro una
     tendina invisibile. Vedi il commento in surfaces.css → .mg-menu. */
  visibility: hidden;
  transition: grid-template-rows var(--marca-motion-control) var(--marca-ease-exit),
    visibility 0s linear var(--marca-motion-control);
}

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

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

/* Variante NEL FLUSSO. La tendina non si sovrappone: cresce dentro il flusso e
   ciò che sta sotto scende. Si usa dove ciò che sta sotto PUÒ scendere — una
   pagina di riferimento, una scheda che non è un modulo — e MAI dentro un
   modulo, dove far saltare i campi mentre si sceglie è peggio del sovrapporsi.
   È la forma più pura della rivelazione: la frontiera scende e il resto la
   segue, senza che nessuno debba riservare l'altezza da aperto. */
.mg-listbox--flusso {
  position: static;
  max-block-size: none;
}

/* Chiusa non dipinge: a riposo è alta 2px ma larga quanto il controllo, e
   appoggiava una striscia piena sotto di esso. */
.mg-listbox:not([data-open]) {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

.mg-option {
  display: flex;
  align-items: center;
  gap: var(--marca-space-1);
  min-block-size: var(--marca-control-height);
  padding: var(--marca-space-1) var(--marca-space-2);
  padding-inline-start: calc(var(--marca-space-2) + var(--marca-active-bar));
  inline-size: 100%;
  text-align: start;
  color: var(--marca-text);
  position: relative;
  cursor: pointer;
}

/* Un'opzione spenta non risponde al passaggio: vedi .mg-menu-item.
   E il passaggio cede alla SELEZIONE, come nel calendario: senza la guardia
   `.mg-option:hover:not([aria-disabled='true'])` (0,3,0) batteva
   `.mg-option[aria-selected='true']` (0,2,0), e l'opzione scelta perdeva il
   proprio wash nell'istante in cui le si portava sopra il puntatore — restava
   la sola barra a dire quale fosse. La guardia sta sul passaggio, non si alza
   la specificità della selezione. */
.mg-option:hover:not([aria-disabled='true']):not([aria-selected='true']),
.mg-option[data-active]:not([aria-disabled='true']):not([aria-selected='true']) {
  background: var(--marca-field-alt);
}

/* Selezionato: wash + barra. Il wash da solo sarebbe invisibile. */
.mg-option[aria-selected='true'] {
  background: var(--marca-identity-wash);
  font-weight: var(--marca-weight-medium);
}

.mg-option[aria-selected='true']::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: var(--marca-active-bar);
  background: var(--marca-mark);
}

.mg-option[aria-disabled='true'] { color: var(--marca-text-disabled); cursor: not-allowed; }

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

/* =============================================================================
   3 · SCELTA BINARIA E MULTIPLA
   ============================================================================= */

/* La riga è il CONTROLLO: è lei a portare il bersaglio da 48, ed è lei che si
   clicca per intero. Il quadratino e il pomello sono SEGNI — famiglia distinta,
   dichiarata in tokens.css — e un segno sta accanto alla propria etichetta a
   1U, perché insieme fanno un oggetto solo. */
.mg-check,
.mg-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--marca-space-1);
  min-block-size: var(--marca-hit-min);
  padding-block: var(--marca-space-1);
  cursor: pointer;
}

.mg-check input,
.mg-radio input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }

/* 16 = 2U: il doppio del quadratino di selezione che il sistema già dichiara
   (--marca-mark-square) e la metà della taglia compatta. A 24 il segno pesava
   quanto una pillola di stato accanto a un testo da 16/24, e una lista di
   opzioni si leggeva come una fila di scatole.
   Lo scarto dalla prima riga di testo è RICAVATO, non aggiustato a occhio:
   (interlinea 24 − segno 16) / 2 = 4. */
.mg-check-box,
.mg-radio-dot {
  position: relative;
  flex-shrink: 0;
  inline-size: var(--marca-space-2);
  block-size: var(--marca-space-2);
  margin-block-start: calc((var(--marca-type-text-lh) - var(--marca-space-2)) / 2);
  border: var(--marca-border-width) solid var(--marca-border-control);
  background: var(--marca-field);
  transition: background-color var(--marca-motion-control) var(--marca-ease-state),
    border-color var(--marca-motion-control) var(--marca-ease-state);
}

/* Spigolo vivo. Il raggio da 4 è calibrato su un controllo da 48, dove vale
   l'8% del lato; su un segno da 16 vale il 25% — è una forma diversa, non la
   stessa regola applicata con coerenza. Il sistema compone a spigolo, e
   File_MD/17 lo chiama «quadratino»: resta un quadrato. */
.mg-check-box { border-radius: 0; }
.mg-radio-dot { border-radius: 50%; }

/* La casella si RIEMPIE, perché la spunta ha bisogno di un fondo su cui
   stare. Il pomello no: il suo segno è il pomello stesso, e un segno tondo ha
   bisogno di aria attorno. Riempire anche l'anello lo trasformava in una
   ciambella spessa 4px con un buco bianco al centro — pesante, e a colpo
   d'occhio più simile a «non scelto» che a «scelto». Cambia il filo, compare
   il pomello: due segnali, nessun riempimento. */
.mg-check input:checked + .mg-check-box {
  background: var(--marca-mark);
  border-color: var(--marca-mark);
}

.mg-radio input:checked + .mg-radio-dot { border-color: var(--marca-mark); }

/* La spunta è disegnata, non è un carattere: due fili che formano un angolo,
   nello spessore dell'anello — 2px, il secondo peso della famiglia dei segni. */
.mg-check input:checked + .mg-check-box::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 4px;
  inline-size: 4px;
  block-size: 7px;
  border-inline-end: 2px solid var(--marca-mark-text);
  border-block-end: 2px solid var(--marca-mark-text);
  rotate: 45deg;
}

.mg-check input:indeterminate + .mg-check-box {
  background: var(--marca-mark);
  border-color: var(--marca-mark);
}

.mg-check input:indeterminate + .mg-check-box::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 3px;
  block-size: 2px;
  translate: 0 -50%;
  background: var(--marca-mark-text);
}

/* Il pomello acceso è il quadratino di selezione del sistema, tondo: 8 in 16,
   cioè lo stesso segno che porta la chip filtro. Non un valore nuovo. */
.mg-radio input:checked + .mg-radio-dot::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--marca-mark-square);
  block-size: var(--marca-mark-square);
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--marca-mark);
}

/* Il segno porta l'anello per conto del proprio campo nascosto. Il secondo
   filo passa da ::before perché ::after qui disegna la spunta e il pomello:
   senza, restava il solo verde — 2,43:1 su carta, sotto i 3:1 di WCAG 1.4.11,
   esattamente la ragione per cui l'anello è a due fili. */
.mg-check input:focus-visible + .mg-check-box,
.mg-radio input:focus-visible + .mg-radio-dot {
  outline: var(--marca-focus-width) solid var(--marca-focus-ring);
  outline-offset: var(--marca-focus-offset);
}

.mg-check input:focus-visible + .mg-check-box::before,
.mg-radio input:focus-visible + .mg-radio-dot::before {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--marca-focus-width) + var(--marca-focus-offset) + var(--marca-border-width)));
  border: var(--marca-border-width) solid var(--marca-focus-ring-contrast);
  border-radius: inherit;
  pointer-events: none;
}

.mg-check input:disabled ~ *,
.mg-radio input:disabled ~ * { color: var(--marca-text-disabled); }
.mg-check input:disabled + .mg-check-box,
.mg-radio input:disabled + .mg-radio-dot { background: var(--marca-field-alt); border-color: var(--marca-border); }

/* Spenta E spuntata resta spuntata. Il fondo della casella torna al campo
   secondario, ma la spunta restava --marca-mark-text — bianca su Neutral/100,
   1,16:1: la casella si leggeva come NON spuntata, e uno stato disabilitato
   perde il colore, non l'informazione. Prende l'inchiostro spento, come fa
   già il pomello dell'interruttore. */
/* La spunta è disegnata con due fili, il segno indeterminato con un
   riempimento: si corregge la proprietà che ciascuno usa davvero, o il segno
   di spunta diventerebbe un parallelogramma pieno. */
.mg-check input:disabled:checked + .mg-check-box::after { border-color: var(--marca-text-disabled); }
.mg-check input:disabled:indeterminate + .mg-check-box::after { background: var(--marca-text-disabled); }

.mg-radio input:disabled:checked + .mg-radio-dot::after { background: var(--marca-text-disabled); }

.mg-check-label,
.mg-radio-label { font-size: var(--marca-type-text-size); line-height: var(--marca-type-text-lh); }

/* L'interlinea è dichiarata, non ereditata: il conto «riga 48, 64 col
   suggerimento» di §17 poggia su questi 24, e una misura su cui si regge un
   conto non può arrivare per eredità dal corpo del documento. */
.mg-check-hint,
.mg-radio-hint {
  display: block;
  color: var(--marca-text-subtle);
  font-size: var(--marca-type-text-s-size);
  line-height: var(--marca-type-text-s-lh);
}

.mg-checkgroup,
.mg-radiogroup { border: 0; padding: 0; margin: 0; }

/* Interruttore. Il pomello trasla: è l'unico percorso di un controllo, e
   vale esattamente la propria misura. */
.mg-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-2);
  min-block-size: var(--marca-hit-min);
  cursor: pointer;
}

.mg-toggle input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }

/* Geometria, tutta sul ritmo:
     traccia 40 × 24 (5U × 3U), bordo 1px ⇒ area interna 38 × 22
     pomello 16 (2U), centrato con translate: nessun offset da ricalcolare
     corsa   16 (2U) = 38 − 16 − 3 − 3
   Il pomello è centrato verticalmente da `inset-block-start: 50%` più
   `translate -50%`: così resta al centro qualunque cosa succeda al bordo. */
.mg-toggle-track {
  position: relative;
  flex-shrink: 0;
  inline-size: var(--marca-space-5);
  block-size: var(--marca-space-3);
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-pill);
  background: var(--marca-field-alt);
  transition: background-color var(--marca-motion-control) var(--marca-ease-state),
    border-color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-toggle-track::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 3px;
  inline-size: var(--marca-space-2);
  block-size: var(--marca-space-2);
  border-radius: 50%;
  background: var(--marca-text-subtle);
  translate: 0 -50%;
  transition: translate var(--marca-motion-control) var(--marca-ease-state),
    background-color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-toggle input:checked + .mg-toggle-track {
  background: var(--marca-mark);
  border-color: var(--marca-mark);
}

.mg-toggle input:checked + .mg-toggle-track::after {
  translate: var(--marca-space-2) -50%;
  background: var(--marca-mark-text);
}

.mg-toggle input:focus-visible + .mg-toggle-track {
  outline: var(--marca-focus-width) solid var(--marca-focus-ring);
  outline-offset: var(--marca-focus-offset);
}

/* Secondo filo da ::before: ::after è il pomello. Vedi il commento su
   .mg-check-box. */
.mg-toggle input:focus-visible + .mg-toggle-track::before {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--marca-focus-width) + var(--marca-focus-offset) + var(--marca-border-width)));
  border: var(--marca-border-width) solid var(--marca-focus-ring-contrast);
  border-radius: inherit;
  pointer-events: none;
}

/* Spento si dice con la superficie e con l'inchiostro, non con l'opacità: il
   sistema non imposta `opacity` su nessuna traccia, quindi non c'è niente da
   riportare a 1 e la dichiarazione era inerte. */
.mg-toggle input:disabled + .mg-toggle-track { background: var(--marca-field-alt); border-color: var(--marca-border); }
.mg-toggle input:disabled + .mg-toggle-track::after { background: var(--marca-text-disabled); }

/* Lo stato dell'interruttore è scritto, non solo mostrato. */
.mg-toggle-state {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--marca-text-subtle);
}

.mg-toggle input:checked ~ .mg-toggle-state { color: var(--marca-text); }

/* =============================================================================
   4 · SLIDER
   ============================================================================= */

.mg-slider { display: block; inline-size: 100%; }

.mg-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--marca-space-2);
}

/* Dentro la riga di testata l'etichetta non porta la propria distanza: la
   riga è già una relazione, e la distanza dal cursore la dà .mg-slider-head. */
.mg-slider-head .mg-field-label { margin-block-end: 0; }

/* Il valore è sempre scritto: uno slider senza numero è un dato illeggibile. */
.mg-slider-value {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-size);
  font-variant-numeric: tabular-nums;
  color: var(--marca-text);
}

/* Il margine da 2px del browser fa sporgere il cursore di 4px oltre la
   propria cella: nel sistema non esistono valori che non siano dichiarati. */
.mg-slider input[type='range'] {
  appearance: none;
  margin: 0;
  inline-size: 100%;
  block-size: var(--marca-hit-min);
  background: transparent;
  cursor: pointer;
}

.mg-slider input[type='range']::-webkit-slider-runnable-track {
  block-size: var(--marca-track);
  background: var(--marca-border);
  border-radius: 0;
}

.mg-slider input[type='range']::-moz-range-track {
  block-size: var(--marca-track);
  background: var(--marca-border);
  border-radius: 0;
}

.mg-slider input[type='range']::-moz-range-progress {
  block-size: var(--marca-track);
  background: var(--marca-mark);
}

.mg-slider input[type='range']::-webkit-slider-thumb {
  appearance: none;
  inline-size: var(--marca-space-2);
  block-size: var(--marca-space-2);
  margin-block-start: calc((var(--marca-track) - var(--marca-space-2)) / 2);
  border-radius: 50%;
  background: var(--marca-mark);
  border: 0;
}

.mg-slider input[type='range']::-moz-range-thumb {
  inline-size: var(--marca-space-2);
  block-size: var(--marca-space-2);
  border-radius: 50%;
  background: var(--marca-mark);
  border: 0;
}

/* L'anello sta sul pomello, non sulla traccia: è il pomello che si muove ed è
   lì che cade l'attenzione. Ma il pomello è uno pseudo-elemento del browser, e
   solo il motore WebKit/Blink ne accetta l'outline. */
.mg-slider input[type='range']:focus-visible { outline: none; }
.mg-slider input[type='range']:focus-visible::-webkit-slider-thumb {
  outline: var(--marca-focus-width) solid var(--marca-focus-ring);
  outline-offset: var(--marca-focus-offset);
}

/* Su Gecko ::-moz-range-thumb non disegna l'outline, e `outline: none` qui
   sopra lasciava il cursore SENZA alcun indicatore di focus: raggiungibile da
   tastiera e invisibile. Là dove il pomello non può portarlo, l'anello resta
   sul controllo — che è dove il browser lo mette e dove il sistema lo mette
   ovunque. `@supports selector(::-moz-range-thumb)` è vero solo su Gecko. */
@supports selector(::-moz-range-thumb) {
  .mg-slider input[type='range']:focus-visible {
    outline: var(--marca-focus-width) solid var(--marca-focus-ring);
    outline-offset: var(--marca-focus-offset);
  }
}

/* Estremi dichiarati: un intervallo senza estremi non è misurabile. */
.mg-slider-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-xs-size);
  color: var(--marca-text-subtle);
}

/* =============================================================================
   5 · SCELTA A GRUPPO, FILTRI, ETICHETTE
   ============================================================================= */

/* Segmented: più opzioni che formano un oggetto solo. Si toccano.
   La barra attiva sta sotto, perché lo scorrimento è orizzontale. */
.mg-segmented {
  display: inline-flex;
  min-block-size: var(--marca-control-height);
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-control);
  overflow: hidden;
}

.mg-segmented-item {
  position: relative;
  min-block-size: 0;
  padding-inline: var(--marca-space-2);
  display: grid;
  place-items: center;
  color: var(--marca-text-muted);
  font-size: var(--marca-type-text-s-size);
  white-space: nowrap;
  transition: background-color var(--marca-motion-control) var(--marca-ease-state),
    color var(--marca-motion-control) var(--marca-ease-state);
}

.mg-segmented-item + .mg-segmented-item {
  border-inline-start: var(--marca-border-width) solid var(--marca-border-control);
}

/* Il passaggio cede alla selezione con la guardia, non con l'ordine di
   scrittura: le due regole pesano uguale (0,2,0) e finché lo stato scelto sta
   più in basso vince, ma basta spostare un blocco e il segmento scelto perde
   wash e peso Medium sotto il puntatore. La guardia lo dichiara. */
.mg-segmented-item:hover:not([aria-pressed='true']):not([aria-selected='true']) {
  background: var(--marca-field-alt);
  color: var(--marca-text);
}

.mg-segmented-item[aria-pressed='true'],
.mg-segmented-item[aria-selected='true'] {
  background: var(--marca-identity-wash);
  color: var(--marca-text);
  font-weight: var(--marca-weight-medium);
}

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

/* Taglia compatta. Un controllo che FILTRA una lista sta sulla stessa taglia
   delle chip e delle etichette che gli stanno accanto: 48 è l'altezza del
   controllo principale di un modulo, e accanto a una fila di elementi da 32
   si legge come una lastra. */
.mg-segmented--s { min-block-size: var(--marca-control-height-s); }
.mg-segmented--s .mg-segmented-item {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
}

/* Chip filtro: si accende, non si rimuove. */
.mg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-1);
  min-block-size: var(--marca-control-height-s);
  padding-inline: var(--marca-space-2);
  border: var(--marca-border-width) solid var(--marca-border-control);
  border-radius: var(--marca-radius-control);
  background: var(--marca-field);
  color: var(--marca-text-muted);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  white-space: nowrap;
  transition: background-color var(--marca-motion-control) var(--marca-ease-state),
    border-color var(--marca-motion-control) var(--marca-ease-state),
    color var(--marca-motion-control) var(--marca-ease-state);
}

/* Sul chip il filo È il segno dello stato acceso (--marca-mark): il passaggio
   deve cedergli con la guardia, o basta un riordino del foglio perché il filo
   verde torni grigio sotto il puntatore. */
.mg-chip:hover:not([aria-pressed='true']) { border-color: var(--marca-text-muted); color: var(--marca-text); }

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

/* Il quadratino pieno è il segno che rende leggibile lo stato senza colore. */
.mg-chip[aria-pressed='true']::before {
  content: '';
  inline-size: var(--marca-mark-square);
  block-size: var(--marca-mark-square);
  background: var(--marca-mark);
}

/* Etichetta rimovibile: porta un dato, e si toglie. */
.mg-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-1);
  min-block-size: var(--marca-control-height-s);
  padding-inline-start: var(--marca-space-2);
  padding-inline-end: var(--marca-space-1);
  background: var(--marca-field-alt);
  border: var(--marca-border-width) solid var(--marca-border);
  border-radius: var(--marca-radius-control);
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  color: var(--marca-text);
}

.mg-tag-remove {
  position: relative;
  inline-size: var(--marca-space-3);
  block-size: var(--marca-space-3);
  display: grid;
  place-items: center;
  color: var(--marca-text-subtle);
  border-radius: var(--marca-radius-control);
}

.mg-tag-remove:hover { background: var(--marca-border); color: var(--marca-text); }

/* =============================================================================
   6 · DATA E ORA
   ============================================================================= */

.mg-datefield .mg-input { font-family: var(--marca-font-mono); }

.mg-calendar {
  inline-size: fit-content;
  /* R2: il perimetro è assorbito dal padding su tutti e quattro i lati, come
     nella zona di rilascio. Senza, la griglia da 280 × 312 chiudeva a 314 × 346
     e il calendario usciva dal ritmo su entrambi gli assi. */
  padding: calc(var(--marca-space-2) - var(--marca-border-width));
  /* Il FONDO non si dichiara qui. Il calendario è in lista fra le superfici
     sovrapposte di surfaces.css, che carica dopo questo foglio: la riga
     `.mg-calendar { background: var(--marca-field); }` che stava qui aveva la
     stessa specificità (0,1,0) e perdeva sempre — dichiarazione morta in
     chiaro, e al buio il calendario restava comunque su Neutral/700. Chi vuole
     cambiargli il fondo lo fa in surfaces.css, dov'è dichiarato davvero. */
  border: var(--marca-border-width) solid var(--marca-border-overlay);
}

.mg-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--marca-space-2);
  margin-block-end: var(--marca-space-2);
}

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

.mg-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--marca-space-5));
  gap: 0;
}

.mg-calendar-dayname {
  block-size: var(--marca-space-4);
  display: grid;
  place-items: center;
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-xs-size);
  color: var(--marca-text-subtle);
}

.mg-calendar-day {
  block-size: var(--marca-space-5);
  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);
  border-radius: 0;
  transition: background-color var(--marca-motion-state) var(--marca-ease-state);
}

/* Il passaggio è lo stato più debole: non copre né la selezione né
   l'intervallo. Senza le due guardie `:hover` (0,3,0) batteva
   `[aria-selected]` e `[data-in-range]` (0,2,0), e il giorno scelto perdeva
   il proprio riempimento nell'istante in cui gli si portava sopra il
   puntatore — l'unico modo che ha di dire «sono io il giorno scelto». */
.mg-calendar-day:hover:not([aria-disabled='true']):not([aria-selected='true']):not([data-in-range]) {
  background: var(--marca-field-alt);
}
.mg-calendar-day[aria-disabled='true'] { color: var(--marca-text-disabled); cursor: not-allowed; }
.mg-calendar-day[data-outside] { color: var(--marca-text-disabled); }

/* Oggi: filo, non riempimento. È un'informazione, non una selezione. */
.mg-calendar-day[data-today] {
  border: var(--marca-border-width) solid var(--marca-border-control);
}

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

.mg-calendar-day[data-in-range] { background: var(--marca-identity-wash); }

/* =============================================================================
   7 · CARICAMENTO FILE
   ============================================================================= */

/* Il perimetro tratteggiato è l'unico tratteggio del sistema, e dice una cosa
   precisa: qui dentro si può rilasciare qualcosa. */
.mg-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--marca-space-2);
  /* 24, non 48: 48 è la distanza «gruppo ↔ gruppo» della tabella di
     File_MD/17. Usata come inset interno metteva 96px di padding attorno a
     112px di contenuto. Il padding di un contenitore è quello del campo, e il
     tratteggio è assorbito dal padding (R2) perché il perimetro chiuda su U. */
  --mg-dropzone-filo: 2px;
  padding: calc(var(--marca-space-3) - var(--mg-dropzone-filo));
  border: var(--mg-dropzone-filo) dashed var(--marca-border-dashed);
  background: var(--marca-field);
  text-align: start;
  transition: background-color var(--marca-motion-state) var(--marca-ease-state),
    border-color var(--marca-motion-state) var(--marca-ease-state);
}

/* Il passaggio cede al trascinamento in corso: stessa guardia, stesso motivo —
   il filo pieno verde è l'unico segno che dice «rilascia qui». */
.mg-dropzone:hover:not([data-dragover]) { border-color: var(--marca-text-muted); }

/* Attiva: il perimetro diventa pieno e verde. Il tratteggio che si chiude
   dice «rilascia qui» meglio di qualsiasi animazione. */
.mg-dropzone[data-dragover] {
  border-style: solid;
  /* --marca-mark e non --marca-identity: il perimetro pieno è un confine di
     controllo su wash, e Green/500 sul proprio wash vale 2,41:1. */
  border-color: var(--marca-mark);
  background: var(--marca-identity-wash);
}

.mg-dropzone-title { font-size: var(--marca-type-text-size); font-weight: var(--marca-weight-medium); }

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

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

.mg-file {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--marca-space-2);
  min-block-size: var(--marca-control-height);
  padding-inline: var(--marca-space-2);
  border-block-end: var(--marca-border-width) solid var(--marca-border);
}

.mg-file-name { font-size: var(--marca-type-text-s-size); overflow-wrap: anywhere; }

.mg-file-size {
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  font-variant-numeric: tabular-nums;
  color: var(--marca-text-subtle);
}

/* =============================================================================
   8 · STRUTTURA DEL MODULO
   ============================================================================= */

/* Una riga di modulo è etichetta + controllo + messaggio. Il ritmo verticale
   fra righe è 24px (3U): sono blocchi, non campi. */
.mg-form-row + .mg-form-row { margin-block-start: var(--marca-space-3); }

/* Il modulo vive sulla matrice: i campi occupano colonne, non larghezze. */
.mg-form {
  display: grid;
  grid-template-columns: repeat(var(--marca-grid-columns), minmax(0, 1fr));
  gap: var(--marca-space-3) var(--marca-space-2);
}

.mg-form > .mg-form-row { grid-column: span 6; margin-block-start: 0; }
.mg-form > .mg-form-row--full { grid-column: 1 / -1; }
.mg-form > .mg-form-row--third { grid-column: span 4; }
.mg-form > .mg-form-row--quarter { grid-column: span 3; }

/* Un gruppo di opzioni apre sempre una riga nuova. Senza, l'auto-placement
   impacchetta: due campi da un terzo e il primo gruppo finivano sulla stessa
   riga, e la riga si allungava all'altezza del gruppo lasciando i due campi
   con 40px di vuoto ciascuno. Una colonna di partenza esplicita è il modo che
   la griglia ha di dichiarare «qui comincia un passo».
   **La campata va ridichiarata insieme alla partenza.** In `grid-column: span 4`
   il `span 4` è lo START della scorciatoia, non la larghezza: riscrivere il solo
   `grid-column-start` lascia l'end ad `auto`, il gruppo si riduce a UNA colonna
   e i due che seguono si accodano fuori posto. Si dichiarano entrambi. */
.mg-form > fieldset.mg-form-row--third:first-of-type { grid-column: 1 / span 4; }
.mg-form > fieldset.mg-form-row:not(.mg-form-row--third):first-of-type { grid-column: 1 / span 6; }

/* Gruppo di campi: separato dal successivo da 48px e da un titolo, non da
   un bordo arrotondato. */
.mg-fieldset { border: 0; padding: 0; margin: 0; }
.mg-fieldset + .mg-fieldset { margin-block-start: var(--marca-space-6); }

.mg-fieldset-legend {
  line-height: var(--marca-type-mono-s-lh);
  padding: 0;
  margin-block-end: var(--marca-space-2);
  padding-block-end: calc(var(--marca-space-1) - var(--marca-border-width));
  border-block-end: var(--marca-border-width) solid var(--marca-border);
  inline-size: 100%;
  font-family: var(--marca-font-mono);
  font-size: var(--marca-type-mono-s-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--marca-text-label);
}

/* Le azioni stanno a sinistra come tutto il resto: la posizione dichiara
   l'ordine di lettura, non l'importanza. */
.mg-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marca-space-2);
  margin-block-start: var(--marca-space-6);
  /* R2: il filo superiore è assorbito dal padding. Senza, la distanza fra
     l'ultimo campo e i pulsanti valeva 48 + 1 + 24 = 73 invece di 72. */
  padding-block-start: calc(var(--marca-space-3) - var(--marca-border-width));
  border-block-start: var(--marca-border-width) solid var(--marca-border);
}

.mg-form-actions--end { justify-content: flex-end; }

@media (max-width: 640px) {
  .mg-form > .mg-form-row,
  .mg-form > .mg-form-row--third,
  .mg-form > .mg-form-row--quarter { grid-column: 1 / -1; }

  .mg-form-actions > .mg-btn { flex: 1; }
}