/* Meal to Cart - the page.
 *
 * Three files, no framework, no build step, no CDN. Opened from disk.
 *
 * Warm and calm, kitchen not enterprise. The spine is three steps (bring, tell
 * us, build) and one personalization card; the list reads like a well-set
 * receipt; and the lines that did not resolve are shown with their reasons.
 *
 * Colour discipline:
 *   --accent  only for things you can act on (the build button, links, focus,
 *             the step badges)
 *   --ok/--warn  only for status (resolved, unresolved, under or over target)
 * The card is the one place a soft shadow is allowed: it is the thing you
 * fill in, so it sits slightly forward of the paper.
 */

:root {
  --paper: #FBF8F3;
  --ink: #1F1B16;
  --muted: #6B6154;
  --line: #E7DFD3;
  --accent: #C2410C;
  --ok: #15803D;
  --warn: #B45309;

  /* Supporting tones, never substitutes for the roles above. */
  --soft: #F4EEE2;
  --card: #FFFDF9;

  --card-radius: 16px;
  --control-radius: 10px;
  --chip-radius: 999px;

  /* Two faces, two jobs: the words are set in the system sans, the numbers,
     dates, quantities and prices in the system mono. The mono is what makes a
     28-line list skimmable, and it is why the page reads like a well-set
     receipt rather than a brochure. No webfont is loaded for either. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rail: 84px;
  --gap: 28px;
  --content: 660px;
  --wrap: 980px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 22px 84px;
}

::selection { background: var(--accent); color: var(--paper); }

.mono { font-family: var(--mono); font-size: 0.92em; }

/* Focus: visible, on the keyboard only, in the accent because focus is an
   action. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- masthead */

.masthead { max-width: calc(var(--content) + var(--gap) + var(--rail)); }

.masthead-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.wordmark {
  margin: 0;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.store {
  margin: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 0;
  padding: 7px 14px 7px 11px;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--chip-radius);
}

.kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

.hero {
  margin: 18px 0 0;
  font-size: clamp(27px, 4.6vw, 38px);
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.022em;
  max-width: 24ch;
  text-wrap: balance;
}

.standfirst {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------- the three steps */

.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(31, 27, 22, 0.04), 0 10px 28px -18px rgba(31, 27, 22, 0.18);
}

.step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 var(--mono);
  color: var(--paper);
  background: var(--accent);
  border-radius: 50%;
  margin-top: 1px;
}

.step-body { min-width: 0; }
.step-title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.008em; }
.step-text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------- beats */

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 26px;
}

.beat-num { margin: 0 0 10px; }

.beat-num span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font: 700 13px/1 var(--mono);
  color: var(--paper);
  background: var(--accent);
  border-radius: 50%;
}

.beat-body { max-width: var(--content); }

@media (min-width: 820px) {
  .beat {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--gap);
    margin-top: 52px;
    padding-top: 30px;
  }
  .beat-num { margin: 2px 0 0; }
  .masthead, .foot { padding-left: calc(var(--rail) + var(--gap)); }
  .wrap { padding: 52px 28px 96px; }
}

h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.lead {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

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

.field { display: flex; flex-direction: column; min-width: 0; }

.field label {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  margin-bottom: 7px;
}

.hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

input[type="text"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  font: 400 15px/1.45 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input[type="text"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover { border-color: var(--muted); }

input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 104px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}

select {
  padding-right: 36px;
  background-image: none;
  cursor: pointer;
}

input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }

input:disabled, select:disabled, textarea:disabled { opacity: 0.6; }

.money { display: flex; align-items: center; gap: 8px; }
.money-sign { font: 500 15px/1 var(--mono); color: var(--muted); }
.money input { font-family: var(--mono); font-size: 14px; }

.field-wide { margin-top: 20px; }

/* ------------------------------------------------------------------- card */

/* The one bordered container on the page, and it earns its border by being the
   thing you fill in. It sits slightly forward of the paper so the eye lands
   there first. */
.card {
  margin-top: 22px;
  display: grid;
  gap: 28px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(31, 27, 22, 0.04), 0 14px 34px -20px rgba(31, 27, 22, 0.22);
}

.card-group-title {
  margin: 0 0 16px;
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.rows { display: grid; gap: 18px; }

@media (min-width: 620px) {
  .rows-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  font: 650 14px/1 var(--sans);
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--muted);
  border-radius: var(--control-radius);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(31, 27, 22, 0.08);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

.btn-quiet:hover { background: var(--soft); border-color: var(--ink); }

.btn-primary {
  padding: 16px 30px;
  font-size: 15.5px;
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(194, 65, 12, 0.25), 0 12px 26px -14px rgba(194, 65, 12, 0.55);
}

.btn-primary:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 2px 4px rgba(31, 27, 22, 0.2), 0 12px 26px -14px rgba(31, 27, 22, 0.5); }

.btn:active { transform: translateY(1px); }

.btn[disabled] { cursor: progress; opacity: 0.65; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.actions-note { font-size: 12.5px; color: var(--muted); }

.build { margin-top: 24px; }

.promise {
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}

.status {
  margin: 18px 0 0;
  font: 400 13px/1.55 var(--mono);
  color: var(--muted);
  min-height: 0;
}

.status:empty { display: none; }

/* ----------------------------------------------------------------- results */

.result { margin-top: 28px; }

.empty {
  border: 1.5px dashed var(--line);
  border-radius: var(--card-radius);
  padding: 26px 24px;
  background: var(--card);
}

.empty-title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.008em; }

.empty-body {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
}

.empty-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-block;
  padding: 6px 11px;
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--chip-radius);
  white-space: nowrap;
}

.chip-ok { color: var(--ok); border-color: var(--ok); }
.chip-warn { color: var(--warn); border-color: var(--warn); }

/* A dashed edge means provisional: a saved example, a state that is not live. */
.chip-sample { border-style: dashed; }

/* ---------------------------------------------------------- import results */

.imports { margin-top: 24px; }

.import-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.import {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--card);
  padding: 14px 16px 16px;
}

.import-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.import-title { font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -0.005em; }
.import-title a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.import-title a:hover { color: var(--ink); }
.import-title-missing { color: var(--muted); font-weight: 400; font-style: normal; }

.import-meta {
  margin: 5px 0 0;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.import-note {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
}

.import-note .note-tag {
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  margin-right: 8px;
}

/* The confidence number is the fact; the meter is the same fact at a glance. */
.meter {
  margin-top: 11px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.meter span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.meter-warn span { background: var(--warn); }

/* ------------------------------------------------------------- run header */

.run-head { border-top: 1px solid var(--line); padding-top: 20px; }

.run-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.run-where { font: 400 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}

.fact { display: flex; align-items: baseline; gap: 8px; }

.fact dt {
  font: 650 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact dd { margin: 0; font: 500 13px/1 var(--mono); }

.block { margin-top: 32px; }

.block-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.008em;
}

.block-note {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- plan */

.plan { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }

.plan li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: var(--control-radius);
}

.plan li:nth-child(odd) { background: var(--card); border: 1px solid var(--line); }
.plan li:nth-child(even) { border: 1px solid transparent; }

@media (min-width: 620px) {
  .plan li { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
}

.day {
  font: 650 11px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.dish { font-size: 15px; line-height: 1.4; font-weight: 550; }

.dish-src {
  display: block;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- the shopping list */

.aisles { display: grid; gap: 26px; margin-top: 20px; }

.aisle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.aisle-name {
  font: 700 11.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aisle-count { font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }

.lines { list-style: none; margin: 4px 0 0; padding: 0; }

.line { padding: 7px 0; border-bottom: 1px dotted var(--line); }
.line:last-child { border-bottom: 0; }

.line-main { display: flex; align-items: baseline; gap: 10px; }

.line-item { display: flex; align-items: baseline; flex: 1 1 auto; gap: 8px; min-width: 0; }

.line-item span { flex: 0 1 auto; }

/* Leader dots: the page's one printed-list flourish, and the reason a long
   list still reads as a receipt. Decorative, so it carries no contrast duty. */
.leader {
  flex: 1 1 auto;
  min-width: 14px;
  border-bottom: 1px dotted var(--muted);
  opacity: 0.4;
  transform: translateY(-4px);
}

.line-buy {
  flex: 0 0 auto;
  font: 600 13px/1.4 var(--mono);
  white-space: nowrap;
}

.line-tell {
  margin: 3px 0 0;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
  max-width: 58ch;
}

/* ----------------------------------------------------------------- budget */

.budget {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--card);
  padding: 18px 20px;
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.budget-target { font: 650 15px/1.4 var(--sans); letter-spacing: -0.005em; }
.budget-target b { font: 650 15px/1 var(--mono); }
.budget-est { font: 500 13px/1.5 var(--mono); }
.over { color: var(--warn); }
.under { color: var(--ok); }
.budget-note {
  margin: 4px 0 0;
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- cart or not */

.cart {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--card);
  padding: 20px 22px 22px;
}

.cart-cta { margin: 16px 0 0; }

.cart-note {
  margin: 11px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
}

.verdict {
  margin: 15px 0 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 650;
  letter-spacing: -0.01em;
  max-width: 42ch;
  text-wrap: pretty;
}

.unresolved-title {
  margin: 20px 0 0;
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.unresolved { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }

.unresolved li {
  display: grid;
  gap: 3px;
  border-left: 0;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: var(--control-radius);
}

.u-line { font-size: 14.5px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }

.u-reason {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.resolved-note { margin: 15px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ok); font-weight: 550; }

/* ----------------------------------------------------- saved sample, agent */

.sample, .panel {
  margin-top: 32px;
  border: 1.5px dashed var(--muted);
  border-radius: var(--card-radius);
  padding: 18px 20px 20px;
  background: var(--card);
}

.sample summary, .panel summary {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  cursor: pointer;
  width: fit-content;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sample[open] summary, .panel[open] summary { margin-bottom: 4px; }

.sample-note, .panel-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.sample .run-head { border-top: 1px solid var(--line); margin-top: 22px; }

.agent-state {
  margin: 14px 0 0;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--muted);
  padding: 10px 12px;
  background: var(--soft);
  border-radius: var(--control-radius);
}

.agent-state.ok { color: var(--ok); }
.agent-state.warn { color: var(--warn); }

.panel .field { margin-top: 18px; max-width: 440px; }

.foot { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 8px; }

.foot-note {
  margin: 24px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 78ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}