/* food.css - the Food tab's newer parts: saying a portion in words, "your usuals", the batch builder,
   and the camera in the Ask tab. Split out because styles.css had reached the 1000-line limit; the
   older .md-* food styles are still in styles.css. Same Atelier palette, light-tinted buttons only. */

/* ---- the add-food buttons: 2 per row, wrapping, so three or four of them still read ---- */
.md-scanrow{flex-wrap:wrap}
.md-scanrow .md-scan{flex:1 1 44%; min-width:0}
.md-scanrow .md-scan.wide{flex-basis:100%}

/* ---- chips that can be forgotten (your usuals, your batches) ---- */
.md-chipwrap{display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; background:var(--bg2); overflow:hidden}
.md-chipwrap .md-chip{border:0; border-radius:0; background:none; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.md-chipwrap .md-chip .mut{color:var(--mut2); font-weight:600}
.md-chipx{padding:0 10px 0 6px; color:var(--mut2); font-size:12px; border-left:1px solid var(--line)}
.md-chipx:active{background:var(--card2)}

/* ---- "how much did you have?" - her words, turned into grams by /api/portion ---- */
.md-words{display:flex; gap:8px; align-items:center}
.md-words input{flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:11px; padding:11px 12px; font-size:16px; outline:none}
.md-words input:focus{border-color:var(--acc)}
.md-words-go{flex:none; padding:11px 14px; border-radius:11px; background:var(--card2); border:1px solid var(--acc); color:var(--acc); font-weight:700; font-size:13.5px; white-space:nowrap}
.md-words-go:active{background:var(--acc); color:var(--acctxt)}
.md-words-note{font-size:12.5px; line-height:1.45; color:var(--mut); margin:7px 2px 0; min-height:0}
.md-words-note:empty{display:none}

/* ---- the batch builder ---- */
.md-bx{width:100%; max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
/* A long list (a big batch, or a plate with several things on it) scrolls inside the box, so the
   Cancel / Add buttons stick to the bottom of it and never end up out of reach below the fold. */
.md-bx .md-scan-btns{position:sticky; bottom:-1px; z-index:1; margin-top:6px; padding:12px 0 2px; background:var(--card)}
.md-bx .md-items{margin-top:4px}
.md-bx .md-scan{margin-top:0}
.md-bx-src{display:flex; flex-wrap:wrap; gap:8px}
.md-bx-src .md-scan{flex:1 1 44%; min-width:0; padding:11px 8px; font-size:13px}
.md-bx-mine{margin-top:8px; padding:11px 12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--txt)}
.md-bx .md-scan-amt{gap:12px}
.md-bx .md-scan-amt span{flex:none}
.md-bx .md-scan-amt input{width:74px}
.md-bx .md-search{margin-top:10px}
.md-bx-edit{display:block; margin-top:9px; padding:0; text-align:left; font-size:12.5px; font-weight:700; color:var(--acc); text-decoration:underline; text-underline-offset:3px}

/* ---- a photographed meal, broken into its parts (every amount editable) ---- */
.md-pl-warn{margin:6px 0 12px; padding:10px 12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); font-size:12.5px; line-height:1.45; color:var(--mut)}
.md-pl-row{padding:10px 0; border-bottom:1px solid var(--line)}
.md-pl-row:last-of-type{border-bottom:0}
.md-pl-top{display:flex; align-items:center; gap:8px}
.md-pl-top b{flex:1; min-width:0; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.md-pl-bot{display:flex; align-items:center; gap:10px; margin-top:6px}
.md-pl-amt{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--txt)}
.md-pl-amt input{width:72px; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:8px 10px; font-size:16px; text-align:right; outline:none}
.md-pl-amt input:focus{border-color:var(--acc)}
.md-pl-mac{flex:1; min-width:0; font-size:12px; color:var(--mut); text-align:right}

/* ---- the camera in the Ask tab ---- */
.cx-input{flex-wrap:wrap}
.cx-cam{flex:none; width:42px; height:42px; border-radius:50%; background:var(--card2); border:1px solid var(--acc); color:var(--acc); display:flex; align-items:center; justify-content:center}
.cx-cam:disabled{opacity:.5}
.cx-cam svg{width:19px; height:19px; display:block}
.cx-label{flex:1 0 100%; order:-1; display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:9px 11px; border-radius:12px; background:var(--card2); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--txt)}
.cx-label .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-label .mut{color:var(--mut); font-weight:600}
.cx-label-i{display:inline-flex; color:var(--acc)}
.cx-label-i svg{width:17px; height:17px; display:block}
.cx-label-x{flex:none; width:26px; height:26px; border-radius:50%; color:var(--mut2); font-size:12px}
.cx-label-x:active{background:var(--bg2)}
.cx-label.reading{color:var(--mut); font-weight:600}
.cx-said-label{display:inline-flex; align-items:center; gap:5px; margin-right:6px; padding:2px 8px 2px 6px; border-radius:999px; background:rgba(255,255,255,.28); font-size:11.5px; font-weight:700; vertical-align:1px}
.cx-said-label svg{width:13px; height:13px; display:block}