/* ── LA CLASSIFICA (28/9/2026): Lega, Generale, Scuole ──────────────────
   Il foglio di Designer Classifica. Tutto sta scritto sulla carta: righe
   col filo, niente card, niente bordo intorno alle tabelle, raggio 0 per la
   carta e 10 per i comandi. I colori sono solo token (GRAMMATICA-v2):
   l'oro dei premi (--medal, --medal-ink) per il podio e per chi sale; la
   matita (--grafite) per il cerchio sul tuo posto e per il filo di chi
   scende; l'indaco per quello che si puo' toccare. Ogni comando e' alto
   almeno 44 e ha uno stato premuto. Le righe sono alte 48, due quadretti
   della carta; le linee di zona e la testa della tabella 24, uno. */

/* la testata: il titolo della sezione e le tre schede */
.cl-testa { margin: 2px 0 var(--sp3); }
.cl-titolo { font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--ink); text-wrap: balance; margin: 4px 0 0; }
.cl-schede { display: flex; gap: var(--sp6); margin-top: var(--sp2); border-bottom: 1px solid var(--line); }
.cl-scheda { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; }
.cl-scheda[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* le materie della Generale: le pastiglie di style.css (.pastiglie
   .materie-intere .past), alte 44 da toccare come nel Profilo */
.cl-pastiglie .past { min-height: 44px; }

/* le scelte sotto la testata: l'ordinamento, l'ambito. Parole con la
   sottolineatura della voce attiva, come le schede ma in 13 (la materia,
   dal 1/10, e' una riga di pastiglie: .cl-pastiglie qui sotto) */
.cl-scelta { display: flex; flex-wrap: wrap; column-gap: var(--sp3); margin-top: var(--sp1); }
.cl-voce { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; }
.cl-voce[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }

/* i numeri dentro le frasi: cifre tabulari su tutta la riga, cosi' non serve
   uno span per ogni numero (GRAMMATICA-v2: sans tabulare, mai mono) */
.cl-stato, .cl-dopo, .cl-capo, .cl-nota, .cl-lega, .cl-sotto { font-variant-numeric: tabular-nums; }

/* la riga che dice dove sei, e la riga piu' piccola sotto */
.cl-stato { margin-top: var(--sp3); font-size: 15px; line-height: 24px; color: var(--ink-2); }
.cl-stato b { color: var(--ink); font-weight: 600; }
.cl-dopo { margin-top: var(--sp1); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* il collegamento dentro una frase: alto 44 da toccare (20 di riga e 12
   sopra e sotto), senza spostare le righe intorno */
.cl-link { color: var(--primary); font-weight: 500; text-decoration: none;
  display: inline-block; line-height: 20px; padding: 12px 0; margin: -12px 0; }

/* l'esito della settimana chiusa, in cima, una volta sola */
.cl-esito { display: flex; align-items: center; gap: var(--sp3); margin-top: var(--sp3); }
.cl-esito .oli { width: 40px; height: 40px; flex: none; }
.cl-esito p { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 24px; }

/* il titolo di una parte della pagina («La settimana scorsa») */
.cl-sezione { margin-top: var(--sp6); font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); text-wrap: balance; }
.cl-sezione + .cl-tabella { margin-top: var(--sp2); }

/* la tabella sulla carta */
.cl-tabella { margin-top: var(--sp4); }
.cl-capo { display: flex; justify-content: space-between; gap: var(--sp3); margin: 0; white-space: nowrap;
  line-height: 24px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
/* solo il nome della colonna, sopra i numeri (la Generale, 2/10) */
.cl-capo-destra { justify-content: flex-end; }
.cl-riga { box-sizing: border-box; display: flex; align-items: center; gap: var(--sp3); min-height: 48px;
  border-bottom: 1px solid var(--line); background: none; color: var(--ink); }
.cl-posto { position: relative; flex: none; width: 36px; text-align: center;
  font-size: 15px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cl-posto.cl-su { color: var(--medal-ink); font-weight: 700; }
.cl-posto.cl-giu { color: var(--ink-3); }
.cl-posto.cl-sceso { color: var(--grafite); }
.cl-n { position: relative; }
.cl-cerchio { position: absolute; pointer-events: none; overflow: visible; }
.cl-nome { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-tu .cl-nome { font-weight: 600; }
.cl-lega { margin-left: var(--sp2); font-size: 13px; font-weight: 400; color: var(--ink-3); }
.cl-sotto { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; }
.cl-xp { flex: none; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* le due linee: sotto l'ultimo che sale un filo nell'oro dei premi con
   «salgono»; sopra il primo che scende un filo a matita con «scendono» */
.cl-linea { margin: -1px 0 0; line-height: 23px; font-size: 13px; font-weight: 500; padding-left: 48px; }
.cl-linea-su { border-top: 1px solid var(--medal); color: var(--medal-ink); }
.cl-linea-giu { border-top: 1px solid var(--grafite); color: var(--grafite); }
.cl-stacco { margin: 0; line-height: 24px; text-align: center; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.cl-nota { margin-top: var(--sp3); font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* le righe che si toccano (le scuole, i risultati della ricerca) */
.cl-righe { margin-top: var(--sp3); border-top: 1px solid var(--line); }
.cl-righe form { margin: 0; }
.cl-riga-link { width: 100%; text-align: left; font: inherit; text-decoration: none; cursor: pointer;
  appearance: none; -webkit-appearance: none; border-width: 0 0 1px; border-style: solid; border-color: var(--line); padding: 4px 0; }
.cl-riga-link > span[aria-hidden] { flex: none; color: var(--ink-3); padding-right: 4px; }
.cl-riga-link .cl-nome, .cl-riga-link .cl-sotto { white-space: normal; }

/* lo stato vuoto: in cima, breve, Oli piccolo */
.cl-vuoto { display: flex; align-items: center; gap: var(--sp3); margin-top: var(--sp4); }
.cl-vuoto .oli { width: 40px; height: 40px; flex: none; }
.cl-vuoto p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* la ricerca della scuola: tutta la riga e' il campo, la x e' alta 44 */
.cl-cerca { display: flex; align-items: center; gap: var(--sp2); margin-top: var(--sp1); }
.cl-campo { flex: 1; display: flex; align-items: center; gap: var(--sp2); min-height: 44px; padding: 0 var(--sp3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-3); cursor: text; }
.cl-campo input { flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--ink); }
.cl-campo:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cl-x { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; color: var(--ink-2); }
.cl-togli { margin-top: var(--sp2); }
.cl-modulo { margin-top: var(--sp4); }
.cl-invia { margin-top: var(--sp4); }

/* il tocco: stato premuto su ogni comando, niente selezione del testo */
.cl-scheda, .cl-pastiglie .past, .cl-voce, .cl-link, .cl-riga-link, .cl-x, .cl-testa .indietro, .cl-invia {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.cl-scheda:active, .cl-pastiglie .past:not([aria-pressed="true"]):active, .cl-voce:active, .cl-riga-link:active, .cl-x:active,
.cl-testa .indietro:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cl-link:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cl-invia:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .cl-invia:active { transform: none; } }

/* ── Giro 2 (1/10): le regole in un foglio dal basso ─────────────────────────
   La riga che lo apre, alta 44; la maniglia del foglio e' un bottone alto
   44 (si chiude anche da li'); le regole sono un elenco breve, a 15/24. */
.cl-regole-riga { margin-top: var(--sp6); }
.cl-regole-apri { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0;
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cl-regole-apri:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cl-maniglia { display: block; flex: none; width: 100%; height: 44px; margin: -14px 0 0; padding: 0; background: none; border: 0; cursor: pointer; }
.cl-maniglia .maniglia { display: block; margin: 0 auto; }
/*  lo stato premuto, come gli altri comandi (guardia 9 della PR 439; la PR 464
    era nata prima della guardia: prova dell'unione, 2/10)  */
.cl-maniglia:active { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.cl-regole { margin: 0; padding: 0; list-style: none; }
.cl-regole li { margin: 0 0 var(--sp3); font-size: 15px; line-height: 24px; color: var(--ink); }
.cl-regole li:focus { outline: none; }
.cl-regole li:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cl-regole b { font-weight: 600; }

/* ── Le scuole in attesa (1/10) ─────────────────────────────────────────
   Sotto la soglia di iscritti: niente posto e niente Elo; quanti iscritti
   mancano sta in coda al sottotitolo (2/10). La tua si distingue con
   l'etichetta «la tua scuola», in --ink-2: non ha un numero da cerchiare. */
.cl-attesa { border-top: 1px solid var(--line); }
/* «ne servono altri 2» non si spezza: a 320 andava a capo dopo «ne» */
.cl-manca { white-space: nowrap; }
.cl-tua { color: var(--ink-2); font-weight: 600; }