/* ============================================================
   Fondamenta · la candidatura
   La conversazione con cui raccogliamo il brief, e il modulo di
   riserva per chi non esegue gli script. Si somma a stile.css:
   i token sono quelli, qui ci sono solo i componenti della pagina.
   Pavimento: bersagli 44px, testo 14px, contrasto AA misurato.
   ============================================================ */

/* ---------- la barra: una riga sola, il righello come bordo ---------- */
.barra-candidatura{border-bottom:0}
.barra-candidatura .barra-dentro{padding-block:0.8rem;gap:var(--space-sm)}
.progresso-testo{margin:0;font-size:var(--size-small);line-height:1.3;color:var(--color-text-secondary);text-align:right;min-height:44px;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;column-gap:0.2rem}
#progresso-tappa{font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--color-text-primary);white-space:nowrap}
.progresso-nome{white-space:nowrap}
@media (max-width:26rem){.progresso-nome{display:none}}

/* il righello di cantiere: si riempie mentre si risponde, le tacche sono le tappe */
.stadia-p{position:relative;height:5px;background:var(--color-surface-sunken);overflow:hidden}
.stadia-p-pieno{position:absolute;inset:0;background:var(--color-accent-default);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--duration-slow) var(--ease-out)}
.stadia-p-tacca{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--color-surface-default);transform:translateX(-1px)}

/* ---------- la colonna ---------- */
.colonna{max-width:46rem;margin-inline:auto}
.testa-candidatura{padding-block:clamp(var(--space-xl),6vh,var(--space-3xl)) var(--space-lg)}
.testa-candidatura h1{margin-top:var(--space-sm);font-size:var(--size-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2);max-width:18ch}
.testa-sotto{color:var(--color-text-secondary);margin-top:var(--space-md);max-width:var(--measure-text)}

/* ---------- chi si vede: il modulo senza script, la chat con ---------- */
.chat{display:none}
html.chat-on .chat{display:block}
html.chat-on .modulo{display:none}
html.modulo .chat{display:none}
html.modulo .modulo{display:block}

/* ---------- la conversazione ---------- */
.chat-log{display:flex;flex-direction:column;gap:var(--space-sm);padding-bottom:var(--space-xl)}
.chat-piede{margin:0;padding-bottom:var(--space-2xl);display:flex;justify-content:flex-end}
.msg{display:flex;align-items:flex-start;gap:0.75rem;max-width:100%}
.msg-bot{justify-content:flex-start}
/* il segno del muratore fa da voce di Fondamenta: niente faccia, per regola di brand */
.msg-bot::before{content:"";flex:none;width:0.5rem;height:1em;margin-top:0.95rem;
  background:
    linear-gradient(var(--color-accent-default),var(--color-accent-default)) left top/2px 0.85em no-repeat,
    linear-gradient(var(--color-accent-default),var(--color-accent-default)) left bottom/0.5rem 2px no-repeat}
.msg-bot.msg-seguito::before{visibility:hidden}
.msg-io{justify-content:flex-end}
.io-blocco{display:flex;flex-direction:column;align-items:flex-end;max-width:min(36rem,88%)}
.bolla{max-width:min(36rem,88%);padding:0.8rem 1rem;border-radius:var(--radius-control);background:var(--color-surface-raised);border:1px solid var(--color-border-default);color:var(--color-text-primary);line-height:var(--leading-body);overflow-wrap:anywhere;white-space:pre-line}
.io-blocco .bolla{max-width:100%;background:var(--color-surface-inverse);color:var(--color-text-inverse);border-color:var(--color-surface-inverse)}
.bolla-aiuto{display:block;margin-top:0.4rem;font-size:var(--size-small);line-height:var(--leading-small);color:var(--color-text-secondary)}
.bolla-larga{max-width:100%;width:100%}
.eco-modifica{min-height:44px;margin-top:-0.35rem;margin-bottom:-0.5rem;font-size:var(--size-small);padding:0.35rem 0.15rem}

/* «sta scrivendo»: tre punti, fermi per chi ha chiesto meno movimento */
.digita{display:inline-flex;gap:5px;align-items:center;padding:1rem 1rem}
.digita i{display:block;width:6px;height:6px;border-radius:50%;background:var(--color-text-tertiary);animation:pulsa 1.1s ease-in-out infinite}
.digita i:nth-child(2){animation-delay:0.18s}
.digita i:nth-child(3){animation-delay:0.36s}
@keyframes pulsa{0%,80%,100%{opacity:0.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- i controlli di risposta ---------- */
.risposta{margin-top:var(--space-2xs);padding-left:1.25rem;max-width:min(36rem,100%)}
.risposta form{display:flex;flex-direction:column;gap:var(--space-sm)}
.risposta input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.risposta textarea,
.modulo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modulo textarea{
  width:100%;min-height:48px;padding:0.7rem 0.9rem;margin:0;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-control);
  background:var(--color-surface-raised);color:var(--color-text-primary);
  font-size:var(--size-body);line-height:1.4}
.risposta textarea,.modulo textarea{min-height:6rem;resize:vertical}
.risposta input:focus-visible,.risposta textarea:focus-visible,.modulo input:focus-visible,.modulo textarea:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px;border-color:var(--color-text-primary)}
.risposta ::placeholder,.modulo ::placeholder{color:var(--color-text-tertiary);opacity:1}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md)}
.risposta .bottone{min-height:44px}
.risposta .bottone-testo{padding:0.6rem 0.15rem}

/* le scelte a tocco */
.scelte{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.scelta{display:inline-flex;align-items:center;gap:0.5rem;min-height:44px;padding:0.55rem 1rem;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-control);
  background:var(--color-surface-raised);color:var(--color-text-primary);
  font-family:var(--font-body);font-size:var(--size-button-label);line-height:1.3;text-align:left;cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.scelta:active{transform:scale(0.985) translateY(1px)}
.scelta[aria-pressed="true"]{background:var(--color-surface-inverse);color:var(--color-text-inverse);border-color:var(--color-surface-inverse)}
@media (hover:hover) and (pointer:fine){
  .scelta:hover{border-color:var(--color-accent-active);color:var(--color-accent-active)}
  .scelta[aria-pressed="true"]:hover{color:var(--color-text-inverse);border-color:var(--color-accent-hover)}
}
.scelta-altro{display:flex;flex-direction:column;gap:var(--space-sm)}

/* le spunte e i bottoni radio: il controllo nativo resta (invisibile, 44px di
   bersaglio), la casella si disegna accanto. Tastiera e lettori di schermo
   parlano col controllo vero. */
.conferma,.opzione{position:relative;display:flex;align-items:flex-start;gap:0.75rem;min-height:44px;padding-block:0.45rem;cursor:pointer;color:var(--color-text-primary)}
.conferma input,.opzione input[type="radio"],.opzione input[type="checkbox"]{position:absolute;left:0;top:0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.casella{flex:none;width:22px;height:22px;margin:0.2rem 0 0 11px;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface-raised);position:relative;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
input[type="radio"] + .casella{border-radius:50%}
input:checked + .casella{border-color:var(--color-text-primary);background:var(--color-text-primary)}
input[type="checkbox"]:checked + .casella::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--color-surface-default);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type="radio"]:checked + .casella::after{content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--color-surface-default)}
input:focus-visible + .casella{outline:2px solid var(--color-border-focus);outline-offset:2px}
.conferma > span:last-child,.opzione > span:last-child{padding-top:0.15rem}
/* il link nel testo del consenso: bersaglio allargato col padding, il margine uguale e contrario non sposta il testo */
.conferma a{color:var(--color-text-primary);padding-block:0.75rem;margin-block:-0.75rem}

/* i colori del marchio */
.colori{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.colore{display:inline-flex;align-items:center;gap:0.5rem;min-height:44px;padding:0.25rem 0.25rem 0.25rem 0.25rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface-raised)}
.colore-campione{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:36px;border-radius:var(--radius-control);border:1px solid var(--color-border-default);cursor:pointer;overflow:hidden}
.colore-campione input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.colore-campione:focus-within{outline:2px solid var(--color-border-focus);outline-offset:2px}
.colore-codice{font-family:var(--font-display);font-size:var(--size-small);letter-spacing:0.02em;text-transform:uppercase;color:var(--color-text-primary);min-width:5em}
.colore-aggiungi{position:relative;overflow:hidden;align-self:flex-start}
.colore-aggiungi input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.colore-aggiungi:focus-within{outline:2px solid var(--color-border-focus);outline-offset:2px}
.colore-togli{min-height:44px;min-width:44px;padding:0 0.6rem;border:0;background:transparent;color:var(--color-text-primary);font-size:var(--size-small);text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:0.2em;cursor:pointer}
@media (hover:hover) and (pointer:fine){.colore-togli:hover{color:var(--color-accent-active);text-decoration-color:var(--color-accent-active)}}

/* i file */
.file-zona{display:flex;flex-direction:column;gap:var(--space-sm)}
.file-scegli{position:relative;overflow:hidden}
.file-scegli input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.file-scegli:focus-within{outline:2px solid var(--color-border-focus);outline-offset:2px}
.file-elenco{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:0.5rem}
.file-voce{display:flex;flex-direction:column;gap:0.3rem;padding:0.4rem;border:1px solid var(--color-border-default);border-radius:var(--radius-control);background:var(--color-surface-raised);font-size:var(--size-small);line-height:var(--leading-small);min-width:0}
.file-anteprima{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--color-surface-sunken);border-radius:var(--radius-control)}
.file-icona{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:var(--color-surface-sunken);border-radius:var(--radius-control);font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-secondary)}
.file-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}
.file-stato{color:var(--color-text-secondary)}
.file-voce.file-errore .file-stato{color:var(--color-text-primary);border-left:2px solid var(--color-accent-default);padding-left:0.4rem}
.file-togli{align-self:flex-start;min-height:44px;margin-top:-0.4rem;margin-bottom:-0.4rem;padding:0 0.15rem;border:0;background:transparent;color:var(--color-text-primary);font-size:var(--size-small);text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:0.2em;cursor:pointer}
@media (hover:hover) and (pointer:fine){.file-togli:hover{color:var(--color-accent-active);text-decoration-color:var(--color-accent-active)}}
.eco-file{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.5rem}
.eco-file img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-control);display:block}
.eco-file span{display:inline-flex;align-items:center;min-height:56px;padding:0 0.6rem;border-radius:var(--radius-control);background:rgba(242,241,237,0.12);font-size:var(--size-small);max-width:100%;overflow-wrap:anywhere}

/* gli errori: si leggono, non si arrossano (l'accento come testo non passa AA) */
.errore{margin:0;padding-left:0.75rem;border-left:2px solid var(--color-accent-default);color:var(--color-text-primary);font-size:var(--size-small);line-height:var(--leading-small)}

/* il riepilogo */
.riepilogo{width:100%;padding:var(--space-md);border:1px solid var(--color-border-default);border-radius:var(--radius-control);background:var(--color-surface-raised);white-space:normal}
.riepilogo h2{font-size:var(--size-h4);line-height:var(--leading-h4)}
.riepilogo-tappa{margin-top:var(--space-md)}
.riepilogo-tappa h3{font-family:var(--font-body);font-size:var(--size-small);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-2xs)}
.riepilogo-voci{list-style:none;margin:0;padding:0}
.riepilogo-voce{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-sm);align-items:center;padding-block:0.55rem;border-top:1px solid var(--color-border-default)}
.riepilogo-d{font-size:var(--size-small);line-height:var(--leading-small);color:var(--color-text-secondary)}
.riepilogo-v{color:var(--color-text-primary);overflow-wrap:anywhere;white-space:pre-line}
.riepilogo-v.riepilogo-vuota{color:var(--color-text-secondary)}
.riepilogo-voce .bottone-testo{grid-row:1/3;grid-column:2;min-height:44px;font-size:var(--size-small);padding:0.35rem 0.15rem}
.riepilogo-consensi{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--color-border-default);display:flex;flex-direction:column;gap:var(--space-2xs)}
.riepilogo-azioni{margin-top:var(--space-md)}

/* la chiusura */
.fine-titolo{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h3);line-height:var(--leading-h3);letter-spacing:var(--tracking-h3);margin:0}

/* ---------- il modulo di riserva ---------- */
.modulo{max-width:var(--measure-text);padding-bottom:var(--space-3xl)}
.modulo-intro{color:var(--color-text-secondary);margin-top:var(--space-sm);max-width:var(--measure-text)}
.modulo-tappa{border:0;padding:0;margin:var(--space-2xl) 0 0;min-width:0}
.modulo-tappa > legend{padding:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:var(--leading-h4)}
.modulo-tappa > legend .numero-accento{font-size:1.5rem;margin-right:0.4rem}
.campo{margin-top:var(--space-lg);border:0;padding:0;min-width:0}
.campo > label,.campo > legend{display:block;padding:0;font-weight:var(--weight-medium);color:var(--color-text-primary)}
.campo .aiuto{margin-top:0.25rem;font-size:var(--size-small);line-height:var(--leading-small);color:var(--color-text-secondary)}
.campo > input,.campo > textarea{margin-top:0.6rem}
.campo input[type="file"]{display:block;margin-top:0.6rem;min-height:44px;font-size:var(--size-small);max-width:100%}
.obbl{color:var(--color-accent-active);font-weight:var(--weight-semibold)}
.campo-scelte .opzione:first-of-type{margin-top:0.4rem}
.opzione-riga,.opzione-colore,.opzione-nota{display:grid;grid-template-columns:minmax(6rem,11rem) minmax(0,1fr);align-items:center;gap:0.5rem 0.75rem;cursor:default;padding-block:0.2rem}
.opzione-riga span,.opzione-colore span,.opzione-nota span{font-size:var(--size-small);color:var(--color-text-secondary)}
@media (max-width:30rem){.opzione-riga,.opzione-colore,.opzione-nota{grid-template-columns:1fr}}
.campo-altro{margin-top:0.25rem}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.modulo .azioni{margin-top:var(--space-lg)}

/* ---------- il piede, corto come nella privacy ---------- */
.piede-candidatura{margin-top:var(--space-2xl)}

/* i gruppi di campi (i social): etichetta piccola sopra ogni campo */
.campo-gruppo{display:flex;flex-direction:column;gap:0.3rem}
.campo-gruppo label{font-size:var(--size-small);line-height:var(--leading-small);color:var(--color-text-secondary)}