/* --- Print ----------------------------------------------------------------- */

#printArea { display: none; }

/* Paper is always light, whatever the screen theme is. Re-declaring the light
   palette here means every component that draws from these vars comes out on
   paper exactly as it would in light mode — no per-component print overrides.
   The dark selector is repeated so it beats :root[data-theme="dark"] above on
   source order at equal specificity. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;

    --bg: #ffffff;
    --bg-soft: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8f9fd;
    --surface-3: #f1f3fa;
    --border: #d5dae8;
    --border-strong: #b9c0d3;

    --text: #161a2c;
    --text-soft: #42475c;
    --text-muted: #6b7288;

    --accent: #147a46;
    --accent-hover: #147a46;
    --accent-contrast: #ffffff;
    --accent-soft: #e8f5ec;

    --amber: #8a4008;
    --gold: #8a6400;
    --red: #b32a30;
    --blue: #2f3fc4;

    --green: #147a46;
    --green-dark: #0f6e3e;

    --ring: transparent;
    --shadow-card: none;
    --shadow-pop: none;
    --shadow: none;
  }

  /* dark-theme component overrides that would otherwise survive onto paper */
  :root[data-theme="dark"] .badge { background: var(--accent-soft); color: var(--accent); }

  html, body { background: #ffffff !important; color: var(--text) !important; }

  /* the theme cross-fade must not be mid-flight when the page is painted to paper */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  @page { size: A4; margin: 11mm; }
  body.printing-list > :not(#listOverlay) { display: none !important; }
  body.printing-list #listOverlay { position: static; display: block; padding: 0; background: none; overflow: visible; }
  /* the sidebar gutter is a screen-layout thing — it must not eat a third of the paper */
  body.printing-list { padding: 0 !important; margin: 0 !important; background: #fff !important; }
  body.printing-list .listsheet { box-shadow: none; max-width: none; border-radius: 0; animation: none; padding: 0; }
  /* the screen list never prints — .printonly is the take-to-the-shop version */
  body.printing-list .ltools, body.printing-list .x,
  body.printing-list .lhead, body.printing-list .lbody { display: none !important; }
  body.printing-list .printonly { display: block; color: #000; }
  .pl-head {
    display: flex; align-items: baseline; gap: 4mm;
    border-bottom: 1.6pt solid #000; padding-bottom: 2.4mm; margin-bottom: 3.6mm;
  }
  .pl-head h1 { font-size: 15pt; letter-spacing: -.2pt; margin: 0; }
  .pl-head div { font-size: 8.5pt; color: #555; margin-left: auto; }
  /* Two columns as a table, not CSS multicol: print engines fragment multicol
     unreliably across pages, and a paired-section table always lays out. */
  .pl-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pl-grid td { width: 50%; vertical-align: top; padding: 0 4.5mm 0 0; }
  .pl-grid td + td { padding: 0 0 0 4.5mm; }
  .pl-sec { break-inside: avoid; page-break-inside: avoid; margin: 0 0 3.4mm; }
  .pl-sec h2 {
    font-size: 8.5pt; text-transform: uppercase; letter-spacing: .7pt; font-weight: 800;
    border-bottom: .5pt solid #999; padding-bottom: .9mm; margin: 0 0 1.2mm;
  }
  .pl-row {
    display: flex; gap: 1.8mm; align-items: flex-start;
    padding: .75mm 0; break-inside: avoid; page-break-inside: avoid;
  }
  .pl-box { flex: none; width: 3mm; height: 3mm; border: .5pt solid #444; border-radius: .5mm; margin-top: .75mm; }
  .pl-name { font-size: 9.5pt; line-height: 1.22; }
  .pl-name b { font-weight: 700; white-space: nowrap; }
  .pl-name i { font-style: normal; color: #555; }
  .pl-name small { font-size: 7.5pt; color: #777; }
  .pl-empty { font-size: 12pt; }
  body.printing-recipe > :not(#recipePage) { display: none !important; }
  body.printing-recipe #recipePage { position: static; display: block; padding: 0; background: none; overflow: visible; }
  body.printing-recipe #recipeInner { max-width: none; padding: 0; }
  body.printing-recipe .rp-card, body.printing-recipe .rp-macros {
    box-shadow: none; border-radius: 0; border: 0; padding: 0; background: none;
  }
  /* the page's own furniture — nothing you'd want on paper */
  body.printing-recipe .rp-nav, body.printing-recipe .rp-actions, body.printing-recipe .rp-heart,
  body.printing-recipe .notes-form, body.printing-recipe .covbox, body.printing-recipe .rp-more,
  body.printing-recipe .rp-cost details, body.printing-recipe .ing li.link > .ic,
  body.printing-recipe .stars button:not(.on) { display: none !important; }
  /* what's in the pantry is a today thing — the printed sheet outlives it */
  body.printing-recipe .ing li.miss { color: inherit; }
  body.printing-recipe .ing li.miss::before { background: #000; border: 0; opacity: .5; width: 7px; height: 7px; top: 12px; left: 4px; }
  /* the hero goes flat: the photo at a sane size, the title as black type */
  body.printing-recipe .rp-hero {
    min-height: 0; border-radius: 0; box-shadow: none; background: none;
    display: block; page-break-inside: avoid;
  }
  body.printing-recipe .rp-hero::after { display: none; }
  body.printing-recipe .rp-hero-img { position: static; width: 34%; max-height: 240px; float: right; margin: 0 0 6mm 6mm; }
  body.printing-recipe .rp-hero-text { padding: 0; }
  body.printing-recipe .rp-hero h1 { color: #000; text-shadow: none; font-size: 22pt; }
  body.printing-recipe .rp-desc, body.printing-recipe .rp-facts { color: #333; }
  body.printing-recipe .rp-pill { background: none; border: .5pt solid #999; color: #333; }
  body.printing-recipe .rp-body { display: grid; grid-template-columns: minmax(200px, 1fr) 1.5fr; gap: 8mm; }
  body.printing-recipe .steps li, body.printing-recipe .ing li { page-break-inside: avoid; }
  body.printing-plan > :not(#printArea) { display: none !important; }
  body.printing-plan #printArea { display: block !important; }
  body.printing-labels > :not(#printArea) { display: none !important; }
  body.printing-labels #printArea { display: block !important; }
  /* same sidebar gutter that was eating a third of the shopping list */
  body.printing-plan, body.printing-recipe, body.printing-labels { padding: 0 !important; margin: 0 !important; background: #fff !important; }
  .li-item input { width: 12px; height: 12px; }
  .lbody { padding: 0 8px; }
  .lhead { padding: 0 8px 4px; }
  .dept { page-break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}

/* ---------- printed weekly planner ----------
   Tints are kept light with dark text on top, so the sheet still reads properly
   if the printer drops background graphics. */
#printArea {
  --pp-ink: #23231f; --pp-soft: #6c6b5e; --pp-tint: #e9e8df; --pp-rule: #c9c8bb;
  color: var(--pp-ink); background: #fff;   /* never inherit the app theme onto paper */
}
.plan-sheet {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color: var(--pp-ink);
  border: .8pt solid var(--pp-rule);
  padding: 7mm 7mm 5mm;
}
.pp-title { text-align: center; line-height: 1; margin-bottom: 1.5mm; }
.pp-title .t1 { font-size: 30pt; letter-spacing: 6pt; font-weight: 400; margin-right: 2mm; }
.pp-title .t2 { font-size: 30pt; font-style: italic; color: var(--pp-soft); letter-spacing: .5pt; }
.pp-title .t3 { font-size: 15pt; color: var(--pp-soft); vertical-align: 3pt; margin-left: 2mm; }
.pp-week {
  text-align: center; font-size: 8.5pt; letter-spacing: 1.6pt; text-transform: uppercase;
  color: var(--pp-soft); margin-bottom: 5mm;
}
.pp-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pp-grid > tbody > tr > td { vertical-align: top; }
.pp-left { width: 58%; padding-right: 5mm; }
.pp-days { width: 100%; border-collapse: separate; border-spacing: 0 2.2mm; table-layout: fixed; }
.pp-days td { vertical-align: middle; }
.pp-dcell {
  width: 21mm; text-align: center; padding: 3mm 1mm;
  background: var(--pp-tint); border: .5pt solid var(--pp-rule); border-right: 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pp-dcell .in { display: block; font-size: 19pt; line-height: 1; }
.pp-dcell .dn {
  display: block; font-size: 5.6pt; letter-spacing: 1.1pt; text-transform: uppercase;
  color: var(--pp-soft); margin-top: 1.2mm;
}
.pp-mcell { border: .5pt solid var(--pp-rule); padding: 2.6mm 3mm; }
.pp-meal { display: flex; align-items: baseline; gap: 2mm; }
.pp-meal + .pp-meal { margin-top: 1.8mm; padding-top: 1.8mm; border-top: .4pt dotted var(--pp-rule); }
.pp-mname {
  flex: 1; font-family: Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 10pt; letter-spacing: .2pt; line-height: 1.2; text-transform: uppercase;
}
.pp-mname em { display: block; font: italic 7.5pt Georgia, serif; text-transform: none;
  letter-spacing: 0; color: var(--pp-soft); font-weight: 400; margin-top: .8mm; }
.pp-mpage { flex: none; font-size: 7.5pt; color: var(--pp-soft); letter-spacing: .4pt; white-space: nowrap; }
/* an unplanned day gets a rule to pen a meal onto, not a dead dash */
.pp-empty { border-bottom: .4pt dotted var(--pp-rule); height: 6.4mm; }
.pp-right { width: 42%; }
.pp-nhead {
  background: var(--pp-tint); border: .5pt solid var(--pp-rule); text-align: center;
  font-size: 7.5pt; letter-spacing: 2pt; text-transform: uppercase; padding: 2.2mm 0; color: var(--pp-ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pp-notes { border: .5pt solid var(--pp-rule); border-top: 0; padding: 3.4mm 4mm; }
.pp-line { border-bottom: .4pt dotted var(--pp-rule); height: 8.2mm; }
.pp-line:last-child { border-bottom: 0; }
.pp-foot {
  text-align: center; font-size: 7.5pt; letter-spacing: 2.6pt; text-transform: uppercase;
  color: var(--pp-soft); margin-top: 5mm; padding-top: 3mm; border-top: .5pt solid var(--pp-rule);
}

/* ---------- printed recipes ----------
   They flow rather than forcing one page each — two fit comfortably on a sheet. */
.pp-recipes { page-break-before: always; }
.print-recipe {
  break-inside: avoid; page-break-inside: avoid;
  padding-bottom: 5mm; margin-bottom: 5mm; border-bottom: .5pt solid #cfcfcf;
}
.print-recipe:last-child { border-bottom: 0; margin-bottom: 0; }
.print-recipe h2 { font-size: 13.5pt; margin: 0 0 1mm; letter-spacing: -.2pt; }
.print-recipe .prsub { color: #666; font-size: 8pt; margin-bottom: 3mm; }
.print-recipe .prcols { display: grid; grid-template-columns: 1fr 1.55fr; gap: 7mm; }
.print-recipe h5 {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: 1pt; margin: 0 0 1.4mm;
  border-bottom: .5pt solid #bbb; padding-bottom: .8mm; color: #4a4a42;
}
.print-recipe h5 + ul, .print-recipe h5 + ol { margin: 0 0 3.4mm; }
.print-recipe ul, .print-recipe ol { padding-left: 4.5mm; font-size: 9pt; line-height: 1.34; }
.print-recipe li { margin-bottom: 1.1mm; page-break-inside: avoid; }
.print-recipe .prnote { font-size: 8pt; color: #666; margin-top: 2mm; line-height: 1.32; }

/* ---------- meal prep labels ----------
   One set of rules serves both the paper and the on-screen preview, so the
   preview IS the label rather than a lookalike: everything is sized in mm/pt
   and the ink is hard-coded, since the sheet is white whatever the app theme.
   Two columns × five rows inside the 11mm @page margin (188 × 275mm of A4),
   so a label is 94 × 54mm — sits flat on a takeaway container lid.
   Nothing relies on a background fill, so a printer set to skip background
   graphics still gives a fully readable label. */
.ml-sheet + .ml-sheet { page-break-before: always; break-before: page; }
.ml-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Collapsed dashed borders draw ONE continuous guide clear across the sheet —
   that's what lets a fold-and-tear run straight without a guillotine. */
.ml-grid td { width: 50%; height: 54mm; padding: 0; vertical-align: top; border: .5pt dashed #9aa0ad; }

.ml-label {
  --ml-ink: #14161c; --ml-soft: #6a6f7d; --ml-rule: #9aa0ad;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ml-ink); background: #fff;
  box-sizing: border-box; height: 54mm; padding: 4mm 5.2mm 3.2mm;
  display: flex; flex-direction: column;
}
.ml-top { display: flex; align-items: flex-start; gap: 3mm; }
/* Title and note are the only parts that can grow, and everything below them —
   the macros, the dates, the barcode — has to stay on the paper. Both are
   clamped so the tallest possible label is still a 54mm label. */
.ml-title {
  flex: 1; font-size: 11.5pt; font-weight: 700; line-height: 1.1;
  letter-spacing: -.15pt; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* which container is this — handy when you're pulling one out of a stack */
.ml-n {
  flex: none; width: 8mm; height: 8mm; box-sizing: border-box;
  border: .9pt solid var(--ml-ink); border-radius: 1.4mm;
  font-size: 11pt; font-weight: 700; text-align: center; line-height: 7.2mm;
}
.ml-sub {
  font-size: 7pt; letter-spacing: .5pt; text-transform: uppercase;
  color: var(--ml-soft); margin-top: 1.2mm; line-height: 1.35;
}
.ml-note {
  font-size: 8pt; font-style: italic; margin-top: 1.4mm; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* margin-top:auto pins the numbers and the dates to the bottom of the label,
   so a two-line recipe title doesn't shove them out of alignment */
.ml-nums { display: flex; align-items: flex-end; margin-top: auto; padding-top: 1.6mm; }
.ml-cal { flex: none; padding-right: 4.5mm; }
.ml-cal b { display: block; font-size: 17pt; font-weight: 700; line-height: .86; letter-spacing: -.7pt; }
.ml-cal span { display: block; font-size: 6pt; letter-spacing: 1pt; text-transform: uppercase; color: var(--ml-soft); margin-top: 1.4mm; }
.ml-macros { display: flex; gap: 4mm; padding-left: 4.5mm; border-left: .5pt solid var(--ml-rule); }
.ml-m b { display: block; font-size: 11.5pt; font-weight: 700; line-height: 1; }
.ml-m span { display: block; font-size: 6pt; letter-spacing: .8pt; text-transform: uppercase; color: var(--ml-soft); margin-top: 1.2mm; }

.ml-foot {
  display: flex; align-items: flex-end; gap: 3.5mm; margin-top: 2.2mm;
  border-top: .5pt solid var(--ml-rule); padding-top: 1.6mm;
}
.ml-when { flex: 1; min-width: 0; }
.ml-dates { display: flex; gap: 3mm; }
.ml-d { flex: 1; min-width: 0; }
.ml-d span { display: block; font-size: 6pt; letter-spacing: 1pt; text-transform: uppercase; color: var(--ml-soft); }
.ml-d b { display: block; font-size: 9pt; font-weight: 700; margin-top: .8mm; white-space: nowrap; }
/* no date set — leave a rule to pen one on with, not a dead dash */
.ml-d i { display: block; border-bottom: .5pt solid var(--ml-rule); height: 3.6mm; margin-top: .8mm; }
.ml-keep { font-size: 6.5pt; letter-spacing: .4pt; text-transform: uppercase; color: var(--ml-soft); margin-top: 1.2mm; }
/* drawn rather than a checkbox glyph, which Helvetica doesn't carry */
.ml-keep u {
  display: inline-block; width: 2.6mm; height: 2.6mm; box-sizing: border-box;
  border: .6pt solid var(--ml-ink); border-radius: .4mm; margin: 0 1.2mm 0 0; vertical-align: -.2mm;
}
.ml-keep u + u { margin-left: 3.5mm; }
/* the box for where it actually went. Filled by growing its border rather than
   with a background, so it still comes out solid on a printer that's been told
   to skip background graphics — same reason nothing else here uses a fill. */
.ml-keep u.on { border-width: 1.3mm; }

/* the batch's own barcode, printed the same on every label of the run */
.ml-bc { flex: none; text-align: center; }
.ml-bc .bcsvg { display: block; }
.ml-bcnum {
  display: block; font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 6.5pt; letter-spacing: .6pt; margin-top: .6mm;
}
.ml-bctag { display: block; font-size: 5pt; letter-spacing: .7pt; text-transform: uppercase; color: var(--ml-soft); line-height: 1.2; }

/* the label dialog — the preview is a real label at true printed size */
#labelSheet { max-width: 480px; padding: 26px; }
#labelSheet h3 { margin-bottom: 2px; padding-right: 30px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
#labelSheet .esub { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.ml-row { display: flex; gap: 12px; }
.ml-row .efield { flex: 1; min-width: 0; }
.ml-prevwrap { background: #eef0f4; border: 1px solid var(--border); border-radius: 11px; padding: 12px; overflow-x: auto; }
/* a 94mm label is wider than a phone, so the preview scrolls in its own box
   rather than pushing the dialog sideways */
.ml-prev { width: 94mm; border: .5pt dashed #9aa0ad; box-shadow: 0 2px 10px -4px rgba(13,16,28,.35); }

/* fridge / freezer / not sure — one press, and the dates follow it */
.ml-store { display: flex; gap: 7px; }
.ml-store button {
  flex: 1; padding: 9px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.ml-store button:hover { background: var(--surface-3); color: var(--text); }
.ml-store button.on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* what the batch becomes in My Products, shown before it's committed */
.ml-track {
  margin: 14px 0; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.ml-track.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ml-track .pcheck { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.ml-trackbody { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ml-track:not(.on) .ml-trackbc { opacity: .35; }
.ml-trackbc { flex: none; text-align: center; }
.ml-trackbc .bcsvg { display: block; border-radius: 3px; }
.ml-trackbc span {
  display: block; margin-top: 3px; font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .4px; color: var(--text-muted);
}
.ml-trackbody .helper { margin: 0; }
@media (max-width: 560px) {
  #labelSheet { padding: 22px 16px; }
  .ml-row { display: block; }
  .ml-row .efield { width: 100%; }
  .ml-trackbody { display: block; }
  .ml-trackbc { margin-bottom: 10px; }
}

/* the batch's card on its product page */
.prep-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.prep-bc { flex: none; text-align: center; padding: 12px; border-radius: 11px; background: #fff; }
.prep-bc .bcsvg { display: block; }
.prep-bc b {
  display: block; margin-top: 6px; font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .5px; color: #14161c;
}
.prep-bc span { display: block; margin-top: 2px; font-size: 10.5px; color: #6a6f7d; }
.prep-facts { flex: 1; min-width: 220px; }
.prep-macros { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.prep-macros b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.prep-macros span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.prep-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* what the cook cost, on the batch's Costs tab */
.prepcost-lines { display: flex; flex-direction: column; gap: 3px; }
.prepcost-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.pcr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcr-qty { flex: none; color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pcr-cost {
  flex: none; min-width: 62px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.pcr-cost.none { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.prepcost-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-muted);
}
.prepcost-total b { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }