:root {
  --ink: #173f35;
  --ink-2: #285c4e;
  --cream: #f5f0e6;
  --paper: #fffdf8;
  --gold: #e9b949;
  --gold-soft: #f7df9f;
  --coral: #dc765c;
  --muted: #65756f;
  --line: rgba(23, 63, 53, 0.16);
  --shadow: 0 18px 55px rgba(23, 63, 53, 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 5%, rgba(233, 185, 73, 0.18), transparent 26rem),
    var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, textarea, input { font: inherit; }
button, label[for="offer-file"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, input:focus-visible, label[for="offer-file"]:focus-visible {
  outline: 3px solid rgba(220, 118, 92, 0.45);
  outline-offset: 3px;
}

.site-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  width: 35px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 10px 10px 15px 15px;
  background: var(--ink);
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 1.3rem;
}

.location-chip {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
}

.location-chip span { color: var(--coral); margin-right: 5px; }

main { max-width: 1120px; margin: 0 auto; padding: 0 28px 20px; }

.hero { padding: 82px 0 48px; max-width: 780px; }
.eyebrow, .step {
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 9vw, 7.4rem);
  line-height: 0.84;
  font-weight: 500;
  letter-spacing: -0.065em;
}

h1 em { color: var(--coral); font-weight: 400; }
.hero p { max-width: 620px; color: var(--ink-2); font-size: 1.12rem; }

h2 {
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.035em;
}

.planner, .data-panel, .results, .sources {
  border-top: 1px solid var(--line);
  padding: 42px 0 52px;
}

.section-heading, .results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.step { display: block; margin-bottom: 5px; }
.text-button {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 3px 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 750;
  font-size: 0.82rem;
}

textarea {
  display: block;
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: 1.05rem;
  line-height: 1.7;
}

textarea::placeholder { color: #83918c; }
.input-help { margin: 12px 4px 24px; color: var(--muted); font-size: 0.82rem; }

.discovery-panel { margin: 0 0 26px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 253, 248, .62); }
.discovery-panel > summary { cursor: pointer; font-size: .84rem; font-weight: 800; }
.discovery-panel[open] > summary { margin-bottom: 18px; }
.discovery-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.discovery-heading h3 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.discovery-heading p { max-width: 480px; margin: 0; color: var(--muted); font-size: .75rem; text-align: right; }
.discovery-kicker { color: var(--coral); font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.bundle-list, .suggestion-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.suggestion-list { flex-wrap: wrap; overflow: visible; padding-top: 7px; border-top: 1px solid var(--line); }
.bundle-chip, .suggestion-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; padding: 9px 12px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; }
.bundle-chip { min-width: 150px; }
.bundle-chip b, .suggestion-chip b { display: block; font-size: .74rem; }
.bundle-chip small, .suggestion-chip small { display: block; max-width: 230px; margin-top: 2px; color: var(--muted); font-size: .62rem; }
.bundle-chip:hover, .suggestion-chip:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.suggestion-chip.live { border-color: rgba(220,118,92,.55); background: #fff7ef; }
.meal-idea-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.meal-idea { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #f7f1df; color: var(--ink); cursor: pointer; text-align: left; }
.meal-idea b, .meal-idea span, .meal-idea small { display: block; }
.meal-idea b { font-size: .78rem; }
.meal-idea span { margin: 4px 0; color: var(--ink-2); font-size: .68rem; }
.meal-idea small { color: var(--muted); font-size: .62rem; }

.settings { margin: 0 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.settings summary { cursor: pointer; font-weight: 800; font-size: 0.9rem; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 30px; margin-top: 22px; }
.settings-grid label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.78rem; font-weight: 750; }
.settings-grid label span { color: var(--muted); }
.settings-grid input { width: 100%; accent-color: var(--coral); }
.settings-grid select, .settings-grid input[type="number"] { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: var(--paper); color: var(--ink); }
.settings-grid .checkbox-setting { align-content: center; justify-content: flex-start; }
.settings-grid .checkbox-setting input { width: auto; }
.setting-note { margin: 15px 0 0; color: var(--muted); font-size: .72rem; }

.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  cursor: pointer;
  font-weight: 850;
  text-decoration: none;
}

.primary-button { min-width: 230px; background: var(--ink); color: white; }
.primary-button:hover { background: var(--ink-2); }
.primary-button:disabled { cursor: wait; opacity: .55; }
.secondary-button { border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 0.8rem; }

.data-panel { display: block; }
.data-panel > summary { cursor: pointer; font-size: .84rem; font-weight: 800; }
.data-panel[open] > summary { margin-bottom: 22px; }
.data-panel[open] > div:first-of-type { display: inline-block; width: min(65%, 680px); vertical-align: top; }
.data-panel p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.data-panel .pipeline-status { margin-top: 6px; color: var(--ink-2); font-size: .74rem; }
.data-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
#offer-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.warning {
  flex: 0 0 100%;
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 13px 16px;
  background: var(--gold-soft);
  font-size: 0.84rem;
}

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 24px; }
.intake-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0; }
.intake-summary:empty { display: none; }
.intake-group { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.72); }
.intake-group header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.intake-group h3 { margin: 0; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.intake-group header span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: .7rem; font-weight: 800; }
.intake-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.task-chip { display: inline-flex; flex-direction: column; padding: 7px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: .75rem; }
.task-chip b { font-weight: 750; }
.task-chip small { color: var(--muted); font-size: .63rem; }
.intake-group.return { border-color: rgba(220,118,92,.45); }
.intake-group.done { opacity: .68; }
.summary-card {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.summary-card strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 500; letter-spacing: -0.04em; }
.summary-card span { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.summary-card.total { border-color: var(--ink-2); background: #eef5f1; }

.plan-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: transparent; color: var(--ink); cursor: pointer; font-size: 0.8rem; font-weight: 800; }
.tab.active { border-color: var(--ink); background: var(--ink); color: white; }
.value-explanation { margin: -5px 0 18px; padding: 12px 15px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: #faf4df; color: var(--ink-2); font-size: .82rem; }

.basket-assumptions { margin: 22px 0 10px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.72); }
.basket-assumptions header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.basket-assumptions h3, .store-comparison h3 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 1.32rem; font-weight: 500; }
.basket-assumptions header p { max-width: 460px; margin: 0; color: var(--muted); font-size: .72rem; text-align: right; }
.quantity-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quantity-chip { padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.quantity-chip b, .quantity-chip small { display: block; }
.quantity-chip b { font-size: .75rem; }
.quantity-chip small { color: var(--muted); font-size: .63rem; }

.store-plan { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.errand-plan { border-color: rgba(220,118,92,.5); }
.store-plan-header { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.store-plan-header h3 { margin: 0 0 4px; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }
.store-plan-header p { margin: 0; color: var(--muted); font-size: 0.75rem; }
.mode-badge { align-self: start; border-radius: 999px; padding: 6px 9px; background: var(--gold-soft); font-size: 0.7rem; font-weight: 850; text-transform: uppercase; }
.mode-badge.car { background: #dce9e4; }
.mode-badge.ttc { background: #e6e2f5; }
.mode-badge.uber { background: #e8e8e8; }
.mode-badge.already-going { background: #f2d9d2; }

.offer-line { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.offer-line:last-child { border: 0; }
.offer-line h4 { margin: 0 0 4px; font-size: 0.92rem; }
.offer-line p { margin: 0; color: var(--muted); font-size: 0.74rem; }
.offer-price { text-align: right; font-family: Georgia, serif; font-size: 1.32rem; white-space: nowrap; }
.offer-price small { display: block; color: var(--muted); font-family: Inter, sans-serif; font-size: 0.65rem; }
.price-alternatives { border-top: 1px dashed var(--line); padding: 10px 20px 14px; background: #fbf8f0; }
.price-alternatives summary { cursor: pointer; color: var(--ink-2); font-size: .75rem; font-weight: 800; }
.price-alternatives article { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.price-alternatives article:last-child { border-bottom: 0; }
.price-alternatives b, .price-alternatives small, .price-alternatives strong { display: block; }
.price-alternatives small { color: var(--muted); font-size: .65rem; }
.price-alternatives strong { text-align: right; font-family: Georgia, serif; }
.no-alternatives { margin: 0; padding: 8px 20px 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .68rem; }
.directions { display: inline-block; margin-top: 7px; color: var(--ink-2); font-size: 0.72rem; font-weight: 800; }
.unmatched { margin-top: 20px; color: var(--muted); font-size: 0.85rem; }
.unmatched strong { color: var(--coral); }
/* All-prices grid: the item column stays put while the stores scroll sideways. */
.price-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); -webkit-overflow-scrolling: touch; }
.price-matrix-wrap:focus-visible { outline: 3px solid rgba(220, 118, 92, 0.45); outline-offset: 2px; }
.price-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
.price-matrix th, .price-matrix td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-matrix thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--ink-2); background: #eef5f1; font-size: .74rem; }
.price-matrix tbody th, .price-matrix tfoot th { position: sticky; left: 0; z-index: 1; min-width: 132px; background: var(--paper); }
.price-matrix thead th:first-child { z-index: 3; left: 0; background: #eef5f1; }
.price-matrix td { min-width: 138px; }
.price-matrix b { display: block; font-family: Georgia, serif; font-size: 1.06rem; font-weight: 500; letter-spacing: -0.02em; }
.price-matrix thead b { font-family: Inter, sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: 0; }
.price-matrix small { display: block; color: var(--muted); font-size: .63rem; }
.price-matrix tbody tr:nth-child(even) th, .price-matrix tbody tr:nth-child(even) td { background: rgba(23, 63, 53, 0.028); }
.price-matrix .matrix-best { position: relative; background: #f6fbf8; box-shadow: inset 3px 0 0 var(--gold); }
.price-matrix .matrix-best b { color: var(--ink); }
.price-matrix .matrix-none { color: var(--muted); text-align: center; }
.price-matrix .matrix-unsized { background: repeating-linear-gradient(135deg, rgba(23,63,53,.03) 0 6px, transparent 6px 12px); }
.price-matrix .matrix-unsized b { color: var(--muted); font-style: italic; }
.price-matrix .matrix-unsized .caveat { color: var(--coral); font-weight: 700; }
.price-matrix tfoot th, .price-matrix tfoot td { border-bottom: 0; border-top: 1px solid var(--ink-2); background: #f7f3e8; }
.price-matrix tfoot tr:first-child th { background: #f7f3e8; }
.matrix-note { margin: 10px 2px 0; color: var(--muted); font-size: .68rem; }

.search-progress {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 2px 0; color: var(--ink-2); font-size: .82rem;
}
.search-progress::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid rgba(23,63,53,.22); border-top-color: var(--coral); border-radius: 50%;
  animation: basket-spin .9s linear infinite;
}
.search-progress[hidden] { display: none; }
.search-progress .elapsed { color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes basket-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .search-progress::before { animation: none; } }

.unsized-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.unsized-list li { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,253,248,.72); }
.unsized-list b { font-size: .8rem; }
.unsized-list small { color: var(--muted); font-size: .66rem; }
.unsized-list div { margin-top: 5px; color: var(--ink-2); font-size: .72rem; line-height: 1.7; }

.store-comparison { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.store-comparison header p { margin: 4px 0 16px; color: var(--muted); font-size: .74rem; }
.store-comparison-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.store-comparison-card { position: relative; min-height: 185px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.72); }
.store-comparison-card.complete { border-color: rgba(23,63,53,.42); background: #f6fbf8; }
.store-comparison-card.partial { opacity: .78; }
.store-rank { position: absolute; top: 12px; right: 12px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: .65rem; font-weight: 850; }
.store-comparison-card h4 { max-width: calc(100% - 30px); margin: 0 0 4px; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.store-comparison-card p, .store-comparison-card small, .store-comparison-card em { display: block; color: var(--muted); font-size: .64rem; }
.store-comparison-card strong { display: block; margin-top: 17px; font-family: Georgia, serif; font-size: 1.55rem; }
.store-comparison-card em { margin-top: 12px; color: var(--coral); font-style: normal; font-weight: 750; }
.store-comparison-card.complete em { color: var(--ink-2); }
.local-price-coverage { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.local-price-coverage header h3 { margin: 3px 0; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.local-price-coverage header p { max-width: 760px; color: var(--muted); font-size: .76rem; }
.local-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.local-price-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,248,.72); }
.local-price-card h4 { margin: 0 0 3px; font-family: Georgia, serif; font-size: 1rem; }
.local-price-card p { margin: 0 0 8px; color: var(--muted); font-size: .66rem; }
.local-price-card ul { margin: 8px 0; padding: 0; list-style: none; }
.local-price-card li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: .68rem; }
.local-price-card .no-price { padding: 8px 0; color: var(--coral); }
.local-price-card a { color: var(--ink-2); font-size: .66rem; font-weight: 800; }

.sources { margin-top: 18px; }
.sources > h2 { max-width: 500px; }
.coverage-status { max-width: 760px; color: var(--muted); font-size: .84rem; }
.coverage-status strong { color: var(--ink); }
.store-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.store-card { min-height: 150px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 253, 248, 0.55); }
.store-card .store-type { color: var(--coral); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.store-card h3 { margin: 12px 0 7px; font-family: Georgia, serif; font-weight: 500; font-size: 1.2rem; }
.store-card p { margin: 0; color: var(--muted); font-size: 0.75rem; }
.store-card a { display: inline-block; margin-top: 12px; color: var(--ink); font-size: 0.74rem; font-weight: 800; }

.empty-state { padding: 34px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); }

footer { padding: 25px 28px; background: var(--ink); color: #d7e3de; text-align: center; font-size: 0.74rem; }
footer p { margin: 0; }
footer a { color: var(--gold-soft); }
.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: 760px) {
  .site-header { min-height: 66px; padding: 13px 18px; }
  .location-chip { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main { padding: 0 18px 65px; }
  .hero { padding: 58px 0 36px; }
  h1 { font-size: clamp(3.4rem, 18vw, 5.6rem); }
  .section-heading, .results-heading, .data-panel { gap: 15px; }
  .settings-grid, .store-list, .local-price-grid, .store-comparison-grid { grid-template-columns: 1fr; }
  .intake-summary { grid-template-columns: 1fr; }
  .settings-grid { gap: 22px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .meal-idea-list { grid-template-columns: 1fr; }
  .basket-assumptions header { display: block; }
  .basket-assumptions header p { margin-top: 7px; text-align: left; }
  .summary-card { min-height: 105px; padding: 13px; }
  .summary-card strong { font-size: 1.55rem; }
  .primary-button { width: 100%; }
  .data-actions { align-items: flex-start; flex-direction: column; }
  .discovery-heading { display: block; }
  .discovery-heading p { margin-top: 7px; text-align: left; }
  .plan-tabs { flex-wrap: wrap; }
  .price-matrix tbody th, .price-matrix tfoot th { min-width: 108px; }
  .price-matrix td { min-width: 124px; }
  .price-matrix th, .price-matrix td { padding: 9px 10px; }
}

@media (max-width: 470px) {
  .brand > span:last-child { display: none; }
  .hero p { font-size: 1rem; }
  textarea { min-height: 250px; padding: 18px; }
  .summary-grid { gap: 7px; }
  .summary-card span { font-size: 0.66rem; }
  .offer-line { grid-template-columns: 1fr; gap: 8px; }
  .offer-price { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- the list
   The everyday-app half of the page: an add bar, tappable rows, and an action
   bar that stays put. Sized for a thumb first — 44px targets throughout — and
   for the fact that most of this is read one-handed in a store aisle. */

.composer { padding: 34px 0 8px; }
.composer h1 {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.03em;
}

.add-bar { display: flex; gap: 10px; align-items: stretch; }
.add-bar input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
}
.add-bar input::placeholder { color: var(--muted); }
.add-bar input:focus { border-color: var(--ink-2); outline: none; box-shadow: 0 0 0 3px rgba(40, 92, 78, 0.14); }
.add-button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: white;
  font-weight: 800;
  cursor: pointer;
}
.add-button:hover { background: var(--ink-2); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-2); background: white; }

.basket { border-top: 1px solid var(--line); padding: 26px 0 34px; margin-top: 26px; }
.basket-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.basket-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.basket-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 0.74rem;
  font-weight: 800;
}

.item-rows { list-style: none; margin: 16px 0 0; padding: 0; }
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 8px 4px 8px 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.item-row:first-child { border-top: 1px solid var(--line); }
.row-name { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.row-note { color: var(--muted); font-size: 0.76rem; font-weight: 500; }
.row-note-unsure { color: var(--ink-2); }
.row-remove {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.row-remove:hover { background: rgba(220, 118, 92, 0.12); color: var(--coral); }

/* Adding something already listed should point at the row, not silently do nothing. */
@keyframes rowFlash { from { background: var(--gold-soft); } to { background: transparent; } }
.row-flash { animation: rowFlash 1s ease-out; }

.list-empty { margin: 20px 0 0; color: var(--muted); font-size: 0.92rem; }
.paste-panel { margin-top: 18px; }
.discovery-hint { margin: 10px 0 0; color: var(--muted); font-size: 0.86rem; }

/* The action bar follows the page on a phone, the way every shopping app's
   basket button does, so the next step is never scrolled off the screen. */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 -28px;
  padding: 12px 28px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(10px);
}
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.action-summary { color: var(--muted); font-size: 0.9rem; font-weight: 650; }
.action-bar .primary-button { min-width: 0; justify-content: center; gap: 10px; }
.action-bar .primary-button:disabled { cursor: not-allowed; opacity: .4; }
.action-bar .search-progress { margin: 0 0 10px; }

@media (max-width: 720px) {
  .composer { padding-top: 22px; }
  .action-bar { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .action-row { gap: 12px; }
  .action-bar .primary-button { flex: 1; width: auto; min-height: 52px; }
  .basket-actions { gap: 14px; font-size: 0.9rem; }
}

/* ---------------------------------------------------------- this week's flyer
   Advertised prices, not discounts: a flyer says what something costs, never what
   it used to cost, so nothing here is presented as a saving. */

.flyer-picks { border-top: 1px solid var(--line); padding: 30px 0 34px; }
.flyer-picks h2 { margin: 0; font-size: 1.05rem; }
.flyer-picks-note { margin: 8px 0 18px; color: var(--muted); font-size: 0.82rem; max-width: 62ch; }
.flyer-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.flyer-pick {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.flyer-pick:hover { border-color: var(--ink-2); background: white; }
.pick-price { font-size: 1.15rem; font-weight: 850; letter-spacing: -0.02em; }
.pick-name { color: var(--ink); font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.pick-meta { color: var(--muted); font-size: 0.74rem; }

@media (max-width: 720px) {
  .flyer-pick-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------------- built for a thumb
   Audited on a real phone viewport at 360, 390 and 414px. Nothing scrolled
   sideways, which was the fear, but two things made it read like a document
   rather than an app: fifty-odd controls under the 44px a fingertip needs, and
   text down to 9.9px. Both are fixed here rather than in the desktop rules,
   because a mouse is happy with a 27px link and a thumb is not. */

.assumptions-panel {
  margin: 26px 0 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 248, .72);
}
.assumptions-panel > summary {
  padding: 15px 18px;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 750;
  list-style-position: inside;
}
.assumptions-panel[open] > summary { border-bottom: 1px solid var(--line); }
.assumptions-panel .basket-assumptions { margin: 0; border: 0; border-radius: 0; background: transparent; }
.assumptions-panel .basket-assumptions .step, .assumptions-panel .basket-assumptions h3 { display: none; }

@media (hover: none), (max-width: 720px) {
  /* A fingertip is about 44px across. Anything smaller is a game of darts. */
  button, summary, .secondary-button, label[for="offer-file"] { min-height: 44px; }
  .text-button { min-height: 44px; display: inline-flex; align-items: center; }
  .chip, .tab { min-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .row-remove { width: 46px; height: 46px; }
  summary { display: flex; align-items: center; }

  /* Nothing legible is under 12px. The small print reached 9.9, and every rule
     below names a place it did — a bare `small` selector loses to all of them on
     specificity, which is why the first attempt at this changed nothing. */
  small, .row-note, .flyer-picks-note, .action-summary,
  .bundle-chip small, .suggestion-chip small, .discovery-kicker, .meal-idea small,
  .price-matrix small, .quantity-chip small, .task-chip small,
  .store-comparison-card p, .store-comparison-card small, .store-comparison-card em,
  .offer-price small, .price-alternatives small, .store-card .store-type, .store-rank,
  .local-price-card a, .local-price-card p, .local-price-card li,
  .summary-card span, .unsized-list small, .unsized-list div, .matrix-note,
  .meal-idea span, .no-alternatives, .intake-group header span, .mode-badge,
  .basket-assumptions header p, .directions, .eyebrow, .step, .setting-note,
  .bundle-chip b, .suggestion-chip b, .count-pill, .data-panel .pipeline-status,
  .offer-line p, .pick-meta, .price-matrix thead th, .store-card a,
  .store-comparison header p, footer { font-size: .78rem; }

  /* Four numbers do not need four tall cards. Show the answer, not the frame. */
  .summary-card { min-height: 0; padding: 12px 13px; display: grid; gap: 2px; align-content: start; }
  .summary-card strong { font-size: 1.5rem; line-height: 1.1; }
  .summary-card span { font-size: .78rem; line-height: 1.25; }
  .summary-grid { gap: 8px; margin: 14px 0 16px; }
  .value-explanation { font-size: .84rem; }

  /* Form controls a thumb has to hit, and a slider whose track is 16px tall but
     whose hit area need not be. */
  select, input[type="number"], input[type="text"], textarea { min-height: 44px; }
  input[type="range"] { height: 44px; }

  /* A 13px checkbox is fine when the label around it is the thing you tap. */
  .checkbox-setting { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .checkbox-setting input { width: 22px; height: 22px; }

  /* "Directions" and a store's own link are real actions, not prose links. The
     links left under 44px after this are inline in sentences — the OpenStreetMap
     credit, a flyer name mid-paragraph — where a 44px box would break the text. */
  .directions, .store-card a, .local-price-card a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* A bar beats a column of numbers for "which of these is cheaper". Scaled against
   the dearest basket on screen, split so travel is visible as its own cost, and
   hatched when the basket is incomplete — a short bar must never look like a
   bargain when it is really a missing item. */
.cost-bar {
  display: flex;
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(23, 63, 53, 0.09);
}
.cost-bar span { display: block; height: 100%; }
.cost-bar-groceries { background: var(--ink-2); }
.cost-bar-trip { background: var(--gold); }
.cost-bar-partial {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px);
  background-color: var(--muted);
}