/* Visione d'insieme (passo 03) e anteprima dei moduli: le quattro schede con gli esempi della vetrina (welcome-preview.mjs).
   Il passo 03 dà più spazio alla demo: niente scelte fatte accanto al titolo, finestra larga quanto la pagina. */
.personal-preview{max-width:1120px}
.preview-intro{display:block;max-width:760px}
.personal-preview-window,.personal-preview>.flow-actions{max-width:none}
.preview-surface{container-type:inline-size}

.wp-notes,.wp-rest,.wp-changes,.wp-parts,.wp-lab-list,.wp-chips,.wp-areas{list-style:none;margin:0;padding:0}
.wp-label{font-size:var(--fs-9,9px);letter-spacing:1.2px;text-transform:uppercase;color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 67%,var(--bg))),#000 var(--tone));margin:22px 0 10px}
.wp-label.green{color:color-mix(in srgb,#6ee7b7,#000 var(--tone));margin:14px 0 8px}
.wp-card{border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:16px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));padding:18px;min-width:0}
.wp-topline{display:flex;align-items:center;gap:10px;font-size:var(--fs-9,9px);letter-spacing:1.3px;color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 79%,var(--bg))),#000 var(--tone))}
.wp-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent-2) 29%,transparent);background:color-mix(in srgb,var(--accent-2) 7%,transparent);font-size:var(--fs-15,15px);color:color-mix(in srgb,var(--accent-soft),#000 var(--tone-light));flex-shrink:0}
.wp-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.wp-column{display:grid;gap:12px;min-width:0;align-content:start}
.wp-column>.wp-label:first-child{margin-top:0}
.wp-note{font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 56%,var(--bg));line-height:1.6;margin-top:14px}
.wp-done{font-size:var(--fs-11,11px);color:color-mix(in srgb,#86efac,#000 var(--tone));margin-top:10px}
.wp-why{font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 72%,var(--bg));margin-top:12px;line-height:1.55}
.wp-why strong{color:color-mix(in srgb,#fdba74,#000 var(--tone));font-weight:550;margin-right:4px}
.wp-spark{display:block;width:100%;height:26px}
.wp-badge{display:inline-flex;align-items:center;font-size:var(--fs-9,9px);letter-spacing:1.2px;text-transform:uppercase;color:color-mix(in srgb,#6ee7b7,#000 var(--tone));border:1px solid #34d39966;background:#34d3990f;padding:6px 10px;border-radius:7px;white-space:nowrap}

/* Training: i sei segnali della seduta, lo stesso istante in tutti i riquadri */
.wp-telemetry{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.wp-telemetry .route-trace-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.wp-telemetry h3{font-size:var(--fs-14,14px);font-weight:550;letter-spacing:-.2px;margin:0}
.wp-telemetry [data-telemetry-time]{font-size:var(--fs-11,11px);color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 79%,var(--bg))),#000 var(--tone-light));font-variant-numeric:tabular-nums}
.wp-telemetry .telemetry-explanation{font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 65%,var(--bg));margin-top:6px;line-height:1.6}
.wp-telemetry .route-signals{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wp-telemetry .signal-card{padding:11px 11px 7px}
.wp-telemetry .plot-grid{fill:none}
.wp-scrubber{display:grid;gap:8px;font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 72%,var(--bg));margin-top:14px}
.wp-scrubber input{width:100%;margin:0;accent-color:var(--accent-2);min-height:30px;cursor:pointer}

/* Nutrition: notifiche con risposta e il resto di oggi, aggiornato dall'AI */
.wp-notes{display:grid;gap:8px}
.wp-notify{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.wp-notify-head{display:flex;align-items:center;gap:10px}
.wp-notify-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:var(--fs-12,12px);border:1px solid currentColor;flex-shrink:0}
.wp-notify-icon.pink{color:color-mix(in srgb,#f472b6,#000 var(--tone))}
.wp-notify-icon.orange{color:color-mix(in srgb,#fb923c,#000 var(--tone))}
.wp-notify-icon.cyan{color:color-mix(in srgb,#22d3ee,#000 var(--tone))}
.wp-notify-head strong{flex:1;font-size:var(--fs-12,12px);font-weight:550}
.wp-notify-head time{font-size:var(--fs-9,9px);color:color-mix(in srgb,var(--ink) 58%,var(--bg))}
.wp-notify>p{font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 68%,var(--bg));margin-top:5px}
.wp-notify>.wp-done{font-size:var(--fs-10,10px);margin-top:8px}
.wp-notify-actions,.wp-choices{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.wp-notify-actions button,.wp-choices button{min-height:40px;padding:7px 12px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);background:color-mix(in srgb,var(--ink) 3%,transparent);font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 92%,var(--bg))}
.wp-notify-actions button[aria-pressed=true],.wp-choices button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent-2) 50%,transparent);background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 96%,var(--bg))),#000 var(--tone-light))}
.wp-choices button.primary{background:var(--gradient);border-color:#f472b64d;color:var(--on-accent)}
.wp-live{border-color:color-mix(in srgb,var(--accent-2) 20%,transparent)}
.wp-rest{display:grid;gap:8px;margin-top:12px}
.wp-rest li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:11px;background:color-mix(in srgb,var(--ink) 2%,var(--bg));transition:border-color .25s,background .25s}
.wp-rest li>span{width:20px;text-align:center;color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 79%,var(--bg))),#000 var(--tone));flex-shrink:0}
.wp-rest li>div{flex:1;display:grid;gap:2px;min-width:0}
.wp-rest small{font-size:var(--fs-9,9px);color:color-mix(in srgb,var(--ink) 62%,var(--bg))}
.wp-rest strong{font-size:var(--fs-12,12px);font-weight:500}
.wp-rest em{font-style:normal;font-size:var(--fs-8,8px);letter-spacing:.8px;text-transform:uppercase;color:color-mix(in srgb,#86efac,#000 var(--tone));border:1px solid #86efac55;border-radius:5px;padding:3px 6px;white-space:nowrap}
.wp-rest li.changed{border-color:color-mix(in srgb,var(--accent-2) 33%,transparent);background:color-mix(in srgb,var(--accent-2) 6%,transparent)}

/* Solo con Completo: il blocco verde, come la scheda del piano Completo */
.wp-complete{margin-top:22px;border:1px solid #34d39950;border-radius:18px;padding:20px;background:radial-gradient(ellipse at top right,#34d39912,transparent 60%),color-mix(in srgb,var(--ink) 3%,var(--bg))}
.wp-complete-copy h4{font-size:var(--fs-17,17px);font-weight:550;letter-spacing:-.3px;margin:12px 0 6px}
.wp-complete-copy p{font-size:var(--fs-12,12px);color:color-mix(in srgb,var(--ink) 67%,var(--bg));line-height:1.6;max-width:680px}
.wp-complete-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:16px;align-items:start}
.wp-lab,.wp-health{border-color:#34d39933}
.wp-lab .wp-mark,.wp-health .wp-mark{border-color:#34d3994a;background:#34d39912;color:color-mix(in srgb,#6ee7b7,#000 var(--tone))}
.wp-what{margin-top:14px}
.wp-what small{font-size:var(--fs-9,9px);letter-spacing:1px;color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 67%,var(--bg))),#000 var(--tone))}
.wp-what p{font-size:var(--fs-12,12px);color:color-mix(in srgb,var(--ink) 86%,var(--bg));margin-top:4px}
.wp-what strong{font-weight:550;color:var(--ink)}
.wp-changes{display:grid;gap:6px}
.wp-changes li{position:relative;padding:8px 12px 8px 28px;border-radius:10px;border:1px solid #34d39940;background:#34d3990d;font-size:var(--fs-11,11px);color:color-mix(in srgb,#d1fae5,#000 var(--tone-light))}
.wp-changes li::before{content:'+';position:absolute;left:12px;top:7px;color:color-mix(in srgb,#6ee7b7,#000 var(--tone))}
.wp-lab .wp-why strong{color:color-mix(in srgb,#6ee7b7,#000 var(--tone))}
.wp-pairs{display:grid;gap:8px;min-width:0}
.wp-pairs>.wp-label{margin:0 0 2px}
.wp-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:14px;background:color-mix(in srgb,var(--ink) 2%,var(--bg));overflow:hidden}
.wp-pair>header{grid-column:1/-1;padding:8px 12px;font-size:var(--fs-11,11px);font-weight:550;border-bottom:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
.wp-pair-side{display:grid;align-content:start;gap:3px;padding:10px 12px;min-width:0}
.wp-pair-side.lab{border-left:1px solid color-mix(in srgb,var(--ink) 6%,transparent);background:#34d39908}
.wp-pair-side small{font-size:var(--fs-8,8px);letter-spacing:1px;color:color-mix(in srgb,color-mix(in srgb,var(--accent) 28%,color-mix(in srgb,var(--ink) 67%,var(--bg))),#000 var(--tone))}
.wp-pair-side.lab small{color:color-mix(in srgb,#6ee7b7,#000 var(--tone))}
.wp-pair-side strong{font-size:var(--fs-18,18px);font-weight:550}
.wp-pair-side strong em,.wp-lab-list b em{font-style:normal;font-size:var(--fs-10,10px);font-weight:400;color:color-mix(in srgb,var(--ink) 62%,var(--bg));margin-left:3px}
.wp-pair-side span{font-size:var(--fs-9,9px);color:color-mix(in srgb,var(--ink) 67%,var(--bg))}
.wp-pair-bar{display:block;height:4px;border-radius:4px;margin-top:6px;background:linear-gradient(90deg,#f472b6 calc(var(--v)*1%),color-mix(in srgb,var(--ink) 7%,transparent) 0)}

/* Analisi: i numeri, poi recupero, sonno e carico in grafici bassi */
.wp-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wp-score-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:14px}
.wp-score-head strong{font-size:46px;font-weight:300;letter-spacing:-2px;line-height:1}
.wp-score-head small{font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 62%,var(--bg))}
.wp-score-head.bio strong{color:color-mix(in srgb,#a7f3d0,#000 var(--tone-light))}
.wp-trend{font-size:var(--fs-11,11px);color:color-mix(in srgb,#86efac,#000 var(--tone));margin-top:6px}
.wp-text{font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 67%,var(--bg));line-height:1.6;margin-top:12px}
.wp-parts{display:grid;gap:9px;margin-top:14px}
.wp-parts li{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:var(--fs-11,11px);color:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.wp-parts small{font-size:var(--fs-9,9px);color:color-mix(in srgb,var(--ink) 58%,var(--bg));margin-left:4px}
.wp-parts strong{font-weight:550}
.wp-parts i{grid-column:1/-1;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) calc(var(--v)*1%),color-mix(in srgb,var(--ink) 7%,transparent) 0)}
.wp-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.wp-charts .welcome-chart{padding-top:12px}

/* Salute: tutta nel Completo. Referti per tipo, età biologica, aree biologiche */
.wp-health-head h3{margin:12px 0 6px}
.wp-health-head p{font-size:var(--fs-12,12px);color:color-mix(in srgb,var(--ink) 67%,var(--bg));line-height:1.6;max-width:680px;margin-bottom:16px}
.wp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:color-mix(in srgb,var(--ink) 1%,var(--bg));border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);padding:4px;border-radius:11px;margin-top:14px}
.wp-tabs button{min-height:40px;padding:8px 4px;border:1px solid transparent;border-radius:8px;background:none;color:color-mix(in srgb,var(--ink) 65%,var(--bg));font-size:var(--fs-10,10px)}
.wp-tabs button[aria-pressed=true]{border-color:#34d39970;background:#34d3991c;color:color-mix(in srgb,#d1fae5,#000 var(--tone-light))}
.wp-report-head{display:flex;align-items:center;gap:12px;margin-top:14px}
.wp-report-icon{display:grid;place-items:center;width:34px;height:40px;border-radius:8px;border:1px solid #34d39966;color:color-mix(in srgb,#6ee7b7,#000 var(--tone));font-size:var(--fs-8,8px);letter-spacing:1px;flex-shrink:0}
.wp-report-head strong{display:block;font-size:var(--fs-13,13px);font-weight:550}
.wp-report-head small{display:block;font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 62%,var(--bg));margin-top:2px}
.wp-lab-list{display:grid;gap:7px;margin-top:12px}
.wp-lab-list li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:11px;background:color-mix(in srgb,var(--ink) 2%,var(--bg))}
.wp-lab-list li strong{display:block;font-size:var(--fs-12,12px);font-weight:550}
.wp-lab-list li small{display:block;font-size:var(--fs-9,9px);color:color-mix(in srgb,var(--ink) 58%,var(--bg));margin-top:2px}
.wp-lab-list b{font-size:var(--fs-15,15px);font-weight:550;white-space:nowrap}
.wp-lab-list .wp-spark{grid-column:1/-1}
.wp-source{font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 62%,var(--bg));margin-top:10px}
.wp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wp-chips li{font-size:var(--fs-10,10px);color:color-mix(in srgb,#d1fae5,#000 var(--tone-light));border:1px solid #34d39940;background:#34d3990a;border-radius:20px;padding:5px 9px}
.wp-areas{display:grid;gap:6px;margin-top:12px}
.wp-areas li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:11px;background:color-mix(in srgb,var(--ink) 2%,var(--bg))}
.wp-areas li>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid currentColor;color:var(--area);font-size:var(--fs-12,12px);flex-shrink:0}
.wp-areas strong{flex:1;font-size:var(--fs-12,12px);font-weight:550}
.wp-areas small{font-size:var(--fs-10,10px);color:color-mix(in srgb,var(--ink) 62%,var(--bg));text-align:right}

/* Colonne strette (telefono, colonna accanto ai moduli): una colonna sola, segnali su due */
@container (max-width:860px){.wp-complete-grid{grid-template-columns:1fr}}
@container (max-width:640px){
  .wp-columns,.wp-numbers,.wp-charts{grid-template-columns:1fr}
  .wp-telemetry .route-signals{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wp-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wp-complete{padding:16px 13px}
  .wp-card{padding:15px 13px}
  .wp-score-head strong{font-size:40px}
}