/*
   Portale ATHLOS.

   Impostazione mobile-first: le regole base valgono per il telefono, i media
   query aggiungono solo cio che uno schermo piu largo consente. Nessun build
   step, nessuna risorsa di terze parti: font auto-ospitati e custom properties.

   Sistema: un solo accento, una sola scala di curvatura, una scala tipografica
   fluida, tema chiaro e scuro guidati da prefers-color-scheme.
*/

/* ── Tipografia auto-ospitata ──────────────────── */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/geist-latin.a147f99cd533.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/geist-latin-ext.4841e590e2a9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.a15f9d568fb0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Token ─────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --surface: #f7f8f9;
  --surface-raised: #ffffff;
  --surface-sunken: #eef0f2;
  --text: #14171a;
  --text-muted: #5a626b;
  --border: #dde0e4;
  /* Il bordo di un controllo e l'unica cosa che lo delimita: deve reggere il
     3:1 richiesto da WCAG 1.4.11, non limitarsi a essere percepibile. */
  --border-strong: #7f858d;

  --accent: #0b5cab;
  --accent-hover: #084a8c;
  --accent-contrast: #ffffff;
  --accent-soft: #e9f1fa;

  --success: #146c43;
  --success-soft: #e6f4ec;
  --danger: #a4231c;
  --danger-soft: #fbeceb;
  --warning: #8a5300;
  --warning-soft: #fdf3e3;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scala fluida: un solo set di valori copre telefono e desktop senza salti. */
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
  --step-3: clamp(1.625rem, 1.42rem + 1vw, 2.25rem);

  --spazio-pagina: 1.25rem;

  --ombra-lieve: 0 1px 2px rgba(20, 23, 26, 0.05);
  --ombra-card: 0 1px 2px rgba(20, 23, 26, 0.04), 0 12px 32px rgba(20, 23, 26, 0.06);
  --ombra-barra: 0 -1px 0 var(--border), 0 -8px 24px rgba(20, 23, 26, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #101315;
    --surface-raised: #191d21;
    --surface-sunken: #0b0e10;
    --text: #eceff2;
    --text-muted: #a6adb6;
    --border: #2b3138;
    --border-strong: #6b7481;

    --accent: #7bb2ea;
    --accent-hover: #9cc7f2;
    --accent-contrast: #0a1420;
    --accent-soft: #17242f;

    --success: #62c48d;
    --success-soft: #142219;
    --danger: #f08b84;
    --danger-soft: #271615;
    --warning: #e0aa5f;
    --warning-soft: #241c11;

    --ombra-lieve: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ombra-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);
    --ombra-barra: 0 -1px 0 var(--border), 0 -8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* ── Base ──────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibilita ─────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Struttura ─────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.site-header__inner,
.site-footer__inner,
.page {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--spazio-pagina);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}

.site-header__logo {
  display: block;
  width: auto;
  max-width: 125px;
  /* max-height: 26px;*/
}

/* Il logo Primaidea è nero su fondo trasparente: leggibile sul tema chiaro,
   invisibile su quello scuro. L'inversione va quindi applicata solo al buio, e
   hue-rotate riporta il rosso del marchio alla sua tinta dopo l'inversione. */
@media (prefers-color-scheme: dark) {
  .site-header__logo--primaidea {
    filter: invert(1) hue-rotate(180deg);
  }
}

.brand {
  color: var(--text-muted);
  font-size: var(--step--1);
  text-decoration: none;
}

.page {
  padding-block: 2rem 3rem;
}

.page--stretta {
  max-width: 34rem;
}

/* Spazio di respiro fra l'ultimo campo e la barra che gli si posa sopra. */
.page--con-barra {
  padding-bottom: 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.site-footer__inner {
  padding-block: 1.5rem 2rem;
}

/* ── Tipografia ────────────────────────────────── */

h1 {
  margin: 0 0 0.5rem;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2 {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.occhiello {
  margin: 0 0 0.625rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
}

.lead {
  margin: 0 0 2rem;
  max-width: 42ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Superfici ─────────────────────────────────── */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombra-card);
  padding: 1.75rem 1.25rem;
}

@media (min-width: 40em) {
  .card {
    padding: 2.5rem;
  }
}

/* ── Pagine di stato ───────────────────────────── */

.status {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

/* Segno di stato disegnato in CSS: nessun SVG, nessuna icon-font. */
.status__mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.status__mark::after {
  content: "";
  display: block;
}

.status__mark--ok {
  background: var(--success-soft);
}

.status__mark--ok::after {
  width: 10px;
  height: 18px;
  margin-top: -4px;
  border-right: 2.5px solid var(--success);
  border-bottom: 2.5px solid var(--success);
  transform: rotate(45deg);
}

.status__mark--wait {
  background: var(--accent-soft);
}

.status__mark--wait::after {
  width: 17px;
  height: 12px;
  border: 2.5px solid var(--accent);
  border-radius: 2px;
  box-shadow: inset 0 3px 0 -1.5px var(--accent);
}

.status__mark--warn {
  background: var(--warning-soft);
}

.status__mark--warn::after {
  width: 2.5px;
  height: 19px;
  background: linear-gradient(
    var(--warning) 0 12px,
    transparent 12px 15px,
    var(--warning) 15px 19px
  );
}

.status__mark--error {
  background: var(--danger-soft);
  position: relative;
}

.status__mark--error::after,
.status__mark--error::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 2.5px;
  background: var(--danger);
}

.status__mark--error::after {
  transform: rotate(45deg);
}

.status__mark--error::before {
  transform: rotate(-45deg);
}

.status p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
}

.status p strong {
  color: var(--text);
  font-weight: 600;
}

.status__actions {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

@media (min-width: 30em) {
  .status__actions {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/* ── Pulsanti ──────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Sul telefono il pulsante occupa la larghezza piena: bersaglio ampio e
     posizione prevedibile. Da 30em torna a dimensionarsi sul contenuto. */
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--step-0);
  font-weight: 550;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 30em) {
  .btn {
    width: auto;
  }
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--ombra-lieve);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--secondary {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--surface-sunken);
}

.btn--testo {
  width: auto;
  min-height: 44px;
  padding: 0.5rem 0;
  color: var(--text-muted);
  font-weight: 450;
}

.btn--testo:hover {
  color: var(--text);
}

/* ── Form: struttura ───────────────────────────── */

.form {
  display: grid;
  gap: 2rem;
}

.blocco {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 1rem;
}

.blocco__titolo {
  padding: 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.blocco__aiuto {
  margin: -0.5rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.campi {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40em) {
  .campi--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo--largo {
    grid-column: 1 / -1;
  }
}

/* ── Form: singolo campo ───────────────────────── */

.campo {
  display: grid;
  gap: 0.4375rem;
  align-content: start;
}

.campo__label {
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.4;
}

.campo__obbligatorio {
  color: var(--danger);
  margin-left: 0.125rem;
}

.campo__aiuto {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

/* Elenco per esclusione e non per inclusione: elencare i tipi ammessi significa
   dimenticarne uno prima o poi, ed è esattamente ciò che è successo al campo
   password. Caselle, radio e campi nascosti hanno una resa propria e restano
   fuori; tutto il resto eredita l'aspetto dei controlli di testo. */
.campo input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  /* Sotto i 16px iOS ingrandisce la pagina al focus: la scala parte da li. */
  font-size: max(1rem, var(--step-0));
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.55;
}

.campo :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.campo__errori {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--danger);
  font-size: var(--step--1);
  font-weight: 500;
}

/* ── Form: gruppo di caselle ───────────────────── */

/* Una casella per riga, tutta la riga tocca. Sostituisce dodici blocchi
   etichetta piu input impilati, che sul telefono erano illeggibili. */
.caselle {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.casella {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  align-items: start;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.875rem 1rem;
  background: var(--surface-raised);
  cursor: pointer;
}

.casella:hover {
  background: var(--surface-sunken);
}

.casella input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--accent);
}

.casella__testo {
  font-size: var(--step-0);
  line-height: 1.4;
}

.casella:has(input:checked) {
  background: var(--accent-soft);
}

.casella:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ── Form: ambiti con priorita ─────────────────── */

/* Stessa cornice del gruppo di caselle: un riquadro solo, righe separate da un
   filo. Le due sezioni del questionario che elencano caselle si presentano cosi
   allo stesso modo, e la priorita resta in coda alla riga, come la colonna
   "Prior." del modulo cartaceo, invece di appendersi sotto la voce. */
.ambiti {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ambito {
  display: grid;
  /* La priorita occupa solo lo spazio che le serve, e sparisce del tutto
     quando l'ambito non e scelto: la colonna `auto` collassa e la voce si
     riprende tutta la larghezza. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  /* Nessun riempimento sulla riga: lo porta l'etichetta, come in `.caselle`.
     Messo qui resterebbe anche a priorita nascosta, e le voci di questa
     sezione risulterebbero piu strette di quelle delle altre. */
  gap: 0.75rem;
  background: var(--surface-raised);
}

.ambito:hover {
  background: var(--surface-sunken);
}

/* Solo il fondo, come per `.casella`: dentro un elenco continuo un bordo e
   un'ombra per riga spezzerebbero il filo che tiene insieme il riquadro. */
.ambito:has(input[type="checkbox"]:checked) {
  background: var(--accent-soft);
}

/* Il fondo lo porta la riga: lasciato a `.casella` tingerebbe la sola area
   dell'etichetta, e la priorita resterebbe di un altro colore accanto alla
   voce che la qualifica. */
.ambito > .casella,
.ambito > .casella:hover,
.ambito > .casella:has(input[type="checkbox"]:checked) {
  background: transparent;
}

/* Il fuoco cerchia la riga intera invece della sola etichetta: con la priorita
   in coda, un contorno che si ferma a meta riga si legge come un difetto di
   resa. Il contorno rientra (offset negativo) perche il riquadro ritaglia. */
.ambito:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.ambito > .casella:has(input:focus-visible) {
  outline: none;
}

/* Nascosta finche l'ambito non e scelto: dodici controlli inerti accanto ad
   altrettante caselle vuote sono solo rumore. Sta in coda alla riga, non sotto
   la voce, cosi la riga si legge come sul modulo: ambito a sinistra, priorita
   a destra.

   Con la casella dentro l'etichetta il selettore di fratello non la raggiunge:
   serve :has(), da cui gia dipendono `.casella` e `.scelta` per il loro stato
   spuntato. Nessun fallback, come per quelle. */
.ambito__priorita {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
  white-space: nowrap;
}

.ambito:has(input[type="checkbox"]:checked) .ambito__priorita {
  display: flex;
}

/* Su un telefono la parola costa una cinquantina di pixel che servono alla
   voce, e non porta informazione: e decorativa (aria-hidden), il controllo ha
   gia il suo aria-label, e un numero accanto a un ambito spuntato si legge da
   se. Torna appena c'e larghezza per entrambi. */
.ambito__priorita-testo {
  display: none;
  color: var(--text-muted);
  font-size: var(--step--1);
}

@media (min-width: 30em) {
  .ambito__priorita-testo {
    display: inline;
  }
}

/* Nel ripiego senza script il campo e un controllo vero e non un badge: qui
   basta che accolga due cifre, e ogni millimetro in meno e larghezza che torna
   al testo della voce. */
.ambito .priorita__input {
  width: 3.5rem;
}

/* Indice assegnato dall'ordine di selezione. Compare solo quando lo script è
   attivo (`.is-auto`): allora il campo numerico manuale sparisce e resta questo
   badge di sola lettura, mentre l'input continua a viaggiare col valore. */
.ambito__priorita-indice {
  display: none;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ambiti.is-auto .priorita__input {
  display: none;
}

.ambiti.is-auto .ambito__priorita-indice {
  display: inline-grid;
}

.priorita__input {
  width: 4.5rem;
  min-height: 44px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  /* Sotto i 16px iOS ingrandisce la pagina al focus, come per gli altri campi. */
  font-size: max(1rem, var(--step-0));
  text-align: center;
  /* Le frecce di incremento rubano meta della larghezza a un campo che ne ha
     gia poca, e su un numero centrato lo fanno sembrare disallineato. Il
     tastierino di `inputmode` copre il caso reale, che e digitare una cifra. */
  appearance: textfield;
}

.priorita__input::-webkit-outer-spin-button,
.priorita__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

/* Sotto entrambe le colonne: l'errore riguarda la riga, non la sola priorita. */
.ambito__errori {
  grid-column: 1 / -1;
  padding: 0 0 0.75rem calc(1rem + 1.375rem + 0.75rem);
}

/* La priorita di "Altro" e un campo ordinario, con la sua etichetta sopra:
   erediterebbe la larghezza piena dei controlli di testo, e una riga intera per
   una cifra sola invita a scriverci una frase. Stessa specificita della regola
   generale, ma piu in basso nel foglio. */
.campo input.priorita__input {
  width: 6rem;
}

.priorita__input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.priorita__input[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

/* ── Form: scelta singola ──────────────────────── */

.scelte {
  display: grid;
  gap: 0.5rem;
}

.scelta {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
}

.scelta:hover {
  background: var(--surface-sunken);
}

.scelta input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}

.scelta:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.scelta:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.scelta__testo {
  font-size: var(--step-0);
  line-height: 1.35;
}

/* ── Form: scala 1-5 ───────────────────────────── */

/* Le quattordici scale di maturita erano altrettanti menu a tendina. Come
   controllo segmentato si leggono e si toccano in un gesto solo. */
.scala {
  display: grid;
  gap: 0.5rem;
}

.scala__voci {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.375rem;
}

.scala__voce {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.scala__voce input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.scala__voce:hover {
  background: var(--surface-sunken);
}

.scala__voce:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.scala__voce:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.scala__estremi {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* ── Riquadri di messaggio ─────────────────────── */

.notice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: var(--step-0);
  color: var(--text);
}

.notice + .notice {
  margin-top: 0.75rem;
}

.notice__title {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.notice--error {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.notice--success {
  border-color: var(--success);
  background: var(--success-soft);
}

.notice--info {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.notice ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.notice a {
  color: inherit;
}

/* ── Azioni ────────────────────────────────────── */

.azioni {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.azioni__nota {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* Barra ancorata: sul telefono l'azione primaria resta sotto il pollice invece
   di stare in fondo a trenta campi.

   Sticky e non fixed: restando nel flusso, alla fine dello scorrimento si posa
   sopra il piè di pagina invece di coprirlo per sempre. */
.barra-azioni {
  position: sticky;
  bottom: 0;
  z-index: 15;
  padding: 0.75rem var(--spazio-pagina) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--surface-raised);
  box-shadow: var(--ombra-barra);
}

.barra-azioni__inner {
  display: grid;
  gap: 0.625rem;
  max-width: 46rem;
  margin-inline: auto;
}

@media (min-width: 30em) {
  .barra-azioni__inner {
    grid-auto-flow: column;
    justify-content: end;
  }
}

/* ── Avanzamento ───────────────────────────────── */

.avanzamento {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.avanzamento__testo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.avanzamento__conteggio {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.avanzamento__barra {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.avanzamento__riempimento {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* ── Elenco delle sezioni ──────────────────────── */

.sezioni {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.sezioni__voce {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--ombra-lieve);
}

.sezioni__link {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.875rem;
  min-height: 68px;
  padding: 0.875rem 1rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.sezioni__link:hover {
  background: var(--surface-sunken);
}

.sezioni__numero {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.sezioni__voce--fatta .sezioni__numero {
  background: var(--success-soft);
  color: var(--success);
}

.sezioni__titolo {
  display: block;
  font-weight: 550;
  line-height: 1.3;
}

.sezioni__descrizione {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.sezioni__stato {
  color: var(--text-muted);
  font-size: var(--step--1);
  white-space: nowrap;
}

.sezioni__voce--fatta .sezioni__stato {
  color: var(--success);
}

/* ── Movimento ─────────────────────────────────────────────────────────────

   Un solo momento autoriale: la barra che si riempie all'apertura, perché è
   l'unica informazione che il testo da solo non trasmette con la stessa
   immediatezza. Tutto il resto è risposta al tocco, non decorazione.

   Si animano solo transform, opacity e colore: proprietà che il compositore
   gestisce senza ricalcolare il layout. Curva esponenziale in uscita, durate
   sotto i 200ms per ciò che risponde al dito.
*/

@media (prefers-reduced-motion: no-preference) {
  .btn,
  /* L'etichetta dell'ambito e una `.casella`: eredita da qui la transizione e
     l'affondamento al tocco. `.ambito` si aggiunge per il solo colore di fondo,
     che cambia sulla riga intera e non sulla sola etichetta. */
  .casella,
  .ambito,
  .scelta,
  .scala__voce,
  .sezioni__link {
    transition:
      background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
      color 160ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Affondamento al tocco: conferma fisica che il dito ha preso il bersaglio,
     utile soprattutto dove il feedback visivo arriva dopo un cambio pagina. */
  .btn:active {
    transform: scale(0.985);
  }

  .casella:active,
  .scelta:active,
  .scala__voce:active,
  .sezioni__link:active {
    transform: scale(0.995);
  }

  /* Nell'elenco degli ambiti il bersaglio e la riga, non la sola etichetta:
     affondare quest'ultima muoverebbe meta riga e lascerebbe ferma la
     priorita che le sta accanto. */
  .ambito:active {
    transform: scale(0.995);
  }

  .ambito > .casella:active {
    transform: none;
  }

  .avanzamento__riempimento {
    animation: riempi 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes riempi {
  from {
    width: 0;
  }
}

/* ── Esito della valutazione ───────────────────── */

.esito {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--ombra-card);
}

.esito--ok {
  border-color: var(--success);
  background: var(--success-soft);
}

.esito--attenzione {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.esito--escluso {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.esito__etichetta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.esito__totale {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.esito__numero {
  font-size: var(--step-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.esito__su {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.esito__nota {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.esito__sottotitolo {
  margin: 2.5rem 0 1rem;
}

.criteri {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.125rem;
}

.criterio__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.375rem;
}

.criterio__nome {
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.3;
}

.criterio__valore {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.criterio__max {
  color: var(--text-muted);
  font-weight: 400;
}

.criterio__barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.criterio__riempimento {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

/* Sotto soglia il colore cambia perché il numero da solo non basta: un 5 su 10
   è metà del massimo ma può essere sotto la soglia che blocca l'idoneità. */
.criterio--sotto .criterio__riempimento {
  background: var(--danger);
}

.criterio__soglia {
  margin: 0.375rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.criterio--sotto .criterio__soglia {
  color: var(--danger);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .criterio__riempimento {
    animation: riempi 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── Pagina di benvenuto ───────────────────────── */

.intro {
  padding-block: 1rem 3rem;
}

.intro h1 {
  max-width: 16ch;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  letter-spacing: -0.03em;
}

.intro .lead {
  max-width: 34ch;
}

.intro__azioni {
  display: grid;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 30em) {
  .intro__azioni {
    grid-auto-flow: column;
    justify-content: start;
    gap: 1.5rem;
  }
}

.passi-sezione {
  border-top: 1px solid var(--border);
  padding-block: 2.5rem;
}

.passi-sezione h2 {
  margin-bottom: 1.75rem;
}

/* Elenco verticale e non tre schede affiancate: i passi sono una sequenza,
   e su telefono tre schede diventano comunque una colonna. */
.passi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.75rem;
  counter-reset: passo;
}

.passo {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.passo__titolo {
  margin: 0 0 0.25rem;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.passo__testo {
  margin: 0;
  max-width: 52ch;
  color: var(--text-muted);
  line-height: 1.55;
}

.chiusura {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  border-top: 1px solid var(--border);
  padding-block: 2.5rem 1rem;
}

.chiusura__nota {
  margin: 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* ── Area valutatori ───────────────────────────── */

.nav-area {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.nav-area__voce {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
}

.nav-area__voce--attiva {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-area__esci {
  margin-left: auto;
}

/* Tessere di sintesi: il numero è il contenuto, non serve un grafico. */
.tessere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.tessera {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 1rem;
}

.tessera__numero {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.tessera__etichetta {
  margin: 0.375rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.3;
}

.riquadro {
  margin-bottom: 2.5rem;
}

.riquadro h2 {
  margin-bottom: 0.375rem;
}

.riquadro__nota {
  margin: 0 0 1.25rem;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* ── Grafici SVG ───────────────────────────────── */

.grafico {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
  overflow: visible;
}

.g-label {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 550;
}

.g-valore {
  fill: var(--text-muted);
  font-family: var(--font-mono);
}

.g-traccia {
  fill: var(--surface-sunken);
}

/* Colori verificati col validatore della skill dataviz su entrambi i temi:
   banda di luminosità, croma, separazione per daltonismo e contrasto. */
.g-ok { fill: #146c43; }
.g-attenzione { fill: #8a5300; }
.g-grave { fill: #b4521a; }
.g-critico { fill: #a4231c; }
.g-soglia { fill: var(--text); }
.g-collegamento { stroke: var(--border-strong); stroke-width: 2; }
.g-attuale { fill: #0b5cab; }
.g-obiettivo { fill: #b4521a; }

@media (prefers-color-scheme: dark) {
  .g-ok { fill: #62c48d; }
  .g-attenzione { fill: #e0aa5f; }
  .g-grave { fill: #e08a5f; }
  .g-critico { fill: #f08b84; }
  .g-attuale { fill: #4a8fd6; }
  .g-obiettivo { fill: #cf7f3c; }
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.legenda__voce {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.legenda__segno {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legenda__segno--attuale { background: #0b5cab; }
.legenda__segno--obiettivo { background: #b4521a; }

@media (prefers-color-scheme: dark) {
  .legenda__segno--attuale { background: #4a8fd6; }
  .legenda__segno--obiettivo { background: #cf7f3c; }
}

/* ── Tabelle ───────────────────────────────────── */

/* Gemella di ogni grafico: gli stessi numeri, leggibili senza colore. */
.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.tabella th,
.tabella td {
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.tabella thead th {
  color: var(--text-muted);
  font-weight: 550;
  white-space: nowrap;
}

.tabella tbody th {
  font-weight: 450;
}

.tabella td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabella__riga--critica td:first-of-type {
  color: var(--danger);
  font-weight: 600;
}

/* ── Schede azienda ────────────────────────────── */

.schede {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.scheda {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--ombra-lieve);
}

.scheda__link {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.scheda__link:hover {
  background: var(--surface-sunken);
}

.scheda__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}

.scheda__nome {
  font-weight: 600;
  line-height: 1.3;
}

.scheda__meta {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.pillola {
  flex: none;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 550;
  white-space: nowrap;
}

.pillola--ok { border-color: var(--success); color: var(--success); }
.pillola--attenzione { border-color: var(--warning); color: var(--warning); }
.pillola--critico { border-color: var(--danger); color: var(--danger); }

/* ── Intestazione di una candidatura ───────────── */

/* Titolo a sinistra, azione a destra. Sul telefono il pulsante va a capo e
   occupa la riga intera, come tutti gli altri: nessuna eccezione da imparare. */
/* Il pulsante divide la riga con il titolo; la targa identificativa passa
   sotto entrambi, a tutta larghezza. Tenerla nella colonna del titolo la
   spezzerebbe a metà di un codice, che è il modo peggiore di mandare a capo. */
.intestazione {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem 1.5rem;
  /* Lo stacco sotto l'intestazione lo dà il contenitore, non più il margine
     della riga P.IVA: quando il pulsante va a capo deve restarci attaccato. */
  margin-bottom: 2rem;
}

.intestazione h1 {
  grid-area: 1 / 1;
}

.intestazione .lead {
  grid-area: 2 / 1 / auto / -1;
  margin-bottom: 0;
  /* Non è prosa ma un'etichetta: la misura da lettura qui non serve. */
  max-width: none;
}

.intestazione__azione {
  grid-area: 1 / 2;
}

@media (max-width: 30em) {
  /* Una colonna sola: titolo, targa, pulsante a tutta larghezza, nell'ordine
     in cui stanno nel markup. */
  .intestazione {
    grid-template-columns: 1fr;
  }

  .intestazione h1,
  .intestazione .lead,
  .intestazione__azione {
    grid-area: auto;
  }
}

/* ── Risposte in dettaglio ─────────────────────── */

.sezione-risposte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  margin-bottom: 0.625rem;
}

.sezione-risposte > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.875rem 1rem;
  border-radius: inherit;
  font-weight: 550;
  cursor: pointer;
}

.sezione-risposte__stato {
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 400;
  white-space: nowrap;
}

.risposte {
  margin: 0;
  padding: 0 1rem 1rem;
  display: grid;
  gap: 0.875rem;
}

.risposta dt {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.risposta dd {
  margin: 0.125rem 0 0;
  line-height: 1.5;
}

/* ── Arruolamento ──────────────────────────────── */

.qr {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}

.segreto {
  margin: 0.25rem 0 1.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--step-0);
  word-break: break-all;
}

.codici {
  margin: 1.25rem 0;
  padding: 1rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.codici li {
  font-size: var(--step-0);
  letter-spacing: 0.04em;
}

.recupero {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.recupero > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--step--1);
  cursor: pointer;
}

/* ── Partecipanti ──────────────────────────────── */

.gruppo-partecipanti {
  margin-bottom: 1.75rem;
}

.gruppo-partecipanti__titolo {
  margin-bottom: 0.625rem;
  font-size: var(--step-1);
}

.gruppo-partecipanti__titolo a {
  color: inherit;
  text-decoration: none;
}

.gruppo-partecipanti__titolo a:hover {
  text-decoration: underline;
}

.persone {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.persona {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  background: var(--surface-raised);
}

.persona__nome {
  font-weight: 550;
  line-height: 1.3;
}

/* I recapiti restano bersagli da 44px: da telefono si tocca per chiamare. */
.persona__contatto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: var(--step--1);
  text-decoration: none;
  width: fit-content;
}

.persona__contatto:hover {
  text-decoration: underline;
}

/* ── Avanzamento delle iscrizioni ──────────────── */

.gruppo-partecipanti__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.gruppo-partecipanti__stato {
  margin: 0.25rem 0 0.625rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.pillola--grave { border-color: var(--warning); color: var(--warning); }

.tabella__nota {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
}