/* 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: #9c2b21;
  --lato-b: #1f4e79;
  --accento: #b8860b;
}

* { 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 fune */
.fune {
  display: flex;
  height: 1.4rem;
  border: 1px solid var(--bordo);
  border-radius: 0.7rem;
  overflow: hidden;
  margin: 0.6rem 0;
  background: #fff;
}
.fune-a { background: var(--lato-a); }
.fune-b { background: var(--lato-b); }

.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; }

/* larghezze della fune, generate: vedi nota in testa al file */
.fune > .q0 { width: 0%; }
.fune > .q1 { width: 1%; }
.fune > .q2 { width: 2%; }
.fune > .q3 { width: 3%; }
.fune > .q4 { width: 4%; }
.fune > .q5 { width: 5%; }
.fune > .q6 { width: 6%; }
.fune > .q7 { width: 7%; }
.fune > .q8 { width: 8%; }
.fune > .q9 { width: 9%; }
.fune > .q10 { width: 10%; }
.fune > .q11 { width: 11%; }
.fune > .q12 { width: 12%; }
.fune > .q13 { width: 13%; }
.fune > .q14 { width: 14%; }
.fune > .q15 { width: 15%; }
.fune > .q16 { width: 16%; }
.fune > .q17 { width: 17%; }
.fune > .q18 { width: 18%; }
.fune > .q19 { width: 19%; }
.fune > .q20 { width: 20%; }
.fune > .q21 { width: 21%; }
.fune > .q22 { width: 22%; }
.fune > .q23 { width: 23%; }
.fune > .q24 { width: 24%; }
.fune > .q25 { width: 25%; }
.fune > .q26 { width: 26%; }
.fune > .q27 { width: 27%; }
.fune > .q28 { width: 28%; }
.fune > .q29 { width: 29%; }
.fune > .q30 { width: 30%; }
.fune > .q31 { width: 31%; }
.fune > .q32 { width: 32%; }
.fune > .q33 { width: 33%; }
.fune > .q34 { width: 34%; }
.fune > .q35 { width: 35%; }
.fune > .q36 { width: 36%; }
.fune > .q37 { width: 37%; }
.fune > .q38 { width: 38%; }
.fune > .q39 { width: 39%; }
.fune > .q40 { width: 40%; }
.fune > .q41 { width: 41%; }
.fune > .q42 { width: 42%; }
.fune > .q43 { width: 43%; }
.fune > .q44 { width: 44%; }
.fune > .q45 { width: 45%; }
.fune > .q46 { width: 46%; }
.fune > .q47 { width: 47%; }
.fune > .q48 { width: 48%; }
.fune > .q49 { width: 49%; }
.fune > .q50 { width: 50%; }
.fune > .q51 { width: 51%; }
.fune > .q52 { width: 52%; }
.fune > .q53 { width: 53%; }
.fune > .q54 { width: 54%; }
.fune > .q55 { width: 55%; }
.fune > .q56 { width: 56%; }
.fune > .q57 { width: 57%; }
.fune > .q58 { width: 58%; }
.fune > .q59 { width: 59%; }
.fune > .q60 { width: 60%; }
.fune > .q61 { width: 61%; }
.fune > .q62 { width: 62%; }
.fune > .q63 { width: 63%; }
.fune > .q64 { width: 64%; }
.fune > .q65 { width: 65%; }
.fune > .q66 { width: 66%; }
.fune > .q67 { width: 67%; }
.fune > .q68 { width: 68%; }
.fune > .q69 { width: 69%; }
.fune > .q70 { width: 70%; }
.fune > .q71 { width: 71%; }
.fune > .q72 { width: 72%; }
.fune > .q73 { width: 73%; }
.fune > .q74 { width: 74%; }
.fune > .q75 { width: 75%; }
.fune > .q76 { width: 76%; }
.fune > .q77 { width: 77%; }
.fune > .q78 { width: 78%; }
.fune > .q79 { width: 79%; }
.fune > .q80 { width: 80%; }
.fune > .q81 { width: 81%; }
.fune > .q82 { width: 82%; }
.fune > .q83 { width: 83%; }
.fune > .q84 { width: 84%; }
.fune > .q85 { width: 85%; }
.fune > .q86 { width: 86%; }
.fune > .q87 { width: 87%; }
.fune > .q88 { width: 88%; }
.fune > .q89 { width: 89%; }
.fune > .q90 { width: 90%; }
.fune > .q91 { width: 91%; }
.fune > .q92 { width: 92%; }
.fune > .q93 { width: 93%; }
.fune > .q94 { width: 94%; }
.fune > .q95 { width: 95%; }
.fune > .q96 { width: 96%; }
.fune > .q97 { width: 97%; }
.fune > .q98 { width: 98%; }
.fune > .q99 { width: 99%; }
.fune > .q100 { width: 100%; }