@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/f_186288f539.woff) format('woff');font-weight:600 800;font-display:swap}@font-face{font-family:'Atkinson Hyperlegible';src:url(../fonts/f_4f786a2883.woff) format('woff');font-weight:400;font-display:swap}@font-face{font-family:'Atkinson Hyperlegible';src:url(../fonts/f_5057e3f5b9.woff) format('woff');font-weight:700;font-display:swap}

/* Layout: una colonna da telefono. Ogni schermata risponde a una domanda; un solo bottone pieno per schermata, il resto sono righe e contorni sottili. */
:root{
  --bg:#0B1C15; --card:#132A20; --card2:#183326; --bowl:#0F2219; --line:rgba(212,163,115,.18); --rule:rgba(243,235,221,.10);
  --cream:#F3EBDD; --soft:#A7B7AC; --gold:#D4A373; --terra:#E07A5F; --ok:#7CC796;
  --f-disp:'Bricolage Grotesque',ui-rounded,system-ui,sans-serif; --f-body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --icobg:#F3EBDD; --brand1:#F1CF96; --brand2:#B9834B; --ontr:#2A140C; --navbg:rgba(11,28,21,.96); --gesto:rgba(45,106,79,.18); --gestob:rgba(124,199,150,.25);
  color-scheme:dark;
}
/* Modalità panna: fondo panna, testi marrone scuro, oro più scuro per il contrasto */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F4EDE2; --card:#FFF9F0; --card2:#EFE4D3; --bowl:#EFE4D3; --line:rgba(122,74,34,.22); --rule:rgba(43,29,18,.10);
  --cream:#2B1D12; --soft:#76665A; --gold:#9A5F25; --terra:#C8573A; --ok:#2E8B57;
  --icobg:#FFF9F0; --brand1:#B77A3C; --brand2:#7A4A22; --ontr:#FFFFFF; --navbg:rgba(244,237,226,.97); --gesto:rgba(46,139,87,.10); --gestob:rgba(46,139,87,.30); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F4EDE2; --card:#FFF9F0; --card2:#EFE4D3; --bowl:#EFE4D3; --line:rgba(122,74,34,.22); --rule:rgba(43,29,18,.10);
  --cream:#2B1D12; --soft:#76665A; --gold:#9A5F25; --terra:#C8573A; --ok:#2E8B57;
  --icobg:#FFF9F0; --brand1:#B77A3C; --brand2:#7A4A22; --ontr:#FFFFFF; --navbg:rgba(244,237,226,.97); --gesto:rgba(46,139,87,.10); --gestob:rgba(46,139,87,.30); color-scheme:light}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{background:var(--bg)}
/* colore della sezione: cambia sfondo, bordi e titoletti quando cambi settore */
:root{--acc:#D4A373}
:root[data-sez="prepara"]{--acc:#5FBF85} :root[data-sez="spesa"]{--acc:#E8964A} :root[data-sez="sos"]{--acc:#E07A5F}
body{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 16%,var(--bg)) 0,var(--bg) 380px) no-repeat,var(--bg);transition:background .3s}
body{color:var(--cream);font:16px/1.45 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
button{font:inherit;color:inherit;cursor:pointer}
.app{max-width:420px;margin:0 auto;padding-block:14px 120px}
.view{display:flex;flex-direction:column;gap:22px}
.prova select{font:inherit;color:var(--cream);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px 6px} .prova{font-size:.78rem;color:var(--soft);text-align:center;border:1px dashed var(--line);border-radius:999px;padding:5px 12px;margin:0 0 18px}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.brand{font:800 1.05rem/1 var(--f-disp);letter-spacing:.14em;background:linear-gradient(180deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
h1{margin:10px 0 0;font:700 1.8rem/1.1 var(--f-disp);text-wrap:balance}
.sub{color:var(--soft);margin:4px 0 0;font-size:.95rem}
.tema{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold);display:grid;place-items:center;flex:none}
.back{background:none;border:0;color:var(--gold);padding:0;font-weight:700;display:inline-flex;gap:4px;align-items:center}
.lab{font:700 .74rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--dot,var(--acc)) 78%,var(--cream));margin:6px 0 -8px;display:flex;justify-content:space-between}
.lab span{color:var(--soft);letter-spacing:0}
.hero{background:var(--card);border:1.5px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:14px}
.hero .top{display:flex;gap:14px;align-items:center}
.ciotola-foto{width:120px;height:120px;flex:none;border-radius:50%;object-fit:cover}
.hero svg{flex:none;max-width:100%}
.hero h2{margin:0;font:700 1.25rem/1.2 var(--f-disp);text-wrap:balance}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags span{font-size:.8rem;color:var(--soft);border:1px solid var(--rule);border-radius:999px;padding:3px 10px}
.btn{border:0;border-radius:999px;padding:14px 18px;font-weight:700;font-size:1rem;width:100%}
.btn.p{background:var(--terra);color:var(--ontr)}
.link{background:none;border:0;color:var(--gold);font-weight:700;padding:4px 0;text-align:left}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ask{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ask li{border-top:1px solid var(--rule)} .ask li:last-child{border-bottom:1px solid var(--rule)}
.ask button{width:100%;background:none;border:0;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 2px;text-align:left}
.ask .q{font:700 1.08rem/1.2 var(--f-disp)} .ask small{display:block;color:var(--soft);font-size:.88rem;margin-top:3px}
.ask .tag{font:700 .68rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.ask .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
.ask .ic svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chev{width:20px;height:20px;stroke:var(--soft);fill:none;stroke-width:2}
.day,.line,.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.day li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.day li:last-child{border-bottom:0}
.t{min-width:0} .t b{display:block;font:700 1rem/1.2 var(--f-disp)} .t small{display:block;color:var(--soft);font-size:.86rem;margin-top:2px}
.t em{display:block;font-style:normal;font-size:.78rem;color:var(--gold);margin-top:3px}
.ora{color:var(--soft);font-size:.85rem;font-variant-numeric:tabular-nums}
.day li.now .t b{color:var(--gold)}
.mini{display:flex;gap:2px;margin-top:4px} .mini img{width:20px;height:20px}
.check{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--soft);background:transparent;color:var(--bg);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s,transform .25s}
.check[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);transform:scale(1.06)}
.check svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3;opacity:0;transition:opacity .2s}
.check[aria-pressed="true"] svg{opacity:1}
.mini-btn,.ult-btn{background:color-mix(in srgb,var(--dot,var(--acc)) 20%,transparent);border:1.5px solid color-mix(in srgb,var(--dot,var(--acc)) 65%,transparent);border-radius:999px;padding:7px 14px;font-size:.84rem;font-weight:700;color:var(--cream);flex:none}
/* lista a linea verticale (pasto) */
.line li{position:relative;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 0 12px 22px}
.line li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--rule)}
.line li:first-child::before{top:50%} .line li:last-child::before{bottom:50%} .line li:only-child::before{display:none}
.line li::after{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--bg)}
.line img{width:34px;height:34px} .spz{width:34px;height:34px;display:grid;place-items:center;font-size:1.4rem}
/* scaletta (prepara) */
.steps li{position:relative;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule)}
.steps .ora2{display:block;font:700 .78rem/1 var(--f-body);color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:4px}
.steps .min{font-size:.8rem;color:var(--soft);white-space:nowrap;padding-top:2px}
.steps li.ok .t b,.list li.ok .t b{text-decoration:line-through;text-decoration-color:var(--soft);color:var(--soft)}
.prog{height:6px;border-radius:99px;background:var(--rule);overflow:hidden} .prog i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
.meta{display:flex;justify-content:space-between;color:var(--soft);font-size:.9rem;font-variant-numeric:tabular-nums}
/* spesa */
.list li{border-left:3px solid color-mix(in srgb,var(--dot) 70%,transparent);padding-left:10px !important;display:grid;grid-template-columns:30px 30px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.list img{width:30px;height:30px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{flex:1;background:none;border:0;border-radius:999px;padding:8px;font-weight:700;font-size:.9rem;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--card2);color:var(--cream)}
.gesto{border:1px solid var(--gestob);border-radius:22px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;background:var(--gesto)}
.gesto .h{font:800 1.4rem/1 var(--f-disp);color:var(--ok);font-variant-numeric:tabular-nums}
.gesto p{margin:0;font-size:.95rem} .gesto p b{display:block;font-family:var(--f-disp);margin-bottom:2px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1}
nav{position:fixed;left:0;right:0;bottom:0;background:var(--navbg);border-top:1px solid var(--rule);padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
nav .in{max-width:420px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
nav button{background:none;border:0;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:4px;font:700 .72rem/1 var(--f-body);padding:6px 0}
nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button[aria-current="page"]{color:color-mix(in srgb,var(--acc) 85%,var(--cream))}
nav .sosb .c{width:54px;height:54px;border-radius:50%;background:var(--terra);display:grid;place-items:center;margin-top:-26px;box-shadow:0 0 0 5px var(--bg)}
nav .sosb .c svg{stroke:var(--ontr);width:26px;height:26px} nav .sosb{color:var(--terra)}
/* copertina: resta scura in tutte e due le modalità, è il marchio */
.cover{position:fixed;inset:0;z-index:50;background:#0B1C15 url(../img/i_7dbafc98e2.webp) center bottom/cover no-repeat;color:#F3EBDD;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(40px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));overflow:auto}
.cover .logo{width:min(88%,380px);height:auto;margin-top:4vh;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.cover .firma{margin:10px 0 0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#D4A373}
.cover .claim{margin:auto 0 0;display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px;padding-bottom:30vh}
.cover h1{margin:0;font:800 2.1rem/1.05 var(--f-disp);color:#F3EBDD;text-wrap:balance}
.cover p.s{margin:0;color:#C9D3CC;font-size:1.02rem}
.cover .btn.p{background:#E07A5F;color:#2A140C;margin-top:8px}
.cover .link{color:#D4A373;text-align:center}
.cover .acc{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:.86rem;color:#C9D3CC;margin-top:4px} .cover .acc input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:#E07A5F} .cover .acc a{color:#D4A373}
.cover button:disabled{opacity:.45}
.medico{font-size:.8rem;color:var(--soft);text-align:center;margin:16px 0 2px}
.imp p{margin:0 0 12px;font-size:1rem} .imp a.link{display:block;margin:2px 0}
@media (max-height:700px){.cover .claim{padding-bottom:22vh}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px 6px 6px;font-size:.9rem;font-weight:700;color:var(--soft)}
.chip img{width:26px;height:26px}
.chip[aria-pressed="true"]{background:var(--card2);color:var(--cream);border-color:var(--gold)}
.vuoto{color:var(--soft);font-size:.86rem;border:1px dashed var(--line);border-radius:14px;padding:10px 12px}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sh-in{background:var(--bg);border-top:1px solid var(--line);border-radius:26px 26px 0 0;width:100%;max-width:460px;max-height:82%;overflow:auto;padding:10px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.grab{width:44px;height:5px;border-radius:9px;background:var(--rule);margin:0 auto 14px}
.sh-in h3{margin:0 0 4px;font:700 1.3rem/1.2 var(--f-disp)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.opt{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;min-width:0}
.opt img{width:40px;height:40px} .opt b{font:700 .95rem/1.2 var(--f-disp)} .opt small{color:var(--soft);font-size:.78rem;line-height:1.25}
.opt[aria-pressed="true"]{border-color:var(--gold);background:var(--card2)} .opt .ok{font-size:.75rem;color:var(--ok);font-weight:700}
.btn.g{background:transparent;color:var(--cream);border:1px solid var(--line)}
.doro{display:block;width:100%;height:auto;border-radius:22px;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.porta{border:1px dashed var(--terra);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.porta h2{margin:0;font:700 1.15rem/1.25 var(--f-disp)} .porta p{margin:0;font-size:.93rem;color:var(--soft)}
.porta.aperta{border-style:solid;border-color:var(--line);background:var(--card)}
.ultra li::after{background:var(--terra)}
a.link{display:inline-block;text-decoration:none}
.piu{background:none;border:0;color:var(--gold);font-weight:700;font-size:.88rem;padding:6px 2px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li.pc{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:20px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-left:5px solid var(--c);background:color-mix(in srgb,var(--c) 12%,var(--card))}
.pc .ph{display:flex;align-items:center;gap:10px}
.pc .pi{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;background:color-mix(in srgb,var(--c) 25%,transparent)}
.pc .ora2{font:700 .8rem/1 var(--f-body);color:color-mix(in srgb,var(--c) 55%,var(--cream));font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--c) 18%,transparent);border-radius:999px;padding:5px 9px;margin:0}
.pc .min{font-size:.8rem;color:var(--soft);margin-right:auto}
.pc .t b{font-size:1.05rem}
.pc .pt{display:flex;flex-wrap:wrap;gap:6px} .pc .pt span{font-size:.76rem;color:var(--soft);border:1px solid var(--rule);border-radius:999px;padding:3px 9px}
.steps li.pc.ok{opacity:.6}
@media (max-width:360px){.hero .top{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.imp .btn{display:block;box-sizing:border-box;text-align:center;text-decoration:none;margin:0 0 10px}.imp .btn:disabled{opacity:.45}
.imp .btn small{display:block;font-weight:400;font-size:.82rem;margin-top:2px}
.pers{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 6px}.pers>span{font-weight:700;font-size:.95rem;flex:1}.step{display:flex;align-items:center;gap:8px}.step button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:1.4rem;font-weight:700;line-height:1}.step button:disabled{opacity:.35}.step b{min-width:86px;font-size:.95rem;text-align:center}
#v-spesa .btn.p{margin-top:10px}.list li.casa .t b{text-decoration:none;color:var(--soft)}
html[data-testo="grande"]{font-size:115%}html[data-testo="enorme"]{font-size:130%}
#sp-lista{display:contents}

/* Guida: voci e paragrafi a schede, con un colore sobrio per ciascuna */
:root{--h0:#E07A5F;--h1:#D4A373;--h2:#7CC796;--h3:#86A8E7;--h4:#B49CE6;--h5:#5FBFB0}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--h0:#C8573A;--h1:#9A5F25;--h2:#2E8B57;--h3:#3E6FC4;--h4:#6B4FB8;--h5:#2A8C80}}
:root[data-theme="light"]{--h0:#C8573A;--h1:#9A5F25;--h2:#2E8B57;--h3:#3E6FC4;--h4:#6B4FB8;--h5:#2A8C80}
.imp.gd .vc{display:flex;align-items:center;gap:14px;text-align:left;border-radius:20px;border:1px solid color-mix(in srgb,var(--h) 42%,transparent);background:color-mix(in srgb,var(--h) 9%,var(--card));padding:14px 16px;margin:0}
.gd .vc .ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--h);background:color-mix(in srgb,var(--h) 18%,transparent);border:1px solid color-mix(in srgb,var(--h) 35%,transparent)}
.gd .vc .tx{flex:1;min-width:0}
.gd .vc .tx b{display:block;font:700 1.02rem/1.25 var(--f-disp);color:var(--cream)}
.gd .vc .tx small{display:block;margin-top:2px;font-weight:400;font-size:.84rem;color:var(--soft)}
.gd .vc .ch{flex:none;font-size:1.6rem;line-height:1;color:var(--h)}
.imp.gd p.k{margin:0;border:1px solid color-mix(in srgb,var(--h) 42%,transparent);background:color-mix(in srgb,var(--h) 8%,var(--card));border-radius:18px;padding:14px 16px}
.gd p.k b{display:block;margin-bottom:4px;font:700 1.02rem/1.25 var(--f-disp);color:var(--h)}
.imp.gd p.sub{margin:-14px 6px 0;font-size:.8rem;color:var(--soft)}

/* Guida, stile delle schede di Prepara: barra colorata a sinistra, fondo tinto, icona in cerchio */
.imp.gd .vc{border-left:6px solid var(--h);background:color-mix(in srgb,var(--h) 13%,var(--card))}
.imp.gd p.k{display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:8px;align-items:center;border-left:6px solid var(--h);background:color-mix(in srgb,var(--h) 13%,var(--card));border-radius:22px;padding:16px}
.gd p.k .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--h);background:color-mix(in srgb,var(--h) 22%,transparent);border:1px solid color-mix(in srgb,var(--h) 38%,transparent)}
.gd p.k b{margin:0;font-size:1.15rem}
.gd p.k .t{grid-column:1/-1}
.gd p.k:not(:has(.ic)) b,.gd p.k:not(:has(.ic)) .t{grid-column:1/-1}