/* components.css — bottoni, form, fasi del percorso, schede, avvisi */

/* ══ Bottoni — otto stati ═══════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: var(--space-sm) var(--space-xl);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-body);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;          /* le etichette cliccabili non vanno mai a capo */
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:hover, .btn.is-hover { background: var(--color-accent-2); color: var(--color-on-accent); }
/* Alla pressione il bottone rientra appena, non si abbassa: il rientro
   da' la sensazione di una superficie che cede sotto il dito, lo
   spostamento verticale quella di un elemento che scivola. */
.btn:active, .btn.is-active { transform: scale(0.982); }
.btn:focus-visible, .btn.is-focus { outline: var(--rule-firm) solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  background: var(--color-paper-3);
  color: var(--color-neutral);
  cursor: not-allowed;
  transform: none;
}
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"]::before {
  content: "";
  width: 0.85em; height: 0.85em;
  border: var(--rule-firm) solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
}
.btn[data-state="error"]   { background: var(--color-error); }
.btn[data-state="success"] { background: var(--color-ok); }

@keyframes spin { to { transform: rotate(360deg); } }

.btn--ghost {
  background: transparent;
  border-color: var(--color-field);
  color: var(--color-ink);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--wide { width: 100%; }

/* Il richiamo tipografico: nessun riquadro, solo una linea che si ispessisce. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-block-end: var(--rule-hair) solid var(--color-rule-firm);
  padding-block-end: var(--space-3xs);
  transition: border-color var(--dur-micro) var(--ease-out),
              border-width var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.link-arrow:hover { color: var(--color-accent); border-color: var(--color-accent); }
.link-arrow span[aria-hidden] { transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover span[aria-hidden] { transform: translateX(3px); }
}

/* Variante sopra le fotografie */
.link-arrow--over { color: var(--color-on-ink); border-block-end-color: var(--color-over-rule-2); }
.link-arrow--over:hover { color: var(--color-on-ink); border-block-end-color: var(--color-on-ink); }

/* ══ Fasi del percorso — la spina dorsale della home ═════════
   La testa di sezione resta agganciata mentre le fasi scorrono, con una
   rotaia che segna a che punto si e'. E' la parte che al committente
   funzionava: qui guadagna un ancoraggio, non un restyling.            */

.process__grid { display: grid; gap: var(--space-xl); }

.process__head { display: grid; gap: var(--space-sm); }
.process__head p { color: var(--color-muted); max-width: var(--measure-tight); }

.process__rail { display: none; }

/* Un filetto marcato apre il gruppo, capelli fra una fase e l'altra:
   la gerarchia la fa il primo tratto, non quattro tratti uguali. */
.stages {
  display: grid;
  gap: 0;
  border-block-start: var(--rule-hair) solid var(--color-ink);
}

.stage {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-xl);
  border-block-end: var(--rule-hair) solid var(--color-hairline);
}
.stage:last-child { border-block-end: 0; }

/* Rubrica: i numeri delle fasi prendono il rosso del nocciolo, come
   una capolettera rubricata. E' l'unico rosso della pagina a riposo. */
.stage__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--color-mark);
}
.stage__title { font-size: var(--text-2xl); }
.stage__body { color: var(--color-muted); max-width: var(--measure); }
.stage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}

@media (min-width: 64rem) {
  .process__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }
  .process__head {
    position: sticky;
    top: calc(var(--strip-h) + var(--bar-h) + var(--space-xl));
    align-self: start;
  }

  .process__rail {
    display: grid;
    gap: 0;
    margin-block-start: var(--space-lg);
    list-style: none;
    padding: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
  .process__rail li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-xs);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-sm);
    color: var(--color-neutral);
    transition: color var(--dur-short) var(--ease-out);
  }
  .process__rail span:first-child {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--track-label);
    padding-block-start: 0.2em;
  }
  .process__rail li.is-now { color: var(--color-ink); }
  .process__rail li.is-now span:first-child { color: var(--color-mark); }

  .stage {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    column-gap: var(--space-2xl);
    padding-block: var(--space-2xl);
  }
  .stage__no, .stage__title, .stage__body { grid-column: 1; }
  .stage__meta {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    margin-block-start: var(--space-3xs);
  }
}

/* Rivelazione: una sola entrata orchestrata, orizzontale, sulle fasi. */
/* Una risalita di otto pixel, lunga. Uno scarto orizzontale si nota;
   una risalita breve e lenta si sente e basta — che e' il punto. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; }
  .js .reveal.is-in { transition: opacity 150ms linear; }
}

/* ══ Schede ═════════════════════════════════════════════════ */

.cards { display: grid; gap: var(--space-lg); }

/* Griglia deliberatamente irregolare: niente tre colonne uguali. */
@media (min-width: 48rem) {
  .cards--service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .cards--service { grid-template-columns: 1.25fr 1fr 1fr; }
  .cards--service > :first-child { grid-row: span 2; }
}

.card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.card__title { font-size: var(--text-xl); }
.card__body { color: var(--color-muted); font-size: var(--text-sm); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.card__foot { margin-block-start: var(--space-xs); }

/* ══ Schede degli articoli ══════════════════════════════════
   Griglia, non elenco. La prima scheda occupa due colonne e tiene
   l'immagine piu' grande: senza quella rottura sarebbero tre riquadri
   identici in fila, che e' il modo piu' rapido per far sembrare un blog
   una vetrina di plugin.                                              */

.notes {
  display: grid;
  gap: var(--space-xl);
  margin-block-start: var(--space-xl);
}

.scheda {
  position: relative;
  display: grid;
  gap: 0;
  align-content: start;
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--dur-short) var(--ease-out);
}

.scheda__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-paper-2);
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
}
.scheda__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

/* Pannello al posto della fotografia, tinto sulla categoria. */
.scheda__slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.scheda__media[data-cat="fit"]        { background-color: var(--color-tint); }
.scheda__media[data-cat="proteiche"]  { background-color: var(--color-sand); }
.scheda__media[data-cat="nutrizione"] { background-color: var(--color-accent-tint); }

.scheda__corpo {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-lg);
}

.scheda__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.scheda__cat { color: var(--color-mark); }
.scheda__cat::before,
.scheda__tempo::before { content: "· "; color: var(--color-rule-firm); }
.scheda__tempo { color: var(--color-neutral); }

.scheda__titolo { font-size: var(--text-xl); }
.scheda__titolo a { text-decoration: none; }
.scheda__titolo a:hover { color: var(--color-accent-deep); }

/* Tutta la scheda e' cliccabile, ma il nome del collegamento resta il
   titolo: niente link vuoti per chi naviga con la sintesi vocale. */
.scheda__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scheda__estratto { color: var(--color-muted); font-size: var(--text-sm); }

/* Entrata scaglionata: le schede non compaiono tutte insieme ma a
   sessanta millisecondi l'una dall'altra. E' l'unica animazione di
   questa pagina, e si spegne da sola con prefers-reduced-motion
   perche' la regola .reveal che la governa lo prevede gia'. */
.js .notes .scheda.is-in {
  transition:
    opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 60ms),
    transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 60ms),
    border-color var(--dur-micro) var(--ease-out);
}

.scheda:focus-within { border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { border-color: var(--color-field); }
  .scheda:hover .scheda__media img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .scheda__media img { transition: none; }
  .scheda:hover .scheda__media img { transform: none; }
}

@media (min-width: 48rem) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Solo sull'indice del blog la prima scheda occupa due colonne.
     Nella sezione «Dal blog» della home le schede sono tre: lo span
     lascerebbe una riga spaiata invece di dare risalto a qualcosa. */
  .notes--indice .scheda:first-child { grid-column: span 2; }
  .notes--indice .scheda:first-child .scheda__media { aspect-ratio: 21 / 9; }
  .notes--indice .scheda:first-child .scheda__corpo { padding: var(--space-xl); }
  .notes--indice .scheda:first-child .scheda__titolo { font-size: var(--text-2xl); max-width: 26ch; }
  .notes--indice .scheda:first-child .scheda__estratto { font-size: var(--text-base); max-width: var(--measure); }
}

/* ══ Ritratto e credenziali ═════════════════════════════════ */

.portrait {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.portrait__figure { margin: 0; }
.portrait__figure img { border-radius: var(--radius-lg); width: 100%; }
.portrait__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: var(--rule-hair) dashed var(--color-rule-firm);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-neutral);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-md);
}

.credentials { list-style: none; padding: 0; display: grid; gap: 0; }
.credentials li {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-hairline);
}
.credentials dt, .credentials .credentials__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}

@media (min-width: 60rem) {
  .portrait { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); }
}

/* ══ Domande frequenti ══════════════════════════════════════ */

.faq { display: grid; gap: 0; }
.faq__item {
  border-block-start: var(--rule-hair) solid var(--color-hairline);
}
.faq__item:last-child { border-block-end: var(--rule-hair) solid var(--color-hairline); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  padding-inline: var(--space-sm);
  margin-inline: calc(var(--space-sm) * -1);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-micro) var(--ease-out);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { background: var(--color-paper-2); }
}
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding-block-end: var(--space-md); color: var(--color-muted); max-width: var(--measure); }

/* ══ Avvisi ═════════════════════════════════════════════════ */

.notice {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border-inline-start: var(--rule-firm) solid var(--color-neutral);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}
.notice--ok    { border-color: var(--color-ok);    background: var(--color-ok-tint); }
.notice--warn  { border-color: var(--color-warn);  background: var(--color-warn-tint); }
.notice--error { border-color: var(--color-error); background: var(--color-error-tint); }
.notice strong { display: block; font-size: var(--text-base); }
.notice ul { margin-block-start: var(--space-2xs); padding-inline-start: var(--space-lg); }

/* ══ Form ═══════════════════════════════════════════════════ */

.form { display: grid; gap: var(--space-lg); }

.fieldset {
  display: grid;
  gap: var(--space-md);
  padding: 0;
  margin: 0;
  border: 0;
}
.fieldset > legend {
  padding: 0;
  margin-block-end: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* align-content: start, altrimenti il campo si stira sulla riga e
   distribuisce lo spazio libero fra etichetta, controllo e nota: il
   controllo scende e si disallinea da quello accanto. */
.field { display: grid; align-content: start; gap: var(--space-2xs); }
.field > label {
  font-size: var(--text-sm);
  font-weight: 500;
}
.field__hint { font-size: var(--text-xs); color: var(--color-neutral); }
.field__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: 500;
}
.field .req { color: var(--color-mark); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-field);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);   /* 16px: evita lo zoom automatico su iOS */
  line-height: 1.4;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
textarea { min-height: 7rem; resize: vertical; line-height: var(--leading-body); }

/* I controlli non si stirano per riempire la riga. Senza questo, un
   campo con il testo di aiuto sotto allunga la riga della griglia e il
   menu a tendina accanto cresce con lei: a video due controlli affiancati
   di altezza diversa, disallineati di una dozzina di pixel. */
.field > input,
.field > select,
.field > textarea { align-self: start; }

/* Freccia disegnata, non quella del sistema operativo: la nativa cambia
   forma e peso a ogni piattaforma ed e' l'unico pezzo del modulo che non
   parla la lingua del resto. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-inline-end: calc(var(--space-md) * 2 + 12px);
}
select::-ms-expand { display: none; }

/* Il pulsante calendario dei campi data: stesso peso ottico della
   freccia, invece del nero pieno di serie. */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-out);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus-visible::-webkit-calendar-picker-indicator { opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--color-neutral); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--rule-firm) solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--color-paper-3);
  color: var(--color-neutral);
  cursor: not-allowed;
}
::placeholder { color: var(--color-neutral); opacity: 1; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-error); }

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-sm);
}
.field--check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  margin-block-start: 0.2rem;
  accent-color: var(--color-accent);
}
.field--check label { font-weight: 400; font-size: var(--text-sm); }

/* La trappola per i bot: invisibile all'utente, presente nel DOM. */
.trap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (min-width: 48rem) {
  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/* ══ Paginazione ════════════════════════════════════════════ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid var(--color-field);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.pagination .page-numbers.current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ══ Questionario di orientamento ═══════════════════════════ */

.quiz { display: grid; gap: var(--space-xl); }
.quiz__form { display: grid; gap: 0; }

.quiz__step {
  display: grid;
  gap: var(--space-md);
  padding: 0 0 var(--space-xl);
  margin: 0;
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-hairline);
}
.quiz__step + .quiz__step { padding-block-start: var(--space-xl); }

.quiz__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: var(--track-lead);
}
.quiz__n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  color: var(--color-mark);
}

.quiz__scelte { display: grid; gap: var(--space-xs); }

/* La scelta e' tutta cliccabile, non solo il pallino. */
.quiz__scelta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-field);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.quiz__scelta input { width: 1.15rem; height: 1.15rem; margin-block-start: 0.12rem; accent-color: var(--color-accent); }
.quiz__scelta:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}
.quiz__scelta:has(input:focus-visible) {
  outline: var(--rule-firm) solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .quiz__scelta:hover { border-color: var(--color-neutral); }
}

@media (min-width: 48rem) {
  .quiz__scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Esito ── */

.quiz__esito {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
/* display: grid qui sopra vince sul display:none che il browser da' a
   [hidden]: senza questa riga l'attributo non nasconde niente. */
.quiz__esito[hidden] { display: none; }
.quiz__esito:focus-visible { outline: var(--rule-firm) solid var(--color-focus); outline-offset: 3px; }

.quiz__esito-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.quiz__esito-titolo { font-size: var(--text-2xl); }
.quiz__esito-testo { color: var(--color-muted); max-width: var(--measure); }

.quiz__esito-note { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.quiz__esito-note:empty { display: none; }
.quiz__esito-note li {
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-firm) solid var(--color-accent);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure);
}

.quiz__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-sm);
}
.quiz__azioni .link-arrow {
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule-firm);
  background: none;
  padding: 0 0 var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: inherit;
  cursor: pointer;
}


/* ── Panoramica dei percorsi ── */

.percorsi { display: grid; gap: var(--space-lg); margin-block-start: var(--space-xl); }

.percorso {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
  scroll-margin-block-start: var(--anchor-offset);
}
.percorso:focus-visible { outline: var(--rule-firm) solid var(--color-focus); outline-offset: 3px; }

.percorso__titolo { font-size: var(--text-xl); }
.percorso__perche { font-size: var(--text-sm); color: var(--color-ink); font-weight: 500; }
.percorso__testo { font-size: var(--text-sm); color: var(--color-muted); }

.percorso__label {
  margin-block-start: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.percorso__tappe {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tappa;
}
.percorso__tappe li {
  counter-increment: tappa;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.percorso__tappe li::before {
  content: counter(tappa, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  color: var(--color-mark);
  padding-block-start: 0.25em;
}
.percorso__foot { margin-block-start: var(--space-xs); }

@media (min-width: 48rem) {
  .percorsi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Articolo precedente e successivo ═══════════════════════ */

.vicini { display: grid; gap: var(--space-md); }

.vicino {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.vicino:hover { border-color: var(--color-accent); color: inherit; }

.vicino__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.vicino__titolo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--track-lead);
  line-height: var(--leading-tight);
}
.vicino--avanti { text-align: right; }

@media (min-width: 48rem) {
  .vicini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Se c'e' solo il successivo, resta nella colonna di destra. */
  .vicini .vicino--avanti:only-child { grid-column: 2; }
}

/* ══ Filtri di categoria ════════════════════════════════════ */

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xl);
}

.filtro {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-field);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.filtro:hover {
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
}
.filtro.is-on {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.filtro.is-on:hover { color: var(--color-on-ink); }

.filtro__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  color: var(--color-neutral);
}
.filtro.is-on .filtro__n { color: var(--color-on-ink-mute); }