.meal-entry{position:relative;min-width:0;isolation:isolate;border-radius:24px;overflow:hidden;margin-block:4px}
.meal-entry,.meal-entry *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.meal-entry>.meal-swipe-card{position:relative;z-index:1;touch-action:pan-y;will-change:transform;background:var(--paper,#f5f5f3);padding:12px;border:0;border-radius:24px}
.meal-entry.meal-swipe-settling>.meal-swipe-card{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.meal-swipe-reveal{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 18px;color:#fff;font-size:13px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .12s}
.meal-swipe-reveal svg{display:block;width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.meal-swipe-favorite-state[data-favorite="true"] svg{fill:currentColor}
.meal-swipe-favorite{justify-content:flex-start;background:#427f50;border-radius:24px}
.meal-swipe-delete{justify-content:flex-end;background:#b63b34;border-radius:24px}
.meal-swipe-right .meal-swipe-favorite,.meal-swipe-left .meal-swipe-delete{opacity:1}
.meal-swipe-label{opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.meal-swipe-labelled .meal-swipe-label{opacity:1;transform:none}
.meal-swipe-ready .meal-swipe-reveal{filter:brightness(1.08)}
.meal-entry>.meal:focus-visible{outline:2px solid var(--accent,#ef643a);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.meal-entry.meal-swipe-settling>.meal-swipe-card,.meal-swipe-reveal,.meal-swipe-label{transition:none}}
#mealSwipeHint{position:fixed;bottom:115px;left:50%;transform:translateX(-50%);z-index:100;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border-radius:16px;background:#252823;color:#fff;font-size:13px;text-align:center;pointer-events:none}
#mealSwipeHint[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.meal-entry.meal-swipe-settling>.favorite-choice{transition:none}}

/* First-use preview only moves the card; gesture handlers never receive events. */
.meal-swipe-demo>.meal{animation:meal-swipe-demo 2.6s .25s cubic-bezier(.45,0,.2,1) both}
.meal-swipe-demo .meal-swipe-favorite{animation:meal-swipe-demo-right 2.6s .25s ease both}
.meal-swipe-demo .meal-swipe-delete{animation:meal-swipe-demo-left 2.6s .25s ease both}
@keyframes meal-swipe-demo{0%,50%,100%{transform:translateX(0)}18%,32%{transform:translateX(var(--meal-demo-distance,56px))}68%,82%{transform:translateX(calc(-1 * var(--meal-demo-distance,56px)))}}
@keyframes meal-swipe-demo-right{0%,50%,100%{opacity:0}12%,38%{opacity:1}}
@keyframes meal-swipe-demo-left{0%,50%,100%{opacity:0}62%,88%{opacity:1}}
@media(prefers-reduced-motion:reduce){.meal-swipe-demo>.meal,.meal-swipe-demo .meal-swipe-reveal{animation:none}}