/* ============================================================================
   FantaManager — App stylesheet (no build step)
   Carica i token + la component library, aggiunge uno shim di utility minime
   (per le viste Breeze) e gli stili delle pagine (auth shell, navbar, home,
   dashboard). Tutto basato sui token di "Album & Campo".
   ============================================================================ */
/* ---------------------------------------------------------------------------
   Utility shim — copre SOLO le poche classi Tailwind che le viste Breeze
   generano inline, così degradano in modo pulito senza Tailwind/Vite.
   --------------------------------------------------------------------------- */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.text-sm { font-size: var(--text-sm); }
.text-center { text-align: center; }
.underline { text-decoration: underline; }
.rounded { border-radius: var(--radius-sm); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-5); }
.mb-4 { margin-bottom: var(--space-4); }
.ms-2 { margin-inline-start: var(--space-2); }
.ms-3 { margin-inline-start: var(--space-3); }
.ms-4 { margin-inline-start: var(--space-4); }
.me-2 { margin-inline-end: var(--space-2); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.text-lg { font-size: var(--text-lg); }
.space-y-6 > * + * { margin-top: var(--space-5); }
.max-w-xl { max-width: 36rem; }
.text-gray-600, .text-gray-500, .text-gray-900 { color: var(--color-text-muted); }
.font-medium { font-weight: var(--weight-medium); }

/* link discreto (es. "Password dimenticata?", "Già registrato?") */
.link {
  color: var(--color-primary);
  text-decoration: underline;
  font-size: var(--text-sm);
}
.link:hover { color: var(--color-primary-hover); }

/* checkbox a tema */
input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-primary);
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Layout di pagina
   --------------------------------------------------------------------------- */
/* Nessun max-width globale: oltre i 1600px lo spazio si usa, non si incornicia
   (PRODUCT-REDESIGN §4.15). La larghezza di lettura la impongono i singoli blocchi di testo,
   non il contenitore dell'applicazione. */
.page {
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  padding-bottom: var(--space-8);
}
.page__header { margin-bottom: var(--space-5); }
.page__title { font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: var(--text-3xl); line-height: 0.95; margin: 0; }
.page__sub { color: var(--color-text-muted); margin-top: var(--space-1); }
/* ---------------------------------------------------------------------------
   Telaio: header a piena larghezza, barra laterale desktop, contenuto fluido
   --------------------------------------------------------------------------- */
.appshell { display: block; }

.sidenav { display: none; }

/* Anello di focus unico per tutta l'app: prima non esisteva alcuna regola :focus-visible e la
   tastiera dipendeva dal ring di default del browser, invisibile sull'arancio e sul verde bosco. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Club attivo nell'header. A 320px resta la sigla, che è comunque comprensibile; il nome completo
   torna appena c'è spazio ed è sempre disponibile nel title. */
.clubtag { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.clubtag__abbr {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
  font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: .04em;
}
.clubtag__text { display: none; min-width: 0; line-height: 1.15; }
.clubtag__name {
  display: block; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--stadium-text); font-size: var(--text-sm);
}
.clubtag__text small { color: var(--stadium-muted); font-size: var(--text-xs); }
@media (min-width: 420px) { .clubtag__text { display: block; } }

@media (min-width: 901px) {
  .appshell {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: start;
  }
  /* Le cinque primarie vivono nella barra laterale: nell'header resterebbero duplicate.
     Il selettore è DISCENDENTE (`.topbar .topbar__links--main`, specificità 0,2,0) e non la sola
     classe: `.topbar__links { display: flex }` più in basso in questo file ha la stessa specificità
     della classe singola e, vincendo per ordine di sorgente, rendeva questa regola codice morto —
     da 901px in su header e barra laterale mostravano insieme le stesse cinque voci. La cascata del
     contratto responsive non deve dipendere da dove finiranno le regole generiche. */
  .topbar .topbar__links--main { display: none; }

  /* `aside.sidenav` (0,1,1) batte il `.sidenav { display: none }` di base per specificità e non per
     posizione: stessa ragione della regola sopra. */
  aside.sidenav {
    display: block;
    position: sticky; top: var(--topbar-h);
    align-self: start;
    padding: var(--space-4) var(--space-2);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    min-height: calc(100vh - var(--topbar-h));
  }
  .sidenav__nav { display: flex; flex-direction: column; gap: var(--space-1); }
  .sidenav__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted); text-decoration: none;
    font-weight: var(--weight-medium); font-size: var(--text-sm);
  }
  .sidenav__item:hover { background: var(--color-surface-2); color: var(--color-text); }
  .sidenav__item[aria-current="page"] {
    background: var(--color-primary-soft); color: var(--color-accent-ink);
    box-shadow: inset 3px 0 0 var(--color-accent);
  }
  .sidenav__icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; }
  .sidenav__icon svg { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------------------
   Brand / logo
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Pulsante cambio tema (chiaro/scuro)
   --------------------------------------------------------------------------- */
/* 44×44 e non 40×40: era l'ultimo controllo della testata sotto `--tap-min` (QA del 2026-08-12).
   Cresce sul posto — resta l'ultimo elemento di `.topbar__links--end`, la posizione non cambia. */
.themebtn {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.themebtn:hover { background: var(--color-surface-2); }
.themebtn--float {
  position: fixed; top: max(var(--space-3), env(safe-area-inset-top)); right: var(--space-3);
  z-index: var(--z-modal); box-shadow: var(--shadow-md);
}
/* Icona tema: mostra la luna in chiaro (→ passa a scuro), il sole in scuro (→ passa a chiaro).
   Solo CSS, guidato da data-theme (impostato pre-paint) o dal prefers-color-scheme dell'utente. */
.themebtn__icon { display: none; }
.themebtn__icon--moon { display: block; }
:root[data-theme="dark"] .themebtn__icon--moon { display: none; }
:root[data-theme="dark"] .themebtn__icon--sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .themebtn__icon--moon { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .themebtn__icon--sun { display: block; }
}

.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.brand__mark {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1;
}
.brand__name { font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: var(--text-xl); color: var(--color-text); }
.brand__name b { color: var(--color-primary); font-weight: inherit; }

/* ---------------------------------------------------------------------------
   Top navbar (area autenticata)
   --------------------------------------------------------------------------- */
/* L'header è STADIO, non album: petrolio notturno in entrambi i temi (vedi la mappa dei
   due strati in tokens.css). Nel tema chiaro è la fascia scura che regge la carta crema
   sotto; nel tema scuro è ciò che si stacca dal verde-nero dell'album. */
.topbar {
  position: sticky; top: 0; z-index: var(--z-bottomnav);
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--stadium-surface);
  color: var(--stadium-text);
  border-bottom: 1px solid var(--stadium-border);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
}
/* A 320px il marchio per esteso (128px di `min-content`) e il gruppo di destra — campanella, «Altro»
   e selettore del tema, 160px che non si comprimono — non stanno insieme nel content box: la testata
   sforava di 8px, e con la sigla del club di ~38px. Cede il wordmark, non un'azione: resta la «F»,
   che conserva il nome accessibile «Fantasista» sul collegamento. Stessa logica di `.clubtag`, che a
   320px lascia solo la sigla. La soglia è misurata: 380px è la prima larghezza a cui marchio esteso,
   sigla del club e tre azioni rientrano senza overflow. */
.topbar .brand__name { display: none; }
@media (min-width: 380px) { .topbar .brand__name { display: inline; } }

.topbar .brand__name { color: var(--stadium-text); }
.topbar .brand__name b { color: var(--stadium-info); }
.topbar .brand__mark { background: var(--stadium-info); color: var(--stadium-900); }
.topbar .themebtn {
  background: var(--stadium-panel); color: var(--stadium-text);
  border-color: var(--stadium-border-strong);
}
.topbar .themebtn:hover { background: rgba(255,255,255,.10); }
.topbar__user { color: var(--stadium-muted); }
.topbar__links { display: flex; align-items: center; gap: var(--space-1); }
/* Le voci principali servono ~880px: sotto quella soglia, e fino ai 640px dove passa la bottom-nav,
   il gruppo scorre DENTRO DI SÉ invece di allargare la pagina. Senza questo, fra 641 e 880px
   (tablet in verticale, 768px incluso) tutta l'app scrollava in orizzontale. */
.topbar__links--main {
  min-width: 0; flex: 1 1 auto;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.topbar__links--main::-webkit-scrollbar { display: none; }
/* Nella fascia in cui le voci possono venire tagliate, il bordo destro sfuma: così il taglio si
   legge come "c'è altro, scorri" e non come un errore di layout. Oltre, non c'è nulla da tagliare
   e la maschera resta invisibile. */
@media (min-width: 641px) and (max-width: 900px) {
  .topbar__links--main {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}
.topbar__link {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  white-space: nowrap;
}
/* Voci su superficie stadio: il celeste segna la pagina corrente (informazione), non il verde. */
.topbar__link { color: var(--stadium-muted); }
.topbar__link:hover { background: var(--stadium-panel); color: var(--stadium-text); }
.topbar__link[aria-current="page"] { color: var(--stadium-900); background: var(--stadium-info); }
/* Il trigger «Altro» quando la pagina corrente è una delle sue destinazioni: stesso vestito della
   voce corrente della testata, così non nasce un terzo modo di segnare lo stato. `"true"` e non
   `"page"` — la pagina corrente resta marcata dalla voce dentro il pannello. */
.topbar__link.navmore__trigger[aria-current="true"] { color: var(--stadium-900); background: var(--stadium-info); }
.topbar .btn--ghost { color: var(--stadium-info); }
.topbar .btn--ghost:hover { background: var(--stadium-panel); }
/* Il gruppo di destra (nome, tema, esci) non si comprime né scorre. */
.topbar > .topbar__links:last-child { flex: 0 0 auto; }
/* Fascia mobile: le primarie stanno nella bottom-nav, non nell'header. Selettore discendente per la
   stessa ragione della fascia desktop: non dipendere dall'ordine di `.topbar__links`. */
@media (max-width: 640px) { .topbar .topbar__links--main { display: none; } }
/* la bottom-nav è solo mobile. `nav.bottomnav` (0,1,1) batte per specificità il
   `.bottomnav { display: flex }` di components.css, senza affidarsi all'ordine dei due file. */
@media (min-width: 641px) { nav.bottomnav { display: none; } }

/* ---------------------------------------------------------------------------
   Auth shell ("Album & Campo": panno verde + carta)
   --------------------------------------------------------------------------- */
.auth {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--sky-300) 22%, transparent), transparent 60%),
    var(--color-bg);
}
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.auth__brand .brand__mark { width: 56px; height: 56px; font-size: var(--text-3xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.auth__brand .brand__name { font-size: var(--text-2xl); }
.auth__tagline { color: var(--color-text-muted); font-size: var(--text-sm); }
.auth__card {
  width: 100%; max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5);
}
.auth__card h1 { font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.auth__card .field + .field,
.auth__card form > div + div { margin-top: var(--space-4); }

.fantasista-artwork { display:block; overflow:hidden; flex-shrink:0; }
.fantasista-artwork img { display:block; width:100%; height:100%; object-fit:contain; object-position: var(--fantasista-object-position, 50% 50%); }
/* Il crop close deve leggere come ritratto anche nelle icone piccole: i file conservano
   margine attorno al soggetto per sicurezza, qui lo recuperiamo senza alterare gli asset.
   In un riquadro quadrato con asset quadrato `object-position` è inerte (non c'è eccedenza da
   posizionare): l'inquadratura la decide SOLO questo transform, ed è il motivo per cui il fuoco
   del close vive qui e non nel manifest.
   Origine 48% 39% = centro del volto e linea degli occhi, misurati su tutte e cinque le identità
   (centro x 46-49, occhi 37-40: un solo valore le copre entro ±1,5 punti). La precedente
   50% 44% era un'assunzione e teneva l'inquadratura 5 punti troppo bassa.
   Lo zoom arriva dalla scala, non dal singolo call site: 1,9 sui gradini in cui deve leggersi il
   volto, 1,45 dove il riquadro è grande abbastanza per spalle e gesto. */
.fantasista-artwork--close img {
  transform: scale(var(--art-zoom, var(--art-zoom-face)));
  transform-origin: 48% 39%;
}
.auth__logo { display:block; width:min(360px,82vw); }
.auth__logo img { display:block; width:100%; height:auto; }
.auth__stage { position:relative; width:min(100%,520px); }
/* Il Profeta dell'autenticazione è un mezzo busto, non un primo piano: lo zoom è dichiarato qui e
   NON eredita il default della scala. Su desktop resta laterale alla card; su mobile entra in una
   fascia propria sopra il form, così volto, tagline e bordo della card non si sovrappongono. */
.auth__profeta {
  position:absolute; z-index:0; right:-105px; top:-54px; border-radius:50%;
  width:var(--art-portrait-lg); height:var(--art-portrait-lg);
  --art-zoom: var(--art-zoom-bust);
  background:var(--night-900);
}
.auth__card { position:relative; z-index:1; }
/* Su mobile il tondo scende al gradino «distintivo» e si sposta di 14px oltre il bordo dello stage.
   Misurato a 320px con il gradino «ritratto» (112px): il tondo invadeva la tagline del marchio per
   40×17px — e dipinge sopra, essendo l'unico elemento posizionato di quella zona — e il mento
   finiva sotto il bordo della card. A 80px il volto sta interamente nei 68px che restano sopra la
   card e la tagline torna libera. Il tondo è un fondale decorativo, non un narratore che parla:
   qui conta che non interferisca. */
@media (max-width:720px) {
  .auth { justify-content:flex-start; padding-top:clamp(5rem,18vh,10rem); }
  .auth__logo { width:min(430px,90vw); }
  .auth__stage { padding-top:calc(var(--art-badge) + var(--space-3)); }
  .auth__profeta { width:var(--art-badge); height:var(--art-badge); right:var(--space-4); top:0; opacity:.96; }
}

/* ---------------------------------------------------------------------------
   Homepage (landing pubblica)
   --------------------------------------------------------------------------- */
.hero {
  min-height: 72dvh;
  display: grid; place-items: center; text-align: center;
  padding: var(--space-8) var(--space-4);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sky-500) 24%, transparent), transparent 55%),
    var(--color-bg);
}
.hero__inner { max-width: 640px; }
.hero__kicker {
  display: inline-block; margin-bottom: var(--space-3);
  padding: 4px var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-primary-ink);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.hero__title {
  font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: clamp(2.5rem, 9vw, var(--text-display)); line-height: 0.92;
  margin: 0 0 var(--space-4);
}
.hero__title em { color: var(--color-primary); font-style: normal; }
.hero__lead { color: var(--color-text-muted); font-size: var(--text-lg); margin: 0 auto var(--space-6); max-width: 30rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.features {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  max-width: 1024px; margin: 0 auto; padding: var(--space-7) var(--space-4);
}
@media (min-width: 720px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature__icon { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.feature__title { font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.feature__text { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

.sitefoot { text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm);
  padding: var(--space-6) var(--space-4); border-top: 1px solid var(--color-border); }

/* ---------------------------------------------------------------------------
   Dashboard / pagina personale — i due strati di "Album & Campo"

   1. STADIO (.dash-stadium): l'hero. Petrolio notturno in ENTRAMBI i temi, perché lo
      stadio è una superficie semantica e non la conseguenza del dark mode. Contiene il
      tabellone (cosa sta succedendo) e il gesto del momento (una sola CTA primaria).
   2. ALBUM (.dash-album): "Cosa puoi fare". Carta crema nel tema chiaro, verde-nero nel
      tema scuro — token --color-surface/--color-bg. Contiene le destinazioni stabili.

   Colori: verde solo su CTA e formazione pronta, ambra su urgenza/scadenza, celeste
   sull'informazione fredda, petrolio sul telaio. Vedi la mappa in tokens.css.
   --------------------------------------------------------------------------- */
.dash-stadium {
  position: relative; overflow: hidden;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0;
  padding: 0;
  min-height: 420px;
  /* Fascia del narratore, solo mobile. Sotto i 720px testo e figura NON stanno affiancati: a
     320px non c'è larghezza per entrambi, e finché convivevano nella stessa banda l'unico modo
     di tenere il testo leggibile era velare l'artwork con un gradiente a tutta larghezza — cioè
     coprire il volto del narratore. Qui si separano in verticale: la figura possiede questa
     fascia in fondo alla hero, il testo tutto lo spazio sopra, a piena larghezza. La fascia
     cresce col viewport, così su un telefono grande il narratore è più grande. */
  --hero-band: clamp(136px, 40vw, 190px);
  display: flex; align-items: stretch;
  background:
    radial-gradient(120% 80% at 78% 22%, color-mix(in srgb, var(--forest-400) 26%, transparent), transparent 62%),
    var(--stadium-surface);
  color: var(--stadium-text);
}

/* Fantasista dell'hero: grande e riconoscibile, ancorato in basso a destra.
   Su mobile occupa la propria fascia in fondo (`--hero-band`), dove non passa nessun testo:
   niente velatura sopra il personaggio, volto compreso. Da 720px torna la colonna a destra a
   tutta altezza, dove `object-position: bottom` evita il taglio artificiale a metà gamba. */
.dash-stadium__art {
  position: absolute; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: none; height: var(--hero-band);
  z-index: 0; pointer-events: none;
}
.dash-stadium__art img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: right bottom;
}

/* Su mobile NON c'è area di rispetto, perché non c'è niente da cui difendersi: il testo si
   ferma sopra la fascia dell'artwork (`padding-bottom`) e legge direttamente sul fondo dello
   stadio — il primo stop del gradiente, l'unico contrasto già verificato (8,54:1 kicker,
   14,62:1 titolo, in entrambi i temi). La dissolvenza a tutta larghezza che c'era qui prima
   serviva a proteggere il testo sopra l'artwork e, facendolo, velava il personaggio dal 34% al
   92% di opacità: era il difetto, non la soluzione. Da 720px testo e figura tornano affiancati
   in due colonne e il gradiente viene ridichiarato, lì con la dissolvenza che chiude prima del
   bordo. */
.dash-stadium__inner {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-5) var(--space-4) calc(var(--hero-band) + var(--space-4));
}
/* Ultima difesa della leggibilità sopra l'artwork, senza aggiungere riquadri: l'ombra segue il
   testo invece di disegnare una scatola attorno a esso. */
.dash-stadium__story h1 { text-shadow: 0 1px 14px var(--stadium-900); }
/* Nessuna regola su `.dash-stadium > *`: aveva specificità maggiore di `.dash-stadium__art` e ne
   annullava il `position: absolute`, rendendo l'artwork un flex item che spingeva il testo di lato.
   Il posizionamento sta sui due figli, dichiarato una volta per ciascuno. */
.dash-stadium__kicker {
  color: var(--stadium-info); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: .09em; text-transform: uppercase;
}
.dash-stadium__grid { display: grid; gap: var(--space-4); padding: var(--space-3) 0 var(--space-5); }
.dash-stadium__story h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: .98; letter-spacing: .02em; margin: 0 0 var(--space-3);
}

/* Chip di stato: la formazione pronta è informazione (celeste), la formazione incompleta
   è ambra perché è una cosa da fare entro una scadenza. */
.dash-stadium__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dash-chip {
  padding: .3rem .7rem; border: 1px solid var(--stadium-border);
  border-radius: var(--radius-pill); font-size: var(--text-xs);
}
.dash-chip--ok {
  color: var(--stadium-info);
  border-color: color-mix(in srgb, var(--sky-300) 50%, transparent);
  background: color-mix(in srgb, var(--sky-300) 12%, transparent);
}
.dash-chip--warn {
  color: var(--stadium-warning);
  border-color: color-mix(in srgb, var(--amber-500) 50%, transparent);
  background: color-mix(in srgb, var(--amber-500) 12%, transparent);
}

/* Voce del narratore: ora il ritratto è l'artwork grande dell'hero, quindi qui resta solo il
   messaggio — un filetto arancio a sinistra come nel prototipo, senza miniatura duplicata. */
.dash-narrator {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  max-width: 46ch;
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--stadium-900) 55%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.dash-narrator p { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-sm); }
.dash-narrator strong {
  font-family: var(--font-display); letter-spacing: .04em;
  font-size: var(--text-lg); color: var(--color-accent);
}
.dash-narrator span { color: var(--stadium-text); }

.dash-stadium__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.dash-stadium__actions > a:not(.btn) {
  color: var(--stadium-info); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}

/* Tabellone: il dato che descrive lo stato della giornata. Non ripete mai un numero già
   presente nei chip, nel narratore o nelle tile dell'album. */
/* Tabellone: striscia compatta sotto la CTA, non una colonna a destra. A destra c'è il Fantasista,
   e un pannello alto lì lo avrebbe coperto. Etichetta a sinistra, valore a destra: si legge in una
   riga e non compete con la headline. */
/* `minmax(0, …)` su entrambe le tracce, non `1fr auto`: una traccia `auto` non scende sotto il proprio
   min-content, quindi un valore lungo allargava il tabellone oltre la griglia dello stadio. Lì
   `overflow:hidden` (necessario all'artwork) lo TAGLIAVA invece di mostrarlo — un difetto che a 320px
   mangiava 19px di CTA e tabellone senza produrre alcuna barra di scorrimento che lo denunciasse. */
.dash-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  max-width: 34rem;
  border: 1px solid var(--stadium-border); border-radius: var(--radius-lg);
  background: var(--stadium-panel);
}
.dash-board__label { grid-column: 1; color: var(--stadium-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.dash-board__deadline {
  grid-column: 2; grid-row: 1 / span 2;
  min-width: 0; overflow-wrap: break-word;
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1;
}
.dash-board > small { grid-column: 1; color: var(--stadium-muted); font-size: var(--text-xs); }
.dash-board__deadline small { font-size: var(--text-lg); color: var(--stadium-muted); }

/* Confronto squadra ↔ lega: informazione fredda, quindi celeste. È il contenuto del
   tabellone in pausa, dove un piazzamento tipo "8º/8" non direbbe nulla di utile. */

/* Filo di luce sotto lo stadio: colore = stato della giornata. */
/* Valori non numerici del tabellone (risultato coperto, mercato chiuso): stessa gerarchia dei
   numeri ma senza il font da tabellone, che su una parola leggerebbe come un punteggio. */
.dash-board__sealed {
  font-family: var(--font-sans); font-size: var(--text-2xl);
  letter-spacing: .01em; color: var(--color-accent);
}

/* --- Album: le destinazioni stabili ---------------------------------------- */
.dash-album { padding: var(--space-5) 0; }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.dash-section-head h2 { font-family: var(--font-display); letter-spacing: .05em; margin: 0; }
.dash-section-head span { color: var(--color-text-muted); font-size: var(--text-xs); }
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Grammatica UNICA per tutte e quattro le tile, nello stesso ordine:
   icona → titolo (che cos'è) → valore (quanto/quale) → descrizione (perché entrarci).
   Prima due tile invertivano valore e titolo e la griglia non si leggeva in colonna. */
.dash-tile {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-height: 128px; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.dash-tile:hover { border-color: var(--color-border-strong); }
.dash-tile__icon { color: var(--color-primary); line-height: 0; margin-bottom: var(--space-2); }
.dash-tile__icon svg { width: 24px; height: 24px; }
.dash-tile__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.dash-tile__value {
  margin-top: auto; font-family: var(--font-mono); font-size: var(--text-lg);
  font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
}
.dash-tile__hint { color: var(--color-text-muted); font-size: var(--text-xs); }

.dash-guide {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); font-size: var(--text-sm);
}
.dash-guide a { margin-left: auto; font-weight: var(--weight-semibold); }

@media (min-width: 720px) {
  .dash-stadium { margin-inline: 0; border-radius: var(--radius-xl); min-height: 460px; }
  /* L'artwork possiede la destra, il testo la sinistra. Il contenuto è limitato al 58% così la
     figura non finisce mai coperta dal tabellone: senza questo limite il pannello del tabellone
     atterrava sopra il personaggio. */
  /* Da 720px il testo sta nel 58% e l'artwork nel 44%: le due zone non si toccano, quindi la
     dissolvenza può chiudersi prima del bordo e il testo non ha bisogno dell'ombra. */
  .dash-stadium__inner {
    padding: var(--space-6); max-width: 58%;
    background: linear-gradient(
      100deg,
      var(--stadium-900) 0%,
      color-mix(in srgb, var(--stadium-900) 88%, transparent) 60%,
      transparent 100%
    );
  }
  /* Da 720px la fascia mobile lascia il posto alla colonna a tutta altezza: c'è larghezza per
     testo e figura affiancati, e il gradiente dell'`__inner` chiude prima del bordo. */
  .dash-stadium__art { top: 0; height: 100%; width: 44%; }
  .dash-stadium__story h1 { text-shadow: none; }
  .dash-album { padding-top: var(--space-6); }
  .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-tile { min-height: 168px; padding: var(--space-4); }
  .dash-tile__value { font-size: var(--text-xl); }
  .dash-tile__title { font-size: var(--text-base); }
  .dash-section-head h2 { font-size: var(--text-2xl); }
}
/* Da 900px lo stadio è una SCENA: il taglio `full` (figura intera) al posto del mezzo busto, con
   `cover` invece di `contain`. Con `contain` la figura occupava il 55% dell'altezza della colonna
   e il resto era vuoto; con `cover` la riempie. Il volto scende (in `full` vale l'11-13,5%
   dell'altezza dell'asset contro il 20-23% di `wide`): è il prezzo dichiarato della figura intera.
   `aspect-ratio` MAI sopra 1.45, il rapporto degli asset: sopra quel valore `cover` inizia a
   ritagliare in verticale e la prima cosa che taglia è la testa (misurato: −22px sulla hero di
   benvenuto a 1440px). Sotto 1.45 il ritaglio è solo orizzontale e la finestra resta più larga
   del soggetto più largo, il Genio, che ne occupa il 43,9%. `max-width` tiene la colonna nel
   corridoio richiesto; quando morde, l'aspetto scende — direzione sicura.
   Sotto 900px resta `wide`: là la colonna è alta e stretta (finestra 38%) e `full` taglierebbe
   le mani a tutte e cinque le identità. Il taglio servito lo decide `cropFrom900` sul componente. */
@media (min-width: 900px) {
  .dash-stadium__art {
    top: auto; bottom: 0;
    width: auto; height: 100%; aspect-ratio: 1.45; max-width: 44%;
  }
  .dash-stadium__art img { object-fit: cover; object-position: 50% 100%; }
}
@media (min-width: 1200px) {
  .page--dashboard { padding-inline: var(--space-6); }
  .dash-stadium { min-height: 520px; }
  .dash-stadium__inner { padding: var(--space-7); }
  .dash-stadium__story h1 { font-size: 4rem; max-width: 22ch; }
  .dash-board__deadline { font-size: 2.75rem; }
  .dash-narrator p { font-size: var(--text-base); }
  .dash-tiles { gap: var(--space-4); }
  .dash-tile { min-height: 190px; }
}

/* ---------------------------------------------------------------------------
   Hero condiviso delle quattro superfici primarie oltre la Home (Squadra,
   Giornata, Mercato, Lega — CANTIERE-RITMO-E-REGIA, passo 8): stessa
   grammatica dello stadio (artwork grande, voce del narratore, un gesto), ma
   compatto — qui il contenuto funzionale della pagina resta protagonista, non
   l'hero. Stessi token petrolio/verde/arancio dello stadio: nessun colore
   nuovo, nessuna variante per tema.
   --------------------------------------------------------------------------- */
.surface-hero {
  position: relative; overflow: hidden;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) var(--space-5);
  padding: 0;
  min-height: 240px;
  /* Stessa fascia mobile dello stadio (vedi `.dash-stadium`), più bassa: qui la hero è compatta
     perché il protagonista è il contenuto della pagina, non l'hero. */
  --hero-band: clamp(120px, 32vw, 160px);
  display: flex; align-items: stretch;
  background:
    radial-gradient(120% 80% at 78% 22%, color-mix(in srgb, var(--forest-400) 26%, transparent), transparent 62%),
    var(--stadium-surface);
  color: var(--stadium-text);
}
/* Su mobile la figura sta nella propria fascia in fondo, ancorata in basso a destra: nessun testo
   le passa sopra, quindi niente velatura. Sostituisce lo spostamento del 20% verso destra con
   ancoraggio in alto: quel workaround serviva a togliere il volto da dietro balloon e CTA, ma il
   volto restava comunque sotto il gradiente dell'`__inner` (34-92% di opacità) e la headline lo
   attraversava — a 390px il testo del titolo arrivava all'82% della larghezza, il volto stava al
   63-75%. Da 720px torna la colonna a destra a tutta altezza. */
.surface-hero__art {
  position: absolute; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: none; height: var(--hero-band);
  z-index: 0; pointer-events: none;
}
.surface-hero__art img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
/* Come nello stadio: su mobile nessuna velatura, il testo si ferma sopra la fascia e legge sul
   fondo dello stadio; il gradiente torna da 720px, dove le due colonne convivono. */
.surface-hero__inner {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-4) var(--space-4) calc(var(--hero-band) + var(--space-4));
}
.surface-hero__kicker {
  color: var(--stadium-info); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: .09em; text-transform: uppercase; margin: 0 0 var(--space-2);
}
.surface-hero h1 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.25rem);
  line-height: 1.02; letter-spacing: .02em; margin: 0 0 var(--space-2);
  text-shadow: 0 1px 14px var(--stadium-900);
  overflow-wrap: break-word;
}
.surface-hero__narrator {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  max-width: 46ch;
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--stadium-900) 55%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.surface-hero__narrator p { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-sm); }
.surface-hero__narrator strong {
  font-family: var(--font-display); letter-spacing: .04em;
  font-size: var(--text-base); color: var(--color-accent);
}
.surface-hero__narrator span { color: var(--stadium-text); }
.surface-hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.surface-hero__actions > a:not(.btn) {
  color: var(--stadium-info); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
@media (max-width: 719px) {
  .surface-hero--reveal { min-height: 280px; }
  .surface-hero--reveal .surface-hero__art {
    left: 0; right: auto; top: 0; bottom: 0; width: 42%; height: 100%;
  }
  .surface-hero--reveal .surface-hero__art img { object-position: left bottom; }
  .surface-hero--reveal .surface-hero__inner {
    margin-left: 38%; padding: var(--space-5) var(--space-4);
  }
  .surface-hero--reveal .surface-hero__narrator { padding: var(--space-2) var(--space-3); }
}
@media (min-width: 720px) {
  .surface-hero { margin-inline: 0; border-radius: var(--radius-xl); min-height: 300px; }
  /* Da 720px il testo sta nel 60% e l'artwork nel 40%, nel corridoio 36-44% richiesto: le due
     zone non si toccano, quindi la dissolvenza può chiudersi prima del bordo. */
  .surface-hero__inner {
    padding: var(--space-5) var(--space-6); max-width: 60%;
    background: linear-gradient(
      100deg,
      var(--stadium-900) 0%,
      color-mix(in srgb, var(--stadium-900) 88%, transparent) 60%,
      transparent 100%
    );
  }
  .surface-hero__art { right: 0; top: 0; height: 100%; width: 40%; }
  .surface-hero h1 { text-shadow: none; font-size: clamp(1.8rem, 4vw, 2.5rem); }
}
@media (min-width: 1200px) {
  .surface-hero { min-height: 340px; }
  .surface-hero__inner { padding: var(--space-6); }
}

/* ---------------------------------------------------------------------------
   Araldo del Fantasista — scaffale orizzontale su mobile, griglia su desktop
   --------------------------------------------------------------------------- */
.herald__shelf {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--space-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: var(--space-2);
}
.herald__shelf::-webkit-scrollbar { display: none; }
.herald__card {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.herald__kicker {
  color: var(--color-accent-ink); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase;
}
.herald__title { font-size: var(--text-lg); line-height: 1.2; }
.herald__body { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 720px) {
  .herald__shelf {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    overflow: visible;
  }
}

/* Spazio pubblicitario: esiste solo se abilitato, così non lascia buchi nel layout. Non compare su
   mobile — i formati desktop non si forzano sul telefono (§4.15). */
.adv-slot { display: none; }
@media (min-width: 901px) {
  .adv-slot {
    display: grid; place-items: center;
    min-height: 90px; margin-top: var(--space-5);
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
  }
  .adv-slot__tag {
    color: var(--color-text-subtle); font-size: var(--text-xs);
    letter-spacing: .1em; text-transform: uppercase;
  }
}

.grid-cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .grid-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; line-height: 1; }
.stat__label { color: var(--color-text-muted); font-size: var(--text-sm); }

.avatar {
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-2xl);
}
.profilehead { display: flex; align-items: center; gap: var(--space-4); }

.stack > * + * { margin-top: var(--space-4); }

/* Hero di benvenuto (utente a zero): un solo narratore, una sola CTA dominante.
   Stessa grammatica dell'hero condiviso (.surface-hero): artwork ancorata a destra,
   testo su gradiente a sinistra — qui però le proporzioni e l'altezza sono quelle
   richieste per la Home (52-58%/42-48% da 900px, non 60/40 come nelle altre superfici). */
.onboard-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  min-height: 300px;
  /* Stessa fascia mobile dello stadio (vedi `.dash-stadium`): qui vale fino a 900px, che è il
     punto in cui questa hero passa alle sue due colonne 58/46. */
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--sky-500) 22%, transparent), transparent 60%),
    var(--color-surface);
  box-shadow: var(--shadow-md);
}
.onboard-hero__art {
  position: absolute; left: 0; bottom: 0; top: 0;
  width: clamp(112px, 30vw, 150px); max-width: none; height: 100%;
  z-index: 0; pointer-events: none;
}
.onboard-hero__art img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.onboard-hero__art--mobile { --art-zoom: 1.2; }
.onboard-hero__art--desktop { display: none; }
/* Come nello stadio: sotto i 900px nessuna velatura sopra il Profeta, il testo si ferma sopra la
   fascia e legge sulla carta della card. Il gradiente torna nel blocco a 900px. */
.onboard-hero__inner {
  position: relative; z-index: 1;
  padding: var(--space-5) var(--space-4) var(--space-5) clamp(136px, 35vw, 174px);
}
.onboard-hero__kicker {
  font-family: var(--font-display); letter-spacing: .09em; text-transform: uppercase;
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-accent-ink);
  margin: 0 0 var(--space-2);
}
.onboard-hero__title {
  font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: clamp(1.8rem, 8vw, var(--text-3xl)); line-height: 1.02;
  margin: 0 0 var(--space-3);
}
.onboard-hero__title em { color: var(--color-primary); font-style: normal; }
.onboard-hero__lead { color: var(--color-text-muted); max-width: 42ch; margin: 0 0 var(--space-4); font-size: var(--text-base); }
.onboard-hero__alt {
  display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm);
  /* Il cap nacque perché sotto la CTA passava il torso del Profeta e il testo libero (non su
     sfondo opaco come il bottone) non poteva affidarsi al solo gradiente. Con la fascia il
     Profeta non è più sotto il testo, quindi come difesa non serve più; resta perché
     `.onboard-hero__altlink` è un <button>, che centra la propria etichetta: togliere il cap
     sposterebbe quel testo invece di limitarsi a liberare spazio. */
  max-width: 70%;
}
.onboard-hero__alt a, .onboard-hero__altlink { color: var(--color-text-muted); }
.onboard-hero__alt a:hover, .onboard-hero__altlink:hover { color: var(--color-text); }
.onboard-hero__altlink { background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

@media (min-width: 900px) {
  .onboard-hero { min-height: 400px; display: flex; align-items: stretch; }
  .onboard-hero__inner {
    flex: 1 1 auto; min-width: 0; max-width: 58%;
    padding: var(--space-6);
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(
      100deg,
      var(--color-surface) 0%,
      color-mix(in srgb, var(--color-surface) 92%, transparent) 62%,
      transparent 100%
    );
  }
  /* Da 900px la fascia mobile lascia il posto alla colonna a tutta altezza (42-48% richiesto),
     con il taglio `full`: stessa scena e stesso vincolo di aspetto dello stadio, vedi il blocco
     `@media (min-width: 900px)` di `.dash-stadium__art`. Qui il tetto conta davvero: la hero di
     benvenuto è bassa (400px) e larga, quindi senza `aspect-ratio` la colonna arrivava a 1.61 e
     tagliava 22px di testa al Profeta. */
  .onboard-hero__art {
    left: auto; right: 0; top: auto; bottom: 0;
    width: auto; height: 100%; aspect-ratio: 1.45; max-width: 46%;
  }
  .onboard-hero__art--mobile { display: none; }
  .onboard-hero__art--desktop { display: block; }
  .onboard-hero__art img { object-fit: cover; object-position: 50% 100%; }
  .onboard-hero__lead { font-size: var(--text-lg); }
}

/* La regola che nascondeva artwork e CTA dell'hero con `visibility: hidden` mentre lo
   spotlight era aperto è stata rimossa insieme allo spotlight: nascondeva proprio
   l'elemento indicato come target, quindi al primo passo non restava niente in evidenza.
   Oggi l'unica CTA dell'obiettivo sta nella guida e l'hero non ne ha più una propria. */

.objectives { margin-bottom: var(--space-5); }
.objectives__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.objectives__kicker { font-family: var(--font-display); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); margin: 0; }
.objectives__count { font-family: var(--font-mono); font-size: var(--text-xl); margin: 0; }
.objectives__count b { color: var(--color-primary); }
.objectives__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; margin: var(--space-3) 0 var(--space-4); }
.objectives__bar i { display: block; height: 100%; background: var(--color-primary); transition: width var(--duration-base) var(--ease-out); }
/* Il blocco «Prossimo obiettivo» con la sua CTA è stato rimosso dalla card: l'unica CTA
   del prossimo obiettivo vive nella guida (`.tguide`), qui resta il solo progresso. */
.objectives__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.objectives__item { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.objectives__item.is-done { color: var(--color-text-subtle); text-decoration: line-through; }
.objectives__tick { font-family: var(--font-mono); }
/* Inchiostro, non la tinta piena: `--color-success` sulla carta crema sta a 3,43:1 e la spunta è
   l'unico segnale visivo del passo completato. */
.objectives__item.is-done .objectives__tick { color: var(--color-success-ink); text-decoration: none; }
/* Il badge sbloccato marca il passo che l'ha prodotto: niente `line-through` ereditato dalla riga
   completata, perché è la celebrazione e non il testo barrato. Sostituisce lo scaffale
   `.objectives__badges`, che ripeteva le etichette dei passi (lotto 3, 2026-08-14). */
.objectives__item .objectives__badge { margin-left: auto; text-decoration: none; font-size: var(--text-base); line-height: 1; }
.objectives__done { text-align: center; padding: var(--space-3) 0; }
.objectives__done-icon { font-size: var(--text-3xl); }
.objectives__done-sub { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 32rem; margin: 0 auto; }
.objectives__peek { display: none; align-items: center; justify-content: flex-start; gap: var(--space-3); }
.objectives__peek > span { margin-right:auto; }
.objectives__peek form { margin:0; }
.objectives__dismiss { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--color-text-muted); font-size:var(--text-2xl); cursor:pointer; }
.objectives__dismiss:hover,.objectives__dismiss:focus-visible { background:var(--color-surface-raised); color:var(--color-text); }
.objectives--collapsed .objectives__peek { display: flex; }
.objectives--collapsed > :not(.objectives__peek) { display: none; }

/* ---------------------------------------------------------------------------
   Guida del percorso: card compatta in flusso, NON bloccante.

   Sostituisce lo spotlight modale del first-run (overlay `fixed` a z-index 900,
   tooltip posizionato via JavaScript sopra un target «illuminato»). Quel modello
   copriva header, bottom-nav, campanella, tema e menu «Altro» — tutti a
   `--z-bottomnav: 200` — e ne assorbiva il primo tocco; al primo passo, per non
   duplicare la CTA, nascondeva con `visibility: hidden` proprio l'elemento che
   avrebbe dovuto mettere in evidenza. Qui non c'è overlay, non c'è z-index
   dedicato, non c'è posizionamento: la guida sta nel flusso e la navigazione
   resta sempre raggiungibile al primo click.
   --------------------------------------------------------------------------- */
.tguide {
  margin-bottom: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tguide__peek[hidden], .tguide__main[hidden] { display: none; }
.tguide__peek {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.tguide__peek-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.tguide__main { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.tguide__narrator {
  overflow: hidden; padding: var(--space-3);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 62%),
    var(--color-surface-2);
  border-right: 1px solid var(--color-border);
}
/* Ritratto QUADRATO di dimensione esplicita, come nel balloon condiviso, e sui gradini della
   scala condivisa. Il framing dedicato che serviva qui (`scale(1.75)` con origine al 40%) è
   diventato lo standard: la scala usa 1,9 con origine sul volto misurato al 48%/39%, quindi la
   regola locale è stata rimossa invece di essere ritarata. */
.tguide__narrator .fantasista-artwork { width: var(--art-badge); height: var(--art-badge); border-radius: var(--radius-md); }
.tguide__body { min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.tguide__kicker {
  margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-accent-ink); font-weight: var(--weight-bold);
}
.tguide__preview {
  display: inline-block; margin-left: var(--space-2);
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-surface-sunken); color: var(--color-text-muted);
  text-transform: none; letter-spacing: 0; font-weight: var(--weight-medium);
}
.tguide__title { margin: var(--space-1) 0 0; font-family: var(--font-display); letter-spacing: var(--tracking-wide); font-size: var(--text-lg); }
.tguide__hint { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.tguide__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.tguide__form { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 min(100%, 26rem); }
.tguide__input { flex: 1 1 12rem; min-width: 0; }
/* Sotto i 360px il ritratto scende ancora: a quelle larghezze ogni pixel tolto alla
   colonna dell'immagine è una parola in più per riga di testo. */
@media (max-width: 359px) {
  .tguide__narrator { padding: var(--space-2); }
  .tguide__narrator .fantasista-artwork { width: var(--art-sign); height: var(--art-sign); }
  .tguide__body { padding: var(--space-3); }
  .tguide__title { font-size: var(--text-base); }
}
@media (min-width: 720px) {
  .tguide__narrator .fantasista-artwork { width: var(--art-portrait-lg); height: var(--art-portrait-lg); }
}

/* Narratore in-flow: la voce del Fantasista fuori dallo spotlight (survey/reveal/flop).
   Ritratto inquadrato sul volto via object-position (niente taglio dall'alto), balloon con
   codina; tutto su token, dark mode automatico. --------------------------------------- */
.fnarrator { display: flex; align-items: stretch; gap: var(--space-3); margin: 0 0 var(--space-5); }
/* Ritratto QUADRATO di dimensione fissa, non una colonna che si allunga col testo.
   Con `align-self: stretch` + `object-fit: cover` la finestra sull'asset valeva
   `larghezza / (rapporto · altezza)`, cioè dipendeva dalla LUNGHEZZA DEL MESSAGGIO: a 390px con
   cinque righe scendeva al 48% dell'asset e tagliava le braccia a quattro identità su cinque, a
   320px al 21% e restava una striscia di maglia. Un quadrato fisso rende il ritaglio identico a
   ogni lunghezza, e con il taglio `close` (1024×1024) l'asset entra senza deformazione.
   `align-self: center` tiene il centro del ritratto allineato alla codina del balloon, che è
   ancorata al 50% della sua altezza. */
.fnarrator__portrait {
  flex: none; align-self: center;
  width: var(--art-portrait); height: var(--art-portrait);
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border);
  /* Palco scuro fisso (indipendente dal tema): i fantasisti hanno fondi eterogenei
     — alcuni su nero pieno, altri trasparenti — e qui risultano tutti coerenti. */
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 62%),
    linear-gradient(180deg, #0e141c 0%, #05070b 100%);
}
.fnarrator__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnarrator__portrait .fantasista-artwork { width:100%; height:100%; }
.fnarrator__balloon {
  position: relative; flex: 1; min-width: 0; align-self: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.fnarrator__balloon::before, .fnarrator__balloon::after {
  content: ""; position: absolute; top: 50%; right: 100%; width: 0; height: 0; border: solid transparent;
}
.fnarrator__balloon::before { margin-top: -11px; border-width: 11px; border-right-color: var(--color-border); }
.fnarrator__balloon::after  { margin-top: -10px; border-width: 10px; border-right-color: var(--color-surface-2); }
/* Arancio USATO COME TESTO: `--color-accent-ink`, mai `--color-accent` grezzo. Il balloon è
   `--color-surface-2`, dove il primario grezzo stava a 2,50:1 nel tema chiaro. */
.fnarrator__kicker { margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent-ink); font-weight: var(--weight-bold); }
.fnarrator__msg { margin: var(--space-1) 0 0; color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-snug); }
/* Le larghezze per posa (148px) sono state rimosse: nascevano per lasciare respirare il gesto
   degli artwork landscape, e con il ritratto quadrato non hanno più oggetto — la posa è un alias
   legacy verso un'identità, non una scelta di dimensione. Un solo gradino per tutte e cinque. */
/* Savicevic ha un incarnato scuro nell'artwork: uno stage più chiaro (acciaio) lo stacca
   dal fondo invece di inghiottirlo. Schiarisce lo sfondo, non i pixel del soggetto, così
   resta corretto anche se in futuro l'asset viene ridipinto. */
.fnarrator--varianza .fnarrator__portrait {
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%),
    linear-gradient(180deg, #35424f 0%, #161d26 100%);
}
@media (max-width: 480px) {
  .fnarrator__msg { font-size: var(--text-sm); }
}
/* Sotto i 360px il ritratto scende al gradino «distintivo»: a quella larghezza ogni pixel tolto
   alla colonna dell'immagine è una parola in più per riga nel balloon. Stessa logica già
   applicata alla guida del percorso. */
@media (max-width: 359px) {
  .fnarrator__portrait { width: var(--art-badge); height: var(--art-badge); }
}

/* Utility Alpine generica (prima introduzione nell'app): nasconde gli elementi
   x-data finché Alpine non li ha inizializzati, evitando il flash dello stato
   sbagliato (es. un aiuto già chiuso che lampeggia visibile un istante). */
[x-cloak] { display: none !important; }

/* fnarrator: side=right — stessa struttura DOM (ritratto poi balloon), solo
   l'ordine visivo e la codina del balloon si invertono via CSS. */
.fnarrator--side-right { flex-direction: row-reverse; }
.fnarrator--side-right .fnarrator__balloon::before,
.fnarrator--side-right .fnarrator__balloon::after {
  right: auto; left: 100%;
}
.fnarrator--side-right .fnarrator__balloon::before { border-right-color: transparent; border-left-color: var(--color-border); }
.fnarrator--side-right .fnarrator__balloon::after  { border-right-color: transparent; border-left-color: var(--color-surface-2); }

/* Le larghezze per taglio (104/168px, più le varianti mobile) sono state rimosse insieme a
   quelle per posa: il ritratto è quadrato e i balloon usano tutti il taglio `close`, quindi la
   dimensione arriva dalla scala e non dal taglio dichiarato nel call site. */

/* Da 1024px in su c'è spazio in abbondanza accanto al balloon: il ritratto passa al gradino
   grande e con esso allarga l'inquadratura (zoom «mezzo busto» invece di «volto»), perché a
   160px ci stanno le spalle e una parte del gesto. Solo desktop — su mobile crescere
   stringerebbe il testo. */
@media (min-width: 1024px) {
  .fnarrator__portrait {
    width: var(--art-portrait-lg); height: var(--art-portrait-lg);
    --art-zoom: var(--art-zoom-bust);
  }
}

/* fnarrator: chiusura dismissible + richiamo compatto per riaprire. */
.fnarrator__balloon--dismissible { padding-right: calc(var(--space-4) + 28px + var(--space-2)); }
.fnarrator__dismiss {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.fnarrator--side-right .fnarrator__dismiss { right: auto; left: var(--space-2); }
.fnarrator--side-right .fnarrator__balloon--dismissible { padding-right: var(--space-4); padding-left: calc(var(--space-5) + 28px + var(--space-2)); }
.fnarrator__dismiss:hover { background: var(--color-surface-muted); color: var(--color-text); }
.fnarrator__recall {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3); cursor: pointer;
  margin: 0 0 var(--space-5);
}
.fnarrator__recall:hover { color: var(--color-text); }

/* fnarrator: approfondimento progressivo "Perché?" */
.fnarrator__why-toggle {
  display: inline-block; margin-top: var(--space-2); padding: 0;
  border: 0; background: none; color: var(--color-accent-ink);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-decoration: underline; cursor: pointer;
}
.fnarrator__why { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }

@media (max-width: 480px) {
  .fnarrator__balloon--dismissible { padding-right: calc(var(--space-3) + 24px + var(--space-1)); }
  .fnarrator--side-right .fnarrator__balloon--dismissible { padding-right: var(--space-3); padding-left: calc(var(--space-4) + 24px + var(--space-1)); }
  .fnarrator__dismiss { width: 24px; height: 24px; font-size: var(--text-base); }
}

/* ---------------------------------------------------------------------------
   Spinta di avanzamento del tutorial fuori dalla Home: dice a che punto siamo e,
   quando il passo è chiuso, dove si va. Stessa gerarchia dell'hero (kicker in
   arancio, titolo, riga di contesto), ma è una card della pagina, non racconto.
   --------------------------------------------------------------------------- */
.tutorial-nudge {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-accent);
}
.tutorial-nudge__body { flex: 1 1 260px; min-width: 0; }
.tutorial-nudge__kicker {
  margin: 0 0 var(--space-1);
  color: var(--color-accent-ink); font-size: var(--text-xs);
  font-weight: var(--weight-bold); letter-spacing: .09em; text-transform: uppercase;
}
.tutorial-nudge__title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.tutorial-nudge__lead { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 520px) {
  .tutorial-nudge > .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Barra crediti / stato rosa (sticky)
   --------------------------------------------------------------------------- */
.creditbar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.creditbar__credits { font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.creditbar__credits b { color: var(--color-primary); }
.creditbar__roles { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rolecount { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--color-text-muted); }
.rolecount b { color: var(--color-text); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   Filtri
   --------------------------------------------------------------------------- */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filters .input, .filters .select { min-width: 0; }
.filters .input { flex: 1 1 180px; }
/* Desktop: i wrapper spariscono dal layout, i controlli restano nella riga flex di .filters */
.filters__sticky, .filters__more { display: contents; }
/* I chip sono l'UNICO controllo del ruolo (prima la tendina gemella li sostituiva su desktop):
   sono link, quindi portano il filtro nella query string e funzionano anche senza JavaScript. */
.filters__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 979px) {
  .filters { display: block; }
  .creditbar { position: static; }
  .filters__sticky {
    display: flex; flex-direction: column; gap: var(--space-2);
    position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    z-index: 60; background: var(--color-bg);
    margin-inline: calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  /* In colonna il flex-grow pensato per la riga desktop stirava la ricerca in verticale
     (fino a 180px): qui l'input torna all'altezza naturale, larghezza piena. */
  .filters__sticky .input { flex: 0 0 auto; }
  .filters__more { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .filters__chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filters__chips::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------------
   Listone — righe giocatore
   --------------------------------------------------------------------------- */
.rolehead { display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2); }
.rolehead h2 { font-family: var(--font-display); letter-spacing: var(--tracking-wide);
  font-size: var(--text-xl); margin: 0; }
/* `:not(.dot)` è il punto: la pastiglia del ruolo è uno `<span>` dentro la testata, quindi questa
   regola (specificità 0,1,1) vinceva su `.dot` (0,1,0) e sostituiva `--color-on-role` con il grigio
   attenuato. Le lettere P/D/C/A finivano a 2,0–3,1:1 sulle proprie tinte, mentre la matrice dei
   token continuava a dire che passavano: misurava i token, non la cascata (audit 2026-08-14). */
.rolehead span:not(.dot) { color: var(--color-text-muted); font-size: var(--text-sm); }

.prow { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.prow:last-child { border-bottom: none; }
.prow__main { flex: 1; min-width: 0; }
.prow__name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__team { font-size: var(--text-xs); color: var(--color-text-muted); }
.prow__pos { font-size: var(--text-xs); color: var(--color-text-subtle); }
.prow__q { font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.prow--owned { background: var(--color-primary-soft); }
.is-hidden { display: none !important; }

/* pallino ruolo piccolo */
.dot { width: 22px; height: 22px; border-radius: var(--radius-sm); display: inline-grid;
  place-items: center; font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--color-on-role); flex: none; }
.dot--P { background: var(--role-por); }
.dot--D { background: var(--role-dif); }
.dot--C { background: var(--role-cen); }
.dot--A { background: var(--role-att); }

/* ---------------------------------------------------------------------------
   Miniatura da tavolo della formazione
   --------------------------------------------------------------------------- */
.pawn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  filter: drop-shadow(0 3px 3px rgba(4, 35, 22, 0.28));
  transition: transform var(--duration-fast), filter var(--duration-fast);
}
.pawn__fig { width: 64px; height: 72px; color: var(--color-home); } /* maglia = currentColor */
.pawn__fig--P { color: var(--role-por); }
.pawn__fig--D { color: var(--role-dif); }
.pawn__fig--C { color: var(--role-cen); }
.pawn__fig--A { color: var(--role-att); }
.pawn__name {
  position: relative; z-index: 1; margin-top: -5px;
  min-width: 58px; max-width: 98px; box-sizing: border-box;
  font-family: var(--font-sans); letter-spacing: 0.01em;
  font-size: 11px; line-height: 21px; font-weight: var(--weight-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  background: rgba(255,255,255,0.96); color: #11221a;
  border: 1px solid rgba(255,255,255,0.76); border-radius: var(--radius-pill);
  box-shadow: 0 2px 5px rgba(4,35,22,0.3); padding: 0 8px;
}

/* ---------------------------------------------------------------------------
   Formazione (PRODUCT-REDESIGN §4.18): campo, maglie, rosa, panchina, tattiche
   --------------------------------------------------------------------------- */

/* Il campo è verde in entrambi i temi: i token --pitch-* sono indipendenti dal tema apposta,
   perché un campo da gioco non cambia colore quando si spegne la luce in salotto. */
.pitch {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, var(--pitch-500) 0 9%, var(--pitch-600) 9% 18%);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--pitch-700);
  --pitch-cols: 4;
}
.pitch__lines { position: absolute; inset: 0; pointer-events: none; }

/* La larghezza della maglia si adatta alla linea più affollata del modulo: con cinque uomini in
   fila le maglie si stringono da sole, invece di sovrapporsi. */
.slot {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; align-content: start; gap: 2px;
  width: min(96px, calc(100% / var(--pitch-cols) - 4px));
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  font: inherit; text-align: center;
}
.slot[disabled] { cursor: default; }
.slot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: var(--radius-sm); }
.jersey { display: block; line-height: 0; }
.jersey__fig { width: 100%; max-width: 58px; height: auto; display: block; }
.slot:hover:not([disabled]) .jersey__fig { transform: translateY(-2px) scale(1.04); }
.jersey__fig { transition: transform var(--duration-fast); }

.slot__name {
  max-width: 100%; padding: 0 6px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.96); color: #11221a;
  font-size: 11px; line-height: 18px; font-weight: var(--weight-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid rgba(11,15,13,0.35);
}
.slot__empty {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  border: 2px dashed rgba(255,255,255,0.65); display: grid; place-items: center;
  color: rgba(255,255,255,0.9); font-size: 9px; font-weight: var(--weight-bold);
  overflow: hidden; padding: 2px;
}
/* Il contenitore del badge esiste sempre, anche vuoto: la maglia non si sposta di un pixel
   quando il malus compare. */
.slot__badge { display: block; min-height: 16px; }
.slot__remove {
  position: absolute; top: -8px; right: 2px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: #8e1b16; color: #fff;
  border: 2px solid #fff; font-size: 16px; font-weight: 800; line-height: 1;
}
.malus {
  display: inline-block; padding: 0 5px; border-radius: var(--radius-sm);
  font-size: 9px; line-height: 15px; font-weight: var(--weight-bold);
  letter-spacing: 0.04em; white-space: nowrap; border: 1px solid rgba(11,15,13,0.45);
}
/* Tinte fisse, non token: la gravità dell'adattamento deve leggersi uguale nei due temi. Sono
   però testo di 8-9 px, quindi valgono comunque AA: il bianco su `#d9781f` stava a 3,15:1. */
.malus--light  { background: #f2c14e; color: #2b2118; }
.malus--medium { background: #a8560c; color: #fff; }
.malus--heavy  { background: #b3261e; color: #fff; }
.slot--target .slot__empty { border-style: solid; background: rgba(255,255,255,0.28); }

/* Sotto i 520 px la maglia si rimpicciolisce: con cinque linee (moduli a trequartisti) l'altezza
   del campo è il vincolo vero, non la larghezza. */
@media (max-width: 520px) {
  .slot { width: min(78px, calc(100% / var(--pitch-cols) - 3px)); }
  .jersey__fig { max-width: 46px; }
  .slot__name { font-size: 10px; line-height: 16px; }
  .slot__empty { width: 30px; height: 30px; }
  .slot__badge { min-height: 14px; }
  .malus { font-size: 8px; line-height: 13px; padding: 0 4px; }
}

/* Passaggi ------------------------------------------------------------------ */
.lineup { display: grid; gap: var(--space-5); }
.lineup__locked, .lineup__announce {
  margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-sm);
}
/* `display: grid` batte sempre lo `[hidden]` dello UA stylesheet (stessa specificità, ma l'origine
   autore vince su quella browser): senza questo override lo stepper non nasconde nulla e i tre
   passaggi restano impilati tutti insieme. Stessa regola già necessaria per `.tguide__main`.
   `min-width: 0` perché la traccia di una griglia non scende sotto il proprio min-content: senza,
   il nome più lungo della panchina allarga l'intero blocco e a 320 px sfonda di 10 px. */
.lstep[hidden] { display: none; }
.lstep { display: grid; gap: var(--space-4); min-width: 0; }
.lstep__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); }
.lstep__n {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-brand);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.lstep__nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.stepnav { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.stepnav__btn {
  flex: none; min-height: var(--tap-min); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-muted); font: inherit;
  font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
}
.stepnav__btn[aria-current="step"] {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-brand);
  font-weight: var(--weight-bold);
}

/* Selettore dei moduli: scaffale orizzontale, tutti e otto raggiungibili col pollice. */
.modulebar { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.modulebar__chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: 72px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm);
  font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; user-select: none;
}
.modulebar__radio:checked + .modulebar__chip {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-on-brand); font-weight: var(--weight-bold);
}
.modulebar__radio:focus-visible + .modulebar__chip { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Campo e rosa: griglia fluida, il campo assorbe lo spazio, la rosa resta leggibile. */
.lineup-grid { display: grid; gap: var(--space-4); align-items: start; min-width: 0; }
.lineup-grid__pitch { min-width: 0; display: grid; gap: var(--space-3); }
.lineup-grid__squad { min-width: 0; display: grid; gap: var(--space-2); }
.lineup__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.squad__title { margin: 0; font-size: var(--text-base); }
.filterbar { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-1); }
.filterbar__chip[aria-pressed="true"] {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-brand);
}

/* Scaffale della rosa: orizzontale su mobile (sempre visibile accanto al campo), colonna su
   desktop. Mai nascosto dietro un passaggio non evidente. */
.shelf {
  display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}
/* Il filtro per reparto nasconde le schede con `hidden`: senza questo override il `display: grid`
   qui sotto lo annulla e i chip non filtrano niente (stessa famiglia di `.lstep[hidden]`). */
.pcard[hidden] { display: none; }
.pcard {
  flex: none; scroll-snap-align: start; width: 132px; min-height: var(--tap-min);
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: inherit; font: inherit; cursor: grab; user-select: none;
}
.pcard:active { cursor: grabbing; }
.pcard.is-placed { opacity: 0.45; }
.pcard.is-selected { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.pcard__name { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pcard__team { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.pcard__micros { display: flex; gap: 3px; flex-wrap: wrap; }
.rbadge {
  display: inline-block; padding: 0 5px; border-radius: var(--radius-sm);
  font-size: 10px; line-height: 16px; font-weight: var(--weight-bold);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.rbadge--sys { background: var(--color-surface-2); font-style: italic; }

/* Selettore contestuale dello slot. È un dialogo vero: compare soltanto dopo il tap sul posto
   libero e non trasforma la rosa laterale in un filtro implicito. Su telefono diventa un foglio
   dal basso, sopra la navigazione; su desktop resta compatto al centro del campo. */
.slot--choosing { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.slot-picker {
  width: min(520px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px));
  margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.slot-picker::backdrop { background: rgba(3, 22, 17, 0.72); backdrop-filter: blur(2px); }
.slot-picker__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.slot-picker__eyebrow {
  margin: 0 0 var(--space-1); color: var(--color-accent); font-size: var(--text-xs);
  font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase;
}
.slot-picker__title { margin: 0; font-size: var(--text-lg); }
.slot-picker__hint { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.slot-picker__close {
  display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); flex: none;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-xl);
  cursor: pointer;
}
.slot-picker__list { display: grid; gap: var(--space-2); max-height: min(520px, 62dvh); overflow-y: auto; padding: var(--space-3); }
.slot-picker__candidate {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 68px; padding: var(--space-3); text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text); font: inherit; cursor: pointer;
}
.slot-picker__candidate:hover, .slot-picker__candidate:focus-visible {
  border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2));
}
.slot-picker__identity { display: grid; gap: 2px; min-width: 0; }
.slot-picker__meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.slot-picker__fit { flex: none; }
.slot-picker__fit--full { background: var(--color-primary); color: var(--color-text-on-brand); }
.slot-picker__empty { margin: 0; padding: var(--space-4); color: var(--color-text-muted); text-align: center; }

@media (max-width: 600px) {
  .slot-picker { width: 100%; max-width: none; max-height: calc(100dvh - 92px); margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .slot-picker__head { padding: var(--space-3); }
  .slot-picker__list { max-height: 58dvh; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .slot-picker__candidate { min-height: 74px; }
}

/* Panchina: una sola graduatoria, senza divisioni di reparto. */
.benchlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); min-width: 0; }
.benchrow {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); min-width: 0;
  padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface-2); cursor: grab;
}
.benchrow.is-extra { display: none; }
.benchrow__pos { font-family: var(--font-mono); color: var(--color-text-muted); width: 2ch; text-align: right; }
.benchrow__name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benchrow__moves { display: flex; gap: 2px; }
.iconbtn {
  display: grid; place-items: center; min-width: var(--tap-min); min-height: var(--tap-min);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer;
}
.benchrow__prio .input { width: 4.5rem; }
.benchlist__reserve {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text-muted); font-size: var(--text-sm);
}

/* Assegnazione da menu. SENZA JavaScript è l'interfaccia della formazione: sempre visibile e
   aperta, niente da scoprire. CON JavaScript il campetto la sostituisce e il blocco esce dal
   flusso (i <select> restano nel form e continuano a viaggiare nel POST): un solo modo di
   schierare per volta, mai due copie dello stesso campo una sotto l'altra. */
.lineup-fallback__title { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.lineup-fallback__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--space-2); }
.has-js .lineup-fallback { display: none; }

/* Tattiche: scelta singola, una riga di spiegazione per capire cosa cambia davvero. */
.tacticlist { display: grid; gap: var(--space-2); }
.tacticlist__card {
  display: grid; gap: 2px; padding: var(--space-3); cursor: pointer;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.tacticlist__radio:checked + .tacticlist__card {
  border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.tacticlist__radio:focus-visible + .tacticlist__card { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tacticlist__name { font-weight: var(--weight-bold); }
.tacticlist__hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.tacticlist__weakness { padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); }
.tacticlist__weakness::before { content: "Punto debole · "; color: var(--color-warning); font-weight: var(--weight-semibold); }
.tacticlist__advice { margin: 0; display: flex; align-items: center; gap: var(--space-4); max-width: 760px; font-size: var(--text-sm); color: var(--color-text-muted); }
.tacticlist__advice p { margin: 0; }
/* Qui parla il narratore: non un segnale minuscolo né un busto decorativo. Il close da 112 px
   usa un fuoco più stretto del ritratto standard per lasciare quasi soltanto testa e collo; il
   tondo scuro rende il taglio intenzionale e identico nei due temi senza modificare l'artwork. */
.tacticlist__portrait {
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
  background: var(--night-900); box-shadow: var(--shadow-md);
  --art-zoom: 2.3;
}

.recap { display: grid; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.recap__title { margin: 0; font-size: var(--text-base); }
.recap__list { display: grid; gap: var(--space-1); margin: 0; }
.recap__list > div { display: flex; gap: var(--space-2); justify-content: space-between; font-size: var(--text-sm); }
.recap__list dt { color: var(--color-text-muted); margin: 0; }
.recap__list dd { margin: 0; font-weight: var(--weight-medium); text-align: right; }
.recap__cta { width: 100%; }

/* Simulazione preparatoria (§4.9): terza azione del form, separata dalla conferma da una riga di
   respiro e da un pulsante secondario — deve leggersi come «prova», non come «ufficializza». */
.recap__sim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.recap__sim-hint { flex-basis: 100%; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.badge--premium { border: 1px solid var(--color-border); color: var(--color-text-muted); }

/* CTA del tutorial: fascia separata, secondaria per gerarchia rispetto alla conferma. */
.tutorial-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tutorial-cta__icon { font-size: var(--text-2xl); }
.tutorial-cta__body { flex: 1; min-width: 200px; }
.tutorial-cta__title { margin: 0; font-weight: var(--weight-semibold); }
.tutorial-cta__lead { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Progressive enhancement: i controlli solo-JS restano nascosti finché il JS non si presenta,
   e i controlli di ripiego spariscono quando non servono più. */
.js-only { display: none; }
.has-js .js-only { display: inline-flex; }
/* …ma `hidden` resta più forte di «c'è il JavaScript»: «Mostra tutta la panchina» sparisce quando
   non c'è nulla da espandere, invece di restare lì a non fare niente. */
.has-js .js-only[hidden] { display: none; }
.has-js .benchrow__prio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 880px) {
  .lineup { max-width: 1240px; margin-inline: auto; }
  .lineup-grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 360px); gap: var(--space-5); }
  .shelf { flex-direction: column; overflow-x: visible; max-height: 62vh; overflow-y: auto; }
  .pcard { width: auto; }
  .benchrow.is-extra:nth-child(-n+10) { display: flex; }
  .recap__cta { width: auto; justify-self: start; }
}

.toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.flash { margin-bottom: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .jersey__fig { transition: none; }
  .slot:hover:not([disabled]) .jersey__fig { transform: none; }
}

/* ---------------------------------------------------------------------------
   Mercato a lotto — telaio (PRODUCT-REDESIGN §4.8)

   MOBILE (riferimento 390 CSS px, fluido fino a 320): una vista alla volta fra Listone e Rosa,
   scelta da un commutatore che è fatto di LINK — quindi funziona senza JavaScript, conserva i
   filtri e sopravvive a un reload. Il cassetto del lotto resta sempre raggiungibile, appoggiato
   sopra la bottom navigation e mai sotto di essa.

   DESKTOP (≥980px): tre colonne — rosa, listone, riepilogo persistente. Il commutatore sparisce,
   perché le viste convivono, e non resta il contenitore stretto pensato per il telefono.
   --------------------------------------------------------------------------- */
.market-switch { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.market-switch__item {
  flex: 1 1 0; min-width: 0; min-height: var(--tap-min);
  display: grid; place-items: center; padding: 0 var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lo stato attivo non è affidato al solo colore: c'è anche il filetto e il peso del testo. */
.market-switch__item.is-active {
  background: var(--color-surface-2); color: var(--color-text);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}
@media (min-width: 980px) { .market-switch { display: none; } }

.market-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.market-grid__list, .market-grid__squad, .market-grid__batch { min-width: 0; }

@media (max-width: 979px) {
  .market-grid--listone .market-grid__squad { display: none; }
  .market-grid--rosa .market-grid__list { display: none; }
  /* Il cassetto si appoggia SOPRA la bottom navigation, non sotto: `--bottomnav-h` include già
     la safe area, quindi su iPhone non finisce dietro la barra di sistema. */
  .market-grid__batch {
    position: sticky; bottom: var(--bottomnav-h); z-index: 90;
    margin-inline: calc(var(--space-2) * -1);
  }
}

@media (min-width: 980px) {
  .market-grid { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(300px, 360px); align-items: start; }
  .market-grid__squad, .market-grid__batch { position: sticky; top: calc(var(--topbar-h) + 64px); }
}

/* Cassetto del lotto: su mobile è un `<details>` vero (apre e chiude senza JavaScript), su
   desktop il pannello è sempre aperto e la maniglia sparisce. */
.lotto-drawer {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.lotto-drawer__handle {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-4);
  background: var(--color-surface-2); cursor: pointer; list-style: none;
  font-weight: var(--weight-bold);
}
.lotto-drawer__handle::-webkit-details-marker { display: none; }
.lotto-drawer__badge {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--color-primary);
  color: var(--color-text-on-brand); font-family: var(--font-mono); font-size: var(--text-sm);
}
.lotto-drawer__hint {
  margin-left: auto; font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
/* `overscroll-behavior: contain`: scorrendo dentro il cassetto non si trascina la pagina sotto,
   che sul telefono è il modo più facile per perdere il punto in cui si era. */
.lotto-drawer__body {
  padding: var(--space-3) var(--space-4); max-height: 55vh; overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 980px) {
  .lotto-drawer__handle { display: none; }
  .lotto-drawer__body { max-height: none; }
}

.lotto__title {
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
  font-family: var(--font-display); letter-spacing: var(--tracking-wide); font-size: var(--text-lg);
}
.lotto__moves {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--color-surface-2);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted);
}
.lotto__note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.lotto__note--rebuild {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); color: var(--color-text);
}
.lotto__figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2); margin: 0 0 var(--space-3);
}
.lotto__figures dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.lotto__figures dd {
  margin: 0; font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-lg); font-variant-numeric: tabular-nums;
}
.lotto__figures dd.is-negative { color: var(--color-danger-ink); }

.lotto__departments { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.lotto__dept {
  display: flex; align-items: baseline; gap: 4px;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); font-size: var(--text-xs);
}
/* Fuori intervallo: non solo il colore — il bordo cambia spessore e il conteggio va in grassetto. */
.lotto__dept--off {
  border-color: var(--color-danger); border-width: 2px; color: var(--color-danger-ink);
  font-weight: var(--weight-bold);
}
.lotto__dept-count { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.lotto__dept-range { color: var(--color-text-subtle); }

.lotto__section { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.lotto__list { margin: 0; padding: 0; list-style: none; }
/* Riga del lotto a due piani: chi/che cosa sopra, quanto sotto. In fila su una riga sola i numeri
   con segno finivano affiancati e indistinguibili («+1 +0»), che è il difetto §1.12. */
.lotto__move {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  grid-template-areas: "testa    azione"
                       "grandezze azione";
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.lotto__move:last-child { border-bottom: none; }
.lotto__move-head { grid-area: testa; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* Tipo di movimento: parola intera, non solo il segno del prezzo. */
.lotto__move-kind {
  flex: none; padding: 1px var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.lotto__move--sell .lotto__move-kind { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); }
.lotto__move--buy .lotto__move-kind { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.lotto__move-name { flex: 1 1 8ch; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lotto__move-remove { grid-area: azione; align-self: center; flex: none; }
/* Ogni numero accanto al proprio nome, coppie in fila che vanno a capo: nessuna coppia di valori
   con segno si tocca senza un'etichetta in mezzo, e nel cassetto a 375px le quattro grandezze di
   una cessione stanno in due righe invece che in quattro. */
.lotto__move-figures {
  grid-area: grandezze; margin: 0;
  display: flex; flex-wrap: wrap; gap: 2px var(--space-3);
}
.lotto__move-figures > div { display: flex; align-items: baseline; gap: 4px; }
.lotto__move-figures dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.lotto__move-figures dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.credit-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lotto__empty, .lotto__disclaimer { font-size: var(--text-sm); color: var(--color-text-muted); }
.lotto__totals { font-size: var(--text-sm); margin: var(--space-2) 0; }
.lotto__errors {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  color: var(--color-danger-ink); font-size: var(--text-sm);
}
.lotto__error {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));
  color: var(--color-text); font-size: var(--text-sm);
}
.lotto__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 var(--space-2); }
.lotto__link { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

/* `--color-success-INK` come fa già `.is-loss` con `--color-danger-ink`: le varianti «ink» esistono
   proprio per il testo sulle superfici, e `--color-success` grezzo dava 3,4:1 nel tema scuro sul
   delta dei crediti (16px bold: non è testo grande, quindi AA chiede 4,5:1). L'asimmetria fra le
   due classi gemelle era una svista. */
.is-gain { color: var(--color-success-ink); }
.is-loss { color: var(--color-danger-ink); }

.market-closed {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.rolecount--off b { color: var(--color-danger-ink); font-weight: var(--weight-bold); }
.rolecount__range { color: var(--color-text-subtle); font-size: var(--text-xs); margin-left: 2px; }
.rosapanel__rolen--off { color: var(--color-danger-ink); font-weight: var(--weight-bold); }
.rosapanel__player--leaving .rosapanel__pname { text-decoration: line-through; color: var(--color-text-muted); }
.rosapanel__form { flex: none; }
.prow--in-batch { box-shadow: inset 3px 0 0 var(--color-accent); }
.prow__action { flex: none; }
.surface-link { margin: var(--space-4) 0; font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Squadra → Transazioni (libro mastro)
   --------------------------------------------------------------------------- */
.ledger-figures {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) { .ledger-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger-figure {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ledger-figure__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.ledger-figure__value { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.ledger-figure__hint { font-size: var(--text-xs); color: var(--color-text-subtle); }

.ledger-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ledger-empty { color: var(--color-text-muted); }
.ledger-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ledger-entry {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ledger-entry__head {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  min-height: var(--tap-min); padding: var(--space-2) var(--space-4);
  cursor: pointer; list-style: none;
}
.ledger-entry__head::-webkit-details-marker { display: none; }
/* Il titolo è la prima cosa che si legge; l'ID è l'ultima e non pesa come un'intestazione. */
.ledger-entry__title { flex: 1 1 18ch; min-width: 0; font-weight: var(--weight-semibold); }
.ledger-entry__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ledger-entry__moves { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 639px) {
  /* A 375px il titolo prende la sua riga e le informazioni secondarie scorrono sotto. */
  .ledger-entry__title { flex-basis: 100%; }
}
.ledger-entry__delta { font-family: var(--font-mono); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ledger-entry__body { padding: 0 var(--space-4) var(--space-3); }
.ledger-entry__note, .ledger-entry__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
/* La tabella scorre DENTRO il suo contenitore: la pagina non scorre mai in orizzontale. */
.ledger-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ledger-table th, .ledger-table td { padding: var(--space-1) var(--space-2); text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.ledger-table th[scope="row"] { font-weight: var(--weight-medium); white-space: normal; }
.ledger-table__team { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.ledger-table .is-num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

.ledger-past { margin-top: var(--space-5); }
.ledger-past h2 { font-family: var(--font-display); letter-spacing: var(--tracking-wide); font-size: var(--text-xl); }
.ledger-past__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ledger-past__list li { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.ledger-past__season { font-family: var(--font-mono); font-weight: var(--weight-bold); }

.rosapanel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rosapanel__sum {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none; background: var(--color-surface-2);
  font-weight: var(--weight-bold);
}
.rosapanel__sum::-webkit-details-marker { display: none; }
.rosapanel__sum::after { content: "▾"; color: var(--color-text-muted); transition: transform var(--duration-fast); }
.rosapanel[open] .rosapanel__sum::after { transform: rotate(180deg); }
.rosapanel__title { font-family: var(--font-display); letter-spacing: var(--tracking-wide); font-size: var(--text-lg); }
.rosapanel__count { font-family: var(--font-mono); color: var(--color-primary); }
.rosapanel__body { padding: var(--space-3) var(--space-4); max-height: 60vh; overflow-y: auto; }
.rosapanel__todo { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
  margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.rosapanel__role { display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1); }
.rosapanel__role strong { flex: 1; font-size: var(--text-sm); }
.rosapanel__rolen { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.rosapanel__player { display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 0; border-bottom: 1px solid var(--color-border); }
.rosapanel__pname { flex: 1; min-width: 0; font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rosapanel__empty { font-size: var(--text-xs); color: var(--color-text-subtle); padding: 2px 0; }
/* La cessione dalla rosa non è più una ✕ da 24 px ma un pulsante con una parola sopra («Cedi»):
   eredita il bersaglio minimo di `.btn--sm` e non ha bisogno di regole proprie. Con il mercato a
   lotto, del resto, non è nemmeno più un'azione distruttiva: aggiunge un'intenzione a una bozza,
   e la rosa cambia solo alla conferma. */

/* ---------------------------------------------------------------------------
   Paginazione (partials/pagination.blade.php)
   --------------------------------------------------------------------------- */
.listone-count { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-4);
}
.pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-weight: var(--weight-semibold); text-decoration: none;
}
.pager__link:hover { background: var(--color-surface-2); }
.pager__link--off { opacity: .45; pointer-events: none; }
.pager__status { color: var(--color-text-muted); font-size: var(--text-sm); font-family: var(--font-mono); }
/* Su telefono i due bersagli restano affiancati e l'indicatore va sotto: in riga unica il testo
   spingeva "Successivi" a capo da solo, con mezza riga vuota accanto a "Precedenti". */
@media (max-width: 520px) {
  .pager__status { order: 3; width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Campo: evidenzia le caselle compatibili quando selezioni un giocatore
   --------------------------------------------------------------------------- */
.slot--target .slot__empty {
  border-color: #fff; background: rgba(255,255,255,0.28);
  animation: slotpulse 1.1s ease-in-out infinite;
}
@keyframes slotpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  50%     { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.pool__item.sel { background: var(--color-primary-soft); }
.placehint--active { color: var(--color-primary) !important; font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------------------
   Drag & Drop: stati visuali durante il trascinamento
   --------------------------------------------------------------------------- */
.drag-ghost {
  position: fixed; pointer-events: none; z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-text-on-brand);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-pop); user-select: none;
  transform: translate(-50%, -50%);
}

.slot--droptarget .slot__empty {
  border-color: #fff; border-style: solid; background: rgba(255,255,255,0.35);
  animation: slotdrag 0.6s ease-in-out infinite;
}
@keyframes slotdrag {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  50%     { box-shadow: 0 0 0 10px rgba(255,255,255,0.1); }
}

.bench--droptarget {
  border: 2px dashed var(--color-primary) !important; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-2)) !important;
}

/* ---------------------------------------------------------------------------
   Ritorno al punto dell'operazione (audit §1.12)

   Il POST di mercato rimanda a un frammento: senza `scroll-margin-top` il browser porta la riga
   ESATTAMENTE al bordo alto della finestra, cioè sotto la topbar sticky e — su mobile — sotto la
   barra dei filtri, che la coprirebbero entrambe. Il margine è dichiarato una volta qui e vale per
   ogni bersaglio di ritorno.

   `outline: none` NON si usa: questi elementi ricevono il focus della tastiera dopo il salto, e
   toglierlo lascerebbe l'utente senza sapere dove si trova. Il contorno è quello di sistema.
   --------------------------------------------------------------------------- */
.prow, .rosapanel__player, .role-section, .lotto, .flash-region { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
@media (min-width: 980px) {
  /* Su desktop sotto la topbar resta appesa anche la barra crediti (~61px): misurata a pagina
     stabile, il bordo basso sta a 117px, e senza questo margine la riga di ritorno finisce
     esattamente sotto di lei. Su mobile non serve: lì la barra crediti è statica e quella dei
     filtri smette di essere sticky appena il form dei filtri esce dallo schermo. */
  .prow, .rosapanel__player, .role-section, .lotto, .flash-region { scroll-margin-top: calc(var(--topbar-h) + 76px); }
}
/* Il bersaglio del ritorno si segnala anche a colpo d'occhio, non solo con lo scorrimento. */
.prow:target, .rosapanel__player:target { box-shadow: inset 0 0 0 2px var(--color-primary); border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------------
   Rosa → Voti oggettivi
   --------------------------------------------------------------------------- */
.voti-toolbar { margin-bottom: var(--space-4); }
/* Perché la giornata mostrata non ha dati: è una spiegazione, non un errore — tono neutro. */
.voti-note {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md); background: var(--color-surface-2);
  color: var(--color-text-muted); font-size: var(--text-sm);
}