/* styles.css — one column, big targets, readable in a store aisle. */

:root {
  --bg:        #f6f5f1;
  --surface:   #ffffff;
  --surface-2: #eceae4;
  --line:      #dedbd3;
  --text:      #1c1d1a;
  --muted:     #6c6f68;
  --faint:     #9a9d95;
  --accent:    #2f6d4f;
  --accent-ink:#ffffff;
  --accent-sf: #e4efe8;
  --warn:      #9a5f14;
  --warn-sf:   #fbf0dc;
  --danger:    #a33a2c;
  --radius:    14px;
  --tap:       44px;
  --pad:       16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #15161a;
    --surface:   #1e2026;
    --surface-2: #282b33;
    --line:      #343842;
    --text:      #eceef0;
    --muted:     #9aa0aa;
    --faint:     #6b7280;
    --accent:    #62b98c;
    --accent-ink:#10241a;
    --accent-sf: #1d3a2c;
    --warn:      #d9a44e;
    --warn-sf:   #3a2f18;
    --danger:    #e0705e;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* ─── Layout ─────────────────────────────────────────────────────── */
#app { min-height: 100vh; min-height: 100dvh; }

.screen {
  padding: var(--pad);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
}
/* The running-total bar sits above the tab bar, so the last aisle needs room
   to clear both or it is hidden underneath. */
.screen.with-total { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;
  border-bottom: 1px solid var(--line);
  max-width: 720px; margin: 0 auto;
}
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ─── Tab bar ────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  flex: 1; border: 0; background: none; color: var(--muted);
  padding: 8px 4px 10px; font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; font-family: inherit;
}
.tabbar button .ic { font-size: 20px; line-height: 1; }
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar .badge {
  position: absolute; transform: translate(14px, -6px);
  background: var(--accent); color: var(--accent-ink);
  font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 4px; font-weight: 700;
}

/* ─── Cards & rows ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 12px;
}
.card h2 { margin: 0 0 6px; font-size: 16px; }
.card p  { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  min-height: var(--tap);
}
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 500; overflow-wrap: anywhere; }
.row .meta { color: var(--muted); font-size: 13px; margin-top: 1px; }
.row .price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.section-head {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 4px; font-size: 13px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.section-head .count { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ─── Controls ───────────────────────────────────────────────────── */
button, input, select, textarea { font-family: inherit; font-size: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:active { transform: scale(0.985); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost   { background: none; }
.btn.danger  { color: var(--danger); }
.btn.block   { display: flex; width: 100%; }
.btn.sm      { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--text);
  min-height: var(--tap);
}
textarea { min-height: 160px; resize: vertical; line-height: 1.4; font-size: 15px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }

/* Quantity stepper */
.stepper { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.stepper button {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 19px; font-weight: 600; cursor: pointer;
  display: grid; place-items: center; padding: 0; line-height: 1;
}
.stepper .n {
  min-width: 30px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stepper.zero .n { color: var(--faint); font-weight: 500; }
.stepper button.plus { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Segmented control */
.seg { display: flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: 0; background: none; color: var(--muted);
  padding: 8px 10px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.10); }

/* Status pills */
.pill {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.pill.matched  { background: var(--accent-sf); color: var(--accent); }
.pill.suggested{ background: var(--warn-sf);  color: var(--warn); }
.pill.new      { background: var(--surface-2); color: var(--muted); }

/* Sticky totals bar */
.totalbar {
  position: fixed; left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 25;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad);
}
.totalbar .inner {
  max-width: 720px; margin: 0 auto;
  /* Top-aligned: the cart figure carries a "still to get" line underneath, and
     centring makes the two amounts sit at different heights. */
  display: flex; align-items: flex-start; gap: 12px;
}
.totalbar .inner > .btn { align-self: center; }
.totalbar .figs { display: flex; gap: 20px; min-width: 0; }
.totalbar .cap { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* Two figures side by side while shopping: what the whole trip costs, and what
   is in the trolley so far. Seeing only the trolley loses sight of the total,
   which is the number you want before you set off. */
.totalbar .inner { gap: 18px; }
.totalbar .fig { min-width: 0; }
.totalbar .amt { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.totalbar .amt.cart { color: var(--accent); }
.totalbar .lbl { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 379px) {
  .totalbar .figs { gap: 14px; }
  .totalbar .amt { font-size: 18px; }
  .totalbar .lbl { font-size: 11px; }
}

/* ─── Sheet / modal ──────────────────────────────────────────────── */
.sheet-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.42); display: flex; align-items: flex-end;
}
.sheet {
  background: var(--bg); width: 100%; max-width: 720px; margin: 0 auto;
  border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column; animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
.sheet header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line);
}
.sheet header h2 { margin: 0; font-size: 17px; flex: 1; }
.sheet .body { overflow-y: auto; padding: var(--pad); -webkit-overflow-scrolling: touch; }
.sheet .foot {
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); display: flex; gap: 8px;
}

/* Full-screen page (review) */
.page { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.page > header {
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
}
.page > header h2 { margin: 0; font-size: 18px; flex: 1; }
.page > .body { flex: 1; overflow-y: auto; padding: var(--pad); -webkit-overflow-scrolling: touch; }
.page > .body > .inner { max-width: 720px; margin: 0 auto; }
.page > .foot {
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface);
}
.page > .foot .inner { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; align-items: center; }

/* ─── Review rows ────────────────────────────────────────────────── */
.rev { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.rev.off { opacity: .42; }
.rev .top { display: flex; align-items: flex-start; gap: 10px; }
.rev .nm { flex: 1; font-weight: 600; }
.rev .raw { font-size: 12px; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 2px; overflow-wrap: anywhere; }
.rev .ctl { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.rev .ctl input[type="number"] { width: 92px; min-height: 38px; }
.rev .ctl select { flex: 1; min-width: 150px; min-height: 38px; }

/* Drawn, not an emoji: the ⬜️ glyph renders as a solid grey block on several
   platforms and reads as "disabled" rather than "not yet picked up". */
.check {
  width: 27px; height: 27px; flex: 0 0 auto;
  border: 2px solid var(--line); border-radius: 8px;
  background: var(--surface); display: grid; place-items: center;
}
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after { content: "✓"; color: var(--accent-ink); font-size: 17px; font-weight: 800; line-height: 1; }

/* Store switcher: a row of chips that scrolls sideways. A dropdown hides which
   stores exist and how much is waiting on each, which is the thing you want to
   see when you pick one up. */
.stores {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad);
}
.stores::-webkit-scrollbar { display: none; }
.stores button {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 20px; padding: 8px 14px; min-height: 38px;
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.stores button[aria-selected="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
.stores button .n {
  background: var(--surface-2); color: var(--muted);
  border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; min-width: 18px;
}
.stores button[aria-selected="true"] .n {
  background: color-mix(in srgb, var(--accent-ink) 24%, transparent); color: var(--accent-ink);
}

.empty { text-align: center; color: var(--muted); padding: 44px 20px; }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 17px; }
.empty p { margin: 0 auto; max-width: 320px; font-size: 14px; }

.hint { background: var(--accent-sf); color: var(--accent); border-radius: 11px; padding: 11px 13px; font-size: 13.5px; line-height: 1.4; margin-bottom: 12px; }
.hint b { font-weight: 700; }
.note { color: var(--muted); font-size: 13px; }

.bar { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.bar > div { height: 100%; background: var(--accent); transition: width .25s; }

.spark { display: flex; align-items: flex-end; justify-content: flex-start; gap: 3px; height: 44px; margin-top: 8px; }
.spark i { flex: 1 1 0; max-width: 26px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px; opacity: .5; }
.spark i:last-child { opacity: 1; }

.tag { display: inline-block; background: var(--surface-2); color: var(--muted); border-radius: 6px; padding: 2px 7px; font-size: 12px; margin: 0 4px 4px 0; font-family: ui-monospace, Menlo, monospace; }

.up   { color: var(--danger); }
.down { color: var(--accent); }