/* ============================================================
   Fanta Rosa — la vetrina della squadra
   ============================================================
   Era una card bianca con un filetto blu a sinistra, il nome, "Presidente:"
   e un riquadro vuoto con scritto "Nessuna maglia": la pagina che dovrebbe
   raccontare l'identita' di una squadra non ne mostrava nessuna.

   Adesso apre con la fascia colorata dai colori del presidente, esattamente
   come le pagine delle squadre di Serie A: stesso `--band-1` / `--band-ink`,
   stesso calcolo di contrasto. La rosa e' una tabella con le sue intestazioni
   e gli stemmi dei club, e la panchina e' una fila di carte che scorre,
   invece di ventitre righe impilate sotto il campo.
   ============================================================ */

.fr-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* I pannelli si appoggiano al fondo invece di essere ritagliati da un bordo:
   bordo piu' tenue, ombra morbida, e l'ombra la portano solo loro. */
.fr-body-grid .fw-panel {
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .05);
}

.fr-body-grid .fw-panel-head {
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-3);
    padding-top: var(--sp-3);
}

.fr-body-grid .fw-panel-head h2 {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Era una casella senza etichetta sopra la fascia: sembrava un campo
   dimenticato li'. La vedono solo admin e spettatori; un presidente ha una
   squadra sola e non gli serve. */
.fr-team-picker {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 280px;
}

/* ---- La fascia ---------------------------------------------------------
   Occupava molto e diceva poco. Adesso e' piu' bassa di circa un quinto, il
   fondo scende leggermente verso il basso invece di essere piatto, e sopra
   corre un filetto chiaro di un pixel: da' lo stacco senza bisogno di un
   bordo. Il gradiente e' quasi invisibile di proposito - deve sembrare
   profondita', non decorazione. */
.fr-band {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 42%),
                      linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18));
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-md);
    overflow: hidden;
    padding-bottom: var(--sp-3);
    padding-top: var(--sp-3);
    position: relative;
}

.fr-band-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
}

.fr-band-id {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    min-width: 0;
}

/* L'avatar prende un anello del colore d'accento, quando c'e': e' l'unico
   punto in cui il terzo colore della squadra fa qualcosa di visibile. */
.fr-band-avatar .avatar {
    border: 3px solid var(--fr-accent, rgba(255, 255, 255, .35));
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.fr-band-testo { min-width: 0; }

/* Il nome non ha bisogno di gridare: la fascia lo isola gia'. */
.fr-band .fw-band-title {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: var(--lh-tight);
    margin: 0;
}

.fr-band-pres {
    align-items: center;
    display: flex;
    font-size: var(--fs-base);
    gap: var(--sp-2);
    margin: 2px 0 0;
    opacity: .88;
}

.fr-band-manca { font-style: italic; opacity: .7; }

/* Il motto: la riga che il presidente si sceglie. In corsivo e piu' piccola
   del nome, perche' e' un sottotitolo, non un secondo titolo. */
.fr-band-motto {
    font-size: var(--fs-sm);
    font-style: italic;
    margin: var(--sp-1) 0 0;
    opacity: .74;
}

.fr-band-motto-vuoto {
    background: none;
    border: 1px dashed currentColor;
    border-radius: var(--r-xs);
    color: inherit;
    cursor: pointer;
    display: inline-block;
    opacity: .55;
    padding: 1px var(--sp-2);
}

.fr-band-motto-vuoto:hover { opacity: .9; }

.fr-band-edit {
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: var(--r-xs);
    color: inherit;
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: 1;
    padding: 4px 6px;
}

.fr-band-edit:hover { background: rgba(255, 255, 255, .28); }
.fr-band-edit:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.fr-band-destra {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

.fr-band-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Tre riquadri appena accennati sul navy, non tre colonne divise da un
   filetto: il numero e' il protagonista, l'etichetta lo accompagna. */
.fr-band-kpi {
    align-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-sm);
    display: flex;
    gap: var(--sp-2);
    min-width: 128px;
    padding: var(--sp-2) var(--sp-3);
}

.fr-band-kpi-ico {
    align-items: center;
    color: var(--fr-accent, var(--brand));
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    justify-content: center;
}

.fr-band-kpi-testo { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.fr-band-kpi .fw-micro { color: inherit; font-weight: 500; opacity: .62; }

.fr-band-val {
    font-size: var(--fs-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.fr-band-sub { font-size: var(--fs-micro); opacity: .62; }
.fr-band-kpi-vuoto .fr-band-val { font-size: var(--fs-lg); opacity: .6; }

/* ---- Maglia e comandi d'identita' -------------------------------------- */
/* La maglia e i suoi comandi sono una cosa sola: prima il riquadro stava
   sopra e i due bottoni sotto, staccati, e occupavano il doppio dell'altezza. */
.fr-band-identita {
    align-items: stretch;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    /* Larghezza dettata dalla barra sotto, non dalla miniatura: a 92px
       "Crea maglia" sporgeva di 5px e perdeva l'ultima lettera. */
    width: 116px;
}

.fr-maglia-thumb {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    height: 74px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.fr-maglia-canvas { height: 100%; object-fit: contain; width: 100%; }

.fr-maglia-placeholder {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: var(--fs-micro);
    gap: 2px;
    opacity: .7;
    text-align: center;
}

.fr-maglia-placeholder i { font-size: 1.4rem; }

.fr-band-azioni {
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
}

.fr-band-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: 10px;
    font-weight: 600;
    gap: 3px;
    justify-content: center;
    opacity: .75;
    padding: 5px 4px;
    text-decoration: none;
    white-space: nowrap;
}

.fr-band-btn:last-child { flex: 1 1 auto; min-width: 0; }

/* Se un'etichetta futura fosse ancora piu' lunga, si accorcia con i puntini
   invece di finire sotto il bordo. */
.fr-band-btn > span,
.fr-band-btn { overflow: hidden; text-overflow: ellipsis; }
.fr-band-btn:first-child { border-right: 1px solid rgba(255, 255, 255, .1); }
.fr-band-btn:hover { background: rgba(255, 255, 255, .12); color: inherit; opacity: 1; }
.fr-band-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* ---- Le due colonne ---------------------------------------------------- */
.fr-body-grid {
    align-items: start;
    display: grid;
    gap: var(--sp-5);
    /* Il campo e' il protagonista: si prende piu' spazio della rosa. */
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
}

@media (max-width: 1099px) {
    .fr-body-grid { grid-template-columns: minmax(0, 1fr); }
}

.fr-roster-col,
.fr-top11-col { min-width: 0; }

.fr-panel-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: space-between;
}

.fr-panel-sub { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---- La rosa, a tabella ------------------------------------------------- */
.fr-tabella-wrap { overflow-x: auto; }
.fr-tabella { width: 100%; }

.fr-tabella thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* La testata di reparto e' una riga della tabella, non un titolo fuori:
   cosi' le colonne restano allineate lungo tutta la rosa. Niente fascia
   piena: uno stacco d'aria sopra e un filetto sottile bastano a dividere. */
.fr-gruppo-testa th {
    background: transparent;
    border-bottom: 1px solid var(--line);
    border-top: 0;
    padding: var(--sp-5) var(--sp-3) var(--sp-2);
    text-align: left;
}

.fr-gruppo:first-of-type .fr-gruppo-testa th { padding-top: var(--sp-3); }

.fr-gruppo-nome {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 4px;
    text-transform: none;
}

.fr-gruppo-n {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    margin-left: 4px;
    padding: 1px 7px;
}

/* Righe piu' alte: la rosa era un foglio di calcolo, e con ventotto nomi
   l'occhio non trovava piu' la riga. */
.fr-row { cursor: pointer; }
.fr-tabella tbody td { padding-bottom: var(--sp-3); padding-top: var(--sp-3); }
.fr-tabella tbody tr:hover td { background: var(--bg-sunken); }

/* Il selezionato: un azzurro-grigio appena percettibile, piu' un filetto
   d'accento sul bordo sinistro che lo ancora senza colorare tutta la riga. */
.fr-row.fr-selected td { background: color-mix(in srgb, var(--navy) 6%, var(--bg-surface)); }
.fr-row.fr-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

.fr-nome-wrap {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

.fr-nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il nome e' l'unica colonna di testo lungo: si prende lo spazio che avanza,
   e le altre restano larghe quanto il loro contenuto. Con una percentuale
   fissa i nomi finivano tutti a puntini gia' a 1440px. */
.fr-c-nome { max-width: 0; text-align: left; width: 100%; }
.fr-c-squadra { text-align: left; white-space: nowrap; }
.fr-tabella :is(.fr-c-fv, .fr-c-prob, .fr-c-stato, .fr-c-valore, .fr-c-cmp) { white-space: nowrap; width: 1%; }
.fr-tabella :is(th, td) { padding-left: var(--sp-2); padding-right: var(--sp-2); }

.fr-c-squadra .fr-crest-wrap {
    display: inline-flex;
    margin-right: 5px;
    vertical-align: -3px;
}

.fr-crest { height: 16px; object-fit: contain; width: 16px; }

.fr-crest-fallback {
    align-items: center;
    border-radius: 3px;
    color: #fff;
    display: flex;
    font-size: 8px;
    font-weight: 700;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.fr-squadra { color: var(--ink-2); font-size: var(--fs-sm); }

/* "FV atteso" per esteso reggeva da solo una colonna da novanta pixel per un
   numero di quattro caratteri: su telefono l'intestazione si accorcia, il
   titolo per esteso resta nel `title`. */
.fr-th-corto { display: none; }
.fr-c-fv { font-weight: 700; }
.fr-c-prob { color: var(--ink-2); }
.fr-c-stato { text-align: left; white-space: nowrap; }
.fr-c-valore { color: var(--ink-2); }
.fr-c-cmp { width: 34px; }

.fr-cmp-btn {
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-3);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1.5;
    padding: 0 6px;
}

.fr-cmp-btn:hover { background: var(--bg-raised); color: var(--ink-1); }
.fr-cmp-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- I numeri della formazione ----------------------------------------- */
.fr-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.fr-vista { flex: 1 1 auto; }
.fr-vista .fw-seg-item { flex: 1 1 0; }
.fr-modulo { width: auto; }

.fr-formazione-summary { margin-bottom: var(--sp-3); }

/* Cinque riquadri, non una striscia unica divisa a occhio. I numeri sono
   quello che si guarda: grandi e tabulari. Le etichette scendono a
   microtesto, perche' si leggono una volta sola. */
.fr-kpis {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.fr-kpi {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
}

.fr-kpi .fw-micro { color: var(--ink-3); font-weight: 500; }

.fr-kpi-val {
    color: var(--ink-1);
    font-size: var(--fs-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.fr-kpi-sub { color: var(--ink-3); font-size: var(--fs-micro); }

.fr-avviso {
    align-items: center;
    color: var(--caution-ink);
    display: flex;
    font-size: var(--fs-sm);
    gap: 6px;
    margin: var(--sp-2) 0 0;
}

.fr-alternatives {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}

.fr-alt-chip {
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--fs-micro);
    padding: 2px 9px;
}

.fr-alt-chip:hover { background: var(--bg-raised); color: var(--ink-1); }
.fr-alt-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.fr-field-hint {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    line-height: var(--lh-base);
    margin: var(--sp-2) 0 0;
}

/* ---- La panchina --------------------------------------------------------
   Era una barra orizzontale che scorreva: diciassette giocatori dentro una
   finestra da cinque, e per vedere gli ultimi bisognava trascinare. Adesso e'
   una griglia che va a capo - ci stanno tutti, si leggono insieme, e l'ordine
   di ingresso si segue con l'occhio invece che con il dito. */
.fr-bench { margin-top: var(--sp-4); }

.fr-bench-head {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.fr-bench-title {
    align-items: baseline;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-micro);
    font-weight: 600;
    gap: var(--sp-2);
    letter-spacing: var(--tracking-micro);
    margin: 0;
    text-transform: uppercase;
}

.fr-bench-title .fw-micro { font-weight: 400; letter-spacing: 0; opacity: .8; text-transform: none; }

.fr-bench-griglia {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

.fr-bench-card {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid;
    gap: var(--sp-1) var(--sp-2);
    grid-template-columns: auto auto minmax(0, 1fr);
    /* Lo spazio a destra e' per lo stemma, che sta nell'angolo della scheda. */
    padding: var(--sp-2) 30px var(--sp-2) var(--sp-2);
    position: relative;
    text-align: left;
    transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.fr-bench-card:hover { background: var(--bg-raised); border-color: var(--navy); }
.fr-bench-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* L'ordine di ingresso e' il dato che ordina la panchina: sta per primo. */
.fr-bench-ordine {
    align-items: center;
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    display: flex;
    flex-shrink: 0;
    font-size: var(--fs-micro);
    font-weight: 700;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.fr-bench-face { flex-shrink: 0; position: relative; }

/* Stessa proporzione della carta in campo: il ritratto non si schiaccia. */
.fr-bench-face img {
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    display: block;
    height: 42px;
    object-fit: cover;
    object-position: top center;
    width: 32px;
}

/* Lo stemma del club nell'angolo in alto a destra della scheda, come sulle
   carte in campo. Prima era appiccicato alla foto, che e' un'altra cosa. */
.fr-bench-crest {
    line-height: 0;
    position: absolute;
    right: 6px;
    top: 6px;
}

.fr-bench-crest .fr-bench-crest-img,
.fr-bench-crest .fr-bench-crest-img-fallback {
    background: transparent;
    border: 0;
    border-radius: 50%;
    height: 20px;
    object-fit: contain;
    width: 20px;
}

.fr-bench-crest .fr-bench-crest-img-fallback {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 7px;
    font-weight: 700;
    justify-content: center;
}

/* Il badge scende a cavallo del bordo inferiore del ritratto: a -4px copriva
   12px di foto, cioe' il mento. A -10px ne copre 6 e si legge come
   un'etichetta appesa alla foto, non come una toppa sopra. */
.fr-bench-face .role-badge {
    bottom: -10px;
    font-size: 11px;
    left: 50%;
    line-height: 1.5;
    padding: 0 6px;
    position: absolute;
    transform: translateX(-50%);
}

.fr-bench-testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.fr-bench-nome {
    color: var(--ink-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-bench-numeri {
    align-items: center;
    color: var(--ink-3);
    display: flex;
    font-size: var(--fs-micro);
    gap: 5px;
}

.fr-bench-numeri strong { color: var(--ink-1); font-size: var(--fs-sm); }

/* Casa/trasferta accanto al consiglio, come sulle carte in campo: sono le
   due cose che si leggono insieme per decidere. */
.fr-bench-tip {
    align-items: center;
    display: flex;
    gap: 4px;
    /* Incolonnata con il nome e i numeri, non a filo del bordo sinistro:
       prima partiva sotto il numero d'ingresso e sfalsava la lettura. */
    grid-column: 3 / -1;
    justify-self: start;
    max-width: 100%;
    min-width: 0;
}

.fr-bench-tip .fw-diff { flex-shrink: 0; }
.fr-bench-tip .etichetta-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Schermo stretto --------------------------------------------------- */
@media (max-width: 767px) {
    /* Sul campo stretto la carta scende a 85px utili e "Pellegrino M." ne
       chiede 78: un punto in meno riporta il margine dove stava. */
    .fr-top11-col .t11-ricca .top11-player-name { font-size: 14px; }

    /* Lo scudetto scende con la carta: a 30px di largo, su una figurina da
       ottanta, finiva in mezzo alla faccia invece che sulla spalla. */
    .t11-crest { right: 4px; top: 6px; }
    .t11-crest .t11-crest-img,
    .t11-crest .t11-crest-img-fallback { height: 28px; width: 21px; }
    .t11-crest .t11-crest-img-fallback { height: 21px; margin: 3.5px 0; }

    /* Il piede su una riga sola: il segno e la pillola andavano a capo e le
       carte della stessa fila finivano di tre altezze diverse. */
    .fr-top11-col .t11-piede { flex-wrap: nowrap; gap: 3px; }
    .fr-top11-col .t11-piede .etichetta-chip { font-size: .55rem; padding: 0 4px; }

    .fr-band-inner { gap: var(--sp-3); }
    .fr-band .fw-band-title { font-size: var(--fs-lg); }
    .fr-band-destra { gap: var(--sp-3); width: 100%; }
    .fr-band-kpis { gap: var(--sp-3); }
    .fr-band-kpi { min-width: 68px; }
    .fr-band-kpi + .fr-band-kpi { border-left: 0; padding-left: 0; }
    .fr-band-val { font-size: var(--fs-lg); }
    /* In riga la larghezza la detta il contenuto: i 116px pensati per la
       colonna lasciavano 38px alla miniatura e il segnaposto "Nessuna
       maglia" finiva tagliato. Il filetto che separava sopra ora separa a
       fianco, perche' i due comandi si sono messi in colonna. */
    .fr-band-identita { flex-direction: row; width: auto; }
    /* In 64px di larghezza "Nessuna maglia" va a capo e chiede 69px di
       altezza: la miniatura sale a 72 e l'icona scende, cosi' il segnaposto
       ci sta invece di farsi tagliare. */
    .fr-maglia-thumb { flex: 0 0 64px; height: 72px; width: 64px; }
    .fr-maglia-placeholder i { font-size: 1.15rem; }
    .fr-band-azioni {
        border-left: 1px solid rgba(255, 255, 255, .1);
        border-top: 0;
        flex-direction: column;
    }
    /* In colonna i due comandi devono restare toccabili: 44px a testa. */
    .fr-band-btn { min-height: 44px; }
    .fr-band-btn:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        border-right: 0;
    }
    /* Su telefono restano il nome, lo stemma, il fantavoto atteso e lo stato:
       sono le quattro cose che servono per decidere se schierarlo. Il nome
       del club si legge dallo stemma, la probabilita' e il prezzo stanno
       nella scheda del giocatore, a un tocco. */
    .fr-tabella :is(.fr-c-valore, .fr-c-cmp, .fr-c-prob) { display: none; }
    .fr-c-squadra .fr-squadra { display: none; }
    .fr-c-squadra .fr-crest-wrap { margin-right: 0; }
    .fr-tabella thead th.fr-c-squadra { font-size: 0; }
    .fr-tabella :is(th, td) { padding-left: 5px; padding-right: 5px; }
    .fr-nome-wrap .lst-face { height: 28px; width: 28px; }
    .fr-th-lungo { display: none; }
    .fr-th-corto { display: inline; }
}

/* ============================================================
   Scelta dei colori
   ============================================================
   Erano tre prompt() in fila che chiedevano un codice esadecimale, senza
   mostrare niente: si sceglieva alla cieca e si scopriva il risultato dopo
   aver salvato. Qui la fascia si compone davanti, con lo stesso calcolo di
   contrasto della pagina vera, e il verdetto dice a parole cosa succedera'
   al colore secondario - che e' la cosa che sorprende, perche' bandColors()
   lo scarta quando non regge e sembra che sia stato ignorato.
   ============================================================ */

.frc {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.frc-anteprima-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }

.frc-anteprima {
    border-radius: var(--r-md);
    overflow: hidden;
}

.frc-anteprima .fw-band-inner {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
}

.frc-anteprima-id {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    min-width: 0;
}

.frc-anteprima-id .avatar { border: 2px solid rgba(255, 255, 255, .4); border-radius: 50%; }
.frc-anteprima-nome { display: block; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); }
.frc-anteprima-sub { display: block; font-size: var(--fs-sm); opacity: .82; }

.frc-anteprima-chip {
    border-radius: var(--r-full);
    flex-shrink: 0;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    padding: 4px 12px;
    text-transform: uppercase;
}

/* Il verdetto: non un colore, una frase. Chi sceglie deve sapere perche'. */
.frc-verdetto {
    align-items: flex-start;
    display: flex;
    font-size: var(--fs-sm);
    gap: 6px;
    line-height: var(--lh-base);
    margin: 0;
}

.frc-verdetto-ok { color: var(--positive-ink); }
.frc-verdetto-nota { color: var(--ink-2); }
.frc-verdetto i { flex-shrink: 0; margin-top: 2px; }

/* ---- Combinazioni pronte ----------------------------------------------- */
.frc-tavolozze { display: flex; flex-direction: column; gap: var(--sp-2); }

.frc-tavolozze-riga {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.frc-tavolozza {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.frc-tavolozza:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.frc-tavolozza:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* I tre colori come tre fasce: il primario largo, gli altri due sotto, cosi'
   si capisce a colpo d'occhio chi fa da fondo e chi da dettaglio. */
.frc-tavolozza > span:first-of-type { height: 30px; }
.frc-tavolozza > span:not(:first-of-type) { height: 12px; }

.frc-tavolozza > span {
    display: block;
    width: 100%;
}

.frc-tavolozza small {
    color: var(--ink-2);
    font-size: var(--fs-micro);
    font-weight: 600;
    padding: 4px 2px;
}

/* ---- I tre campi ------------------------------------------------------- */
.frc-campi {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.frc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frc-riga { align-items: center; display: flex; gap: var(--sp-2); }

/* Il pozzetto nativo: senza queste tre righe i browser lo disegnano come un
   bottone di sistema, largo il minimo e con un bordo che non e' del sito. */
.frc-pozzetto {
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    cursor: pointer;
    flex-shrink: 0;
    height: 38px;
    padding: 2px;
    width: 48px;
}

.frc-pozzetto::-webkit-color-swatch { border: 0; border-radius: 4px; }
.frc-pozzetto::-webkit-color-swatch-wrapper { padding: 0; }
.frc-pozzetto::-moz-color-swatch { border: 0; border-radius: 4px; }

.frc-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 0; text-transform: uppercase; }
.frc-aiuto { color: var(--ink-3); font-size: var(--fs-micro); line-height: var(--lh-base); margin: 0; }

.frc-azioni {
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding-top: var(--sp-3);
}

.frc-identita .frc-campo { max-width: 420px; }

/* ============================================================
   Il campo e le carte dei giocatori
   ============================================================
   La foto era un cerchio da 40px: un ritratto tagliato in tondo, senza
   bordo e senza dire per quale club gioca. Adesso e' un ritratto vero
   (3:4, come le figurine), con il suo filetto e lo stemma del club
   appoggiato all'angolo.

   Tutto e' agganciato a .fr-top11-col: il campetto e' condiviso con TV mode
   e con il modale della Serie A, che devono restare identici.
   ============================================================ */

/* ---- Il prato ----------------------------------------------------------
   Erano due bande piatte da 46px, con un solo velo di luce: un rettangolo
   verde a righe. Qui il campo e' costruito a strati, dall'alto in basso:

     1. una luce calda in alto, come se le torri faro fossero da quel lato;
     2. la vignettatura, che scurisce i bordi e porta l'occhio al centro;
     3. la falciatura larga, con il bordo sfumato invece che netto - le
        strisce vere non hanno una linea che le separa;
     4. una sfumatura verticale che scurisce il fondo del campo;
     5. il verde di base dei token.

   Le tracciature restano quelle condivise (linea di meta' campo, cerchio,
   aree), ma piu' nitide, e si aggiungono i dischetti del rigore e gli archi
   d'angolo che non c'erano. */
.fr-top11-col .formation-field {
    /* ---- Il prato ----
       Verde scuro e desaturato, l'olivastro di un campo vero d'ottobre: il
       token --pitch-1 resta l'emerald acceso della TV, che a tre metri di
       distanza serve, ma qui si guarda per minuti interi e stanca.

       Sei strati, dall'alto:
       1  grana fine       feTurbulence ad alta frequenza, il filo d'erba
       2  chiazze          feTurbulence a bassa frequenza, l'usura irregolare
       3  luce dall'alto
       4  vignettatura
       5  fasce di taglio  larghezze diseguali, bordi sfumati, 178deg
       6  base             i due verdi

       Le fasce non sono un `repeating-linear-gradient`: quello dava dieci
       rettangoli identici a bordi netti e si leggeva come carta da parati.
       Qui ogni fascia ha la sua larghezza e la sua forza, i passaggi sono
       sfumati, l'inclinazione e' di due gradi e la grana ci passa sopra
       rompendo i bordi. */
    --fr-erba-1: #3D5531;
    --fr-erba-2: #354C2B;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%201%200%200%20-0.42'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23t)' opacity='.34'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%20-0.34'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23t)' opacity='.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%20-0.42'/%3E%3C/filter%3E%3Crect width='460' height='460' filter='url(%23t)' opacity='.34'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 92% 58% at 50% -12%, rgba(255, 255, 255, .07), transparent 64%),
        radial-gradient(ellipse 138% 104% at 50% 50%, transparent 48%, rgba(0, 0, 0, .32)),
        linear-gradient(178deg,
            rgba(255, 255, 255, .042) 0%, rgba(255, 255, 255, .042) 7%,
            rgba(0, 0, 0, .034) 10%, rgba(0, 0, 0, .034) 17%,
            rgba(255, 255, 255, .036) 20%, rgba(255, 255, 255, .036) 29%,
            rgba(0, 0, 0, .028) 32%, rgba(0, 0, 0, .028) 38%,
            rgba(255, 255, 255, .04) 41%, rgba(255, 255, 255, .04) 50%,
            rgba(0, 0, 0, .032) 53%, rgba(0, 0, 0, .032) 60%,
            rgba(255, 255, 255, .034) 63%, rgba(255, 255, 255, .034) 71%,
            rgba(0, 0, 0, .03) 74%, rgba(0, 0, 0, .03) 82%,
            rgba(255, 255, 255, .036) 85%, rgba(255, 255, 255, .036) 93%,
            rgba(0, 0, 0, .028) 96%, rgba(0, 0, 0, .028) 100%),
        linear-gradient(174deg, var(--fr-erba-1), var(--fr-erba-2));
    background-size: 150px 150px, 150px 150px, 460px 460px, auto, auto, auto, auto;
    /* I due pulviscoli fini sono sfasati di mezzo riquadro: sovrapposti alla
       stessa origine il chiaro cadrebbe sempre sullo stesso filo dello scuro
       e si vedrebbe la piastrella. */
    background-position: 0 0, 75px 75px, 0 0, 0 0, 0 0, 0 0, 0 0;
    border-radius: var(--r-md);
    /* Un'ombra ambientale larga e bassa, piu' un contatto da un pixel. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        inset 0 0 80px rgba(0, 0, 0, .2),
        0 1px 2px rgba(16, 24, 40, .1),
        0 28px 64px -18px rgba(16, 24, 40, .38);
}

/* Le linee sono tracciatura, non grafica: si vedono, non si impongono. */
/* Su un verde piu' scuro lo stesso bianco pesa di piu': le linee scendono
   per restare tracciatura invece di diventare grafica. */
.fr-top11-col .formation-field::before { border-top-color: rgba(255, 255, 255, .16); }
.fr-top11-col .formation-field::after { border-color: rgba(255, 255, 255, .16); }
.fr-top11-col .tv-pen-area { border-color: rgba(255, 255, 255, .15); }
.fr-top11-col .tv-pen-area::before { border-color: rgba(255, 255, 255, .12); }

/* Il dischetto del rigore: mancava, ed e' il segno che fa leggere l'area
   come un'area invece che come due rettangoli. */
.fr-top11-col .tv-pen-area::after {
    background: rgba(255, 255, 255, .26);
    border-radius: 50%;
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 5px;
}

.fr-top11-col .tv-pen-top::after { top: 62%; }
.fr-top11-col .tv-pen-bottom::after { bottom: 62%; }

/* Gli archi d'angolo, ritagliati dai bordi del campo. */
.fr-top11-col .formation-field .formation-line-portiere,
.fr-top11-col .formation-field .formation-line-attaccanti { position: relative; }

.fr-top11-col .formation-field .formation-line-portiere::before,
.fr-top11-col .formation-field .formation-line-portiere::after,
.fr-top11-col .formation-field .formation-line-attaccanti::before,
.fr-top11-col .formation-field .formation-line-attaccanti::after {
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    content: "";
    height: 34px;
    pointer-events: none;
    position: absolute;
    width: 34px;
}

.fr-top11-col .formation-line-portiere::before { left: -17px; top: -17px; }
.fr-top11-col .formation-line-portiere::after { right: -17px; top: -17px; }
.fr-top11-col .formation-line-attaccanti::before { bottom: -17px; left: -17px; }
.fr-top11-col .formation-line-attaccanti::after { bottom: -17px; right: -17px; }

/* ---- La carta ----------------------------------------------------------
   Il bordo sta intorno alla scheda: e' lei l'oggetto, la figurina. Il
   ritratto dentro non ne ha uno suo, altrimenti sono due cornici annidate. */
/* La figurina: stesso raggio delle card del resto della pagina, ombra
   diffusa invece che dura, e piu' aria attorno al ritratto. Il bordo non
   serve a delimitare - lo fa gia' lo stacco dal verde - quindi al suo posto
   c'e' un alone bianco morbido. */
.fr-top11-col .top11-player-card.t11-ricca {
    background: var(--bg-surface);
    border: 0;
    border-radius: var(--r-sm);
    /* Due ombre e basta: un contatto di un pixel che appoggia la carta
       sull'erba, e una seconda larghissima e sfumata che la stacca dal
       fondo. L'alone bianco da 3px che c'era prima, su un verde chiaro
       serviva a separare; su questo verde scuro la carta si stacca da sola e
       l'alone diventava un bordo finto. */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .3),
        0 12px 26px -10px rgba(16, 24, 40, .42);
    gap: 2px;
    /* Piu' larga e piu' bassa: l'aria che serve e' ai lati del nome, non
       sopra e sotto ogni riga. */
    padding: 7px 9px 7px;
    position: relative;
    transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

/* Il filetto d'accento in cima porta lo stato del giocatore. Undici carte
   bordate di verde, giallo e rosso sarebbero undici cornici che litigano sul
   prato: un filo di tre pixel sul lato corto si vede all'istante e non
   ridisegna la carta. La parola resta nella pillola in fondo, perche' il
   colore da solo non e' un'informazione. */
.fr-top11-col .t11-ricca::before {
    background: var(--line-strong);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.fr-top11-col .t11-stato-da-schierare::before,
.fr-top11-col .t11-stato-consigliato::before {
    background: color-mix(in srgb, var(--positive) 78%, transparent);
}

.fr-top11-col .t11-stato-valutabile::before,
.fr-top11-col .t11-stato-in-dubbio::before {
    background: color-mix(in srgb, var(--caution) 78%, transparent);
}

.fr-top11-col .t11-stato-indisponibile::before {
    background: color-mix(in srgb, var(--negative) 78%, transparent);
}

/* Al passaggio del mouse la carta si alza: l'ombra si allarga di un filo e
   sale di un pixel. Il filetto non cambia colore, perche' dice un'altra cosa. */
.fr-top11-col .t11-ricca:hover {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .32),
        0 18px 34px -12px rgba(16, 24, 40, .46);
    transform: translateY(-1px);
}

/* Il ritratto sta al centro della scheda. Lo stemma vive nell'angolo in alto
   a destra e non gli finisce sopra: la scheda e' larga abbastanza per tutti e
   due. Prima lo avevo spinto a sinistra, e si vedeva. */
.fr-top11-col .t11-ricca .t11-foto { align-self: center; }

.t11-foto { display: block; line-height: 0; }

/* Il ritratto: 3:4, non un cerchio. La testa sta in alto, quindi si taglia
   dal basso. Nessun bordo suo: quello e' della scheda. */
.fr-top11-col .t11-ricca .top11-pl-img {
    background: var(--bg-sunken);
    border: 0;
    border-radius: var(--r-xs);
    display: block;
    height: 66px;
    object-fit: cover;
    object-position: top center;
    width: 52px;
}

/* Lo stemma del club: dentro la scheda, appoggiato all'angolo in alto a
   destra. Fuori dal bordo galleggiava e sembrava un adesivo attaccato dopo. */
.t11-crest {
    line-height: 0;
    position: absolute;
    /* Staccato dall'angolo: appoggiato al bordo sembrava scivolato li'. */
    right: 7px;
    top: 8px;
    z-index: 2;
}

.t11-crest .t11-crest-img-wrap { display: block; }

/* 30x40 invece di un tondo da 22: i loghi di Serie A sono scudetti, piu'
   alti che larghi, e dentro un cerchio piccolo si leggevano solo per colore.
   `contain` li tiene interi qualunque forma abbiano, e senza raggio non c'e'
   piu' un'ellisse a ritagliarli. */
.t11-crest .t11-crest-img,
.t11-crest .t11-crest-img-fallback {
    background: transparent;
    border: 0;
    height: 40px;
    object-fit: contain;
    width: 30px;
}

/* Le iniziali, quando il logo non c'e', restano un tondo: tre lettere in un
   rettangolo alto sembrerebbero un'etichetta storta. */
.t11-crest .t11-crest-img-fallback {
    border-radius: 50%;
    height: 30px;
    margin: 5px 0;
}

.t11-crest .t11-crest-img-fallback {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    justify-content: center;
    padding: 0;
}

/* ---- La riga dei numeri e il piede --------------------------------------
   Il segno casa/trasferta e il consiglio non si nascondono piu' dietro il
   passaggio del mouse: erano proprio le due cose che si guardano per prime, e
   su un campo pieno di schede nessuno le cerca una per una.

   Il titolo del segno dice chi si affronta e come il modello vede la gara -
   "In trasferta contro Sassuolo · pronostico 1-2 · gara favorevole" - cosi'
   il colore ha sempre una frase che lo spiega. */
.fr-top11-col .t11-ricca .top11-player-stats {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 5px;
    justify-content: center;
    max-width: 100%;
}

/* Nella Top 11 la riga porta la media di stagione: il previsto le si affianca
   invece di sostituirla, cosi' si leggono i due numeri insieme. */
/* Il secondario e' piu' freddo e piu' leggero del testo corrente: stesso
   grigio del resto della pagina virato di trenta punti verso il blu, e
   fermo a 4.93 su bianco, sopra la soglia. Cosi' il numero principale sta
   avanti e il resto arretra senza sparire. */
.t11-prev {
    color: #657186;
    font-size: .63rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    white-space: nowrap;
}

/* Gerarchia dentro la carta: il nome primo, il numero subito sotto e piu'
   scuro degli accessori, lo stato in fondo e piu' piccolo di tutto. */
/* Il nome e' quello stampato sul dorso della maglia: condensato, in
   stampatello, su una riga sola. Non e' una scelta di spazio - a 15px il
   condensato in maiuscolo e' anzi un filo piu' largo di Outfit a 12.5px
   ("Pellegrino M.": 78px contro 73) - e' una scelta di carattere: sulla
   figurina il nome smette di essere un'etichetta e diventa una scritta. */
.fr-top11-col .t11-ricca .top11-player-name {
    color: var(--ink-1);
    font-family: var(--font-condensed);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    margin-top: 3px;
    text-transform: uppercase;
}

/* La riga del fantavoto prende aria sotto il nome e alleggerisce: il nome in
   stampatello condensato e' gia' la voce forte della figurina, e due pesi
   grossi attaccati si contendevano lo sguardo. */
.fr-top11-col .t11-ricca .top11-player-stats {
    color: var(--ink-2);
    font-size: .71rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 4px;
}

.t11-piede {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 1px;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
}

.t11-piede > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-top11-col .t11-piede .etichetta-chip {
    font-size: .6rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0 6px;
}
.t11-piede .fw-diff { flex-shrink: 0; }


/* ============================================================
   Pillole, controlli, tipografia
   ============================================================ */

/* "Da schierare" compariva su quasi ogni riga e su quasi ogni carta: un
   verde pieno ripetuto venti volte smette di voler dire qualcosa. Qui le
   tinte sono le stesse dei token ma portate a fondo neutro, e il colore
   resta solo nell'inchiostro e in un pallino. Il verde acceso se lo tiene
   "Consigliato", che e' la cosa rara. */
.fr-top11-col .etichetta-chip,
.fr-tabella .etichetta-chip,
.fr-bench-card .etichetta-chip {
    align-items: center;
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    display: inline-flex;
    font-weight: 600;
    gap: 4px;
}

.fr-top11-col .etichetta-chip::before,
.fr-tabella .etichetta-chip::before,
.fr-bench-card .etichetta-chip::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 5px;
    width: 5px;
}

.fr-tabella .etichetta-da-schierare,
.fr-top11-col .etichetta-da-schierare,
.fr-bench-card .etichetta-da-schierare { color: var(--positive-ink); }

.fr-tabella .etichetta-consigliato,
.fr-top11-col .etichetta-consigliato,
.fr-bench-card .etichetta-consigliato {
    background: var(--positive-tint);
    color: var(--positive-ink);
}

.fr-tabella .etichetta-valutabile,
.fr-top11-col .etichetta-valutabile,
.fr-bench-card .etichetta-valutabile { color: var(--caution-ink); }

.fr-tabella .etichetta-in-dubbio,
.fr-top11-col .etichetta-in-dubbio,
.fr-bench-card .etichetta-in-dubbio {
    background: var(--caution-tint);
    color: var(--caution-ink);
}

.fr-tabella .etichetta-indisponibile,
.fr-top11-col .etichetta-indisponibile,
.fr-bench-card .etichetta-indisponibile {
    background: var(--negative-tint);
    color: var(--negative-ink);
}

.fr-tabella .etichetta-nella-media,
.fr-top11-col .etichetta-nella-media,
.fr-bench-card .etichetta-nella-media { color: var(--ink-3); }

/* ---- Controlli allineati ------------------------------------------------
   Schede, filtri, select e chip avevano tre raggi e tre altezze diverse:
   sembravano venire da sistemi differenti. Adesso condividono la misura. */
.fr-toolbar .fw-seg,
.fr-toolbar .fr-modulo {
    border-radius: var(--r-xs);
    height: 36px;
}

.fr-toolbar .fw-seg-item { min-height: 32px; }
.fr-toolbar .fr-modulo { padding-block: 0; }

.fr-alt-chip {
    border-radius: var(--r-xs);
    min-height: 26px;
}

/* L'accento del marchio segna cosa si sta guardando; il navy resta la
   struttura. */
.fr-alt-chip.active {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.fr-vista .fw-seg-item[aria-selected="true"] { background: var(--navy); }

/* ---- Tipografia --------------------------------------------------------- */
/* Cifre tabulari ovunque ci siano colonne di numeri: senza, le virgole
   ballano da una riga all'altra e la colonna sembra storta. */
.fr-tabella .fw-num,
.fr-bench-numeri,
.fr-kpi-val,
.fr-band-val { font-variant-numeric: tabular-nums; }

.fr-tabella thead th {
    color: var(--ink-3);
    font-weight: 600;
}

/* Tre grigi distinti invece di due quasi uguali: nome, squadra, contorno. */
.fr-nome { color: var(--ink-1); font-weight: 600; }
.fr-squadra { color: var(--ink-3); }
.fr-c-valore { color: var(--ink-3); }
.fr-c-prob { color: var(--ink-2); }