/*
 * Nova — foglio di stile unico, filosofia CSS Zen Garden:
 * HTML semantico + presentazione 100% qui, via design token (custom properties).
 * Cambiare tema = cambiare i token sotto [data-theme], senza toccare il markup.
 * Mobile-first (utenti da WebView WhatsApp). No utility-class.
 */

/* ---- Design token (tema "nova") ---- */
:root[data-theme="nova"] {
  --bg: #F5F2EC;
  --surface: #FFFFFF;
  --ink: #16243A;
  --muted: #51596A;
  --accent: #E0922F;
  --accent-ink: #16243A;
  --accent-hover: #C2761B;
  --accent-deep: #B0761F;   /* ambra scura: eyebrow, sigle, micro-testo su crema */
  --whatsapp: #25D366;      /* verde del canale, usato SOLO sulla chip di richiesta */
  --border: #E6E0D4;
  --danger: #C0392B;
  --radius: 14px;
  /* Una superfamiglia sola: Plex nasce per la documentazione tecnica, e i manuali
     sono quello. Archivo restava in disaccordo con Plex a ogni titolo, quindi ora
     vive SOLO nel logotipo — un marchio in una faccia sua non e' un contrasto. */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-mark: "Archivo", system-ui, sans-serif;
  /* WhatsApp non pubblica un font utilizzabile da terzi: la sua interfaccia usa
     il font di sistema di ogni piattaforma (SF Pro, Roboto, Segoe UI). Questo
     stack e' quindi l'equivalente onesto: sul telefono di chi legge, la chip
     rende con lo stesso carattere dell'app. */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font: 16px/1.5 var(--font-text);
  color: var(--ink);
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem;
}
h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--accent-hover); }

/* ---- Card centrale (form/messaggi) ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(22, 36, 58, .08);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  width: 100%;
  max-width: 380px;
}
.card__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-hover); margin: 0 0 .5rem;
}
.card__title { font-size: 1.35rem; margin: 0 0 .4rem; }
.card__subtitle { font-size: .95rem; font-weight: 600; color: var(--muted); margin: 0 0 .6rem; }
.card__lead { color: var(--muted); margin: 0 0 1.25rem; }

/* ---- Form ---- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field select {
  width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: #FBFAF7;
  border: 1px solid #D8D2C4; border-radius: 10px; outline: none;
  min-height: 44px;
}
.field input:focus, .field select:focus { border-color: var(--accent); background: var(--surface); }
.field__error { color: var(--danger); font-size: .85rem; }
.field__hint { color: var(--muted); font-size: .85rem; margin: 0; }

/* Consegna report AI Radar (via 2): pannello a fine /path. Stati: form numero
   (step 1) → CTA WhatsApp (step 2) → download (✓). */
/* Fascia in evidenza: esce dal padding della card e arriva ai bordi pagina, col
   fondo beige invece del bianco. Il salto di colore è ciò che la stacca dal
   percorso qui sopra; il filetto accent in cima la marca come l'azione finale. */
.report-claim { margin: 2rem calc(-1 * clamp(1.5rem, 5vw, 2.25rem)) calc(-1 * clamp(1.5rem, 5vw, 2.25rem));
  padding: 2rem clamp(1.5rem, 5vw, 2.25rem);
  background: var(--bg); border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex; justify-content: center; }
/* Il box vero: stretto, centrato, bianco sul beige. */
.report-claim__box { width: 100%; max-width: 520px; padding: 1.6rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(22, 36, 58, .07);
  display: flex; flex-direction: column; gap: 1rem; }
.report-claim__kicker { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); }
.report-claim__title { margin: 0; font: 700 1.5rem/1.15 var(--font-display); text-wrap: balance; }
.report-claim__lead { margin: 0; color: var(--muted); font-size: .95rem; }
/* I tre passi: pallino verde WhatsApp, non un numero — è una sequenza breve,
   non una procedura da seguire a memoria. */
.report-claim__steps { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .95rem; }
.report-claim__steps li { display: flex; gap: .55rem; align-items: baseline; }
.report-claim__steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none; transform: translateY(-1px); }
.report-claim__note { margin: 0; color: var(--muted); font-size: .82rem; }
.report-claim__label { display: block; flex: 1 0 100%; font-weight: 700; font-size: .9rem;
  margin-bottom: -.15rem; }
.report-claim__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.report-claim__form input[type="tel"] { flex: 1 1 14ch; min-width: 12ch; padding: .45rem .8rem;
  font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid #D8D2C4; border-radius: 10px; outline: none; min-height: 44px; }
/* Focus sull'accent, in coppia col bottone: campo e CTA si leggono come una
   cosa sola. */
.report-claim__form input[type="tel"]:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 146, 47, .22); }

/* CTA: arancione accent del tema (non il verde WhatsApp). Compatta (44px) e
   affiancata al campo dentro il form; piena larghezza quando è l'unica azione. */
.btn-whatsapp { display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 44px; padding: .7rem 1.1rem; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font: 700 1.02rem var(--font-text);
  text-decoration: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.btn-whatsapp:hover { background: var(--accent-hover); color: #fff; }
.btn-whatsapp__glyph { width: 20px; height: 20px; flex: none; }
/* Riga propria sotto al campo: la CTA è il passo successivo al numero, non un
   accessorio accanto. */
.report-claim__form .btn-whatsapp { flex: 1 0 100%; }

/* Download report: variante piena larghezza del bottone accent */
.btn-report { display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 52px; padding: .8rem 1.2rem; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font: 700 1.05rem var(--font-text);
  text-decoration: none; transition: background .15s; }
.btn-report:hover { background: var(--accent-hover); color: #fff; }
.btn-report__glyph { font-size: 1.2rem; }

/* Informativa inline: discreta, si apre al bisogno */
.privacy-inline { font-size: .85rem; color: var(--muted); }
.privacy-inline summary { cursor: pointer; font-weight: 600; }
.privacy-inline ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.privacy-inline li { margin-bottom: .35rem; }

@media (max-width: 560px) {
  .report-claim__form { flex-direction: column; }
}

/* Campi affiancati (es. Emetti token): bottone allineato in basso ai campi */
.form-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-top: .75rem; }
.form-row .field { flex: 1 1 200px; margin-bottom: 0; }
.form-row .btn { min-height: 44px; }
@media (max-width: 560px) { .form-row { flex-direction: column; align-items: stretch; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 48px; padding: .9rem 1.25rem;
  font: 600 1rem var(--font-text); cursor: pointer; text-decoration: none;
  border: 0; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  transition: background .15s;
}
.btn:hover { background: var(--accent-hover); }

.note { font-size: .8rem; color: var(--muted); margin-top: 1rem; }

/* ---- Survey radar: card larga + opzioni come righe selezionabili ---- */
.card--wide { max-width: 760px; }
.q-dim { font: 800 1.1rem var(--font-display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-hover); margin: 1.8rem 0 .6rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--border); }
.q-fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.q-fieldset legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: .45rem; }
.q-option { display: flex; align-items: flex-start; gap: .65rem; margin: .4rem 0;
  padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 10px;
  background: #FBFAF7; cursor: pointer; line-height: 1.4; font-size: .95rem;
  transition: border-color .15s, background .15s; }
.q-option:hover { border-color: var(--accent); }
.q-option:has(input:checked) { border-color: var(--accent); background: #FBEAD2; }
.q-option input { margin: .2rem 0 0; flex: none; accent-color: var(--accent); }

/* ---- Viewer risorsa (PDF/video/audio) ---- */
body:has(.viewer-main) { display: block; padding: 0; place-items: initial; }
.viewer-main { width: 100%; display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem clamp(.5rem, 3vw, 1.5rem); min-height: 100svh; box-sizing: border-box; }
.viewer-head { text-align: center; }
.viewer-head .card__title { font-size: 1.15rem; margin: 0; }
.viewer {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 4px 16px rgba(22,36,58,.08);
}
iframe.viewer, video.viewer { flex: 1; height: auto; min-height: calc(100svh - 90px); display: block; }
.viewer--audio { min-height: 0; height: auto; padding: 1rem; }

/* PDF.js: pagine canvas fit-to-width, scroll verticale */
.pdf { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pdf__page-wrap { position: relative; max-width: 900px; }
.pdf__page { display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 10px rgba(22,36,58,.10); }
/* layer link cliccabili sopra il canvas (annotazioni Link del PDF) */
.pdf__links { position: absolute; inset: 0; }
.pdf__links a { position: absolute; display: block; }
.pdf__loading { color: var(--muted); padding: 2rem; text-align: center; }

/* ====== Home Nova (vetrina, da Claude Design) ====== */
body:has(.nova) { display: block; padding: 0; place-items: initial; }
.nova { display: flex; flex-direction: column; min-height: 100svh; }
.nova a { text-decoration: none; }
.nv-wrap, .nv-bar, .nv-hero, .nv-section, .nv-radar, .nv-steps__grid, .nv-footer {
  max-width: 1140px; margin-inline: auto; }

/* ---- Header ---- */
.nv-header { position: sticky; top: 0; z-index: 20; background: rgba(245,242,236,.88);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nv-bar { padding: 0 24px; min-height: 54px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nv-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.nv-badge { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--accent);
  display: grid; place-items: center; font: 800 15px/1 var(--font-mark); }
.nv-word { font: 800 18px/1 var(--font-mark); letter-spacing: -.02em; }


/* ---- Hero ---- */
/* Il gap uniforme staccava allo stesso modo cose che si leggono insieme
   (titolo → "Tutti gratuiti." → sottotitolo) e cose separate (il salto al radar):
   ne serve uno stretto, con le eccezioni dichiarate sotto. */
/* Lo spazio fra queste righe non veniva dal `gap` ma dall'INTERLINEA: un
   line-height 1.6 su un paragrafo di una riga sola aggiunge mezza interlinea
   sopra e sotto, che si somma al gap. Qui si stringe il line-height (il testo
   e' corto, non serve respiro di lettura) e si tiene il gap piccolo. */
.nv-hero { padding: 10px 24px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.nv-hero .nv-hero .nv-free { line-height: 1.05; }
.nv-hero .nv-lead { line-height: 1.45; }
.nv-hero .nv-trust { margin-top: 0; line-height: 1.35; }
.nv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: #FBFAF7; border: 1px solid var(--border); font: 700 11.5px/1 var(--font-text);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.nv-h1 { margin: 0; font: 800 clamp(32px,5.2vw,62px)/1.02 var(--font-display);
  letter-spacing: -.03em; text-wrap: balance; }
.nv-free { margin: 0; font: 800 clamp(24px,2.8vw,34px)/1.1 var(--font-display); letter-spacing: -.02em; }
.nv-lead { margin: 0; font-size: clamp(16px,1.72vw,19.5px); line-height: 1.6; color: var(--muted);
  text-wrap: pretty; }
.nv-trust { margin: 0; font-size: 14.5px; color: var(--muted); }
.nv-trust strong { color: var(--ink); }

/* Il radar vive nell'header, non nell'hero: e' la seconda strada del sito e va
   raggiungibile da ogni punto della pagina, non solo dall'inizio. Bordato e non
   pieno: l'azione primaria resta WhatsApp sulle card, e un bottone ambra qui
   sopra la scavalcherebbe. Punta a #radar, dove sta la spiegazione. */
/* Navy pieno su testo bianco: 15.5:1. L'ambra resta libera per cio' che deve
   spiccare da sola (numeri della sequenza, occhielli) invece di essere spesa
   qui, dove basta un pulsante leggibile. */
.nv-cta { display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
  min-height: 46px; padding: 0 20px;
  border-radius: 10px; background: var(--ink); border: 1px solid transparent;
  color: #FFFFFF; font: 600 15px/1.25 var(--font-text);
  transition: background .15s; }
.nv-cta:hover { background: #24374F; }
.nv-cta svg { flex: none; color: var(--accent); width: 19px; height: 19px; }
/* L'etichetta lunga dice cosa ottieni; sotto i 1100px non ci sta accanto ai link
   della nav, quindi cede il posto a quella corta invece di mandare la barra a capo. */
.nv-cta__short { display: none; }
@media (max-width: 1100px) {
  .nv-cta__full { display: none; }
  .nv-cta__short { display: inline; }
}

/* ---- Sezione manuali ---- */
.nv-section { padding: 0 24px clamp(48px,6vw,72px); }
.nv-section__head { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
/* I quattro passi SONO una sequenza (clicchi, parte il messaggio, ricevi, scarichi):
   la numerazione qui e' informazione. Griglia e non fila libera, cosi' non si
   spezza "uno sotto l'altro" a larghezze intermedie: 4 → 2 → 1, sempre allineati. */
.nv-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px;
  margin: 0; padding: 0; list-style: none; }
.nv-flow li { display: flex; align-items: center; gap: 9px;
  font: 600 clamp(13.5px,1.15vw,15.5px)/1.35 var(--font-text); color: var(--muted); }
.nv-flow li:last-child { color: var(--ink); }
.nv-flow li:not(:last-child)::after { content: "→"; margin-left: auto; padding-left: 6px;
  color: var(--accent-deep); font-weight: 700; }
.nv-flow__n { width: 27px; height: 27px; flex: none; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); display: grid; place-items: center;
  font: 700 13px/1 var(--font-display); color: var(--accent-deep); }
/* Impilata: il contenitore e' una GRIGLIA, quindi si cambia il numero di colonne
   (flex-direction qui non avrebbe effetto). La regola che spegne le frecce deve
   reggere la specificita' di `.nv-flow li:not(:last-child)::after`, altrimenti
   perde e le frecce ricompaiono in verticale, dove non indicano niente. */
.nv-flow--stack { grid-template-columns: 1fr; gap: 9px; margin-top: 6px; }
.nv-flow--stack li { font-size: 15px; }
.nv-flow--stack li:not(:last-child)::after { content: none; }
.nv-flow--stack .nv-flow__n { width: 22px; height: 22px; border-radius: 7px; font-size: 11px;
  background: #F6F3EC; }

/* I box dei manuali restano com'erano prima del passaggio da Claude Design:
   copertina piena e alta, occhiello "AI", titolo Archivo, chip ambra. Archivo qui
   e' esplicito (--font-mark): allora era --font-display, che ora e' Plex Sans. */
.nv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px;
  padding-top: clamp(14px,1.8vw,20px); }
.nv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; color: var(--ink);
  transition: transform .15s, box-shadow .15s; }
.nv-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(22,36,58,.13); }
.nv-card__cover { color: #fff; padding: 16px 20px; min-height: 105px; display: flex; flex-direction: column;
  justify-content: space-between; }
.nv-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: .75; }
.nv-card__title { font: 800 20px/1.14 var(--font-mark); }
.nv-card__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nv-card__body p { margin: 0; flex: 1; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Verde WhatsApp con testo NAVY, non bianco: bianco su #25D366 sta a 2:1 e a
   14px non si legge (il verde e' chiaro). Navy sopra lo stesso verde da 7.6:1,
   e il colore resta quello riconoscibile del canale. */
/* Verde WhatsApp pieno con testo NAVY: bianco su #25D366 sta a 2:1 e a 14px non
   si legge. Navy sullo stesso verde da 7.9:1, e il colore resta quello del canale.
   Il glifo indica dove porta il pulsante; il font e' quello di sistema, cioe'
   lo stesso che WhatsApp usa nella sua interfaccia. */
.nv-chip { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font: 600 14px/1 var(--font-system); color: var(--ink);
  background: var(--whatsapp); padding: 8px 13px; border-radius: 8px; }
.nv-chip svg { flex: none; }

/* ---- Radar ---- */
.nv-radar { padding: 0 24px clamp(48px,6vw,76px); }
.nv-radar__card { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 52px -38px rgba(22,36,58,.5); }
.nv-radar__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px,3.4vw,40px); }
.nv-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 700 11.5px/1 var(--font-text);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.nv-h2 { margin: 0; font: 700 clamp(24px,2.7vw,34px)/1.16 var(--font-display); letter-spacing: -.02em;
  text-wrap: balance; }
.nv-radar__body .nv-lead { max-width: 56ch; font-size: 16.5px; line-height: 1.7; }
.nv-radar__cta { display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: clamp(26px,3.4vw,40px); background: var(--ink); color: var(--bg); }
.nv-radar__title { margin: 0; font: 700 clamp(21px,2.1vw,27px)/1.2 var(--font-display);
  letter-spacing: -.015em; text-wrap: balance; }
.nv-radar__note { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(245,242,236,.72); }
.nv-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 0 20px; border-radius: 12px; background: var(--accent); color: var(--ink);
  font: 700 16.5px/1 var(--font-text); transition: background .15s, transform .15s, color .15s; }
.nv-btn:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); }

/* ---- Come funziona ---- */
.nv-steps { background: #FBFAF7; border-block: 1px solid var(--border); }
.nv-steps__grid { padding: clamp(48px,6vw,76px) 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(22px,3vw,36px); }
/* Erano numerate 01/02/03, ma non sono una sequenza: la prima e' un'azione, la
   seconda una proprieta', la terza una politica. Non esiste un "prima" e un
   "poi" — i numeri erano decorazione travestita da struttura. Al loro posto un
   filetto: separa senza affermare un ordine che non c'e'. */
.nv-steps__grid > div { display: flex; flex-direction: column; gap: 10px;
  border-top: 2px solid var(--accent); padding-top: 14px; }
.nv-steps h3 { margin: 0; font: 700 clamp(18px,2vw,21px)/1.25 var(--font-display); letter-spacing: -.01em; }
.nv-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---- Footer ---- */
.nv-footer { margin-top: auto; padding: clamp(40px,5vw,64px) 24px clamp(36px,4vw,52px);
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.nv-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 52ch; }
.nv-footer__brand p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted);
  text-wrap: pretty; }
.nv-footer__legal { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.nv-footer__legal a { color: var(--accent-deep); }

/* ---- Adattamento mobile ---- */
@media (max-width: 900px) {
  .nv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La freccia indica il passo accanto: con due colonne mentirebbe a fine riga. */
  .nv-flow li:nth-child(2n)::after, .nv-flow li:last-child::after { content: none; }
}
@media (max-width: 760px) {
  .nv-radar__card { grid-template-columns: 1fr; }
  .nv-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nv-cta { width: auto; }
  .nv-footer { flex-direction: column; gap: 20px; }
}
@media (max-width: 560px) {
  .nv-bar { min-height: 50px; padding: 8px 18px; gap: 12px; }
  .nv-cta { padding: 0 11px; min-height: 40px; }
  .nv-cta__full, .nv-cta__short { display: none; }
  .nv-hero { padding: 8px 18px 16px; gap: 5px; }
  .nv-section, .nv-radar { padding-inline: 18px; }
  .nv-steps__grid { padding-inline: 18px; }
  .nv-footer { padding-inline: 18px; }
  .nv-flow { grid-template-columns: 1fr; gap: 8px; }
  .nv-flow li::after { content: none !important; }
  /* Sotto i 560 la griglia va a colonna singola da sola (minmax 258): qui si
     abbassa solo la fascia colorata, che a piena larghezza sarebbe sproporzionata. */
  .nv-card__cover { min-height: 84px; padding: 14px 16px; }
  .nv-radar__body, .nv-radar__cta { padding: 22px; }
  .nv-btn { min-height: 52px; font-size: 15.5px; }
}

/* Tastiera: il focus deve restare visibile ovunque, non solo dove c'e' hover. */
.nova a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px;
  border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .nv-card, .nv-cta, .nv-btn { transition: none; }
  .nv-card:hover, .nv-btn:hover { transform: none; }
}

/* ====== Admin (plain Rails) — mobile-first ====== */
body:has(.admin) { display: block; padding: clamp(1rem, 3vw, 2rem) clamp(.75rem, 3vw, 1.5rem); place-items: initial; }
.admin { max-width: 960px; margin: 0 auto; }
.admin h1 { font: 800 clamp(1.35rem, 3vw, 1.75rem) var(--font-display); letter-spacing: -.01em; margin: .25rem 0 1rem; }
.admin h1 small { font: 600 .95rem var(--font-text); color: var(--muted); letter-spacing: 0; }
.admin__crumb { font-size: .9rem; margin: 0 0 .25rem; }
.admin__crumb a { font-weight: 600; text-decoration: none; }
.admin__crumb a:hover { text-decoration: underline; }

.admin__notice { background: #EAF6EC; color: #1E6B34; border: 1px solid #CBE7D2;
  padding: .7rem 1rem; border-radius: 10px; font-weight: 500; }
.admin__notice--alert { background: #FBEAE7; color: var(--danger); border-color: #F0CFC9; }

/* Pannello: ogni sezione del builder è una card con testata (titolo + azione) */
.admin__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(22, 36, 58, .05); padding: clamp(.9rem, 2.5vw, 1.4rem); margin: 1.1rem 0; }
.admin__panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .25rem; }
.admin__panel-head h2, .admin__panel-head h3 { margin: 0; font: 700 1.05rem var(--font-display); }
.admin__count { display: inline-block; min-width: 1.6em; text-align: center; padding: .1rem .45rem;
  border-radius: 999px; background: #F0ECE2; color: var(--muted); font: 700 .8rem var(--font-text); vertical-align: 2px; }

/* Sub-card (es. una dimensione dentro il pannello Dimensioni) */
.admin__section { border: 1px solid var(--border); border-radius: 10px;
  padding: .85rem 1rem; margin: .75rem 0; background: #FCFBF8; }
.admin__section > h3 { margin: 0 0 .5rem; font: 700 1rem var(--font-display); }

/* Tabelle: righe a filetto, testata quieta, scroll orizzontale su schermi stretti */
.admin__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .5rem; }
.admin__table { width: 100%; border-collapse: collapse; min-width: 480px; }
.admin__scroll--wide .admin__table { min-width: 640px; }
.admin__table th { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: .5rem .6rem; border-bottom: 2px solid var(--border); }
.admin__table td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: middle; }
.admin__table tbody tr:hover td { background: #FAF7F0; }
.admin__table td:last-child { white-space: nowrap; text-align: right; }
.admin__table .row--has-chat td { background: #FCFDF6; }

/* Azioni di riga: bottoni compatti e coerenti (link modifica + delete) */
.admin__actions { display: inline-flex; gap: .4rem; align-items: center; }

/* Azioni bulk sopra una tabella: blocco (non inline-flex) così i bottoni
   restano nel pannello e vanno a capo invece di uscire dallo schermo. */
.admin__bulk { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .25rem 0 0; }
.btn--sm { display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: .25rem .7rem; font: 600 .85rem var(--font-text);
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--ink); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn--sm:hover { background: #F0ECE2; border-color: #D8D2C4; }
.btn--danger { display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: .25rem .7rem; font: 600 .85rem var(--font-text);
  border: 1px solid #F0CFC9; border-radius: 8px; background: var(--surface);
  color: var(--danger); cursor: pointer; transition: background .15s; }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Dashboard radar: sfrutta il desktop. Container largo + griglia 2 colonne
   (radar↔barre, aspirazioni↔wishlist); selezione e percorsi a tutta riga. */
.admin--wide { max-width: 1400px; }
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.dash-grid > .admin__panel { margin: 0; }
@media (min-width: 1000px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid__full { grid-column: 1 / -1; }
}
/* Lista di selezione: checkbox su più colonne invece di una lista chilometrica */
.dash-select { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .9rem; }
.dash-select li { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.dash-select input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

.admin .field { max-width: 480px; }
.admin .btn { max-width: 240px; }
.admin form { margin: 0; }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.badge--chat { background: #D5F5E3; color: #1E8449; }
.badge--multi { background: #FBEAD2; color: var(--accent-hover); }
.badge--on { background: #D5F5E3; color: #1E8449; }
.badge--off { background: #F0ECE2; color: var(--muted); }

/* Dashboard radar: barre per criterio (HTML puro) e legenda del compare */
.bar-row { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.bar-row__label { flex: 0 0 min(46%, 240px); font-size: .9rem; }
.bar-row__track { flex: 1; height: 20px; background: #EFEAE0; border-radius: 4px; overflow: hidden; }
.bar-row__fill { display: block; height: 100%; background: #4C6B8A; border-radius: 4px; }
.bar-row__value { flex: 0 0 3.2em; text-align: right; font-size: .85rem; color: var(--muted); }
.radar-legend { list-style: none; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.radar-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

/* Mobile: azioni impilate, bottoni pieni, testate pannello in colonna */
@media (max-width: 560px) {
  .admin .btn { max-width: none; }
  .admin__table td:last-child { white-space: normal; }
  .admin__actions { flex-wrap: wrap; justify-content: flex-end; }
  /* Bulk: bottoni a tutta larghezza e area di tocco piena (44px, WCAG 2.5.5) */
  .admin__bulk { flex-direction: column; align-items: stretch; }
  .admin__bulk .btn--sm, .admin__bulk .btn--danger { width: 100%; min-height: 44px; }
  /* La testata pannello non stringe il titolo per far stare il bottone CSV */
  .admin__panel-head { align-items: flex-start; }
  /* Checkbox della tabella: bersaglio più grande col dito */
  .admin__table input[type="checkbox"] { width: 20px; height: 20px; }
}