/* ============================================================================
   Legacy styles — the pre-reskin rules that still power the views not yet
   rebuilt on the new design system (Plan, Shopping, admin dialogs, print).
   Loaded BEFORE styles.css so any selector both files define resolves to the
   new system. The :root shim below maps the old variable names onto the new
   semantic tokens so these rules follow light/dark automatically.
   This file shrinks as each remaining view is reskinned, and disappears at the
   end of the redesign.
   ========================================================================== */
:root {
  --green: var(--accent-fill);       /* old fills stay deep green (white label) */
  --green-dark: var(--accent-strong);/* old accent text follows the theme */
  --bg: var(--page-bg-hi);
  --line: var(--border);
  --muted: var(--text-3);
  /* --card, --text, --danger resolve from the new token set */
}

.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="search"] { flex: 1 1 180px; }

/* Multi-select filter dropdowns (Tags / Status) */
.tag-filter { position: relative; }
.tag-filter > button { white-space: nowrap; }
.tag-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 15;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 10px 12px;
  max-height: 320px; overflow-y: auto; min-width: 200px; display: grid; gap: 12px;
}
.tag-group-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.tag-opt { display: flex; align-items: center; gap: 6px; font-size: .85rem; padding: 2px 0; cursor: pointer; }
.tag-opt input { width: auto; margin: 0; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); width: 100%;
}
button {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); cursor: pointer;
}
button.primary { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
button.primary:hover { background: var(--green-dark); }
button.danger { color: var(--danger); border-color: #e7c3c0; }
button.icon { border: 0; background: transparent; font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--tint-green); color: var(--green-dark); border: 1px solid #dbe7db;
}
.chip.diet { background: #fdf3e7; color: #8a5a1a; border-color: #f0ddc2; }
.chip.version { background: #eef0fb; color: #3b3f8f; border-color: #dcdff2; }
.chip.untried { background: #fff3e0; color: #b25e00; border-color: #f3d3a3; font-weight: 600; }
.chip.tried { background: var(--tint-green); color: var(--green-dark); border-color: #cfe6d5; }
.chip.rating-favorite { background: #fff6da; color: #8a6d1a; border-color: #f0e0a8; font-weight: 600; }
.chip.rating-ok { background: var(--page-bg-hi); color: #55606a; border-color: #d9dde1; }
.chip.rating-avoid { background: #fdeceb; color: var(--danger); border-color: #f3c9c6; font-weight: 600; }
/* Effort: the cook's manual judgment-call tags ("lots of work"). */
.chip.effort { background: #f3ecfa; color: #6b3fa0; border-color: #e0d0f0; }
/* Print state: a neutral "printed" chip, an amber "needs reprint" nudge. */
.chip.printed { background: var(--page-bg-hi); color: #55606a; border-color: #dbe0e5; }
.chip.reprint-needed { background: #fff3e0; color: #8a5a1a; border-color: #f3dcb0; font-weight: 600; }
/* Version family stack: the "⑂ N versions" chip toggles an inline list of every
   version under the (preferred) family card. */
.card-versions-toggle { cursor: pointer; font: inherit; }
.card-versions-toggle.is-open { background: #dcdff2; }
.card-versions {
  margin-top: 8px; display: grid; gap: 4px;
  border-top: 1px dashed var(--line); padding-top: 8px;
}
.card-version-row { display: flex; align-items: center; gap: 8px; }
.card-version-open {
  flex: 1; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; cursor: pointer;
}
.card-version-open:hover { background: var(--bg); }
.cv-name { flex: 1; }
.cv-ver { font-size: .72rem; }
.chip.cv-current { background: #eef0fb; color: #3b3f8f; border-color: #dcdff2; font-weight: 600; }
.card-version-use { font-size: .78rem; white-space: nowrap; }
/* "Suggested by X" credit under a card's macros. */
.card-suggested { font-size: .82rem; margin: 2px 0 0; }

/* Library header total ("N of M recipes") + "Search everything" toggle. */
.recipe-count { margin: 0 0 8px; font-size: .85rem; }
.deep-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.deep-toggle input { margin: 0; }
/* Per-option recipe counts in the tag filter ("chicken (12)"). */
.tag-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Print-only binder copy */
#print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area {
    display: block; position: absolute; inset: 0 auto auto 0; width: 100%;
    padding: 0 6px; color: #000; font-size: 12pt;
  }
  .topbar, .backdrop, main { display: none !important; }
  #print-area h1 { font-size: 20pt; margin: 0 0 2px; }
  #print-area h2 { font-size: 13pt; margin: 14px 0 4px; border-bottom: 1px solid #999; }
  #print-area h3 { font-size: 12pt; margin: 10px 0 2px; }
  #print-area .print-version { font-style: italic; margin-bottom: 6px; }
  #print-area .print-meta { color: #333; margin: 2px 0; }
  #print-area .print-source { margin-top: 12px; font-size: 10pt; color: #333; word-break: break-all; }
  #print-area .print-flag { color: #555; font-size: 10pt; font-style: italic; }
  #print-area .print-note { margin: 6px 0; font-size: 10pt; color: #555; font-style: italic; }
  #print-area ul, #print-area ol { margin: 4px 0 4px 18px; padding: 0; }
  #print-area li, #print-area p { margin: 2px 0; }

  /* Compact = a tighter one-page copy: smaller type, two-column ingredients, no
     notes/nutrition, and slimmer page margins. The named @page keeps Normal print
     on the browser's default margins (unchanged); only compact opts into the tight
     ones. */
  @page compact { margin: 0.7cm; }
  #print-area.print-compact { page: compact; padding: 0; font-size: 10pt; }
  #print-area.print-compact h1 { font-size: 15pt; }
  #print-area.print-compact h2 { font-size: 11pt; margin: 8px 0 2px; }
  #print-area.print-compact h3 { font-size: 10pt; margin: 6px 0 1px; }
  #print-area.print-compact .print-ingredients { columns: 2; column-gap: 18px; }
  #print-area.print-compact .print-nutrition,
  #print-area.print-compact .print-notes { display: none; }
}

.empty, .placeholder { color: var(--muted); }
.placeholder { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; }
.editor {
  background: var(--card); border-radius: 14px; width: min(680px, 100%);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
.editor-head, .editor-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
/* Wrap the footer actions on narrow screens so Save (first) and the rest stay on
   screen instead of overflowing the modal on mobile. */
.editor-foot { border-bottom: 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.editor-head h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.editor-body { padding: 16px 18px; overflow-y: auto; display: grid; gap: 14px; }
.editor-body label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.editor-body label input, .editor-body label textarea { color: var(--text); }
.editor-body label.check-row { display: flex; align-items: center; gap: 8px; color: var(--text); }
.editor-body label.check-row input { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
legend { font-size: .82rem; color: var(--muted); padding: 0 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.row4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nutri { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.netcarbs { font-size: .8rem; color: var(--muted); margin: 6px 2px 0; }
.calc-detail { margin-top: 8px; font-size: .82rem; }
.calc-detail summary { cursor: pointer; color: var(--green-dark); }
.calc-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.calc-table td { padding: 2px 6px; border-bottom: 1px solid var(--line, #eee); vertical-align: top; }
.calc-table td.num { text-align: right; white-space: nowrap; color: var(--muted); }
.calc-detail .approx { color: var(--muted); }
.calc-warn { display: block; color: #b25e00; margin-bottom: 4px; }
.calc-miss { margin: 6px 2px 0; color: var(--muted); }
.calc-weight { margin: 4px 2px 6px; font-weight: 600; }
.g { color: var(--muted); font-weight: 400; font-size: .92em; }
.ing-preview { font-size: .8rem; color: var(--muted); }
.ing-preview .aisle { margin-top: 6px; }
.ing-preview .aisle b { color: var(--green-dark); }

/* Ingredient transparency flags (nothing silently missed). */
.flag-dot { cursor: help; font-weight: 700; }
.flag-dot.flag-attention, .flag-attention { color: #b25e00; }
.flag-dot.flag-estimate, .flag-estimate { color: var(--muted); }
.flag-dot.flag-optional, .flag-optional { color: #3b3f8f; }
.ing-flags { font-size: .8rem; margin-top: 8px; }
.ing-flags .flags-summary { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 600; margin-bottom: 4px; }
.ing-flags .flags-group { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--page-bg-hi); }
.ing-flags .flags-attention { border-color: #f0d6b3; background: #fdf6ec; }
.ing-flags .flags-optional { border-color: #dcdff2; background: #f2f3fb; }
.ing-flags .flags-group b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 4px; }
.ing-flags ul { margin: 0; padding-left: 18px; }
.ing-flags li { margin: 2px 0; color: var(--text); }
.ing-flags .flag-why { color: var(--muted); }
.ing-flags label { display: inline; color: var(--text); cursor: pointer; }
.ing-flags .opt-include { margin-right: 4px; vertical-align: middle; }
.chip.flag-attention { background: #fdf6ec; color: #b25e00; border-color: #f0d6b3; font-weight: 600; }

/* Ingredient provenance chip + change-match picker (M2 — ingredient-matching
   correction UI; docs/ingredient-matching-and-consolidation.md §3-4). */
.match-chip {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  background: var(--tint-green); color: var(--green-dark); border: 1px solid #dbe7db; cursor: pointer;
}
.match-chip:hover { background: var(--tint-green); }
.match-chip.match-chip-none {
  background: var(--page-bg-hi); color: var(--muted); border-color: var(--line); font-weight: 400;
}
.match-chip.match-chip-none:hover { background: var(--page-bg-hi); }
/* A nutrition match with no curated shopping identity — AI-cached food or a fuzzy
   USDA score. Counted, but softer than a canonical match so the eye can tell them
   apart; the ⚠/~ flag dot beside it still flags anything to verify. */
.match-chip.match-chip-soft {
  background: #fdf4e3; color: #8a5a00; border-color: #f0dfb8; font-weight: 500;
}
.match-chip.match-chip-soft:hover { background: #f9ebcf; }

.match-dialog { width: min(480px, 100%); }
.match-item { font-weight: 600; color: var(--text); margin: 0; }
.match-current { font-size: .88rem; color: var(--text); }
.match-current b { color: var(--green-dark); }
.match-badge {
  display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  background: #eef0fb; color: #3b3f8f; border: 1px solid #dcdff2;
}
.match-badge.match-via-user-override { background: var(--tint-green); color: var(--green-dark); border-color: #cfe6d5; }
.match-badge.match-via-table { background: #eef0fb; color: #3b3f8f; border-color: #dcdff2; }
.match-badge.match-via-llm { background: #fdf3e7; color: #8a5a1a; border-color: #f0ddc2; }
.match-dialog label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.match-candidates { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.match-candidate {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 8px 10px; font-size: .88rem;
}
.match-candidate:hover { background: var(--tint-green); border-color: var(--green); }
.match-candidate-aisle { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.match-empty { color: var(--muted); font-size: .85rem; margin: 4px 2px; }
.match-status { font-size: .82rem; color: var(--muted); min-height: 1.2em; margin: 0; }

/* Editor: import bar, verify, images */
.import-bar { display: flex; gap: 8px; }
.import-bar input { flex: 1; }
.ocr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.model-pick { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.model-pick select { width: auto; padding: 6px 8px; }
.ai-fill { display: flex; flex-direction: column; gap: 8px; }
.ai-fill-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-fill-line button { min-width: 172px; }
.ai-fill button { border-color: var(--green); color: var(--green); background: var(--card); font-weight: 600; }
.ai-fill button:hover:not(:disabled) { background: var(--tint-green); }
.ai-fill button:disabled { opacity: .5; cursor: not-allowed; border-color: var(--line); color: var(--muted); }
#f-suggest-tags-ai { min-width: 0; font-weight: 500; font-size: .82rem; color: var(--muted); border-color: var(--line); }
.linkbtn { border: 0; background: transparent; color: var(--green-dark); text-decoration: underline; cursor: pointer; padding: 0 2px; font: inherit; }
.fill-status { font-size: .85rem; color: var(--muted); background: var(--tint-green); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.shop-add-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.shop-add-bar input { flex: 1; }
.file-btn.ghost { background: var(--card); color: var(--green); }
.file-btn.ghost:hover { background: var(--tint-green); }
.ocr-status { font-size: .82rem; color: var(--muted); flex: 1; min-width: 160px; }
.verify-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--tint-green); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.verify-row span { flex: 1; font-size: .82rem; color: var(--muted); min-width: 180px; }
.img-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.thumb { position: relative; width: 84px; height: 84px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--page-bg-hi); cursor: zoom-in; }
.thumb-rm {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0;
  border-radius: 999px; background: var(--card); color: var(--danger); border: 1px solid var(--line);
  font-size: .8rem; line-height: 1; cursor: pointer;
}
.img-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.img-add input[type="url"] { flex: 1; min-width: 160px; }
.file-btn {
  display: inline-block; padding: 9px 12px; border: 1px solid var(--green); color: #fff;
  background: var(--green); border-radius: 8px; cursor: pointer; font-size: .9rem; white-space: nowrap;
}
.file-btn:hover { background: var(--green-dark); }
.hint { font-size: .78rem; color: var(--muted); margin: 8px 0 0; }
.card-thumb { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: var(--page-bg-hi); cursor: zoom-in; }

/* Weekly plan */
.week-pick { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.week-pick input { width: auto; }
.plan-summary {
  background: var(--tint-green); border: 1px solid #dbe7db; color: var(--green-dark);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: .85rem;
}
.plan-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.plan-card { cursor: default; display: flex; flex-direction: column; gap: 8px; }
.plan-card:hover { box-shadow: none; transform: none; }
.plan-day { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--green-dark); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.plan-day .muted { color: var(--muted); font-weight: 400; }
.plan-remove { margin-left: auto; color: var(--danger); font-size: .9rem; line-height: 1; }
.plan-recipe { margin: 0; font-size: 1.02rem; cursor: pointer; }
.plan-recipe:hover { color: var(--green-dark); text-decoration: underline; }
.plan-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.plan-actions label.pa { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.plan-actions .move-date, .plan-actions .ready-time { padding: 5px 6px; font-size: .8rem; }
.plan-actions .reroll, .plan-actions .insert-day { padding: 6px 10px; font-size: .82rem; }
.plan-reminder { font-size: .76rem; color: var(--muted); line-height: 1.4; }
/* Quick "Made it" tap + its "last made" context. */
.plan-made-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-made {
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
  color: var(--green-dark); background: var(--tint-green); border-color: #cfe6d5;
}
.plan-made:hover { background: var(--tint-green); }
.plan-made-info { font-size: .76rem; color: var(--muted); }
/* "Made it" flow (batch 5a). Red for overdue (a past recipe meal not yet marked made),
   a calm green for a meal that's been made. Colors are built from the semantic --danger
   / --green tokens with translucent tints so the treatment reads as red/green over the
   card in either a light or dark surface (no theme-specific hex to drift out of sync). */
.plan-card.is-overdue { border-color: var(--danger); background: rgba(179, 38, 30, .06); }
.plan-overdue-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--danger); background: rgba(179, 38, 30, .10);
  border: 1px solid var(--danger); border-radius: 999px; padding: 1px 8px;
}
/* The overdue "✓ Made it" button, drawn in red so the nudge is obvious. */
.plan-made.is-overdue-btn { color: var(--danger); background: rgba(179, 38, 30, .08); border-color: var(--danger); }
.plan-made.is-overdue-btn:hover { background: rgba(179, 38, 30, .14); }
/* A meal that's been marked made: a settled green card + a done-looking button. */
.plan-card.is-made { border-color: #cfe6d5; background: rgba(47, 125, 79, .05); }
.plan-made.is-made { color: var(--green-dark); background: var(--tint-green); border-color: #cfe6d5; font-weight: 600; }
.plan-made.is-made:hover { background: #d3e8d9; }
/* Placeholder nights (eating out, leftovers, …) read as a lighter, dashed card. */
.plan-ph-card { background: #fbfcfb; border-style: dashed; }
.plan-ph { margin: 0; font-size: 1.02rem; color: var(--green-dark); }
.ph-note { padding: 6px 8px; font-size: .82rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.ph-note::placeholder { color: var(--muted); }
.reminders-status {
  background: var(--card); border: 1px dashed var(--line); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px; font-size: .82rem; color: var(--muted);
}
.reminders-status a { color: var(--green-dark); }

/* Shopping list */
.aisle-head {
  margin: 16px 0 6px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--green-dark); font-weight: 600;
}
.aisle-head:first-child { margin-top: 0; }
.shop-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
}
.shop-main { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; min-width: 0; }
.shop-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
/* The row body is a button that expands the detail panel (looks like plain text). */
.shop-expand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 2px 0; border: 0; background: transparent; text-align: left;
  cursor: pointer; font: inherit; color: var(--text);
}
.shop-qty { color: var(--muted); font-size: .85rem; min-width: 62px; flex: 0 0 auto; }
.shop-name { flex: 1; min-width: 0; }
/* The caret is the ✎ edit affordance now (batch 2 item A): it doesn't rotate, it
   just brightens when the editor is open. */
.shop-caret { color: var(--muted); font-size: .82rem; flex: 0 0 auto; transition: color .12s ease; }
.shop-row.is-expanded .shop-caret { color: var(--green-dark); }
.shop-row.is-expanded { border-color: var(--green); }
.shop-row.is-checked .shop-name, .shop-row.is-checked .shop-qty { text-decoration: line-through; color: var(--muted); }
.shop-remove { color: var(--danger); flex: 0 0 auto; }

/* Optional-aware rows: a muted "optional" tag (all-optional or a mixed-unit
   fallback) and the inline "(N optional)" share appended to the quantity. */
.shop-optional-tag {
  display: inline-block; margin-left: 6px; vertical-align: baseline;
  font-size: .66rem; font-weight: 500; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px;
  background: #f0f1ef; color: var(--muted); border: 1px solid var(--line);
}
.shop-qty-optional { color: var(--muted); }
.shop-row.is-checked .shop-optional-tag { text-decoration: none; }

/* Expandable provenance / escape-hatch panel */
.shop-detail {
  flex: 0 0 100%; width: 100%; margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--line); display: grid; gap: 10px;
}
.shop-detail-buy {
  font-size: .82rem; color: var(--green-dark); background: var(--tint-green);
  border: 1px solid #dbe7db; border-radius: 8px; padding: 6px 10px;
}
.shop-detail-sources { display: grid; gap: 8px; }
.shop-src-group { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fbfcfb; }
.shop-src-group.is-excluded { opacity: .55; }
.shop-src-group.is-excluded .shop-src-raw { text-decoration: line-through; }
.shop-src-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; margin-bottom: 4px; }
.shop-src-recipe { font-weight: 600; font-size: .85rem; color: var(--text); }
.shop-src-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text); padding: 2px 0;
}
.shop-src-raw { flex: 1; min-width: 120px; color: var(--muted); }
.shop-src-optional {
  flex: 0 0 auto; font-size: .66rem; font-weight: 500; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: #f0f1ef; color: var(--muted); border: 1px solid var(--line);
}
/* "Nothing silently missed": the row-level ⚠ (an ingredient's match needs a look)
   and the per-source marker pointing at the exact line to fix. Amber, not red —
   it's a verify nudge, not an error. */
.shop-attention-tag { margin-left: 6px; color: #b8860b; cursor: help; }
.shop-row.is-checked .shop-attention-tag { text-decoration: none; }
.shop-src-attention {
  flex: 0 0 auto; font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: #fdf6e3; color: #8a6d1a; border: 1px solid #e8d9a0;
}
.shop-src-qty { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-exclude { color: var(--danger); }
.shop-unexclude { color: var(--green-dark); }
.shop-fixmatch { color: var(--green-dark); }
.shop-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-rename { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; }
.shop-rename-input { flex: 1; font-size: .85rem; padding: 6px 8px; }
.shop-rename-save, .shop-merge { flex: 0 0 auto; font-size: .82rem; padding: 6px 12px; white-space: nowrap; }
.shop-merge { border-color: var(--green); color: var(--green-dark); }
.shop-merge:hover { background: var(--tint-green); }

/* Merge picker ("Same as…") — reuses the candidate list look. */
.shop-merge-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.shop-merge-target {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 8px 10px; font-size: .88rem;
}
.shop-merge-target:hover { background: var(--tint-green); border-color: var(--green); }

/* Store split: group headers are collapse toggles (batch 2 item C). */
.store-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 22px 0 4px; padding: 4px 2px; text-align: left; cursor: pointer;
  font-size: .95rem; font-weight: 700; color: var(--text);
  background: transparent; border: 0; border-bottom: 2px solid var(--green);
}
.store-head:first-child { margin-top: 0; }
.store-head.store-unassigned { border-color: var(--danger); }
.store-head.store-staples { border-color: #b8860b; }
.store-caret { font-size: .7rem; flex: 0 0 auto; color: var(--muted); }
.store-head-label { flex: 0 0 auto; }
.store-hint { font-weight: 400; font-size: .78rem; color: var(--muted); }

/* Live search bar (batch 2 item B). */
.shop-search-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
#shop-search { flex: 1; font-size: .9rem; padding: 7px 10px; }
#shop-search-clear {
  flex: 0 0 auto; font-size: 1rem; line-height: 1; padding: 6px 11px; color: var(--muted);
}

/* Batch 2 item A: placement + category controls, now inside the detail panel. Each
   is a labelled full-width row so the editor reads top-to-bottom on a phone. */
.shop-place { display: grid; gap: 8px; }
.shop-place-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-place-label {
  flex: 0 0 72px; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--muted);
}
.shop-place .shop-store, .shop-place .shop-aisle { flex: 1; min-width: 120px; font-size: .85rem; padding: 6px 8px; }
.shop-place .shop-note { flex: 1; min-width: 120px; font-size: .85rem; padding: 6px 8px; }
.shop-bump { flex: 0 0 auto; font-size: .8rem; padding: 6px 10px; color: var(--green-dark); border-color: var(--green); }
.shop-place-flags { justify-content: flex-start; gap: 10px; }
.shop-staple { flex: 0 0 auto; font-size: .8rem; padding: 6px 12px; color: var(--muted); }
.shop-staple.on { color: #b8860b; border-color: #e8d9a0; background: #fdf9ec; font-weight: 600; }
.shop-remove { flex: 0 0 auto; font-size: .8rem; padding: 6px 12px; color: var(--danger); }
/* An Unassigned row renders open; tint its panel so it reads as "needs a store". */
.shop-row.is-unassigned { border-color: var(--danger); }
.mini-dialog h2 { margin: 0; font-size: 1.05rem; }
.mini-dialog p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Add-meal (search) + Add-placeholder dialogs, and the editor's "Add to plan". */
.mini-dialog.addmeal, .mini-dialog.addph { width: min(460px, 100%); }
.mini-dialog.addmeal label, .mini-dialog.addph label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
#addmeal-search { font-size: 1rem; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); }
.addmeal-results, .addph-list {
  max-height: 260px; overflow-y: auto; display: grid; gap: 4px;
  border: 1px solid var(--line); border-radius: 9px; padding: 6px;
}
.addmeal-result, .addph-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.addmeal-result:hover, .addph-opt:hover { background: var(--bg); }
.addmeal-result.is-hi, .addph-opt.is-hi { background: #eaf4ee; border-color: var(--green); }
.addmeal-result-name { flex: 1; }
.addmeal-ver { font-size: .72rem; }
.addmeal-none { padding: 10px; margin: 0; text-align: center; }
/* "Which version?" step in Add-meal, and the plan card's version switcher list. */
.addmeal-versions, .mealver-list {
  display: grid; gap: 4px; border: 1px solid var(--line);
  border-radius: 9px; padding: 6px; max-height: 200px; overflow-y: auto;
}
.addmeal-versions-head { font-size: .78rem; color: var(--muted); padding: 2px 4px; font-weight: 600; }
.addmeal-ver-opt, .mealver-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.addmeal-ver-opt:hover, .mealver-opt:hover { background: var(--bg); }
.addmeal-ver-opt.is-hi, .mealver-opt.is-hi { background: #eaf4ee; border-color: var(--green); }
.addmeal-ver-pref, .mealver-current { font-size: .72rem; }
/* The plan card's ⑂ version-switch chip is a button — match the version chip look. */
.plan-version-switch { cursor: pointer; font: inherit; }
/* Inline confirmation next to the editor's "Add to plan" button. */
.foot-status { font-size: .82rem; color: var(--green); font-weight: 600; }
.foot-status.is-error { color: var(--danger); }

/* Login dialog (email OTP) */
.login-dialog #login-step1, .login-dialog #login-step2 { display: grid; gap: 12px; }
.login-dialog input { font-size: 1rem; }
#login-code { letter-spacing: .35em; text-align: center; font-size: 1.25rem; }
.login-status { margin: 0; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.login-status.is-error { color: #b3261e; }
.made-date-row label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }

/* Store aisle-order list */
.order-list { list-style: decimal; padding-left: 26px; margin: 0; display: grid; gap: 4px; }
.order-item { display: flex; align-items: center; gap: 8px; }
.order-item span:first-child { flex: 1; }
.order-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.order-btns .icon:disabled { opacity: .3; cursor: default; }

/* "AI foods" review screen (D2) — the custom_foods AI cache, spot-checkable.
   Rows/detail follow the shopping list's expand pattern (.shop-row/.shop-detail
   above): a button-row toggles an expanded panel tracked in JS state, not DOM. */
.af-list { display: grid; gap: 6px; }
.af-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.af-row.is-expanded { border-color: var(--green); }
.af-main {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 2px 0; border: 0; background: transparent; text-align: left;
  cursor: pointer; font: inherit; color: var(--text);
}
.af-name { flex: 1; min-width: 120px; font-weight: 600; }
.af-macros { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.af-usedby { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.af-caret { color: var(--muted); font-size: .7rem; flex: 0 0 auto; transition: transform .12s ease; }
.af-row.is-expanded .af-caret { transform: rotate(180deg); }
.af-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; flex: 0 0 auto;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.af-badge-ok { background: var(--tint-green); color: var(--green-dark); border: 1px solid #cfe6d5; }
.af-badge-bad { background: #fdf6ec; color: #b25e00; border: 1px solid #f0d6b3; }

.af-detail {
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
  display: grid; gap: 10px; font-size: .88rem;
}
.af-reasons {
  font-size: .82rem; color: #b25e00; background: #fdf6ec;
  border: 1px solid #f0d6b3; border-radius: 8px; padding: 6px 10px;
}
.af-reasons ul { margin: 4px 0 0 18px; padding: 0; }
.af-view { display: grid; gap: 8px; }
.af-nutri-table { border-collapse: collapse; }
.af-nutri-table td { padding: 1px 10px 1px 0; }
.af-nutri-table td.num { text-align: right; padding-right: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.af-portions { color: var(--text); font-size: .85rem; }
.af-prov { display: grid; gap: 2px; font-size: .8rem; color: var(--muted); }
.af-prov a { color: var(--green-dark); word-break: break-all; }
.af-usedby-list { font-size: .85rem; color: var(--text); }
.af-status:empty { display: none; }
.af-diff {
  font-size: .82rem; background: #eef0fb; border: 1px solid #dcdff2;
  border-radius: 8px; padding: 8px 10px;
}
.af-diff table { border-collapse: collapse; margin-top: 4px; }
.af-diff td { padding: 1px 10px 1px 0; }
.af-diff td:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.af-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-form { display: grid; gap: 10px; }
.af-form label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.af-form-errors { font-size: .82rem; color: var(--danger); background: #fdeceb; border: 1px solid #f3c9c6; border-radius: 8px; padding: 6px 10px; }
.af-form-errors ul { margin: 4px 0 0 18px; padding: 0; }

@media (max-width: 560px) {
  .af-main { flex-wrap: wrap; }
  .af-name { flex: 1 1 100%; }
}

/* Match-report screen — read-only ingredient→database resolution breakdown, with
   proportional per-layer bars and the unresolved / low-confidence lists. */
.mr-body { display: grid; gap: 16px; }
.mr-summary { font-size: .85rem; color: var(--muted); }
.mr-section { display: grid; gap: 6px; }
.mr-h { margin: 0; font-size: .95rem; }
.mr-count { color: var(--muted); font-weight: 400; font-size: .82rem; }
.mr-note { margin: 0; font-size: .78rem; color: var(--muted); }
.mr-layers { display: grid; gap: 6px; }
.mr-layer { display: grid; grid-template-columns: 110px 1fr 84px; align-items: center; gap: 8px; }
.mr-layer-name { font-size: .82rem; color: var(--text); }
.mr-bar-track { height: 12px; background: #eef0ee; border-radius: 999px; overflow: hidden; }
.mr-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.mr-bar-good { background: var(--green); }
.mr-bar-warn { background: #e6a23c; }
.mr-bar-bad  { background: #cf6679; }
.mr-layer-val { font-size: .78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mr-list { display: grid; gap: 4px; }
.mr-row {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
}
.mr-item { font-size: .85rem; color: var(--text); word-break: break-word; }
.mr-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* Recalculate-nutrition screen — the bulk sweep's dry-run diff table + Apply. The
   table scrolls horizontally inside its wrapper on narrow screens. */
.recalc-actions { display: flex; gap: 8px; }
.recalc-summary { font-size: .85rem; color: var(--muted); }
.recalc-table-wrap { overflow-x: auto; }
.recalc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.recalc-table th, .recalc-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.recalc-table th.num, .recalc-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recalc-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.recalc-name { font-weight: 500; color: var(--text); }
.recalc-changed .recalc-name { color: var(--green-dark); }
.recalc-delta.up { color: #b25e00; }
.recalc-delta.down { color: var(--green-dark); }
.recalc-last { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.recalc-failed { opacity: .7; }
.recalc-failed .recalc-name { color: var(--danger); }
.recalc-mark { color: var(--danger); }

/* Retag-all screen — shares the recalc table/summary/action styles; only the
   per-recipe +added / −removed tag chips and the new-tags column are its own. */
.retag-changes { min-width: 180px; }
.retag-changes .chip { margin: 1px 2px 1px 0; }
.chip.retag-added { background: var(--tint-green); color: var(--green-dark); border-color: #cfe6d5; font-weight: 600; }
.chip.retag-removed { background: #fdeceb; color: var(--danger); border-color: #f3c9c6; text-decoration: line-through; }
.retag-new { font-size: .78rem; color: var(--muted); min-width: 160px; }

/* Fix-casing screen — shares the recalc table/summary/action styles; the before→after
   diff cell is its own: the shouting original struck through, the cleaned text in green. */
.casing-diff { font-size: .82rem; min-width: 220px; }
.casing-before { color: var(--muted); text-decoration: line-through; }
.casing-arrow { color: var(--muted); }
.casing-after { color: var(--green-dark); }

@media (max-width: 560px) {
  .mr-layer { grid-template-columns: 84px 1fr 64px; }
  .recalc-table th, .recalc-table td { padding: 5px 5px; }
}

@media (max-width: 560px) {
  .row3, .row4, .row5 { grid-template-columns: 1fr 1fr; }
  .shop-row { flex-wrap: wrap; }
  .shop-place-label { flex-basis: 100%; }
}

/* --- Shopping accuracy: quantity override, combine, per-store aisle rename --- */

/* Row-level markers when a manual amount is in effect (the qty text itself shows
   the override; these annotate it). "changed" reuses the amber verify-nudge look. */
.shop-qty-edited { margin-left: 5px; color: var(--green-dark); font-size: .8rem; cursor: help; }
.shop-row.is-checked .shop-qty-edited { text-decoration: none; }
.shop-qty-stale {
  margin-left: 5px; font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: #fdf6e3; color: #8a6d1a; border: 1px solid #e8d9a0; cursor: help;
}
.shop-row.is-checked .shop-qty-stale { text-decoration: none; }

/* Inline quantity editor in the detail panel */
.shop-qty-editor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text);
  background: #f7f9f7; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.shop-qty-editor-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--muted); flex: 0 0 auto;
}
.shop-qty-need { color: var(--muted); }
.shop-qty-set { font-weight: 600; color: var(--green-dark); }
.shop-qty-stale-hint {
  font-size: .72rem; color: #8a6d1a; background: #fdf6e3;
  border: 1px solid #e8d9a0; border-radius: 999px; padding: 1px 8px;
}
.shop-qty-input { width: 92px; font-size: .85rem; padding: 6px 8px; }
.shop-qty-unit { width: 96px; font-size: .85rem; padding: 6px 8px; }
.shop-qty-edit {
  flex: 0 0 auto; font-size: .8rem; padding: 5px 12px;
  border-color: var(--green); color: var(--green-dark);
}
.shop-qty-edit:hover { background: var(--tint-green); }
.shop-qty-save, .shop-qty-cancel { flex: 0 0 auto; font-size: .8rem; padding: 5px 12px; }
.shop-qty-editor .shop-qty-reset { margin-left: auto; }

/* Combine chip: a derived row that can fold into its whole form (own full line) */
.shop-combine-line { flex: 0 0 100%; width: 100%; }
.shop-combine-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 10px 5px 12px; font-size: .8rem; text-align: left;
  border: 1px solid #e8d9a0; background: #fdf9ec; color: #6d5713;
  border-radius: 999px; cursor: pointer;
}
.shop-combine-chip:hover { background: #fbf3d8; border-color: #dcc887; }
.shop-combine-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shop-combine-act {
  flex: 0 0 auto; font-weight: 600; color: var(--green-dark);
  border-left: 1px solid #e8d9a0; padding-left: 8px;
}

/* "Combined into this row" callout (what a whole row absorbed) */
.shop-combined {
  display: grid; gap: 4px; font-size: .82rem;
  background: var(--tint-green); border: 1px solid #dbe7db; border-radius: 8px; padding: 8px 10px;
}
.shop-combined-head {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--green-dark);
}
.shop-combined-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shop-combined-txt { flex: 1; min-width: 120px; color: var(--text); }

/* Per-store aisle rename (inside the Store order modal). The 3-class selectors
   outrank the generic ".order-item span:first-child { flex: 1 }" so the label
   stays compact and the input takes the slack. */
.order-list .order-item-rename { flex-wrap: wrap; gap: 6px; }
.order-list .order-item-rename .order-aisle-name {
  flex: 0 0 auto; min-width: 88px; font-size: .82rem; color: var(--muted);
}
.order-list .order-item-rename .order-rename {
  flex: 1 1 120px; min-width: 100px; font-size: .82rem; padding: 5px 8px;
}

@media (max-width: 560px) {
  .shop-qty-input, .shop-qty-unit { flex: 1 1 40%; width: auto; }
  .order-list .order-item-rename .order-rename { flex-basis: 100%; }
}

/* --- Shopping accuracy round 2: package size, pantry (on hand), servings --- */

/* Package-size editor — paired with the quantity editor, same card treatment. */
.shop-pack-editor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text);
  background: #f7f9f7; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.shop-pack-editor-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--muted); flex: 0 0 auto;
}
.shop-pack-current { font-weight: 600; color: var(--green-dark); }
.shop-pack-qty { width: 72px; font-size: .85rem; padding: 6px 8px; }
.shop-pack-unit { width: 84px; font-size: .85rem; padding: 6px 8px; }
.shop-pack-label-input { width: 132px; font-size: .85rem; padding: 6px 8px; }
.shop-pack-edit {
  flex: 0 0 auto; font-size: .8rem; padding: 5px 12px;
  border-color: var(--green); color: var(--green-dark);
}
.shop-pack-edit:hover { background: var(--tint-green); }
.shop-pack-save, .shop-pack-cancel { flex: 0 0 auto; font-size: .8rem; padding: 5px 12px; }
.shop-pack-editor .shop-pack-clear { margin-left: auto; }

/* "Have it at home" pantry toggle, in the row detail actions row. */
.shop-onhand-toggle {
  flex: 0 0 auto; font-size: .8rem; padding: 5px 12px;
  border-color: var(--line); color: var(--muted);
}
.shop-onhand-toggle:hover { background: var(--tint-green); }
.shop-onhand-toggle.is-on {
  border-color: #cfe6d5; color: var(--green-dark); background: var(--tint-green); font-weight: 600;
}

/* The pooled "On hand (N)" drawer at the very bottom of the list — a header button
   that toggles compact rows, each with a single "Out of it" escape hatch. */
.shop-onhand-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 22px 0 4px; padding: 6px 2px 5px;
  border: 0; border-bottom: 2px solid var(--line);
  background: transparent; text-align: left; cursor: pointer;
  font-size: .95rem; font-weight: 700; color: var(--muted);
}
.shop-onhand-head .muted { font-weight: 400; }
.shop-onhand-caret { font-size: .7rem; flex: 0 0 auto; transition: transform .12s ease; }
.shop-onhand-head.is-open .shop-onhand-caret { transform: rotate(90deg); }
.shop-onhand-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.shop-onhand-name { flex: 1; min-width: 0; color: var(--text); }
.shop-onhand-qty { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.shop-onhand-out { flex: 0 0 auto; }

/* Scaled-servings provenance tag next to a recipe name in the row detail. */
.shop-src-scaled {
  font-size: .7rem; color: var(--green-dark); background: var(--tint-green);
  border: 1px solid #dbe7db; border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}

/* Per-meal servings chip (a button) + its inline editor on plan cards. The chip
   reuses .chip; the custom (overridden) state borrows the favorite-rating gold. */
.plan-servings-chip:hover { background: var(--tint-green); }
.plan-servings-chip.is-custom { background: #fff6da; color: #8a6d1a; border-color: #f0e0a8; font-weight: 600; }
.plan-servings-editor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text);
  background: #f7f9f7; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.plan-servings-editor-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--muted);
}
.plan-servings-input { width: 72px; font-size: .85rem; padding: 6px 8px; }
.plan-servings-save, .plan-servings-cancel { flex: 0 0 auto; font-size: .8rem; padding: 5px 12px; }
.plan-servings-editor .plan-servings-reset { margin-left: auto; }
/* "Set as my default for this recipe" — its own line above the action buttons. */
.plan-servings-default { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text); }
.plan-servings-default input { width: auto; }

@media (max-width: 560px) {
  .shop-pack-qty, .shop-pack-unit, .shop-pack-label-input { flex: 1 1 40%; width: auto; }
  .shop-onhand-toggle { flex: 1 1 100%; }
}

/* --- Batch 2: build-dialog checklist, custom categories, on-list badge -------- */

/* Recipe exclusion checklist in the build dialog (item E). */
.build-recipes {
  display: grid; gap: 4px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fbfcfb;
}
.build-recipe { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text); cursor: pointer; }
.build-recipe input { width: 16px; height: 16px; flex: 0 0 auto; }
.build-recipe-name { min-width: 0; }

/* Custom-category add bar + delete button in the store-order modal (item D). */
.add-extra-bar { display: flex; gap: 6px; margin-top: 8px; }
.add-extra-bar input { flex: 1; font-size: .85rem; padding: 6px 8px; }
.add-extra-bar button { flex: 0 0 auto; font-size: .82rem; padding: 6px 12px; white-space: nowrap; }
.order-item-extra .order-aisle-name { font-style: italic; color: var(--green-dark); }
.order-del { color: var(--danger); }

/* Meal-card "on list" badge + "Add to list" action (item F). */
.plan-onlist { background: var(--tint-green); color: var(--green-dark); border-color: #cfe6d5; }
.plan-add-shop { border-color: var(--green); color: var(--green-dark); }
.plan-add-shop:hover { background: var(--tint-green); }

/* Editor all-caps nudge — a gentle amber banner offering sentence-case conversion. */
.allcaps-nudge { background: #fbf6e9; border: 1px solid #f0e6c8; border-radius: 8px; padding: 10px 12px; margin: 4px 0 8px; font-size: 14px; color: #6b5a1a; display: flex; flex-direction: column; gap: 8px; }
.allcaps-actions { display: flex; gap: 8px; }