/* CiMancaUno — sistema di design condiviso da portale e app.
   Direzione e motivazioni in CiMancaUno/_Documenti/Design.md.
   Ordine degli strati: le regole di un livello successivo vincono su quelle dei precedenti
   senza gare di specificità (niente !important, niente selettori composti per "vincere"). */

@layer fondamenta, base, guscio, componenti, pagine, utilita;

/* ------------------------------------------------------------------ carattere */
/* Archivo variabile (larghezza 62–125, peso 100–900), OFL, ospitato qui: nessuna richiesta a
   servizi esterni. Due sottoinsiemi come quelli di Google Fonts. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ token */
@layer fondamenta {
  :root {
    /* Palette del campo (vedi Design.md) */
    --campo: #1553A5;
    --campo-forte: #0F3F80;
    --campo-tenue: #DCE7F5;
    --notte: #0A2147;
    --palla: #DDF247;
    --palla-forte: #CFE535;
    --vetro: #EEF3F8;
    --linea: #FFFFFF;
    --inchiostro: #13213A;

    /* Ruoli, tema chiaro */
    --fondo: var(--vetro);
    --superficie: var(--linea);
    --superficie-2: #F6F9FC;
    --testo: var(--inchiostro);
    --testo-2: #4A5A75;
    --testo-3: #5B6880;
    --filetto: #D5DEEA;
    --filetto-forte: #B8C6D9;
    --bordo-campo: #7A889F; /* campi, interruttori, caselle: almeno 3:1 sul fondo */
    --accento: var(--campo);
    --accento-forte: var(--campo-forte);
    --accento-tenue: var(--campo-tenue);
    --su-accento: #FFFFFF;
    --azione: var(--palla);
    --azione-premuta: var(--palla-forte);
    --su-azione: var(--notte);
    --ok: #17773F;
    --ok-tenue: #DDF1E4;
    --errore: #B42A25;
    --errore-tenue: #FBE3E1;
    --su-errore: #FFFFFF;
    --attesa: #8A5A10;
    --attesa-tenue: #FBEFD9;
    --vetro-barra: rgb(255 255 255 / 0.8);
    --velo: rgb(10 33 71 / 0.45);
    --fuoco: var(--campo);
    --ombra-foglio: 0 -16px 48px rgb(10 33 71 / 0.22);
    --ombra-azione: 0 6px 18px rgb(10 33 71 / 0.22);

    /* Forme: raggio per gerarchia */
    --r-foglio: 20px;
    --r-pannello: 12px;
    --r-campo: 10px;
    --r-pillola: 999px;

    /* Spazi, base 4 */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
    --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

    /* Carattere: una famiglia, tre larghezze */
    --f: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --largo-testo: 100%;
    --largo-titolo: 115%;
    --largo-tabellone: 72%;
    /* Scala 1,25 (terza maggiore) */
    --t-0: 0.8rem;
    --t-1: 0.875rem;
    --t-2: 1rem;
    --t-3: 1.25rem;
    --t-4: 1.563rem;
    --t-5: 1.953rem;
    --t-6: 2.441rem;
    --t-7: 3.052rem;
    --t-8: 3.815rem;

    --tocco: 44px;
    --altezza-barra: 64px;
    --altezza-testa: 56px;
    --colonna: 680px;

    color-scheme: light;
  }

  /* Tema sera: il campo sotto i fari. Automatico se il telefono è in modalità scura,
     salvo scelta esplicita della persona (data-tema). */
  :root[data-tema="notte"] {
    --fondo: var(--notte);
    --superficie: #10295A;
    --superficie-2: #143066;
    --testo: #E8EEF7;
    --testo-2: #A9B8D0;
    --testo-3: #8FA0BD;
    --filetto: #22407A;
    --filetto-forte: #2E4F8E;
    --bordo-campo: #6481BA;
    --accento: #7FB0FF;
    --accento-forte: #A9CBFF;
    --accento-tenue: #173B78;
    --su-accento: var(--notte);
    --ok: #5FD08E;
    --ok-tenue: #103D2C;
    --errore: #FF8A80;
    --errore-tenue: #4A1C22;
    --su-errore: var(--notte);
    --attesa: #F2C46B;
    --attesa-tenue: #3D3014;
    --vetro-barra: rgb(10 33 71 / 0.84);
    --velo: rgb(3 10 26 / 0.6);
    --fuoco: var(--palla);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="giorno"]) {
      --fondo: var(--notte);
      --superficie: #10295A;
      --superficie-2: #143066;
      --testo: #E8EEF7;
      --testo-2: #A9B8D0;
      --testo-3: #8FA0BD;
      --filetto: #22407A;
      --filetto-forte: #2E4F8E;
      --bordo-campo: #6481BA;
      --accento: #7FB0FF;
      --accento-forte: #A9CBFF;
      --accento-tenue: #173B78;
      --su-accento: var(--notte);
      --ok: #5FD08E;
      --ok-tenue: #103D2C;
      --errore: #FF8A80;
      --errore-tenue: #4A1C22;
      --su-errore: var(--notte);
      --attesa: #F2C46B;
      --attesa-tenue: #3D3014;
      --vetro-barra: rgb(10 33 71 / 0.84);
      --velo: rgb(3 10 26 / 0.6);
      --fuoco: var(--palla);
      color-scheme: dark;
    }
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--f);
    font-size: var(--t-2);
    font-stretch: var(--largo-testo);
    line-height: 1.5;
    color: var(--testo);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-feature-settings: "kern";
  }
  h1, h2, h3, h4 {
    margin: 0;
    font-stretch: var(--largo-titolo);
    font-weight: 780;
    line-height: 1.12;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-6); }
  h2 { font-size: var(--t-4); }
  h3 { font-size: var(--t-3); }
  h4 { font-size: var(--t-2); }
  p { margin: 0; text-wrap: pretty; }
  p + p { margin-top: var(--s3); }
  a { color: var(--accento); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:hover { color: var(--accento-forte); }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; border-radius: 6px; }
  /* Il fuoco che la pagina sposta da sé (titolo dopo un cambio pagina, foglio appena aperto) serve
     allo screen reader, non va disegnato: non sono cose da premere. */
  h1:focus, .foglio:focus { outline: none; }
  ::selection { background: var(--palla); color: var(--notte); }
  [hidden] { display: none !important; }
  .solo-lettori {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ------------------------------------------------------------------ guscio dell'app */
@layer guscio {
  .guscio { min-height: 100dvh; }

  .testa {
    position: sticky; top: 0; z-index: 30;
    height: calc(var(--altezza-testa) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--s4) 0;
    display: flex; align-items: center; gap: var(--s3);
    background: var(--fondo);
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
  }
  .testa--bordo { border-bottom-color: var(--filetto); }
  .testa__marchio { display: inline-flex; align-items: center; gap: var(--s2); color: var(--testo); text-decoration: none; }
  .testa__marchio:hover { color: var(--testo); }
  .testa__nome { font-stretch: var(--largo-titolo); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; }
  .testa__spazio { flex: 1; }
  .testa__titolo { font-stretch: var(--largo-titolo); font-weight: 750; font-size: var(--t-3); letter-spacing: -0.01em; }
  .testa__indietro {
    width: var(--tocco); height: var(--tocco); margin-left: calc(-1 * var(--s2));
    display: grid; place-items: center; border: 0; background: none; color: var(--testo); border-radius: var(--r-pillola);
  }
  .testa__indietro:hover { background: var(--accento-tenue); }

  .corpo {
    width: 100%; max-width: var(--colonna); margin: 0 auto;
    padding: var(--s4) var(--s4) calc(var(--altezza-barra) + var(--s12) + env(safe-area-inset-bottom));
  }
  .corpo--senza-barra { padding-bottom: calc(var(--s12) + env(safe-area-inset-bottom)); }

  /* Barra in basso: navigazione + l'azione principale al centro, nel pollice */
  .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--altezza-barra) + env(safe-area-inset-bottom));
    padding: 0 var(--s2) env(safe-area-inset-bottom);
    display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr; align-items: center;
    background: var(--vetro-barra);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid var(--filetto);
  }
  .barra__voce {
    position: relative;
    min-height: var(--tocco); height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--testo-2); text-decoration: none; font-size: 0.72rem; font-weight: 550; letter-spacing: 0.01em;
  }
  .barra__voce:hover { color: var(--testo); }
  .barra__voce[aria-current="page"] { color: var(--accento); font-weight: 700; }
  .barra__voce[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--accento);
  }
  .barra__pallino {
    position: absolute; top: 9px; left: calc(50% + 6px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pillola);
    background: var(--errore); color: var(--su-errore); font-size: 0.68rem; font-weight: 700; line-height: 17px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .barra__azione {
    justify-self: center; align-self: start; margin-top: -14px;
    width: 100%; max-width: 132px; height: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border-radius: 18px;
    background: var(--azione); color: var(--su-azione); text-decoration: none;
    box-shadow: var(--ombra-azione);
    font-weight: 750; font-size: 0.8125rem; letter-spacing: -0.005em; line-height: 1.1;
    transition: transform 120ms ease, background-color 120ms ease;
  }
  .barra__azione:hover { color: var(--su-azione); background: var(--azione-premuta); }
  .barra__azione:active { transform: scale(0.97); }
  .barra__azione[aria-current="page"] { outline: 2px solid var(--su-azione); outline-offset: -4px; }

  /* Desktop: la barra diventa una colonna a sinistra, l'azione resta la prima cosa */
  @media (min-width: 960px) {
    .guscio--app { display: grid; grid-template-columns: 248px 1fr; }
    .guscio--app > .testa { grid-column: 2; }
    .guscio--app > .corpo { grid-column: 2; padding-bottom: var(--s16); }
    .barra {
      position: sticky; top: 0; grid-row: 1 / span 2; grid-column: 1;
      height: 100dvh; padding: var(--s6) var(--s4);
      display: flex; flex-direction: column; align-items: stretch; gap: var(--s1);
      border-top: 0; border-right: 1px solid var(--filetto);
      background: var(--superficie);
    }
    .barra__marchio { display: flex !important; margin: 0 var(--s2) var(--s6); }
    .barra__azione {
      order: -1; max-width: none; height: 52px; margin: 0 0 var(--s6);
      flex-direction: row; gap: var(--s2); font-size: var(--t-2); border-radius: var(--r-pillola); box-shadow: none;
    }
    .barra__voce {
      height: auto; flex-direction: row; justify-content: flex-start; gap: var(--s3);
      padding: var(--s3) var(--s3); border-radius: var(--r-campo); font-size: var(--t-2); font-weight: 550;
    }
    .barra__voce:hover { background: var(--superficie-2); }
    .barra__voce[aria-current="page"] { background: var(--accento-tenue); }
    .barra__voce[aria-current="page"]::before { display: none; }
    .barra__pallino { position: static; margin-left: auto; }
  }
  .barra__marchio { display: none; }
}

/* ------------------------------------------------------------------ componenti */
@layer componenti {

  /* Icone (Lucide): tratto che segue il colore del testo */
  .icona { width: 22px; height: 22px; flex: none; stroke-width: 2; }
  .icona--piccola { width: 18px; height: 18px; }
  .icona--grande { width: 28px; height: 28px; }

  /* Bottoni: il giallo è l'azione principale, uno per schermata */
  .bottone {
    min-height: 48px; padding: 0 var(--s5);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    border: 1.5px solid transparent; border-radius: var(--r-pannello);
    font-weight: 650; font-size: var(--t-2); line-height: 1.1; text-decoration: none; white-space: nowrap;
    background: var(--superficie); color: var(--testo);
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  }
  .bottone:active:not(:disabled) { transform: scale(0.98); }
  .bottone:disabled, .bottone[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .bottone--azione {
    min-height: 56px; padding: 0 var(--s6); border-radius: var(--r-pillola);
    background: var(--azione); color: var(--su-azione); font-weight: 750; font-size: 1.0625rem;
  }
  .bottone--azione:hover:not(:disabled) { background: var(--azione-premuta); color: var(--su-azione); }
  .bottone--accento { background: var(--accento); color: var(--su-accento); }
  .bottone--accento:hover:not(:disabled) { background: var(--accento-forte); color: var(--su-accento); }
  .bottone--linea { background: transparent; border-color: var(--filetto-forte); color: var(--testo); }
  .bottone--linea:hover:not(:disabled) { border-color: var(--accento); color: var(--accento); }
  .bottone--testo { min-height: var(--tocco); padding: 0 var(--s2); background: none; color: var(--accento); }
  .bottone--testo:hover:not(:disabled) { background: var(--accento-tenue); }
  .bottone--pericolo { background: transparent; border-color: var(--errore); color: var(--errore); }
  .bottone--pericolo:hover:not(:disabled) { background: var(--errore-tenue); }
  .bottone--piccolo { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-1); border-radius: var(--r-campo); }
  .bottone--pieno { width: 100%; }
  .bottone--tondo { width: var(--tocco); min-height: var(--tocco); padding: 0; border-radius: var(--r-pillola); }
  .bottone__rotella {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid currentColor; border-right-color: transparent;
    animation: gira 700ms linear infinite;
  }
  @keyframes gira { to { transform: rotate(360deg); } }

  /* Chip di scelta: tempo, numero di posti, filtri */
  .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .chips--scorre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4); scroll-snap-type: x proximity; scroll-padding-inline: var(--s4); }
  .chips--scorre::-webkit-scrollbar { display: none; }
  .chip {
    min-height: 40px; padding: 0 var(--s4); flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: var(--s2);
    border: 1.5px solid var(--filetto-forte); border-radius: var(--r-pillola);
    background: var(--superficie); color: var(--testo);
    font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .chip:hover { border-color: var(--accento); }
  .chip[aria-pressed="true"], .chip[aria-checked="true"], .chip--scelto {
    background: var(--testo); border-color: var(--testo); color: var(--fondo);
  }
  .chip__nota { font-weight: 450; opacity: 0.75; font-size: 0.8125rem; }
  .chip--tabellone { font-stretch: var(--largo-tabellone); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; min-width: 64px; justify-content: center; }

  /* Campi del modulo */
  .modulo { display: grid; gap: var(--s6); }
  .campo { display: grid; gap: var(--s2); }
  .campo__etichetta { font-weight: 650; font-size: 0.9375rem; }
  .campo__aiuto { color: var(--testo-2); font-size: var(--t-1); }
  .campo__errore { color: var(--errore); font-size: var(--t-1); font-weight: 550; display: flex; gap: var(--s1); align-items: flex-start; }
  .ingresso {
    width: 100%; min-height: 52px; padding: 0 var(--s4);
    border: 1.5px solid var(--bordo-campo); border-radius: var(--r-campo);
    background: var(--superficie); color: var(--testo); font-size: 1.0625rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  textarea.ingresso { min-height: 96px; padding: var(--s3) var(--s4); resize: vertical; line-height: 1.45; }
  .ingresso::placeholder { color: var(--testo-3); }
  .ingresso:hover { border-color: var(--testo-3); }
  .ingresso:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
  .ingresso[aria-invalid="true"] { border-color: var(--errore); }
  .ingresso--codice {
    font-stretch: var(--largo-tabellone); font-weight: 800; font-size: 2rem; letter-spacing: 0.3em;
    text-align: center; font-variant-numeric: tabular-nums; min-height: 64px;
  }
  .ingresso-icona { position: relative; }
  .ingresso-icona > .icona { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
  .ingresso-icona > .ingresso { padding-left: calc(var(--s4) + 30px); }

  /* Passo − valore + (livelli, conteggi) */
  .passo { display: inline-flex; align-items: center; gap: var(--s2); }
  .passo__bottone {
    width: var(--tocco); height: var(--tocco); border-radius: var(--r-pillola);
    display: grid; place-items: center; border: 1.5px solid var(--filetto-forte); background: var(--superficie); color: var(--testo);
  }
  .passo__bottone:hover:not(:disabled) { border-color: var(--accento); color: var(--accento); }
  .passo__bottone:disabled { opacity: 0.35; cursor: not-allowed; }
  .passo__valore { min-width: 3.4ch; text-align: center; font-stretch: var(--largo-tabellone); font-weight: 800; font-size: var(--t-5); font-variant-numeric: tabular-nums; line-height: 1; }

  /* Interruttore acceso/spento */
  .interruttore { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; cursor: pointer; }
  .interruttore__testo { display: grid; gap: 2px; }
  .interruttore__nota { color: var(--testo-2); font-size: var(--t-1); }
  .interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .interruttore__pista {
    flex: none; width: 52px; height: 32px; border-radius: var(--r-pillola); background: var(--bordo-campo);
    position: relative; transition: background-color 160ms ease;
  }
  .interruttore__pista::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgb(10 33 71 / 0.3); transition: transform 160ms ease;
  }
  .interruttore input:checked + .interruttore__pista { background: var(--accento); }
  .interruttore input:checked + .interruttore__pista::after { transform: translateX(20px); }
  .interruttore input:focus-visible + .interruttore__pista { outline: 3px solid var(--fuoco); outline-offset: 2px; }

  /* Sezioni della pagina */
  .sezione { display: grid; gap: var(--s3); }
  .sezione + .sezione { margin-top: var(--s8); }
  .sezione__capo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .sezione__titolo { font-size: var(--t-3); }
  .sezione__nota { color: var(--testo-2); font-size: var(--t-1); }

  /* Pannello: superficie piana, niente ombra */
  .pannello { background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); padding: var(--s4); }
  .pannello--accento { background: var(--accento-tenue); border-color: transparent; }

  /* Il tabellone: le partite in righe, l'ora grande come sul tabellone del circolo */
  .tabellone { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); overflow: hidden; }
  .riga {
    display: grid; grid-template-columns: 70px 1fr auto; gap: var(--s1) var(--s3); align-items: center;
    padding: var(--s3) var(--s4); position: relative;
    color: var(--testo); text-decoration: none;
  }
  .riga + .riga { border-top: 1px solid var(--filetto); }
  a.riga:hover { background: var(--superficie-2); color: var(--testo); }
  .riga__quando { grid-row: span 2; display: grid; align-content: center; }
  .riga__ora { font-stretch: var(--largo-tabellone); font-weight: 820; font-size: 2rem; line-height: 0.95; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .riga__giorno { color: var(--testo-2); font-size: var(--t-1); font-weight: 550; margin-top: 3px; }
  .riga__giorno--oggi { color: var(--accento); font-weight: 700; }
  /* Il nome del circolo va a capo su due righe al massimo: «GPadel Borgo Po» non deve diventare «GPadel…». */
  .riga__dove {
    font-weight: 700; font-size: 1.0625rem; line-height: 1.2; min-width: 0; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
  }
  .riga__dettagli { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); color: var(--testo-2); font-size: var(--t-1); min-width: 0; }
  .riga__dettaglio { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .riga__posti { grid-row: 1; grid-column: 3; justify-self: end; }
  .riga__azione { grid-row: 2; grid-column: 3; justify-self: end; }
  .riga__stato { grid-row: 2; grid-column: 3; justify-self: end; font-size: var(--t-0); font-weight: 700; }

  /* Distintivi: livello, stato, affidabilità */
  .distintivo {
    display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--s2);
    border-radius: 6px; background: var(--accento-tenue); color: var(--accento);
    font-size: var(--t-0); font-weight: 700; white-space: nowrap;
  }
  .distintivo--ok { background: var(--ok-tenue); color: var(--ok); }
  .distintivo--attesa { background: var(--attesa-tenue); color: var(--attesa); }
  .distintivo--errore { background: var(--errore-tenue); color: var(--errore); }
  .distintivo--neutro { background: var(--superficie-2); color: var(--testo-2); border: 1px solid var(--filetto); }
  .distintivo--livello { font-stretch: var(--largo-tabellone); font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* Avatar: iniziali del nick */
  .avatar {
    --dim: 40px;
    width: var(--dim); height: var(--dim); flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accento-tenue); color: var(--accento);
    font-stretch: var(--largo-titolo); font-weight: 800; font-size: calc(var(--dim) * 0.38); letter-spacing: -0.02em;
    text-transform: uppercase;
  }
  .avatar--grande { --dim: 72px; }
  .avatar--piccolo { --dim: 32px; }

  /* Elenco generico di voci (giocatori, impostazioni, circoli) */
  .elenco { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); overflow: hidden; }
  .voce { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s3) var(--s4); color: var(--testo); text-decoration: none; }
  .voce + .voce { border-top: 1px solid var(--filetto); }
  a.voce:hover, button.voce:hover { background: var(--superficie-2); color: var(--testo); }
  button.voce { width: 100%; border: 0; background: none; text-align: left; }
  .voce__testo { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .voce__titolo { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voce__nota { color: var(--testo-2); font-size: var(--t-1); }
  .voce__coda { color: var(--testo-3); display: flex; align-items: center; gap: var(--s2); }

  /* Stato vuoto: un invito ad agire, non un umore */
  .vuoto { display: grid; justify-items: center; text-align: center; gap: var(--s3); padding: var(--s8) var(--s4); }
  .vuoto__titolo { font-size: var(--t-3); }
  .vuoto__testo { color: var(--testo-2); max-width: 34ch; }
  .vuoto .bottone { margin-top: var(--s2); }

  /* Avvisi in linea e a comparsa */
  .avviso { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-campo); background: var(--accento-tenue); color: var(--testo); font-size: 0.9375rem; }
  .avviso .icona { margin-top: 1px; color: var(--accento); }
  .avviso--ok { background: var(--ok-tenue); }
  .avviso--ok .icona { color: var(--ok); }
  .avviso--errore { background: var(--errore-tenue); }
  .avviso--errore .icona { color: var(--errore); }
  .avviso--attesa { background: var(--attesa-tenue); }
  .avviso--attesa .icona { color: var(--attesa); }
  .avviso__azione { margin-left: auto; }

  .fumetto-zona {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
    bottom: calc(var(--altezza-barra) + var(--s6) + env(safe-area-inset-bottom));
    width: min(calc(100% - var(--s8)), 440px); display: grid; gap: var(--s2); pointer-events: none;
  }
  .fumetto {
    pointer-events: auto; display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--r-pannello);
    background: var(--notte); color: #fff; font-weight: 550; box-shadow: var(--ombra-azione);
    animation: entra-fumetto 220ms ease-out;
  }
  :root[data-tema="notte"] .fumetto { background: var(--linea); color: var(--notte); }
  .fumetto--errore { background: var(--errore); color: var(--su-errore); }
  @keyframes entra-fumetto { from { opacity: 0; transform: translateY(8px); } }
  @media (min-width: 960px) { .fumetto-zona { bottom: var(--s8); } }

  /* Foglio dal basso (dialoghi, conferme) */
  .velo { position: fixed; inset: 0; z-index: 80; background: var(--velo); animation: appare 160ms ease-out; }
  .foglio {
    position: fixed; z-index: 81; left: 0; right: 0; bottom: 0;
    max-height: calc(100dvh - 48px); overflow: auto;
    padding: var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
    background: var(--superficie); border-radius: var(--r-foglio) var(--r-foglio) 0 0;
    box-shadow: var(--ombra-foglio);
    animation: sale 240ms cubic-bezier(.2,.8,.2,1);
  }
  .foglio__maniglia { width: 40px; height: 5px; border-radius: 3px; background: var(--filetto-forte); margin: 0 auto var(--s4); }
  .foglio__testa { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s2); }
  .foglio__titolo { flex: 1; font-size: var(--t-4); padding-top: 6px; }
  .foglio__chiudi {
    flex: none; width: var(--tocco); height: var(--tocco); margin: -2px calc(-1 * var(--s2)) 0 auto;
    display: grid; place-items: center; border: 0; background: none; color: var(--testo-2); border-radius: var(--r-pillola);
  }
  .foglio__chiudi:hover { background: var(--accento-tenue); color: var(--testo); }
  .foglio__testo { color: var(--testo-2); }
  .foglio__azioni { display: grid; gap: var(--s2); margin-top: var(--s6); }
  @media (min-width: 640px) {
    .foglio { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: min(520px, calc(100% - 48px)); border-radius: var(--r-foglio); animation: appare 180ms ease-out; }
    .foglio__maniglia { display: none; }
  }
  @keyframes sale { from { transform: translateY(100%); } }
  @keyframes appare { from { opacity: 0; } }

  /* Scheletri di caricamento */
  .scheletro { background: linear-gradient(90deg, var(--superficie-2), var(--filetto), var(--superficie-2)); background-size: 200% 100%; animation: scorre 1.3s ease-in-out infinite; border-radius: 8px; }
  @keyframes scorre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .scheletro--riga { height: 76px; border-radius: 0; }
  .scheletro--riga + .scheletro--riga { border-top: 1px solid var(--superficie); }

  /* Il glifo dei quattro posti (vedi GlifoPosti.razor) */
  .glifo { overflow: visible; }
  .glifo__campo { fill: var(--accento-tenue); stroke: var(--accento); stroke-width: 1.5; }
  .glifo__righe { stroke: var(--accento); stroke-width: 1; opacity: 0.55; fill: none; }
  .glifo__rete { stroke: var(--accento); stroke-width: 2; stroke-linecap: round; }
  .glifo__pieno { fill: var(--palla); stroke: var(--notte); stroke-width: 1.5; }
  :root[data-tema="notte"] .glifo__pieno { stroke: var(--notte); }
  .glifo__vuoto { fill: var(--superficie); stroke: var(--accento); stroke-width: 1.75; stroke-dasharray: 3 2.4; }
  .glifo__cerca { fill: none; stroke: var(--palla); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .glifo--respira .glifo__cerca { animation: respira 2.6s ease-in-out infinite; }
  @keyframes respira {
    0% { opacity: 0.9; transform: scale(1); }
    70% { opacity: 0; transform: scale(2.1); }
    100% { opacity: 0; transform: scale(2.1); }
  }
  .glifo__entra { animation: entra-posto 420ms cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; transform-origin: center; }
  @keyframes entra-posto { from { transform: scale(0.2); } }
  .glifo__nome { font-size: 9px; font-weight: 700; fill: var(--testo); font-stretch: var(--largo-tabellone); }

  /* Scala dei livelli */
  .scala { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
  .scala__tacca {
    min-height: 44px; border: 0; border-radius: 6px; background: var(--superficie-2); color: var(--testo-2);
    font-stretch: var(--largo-tabellone); font-weight: 800; font-size: 0.8125rem; font-variant-numeric: tabular-nums;
    border: 1px solid var(--filetto);
  }
  .scala__tacca--intero { font-size: 1rem; color: var(--testo); }
  .scala__tacca[aria-checked="true"] { background: var(--testo); color: var(--fondo); border-color: var(--testo); }
  .scala__tacca--nella-forchetta { background: var(--accento-tenue); color: var(--accento); border-color: transparent; }
  .scala__descrizione { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-campo); background: var(--superficie-2); }
  .scala__nome { font-weight: 750; }
  .scala__testo { color: var(--testo-2); font-size: var(--t-1); }

  /* Messaggi della partita */
  .messaggi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
  .messaggio { display: grid; gap: 2px; max-width: 86%; }
  .messaggio__testa { display: flex; gap: var(--s2); align-items: baseline; font-size: var(--t-0); color: var(--testo-2); }
  .messaggio__autore { font-weight: 700; color: var(--testo); }
  .messaggio__corpo { padding: var(--s2) var(--s3); border-radius: 4px 14px 14px 14px; background: var(--superficie-2); border: 1px solid var(--filetto); white-space: pre-wrap; overflow-wrap: anywhere; }
  .messaggio--mio { justify-self: end; }
  .messaggio--mio .messaggio__testa { justify-content: flex-end; }
  .messaggio--mio .messaggio__corpo { border-radius: 14px 4px 14px 14px; background: var(--accento-tenue); border-color: transparent; }

  /* Linguette dentro una pagina */
  .linguette { display: flex; gap: var(--s1); padding: 3px; border-radius: var(--r-pillola); background: var(--superficie-2); border: 1px solid var(--filetto); }
  .linguetta { flex: 1; min-height: 40px; border: 0; border-radius: var(--r-pillola); background: none; font-weight: 600; color: var(--testo-2); font-size: 0.9375rem; }
  .linguetta[aria-selected="true"] { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 2px rgb(10 33 71 / 0.12); }
}

/* ------------------------------------------------------------------ utilità */
@layer utilita {
  .fila { display: flex; align-items: center; gap: var(--s3); }
  .fila--stretta { gap: var(--s2); }
  .fila--larga { gap: var(--s4); }
  .fila--capo { justify-content: space-between; }
  .pila { display: grid; gap: var(--s3); }
  .pila--stretta { gap: var(--s2); }
  .pila--larga { gap: var(--s6); }
  .testo-2 { color: var(--testo-2); }
  .testo-3 { color: var(--testo-3); }
  .piccolo { font-size: var(--t-1); }
  .minimo { font-size: var(--t-0); }
  .tabellone-cifre { font-stretch: var(--largo-tabellone); font-weight: 820; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .centro { text-align: center; }
  .spazio-su { margin-top: var(--s6); }
  .spazio-su-grande { margin-top: var(--s10); }
  .cresce { flex: 1; min-width: 0; }
}

/* ================================================================== pagine e dettagli */
@layer componenti {
  /* Marchio: glifo + nome in Archivo espanso */
  .marchio { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
  .marchio__nome { font-stretch: 118%; font-weight: 820; font-size: 1.125rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }

  /* Collegamento esteso della riga del tabellone: tutta la riga porta alla partita */
  .riga__collegamento { color: var(--testo); text-decoration: none; }
  .riga__collegamento::after { content: ""; position: absolute; inset: 0; }
  .riga__collegamento:hover { color: var(--testo); }
  .riga:has(.riga__collegamento:hover) { background: var(--superficie-2); }
  .riga__collegamento:focus-visible { outline: none; }
  .riga:has(.riga__collegamento:focus-visible) { outline: 3px solid var(--fuoco); outline-offset: -3px; }
  .riga__azione, .riga__posti { position: relative; z-index: 1; }
  .riga__posti { pointer-events: none; }

  /* Pallino verde di «libero» */
  .pallino-verde { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tenue); flex: none; }

  .pagina__titolo { font-size: var(--t-5); }

  /* Saluto della home */
  .saluto { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
  .saluto__titolo { font-size: var(--t-6); line-height: 1.02; }
  .saluto__stato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--testo-2); }
  .saluto__annulla { min-height: 32px; padding: 0 var(--s2); }

  /* Pannelli d'invito (zona, avvisi) */
  .invito { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
  .invito > .icona { color: var(--accento); }
  .invito__testo { flex: 1; display: grid; gap: 2px; font-size: var(--t-1); color: var(--testo-2); }
  .invito__testo strong { color: var(--testo); font-size: var(--t-2); }
  .invito__azioni { display: grid; gap: 2px; justify-items: end; }

  /* Gruppi di scelte (fieldset senza bordi) */
  .campo--gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
  .campo--gruppo > legend { padding: 0; margin-bottom: var(--s2); }
  .campo--gruppo > .chips + .chips { margin-top: var(--s2); }
  .spunta { display: flex; gap: var(--s3); align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
  .spunta input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accento); flex: none; }
  .esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* Ingresso */
  .entra { display: grid; gap: var(--s6); padding-top: var(--s6); }
  .entra__capo { display: grid; gap: var(--s2); }
  .entra__titolo { font-size: var(--t-6); line-height: 1.05; }
  .entra__testo { color: var(--testo-2); font-size: 1.0625rem; }
  .entra__nota { color: var(--testo-3); font-size: var(--t-1); }
  .entra__alternative { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }

  /* Barra d'azione in fondo alle schermate con un solo compito, sopra al pollice */
  .fondo-azione {
    position: sticky; bottom: 0; z-index: 20;
    display: grid; gap: var(--s2);
    margin: var(--s6) calc(-1 * var(--s4)) calc(-1 * var(--s12));
    padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    background: var(--vetro-barra);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid var(--filetto);
  }
  .fondo-azione__riassunto { display: flex; align-items: center; gap: var(--s2); font-size: 0.9375rem; color: var(--testo-2); margin: 0; }
  .fondo-azione__riassunto:empty { display: none; }
  @media (min-width: 640px) { .fondo-azione { border-radius: var(--r-pannello) var(--r-pannello) 0 0; } }

  /* Modulo «Manca uno» */
  .chiedi__modulo { gap: var(--s8); }
  .orari .chip { min-width: 72px; }
  .chip--scelto-ora { box-shadow: 0 0 0 3px var(--accento-tenue); }
  .chip:disabled { opacity: 0.35; cursor: not-allowed; }
  .scelta-circolo {
    display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s3) var(--s4);
    border: 1.5px solid var(--filetto-forte); border-radius: var(--r-campo); background: var(--superficie); color: var(--testo); text-align: left;
  }
  .scelta-circolo:hover { border-color: var(--accento); }
  .scelta-circolo > .icona:first-child { color: var(--accento); }
  .scelta-circolo--vuota { border-style: dashed; color: var(--testo-2); font-weight: 600; }
  .scelta-circolo__testo { display: grid; }
  .scelta-circolo__nome { font-weight: 700; font-size: 1.0625rem; }
  .scelta-circolo__zona { color: var(--testo-2); font-size: var(--t-1); }
  .quanti { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
  .forchetta { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); }
  .forchetta__lato { display: flex; align-items: center; gap: var(--s3); }
  .forchetta__nome { color: var(--testo-2); font-weight: 600; min-width: 1.4em; }
  .dettagli { border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); }
  .dettagli__titolo { display: flex; align-items: center; gap: var(--s2); min-height: 56px; cursor: pointer; font-weight: 650; list-style: none; }
  .dettagli__titolo::-webkit-details-marker { display: none; }
  .dettagli__titolo::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms ease; }
  .dettagli[open] > .dettagli__titolo::after { transform: rotate(225deg); }
  .dettagli__nota { color: var(--testo-2); font-weight: 450; font-size: var(--t-1); }
  .dettagli__corpo { padding-bottom: var(--s6); }
  .elenco--circoli { max-height: 60dvh; overflow: auto; }
  .voce__stella { color: var(--attesa); }
  button.voce[aria-pressed="true"] { background: var(--accento-tenue); }

  /* Scheda della partita */
  .partita { display: grid; gap: var(--s6); }
  .partita__nuova { align-items: flex-start; }
  .partita__capo { display: grid; gap: var(--s2); }
  .partita__quando { display: flex; align-items: baseline; gap: var(--s3); }
  .partita__ora { font-stretch: var(--largo-tabellone); font-weight: 830; font-size: clamp(4rem, 17vw, 5.5rem); line-height: 0.86; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .partita__giorno { color: var(--testo-2); font-weight: 600; font-size: 1.0625rem; }
  .partita__dove { font-size: var(--t-5); margin-top: var(--s2); }
  .partita__indirizzo { display: inline-flex; align-items: center; gap: var(--s1); color: var(--testo-2); font-size: 0.9375rem; text-decoration: none; }
  .partita__indirizzo:hover { color: var(--accento); text-decoration: underline; }
  .partita__etichette { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
  .partita__campo { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; padding: var(--s4); background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); }
  @media (max-width: 420px) { .partita__campo { grid-template-columns: 1fr; justify-items: center; } .partita__campo .posti { width: 100%; } }
  .partita__stato { padding: var(--s3) var(--s4); border-radius: var(--r-campo); background: var(--accento-tenue); font-weight: 650; margin: 0; }
  .partita__stato--completa, .partita__stato--giocata { background: var(--ok-tenue); color: var(--ok); }
  .partita__stato--annullata, .partita__stato--scaduta { background: var(--superficie-2); color: var(--testo-2); }
  .posti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
  .posto { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 32px; }
  .posto__pallino { width: 14px; height: 14px; border-radius: 50%; border: 1.75px dashed var(--accento); flex: none; }
  .posto__pallino--pieno { background: var(--palla); border: 1.5px solid var(--notte); }
  .posto__nick { font-weight: 700; }
  .posto--libero { color: var(--accento); font-weight: 600; }
  .posto__azione { margin-left: auto; min-height: 32px; }
  .nota { margin: 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--palla); background: var(--superficie); border-radius: 0 var(--r-campo) var(--r-campo) 0; }
  .nota__testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .nota__autore { margin-top: var(--s1); color: var(--testo-2); font-size: var(--t-1); }
  .nota__autore::before { content: "— "; }
  .scrivi { display: flex; gap: var(--s2); align-items: flex-end; margin-top: var(--s3); }
  /* Una riga da vuoto, cresce mentre si scrive (field-sizing) fino a sei righe; dove field-sizing
     non c'è resta una riga e scorre. textarea.… per battere la regola generica delle aree di testo. */
  textarea.scrivi__campo { min-height: 48px; max-height: 176px; resize: none; padding-top: 12px; field-sizing: content; }
  .messaggio__segnala { border: 0; background: none; color: var(--testo-3); padding: 2px; display: inline-grid; place-items: center; border-radius: 6px; }
  .messaggio__segnala:hover { color: var(--errore); }
  .valuta__righe { display: grid; gap: var(--s2); width: 100%; }
  .voce--valuta { flex-wrap: wrap; }
  .voce--valuta .voce__testo { flex-basis: 100%; }
  .voce--pericolo, .voce--pericolo .icona { color: var(--errore); }

  /* Scheda giocatore */
  .scheda-giocatore { display: grid; justify-items: center; gap: var(--s3); text-align: center; }
  .dati { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); width: 100%; margin: 0; }
  .dati--tre { grid-template-columns: repeat(3, 1fr); margin: var(--s4) 0 var(--s8); }
  .dati > div { display: grid; gap: 2px; padding: var(--s3) var(--s2); background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-campo); text-align: center; }
  .dati dt { color: var(--testo-2); font-size: var(--t-0); font-weight: 600; }
  .dati dd { margin: 0; font-weight: 800; font-size: var(--t-3); }

  /* Profilo */
  .profilo__capo { display: flex; align-items: center; gap: var(--s4); }
  .profilo__nome { display: grid; gap: 2px; }
  .elenco--interruttori .interruttore { min-height: 64px; }
  .stella { display: grid; place-items: center; color: var(--bordo-campo); }
  .stella--piena { color: var(--attesa); }
  .stella--piena .icona { fill: currentColor; }

  /* Settimana tipo */
  .settimana { display: grid; gap: 6px; }
  .settimana__riga { display: grid; grid-template-columns: 44px repeat(4, 1fr); gap: 6px; align-items: center; }
  .settimana__fascia { font-size: var(--t-0); font-weight: 650; color: var(--testo-2); text-align: center; }
  .settimana__giorno { font-weight: 700; font-size: var(--t-1); text-transform: capitalize; }
  .settimana__cella { min-height: 44px; border-radius: 8px; border: 1.5px solid var(--filetto); background: var(--superficie); display: grid; place-items: center; color: var(--su-accento); }
  .settimana__cella--scelta { background: var(--accento); border-color: var(--accento); }

  /* Avvisi */
  .avvisi__gruppo { font-size: var(--t-1); color: var(--testo-2); font-weight: 650; margin: var(--s4) 0 var(--s2); }
  .avviso-voce { align-items: flex-start; }
  .avviso-voce--nuovo { background: color-mix(in srgb, var(--accento-tenue) 55%, transparent); }
  .avviso-voce--nuovo .voce__titolo::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accento); vertical-align: middle; }
  .avviso-voce__testo { white-space: normal; }
  .avviso-voce__icona { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--superficie-2); color: var(--testo-2); }
  .avviso-voce__icona--palla { background: var(--palla); color: var(--notte); }
  .avviso-voce__icona--ok { background: var(--ok-tenue); color: var(--ok); }
  .avviso-voce__icona--errore { background: var(--errore-tenue); color: var(--errore); }

  /* Spunta tonda (inviti) */
  .spunta-tonda { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--bordo-campo); display: grid; place-items: center; flex: none; }
  .spunta-tonda--scelta { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }

  /* Testi legali */
  .testo-legale { display: grid; gap: var(--s3); max-width: 68ch; }
  .testo-legale h1 { font-size: var(--t-5); }
  .testo-legale h2 { font-size: var(--t-3); margin-top: var(--s4); }
  .testo-legale ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
  .testo-legale__data { color: var(--testo-2); font-size: var(--t-1); }
  .da-completare { background: #FFF1A8; color: #3D3300; padding: 0 4px; border-radius: 3px; }

  /* Tabelle (gestione) */
  .tabella-scorre { overflow-x: auto; border: 1px solid var(--filetto); border-radius: var(--r-pannello); }
  .tabella { width: 100%; border-collapse: collapse; background: var(--superficie); font-size: var(--t-1); }
  .tabella th { text-align: left; font-weight: 650; color: var(--testo-2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--filetto); white-space: nowrap; }
  .tabella td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--filetto); vertical-align: middle; }
  .tabella tr:last-child td { border-bottom: 0; }
  .tabella__riga--spenta td { color: var(--testo-3); }
  .tabella__azioni { white-space: nowrap; text-align: right; }
  .spazio-sinistra { margin-left: var(--s2); }

  /* Blazor: finestra di riconnessione */
  .riconnessione { display: none; }
  .riconnessione.components-reconnect-show, .riconnessione.components-reconnect-failed, .riconnessione.components-reconnect-rejected,
  .riconnessione.components-reconnect-retrying, .riconnessione.components-reconnect-paused, .riconnessione.components-reconnect-resume-failed {
    display: grid; place-items: end center; position: fixed; inset: 0; z-index: 100; padding: var(--s4); background: var(--velo);
  }
  .riconnessione__scheda { width: min(420px, 100%); display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--r-foglio); background: var(--superficie); box-shadow: var(--ombra-foglio); }
  .riconnessione__testo { display: none; margin: 0; font-weight: 650; }
  .components-reconnect-show .riconnessione__testo--prova, .components-reconnect-retrying .riconnessione__testo--prova { display: block; }
  .components-reconnect-failed .riconnessione__testo--fallita, .components-reconnect-rejected .riconnessione__testo--fallita,
  .components-reconnect-paused .riconnessione__testo--fallita, .components-reconnect-resume-failed .riconnessione__testo--fallita { display: block; }
  .riconnessione__bottone { display: none; }
  .components-reconnect-failed .riconnessione__bottone, .components-reconnect-rejected .riconnessione__bottone,
  .components-reconnect-paused .riconnessione__bottone, .components-reconnect-resume-failed .riconnessione__bottone { display: inline-flex; }

  /* Avvio del circuito: il marchio al centro finché la pagina non c'è */
  .avvio { position: fixed; inset: 0; display: grid; place-items: center; background: var(--fondo); z-index: 5; }
  .guscio ~ .avvio, .gestione ~ .avvio { display: none; }

  .fumetto .bottone--tondo { min-height: 32px; width: 32px; background: none; color: inherit; }
  .scala__cifra { font-size: var(--t-4); line-height: 1; }
}

/* Movimento ridotto: si spegne tutto ciò che non è indispensabile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}