/* The paper plan: what the Water and food page (water-food.html) looks like when printed (or saved as PDF).
   Loaded with media="print", so none of this touches the screen. It comes after app.css and wins ties.
   First the fridge part (.print-sheet), then the shopping list with boxes to tick, straight after it.
   print-plan.js fills the print-only parts just before printing. Everything else on the page is hidden. */

/* Black on white, also when the phone is in dark mode (same selectors as tokens.css, so these win). */
:root,
:root:not([data-theme="light"]) {
  --bg: #fff;
  --ink: #000;
  --surface: #fff;
  --fill: #fff;
  --tc: #fff;
  --mute: #333;
  --line: 1px;
  --text-body: 10.5pt;
  --text-small: 9.5pt;
}

@page {
  margin: 12mm;
}

.water-page {
  display: block;
  max-width: none;
  padding: 0;
}

/* Plain blocks: page breaks are reliable in block layout, not in flex */

/* The screen parts of the plan page */
.top-row,
.torch-hint,
.back,
h1,
.step-head,
.step-text,
.screen-only,
.step-actions,
.day-chips,
.plan-panel,
.ready-q,
.food-calc > h3,
.food-calc > .stat,
.food-calc > .mute,
.calc-fold,
.card-fill,
.food-calc > h3,
.example-line,
.allergies,
#print-plan,
.warnings,
.notice,
.mute,
.family-plan,
.plan-details > summary,
.plan-details > p,
.plan-excluded,
.plan-remove {
  display: none;
}

.print-only {
  display: block;
}

/* ---------- The part for the fridge ---------- */

.print-sheet h2 {
  margin: 0;
  font-size: 17pt;
}

.print-sheet h3 {
  margin: 10px 0 3px;
  padding-bottom: 2px;
  border-bottom: var(--line) solid var(--ink);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.print-sheet p {
  margin: 2px 0;
}

.print-sheet ol,
.print-sheet ul {
  margin: 0;
  padding-left: 1.3em;
}

.print-title {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
}

.print-numbers {
  padding: 4px 8px;
  border: 2px solid var(--ink);
  font-size: 12pt;
}

.print-numbers b {
  font-size: 18pt;
}

.print-kv {
  margin: 0;
}

.print-kv div {
  display: flex;
  gap: 8px;
}

.print-kv dt {
  flex: none;
  width: 45%;
}

.print-kv dd {
  margin: 0;
  font-weight: 600;
}

.print-supplies {
  margin-top: 10px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
}

/* ---------- The shopping list ---------- */

.print-list-title {
  break-after: avoid;
  margin: 14px 0 6px;
  font-size: 14pt;
}

/* The shopping list sits in the food card, hygiene and medicines in their own: print them as plain blocks. */
.plan-details,
.food-calc,
.supplies-card {
  display: block;
  padding: 0;
  border: 0;
}

#plan-list,
#supplies {
  columns: 2;
  column-gap: 8mm;
}

.plan-group-title {
  margin: 6px 0 2px;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  break-after: avoid;
}

.plan-group-why,
.plan-prep {
  display: none;
}

.plan-list li {
  padding-block: 2px;
  break-inside: avoid;
}

/* An empty box to tick on paper */
.plan-row::before {
  content: "";
  flex: none;
  width: 3mm;
  height: 3mm;
  margin-right: 6px;
  border: 1.2px solid var(--ink);
}