/* GIMMEYUM Deliver — design system. Coastal Grand Strand palette. Mobile-first.
   Tokens here are the single source the UI draws from (and the polish loop audits against). */
:root {
  /* color */
  --c-bg: #f6f8fb;
  --c-surface: #ffffff;
  --c-ink: #16203a;
  --c-ink-soft: #5a6781;
  --c-line: #e4e8f0;
  --c-brand: #0a7d79;        /* sea teal (AA: white text 4.97:1) */
  --c-brand-2: #14b3ad;      /* lighter teal — decorative gradients only */
  --c-brand-ink: #0a6f6c;
  --c-accent: #ff6b4a;       /* sunset coral — pairs with dark ink text (5.73:1) */
  --c-accent-ink: #e2502f;
  --c-sand: #f4ead6;
  --c-ok: #1f9d57;
  --c-warn: #d98a00;
  --c-err: #b8322a;          /* AA on bg/surface (5.6:1) */
  /* AA-safe text-on-tint values for small badge labels */
  --c-badge-default: #9e3417;
  --c-badge-ok: #157a42;
  --c-badge-warn: #8a5a00;
  /* spacing scale (4-based) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  /* radius */
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-pill: 999px;
  /* type */
  --f-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 26px; --t-2xl: 34px;
  /* elevation */
  --e-1: 0 1px 2px rgba(22,32,58,.06), 0 1px 3px rgba(22,32,58,.08);
  --e-2: 0 4px 12px rgba(22,32,58,.10);
  --e-3: 0 12px 32px rgba(22,32,58,.16);
  /* motion */
  --m-fast: 140ms; --m-base: 220ms; --m-ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-sans); color: var(--c-ink); background: var(--c-bg);
  font-size: var(--t-md); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 var(--s-3); line-height: 1.2; }
h1 { font-size: var(--t-2xl); letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); letter-spacing: -.01em; }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-brand-ink); }

/* layout */
.app { max-width: 720px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-bg); }
.main { flex: 1; padding: var(--s-4) var(--s-4) var(--s-7); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.muted { color: var(--c-ink-soft); }
.center { text-align: center; }

/* app bar */
.appbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--c-surface); border-bottom: 1px solid var(--c-line);
}
.appbar .brand { font-weight: 800; letter-spacing: -.02em; color: var(--c-brand-ink); }
.appbar .spacer { flex: 1; }
.iconbtn {
  appearance: none; border: 0; background: transparent; color: var(--c-ink); cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--t-lg);
}
.iconbtn:hover { background: var(--c-bg); }
.iconbtn:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* cards */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3);
  box-shadow: var(--e-1); overflow: hidden;
}
.card .pad { padding: var(--s-4); }
.rcard { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }
.rcard:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
.rcard .banner { position: relative; height: 152px; overflow: hidden;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-emoji { position: absolute; left: var(--s-3); bottom: var(--s-3); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 22px; box-shadow: var(--e-1); }
.banner-status { position: absolute; top: var(--s-3); right: var(--s-3); }
/* rating row (DoorDash-style: ★ score (count) · cuisine · eta) */
.ratingrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-sm); margin: 0 0 var(--s-1); }
.ratingrow .stars { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.ratingrow .dotsep { color: var(--c-line); }
.carddesc { margin: var(--s-1) 0 0; font-size: var(--t-sm); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
/* menu item photo thumbnail */
.item-thumb { width: 68px; height: 68px; border-radius: var(--r-2); object-fit: cover; flex: none; background: var(--c-line); }

/* restaurant page: hero / gallery / map / reviews */
.rhero { position: relative; height: 220px; border-radius: var(--r-3); overflow: hidden;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }
.rhero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rhero .banner-emoji { width: 48px; height: 48px; font-size: 26px; }
.gallery { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-img { width: 132px; height: 96px; flex: none; border-radius: var(--r-2); object-fit: cover; background: var(--c-line); }
.mapimg { display: block; width: 100%; height: 180px; object-fit: cover; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-brand); color: #fff;
  font-weight: 700; display: grid; place-items: center; }

/* buttons */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 650; border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-5); border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--c-brand); color: #fff; }
.btn-primary:hover { background: var(--c-brand-ink); }
.btn-accent { background: var(--c-accent); color: var(--c-ink); } /* dark ink on coral: AA 5.73:1 */
.btn-accent:hover { background: #f15a36; color: var(--c-ink); }   /* keeps AA (4.81:1) on hover */
.btn-ghost { background: transparent; border-color: var(--c-line); color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-surface); }
.btn-block { width: 100%; display: flex; }
.btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); min-height: 44px; } /* comfortable tap target */

/* fields */
.field { display: block; }
.field > label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-1); color: var(--c-ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: var(--s-3); border: 1px solid var(--c-line);
  border-radius: var(--r-2); background: var(--c-surface); color: var(--c-ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--c-brand); outline-offset: 1px; border-color: var(--c-brand); }

/* badges + price */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: 700;
  padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-sand); color: var(--c-badge-default); }
.badge.ok { background: #e2f6ea; color: var(--c-badge-ok); }
.badge.warn { background: #fbf0d8; color: var(--c-badge-warn); }
.price { font-variant-numeric: tabular-nums; font-weight: 700; }

/* menu items */
.item { display: flex; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--c-line); }
.item:last-child { border-bottom: 0; }
.item .grow { flex: 1; }
.item.unavail { opacity: .55; }

/* timeline (order tracking) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--s-4) var(--s-5); }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); }
.timeline li::after { content: ''; position: absolute; left: 10px; top: 14px; bottom: 0; width: 2px; background: var(--c-line); }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--c-ok); }
.timeline li.now::before { background: var(--c-brand); box-shadow: 0 0 0 4px rgba(12,138,134,.18); }

/* empty / loading / error states */
.state { text-align: center; padding: var(--s-7) var(--s-4); color: var(--c-ink-soft); }
.state .emoji { font-size: 40px; display: block; margin-bottom: var(--s-3); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--c-line); border-top-color: var(--c-brand); border-radius: 50%; animation: spin 800ms linear infinite; margin: var(--s-5) auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* sticky cart bar */
.cartbar { position: sticky; bottom: 0; padding: var(--s-3) var(--s-4); background: var(--c-surface); border-top: 1px solid var(--c-line); box-shadow: var(--e-2); }

/* tabs (restaurant/courier/admin surfaces) */
.tabs { position: sticky; top: 57px; z-index: 9; display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-4);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line); overflow-x: auto; }
.tab { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 650; color: var(--c-ink-soft);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--c-brand); color: #fff; }
.tab:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); }
.kpi { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: var(--s-4); }
.kpi .n { font-size: var(--t-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--c-ink-soft); font-size: var(--t-sm); }

/* queue / job cards */
.qcard { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: var(--s-4); }
.qcard + .qcard { margin-top: var(--s-3); }
.qactions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); display: inline-block; }
.dot.live { background: var(--c-ok); box-shadow: 0 0 0 4px rgba(31,157,87,.18); }

/* trust line (our anti-DoorDash flex: local + transparent) */
.trust { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; }

/* category chips ("what are you craving?") — horizontal scroll, keyboard-operable */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-1) 0 var(--s-2);
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { appearance: none; cursor: pointer; font: inherit; font-weight: 650; white-space: nowrap;
  min-height: 44px; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.chip.on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } /* white on #0a7d79 = AA 4.97 */
.chip:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* meta chips on restaurant cards (cuisine/fee/local) */
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.metachip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600;
  padding: 3px var(--s-2); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink-soft); } /* ink-soft on bg = AA 5.35 */

/* menu hero */
.menuhero { display: flex; gap: var(--s-4); align-items: center; }
.menuhero .emoji { font-size: 44px; width: 72px; height: 72px; border-radius: var(--r-3); flex: none;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }

/* non-blocking toast (replaces alert) */
.gy-toast { position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translate(-50%, 120%); max-width: 90vw; padding: var(--s-3) var(--s-4);
  background: var(--c-ink); color: #fff; border-radius: var(--r-2); box-shadow: var(--e-3);
  font-size: var(--t-sm); z-index: 100; opacity: 0; transition: transform var(--m-base) var(--m-ease), opacity var(--m-base) var(--m-ease); }
.gy-toast.show { transform: translate(-50%, 0); opacity: 1; }
.gy-toast.err { background: var(--c-err); }
.gy-toast.ok { background: var(--c-badge-ok); }

/* ---------- responsive: designed for desktop AND mobile ---------- */
/* The app shell is a centered column on phones; on wider screens it grows and content
   reflows into grids/columns instead of a lonely strip in a sea of whitespace. */
@media (min-width: 1000px) {
  .app { max-width: 1120px; }
  .main { padding: var(--s-5) var(--s-6) var(--s-7); }
  .appbar, .tabs { padding-left: var(--s-6); padding-right: var(--s-6); }
  .narrow { max-width: 460px; margin-inline: auto; width: 100%; }   /* auth/short forms */
  .readable { max-width: 780px; margin-inline: auto; width: 100%; } /* menus, receipts */
}

/* restaurant cards: single column on phones → tile grid as space allows */
.rgrid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 680px) { .rgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* cart: stacked on mobile → items beside a sticky checkout panel on desktop */
.cart-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .cart-grid .checkout { position: sticky; top: var(--s-6); }
}

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