/* ============================================================
   Calendario, classifica e scheda partita
   ============================================================
   Due blocchi: .cal-* e' la pagina, .cm-* e' il modale della partita.
   Entrambi costruiti sulle primitive .fw-band, .fw-panel, .fw-table,
   .fw-tile e .fw-seg.
   ============================================================ */

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

/* ---- Fascia ------------------------------------------------------------- */
.cal-band { border-radius: var(--r-md); }

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

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

.cal-band-crest {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    display: flex;
    flex-shrink: 0;
    font-size: 1.5rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

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

.cal-band-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-band-kpi + .cal-band-kpi {
    border-left: 1px solid rgba(255, 255, 255, .22);
    padding-left: var(--sp-5);
}

.cal-band-kpi .fw-micro { color: inherit; opacity: .72; }

.cal-band-val {
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
}

.cal-band-sub { font-size: var(--fs-micro); opacity: .72; }

/* ---- Toolbar ------------------------------------------------------------ */
.cal-toolbar {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3);
}

.cal-search {
    flex: 1 1 220px;
    max-width: 280px;
    min-width: 0;
    position: relative;
}

.cal-search .form-control { padding-left: 34px; }

.cal-search-ico {
    color: var(--ink-3);
    font-size: .9rem;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cal-toolbar .form-select { width: auto; }
.cal-filtro { margin-left: auto; }

/* ---- La giornata in primo piano ----------------------------------------
   Aprendo il calendario si viene a vedere la giornata che si sta giocando,
   non il campionato intero: sta in cima, larga, con le frecce per scorrere.
   Le trentotto card restano un tocco piu' in la', per chi vuole guardare
   tutto in una volta. */
.cal-fuoco {
    background: var(--bg-surface);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}

.cal-fuoco:not(.cal-fuoco--corrente) { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.cal-fuoco-nav {
    align-items: center;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
}

.cal-fuoco-freccia {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    color: var(--navy);
    display: inline-flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.cal-fuoco-freccia:hover:not([disabled]) { background: var(--bg-raised); }
.cal-fuoco-freccia[disabled] { color: var(--ink-3); opacity: .45; }

.cal-fuoco-titolo { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.cal-fuoco-n {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-md);
    font-weight: 700;
    gap: var(--sp-2);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
}
.cal-fuoco-date { color: var(--ink-3); font-size: var(--fs-micro); white-space: nowrap; }
.cal-fuoco-vuoto { color: var(--ink-3); margin: 0; padding: var(--sp-4) var(--sp-3); text-align: center; }

/* Qui la partita ha tutta la larghezza della pagina, non una colonna da
   258px: i nomi non si troncano e il risultato si legge da lontano. */
.cal-fuoco-body .cal-m { padding: var(--sp-3) var(--sp-4); }
.cal-fuoco-body .cal-m-team { font-size: 1rem; }
.cal-fuoco-body .cal-m-gol { font-size: 1.5rem; }

.cal-tutte {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--navy);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
}
.cal-tutte:hover { background: var(--bg-raised); }

@media (max-width: 767px) {
    .cal-fuoco-freccia { height: 34px; width: 34px; }
    .cal-fuoco-n { font-size: var(--fs-sm); }
    .cal-fuoco-body .cal-m { padding: var(--sp-2) var(--sp-3); }
    .cal-fuoco-body .cal-m-team { font-size: var(--fs-sm); }
    .cal-fuoco-body .cal-m-gol { font-size: 1.25rem; }
    .cal-tutte { width: 100%; justify-content: center; }
}

/* ---- Le card di giornata -----------------------------------------------
   Trentotto card che ne mostrano cinque a testa, invece di trecentottanta
   righe una sotto l'altra. La pagina passa da trentamila pixel a poche
   schermate, e chi vuole il resto di una giornata la apre. */
.cal-griglia {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

.cal-gio {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* La giornata in corso si riconosce da un filetto, non da un fondo colorato:
   il fondo toglierebbe contrasto ai nomi delle squadre. */
.cal-gio--corrente { border-color: var(--brand); box-shadow: var(--shadow-md); }

/* Una riga di intestazione, non un comando: le giornate stanno aperte e non
   si richiudono, quindi qui non c'e' niente da premere. */
.cal-gio-head {
    align-items: center;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    min-height: 36px;
    padding: var(--sp-2) var(--sp-3);
}

.cal-gio-conta {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    font-size: var(--fs-micro);
    font-weight: 700;
    padding: 1px 7px;
}

.cal-gio-n {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-micro);
    font-weight: 700;
    gap: var(--sp-2);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
}

.cal-gio-ora {
    background: var(--brand-tint);
    border-radius: var(--r-full);
    color: var(--brand-ink);
    font-size: 10px;
    letter-spacing: 0;
    padding: 1px 6px;
    text-transform: none;
}

.cal-gio-date {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    white-space: nowrap;
}

.cal-gio-body { display: flex; flex: 1; flex-direction: column; }

/* ---- Una partita -------------------------------------------------------- */
.cal-m-wrap { position: relative; }

.cal-m {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    column-gap: 6px;
    cursor: pointer;
    display: grid;
    grid-template-areas:
        "ch casa centro trasf ct"
        "wh wh   wh     wh    wh";
    grid-template-columns: 20px minmax(0, 1fr) auto minmax(0, 1fr) 20px;
    padding: var(--sp-2) var(--sp-3);
    row-gap: 2px;
    text-align: left;
    width: 100%;
}

.cal-m-wrap:last-child .cal-m { border-bottom: 0; }
.cal-m:hover { background: var(--bg-sunken); }

.cal-m > .cal-crest-wrap:first-of-type { grid-area: ch; }
.cal-m > .cal-crest-wrap:last-of-type  { grid-area: ct; }
.cal-m-team--casa   { grid-area: casa; }
.cal-m-centro       { grid-area: centro; }
.cal-m-team--trasf  { grid-area: trasf; text-align: right; }
.cal-m-when         { grid-area: wh; }

.cal-crest-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.cal-crest { max-height: 100%; max-width: 100%; object-fit: contain; }

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

.cal-m-team {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chi ha vinto si legge dal peso, non solo dal punteggio. */
.cal-m--casa .cal-m-team--casa,
.cal-m--trasferta .cal-m-team--trasf { color: var(--ink-1); font-weight: 700; }

.cal-m-centro {
    align-items: center;
    display: flex;
    gap: 3px;
    white-space: nowrap;
}

.cal-m-gol {
    color: var(--ink-1);
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.cal-m-sep { color: var(--ink-3); }

.cal-m-vs { color: var(--ink-3); font-size: var(--fs-micro); }

/* La previsione non e' un risultato: fondo tenue, bordo tratteggiato e la
   bacchetta davanti. Senza, "1-3" accanto a "da giocare" sembrava il
   punteggio finale di una partita non ancora giocata. */
.cal-m-pron {
    align-items: center;
    background: var(--bg-raised);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-3);
    display: inline-flex;
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    gap: 3px;
    padding: 0 5px;
}

.cal-m-pron .bi { font-size: .65rem; opacity: .8; }

/* Il favorito accanto a un pronostico che gli va contro: stesso corpo del
   pronostico, senza cornice, cosi' si capisce che e' un'annotazione. */
.cal-m-fav {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.cal-m-fav small { font-weight: 500; }

.cm-tile-contro { color: var(--ink-2); margin-top: 2px; white-space: normal; }

.cal-m-when {
    align-items: center;
    color: var(--ink-3);
    display: flex;
    font-size: var(--fs-micro);
    gap: 5px;
    padding-left: 26px;
}

/* Non e' piu' una pill: "Da giocare" e' sparito - lo diceva gia' l'assenza
   del punteggio - e quello che resta, "Finale", e' una nota di servizio
   accanto alla data, non un'etichetta che chiede attenzione. */
.cal-m-stato {
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
}

/* Il pallino dell'esito del pronostico: verde centrato, ambra esito giusto,
   rosso sbagliato. Il titolo dice a parole quale dei tre. */
.cal-m-esito {
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.cal-m-esito--esatto     { background: var(--positive); }
.cal-m-esito--esito      { background: var(--caution); }
.cal-m-esito--sbagliato  { background: var(--negative); }

.cal-m-edit {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-3);
    cursor: pointer;
    display: none;
    font-size: .7rem;
    height: 24px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    z-index: 1;
}

.cal-m-wrap:hover .cal-m-edit,
.cal-m-edit:focus-visible { display: block; }

/* ---- Pannelli (classifica, import) -------------------------------------- */
.cal-panel { padding: 0; }

.cal-panel-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: var(--sp-4);
}

.cal-panel-title {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-lg);
    font-weight: 700;
    gap: var(--sp-2);
    margin: 0;
}

.cal-panel-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.cal-import-body {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.cal-import-body > div { flex: 1 1 220px; }

/* ---- Classifica --------------------------------------------------------- */
.cal-cl-scroll { overflow-x: auto; }

.cal-cl-table { min-width: 620px; width: 100%; }

.cal-cl-pos { color: var(--ink-3); font-weight: 700; }
.cal-cl-pt  { color: var(--ink-1); font-weight: 700; }

.cal-cl-team { min-width: 0; }

.cal-squadra-cell {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

.cal-team-name {
    color: var(--ink-1);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-team-link { color: inherit; text-decoration: none; }
.cal-team-link:hover .cal-team-name { text-decoration: underline; }

/* Le zone si marcano con un filetto a sinistra, non tingendo la riga: una
   riga tinta toglierebbe contrasto al testo che ci sta sopra. */
.cal-cl-zona > td:first-child { position: relative; }

.cal-cl-zona > td:first-child::before {
    border-radius: 0 2px 2px 0;
    bottom: 4px;
    content: "";
    left: 0;
    position: absolute;
    top: 4px;
    width: 3px;
}

.cal-cl-zona--champions > td:first-child::before { background: var(--navy); }
.cal-cl-zona--europa    > td:first-child::before { background: var(--positive); }
.cal-cl-zona--retro     > td:first-child::before { background: var(--negative); }

.cal-cl-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding-top: var(--sp-3);
}

.cal-cl-key {
    align-items: center;
    color: var(--ink-3);
    display: inline-flex;
    font-size: var(--fs-micro);
    gap: 5px;
}

.cal-cl-dot { border-radius: 2px; height: 10px; width: 3px; }
.cal-cl-dot--champions { background: var(--navy); }
.cal-cl-dot--europa    { background: var(--positive); }
.cal-cl-dot--retro     { background: var(--negative); }

/* ============================================================
   La scheda partita
   ============================================================ */

.modal-dialog.cm-modal { max-width: min(1120px, 96vw); }

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

/* ---- Testata ------------------------------------------------------------ */
.cm-testa {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
}

.cm-testa-riga {
    align-items: center;
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

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

.cm-squadra--trasf { flex-direction: row-reverse; }

.cm-crest-big-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.cm-crest-big { max-height: 100%; max-width: 100%; object-fit: contain; }

.cm-crest-big-fallback {
    align-items: center;
    border-radius: var(--r-sm);
    color: #fff;
    display: flex;
    font-size: var(--fs-sm);
    font-weight: 700;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.cm-squadra-nome {
    color: var(--ink-1);
    font-size: var(--fs-lg);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-punteggio {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cm-punteggio-val {
    color: var(--ink-1);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.cm-punteggio-val em { color: var(--ink-3); font-style: normal; font-weight: 400; }

.cm-punteggio-meta { color: var(--ink-3); font-size: var(--fs-micro); }

.cm-testa-stats {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
    padding-top: var(--sp-3);
}

.cm-stat {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.cm-stat strong {
    color: var(--ink-1);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

/* ---- I tre riquadri ----------------------------------------------------- */
.cm-tiles {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cm-tile {
    cursor: default;
    text-align: left;
}

button.cm-tile { cursor: pointer; }
button.cm-tile:hover { box-shadow: var(--shadow-md); }

.cm-tile-nome {
    color: var(--ink-1);
    display: block;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-tile-nome small { color: var(--ink-3); font-weight: 400; }

.cm-tile-val {
    color: var(--ink-1);
    font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.cm-tile-val small {
    color: var(--ink-3);
    display: block;
    font-size: var(--fs-micro);
    font-weight: 400;
}

.cm-tile-big {
    color: var(--ink-1);
    display: block;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.15;
}

.cm-tile-sub { color: var(--ink-3); display: block; font-size: var(--fs-micro); }

/* ---- Le due squadre ----------------------------------------------------- */
.cm-due {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cm-lato {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.cm-lato-head {
    align-items: center;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
}

.cm-crest-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.cm-crest { max-height: 100%; max-width: 100%; object-fit: contain; }

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

/* La testata di colonna non ripete il nome della squadra: sta gia' nella
   testata del modale, casa a sinistra e trasferta a destra, e le colonne
   seguono lo stesso ordine. Ripeterlo costava una riga alta per colonna,
   cioe' la barra di scorrimento. Resta lo stemma, che ancora l'occhio. */
.cm-lato-tot {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-left: auto;
}

.cm-lato-tot strong {
    color: var(--ink-1);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

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

.cm-scroll { overflow-x: auto; }

.cm-table { min-width: 320px; width: 100%; }

.cm-table tbody tr { cursor: pointer; }

.cm-table tbody tr:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: -2px;
}

.cm-r { width: 34px; }

.cm-nome { min-width: 0; }

.cm-nome-t {
    color: var(--ink-1);
    font-weight: 600;
    margin-right: 4px;
}

/* Chi entra e chi esce: una freccia accanto al nome. "Titolare" ripetuto
   sotto ogni riga era il caso normale scritto diciassette volte, e ogni
   ripetizione costava una riga di altezza. La parola resta nel titolo e
   nell'aria-label, perche' il colore da solo non porta il significato. */
.cm-cambio {
    font-size: .85em;
    vertical-align: -.05em;
}

.cm-cambio--su  { color: var(--positive-ink); }
.cm-cambio--giu { color: var(--negative-ink); }

.cm-num { font-weight: 700; white-space: nowrap; width: 54px; }

/* SV non e' un numero mancante: e' un esito. Si legge come una sigla, non
   come un voto, e il title lo scioglie per chi non la conosce. */
.cm-sv {
    background: var(--bg-raised);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    cursor: help;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    padding: 1px 5px;
    text-decoration: none;
}

.cm-na { color: var(--ink-3); font-weight: 400; }

/* ---- Quanto vale un voto pronosticato ----------------------------------
   Una riga da 6.5 su un titolare al 93% e una su un subentrante al 49%
   dicevano la stessa cosa con la stessa forza. Ora la seconda arretra: il
   numero resta, il peso no. */
.cm-pron-pv { color: var(--ink-2); white-space: nowrap; }
.cm-pron-dubbio .cm-pron-pv { color: var(--caution-ink); }
.cm-pron-improbabile .cm-pron-pv { color: var(--ink-3); }

.cm-pron-improbabile :is(.cm-nome-t, .cm-num) { color: var(--ink-3); font-weight: 400; }

.cm-pron-nota {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    line-height: var(--lh-base);
    margin: var(--sp-2) 0 var(--sp-1);
}

.cm-totale-sub {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 400;
}

.cm-sv-conta { color: var(--caution-ink); font-weight: 700; }
.cm-fv-su  { color: var(--positive-ink); }
.cm-fv-giu { color: var(--negative-ink); }

.cm-ev { white-space: nowrap; width: 72px; }
.cm-ev .ui-ico { margin-right: 2px; }

.cm-hit  { color: var(--positive-ink); }
.cm-miss { color: var(--negative-ink); }

/* ---- Le schede del modale ----------------------------------------------
   Stesso vestito delle schede della scheda giocatore: la classe e' quella,
   qui si aggiusta solo il contorno, perche' li' vive dentro un modale a
   tutta altezza e qui dentro un pannello. */
.cm-schede {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
}

.cm-tabs.player-card-tabs {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: 4px 8px 0;
}

/* I due pannelli occupano la stessa cella: il contenitore prende l'altezza
   del piu' alto, e i tasti sopra non ballano quando si cambia scheda. Il
   nascosto resta li' e tiene il posto - visibility lo toglie comunque a chi
   legge con lo schermo e alla tabulazione. */
.cm-pannelli { display: grid; }

.cm-pannello {
    grid-area: 1 / 1;
    padding: var(--sp-3);
}

.cm-pannello.is-via { visibility: hidden; }

/* ---- Probabili formazioni ----------------------------------------------- */

.cm-sub {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    margin: 0 0 var(--sp-2);
    text-transform: uppercase;
}

.cm-sub small { color: var(--ink-3); font-weight: 400; }

.cm-prob {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: minmax(0, 1fr) 168px;
    padding: var(--sp-3);
}

.cm-prob-lista { min-width: 0; }

.cm-prob-ol {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* La riga di una probabile formazione si legge come una riga di tabella del
   resto del sito: stesso corpo, stesso peso del nome, numeri tabulari e un
   filetto sottile fra una e l'altra. Prima era una lista con misure sue e
   sembrava arrivata da un altro pezzo di prodotto. */
.cm-prob-riga {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    font-size: var(--fs-sm);
    gap: var(--sp-2);
    min-height: 38px;
    min-width: 0;
    padding: 2px 0;
}

.cm-prob-riga:last-child { border-bottom: 0; }

.cm-link {
    background: none;
    border: 0;
    color: var(--ink-1);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-link:hover { text-decoration: underline; }

.cm-prob-pct {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: auto;
}

.cm-vuoto { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; }

/* Chi se la gioca con un titolare: stesse righe, ma staccate da un titolo che
   dice che qui si cambia registro. */
.cm-sub--ballo {
    border-top: 1px solid var(--line-strong);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
}

.cm-sub small {
    color: var(--ink-3);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.cm-lato-ballo { color: var(--caution-ink); }

/* Il campo e' quello condiviso (.formation-field, in tv-mode.css): qui si
   cambia solo il taglio, da orizzontale a verticale, e si mettono i pallini
   al posto delle card dei giocatori. Le linee si spartiscono l'altezza, se
   no i reparti finiscono ammucchiati in mezzo. */
/* Selettore doppio: tv-mode.css, dove .formation-field e' definita, viene
   caricato dopo questo foglio, e a parita' di specificita' il suo
   aspect-ratio orizzontale vincerebbe - il campo restava schiacciato. */
/* Il taglio e' quello di un campo vero (68 per 105 metri): piu' stretto e
   il disegno non si riconosce. La colonna e' larga quanto basta perche' i
   pallini stiano larghi - erano tutti addossati - senza rubare il nome. */
.formation-field.cm-campo {
    align-self: center;
    aspect-ratio: .65;
    justify-content: space-between;
    padding: 12px 8px 22px;
}

.cm-campo .cm-campo-linea {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    gap: 7px;
    justify-content: center;
}

.cm-campo-dot {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    height: 13px;
    width: 13px;
}

/* Il portiere si distingue, come nelle maglie vere. */
.cm-campo-dot--p { background: var(--caution); }

.cm-campo-schema {
    bottom: 4px;
    color: rgba(255, 255, 255, .9);
    font-size: 10px;
    font-weight: 700;
    left: 0;
    letter-spacing: .04em;
    position: absolute;
    text-align: center;
    width: 100%;
}

.cm-panchina {
    border-top: 1px solid var(--line);
    padding: var(--sp-2) var(--sp-3);
}

.cm-panchina summary {
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.cm-panchina summary small { color: var(--ink-3); font-weight: 400; }

.cm-panchina-lista {
    color: var(--ink-2);
    columns: 2;
    font-size: var(--fs-sm);
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
}

.cm-panchina-lista li {
    break-inside: avoid;
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    padding: 1px 0;
}

/* ---- Marcatori e assist: tutti, non il primo ---------------------------- */
.cm-tile--lista { align-items: flex-start; }

.cm-conta {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    font-size: 10px;
    padding: 0 6px;
}

.cm-elenco {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
}

.cm-elenco li {
    align-items: baseline;
    display: flex;
    gap: 5px;
    min-width: 0;
}

.cm-elenco .cm-link { font-size: var(--fs-sm); }

.cm-molt {
    color: var(--positive-ink);
    font-size: var(--fs-micro);
    font-weight: 700;
}

.cm-elenco-sq {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-autogol {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    margin: 4px 0 0;
}

.cm-autogol .cm-link { color: var(--ink-2); font-size: var(--fs-micro); }

/* ---- Il pronostico a consuntivo ----------------------------------------- */
.cm-dopo {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}

.cm-dopo summary {
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.cm-dopo summary strong { color: var(--ink-1); }
.cm-dopo summary small { color: var(--ink-3); font-weight: 400; }
.cm-dopo > .cm-due { margin-top: var(--sp-3); }

/* ---- Sfogliare la giornata ---------------------------------------------- */
.cm-nav {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    padding-top: var(--sp-3);
}

.cm-nav .btn { min-height: 36px; }
.cm-nav-vuoto { width: 1px; }

.cm-nav-punti {
    display: flex;
    gap: 4px;
}

.cm-nav-punto {
    background: var(--line-strong);
    border-radius: 2px;
    height: 4px;
    width: 14px;
}

.cm-nav-punto.is-qui { background: var(--brand); }

/* ---- Schermo stretto ---------------------------------------------------- */
@media (max-width: 1023px) {
    .cm-due { grid-template-columns: minmax(0, 1fr); }
    .cm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cal-band-inner { gap: var(--sp-3); }
    .cal-band-kpis { gap: var(--sp-3); width: 100%; }
    .cal-band-kpi + .cal-band-kpi { border-left: 0; padding-left: 0; }
    .cal-band-val { font-size: 1.2rem; }
    .cal-band-crest { height: 44px; width: 44px; }

    .cal-search { flex: 1 1 100%; max-width: none; }
    .cal-toolbar .form-select { flex: 1 1 auto; }
    .cal-filtro { margin-left: 0; width: 100%; }
    .cal-filtro .fw-seg-item { flex: 1; }

    .cal-griglia { grid-template-columns: minmax(0, 1fr); }

    .cm-tiles { grid-template-columns: minmax(0, 1fr); }
    .cm-testa-riga { gap: var(--sp-2); }
    .cm-squadra-nome { font-size: var(--fs-sm); }
    .cm-crest-big-wrap { height: 34px; width: 34px; }
    .cm-punteggio-val { font-size: 1.5rem; }
    .cm-prob { grid-template-columns: minmax(0, 1fr); }
    .cm-campo { display: none; }   /* il modulo e' scritto sotto i titolari */

    .cm-nav { flex-wrap: wrap; justify-content: center; }
}