/* ==========================================================================
   Replate
   Palette: deep herb green + warm amber on a warm neutral base. Deliberately
   different from the orange/terracotta of the site this replaces.
   ========================================================================== */

/* Light is the default. The dark values live under the explicit dark theme
   and under prefers-color-scheme: dark, so the app opens bright unless the
   reader has asked for otherwise. */
:root {
  --bg:        #f7f6f1;
  --bg-raised: #ffffff;
  --bg-sunken: #efede5;
  --line:      #dcd8cc;
  --line-soft: #e9e6dc;
  --text:      #16211a;
  --text-dim:  #566158;
  --text-faint:#8a948c;

  --accent:       #1f8a5d;
  --accent-strong:#176c48;
  --accent-ink:   #ffffff;
  --accent-soft:  rgba(31, 138, 93, 0.10);

  --amber:      #b97608;
  --amber-soft: rgba(185, 118, 8, 0.12);
  --amber-ink:  #ffffff;

  --danger:      #c93b3b;
  --danger-soft: rgba(201, 59, 59, 0.09);
  --info:        #2b6ea8;
  --info-soft:   rgba(43, 110, 168, 0.10);

  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill:999px;
  --shadow:     0 10px 30px rgba(32, 40, 30, 0.12);
  --shadow-sm:  0 2px 8px rgba(32, 40, 30, 0.08);
  --ring:       0 0 0 3px var(--accent-soft);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --page:   1120px;
  --nav-h:  60px;
}

/* Dark theme: a soft charcoal-green rather than near-black, applied both
   when the reader picks dark and when their system asks for it. */
:root[data-theme="dark"] {
  --bg:        #1d2622;
  --bg-raised: #27322c;
  --bg-sunken: #182019;
  --line:      #3a4740;
  --line-soft: #2f3b34;
  --text:      #eaf1ec;
  --text-dim:  #a9b8ae;
  --text-faint:#7e8d84;

  --accent:       #52c18d;
  --accent-strong:#43ab7a;
  --accent-ink:   #0b1a13;
  --accent-soft:  rgba(82, 193, 141, 0.16);

  --amber:      #f2b649;
  --amber-soft: rgba(242, 182, 73, 0.16);
  --amber-ink:  #241603;

  --danger:      #ff8484;
  --danger-soft: rgba(255, 132, 132, 0.14);
  --info:        #74b8ec;
  --info-soft:   rgba(116, 184, 236, 0.16);

  --shadow:    0 12px 34px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:        #1d2622;
    --bg-raised: #27322c;
    --bg-sunken: #182019;
    --line:      #3a4740;
    --line-soft: #2f3b34;
    --text:      #eaf1ec;
    --text-dim:  #a9b8ae;
    --text-faint:#7e8d84;

    --accent:       #52c18d;
    --accent-strong:#43ab7a;
    --accent-ink:   #0b1a13;
    --accent-soft:  rgba(82, 193, 141, 0.16);

    --amber:      #f2b649;
    --amber-soft: rgba(242, 182, 73, 0.16);
    --amber-ink:  #241603;

    --danger:      #ff8484;
    --danger-soft: rgba(255, 132, 132, 0.14);
    --info:        #74b8ec;
    --info-soft:   rgba(116, 184, 236, 0.16);

    --shadow:    0 12px 34px rgba(0, 0, 0, 0.38);
    --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.24);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.22; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg-sunken); font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease,
              transform .06s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not([disabled]) { background: var(--accent-strong); }

.btn--amber { background: var(--amber); color: var(--amber-ink); }
.btn--amber:hover:not([disabled]) { filter: brightness(1.07); }

.btn--ghost {
  background: transparent; border-color: var(--line); color: var(--text-dim);
}
.btn--ghost:hover { background: var(--bg-sunken); color: var(--text); }

.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover:not([disabled]) { background: var(--danger); color: #fff; }

.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }

.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 40px; min-height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; font-size: 16px; cursor: pointer;
  transition: background .15s ease;
}
.icon-btn:hover { background: var(--bg-sunken); }

.pip {
  position: absolute; top: -6px; right: -6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--amber); color: var(--amber-ink);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

/* ---------------------------------------------------------------- fields */

.field { display: block; margin-bottom: 14px; }
.field__label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.field__label em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.field__hint { margin: 5px 0 0; font-size: 12px; color: var(--text-faint); }
.field__wrap { position: relative; display: block; }

.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunken); color: var(--text); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 92px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.field__wrap .input { padding-right: 68px; }

.reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.reveal:hover { color: var(--text); background: var(--bg-raised); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.error-box {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger);
  font-size: 13.5px; font-weight: 500;
}

.checks { display: flex; flex-wrap: wrap; gap: 7px; }
.check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); font-size: 13px; cursor: pointer;
  user-select: none;
}
.check input { accent-color: var(--accent); margin: 0; }
.check:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  height: var(--nav-h); padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
}

.nav__brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; letter-spacing: -0.03em; color: var(--text);
}
.nav__brand:hover { text-decoration: none; }

.nav__links { display: flex; gap: 2px; margin-left: 8px; flex: 1; }

.nav__link {
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 14.5px; font-weight: 600;
}
.nav__link:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.nav__link.is-active { background: var(--accent-soft); color: var(--accent); }

.nav__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* --------------------------------------------------------- mode switch
   The customer side and the kitchen are two different places. The switch
   moves between them, and the kitchen is tinted amber throughout so it never
   looks like the shop. */

.modeswitch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

.modeswitch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.modeswitch__btn:hover { color: var(--text); text-decoration: none; }
.modeswitch__btn.is-active {
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* The inactive side is the one you tap, so make it look tappable rather
   than disabled. */
.modeswitch__btn:not(.is-active) { opacity: .78; }
.modeswitch__btn:not(.is-active):hover { opacity: 1; }

body[data-mode="cook"] .modeswitch__btn.is-active { color: var(--amber); }

/* The whole chrome changes colour inside the kitchen. */
body[data-mode="cook"] .nav {
  border-bottom-color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 60%, var(--bg));
}
body[data-mode="cook"] .nav__link.is-active {
  background: var(--amber-soft);
  color: var(--amber);
}
body[data-mode="cook"] .tabbar__item.is-active { color: var(--amber); }
body[data-mode="cook"] .chip.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber-ink);
}
body[data-mode="cook"] .tabbar { border-top-color: var(--amber); }

/* The words stay at every width: two food emoji on their own tell you
   nothing about which side of the app you are on. Room is made by dropping
   the wordmark instead, which the logo already carries. */
@media (max-width: 720px) {
  .nav__brand span { display: none; }
  .modeswitch__btn { padding: 0 11px; gap: 5px; font-size: 13px; }
}

@media (max-width: 380px) {
  .modeswitch__btn { padding: 0 9px; font-size: 12.5px; }
  .nav { gap: 8px; }
}

.menu { position: relative; }
.menu__trigger { list-style: none; cursor: pointer; }
.menu__trigger::-webkit-details-marker { display: none; }

.avatar {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 800; text-transform: uppercase;
}

.menu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  min-width: 236px; padding: 7px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-raised); box-shadow: var(--shadow);
}
.menu__who {
  margin: 0 0 6px; padding: 10px 11px;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.45;
}
.menu__who strong { display: block; }
.menu__who span { color: var(--text-dim); word-break: break-all; }
.menu__item {
  display: block; width: 100%; padding: 10px 11px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--text); text-align: left; font-size: 14px; cursor: pointer;
}
.menu__item:hover { background: var(--bg-sunken); text-decoration: none; }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); }

/* ------------------------------------------------------------------ page */

.view { min-height: calc(100dvh - var(--nav-h)); }

.page {
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 26px var(--gutter) 64px;
}
.page--narrow { max-width: 620px; }

.page__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.page__title { margin: 0; font-size: 26px; font-weight: 800; }
.page__sub { margin: 4px 0 0; color: var(--text-dim); font-size: 14.5px; }

.section-title {
  margin: 30px 0 14px; font-size: 18px; font-weight: 700;
}

/* ----------------------------------------------------------------- cards */

.card {
  padding: 18px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--bg-raised);
}
.card + .card { margin-top: 12px; }
.card__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card__sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-dim); }

.empty {
  padding: 48px 24px; border: 1px dashed var(--line);
  border-radius: var(--radius); text-align: center;
}
.empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.empty__sub {
  margin: 0 auto; max-width: 46ch; color: var(--text-dim); font-size: 14px;
}

.skeleton {
  border-radius: var(--radius); background: var(--bg-sunken);
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.skeleton--row    { height: 120px; }
.skeleton--list   { height: 140px; }
.skeleton--card   { height: 180px; }
.skeleton--tile   { height: 260px; }
.skeleton--dish   { height: 280px; }
.skeleton--panel  { height: 300px; }

/* ------------------------------------------------------------- utilities
   The Content-Security-Policy forbids inline style attributes, so spacing
   that would otherwise be a style="" lives here instead. */

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 30px; }
.mb-3 { margin-bottom: 16px; }
.ml-2 { margin-left: 8px; }
.center { text-align: center; }

.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.actions--tight { gap: 6px; }

/* ------------------------------------------------------------ shopfronts
   A cook picks an accent by key, never by supplying a colour. The palette
   lives here, so a shop profile can never inject CSS. */

.shop-green { --shop: #1f8a5d; --shop-soft: rgba(31, 138, 93, .12); }
.shop-amber { --shop: #c07c09; --shop-soft: rgba(192, 124, 9, .13); }
.shop-chili { --shop: #c0392b; --shop-soft: rgba(192, 57, 43, .12); }
.shop-ocean { --shop: #1f6f9c; --shop-soft: rgba(31, 111, 156, .12); }
.shop-berry { --shop: #8e44ad; --shop-soft: rgba(142, 68, 173, .12); }
.shop-cocoa { --shop: #7a5230; --shop-soft: rgba(122, 82, 48, .13); }

:root[data-theme="dark"] .shop-green,
:root[data-theme="dark"] .shop-amber,
:root[data-theme="dark"] .shop-chili,
:root[data-theme="dark"] .shop-ocean,
:root[data-theme="dark"] .shop-berry,
:root[data-theme="dark"] .shop-cocoa { filter: brightness(1.35); }

.shopbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 24px; margin-bottom: 20px;
  border: 1px solid var(--shop, var(--line));
  border-radius: var(--radius);
  background: var(--shop-soft, var(--bg-raised));
}

.shopbar__cover {
  display: grid; place-items: center;
  width: 72px; height: 72px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--shop, var(--line));
  font-size: 34px;
}

.shopbar__text { flex: 1; min-width: 200px; }

.shopbar__name {
  margin: 0; font-size: 24px; font-weight: 800;
  color: var(--shop, var(--text));
}
.shopbar__tagline { margin: 2px 0 0; font-size: 15px; color: var(--text-dim); }
.shopbar__meta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-size: 12.5px; color: var(--text-faint);
}

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; margin-bottom: 16px;
  border: 1px solid var(--amber); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--amber-soft);
  font-size: 13.5px;
}
.notice--info { border-color: var(--info); background: var(--info-soft); }
.notice--ok { border-color: var(--accent); background: var(--accent-soft); }
.notice__title { font-weight: 700; display: block; margin-bottom: 2px; }
.notice__body { color: var(--text-dim); }

/* Swatch and icon pickers in the shop editor */

.swatches { display: flex; flex-wrap: wrap; gap: 9px; }

.swatch {
  width: 40px; height: 40px; padding: 0;
  border: 2px solid transparent; border-radius: 50%;
  background: var(--shop); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { border-color: var(--text); }

.icons { display: flex; flex-wrap: wrap; gap: 7px; }

.icon-pick {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunken); font-size: 21px; cursor: pointer;
}
.icon-pick:hover { border-color: var(--accent); }
.icon-pick.is-active {
  border-color: var(--accent); background: var(--accent-soft);
}

/* Application review cards */

.applicant__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.applicant__quote {
  margin: 12px 0; padding: 12px 14px;
  border-left: 3px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  font-size: 13.5px; color: var(--text-dim); white-space: pre-wrap;
}

.state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
}
.state--pending   { background: var(--amber-soft);  color: var(--amber); }
.state--approved  { background: var(--accent-soft); color: var(--accent); }
.state--rejected  { background: var(--danger-soft); color: var(--danger); }
.state--suspended { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; overflow: hidden;
  padding: 74px var(--gutter) 64px;
  background:
    radial-gradient(1000px 520px at 18% -8%, var(--accent-soft), transparent 68%),
    radial-gradient(760px 420px at 88% 8%, var(--amber-soft), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.hero__inner { max-width: var(--page); margin: 0 auto; text-align: center; }

/* ------------------------------------------------------------- brandmark
   The full Replate logo is black line art on a white background. Multiply
   drops that white into the page colour so it does not sit in a box; in dark
   mode it is inverted first, then screened, so the lines come out white. */

.brandmark {
  display: block;
  margin: 0 auto;
  height: auto;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .brandmark {
  filter: invert(1);
  mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .brandmark {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}

.brandmark--hero { width: min(200px, 46vw); margin-bottom: 10px; }
.brandmark--card { width: 140px; margin-bottom: 12px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 20px; padding: 7px 15px;
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700;
}

.hero__title {
  margin: 0 0 14px; font-size: clamp(32px, 6.2vw, 58px);
  font-weight: 800; letter-spacing: -0.035em;
}
.hero__title em { font-style: normal; color: var(--amber); display: block; }

.hero__lede {
  margin: 0 auto 26px; max-width: 54ch;
  font-size: clamp(15px, 2.1vw, 18px); color: var(--text-dim);
}

.hero__search {
  display: flex; gap: 8px; max-width: 540px; margin: 0 auto 10px;
  padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg-raised); box-shadow: var(--shadow-sm);
}
.hero__search .input {
  border: 0; background: transparent; min-height: 40px; padding-left: 14px;
}
.hero__search .input:focus { box-shadow: none; }
.hero__search .btn { border-radius: var(--radius-pill); }

.hero__or { margin: 12px 0 0; font-size: 13px; color: var(--text-faint); }

.stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 38px;
  margin-top: 40px;
}
.stat__value {
  font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent);
}
.stat__label {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ------------------------------------------------------------- steps grid */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  padding: 24px 20px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--bg-raised);
}
.step__n {
  display: grid; place-items: center; width: 38px; height: 38px;
  margin-bottom: 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 800;
}
.step__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.step__text { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ------------------------------------------------------------ location bar */

.locbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised);
}
.locbar--on { border-color: var(--accent); background: var(--accent-soft); }
.locbar__icon { font-size: 20px; }
.locbar__text { flex: 1; min-width: 180px; }
.locbar__title { display: block; font-size: 14px; font-weight: 700; }
.locbar__sub { display: block; font-size: 12.5px; color: var(--text-dim); }

/* -------------------------------------------------------------- filters */

.filters {
  display: grid; gap: 12px; margin-bottom: 20px; padding: 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-raised);
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.filters__full { grid-column: 1 / -1; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--text); }
.chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* --------------------------------------------------------------- dishes */

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.dish {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-raised); overflow: hidden;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.dish:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.dish__top {
  position: relative; height: 104px;
  background:
    radial-gradient(420px 180px at 25% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(300px 160px at 90% 100%, var(--amber-soft), transparent 70%),
    var(--bg-sunken);
  border-bottom: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.dish__emoji { font-size: 40px; filter: saturate(1.1); }

.dish__flags {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; gap: 8px;
}

.badge {
  padding: 4px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.badge--save { background: var(--amber); color: var(--amber-ink); }
.badge--left { background: var(--bg-raised); color: var(--text-dim);
               border: 1px solid var(--line); }
.badge--gone { background: var(--danger-soft); color: var(--danger); }

.dish__body { display: flex; flex-direction: column; flex: 1; padding: 14px; }

.dish__kitchen {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 7px; font-size: 12.5px; color: var(--text-dim);
}
.dish__kitchen strong { color: var(--text); font-weight: 700; }

.dish__name { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; }
.dish__desc {
  margin: 0 0 11px; font-size: 13.5px; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.tag {
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.tag--cuisine { border-color: var(--accent); color: var(--accent); }
.tag--allergen { border-color: var(--amber); color: var(--amber); }

.dish__meta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 13px;
  font-size: 12.5px; color: var(--text-faint);
}

.dish__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}
.dish__price { display: flex; align-items: baseline; gap: 7px; }
.dish__now { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.dish__was {
  font-size: 13px; color: var(--text-faint); text-decoration: line-through;
}

/* --------------------------------------------------------------- orders */

.order {
  display: block; padding: 16px; margin-bottom: 11px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-raised); color: var(--text);
  transition: border-color .15s ease;
}
.order:hover { border-color: var(--accent); text-decoration: none; }

.order__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.order__code { font-family: var(--mono); font-size: 14px; font-weight: 700; }

/* Account numbers and payment references, where a misread digit
   sends money to a stranger. */
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
.order__line { font-size: 13.5px; color: var(--text-dim); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.status--placed    { background: var(--info-soft);   color: var(--info); }
.status--accepted  { background: var(--info-soft);   color: var(--info); }
.status--cooking   { background: var(--amber-soft);  color: var(--amber); }
.status--ready     { background: var(--accent-soft); color: var(--accent); }
.status--out_for_delivery { background: var(--amber-soft); color: var(--amber); }
.status--completed { background: var(--accent-soft); color: var(--accent); }
.status--cancelled { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------- timeline */

.timeline { margin: 0; padding: 0; list-style: none; }
.tl {
  position: relative; padding: 0 0 20px 30px;
  border-left: 2px solid var(--line); margin-left: 7px;
}
.tl:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: -8px; top: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-raised); border: 2px solid var(--line);
}
.tl.is-done::before { background: var(--accent); border-color: var(--accent); }
.tl.is-current::before {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft);
}
.tl.is-cancelled::before { background: var(--danger); border-color: var(--danger); }
.tl__label { font-size: 14.5px; font-weight: 700; }
.tl__time { font-size: 12.5px; color: var(--text-faint); }
.tl__note {
  margin: 5px 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg-sunken); font-size: 13px; color: var(--text-dim);
}

/* --------------------------------------------------------------- receipt */

.receipt {
  margin: 0; padding: 18px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.kv dt { font-size: 13px; color: var(--text-dim); }
.kv dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }

.totals { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.totals__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 14px; color: var(--text-dim);
}
.totals__row--grand {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 17px; font-weight: 800; color: var(--text);
}

/* --------------------------------------------------------------- message */

.msg {
  padding: 13px 14px; margin-bottom: 9px;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--info);
  border-radius: var(--radius-sm); background: var(--bg-raised);
}
.msg--sms { border-left-color: var(--amber); }
.msg__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
  font-size: 12px; color: var(--text-faint);
}
.msg__subject { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.msg__body {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: var(--text-dim); white-space: pre-wrap; word-break: break-word;
}
.msg__state {
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
}
.msg__state--sent   { background: var(--accent-soft); color: var(--accent); }
.msg__state--logged { background: var(--info-soft);   color: var(--info); }
.msg__state--failed { background: var(--danger-soft); color: var(--danger); }
.msg__state--queued { background: var(--amber-soft);  color: var(--amber); }

/* ------------------------------------------------------------- ops board */

.tiles {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tile {
  padding: 16px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--bg-raised);
}
.tile__label {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .07em;
}
.tile__value {
  margin-top: 5px; font-size: 25px; font-weight: 800; letter-spacing: -0.03em;
}
.tile__foot { font-size: 12px; color: var(--text-faint); }
.tile--accent .tile__value { color: var(--accent); }
.tile--amber  .tile__value { color: var(--amber); }

.table-wrap {
  overflow-x: auto; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--bg-raised);
}
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.table th {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-sunken); position: sticky; top: 0;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-sunken); }
.table .mono { font-family: var(--mono); }
.table .num { text-align: right; }

/* ---------------------------------------------------------------- drawer */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: var(--bg-raised);
  box-shadow: var(--shadow);
  animation: slide-in .2s ease;
}
@keyframes slide-in { from { transform: translateX(100%); } }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--line-soft);
  padding-top: max(16px, env(safe-area-inset-top));
}
.drawer__title { margin: 0; font-size: 17px; font-weight: 700; }
.drawer__body {
  flex: 1; overflow-y: auto; padding: 16px var(--gutter);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 8, 5, .6); backdrop-filter: blur(2px);
}

.bline {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bline__text { flex: 1; min-width: 0; }
.bline__name { font-size: 14px; font-weight: 600; }
.bline__price { font-size: 12.5px; color: var(--text-dim); }
.qty { display: flex; align-items: center; gap: 6px; }
.qty__btn {
  width: 30px; height: 30px; border: 1px solid var(--line);
  border-radius: 7px; background: transparent; cursor: pointer; font-weight: 700;
}
.qty__btn:hover { background: var(--bg-sunken); }
.qty__n { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }

/* ----------------------------------------------------------------- toast */

/* ----------------------------------------------------------- ask dialog
   Replaces window.confirm / window.prompt, which are unavailable in an
   installed PWA on some platforms. */

.ask__backdrop {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(3, 8, 5, .55); backdrop-filter: blur(3px);
}

.ask {
  width: 100%; max-width: 420px;
  padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised); box-shadow: var(--shadow);
  animation: ask-in .14s ease;
}
@keyframes ask-in { from { transform: scale(.97); opacity: 0; } }

.ask__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.ask__body { margin: 0 0 14px; font-size: 14px; color: var(--text-dim); }
.ask .textarea { margin-bottom: 14px; }
.ask__actions { display: flex; gap: 9px; }
.ask__actions .btn { flex: 1; }

/* Area picker inside the ask dialog */

.arealist {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto;
  margin-bottom: 14px;
}

.arealist__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.arealist__item:hover {
  border-color: var(--accent); background: var(--accent-soft);
}
.arealist__name { font-size: 14px; font-weight: 600; }
.arealist__count {
  flex: 0 0 auto; font-size: 12px; color: var(--text-faint);
}

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 90; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg-raised); box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600;
}
.toast.is-error { border-color: var(--danger); color: var(--danger); }
.toast.is-ok { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line-soft); background: var(--bg-sunken); }
.footer__inner {
  max-width: var(--page); margin: 0 auto;
  padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  text-align: center;
}
.footer__brand { margin: 0 0 5px; font-weight: 800; letter-spacing: -0.02em; }
.footer__note {
  margin: 0 auto; max-width: 56ch; font-size: 12.5px; color: var(--text-faint);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: center;
  margin-top: 12px;
}

.footer__links a {
  color: inherit;
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__links a:hover,
.footer__links a:focus-visible { opacity: 1; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- tabbar
   Bottom navigation for phones. Hidden on wider screens, where the links in
   the top bar do the same job. */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.tabbar__item:hover { text-decoration: none; }
.tabbar__icon { font-size: 19px; line-height: 1; }
.tabbar__item.is-active { color: var(--accent); }

.tabbar__pip {
  position: absolute;
  margin: -16px 0 0 18px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--amber); color: var(--amber-ink);
  font-size: 10px; font-weight: 800; line-height: 16px;
}

@media (max-width: 640px) {
  .nav__links { display: none; }
  .tabbar { display: flex; }

  /* Keep content clear of the bar, including the drawer and the toast. */
  body { padding-bottom: 60px; }
  .drawer__body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }

  .hero { padding: 48px var(--gutter) 42px; }
  .hero__search { flex-direction: column; border-radius: var(--radius); }
  .hero__search .btn { width: 100%; }
  .stats { gap: 26px; }
  .filters { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .page__title { font-size: 22px; }
  .table th, .table td { padding: 9px 11px; }

  /* Thumbs need bigger targets than a mouse pointer does. */
  .btn--sm { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
  .chip { min-height: 40px; padding: 0 16px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .qty__btn { width: 40px; height: 40px; }
  .row__btn { min-width: 40px; min-height: 40px; }
  .swatch { width: 46px; height: 46px; }
  .icon-pick { width: 48px; height: 48px; }
  .tabs__btn { min-height: 44px; }
  .reveal { min-height: 40px; }

  /* The dish card's price and Add button get cramped side by side. */
  .dish__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .dish__foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important; animation: none !important;
  }
}

/* A transfer slip, shown next to the invoice it was sent for. Named .slip
   rather than .receipt because .receipt above is the monospace order
   receipt, and the two would fight. Capped in height because a phone
   screenshot is tall and the invoice is the thing being read. */
.slip { margin-top: 10px; }
.slip summary { cursor: pointer; font-size: 13px; color: var(--text-dim); }
.slip__thumb {
  display: block; max-width: 100%; max-height: 420px; width: auto;
  margin: 10px 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-sunken);
}

/* The orders behind a commission charge. Deliberately plain: it is a bill,
   and the only thing anyone wants from it is to check the arithmetic. */
.lines { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.lines th {
  text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.lines td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.lines__num { text-align: right; font-variant-numeric: tabular-nums; }
.lines tfoot td {
  border-top: 1px solid var(--line); border-bottom: 0;
  font-weight: 700; color: var(--text);
}
.lines tbody tr:last-child td { border-bottom: 0; }

.lines__box { margin-top: 12px; }
.lines__box summary {
  cursor: pointer; font-size: 13px; color: var(--text-dim); padding: 2px 0;
}