*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #f4ecdd;
  --surface: #fffaf0;
  --surface-2: #efe4cf;
  --ink: #2b2118;
  --ink-soft: #66543f;
  --line: #d6c4a5;
  --wood: #7a4b2a;
  --wood-dark: #5a361d;
  --moss: #3f6b35;
  --focus: #1f5fa8;

  --st-placed: #2f5f86;
  --st-placed-bg: #e1ebf4;
  --st-prepping: #a8670f;
  --st-prepping-bg: #fbecd0;
  --st-ready: #2f7a35;
  --st-ready-bg: #dff0d8;
  --st-picked: #6f665c;
  --st-picked-bg: #ebe6df;
  --st-cancelled: #a3302a;
  --st-cancelled-bg: #f6dfdb;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.6rem;
  --fs-xl: 2.2rem;
  --fs-xxl: 3rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --tap: 48px;
  --tap-main: 64px;
  --shadow: 0 2px 0 rgba(90, 54, 29, 0.18), 0 6px 16px rgba(90, 54, 29, 0.10);
  --stitch: 2px dashed var(--line);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --conn-h-on: 56px;
}

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/1.4 var(--font-body);
  overflow-wrap: anywhere;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--sp-2); }
h1 { font-size: var(--fs-lg); }
h2 { font-size: var(--fs-md); }
h3 { font-size: var(--fs-base); }
p { margin: 0 0 var(--sp-2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--wood-dark); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.money, .num { font-variant-numeric: tabular-nums; }

.appbar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  background: var(--wood);
  color: #fff6e6;
  border-bottom: 4px solid var(--wood-dark);
}
.appbar__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-right: auto; }
.appbar__brand::before { content: "\2766  "; }
.appbar__nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.appbar__nav a, .appbar__logout {
  min-height: var(--tap); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm); color: #fff6e6; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
}
.appbar__nav a[aria-current="page"] { background: #fff6e6; color: var(--wood-dark); font-weight: 700; }
.appbar__logout { border: 1px solid #d8b894; }
.appbar__logout-form { margin: 0; }

body > *:not(.appbar) { width: 100%; max-width: 960px; margin-inline: auto; padding-inline: var(--sp-3); }
#main { padding-block: var(--sp-4); }
#live { display: none; }

#flash { width: calc(100% - 2 * var(--sp-3)); max-width: calc(960px - 2 * var(--sp-3)); margin: var(--sp-3) auto 0; padding: var(--sp-2) var(--sp-3); border-left: 6px solid var(--wood); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; }
#flash:empty { display: none; }

/* Colour alone fails colour-blind readers, so every status also shows a glyph and a word. */

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 2px solid; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  color: var(--ink);
}
.badge::before { font-size: 1.05em; }
.badge--placed { border-color: var(--st-placed); background: var(--st-placed-bg); }
.badge--placed::before { content: "\25CB"; color: var(--st-placed); }
.badge--prepping { border-color: var(--st-prepping); background: var(--st-prepping-bg); }
.badge--prepping::before { content: "\25D0"; color: var(--st-prepping); }
.badge--ready { border-color: var(--st-ready); background: var(--st-ready-bg); }
.badge--ready::before { content: "\2605"; color: var(--st-ready); }
.badge--picked { border-color: var(--st-picked); background: var(--st-picked-bg); }
.badge--picked::before { content: "\2713"; color: var(--st-picked); }
.badge--cancelled, .badge--returning { border-color: var(--st-cancelled); background: var(--st-cancelled-bg); }
.badge--cancelled::before { content: "\2715"; color: var(--st-cancelled); }
.badge--returning::before { content: "\21A9"; color: var(--st-cancelled); }

.group { margin-bottom: var(--sp-5); }
.group__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 4px solid var(--line);
}
.group__head h2 { margin: 0; }
.group--placed .group__head { border-bottom-color: var(--st-placed); }
.group--prepping .group__head { border-bottom-color: var(--st-prepping); }
.group--ready .group__head { border-bottom-color: var(--st-ready); }
.group--picked .group__head { border-bottom-color: var(--st-picked); }
.group--cancelled .group__head, .group--returning .group__head { border-bottom-color: var(--st-cancelled); }
.group__list { display: flex; flex-direction: column; gap: var(--sp-3); }

.count {
  min-width: 2em; padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface);
  font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}

.empty {
  padding: var(--sp-4);
  border: var(--stitch); border-radius: var(--r-md);
  color: var(--ink-soft); font-style: italic; text-align: center;
}
.empty::before { content: "\2618  "; font-style: normal; }

/* Card edges differ in pattern as well as colour so status survives colour blindness. */

.card {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 10px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.card--placed { border-left: 10px solid var(--st-placed); }
.card--prepping { border-left: 10px dashed var(--st-prepping); }
.card--ready { border-left: 10px double var(--st-ready); background: #f6fbf2; }
.card--picked { border-left: 10px dotted var(--st-picked); opacity: 0.85; }
.card--cancelled, .card--returning { border-left: 10px solid var(--st-cancelled); background: #fdf3f1; }
.card--cancelled .card__lines { text-decoration: line-through; }
.card__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-xl); line-height: 1; font-variant-numeric: tabular-nums;
}
.card__lines { margin: var(--sp-2) 0; }
.card__lines li { padding: 2px 0; }
.card__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.card__actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }

.age { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.age--warn { color: var(--ink); font-weight: 800; text-decoration: underline dotted 2px; }
.age--warn::before { content: "! "; }
.age--late {
  padding: 0 var(--sp-2); border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-weight: 800;
}
.age--late::before { content: "!! "; }

button, .btn {
  min-height: var(--tap); min-width: var(--tap);
  padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 2px solid var(--wood); border-radius: var(--r-md);
  background: var(--surface); color: var(--wood-dark);
  font-weight: 700; cursor: pointer; text-decoration: none;
  touch-action: manipulation;
}
.btn--primary { background: var(--wood); color: #fff6e6; border-color: var(--wood-dark); box-shadow: 0 3px 0 var(--wood-dark); }
.btn--big { min-height: var(--tap-main); font-size: var(--fs-md); padding: 0 var(--sp-5); }
.btn--block { display: flex; width: 100%; }
.btn--quiet { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-weight: 600; }
.btn--undo { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-weight: 600; }
.btn--undo::before { content: "\21B6"; }
.btn--danger { border-color: var(--st-cancelled); color: var(--st-cancelled); background: var(--surface); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.55; box-shadow: none;
  border-style: dashed; background: var(--surface-2); color: var(--ink-soft);
}
button:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; border-style: dashed; background: var(--surface-2); color: var(--ink-soft); }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: var(--tap); padding: 0 var(--sp-3); border: 2px solid var(--line); border-radius: var(--r-sm); background: #fff; max-width: 100%; }
input[type="checkbox"] { width: 26px; height: 26px; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: var(--fs-sm); color: var(--ink-soft); }

#main a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }

.stepper { display: inline-flex; align-items: center; gap: var(--sp-1); }
.stepper__btn {
  width: var(--tap); height: var(--tap);
  border: 2px solid var(--wood); border-radius: var(--r-sm);
  background: var(--surface); color: var(--wood-dark);
  font-size: var(--fs-md); font-weight: 800; cursor: pointer;
}
.stepper__btn:disabled { opacity: 0.45; border-style: dashed; cursor: not-allowed; }
.stepper__qty { min-width: 2.2em; text-align: center; font-weight: 800; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

.stock { font-weight: 600; font-variant-numeric: tabular-nums; }
.stock--low { font-weight: 800; color: var(--ink); background: var(--st-prepping-bg); padding: 0 var(--sp-1); border-radius: var(--r-sm); }
.stock--low::before { content: "\25B2 "; color: var(--st-prepping); }
.stock--out { font-weight: 800; color: var(--st-cancelled); }
.stock--out::before { content: "\2298 "; }

.tile {
  position: relative;
  min-height: 112px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
  text-align: left;
}
.tile__name { font-weight: 700; overflow-wrap: anywhere; }
.tile__price { font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: var(--fs-sm); color: var(--ink-soft); }
.table .num, .table .money { text-align: right; }

.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field__label { font-weight: 700; font-size: var(--fs-sm); }
.input {
  min-height: var(--tap); padding: 0 var(--sp-3);
  border: 2px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.input--invalid { border-color: var(--st-cancelled); }
.error { color: var(--st-cancelled); font-weight: 700; font-size: var(--fs-sm); }
.error::before { content: "\2715 "; }

.tabs { display: flex; gap: var(--sp-1); }
.tab {
  flex: 1; min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-soft);
  font-weight: 700; cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); border-color: var(--wood); box-shadow: inset 0 -4px 0 var(--wood); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 599px) {
  .appbar__brand { order: 1; }
  .appbar__logout, .appbar__logout-form { order: 2; }
  .appbar__nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; }
  .appbar__nav a { flex: 1 1 0; justify-content: center; padding: 0 var(--sp-1); font-size: var(--fs-sm); }
  :root { --conn-h-on: 80px; }
}

.conn-lost {
  position: sticky; top: 0; z-index: 60;
  display: flex; gap: var(--sp-2); align-items: center;
  min-height: var(--conn-h-on);
  padding: var(--sp-2) var(--sp-4);
  background: repeating-linear-gradient(-45deg, #fbe3b8 0 14px, #f6d59a 14px 28px);
  color: var(--ink); font-weight: 700;
  border-bottom: 3px solid var(--st-prepping);
}
.conn-lost::before { content: "\26A0"; font-size: var(--fs-md); }
/* Sticky bars below the banner shift down by its height so it never covers them. */
body:has(#conn-lost:not([hidden])) { --conn-h: var(--conn-h-on); }
.panel-form {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-block: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.panel-form .field { margin-bottom: 0; }
.panel-form .btn { justify-self: start; }
.panel-form .btn.btn--block { justify-self: stretch; }

.archived-label {
  display: inline-block; margin-left: var(--sp-2); padding: 0 var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase;
}

#main.page--login {
  display: grid;
  gap: var(--sp-3);
  max-width: 420px;
  margin-inline: auto;
}

.page--items .table th,
.page--items .table td.num,
.page--items .archived-label,
.page--items .stock { white-space: nowrap; overflow-wrap: normal; }

#create-item {
  width: auto;
  margin-inline: max(var(--sp-3), calc((100% - 960px) / 2));
}

.page--login .errors {
  color: var(--st-cancelled);
  font-weight: 700;
}
.page--login .errors li { list-style: none; }
.page--login .errors li::before { content: "\2715 "; }

.page--items .table td.num,
.page--items .table th:nth-child(2),
.page--items .table th:nth-child(3) { text-align: right; }

@media (max-width: 599px) {
  .panel-form { padding: var(--sp-3); }
  .panel-form .input { width: 100%; }
}
#main.page--take { padding-bottom: 200px; }

.page--take .panel { display: none; }
.page--take .panel.is-active { display: block; }

/* Body's overflow-wrap: anywhere splits short button labels mid-word at narrow widths. */
.page--take button { overflow-wrap: normal; }

#flash.flash--placed {
  display: grid; gap: var(--sp-2);
  width: calc(100% - 2 * var(--sp-3));
  max-width: calc(960px - 2 * var(--sp-3));
  padding: var(--sp-4) var(--sp-5);
  background: var(--st-ready-bg);
  border: 3px solid var(--st-ready);
  border-radius: var(--r-lg);
}
#flash.flash--placed .flash__headline {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800;
}
#flash.flash--placed .flash__say { margin: 0; font-size: var(--fs-md); font-weight: 700; }

/* The server accepts an undo a few seconds after the button hides, so a last-moment tap still lands. */
#flash.flash--placed .flash__undo {
  justify-self: start;
  animation: undo-expire 0s linear 10s forwards;
}
@keyframes undo-expire { from, to { visibility: hidden; } }

.page--take .check {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--stitch);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.page--take .check__row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.page--take .check__name { font-weight: 700; }
.page--take .check__unit { font-size: var(--fs-sm); color: var(--ink-soft); }
.page--take .check__line { font-weight: 700; }
.page--take .check__stepper { margin-left: auto; }
.page--take .check__total {
  margin: var(--sp-3) 0 0;
  display: flex; justify-content: flex-end; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 800;
}

.page--take .menu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.page--take .menu__row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.page--take .menu__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.page--take .menu__name { margin: 0; font-weight: 700; }
.page--take .menu__meta { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.page--take .menu__inqty { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--moss); }
.page--take .menu__add { flex: none; width: var(--tap-main); }
.page--take .menu__row--out { background: var(--surface-2); }
.page--take .menu__row--out .menu__name,
.page--take .menu__row--out .menu__meta { color: var(--ink-soft); }

.page--take .confirmbox, .page--take .cancelbox { display: none; }
.page--take .confirmbox.is-open {
  display: grid; gap: var(--sp-2); flex-basis: 100%;
  padding: var(--sp-2);
  border: 2px dashed var(--st-cancelled);
  border-radius: var(--r-md);
}
.page--take .confirmbox__q, .page--take .cancelbox__q { margin: 0 0 var(--sp-2); font-weight: 700; }
.page--take .cancelbox.is-open {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-2);
  border: 2px dashed var(--st-cancelled);
  border-radius: var(--r-md);
}

.page--take .actionrow {
  position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-bottom: 3px solid var(--wood-dark);
}
.page--take .actionrow__place { flex: 1; }

.page--take .tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(72px + env(safe-area-inset-bottom));
  padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--stitch);
}
.page--take .tabbar .tab { min-height: 64px; font-size: var(--fs-md); }

.page--take .card__head .card__total { margin-left: auto; }
.page--take .card__actions--end { justify-content: flex-end; }
.page--take .card--ready .card__num { font-size: var(--fs-xxl); }

/* Named transitions keep the bars and group headings out of the root crossfade. */
.page--take .tabbar { view-transition-name: take-tabbar; }
.page--take .actionrow { view-transition-name: take-actionrow; }
.page--take .group--ready > .group__head { view-transition-name: take-head-ready; view-transition-class: group-head; }
.page--take .group--prepping > .group__head { view-transition-name: take-head-prepping; view-transition-class: group-head; }
.page--take .group--placed > .group__head { view-transition-name: take-head-placed; view-transition-class: group-head; }

@media (max-width: 599px) {
  .page--take .menu { grid-template-columns: 1fr; }
  #flash.flash--placed { padding: var(--sp-3) var(--sp-4); }
  #flash.flash--placed .flash__headline { font-size: var(--fs-lg); }
  #flash.flash--placed .flash__say { font-size: var(--fs-base); }
  .page--take .check__stepper { margin-left: 0; width: 100%; }
}

.page--take .changed { font-size: var(--fs-sm); font-weight: 800; color: var(--st-prepping); }
.page--take .changed::before { content: "\270E  "; }
.page--process .totals {
  position: sticky;
  top: var(--conn-h, 0px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 56px;
  max-width: 100%;
  margin: 0 0 var(--sp-4);
  padding: 0 var(--sp-3);
  overflow-x: auto;
  background: var(--surface-2);
  border-bottom: 2px solid var(--line);
  view-transition-name: process-totals;
}
.page--process .totals__label { flex: none; font-weight: 800; }
.page--process .totals__empty { color: var(--ink-soft); font-style: italic; }
.page--process .chip {
  flex: none;
  padding: 3px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.page--process .lowstock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: var(--stitch);
  border-radius: var(--r-md);
}

.page--process .group__head {
  position: sticky;
  top: calc(var(--conn-h, 0px) + 56px);
  z-index: 30;
  background: var(--bg);
}
.page--process .group--returning > .group__head { view-transition-name: process-head-returning; view-transition-class: group-head; }
.page--process .group--ready > .group__head { view-transition-name: process-head-ready; view-transition-class: group-head; }
.page--process .group--prepping > .group__head { view-transition-name: process-head-prepping; view-transition-class: group-head; }
.page--process .group--placed > .group__head { view-transition-name: process-head-placed; view-transition-class: group-head; }
.page--process .group--picked > .group__head { view-transition-name: process-head-picked; view-transition-class: group-head; }

.page--process .card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: start;
}
.page--process .card__num { font-size: var(--fs-xxl); }
.page--process .card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}
.page--process .card__mid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.page--process .card__lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-3);
  margin: 0;
}
.page--process .card__actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
  margin-top: 0;
}
.page--process .card__actions .btn--primary { min-width: 180px; }

.page--process .oldest {
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}

.page--process .card--slim .card__head {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.page--process .card--slim .card__num { font-size: var(--fs-xl); }
.page--process .card--slim .card__lines { display: block; }
.page--process .card--slim { grid-template-columns: 300px minmax(0, 1fr) auto; align-items: center; }

.page--process .card--returning .card__lines { text-decoration: line-through; }

@media (max-width: 599px) {
  .page--process .card { grid-template-columns: 1fr; }
  .page--process .card__head { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
  .page--process .card__num { font-size: var(--fs-xl); }
  .page--process .card__lines { grid-template-columns: 1fr; }
  .page--process .card--slim .card__lines { display: block; }
  .page--process .card__actions .btn { width: 100%; }
  .page--process .card__actions .btn--primary { min-width: 0; }
  .page--process .card__actions .btn--undo { margin-top: var(--sp-3); }
}

.page--process .changed {
  display: inline-block;
  padding: 0 var(--sp-2);
  border: 2px solid var(--st-prepping);
  border-radius: var(--r-sm);
  font-weight: 800;
  animation: kitchen-changed 1.2s var(--ease) 2;
}
.page--process .changed::before { content: "\270E  "; }
@keyframes kitchen-changed { 50% { background: var(--st-prepping-bg); transform: scale(1.08); } }
.page--admin .tiles {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.page--admin .tile--wide { grid-column: 1 / -1; }
.page--admin .tile__value { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.page--admin .tile__sub { font-size: var(--fs-xs); color: var(--ink-soft); }
.page--admin .statuslegend { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.page--admin .statuslegend .num { font-size: var(--fs-sm); font-weight: 700; }

.page--admin .section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.page--admin .section-head h2 { margin: 0; }
.page--admin .section-head .btn { margin-left: auto; }

.page--admin .items th,
.page--admin .items .money,
.page--admin .items .num,
.page--admin .items .stock,
.page--admin .archived-label { white-space: nowrap; overflow-wrap: normal; }
.page--admin .items { margin-bottom: var(--sp-6); }
.page--admin .stockbar { display: block; width: 100%; max-width: 160px; height: 10px; margin: var(--sp-1) 0; }
.page--admin .stock-count { display: block; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
.page--admin .td-stock .stock { display: inline-block; margin-bottom: var(--sp-1); }
.page--admin .cell-label { display: none; }
.page--admin .td-item { min-width: 160px; }
.page--admin .archived-label {
  display: inline-block; margin-left: var(--sp-2); padding: 0 var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase;
}
.page--admin .row-archived td { color: var(--ink-soft); }
.page--admin .row-total td { font-weight: 800; }
.page--admin .adj-row { display: flex; gap: var(--sp-1); }
.page--admin .adj-row .btn { padding: 0 var(--sp-2); }
.page--admin .adj { margin: 0; }

.page--admin .order-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.page--admin .order-row .card__num { font-size: var(--fs-md); }
.page--admin .order-row__lines {
  order: 3; flex: 1 1 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft);
}
.page--admin .order-row__total { order: 4; font-weight: 700; }

/* Group headings stay put while order rows slide between groups. */
.page--admin .group--placed > .group__head { view-transition-name: admin-head-placed; view-transition-class: group-head; }
.page--admin .group--prepping > .group__head { view-transition-name: admin-head-prepping; view-transition-class: group-head; }
.page--admin .group--ready > .group__head { view-transition-name: admin-head-ready; view-transition-class: group-head; }
.page--admin .group--picked > .group__head { view-transition-name: admin-head-picked; view-transition-class: group-head; }
.page--admin .group--cancelled > .group__head { view-transition-name: admin-head-cancelled; view-transition-class: group-head; }

/* .danger-zone sits outside main, so it cannot be scoped under .page--admin. */
body > .danger-zone { width: auto; margin-inline: max(var(--sp-3), calc((100% - 960px) / 2)); }
.danger-zone {
  margin-top: var(--sp-6); padding: var(--sp-4);
  border: 3px solid var(--st-cancelled); border-radius: var(--r-md);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.danger-zone h2 { margin: 0; }
.danger-zone .check {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); cursor: pointer;
}
.danger-zone .check input { width: 26px; height: 26px; flex: none; }

@media (max-width: 599px) {
  .page--admin .tile__value { font-size: var(--fs-lg); }

  .page--admin .cell-label {
    display: inline; margin-right: var(--sp-1);
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
    text-transform: uppercase;
  }
  .page--admin .items thead { display: none; }
  .page--admin .items tbody, .page--admin .items tr { display: block; }
  .page--admin .items tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .page--admin .items td { display: block; border-bottom: 1px dashed var(--line); padding: var(--sp-2) 0; }
  .page--admin .items td:first-child { font-weight: 700; }
  .page--admin .items td:last-child { border-bottom: 0; }
  .page--admin .items td.td-price, .page--admin .items td.td-sold, .page--admin .items td.td-rev { display: inline-block; padding-right: var(--sp-3); }
  .page--admin .items td.td-adj { width: 100%; }
  .page--admin .items tfoot tr { display: flex; justify-content: space-between; }
  .page--admin .items tfoot td:empty { display: none; }

  .page--admin .order-row { flex-wrap: wrap; }
  .page--admin .order-row__lines { order: 6; flex-basis: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* .find-order also sits outside main, so it cannot be scoped under a page class. */
body > .find-order { width: auto; margin-inline: max(var(--sp-3), calc((100% - 960px) / 2)); }
.find-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block: var(--sp-3); }
.find-order label { font-weight: 700; }
.find-order .input { width: 9ch; min-height: var(--tap); font-size: var(--fs-md); }
.find-order .error { flex-basis: 100%; margin: 0; }

.page--admin .order-row__open { order: 5; }

.page--order .order-lines { margin: var(--sp-4) 0 var(--sp-6); }
.page--order .order-lines td.num, .page--order .order-lines td.money { white-space: nowrap; }
.page--order section { margin-top: var(--sp-6); }
.page--order fieldset { margin: 0 0 var(--sp-3); padding: var(--sp-3); border: var(--stitch); border-radius: var(--r-md); }
.page--order .check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.page--order .check input { width: 26px; height: 26px; flex: none; }

.page--admin .changed { font-size: var(--fs-sm); font-weight: 800; color: var(--st-prepping); }
.page--admin .changed::before { content: "\270E  "; }

.page--order .order-edit__lines .input { width: 6ch; min-height: var(--tap); }
.page--order .order-review td.num { white-space: nowrap; }
/* Full page navigations crossfade too, unless the user asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Taps during a transition must reach the page, not the overlay. */
::view-transition { pointer-events: none; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: var(--ease);
}

.appbar { view-transition-name: appbar; }

/* Browsers without match-element still get the root crossfade. */
@supports (view-transition-name: match-element) {
  .card {
    view-transition-name: match-element;
    view-transition-class: card;
  }
}

::view-transition-group(*.card),
::view-transition-group(*.group-head) {
  animation-duration: 260ms;
  animation-timing-function: var(--ease);
}

::view-transition-old(*.card),
::view-transition-new(*.card) {
  animation-duration: 260ms;
  animation-timing-function: var(--ease);
}

::view-transition-new(*.card):only-child {
  animation: card-in 240ms var(--ease) both;
}

::view-transition-old(*.card):only-child {
  animation: card-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes card-out {
  to { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}