@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: oklch(91.8% 0.012 80);
  --canvas: oklch(97.4% 0.022 74);
  --paper: oklch(99.3% 0.008 75);
  --peach: oklch(92.8% 0.045 66);
  --peach-soft: oklch(96.1% 0.027 69);
  --ink: oklch(22.5% 0.032 50);
  --ink-soft: oklch(43% 0.025 58);
  --muted: oklch(55% 0.026 65);
  --line: oklch(87% 0.031 72);
  --accent: oklch(55% 0.16 43);
  --accent-dark: oklch(40% 0.115 43);
  --dark-panel: oklch(25% 0.045 48);
  --green: oklch(47% 0.12 149);
  --green-soft: oklch(92% 0.052 148);
  --blue: oklch(48% 0.12 255);
  --blue-soft: oklch(91.5% 0.045 254);
  --amber: oklch(50% 0.13 77);
  --amber-soft: oklch(93% 0.07 82);
  --red: oklch(48% 0.17 28);
  --red-soft: oklch(92% 0.055 25);
  /* Focus stays inside the warm palette: a deep cacao ring reads on cream,
     and .on-dark surfaces flip it to cream so it never disappears. */
  --focus-ring: oklch(31% 0.055 45);
  --focus-ring-inverse: oklch(97% 0.02 75);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
  --shadow: 0 28px 70px oklch(30% 0.02 55 / 0.12);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tap: 150ms var(--ease);
  --z-base: 1;
  --z-sticky: 5;
  --z-overlay: 20;
  --z-toast: 40;
  --z-skip: 60;
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font-sans);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
/* Fixed grain overlay: breaks the flatness of large cream surfaces without
   costing a request or intercepting pointer events. */
body::after {
  content: "";
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

/* Prices and counts are compared across rows and columns — they must not
   shuffle horizontally as digits change. */
output,
.basket-price,
.detail-price,
.plan-total strong,
.saving,
.selected-summary,
.compare-items,
.stepper output { font-variant-numeric: tabular-nums; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-300%);
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}
.skip-link:focus-visible { transform: translateY(0); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 2rem, 1080px);
  min-height: 72px;
  margin: 0 auto;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent-dark);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.wordmark img { display: block; width: 2.375rem; height: 2.375rem; flex: 0 0 auto; }
.product-nav { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.25rem; border-radius: 0.85rem; background: oklch(87% 0.018 75); }
.product-nav button { min-height: 34px; padding: 0.35rem 0.8rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 0.78rem; font-weight: 780; }
.product-nav button:hover { color: var(--ink); }
.product-nav button.active { background: var(--canvas); color: var(--accent-dark); box-shadow: 0 1px 4px oklch(25% 0.02 50 / 0.08); }
.freshness {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}
.freshness span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); }
.header-end { display: inline-flex; align-items: center; gap: 0.9rem; }
#sign-out { font-size: 0.8rem; }

/* The gate. Deliberately withholding: the dark cacao from the brand palette,
   the mark, the name, and one line. Nothing about what the product does, no
   sign-up, no marketing — it should read as a door, not a landing page. */
body.gated { background: var(--dark-panel); }
body.gated .site-header,
body.gated .site-footer { display: none; }
body.gated .app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* .view is defined further down, so this needs the compound selector to win
   its padding and min-height rather than relying on source order. */
.view.auth-view {
  display: grid;
  min-height: 100dvh;
  padding: 2rem 1.5rem;
  place-items: center;
  background: radial-gradient(120% 90% at 50% -8%, oklch(42% 0.08 45 / 0.55), transparent 62%),
    var(--dark-panel);
}

.gate {
  width: min(100%, 340px);
  padding: 2.5rem 2rem 2.1rem;
  border: 1px solid oklch(42% 0.045 48 / 0.6);
  border-radius: var(--radius-lg);
  background: linear-gradient(175deg, oklch(29% 0.05 48 / 0.9), oklch(23% 0.045 48 / 0.9));
  box-shadow: 0 30px 80px oklch(12% 0.02 40 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.05);
  text-align: center;
}
.gate-badge {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.3rem;
  place-items: center;
  border-radius: 1.35rem;
  background: var(--paper);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.06) inset, 0 16px 34px oklch(15% 0.03 40 / 0.5),
    0 0 46px oklch(58% 0.15 43 / 0.3);
}
.gate-mark { display: block; width: 2.15rem; height: 2.15rem; }
.gate h1 {
  margin: 0;
  color: oklch(96% 0.02 75);
  font-size: 1.65rem;
  font-weight: 820;
  letter-spacing: -0.03em;
}
.gate-line {
  margin: 0.45rem 0 2rem;
  color: oklch(72% 0.03 60);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}
.gate-form { display: grid; gap: 0.65rem; }
.gate-field { position: relative; }
.gate-field-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.05rem;
  height: 1.05rem;
  color: oklch(62% 0.035 55);
  transform: translateY(-50%);
  pointer-events: none;
}
.gate-field-icon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gate-form input {
  width: 100%;
  height: 52px;
  padding: 0 1rem 0 2.65rem;
  border: 1px solid oklch(38% 0.03 50);
  border-radius: 0.85rem;
  background: oklch(30% 0.035 48);
  color: oklch(96% 0.02 75);
  font-size: 0.95rem;
  transition: border-color var(--tap), background var(--tap);
}
.gate-form input::placeholder { color: oklch(60% 0.025 55); letter-spacing: 0.02em; }
.gate-form input:focus {
  border-color: oklch(62% 0.11 45);
  outline: none;
  background: oklch(33% 0.04 48);
  box-shadow: none;
}
.gate-form button {
  height: 52px;
  margin-top: 0.15rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background var(--tap), transform var(--tap);
}
.gate-form button:hover { background: oklch(60% 0.16 43); }
.gate-form button:active { transform: scale(0.98); }
.gate-form button:disabled { cursor: wait; opacity: 0.55; }
.gate-link {
  display: block;
  margin: 1.1rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: oklch(72% 0.03 60);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gate-link:hover { color: oklch(88% 0.02 70); }
.gate-link:disabled { cursor: wait; opacity: 0.6; }
.gate-note {
  min-height: 2.4rem;
  margin: 1.1rem 0 0;
  color: oklch(74% 0.03 60);
  font-size: 0.82rem;
  line-height: 1.5;
}
.auth-view :focus-visible { outline-color: var(--focus-ring-inverse); }

.app-shell {
  position: relative;
  width: min(100% - 2rem, 1080px);
  min-height: calc(100dvh - 148px);
  margin: 0 auto 2rem;
  border: 1px solid oklch(77% 0.018 65);
  border-radius: 2.3rem;
  background: var(--canvas);
  box-shadow: var(--shadow);
  overflow: clip;
}
.view {
  position: relative;
  min-height: calc(100dvh - 150px);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 6vw, 5rem) 8rem;
}
.view:focus { outline: none; }
.view-heading { margin-bottom: 2rem; }
.view-heading.compact { margin-bottom: 1.25rem; }
.view-heading.with-back { padding-left: 3.25rem; }
.eyebrow {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.052em; }
.subtitle { max-width: 56ch; margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 1.02rem; }

/* Which space this list belongs to. Sits under the title because it changes
   what the list *is*, not merely how it is filtered. */
.list-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 0.7rem; }
.list-scope select {
  width: auto;
  min-height: 38px;
  padding: 0.3rem 2rem 0.3rem 0.7rem;
  border-color: oklch(82% 0.03 70);
  background: var(--peach-soft);
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 780;
}
.list-scope .subtitle { margin: 0; font-size: 0.9rem; }
.list-sync { min-height: 1.1rem; margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8rem; }

.back-button {
  position: absolute;
  z-index: 2;
  top: clamp(2rem, 5vw, 4.5rem);
  left: clamp(1.1rem, 5vw, 4.1rem);
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.back-button { transition: background var(--tap), transform var(--tap); }
.back-button:hover { background: var(--peach); }
.back-button:active { transform: scale(0.92); }
.back-button svg { width: 1.85rem; height: 1.85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Every hover/selected state above was instant. One shared transition keeps
   the whole surface feeling responsive rather than snapping. */
.product-nav button,
.stepper button,
.delete-button,
.choice,
.store-option,
.space-button,
.basket-choice,
.link-button,
.secondary-action,
.file-source-button,
.receipt-download,
.add-form > button,
.inline-fields button,
.invite-form button {
  transition: background var(--tap), border-color var(--tap), color var(--tap),
    box-shadow var(--tap), transform var(--tap);
}
.stepper button:active,
.delete-button:active,
.add-form > button:active,
.inline-fields button:active,
.invite-form button:active { transform: scale(0.92); }
.choice:active,
.store-option:active,
.space-button:active,
.secondary-action:active,
.file-source-button:active { transform: scale(0.99); }

.shopping-items { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.shopping-items:empty { border-top: 0; }
.shopping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.15rem;
  min-height: 88px;
  border-bottom: 1px solid var(--line);
}
.shopping-copy button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: text;
  font-size: 1.12rem;
  font-weight: 780;
  text-align: left;
}
.shopping-copy span { display: block; margin-top: 0.12rem; color: var(--ink-soft); }
.inline-edit {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--accent);
  border-radius: 0.65rem;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  font-weight: 720;
}
.stepper {
  display: grid;
  grid-template-columns: 42px 38px 42px;
  align-items: center;
  padding: 0.32rem;
  border-radius: 0.95rem;
  background: var(--peach);
}
.stepper button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0.72rem;
  background: var(--paper);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 800;
}
.stepper button:hover { background: oklch(98% 0.035 70); }
.stepper output { font-weight: 800; text-align: center; }
.delete-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--red);
  cursor: pointer;
}
.delete-button:hover { background: var(--red-soft); }
.delete-button svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.add-form {
  position: relative;
  margin-top: 2.25rem;
}
.add-form input {
  width: 100%;
  height: 58px;
  padding: 0 4.5rem 0 1rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.add-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(55% 0.16 43 / 0.16); }
.add-form > button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  font-size: 1.7rem;
  font-weight: 650;
}
.add-form p { margin: 0.55rem 0 0 0.4rem; color: var(--muted); font-size: 0.84rem; }

.action-dock {
  position: absolute;
  z-index: var(--z-sticky);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem clamp(1.25rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  background: oklch(97.4% 0.022 74 / 0.96);
}
.list-dock { justify-content: flex-end; }
.primary-action {
  min-height: 54px;
  padding: 0.8rem 1.75rem;
  border: 0;
  border-radius: 1rem;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  font-weight: 800;
  transition: background 170ms ease, transform 170ms cubic-bezier(.22, 1, .36, 1);
}
.primary-action:hover { background: oklch(49% 0.16 43); transform: translateY(-1px); }
.primary-action:active { transform: translateY(1px) scale(0.99); }
.primary-action:disabled { cursor: wait; opacity: 0.6; transform: none; }
.list-dock .primary-action { width: min(100%, 390px); }
#clarify-view .action-dock .primary-action { width: min(100%, 720px); margin: 0 auto; }

.clarification-panel {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: clamp(1.3rem, 4vw, 2.25rem);
  border: 2px solid oklch(78% 0.11 68);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.status-title { display: flex; align-items: center; gap: 0.7rem; color: var(--amber); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.status-icon { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.58rem; font-weight: 900; }
.status-icon.exact { background: var(--green-soft); color: var(--green); }
.status-icon.substitute { background: var(--blue-soft); color: var(--blue); }
.status-icon.assumption { background: var(--amber-soft); color: var(--amber); }
.status-icon.missing { background: var(--red-soft); color: var(--red); }
.clarification-panel h2 { margin: 1.2rem 0 0.15rem; font-size: 1.6rem; }
.clarification-panel > p { margin: 0; color: var(--ink-soft); font-size: 1.15rem; }
.choice-list { display: grid; gap: 0.75rem; margin-top: 1.7rem; }
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
  cursor: pointer;
  font-weight: 750;
  text-align: left;
}
.choice:hover { border-color: oklch(71% 0.08 62); }
.choice.selected { border-color: var(--accent); background: var(--peach-soft); }
.choice strong { color: var(--accent); font-size: 0.85rem; }
.remember-choice { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; color: var(--ink-soft); font-size: 0.88rem; }
.remember-choice input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.skeleton { border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--peach) 20%, var(--paper) 42%, var(--peach) 64%); background-size: 220% 100%; animation: shimmer 1.5s ease-in-out infinite; }
.hero-skeleton { height: 140px; margin-top: 3rem; }
.row-skeleton { height: 82px; margin-top: 1rem; }
@keyframes shimmer { to { background-position-x: -220%; } }

.status-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.pill { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 34px; padding: 0.35rem 0.72rem; border-radius: 999px; font-size: 0.8rem; font-weight: 780; }
.pill.exact { background: var(--green-soft); color: var(--green); }
.pill.substitute { background: var(--blue-soft); color: var(--blue); }
.pill.neutral { background: oklch(91.5% 0.022 75); color: var(--ink-soft); }

.recommendation-label, .section-heading h2 {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.basket-choice {
  width: 100%;
  margin: 0;
  padding: 1.45rem 1.65rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--dark-panel);
  color: var(--paper);
  cursor: pointer;
  text-align: left;
}
.basket-choice.light { border-color: var(--accent); background: var(--paper); color: var(--ink); }
.basket-choice.selected.light { box-shadow: 0 0 0 3px oklch(55% 0.16 43 / 0.12); }
.basket-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.basket-choice-head { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.basket-choice-name { display: block; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 820; letter-spacing: -0.025em; }
.basket-choice-meta { display: block; margin-top: 0.1rem; color: currentColor; font-size: 0.88rem; font-weight: 650; opacity: 0.72; }
.basket-price { font-size: clamp(1.8rem, 4vw, 2.35rem); font-weight: 850; letter-spacing: -0.04em; white-space: nowrap; }
.saving { display: block; color: var(--green); font-size: 0.9rem; font-weight: 800; text-align: right; }
.alternative-block { margin-top: 1.7rem; }
.details-toggle { display: inline-block; margin-top: 1.1rem; color: var(--accent); font-weight: 780; }
.basket-detail { margin-top: 1.15rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.detail-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.65rem 0; }
.detail-title { display: block; font-weight: 760; }
.detail-meta { display: block; font-size: 0.78rem; font-weight: 650; }
.detail-meta.exact { color: var(--green); }
.detail-meta.substitute { color: var(--blue); }
.detail-meta.assumption { color: var(--amber); }
.detail-meta.missing { color: var(--red); }
.detail-price { font-weight: 800; white-space: nowrap; }

.store-comparison { margin-top: 2.3rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.link-button { padding: 0.35rem 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 0.85rem; font-weight: 800; }
/* Ranked list, not a card grid: a shared baseline plus a proportional bar
   makes the spread between stores legible at a glance, which four equal
   cards never did. The bar is decoration — the price text carries the value. */
.store-options { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.store-option {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.9rem;
  min-height: 64px;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: transparent;
}
/* Inset hairline rather than a box-shadow: a shadow on a rounded box ghosts
   the whole outline instead of drawing a single separator line. */
.store-option + .store-option::before {
  content: "";
  position: absolute;
  inset: 0 0.9rem auto;
  height: 1px;
  background: var(--line);
  transition: opacity var(--tap);
}
.store-option:hover { background: var(--peach-soft); }
.store-option:hover::before,
.store-option:hover + .store-option::before { opacity: 0; }
.store-rank { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.store-option strong { display: block; font-size: 1.02rem; letter-spacing: -0.012em; }
.store-option .store-coverage { display: block; color: var(--ink-soft); font-size: 0.8rem; }
.store-option output { font-size: 1.12rem; font-weight: 820; letter-spacing: -0.02em; white-space: nowrap; }
.store-option.incomplete output { color: var(--red); }
.store-bar {
  grid-column: 2 / -1;
  height: 5px;
  border-radius: 999px;
  background: oklch(89% 0.022 72);
}
.store-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  /* Muted: the longest bar is the most expensive basket, so it must not carry
     the strongest colour. Only the cheapest complete basket gets the green. */
  background: oklch(72% 0.075 45);
  transition: width 420ms var(--ease);
}
.store-option.best { background: var(--peach-soft); }
.store-option.best .store-rank { color: var(--accent-dark); }
.store-option.best .store-bar > span { background: var(--green); }
/* An incomplete basket is cheap only because items are missing, so its bar is
   hatched rather than solid — a short solid bar would read as "better value".
   The hatching is a non-color cue, paired with the "Cesta incompleta" label. */
.store-option.incomplete .store-bar > span {
  background: repeating-linear-gradient(
    -45deg,
    oklch(74% 0.07 40) 0 4px,
    oklch(88% 0.03 50) 4px 8px
  );
}
.store-flag { color: var(--green); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.store-option.incomplete .store-flag { color: var(--red); }

/* Product-first, not store-first: one row per requested item, so the match
   is always readable without horizontal scrolling. A price matrix needs a
   column per store, which never fits a phone and hides which product a
   price actually belongs to — this never scrolls sideways at any width. */
.compare-items { display: grid; margin-top: 0.8rem; padding: 0.3rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); }
.compare-item { position: relative; padding: 1rem 0; }
.compare-item + .compare-item { border-top: 1px solid var(--line); }
.compare-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.compare-item-name { font-weight: 780; letter-spacing: -0.008em; }
.compare-item-price { font-family: var(--font-mono); font-weight: 820; white-space: nowrap; }
.compare-item-match { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.compare-item-match .status-icon { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.compare-match-product { display: block; font-size: 0.88rem; font-weight: 700; }
.compare-match-meta { display: block; font-size: 0.76rem; font-weight: 650; }
.compare-match-meta.exact { color: var(--green); }
.compare-match-meta.substitute { color: var(--blue); }
.compare-match-meta.assumption { color: var(--amber); }
.compare-match-meta.missing { color: var(--red); }
.compare-item-match.missing .compare-match-meta { grid-column: 2; }

.compare-item-toggle { margin-top: 0.6rem; min-height: 34px; }
/* A dense, always-vertical list: store name, product, price. Never a table,
   so nothing here ever needs to scroll sideways to be read. */
.compare-store-list { display: grid; gap: 0.15rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.compare-store-row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.3rem 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.65rem;
}
.compare-store-label { padding-top: 0.15rem; color: var(--ink-soft); font-size: 0.82rem; font-weight: 750; }
.compare-store-product { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.84rem; line-height: 1.35; }
.compare-store-product .status-icon { flex: none; width: 1.3rem; height: 1.3rem; font-size: 0.7rem; }
.compare-store-product.unavailable { color: var(--muted); }
.compare-store-price { font-family: var(--font-mono); font-size: 0.84rem; font-weight: 750; white-space: nowrap; }
.compare-store-row.chosen { background: var(--peach-soft); }
.compare-store-row.chosen .compare-store-label { color: var(--accent-dark); font-weight: 800; }

.result-dock { justify-content: space-between; }
.selected-summary { min-width: 0; font-size: 0.86rem; font-weight: 760; }
.selected-summary strong { display: block; font-size: 1rem; }
.selected-summary span { display: block; color: var(--green); }
.compact-action { flex: 0 0 auto; }

.plan-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.plan-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.plan-group header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; background: var(--peach); }
.plan-group h2 { margin: 0; font-size: 1.35rem; }
.plan-group header p { margin: 0.1rem 0 0; color: var(--accent-dark); font-size: 0.86rem; font-weight: 760; }
.plan-group header button { border: 0; background: transparent; color: var(--accent-dark); cursor: pointer; font-weight: 780; }
.plan-items { padding: 0 1.35rem; }
.plan-item { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 82px; border-bottom: 1px solid var(--line); }
.plan-item:last-child { border-bottom: 0; }
.plan-item strong { display: block; }
.plan-item small { display: block; margin-top: 0.1rem; color: var(--ink-soft); }
.plan-item output { font-weight: 820; }
.plan-total { display: flex; align-items: center; justify-content: space-between; margin-top: 1.3rem; padding: 1.4rem 1.6rem; border-radius: var(--radius-lg); background: var(--dark-panel); color: var(--paper); }
.plan-total span { color: oklch(82% 0.018 60); font-weight: 720; }
.plan-total strong { font-size: 2rem; }

.error-banner {
  position: fixed;
  z-index: var(--z-toast);
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 440px;
  padding: 0.9rem 0.9rem 0.9rem 1.2rem;
  border-radius: 0.85rem;
  background: var(--red);
  color: var(--paper);
  box-shadow: var(--shadow);
}
.error-banner p { margin: 0; font-size: 0.92rem; }
.error-banner.success { background: var(--green); }
.error-dismiss {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: oklch(100% 0 0 / 0.16);
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--tap);
}
.error-dismiss:hover { background: oklch(100% 0 0 / 0.28); }
.site-footer { max-width: 62ch; padding: 1rem; margin: 0 auto; color: var(--ink-soft); font-size: 0.76rem; text-align: center; }

.management-view { padding-bottom: 4rem; }
.management-layout { display: grid; grid-template-columns: minmax(250px, 0.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.space-rail { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.space-list { display: grid; gap: 0.45rem; }
.space-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 0.65rem 0.8rem; border: 1px solid transparent; border-radius: 0.85rem; background: transparent; cursor: pointer; text-align: left; }
.space-button:hover { background: var(--peach-soft); }
.space-button.selected { border-color: oklch(79% 0.08 62); background: var(--peach); }
.space-button strong { display: block; }
.space-button span { color: var(--ink-soft); font-size: 0.75rem; }
.space-glyph { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 0.65rem; background: var(--paper); color: var(--accent-dark); font-size: 1rem; }
.compact-form { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* Scoped away from the file/check labels so those no longer need !important
   to escape this rule. */
.compact-form > label,
.data-form label:not(.check-field),
.receipt-upload label:not(.file-source-button) { display: grid; gap: 0.35rem; color: var(--ink-soft); font-size: 0.78rem; font-weight: 740; }
.inline-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
input, select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.7rem; outline: none; background: var(--paper); color: var(--ink); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(55% 0.16 43 / 0.14); }
input[type="file"] { min-height: 50px; padding: 0.35rem; overflow: hidden; color: var(--ink-soft); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
input[type="file"]::file-selector-button { min-height: 38px; margin-right: 0.65rem; padding: 0.45rem 0.7rem; border: 0; border-radius: 0.55rem; background: var(--peach); color: var(--accent-dark); cursor: pointer; font: inherit; font-weight: 780; }
.file-source-field { min-width: 0; margin: 0.8rem 0 0; padding: 0; border: 0; }
.file-source-field legend { margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 0.78rem; font-weight: 740; }
.file-source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.file-source-button { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--canvas); color: var(--accent-dark); cursor: pointer; font-size: 0.8rem; font-weight: 800; text-align: center; }
.file-source-button:hover { border-color: oklch(71% 0.08 62); background: var(--peach-soft); }
.file-source-button.camera-button { background: var(--peach); }
/* Must out-specify the input[type="file"] sizing rule above, hence the
   compound selector rather than !important. */
input[type="file"].visually-hidden-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.file-source-field:has(.visually-hidden-input:focus-visible) .file-source-actions { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 0.75rem; }
.selected-file { min-width: 0; margin: 0.55rem 0 0; overflow: hidden; color: var(--ink-soft); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.field-error { color: var(--red); font-weight: 780; white-space: normal; }
.inline-fields button, .invite-form button { min-height: 42px; border: 0; border-radius: 0.7rem; background: var(--accent); color: var(--paper); cursor: pointer; font-weight: 780; }
.space-detail { min-width: 0; }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.2rem 0 1.2rem; }
.detail-heading h2 { margin: 0; font-size: 1.8rem; letter-spacing: -0.035em; }
.role-badge { padding: 0.32rem 0.65rem; border-radius: 999px; background: var(--peach); color: var(--accent-dark); font-size: 0.73rem; font-weight: 800; text-transform: capitalize; }
.management-section { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.management-section + .management-section { margin-top: 1rem; }
.section-heading > div > h2 { margin: 0; color: var(--ink); font-size: 1.1rem; letter-spacing: -0.015em; text-transform: none; }
.section-heading p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.location-list, .member-list, .receipt-list { display: grid; gap: 0.65rem; margin-top: 0.9rem; }
.location-row, .member-row, .receipt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 0.95rem; background: var(--paper); }
.location-row strong, .member-row strong, .receipt-row strong { display: block; }
.member-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.location-row small, .member-row small, .receipt-row small { display: block; margin-top: 0.12rem; color: var(--ink-soft); }
.default-badge { display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.38rem; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; }
.empty-copy { padding: 1.2rem; border: 1px dashed oklch(78% 0.04 70); border-radius: 0.9rem; color: var(--ink-soft); text-align: center; }
.list-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2.75rem 1.5rem;
  border: 1px dashed oklch(80% 0.045 70);
  border-radius: var(--radius-lg);
  background: var(--peach-soft);
  text-align: center;
}
.list-empty .upload-icon { margin-bottom: 0.4rem; background: var(--paper); }
.list-empty strong { font-size: 1.12rem; letter-spacing: -0.015em; }
.list-empty p { max-width: 38ch; margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.list-empty ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.list-empty button {
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 780;
  transition: background var(--tap), border-color var(--tap), transform var(--tap);
}
.list-empty button:hover { border-color: oklch(71% 0.08 62); background: var(--peach); }
.list-empty button:active { transform: scale(0.96); }
.data-form, .receipt-upload { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.form-grid > *, .inline-fields > *, .invite-form > * { min-width: 0; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-field { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.78rem; font-weight: 740; }
.check-field input { width: auto; min-height: auto; accent-color: var(--accent); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: 1rem; }
.secondary-action { min-height: 44px; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--canvas); cursor: pointer; font-weight: 740; }
.data-form .primary-action { min-height: 44px; padding: 0.6rem 1rem; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px; gap: 0.55rem; margin-top: 1rem; }
.invitation-result { margin-top: 0.7rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--green-soft); color: var(--green); font-size: 0.8rem; overflow-wrap: anywhere; }
.invitation-result p { margin: 0 0 0.5rem; }
.invite-link-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.invite-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  background: oklch(100% 0 0 / 0.4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
.invite-link-row .link-button { flex: 0 0 auto; font-size: 0.78rem; }

.receipt-layout { display: grid; grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.receipt-layout > *, .receipt-upload, .receipt-history { min-width: 0; }
.receipt-upload { margin-top: 0; }
.upload-heading { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.upload-heading h2 { margin: 0; font-size: 1.2rem; }
.upload-heading p { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.77rem; }
.upload-icon { display: grid; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; place-items: center; border-radius: 0.8rem; background: var(--peach); color: var(--accent-dark); font-size: 1.5rem; }
.receipt-upload > label + label, .receipt-upload .form-grid { margin-top: 0.8rem; }
.receipt-upload .primary-action { width: 100%; margin-top: 1rem; }
.form-note { min-height: 1.2rem; margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.78rem; }
.receipt-row output { font-weight: 820; white-space: nowrap; }
.receipt-row > span:last-child { display: flex; align-items: center; gap: 0.65rem; }
.receipt-download { padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.65rem; color: var(--accent-dark); font-size: 0.75rem; font-weight: 780; text-decoration: none; }
.receipt-download:hover { background: var(--peach-soft); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
/* On the dark recommendation card and plan total the cacao ring would vanish,
   so those flip to the cream ring. */
.basket-choice:not(.light) :focus-visible,
.plan-total :focus-visible,
.skip-link:focus-visible { outline-color: var(--focus-ring-inverse); }
.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; }

@media (max-width: 700px) {
  .site-header { min-height: 58px; }
  .site-header .wordmark img { width: 2rem; height: 2rem; }
  .site-header .wordmark span { font-size: 0.95rem; }
  .site-header { flex-wrap: wrap; padding: 0.5rem 0; }
  .product-nav { order: 3; width: 100%; margin-top: 0.35rem; }
  .product-nav button { flex: 1; }
  .app-shell { width: 100%; min-height: calc(100dvh - 58px); margin: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 2rem 2rem 0 0; box-shadow: none; }
  .view { min-height: calc(100dvh - 58px); padding: 2rem 1.25rem 8.5rem; }
  .back-button { top: 1.9rem; left: 0.8rem; }
  .view-heading.with-back { padding-left: 2.85rem; }
  h1 { font-size: 2.35rem; }
  .shopping-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; min-height: 82px; }
  .shopping-copy button { max-width: 40vw; font-size: 1rem; }
  .shopping-copy span { font-size: 0.88rem; }
  .stepper { grid-template-columns: 38px 32px 38px; }
  .stepper button { width: 38px; height: 38px; }
  .action-dock { position: fixed; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); }
  .list-dock .primary-action { width: 100%; }
  .clarification-panel { padding: 1.1rem; }
  .choice { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .basket-choice { padding: 1.2rem; }
  .basket-choice-head { align-items: flex-start; }
  .basket-price { font-size: 1.8rem; }
  .store-option { grid-template-columns: 1.4rem minmax(0, 1fr) auto; padding: 0.7rem 0.6rem; }
  .compare-items { padding: 0.3rem 0.8rem; }
  .compare-store-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; padding: 0.5rem 0.4rem; }
  .compare-store-label { grid-column: 1 / -1; padding-top: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
  .result-dock { align-items: center; }
  .selected-summary { font-size: 0.76rem; }
  .selected-summary strong { font-size: 0.88rem; }
  .compact-action { padding-inline: 1rem; }
  .plan-groups { grid-template-columns: 1fr; }
  .management-layout, .receipt-layout { grid-template-columns: 1fr; }
  .management-view { padding-bottom: 3rem; }
  .space-rail { padding: 0.8rem; }
  .space-list { display: flex; gap: 0.45rem; overflow-x: auto; }
  .space-button { min-width: 150px; }
  .form-grid, .form-grid.two-columns { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions button { width: 100%; }
  .site-footer { display: none; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .receipt-layout { grid-template-columns: 1fr; }
  .receipt-upload { max-width: 560px; }
}

@media (max-width: 440px) {
  .file-source-actions { grid-template-columns: 1fr; }
  .receipt-row { align-items: flex-start; flex-direction: column; }
  .receipt-row > span:last-child { width: 100%; justify-content: space-between; }
}

@media (max-width: 390px) {
  .freshness { display: none; }
  .shopping-row { gap: 0.25rem; }
  .shopping-copy button { max-width: 36vw; }
  .delete-button { width: 38px; }
  .stepper { grid-template-columns: 34px 28px 34px; }
  .stepper button { width: 34px; height: 36px; }
  .basket-choice-head { flex-direction: column; gap: 0.4rem; }
  .saving { text-align: left; }
}

/* Views swap instantly via [hidden]; a short entry gives the change somewhere
   to land instead of snapping. The view itself only fades — animating a
   transform on it would make it the containing block for the mobile
   position:fixed .action-dock. The lift is applied to the heading instead. */
.view:not([hidden]) { animation: view-fade 260ms var(--ease) both; }
.view:not([hidden]) > .view-heading { animation: view-lift 380ms var(--ease) both; }
@keyframes view-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes view-lift {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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