/* Styles of the "food" module. Phone first: tap targets >= 44px, nothing wider than the screen, only CSS variables from style.css (light and dark). */
.food { max-width: 760px; }
.food .card { margin-bottom: 12px; }
.f-card { padding: 14px 16px; }
.f-msg { padding: 24px 4px; text-align: center; }
.f-empty { color: var(--muted); padding: 10px 2px; font-size: 14px; }
.f-s { color: var(--muted); font-size: 13px; line-height: 1.35; }
.f-s.bad, .f-badge.bad, .f-sm-total.bad { color: var(--accent-text); }
.f-t { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.f-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.f-btn.sm { min-height: 44px; padding: 0 12px; font-size: 14px; }
.f-ib { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.f-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.f-bar .btn { flex: 1 1 140px; justify-content: center; }
.food .btn:disabled { opacity: .4; pointer-events: none; }

/* section tabs */
.f-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--sunk); border-radius: 12px; }
.f-tabs button { min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-tabs button.on { background: var(--card); color: var(--fg); font-weight: 650; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* energy toggle */
.f-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sunk); border-radius: 12px; }
.f-seg2 button { min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 15px; font-weight: 500; }
.f-seg2 button.on { background: var(--inv-bg); color: var(--inv-fg); }
.f-energy .f-s { margin-top: 8px; }

/* rows */
.f-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; }
.card > .f-row:last-child, .card > .f-row:last-of-type { border-bottom: 0; }
.f-row.done .f-t { color: var(--muted); text-decoration: line-through; }
.f-row.zero .f-qty { color: var(--muted); }
.f-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; min-height: 44px; justify-content: center; }
.f-edit { cursor: pointer; }
.f-dot { width: 26px; height: 26px; flex: none; border: 2px solid var(--line2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--inv-fg); }
.f-dot.on { background: var(--ok); border-color: var(--ok); }
.f-dot.lg { width: 38px; height: 38px; border-width: 3px; }
.f-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.f-badge { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 8px; border: 1px solid var(--line2); border-radius: var(--r-pill); color: var(--muted); white-space: nowrap; }
.f-badge.bad { border-color: var(--accent); }
.f-cost { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }

/* pantry */
.f-prow { flex-wrap: wrap; }
.f-step { display: flex; align-items: center; gap: 0; flex: none; }
.f-qty { min-width: 76px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.f-fz { flex: 1 0 100%; padding-bottom: 4px; }

/* suggestions */
.f-sugs { display: flex; flex-direction: column; gap: 8px; }
.f-sug { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); color: inherit; font: inherit; }
.f-sug:active { background: var(--sunk); }

/* budget */
.f-budget { margin-bottom: 4px; }
.f-bt { display: flex; align-items: baseline; gap: 8px; }
.f-bt b { font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.f-bt span { color: var(--muted); }
.f-meter { height: 8px; border-radius: var(--r-pill); background: var(--sunk); overflow: hidden; margin: 8px 0 6px; }
.f-meter i { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); }
.f-budget.over .f-meter i { background: var(--accent); }
.f-shoprow { cursor: pointer; }

/* forms */
.f-in, .f-modal input[type="text"], .f-modal input[type="number"], .f-modal input[type="date"], .f-modal select, .f-modal textarea, .f-add input, .f-add select, .f-price input, .food .field input {
  min-height: 44px; font-size: 16px; }
.f-modal textarea { width: 100%; font-family: inherit; }
.f-in { width: 100%; }
.f-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.f-two .field input, .f-two .field select { width: 100%; min-width: 0; }
.f-modal input[type="date"] { width: 100%; }
.f-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 10px; font-size: 15px; }
.f-check input { width: 24px; height: 24px; flex: none; }
.f-modal .modal-actions { gap: 8px; }
.f-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.f-add input[name="name"], .f-add button { grid-column: 1 / -1; }
.f-add input, .f-add select { width: 100%; min-width: 0; }
.f-price { display: flex; align-items: center; gap: 4px; flex: none; font-size: 12px; color: var(--muted); }
.f-price input { width: 72px; text-align: right; padding: 0 8px; }
.f-tpl { flex-wrap: nowrap; }

/* shop mode: full screen, huge targets */
body.f-lock { overflow: hidden; }
.f-shopmode { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); }
.f-sm-head { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.in-tg .f-sm-head { padding-top: calc(10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
.f-sm-x { width: 56px; min-height: 56px; padding: 0; justify-content: center; }
.f-sm-count { flex: 1; font-size: 20px; font-weight: 650; }
.f-sm-total { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.f-sm-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.f-big { flex: none; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 12px 16px; border: 2px solid var(--line2); border-radius: 16px; background: var(--card); color: inherit; font: inherit; text-align: left; }
.f-big:active { background: var(--sunk); }
.f-big.done { opacity: .55; border-color: var(--line); }
.f-big.done .f-bt1 { text-decoration: line-through; }
.f-bt1 { font-size: 24px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.f-bt2 { font-size: 20px; color: var(--muted); }
.f-bcost { flex: none; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-sm-sep { padding: 10px 4px 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.f-sm-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.f-finish { width: 100%; min-height: 68px; font-size: 20px; font-weight: 650; border-radius: 16px; justify-content: center; }

.food .page-h { margin-bottom: 12px; }
.f-card { padding: 12px 12px; }
.f-modal { padding-bottom: 18px; }
.f-modal .modal-actions .btn { flex: 1 1 30%; }
.f-tpl .f-s { display: none; }
/* five bottom-navigation slots on a narrow phone: keep every label whole (the longest is "Расписание") */
@media (max-width: 400px) {
  #side .nav { font-size: 11px; letter-spacing: -.01em; padding-left: 0; padding-right: 0; }
}