/* ══════════════════════════════════════════════
   YouDISC — components.css
   Regole dei componenti formalizzati nel Design System v1.
   File creato vuoto in MP1, popolato a partire da MP2.

   Convenzione cromatica del DS v1 (regola 4.6 INDEX):
   - --color-action-primary (#2C2C2C)   = VERBI    (bottoni, bordo selected)
   - --color-accent-brand   (#8B3A2E)   = SOSTANTIVI (etichette di sezione, accenti)
   I due token non vanno usati a pari peso sulla stessa riga visiva.
   ══════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   §1 page-form — superficie del test partecipante (Iter 2.5 MP3).
   Estensione del passepartout (cornice terracotta + card avorio) anche
   alle 32 pagine compito. App-header e progress-bar legacy rimossi:
   il counter "Domanda X di 32" nel task-page-header li sostituisce.
   ────────────────────────────────────────────── */
body.page-form {
  background: var(--color-accent-brand);          /* #8B3A2E — cornice */
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: var(--space-3);                        /* 24px tutto */
  box-sizing: border-box;
  margin: 0;
}

body.page-form main.task-main {
  flex: 1;
  background: #EDE6D6;                            /* avorio caldo (uguale a landing-card / confirm-card) */
  border-radius: var(--radius-md);
  padding: var(--space-4);                        /* 32px tutto */
  box-sizing: border-box;
  overflow: auto;                                 /* se 4 card lunghe, scroll interno della card */
  max-width: 100%;
  width: 100%;
}


/* ──────────────────────────────────────────────
   §2 task-page-header — apertura di ogni pagina-domanda.
   Gerarchia: etichetta sostantivo (PIÙ / MENO) sopra, prompt sotto.
   margin-bottom 24px per dare aria alla stack di card.
   ────────────────────────────────────────────── */
.task-page-header {
  margin: 0 0 var(--space-3);                     /* 24px sotto */
  padding: 0;
}

.task-page-label {
  font-family: var(--font-sans);
  font-size: var(--text-h3);                      /* 20px */
  line-height: var(--leading-h3);                 /* 1.3 */
  font-weight: 700;                               /* DM Sans bold */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-brand);               /* #8B3A2E — sostantivo */
  margin: 0 0 var(--space-1);                     /* 8px sotto */
}

.task-page-prompt {
  font-family: var(--font-sans);
  font-size: var(--text-small);                   /* 14px */
  line-height: var(--leading-small);              /* 1.4 */
  font-weight: 400;
  color: var(--color-text-secondary);             /* #5A5A5A */
  margin: 0;
}


/* ──────────────────────────────────────────────
   §3 option-card — opzione di una domanda forced-choice.
   4 card stand-alone (no border-bottom condiviso) con gap verticale 12px.
   Idle: bg surface + border 1px sottile.
   Selected: bg accent-brand-soft (sostantivo soft) + border action-primary (verbo).
   ────────────────────────────────────────────── */
.option-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;                                      /* --space-1 + 4px */
  width: 100%;
  margin: 0;
  padding: 0;
}

.option-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2);                        /* 16px */
  background: var(--color-surface);               /* #FFFFFF */
  border: 1px solid var(--color-border);          /* #E0DDD6 */
  border-radius: var(--radius-md);                /* 12px */
  font-family: var(--font-sans);
  font-size: var(--text-body);                    /* 16px */
  line-height: var(--leading-body);               /* 1.5 */
  font-weight: 400;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.option-card:hover:not(.selected) {
  border-color: var(--color-text-secondary);
}

.option-card.selected {
  background: var(--color-accent-brand-soft);     /* #F1E7E6 */
  border-color: var(--color-action-primary);      /* #2C2C2C */
}

.option-card:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}


/* ──────────────────────────────────────────────
   §4 task-page-progress — indicatore "Domanda X di 32".
   Posizione: sotto la stack di card, sopra il bottone primario.
   ────────────────────────────────────────────── */
.task-page-progress {
  font-family: var(--font-sans);
  font-size: var(--text-micro);                   /* 12px */
  line-height: var(--leading-micro);              /* 1.4 */
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  margin: var(--space-3) 0 var(--space-2);        /* 24/0/16 */
}


/* ──────────────────────────────────────────────
   §5 button-primary — call-to-action primaria.
   Stati cromatici (Iter 2.5 MP2a):
   - enabled  → background --color-accent-brand (#8B3A2E)
   - disabled → background --color-action-disabled (#C4C4C4)
   Lo switch tra i due stati avviene per il selettore :disabled (CSS-only).
   Il JS si limita a togliere/aggiungere l'attributo `disabled` sull'elemento;
   nessun manipolo di classi né style inline.
   --color-action-primary (#2C2C2C) NON viene usato sul bottone Avanti
   (è riservato al border .option-card.selected e ai focus ring).
   ────────────────────────────────────────────── */
.button-primary {
  display: block;
  width: 100%;
  padding: var(--space-2);                        /* 16px verticale, 16px orizzontale */
  background: var(--color-accent-brand);          /* #8B3A2E — enabled */
  color: var(--color-text-on-action);             /* #FFFFFF */
  font-family: var(--font-sans);
  font-size: var(--text-body);                    /* 16px */
  line-height: 1;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);                /* 4px */
  cursor: pointer;
  transition: background .2s;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-decoration: none;                          /* override default <a> underline */
  box-sizing: border-box;
}

.button-primary:hover:not(:disabled) {
  background: var(--color-accent-brand-hover);   /* #6B2D22 — MP3.1 */
}

.button-primary:disabled {
  background: var(--color-action-disabled);       /* #C4C4C4 */
  cursor: default;
}

.button-primary:focus-visible {
  outline: 2px solid var(--color-accent-brand);
  outline-offset: 2px;
}


/* ──────────────────────────────────────────────
   §5b button-secondary — call-to-action secondaria (Iter 2.5 MP4.1).
   Stesso form-factor del button-primary ma outlined: bg transparent,
   border 1px, color text-secondary. Usata dal bottone Indietro nelle
   pagine compito (idx≥1). Sostituisce la classe .btn-secondary legacy
   + lo stile inline che era ancora sul tag <button id="btn-back">.
   ────────────────────────────────────────────── */
.button-secondary {
  display: block;
  width: 100%;
  padding: var(--space-2);                        /* 16px */
  background: transparent;
  color: var(--color-text-secondary);             /* #5A5A5A */
  font-family: var(--font-sans);
  font-size: var(--text-body);                    /* 16px */
  line-height: 1;
  font-weight: 500;
  border: 1px solid var(--color-border);          /* #E0DDD6 */
  border-radius: var(--radius-sm);                /* 4px */
  cursor: pointer;
  transition: border-color .15s, color .15s;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.button-secondary:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}


/* ──────────────────────────────────────────────
   §6 page-landing — passepartout web (Iter 2.5 MP3.2 correttivo).
   Cornice terracotta + card avorio che riempie il viewport.
   Stesso schema della cover PDF (R2-T1g): brand è la CORNICE,
   avorio è la SUPERFICIE dominante che ospita il contenuto.
   ────────────────────────────────────────────── */
body.page-landing {
  background: var(--color-accent-brand);        /* #8B3A2E — cornice */
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  min-height: 100dvh;
  display: flex;
  align-items: stretch;                         /* card si allunga in altezza */
  padding: var(--space-3);                      /* 24px cornice su tutti i lati */
  box-sizing: border-box;
}

.landing-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.landing-card {
  flex: 1;                                      /* riempie tutto il wrap */
  /* MP3.2 correttivo — avorio più caldo/saturo locale (NON cambiare il
     token --color-background, serve alle altre pagine). */
  background: #EDE6D6;
  border-radius: var(--radius-md);              /* 12px */
  display: flex;
  flex-direction: column;
  overflow: hidden;                             /* clip-corner per la stripe top */
}

.landing-body {
  flex: 1;                                      /* assorbe lo spazio centrale */
  display: flex;
  flex-direction: column;
  justify-content: space-between;               /* 3 zone: top, mid, bottom */
  align-items: center;                          /* centratura orizzontale dei sotto-blocchi */
  padding: var(--space-5) var(--space-4);       /* 48 vert / 32 oriz */
  text-align: center;                           /* tutti i testi centrati */
  width: 100%;
  box-sizing: border-box;
}

/* Le 3 zone della body: ognuna è un wrapper full-width che contiene
   i blocchi di quella zona. Il flex space-between sul body distribuisce
   le 3 zone verticalmente. */
.landing-top,
.landing-mid,
.landing-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-mid {
  /* La zona centrale ha gap interno fra i due field (lingua + codice). */
  gap: var(--space-2);                          /* 16px */
}

.landing-bottom {
  /* Bottone Accedi + logo YouMans separati da gap medio. */
  gap: var(--space-3);                          /* 24px */
}

/* ──────────────────────────────────────────────
   §7 page-confirm — pagine di conferma post-test (Iter 2.5 MP3.3).
   Stesso passepartout della landing: cornice terracotta + card avorio.
   4 varianti (immediate/scheduled/manual/rejection) + tono visivo
   neutro per tutte (la rejection è caso tecnico, non errore utente).
   ────────────────────────────────────────────── */
body.page-confirm {
  background: var(--color-accent-brand);        /* #8B3A2E — cornice */
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  /* Fissato a 100dvh per evitare che il body cresca oltre viewport.
     overflow:hidden contiene la card stretched dentro il dvh. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: var(--space-3);                      /* 24px tutto */
  box-sizing: border-box;
}

.confirm-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.confirm-card {
  flex: 1;
  background: #EDE6D6;                          /* avorio caldo (uguale a landing-card) */
  border-radius: var(--radius-md);
  /* Grid 2 righe: content centrato in 1fr (height stretched), logo auto in fondo. */
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: var(--space-4);                      /* 32px tutto */
  overflow: hidden;
  box-sizing: border-box;
}

.confirm-content {
  /* Centro il contenuto verticalmente nella riga 1fr senza espandermi.
     align-self: center fa centrare il box dentro la grid row. */
  align-self: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* :not([hidden]) preserva il default del browser sul tag hidden — altrimenti
   `display: flex` sovrascriverebbe `display: none` e mostrerebbe TUTTE le 4 varianti. */
.confirm-variant:not([hidden]) {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                          /* 24px tra h1/p/bottoni */
}

.confirm-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);                    /* 24px */
  line-height: var(--leading-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.confirm-message {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);               /* 18px */
  line-height: var(--leading-body-lg);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

.confirm-note {
  font-family: var(--font-sans);
  font-size: var(--text-body);                  /* 16px */
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.confirm-variant .button-primary {
  max-width: 360px;
}

/* Text-button (link sottolineato senza background): sostituisce il
   .btn-secondary legacy nelle pagine di conferma. */
.text-button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-body);                  /* 16px */
  font-weight: 500;
  color: var(--color-text-primary);             /* #1A1A1A */
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.text-button:hover {
  color: var(--color-action-primary);
}

/* Logo YouMans nelle pagine di conferma (stesse regole di .landing-logo). */
.confirm-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-top: var(--space-3);
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(1500%) hue-rotate(348deg) brightness(70%) contrast(95%);
}


/* ──────────────────────────────────────────────
   §8 page-instructions — pagine 2/3/20 (Iter 2.5 MP4.2).
   Tre template (instructions_disc / _piu / _meno) condividono il pattern
   passepartout (cornice terracotta + card avorio caldo) ed un layout 2-row
   (content centrato + logo bottom). Cambia solo il copy via i18n.
   ────────────────────────────────────────────── */
body.page-instructions {
  background: var(--color-accent-brand);          /* #8B3A2E — cornice */
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: var(--space-3);                        /* 24px */
  box-sizing: border-box;
  margin: 0;
}

.instr-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.instr-card {
  flex: 1;
  background: #EDE6D6;                            /* avorio caldo (uguale a landing/confirm) */
  border-radius: var(--radius-md);
  display: grid;
  grid-template-rows: 1fr auto;                   /* content 1fr, logo auto */
  justify-items: center;
  padding: var(--space-4);                        /* 32px */
  overflow: hidden;
  box-sizing: border-box;
}

.instr-content {
  align-self: center;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);                            /* 24px tra blocchi */
}

.instr-title {
  font-family: var(--font-serif);
  font-size: 38px;                                /* matches landing wordmark */
  line-height: var(--leading-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-accent-brand);
  margin: 0;
}

.instr-intro {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);                 /* 18px */
  line-height: var(--leading-body-lg);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}
.instr-intro strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* Form (solo template DISC). */
.instr-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                            /* 16px tra fields */
}

.instr-form-title {
  font-family: var(--font-sans);
  font-size: var(--text-micro);                   /* 12px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  margin-bottom: var(--space-1);
}

.instr-field {
  width: 100%;
  text-align: left;
}
.instr-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.instr-field input[type="text"],
.instr-field input[type="email"] {
  width: 100%;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-body);                    /* 16px (no zoom iOS) */
  color: var(--color-text-primary);
  background: var(--color-surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.instr-field input:focus {
  border-color: var(--color-action-primary);
}
.instr-field input.input-error {
  border-color: var(--color-state-error);
}

.name-row {
  display: flex;
  gap: var(--space-1);
}
.name-row .instr-field { flex: 1; min-width: 0; }

@media (max-width: 360px) {
  .name-row { flex-direction: column; }
}

.instr-error {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--color-state-error);
  min-height: 18px;
  font-weight: 500;
  text-align: left;
}

/* Logo: pattern condiviso con landing/confirm (filter chain calibrata MP3.1). */
.instr-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-top: var(--space-3);
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(1500%) hue-rotate(348deg) brightness(70%) contrast(95%);
}


/* Logo YouMans (PNG bianco con alpha RGBA color_type=6).
   Filter chain calibrata per recolorare il logo a un terracotta
   visivamente fedele a var(--color-accent-brand) (#8B3A2E).
   Pixel mediano misurato: #8E331F (Δ=16.8 dal target — approssimazione fine
   ottenuta con grid search su Playwright + Pillow, scripts/calibrate_logo_filter.py).
   La chain `brightness(0) → invert → sepia → saturate → hue-rotate → brightness`
   è la formula canonica per recolorare PNG bianchi a un hex arbitrario. */
.landing-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(1500%) hue-rotate(348deg) brightness(70%) contrast(95%);
}

/* Wordmark YOU-DISC monocromatico terracotta (MP3.2 correttivo).
   38px = 32 + 6pt come da specifica. Niente più colori DISC per-lettera. */
.landing-title {
  font-family: var(--font-serif);
  font-size: 38px;                              /* +6pt rispetto a text-display */
  line-height: var(--leading-display);          /* 1.2 */
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-accent-brand);             /* #8B3A2E — wordmark unico */
  margin: 0 0 var(--space-1);                   /* 8px sotto */
}

.landing-sub {
  font-family: var(--font-sans);
  font-size: var(--text-small);                 /* 14px */
  line-height: var(--leading-small);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);                   /* 24px sotto */
}

.landing-field {
  width: 100%;                                  /* riempie la card centrata */
  max-width: 360px;                             /* leggibilità su desktop largo */
  margin-bottom: var(--space-3);                /* 24px */
}
.landing-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-micro);                 /* 12px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);                /* 8px */
  text-align: center;
}

.landing-field input[type="text"] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);              /* 4px — DS v1 input */
  padding: 0 var(--space-2);                    /* 16px */
  font-family: var(--font-sans);
  font-size: var(--text-body);                  /* 16px (no zoom on iOS) */
  color: var(--color-text-primary);
  background: var(--color-surface);             /* white sopra avorio */
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
  text-align: center;                           /* placeholder e value centrati */
}
.landing-field input[type="text"]:focus {
  border-color: var(--color-action-primary);    /* #2C2C2C — verbo focus */
}
.landing-field input[type="text"].input-error {
  border-color: var(--color-state-error);       /* #C44545 */
}

.landing-field .field-hint {
  font-family: var(--font-sans);
  font-size: var(--text-micro);                 /* 12px */
  color: var(--color-text-secondary);
  margin-top: 6px;
}

/* Selezione lingua: 3 card "leggere", pattern simile a option-card
   ma compatto e con testo+flag inline. */
.lang-opts {
  display: flex;
  gap: var(--space-1);                          /* 8px */
}
.lang-btn {
  flex: 1;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);              /* 4px */
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
}
.lang-btn:hover:not(.active) {
  border-color: var(--color-text-secondary);
}
.lang-btn.active {
  background: var(--color-accent-brand-soft);   /* #F1E7E6 */
  border-color: var(--color-action-primary);    /* #2C2C2C */
}
.lang-btn .flag { font-size: 18px; line-height: 1; }

.landing-error {
  font-family: var(--font-sans);
  font-size: var(--text-micro);                 /* 12px */
  color: var(--color-state-error);
  margin-bottom: var(--space-2);                /* 16px */
  min-height: 18px;
  font-weight: 500;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

/* Bottone Accedi: stessa max-width dei field per allineamento verticale. */
.landing-body .button-primary {
  max-width: 360px;
}

/* Footer card: logo YouMans + disclaimer. */
.landing-footer {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);                          /* 8px */
  border-top: 1px solid var(--color-border);
}
.landing-footer img {
  height: 24px;
  object-fit: contain;
  opacity: 0.7;
}
.landing-footer span {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--color-text-secondary);
}