/* Diagnosi · «Una settimana da te» — direzione «F · Pulita» (../../proposta-3/DESIGN.md).
   A sinistra, sul cemento, l'agenda della settimana; a destra il foglio carta con una domanda alla volta.
   Arancio: solo il segno del «primo passo» nel quadro (il dato che conta). Movimento: opacity e transform, 250 ms. */

/* ───────── Il blocco ───────── */
.bs {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
  gap: var(--s-6);
  margin-top: var(--s-6);
  align-items: start;
}

/* agenda: una colonna di tappe, legate da un filetto tenue */
.bs-lato { position: sticky; top: 96px; padding-top: var(--s-5); }
.bs-lato__titolo { font-size: var(--t-micro); font-weight: 600; color: var(--grafite); }
.bs-agenda { margin-top: var(--s-4); list-style: none; padding: 0; }
.bs-agenda__voce {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--s-3);
  padding-bottom: var(--s-4);
}
.bs-agenda__voce::before {   /* il filo tra una tappa e l'altra */
  content: "";
  position: absolute;
  left: 5.5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--tratto-chiaro);
}
.bs-agenda__voce:last-child::before { display: none; }
.bs-agenda__segno {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--tratto);
  background: var(--fondo);
}
.bs-agenda__voce.is-fatto .bs-agenda__segno { background: var(--inchiostro); box-shadow: none; }
.bs-agenda__voce.is-ora .bs-agenda__segno { background: var(--carta); box-shadow: inset 0 0 0 3.5px var(--inchiostro); }
.bs-agenda__corpo { display: grid; gap: 2px; }
.bs-agenda__quando { font-size: var(--t-micro); color: var(--grigio); }
.bs-agenda__breve { font-size: var(--t-piccolo); font-weight: 500; line-height: 1.3; color: var(--grafite); }
.bs-agenda__voce.is-ora .bs-agenda__breve { font-weight: 650; color: var(--inchiostro); }
.bs-agenda__voce.is-fatto .bs-agenda__breve { color: var(--inchiostro); }
.bs-agenda__voce--poi .bs-agenda__breve { color: var(--grigio); }

/* il foglio */
.bs-foglio {
  min-height: 560px;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3.6vw, 56px);
  border-radius: var(--r-pannello);
  background: var(--carta);
}

/* avanzamento: «Passo 2 di 5» e una fila di tratti */
.bs-avanza { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.bs-avanza__testo { font-size: var(--t-mini); font-weight: 500; color: var(--grafite); font-variant-numeric: tabular-nums; }
.bs-avanza__barra { display: flex; gap: var(--s-1); }
.bs-avanza__tratto { width: 28px; height: 4px; border-radius: var(--r-cella); background: var(--linea-tenue); }
.bs-avanza__tratto.is-fatto { background: var(--inchiostro); }
.bs-avanza__tratto.is-ora { background: var(--tratto); }
.bs.is-quadro .bs-avanza__tratto { background: var(--inchiostro); }

/* ───────── Un passo ───────── */
.bs-palco { margin-top: var(--s-5); }
.bs-passo__quando { font-size: var(--t-medio); font-weight: 500; color: var(--grafite); }
.bs-passo__domanda {
  margin-top: var(--s-2);
  max-width: 24em;
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 1.02;
  letter-spacing: var(--tracking-poster);
  text-wrap: balance;
}
.bs-passo__domanda:focus { outline: none; }
.bs-passo__domanda:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.bs-passo__aiuto { margin-top: var(--s-3); font-size: var(--t-corpo); color: var(--grafite); }

.bs-scelte {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bs-scelte--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-scelte--multi .bs-scelta--nessuna { grid-column: 1 / -1; }

.bs-scelta {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) var(--s-5);
  align-items: center;
  border-radius: var(--r-controllo);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linea-tenue);
  cursor: pointer;
  transition: box-shadow var(--d-breve) var(--curva), background-color var(--d-breve) var(--curva);
}
.bs-scelta:hover { box-shadow: inset 0 0 0 1px var(--tratto); }
.bs-scelta:has(input:checked) { background: var(--carta); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.bs-scelta:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.bs-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bs-scelta--nessuna { min-height: 52px; background: transparent; }

/* il segno: tondo per una scelta, quadrato per più scelte */
.bs-scelta__segno {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--carta);
  box-shadow: inset 0 0 0 1px var(--tratto);
}
.bs-scelte--multi .bs-scelta__segno { border-radius: var(--r-carta); }
.bs-scelta input:checked + .bs-scelta__segno { background: var(--inchiostro); box-shadow: none; }
.bs-scelta input[type=radio]:checked + .bs-scelta__segno::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--carta);
}
.bs-scelta input[type=checkbox]:checked + .bs-scelta__segno::after {   /* la spunta */
  content: "";
  position: absolute;
  left: 7.5px;
  top: 3.5px;
  width: 6px;
  height: 11px;
  border: solid var(--carta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bs-scelta__testi { display: grid; gap: var(--s-1); }
.bs-scelta__testo { font-size: var(--t-medio); font-weight: 500; line-height: 1.4; }
.bs-scelta__sotto { font-size: var(--t-mini); line-height: 1.45; color: var(--grafite); }
.bs-scelta:has(input[type=radio]) .bs-scelta__testo:only-child { font-weight: 500; }
/* nel primo passo il nome della scelta è un titolo piccolo */
.bs-scelta:has(.bs-scelta__sotto) .bs-scelta__testo { font-size: var(--t-grande); font-weight: 700; font-stretch: var(--semistretto); line-height: 1.2; }

/* la riga di riconoscimento: calma, senza cornici */
.bs-eco {
  min-height: 2.8em;
  margin-top: var(--s-4);
  max-width: 56ch;
  font-size: var(--t-grande);
  line-height: 1.4;
  color: var(--inchiostro);
  text-wrap: pretty;
}
.bs-eco.is-vuota { visibility: hidden; }

.bs-comandi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
}
.bs-avanti { margin-left: auto; }
.bs-avanti[aria-disabled=true] { opacity: 0.35; cursor: not-allowed; }
.bs-avanti[aria-disabled=true]:hover { background: var(--inchiostro); }
.bs-avanti[aria-disabled=true]:hover > span[aria-hidden] { transform: none; }
.bs-indietro {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  padding: 0 var(--s-2);
  margin-left: calc(var(--s-2) * -1);
  border: 0;
  border-radius: var(--r-controllo);
  background: transparent;
  color: var(--grafite);
  font: inherit;
  font-size: var(--t-piccolo);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--d-breve) var(--curva);
}
.bs-indietro[hidden] { display: none; }
.bs-indietro:hover { color: var(--inchiostro); }
.bs-indietro:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--tratto); }

/* ───────── Il quadro ───────── */
.bs-quadro__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.bs-quadro__titolo {
  font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: var(--interlinea-stretta);
  letter-spacing: var(--tracking-poster);
}
.bs-quadro__titolo:focus { outline: none; }
.bs-quadro__titolo:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.bs-quadro__chi { font-size: var(--t-grande); font-weight: 500; color: var(--grafite); }

.bs-punti { margin-top: var(--s-6); list-style: none; padding: 0; }
.bs-punto { padding: var(--s-5) 0 var(--s-6); box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
.bs-punto__capo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.bs-punto__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-piccolo);
  background: var(--superficie-3);
  font-size: var(--t-mini);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bs-punto.is-primo .bs-punto__num { background: var(--inchiostro); color: var(--su-inchiostro); }
.bs-punto__nome {
  font-size: var(--t-passo);
  font-weight: 750;
  font-stretch: var(--semistretto);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
/* il solo arancio del quadro: un quadratino accanto a «Il primo passo» */
.bs-punto__primo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--grafite);
}
.bs-punto__primo::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-cella); background: var(--accento); }

.bs-punto__righe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.bs-cella { display: flex; flex-direction: column; gap: var(--s-2); }
.bs-cella__eti { font-size: var(--t-micro); font-weight: 600; color: var(--grigio); }
.bs-cella__testo { font-size: var(--t-corpo); line-height: 1.5; color: var(--grafite); text-wrap: pretty; }
.bs-cella--detto .bs-cella__testo { color: var(--inchiostro); font-weight: 500; }
.bs-cella--parti .bs-cella__testo { color: var(--inchiostro); }
.bs-cella__link { margin-top: auto; font-size: var(--t-piccolo); align-self: flex-start; }
.bs-cella__freccia { padding-top: 22px; color: var(--grigio); }

.bs-anche { padding: var(--s-4) 0; box-shadow: inset 0 1px 0 var(--tratto-chiaro); font-size: var(--t-piccolo); color: var(--grafite); }
.bs-anche a { color: var(--inchiostro); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--tratto); }
.bs-anche a:hover { text-decoration-color: var(--inchiostro); }

.bs-sereno { margin-top: var(--s-6); padding: var(--s-5) 0; box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
.bs-sereno__titolo { font-size: var(--t-passo); font-weight: 750; font-stretch: var(--semistretto); line-height: 1.15; }
.bs-sereno__testo { margin-top: var(--s-3); max-width: 60ch; font-size: var(--t-medio); line-height: 1.5; color: var(--grafite); }

.bs-bene { margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r-piccolo); background: var(--superficie-2); }
.bs-bene__eti { font-size: var(--t-micro); font-weight: 600; color: var(--grigio); }
.bs-bene__lista { margin-top: var(--s-2); padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.bs-bene__lista li { position: relative; padding-left: 26px; font-size: var(--t-corpo); line-height: 1.5; }
.bs-bene__lista li::before {   /* spunta disegnata, inchiostro */
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid var(--inchiostro);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.bs-bene__testo { margin-top: var(--s-2); font-size: var(--t-corpo); }

.bs-quadro__piede { margin-top: var(--s-6); }
.bs-quadro__nota { max-width: 64ch; font-size: var(--t-piccolo); line-height: 1.5; color: var(--grafite); }
.bs-quadro__porta { max-width: 64ch; margin-top: var(--s-2); font-size: var(--t-piccolo); line-height: 1.5; color: var(--inchiostro); font-weight: 500; }
.bs-quadro__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.bs-quadro__azioni .bs-indietro { margin-left: 0; }

/* ───────── Cos'è la Diagnosi vera ───────── */
.bs-vera { padding-top: var(--sezione-spazio); }
.bs-vera__riga { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) var(--s-6); align-items: baseline; }
.bs-vera__titolo { font-size: var(--t-passo); font-weight: 750; font-stretch: var(--semistretto); line-height: 1.12; letter-spacing: -0.015em; }
.bs-vera__testo { max-width: 60ch; font-size: var(--t-medio); line-height: 1.55; color: var(--grafite); }

/* ───────── Movimento: entra il passo, entra la riga ───────── */
.bs-entra { opacity: 0; transform: translateY(8px); }
.bs-entra.bs-entra--via { opacity: 1; transform: none; transition: opacity var(--d-media) var(--curva), transform var(--d-media) var(--curva); }

/* ───────── Tavoletta e telefono ───────── */
@media (max-width: 1100px) {
  .bs-punto__righe { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .bs-cella__freccia { display: none; }
  .bs-cella { padding-left: 42px; }
}
@media (max-width: 900px) {
  .bs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bs-lato { display: none; }
  .bs-foglio { min-height: 0; }
  .bs-vera__riga { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bs { margin-top: var(--s-5); }
  .bs-foglio { padding: var(--s-5) var(--s-4) var(--s-4); }
  .bs-avanza__tratto { width: 18px; }
  .bs-passo__quando { font-size: var(--t-piccolo); }
  .bs-passo__domanda { font-size: 1.625rem; line-height: 1.05; }
  .bs-scelte { margin-top: var(--s-5); gap: var(--s-2); }
  .bs-scelte--multi { grid-template-columns: minmax(0, 1fr); }
  .bs-scelta { gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: 56px; }
  .bs-scelta__testo { font-size: var(--t-corpo); }
  .bs-eco { min-height: 0; margin-top: var(--s-4); font-size: var(--t-medio); }
  .bs-eco.is-vuota { display: none; }
  .bs-passo__domanda { text-wrap: pretty; }
  /* sul telefono Avanti resta sempre a portata di pollice, in fondo allo schermo */
  .bs-comandi {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--s-4) calc(var(--s-4) * -1) calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4) var(--s-4);
    border-radius: 0 0 var(--r-pannello) var(--r-pannello);
    background: var(--carta);
  }
  .bs-cella { padding-left: 0; }
  .bs-quadro__azioni { flex-direction: column; align-items: stretch; }
  .bs-quadro__azioni .bottone { white-space: normal; text-align: center; padding: var(--s-3) var(--s-4); }
  .bs-bene { padding: var(--s-4); }
}
.bs-quadro__porta a { color: var(--inchiostro); font-weight: 400; text-underline-offset: 4px; white-space: nowrap; }