/* Una colonna sola, allineata a sinistra: in cima cosa gira adesso, sotto i giorni dal più
   recente, ogni rilascio una riga con l'ora a margine. I colori sono quelli del gestionale
   (frontend/src/stili.css) e dei marchi (web/src/styles/marchio.css). */
:root {
  --fondo: #fdfaf6;
  --carta: #ffffff;
  --inchiostro: #14100d;
  --tenue: #6b615a;
  --linea: #e8d5c4;
  --accento: #b05a2a;
  --a-gestionale: #b05a2a;
  --a-siti: #634a3a;
  --a-muro: #4a6350;
  --a-posta: #2f7f8c;
  --tipo-titolo: "Jost", system-ui, sans-serif;
  --tipo-sezione: "League Spartan", system-ui, sans-serif;
  --tipo-testo: "Open Sans", system-ui, sans-serif;
  --tipo-codice: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14100d;
    --carta: #1e1915;
    --inchiostro: #f6ecdf;
    --tenue: #a99b8d;
    --linea: #3a2f27;
    --accento: #e08a55;
    --a-gestionale: #e08a55;
    --a-siti: #d5c09b;
    --a-muro: #8fb39a;
    --a-posta: #56a8b5;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--tipo-testo);
  font-size: 16px;
  line-height: 1.55;
}
.pagina {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 2.5rem 4rem;
}
/* Le due viste della pagina: l'elenco e un articolo. Una sola è accesa. */
.vista { display: flex; flex-direction: column; gap: 2rem; }
[hidden] { display: none !important; }
a { color: var(--accento); }

.testata { display: flex; flex-direction: column; gap: 0.5rem; }
.testata h1 {
  margin: 0;
  font-family: var(--tipo-titolo);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.1;
  text-wrap: balance;
}
.testata p { margin: 0; color: var(--tenue); max-width: 38rem; }

.etichetta {
  margin: 0;
  font-family: var(--tipo-sezione);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.adesso {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.adesso dl { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.adesso .riga {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: baseline;
}
.adesso dt { font-family: var(--tipo-titolo); font-weight: 600; }
.adesso dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; align-items: baseline; }
.adesso .da { color: var(--tenue); font-size: 0.88rem; }

.ramo {
  font-family: var(--tipo-codice);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.filtri { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filtri button {
  font: inherit;
  font-size: 0.88rem;
  color: var(--inchiostro);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.filtri button:hover { border-color: var(--tenue); }
.filtri button[aria-pressed="true"] {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--fondo);
}
.filtri button:focus-visible,
a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.conto { color: var(--tenue); font-size: 0.88rem; margin-left: auto; font-variant-numeric: tabular-nums; }

.punto {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  flex: none;
  background: var(--tenue);
}
.punto[data-area="gestionale"] { background: var(--a-gestionale); }
.punto[data-area="siti"] { background: var(--a-siti); }
.punto[data-area="muro"] { background: var(--a-muro); }
.punto[data-area="posta"] { background: var(--a-posta); }

.giorni { display: flex; flex-direction: column; gap: 2.25rem; }
.giorno { display: flex; flex-direction: column; gap: 1.1rem; }
.giorno h2 {
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--tipo-sezione);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
.giorno ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.rilascio {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 0.9rem;
}
.rilascio .ora {
  color: var(--tenue);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.12rem;
}
.rilascio .corpo { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rilascio h3 {
  margin: 0;
  font-family: var(--tipo-titolo);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.rilascio p { margin: 0; font-size: 0.94rem; max-width: 36rem; }
.dove {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: center;
  color: var(--tenue);
  padding-top: 0.1rem;
}
.area {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--tipo-sezione);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rilascio .ramo { font-size: 0.74rem; }
.rilascio .rimando { align-self: flex-start; font-size: 0.82rem; }

.vuoto { color: var(--tenue); margin: 0; }

/* In evidenza: una scheda per articolo. */
.evidenza { display: flex; flex-direction: column; gap: 0.8rem; }
.schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.8rem; }
.scheda {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.15rem;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.scheda:hover { border-color: var(--accento); }
.scheda .quando { color: var(--tenue); font-size: 0.8rem; }
.scheda h3 {
  margin: 0;
  font-family: var(--tipo-titolo);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  text-wrap: balance;
}
.scheda p { margin: 0; font-size: 0.92rem; }
.scheda .conta { margin-top: auto; padding-top: 0.35rem; color: var(--accento); font-size: 0.8rem; }
.scheda.in-prova { border-style: dashed; border-color: var(--a-posta); }
.scheda.in-prova .conta { color: var(--a-posta); }

/* L'avviso in testa a un articolo in prova. */
.avviso {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--a-posta);
  border-radius: 6px;
  background: var(--carta);
}
.avviso strong {
  font-family: var(--tipo-sezione);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-posta);
}
.avviso p { margin: 0; font-size: 0.94rem; }
.avviso a { align-self: flex-start; }
.avviso-dove { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding-top: 0.4rem; }
.avviso-dove > div { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.avviso-dove .ramo { font-size: 0.95rem; }
/* Il QR resta nero su bianco anche col tema scuro: chi lo inquadra ha bisogno del contrasto. */
.qr { width: 132px; height: 132px; padding: 6px; background: #ffffff; border-radius: 4px; }
.gesto { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.gesto p { margin: 0; font-size: 0.94rem; }
.passi-gesto { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.94rem; }
.art-sezione ol.passi { counter-reset: passo; gap: 0.9rem; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.art-sezione ol.passi li { counter-increment: passo; display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.1rem 1.2rem; }
.art-sezione ol.passi strong { font-family: var(--tipo-titolo); font-weight: 600; font-size: 1.04rem; line-height: 1.35; }
.art-sezione ol.passi strong::before { content: counter(passo) ". "; color: var(--tenue); }
.art-sezione ol.passi span { font-size: 0.94rem; }
@media (max-width: 40rem) { .art-sezione ol.passi li { grid-template-columns: minmax(0, 1fr); } }

.tutti { display: flex; flex-direction: column; gap: 0.8rem; }
.tutti .giorni { padding-top: 1rem; }

/* L'articolo. */
.indietro { align-self: flex-start; font-size: 0.92rem; text-decoration: none; }
.indietro:hover { text-decoration: underline; }
.art-testa { display: flex; flex-direction: column; gap: 0.6rem; }
.art-testa h1 {
  margin: 0;
  font-family: var(--tipo-titolo);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.15;
  text-wrap: balance;
}
.art-testa .apre { margin: 0; max-width: 38rem; font-size: 1.08rem; }
.art-sezione { display: flex; flex-direction: column; gap: 1rem; }
.art-sezione h2 {
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--tipo-sezione);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
.art-sezione > ul, .art-rilasci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.art-sezione > ul { gap: 1.1rem; }
.art-sezione > ul > li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.1rem 1.2rem; }
.art-sezione > ul > li > strong { font-family: var(--tipo-titolo); font-weight: 600; font-size: 1.04rem; line-height: 1.35; }
.art-sezione > ul > li > span { font-size: 0.94rem; }
.passi-gesto { list-style: decimal; }
.passi-gesto li::marker { color: var(--tenue); }
.art-rilasci { gap: 0.6rem; }
.art-rilasci li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 1.2rem; }
.art-rilasci .ora { color: var(--tenue); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.art-rilasci .cosa { font-size: 0.94rem; }
.art-rilasci .ramo { grid-column: 2; color: var(--tenue); font-size: 0.74rem; }

@media (max-width: 40rem) {
  .art-sezione > ul > li, .art-rilasci li { grid-template-columns: minmax(0, 1fr); }
  .art-rilasci .ramo { grid-column: 1; }
}

@media (max-width: 30rem) {
  .adesso .riga { grid-template-columns: minmax(0, 1fr); }
  .rilascio { grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0 0.6rem; }
  .conto { margin-left: 0; flex-basis: 100%; }
}

/* L'ingresso e chi è dentro. */
.modulo { display: flex; flex-direction: column; gap: 0.6rem; max-width: 24rem; }
.modulo p { margin: 0; color: var(--tenue); font-size: 0.94rem; }
.modulo label { font-family: var(--tipo-sezione); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.modulo input {
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--carta);
  color: var(--inchiostro);
}
.modulo input:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.modulo button, .chi button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--inchiostro);
  background: var(--inchiostro);
  color: var(--fondo);
  align-self: flex-start;
}
.modulo button.secondario, .chi button { background: transparent; color: var(--inchiostro); border-color: var(--linea); }
.modulo button:focus-visible, .chi button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.esito { margin: 0; min-height: 1.5em; color: var(--accento); }
.chi { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; color: var(--tenue); font-size: 0.88rem; }
.chi button { padding: 0.25rem 0.8rem; font-size: 0.85rem; }