/* ---- theme tokens: dark values are the original colours, light values follow the page theme (generated by scripts/theme-tokens.cjs; edit freely) ---- */
:root {
  --wh-surface-0b0c0f: #0b0c0f;
  --wh-surface-0d0f12: #0d0f12;
  --wh-line-1d2027: #1d2027;
  --wh-surface-111317: #111317;
  --wh-line-262a33: #262a33;
  --wh-surface-1a1d24: #1a1d24;
  --wh-text-ffe08a: #ffe08a;
  --wh-line-6b5313: #6b5313;
  --wh-surface-2a2208: #2a2208;
  --wh-text-ffd866: #ffd866;
  --wh-surface-16181d: #16181d;
  --wh-surface-1b1e24: #1b1e24;
  --wh-surface-0f1115: #0f1115;
  --wh-surface-1a1d23: #1a1d23;
  --wh-surface-14161b: #14161b;
  --wh-text-fff: #fff;
  --wh-surface-262a33: #262a33;
  --wh-surface-20232b: #20232b;
  --wh-line-3a3f4c: #3a3f4c;
  --wh-surface-22252d: #22252d;
  --wh-text-f5f6f8: #f5f6f8;
  --wh-surface-2a1d10: #2a1d10;
  --wh-text-ffb766: #ffb766;
  --wh-line-343944: #343944;
  --wh-surface-3a1517: #3a1517;
  --wh-line-6b2a2e: #6b2a2e;
  --wh-text-ffc4c4: #ffc4c4;
  --wh-text-b3b9c6: #b3b9c6;
  --wh-surface-171a20: #171a20;
  --wh-surface-23262e: #23262e;
  --wh-line-a93a44: #a93a44;
  --wh-line-5a6170: #5a6170;
  --wh-text-ff9b9b: #ff9b9b;
  --wh-line-2f343e: #2f343e;
  --wh-surface-20232a: #20232a;
  --wh-surface-2c3039: #2c3039;
  --wh-line-2d3652: #2d3652;
  --wh-surface-141a2b: #141a2b;
  --wh-text-8696b3: #8696b3;
  --wh-surface-10152a: #10152a;
  --wh-line-222a42: #222a42;
  --wh-text-7f8db0: #7f8db0;
  --wh-text-91a2bb: #91a2bb;
  --wh-line-35405f: #35405f;
  --wh-surface-0f1322: #0f1322;
  --wh-line-46516f: #46516f;
  --wh-surface-171c2e: #171c2e;
  --wh-line-2f6b3f: #2f6b3f;
  --wh-surface-10261a: #10261a;
  --wh-text-b9c4d8: #b9c4d8;
  --wh-surface-2a2e38: #2a2e38;
  --wh-text-3ddc84: #3ddc84;
  --wh-text-ff6b6b: #ff6b6b;
  --wh-line-343a48: #343a48;
  --wh-surface-1b1e25: #1b1e25;
  --wh-text-e3e7ef: #e3e7ef;
  --wh-surface-2b3550: #2b3550;
  --wh-text-8fb2ff: #8fb2ff;
  --wh-line-22252d: #22252d;
  --wh-line-3a3f4a: #3a3f4a;
  --wh-surface-12302d: #12302d;
  --wh-line-3a4152: #3a4152;
  --wh-text-4fd17b: #4fd17b;
  --wh-text-ff8b8b: #ff8b8b;
  --wh-text-6fe09a: #6fe09a;
  --wh-surface-14261b: #14261b;
  --wh-line-1f232b: #1f232b;
  --wh-surface-2c313c: #2c313c;
  --wh-text-ffd2a6: #ffd2a6;
  --wh-surface-22360f: #22360f;
  --wh-surface-3a2614: #3a2614;
  --wh-surface-191c26: #191c26;
  --wh-line-343a52: #343a52;
  --wh-text-c9d4ff: #c9d4ff;
  --wh-line-2a2e38: #2a2e38;
  --wh-surface-121418: #121418;
  --wh-line-23262e: #23262e;
  --wh-surface-181b21: #181b21;
  --wh-surface-1a2033: #1a2033;
  --wh-surface-15171c: #15171c;
  --wh-text-e8eaee: #e8eaee;
  --wh-text-d23a32: #d23a32;
}
:root[data-theme="light"] {
  --wh-surface-0b0c0f: #ffffff;
  --wh-surface-0d0f12: #ffffff;
  --wh-line-1d2027: #c3ccd7;
  --wh-surface-111317: #ffffff;
  --wh-line-262a33: #c3ccd7;
  --wh-surface-1a1d24: #f8fafc;
  --wh-text-ffe08a: #8a5a00;
  --wh-line-6b5313: #9aa6b4;
  --wh-surface-2a2208: #f3f6f9;
  --wh-text-ffd866: #8a5a00;
  --wh-surface-16181d: #ffffff;
  --wh-surface-1b1e24: #f8fafc;
  --wh-surface-0f1115: #ffffff;
  --wh-surface-1a1d23: #f8fafc;
  --wh-surface-14161b: #ffffff;
  --wh-text-fff: #0f1a2b;
  --wh-surface-262a33: #edf1f5;
  --wh-surface-20232b: #f3f6f9;
  --wh-line-3a3f4c: #c3ccd7;
  --wh-surface-22252d: #f3f6f9;
  --wh-text-f5f6f8: #0f1a2b;
  --wh-surface-2a1d10: #f8fafc;
  --wh-text-ffb766: #8a5a00;
  --wh-line-343944: #c3ccd7;
  --wh-surface-3a1517: #f8fafc;
  --wh-line-6b2a2e: #c3ccd7;
  --wh-text-ffc4c4: #b3261e;
  --wh-text-b3b9c6: #2a3648;
  --wh-surface-171a20: #ffffff;
  --wh-surface-23262e: #f3f6f9;
  --wh-line-a93a44: #9aa6b4;
  --wh-line-5a6170: #9aa6b4;
  --wh-text-ff9b9b: #b3261e;
  --wh-line-2f343e: #c3ccd7;
  --wh-surface-20232a: #f3f6f9;
  --wh-surface-2c3039: #edf1f5;
  --wh-line-2d3652: #c3ccd7;
  --wh-surface-141a2b: #ffffff;
  --wh-text-8696b3: #5c6b7c;
  --wh-surface-10152a: #ffffff;
  --wh-line-222a42: #c3ccd7;
  --wh-text-7f8db0: #5c6b7c;
  --wh-text-91a2bb: #5c6b7c;
  --wh-line-35405f: #9aa6b4;
  --wh-surface-0f1322: #ffffff;
  --wh-line-46516f: #9aa6b4;
  --wh-surface-171c2e: #f8fafc;
  --wh-line-2f6b3f: #9aa6b4;
  --wh-surface-10261a: #f8fafc;
  --wh-text-b9c4d8: #2a3648;
  --wh-surface-2a2e38: #edf1f5;
  --wh-text-3ddc84: #1d7a52;
  --wh-text-ff6b6b: #b3261e;
  --wh-line-343a48: #c3ccd7;
  --wh-surface-1b1e25: #f8fafc;
  --wh-text-e3e7ef: #0f1a2b;
  --wh-surface-2b3550: #e6ebf1;
  --wh-text-8fb2ff: #1d5fa8;
  --wh-line-22252d: #c3ccd7;
  --wh-line-3a3f4a: #c3ccd7;
  --wh-surface-12302d: #edf1f5;
  --wh-line-3a4152: #9aa6b4;
  --wh-text-4fd17b: #1d7a52;
  --wh-text-ff8b8b: #b3261e;
  --wh-text-6fe09a: #1d7a52;
  --wh-surface-14261b: #f3f6f9;
  --wh-line-1f232b: #c3ccd7;
  --wh-surface-2c313c: #edf1f5;
  --wh-text-ffd2a6: #8a5a00;
  --wh-surface-22360f: #edf1f5;
  --wh-surface-3a2614: #edf1f5;
  --wh-surface-191c26: #f8fafc;
  --wh-line-343a52: #c3ccd7;
  --wh-text-c9d4ff: #1d5fa8;
  --wh-line-2a2e38: #c3ccd7;
  --wh-surface-121418: #ffffff;
  --wh-line-23262e: #c3ccd7;
  --wh-surface-181b21: #ffffff;
  --wh-surface-1a2033: #f8fafc;
  --wh-surface-15171c: #ffffff;
  --wh-text-e8eaee: #0f1a2b;
  --wh-text-d23a32: #b3261e;
}

/* Waste Hub: always-on tablet waste logger + reports.
   Dark-only, like Prep Hub, since it lives on a kitchen iPad all day. */

.tool-workspace-screen[data-tool="waste-hub"] .tool-workspace-header {
  display: none;
}
.tool-workspace-screen[data-tool="waste-hub"] {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.tool-workspace-screen[data-tool="waste-hub"] .tool-workspace-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0;
  background: var(--wh-surface-0b0c0f);
}

.waste-app [hidden],
.waste-reports [hidden],
.waste-sheet-wrap [hidden] {
  display: none !important;
}

.waste-app {
  /* Cooked = white, Raw = primary yellow (same as the raw ring), everywhere
     (validated as distinct on the dark surface, incl. color-blind checks). */
  --cooked: #e6e8ec;
  --raw: #ffe100;
  --raw-chart: #ffe100;
  --donation: #1fa79a; /* Donated (Shared Table) */
  --donation-ink: #4fd1c2; /* same teal, lifted for text on dark */
  --surface: #15171c;
  --surface-2: #1c1f26;
  --line: #2a2e38;
  --ink: #f5f6f8;
  --ink-2: #b3b9c6;
  --ink-3: #7d8494;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--wh-surface-0d0f12);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  /* The iPad home-indicator strip is mostly empty; only keep a sliver of it. */
  padding: 0 env(safe-area-inset-right) max(4px, calc(env(safe-area-inset-bottom) - 12px)) env(safe-area-inset-left);
}
/* Installed to the Home Screen, iPadOS draws its clock/battery over the top
   of the page -- push the header below it (same approach as Prep Hub; the
   demo/admin banners already offset the page themselves). */
html.installed-web-app body:not(.demo-mode):not(.admin-preview-active) .waste-app {
  padding-top: calc(10px + env(safe-area-inset-top));
}

/* ---------- top bar ---------- */
.waste-topbar {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--wh-line-1d2027);
  background: var(--wh-surface-111317);
}
.waste-title {
  text-align: center;
}
.waste-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.waste-title span {
  display: block;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  margin-top: 1px;
}
.waste-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.waste-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--wh-line-262a33);
  border-radius: 14px;
  background: var(--wh-surface-0b0c0f);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.waste-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.waste-icon-btn:active {
  background: var(--wh-surface-1a1d24);
}
.waste-tools-btn {
  justify-self: start;
}
.waste-tools-btn .tools-home-icon {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 3px;
}
.waste-tools-btn .tools-home-icon i {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
}
.waste-icon-btn.cfa-settings-locked {
  opacity: 0.4;
}

.waste-notice strong {
  color: var(--wh-text-ffe08a);
}
.waste-notice {
  margin: 10px 18px 0;
  padding: 10px 14px;
  border: 1px solid var(--wh-line-6b5313);
  border-radius: 12px;
  background: var(--wh-surface-2a2208);
  color: var(--wh-text-ffd866);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* ---------- main layout: buttons 2/3, total + ledger 1/3 ---------- */
.waste-body {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 18px 4px;
  min-height: 0;
}
.waste-left {
  display: grid;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.waste-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.waste-tagline {
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
}
.waste-hint span {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}

/* Raw / Cooked switch */
.waste-state-toggle {
  position: relative;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(520px, 100%);
  height: 64px;
  padding: 5px;
  border-radius: 999px;
  background: var(--wh-surface-16181d);
  border: 1px solid var(--line);
}
.waste-state-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--cooked);
  box-shadow: 0 6px 18px rgba(230, 232, 236, 0.22);
  transition:
    left 0.28s cubic-bezier(0.3, 1.3, 0.5, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.waste-app.is-raw .waste-state-thumb {
  left: 50%;
  background: var(--raw);
  box-shadow: 0 6px 22px rgba(255, 225, 0, 0.4);
}
.waste-state-toggle button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.waste-state-toggle button[aria-checked="true"] {
  color: #1b1500;
}
.waste-app.is-raw .waste-state-toggle button[aria-checked="true"] {
  color: #1b1500;
}

/* Product circles -- sized by JS (layoutGrid) to be as big as fit */
.waste-grid {
  --circle: 160px;
  --gap: 16px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), var(--circle));
  grid-auto-rows: var(--circle);
  gap: var(--gap);
  justify-content: center;
  align-content: center;
  min-height: 0;
  min-width: 0;
}
.waste-circle {
  --ring: calc(var(--circle) * 0.085);
  --raw-gap: calc(var(--circle) * 0.05);
  /* Product color, lifted slightly toward white so even dark colors read on the dark center. */
  --item-ink: color-mix(in srgb, var(--item-color) 78%, #fff);
  position: relative;
  width: var(--circle);
  height: var(--circle);
  padding: var(--raw-gap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--item-ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The product ring with the details inside it. */
.waste-circle-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--circle) * 0.012);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: var(--ring) solid var(--item-color);
  background: radial-gradient(circle at 50% 35%, var(--wh-surface-1b1e24), var(--wh-surface-0f1115) 70%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  text-align: center;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease;
}
.waste-circle.is-pressed .waste-circle-body {
  transform: scale(0.94);
}
.waste-circle.is-holding .waste-circle-body {
  transform: scale(0.9);
  background: color-mix(in srgb, var(--item-color) 22%, var(--wh-surface-0f1115));
}
.waste-circle-name {
  max-width: 74%;
  font-size: calc(var(--circle) * 0.095);
  line-height: 1.05;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.waste-circle-qty {
  font-size: calc(var(--circle) * 0.2);
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.waste-circle-money {
  font-size: calc(var(--circle) * 0.085);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}
.waste-circle:not(.has-waste) .waste-circle-qty,
.waste-circle:not(.has-waste) .waste-circle-money {
  opacity: 0.45;
}

/* Tap feedback: a glow in the product's color pulses out from the ring. */
.waste-circle::after {
  content: "";
  position: absolute;
  inset: var(--raw-gap);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.waste-circle.is-glow::after {
  animation: waste-glow 0.7s ease-out;
}
@keyframes waste-glow {
  0% {
    opacity: 0.95;
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--item-color) 75%, transparent),
      0 0 calc(var(--circle) * 0.1) calc(var(--circle) * 0.02) color-mix(in srgb, var(--item-color) 60%, transparent);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 calc(var(--circle) * 0.14) color-mix(in srgb, var(--item-color) 0%, transparent),
      0 0 calc(var(--circle) * 0.3) calc(var(--circle) * 0.08) color-mix(in srgb, var(--item-color) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .waste-circle.is-glow::after {
    animation: none;
  }
}

/* Raw mode: a yellow ring around the product ring */
.waste-circle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(var(--raw-gap) * 0.62) solid var(--raw);
  box-shadow: 0 0 calc(var(--circle) * 0.08) rgba(255, 225, 0, 0.45);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
  pointer-events: none;
}
.waste-app.is-raw .waste-circle-ring {
  opacity: 1;
  transform: scale(1);
}

.waste-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--ink-2);
  font-size: 18px;
}
.waste-empty span {
  color: var(--ink-3);
  font-size: 14px;
}

/* ---------- right third: total + ledger ---------- */
.waste-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}
.waste-total-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--wh-surface-1a1d23), var(--wh-surface-14161b));
  border: 1px solid var(--line);
  min-width: 0;
}
.waste-total-label {
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
/* The one number that must read from across the kitchen: JS (fitTotal)
   sizes it to fill the card width. */
.waste-total-value {
  display: block;
  margin: 2px 0 2px;
  font-size: 96px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--wh-text-fff);
  transform-origin: left center;
}
.waste-total-sub {
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 700;
}
.waste-split {
  --raw-share: 0;
  display: flex;
  gap: 2px;
  height: 12px;
  margin: 14px 0 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--wh-surface-262a33);
}
.waste-split i {
  display: block;
  height: 100%;
  flex: 0 1 0;
  transition: flex-grow 0.4s ease;
}
.waste-split i[hidden] {
  display: none;
}
.waste-split .is-cooked {
  background: var(--cooked);
}
.waste-split .is-raw {
  background: var(--raw-chart);
}
.waste-split .is-donation {
  background: var(--donation);
}
.waste-split.is-empty i {
  display: none;
}
.waste-split-legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
}
.waste-split-legend b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.waste-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: 0;
}
.waste-swatch.is-raw {
  background: var(--raw-chart);
}
.waste-swatch.is-cooked {
  background: var(--cooked);
}
.waste-swatch.is-donation {
  background: var(--donation);
}

/* Today's waste split by daypart */
.waste-dp-card {
  flex: 0 0 auto;
  padding: 12px 14px 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.waste-dp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.waste-dp-head span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.waste-dp-bar {
  display: flex;
  gap: 2px;
  height: 16px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--wh-surface-262a33);
}
.waste-dp-bar i {
  display: block;
  height: 100%;
  flex: 0 0 0;
  min-width: 0;
  margin-right: -2px;
  transition:
    flex-grow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    min-width 0.3s ease,
    margin 0.3s ease;
}
.waste-dp-bar i.has-value {
  flex-shrink: 1;
  min-width: 3px;
  margin-right: 0;
}
/* Every label is one-fifth wide (or 1/n for more dayparts); fewer labels sit centered. */
.waste-dp-list {
  --per: var(--n, 5);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px 6px;
  margin-top: 10px;
}
.waste-dp-list > .waste-dp-item {
  flex: 0 0 calc((100% - (var(--per) - 1) * 6px) / var(--per));
}
.waste-dp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 1px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  border-top: 3px solid var(--dp-color);
  min-width: 0;
}
.waste-dp-item span {
  max-width: 100%;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waste-dp-item b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.waste-dp-item.is-now {
  background: var(--wh-surface-20232b);
  border-color: var(--wh-line-3a3f4c);
  border-top-color: var(--dp-color);
}
.waste-dp-item.is-now span {
  color: var(--ink);
}

.waste-ledger {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.waste-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.waste-ledger-head span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.waste-ledger-head small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.waste-ledger-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.waste-ledger-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.waste-ledger-remove {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  background: #b4303b;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 10px;
  opacity: 0;
}
.waste-ledger-item.is-swiping .waste-ledger-remove {
  opacity: 1;
}
.waste-ledger-row {
  position: relative;
  touch-action: pan-y;
  width: 100%;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.waste-ledger-row:active {
  background: var(--wh-surface-22252d);
}
.waste-ledger-row.is-pending {
  opacity: 0.62;
}
.waste-ledger-dot {
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: var(--item-color);
}
.waste-ledger-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.waste-ledger-main strong {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waste-ledger-qty {
  color: var(--ink-2);
  font-weight: 700;
}
.waste-ledger-main small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.waste-ledger-amount {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.waste-ledger-empty {
  padding: 18px 12px;
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
}
.waste-ledger-main strong .waste-chip,
.waste-undo-line strong .waste-chip {
  margin-right: 7px;
  vertical-align: 2px;
  min-width: 52px;
  text-align: center;
  box-sizing: border-box;
}
.waste-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.waste-chip.is-cooked {
  background: rgba(230, 232, 236, 0.16);
  color: var(--wh-text-f5f6f8);
  box-shadow: inset 0 0 0 1px rgba(230, 232, 236, 0.35);
}
.waste-chip.is-raw {
  background: var(--raw);
  color: #1b1500;
}
.waste-chip.is-donation {
  background: var(--donation);
  color: var(--wh-text-fff);
}
.waste-sync {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--wh-surface-2a1d10);
  color: var(--wh-text-ffb766);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- hold overlay, floats, toast ---------- */
.waste-hold {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  translate: -50% -50%;
  min-width: 300px;
  padding: 22px 32px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 26px;
  background: rgba(16, 18, 22, 0.96);
  border: 3px solid var(--item-color, #fff);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.waste-hold.is-raw {
  box-shadow:
    0 0 0 5px var(--raw),
    0 24px 70px rgba(0, 0, 0, 0.7);
}
.waste-hold-qty {
  font-size: 88px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.waste-hold strong {
  font-size: 22px;
  font-weight: 800;
}
.waste-hold em {
  font-style: normal;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.waste-hold small {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.waste-float {
  position: absolute;
  z-index: 15;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--wh-text-fff);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  white-space: nowrap;
}
.waste-float small {
  font-size: 16px;
  font-weight: 800;
}
/* Easter egg "Hit splats" (js/easter-eggs.js): a jagged red splat with the cents in white; zero is the blue "miss". */
.waste-float.is-splat {
  gap: 2px;
}
@font-face {
  font-family: "RuneScape Bold 12";
  src: url("/assets/fonts/RuneScape-Bold-12.ttf") format("truetype");
  font-display: swap;
}
.waste-splat {
  --splat-scale: 2.5;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(24px * var(--splat-scale));
  height: calc(23px * var(--splat-scale));
}
.waste-splat img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.waste-splat b {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: center;
  font-family: "RuneScape Bold 12", monospace;
  font-size: calc(16px * var(--splat-scale));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  text-shadow: calc(var(--splat-scale) * 1px) calc(var(--splat-scale) * 1px) 0 #000;
  -webkit-font-smoothing: none;
}
.waste-toast {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  translate: -50% 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--wh-surface-22252d);
  color: var(--wh-text-fff);
  border: 1px solid var(--wh-line-343944);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.waste-toast.is-error {
  background: var(--wh-surface-3a1517);
  border-color: var(--wh-line-6b2a2e);
  color: var(--wh-text-ffc4c4);
}
.waste-load-error {
  display: grid;
  place-items: center;
  gap: 8px;
  height: 100%;
  color: var(--ink-2, var(--wh-text-b3b9c6));
  text-align: center;
}

/* ---------- sheets (undo, PIN) ---------- */
.waste-sheet-wrap {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}
.waste-sheet {
  width: min(460px, calc(100% - 32px));
  padding: 22px;
  border-radius: 22px;
  background: var(--wh-surface-171a20);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.waste-sheet h3 {
  margin: 0 0 14px;
  font-size: 22px;
}
.waste-sheet-help {
  margin: -6px 0 14px;
  color: var(--ink-2);
}
.waste-undo-line {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--wh-surface-0f1115);
}
.waste-undo-line .waste-ledger-dot {
  width: 6px;
  height: 40px;
}
.waste-undo-line strong {
  display: block;
  font-size: 18px;
}
.waste-undo-line small {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-3);
  font-size: 13px;
  margin-top: 3px;
}
.waste-undo-line b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.waste-sheet-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.waste-btn {
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--wh-line-343944);
  background: var(--wh-surface-23262e);
  color: var(--wh-text-fff);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.waste-btn.is-danger {
  background: #8e2630;
  border-color: var(--wh-line-a93a44);
}
.waste-btn.is-quiet {
  background: transparent;
}
.waste-pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 6px 0 12px;
}
.waste-pin-dots i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--wh-line-5a6170);
}
.waste-pin-dots i.is-on {
  background: #fff;
  border-color: #fff;
}
.waste-pin-error {
  margin: 0 0 10px;
  text-align: center;
  color: var(--wh-text-ff9b9b);
  font-weight: 700;
}
.waste-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.waste-keypad button {
  height: 64px;
  border-radius: 16px;
  border: 1px solid var(--wh-line-2f343e);
  background: var(--wh-surface-20232a);
  color: var(--wh-text-fff);
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}
.waste-keypad button.is-quiet {
  font-size: 15px;
  background: transparent;
}
.waste-keypad button:active {
  background: var(--wh-surface-2c3039);
}

/* ---------- settings (inside the shared settings shell) ---------- */
.waste-settings-modal {
  padding: 16px;
}
.waste-settings-modal .settings-shell {
  width: min(1060px, 100%);
}
.waste-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

/* Products & Costs: one clean row per item */
.waste-cost-table {
  border: 1px solid var(--wh-line-2d3652);
  border-radius: 14px;
  background: var(--wh-surface-141a2b);
  overflow: hidden;
  margin-bottom: 14px;
}
.waste-cost-head,
.waste-cost-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(170px, 1fr) 132px 92px 104px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}
.waste-cost-head {
  height: 40px;
  color: var(--wh-text-8696b3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--wh-surface-10152a);
}
.waste-cost-head span:nth-child(n + 3) {
  text-align: center;
}
.waste-cost-row {
  min-height: 72px;
  border-top: 1px solid var(--wh-line-222a42);
  transition: opacity 0.2s ease;
}
.waste-cost-row.is-off .waste-cost-name,
.waste-cost-row.is-off .waste-cost-price {
  opacity: 0.4;
}
.waste-cost-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--wh-text-fff);
}
.waste-cost-name i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid var(--item-color);
}
.waste-cost-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.waste-cost-price small {
  color: var(--wh-text-7f8db0);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.waste-money-input {
  position: relative;
  display: block;
  width: 150px;
}
.waste-money-input > span {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  color: var(--wh-text-91a2bb);
  font-weight: 700;
}
.waste-money-input input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--wh-line-35405f);
  border-radius: 10px;
  background: var(--wh-surface-0f1322);
  color: var(--wh-text-fff);
  padding: 0 12px 0 26px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.waste-money-input input:focus {
  outline: none;
  border-color: #4b8df0;
  box-shadow: 0 0 0 3px rgba(75, 141, 240, 0.25);
}
.waste-step {
  justify-self: center;
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--wh-surface-0f1322);
  border: 1px solid var(--wh-line-35405f);
}
.waste-step button {
  width: 38px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--wh-text-91a2bb);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.waste-step button[aria-checked="true"] {
  background: #4b8df0;
  color: #fff;
}
.waste-check {
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.waste-check input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.waste-check i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--wh-line-46516f);
  background: var(--wh-surface-0f1322);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.waste-check input:checked + i {
  background: #4b8df0;
  border-color: #4b8df0;
}
.waste-check input:checked + i::after {
  content: "";
  display: block;
  width: 7px;
  height: 13px;
  margin: 3px auto 0;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.waste-check input:focus-visible + i {
  box-shadow: 0 0 0 3px rgba(75, 141, 240, 0.35);
}
.waste-price-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--wh-line-2d3652);
  background: var(--wh-surface-171c2e);
}
.waste-price-check.is-due {
  border-color: var(--wh-line-6b5313);
  background: var(--wh-surface-2a2208);
}
.waste-price-check.is-done {
  border-color: var(--wh-line-2f6b3f);
  background: var(--wh-surface-10261a);
}
.waste-price-check strong {
  display: block;
  margin-bottom: 3px;
}
.waste-price-check span {
  color: var(--wh-text-b9c4d8);
  font-size: 14px;
}
.waste-price-check button {
  flex: 0 0 auto;
}
.waste-window-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.waste-window-row strong {
  align-self: center;
  padding-top: 18px;
}
.waste-daypart-list {
  display: grid;
  gap: 8px;
}
.waste-daypart-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 150px 44px;
  gap: 10px;
  align-items: center;
}
.waste-daypart-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.waste-daypart-row input {
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--wh-line-35405f);
  border-radius: 8px;
  background: var(--wh-surface-0f1322);
  color: var(--wh-text-fff);
  padding: 8px 10px;
  font: inherit;
  font-size: 15px;
  min-width: 0;
}
.waste-daypart-fixed {
  color: var(--wh-text-91a2bb);
  font-size: 14px;
  font-weight: 700;
}
.waste-radio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
}
.waste-radio input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #4b8df0;
}
.waste-radio strong {
  display: block;
}
.waste-radio small {
  color: var(--wh-text-91a2bb);
}

/* ---------- reports ---------- */
.waste-reports {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--wh-surface-0d0f12);
  user-select: text;
  -webkit-user-select: text;
}
.waste-reports-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--wh-line-1d2027);
  background: var(--wh-surface-111317);
}
.waste-reports-top h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.waste-reports-top [data-reports-export] {
  justify-self: end;
}
.waste-reports-top [data-reports-close] {
  justify-self: start;
}
.waste-filters {
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--wh-line-1d2027);
  display: grid;
  gap: 10px;
}
.waste-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.waste-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.waste-date-range input {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--wh-line-2f343e);
  background: var(--wh-surface-16181d);
  color: var(--wh-text-fff);
  padding: 0 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.waste-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}
.waste-range-label {
  color: var(--ink-2);
  font-weight: 700;
  font-size: 15px;
}
.waste-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--wh-surface-16181d);
  border: 1px solid var(--wh-line-2f343e);
}
.waste-seg button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.waste-seg button[aria-checked="true"] {
  background: var(--wh-surface-2a2e38);
  color: var(--wh-text-fff);
}
.waste-seg button.is-cooked[aria-checked="true"] {
  background: var(--cooked);
  color: #15171c;
}
.waste-seg button.is-raw[aria-checked="true"] {
  background: var(--raw);
  color: #1b1500;
}
.waste-seg button.is-donation[aria-checked="true"] {
  background: var(--donation);
  color: var(--wh-text-fff);
}
.waste-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.waste-fchip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.waste-fchip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--item-color);
}
.waste-reports-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 28px;
  transition: opacity 0.15s ease;
}
.waste-reports-body.is-loading {
  opacity: 0.55;
}
.waste-reports-loading,
.waste-reports-empty {
  padding: 40px;
  text-align: center;
  color: var(--ink-2);
}
.waste-reports-empty h3 {
  margin: 0 0 6px;
  color: var(--ink);
}
/* Cards stay a quarter-width each and line up from the left, whether 1, 2 or 3 show. */
.waste-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.waste-kpi.is-split {
  gap: 6px;
}
.waste-kpi-pair {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 0;
}
.waste-kpi-pair .waste-swatch {
  align-self: center;
}
.waste-kpi-pair em {
  font-style: normal;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.waste-kpi-pair strong {
  font-size: 24px !important;
  justify-self: end;
}
.waste-kpi-pair .waste-delta {
  grid-column: 1 / -1;
}
.waste-kpi .waste-delta,
.waste-delta {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.waste-delta b {
  font-weight: 800;
}
.waste-delta.is-better b {
  color: var(--wh-text-3ddc84);
}
.waste-delta.is-worse b {
  color: var(--wh-text-ff6b6b);
}

/* Styled dropdown (replaces native selects) */
.waste-dd,
.waste-settings-modal .waste-dd {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 150px;
  height: 42px;
  padding: 0 12px 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--wh-line-343a48);
  border-radius: 11px;
  background: var(--wh-surface-16181d);
  color: var(--wh-text-fff);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.waste-settings-modal .waste-dd {
  width: 100%;
  background: var(--wh-surface-0f1322);
  border-color: var(--wh-line-35405f);
}
.waste-dd svg {
  flex: 0 0 auto;
  width: 12px;
  height: 8px;
  fill: none;
  stroke: var(--wh-text-91a2bb);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.waste-dd[aria-expanded="true"] {
  border-color: #5b8cff;
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.22);
}
.waste-dd[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.waste-dd-menu {
  position: fixed;
  z-index: 10600000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border-radius: 14px;
  background: var(--wh-surface-1b1e25);
  border: 1px solid var(--wh-line-343a48);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}
.waste-dd-menu button {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--wh-text-e3e7ef);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.waste-dd-menu button:active,
.waste-dd-menu button:hover {
  background: var(--wh-surface-262a33);
}
.waste-dd-menu button[aria-selected="true"] {
  background: var(--wh-surface-2b3550);
  color: var(--wh-text-fff);
}
.waste-dd-menu button[aria-selected="true"]::after {
  content: "✓";
  float: right;
  color: var(--wh-text-8fb2ff);
}

/* One full-width report with a slider to pick which */
.waste-report-main {
  margin-top: 14px;
  padding: 14px 16px 18px;
}
.waste-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 4px;
  border-radius: 14px;
  background: var(--wh-surface-0f1115);
  border: 1px solid var(--line);
}
.waste-tabs-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(100% * var(--i)));
  border-radius: 10px;
  background: var(--wh-surface-2a2e38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.waste-tabs button {
  position: relative;
  z-index: 1;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.waste-tabs button[aria-selected="true"] {
  color: var(--wh-text-fff);
}
.waste-report-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 14px 0 12px;
}
.waste-report-bar .waste-legend {
  margin: 0;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.waste-colorby {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.waste-colorby-note {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.waste-chart {
  position: relative;
}
.waste-report-main .waste-cols {
  height: 300px;
}
.waste-report-main .waste-hbar {
  height: 24px;
}
.waste-report-main .waste-hrows {
  gap: 12px;
}
.waste-report-main .waste-hrow {
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 90px 48px;
  font-size: 15px;
}
.waste-report-main .waste-chart .waste-cols + .waste-axis-max {
  top: 0;
  right: 0;
}
.waste-chart:has(.waste-cols) {
  padding: 20px 0 22px;
}
.waste-kpi {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.waste-kpi span {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.waste-kpi strong {
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.waste-kpi strong em {
  font-style: normal;
  font-size: 16px;
  color: var(--ink-2);
}
.waste-kpi.is-hero strong {
  font-size: 38px;
}
.waste-kpi small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.waste-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 2px 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.waste-legend small {
  margin-left: auto;
  color: var(--ink-3);
  font-weight: 600;
}
.waste-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.waste-panel {
  position: relative;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.waste-panel.is-wide {
  grid-column: 1 / -1;
}
.waste-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.waste-panel h3 small {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 12px;
}
.waste-hrows {
  display: grid;
  gap: 9px;
}
.waste-hrow {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 80px 72px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.waste-hrow-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waste-hrow-label i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.waste-hrow b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.waste-hrow small {
  color: var(--ink-3);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.waste-hbar {
  display: flex;
  gap: 2px;
  height: 18px;
  cursor: pointer;
  padding: 4px 0;
  box-sizing: content-box;
}
.waste-hbar i {
  display: block;
  height: 100%;
  min-width: 2px;
}
.waste-hbar i:first-child {
  border-radius: 4px 0 0 4px;
}
.waste-hbar i:last-child {
  border-radius: 0 4px 4px 0;
}
.waste-hbar i:only-child {
  border-radius: 4px;
}
.waste-hbar .is-raw,
.waste-col-stack .is-raw {
  background: var(--raw-chart);
}
.waste-hbar .is-cooked,
.waste-col-stack .is-cooked {
  background: var(--cooked);
}
.waste-cols {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 3px;
  height: 180px;
  align-items: end;
  border-bottom: 1px solid var(--wh-line-2f343e);
}
.waste-col {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 0;
  cursor: pointer;
}
.waste-col-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
}
.waste-col-stack i {
  display: block;
  width: 100%;
  min-height: 0;
}
.waste-col-stack i:first-child {
  border-radius: 4px 4px 0 0;
}
.waste-col small {
  position: relative;
  top: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.waste-col:hover .waste-col-stack,
.waste-hbar:hover {
  filter: brightness(1.15);
}
.waste-axis-max {
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}
.waste-panel .waste-cols + .waste-axis-max {
  top: 16px;
}
.waste-panel:has(.waste-cols) {
  padding-bottom: 30px;
}
.waste-table-wrap {
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.waste-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.waste-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 8px;
}
.waste-table td {
  padding: 7px 8px;
  border-top: 1px solid var(--wh-line-22252d);
  color: var(--ink);
  white-space: nowrap;
}
.waste-table td small {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
}
.waste-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.waste-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
}
.waste-tip {
  position: absolute;
  z-index: 35;
  min-width: 170px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wh-surface-22252d);
  border: 1px solid var(--wh-line-3a3f4a);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 3px;
  font-size: 13px;
  color: var(--ink-2);
  pointer-events: none;
}
.waste-tip strong {
  color: var(--ink);
  font-size: 14px;
}
.waste-tip span:last-child {
  color: var(--ink);
  font-weight: 800;
}

/* ---------- narrow screens (a manager's phone) ---------- */
/* ---------- Shared Table ---------- */
.waste-left {
  grid-template-rows: minmax(0, 1fr) auto !important;
}
.waste-main-view {
  display: grid;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.waste-main-view[hidden],
.waste-donate-view[hidden],
.waste-pill[hidden] {
  display: none !important;
}
.waste-donate-view {
  min-height: 0;
  min-width: 0;
  display: flex;
}
.waste-pill {
  justify-self: center;
  width: 66%;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #23b5a7, #178e83);
  color: #fff;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow:
    0 8px 22px rgba(31, 167, 154, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.12s ease,
    opacity 0.2s ease;
}
.waste-pill:active {
  transform: scale(0.97);
}
.waste-pill:disabled {
  opacity: 0.35;
  box-shadow: none;
  cursor: default;
}
.waste-donate {
  flex: 1;
  display: grid;
  gap: 14px;
  min-height: 0;
}
.waste-donate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waste-donate-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #5fd6c9;
}
.waste-donate-head p {
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
}
.waste-donate-head .waste-icon-btn {
  font-size: 26px;
}
.waste-donate-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.waste-donate-items button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--wh-line-2f343e);
  background: var(--wh-surface-16181d);
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.waste-donate-items button i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--item-color);
}
.waste-donate-items button[aria-checked="true"] {
  border-color: var(--item-color);
  color: var(--wh-text-fff);
  background: color-mix(in srgb, var(--item-color) 22%, var(--wh-surface-16181d));
}
.waste-donate-none {
  color: var(--ink-3);
}
.waste-weight {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}
.waste-weight-part {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.waste-weight-part b {
  font-size: 52px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--donation-ink);
  line-height: 1;
}
.waste-weight-part em {
  font-style: normal;
  font-size: 20px;
  font-weight: 800;
  color: var(--donation-ink);
  display: inline-block;
  transform: skewX(-3deg);
  text-shadow: 0 0 0.3em currentColor;
}
/* Weights ("3 lb 4 oz") always read in the Donated teal. */
.waste-weight-text {
  color: var(--donation-ink, #4fd1c2);
  font-weight: 800;
}
.waste-weight-buf {
  flex-basis: 100%;
  text-align: center;
  color: #5fd6c9;
  font-size: 22px;
  font-weight: 800;
  min-height: 28px;
}
.waste-weight-buf.is-idle {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
}
.waste-weight-buf small {
  margin-left: 10px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}
@keyframes waste-caret {
  50% {
    opacity: 0;
  }
}
.waste-numpad {
  justify-self: center;
  width: min(460px, 100%);
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(48px, 1fr));
  grid-template-areas: "a b c lb" "d e f lb" "g h i oz" "j k l oz";
  gap: 10px;
}
.waste-numpad button {
  border: 1px solid var(--wh-line-2f343e);
  border-radius: 16px;
  background: var(--wh-surface-1b1e25);
  color: var(--wh-text-fff);
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}
.waste-numpad button:active {
  background: var(--wh-surface-2a2e38);
  transform: scale(0.97);
}
.waste-numpad .is-quiet {
  font-size: 16px;
  color: var(--ink-2);
  background: var(--wh-surface-14161b);
}
.waste-numpad .is-lb {
  grid-area: lb;
}
.waste-numpad .is-oz {
  grid-area: oz;
}
.waste-numpad .is-unit {
  background: var(--wh-surface-12302d);
  border-color: #1f6f67;
  color: #7fe3d8;
  font-size: 24px;
}
.waste-sheet-wrap.is-confirm .waste-sheet {
  width: min(480px, calc(100% - 32px));
  text-align: center;
}
.waste-donate-confirm {
  font-size: 26px !important;
  line-height: 1.3;
}
.waste-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}
.waste-confirm-actions .waste-pill {
  width: 100%;
}

/* After a donation: label + freezer reminder */
.waste-reminder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.waste-reminder h3 {
  margin: 0 !important;
  font-size: 24px;
}
.waste-reminder-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--donation);
  color: var(--wh-text-fff);
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(31, 167, 154, 0.4);
}
.waste-reminder-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.waste-reminder-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--wh-surface-0f1115);
  border: 1px solid var(--line);
}
.waste-reminder-steps li > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wh-surface-12302d);
  color: var(--donation-ink);
  font-weight: 900;
}
.waste-reminder-steps strong {
  display: block;
  font-size: 17px;
}
.waste-reminder-steps small {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.waste-reminder .waste-pill {
  width: 70%;
  margin-top: 4px;
}

/* Shared Table launcher: same ring treatment as the product circles, in Donated teal */
.waste-pill.waste-ring-pill {
  height: 62px;
  box-sizing: border-box;
  border: 6px solid var(--donation);
  background: radial-gradient(ellipse at 50% 30%, var(--wh-surface-1b1e24), var(--wh-surface-0f1115) 75%);
  color: var(--donation-ink);
  font-size: 19px;
  letter-spacing: 0.3px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(31, 167, 154, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.waste-pill.waste-ring-pill:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--donation) 18%, var(--wh-surface-0f1115));
}

/* ---------- Phone (portrait) ----------
   The iPad layout above is untouched. On a phone everything becomes one
   scrolling column: total, Cooked/Raw, buttons, Shared Table, dayparts, log. */
@media (max-width: 760px) {
  .waste-app {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .waste-topbar {
    position: sticky;
    top: 0;
    gap: 8px;
    padding: 8px 10px;
  }
  .waste-title h1 {
    font-size: 20px;
  }
  .waste-title span {
    display: none;
  }
  .waste-icon-btn {
    border-radius: 12px;
  }
  .waste-tools-btn > span:last-child,
  .waste-text-btn span:last-child {
    display: none;
  }
  .waste-notice {
    margin: 10px 12px 0;
    font-size: 13px;
  }
  .waste-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 4px;
  }
  .waste-right {
    display: contents;
  }
  .waste-total-card {
    order: 0;
    padding: 12px 16px 12px;
    border-radius: 18px;
  }
  .waste-total-label {
    font-size: 13px;
    letter-spacing: 1.2px;
  }
  .waste-split-legend {
    font-size: 13px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 14px;
  }
  .waste-left {
    order: 1;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  .waste-main-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .waste-tagline {
    font-size: 16px;
  }
  .waste-state-toggle {
    width: 100%;
    height: 54px;
  }
  .waste-state-toggle button {
    font-size: 17px;
  }
  .waste-grid {
    align-content: start;
  }
  .waste-hint span {
    font-size: 13px;
  }
  .waste-left > .waste-pill {
    width: 100%;
    height: 58px;
    font-size: 17px;
  }
  .waste-dp-card {
    order: 2;
  }
  .waste-ledger {
    order: 3;
    flex: none;
    overflow: visible;
  }
  .waste-ledger-list {
    overflow: visible;
    max-height: none;
  }

  /* Shared Table: its own full-screen panel instead of sharing the column */
  .waste-app:has(.waste-donate-view:not([hidden])) :is(.waste-total-card, .waste-dp-card, .waste-ledger) {
    display: none;
  }
  .waste-donate {
    gap: 12px;
    grid-template-rows: auto auto auto minmax(250px, 1fr) auto;
    width: 100%;
  }
  .waste-donate-head h2 {
    font-size: 22px;
  }
  .waste-donate-items button {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }
  .waste-weight-part b {
    font-size: 44px;
  }
  .waste-numpad {
    gap: 8px;
  }
  .waste-numpad button {
    font-size: 24px;
    border-radius: 14px;
  }
  .waste-donate .waste-pill {
    width: 100%;
  }
  .waste-donate-confirm {
    font-size: 22px !important;
  }
  .waste-reminder .waste-pill {
    width: 100%;
  }

  /* Reports */
  .waste-reports-top {
    padding: 8px 10px;
    gap: 8px;
  }
  .waste-reports-top h2 {
    font-size: 19px;
  }
  .waste-reports-body {
    padding: 12px 12px 28px;
  }
  .waste-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .waste-kpi.is-split {
    grid-column: 1 / -1;
  }
  .waste-report-main {
    padding: 12px 10px 14px;
  }
  .waste-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .waste-tabs::-webkit-scrollbar {
    display: none;
  }
  .waste-tabs-thumb {
    display: none;
  }
  .waste-tabs button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
  }
  .waste-tabs button[aria-selected="true"] {
    background: var(--wh-surface-2a2e38);
  }
  .waste-report-main .waste-cols {
    height: 220px;
  }
  .waste-hrow,
  .waste-report-main .waste-hrow {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "label val pct" "bar bar bar";
    gap: 4px 10px;
    font-size: 14px;
  }
  .waste-hrow-label {
    grid-area: label;
  }
  .waste-hrow > b {
    grid-area: val;
  }
  .waste-hrow > small {
    grid-area: pct;
  }
  .waste-hrow > .waste-hbar,
  .waste-report-main .waste-hbar {
    grid-area: bar;
    height: 16px;
  }

  /* Settings: product cards instead of a 5-column table */
  .waste-price-check {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .waste-price-check button {
    width: 100%;
  }
  .waste-cost-head {
    display: none;
  }
  .waste-cost-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name name name" "price price price" "step bk ld";
    gap: 10px 8px;
    padding: 14px 14px;
    align-items: center;
  }
  .waste-cost-name {
    grid-area: name;
  }
  .waste-cost-price {
    grid-area: price;
  }
  .waste-step {
    grid-area: step;
    justify-self: start;
  }
  .waste-step::before {
    content: "Hold adds";
    align-self: center;
    padding: 0 8px 0 6px;
    color: var(--wh-text-7f8db0);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .waste-cost-row .waste-check {
    width: auto;
    height: auto;
    grid-template-rows: auto auto;
    gap: 4px;
    padding: 0 2px;
  }
  .waste-cost-row .waste-check:nth-of-type(1) {
    grid-area: bk;
  }
  .waste-cost-row .waste-check:nth-of-type(2) {
    grid-area: ld;
  }
  .waste-cost-row .waste-check::after {
    color: var(--wh-text-7f8db0);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .waste-cost-row .waste-check:nth-of-type(1)::after {
    content: "Bkfst";
  }
  .waste-cost-row .waste-check:nth-of-type(2)::after {
    content: "Lunch/Din";
  }
  .waste-window-row {
    grid-template-columns: 1fr 1fr;
  }
  .waste-window-row strong {
    grid-column: 1 / -1;
    padding: 0;
  }
}

/* ---------- pages under the shared top bar ---------- */
.waste-page {
  position: relative;
  inset: auto;
  z-index: 20;
  grid-column: 1 / -1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--wh-surface-0d0f12);
}
.waste-reports.waste-page {
  grid-template-rows: auto minmax(0, 1fr);
}
.waste-page-eom {
  display: flex;
  flex-direction: column;
}
.waste-top-actions .waste-icon-btn.is-dashboard {
  border-color: var(--wh-line-3a4152);
  background: var(--wh-surface-1a1d24);
}
.waste-filter-row .waste-export {
  margin-left: auto;
  height: 40px;
}
.waste-chip.is-wasted {
  background: rgba(230, 232, 236, 0.16);
  color: var(--wh-text-f5f6f8);
  box-shadow: inset 0 0 0 1px rgba(230, 232, 236, 0.35);
}
.waste-ledger-amount.is-none {
  color: var(--ink-3);
}
.waste-ledger-row.is-prep .waste-ledger-main small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waste-amount-text {
  color: #c8e59a;
  font-weight: 800;
}
.waste-ok-text {
  color: var(--wh-text-4fd17b);
}
.waste-pill.is-ok {
  background: linear-gradient(180deg, #34b866, #23914d);
  box-shadow:
    0 8px 22px rgba(52, 184, 102, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Prep Waste: chooser */
.waste-prep-choose {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 18px;
  overflow-y: auto;
}
.waste-prep-title {
  text-align: center;
}
.waste-prep-title h2,
.waste-eom-title h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}
.waste-prep-title p,
.waste-eom-title p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}
.waste-prep-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 22px;
  width: 100%;
  justify-content: center;
}
.waste-prep-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  padding: 26px;
  border-radius: 36px;
  border: 10px solid var(--c);
  color: color-mix(in srgb, var(--c) 75%, var(--wh-text-fff));
  background: radial-gradient(circle at 50% 35%, var(--wh-surface-1b1e24), var(--wh-surface-0f1115) 70%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 26px color-mix(in srgb, var(--c) 25%, transparent);
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.waste-prep-card:active {
  transform: scale(0.96);
}
.waste-prep-card strong {
  font-size: 28px;
  font-weight: 900;
}
.waste-prep-card small {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  max-width: 220px;
}
.waste-prep-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* Prep Waste: form */

/* record list used in confirm/reminder sheets and EOM cards */
.waste-record-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  text-align: left;
}
.waste-record-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--wh-surface-0f1115);
  border: 1px solid var(--line);
  font-weight: 700;
}
.waste-record-list li i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--item-color);
}
.waste-record-list li b {
  font-variant-numeric: tabular-nums;
}
.waste-prep-confirm {
  font-size: 24px !important;
}
.waste-record {
  width: 100%;
  text-align: left;
}
.waste-record header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-weight: 800;
}
.waste-record header small {
  margin-left: auto;
  color: var(--ink-3);
  font-weight: 600;
}
.waste-record .waste-record-list {
  margin: 0;
}

/* End of Month */
.waste-eom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 28px;
  align-content: start;
  gap: 14px;
}
.waste-eom-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.waste-eom-title {
  margin-right: auto;
}
.waste-eom-count {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}
.waste-eom-count.is-open {
  background: rgba(232, 72, 72, 0.14);
  color: var(--wh-text-ff8b8b);
  box-shadow: inset 0 0 0 1px rgba(232, 72, 72, 0.45);
}
.waste-eom-count.is-done {
  background: rgba(52, 184, 102, 0.14);
  color: var(--wh-text-6fe09a);
  box-shadow: inset 0 0 0 1px rgba(52, 184, 102, 0.45);
}
.waste-eom-piles {
  display: grid;
  gap: 12px;
}
.waste-eom-pile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pile);
  min-width: 0;
}
.waste-eom-pile.is-wasted {
  --pile: #e6e8ec;
}
.waste-eom-pile.is-donated {
  --pile: var(--donation);
}
.waste-eom-pile.is-prep {
  --pile: #7aa2ff;
}
.waste-eom-pile.is-ingredient {
  --pile: #a3d16a;
}
.waste-eom-pile header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}
.waste-eom-pile header strong {
  font-size: 16px;
  font-weight: 800;
}
.waste-eom-pile header small {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.waste-eom-pile .waste-record-list {
  margin: 0;
  overflow-y: auto;
}
.waste-eom-pile .waste-record-list li {
  padding: 6px 10px;
  font-size: 14px;
}
.waste-eom-empty {
  margin: 0;
  flex: 1;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
}
.waste-eom-pile footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.waste-eom-pile footer small {
  color: var(--wh-text-ff8b8b);
  font-size: 13px;
  font-weight: 700;
}
.waste-eom-pile.is-clear footer small {
  color: var(--ink-3);
}
.waste-eom-pile footer b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.waste-eom-log-btn {
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #34b866, #23914d);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(52, 184, 102, 0.25);
}
.waste-eom-log-btn:disabled {
  background: var(--wh-surface-14261b);
  color: var(--wh-text-6fe09a);
  box-shadow: none;
  cursor: default;
}
.waste-eom-log {
  padding: 6px 0 0;
  overflow: hidden;
}
.waste-eom-row {
  display: grid;
  grid-template-columns: 120px 170px minmax(0, 1fr) 90px 128px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--wh-line-1f232b);
}
.waste-eom-row.is-head {
  border-top: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.waste-eom-row.is-head span:nth-child(4),
.waste-eom-value {
  text-align: right;
}
.waste-eom-row.is-head span:last-child {
  text-align: center;
}
.waste-eom-date {
  font-weight: 800;
  font-size: 14px;
}
.waste-eom-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.waste-eom-type small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.waste-eom-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.waste-eom-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.waste-eom-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--item-color);
}
.waste-eom-item b {
  color: var(--ink);
}
.waste-eom-item b.waste-weight-text {
  color: var(--donation-ink);
}
.waste-eom-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.waste-eom-status {
  justify-self: center;
  min-width: 112px;
  padding: 0 10px;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
}
.waste-eom-status.is-open {
  border: 1px solid rgba(232, 72, 72, 0.6);
  background: rgba(232, 72, 72, 0.14);
  color: var(--wh-text-ff8b8b);
}
.waste-eom-status.is-logged {
  border: 1px solid rgba(52, 184, 102, 0.6);
  background: rgba(52, 184, 102, 0.16);
  color: var(--wh-text-6fe09a);
}
.waste-eom-row.is-logged .waste-eom-items,
.waste-eom-row.is-logged .waste-eom-date,
.waste-eom-row.is-logged .waste-eom-value {
  opacity: 0.6;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .waste-eom-piles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .waste-top-actions .waste-text-btn span:last-child {
    display: none;
  }
}

@media (max-width: 760px) {
  .waste-app.has-page > .waste-body,
  .waste-app.has-page > .waste-notice {
    display: none;
  }
  .waste-page {
    display: block;
    overflow: visible;
  }
  .waste-reports.waste-page {
    display: block;
  }
  .waste-reports.waste-page .waste-reports-body {
    overflow: visible;
  }
  .waste-filter-row .waste-export {
    margin-left: 0;
  }
  .waste-top-actions {
    gap: 6px;
  }
  .waste-topbar .waste-title h1 {
    font-size: 17px;
  }
  .waste-icon-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
  }

  .waste-prep-choose {
    padding: 18px 14px;
    justify-content: flex-start;
  }
  .waste-prep-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .waste-prep-card {
    aspect-ratio: auto;
    min-height: 150px;
    border-width: 8px;
    border-radius: 28px;
  }
  .waste-prep-card strong {
    font-size: 24px;
  }
  /* Number pad stays pinned to the bottom while the list scrolls above it. */

  .waste-eom {
    padding: 12px 12px 24px;
    overflow: visible;
  }
  .waste-eom-title h2 {
    font-size: 22px;
  }
  .waste-eom-row.is-head {
    display: none;
  }
  .waste-eom-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date status" "type value" "items items";
    gap: 6px 10px;
    padding: 12px 12px;
  }
  .waste-eom-date {
    grid-area: date;
  }
  .waste-eom-type {
    grid-area: type;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .waste-eom-items {
    grid-area: items;
  }
  .waste-eom-value {
    grid-area: value;
  }
  .waste-eom-status {
    grid-area: status;
    justify-self: end;
    min-width: 100px;
  }
}
/* Keep every row in the one column so a page panel overlays the dashboard
   instead of pushing it into a new column. */
.waste-app > .waste-topbar,
.waste-app > .waste-notice,
.waste-app > .waste-body {
  grid-column: 1;
}
.waste-app {
  grid-template-columns: minmax(0, 1fr);
}
/* Pages sit only in the main row (the notice hides), so they keep a fixed
   height and scroll inside instead of stretching the layout. */
.waste-page {
  grid-row: 3;
}
.waste-app.has-page > .waste-notice {
  display: none;
}
.waste-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.waste-top-actions .waste-text-btn span:last-child {
  white-space: nowrap;
}
.waste-eom {
  display: flex;
  flex-direction: column;
}
.waste-eom > * {
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .waste-topbar {
    z-index: 30;
  }
}

/* ---------- Oct 15 round 2 ---------- */
/* Hint sits under Cooked/Raw, above the circles. */
.waste-main-view {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.waste-main-view .waste-hint {
  margin-top: -4px;
}

/* Two ring buttons under the circles, each 2/5 of the width, centered. */
.waste-actions {
  display: flex;
  justify-content: center;
  gap: 4%;
}
.waste-actions .waste-pill {
  width: 40%;
  padding: 0 12px;
  font-size: 17px;
  line-height: 1.15;
}
.waste-pill.waste-ring-pill.is-lime {
  border-color: #8fd63f;
  color: #c3f08a;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(143, 214, 63, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.waste-pill.waste-ring-pill.is-lime:active {
  background: color-mix(in srgb, #8fd63f 16%, var(--wh-surface-0f1115));
}

/* Page slider in the top bar: Dashboard / Reports / End of Month */
.waste-top-actions {
  align-items: center;
}
.waste-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 430px;
  height: 50px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--wh-surface-16181d);
  border: 1px solid var(--line);
}
.waste-nav-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  transform: translateX(calc(100% * var(--i, 0)));
  border-radius: 999px;
  background: var(--wh-surface-2c313c);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.3s cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.2s ease;
}
.waste-nav[data-none] .waste-nav-thumb {
  opacity: 0;
}
.waste-nav button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.waste-nav button[aria-selected="true"] {
  color: var(--wh-text-fff);
}
.waste-nav .is-short {
  display: none;
}

/* Shared Table: chicken types in a column left of the number pad; centered X */
.waste-close-btn {
  padding: 0;
  width: 48px;
}
.waste-close-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}
.waste-donate {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}
.waste-donate-body {
  min-height: 0;
  display: grid;
  justify-content: center;
  gap: 14px;
}
.waste-donate-body .waste-donate-items {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  min-height: 0;
  padding: 2px;
}
.waste-donate-body .waste-donate-items button {
  flex: 0 0 auto;
  height: 50px;
  justify-content: flex-start;
  border-radius: 14px;
}
.waste-donate-body .waste-numpad {
  width: 100%;
}

/* Prep forms: number pad on the left, items on the right */

@media (max-width: 1100px) and (min-width: 761px) {
  .waste-nav {
    width: 360px;
  }
  .waste-nav button {
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  .waste-topbar {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .waste-topbar .waste-title {
    display: none;
  }
  .waste-top-actions {
    min-width: 0;
  }
  .waste-nav {
    width: auto;
    flex: 1;
    height: 44px;
  }
  .waste-nav .is-long {
    display: none;
  }
  .waste-nav .is-short {
    display: inline;
  }
  .waste-actions {
    gap: 3%;
  }
  .waste-actions .waste-pill {
    width: 48.5%;
    height: auto;
    min-height: 60px;
    padding: 8px 10px;
    font-size: 15px;
    border-width: 5px;
  }

  .waste-donate-body {
    gap: 8px;
  }
  .waste-donate-body .waste-donate-items {
    overflow: visible;
  }
  .waste-donate-body .waste-donate-items button {
    height: 44px;
    padding: 0 10px;
    font-size: 13px;
    gap: 6px;
  }
}
/* Number pad on the left everywhere: Shared Table matches the prep forms. */
.waste-donate-body {
  grid-template-columns: minmax(0, 440px) minmax(150px, 230px);
}
@media (max-width: 760px) {
  .waste-donate-body {
    grid-template-columns: minmax(0, 1fr) 118px;
  }
}
/* End of Month cards: no subtitles or line counts; done cards collapse to name + pill. */
.waste-eom-piles {
  align-items: start;
}
.waste-eom-pile footer {
  justify-content: flex-end;
}
.waste-eom-done {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  background: rgba(52, 184, 102, 0.16);
  color: var(--wh-text-6fe09a);
  box-shadow: inset 0 0 0 1px rgba(52, 184, 102, 0.5);
}
.waste-eom-pile.is-clear .waste-eom-done:not(:empty) {
  margin-top: 2px;
}
.waste-eom-done.is-empty {
  box-shadow: inset 0 0 0 1px var(--line);
}
.waste-eom-pile .waste-record-list {
  max-height: none;
  overflow: visible;
}

/* Prep forms: every item / ingredient fits on screen, no scrolling. Rows
   share the height evenly (10 items in one column, ingredients in two). */

@media (max-width: 760px) {
  /* The prep page fills the screen under the top bar instead of scrolling. */
}
/* iPad portrait: list on top using the full width, number pad underneath. */
/* Very short phones (iPhone SE size): smaller keys; the list scrolls only if it truly can't fit. */

/* ---------- Breakfast Waste ---------- */
.waste-pill.waste-ring-pill.is-sunrise:active {
  background: color-mix(in srgb, #ff9f43 16%, var(--wh-surface-0f1115));
}
/* Three buttons while the breakfast window is open. */
.waste-actions:has(> :nth-child(3)) {
  gap: 2.5%;
}
.waste-actions:has(> :nth-child(3)) .waste-pill {
  width: 31.5%;
  font-size: 15px;
  padding: 0 8px;
}
.waste-eom-piles {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (max-width: 760px) {
  .waste-actions:has(> :nth-child(3)) .waste-pill {
    width: 32%;
    padding: 6px;
    border-width: 4px;
  }
  .waste-eom-piles {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tag colors: Prep = lime (same as Record Prep Waste), Breakfast = light orange ---------- */
.waste-app {
  --prep: #8fd63f;
  --prep-ink: #c3f08a;
  --breakfast: #ffb070;
  --breakfast-ink: #ffd2a6;
}
.waste-chip.is-prep {
  background: rgba(143, 214, 63, 0.18);
  color: var(--prep-ink, #c3f08a);
  box-shadow: inset 0 0 0 1px rgba(143, 214, 63, 0.55);
}
.waste-chip.is-breakfast {
  background: rgba(255, 176, 112, 0.18);
  color: var(--breakfast-ink, var(--wh-text-ffd2a6));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 112, 0.55);
}
.waste-eom-pile.is-prep,
.waste-eom-pile.is-ingredient {
  --pile: #8fd63f;
}
.waste-eom-pile.is-breakfast {
  --pile: #ffb070;
}
.waste-pill.is-prep {
  background: linear-gradient(180deg, #a4e35a, #74b92d);
  color: #132300;
  box-shadow:
    0 8px 22px rgba(143, 214, 63, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.waste-pill.is-sunrise-fill {
  background: linear-gradient(180deg, #ffc08a, #f59a4f);
  color: #2b1300;
  box-shadow:
    0 8px 22px rgba(255, 176, 112, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.waste-pill.waste-ring-pill.is-sunrise {
  border-color: #ffb070;
  color: var(--wh-text-ffd2a6);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 176, 112, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.waste-reminder.is-prep .waste-reminder-check {
  background: #74b92d;
  color: #132300;
  box-shadow: 0 8px 22px rgba(143, 214, 63, 0.4);
}
.waste-reminder.is-prep .waste-reminder-steps li > b {
  background: var(--wh-surface-22360f);
  color: #c3f08a;
}
.waste-reminder.is-breakfast .waste-reminder-check {
  background: #f59a4f;
  color: #2b1300;
  box-shadow: 0 8px 22px rgba(255, 176, 112, 0.4);
}
.waste-reminder.is-breakfast .waste-reminder-steps li > b {
  background: var(--wh-surface-3a2614);
  color: var(--wh-text-ffd2a6);
}

/* End of Month: "Click to log", "All logged" and the LOGGED status share one look. */
.waste-eom-log-btn,
.waste-eom-done,
.waste-eom-status.is-logged {
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(52, 184, 102, 0.6);
  border-radius: 999px;
  background: rgba(52, 184, 102, 0.16);
  color: var(--wh-text-6fe09a);
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.waste-eom-status {
  height: 38px;
  font-size: 13px;
}
.waste-eom-log-btn {
  width: 100%;
  cursor: pointer;
}
.waste-eom-log-btn:active {
  background: rgba(52, 184, 102, 0.3);
  transform: scale(0.97);
}
.waste-eom-done {
  width: 100%;
  align-self: stretch;
}
.waste-eom-done.is-empty {
  border-color: var(--line);
  background: var(--wh-surface-1a1d23);
  color: var(--ink-3);
}

/* Red count on the End of Month slider button */
.waste-nav button {
  overflow: visible;
}
.waste-nav-badge {
  position: absolute;
  top: -9px;
  right: 2px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 2px #111317,
    0 4px 10px rgba(229, 72, 77, 0.45);
}
@media (max-width: 760px) {
  .waste-actions:has(> :nth-child(3)) .waste-pill {
    min-height: 76px;
    font-size: 12.5px;
    line-height: 1.15;
  }
}

/* Reports: "By type" is double wide with Cooked / Raw / Donated side by side. */
.waste-kpi.is-split {
  grid-column: span 2;
}
.waste-kpi-pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.waste-kpi-pairs .waste-kpi-pair {
  grid-template-columns: auto 1fr;
  align-content: start;
  row-gap: 2px;
}
.waste-kpi-pairs .waste-kpi-pair strong {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 28px !important;
}
.waste-kpi-pairs .waste-kpi-pair .waste-delta {
  margin-top: 0;
}
@media (max-width: 760px) {
  .waste-kpi-pairs {
    gap: 8px;
  }
  .waste-kpi-pairs .waste-kpi-pair strong {
    font-size: 19px !important;
  }
  .waste-kpi-pairs .waste-kpi-pair .waste-delta {
    font-size: 11px;
  }
}
/* A page being replaced stays underneath while the new one fades in. */
.waste-page.is-leaving {
  z-index: 19;
  pointer-events: none;
}
/* "Mark logged" in the confirm window uses the same green pill. */
.waste-confirm-actions .waste-eom-log-btn {
  height: 52px;
  font-size: 14px;
}
@media (max-width: 760px) {
  .waste-page.is-leaving {
    display: none;
  }
}

/* ---------- Measure slider (Each default) beside the number pad ---------- */
/* Press and hold a filled-in prep row to remove it. */

/* Grouped ingredient list: each group is its own block, rows stay equal height. */
@media (max-width: 760px) {
  /* Phone: groups keep their order but run together so all 21 fit. */
}

/* Submit sits centered under everything (same width as the number pad);
   the pad and list move up to make room. */

/* ======================================================================
   Prep numpad screens (Item / Ingredient / Breakfast Waste) — one layout.
   Landscape: number pad left, item groups right, Submit centered below.
   Portrait iPad + phone: number pad, then items, then Submit.
   Pills keep a fixed height (--row, 44px max) and fixed gaps everywhere;
   fitPrepRows() only shrinks rows when a screen is too short for all of them.
   ====================================================================== */
.waste-page-prep {
  display: flex;
  flex-direction: column;
}
.waste-prep-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 12px;
  box-sizing: border-box;
  --key: 64px;
}
.waste-prep-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.waste-prep-heading {
  flex: 1;
  min-width: 0;
}
.waste-prep-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: color-mix(in srgb, var(--kind) 80%, var(--wh-text-fff));
}
.waste-prep-head p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
}
.waste-prep-head .waste-icon-btn {
  flex: none;
  font-size: 22px;
}
.waste-prep-choose {
  position: relative;
}
.waste-prep-choose .waste-prep-close {
  position: absolute;
  top: 14px;
  right: 18px;
}

.waste-prep-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 12px 22px;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "side list" "submit submit";
}
.waste-prep-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.waste-prep-list {
  grid-area: list;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 1px;
  --cols: 3;
}
.waste-prep-list.is-monday {
  --cols: 2;
}
.waste-prep-submit {
  grid-area: submit;
  justify-self: center;
  width: min(380px, 100%);
  height: 50px;
}

/* number display + pad */
.waste-prep-display {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--wh-surface-111317);
  border: 1px solid var(--line);
  text-align: center;
}
.waste-prep-display b {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--wh-text-fff);
  font-variant-numeric: tabular-nums;
}
/* An empty slot ("--") keeps the tag colour but gives off half the light. */
.waste-prep-display .seg-digit.is-unset,
.waste-weight .seg-digit.is-unset {
  opacity: 0.5;
}
.waste-prep-display.is-prep b,
.waste-prep-display.is-prep .waste-prep-typing {
  color: var(--prep-ink);
}
.waste-prep-display.is-breakfast b,
.waste-prep-display.is-breakfast .waste-prep-typing {
  color: var(--breakfast-ink);
}
.waste-prep-display.is-donation b,
.waste-prep-display.is-donation .waste-prep-typing {
  color: var(--donation-ink);
}
/* The number being typed in weight mode, under the lb/oz cells; the row is always there so nothing jumps. */
.waste-prep-typing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  min-height: 28px;
  font-size: 18px;
}
/* Seven-segment readouts (CFAUtil.segDigits): lit segments use the text colour, unlit ones show as a faint ghost, like a microwave display. */
.waste-prep-display .seg-text,
.waste-weight .seg-text {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  vertical-align: middle;
}
.waste-prep-display .seg-digit,
.waste-weight .seg-digit {
  height: 1.35em;
  width: 0.75em;
  overflow: visible;
  transform: skewX(-3deg);
}
.waste-prep-display .seg-digit polygon,
.waste-weight .seg-digit polygon {
  fill: currentColor;
  opacity: 0.1;
}
.waste-prep-display .seg-digit polygon.is-on,
.waste-weight .seg-digit polygon.is-on {
  opacity: 1;
}
.waste-prep-display .seg-digit,
.waste-weight .seg-digit {
  filter: drop-shadow(0 0 0.06em currentColor);
}
.waste-prep-display .seg-dot,
.waste-weight .seg-dot {
  align-self: flex-end;
  width: 0.11em;
  height: 0.11em;
  margin: 0 0.04em 0.03em;
  background: currentColor;
}
.waste-prep-display .seg-gap,
.waste-weight .seg-gap {
  width: 0.3em;
}
.waste-prep-display .seg-ch,
.waste-weight .seg-ch {
  display: inline-block;
  font-size: 0.5em;
  font-weight: 800;
  transform: skewX(-3deg);
  text-shadow: 0 0 0.3em currentColor;
}
.waste-prep-display .seg-ch.is-sym,
.waste-weight .seg-ch.is-sym {
  font-size: 0.85em;
}
.waste-prep-display .seg-frac,
.waste-weight .seg-frac {
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
}
.waste-prep-display .seg-frac .seg-digit,
.waste-weight .seg-frac .seg-digit {
  height: 0.95em;
  width: 0.53em;
}
.waste-prep-display .seg-slash,
.waste-weight .seg-slash {
  height: 1.15em;
  width: 0.26em;
  fill: currentColor;
  transform: skewX(-3deg);
  filter: drop-shadow(0 0 0.06em currentColor);
}
.waste-prep-display small {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}
.waste-prep-pad {
  display: grid;
  gap: 8px;
  grid-template-rows: repeat(4, var(--key));
}
.waste-prep-pad.is-count {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "k1 k2 k3" "k4 k5 k6" "k7 k8 k9" "kc k0 kb";
}
.waste-prep-pad.is-measure {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.85fr) minmax(0, 1.05fr);
  grid-template-areas: "k1 k2 k3 c s" "k4 k5 k6 c s" "k7 k8 k9 c s" "kc k0 kb c s";
}
.waste-prep-pad button {
  border: 1px solid var(--wh-line-2f343e);
  border-radius: 14px;
  background: var(--wh-surface-1b1e25);
  color: var(--wh-text-fff);
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}
.waste-prep-pad button:active {
  background: var(--wh-surface-2a2e38);
  transform: scale(0.97);
}
.waste-prep-pad .is-quiet {
  font-size: 15px;
  color: var(--ink-2);
  background: var(--wh-surface-14161b);
}
.waste-prep-ctx {
  grid-area: c;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.waste-prep-ctx button {
  flex: 1;
  min-height: 0;
}
.waste-prep-ctx .is-frac {
  background: var(--wh-surface-191c26);
  border-color: var(--wh-line-343a52);
  color: var(--wh-text-c9d4ff);
  font-size: 20px;
}
.waste-prep-ctx .is-frac.is-on {
  background: #3a4a86;
  border-color: #6f87e0;
  color: #fff;
}
.waste-prep-ctx .is-unit {
  background: var(--wh-surface-12302d);
  border-color: #1f6f67;
  color: #7fe3d8;
  font-size: 22px;
}
.waste-prep-ctx.is-each {
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--wh-line-2a2e38);
  border-radius: 14px;
}
.waste-prep-ctx.is-each span {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.waste-prep-modes {
  grid-area: s;
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  padding: 4px;
  border-radius: 16px;
  background: var(--wh-surface-111317);
  border: 1px solid var(--line);
  min-height: 0;
}
.waste-prep-modes-thumb {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: calc((100% - 8px) / 4);
  transform: translateY(calc(100% * var(--i, 0)));
  border-radius: 12px;
  background: color-mix(in srgb, var(--kind) 26%, var(--wh-surface-1b1e25));
  box-shadow: inset 0 0 0 1.5px var(--kind);
  transition: transform 0.25s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.waste-prep-pad .waste-prep-modes button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  border-radius: 12px;
  color: var(--ink-3);
  font-size: 15px;
  white-space: nowrap;
}
.waste-prep-pad .waste-prep-modes button[aria-checked="true"] {
  color: var(--wh-text-fff);
}
.waste-prep-pad .waste-prep-modes button:active {
  transform: none;
  background: transparent;
}

/* item groups: each a card with a label, same spacing everywhere */
.waste-prep-group {
  flex: none;
  border-radius: 16px;
  background: var(--wh-surface-121418);
  border: 1px solid var(--wh-line-23262e);
}
.waste-prep-list.is-monday .waste-prep-group {
  width: min(100%, 600px);
}
.waste-prep-group h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.waste-prep-group h4::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--kind);
}
.waste-prep-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--row, 44px);
  gap: 6px 8px;
}

/* sleek item pill */
.waste-prep-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 9px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--wh-line-2a2e38);
  background: var(--wh-surface-181b21);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.1s ease;
}
.waste-prep-row:active {
  transform: scale(0.98);
}
.waste-prep-row i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3.5px solid var(--item-color);
}
.waste-prep-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.waste-prep-val {
  color: var(--wh-text-fff);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.waste-prep-row.has-value {
  border-color: color-mix(in srgb, var(--item-color) 60%, var(--wh-line-2a2e38));
  background: color-mix(in srgb, var(--item-color) 12%, var(--wh-surface-181b21));
}
.waste-prep-row.is-holding {
  transform: scale(0.97);
  transition:
    transform 0.5s ease,
    border-color 0.5s ease;
}
/* Measured lists show the amount under the name so long names never get cut. */
.waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 1px;
  line-height: 1.15;
}
.waste-prep-list:not(.is-monday) .waste-prep-row.has-value i {
  grid-row: 1 / span 2;
}
.waste-prep-list:not(.is-monday) .waste-prep-val {
  grid-column: 2;
  font-size: 12px;
}

/* Submit colors */
.waste-prep-submit:not(:disabled) {
  background: linear-gradient(180deg, #a4e35a, #74b92d);
  color: #132300;
  box-shadow:
    0 8px 22px rgba(143, 214, 63, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.waste-prep-form.is-breakfast .waste-prep-submit:not(:disabled) {
  background: linear-gradient(180deg, #ffc08a, #f59a4f);
  color: #2b1300;
  box-shadow:
    0 8px 22px rgba(255, 176, 112, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.waste-prep-submit:disabled {
  opacity: 1;
  background: var(--wh-surface-1a2033);
  color: #5d6a8c;
  box-shadow: none;
}

/* shorter landscape iPads */
@media (min-width: 761px) and (max-height: 800px) {
  .waste-prep-form {
    --key: 56px;
    padding-top: 10px;
  }
  .waste-prep-display b {
    font-size: 28px;
  }
}

/* Portrait iPad: number pad on top, items below, Submit at the bottom. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-prep-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "side" "list" "submit";
  }
  .waste-prep-side {
    justify-self: center;
    width: min(100%, 560px);
  }
  .waste-prep-list {
    --cols: 4;
  }
  .waste-prep-list.is-monday {
    --cols: 3;
  }
  .waste-prep-list.is-monday .waste-prep-group {
    width: auto;
  }
}

/* Phone: same order, compact. The prep page fills the screen (no page scroll). */
@media (max-width: 760px) {
  .waste-app.is-prep-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .waste-app.is-prep-page > .waste-topbar {
    flex: none;
  }
  .waste-app.is-prep-page > .waste-page-prep {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }
  .waste-prep-form {
    gap: 8px;
    padding: 10px 10px 0;
  }
  .waste-prep-head {
    gap: 10px;
  }
  .waste-prep-head p {
    display: none;
  }
  .waste-prep-head h2 {
    font-size: 20px;
  }
  .waste-prep-head .waste-icon-btn {
    height: 38px;
    min-width: 38px;
  }
  .waste-prep-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "side" "list" "submit";
    gap: 8px;
  }
  .waste-prep-side {
    gap: 6px;
  }
  .waste-prep-display {
    padding: 4px 10px;
  }
  .waste-prep-display b {
    font-size: 22px;
  }
  .waste-prep-display small {
    font-size: 11px;
  }
  .waste-prep-pad {
    gap: 6px;
  }
  .waste-prep-pad button {
    font-size: 19px;
    border-radius: 12px;
  }
  .waste-prep-pad .is-quiet {
    font-size: 13px;
  }
  .waste-prep-ctx {
    gap: 4px;
  }
  .waste-prep-ctx .is-frac {
    font-size: 15px;
  }
  .waste-prep-ctx .is-unit {
    font-size: 17px;
  }
  .waste-prep-pad .waste-prep-modes button {
    font-size: 12.5px;
  }
  .waste-prep-list {
    --cols: 3;
  }
  .waste-prep-list.is-monday {
    --cols: 2;
  }
  .waste-prep-list.is-monday .waste-prep-group {
    width: auto;
  }
  .waste-prep-group h4 {
    margin: 0 0 5px 2px;
    letter-spacing: 1px;
  }
  .waste-prep-grid {
    gap: 5px;
  }
  .waste-prep-row {
    column-gap: 6px;
    padding: 0 7px;
    font-size: 12px;
    border-radius: 10px;
  }
  .waste-prep-row i {
    width: 11px;
    height: 11px;
    border-width: 3px;
  }
  .waste-prep-val {
    font-size: 13px;
  }
  .waste-prep-submit {
    height: 46px;
    margin-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .waste-prep-form {
    --key: 34px;
  }
  .waste-prep-display small {
    display: none;
  }
  .waste-prep-submit {
    height: 42px;
  }
}

/* Shared Table: fixed-height keys so the pad never stretches tall on a portrait iPad. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-donate-body .waste-numpad {
    height: auto;
    grid-template-rows: repeat(4, 66px);
    align-self: start;
  }
  .waste-donate-body .waste-donate-items {
    align-self: start;
  }
}

/* Four columns for measured lists (fewer rows, all groups on screen);
   long names wrap to two lines instead of getting cut off. */
.waste-prep-list:not(.is-monday) {
  --cols: 4;
}
.waste-prep-list:not(.is-monday) .waste-prep-row {
  font-size: 13px;
  padding: 0 10px;
  column-gap: 8px;
}
.waste-prep-list:not(.is-monday) .waste-prep-row:not(.has-value) .waste-prep-name {
  white-space: normal;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 760px) {
  .waste-prep-group h4 {
    margin-bottom: 4px;
  }
}
/* Shared Table on a portrait iPad: Submit right under the pad, not at the bottom. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-donate {
    grid-template-rows: auto auto auto auto !important;
    align-content: start;
  }
}

/* Group label sits in the card's top border (like a tab), so groups stay
   obvious without spending a row of height. Same spacing on every screen. */
.waste-prep-list {
  gap: 14px;
  padding-top: 8px;
}
.waste-prep-group {
  position: relative;
  padding: 12px 10px 10px;
}
.waste-prep-group.is-plain {
  padding: 10px;
}
.waste-prep-group h4 {
  position: absolute;
  top: 0;
  left: 12px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 8px 0 6px;
  background: var(--wh-surface-0d0f12);
  border-radius: 6px;
  line-height: 16px;
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-prep-form {
    --key: 52px;
  }
  .waste-prep-display {
    padding: 6px 12px;
  }
  .waste-prep-display b {
    font-size: 28px;
  }
}
@media (max-width: 760px) {
  .waste-prep-form {
    --key: 40px;
  }
  .waste-prep-list {
    gap: 11px;
    padding-top: 6px;
  }
  .waste-prep-list:not(.is-monday) {
    --cols: 4;
  }
  .waste-prep-group {
    padding: 9px 5px 5px;
    border-radius: 12px;
  }
  .waste-prep-group.is-plain {
    padding: 6px;
  }
  .waste-prep-group h4 {
    left: 8px;
    font-size: 9px;
    line-height: 13px;
    padding: 0 6px 0 4px;
  }
  .waste-prep-group h4::before {
    width: 10px;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row {
    column-gap: 4px;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row i {
    width: 9px;
    height: 9px;
    border-width: 2.5px;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-val {
    font-size: 10.5px;
  }
}
/* Phone, measured lists: color shows as a stripe on the pill's left edge
   instead of a dot, leaving room for whole words. */
@media (max-width: 760px) {
  .waste-prep-list:not(.is-monday) .waste-prep-row {
    grid-template-columns: minmax(0, 1fr);
    box-shadow: inset 3px 0 0 var(--item-color);
    overflow: hidden;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row i {
    display: none;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
    grid-template-columns: minmax(0, 1fr);
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row .waste-prep-val {
    grid-column: 1;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row .waste-prep-name {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}
@media (max-width: 760px) {
  .waste-prep-list:not(.is-monday) .waste-prep-row {
    border-left: 4px solid var(--item-color);
    padding-left: 6px;
  }
}

/* ======================================================================
   Prep / Breakfast Waste inside the button zone (same spot as Shared Table)
   ====================================================================== */
.waste-donate-view.is-prep {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.waste-prep-zone .waste-prep-form {
  padding: 0;
  --key: 58px;
}
.waste-prep-zone .waste-prep-layout {
  gap: 12px 16px;
}
.waste-prep-zone .waste-prep-list {
  --cols: 2;
}
.waste-prep-zone .waste-prep-list.is-monday .waste-prep-group {
  width: auto;
}
.waste-prep-zone .waste-prep-submit {
  width: min(340px, 100%);
}
/* Chooser: the two choices stack as wide cards */
.waste-prep-zone .waste-prep-choose {
  padding: 0;
  gap: 18px;
  justify-content: center;
}
.waste-prep-zone .waste-prep-choose .waste-prep-close {
  top: 0;
  right: 0;
}
.waste-prep-zone .waste-prep-cards {
  grid-template-columns: minmax(0, 520px);
  gap: 14px;
}
.waste-prep-zone .waste-prep-card {
  aspect-ratio: auto;
  min-height: 120px;
  padding: 18px 22px;
  border-width: 8px;
  border-radius: 28px;
}
.waste-prep-zone .waste-prep-card strong {
  font-size: 26px;
}
.waste-prep-zone .waste-prep-card small {
  max-width: none;
}
@media (min-width: 761px) and (max-height: 800px) {
  .waste-prep-zone .waste-prep-form {
    --key: 50px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-prep-zone .waste-prep-form {
    --key: 52px;
  }
  .waste-prep-zone .waste-prep-list {
    --cols: 3;
  }
  .waste-prep-zone .waste-prep-list.is-monday {
    --cols: 2;
  }
}
@media (max-width: 760px) {
  /* Phone: the zone fills the screen under the top bar, no page scroll. */
  .waste-app.has-prep-zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .waste-app.has-prep-zone > .waste-topbar {
    flex: none;
  }
  .waste-app.has-prep-zone > .waste-body {
    flex: 1;
    min-height: 0;
    padding-bottom: 0;
  }
  .waste-app.has-prep-zone .waste-left {
    flex: 1;
    min-height: 0;
  }
  .waste-app.has-prep-zone .waste-donate-view {
    flex: 1;
    min-height: 0;
  }
  .waste-prep-zone .waste-prep-form {
    --key: 40px;
  }
  .waste-prep-zone .waste-prep-list {
    --cols: 4;
  }
  .waste-prep-zone .waste-prep-list.is-monday {
    --cols: 2;
  }
  .waste-prep-zone .waste-prep-card {
    min-height: 110px;
    border-width: 6px;
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .waste-prep-zone .waste-prep-form {
    --key: 34px;
  }
}

/* ======================================================================
   No ring/dot markers on buttons: a faint tint of the item's color,
   bright when selected or filled in (prep pills, Shared Table, report chips).
   ====================================================================== */
.waste-prep-row,
.waste-prep-list:not(.is-monday) .waste-prep-row {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  padding: 0 12px;
  box-shadow: none;
}
.waste-prep-row.is-holding {
  border-color: #e5484d !important;
}
.waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
  grid-template-columns: minmax(0, 1fr);
}
.waste-prep-list:not(.is-monday) .waste-prep-row .waste-prep-val {
  grid-column: 1;
}
.waste-prep-list:not(.is-monday) .waste-prep-val {
  color: var(--wh-text-fff);
  opacity: 0.9;
}
.waste-prep-form.is-breakfast .waste-prep-list .waste-prep-val {
  color: var(--wh-text-fff);
}
@media (max-width: 760px) {
  .waste-prep-row,
  .waste-prep-list:not(.is-monday) .waste-prep-row {
    padding: 0 6px;
    border-left-width: 1.5px;
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
    border-left-color: color-mix(in srgb, var(--item-color) 85%, #fff);
  }
  .waste-prep-list:not(.is-monday) .waste-prep-row:not(.has-value) {
    border-left-color: color-mix(in srgb, var(--item-color) 30%, var(--wh-line-262a33));
  }
  .waste-prep-list.is-monday .waste-prep-row {
    font-size: 13px;
  }
}

.waste-donate-items button,
.waste-donate-body .waste-donate-items button {
  border-color: color-mix(in srgb, var(--item-color) 30%, var(--wh-line-2f343e));
}

.waste-fchip {
  --item-color: #8a9099;
  border-color: color-mix(in srgb, var(--item-color) 30%, var(--wh-line-2f343e));
}
/* In the zone, measured lists use three columns (names wrap to two lines). */
@media (min-width: 761px) {
  .waste-prep-zone .waste-prep-list:not(.is-monday) {
    --cols: 3;
  }
}
@media (max-width: 760px) {
  .waste-prep-list:not(.is-monday) .waste-prep-row {
    font-size: 10px;
    padding: 0 4px;
    letter-spacing: -0.1px;
  }
}

/* Buttons: colored border when unselected, solid color when selected/filled.
   --item-ink is dark text on light colors, white on dark ones. */
.waste-prep-row,
.waste-prep-list:not(.is-monday) .waste-prep-row {
  background: var(--wh-surface-15171c);
  border: 2px solid var(--item-color);
  color: var(--wh-text-e8eaee);
}
.waste-prep-row.has-value,
.waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
  background: var(--item-color);
  border-color: var(--item-color);
  color: var(--item-ink, var(--wh-text-fff));
}
.waste-prep-row.has-value .waste-prep-val,
.waste-prep-list:not(.is-monday) .waste-prep-row.has-value .waste-prep-val,
.waste-prep-form.is-breakfast .waste-prep-list .waste-prep-row.has-value .waste-prep-val {
  color: inherit;
  opacity: 0.85;
}
@media (max-width: 760px) {
  .waste-prep-row,
  .waste-prep-list:not(.is-monday) .waste-prep-row,
  .waste-prep-list:not(.is-monday) .waste-prep-row:not(.has-value),
  .waste-prep-list:not(.is-monday) .waste-prep-row.has-value {
    border: 2px solid var(--item-color);
  }
}
.waste-donate-items button,
.waste-donate-body .waste-donate-items button {
  background: var(--wh-surface-16181d);
  border: 2px solid var(--item-color);
  color: var(--wh-text-e8eaee);
}
.waste-donate-items button[aria-checked="true"],
.waste-donate-body .waste-donate-items button[aria-checked="true"] {
  background: var(--item-color);
  border-color: var(--item-color);
  color: var(--item-ink, var(--wh-text-fff));
}
.waste-fchip {
  background: transparent;
  border: 1.5px solid var(--item-color);
  color: var(--wh-text-e8eaee);
}
.waste-fchip.is-on {
  background: var(--item-color);
  border-color: var(--item-color);
  color: var(--item-ink, #14161b);
}

/* Ingredient Waste: two wide columns, amount on the right like Item Waste;
   the list scrolls when it doesn't fit. */
.waste-prep-list.is-ingredient,
.waste-prep-zone .waste-prep-list.is-ingredient {
  --cols: 2;
  --row: 44px;
}
.waste-prep-list.is-ingredient .waste-prep-row,
.waste-prep-list.is-ingredient .waste-prep-row.has-value {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: none;
  align-content: normal;
  row-gap: 0;
  column-gap: 8px;
  padding: 0 12px;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0;
}
.waste-prep-list.is-ingredient .waste-prep-row .waste-prep-name,
.waste-prep-list.is-ingredient .waste-prep-row:not(.has-value) .waste-prep-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.waste-prep-list.is-ingredient .waste-prep-row .waste-prep-val {
  grid-column: auto;
  font-size: 14px;
  opacity: 1;
}
@media (max-width: 760px) {
  .waste-prep-list.is-ingredient .waste-prep-row,
  .waste-prep-list.is-ingredient .waste-prep-row.has-value {
    padding: 0 8px;
    font-size: 13px;
  }
  .waste-prep-list.is-ingredient .waste-prep-row .waste-prep-val {
    font-size: 13px;
  }
}

/* Number pads beside a list are vertically centered against it. */
.waste-prep-side {
  align-self: center;
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-prep-side {
    align-self: start;
  }
} /* stacked: pad on top */
@media (max-width: 760px) {
  .waste-prep-side {
    align-self: stretch;
  }
} /* stacked on phones */
/* Shared Table: fixed-size keys, pad and chicken list centered side by side. */
.waste-donate-body {
  align-items: center;
  --st-key: 72px;
}
.waste-donate-body .waste-numpad {
  height: auto;
  grid-template-rows: repeat(4, var(--st-key));
  align-self: center;
}
.waste-donate-body .waste-donate-items {
  align-self: center;
  max-height: 100%;
}
@media (min-width: 761px) and (max-height: 800px) {
  .waste-donate-body {
    --st-key: 62px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-donate-body {
    --st-key: 66px;
    align-content: start;
  }
  .waste-donate-body .waste-numpad,
  .waste-donate-body .waste-donate-items {
    align-self: center;
  }
}
@media (max-width: 760px) {
  .waste-donate-body {
    --st-key: 52px;
  }
}
/* Short lists center beside the pad; long ones (auto margins collapse) start at the top and scroll. */
.waste-prep-list > .waste-prep-group:first-child {
  margin-top: auto;
}
.waste-prep-list > .waste-prep-group:last-child {
  margin-bottom: auto;
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait), (max-width: 760px) {
  .waste-prep-list > .waste-prep-group:first-child {
    margin-top: 0;
  }
  .waste-prep-list > .waste-prep-group:last-child {
    margin-bottom: 0;
  }
}

/* Wider number pad in the zone; the hint above it never wraps, so the pad
   keeps one height as you switch measures. */
.waste-prep-zone .waste-prep-layout {
  grid-template-columns: minmax(330px, 370px) minmax(0, 1fr);
}
.waste-prep-display {
  min-width: 0;
}
.waste-prep-display b {
  min-height: 1.1em;
}
.waste-prep-display small {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- EN / ES language switch (top bar, left of the gear) ---------- */
.waste-lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 50px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--wh-surface-16181d);
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.waste-lang span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 100%;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.waste-lang span.is-on {
  background: var(--wh-surface-2c313c);
  color: var(--wh-text-fff);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 760px) {
  .waste-lang {
    height: 44px;
  }
}
/* Longer names (Spanish ingredient names) wrap to a second line instead of cutting off. */
.waste-prep-list.is-ingredient .waste-prep-row .waste-prep-name,
.waste-prep-list.is-ingredient .waste-prep-row:not(.has-value) .waste-prep-name {
  white-space: normal;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: normal;
  word-break: normal;
}
.waste-prep-list.is-ingredient .waste-prep-row .waste-prep-val {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .waste-nav button {
    font-size: 12px;
  }
  .waste-lang {
    gap: 0;
  }
  .waste-lang span {
    font-size: 11px;
    letter-spacing: 0;
  }
}
@media (max-width: 760px) {
  /* Phone: the switch is one round button showing the current language; tap flips it. */
  .waste-lang {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .waste-lang span {
    display: none;
    min-width: 0;
  }
  .waste-lang span.is-on {
    display: grid;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 380px) {
  .waste-nav button {
    font-size: 11px;
  }
}

/* Swipe-to-remove countdown: a red ring that drains over the 60 s a line can still be deleted. */
.waste-swipe-timer {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 13px;
  height: 13px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.waste-swipe-timer circle {
  fill: none;
  stroke-width: 3.5;
}
.waste-swipe-timer .t-track {
  stroke: rgba(210, 58, 50, 0.22);
}
.waste-swipe-timer .t-ring {
  stroke: var(--wh-text-d23a32);
  stroke-linecap: round;
  stroke-dasharray: 44;
  stroke-dashoffset: calc(44 * var(--t-start, 0));
  animation: waste-swipe-drain linear forwards;
}
@keyframes waste-swipe-drain {
  to {
    stroke-dashoffset: 44;
  }
}

/* readability + built-in controls (2026-10-19) */
.waste-legend small {
  font-size: 12px;
}
.waste-date-range .cfa-date-button {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  padding: 8px 12px;
}

/* Shared Table on a portrait iPad: chicken types go under the pad instead of beside it.
   Side by side, iPad Safari let the pad outgrow its column and the list covered lb / oz. */
.waste-numpad {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
}
.waste-donate-body > * {
  min-width: 0;
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-donate-body {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
  }
  .waste-donate-body .waste-donate-items {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    max-height: none;
  }
  .waste-donate-body .waste-donate-items button {
    flex: 0 1 calc((100% - 16px) / 3);
    justify-content: center;
    height: auto;
    min-height: 50px;
    padding: 6px 10px;
    line-height: 1.15;
  }
}

/* Light theme: the hub palette variables declared on .waste-app flip with the page theme. */
:root[data-theme="light"] .waste-app {
  --cooked: #8793a3;
  --donation-ink: #0f766e;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --line: #c3ccd7;
  --ink: #0f1a2b;
  --ink-2: #3a4658;
  --ink-3: #5c6b7c;
}
:root[data-theme="light"] .waste-chip.is-cooked {
  background: rgba(24, 34, 48, 0.08);
  box-shadow: inset 0 0 0 1px rgba(24, 34, 48, 0.28);
}
:root[data-theme="light"] .waste-pill.waste-ring-pill.is-lime {
  color: #3f6b12;
}
:root[data-theme="light"] .waste-pill.waste-ring-pill {
  box-shadow: 0 4px 14px rgba(24, 34, 48, 0.12);
}

/* Portrait iPad (iPad 6th gen and similar): the top bar takes two rows instead of squeezing onto one, and the right column gets more room so
   dayparts and log names are not cut off. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-app .waste-topbar:has(.suite-swap) {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "menu title swap"
      "actions actions actions";
    row-gap: 10px;
  }
  .waste-app .waste-topbar:has(.suite-swap) .waste-tools-btn {
    grid-area: menu;
    justify-self: start;
  }
  .waste-app .waste-topbar:has(.suite-swap) .waste-title {
    grid-area: title;
    text-align: center;
  }
  .waste-app .waste-topbar:has(.suite-swap) .suite-swap {
    grid-area: swap;
    justify-self: end;
    margin-inline: 0;
  }
  .waste-app .waste-topbar:has(.suite-swap) .waste-top-actions {
    grid-area: actions;
    justify-content: flex-start;
  }
  /* the language switch rides next to the settings button at the right */
  .waste-app .waste-topbar:has(.suite-swap) .waste-top-actions .waste-lang {
    margin-left: auto;
  }
  .waste-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Total card legend: each swatch, label and amount stays together on one line. On a portrait iPad the three shrink with the card. */
.waste-split-legend > span {
  white-space: nowrap;
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* the five dayparts stay on one row; each label shrinks with the card (never wraps, never cut off) */
  .waste-app .waste-dp-list {
    container-type: inline-size;
  }
  .waste-app .waste-dp-item span {
    font-size: clamp(7px, 2.5cqw, 10.5px);
    text-overflow: clip;
  }
  .waste-split-legend {
    container-type: inline-size;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }
  .waste-split-legend > span {
    font-size: clamp(9px, 3.6cqw, 15px);
  }
}

/* Shared Table / Prep Waste pills: the label shrinks with the row so it always fits inside the pill, in two lines at most. */
.waste-actions {
  container-type: inline-size;
}
.waste-actions .waste-pill {
  font-size: clamp(12px, 4.2cqw, 17px);
  letter-spacing: 0;
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .waste-actions {
    gap: 3%;
  }
  .waste-actions .waste-pill {
    width: 47%;
    padding: 0 10px;
  }
}

/* Landscape iPad (1024 wide): a little more width for the right column than the 2:1 split */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {
  .waste-body {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* Breakfast window open (a third pill): the labels shrink with the row so all three stay inside their pills, in one row. */
.waste-actions:has(> :nth-child(3)) .waste-pill {
  font-size: clamp(11px, 3.7cqw, 15px);
  padding: 0 6px;
}

/* Item Waste: Wasted | Donated toggle beside Submit, and the Donated Prep bucket (teal, like donated chicken) */
.waste-prep-foot {
  grid-area: submit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}
.waste-prep-foot .waste-prep-submit {
  flex: 0 1 380px;
  width: auto;
  min-width: 0;
}
.waste-prep-dispo {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.waste-prep-dispo button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.waste-prep-dispo button[aria-checked="true"] {
  background: #e6e8ec;
  color: #14161a;
}
.waste-prep-dispo button[data-prep-dispo="donated"][aria-checked="true"] {
  background: var(--donation);
  color: #04201c;
}
.waste-eom-pile.is-prep-donated {
  --pile: var(--donation);
}

/* Waste Hub's Dashboard / Reports / End of Month tabs and the EN/ES switch use the suite's yellow selected state (same as Attendance) */
.waste-nav-thumb,
.waste-lang span.is-on {
  background: rgba(228, 167, 43, 0.2);
  box-shadow: inset 0 0 0 1px rgba(228, 167, 43, 0.6);
}

/* ---- the readout never moves: one box size, every cell always showing ----
   Every measure has the same three rows (readout, typing line, hint) and shows its full set of cells (see CFAUtil.segCells), centered in the
   box, so neither the box nor the digits move when the measure changes or digits are typed. */
.waste-prep-display {
  grid-template-rows: auto 28px auto;
}
.waste-prep-display > b {
  display: flex;
  align-items: center;
  justify-content: center;
}
.waste-prep-display .seg-frac.is-ghost .seg-slash,
.waste-weight .seg-frac.is-ghost .seg-slash {
  opacity: 0.1;
}
.waste-prep-display .seg-stack,
.waste-weight .seg-stack {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}
.waste-prep-display .seg-ch.is-dim,
.waste-weight .seg-ch.is-dim {
  opacity: 0.28;
  text-shadow: none;
}
.waste-prep-display .seg-ch.is-dim,
.waste-weight .seg-ch.is-dim {
  opacity: 0.16;
}
.waste-prep-display .seg-stack .seg-ch,
.waste-weight .seg-stack .seg-ch {
  font-size: 0.4em;
  line-height: 1;
}
.waste-prep-display .seg-stack .seg-ch.is-sym,
.waste-weight .seg-stack .seg-ch.is-sym {
  font-size: 0.6em;
  line-height: 0.7;
}

/* Shared Table typing line: the number cells keep one size whether or not a number is typed; only the hint text beside them changes. */
.waste-weight-buf,
.waste-weight-buf.is-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  height: 32px;
  min-height: 32px;
  font-size: 22px;
  white-space: nowrap;
}
.waste-weight-buf small {
  margin-left: 0;
}
/* The number cells stay centered; the hint text hangs to their right instead of pushing them off-center. */
.waste-weight-buf {
  position: relative;
}
.waste-weight-buf small {
  position: absolute;
  left: calc(50% + 34px);
  top: 50%;
  translate: 0 -50%;
}