/* Foglio di stile di Tenzone. Nome versionato: la cache e' lunga e immutabile,
   una modifica passa da un nuovo nome (stile.v2.css) e da un deploy.

   IDENTITA' VISIVA (spec 13.3): palette dichiarata qui sotto in variabili,
   logotipo TESTUALE (.marchio), favicon in favicon.v1.svg. Nient'altro: nessun
   simbolo disegnato, nessun lavoro di design oltre questo.

   IL LOGOTIPO E' NEL SERIF DEL SITO, NON IN INTER, ed e' una scelta. Inter sta
   nel repo per le OG image, dove lo usa resvg; portarlo anche sulla pagina
   vorrebbe dire servire un TTF da 420 KB per una parola sola, perche' in questo
   repo non c'e' una catena di sottoinsiemi e non se ne aggiunge una per un
   logotipo. La card e la pagina sono due supporti diversi e non devono per
   forza condividere il carattere.

   ZERO CROSS-BRANDING (D2): nessun colore, font, nome o link Lumantis qui
   dentro. IBM Plex, che e' il font del marchio Lumantis, non compare.

   Le classi q0..q100 in coda danno la larghezza dei due tratti della fune.
   Sono generate una volta e committate perche' la CSP e' style-src 'self': un
   attributo style="width:42%" sarebbe stile inline, e verrebbe bloccato. */

:root {
  --sfondo: #fbfaf7;
  --testo: #1c1b19;
  --minuto: #6b6862;
  --bordo: #ded9d0;
  --lato-a: #a83a1f;
  --lato-b: #1e5a96;
  --lato-a-scuro: #4a1b0c;
  --lato-b-scuro: #042c53;
  /* Toni CHIARI della stessa famiglia per le righe secondarie sui fondi pieni.
     Il concept diceva "il tono piu' scuro della stessa famiglia": misurato, da'
     2,26:1 sul lato A e 1,98:1 sul lato B, cioe' illeggibile. L'intenzione era
     "stessa famiglia, mai grigio generico" e resta; cambia il verso, perche' su
     un fondo pieno scuro si schiarisce, non si scurisce. */
  --lato-a-chiaro: #f5c4b3;
  --lato-b-chiaro: #b5d4f4;
  --palco: #1c1b19;
  --accento: #b8860b;
  /* Colori della fune disegnata. Sono DUPLICATI in src/web/componenti.ts perche'
     l'SVG li scrive come attributi letterali: resvg non conosce le custom
     properties e con var() disegna nero, in silenzio (misurato). Una prova lega
     i due elenchi, cosi' non possono divergere. */
  --canapa: #c9b99a;
  --treccia: #6b5b43;
  --nodo: #4a4038;
  --nodo-cuore: #d8cbb4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.5 Georgia, "Times New Roman", serif;
  max-width: 52rem;
  margin-inline: auto;
}

a { color: inherit; }

.testa { padding: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--bordo); }
.marchio {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.06em;
  /* La riga sotto la parola richiama la fune: due tratti, i due lati. */
  border-bottom: 3px solid var(--lato-a);
  padding-bottom: 0.1rem;
}
.claim { margin: 0.2rem 0 0.6rem; color: var(--minuto); }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0 0 0.8rem; }

main { padding: 1.5rem 0; }
h1 { font-size: 1.6rem; margin: 0 0 0.6rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.minuta { color: var(--minuto); font-size: 0.85rem; }
.vuoto { color: var(--minuto); font-style: italic; }

/* --- La pagina di sfida, Delta 1.4.33: sette blocchi in ordine. --- */

/* Blocco 1, la fune su tre righe. Le tre righe condividono la stessa griglia a
   tre colonne: cosi' il nome, il totale e la meta' di barra di un lato stanno
   incolonnati, che e' l'unica cosa che li lega visivamente. */
.fune-nomi,
.fune-totali,
.riga-stato {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.4rem 0;
}
.fune-nomi .nome { font-weight: bold; font-size: 1.15rem; }
.fune-nomi .nome-a { color: var(--lato-a); }
.fune-nomi .nome-b { color: var(--lato-b); text-align: right; }
.fune-nomi .domanda { color: var(--minuto); font-size: 0.9rem; text-align: center; }
/* Gli stendardi ai due capi della fune, in home e in /c/{slug}. Qui il fondo e'
   chiaro, quindi non serve l'ombra che serve sul fondo pieno del territorio:
   basta il bordo scuro che lo stendardo porta gia' dentro il disegno. */
.fune-nomi .nome { display: flex; align-items: center; gap: 0.4rem; }
.fune-nomi .nome-b { justify-content: flex-end; }
.fune-nomi .stendardo-comune { filter: none; }

.fune-totali .totale strong {
  display: block;
  font-size: 2.4rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fune-totali .totale-a { color: var(--lato-a); grid-column: 1; }
/* La riga dei totali ha DUE figli, ma la griglia condivisa ha tre colonne: senza
   questa collocazione esplicita il totale di destra finisce nella colonna di
   MEZZO, quella della domanda, e non sotto il nome del proprio lato. Era il
   difetto: non un text-align mancante - c'era gia' - ma la cella sbagliata. */
.fune-totali .totale-b { color: var(--lato-b); text-align: right; grid-column: 3; }
.fune-totali .minuta { color: var(--minuto); }

/* Blocco 2, riga di stato: distinti ai capi, chiusura al centro. */
.riga-stato { font-size: 0.9rem; color: var(--minuto); }
.riga-stato .distinti-a { grid-column: 1; }
.riga-stato .distinti-b { text-align: right; grid-column: 3; }
.riga-stato .chiusura { text-align: center; white-space: nowrap; font-weight: bold; color: var(--testo); }

/* Step 1 dell'arco 03: le parole che rendono visibile cio' che il prodotto gia'
   fa. La spiegazione della corsa sta SOTTO la riga di stato, cioe' attaccata al
   conto alla rovescia che generava il malinteso. */
.corsa-spiega { margin: 0.2rem 0 1rem; text-align: center; }
.innesco { margin: 0.8rem 0 0.2rem; }
.invito-apri { margin: 0.2rem 0 1rem; }
.invito-apri a { font-weight: bold; }

/* Blocco 3, i due bottoni. Il <summary> E' il bottone: si stila come tale e
   perde il triangolino, perche' quello che si apre non e' un dettaglio ma il
   modulo di pagamento. Nessuno script: <details name> chiude l'altro lato. */
.bottoni-lato { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0; }
.scelta { flex: 1 1 16rem; }
.scelta > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  text-align: center;
  font-size: 1.05rem;
  font-weight: bold;
  color: #fff;
  padding: 0.9rem 1rem;
  border-radius: 0.3rem;
}
.scelta > summary::-webkit-details-marker { display: none; }
.scelta.lato-a > summary { background: var(--lato-a); }
.scelta.lato-b > summary { background: var(--lato-b); }
.scelta[open] > .modulo {
  margin-top: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--bordo);
  background: #fff;
}

/* Blocco 4, il muro aperto: il testo grande e' la cosa per cui si paga. */
.sfotto .testo { font-size: 1.15rem; margin: 0 0 0.2rem; }
.tutti-sfotti { margin: 0.8rem 0 0; }

/* Blocco 6, la classifica: due colonne, separata dal flusso. */
.classifica { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.classifica .colonna { flex: 1 1 14rem; border-top: 3px solid var(--bordo); padding-top: 0.6rem; }
.classifica h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.classifica ol { margin: 0; padding-left: 1.2rem; }
.classifica li { display: flex; justify-content: space-between; gap: 1rem; }
.classifica .quanto { font-variant-numeric: tabular-nums; color: var(--minuto); }

/* Blocco 7, i dettagli: in fondo, per chi li vuole. */
.dettagli h3 { font-size: 1rem; margin: 0 0 0.4rem; }

/* Sotto i 30rem le tre colonne diventano illeggibili: i due lati si impilano e
   la chiusura passa in mezzo, larga. */
@media (max-width: 30rem) {
  .fune-totali .totale strong { font-size: 1.8rem; }
  .riga-stato { grid-template-columns: 1fr 1fr; }
  .riga-stato .chiusura { grid-column: 1 / -1; grid-row: 1; }
  /* Qui le colonne sono due: senza questa riga il "grid-column: 3" di sopra
     creerebbe una terza colonna implicita e spingerebbe fuori il secondo lato. */
  .riga-stato .distinti-b { grid-column: 2; }
}

/* la fune */
/* La fune disegnata. Larghezza piena, altezza dal viewBox: preserveAspectRatio
   resta quello di default (uniforme), cosi' il nodo non si deforma in ellisse
   sugli schermi larghi. */
.fune { display: block; width: 100%; height: auto; margin: 0.5rem 0 0.2rem; }
.fune-ferma { text-align: center; margin: 0 0 0.8rem; }

.lati { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.lato { flex: 1 1 18rem; border-top: 3px solid var(--bordo); padding-top: 0.8rem; }
.lato-a { border-top-color: var(--lato-a); }
.lato-b { border-top-color: var(--lato-b); }

.contatori { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; margin: 0 0 1rem; }
.contatori dt { color: var(--minuto); font-size: 0.9rem; }
.contatori dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.modulo p { margin: 0 0 0.8rem; }
.modulo label { display: block; font-weight: bold; font-size: 0.95rem; }
.modulo input[type="text"],
.modulo input[type="number"],
.modulo input[type="email"],
.modulo textarea {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--bordo);
  background: #fff;
  font: inherit;
}
.modulo .spunta label { display: inline; font-weight: normal; }
.modulo .spunta input { margin-right: 0.4rem; }
.modulo .minuta { display: block; }
.modulo button {
  font: inherit;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--testo);
  background: var(--accento);
  color: #fff;
  cursor: pointer;
}

/* Segnalazione (spec 5.6). Il <details> si apre senza JavaScript: sotto CSP
   script-src 'self' e su un sito che deve funzionare a JS spento, il canale con
   cui si segnala un contenuto illecito non puo' dipendere da uno script. */
.segnala { margin-top: 0.6rem; }
.segnala > summary {
  cursor: pointer;
  color: var(--minuto);
  font-size: 0.85rem;
}
.segnala > .modulo {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--bordo);
}
.segnala-esito .minuta code { word-break: break-all; }
.motivazione { border-left: 3px solid var(--bordo); padding-left: 0.8rem; }

.elenco-sfide { list-style: none; padding: 0; }
.elenco-sfide li { margin: 0 0 1.2rem; }
.feed { list-style: none; padding: 0; }

.muro { list-style: none; padding: 0; }
.sfotto { border-left: 4px solid var(--bordo); padding-left: 0.8rem; margin: 0 0 1rem; }
.sfotto.lato-a { border-left-color: var(--lato-a); }
.sfotto.lato-b { border-left-color: var(--lato-b); }

.tabella { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--bordo); padding: 0.4rem; text-align: left; }

.risultati { display: block; font-size: 0.9rem; color: var(--minuto); }
.risultati button {
  display: block;
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: none;
  padding: 0.15rem 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.piede { border-top: 1px solid var(--bordo); padding-top: 1rem; color: var(--minuto); font-size: 0.85rem; }
.piede a { color: inherit; }


/* --- Il manifesto (Step 2-bis) ---------------------------------------------
   La pagina di sfida e' un manifesto affisso in piazza. I tre blocchi alti
   escono dal margine orizzontale del corpo con un margine negativo di 1rem,
   che e' esattamente il padding del corpo: cosi' arrivano al bordo della
   colonna senza toccare il layout delle altre pagine. */
.manifesto > .territori,
.manifesto > .palco,
.manifesto > .bottoni-lato { margin-inline: -1rem; }

.territori { display: grid; grid-template-columns: 1fr 1fr; }
.territorio { padding: 1.6rem 1.2rem 1.2rem; color: #fff; }
.territorio.lato-a { background: var(--lato-a); }
.territorio.lato-b { background: var(--lato-b); text-align: right; }
.testa-territorio { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.territorio.lato-b .testa-territorio { justify-content: flex-end; }
/* L'emblema del comune, al posto del segnaposto dello Step 2-bis.
   La classe e' `stendardo-comune` e non `stendardo`: `.stendardo` e' gia' il
   paragrafo che dice a chi e' andato lo stendardo della settimana, e riusare
   il nome faceva incolonnare quel testo dentro 1.6rem.
   `flex: none` perche' il contenitore e' un flex e un SVG senza larghezza
   intrinseca fissata si comprime fino a sparire quando il nome accanto e'
   lungo (San Benedetto del Tronto). L'ombra e' l'unica cosa che lo stacca dal
   fondo pieno del territorio quando campo e fondo sono vicini di tinta. */
.stendardo-comune {
  flex: none; display: block; width: 1.6rem; height: 2.13rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.etichetta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.nome-territorio { font-size: 1.7rem; font-weight: bold; line-height: 1.05; margin: 0.2rem 0 0; }
/* Il punteggio e' la cosa piu' grande della pagina: in una gara si legge da tre
   metri. Circa tre volte il nome. */
.punteggio { font-size: 5rem; font-weight: bold; line-height: 0.9; margin: 0.6rem 0 0; letter-spacing: -0.02em; }
.sotto { font-size: 0.9rem; margin: 0.3rem 0 0; opacity: 0.9; }
/* Righe secondarie: tono piu' scuro della STESSA famiglia, mai grigio. */
.persone { font-size: 0.8rem; margin: 0.1rem 0 0; color: var(--lato-a-chiaro); }
.territorio.lato-b .persone { color: var(--lato-b-chiaro); }

.palco { background: var(--palco); color: var(--canapa); padding: 1.3rem 1.2rem 1rem; }
.domanda-palco {
  text-align: center; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 0.6rem; opacity: 0.75;
}
.palco .fune { margin: 0; }
.palco .fune-ferma { text-align: center; color: var(--canapa); opacity: 0.85; margin: 0.4rem 0 0; font-size: 0.85rem; }
.stato-palco {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.9rem;
}
.stato-palco .lato-b { text-align: right; }
.stato-palco .chiude { text-align: center; font-size: 1.05rem; color: #fff; font-weight: bold; white-space: nowrap; }
.stato-palco .quota.lato-a { color: #f0997b; }
.stato-palco .quota.lato-b { color: #85b7eb; }

.manifesto > .bottoni-lato { gap: 0; margin-top: 0; margin-bottom: 1.4rem; }
.manifesto .scelta > summary { border-radius: 0; padding: 1.2rem 1rem; font-size: 1.1rem; }
.manifesto .scelta.lato-a > summary { background: var(--lato-a-scuro); }
.manifesto .scelta.lato-b > summary { background: var(--lato-b-scuro); }
.manifesto .scelta[open] > .modulo { margin: 0 1rem 1rem; }

/* Il muro come dialogo: due voci che si rispondono. */
.manifesto .muro .sfotto { display: flex; border: 0; padding: 0; margin: 0 0 0.9rem; }
.manifesto .muro .sfotto.lato-a { justify-content: flex-start; }
.manifesto .muro .sfotto.lato-b { justify-content: flex-end; }
.manifesto .balloon {
  max-width: 78%; background: #fff; padding: 0.7rem 0.9rem;
  border: 1px solid var(--bordo);
}
.manifesto .sfotto.lato-a .balloon { border-left: 6px solid var(--lato-a); }
.manifesto .sfotto.lato-b .balloon { border-right: 6px solid var(--lato-b); text-align: right; }
/* Il testo lungo va a capo dentro il balloon invece di allargare la riga: e'
   agli estremi di lunghezza che il difetto si vede, non nel mezzo. */
.manifesto .balloon .testo { font-size: 1.05rem; margin: 0 0 0.2rem; overflow-wrap: anywhere; }
.manifesto .balloon .firma { font-style: italic; }
.tutti-sfotti { text-align: center; margin: 0.6rem 0 0; }

.manifesto .classifica h3.lato-a, .manifesto .colonna.lato-a h3 { color: var(--lato-a); }
.manifesto .colonna.lato-b h3 { color: var(--lato-b); }
.piede-manifesto { border-top: 1px solid var(--bordo); padding-top: 0.8rem; margin-top: 1.6rem; }

/* Sotto i 560px i territori si impilano e il lato B torna a sinistra. */
@media (max-width: 35rem) {
  .territori { grid-template-columns: 1fr; }
  .territorio.lato-b { text-align: left; }
  .territorio.lato-b .testa-territorio { justify-content: flex-start; }
  .punteggio { font-size: 4rem; }
  .manifesto > .bottoni-lato { display: block; }
  .manifesto .scelta { margin-bottom: 0; }
}