/* Biga · app a schermate (23/10/2026). Indaco notte = la lievitazione, pomodoro = le azioni, basilico = fatto, semola = la mascotte. */
:root{
  --fondo:#F2F4FA; --carta:#FFFFFF; --inchiostro:#1C2550; --tenue:#5E6787; --riga:#DCE1EE;
  --notte:#1C2550; --notte-2:#2A3576; --pomodoro:#E0442F; --pomodoro-scuro:#B8321F; --basilico:#2F8A5B; --semola:#F5C443; --crosta:#B8742E;
  --acqua:#3E7FD1; --sale:#97A0B5; --olio:#9AAE36; --malto:#9C6436; --farina:#EADFC4;
  --titoli:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --testo:"Figtree","Segoe UI",system-ui,sans-serif;
  --r-grande:22px; --r:14px; --r-piccolo:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fondo:#11152D; --carta:#1A2046; --inchiostro:#EEF1FA; --tenue:#A3ABC8; --riga:#2C3463;
  --notte:#0C1027; --notte-2:#202A66; --pomodoro:#F0604B; --pomodoro-scuro:#D44A36; --basilico:#4DB37F; --semola:#F7CD5C; --crosta:#D08D45;
  --acqua:#6AA2EA; --sale:#7F89A3; --olio:#B5C855; --malto:#C38A5A; --farina:#CDBE97; color-scheme:dark}}
:root[data-theme="dark"]{
  --fondo:#11152D; --carta:#1A2046; --inchiostro:#EEF1FA; --tenue:#A3ABC8; --riga:#2C3463;
  --notte:#0C1027; --notte-2:#202A66; --pomodoro:#F0604B; --pomodoro-scuro:#D44A36; --basilico:#4DB37F; --semola:#F7CD5C; --crosta:#D08D45;
  --acqua:#6AA2EA; --sale:#7F89A3; --olio:#B5C855; --malto:#C38A5A; --farina:#CDBE97; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--inchiostro);font:16px/1.45 var(--testo);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--acqua);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
img{max-width:100%;display:block}

#app{min-height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:env(safe-area-inset-top) 0 0}
.schermata{flex:1;display:flex;flex-direction:column;padding:18px max(16px,env(safe-area-inset-left)) calc(112px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));gap:18px;animation:entra .28s ease-out}
.schermata.notte{background:var(--notte);color:#EEF1FA;--tenue:#A9B2D6;--riga:#2E3870;--carta:#232C64;--inchiostro:#EEF1FA}
@keyframes entra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.schermata.indietro{animation-name:esce}
@keyframes esce{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

h1,h2,h3{font-family:var(--titoli);margin:0;letter-spacing:-.015em}
h1{font-size:2rem;line-height:1.05;font-weight:800}
h2{font-size:1.35rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0}
.tenue{color:var(--tenue)}
.piccolo{font-size:.86rem}

/* testata con la mascotte che parla */
.testata{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.testata .mascotte{width:74px;height:74px}
.fumetto{background:var(--carta);border:1.5px solid var(--riga);border-radius:18px 18px 18px 4px;padding:10px 14px;font-weight:500;position:relative}
.notte .fumetto{background:var(--notte-2);border-color:transparent}

/* barra dei passi della ricetta nuova */
.passi{display:flex;gap:6px}
.passi i{flex:1;height:6px;border-radius:3px;background:var(--riga)}
.passi i.fatto{background:var(--pomodoro)}
.passi i.ora{background:linear-gradient(90deg,var(--pomodoro) 50%,var(--riga) 50%)}

.blocco{background:var(--carta);border:1px solid var(--riga);border-radius:var(--r-grande);padding:18px;display:grid;gap:16px}
.notte .blocco{border-color:transparent}

/* stili */
.stili{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px}
.stile{display:grid;justify-items:center;gap:6px;padding:12px 6px 10px;border:2px solid var(--riga);border-radius:18px;background:var(--carta);font:600 .84rem/1.15 var(--testo);text-align:center}
.stile svg{width:52px;height:52px}
.stile[aria-pressed="true"]{border-color:var(--pomodoro);box-shadow:0 0 0 4px color-mix(in srgb,var(--pomodoro) 16%,transparent)}
.gruppo-stili{display:grid;gap:8px}
.gruppo-stili h3{font-size:.95rem;color:var(--tenue);font-family:var(--testo);font-weight:600}
.nota-stile{background:color-mix(in srgb,var(--semola) 22%,var(--carta));border-radius:var(--r);padding:12px 14px;font-size:.93rem}

/* cursori con il numero grande */
.cursore{display:grid;gap:4px}
.cursore .alto{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cursore label{font-weight:600}
.cursore output{font:800 1.7rem/1 var(--titoli);font-variant-numeric:tabular-nums;white-space:nowrap}
.cursore small{color:var(--tenue);font-size:.84rem}
input[type=range]{width:100%;height:34px;accent-color:var(--pomodoro)}
.scelta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--fondo);border-radius:var(--r);padding:4px;gap:4px}
.notte .scelta{background:var(--notte)}
.scelta button{border:0;border-radius:var(--r-piccolo);padding:11px 6px;background:transparent;font-weight:600;color:var(--tenue)}
.scelta button[aria-pressed="true"]{background:var(--carta);color:var(--inchiostro);box-shadow:0 1px 3px rgb(0 0 0/.14)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.numero{display:flex;align-items:center;border:1.5px solid var(--riga);border-radius:var(--r);background:var(--carta);min-height:52px;overflow:hidden}
.numero button{width:48px;align-self:stretch;border:0;background:transparent;font-size:1.4rem}
.numero input,.numero select{flex:1;min-width:0;border:0;background:transparent;text-align:center;font:700 1.2rem var(--titoli);padding:8px;font-variant-numeric:tabular-nums}
.campo{display:grid;gap:6px}
.campo > span{font-weight:600;font-size:.93rem}
.campo input[type=text],.campo input[type=password],.campo input[type=datetime-local],.campo input[type=number],.campo select,.campo textarea{border:1.5px solid var(--riga);border-radius:var(--r);background:var(--carta);padding:13px 14px;width:100%}
.campo textarea{min-height:96px;resize:vertical}
details.altro{border-top:1.5px dashed var(--riga);padding-top:12px}
details.altro summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.altro summary::after{content:"+";font:700 1.4rem/1 var(--titoli);color:var(--pomodoro)}
details.altro[open] summary::after{content:"−"}
details.altro .dentro{display:grid;gap:16px;margin-top:14px}

/* con i pulsanti fissi in basso serve più spazio, così niente finisce sotto */
.schermata:has(.azioni){padding-bottom:calc(196px + env(safe-area-inset-bottom))}
/* pulsanti */
.azioni{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));display:flex;gap:10px;padding:10px max(16px,env(safe-area-inset-left));max-width:560px;margin:0 auto;background:linear-gradient(transparent,var(--fondo) 30%)}
.notte .azioni,.azioni.notte{background:linear-gradient(transparent,var(--notte) 30%)}
.btn{border:0;border-radius:16px;padding:15px 18px;font:700 1.02rem var(--testo);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px}
.btn.primo{background:var(--pomodoro);color:#fff;flex:1}
.btn.primo:active{background:var(--pomodoro-scuro)}
.btn.secondo{background:var(--carta);border:1.5px solid var(--riga);color:var(--inchiostro)}
.btn.verde{background:var(--basilico);color:#fff;flex:1}
.btn.piccolo{min-height:40px;padding:9px 14px;font-size:.92rem;border-radius:12px}
.btn.largo{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--acqua);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fila{display:flex;gap:8px;flex-wrap:wrap}

/* barra in basso */
nav.basso{position:fixed;left:0;right:0;bottom:0;background:var(--carta);border-top:1px solid var(--riga);padding:6px 6px calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);max-width:560px;margin:0 auto;z-index:5}
nav.basso a{display:grid;justify-items:center;gap:2px;color:var(--tenue);text-decoration:none;font-size:.76rem;font-weight:600;padding:6px 0;border-radius:12px}
nav.basso a svg{width:26px;height:26px}
nav.basso a[aria-current="page"]{color:var(--pomodoro)}

/* ricetta */
.ingredienti{list-style:none;margin:0;padding:0;display:grid}
.ingredienti li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1.5px dashed var(--riga)}
.ingredienti li:last-child{border-bottom:0}
.ingredienti .ico{width:44px;height:44px;border-radius:14px;background:var(--fondo);display:grid;place-items:center}
.notte .ingredienti .ico{background:var(--notte)}
.ingredienti .ico svg{width:30px;height:30px}
.ingredienti b{font:800 1.35rem var(--titoli);font-variant-numeric:tabular-nums;white-space:nowrap}
.ingredienti small{display:block;color:var(--tenue);font-size:.82rem}
.striscia{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--fondo)}
.striscia i{display:block;height:100%}
.consiglio{font-size:.9rem;color:var(--tenue)}
.avviso{background:color-mix(in srgb,var(--pomodoro) 13%,var(--carta));border-radius:var(--r);padding:11px 14px;font-size:.92rem}
.bene{background:color-mix(in srgb,var(--basilico) 15%,var(--carta));border-radius:var(--r);padding:11px 14px;font-size:.92rem}
.dati{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.dati div{background:var(--fondo);border-radius:var(--r);padding:10px 12px;min-width:0}
.notte .dati div{background:var(--notte)}
.dati span{display:block;font-size:.8rem;color:var(--tenue)}
.dati b{font:700 1.08rem var(--titoli)}

/* programma */
.programma{list-style:none;margin:0;padding:0;display:grid}
.programma li{display:grid;grid-template-columns:66px 24px 1fr;gap:10px;align-items:start}
.programma time{font:700 1.1rem/1.3 var(--titoli);text-align:right;font-variant-numeric:tabular-nums}
.programma time small{display:block;font:500 .74rem var(--testo);color:var(--tenue)}
.programma .binario{position:relative;min-height:60px;height:100%}
.programma .binario::before{content:"";position:absolute;left:11px;top:8px;bottom:0;width:2px;background:var(--riga)}
.programma li:last-child .binario::before{display:none}
.programma .binario i{position:absolute;left:4px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--carta);border:3px solid var(--riga)}
.programma li.fatta .binario i{background:var(--basilico);border-color:var(--basilico)}
.programma li.ora .binario i{background:var(--pomodoro);border-color:var(--pomodoro);box-shadow:0 0 0 5px color-mix(in srgb,var(--pomodoro) 25%,transparent)}
.programma .cosa{padding-bottom:16px}
.programma .cosa b{display:block}
.programma .cosa span{font-size:.88rem;color:var(--tenue)}
.programma li.fatta .cosa b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7}

/* in corso */
.palco{display:grid;justify-items:center;gap:6px;text-align:center;padding:8px 0}
.palco .mascotte{width:min(62vw,250px);height:auto}
.conto{font:800 3.4rem/1 var(--titoli);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.conto small{font:600 1rem var(--testo);color:var(--tenue);display:block;letter-spacing:0;margin-top:6px}
.avanzamento{height:10px;border-radius:5px;background:var(--notte-2);overflow:hidden;width:100%}
.avanzamento i{display:block;height:100%;background:var(--semola);border-radius:5px;transition:width .6s}
.tappa-ora{display:grid;gap:8px}
.tappa-ora h2{font-size:1.6rem}
.carta-corso{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;background:var(--notte);color:#EEF1FA;border-radius:var(--r-grande);padding:14px 16px;text-decoration:none}
.carta-corso .mascotte{width:84px;height:84px}
.carta-corso b{font:700 1.15rem var(--titoli);display:block}
.carta-corso span{color:#A9B2D6;font-size:.9rem}

/* elenchi */
.elenco{display:grid;gap:10px}
.voce{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;background:var(--carta);border:1px solid var(--riga);border-radius:18px;padding:10px 12px;text-decoration:none;color:inherit;width:100%;text-align:left}
.voce .figura{width:62px;height:62px;border-radius:14px;background:var(--fondo);display:grid;place-items:center;overflow:hidden}
.voce .figura svg{width:44px;height:44px}
.voce .figura img{width:100%;height:100%;object-fit:cover}
.voce b{display:block;font-weight:700}
.voce span{font-size:.86rem;color:var(--tenue)}
.stelle{color:var(--semola);letter-spacing:1px;white-space:nowrap}
.voto{display:flex;gap:6px}
.voto button{border:0;background:none;font-size:2.1rem;line-height:1;color:var(--riga);padding:2px}
.voto button[aria-pressed="true"]{color:var(--semola)}
.vuoto{display:grid;justify-items:center;text-align:center;gap:12px;padding:28px 12px}
.vuoto .mascotte{width:150px;height:150px}
.foto{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.foto img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%}
.schede{display:flex;gap:8px;overflow-x:auto}
.schede button{border:1.5px solid var(--riga);background:var(--carta);border-radius:999px;padding:8px 14px;font-weight:600;white-space:nowrap}
.schede button[aria-pressed="true"]{background:var(--inchiostro);color:var(--fondo);border-color:var(--inchiostro)}

/* accesso */
.accesso{min-height:100vh;display:grid;align-content:center;gap:22px;padding:24px max(20px,env(safe-area-inset-left));background:var(--notte);color:#EEF1FA;--carta:#232C64;--riga:#3A4685;--tenue:#A9B2D6}
.accesso .mascotte{width:160px;height:160px;justify-self:center}
.accesso h1{text-align:center;font-size:2.4rem}
.accesso form{display:grid;gap:14px}
.accesso .campo input{color:#EEF1FA}

/* finestra in basso */
.velo{position:fixed;inset:0;background:rgb(10 12 30/.55);z-index:20;display:flex;align-items:flex-end;justify-content:center;animation:velo .2s}
@keyframes velo{from{opacity:0}}
.foglio{background:var(--carta);color:var(--inchiostro);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:20px max(16px,env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));display:grid;gap:14px;max-height:88vh;overflow:auto;animation:sale .25s ease-out}
@keyframes sale{from{transform:translateY(40px)}}
.avviso-breve{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--inchiostro);color:var(--fondo);padding:11px 18px;border-radius:999px;font-weight:600;z-index:30;max-width:90vw;text-align:center}

/* mascotte */
.mascotte .corpo{transform-box:fill-box;transform-origin:50% 100%;animation:respira 4s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.985)}}
.mascotte .occhi{transform-box:fill-box;transform-origin:center;animation:sbatte 5s infinite}
@keyframes sbatte{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.mascotte .zeta{animation:zeta 3s ease-in-out infinite;opacity:0}
.mascotte .zeta:nth-of-type(2){animation-delay:1s}
@keyframes zeta{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-22px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* stampa: solo la scheda della ricetta */
@media print{
  nav.basso,.azioni,.testata,.passi,.non-stampa{display:none!important}
  body,.schermata{background:#fff!important;color:#000!important}
  .schermata{padding:0}
  .blocco{border:1px solid #bbb;break-inside:avoid}
}

/* farine: catalogo coi sacchi e righe del blend */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.voce-sacco{display:grid;justify-items:center;gap:2px;text-align:center;background:var(--fondo);border:1.5px solid var(--riga);border-radius:18px;padding:10px 8px 12px}
.voce-sacco .sacco{width:78px;height:94px}
.voce-sacco b{font-size:.95rem;line-height:1.2}
.voce-sacco span{font-size:.8rem;color:var(--tenue)}
.voce-sacco small{font-size:.74rem;color:var(--tenue)}
.voce-sacco[disabled]{opacity:.55}
.voce .figura .sacco{width:50px;height:60px}
.cerca{border:1.5px solid var(--riga);border-radius:var(--r);background:var(--carta);padding:12px 14px;width:100%}
.riga-blend{display:grid;grid-template-columns:1fr 92px 44px;gap:8px;align-items:center}
.riga-blend select{border:1.5px solid var(--riga);border-radius:var(--r);background:var(--carta);padding:12px 10px;min-width:0;width:100%}
.numero.corto{min-height:46px}
.numero.corto input{font-size:1.05rem;padding:6px 2px}
.numero.corto span{padding-right:10px;color:var(--tenue);font-weight:600}

/* scelta della farina dentro la ricetta */
.scelta-farina{display:grid;gap:12px;border-top:1.5px dashed var(--riga);padding-top:14px}
.scelta-farina h3{font-size:1rem}

/* schermata farine: i sacchi che hai, con la quantità */
.farine-mie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.carta-farina{display:grid;gap:8px;background:var(--fondo);border:2px solid var(--riga);border-radius:18px;padding:10px}
.carta-farina.scelta{border-color:var(--basilico);background:color-mix(in srgb,var(--basilico) 9%,var(--carta))}
.carta-farina .tocca{position:relative;display:grid;justify-items:center;gap:2px;background:none;border:0;padding:0;text-align:center}
.carta-farina .sacco{width:74px;height:89px}
.carta-farina b{font-size:.92rem;line-height:1.2}
.carta-farina .tocca span{font-size:.8rem;color:var(--tenue)}
.carta-farina .spunta{position:absolute;top:0;right:4px;width:26px;height:26px;border-radius:50%;background:var(--riga);color:transparent;display:grid;place-items:center;font-style:normal;font-weight:800}
.carta-farina.scelta .spunta{background:var(--basilico);color:#fff}
.quanta{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;font-size:.85rem;font-weight:600}

.cambi{margin:0;padding-left:20px;display:grid;gap:6px}

/* tappa in corso, ordinata */
.tappa-testa{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tappa-testa .quando{background:var(--semola);color:#1C2550;border-radius:999px;padding:5px 12px;font-weight:700;font-size:.88rem;white-space:nowrap}
.tappa-ora h3{font-size:.95rem;color:var(--tenue);font-family:var(--testo);font-weight:600;margin-top:4px}
.da-fare{margin:0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:10px}
.da-fare li{counter-increment:passo;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;line-height:1.4}
.da-fare li::before{content:counter(passo);width:30px;height:30px;border-radius:50%;background:var(--notte-2);color:#fff;display:grid;place-items:center;font:700 .95rem var(--titoli)}
.notte .da-fare li::before{background:var(--semola);color:#1C2550}
.dopo{text-align:center;color:var(--tenue);font-size:.92rem;margin-top:-6px}