/* Sezione «Cibo»: calendario mensile dell'alimentazione */
.food{display:grid;gap:12px}
.fhead{display:flex;align-items:center;gap:8px}
.fhead h2{flex:1;margin:0;font-size:18px;text-align:center;text-transform:capitalize}
.fgrid .fcell{display:grid;grid-template-rows:auto auto auto;align-content:start;gap:3px;min-height:64px;padding:5px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left;min-width:0;overflow:hidden}
.fcell.dim{opacity:.45}.fcell.today{border-color:var(--accent)}.fcell[aria-pressed=true]{background:var(--surface2);box-shadow:0 0 0 2px var(--accent)}
.fcell .fk{font-size:12px;font-weight:700}.fcell .fk.plan{font-weight:600;color:var(--muted)}
.fbar{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.fbar i{display:block;height:100%;border-radius:3px;background:var(--muted)}
.st-ok .fbar i{background:#3fb871}.st-low .fbar i{background:#e0b341}.st-high .fbar i{background:#e0566a}
.flegend{font-size:12px;margin:0}
.fmeal{display:grid;gap:4px;padding:6px 0;border-top:1px solid var(--line)}
.frow{display:flex;gap:8px;align-items:center;justify-content:space-between}
@media (max-width:640px){.fgrid .fcell{min-height:54px;padding:3px}}
/* sette tab nella barra bassa: una sola riga anche sul telefono (sopra 900px resta la barra laterale) */
@media (max-width:899px){nav.tabs{grid-template-columns:repeat(8,minmax(0,1fr))}nav.tabs button{padding:6px 1px;font-size:11px;letter-spacing:-.2px}}
/* rifiniture: numeri stabili, aree di tocco, stato premuto, entrata del dettaglio */
.fcell .fk,.fdetail p,.fhead h2,.frow span{font-variant-numeric:tabular-nums}
.fhead h2,.fdetail h3{text-wrap:balance}
.flegend,.frow span,.fdetail p{text-wrap:pretty}
.fhead .btn{min-width:44px;min-height:44px}
.frow .btn{min-width:40px;min-height:40px}
.fcell{transition-property:transform,box-shadow,background-color,border-color;transition-duration:150ms;transition-timing-function:ease-out}
.fcell:active,.fhead .btn:active,.fdetail .btn:active{transform:scale(.96)}
.fbar i{transition:width 250ms ease-out}
.fdetail{animation:fin 200ms ease-out}
@keyframes fin{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.fdetail{animation:none}.fcell,.fbar i{transition:none}.fcell:active{transform:none}}