/* Piattaforma dei club: stili delle pagine, sopra il foglio di stile del sito (site.css, copiato in /sito/ da
   strumenti/prepara.js). Stessi colori, stessi riquadri in trasparenza sul verde campo; niente stili nel documento,
   così la Content-Security-Policy resta stretta. */

.cl { padding-block: 0 72px; }
.cl .wrap { padding-block: 40px 0; }
.cl-stretta { max-width: 540px; }
.cl h1 { font-size: clamp(1.7rem, 4.2vw, 2.3rem); }
.cl h2 { font-size: 1.15rem; margin-bottom: 10px; }

/* L'anteprima lo dice in cima a ogni pagina. */
.cl-prova { margin: 0; padding: 8px 20px; text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--lime-ink); background: var(--lime); }

.cl-apertura { max-width: 760px; padding-block: 28px 8px; }
.cl-apertura h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.cl-lead { font-size: 1.15rem; color: #fff; }

.cl-scheda { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: var(--shadow); }
.cl-scheda + .cl-scheda { margin-top: 18px; }
.cl-scheda > :last-child { margin-bottom: 0; }
.cl-larga, .cl-vuota { box-shadow: none; }

/* Moduli */
.cl-modulo { display: grid; gap: 16px; margin-top: 4px; }
.cl-campo label { display: block; font-weight: 600; margin-bottom: 6px; color: #fff; }
.cl-campo input { width: 100%; font: inherit; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; padding: 11px 14px; }
.cl-campo input:focus-visible, .cl-spunta input:focus-visible, .cl-bottone:focus-visible, .cl-google:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cl-campo-errore input { border-color: #ff9d88; }
.cl-aiuto { margin: 6px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.cl-errore { margin: 6px 0 0; font-size: 0.88rem; color: #ffc9bd; font-weight: 600; }
.cl-spunta { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.cl-spunta input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--lime); }
.cl-spunta label { color: #fff; }
.cl-spunta .cl-errore { grid-column: 2; }
/* La riga di aiuto sotto una casella sta sotto il testo, non nella colonna della casella (che altrimenti si allarga). */
.cl-spunta .cl-aiuto { grid-column: 2; margin: 0; }

/* Bottoni: il lime pieno per l'azione della pagina, il bordo per le altre; Google con i suoi colori. */
.cl-bottone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; color: var(--lime-ink); background: var(--lime); border: 1px solid var(--lime); border-radius: 999px; padding: 11px 22px; text-decoration: none; cursor: pointer; }
.cl-bottone:hover { filter: brightness(1.06); }
.cl-pieno { width: 100%; }
.cl-secondario { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.4); font-weight: 600; }
.cl-secondario:hover { border-color: var(--lime); filter: none; }
.cl-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 46px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 600; text-decoration: none; }
.cl-google:hover { background: #f2f2f2; }
.cl-g { flex: none; }
.cl-facebook { margin-top: 10px; background: #1877f2; color: #fff; border-color: #1877f2; }
.cl-facebook:hover { background: #166fe5; }

.cl-separatore { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-soft); font-size: 0.86rem; }
.cl-separatore::before, .cl-separatore::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cl-righe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 18px 0 0; font-size: 0.92rem; }
.cl-azioni { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; align-items: center; }
.cl-azioni form { margin: 0; }
.cl-in-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.cl-in-riga .cl-aiuto { margin: 0; }

/* Avvisi */
.cl-avviso { margin: 14px 0; padding: 11px 14px; border-radius: 12px; font-size: 0.94rem; }
.cl-avviso-ok, .cl-avviso-info { background: rgba(166, 242, 203, 0.14); border: 1px solid rgba(166, 242, 203, 0.45); color: #eafff3; }
.cl-avviso-errore { background: rgba(255, 120, 95, 0.16); border: 1px solid rgba(255, 157, 136, 0.55); color: #ffe3dc; }

/* Account */
.cl-dati { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.cl-dati dt { color: var(--ink-soft); }
.cl-dati dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.cl-stato { display: inline-block; margin-left: 6px; font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--ink-soft); }
.cl-stato-ok { border-color: var(--mint); color: var(--mint); }
.cl-elenco { list-style: none; padding: 0; margin: 0; }
.cl-elenco li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cl-elenco li:last-child { border-bottom: 0; }
.cl-modo { font-weight: 600; color: #fff; }
.cl-questa { margin-left: 6px; font-size: 0.78rem; color: var(--lime-ink); background: var(--lime); padding: 1px 8px; border-radius: 999px; }

/* Le voci dei club nel menu del sito: un bordo lime, piene sulla pagina in cui si è. */
.nav a.cl-voce { border: 1px solid rgba(215, 255, 33, 0.6); border-radius: 999px; padding: 4px 12px; color: #fff; }
.nav a.cl-voce:hover { color: var(--lime); }
.nav a.cl-voce[aria-current="page"] { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }

/* Casella di prova */
.cl-email { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.cl-email-testa { margin: 0; overflow-wrap: anywhere; }
.cl-email pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font: inherit; font-size: 0.92rem; }

@media (max-width: 520px) {
  .cl .wrap { padding-block: 26px 0; }
  .cl-scheda { padding: 22px 18px 20px; }
  .cl-dati { grid-template-columns: 1fr; gap: 2px; }
  .cl-dati dd { margin-bottom: 8px; }
}

/* ---------- Fase 1: i club ---------- */

/* Ciò che ha l'attributo hidden non si vede, anche se una regola gli dà un display (i bottoni, le griglie). */
[hidden] { display: none !important; }

/* La procedura guidata ha più campi di un modulo di accesso: una colonna più larga. */
.cl-procedura { max-width: 860px; margin-inline: auto; }

/* Moduli più ricchi: aree di testo, menu, gruppi di caselle. */
.cl-campo textarea, .cl-campo select { width: 100%; font: inherit; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; padding: 11px 14px; }
.cl-campo textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.cl-campo select option { color: #10251b; background: #fff; }
.cl-campo textarea:focus-visible, .cl-campo select:focus-visible, .cl-scelta:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.cl-campo-errore textarea, .cl-campo-errore select { border-color: #ff9d88; }
.cl-gruppo { display: grid; gap: 14px; margin: 0; padding: 14px 16px 18px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.cl-gruppo legend { padding: 0 6px; font-weight: 700; color: #fff; }
.cl-gruppo .cl-gruppo { border: 0; padding: 0; }
.cl-gruppo .cl-gruppo legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.cl-spunte { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.cl-scelta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #fff; cursor: pointer; }
.cl-scelta input { width: 18px; height: 18px; margin: 0; accent-color: var(--lime); }
.cl-scelta:has(input:checked) { border-color: var(--lime); background: rgba(215, 255, 33, 0.12); }
.cl-piccolo { font-size: 0.86rem; }

/* Briciole e passi della procedura guidata: sul telefono i numeri, e il nome solo del passo in cui si è. */
.cl-briciole { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 10px; overflow-wrap: anywhere; }
.cl-briciole a { color: var(--mint); }
.cl-passi { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 22px; }
.cl-passi li { flex: 1 1 0; min-width: 0; }
.cl-passi a, .cl-passi li > span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 0.86rem; line-height: 1.25; }
.cl-passi a:hover { border-color: var(--lime); color: #fff; }
.cl-passo-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-weight: 700; font-size: 0.8rem; }
.cl-passo-t { min-width: 0; overflow-wrap: anywhere; }
.cl-passo-fatto a, .cl-passo-fatto > span { color: #fff; border-color: rgba(166, 242, 203, 0.5); }
.cl-passo-fatto .cl-passo-n { background: var(--mint); border-color: var(--mint); color: var(--court-deep); }
.cl-passi .cl-passo-attuale > span { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); font-weight: 700; }
.cl-passo-attuale .cl-passo-n { border-color: var(--lime-ink); }
.cl-scheda-passo h2 { margin-bottom: 6px; }
.cl-scheda-passo h3 { font-size: 1rem; margin: 0 0 4px; }

/* I bottoni in fondo al modulo: "Indietro" a sinistra, gli altri a destra. */
.cl-bottoni { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 12px; margin-top: 8px; }
.cl-bottoni .cl-indietro { margin-right: auto; }

/* Indirizzo: una griglia su sei colonne, una sola sul telefono. */
.cl-indirizzo { display: grid; gap: 16px; }
.cl-griglia-indirizzo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.cl-griglia-indirizzo > .cl-campo { grid-column: span 2; min-width: 0; }
.cl-griglia-indirizzo > .cl-largo, .cl-griglia-indirizzo > .cl-campo:has(#f-citta), .cl-griglia-indirizzo > .cl-campo:has(#f-paese) { grid-column: span 4; }
.cl-cerca { position: relative; }
.cl-suggerimenti { position: absolute; z-index: 30; left: 0; right: 0; top: 76px; margin: 0; padding: 6px; list-style: none; background: var(--bg-card-solid); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; }
.cl-suggerimenti li { padding: 9px 10px; border-radius: 8px; cursor: pointer; color: #fff; }
.cl-suggerimenti li small { display: block; color: var(--ink-soft); }
.cl-suggerimenti li[aria-selected="true"], .cl-suggerimenti li:hover { background: rgba(215, 255, 33, 0.16); }
.cl-mappa-box { display: grid; gap: 10px; }
.cl-mappa { height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #dfe7e1; }
.cl-attribuzione { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.cl-attribuzione a { color: var(--ink-soft); }
.cl-posizione { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.35); color: var(--ink-soft); }
.cl-posizione-ok { border-style: solid; border-color: var(--mint); color: var(--mint); font-weight: 600; }
.cl-indirizzo .cl-avviso, .cl-modulo .cl-avviso { margin: 0; }
.cl-avviso ul { margin: 6px 0; padding-left: 20px; }
.cl-avviso p { margin: 0; }
.cl-avviso a { color: #fff; }

/* Immagini del club */
.cl-immagini { display: grid; gap: 16px; margin: 14px 0 18px; }
.cl-immagine { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.cl-immagine-anteprima { display: grid; place-items: center; width: 180px; height: 120px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.cl-immagine-anteprima img { width: 100%; height: 100%; object-fit: cover; }
.cl-anteprima-logo img { object-fit: contain; background: #fff; }
/* La foto di chi gioca: tonda, come compare accanto al nome nella pagina del torneo. */
.cl-immagine-anteprima.cl-anteprima-foto { width: 140px; height: 140px; border-radius: 50%; }
.cl-immagine-testo h3 { margin: 0 0 4px; font-size: 1rem; }
.cl-immagine-testo form { margin-top: 8px; }
.cl-obbligatoria { font-size: 0.75rem; font-weight: 600; color: var(--lime-ink); background: var(--lime); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.cl-file { position: relative; overflow: hidden; }
.cl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-stato-caricamento { margin: 6px 0 0; font-size: 0.88rem; color: var(--mint); min-height: 1.2em; }
.cl-stato-caricamento.cl-errore { color: #ffc9bd; }

/* Riepilogo */
.cl-riepilogo-sezione { padding: 14px 0; border-top: 1px solid var(--line); }
.cl-riepilogo-sezione h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1rem; margin: 0 0 8px; }
.cl-modifica { font-weight: 600; font-size: 0.88rem; color: var(--mint); }
.cl-riepilogo-sezione .cl-dati { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.cl-riepilogo-immagini { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cl-riepilogo-testata { height: 64px; width: auto; border-radius: 8px; }
.cl-pubblica { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Loghi: un'immagine quadrata su fondo bianco; senza logo, l'iniziale del nome. */
.cl-logo { flex: none; width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cl-logo-piccolo { width: 52px; height: 52px; border-radius: 12px; }
.cl-logo-grande { width: 112px; height: 112px; border-radius: 22px; }
.cl-logo-vuoto { display: inline-grid; place-items: center; background: var(--court-2); color: var(--lime); font-weight: 800; font-size: 1.6rem; }
.cl-logo-piccolo.cl-logo-vuoto { font-size: 1.2rem; }

/* Stati del club */
.cl-stato-draft { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.cl-stato-active { border-color: var(--mint); color: var(--mint); }
.cl-stato-suspended { border-color: #ff9d88; color: #ffc9bd; }
.cl-stato-archived { border-color: rgba(255, 255, 255, 0.3); color: var(--ink-soft); }
h1 .cl-stato { vertical-align: middle; font-size: 0.8rem; }

/* Elenco dei club (pagina iniziale) e dashboard */
.cl-cerca-club { margin: 8px 0 26px; max-width: 760px; }
.cl-cerca-club label { display: block; font-weight: 600; color: #fff; margin-bottom: 8px; }
.cl-cerca-riga { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-cerca-riga input { flex: 1 1 260px; min-width: 0; font: inherit; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 11px 18px; }
.cl-cerca-riga input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cl-griglia-club { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; padding: 0; margin: 12px 0 0; }
.cl-club-scheda { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--line); color: #fff; text-decoration: none; }
.cl-club-scheda:hover { border-color: var(--lime); }
.cl-club-testo { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cl-club-testo b { overflow-wrap: anywhere; }
.cl-distanza { flex: none; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; }
.cl-club-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cl-club-riga .cl-club-testo { flex: 1 1 200px; }
.cl-invito-club { margin-top: 28px; }

/* Scheda pubblica del club */
.cl-club { position: relative; isolation: isolate; }
.cl-club-sfondo { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 100vw; max-width: none; height: 480px; object-fit: cover; opacity: 0.16; z-index: -1; pointer-events: none; mask-image: linear-gradient(#000 35%, transparent); }
.cl-club-testata { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid var(--line); }
.cl-club-intestazione { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-bottom: 18px; }
.cl-club-intestazione > div { min-width: 0; flex: 1 1 260px; }
.cl-club-intestazione h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.cl-club-intestazione .cl-lead, .cl-club-intestazione .muted { margin: 0; }
.cl-club-colonne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cl-club-principale, .cl-club-laterale { display: grid; gap: 18px; min-width: 0; }
.cl-club-colonne .cl-scheda + .cl-scheda { margin-top: 0; }
.cl-punti { margin: 0; padding-left: 20px; }
.cl-punti li { margin: 4px 0; overflow-wrap: anywhere; }
.cl-mappa-pubblica { margin: 12px 0 0; }
.cl-mappa-immagine { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.cl-mappa-pubblica .cl-mappa { height: 300px; }
.cl-mappa-pubblica .cl-bottone { margin-top: 10px; }
.cl-mappa-pubblica figcaption { margin-top: 6px; }
.cl-righe-sinistra { justify-content: flex-start; }
.cl-club details summary { cursor: pointer; }
.cl-club details summary h2 { display: inline; }
.cl-intestazione-gestione { margin-top: 6px; }
.cl-pannelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.cl-pannelli .cl-scheda + .cl-scheda { margin-top: 0; }

/* Amministratori e inviti */
.cl-elenco-persone .cl-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cl-persona .cl-club-testo { flex: 1 1 220px; }
.cl-persona form { margin: 0; }
.cl-bottone.cl-piccolo { padding: 6px 14px; font-size: 0.88rem; }
.cl-pericolo { color: #fff; background: #b3261e; border-color: #b3261e; }
.cl-pericolo:hover { filter: brightness(1.1); }
.cl-scheda h3 { font-size: 1rem; margin: 18px 0 6px; }

/* Pagine legali: una colonna da leggere */
.cl-legale { max-width: 780px; margin-inline: auto; }
.cl-legale h2 { font-size: 1.08rem; margin: 22px 0 6px; }
.cl-legale p { margin: 0 0 10px; line-height: 1.6; }

@media (max-width: 760px) {
  .cl-club-colonne { grid-template-columns: 1fr; }
  .cl-passi .cl-passo-t { display: none; }
  .cl-passi .cl-passo-attuale .cl-passo-t { display: inline; }
  .cl-passi li { flex: 0 0 auto; }
  .cl-passi .cl-passo-attuale { flex: 1 1 auto; }
  .cl-griglia-indirizzo { grid-template-columns: 1fr; }
  .cl-griglia-indirizzo > .cl-campo, .cl-griglia-indirizzo > .cl-largo, .cl-griglia-indirizzo > .cl-campo:has(#f-citta), .cl-griglia-indirizzo > .cl-campo:has(#f-paese) { grid-column: auto; }
  .cl-immagine { grid-template-columns: 1fr; }
  .cl-immagine-anteprima { width: 100%; height: 160px; }
  .cl-bottoni .cl-bottone { flex: 1 1 auto; }
  .cl-mappa { height: 300px; }
}

/* ---------- Fase 2: tornei e iscrizioni ---------- */

/* Griglie dei campi: due, tre o quattro colonne, una sola sul telefono. */
.cl-griglia-due, .cl-griglia-tre, .cl-griglia-quattro { display: grid; gap: 14px 16px; }
.cl-griglia-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-griglia-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-griglia-quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-griglia-due > *, .cl-griglia-tre > *, .cl-griglia-quattro > * { min-width: 0; }

/* Le scelte a carte (tipologia, formula, regolamento, modalità): tutta la carta si tocca. */
.cl-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.cl-carta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; color: #fff; cursor: pointer; }
.cl-carta input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--lime); }
.cl-carta:has(input:checked) { border-color: var(--lime); background: rgba(215, 255, 33, 0.1); }
.cl-carta:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.cl-carta-testo { display: grid; gap: 3px; min-width: 0; }
.cl-carta-testo .muted { font-size: 0.88rem; }
.cl-carta-spenta { opacity: 0.5; cursor: not-allowed; }

/* Etichette piccole: età, minorenni, omonimi, priorità di un regolamento. */
.cl-etichetta { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--ink-soft); vertical-align: middle; }
.cl-carta .cl-etichetta { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); }
.cl-etichetta-minore { color: #3d2a00; background: #ffd479; border-color: #ffd479; }
.cl-etichetta-omonimo { color: #0d2440; background: #a9cdfb; border-color: #a9cdfb; }

/* Stati del torneo e delle iscrizioni */
.cl-stato-t-draft { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.cl-stato-t-published, .cl-stato-i-confirmed { border-color: var(--mint); color: var(--mint); }
.cl-stato-t-registrations_closed, .cl-stato-i-pending, .cl-stato-i-requested { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.cl-stato-t-running { border-color: var(--lime); color: var(--lime); }
.cl-stato-t-finished, .cl-stato-t-archived, .cl-stato-i-withdrawn { border-color: rgba(255, 255, 255, 0.3); color: var(--ink-soft); }
.cl-stato-t-cancelled, .cl-stato-i-rejected, .cl-stato-i-cancelled { border-color: #ff9d88; color: #ffc9bd; }
.cl-stato-i-waitlist { border-color: #ffd479; color: #ffd479; }

/* Panoramica: i numeri delle iscrizioni, la condivisione con il QR Code. */
.cl-numeri { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 0; margin: 4px 0 0; }
.cl-numeri li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.cl-numeri b { font-size: 1.4rem; color: #fff; font-variant-numeric: tabular-nums; }
.cl-numeri span { font-size: 0.82rem; color: var(--ink-soft); }
/* Le statistiche d'uso (fase 7): una tabella che scorre di lato sugli schermi stretti. */
.cl-scorri { overflow-x: auto; }
.cl-tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cl-tabella th, .cl-tabella td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cl-tabella th[scope="col"] { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.cl-tabella td { text-align: right; }
.cl-condividi { margin-bottom: 18px; }
.cl-condividi-riga { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; }
.cl-condividi-testo { flex: 1 1 280px; min-width: 0; }
.cl-qr { flex: none; display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: 14px; }
.cl-qr-piccolo { width: 140px; height: 140px; margin-bottom: 8px; }
.cl-link-pubblico { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.cl-link-pubblico a { color: var(--mint); }
.cl-codice { font-size: 1.2rem; letter-spacing: 0.08em; color: var(--lime); }
.cl-link-nuovo .cl-azioni { margin-top: 6px; }
.cl-pericolo-box { margin-top: 14px; padding: 10px 14px; border: 1px solid rgba(255, 157, 136, 0.45); border-radius: 12px; }
.cl-pericolo-box summary { cursor: pointer; font-weight: 600; color: #ffc9bd; }
.cl-pericolo-box .cl-modulo { margin-top: 10px; }

/* La pagina pubblica del torneo */
.cl-box-iscrizione { border-color: rgba(215, 255, 33, 0.55); margin-bottom: 18px; }
.cl-bottone.cl-grande { padding: 14px 30px; font-size: 1.08rem; }
.cl-codice-modulo { max-width: 360px; }
.cl-dati-colonna { grid-template-columns: 1fr; gap: 2px; }
.cl-dati-colonna dd { margin-bottom: 8px; }
.cl-partecipanti { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.cl-partecipanti li { overflow-wrap: anywhere; }
.cl-partecipanti li > * { vertical-align: middle; }
.cl-avatar { display: inline-block; width: 32px; height: 32px; margin-right: 6px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.cl-titolo-torneo { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.cl-note p { margin: 0 0 8px; }
.cl-elenco-tornei li { display: block; }
/* Nella pagina iniziale i tornei aperti e i club sono due sezioni una sotto l'altra. */
.cl-elenco-club + .cl-elenco-club { margin-top: 28px; }

/* Le iscrizioni per chi organizza */
.cl-conta { display: inline-block; margin-left: 6px; min-width: 1.6em; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.85rem; text-align: center; }
.cl-elenco-iscrizioni .cl-iscrizione { display: block; }
.cl-iscrizione-testa { overflow-wrap: anywhere; }
.cl-componenti { margin: 6px 0 0; padding-left: 20px; }
/* Una persona per blocco: nome ed etichette, sotto i recapiti e le azioni (non le colonne degli elenchi). */
.cl-elenco .cl-componenti li, .cl-componenti li { display: block; margin: 4px 0; padding: 4px 0; border-bottom: 0; overflow-wrap: anywhere; }
.cl-persona-nome { font-weight: 600; color: #fff; }
.cl-azioni-piccole { margin-top: 6px; gap: 6px 8px; }
.cl-iscrizione .cl-azioni { margin-top: 8px; }
.cl-scelta-coppia { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #fff; }
.cl-scelta-coppia input { width: 18px; height: 18px; accent-color: var(--lime); }
.cl-rinomina { margin-top: 8px; }
.cl-rinomina summary { cursor: pointer; color: var(--mint); font-size: 0.88rem; }
.cl-rinomina input { font: inherit; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; padding: 6px 10px; min-width: 0; flex: 1 1 200px; }

/* Gli incontri (fase 3). Il tabellone usa le classi di quello del sito (site.css): l'altezza delle colonne la dà
   --righe, i riquadri del primo turno, che qui sta in una classe perché la CSP non permette stili nel documento. */
.dr.cl-righe-1 { --righe: 1; }
.dr.cl-righe-2 { --righe: 2; }
.dr.cl-righe-4 { --righe: 4; }
.dr.cl-righe-8 { --righe: 8; }
.dr.cl-righe-16 { --righe: 16; }
.dr.cl-righe-32 { --righe: 32; }
.dr.cl-righe-64 { --righe: 64; }
/* Colonne un po' più strette di quelle del sito, e nelle pagine di gestione il riquadro del tabellone largo quanto la
   pagina (la colonna della gestione è di 860 px): così un tabellone da otto, con vincitore e terzo posto, ci sta. */
.cl-tabellone .dr { margin-top: 6px; grid-auto-columns: minmax(180px, 260px); gap: 0 14px; }
@media (min-width: 1000px) {
  .cl-procedura .cl-tabellone { margin-inline: calc((100% - min(var(--max) - 40px, 100vw - 60px)) / 2); }
}
.dr-m.cl-dr-tocca:hover, .dr-m.cl-dr-tocca:focus-within { border-color: var(--lime); }
.cl-dr-link { position: absolute; inset: 0; border-radius: 10px; }
.cl-dr-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dr-col.cl-dr-terzo { padding-left: 10px; border-left: 1px dashed var(--line); }

/* Gli incontri in righe: giornate del girone, prossimi incontri, i miei incontri. */
.cl-incontri { list-style: none; margin: 0; padding: 0; }
.cl-incontro { border-bottom: 1px solid var(--line); }
.cl-incontro:last-child { border-bottom: 0; }
.cl-incontro > a, .cl-incontro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 9px 0; color: inherit; text-decoration: none; }
.cl-incontro > a { flex: 1 1 100%; padding: 0; }
.cl-incontro > a:hover .cl-incontro-lati { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.cl-incontro-turno { flex: 1 1 100%; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mint); }
.cl-incontro-lati { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; color: #fff; }
.cl-lato { color: var(--ink-soft); }
.cl-incontro-lati .cl-lato { color: #fff; }
.cl-vince, .cl-incontro-lati .cl-vince { font-weight: 700; color: var(--lime); }
.cl-contro { color: var(--ink-soft); }
.cl-incontro-esito { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-incontro-quando { flex: 1 1 100%; font-size: 0.86rem; color: var(--ink-soft); }
.cl-incontro-avviso, .cl-avviso-riga { flex: 1 1 100%; margin: 2px 0 0; font-size: 0.84rem; font-weight: 600; color: #ffc9bd; }
.cl-incontro.cl-prossimo { margin: 0 -10px; padding-inline: 10px; border: 1px solid rgba(215, 255, 33, 0.55); border-radius: 12px; background: rgba(215, 255, 33, 0.08); }
.cl-giornata + .cl-giornata { margin-top: 18px; }
.cl-giornata h3, .cl-procedura h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mint); margin: 16px 0 6px; }
.cl-giornata h3 { margin-top: 0; }

/* Le tabelle: classifica, griglia del calendario, set del risultato. Scorrono dentro il loro riquadro. */
.cl-tabella-scorre { overflow-x: auto; max-width: 100%; }
.cl-tabella-scorre:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 8px; }
.cl-classifica, .cl-griglia-campi, .cl-set { border-collapse: collapse; font-size: 0.92rem; }
.cl-classifica { width: 100%; min-width: 520px; }
.cl-classifica th, .cl-classifica td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.cl-classifica thead th { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.cl-classifica tbody th { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.cl-classifica abbr { text-decoration: none; cursor: help; }
.cl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-classifica th.cl-num, .cl-classifica td.cl-num { text-align: right; }
.cl-classifica .cl-primo th, .cl-classifica .cl-primo td { color: var(--lime); }
.cl-stato-parziale { border-color: #ffd479; color: #ffe2a8; }
/* Sul telefono la classifica sta nello schermo: set e game si nascondono (il criterio di chi è a pari punti resta). */
@media (max-width: 560px) {
  .cl-classifica { min-width: 0; font-size: 0.88rem; }
  .cl-classifica .cl-agg { display: none; }
  .cl-classifica th, .cl-classifica td { padding: 7px 5px; }
}
.cl-griglia-campi { min-width: 100%; }
.cl-griglia-campi th, .cl-griglia-campi td { padding: 6px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.cl-griglia-campi thead th { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.cl-griglia-campi tbody th { font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.cl-griglia-campi td { min-width: 150px; }
.cl-cella { display: block; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; color: #fff; text-decoration: none; font-size: 0.86rem; overflow-wrap: anywhere; }
.cl-cella + .cl-cella { margin-top: 6px; }
.cl-cella small { display: block; font-size: 0.74rem; color: var(--ink-soft); }
.cl-cella:hover { border-color: var(--lime); }
.cl-cella.is-done { opacity: 0.75; }
.cl-cella.cl-sovrapposto, .cl-programma.cl-sovrapposto { border-color: #ff9d88; }
.cl-programma.cl-sovrapposto { padding-inline: 10px; margin-inline: -10px; border: 1px solid #ff9d88; border-radius: 12px; }

/* Il calendario per chi gestisce: una riga per incontro con la sua programmazione. */
.cl-calendario { list-style: none; margin: 0; padding: 0; }
.cl-programma { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cl-programma:last-child { border-bottom: 0; }
.cl-programma-testa { margin: 0 0 6px; overflow-wrap: anywhere; }
.cl-programma-testa a { color: #fff; font-weight: 600; }
.cl-programma-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cl-programma-modulo input[type="datetime-local"], .cl-programma-modulo select, .cl-num-input, .cl-teste input {
  font: inherit; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; padding: 6px 10px; min-width: 0; color-scheme: dark; }
.cl-programma-modulo input[type="datetime-local"] { flex: 1 1 200px; }
.cl-programma-modulo select { flex: 1 1 140px; }
.cl-scelta.cl-scelta-piccola { padding: 5px 11px; font-size: 0.88rem; }
.cl-num-input { width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }
.cl-programma-modulo .cl-num-input, .cl-in-riga .cl-num-input { width: 5em; }

/* Il sorteggio: le teste di serie, una per riga, con il numero a destra. */
.cl-teste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-teste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cl-teste label { color: #fff; overflow-wrap: anywhere; min-width: 0; }
.cl-teste input { flex: none; width: 3.6em; text-align: center; }
.cl-scambia { margin-top: 14px; }
.cl-scambia summary { cursor: pointer; font-weight: 600; color: var(--mint); }
.cl-scambia .cl-modulo { margin-top: 10px; }
.cl-conferma-sorteggio { border-color: rgba(215, 255, 33, 0.55); }

/* L'incontro: i due lati, il modulo del risultato, lo storico. */
.cl-sfida { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.cl-set th, .cl-set td { padding: 5px 6px; text-align: center; }
.cl-set thead th { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-set tbody th { text-align: left; font-weight: 600; color: #fff; white-space: nowrap; }
.cl-tb { display: inline-flex; align-items: center; gap: 4px; }
.cl-tb .cl-num-input { width: 3em; }
.cl-risultato-attuale { border-color: rgba(166, 242, 203, 0.55); }
.cl-modulo-risultato [hidden] { display: none !important; }
.cl-storico { margin: 0; padding-left: 20px; display: grid; gap: 10px; overflow-wrap: anywhere; }

/* Il vincitore, sulla pagina pubblica. */
.cl-vincitore { border-color: var(--lime); background: rgba(215, 255, 33, 0.1); text-align: center; }
.cl-occhiello { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mint); }
.cl-vincitore-nome { margin: 4px 0 2px; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 800; color: var(--lime); overflow-wrap: anywhere; }
.cl-torneo > .cl-scheda + .cl-scheda, .cl-torneo > .cl-scheda { margin-bottom: 18px; }

/* Fase 4: avvisi, proposte di risultato, messaggi agli iscritti. */
.cl-icona { width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin-right: 4px; color: var(--lime); }
.cl-conta { display: inline-block; margin-left: 6px; font-size: 0.78rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; color: #0b2a1c; background: var(--lime); vertical-align: middle; }
.cl-avvisi { list-style: none; margin: 0; padding: 0; }
.cl-avviso-voce { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cl-avviso-voce:last-child { border-bottom: 0; }
.cl-avviso-voce p { margin: 2px 0; }
.cl-avviso-voce.is-nuovo { margin: 0 -10px; padding-inline: 10px; border-radius: 12px; background: rgba(215, 255, 33, 0.07); }
.cl-avviso-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cl-etichetta-nuovo { color: #0b2a1c; background: var(--lime); border-color: var(--lime); }
.cl-etichetta-errore { color: #ffc9bd; border-color: #ff9d88; white-space: normal; }
.cl-messaggio-testo { white-space: pre-wrap; padding: 8px 12px; border-left: 3px solid rgba(166, 242, 203, 0.55); color: #fff; }
.cl-proposta { border-color: rgba(215, 255, 33, 0.6); }
.cl-proposta-contested { border-color: #ff9d88; }
.cl-incontro-azione { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; color: var(--ink-soft); }
.cl-incontro-azione a { color: var(--mint); }
.cl-incontro-azione form { margin: 0; }
.cl-da-confermare b { color: var(--lime); }
.cl-proposte { list-style: none; margin: 0; padding: 0; }
.cl-proposta-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cl-proposta-riga:last-child { border-bottom: 0; }
.cl-proposta-riga > span:nth-child(3) { flex: 1 1 100%; }
.cl-proposta-riga a { color: #fff; }
.cl-sfida .cl-io { color: var(--lime); }

/* Fase 5: i gironi (le classifiche una accanto all'altra sugli schermi larghi), chi passa alla fase finale, le
   squadre con i loro componenti e ruoli, le partite di un incontro a squadre con le formazioni. */
.cl-gironi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.cl-girone { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.cl-girone h3 { margin-top: 0; }
.cl-girone .cl-punti { margin: 0; overflow-wrap: anywhere; }
.cl-vincolo { align-items: end; }
.cl-giornate-girone { margin-top: 12px; }
.cl-scheda > .cl-scambia:first-child { margin-top: 0; }
.cl-giornate-girone summary, .cl-incontro-partite summary { cursor: pointer; font-weight: 600; color: var(--mint); overflow-wrap: anywhere; }
.cl-giornate-girone .cl-giornata:first-of-type { margin-top: 10px; }
.cl-classifica .cl-passa th { box-shadow: inset 3px 0 0 var(--lime); }
.cl-gironi-pubblici > .cl-scheda + .cl-scheda { margin-top: 18px; }
.cl-primi { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-weight: 700; color: #fff; }
.cl-squadre { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.cl-squadra { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; align-content: start; }
.cl-squadra h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: #fff; overflow-wrap: anywhere; }
.cl-squadra-pochi { border-color: #ff9d88; }
.cl-squadra-membri { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cl-squadra-membri > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cl-squadra-membri > li:last-child { border-bottom: 0; }
/* La squadra del capitano nel modulo d'iscrizione (F5-1): nome e compagni, uno per riquadro. */
.cl-squadra-iscrizione { display: grid; gap: 14px; }
.cl-componenti .cl-in-riga { display: inline-flex; margin-left: 6px; }
.cl-squadra-membri > li > span { min-width: 0; color: #fff; }
.cl-squadra-membri form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-campo-riga { display: flex; align-items: center; gap: 6px; margin: 0; }
.cl-campo-riga label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cl-campo-riga select { font: inherit; font-size: 0.88rem; color: #fff; background: rgba(0, 20, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; padding: 5px 8px; max-width: 12em; color-scheme: dark; }
.cl-ruolo-captain { color: #0b2a1c; background: var(--lime); border-color: var(--lime); }
.cl-ruolo-reserve { color: var(--ink-soft); }
.cl-proposta-squadre { border-color: rgba(215, 255, 33, 0.55); }
.cl-componenti-squadra { display: block; font-size: 0.84rem; color: var(--ink-soft); }
.cl-partite, .cl-partite-gestione { list-style: none; margin: 0; padding: 0; }
.cl-partite > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cl-partite > li:last-child { border-bottom: 0; }
.cl-partita-nome { flex: 1 1 100%; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mint); }
.cl-partita-chi { flex: 1 1 220px; min-width: 0; color: #fff; }
.cl-incontro-partite { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.cl-incontro-partite .cl-partite { margin-top: 6px; }
.cl-partite-gestione { display: grid; gap: 12px; }
.cl-partita { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.cl-partita.is-done { border-color: rgba(166, 242, 203, 0.45); }
.cl-partita h3 { margin: 0 0 4px; }
.cl-partita p { margin: 4px 0; }

/* L'esca per i programmi che riempiono i moduli (C13): fuori dallo schermo, mai vista da una persona. */
.cl-esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cl-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
  .cl-griglia-tre, .cl-griglia-quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-qr { width: 150px; height: 150px; }
  .cl-immagine-anteprima.cl-anteprima-foto { width: 140px; height: 140px; }
}
@media (max-width: 520px) {
  .cl-griglia-due, .cl-griglia-tre, .cl-griglia-quattro { grid-template-columns: 1fr; }
}

/* Le pagine dei club sono corte: il piè di pagina resta in fondo alla finestra invece di salire a metà. */
body:has(> main.cl) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body:has(> main.cl) > main.cl { flex: 1 0 auto; }