/* Personale. Lab — identità visiva del 2 ottobre 2026 (docs/08-identita-visiva.md) */
:root {
  --bg:#F3F2EF; --panel:#FFFFFF; --ink:#14161A; --muted:#5D626A; --line:#E4E0D8; --soft:#F8F7F4;
  --accent:#14161A; --on-accent:#FFFFFF; --dot:#F4A10B; --amber-text:#8F5A00;
  --warn-bg:#FFF3D1; --warn-line:#F2C35A;
  --pre:#7A6CE0; --set:#F4A10B; --post:#239A8C;
  --good:#2B7A4B; --hi:#B4462F; --lo:#8F5A00;
  --glass:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.9);
  --fields:radial-gradient(38% 45% at 8% 4%, rgba(255,176,32,.16), transparent 70%), radial-gradient(40% 50% at 96% 2%, rgba(60,170,180,.11), transparent 70%), radial-gradient(50% 45% at 60% 100%, rgba(140,110,230,.08), transparent 70%);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#0D0F13; --panel:#16191F; --ink:#EEF0F4; --muted:#9AA1AD; --line:rgba(255,255,255,.09); --soft:#1B1F26;
    --accent:#FFB020; --on-accent:#16130A; --dot:#FFB020; --amber-text:#FFC24D;
    --warn-bg:rgba(255,176,32,.10); --warn-line:rgba(255,176,32,.42);
    --pre:#9A8EF0; --set:#FFB020; --post:#3DBFAE;
    --good:#5BD08B; --hi:#F08A6E; --lo:#FFC24D;
    --glass:rgba(20,23,29,.66); --glass-line:rgba(255,255,255,.1);
    --fields:radial-gradient(38% 45% at 8% 4%, rgba(255,170,40,.13), transparent 70%), radial-gradient(40% 50% at 96% 2%, rgba(40,160,170,.15), transparent 70%), radial-gradient(50% 45% at 60% 100%, rgba(110,80,220,.13), transparent 70%);
  }
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100dvh; background:var(--fields), var(--bg); background-attachment:fixed; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
::selection { background:var(--dot); color:#16130A; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; touch-action:manipulation; }
:focus-visible { outline:2px solid var(--dot); outline-offset:3px; }
[hidden] { display:none !important; }
.ico { width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Marchio */
.wm { font-weight:700; letter-spacing:-.045em; line-height:1; display:inline-flex; align-items:baseline; }
.wm .d, .stop { display:inline-block; width:.19em; height:.19em; border-radius:50%; background:var(--dot); margin-left:.05em; }

/* Barra in alto, in vetro */
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 36px; padding-top:max(12px, env(safe-area-inset-top)); background:var(--glass); border-bottom:1px solid var(--glass-line); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); }
.brand { display:flex; align-items:baseline; gap:8px; }
.brand .wm { font-size:20px; }
.brand small { font-size:14px; color:var(--muted); font-weight:500; }
.top .r { display:flex; align-items:center; gap:16px; font-size:14px; color:var(--muted); }
.infobtn { width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-weight:700; font-size:14px; }
.linkbtn { border:0; background:none; color:var(--muted); font-weight:600; font-size:14px; padding:6px 0; }
.linky { border:0; background:none; padding:0; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--dot); text-decoration-thickness:2px; }
.notice { margin:12px 36px 0; padding:10px 14px; border:1px dashed var(--line); border-radius:12px; font-size:14px; color:var(--muted); }

/* Struttura: domanda a sinistra, percorso a destra */
.shell { display:grid; grid-template-columns:minmax(0,1fr) 380px; min-height:calc(100dvh - 57px); }
.shell.focus { grid-template-columns:minmax(0,1fr); }
.shell.focus .side { display:none; }
.main { display:flex; flex-direction:column; padding:44px 48px 36px 36px; min-width:0; }
.shell:not(.focus) .main > * { max-width:820px; }
.side { border-left:1px solid var(--line); background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); padding:34px 28px 48px; display:flex; flex-direction:column; gap:22px; }

/* Avanzamento */
.prog { margin-bottom:18px; }
.meta { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 14px; font-size:13px; font-weight:600; color:var(--muted); max-width:620px; }
.meta .bar { grid-column:1 / -1; grid-row:1; }
#secLabel { grid-row:2; }
.meta .bar { width:100%; height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.meta .bar i { display:block; width:100%; height:100%; background:var(--ink); transform-origin:left center; transform:scaleX(.02); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.endp { grid-row:2; display:inline-flex; align-items:center; gap:6px; color:var(--amber-text); font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; justify-self:end; }
.endp i { width:7px; height:7px; border-radius:50%; background:var(--dot); flex-shrink:0; }
.endp .ept { display:inline-block; }
.endp .ept.swap { animation:ept-in .45s cubic-bezier(.2,.8,.2,1) both; }
.endp.pulse i { animation:dot-pulse .7s cubic-bezier(.2,.8,.2,1); }
@keyframes ept-in { from { opacity:0; transform:translateY(8px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes dot-pulse { 0% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); } 45% { transform:scale(1.5); } 100% { transform:scale(1); box-shadow:0 0 0 9px transparent; } }
/* Movimento: ogni domanda entra, le scelte rispondono al tocco */
#app.enter > * { animation:q-in .5s cubic-bezier(.2,.8,.2,1) both; }
#app.enter > *:nth-child(2) { animation-delay:.04s; }
#app.enter > *:nth-child(3) { animation-delay:.08s; }
#app.enter > *:nth-child(n+4) { animation-delay:.12s; }
@keyframes q-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.mtoast { animation:toast-up .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes toast-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.mrule, .mintro { display:none; }

/* Testi */
h1, h2, h3 { margin:0; }
.q, #app h1 { font-size:40px; line-height:1.06; letter-spacing:-.03em; font-weight:800; max-width:20ch; text-wrap:balance; margin:0 0 8px; }
.hint { font-size:17px; line-height:1.5; color:var(--muted); margin:6px 0 24px; max-width:60ch; }
.lede { font-size:18px; color:var(--muted); }
label.f { display:block; font-weight:700; font-size:15px; margin:22px 0 8px; }
label.f small { font-weight:400; color:var(--muted); }
.tip, .pznote { font-size:14px; color:var(--muted); margin:6px 0 8px; line-height:1.45; }
.warnw { font-size:14px; color:var(--lo); margin:8px 0 0; }

/* Campi */
input[type=text], input[type=number], input[type=email], select, textarea { width:100%; max-width:600px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:16px; color:var(--ink); }
textarea { min-height:84px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--dot) 30%, transparent); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }

/* Risposte a scelta */
.opts { display:flex; flex-direction:column; gap:8px; max-width:620px; }
.opts.two { display:grid; grid-template-columns:1fr 1fr; max-width:none; }
.opt { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:17px; font-weight:600; transition:border-color .15s, transform .12s cubic-bezier(.2,.8,.2,1); }
.opt small { font-size:14px; font-weight:400; color:var(--muted); }
.opt:hover { border-color:var(--ink); }
.opt:active { transform:scale(.99); }
.opt[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.opt .ck { flex-shrink:0; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); font-size:0; position:relative; }
.opt[aria-pressed=true] .ck { background:var(--ink); border-color:var(--ink); }
.opt[aria-pressed=true] .ck::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--panel); border-width:0 2px 2px 0; transform:rotate(45deg); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:9px 14px; font-size:15px; font-weight:600; }
.chip:hover { border-color:var(--ink); }
.chip[aria-pressed=true] { background:var(--ink); color:var(--panel); border-color:var(--ink); }

/* Pulsanti */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:16px; padding:13px 24px; border-radius:12px; transition:transform .12s cubic-bezier(.2,.8,.2,1), opacity .15s; }
.btn:active { transform:scale(.98); }
.btn[disabled] { opacity:.35; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.wide { width:100%; max-width:620px; padding:16px; font-size:17px; }
.skip, .back { border:0; background:none; color:var(--muted); font-weight:600; font-size:15px; padding:10px 0; }
.textbtn { border:0; background:none; padding:8px 0 0; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.mini { border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:6px 10px; font-size:13px; font-weight:700; white-space:nowrap; }

/* Navigazione */
#app { padding-bottom:32px; }
#navbar { margin-top:auto; position:sticky; bottom:0; z-index:15; padding:14px 0 max(16px, env(safe-area-inset-bottom)); background:linear-gradient(to bottom, transparent, var(--bg) 30%); }
#navbar::before { content:""; display:block; height:18px; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:620px; }
.navr { display:flex; align-items:center; gap:16px; }
.shell.focus .nav { max-width:none; }

/* Scenario */
.scen { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px 22px; margin:0 0 14px; max-width:720px; }
.scen .t { font-weight:800; font-size:19px; letter-spacing:-.01em; margin-bottom:6px; }
.lvl { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--soft); border:1px solid var(--line); margin:0 0 10px; }
.ctx { font-size:16px; line-height:1.55; margin-bottom:4px; }
.gh { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:16px 0 6px; }
.det { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0; font-size:15px; }
.det dt { color:var(--muted); }
.det dd { margin:0; }
.recap { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:10px 14px; margin:0 0 6px; max-width:720px; }
.recap summary { cursor:pointer; font-weight:700; font-size:14px; color:var(--muted); }
.recap .scen { border:0; padding:10px 0 0; margin:0; background:none; }
.scgrid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:start; }
.scleft .scen { max-width:none; position:sticky; top:84px; }
.scright label.f:first-child { margin-top:0; }

/* Contaore */
.hours { display:flex; flex-direction:column; gap:8px; max-width:620px; }
.hrow { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.htop { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.htop .lab { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; white-space:nowrap; }
.dot { width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }
.quick { display:flex; gap:6px; }
.qb { border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:5px 10px; font-size:13px; font-weight:700; }
.qb:hover { border-color:var(--ink); }
.stepper { display:flex; align-items:center; gap:8px; width:100%; }
.stepper button { width:42px; height:42px; flex-shrink:0; border-radius:12px; border:1px solid var(--line); background:var(--soft); font-size:20px; font-weight:600; }
.tcin { flex:1; min-width:0; text-align:center; font-family:var(--mono); font-size:19px !important; padding:9px 4px !important; }
.range2 { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; max-width:600px; }
.range2 span { color:var(--muted); }
.why { margin-top:14px; max-width:620px; }
.why summary { cursor:pointer; font-weight:700; font-size:14px; }
.why summary small { font-weight:400; color:var(--muted); }
.why textarea { margin-top:8px; }

/* Suggerimenti */
.sugg { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:12px; margin-top:10px; max-width:600px; }
.sugg .h { font-weight:700; font-size:14px; margin-bottom:8px; }
.sugg .o { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-top:6px; }
.sugg .o small { display:block; color:var(--muted); font-size:12px; }

/* Confronto con il motore */
.cwhat { margin-bottom:16px; max-width:720px; }
.cwhat .t { font-weight:800; font-size:18px; }
.cwhat .d { color:var(--muted); font-size:15px; margin:2px 0 10px; }
.cbox { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px 22px; margin:0 0 14px; max-width:720px; }
.csec { font-size:13px; font-weight:700; color:var(--muted); margin-bottom:12px; }
.chours { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.hbt { display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; }
.hbt span { color:var(--muted); font-weight:600; }
.hbt b { font-family:var(--mono); font-weight:500; }
.bbar { display:flex; height:28px; border-radius:8px; overflow:hidden; background:var(--soft); border:1px solid var(--line); }
.bbar span { display:flex; align-items:center; justify-content:center; color:#fff; font:600 11px var(--mono); white-space:nowrap; }
.bbar span + span { border-left:1px solid rgba(255,255,255,.45); }
.bbar .p { background:var(--pre); } .bbar .s { background:var(--set); color:#16130A; } .bbar .o { background:var(--post); }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:6px; }
.cdiff { display:inline-block; font-size:14px; font-weight:700; padding:7px 12px; border-radius:10px; margin:6px 0 16px; }
.c-ok { background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good); }
.c-hi { background:color-mix(in srgb, var(--hi) 13%, transparent); color:var(--hi); }
.c-lo { background:color-mix(in srgb, var(--lo) 14%, transparent); color:var(--lo); }
.cq { font-weight:700; font-size:15px; margin-bottom:10px; }
.cjudge { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.jbtn { border:1px solid var(--line); background:var(--soft); border-radius:12px; padding:10px 4px; font-size:13px; font-weight:700; line-height:1.25; min-height:52px; }
.jbtn[aria-pressed=true] { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.cnums { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ck2 { font-size:13px; color:var(--muted); margin-bottom:2px; }
.cv { font-family:var(--mono); font-size:26px; font-weight:500; letter-spacing:-.03em; }

/* Numeri veri dentro le schermate */
.fact-in { display:flex; gap:14px; align-items:flex-start; background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0 0 22px; max-width:620px; }
.fact-in b { font-family:var(--mono); font-weight:500; font-size:22px; letter-spacing:-.04em; white-space:nowrap; line-height:1.15; }
.fact-in p { margin:0; font-size:15px; line-height:1.45; }
.fact-in small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }

.fact-in.must { background:var(--warn-bg); border-color:var(--warn-line); }
.fact-in.must p { font-weight:600; }

.fact-in { flex-wrap:wrap; }
.fact-in .ff { flex-basis:100%; font-size:13px; font-weight:700; color:var(--amber-text); margin-bottom:-6px; }

/* Aree di Personale. */
.reveal { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.reveal h3 { font-size:15px; margin-bottom:6px; display:flex; justify-content:space-between; gap:8px; }
.reveal h3 span { font-size:12px; font-weight:700; color:var(--amber-text); }
.reveal ul { list-style:none; margin:0; padding:0; }
.reveal li { font-size:14px; line-height:1.45; padding:3px 0 3px 15px; position:relative; }
.reveal li::before { content:""; position:absolute; left:2px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--dot); }
h2.sec { font-size:22px; letter-spacing:-.02em; margin:26px 0 12px; }
.all { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:820px; }

.feats { max-width:680px; background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.feat + .feat { border-top:1px solid var(--line); }
.feat summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:10px 1fr 18px; gap:14px; align-items:center; padding:16px 18px; }
.feat summary::-webkit-details-marker { display:none; }
.feat summary > i { width:9px; height:9px; border-radius:50%; background:var(--dot); }
.feat summary b { display:block; font-size:16px; margin-bottom:2px; }
.feat summary span span { display:block; font-size:14px; line-height:1.45; color:var(--muted); }
.feat .chev { color:var(--muted); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.feat[open] .chev { transform:rotate(180deg); }
.feat ul { list-style:none; margin:0; padding:0 18px 16px 42px; }
.feat li { font-size:14px; line-height:1.45; padding:4px 0; color:var(--ink); }
.feat li::before { content:"– "; color:var(--muted); }

.mailsafe { display:flex; gap:10px; align-items:flex-start; margin:10px 0 0; padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--good) 10%, transparent); border:1px solid color-mix(in srgb, var(--good) 35%, transparent); font-size:15px; line-height:1.45; max-width:600px; }
.mailsafe .ico { color:var(--good); margin-top:2px; }
.mailsafe b { color:var(--ink); }

/* Riepilogo e fine */
.sumlist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:620px; }
.sumlist li { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; }
.sumlist b { display:block; font-family:var(--mono); font-weight:500; font-size:28px; line-height:1.1; }
.sumlist span { font-size:13px; color:var(--muted); }
.savedok { display:inline-block; margin:6px 0 14px; padding:8px 12px; border-radius:10px; font-weight:700; font-size:14px; background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good); }
.resume { border:1.5px solid var(--ink); border-radius:16px; padding:16px 18px; margin-bottom:22px; max-width:620px; }
.resume b { display:block; font-size:17px; margin-bottom:4px; }
.resume span { display:block; color:var(--muted); font-size:15px; }
.ract { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; }
.gate { margin-top:14px; border:1.5px solid var(--line); border-radius:14px; padding:16px; background:var(--soft); }
.gate b { display:block; margin-bottom:4px; }
.gate span { font-size:14px; color:var(--muted); }

/* Colonna del percorso */
.side .intro h2 { font-size:21px; line-height:1.2; letter-spacing:-.02em; }
.side .about { font-size:15px; line-height:1.55; color:var(--muted); margin:6px 0 0; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:center; padding:8px 0; font-size:15px; color:var(--muted); border-top:1px solid var(--line); }
.steps li:first-child { border-top:0; }
.steps li i { width:11px; height:11px; border-radius:50%; border:1.5px solid var(--muted); justify-self:center; }
.steps li.done { color:var(--ink); }
.steps li.done i { background:var(--post); border-color:var(--post); }
.steps li.now { color:var(--ink); font-weight:800; }
.steps li.now i { background:var(--ink); border-color:var(--ink); }
.steps li.fin { color:var(--amber-text); font-weight:700; }
.steps li.fin i { background:var(--dot); border-color:var(--dot); }
.steps li span:last-child { font-family:var(--mono); font-size:12px; }
.save { background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:16px; padding:15px 17px; }
.save h3 { display:flex; align-items:center; gap:8px; font-size:16px; margin-bottom:4px; }
.save p { margin:0; font-size:14px; line-height:1.5; }
.save p + p { margin-top:4px; color:var(--muted); }
.disc { display:flex; flex-direction:column; gap:10px; }
.disc .lbl { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.disc .lbl b { color:var(--ink); }
.chips-a { display:flex; flex-wrap:wrap; gap:6px; }
.chip-a { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:6px 11px; border-radius:999px; border:1px dashed var(--line); background:transparent; color:var(--muted); }
.chip-a i { width:7px; height:7px; border-radius:50%; border:1.5px solid currentColor; }
.chip-a.on { border-style:solid; border-color:var(--warn-line); background:var(--warn-bg); color:var(--ink); }
.chip-a.on i { background:var(--dot); border-color:var(--dot); }
.chip-a[disabled] { cursor:default; }
.anon { display:flex; gap:8px; font-size:13px; line-height:1.55; color:var(--muted); margin:0; }
.anon .ico { margin-top:2px; }
.mtoast, .msheet { display:none; }

/* Finestre sovrapposte */
.modal { position:fixed; inset:0; z-index:50; background:rgba(10,14,20,.5); display:flex; align-items:flex-end; justify-content:center; padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.sheet { background:var(--panel); border-radius:20px; padding:22px 20px; width:100%; max-width:540px; max-height:88dvh; overflow:auto; }
.sheet .q { font-size:24px; }
.sheet .nav { margin-top:18px; max-width:none; }
.pv { display:flex; flex-direction:column; }
.pvhead { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pvbody { font-size:14px; line-height:1.6; }
.pvbody h3 { font-size:15px; margin:18px 0 4px; }
.pvbody p { margin:0 0 8px; }
.pvbody .muted { color:var(--muted); }
@media (min-width:600px) { .modal { align-items:center; } }
.toast { position:fixed; left:50%; width:max-content; max-width:calc(100vw - 32px); text-align:center; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translate(-50%, 8px); background:var(--ink); color:var(--panel); padding:10px 16px; border-radius:12px; font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1); z-index:60; }
.toast.on { opacity:1; transform:translate(-50%, 0); }


/* Computer: testi più grandi, lo spazio c'è */
@media (min-width:1024px) {
  body { font-size:17px; }
  .q, #app h1 { font-size:48px; max-width:18ch; }
  .hint { font-size:19px; max-width:56ch; margin:8px 0 28px; }
  .opt { font-size:18px; padding:16px 18px; }
  .opt small { font-size:15px; }
  .chip { font-size:16px; padding:10px 16px; }
  label.f { font-size:16px; }
  .fact-in { padding:22px 24px; gap:22px; max-width:680px; border-radius:18px; }
  .fact-in b { font-size:40px; }
  .fact-in p { font-size:19px; line-height:1.45; }
  .fact-in small { font-size:13px; margin-top:8px; }
  .meta { font-size:14px; }
  .side .intro h2 { font-size:23px; }
  .side .about { font-size:16px; }
  .steps li { font-size:16px; padding:9px 0; }
  .steps li span:last-child { font-size:13px; }
  .save h3 { font-size:17px; }
  .save p { font-size:15px; }
  .disc .lbl { font-size:14px; }
  .chip-a { font-size:14px; padding:7px 12px; }
  .reveal h3 { font-size:16px; }
  .reveal li { font-size:15px; }
  .anon { font-size:14px; }
  .scen .t { font-size:21px; }
  .ctx { font-size:17px; }
  .det { font-size:16px; }
  .tip, .pznote { font-size:15px; }
  .btn { font-size:17px; padding:14px 26px; }
}

/* Tablet: niente colonna laterale */
@media (max-width:1023px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .side { display:none; }
  .main { padding:28px 24px 0; max-width:720px; width:100%; margin:0 auto; }
  .mrule { display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.4; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:12px; padding:9px 12px; margin:10px 0 0; }
  .mrule .ico { width:15px; height:15px; margin-top:2px; }
  .mrule[hidden], .mintro[hidden] { display:none; }
  .mintro { display:block; font-size:14px; line-height:1.45; color:var(--muted); margin:10px 0 0; }
  .mintro b { color:var(--ink); }
  #navbar::before { display:none; }
  #navbar { position:sticky; bottom:0; z-index:15; margin:auto -24px 0; padding:10px 24px max(12px, env(safe-area-inset-bottom)); background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--glass-line); box-shadow:0 -10px 24px -20px rgba(0,0,0,.4); }
  .nav { max-width:none; }
  .mtoast { display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; text-align:left; font-size:13px; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px; padding:8px 11px; margin-bottom:8px; color:var(--ink); }
  .mtoast .go { color:var(--amber-text); font-weight:800; white-space:nowrap; }
  .msheet { display:block; margin-bottom:8px; max-height:40dvh; overflow:auto; }
  .msheet .reveal { padding:10px 12px; }
}

/* Telefono */
@media (max-width:640px) {
  body { font-size:15px; }
  .top { padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top)); }
  .top .r .hide { display:none; }
  .brand .wm { font-size:18px; }
  .main { padding:14px 16px 0; min-height:calc(100dvh - 49px); }
  .prog { margin-bottom:14px; }
  .meta { gap:8px; font-size:12px; }
  .q, #app h1 { font-size:24px; line-height:1.15; letter-spacing:-.02em; }
  .hint { font-size:15.5px; margin:6px 0 16px; }
  label.f { font-size:14px; margin:16px 0 6px; }
  .opts { gap:6px; }
  .opts.two { grid-template-columns:1fr; }
  .opt { font-size:16px; padding:12px 14px; min-height:54px; border-radius:12px; }
  .opt small { font-size:13px; }
  .chip { font-size:14px; padding:8px 12px; }
  .btn { font-size:15px; padding:11px 18px; border-radius:10px; }
  #navbar { margin:auto -16px 0; padding:8px 16px max(10px, env(safe-area-inset-bottom)); }
  .fact-in { padding:14px 15px; gap:12px; margin-bottom:16px; flex-direction:column; }
  .fact-in b { font-size:28px; }
  .fact-in p { font-size:16px; line-height:1.45; }
  .fact-in small { font-size:12px; }
  .scen { padding:14px 14px; border-radius:14px; }
  .scen .t { font-size:17px; }
  .ctx { font-size:15px; }
  .det { grid-template-columns:1fr; gap:0; font-size:14px; }
  .det dd { margin-bottom:6px; }
  .cbox { padding:14px; border-radius:14px; }
  .cv { font-size:21px; }
  .jbtn { font-size:11.5px; padding:8px 2px; min-height:46px; }
  .sumlist b { font-size:22px; }
  .all { grid-template-columns:1fr; }
  h2.sec { font-size:18px; }
  input[type=text], input[type=number], input[type=email], select, textarea { font-size:16px; padding:11px 12px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}