/* Waste Logs — a wall tablet at head height, operated with flour on your hands.
   Targets are 56px and up, the flow is one decision per screen, and the only typing is a quantity
   on a keypad that never moves. The summary is the same app in a manager's hands, so it is dense
   where the log screen is roomy. */

/* No top padding: the sticky station bar is the first child and carries it, so nothing can scroll
   through a strip above the bar and paint in the gap. */
.waste-main .module-shell{max-width:960px;width:100%;margin:0 auto;padding:0 16px 32px;overflow-y:auto;min-height:0;height:100%}

/* The station bar: which tablet this is, and which half of the app is on screen. Sticky because a
   cook scrolling a long category list still has to see where they are logging. */
/* Pinned at the top of the module's own scrolling area. The negative margins pull it over the
   shell's 16px padding and out to both edges: without that, rows scrolled through the padding
   strip above the bar and were painted in the gap, so a table appeared to run under the header. */
.waste-device{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin:0 -16px;padding:16px;background:var(--blush-soft)}
.waste-device-chip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);padding:10px 16px;min-height:56px;font:inherit;color:var(--ink);text-align:left}
.waste-device-chip strong{font-size:1rem}
.waste-device-label{font-size:.66rem;letter-spacing:.1em;color:var(--muted);font-weight:700}

.waste-main button:focus-visible,.waste-main input:focus-visible,.waste-main select:focus-visible,.waste-main textarea:focus-visible{
  outline:3px solid var(--terracotta);outline-offset:2px}

/* The confirmation and the error pin to the top of the scrolling area, above the station bar.
   With the closing sheet's save at the end of forty rows, a closer commits from the bottom of the
   page while these sit at the top of it: scrolled to, the flash landed UNDER the sticky station bar
   and its eight-second Undo was offered where nobody could see it. Sticky and one layer above the
   bar, the answer to a save is visible wherever the save was made, and for the seconds it is up it
   is the most important thing on screen. */
.waste-flash{position:sticky;top:0;z-index:3;margin:0 0 12px;padding:12px 16px;border:1px solid #7ea87f;border-radius:10px;background:#eef6ee;color:#2f5230;font-weight:650;box-shadow:var(--lift)}
.waste-error{position:sticky;top:0;z-index:3;margin:0 0 12px;padding:12px 16px;border:1px solid #d8a79a;border-radius:10px;background:color-mix(in srgb, var(--blush-soft) 50%, var(--cream));color:#8a3524;font-weight:600;box-shadow:var(--lift)}
.waste-notice{margin:0 0 12px;padding:10px 14px;border:1px solid #e8c990;border-radius:10px;background:#fdf3e4;color:#6b4c12;font-size:.88rem}
/* Work the page came back to and has not saved. The notice's own amber, because unsaved is a
   state, and a line rather than a banner: the list under it is what the closer came back for. */
.waste-resume{display:flex;align-items:center;gap:12px;margin:0 0 12px;
  padding:4px 6px 4px 14px;border:1px solid #e8c990;border-radius:10px;background:#fdf3e4;color:#6b4c12;font-size:.88rem}
.waste-resume-text{margin:0;flex:1 1 auto;min-width:0;padding:6px 0;line-height:1.35}
.waste-resume-text strong{font-weight:750}
.waste-resume-unsure{display:block;margin-top:2px}
.waste-main .waste-resume-reset{flex:none;color:#6b4c12;padding:0 8px;white-space:nowrap}

/* A step is a numbered band. Answered, it collapses to its number, its question and its answer --
   one line, still tappable, so going back is a tap rather than a restart. */
.waste-step{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:16px;margin-bottom:12px}
.waste-step.done{padding:10px 16px;background:var(--cream)}
.waste-step.active{border-color:var(--terracotta);box-shadow:0 0 0 3px color-mix(in srgb, var(--terracotta) 16%, transparent)}
.waste-step-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.waste-step-head h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.15rem;color:var(--brown)}
.waste-step.done .waste-step-head h3{font-size:.95rem;color:var(--muted)}
.waste-step-number{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:var(--blush);color:var(--brown);font-weight:800;font-size:.9rem;font-variant-numeric:tabular-nums}
.waste-step.done .waste-step-number{background:var(--brown);color:var(--paper)}
.waste-step-answer{margin-left:auto;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  padding:8px 16px;min-height:40px;font:inherit;font-weight:650;color:var(--ink)}
/* A step nobody has reached yet is a marker on a rail, not a card: slim and quiet, so the six of
   them do not fill a tablet before a single question has been answered. */
.waste-step:not(.active):not(.done){padding:8px 16px;background:var(--cream);border-color:var(--blush)}
.waste-step:not(.active):not(.done) .waste-step-head h3{font-size:.95rem;color:var(--muted)}
.waste-step:not(.active):not(.done) .waste-step-number{width:26px;height:26px;flex-basis:26px;font-size:.78rem;background:var(--blush-soft);color:var(--muted)}
.waste-step-label{margin:16px 0 8px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.waste-step-hint{margin:8px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}

/* auto-fill, not auto-fit: a category with three items keeps button-sized buttons instead of
   stretching three of them across the whole tablet. */
.waste-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.waste-choice{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;
  border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);
  padding:12px 14px;font:inherit;font-size:1rem;font-weight:600;text-align:left}
.waste-choice small{color:var(--muted);font-size:.78rem;font-weight:500}
.waste-choice.chosen{border-color:var(--brown);background:var(--blush);box-shadow:inset 0 0 0 1px var(--brown)}
.waste-choice-free{border-style:dashed;background:var(--paper)}
.waste-item-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* Every tile in this grid is the same object: same height, same shape, same alignment, whether it
   holds a name or the control that adds one. The add tile is dashed and nothing else. */
.waste-name-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));align-items:stretch}
.waste-name-grid .waste-cell,.waste-name-grid .waste-choice{min-height:64px}
.waste-name-grid .waste-choice{width:100%;height:100%;font-size:1.05rem;justify-content:center}
/* The tile and its remove control are siblings: a button inside a button is not valid, and the
   remove has to be reachable without ever being the thing a thumb hits by accident. */
.waste-name-cell{position:relative}
/* Inside the tile, on its right edge -- not a sticker pinned to the corner. The name is padded
   clear of it so a long one never runs under the control that deletes it. */
.waste-name-cell .waste-choice{padding-right:56px}
/* 44px of finger, a small mark inside it. The hit area is the constraint; the glyph is not, so the
   control can stay visually light without being hard to land on. */
.waste-name-drop{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);
  font:inherit;font-size:1.05rem;line-height:1;display:grid;place-items:center;padding:0}
.waste-name-drop:hover,.waste-name-drop:focus-visible{background:var(--blush);color:#8a3524}
/* Armed by a first tap: the mark becomes the word, so the second tap is a tap on "Remove?" and
   not on a small × that may have been a slip. The name is padded further clear of it. */
.waste-name-drop-armed{width:auto;padding:0 14px;border-radius:999px;background:#8a3524;color:var(--paper);
  font-size:.82rem;font-weight:700}
.waste-name-drop-armed:hover,.waste-name-drop-armed:focus-visible{background:#6f2a1c;color:var(--paper)}
.waste-name-cell:has(.waste-name-drop-armed) .waste-choice{padding-right:104px}
/* The field a new name is typed into, in the sheet itself rather than a system prompt. */
.waste-name-add{margin-top:18px}
.waste-name-add .waste-free-field{margin-top:0}
.waste-name-add .waste-primary{flex:0 0 auto}

/* Search is the whole first step now, so it is the biggest thing on the screen and always focused. */
.waste-search-box{margin-top:4px}
.waste-search{width:100%;border:2px solid var(--line);border-radius:14px;background:var(--paper);
  padding:18px 20px;font:inherit;font-size:1.15rem;color:var(--ink)}
.waste-search:focus{border-color:var(--brown);outline:none;box-shadow:0 0 0 4px color-mix(in srgb, var(--brown) 12%, transparent)}

/* Hits: one row each, tappable across their whole width, with what this station last said about
   the item shown underneath so the prefill is visible before it is accepted. */
.waste-results{display:grid;gap:8px;margin-top:10px}
.waste-hit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;
  border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);
  padding:12px 18px;font:inherit;text-align:left}
.waste-hit-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.waste-hit-main strong{font-size:1.02rem}
.waste-hit-main small{color:var(--muted);font-size:.8rem}
.waste-hit-add{color:var(--brown);font-size:1.35rem;font-weight:700;flex:0 0 auto}
.waste-hit-free{border-style:dashed;background:var(--paper)}

/* The tray. One row per thing, everything on it editable in place. */
.waste-tray{margin-top:18px}
.waste-tray-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.waste-tray-head h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.1rem;color:var(--brown)}
.waste-tray-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);padding:12px 14px;margin-top:8px}
/* A row still missing its reason is marked by a stripe as well as by the chip's wording, so an
   unfinished line reads at a glance from arm's length. */
.waste-tray-row-unanswered{border-left:4px solid var(--terracotta)}
.waste-tray-name{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:1px}
.waste-tray-name strong{font-size:1.02rem}
.waste-tray-name small{color:var(--muted);font-size:.75rem}
.waste-stepper{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.waste-step-button{width:52px;height:52px;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  color:var(--ink);font:inherit;font-size:1.4rem;font-weight:700;line-height:1}
/* Minus is dead under a weight of less than one, which is typed rather than stepped. Present and
   faded rather than gone, so nothing on the row moves. */
.waste-step-button:disabled{opacity:.3}
.waste-step-amount{min-height:52px;min-width:110px;border:1px solid var(--line);border-radius:12px;
  background:var(--cream);color:var(--ink);padding:10px 14px;font:inherit;font-weight:650;font-variant-numeric:tabular-nums}
.waste-reason-chip{min-height:52px;border:1px solid var(--line);border-radius:999px;background:var(--blush-soft);
  color:var(--ink);padding:12px 20px;font:inherit;font-weight:600;flex:0 1 auto;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waste-reason-empty{background:var(--paper);border-color:var(--terracotta);color:var(--brown);font-weight:700}
.waste-tray-drop{flex:0 0 auto}
.waste-tray-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.waste-tray-foot .waste-save{min-width:180px}
.waste-who-chip strong{color:var(--brown)}
.waste-day-chip.waste-day-back strong{color:var(--brown)}
.waste-day-input{width:100%;min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  padding:12px 16px;font:inherit;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:10px}
.waste-free-field{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.waste-free-field input{flex:1 1 240px;min-height:56px;border:1px solid var(--line);border-radius:12px;
  background:var(--cream);padding:12px 16px;font:inherit;font-size:1rem;color:var(--ink)}

.waste-primary{min-height:56px;border:none;border-radius:12px;background:var(--brown);color:var(--paper);
  padding:14px 28px;font:inherit;font-size:1rem;font-weight:700}
.waste-primary:disabled{opacity:.45}
.waste-link{border:none;background:none;color:var(--brown);padding:12px 4px;min-height:44px;font:inherit;
  font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* The amount readout is the biggest thing on the screen while step three is open: it is the one
   number a cook has to check before saving. */
.waste-amount{display:flex;align-items:baseline;gap:10px;margin-top:14px;padding:14px 18px;
  border-radius:12px;background:var(--blush-soft)}
.waste-amount-value{font-size:2.4rem;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
.waste-amount-unit{color:var(--muted);font-size:1rem}
/* Keypad left, units and Next right, so an entry finishes without scrolling on a 768px tablet. */
.waste-amount-entry{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;margin-top:12px}
.waste-unit-column{flex:1 1 260px;min-width:0}
.waste-unit-column .waste-step-label{margin-top:0}
.waste-unit-column .waste-primary{margin-top:16px;width:100%}
.waste-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:0 0 auto;width:min(340px,100%);margin-top:12px}
.waste-key{min-height:64px;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  color:var(--ink);font:inherit;font-size:1.4rem;font-weight:650;font-variant-numeric:tabular-nums}
.waste-key:active{background:var(--blush)}
.waste-unit-row{display:flex;flex-wrap:wrap;gap:8px}
.waste-unit{min-height:52px;border:1px solid var(--line);border-radius:999px;background:var(--cream);
  color:var(--ink);padding:12px 20px;font:inherit;font-weight:600}
.waste-unit.chosen{background:var(--brown);border-color:var(--brown);color:var(--paper)}

.waste-note{width:100%;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  padding:12px 16px;font:inherit;font-size:1rem;color:var(--ink);resize:vertical}
.waste-date-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.waste-date-row label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.waste-date-row input{min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  padding:10px 14px;font:inherit;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.waste-confirm{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--terracotta);background:var(--blush-soft);
  border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.5}
.waste-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}

.waste-today-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:24px}
.waste-today-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.waste-today-head h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.1rem;color:var(--brown)}
.waste-today-count{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}

/* Wide tables scroll inside their own box. The page itself must never scroll sideways. */
.waste-table-scroll{overflow-x:auto;margin-top:10px}
.waste-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.92rem}
.waste-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.waste-table td{padding:12px;border-bottom:1px solid var(--blush);vertical-align:top}
.waste-table .numeric{text-align:right;white-space:nowrap}
.waste-table tbody tr:last-child td{border-bottom:none}
/* The action link keeps its 44px target but is pulled back by its own padding, so its text sits on
   the row's baseline instead of 12px under it. */
.waste-table .waste-link{margin:-12px 0}
.waste-dept-cell{color:var(--muted);font-size:.82rem}
/* The day a row is for. Kept whole and tabular so a column of dates lines up and never wraps. */
.waste-day-cell{white-space:nowrap;font-variant-numeric:tabular-nums}
.waste-other-input{flex:1 1 240px}
/* A crossed-out row is struck through as well as dimmed: it has to read as void on a screen
   someone is glancing at from two steps away, and colour alone does not carry that. */
.waste-table tr.voided td{color:var(--muted);text-decoration:line-through}
.waste-void-mark{text-decoration:none;display:inline-block;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.waste-grid td:first-child{white-space:nowrap}
/* Three columns and a control. Everything else is one tap away rather than always on screen. */
.waste-today-table td{vertical-align:middle}
.waste-row-action{text-align:right;white-space:nowrap}
.waste-detail-row td{padding-top:0;border-bottom:1px solid var(--blush)}
.waste-detail-facts{display:flex;flex-wrap:wrap;gap:18px;padding:4px 0 10px}
.waste-detail-fact{display:flex;flex-direction:column;gap:1px;min-width:0}
.waste-detail-label{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.waste-detail-fact strong{font-size:.92rem;font-weight:600}
.waste-detail-actions{display:flex;gap:16px;align-items:center}
/* Undo sits inside the confirmation it belongs to, so taking a run back is where your eye already
   is rather than somewhere you have to go looking. */
.waste-flash{display:flex;align-items:center;gap:14px}
.waste-flash-action{border:1px solid #7ea87f;border-radius:999px;background:var(--paper);color:#2f5230;
  padding:6px 16px;min-height:36px;font:inherit;font-weight:700}
/* A confirmation that arrived while an Undo was on offer joins the line rather than replacing it. */
.waste-flash-note{font-weight:600;opacity:.85}
.waste-flash-note::before{content:"· ";opacity:.6}
/* An Undo is on offer for UNDO_MS (web/waste.js); this runs down across the bottom of the line as
   the time goes, so the offer reads as a window rather than a button that will always be there. */
.waste-flash{overflow:hidden}
.waste-flash-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:#7ea87f;opacity:.7;
  transform-origin:left center;animation:waste-flash-timer linear forwards}
@keyframes waste-flash-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Under a dish's unit, which is only ever "each": why there is no other. */
.waste-unit-hint{margin:8px 0 0;font-size:.86rem;color:var(--muted,#6b5d55)}
.waste-unit-hint-due{color:#9a2d20;font-weight:650}

/* Folded evidence. Shut by default and built on first open. */
.waste-folds{margin-top:4px}
.waste-fold{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-bottom:10px}
.waste-fold-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:14px 18px;min-height:44px;
  cursor:pointer;list-style:none;color:var(--brown);font-family:Georgia,"Times New Roman",serif;font-size:1.02rem}
.waste-fold-head::-webkit-details-marker{display:none}
/* The disclosure triangle is drawn here rather than left to the browser, which hides it entirely
   on iPadOS once list-style is removed. */
.waste-fold-head::before{content:"›";display:inline-block;color:var(--terracotta);font-family:Inter,sans-serif;
  font-size:1.1rem;font-weight:800;transform:rotate(0deg);transition:transform .15s ease}
.waste-fold[open] > .waste-fold-head::before{transform:rotate(90deg)}
.waste-fold-note{color:var(--muted);font-family:Inter,sans-serif;font-size:.82rem}
.waste-fold-body{padding:0 18px 16px}
.waste-fold-body .waste-step-hint{margin-top:0}

/* Stretches to the space it is given, up to a point: a six-bar chart drawn at its natural 320px
   inside a 1,800px card reads as a mistake, and one drawn 1,800px wide reads as a banner. */
.waste-chart{display:block;height:170px;width:100%;min-width:320px;max-width:680px}
.waste-chart-value{fill:var(--muted);font-size:11px;font-family:Inter,sans-serif}
.waste-chart-label{fill:var(--muted);font-size:10px;font-family:Inter,sans-serif}

/* The sheet scrolls its own body and keeps its action in view. The Fix sheet carries a keypad, a
   unit row and a reason grid, which is taller than a tablet: without this the button that saves
   the correction sat below the fold of the thing asking for it. */
/* display belongs ONLY on [open]. A closed <dialog> is hidden by the browser's own
   `dialog:not([open]){display:none}`, and an author rule beats a user-agent rule whatever its
   specificity -- so putting display:flex on the bare class painted every closed dialog onto the
   page at once, stacking Save station, Cross out and Done under the log. */
.waste-dialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0;
  width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 48px);color:var(--ink);
  flex-direction:column;overflow:hidden}
/* dvh, not vh. 100vh is the height the page would have if the browser's toolbars retracted, not
   the height on the glass while they are up, so a sheet measured against it hangs off the bottom
   of the screen and takes its action row with it. That is how the amount sheet became a room with
   no door on a phone: Done was below the fold, and the sheet covered the screen so there was no
   backdrop left to tap either. The vh line above stays as the fallback for browsers without dvh,
   and the insets keep the action row off the home indicator. */
.waste-dialog{max-height:calc(100dvh - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.waste-dialog[open]{display:flex}
.waste-dialog > h2{margin:0;padding:20px 22px 0}
/* Bottom padding on the body, not only the sides. A sheet without an action row -- the roster is
   one -- ended its last row flush against the dialog's own border, which reads as clipped rather
   than finished. */
.waste-dialog > div:not(.waste-dialog-actions){padding:0 22px 22px;overflow-y:auto;min-height:0}
.waste-dialog > div:not(.waste-dialog-actions):first-of-type{padding-top:8px}
.waste-dialog::backdrop{background:color-mix(in srgb, var(--ink) 42%, transparent)}
.waste-dialog h2{margin:0 0 4px;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.25rem;color:var(--brown)}
.waste-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;flex:0 0 auto;
  padding:14px 22px 20px;border-top:1px solid var(--blush);background:var(--paper)}
.waste-secondary{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  color:var(--muted);padding:12px 22px;font:inherit;font-weight:650}
/* A refused save, said inside the sheet's own pinned action row. Written into the page's error
   strip it sat under the backdrop, and a list that was not saved looked saved. */
.waste-dialog-error{flex:1 1 100%;margin:0;padding:10px 14px;border:1px solid #d8a79a;border-radius:10px;
  background:color-mix(in srgb, var(--blush-soft) 50%, var(--cream));color:#8a3524;font-weight:600;font-size:.9rem}

@media (max-width:600px){
  .waste-main .module-shell{padding:0 12px 28px}
  /* On a phone the station bar is a strip, not a stack. Stacked at 56px each, the three chips and
     the two tabs filled an 844px screen before the first item of the list appeared -- and the bar
     is sticky, so it took that room back on every scroll. The values are short ("Today", a first
     name), so they fit a row: label above value, wrapping only when a store name is long. */
  .waste-device{flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:6px;margin:0 -12px;padding:10px 12px}
  .waste-device-chip{flex:1 1 auto;min-width:0;min-height:44px;padding:6px 12px;border-radius:var(--radius-control-sm)}
  .waste-device-chip strong{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  /* .58rem was 9.3px, which is not a caption but a smudge. Eleven pixels is the floor for anything
     meant to be read, on a phone most of all. */
  .waste-device-label{font-size:.7rem}
  .waste-choice-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .waste-keypad{max-width:none}
}
@media (prefers-reduced-motion:reduce){.waste-main *{transition:none!important;animation:none!important}.waste-flash-timer{display:none}}

/* ---- the closing sheet ----
   Front of house at close, on a phone in one hand. Forty rows the closer thumbs down, each one
   already at zero, and nothing in a row moves when its count changes: minus sits there disabled at
   zero rather than appearing at one, because a control that arrives under a thumb already
   travelling is a mis-tap on the wrong item.
   Rows sit on the blush ground as near-white cards with a visible edge -- a near-white card on a
   near-white ground has no second cue, and on a list this long the row boundary is the whole
   structure. */
/* One column the width of a phone in landscape, whatever the screen. Stretched across a 960px
   shell on a landscape tablet, a row put the item's name and its counter some 600px apart, and the
   eye had to travel that far to check the count landed on the right line. */
.waste-closing{margin-top:4px;max-width:640px}
.waste-closing-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:0 2px 12px}
.waste-closing-heading h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.3rem;color:var(--brown)}
.waste-closing-sub{margin:4px 0 0;color:var(--muted);font-size:.86rem;max-width:44ch}
/* The round's one reason. A chip because it is a label on the whole sheet, not a control that acts
   on a row -- and the only coloured thing in this strip, since the black is the Save. */
.waste-closing-why{min-height:var(--control-height);border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--muted);padding:10px 18px;font:inherit;font-size:.86rem;font-weight:600;flex:0 0 auto}

.waste-closing-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

/* An optional heading, so a long list can be walked in the order the cases actually stand. */
.waste-closing-section{margin:14px 2px 2px;color:var(--muted);font-size:.68rem;letter-spacing:.12em;font-weight:800;text-transform:uppercase}
.waste-closing-section:first-child{margin-top:0}
.waste-closing-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--radius-control);background:var(--paper);padding:10px 12px 10px 16px;min-height:64px}
/* A counted row has to read at a glance on the way back down the list: the closer's own check that
   the number they entered landed on the item they meant. */
.waste-closing-row-counted{background:var(--cream);border-color:var(--edge);box-shadow:var(--lift)}
.waste-closing-name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.waste-closing-name strong{font-size:1.02rem;line-height:1.25;font-weight:600}
.waste-closing-already{color:var(--muted);font-size:.76rem}

/* Minus, the number, plus. Plus is the gesture this screen exists for, so it is the widest target
   and the only one carrying the brand's ink. */
.waste-counter{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.waste-counter-button{width:52px;height:52px;border:1px solid var(--line);border-radius:var(--radius-control-sm);
  background:var(--cream);color:var(--ink);font:inherit;font-size:1.5rem;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center}
.waste-counter-button:disabled{opacity:.3}
.waste-counter-more{width:58px;background:var(--brown);border-color:var(--brown);color:var(--paper)}
/* The number is a button, because a tray of twelve should not cost twelve taps. Tabular so a
   column of counts lines up as the closer scrolls back over it. */
.waste-counter-value{min-width:56px;height:52px;border:1px solid transparent;border-radius:var(--radius-control-sm);
  background:none;color:var(--muted);font:inherit;font-size:1.25rem;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:center;padding:0 6px}
.waste-counter-on{color:var(--ink);background:var(--blush-soft);border-color:var(--blush)}

/* The tally and the one button that commits it, at the end of the list rather than pinned to the
   viewport. Pinned, it cost a row of screen on a phone and let a round be saved from three items
   in; here, reaching it means having passed every line. */
.waste-closing-foot{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:18px;padding:16px 2px 4px;border-top:1px solid var(--edge)}
.waste-closing-tally{display:flex;flex-direction:column;gap:1px;min-width:0}
.waste-closing-tally strong{font-size:1rem}
.waste-closing-tally span{color:var(--muted);font-size:.78rem}
/* The page's one primary action, so it is the ink rather than the brown. */
.waste-closing-save{min-width:150px;background:var(--ink);border-radius:var(--radius-control)}
/* Nothing counted is "not yet", not a greyed-out slab: a black button at 45% opacity is still the
   heaviest thing on the screen, which is the wrong emphasis for the state before any work. */
.waste-closing-save:disabled{opacity:1;background:var(--cream);border:1px solid var(--line);color:var(--muted);font-weight:650}
.waste-closing-edit{align-self:flex-start;margin-top:10px}

/* The ordinary search, folded shut under the list: a closing round should not begin by choosing
   between two ways to log, and a case of something not on the list still has to go somewhere. */
.waste-extra{margin-top:18px;border-top:1px solid var(--blush);padding-top:8px}
.waste-extra-summary{display:flex;align-items:baseline;gap:10px;min-height:var(--control-height);
  padding:10px 2px;color:var(--brown);font-weight:650;cursor:pointer}
.waste-extra-summary small{color:var(--muted);font-weight:400;font-size:.8rem}
.waste-extra-summary::marker{color:var(--line)}
.waste-extra-body{padding-top:4px}

/* Curating the list. Up and down rather than drag: a drag on a phone list is a scroll that went
   wrong, and an order the closer walks is worth being able to set without one. */
.waste-closing-editor{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.waste-closing-editor-row{display:flex;align-items:center;gap:6px}
.waste-closing-editor-name{flex:1 1 auto;min-width:0;min-height:var(--control-height);border:1px solid var(--line);
  border-radius:var(--radius-control-sm);background:var(--cream);padding:10px 14px;font:inherit;color:var(--ink)}
.waste-closing-editor-move{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-control-sm);
  background:var(--paper);color:var(--brown);font:inherit;font-size:1.1rem;font-weight:700;flex:0 0 auto}
.waste-closing-editor-move:disabled{opacity:.3}
.waste-closing-editor-drop{color:var(--muted)}
.waste-closing-editor-add{margin-top:12px;width:100%}


@media (max-width:600px){
  .waste-closing-head{padding-bottom:10px;align-items:center}
  .waste-closing-foot{gap:10px;padding:14px 0 4px}
  .waste-closing-heading{flex:1 1 auto;min-width:0}
  .waste-closing-heading h2{font-size:1.15rem}
  .waste-closing-sub{font-size:.8rem}
  /* A phone is 390px wide and the counter takes 160 of them. Every pixel the row does not spend on
     padding is a pixel the item's name gets, and a name that wraps to three lines is a row a
     thumb has to travel past. */
  .waste-closing-row{gap:6px;padding:8px 8px 8px 14px;min-height:60px}
  .waste-closing-name strong{font-size:.95rem}
  .waste-counter{gap:4px}
  .waste-counter-button{width:48px;height:48px}
  .waste-counter-more{width:52px}
  .waste-counter-value{min-width:44px;height:48px;font-size:1.15rem;padding:0 2px}
  .waste-closing-save{min-width:112px;padding:13px 16px}
}

/* ══ Waste Logs: the Lovable-derived skin ══════════════════════════════════════════════════════════
   The one Loss Prevention, Instagram, Kitchen Prep and Tips wear, read from the --lp-* tokens in
   web/styles.css: Fraunces titles and figures, Karla for the rest, one card surface, small-caps
   labels, a terracotta primary action and the dark-brown pill for what is selected. Last in the
   file so it wins at equal specificity. Sizes are left as they were: this is a wall tablet and its
   52-56px targets are the point. Colours that carry meaning stay: the red and green of a change,
   the amber notice, the crossed-out row. */
.waste-main { background:var(--lp-ground); font-family:var(--lp-body); color:var(--lp-ink); -webkit-font-smoothing:antialiased; }
.waste-main button,.waste-main input,.waste-main select,.waste-main textarea { font-family:inherit; }

/* The station bar: the page's own ground, chips on the card surface. */
.waste-device { background:color-mix(in srgb, var(--lp-ground) 94%, transparent); border-bottom:1px solid var(--lp-line); backdrop-filter:blur(6px); }
.waste-device-chip { border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow); color:var(--lp-ink); }
.waste-device-chip strong { font-family:var(--lp-display); font-weight:600; font-size:1.05rem; color:var(--lp-ink); }
.waste-device-label,.waste-step-label,.waste-detail-label,.waste-table th,.waste-ledger th,.waste-metric-label,.waste-sum-field>span { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--lp-muted); }
.waste-day-chip.waste-day-back strong { color:var(--lp-accent); }

/* One card. */
.waste-panel,.waste-fold,.waste-closing,.waste-extra { border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow); }
.waste-panel h3,.waste-today-head h2,.waste-tray-head h2,.waste-closing-heading h2,.waste-dialog h2,.waste-fold-head { font-family:var(--lp-display); font-weight:600; letter-spacing:-.01em; color:var(--lp-ink); }
.waste-panel h3,.waste-today-head h2,.waste-tray-head h2 { font-size:19px; }
.waste-step-hint,.waste-fold-note,.waste-today-count,.waste-hit-main small,.waste-tray-name small { color:var(--lp-muted); }

/* Search, results and the tray. */
.waste-search { border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow); color:var(--lp-ink); }
.waste-search:focus { outline:none; border-color:var(--lp-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent); }
.waste-hit,.waste-tray-row { border-color:var(--lp-line); border-radius:12px; background:var(--lp-card); }
.waste-hit-add { color:var(--lp-accent); }
.waste-tray-row-unanswered { border-left-color:var(--lp-accent); }
.waste-reason-chip,.waste-step-button,.waste-counter-button,.waste-key,.waste-unit,.waste-choice { border-color:var(--lp-line); background:var(--lp-card); color:var(--lp-ink); }
.waste-reason-empty { color:var(--lp-accent); border-color:color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); }
.waste-choice.chosen,.waste-unit.chosen { background:var(--lp-primary); border-color:var(--lp-primary); color:var(--lp-primary-ink); box-shadow:none; }
.waste-choice.chosen small { color:color-mix(in srgb, var(--lp-primary-ink) 80%, transparent); }
.waste-link { color:var(--lp-accent); }

/* The primary action is terracotta; secondary is a quiet outlined button. */
.waste-primary,.waste-save,.waste-closing-save { background:var(--lp-accent); color:#fff; border:0; }
.waste-primary:disabled,.waste-save:disabled,.waste-closing-save:disabled { background:var(--lp-soft); color:var(--lp-muted); }
.waste-secondary { border:1px solid var(--lp-line); background:var(--lp-card); color:var(--lp-ink); }

/* Tables. */
.waste-table th { border-bottom:1px solid var(--lp-line); }
.waste-table td { border-bottom-color:color-mix(in srgb, var(--lp-line) 70%, transparent); color:var(--lp-ink); }
.waste-cost-cell,.waste-table .numeric { font-variant-numeric:tabular-nums; }

/* The closing count: one card with its own padding, the rows a flat list inside it rather than a
   box in a box, and the whole width of the page like every other card. */
.waste-closing,.waste-extra { max-width:none; padding:20px 22px; }
.waste-extra { padding:0; }
.waste-extra-summary { padding:16px 22px; }
.waste-extra-body { padding:0 22px 20px; }
.waste-closing-head { align-items:center; padding:0 0 14px; border-bottom:1px solid var(--lp-line); }
.waste-closing-heading h2 { font-size:22px; }
.waste-closing-sub { margin:4px 0 0; color:var(--lp-muted); font-size:13px; text-transform:none; letter-spacing:0; }
.waste-closing-why { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--lp-line); background:var(--lp-ground); color:var(--lp-ink); font-weight:600; }
.waste-closing-list { gap:0; }
.waste-closing-section { margin:18px 0 6px; color:var(--lp-muted); font-size:11px; letter-spacing:.09em; font-weight:600; }
.waste-closing-row { border:0; border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent); border-radius:0; background:none; box-shadow:none; padding:10px 0; min-height:72px; }
.waste-closing-row:last-child { border-bottom:0; }
.waste-closing-row-counted { background:color-mix(in srgb, var(--lp-accent) 7%, transparent); border-radius:10px; border-bottom-color:transparent; margin:2px -12px; padding:10px 12px; box-shadow:none; }
.waste-closing-name strong { font-size:1.05rem; font-weight:600; color:var(--lp-ink); }
.waste-closing-already { color:var(--lp-muted); }
/* Minus quiet, the count in the display face, plus the filled button this screen is for. */
.waste-counter { gap:8px; }
.waste-counter-button { border:1px solid var(--lp-line); background:var(--lp-card); color:var(--lp-ink); border-radius:10px; }
.waste-counter-button:disabled { opacity:.35; }
.waste-counter-more { background:var(--lp-primary); border-color:var(--lp-primary); color:var(--lp-primary-ink); }
.waste-counter-value { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-family:var(--lp-display); font-size:1.35rem; font-weight:600; color:var(--lp-muted); }
.waste-counter-on { color:var(--lp-ink); background:var(--lp-card); border-color:color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); }
.waste-closing-foot { border-top:1px solid var(--lp-line); padding:16px 0 0; }
.waste-closing-tally strong { font-family:var(--lp-display); font-size:18px; font-weight:600; }
.waste-closing-tally span { color:var(--lp-muted); }
.waste-closing-edit { margin-top:12px; }

/* Find an item on a long closing list. Rows it does not match are hidden, never removed. */
.waste-closing-find { display:block; width:100%; min-height:48px; margin:14px 0 6px; padding:0 16px; border:1px solid var(--lp-line); border-radius:10px; background:var(--lp-ground); color:var(--lp-ink); font:inherit; font-size:16px; }
.waste-closing-find:focus { outline:none; border-color:var(--lp-accent); background:var(--lp-card); box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent); }
.waste-closing-list > [hidden],.waste-closing-none[hidden] { display:none; }
.waste-closing-none { margin:12px 0 0; }

/* The closing-list editor: a grip to drag each row by, and the row being dragged lifted off the list. */
.waste-closing-editor-grip { flex:0 0 auto; width:36px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:none; color:var(--lp-muted); font-size:20px; line-height:1; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.waste-closing-editor-grip:active { cursor:grabbing; }
.waste-closing-editor { gap:0; }
/* Every row carries a margin of its own inside its box, so the lifted card clears what it holds. */
.waste-closing-editor-row { align-items:flex-start; margin:0 -10px; padding:5px 12px 5px 6px; border-radius:16px; transition:box-shadow .15s ease, background .15s ease, scale .15s ease; }
.waste-closing-editor-row.dragging { position:relative; z-index:2; scale:1.02; background:var(--lp-card); box-shadow:0 0 0 1px color-mix(in srgb, var(--lp-accent) 22%, var(--lp-line)), 0 3px 8px rgb(61 32 19 / 10%), 0 24px 44px -14px rgb(61 32 19 / 34%); }
.waste-closing-editor-row.dragging .waste-closing-editor-grip { color:var(--lp-accent); cursor:grabbing; }
.waste-closing-editor-name { border-color:var(--lp-line); border-radius:10px; background:var(--lp-card); color:var(--lp-ink); }
.waste-closing-editor-move { border-color:var(--lp-line); background:var(--lp-card); color:var(--lp-ink); border-radius:10px; }
@media (hover:hover) { .waste-closing-editor-grip:hover { background:var(--lp-soft); color:var(--lp-ink); } }

/* Sheets. */
.waste-dialog { border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow-lifted); font-family:var(--lp-body); color:var(--lp-ink); }
.waste-dialog h2 { font-size:22px; }
.waste-dialog-actions { border-top-color:var(--lp-line); }

@media (hover:hover) {
  .waste-primary:not(:disabled):hover,.waste-save:not(:disabled):hover,.waste-closing-save:not(:disabled):hover { background:var(--lp-accent); filter:brightness(.94); }
  .waste-device-chip:hover,.waste-secondary:hover,.waste-hit:hover { background:var(--lp-sidebar-hover); }
}
/* On a phone the five columns of "Logged today" ran past the screen and cut off Details. */
@media (max-width:640px) {
  .waste-today-table th,.waste-today-table td { padding:10px 5px; }
  .waste-today-table th:first-child,.waste-today-table td:first-child { padding-left:0; }
  .waste-today-table td:last-child { padding-right:0; }
  .waste-today-table .waste-row-action .waste-link { font-size:13px; }
}

/* Closing-list editor: the catalog item a line is costed from. */
.waste-closing-editor-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.waste-closing-editor-main .waste-closing-editor-name { width:100%; }
.waste-closing-editor-link { align-self:flex-start; max-width:100%; min-height:28px; padding:2px 10px; border:1px dashed var(--lp-line); border-radius:999px; background:none; color:var(--lp-accent); font:inherit; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.waste-closing-editor-link.linked { border-style:solid; background:var(--lp-soft); color:var(--lp-muted); font-weight:500; }
.waste-closing-link { margin:2px 0 6px 42px; padding:12px; border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-soft); display:flex; flex-direction:column; gap:8px; }
.waste-closing-link-find { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--lp-line); border-radius:10px; background:var(--lp-card); color:var(--lp-ink); font:inherit; }
.waste-closing-link-hits { display:flex; flex-direction:column; gap:4px; }
.waste-closing-link-hit { text-align:left; min-height:40px; padding:8px 12px; border:0; border-radius:10px; background:var(--lp-card); color:var(--lp-ink); font:inherit; cursor:pointer; }
.waste-closing-link-hit.on { background:var(--lp-ink); color:var(--lp-card); }
.waste-closing-link-none { margin:0; color:var(--lp-muted); font-size:13px; }
.waste-closing-link-unlink { align-self:flex-start; border:0; background:none; color:var(--lp-muted); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; padding:4px 0; }
@media (max-width:600px) { .waste-closing-link { margin-left:0; } }

/* A station's lists: a tab per list above the log. */
.waste-sheet-tabs { display:flex; gap:4px; padding:4px; margin:6px 0 14px; border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow); }
.waste-sheet-tab { flex:1 1 0; min-height:44px; padding:8px 14px; border:0; border-radius:9px; background:none; color:var(--lp-muted); font:inherit; font-weight:600; cursor:pointer; }
.waste-sheet-tab.chosen { background:var(--lp-primary); color:var(--lp-primary-ink); }
@media (hover:hover) { .waste-sheet-tab:not(.chosen):hover { background:var(--lp-soft); color:var(--lp-ink); } }
.waste-closing-why.unset { border-style:dashed; border-color:var(--lp-accent); color:var(--lp-accent); background:none; }
.waste-closing-editor-meta { display:flex; align-items:center; gap:6px; min-width:0; }
.waste-closing-editor-unit { flex:0 0 auto; min-height:28px; padding:2px 8px; border:1px solid var(--lp-line); border-radius:999px; background:var(--lp-card); color:var(--lp-ink); font:inherit; font-size:13px; }
.waste-closing-editor-meta .waste-closing-editor-link { min-width:0; }
.waste-closing-editor-unlinked { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; color:#c08a2c; opacity:.8; cursor:help; }
.waste-closing-editor-unlinked:focus { opacity:1; background:color-mix(in srgb, #c08a2c 12%, transparent); outline:none; }
.waste-closing-editor-unlinked::after { content:attr(data-tip); position:absolute; left:calc(100% + 6px); top:50%; z-index:3; padding:5px 9px; border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-card); box-shadow:var(--lp-shadow-lifted); color:var(--lp-ink); font-size:12px; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-3px,-50%); transition:opacity .12s ease, transform .12s ease; }
.waste-closing-editor-unlinked:focus::after { opacity:1; transform:translate(0,-50%); }
@media (hover:hover) {
  .waste-closing-editor-unlinked:hover { opacity:1; background:color-mix(in srgb, #c08a2c 12%, transparent); }
  .waste-closing-editor-unlinked:hover::after { opacity:1; transform:translate(0,-50%); }
}

/* Lists logged as things happen: how each line is counted, its own reason, and the unit under a
   weighed or measured count. */
.waste-closing-unit { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--lp-muted); }
.waste-closing-reason-slot:empty { display:none; }
.waste-closing-reason-slot { margin-top:4px; }
.waste-closing-line-why { min-height:30px; padding:3px 12px; border:1px solid var(--lp-line); border-radius:999px; background:var(--lp-soft); color:var(--lp-ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.waste-closing-line-why.unset { border-style:dashed; border-color:var(--lp-accent); background:none; color:var(--lp-accent); }
.waste-counter-value[data-unit] { flex-direction:column; line-height:1.05; }
.waste-counter-value[data-unit]::after { content:attr(data-unit); font-family:var(--lp-body,inherit); font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--lp-muted); }

/* Sorting: the lifted row follows the pointer with no easing; the rows it passes glide aside. */
.waste-closing-editor.sorting .waste-closing-editor-row { transition:transform .18s ease, box-shadow .15s ease, background .15s ease, scale .15s ease; }
.waste-closing-editor.sorting .waste-closing-editor-row.dragging { transition:box-shadow .15s ease, background .15s ease, scale .15s ease; will-change:transform; }
.waste-closing-editor.sorting { user-select:none; -webkit-user-select:none; }
@media (prefers-reduced-motion:reduce) { .waste-closing-editor.sorting .waste-closing-editor-row { transition:none; } }
.waste-reason-own { display:flex; gap:8px; margin-top:12px; }
.waste-reason-own-input { flex:1 1 auto; min-width:0; min-height:48px; padding:0 14px; border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); color:var(--lp-ink); font:inherit; }
.waste-reason-own-use { flex:0 0 auto; min-height:48px; padding:0 18px; }

/* Manage items: what a station's search shows, for administrators. */
.waste-catalog-link { display:inline-block; margin:10px 0 0; }
.waste-catalog-scope { margin:8px 0 22px; color:var(--lp-muted); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.waste-catalog-tools { display:grid; gap:10px; }
.waste-catalog-words { display:flex; flex-wrap:wrap; gap:8px; }
.waste-catalog-words:not(:empty) { margin-bottom:10px; }
.waste-catalog-word { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 4px 0 14px; border:1px solid var(--lp-line); border-radius:999px; background:var(--lp-card); color:var(--lp-ink); font-size:14px; font-weight:600; }
.waste-catalog-word small { color:var(--lp-muted); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.waste-catalog-word-remove { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:999px; background:none; color:var(--lp-muted); font:inherit; font-size:18px; line-height:1; cursor:pointer; }
.waste-catalog-word-remove:disabled { opacity:.5; }
.waste-catalog-hide { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; margin-bottom:18px; }
.waste-catalog-hide .waste-catalog-toggle { min-height:48px; padding:0 22px; }
@media (hover:hover){ .waste-catalog-word-remove:hover { background:var(--lp-sidebar-hover); color:var(--lp-ink); } }
.waste-catalog-filters { justify-self:start; flex-wrap:wrap; }
.waste-catalog-find { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); color:var(--lp-ink); font:inherit; }
.waste-catalog-list { display:flex; flex-direction:column; margin-top:10px; max-height:55vh; overflow:auto; }
.waste-catalog-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 2px; border-bottom:1px solid var(--lp-line); }
.waste-catalog-name { display:flex; flex-direction:column; min-width:0; }
.waste-catalog-name strong { font-weight:600; color:var(--lp-ink); overflow-wrap:anywhere; }
.waste-catalog-name small { color:var(--lp-muted); font-size:12px; }
.waste-catalog-toggle { flex:0 0 auto; min-width:84px; min-height:36px; padding:0 14px; border:0; border-radius:999px; background:var(--lp-primary); color:var(--lp-primary-ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.waste-catalog-toggle.off { background:none; color:var(--lp-muted); box-shadow:inset 0 0 0 1px var(--lp-line); }
.waste-catalog-toggle:disabled { opacity:.6; }

/* ══ The summary ═══════════════════════════════════════════════════════════════════════════════
   A desk screen inside a tablet app, drawn in Loss Prevention's language so the two read as one
   product: the --lp-* tokens, one card surface with a hairline and a soft shadow, small-caps
   labels over display-face figures, and the range's filters unboxed under the title.

   Colour means three things here and nothing else: which range is chosen, which direction a
   change went, and a bar's own length. Every change also carries an arrow and a written sign, so
   nothing on this page is readable only by its tint. Waste climbing is bad news, so the tints run
   the opposite way from the usual one and the arrow, not the colour, is what states the fact. */
.waste-summary-tokens,#waste-summary-view{
  --waste-up:var(--lp-high);
  --waste-down:#2f7a5b;
  /* A light tint of the direction with a darker shade of it inside, 4.5:1 or better on its own tint
     (it was measured on the card, and on the tint sat at 4.46 and 4.49). */
  --waste-up-tint:color-mix(in srgb, var(--waste-up) 12%, var(--lp-card));
  --waste-up-ink:color-mix(in srgb, var(--waste-up) 76%, var(--lp-ink));
  --waste-down-tint:color-mix(in srgb, var(--waste-down) 14%, var(--lp-card));
  --waste-down-ink:color-mix(in srgb, var(--waste-down) 70%, var(--lp-ink));
  --waste-bar:color-mix(in srgb, var(--lp-accent) 70%, var(--brown));
  --waste-bar-track:color-mix(in srgb, var(--lp-line) 70%, transparent);
}
/* :not([hidden]), because display:grid on the bare id beats the browser's own [hidden] rule and
   would paint the whole summary under the log screen. */
#waste-summary-view:not([hidden]){display:grid;gap:20px;padding-top:24px}
.waste-main.waste-main-summary .module-shell{max-width:1320px;padding-left:clamp(16px,3vw,44px);padding-right:clamp(16px,3vw,44px)}
#waste-summary{display:grid;gap:20px;min-width:0}
#waste-summary>*,#waste-summary-controls>*{min-width:0}

/* ── Title, then the range under it ─────────────────────────────────────────────────────────── */
#waste-summary-controls{display:grid;gap:16px;margin-bottom:0}
.waste-sum-title h2{margin:0;font-family:var(--lp-display);font-size:30px;font-weight:600;
  line-height:1.1;letter-spacing:-.015em;color:var(--lp-ink)}
.waste-sum-scope{margin:4px 0 0;color:var(--lp-muted);font-size:13.5px}
.waste-sum-range{display:grid;gap:14px}
.waste-presets{display:flex;flex-wrap:wrap;gap:6px}
.waste-preset{min-height:44px;padding:0 15px;border:1px solid var(--lp-line);border-radius:var(--radius-control,16px);
  background:var(--lp-card);color:var(--lp-ink);font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.waste-preset.active{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600}
.waste-preset-short{display:none}
.waste-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.waste-sum-field{display:grid;gap:6px;min-width:140px}
.waste-sum-field>span{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--lp-muted)}
.waste-sum-field input,.waste-sum-field select{min-height:44px;padding:0 12px;border:1px solid var(--lp-line);
  border-radius:var(--radius-control,16px);background:var(--lp-card);color:var(--lp-ink);font:inherit;font-size:14px;
  font-variant-numeric:tabular-nums;color-scheme:light}
/* One control per row carries colour, and on this row it is the action. */
.waste-apply{min-height:44px;padding:0 20px;border:0;border-radius:var(--radius-control,16px);background:var(--lp-accent);
  color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.waste-apply:disabled{background:var(--lp-soft);color:var(--lp-muted);cursor:default}
@media (hover:hover){
  .waste-preset:hover:not(.active){background:var(--lp-soft)}
  .waste-apply:hover:not(:disabled){filter:brightness(.94)}
}
#waste-summary-view :is(button,select,input,[tabindex]):focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

/* ── The sentence, before the numbers ───────────────────────────────────────────────────────── */
.waste-finding{display:grid;gap:6px;padding:20px 22px;border:1px solid var(--lp-line);border-radius:12px;
  background:var(--lp-card);box-shadow:var(--lp-shadow)}
.waste-finding p{margin:0;font-family:var(--lp-display);font-size:19px;font-weight:500;line-height:1.45;color:var(--lp-ink)}
.waste-finding p+p{font-family:var(--lp-body);font-size:14.5px;font-weight:400;color:var(--lp-muted)}

/* ── The figures ────────────────────────────────────────────────────────────────────────────── */
.waste-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* Each tile is a subgrid of the row's three lines, so a label that wraps moves every figure in the
   row down with it and the numbers stay on one baseline. */
.waste-metric{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;
  padding:18px 18px 16px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.waste-metric p{margin:0}
.waste-metric-label{color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;line-height:1.35;text-transform:uppercase}
.waste-metric-value{position:relative;margin:8px 0 12px !important;color:var(--lp-ink);font-family:var(--lp-display);
  font-size:29px;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.waste-metric-figure{display:inline-block;border-radius:6px;cursor:default;outline:none}
.waste-metric-figure:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}

/* A change is a round pill tinted by its direction, with the darker shade inside so the figure
   keeps 4.5:1 on its own tint. An arrow and a sign carry the direction without the tint. */
.waste-pill-slot{position:relative;display:flex;align-items:center;min-height:26px}
.waste-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 10px;border-radius:999px;
  background:var(--waste-pill-bg,color-mix(in srgb, var(--lp-muted) 12%, var(--lp-card)));
  color:var(--waste-pill-ink,var(--lp-muted));font-size:12.5px;line-height:1.35;white-space:nowrap;cursor:default;outline:none}
.waste-pill:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}
.waste-pill strong{font-weight:700;font-variant-numeric:tabular-nums}
.waste-pill-slot[data-direction="up"]{--waste-pill-bg:var(--waste-up-tint);--waste-pill-ink:var(--waste-up-ink)}
.waste-pill-slot[data-direction="down"]{--waste-pill-bg:var(--waste-down-tint);--waste-pill-ink:var(--waste-down-ink)}
.waste-arrow{font-size:9px}
/* A hint on hover or focus, opening under what it explains. */
.waste-hint{position:absolute;left:0;top:calc(100% + 8px);z-index:5;display:grid;gap:3px;width:max-content;max-width:250px;
  padding:10px 12px;border-radius:10px;background:var(--lp-ink);color:var(--lp-card);font-family:var(--lp-body);
  font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.4;white-space:normal;
  box-shadow:0 6px 18px color-mix(in srgb, var(--lp-ink) 22%, transparent);opacity:0;visibility:hidden;
  transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;pointer-events:none}
.waste-hint strong{font-weight:700;font-variant-numeric:tabular-nums}
.waste-hint span{color:color-mix(in srgb, var(--lp-card) 76%, transparent)}
:is(.waste-pill,.waste-metric-figure):is(:hover,:focus)+.waste-hint{opacity:1;visibility:visible;transform:none;
  transition:opacity .12s ease,transform .12s ease}

/* ── One panel, everywhere ──────────────────────────────────────────────────────────────────── */
.waste-panel{display:grid;align-content:start;gap:14px;padding:22px 22px 20px;border:1px solid var(--lp-line);
  border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow);min-width:0}
.waste-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.waste-panel h3{margin:0;font-family:var(--lp-display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--lp-ink)}
.waste-panel-sub{margin:4px 0 0;color:var(--lp-muted);font-size:12.5px;line-height:1.5}
.waste-panel-foot{margin:0;color:var(--lp-muted);font-size:12.5px}
/* An empty panel says so in a line rather than reserving a blank band where a table would go. */
.waste-empty{margin:0;color:var(--lp-muted);font-size:14px}
.waste-split{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:20px;align-items:start}

/* A segmented control for what redraws rather than reloads: the grouping, and the product sort. */
.waste-segment{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-ground)}
.waste-segment-button{min-height:36px;padding:0 13px;border:0;border-radius:9px;background:none;color:var(--lp-muted);
  font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.waste-segment-button.active{background:var(--lp-primary);color:var(--lp-primary-ink)}
@media (hover:hover){.waste-segment-button:hover:not(.active){color:var(--lp-ink)}}

/* ── Tables ─────────────────────────────────────────────────────────────────────────────────── */
/* Wide tables scroll inside their own box. The page itself must never scroll sideways. */
.waste-scroll{overflow-x:auto;min-width:0}
.waste-ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13.5px}
.waste-ledger th{padding:0 12px 10px;text-align:left;border-bottom:1px solid var(--lp-line);color:var(--lp-muted);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.waste-ledger th.numeric,.waste-ledger td.numeric{text-align:right;white-space:nowrap}
.waste-ledger td{padding:12px;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent);
  vertical-align:top;color:var(--lp-ink)}
.waste-ledger th:first-child,.waste-ledger td:first-child{padding-left:0}
.waste-ledger th:last-child,.waste-ledger td:last-child{padding-right:0}
.waste-ledger tbody tr:last-child td{border-bottom:0}
.waste-ledger tfoot th,.waste-ledger tfoot td{padding:12px 12px 0;border-top:1px solid var(--lp-line);border-bottom:0;
  color:var(--lp-ink);font-weight:700;text-transform:none;letter-spacing:0;font-size:13.5px}
.waste-ledger tfoot th{text-align:left;padding-left:0}
.waste-ledger tfoot td:last-child{padding-right:0}
.waste-ledger-when{white-space:nowrap}
.waste-ledger-when strong{display:block;font-weight:600}
.waste-ledger-when small{display:block;margin-top:2px;color:var(--lp-muted);font-size:11.5px}
.waste-ledger-name strong{display:block;font-weight:600}
.waste-ledger-name small{display:block;margin-top:2px;color:var(--lp-muted);font-size:12px}
.waste-muted-cell{color:var(--lp-muted);font-size:12.5px}
.waste-ledger-total strong{display:block;font-weight:700}
/* A number beside a bar is easier to rank than a column of numbers. The bar is a secondary cue and
   the figure above it is the fact, so the bar never carries a value of its own. */
.waste-bar{display:block;width:100%;min-width:48px;height:4px;margin-top:6px;border-radius:999px;background:var(--waste-bar-track)}
.waste-bar-fill{display:block;height:100%;border-radius:999px;background:var(--waste-bar)}

/* ── Why it was thrown out: name and figure on a shared right edge ──────────────────────────── */
.waste-reasons{list-style:none;margin:0;padding:0;display:grid}
.waste-reason-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
.waste-reason-row:last-child{border-bottom:0}
.waste-reason-name{flex:1 1 auto;min-width:0}
.waste-reason-name strong{display:block;font-size:14px;font-weight:600;color:var(--lp-ink)}
.waste-reason-figures{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
/* Its own figures only: written without the ">" these reached inside the change pill and set its
   arrow and percentage in grey and its figure in ink, off the pill's red or green and under 4.5:1. */
.waste-reason-figures>strong{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lp-ink)}
.waste-reason-figures>span{color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}

/* ── The chart in the fold ──────────────────────────────────────────────────────────────────── */
.waste-chart{display:block;height:178px;width:100%;min-width:320px;max-width:760px}
.waste-chart-base{stroke:var(--lp-line)}
.waste-chart-bar{fill:var(--waste-bar)}
.waste-chart-value{fill:var(--lp-ink);font-size:11px;font-family:var(--lp-body);font-weight:600}
.waste-chart-label{fill:var(--lp-muted);font-size:10px;font-family:var(--lp-body)}

/* ── Narrower screens ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .waste-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .waste-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* A phone gets the short labels: six presets at their full names wrap to three rows and push
     the first figure under the fold. */
  .waste-preset{padding:0 12px}
  .waste-preset-long{display:none}
  .waste-preset-short{display:inline}
  .waste-sum-title h2{font-size:25px}
  .waste-metric-value{font-size:25px}
  /* Two even halves however long a store's name: at 1fr a select was as wide as its longest option,
     and the location ran 12px under the log beside it. */
  .waste-custom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .waste-custom .waste-sum-field{min-width:0}
  .waste-custom .waste-sum-field :is(input,select){width:100%;min-width:0}
  .waste-custom .waste-apply{grid-column:1 / -1}
  .waste-panel{padding:18px 16px 16px}
  .waste-finding{padding:18px 16px}
  .waste-finding p{font-size:17px}
  .waste-panel-head{align-items:flex-start;flex-direction:column}
  .waste-reason-row{gap:12px}

  /* On a phone a period is a card, not a table row: the day and its total on one line, then each
     log that wasted anything under it with its name beside its figure. Six columns on 358px meant
     the total -- the one figure the row exists for -- sat off the edge of the screen. */
  .waste-periods,.waste-periods tbody,.waste-periods tfoot{display:block}
  .waste-periods thead{display:none}
  .waste-periods tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;
    border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .waste-periods tbody tr:last-child{border-bottom:0}
  .waste-periods tfoot tr{border-top:1px solid var(--lp-line);border-bottom:0;padding-bottom:0}
  .waste-periods :is(td,th){display:block;padding:0 !important;border:0 !important}
  .waste-periods :is(.waste-ledger-when,tfoot th){grid-column:1;grid-row:1}
  .waste-periods .waste-ledger-total{grid-column:2;grid-row:1;min-width:92px}
  .waste-periods .waste-area-cell{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;
    color:var(--lp-muted);font-size:12.5px;font-weight:400}
  .waste-periods .waste-area-cell::before{content:attr(data-label);text-align:left}
  .waste-periods .waste-area-cell.is-empty{display:none}

  /* A product is a card too: its name and cost on the first line, what it was and why beneath. */
  .waste-products,.waste-products tbody{display:block}
  .waste-products thead{display:none}
  .waste-products tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 14px;padding:14px 0;
    border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .waste-products tbody tr:last-child{border-bottom:0}
  .waste-products td{display:block;padding:0 !important;border:0 !important}
  .waste-products .waste-ledger-name{order:0;flex:1 1 calc(100% - 124px);min-width:0}
  .waste-products .waste-ledger-total{order:1;flex:0 0 96px;text-align:right}
  .waste-products .waste-product-meta{order:2;flex:0 1 auto;min-width:0;color:var(--lp-muted);font-size:12.5px;
    text-align:left;white-space:normal !important}
  .waste-products .waste-product-meta::before{content:attr(data-label) " ";font-weight:600;color:var(--lp-ink)}
  .waste-products .waste-product-change{order:3;flex:0 0 auto}
  .waste-products .waste-product-change .waste-pill{padding:2px 9px}
  /* A segmented control spans the card on a phone rather than running off its edge. */
  .waste-panel-head .waste-segment{display:flex;width:100%}
  .waste-panel-head .waste-segment-button{flex:1 1 0;padding:0 6px}
}

/* ── One log at a time ──────────────────────────────────────────────────────────────────────────
   Today's list, the products, the reasons and every entry are split by the log they were written
   in. The heading is the log's name with what it came to on the same line, figures on the right
   edge the rows below share; a log after the first is set off by space, not a second rule. */
.waste-log-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
.waste-log-title strong{font-family:var(--lp-display);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--lp-ink)}
.waste-log-title span{color:var(--lp-muted);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.waste-log-group .waste-log-head th{padding:14px 0 8px;text-align:left;white-space:normal;text-transform:none;
  letter-spacing:0;font-size:inherit;font-weight:400;color:var(--lp-ink);border-bottom:1px solid var(--lp-line)}
.waste-log-group+.waste-log-group .waste-log-head th{padding-top:26px}
.waste-log-group:first-of-type .waste-log-head th{padding-top:12px}
/* The crossed-out rows a log keeps, one link under its own rows. */
.waste-voided-toggle td{padding:4px 0 6px;border-bottom:0}
.waste-voided-toggle .waste-link{margin:0}
.waste-log-more td{padding:10px 0 4px;border-bottom:0}
/* Reasons are a list rather than a table, so a log's heading there is a heading of its own. */
.waste-panel h4.waste-log-title{padding:4px 0 8px;border-bottom:1px solid var(--lp-line)}
.waste-panel .waste-reasons+h4.waste-log-title{margin-top:14px}
@media (max-width:560px){
  /* On a phone a product is a card, and the heading over a log's cards spans the row. */
  .waste-products .waste-log-head,.waste-products .waste-log-more{padding:0;border-bottom:0}
  .waste-products .waste-log-head th,.waste-products .waste-log-more td{display:block;flex:1 1 100%}
  .waste-products .waste-log-head th{padding:14px 0 8px !important;border-bottom:1px solid var(--lp-line) !important}
  .waste-products .waste-log-group+.waste-log-group .waste-log-head th{padding-top:24px !important}
}

/* The question a renamed line asks before its past entries follow it: each old name and new name,
   with the count on a shared right edge. */
.waste-rename-dialog { width:min(480px,calc(100vw - 32px)); }
.waste-rename-list { list-style:none; margin:0; padding:0; }
.waste-rename-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--lp-line); }
.waste-rename-names { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.waste-rename-old { color:var(--lp-muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--lp-muted) 60%, transparent); }
.waste-rename-arrow { color:var(--lp-muted); }
.waste-rename-new { color:var(--lp-ink); font-weight:650; }
.waste-rename-count { flex:0 0 auto; color:var(--lp-muted); font-size:14px; font-variant-numeric:tabular-nums; }
/* On a phone the two answers stack; full width, so neither reads as the lesser one by its size. */
@media (max-width:600px) { .waste-rename-dialog .waste-dialog-actions button { flex:1 1 100%; } }
/* An edit kept from an editor closed without saving, said once above the list it reopens on. */
.waste-closing-held { margin:10px 0 0; padding:8px 12px; border-radius:10px; background:color-mix(in srgb, var(--lp-line) 40%, transparent); color:var(--lp-ink); font-size:14px; line-height:1.45; }
.waste-closing-held.overtaken { background:#fbf0dc; box-shadow:inset 0 0 0 1px #e3c48a; }
/* Save for every store: the changes, then the stores they land on. */
.waste-spread-list { list-style:none; margin:0; padding:0; }
.waste-spread-row { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--lp-line); }
.waste-spread-kind { color:var(--lp-muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.waste-spread-line { color:var(--lp-ink); }
.waste-spread-pick { display:flex; flex-wrap:wrap; gap:10px 18px; margin:16px 0 0; }
.waste-spread-store { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--lp-ink); font-weight:600; cursor:pointer; }
.waste-spread-store input { width:20px; height:20px; accent-color:var(--lp-primary); }
.waste-spread-store input:disabled+span { color:var(--lp-muted); }
.waste-spread-stores { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:baseline; gap:12px; margin:14px 0 0; color:var(--lp-ink); line-height:1.45; }
/* On a phone the editor's three buttons would stack ragged down the right edge: Save for every
   store takes a row of its own above, Cancel and Save list share the one under it. */
@media (max-width:600px) {
  #waste-closing-dialog .waste-dialog-actions > button { flex:1 1 0; }
  #waste-closing-dialog #waste-closing-save-all { flex:1 1 100%; order:-1; }
  #waste-closing-dialog .waste-dialog-error { order:-2; }
}

/* Match to item: a name the summary cannot price, said which item it was. The link sits under the
   product's name; the sheet says what will move, store by store, then offers the items it could be. */
.waste-ledger-name .waste-match-open { display:inline-flex; align-items:center; min-height:44px; margin:-8px 0 -12px -4px; padding:0 4px; color:var(--lp-primary); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.waste-match-dialog { width:min(520px,calc(100vw - 32px)); }
.waste-rename-link { flex:1 1 100%; color:var(--lp-muted); font-size:13px; }
.waste-match-label { display:block; margin:0 0 6px; color:var(--lp-muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.waste-match-name { margin:0 0 4px; }
.waste-match-name strong { font-size:17px; font-weight:650; color:var(--lp-ink); }
.waste-match-where .waste-rename-list { margin-bottom:6px; }
.waste-match-store { min-width:0; display:flex; flex-direction:column; gap:2px; }
.waste-match-store strong { font-weight:600; color:var(--lp-ink); }
.waste-match-store small { color:var(--lp-muted); font-size:13px; }
.waste-match-search { margin-top:18px; }
.waste-match-find { width:100%; min-height:44px; padding:0 14px; border:1px solid var(--lp-line); border-radius:16px; background:var(--lp-card); color:var(--lp-ink); font:inherit; }
.waste-match-hits { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.waste-match-hit { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:44px; padding:10px 14px; border:0; border-radius:12px; background:var(--lp-soft); color:var(--lp-ink); font:inherit; text-align:left; cursor:pointer; }
.waste-match-hit strong { font-weight:600; }
.waste-match-hit small { color:var(--lp-muted); font-size:12.5px; }
.waste-match-hit.on { background:var(--lp-ink); color:var(--lp-card); }
.waste-match-hit.on small { color:var(--lp-card); }
.waste-match-none { margin:4px 0 0; color:var(--lp-muted); font-size:13px; }
@media (hover:hover) { .waste-match-hit:not(.on):hover { background:var(--lp-sidebar-hover); } }
@media (max-width:600px) { .waste-match-dialog .waste-dialog-actions button { flex:1 1 0; } }

/* ── A period, product by product ───────────────────────────────────────────────────────────────
   A row of the period table opens on its products (Ben, 2 October). The row is the target, so it
   lifts on hover and carries a chevron; a log's own figure in it opens the period on that log.
   The table bleeds its rows 10px past the card's text edge so the lift has room round the words. */
.waste-scroll:has(> .waste-periods){margin:0 -10px}
.waste-periods :is(th,td):first-child{padding-left:10px}
.waste-periods :is(th,td):last-child{padding-right:10px}
.waste-periods .waste-period-go{width:16px;padding-left:4px}
.waste-period-row{cursor:pointer}
.waste-period-row td{transition:background-color .12s ease}
.waste-period-open{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.waste-period-open strong{display:block;font-weight:600}
.waste-period-open small{display:block;margin-top:2px;color:var(--lp-muted);font-size:11.5px}
.waste-chevron{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.waste-period-go .waste-chevron{margin-top:1px;color:var(--lp-muted);transition:transform .15s ease,color .15s ease}
.waste-period-row:active td,.waste-period-row:has(.waste-period-open:focus-visible) td{background:var(--lp-soft)}
@media (hover:hover){
  .waste-period-row:hover td{background:var(--lp-soft)}
  .waste-period-row:hover .waste-period-go .waste-chevron{color:var(--lp-ink);transform:translateX(2px)}
  .waste-period-row td[data-area]:hover{text-decoration:underline;text-decoration-color:var(--lp-accent);text-decoration-thickness:2px;text-underline-offset:4px}
}
@media (max-width:560px){
  .waste-periods tr{grid-template-columns:minmax(0,1fr) auto 16px;padding:14px 10px}
  .waste-periods .waste-area-cell{grid-column:1 / 3}
  .waste-periods .waste-period-go{grid-column:3;grid-row:1;align-self:center;width:auto}
  .waste-periods .waste-period-row:active{background:var(--lp-soft)}
  .waste-periods .waste-period-row td{background:none !important}
}
@media (max-width:560px) and (hover:hover){.waste-periods .waste-period-row:hover{background:var(--lp-soft)}}

/* The drawer: a panel floating at the right edge of a wide screen, a sheet from the bottom of a
   narrow one. Its head stays put and its body scrolls, so the period's name and the way to the
   next one are always in reach. */
.waste-drawer{position:fixed;inset:12px 12px 12px auto;margin:0;padding:0;width:min(600px,calc(100vw - 24px));
  height:auto;max-width:none;max-height:none;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-card);
  color:var(--lp-ink);font-family:var(--lp-body);-webkit-font-smoothing:antialiased;
  box-shadow:0 2px 6px rgb(61 32 19 / 8%),0 28px 64px -24px rgb(61 32 19 / 42%);flex-direction:column;overflow:hidden}
.waste-drawer[open]{display:flex;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
@starting-style{.waste-drawer[open]{transform:translateX(28px);opacity:0}}
.waste-drawer::backdrop{background:color-mix(in srgb, var(--lp-ink) 34%, transparent)}
.waste-drawer[open]::backdrop{transition:background-color .2s ease}
@starting-style{.waste-drawer[open]::backdrop{background-color:transparent}}
.waste-drawer button{font-family:inherit}
.waste-drawer :is(button,[tabindex]):focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

.waste-drawer-head{flex:0 0 auto;padding:12px 16px 16px 22px;border-bottom:1px solid var(--lp-line)}
.waste-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.waste-drawer-eyebrow{margin:0;min-width:0;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waste-drawer-close{flex:0 0 auto;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  border-radius:16px;background:none;color:var(--lp-muted);cursor:pointer}
.waste-drawer-close svg,.waste-drawer-stepper svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.waste-drawer-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:6px}
.waste-drawer-titlebar h2{margin:0;min-width:0;font-family:var(--lp-display);font-size:26px;font-weight:600;line-height:1.15;
  letter-spacing:-.015em;color:var(--lp-ink)}
.waste-drawer-step{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.waste-drawer-position{margin-right:4px;color:var(--lp-muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.waste-drawer-stepper{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--lp-line);
  border-radius:16px;background:var(--lp-card);color:var(--lp-ink);box-shadow:var(--lp-shadow);cursor:pointer;
  transition:background-color .12s ease}
.waste-drawer-stepper:disabled{color:color-mix(in srgb, var(--lp-muted) 45%, transparent);box-shadow:none;cursor:default}
@media (hover:hover){
  .waste-drawer-close:hover{background:var(--lp-soft);color:var(--lp-ink)}
  .waste-drawer-stepper:not(:disabled):hover{background:var(--lp-soft)}
}

/* Rows at their content's height: in a grid taller than its box an auto row shrinks a scroll
   container inside it (the phone's swiping chips) to nothing. */
.waste-drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;
  grid-auto-rows:max-content;gap:20px;padding:20px 22px 28px}

/* What the period came to: the cost leads, with its change, and the two counts beside it. */
.waste-period-stats{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));column-gap:18px}
.waste-period-stat{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;min-width:0}
.waste-period-stat+.waste-period-stat{padding-left:18px;border-left:1px solid var(--lp-line)}
.waste-period-stat p{margin:0}
.waste-period-figure{align-self:end;margin:6px 0 10px !important;font-family:var(--lp-display);font-size:24px;font-weight:600;
  line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--lp-ink);overflow-wrap:anywhere}
.waste-period-stat.is-lead .waste-period-figure{font-size:34px}
.waste-period-star{margin-left:2px;color:var(--lp-muted);font-size:.6em;vertical-align:super}

/* Which log: round chips, each with what that log came to, the chosen one filled. On a phone they
   are one row that swipes, faded at the edge it continues past, so the products start where they can
   be seen rather than under four rows of chips. */
.waste-period-areas{display:flex;flex-wrap:wrap;gap:6px}
.waste-period-area{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid var(--lp-line);
  border-radius:999px;background:var(--lp-card);color:var(--lp-ink);font-size:13px;white-space:nowrap;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease}
.waste-period-area strong{font-weight:600}
.waste-period-area span{color:var(--lp-muted);font-variant-numeric:tabular-nums}
.waste-period-area[aria-pressed="true"]{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink)}
.waste-period-area[aria-pressed="true"] span{color:color-mix(in srgb, var(--lp-primary-ink) 80%, var(--lp-primary))}
@media (hover:hover){.waste-period-area[aria-pressed="false"]:hover{background:var(--lp-soft)}}

/* The products, under their log. A product is one button the width of the list; open, its
   entries hang under it on a rule. */
.waste-period-group{display:grid;gap:2px;min-width:0}
.waste-period-group > .waste-log-title{padding:0 0 8px;border-bottom:1px solid var(--lp-line)}
.waste-pp{list-style:none;margin:0;padding:0}
.waste-pp-item{border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
.waste-pp-item:last-child{border-bottom:0}
.waste-pp-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(72px,1fr) auto 16px;align-items:center;gap:14px;
  width:calc(100% + 20px);min-height:60px;margin:0 -10px;padding:11px 10px;border:0;border-radius:10px;background:none;
  color:var(--lp-ink);font-size:14px;text-align:left;cursor:pointer;transition:background-color .12s ease}
.waste-drawer .waste-pp-row:focus-visible{outline-offset:-2px}
.waste-pp-name{min-width:0}
.waste-pp-name strong{display:block;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.waste-pp-name small{display:block;margin-top:3px;color:var(--lp-muted);font-size:12.5px;line-height:1.4}
.waste-pp-figure{display:flex;flex-direction:column;align-items:flex-end;width:96px}
/* The amount sits in the middle of the room between the name and the cost, on the same line in
   every row, so a column of counts reads down the drawer. */
.waste-pp-amount{display:flex;flex-direction:column;align-items:center;justify-self:center;gap:2px;text-align:center}
/* Number and unit on two fixed tracks: the numbers share a right edge and the units a left one,
   whatever the count or the unit. */
.waste-pp-amount-part{display:grid;grid-template-columns:48px 44px;column-gap:6px;align-items:baseline;white-space:nowrap;color:var(--lp-muted);font-size:12.5px}
.waste-pp-amount-part strong{justify-self:end;font-family:var(--lp-display);font-size:19px;font-weight:600;line-height:1.1;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.waste-pp-amount-part span{justify-self:start}
.waste-pp-figure strong{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.waste-pp-figure .waste-bar{min-width:0}
.waste-pp-chev{color:var(--lp-muted)}
.waste-pp-chev .waste-chevron{transition:transform .18s ease}
.waste-pp-row[aria-expanded="true"] .waste-pp-chev .waste-chevron{transform:rotate(90deg)}
.waste-pp-row[aria-expanded="true"]{background:var(--lp-soft)}
@media (hover:hover){.waste-pp-row:hover{background:var(--lp-soft)}}
.waste-pp-entries{list-style:none;margin:2px 0 12px 4px;padding:0 0 0 14px;border-left:2px solid var(--lp-line)}
.waste-pp-entries[hidden]{display:none}
.waste-pp-entry{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px}
.waste-pp-entry+.waste-pp-entry{border-top:1px solid color-mix(in srgb, var(--lp-line) 55%, transparent)}
.waste-pp-entry-main{min-width:0}
.waste-pp-entry-main strong{font-weight:600}
.waste-pp-entry-main small{display:block;margin-top:2px;color:var(--lp-muted);font-size:12.5px;overflow-wrap:anywhere}
.waste-pp-entry-cost{flex:0 0 auto;padding-right:30px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* A sheet from the bottom on a phone and a tablet held upright: the same width as the screen up to
   a comfortable measure, and the same height whichever period it holds, so stepping through them
   never makes it jump. */
@media (max-width:899px){
  .waste-drawer{inset:auto 0 0 0;margin:0 auto;width:min(720px,100vw);height:min(86dvh,calc(100dvh - 24px - env(safe-area-inset-top,0px)));
    border-bottom:0;border-radius:20px 20px 0 0}
  @starting-style{.waste-drawer[open]{transform:translateY(48px);opacity:0}}
  .waste-drawer-body{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .waste-drawer-head{padding:10px 10px 14px 16px}
  .waste-drawer-titlebar h2{font-size:22px}
  .waste-drawer-body{padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));gap:18px}
  .waste-drawer-position{display:none}
  .waste-period-stats{column-gap:12px}
  .waste-period-stat+.waste-period-stat{padding-left:12px}
  .waste-period-figure{font-size:20px}
  .waste-period-stat.is-lead .waste-period-figure{font-size:28px}
  .waste-pp-figure{width:80px}
  .waste-pp-row{gap:10px;grid-template-columns:minmax(0,1fr) auto auto 16px}
  .waste-pp-amount-part{grid-template-columns:34px 32px;column-gap:4px}
  .waste-pp-amount-part strong{font-size:17px}
  .waste-period-areas{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 32px 0 16px;scrollbar-width:none;scroll-padding:0 16px;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
  .waste-period-areas::-webkit-scrollbar{display:none}
  .waste-pp-entry-cost{padding-right:26px}
}
@media (prefers-reduced-motion:reduce){
  .waste-drawer[open],.waste-drawer[open]::backdrop{transition:none}
  .waste-period-row td,.waste-period-go .waste-chevron,.waste-pp-row,.waste-pp-chev .waste-chevron{transition:none}
}

/* ── Phones and tablets, checked on 4 October ───────────────────────────────────────────────────
   Every screen driven at two phone sizes and both iPads both ways round (scripts/
   drive-waste-devices.mjs). What that found, one rule each. */

/* Terracotta text and the white on a terracotta button cleared 3.8-4.2:1. One step darker clears
   4.5 on the card and the page, and is still the terracotta of the brand. */
.waste-main{--waste-action:#ad5532}
.waste-link,.waste-hit-add,.waste-reason-empty,.waste-closing-editor-link,.waste-day-chip.waste-day-back strong,
.waste-closing-why.unset,.waste-closing-line-why.unset{color:var(--waste-action)}
.waste-reason-empty,.waste-closing-why.unset,.waste-closing-line-why.unset{border-color:color-mix(in srgb, var(--waste-action) 55%, var(--lp-line))}
:is(.waste-primary,.waste-save,.waste-closing-save,.waste-apply):not(:disabled){background:var(--waste-action)}
@media (hover:hover){:is(.waste-primary,.waste-save,.waste-closing-save,.waste-apply):not(:disabled):hover{background:var(--waste-action)}}

/* The item a sheet is about is what the sheet is about: a line to read, not an eleven-pixel caption. */
.waste-dialog .waste-sheet-subject{margin:2px 0 10px;font-size:16px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--lp-ink);line-height:1.35}

/* A hidden hint still widened the page: under the right-hand tiles it pushed a phone's summary 81px
   sideways. It is out of the layout until it shows, and once showing, web/waste.js moves it back
   inside the screen by what it overhangs. */
.waste-hint{display:none;left:var(--waste-hint-shift,0)}
:is(.waste-pill,.waste-metric-figure):is(:hover,:focus)+.waste-hint{display:grid}
@starting-style{:is(.waste-pill,.waste-metric-figure):is(:hover,:focus)+.waste-hint{opacity:0}}

/* The chips sit together from the left. Spread across the bar with 12px gaps they came to 789px on
   an 820px iPad held upright, one over. */
.waste-device{justify-content:flex-start;gap:8px}

/* Every control a finger presses is 44px. */
.waste-flash-action{min-height:44px}
.waste-today-table .waste-link,.waste-detail-actions .waste-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px}
@media (pointer:coarse){
  .waste-segment-button{min-height:44px}
  .waste-closing-editor-unit,.waste-closing-editor-link{min-height:44px;padding-left:14px;padding-right:14px}
  .waste-closing-editor-grip{width:44px}
}
/* The day sheet's calendar, drawn for a thumb: its days and arrows at 44px, the grid the sheet's width. */
#waste-day-dialog .bdp-inline{--bdp-cell:min(52px, calc((100vw - 40px) / 7));width:calc(var(--bdp-cell) * 7)}
#waste-day-dialog .bdp-day{width:calc(var(--bdp-cell) - 4px);height:calc(var(--bdp-cell) - 4px);font-size:15px}
#waste-day-dialog .bdp-nav{width:44px;height:44px}
#waste-day-dialog .bdp-weekday{font-size:12px}

@media (max-width:600px){
  /* The station bar is two rows, not four. The skin's display face put each chip's value at 1.05rem
     and the three chips stacked, 181px of a phone held at the top of every scroll. The store and
     the day share the first row, the name the second. */
  .waste-device{gap:6px;padding:8px 12px}
  .waste-device-chip{min-height:44px;padding:5px 11px;gap:0;justify-content:center}
  .waste-device-chip strong{font-family:var(--lp-body);font-size:14px;font-weight:650;line-height:1.3}
  .waste-device-chip:first-child{order:0;flex:1 1 55%}
  .waste-day-chip{order:1;flex:0 0 auto}
  .waste-who-chip{order:2;flex:1 1 30%}
  /* The list editor: the name beside its arrows, then its unit, its item and the × under it, the
     whole row's width. In one row the item each line is costed from was cut to "Almo…" and the name
     to "Babka (Individua". */
  .waste-closing-editor-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;
    grid-template-areas:"grip name up down" ". meta meta drop";gap:6px;align-items:center}
  .waste-closing-editor-main{display:contents}
  .waste-closing-editor-grip{grid-area:grip}
  .waste-closing-editor-name{grid-area:name;min-width:0}
  .waste-closing-editor-row>:nth-child(3){grid-area:up}
  .waste-closing-editor-row>:nth-child(4){grid-area:down}
  .waste-closing-editor-drop{grid-area:drop}
  .waste-closing-editor-meta{grid-area:meta}
  .waste-closing-editor-meta .waste-closing-editor-link{white-space:normal;text-align:left;line-height:1.25;padding-top:6px;padding-bottom:6px}
  /* A one- or two-letter preset was a 39px target. */
  .waste-preset{min-width:44px}

  /* Logged today is two lines a row, not five columns: the item and its cost, then the day and the
     amount under it. Five columns wrapped every name into four lines and ran 6px off a 375px phone. */
  .waste-today-table,.waste-today-table tbody{display:block}
  .waste-today-table thead{display:none}
  .waste-today-table tr:not(.waste-log-head,.waste-detail-row,.waste-voided-toggle){display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"item item cost act" "day amount amount act";column-gap:8px;row-gap:1px;align-items:center;padding:9px 0;
    border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .waste-today-table tr:is(.waste-log-head,.waste-detail-row,.waste-voided-toggle){display:block}
  .waste-today-table :is(td,th){display:block;padding:0;border:0}
  .waste-today-table .waste-log-head th{padding:16px 0 6px;border-bottom:1px solid var(--lp-line)}
  .waste-today-table .waste-detail-row td{padding:0 0 10px;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .waste-today-table .waste-today-item{grid-area:item;min-width:0;font-weight:600}
  .waste-today-table .waste-cost-cell{grid-area:cost;text-align:right}
  .waste-today-table .waste-row-action{grid-area:act}
  .waste-today-table :is(.waste-day-cell,.waste-today-amount){color:var(--lp-muted);font-size:12.5px;text-align:left}
  .waste-today-table .waste-day-cell{grid-area:day}
  .waste-today-table .waste-day-cell::after{content:" ·"}
  .waste-today-table .waste-today-amount{grid-area:amount}
  .waste-today-table .waste-row-action .waste-link{margin:0;font-size:13px}
}

/* ── Emails ───────────────────────────────────────────────────────────────────────────────────
   Three cards in the summary's width: your own emails, everyone you may enrol, and the links from a
   waste item to what Square sold. Switches for your own, ticks in a table for others, because one
   is three answers and the other is a column a manager reads down. */
#waste-emails-view:not([hidden]){display:grid;gap:20px;padding-top:24px}
#waste-emails{display:grid;gap:18px;min-width:0}
/* A card that loads on its own sits in a slot it can redraw without moving the page. */
.waste-mail-slot{display:grid;min-width:0}
.waste-mail-card{display:grid;gap:4px;padding:22px 24px;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-card);box-shadow:var(--lp-shadow);min-width:0}
.waste-mail-eyebrow{margin:0;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.waste-mail-title{margin:0 0 8px;font-family:var(--lp-display);font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--lp-ink)}
.waste-mail-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--lp-line);cursor:pointer}
.waste-mail-row:last-of-type{border-bottom:0}
.waste-mail-copy{display:grid;gap:2px;flex:1;min-width:0}
.waste-mail-copy strong{font-size:15px;color:var(--lp-ink)}
.waste-mail-copy small,.waste-mail-who small{color:var(--lp-muted);font-size:13px}
/* A switch drawn from the checkbox itself, so it keeps the box's keyboard and its label. */
.waste-mail-switch{appearance:none;flex:none;width:46px;height:28px;margin:0;border-radius:999px;background:var(--lp-line);position:relative;cursor:pointer;transition:background .15s ease}
.waste-mail-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s ease}
.waste-mail-switch:checked{background:var(--waste-down,#2f7a5b)}
.waste-mail-switch:checked::after{left:21px}
.waste-mail-switch:focus-visible,.waste-mail-check:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}
.waste-mail-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:12px}
.waste-mail-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 8px}
.waste-mail-search{flex:1 1 200px;max-width:320px;min-height:44px;padding:0 14px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-card);color:var(--lp-ink);font:inherit;font-size:14px;margin-left:auto}
.waste-mail-people{display:grid;min-width:0}
.waste-mail-person{display:grid;grid-template-columns:minmax(200px,2fr) minmax(120px,1.4fr) 64px 64px 64px minmax(170px,1.6fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--lp-line);font-size:14px}
.waste-mail-person:last-child{border-bottom:0}
.waste-mail-person-head{padding:6px 0;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.waste-mail-person-head span:nth-child(n+3):nth-child(-n+5){text-align:center}
.waste-mail-who{display:grid;gap:2px;min-width:0}
/* A name or an address wraps rather than ending in "...": two people at one store differ at the end. */
.waste-mail-who strong{overflow-wrap:anywhere;color:var(--lp-ink)}
.waste-mail-stores{color:var(--lp-ink);overflow-wrap:anywhere}
.waste-mail-cell{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.waste-mail-check{width:24px;height:24px;margin:0;accent-color:var(--waste-down,#2f7a5b);cursor:pointer}
.waste-mail-compare{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.waste-mail-select{min-height:44px;padding:0 10px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);color:var(--lp-ink);font:inherit;font-size:13.5px;font-weight:600}
.waste-mail-chosen{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;flex-basis:100%}
.waste-mail-chosen[hidden]{display:none}
.waste-mail-store{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.waste-mail-enrol{min-height:44px;padding:0 18px;min-width:104px}
.waste-mail-when{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--lp-line)}
.waste-mail-when strong{font-size:.95rem}
.waste-mail-when-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--lp-muted);font-size:.9rem}
/* Reminders (Ben, 12 October): a person, their stores, the devices that would ring, on or off, the
   time, and the row's own button. On for somebody with no device is the one state given a colour. */
.waste-remind-person{display:grid;grid-template-columns:minmax(180px,2fr) minmax(110px,1.3fr) minmax(104px,.9fr) 64px minmax(124px,1fr) 112px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lp-line);font-size:14px}
.waste-remind-person:last-child{border-bottom:0}
.waste-remind-person.waste-mail-person-head{padding:6px 0}
.waste-remind-person.waste-mail-person-head span{text-align:left}
.waste-remind-person.waste-mail-person-head span:nth-child(4){text-align:center}
.waste-remind-devices{color:var(--lp-muted);font-size:13px}
.waste-remind-devices.waste-remind-unreachable{color:#6b4c12;font-weight:650}
.waste-remind-toggle{min-height:44px;align-items:center;cursor:pointer}
.waste-remind-time .waste-mail-select,.waste-remind-person .waste-mail-enrol{width:100%;min-height:44px}
.waste-remind-person .waste-mail-enrol{min-width:0}
.waste-remind-device{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0 0}
.waste-remind-device-text{margin:0;flex:1 1 220px;color:var(--lp-muted);font-size:13.5px;line-height:1.4}
.waste-remind-allow{min-height:44px;padding:0 16px}
.waste-mail-when .waste-mail-select{min-height:44px}
.waste-mail-links{display:grid}
.waste-mail-link{display:grid;grid-template-columns:minmax(200px,1.6fr) minmax(180px,1.4fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lp-line)}
.waste-mail-link:last-child{border-bottom:0}
.waste-mail-link .waste-mail-search{margin:0;max-width:none}
.waste-mail-more{margin-top:10px}
.waste-mail-more summary{cursor:pointer;color:var(--lp-muted);font-size:13px;font-weight:600}
.waste-mail-empty{margin:6px 0;color:var(--lp-muted);font-size:13.5px}
.waste-mail-error{margin:0;color:var(--lp-high)}
@media (prefers-reduced-motion:reduce){.waste-mail-switch,.waste-mail-switch::after{transition:none}}
@media (max-width:820px){
  .waste-mail-card{padding:18px 16px}
  .waste-mail-person-head{display:none}
  .waste-mail-person{grid-template-columns:repeat(3,1fr);gap:10px}
  .waste-mail-who,.waste-mail-stores,.waste-mail-compare{grid-column:1 / -1}
  .waste-mail-cell{justify-content:flex-start;gap:8px}
  .waste-mail-cell::before{content:attr(data-label);color:var(--lp-muted);font-size:12px;font-weight:600}
  .waste-remind-person{grid-template-columns:1fr 1fr;gap:8px 12px}
  .waste-remind-person .waste-mail-who,.waste-remind-person .waste-mail-stores{grid-column:1 / -1}
  .waste-remind-toggle{justify-content:flex-end}
  .waste-mail-link{grid-template-columns:1fr auto}
  .waste-mail-link .waste-mail-who{grid-column:1 / -1}
  .waste-mail-search{max-width:none;margin-left:0}
}

/* Going back a day (Ben, 7 October 2026). Back, a calendar and forward sit beside the list's
   heading as one group of 44px squares; on an earlier day "Today" joins them. */
.waste-day-stepper{display:flex;align-items:center;gap:4px}
.waste-step-day,.waste-step-today{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);color:var(--lp-ink);font:inherit;cursor:pointer}
.waste-step-day{width:44px;padding:0}
.waste-step-day svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.waste-step-day:disabled{color:var(--lp-muted);opacity:.45;cursor:default}
.waste-step-today{padding:0 14px;margin-left:4px;font-size:14px;font-weight:650}
@media (hover:hover){.waste-step-day:not(:disabled):hover,.waste-step-today:hover{background:var(--lp-soft)}}
/* A fixed entry says so on its row, in words. */
.waste-edited-tag{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--lp-line);border-radius:999px;
  color:var(--lp-muted);font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
  text-decoration:none;white-space:nowrap}
/* What a fixed entry said before: folded shut, greyed and struck through, what it says now last. */
.waste-history{margin:0 0 10px}
.waste-history-head{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--lp-muted);font-size:13px;font-weight:650}
.waste-history-lines{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--lp-line);display:grid;gap:6px}
.waste-history-lines li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:13px;font-variant-numeric:tabular-nums}
.waste-history-old{color:var(--lp-muted)}
.waste-history-old .waste-history-what{text-decoration:line-through}
.waste-history-now .waste-history-what{color:var(--lp-ink);font-weight:650}
.waste-history-when{color:var(--lp-muted);font-size:12.5px}
/* Changing an earlier day's entry: said at the top of the sheet, in the notice colours. */
.waste-past-warning{display:grid;gap:2px;margin:0 0 14px;padding:10px 14px;border:1px solid #e8c990;border-radius:12px;
  background:#fdf3e4;color:#6b4c12;font-size:13.5px;line-height:1.4}
.waste-past-warning strong{font-size:14px;color:#5a3f0e}

/* Items: the business's own, priced here (Waste Logs › Items). */
#waste-items{display:grid;gap:14px;max-width:980px}
.waste-own-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-top:4px}
.waste-own-field{display:grid;gap:6px;min-width:0}
.waste-own-field>span,.waste-own-label{color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.waste-own-input{min-height:42px;padding:0 12px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);color:var(--lp-ink);font:inherit;font-size:15px;min-width:0;width:100%}
.waste-own-input:focus{outline:2px solid var(--lp-primary);outline-offset:1px}
.waste-own-price-row{display:flex;align-items:center;gap:6px;min-width:0}
.waste-own-price-row .waste-mail-select{min-height:42px}
.waste-own-dollar{color:var(--lp-muted);font-weight:600}
.waste-own-price{max-width:110px}
.waste-own-similar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0}
.waste-own-chip{padding:4px 10px;border-radius:999px;background:var(--lp-soft);color:var(--lp-ink);font-size:12.5px}
.waste-own-where{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:10px}
.waste-own-stores{display:flex;flex-wrap:wrap;gap:8px 14px}
.waste-own-import{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.waste-own-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.waste-own-pick{display:inline-flex;align-items:center;cursor:pointer}
.waste-own-file:focus-visible+.waste-own-pick{outline:2px solid var(--lp-primary);outline-offset:2px}
.waste-own-summary{margin:12px 0 4px;color:var(--lp-ink);font-weight:600;font-size:14px}
.waste-own-preview{display:grid;gap:0;max-height:360px;overflow:auto;border:1px solid var(--lp-line);border-radius:12px}
.waste-own-preview-row{display:grid;grid-template-columns:36px minmax(0,1.4fr) minmax(0,1.6fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--lp-line);font-size:13.5px}
.waste-own-preview-row:last-child{border-bottom:0}
.waste-own-row-number{color:var(--lp-muted);font-variant-numeric:tabular-nums}
.waste-own-status{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--lp-soft);color:var(--lp-muted);white-space:nowrap}
.waste-own-new .waste-own-status{background:#e1efe8;color:#2f7a5b}
.waste-own-update .waste-own-status{background:#fbefe7;color:#a8532f}
.waste-own-error .waste-own-status{background:#f8e4df;color:#b0412e}
.waste-own-error span:nth-child(3){color:#b0412e}
.waste-own-list{display:grid}
.waste-own-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--lp-line)}
.waste-own-price-label{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.waste-own-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.waste-own-replace{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 12px;border-bottom:1px solid var(--lp-line)}
.waste-own-archived{grid-template-columns:1fr;opacity:.7}
/* Items: the Kitchen and FOH Supplies tabs beside the title, and one row per item with its cost on
   the right edge whatever the row carries. */
.waste-items-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.waste-items-filters{flex-wrap:wrap}
.waste-items-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start;padding:12px 0;border-bottom:1px solid var(--lp-line)}
.waste-items-row .waste-own-price-label{padding-top:1px}
.waste-items-row .waste-own-actions{grid-column:1 / -1;justify-content:flex-start}
.waste-items-row .waste-mail-who strong{white-space:normal;overflow-wrap:anywhere}
.waste-own-title{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.waste-own-badge{padding:2px 9px;border-radius:999px;background:var(--lp-soft);color:var(--lp-ink);font-size:11.5px;font-weight:600;white-space:nowrap}
.waste-own-badge-new{background:#e1efe8;color:#2f7a5b}
.waste-own-nocost{color:#a8532f;font-weight:600}
.waste-items-subhead{margin:20px 0 2px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.waste-items-more{justify-self:start;margin-top:12px}
@media (max-width:700px){
  .waste-own-form{grid-template-columns:1fr}
  .waste-own-price{max-width:none;flex:1}
  .waste-own-row{grid-template-columns:minmax(0,1fr) auto}
  .waste-own-actions{grid-column:1 / -1;justify-content:flex-start}
  .waste-items-head .waste-segment{width:100%}
  .waste-items-row .waste-mail-who{grid-column:auto}
  .waste-items-head .waste-segment-button{flex:1 1 0}
  .waste-own-preview-row{grid-template-columns:28px minmax(0,1fr) auto}
  .waste-own-preview-row span:nth-child(3){grid-column:2 / -1;grid-row:2}
}