/* Flusso demo (v4 «notte») — form, generazione, cancello email.
 * I tre schermi sostituiscono #M, quindi lo <style> della home sparisce: i token v4
 * (stessi valori di home-theme.mjs HOME_STYLE_1) vivono qui, scoped sotto `.s-demo`.
 * Markup: canvas/demo-form-template.mjs, static/st/demo.js, static/st/demo-gate.js.
 * CSS puro, nessuna classe Tailwind. Font self-hosted, mai CDN. */
@font-face{font-family:'Bitter';font-weight:700;font-display:swap;src:url(/static/vendor/fonts/bitter-700-latin.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-weight:400;font-display:swap;src:url(/static/vendor/fonts/work-sans-400-latin.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-weight:600;font-display:swap;src:url(/static/vendor/fonts/work-sans-600-latin.woff2) format('woff2')}

.s-demo{--laguna:#0E7F8E;--teal:#3CA2B1;--limone:#FFE066;--aperol:#FF6B2C;--basilico:#1FA971;--ink:#13262B;--carta:#FFFDF8;
  --display:'Bitter',Georgia,serif;--text:'Work Sans',system-ui,sans-serif;--thermal:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fg:#EEF6F6;--fg-2:#A9C0C3;--line:rgba(238,246,246,.12);--card:#13303A;--field:#0F1E22;--kicker:#FFE066;--track:rgba(238,246,246,.08);
  max-width:38rem;margin:0 auto;padding:2.5rem 1.25rem 6rem;color:var(--fg);font:400 16px/1.55 var(--text);-webkit-font-smoothing:antialiased}
html.light .s-demo{--fg:#13262B;--fg-2:#4A5F64;--line:#dbe6e8;--card:#FFFFFF;--field:#F3F7F7;--kicker:#0E7F8E;--track:#e6eeef}
.s-demo *{box-sizing:border-box}
.s-demo h2,.s-demo h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0;color:inherit}
.dm-card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:2rem 1.5rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
@media(min-width:640px){.dm-card{padding:2.5rem 2.25rem}}
.dm-kicker{display:flex;align-items:center;gap:.6rem;font:600 .78rem var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:.9rem}
.dm-dots{display:inline-flex;gap:4px}
.dm-dots i{width:18px;height:4px;border-radius:2px;background:var(--track)}
.dm-dots i.on{background:var(--kicker)}
.dm-h{font-size:clamp(1.9rem,5vw,2.5rem)}
.dm-sub{color:var(--fg-2);margin:.7rem 0 1.6rem}
.dm-note{color:var(--fg-2);font-size:.85rem;text-align:center;margin-top:1rem}
.dm-alt{display:block;text-align:center;margin-top:1.4rem;font-size:.92rem;color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* Cucine: tessere colorate, quella scelta «si accende» come lo scontrino in home */
.dm-cuisines{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.25rem}
@media(min-width:520px){.dm-cuisines{grid-template-columns:repeat(4,1fr)}}
.dm-cui{--tone:var(--laguna);--on:#fff;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.9rem;min-height:92px;padding:.85rem .9rem;border:0;border-radius:18px;background:var(--tone);color:var(--on);font:600 .95rem var(--text);text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s}
.dm-cui b{font:700 1.5rem/1 var(--display);opacity:.85}
.dm-cui[data-tone="limone"]{--tone:var(--limone);--on:var(--ink)}
.dm-cui[data-tone="aperol"]{--tone:var(--aperol);--on:var(--ink)}
.dm-cui[data-tone="basilico"]{--tone:var(--basilico);--on:#fff}
.dm-cui:hover{transform:translateY(-2px)}
.dm-cui.active{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--fg);transform:translateY(-3px)}
.dm-cui.active::after{content:'✓';position:absolute;top:.6rem;right:.75rem;font-weight:700}

/* Campi e bottoni */
.dm-details{border:1px solid var(--line);border-radius:18px;padding:.9rem 1.1rem;margin-bottom:1.25rem}
.dm-details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:.75rem}
.dm-details summary span{flex:1}
.dm-details summary::-webkit-details-marker{display:none}
.dm-details summary::after{content:'+';font:700 1.3rem/1 var(--display);color:var(--fg-2)}
.dm-details[open] summary::after{content:'−'}
.dm-details summary small{font-weight:400;color:var(--fg-2);white-space:nowrap;margin-left:.35rem}
.dm-fields{display:grid;gap:1rem;margin-top:1rem}
.dm-label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.35rem}
.dm-input{width:100%;background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;font:400 1rem var(--text)}
.dm-input::placeholder{color:var(--fg-2);opacity:.75}
.dm-upload{border:1.5px dashed var(--line);border-radius:14px;padding:1rem;text-align:center;color:var(--fg-2);font-size:.9rem;cursor:pointer}
.dm-upload:hover{border-color:var(--teal)}
.dm-preview{margin-top:.8rem;padding:1rem;border-radius:14px;background:var(--field);font-size:.88rem}
.dm-preview [class*="text-blue"]{color:var(--teal)!important}
.dm-preview li{background:transparent!important;padding:.2rem 0!important}
.dm-preview li .text-white{color:var(--fg)!important}
.dm-actions{display:grid;gap:.6rem}
.dm-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:0;border-radius:14px;padding:1rem 1.25rem;font:600 1.02rem var(--text);cursor:pointer;text-decoration:none;transition:transform .15s}
.dm-go{background:var(--aperol);color:var(--ink);box-shadow:0 12px 28px -10px rgba(255,107,44,.75)}
.dm-go:hover{transform:translateY(-2px)}
.dm-go:disabled{opacity:.6;transform:none;cursor:wait}
.dm-quiet{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--line)}
.dm-quiet:hover{box-shadow:inset 0 0 0 2px var(--fg)}
.dm-quiet:disabled{opacity:.5;cursor:default}
.s-demo button:focus-visible,.s-demo input:focus-visible,.s-demo textarea:focus-visible,.s-demo summary:focus-visible,.s-demo a:focus-visible{outline:3px solid var(--limone);outline-offset:3px}
.dm-err{color:var(--aperol);font-size:.88rem;min-height:1.2rem;margin-top:.6rem}
.dm-err a{color:inherit;text-decoration:underline}

/* Generazione: barra, stepper, scontrino che stampa una riga per passo */
@keyframes ds-spin{to{transform:rotate(360deg)}}
@keyframes ds-check{to{stroke-dashoffset:0}}
@keyframes ds-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,224,102,.45)}50%{box-shadow:0 0 0 7px rgba(255,224,102,0)}}
@keyframes dm-print{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#demo-pbar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;margin-bottom:1.75rem}
#demo-pfill{height:100%;width:0;border-radius:3px;background:var(--limone);transition:width .6s cubic-bezier(.4,0,.2,1)}
.dm-stepper{position:relative}
#demo-tl{position:absolute;left:15px;top:16px;bottom:16px;width:2px;background:var(--track);border-radius:1px}
#demo-tf{width:100%;height:0;border-radius:1px;background:var(--teal);transition:height .6s cubic-bezier(.4,0,.2,1)}
.ds-step{display:flex;align-items:flex-start;gap:.8rem;position:relative;z-index:1;margin-bottom:.8rem;opacity:.35;transform:translateY(8px);transition:opacity .5s,transform .5s}
.ds-step:last-child{margin-bottom:0}
.ds-ind{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:2px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;position:relative;transition:all .4s}
.ds-num{font:600 .78rem var(--text);color:var(--fg-2)}
.ds-check,.ds-spinner{display:none;position:absolute}
.ds-spinner{inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--limone);animation:ds-spin .8s linear infinite}
.ds-ind.active{border-color:var(--limone);animation:ds-pulse 2s ease-in-out infinite}
.ds-ind.active .ds-num,.ds-ind.done .ds-num{display:none}
.ds-ind.active .ds-spinner{display:block}
.ds-ind.done{border-color:var(--basilico);background:var(--basilico);animation:none}
.ds-ind.done .ds-check{display:block}
.ds-ind.done .ds-check path{animation:ds-check .4s ease forwards}
.ds-label{font-weight:600;line-height:1.35;padding-top:4px}
.ds-detail{font-size:.82rem;color:var(--fg-2);margin-top:2px;min-height:1.1rem}
.ds-pbadge{padding:0 0 .6rem 44px;font:600 .68rem var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.dm-receipt{margin:2rem auto 0;max-width:19rem;background:var(--carta);color:var(--ink);font:400 .82rem/1.5 var(--thermal);padding:1rem 1.1rem 1.4rem;border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 0/14px 100% repeat-x}
.dm-receipt header{text-align:center;font-weight:700;letter-spacing:.08em;border-bottom:1px dashed rgba(19,38,43,.35);padding-bottom:.5rem;margin-bottom:.5rem}
.dm-receipt ol{list-style:none;margin:0;padding:0;min-height:1.5em}
.dm-receipt li{display:flex;justify-content:space-between;gap:1rem;animation:dm-print .35s ease both}
.dm-receipt li span:last-child{color:var(--basilico);font-weight:700}
.dm-receipt .dm-mail{display:block;text-align:center;font-weight:700;word-break:break-all;margin:.4rem 0}

@media(prefers-reduced-motion:reduce){.s-demo *{animation:none!important;transition:none!important}.ds-ind.done .ds-check path{stroke-dashoffset:0}}