/* ===========================================================================
   ODS — marcatori "Obbligatorio / Facoltativo" sui campi del form.
   Intervento 5 del 2026-08-10.  SOLO SANDBOX.

   PERCHE' ESISTE
   Fino a oggi, su 16 campi `required`, uno solo portava un segnale visivo: un
   asterisco dentro la stringa di glossario 30, cioe' testo redazionale, non una
   regola.  "Username / Utente" (obbligatorio) e "UserID fornito dalla
   piattaforma" (facoltativo) erano graficamente identici — si vede nello
   screenshot sandbox/shots/int5-obbligatori/prima-03-390-y1500.png.

   IL SISTEMA — TRE CANALI, NON UNO
   L'accessibilita' vieta di affidare un'informazione al solo colore
   (WCAG 1.4.1).  Ogni marcatore usa tre canali indipendenti:
     1. la PAROLA        "Obbligatorio" / "Facoltativo"  (la si legge)
     2. il RIEMPIMENTO   pieno / vuoto                   (regge in scala di grigi)
     3. il BORDO         continuo / tratteggiato         (regge in bianco e nero
                                                          e per i daltonici)
   Il colore e' il quarto canale, ridondante.  Chi non lo vede non perde nulla.

   AGGIORNATO 2026-08-17 (review PR13 14/08, P2 "badge Obbligatorio").
   La pillola-parola su quasi ogni controllo era peso visivo: la review chiede
   l'opposto della prima stesura — asterisco discreto per l'obbligo,
   "(facoltativo)" in grigio per il resto, rosso riservato agli errori, e la
   legenda UNA volta in testa a ogni passo (.ods-req-legend, testo CMS
   900906).  La vecchia obiezione ("un asterisco chiede una legenda") e'
   superata proprio dalla legenda per passo.  La semantica per lo screen
   reader non passa mai dal segno: vive su required/aria-required.
   Le classi .ods-req--task/--done (ods-tasks.js) restano PILLOLE: la
   geometria a pillola sta su di loro, qui sotto.
   =========================================================================== */

:root {
  /* Navy del marchio, gia' usato dalle etichette del form. */
  --ods-req-yes-bg: #10275c;
  --ods-req-yes-fg: #ffffff;
  --ods-req-no-fg: #5b6478;
  /* 3,48:1 su bianco. Il bordo e' un confine di componente, quindi WCAG 1.4.11
     chiede almeno 3:1: #9aa4b8 (la prima scelta) si fermava a 2,51:1 —
     misurato, non stimato. */
  --ods-req-no-border: #7f8a9f;
}

.ods-req {
  display: inline-block;
  margin-inline-start: 0.35em;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: 0.06em;
  /* Non deve mai ereditare corsivo/decorazioni dai paragrafi che lo ospitano. */
  font-style: normal;
  text-decoration: none;
}

/* La geometria a pillola vive SOLO sugli stati di ods-tasks.js: i marcatori
   di obbligo non sono piu' pillole (2026-08-17). */
.ods-req--task,
.ods-req--done {
  padding: 0.08em 0.55em 0.12em;
  border-radius: 999px;
}

/* Obbligatorio: un asterisco discreto nel navy delle etichette — MAI rosso,
   il rosso e' degli errori (review PR13 14/08). La legenda sta in testa al
   passo (.ods-req-legend). */
.ods-req--yes {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ods-req-yes-bg);
  font-size: 1.05em;
  font-weight: 800;
}

/* Facoltativo: "(facoltativo)" in grigio, peso normale. */
.ods-req--no {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ods-req-no-fg);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* La legenda dell'asterisco, sotto il titolo di ogni passo. */
.ods-req-legend,
:is(#section1, #section2, #section3, #section4, #section5) .question-box > p.ods-req-legend {
  margin: 0 0 1rem;
  font-size: 0.82rem !important;   /* vince su .content { font-size:16px !important } */
  line-height: 1.4;
  color: var(--ods-req-no-fg);
}

/* Il marcatore di gruppo (le sei dichiarazioni) sta su una riga sua, perche'
   non appartiene a una sola casella ma a tutte e sei. */
.ods-req-group {
  display: block;
  margin: 0 0 0.6rem;
}
.ods-req-group .ods-req {
  margin-inline-start: 0;
}

/* Contrasto forzato di Windows: i marcatori ora sono TESTO (asterisco e
   parola), quindi ereditano CanvasText da soli — nessuna regola necessaria.
   Le pillole di stato di ods-tasks.js tengono il bordo per non sparire. */
@media (forced-colors: active) {
  .ods-req--task,
  .ods-req--done {
    border: 1px solid CanvasText;
  }
}

/* ---------------------------------------------------------------------------
   Blocchi che il CMS ha svuotato.
   Svuotare una voce di `messaggi` non toglie il <p> che la conteneva: resta un
   paragrafo vuoto, e `.blu-line` ha un filetto blu a sinistra, quindi il vuoto
   si VEDE.  `:empty` da solo non basta perche' il template lascia dentro un
   commento HTML e degli a-capo; per questo la classe la mette il JS, che sa
   leggere textContent.  La regola CSS resta come rete di sicurezza per il caso
   piu' semplice.
   --------------------------------------------------------------------------- */
.ods-cms-empty {
  display: none !important;
}
.content p:empty,
.content h4:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Bersagli da pollice per le sei dichiarazioni.
   Il quadratino disegnato era 23x23 px, sotto il minimo di 44 px del brief.
   Non lo si ingrandisce (cambierebbe il peso visivo della pagina): si porta a
   44 px la RIGA, e siccome la `<label>` ha un `for` valido verso la casella,
   toccare qualunque punto della riga la spunta.  Il bersaglio utile diventa
   largo quanto la colonna e alto almeno 44 px.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .form-group .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 44px;
    padding-left: 0;
  }
  .form-group .form-check .form-check-input {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    /* centra il quadratino sulla prima riga di testo dell'etichetta */
    margin: 10px 0 0;
  }
  .form-group .form-check .form-check-label {
    flex: 1 1 auto;
    display: block;
    min-height: 44px;
    padding-block: 10px;
  }
}