/* Food Directory — private slice.
   A restrained sourcing tool. Comprehension first, then craft.
   Deliberately no stock-green / stock-red: nothing here is live inventory. */

:root {
  --bg: #f7f5ef;
  --surface: #fffdf8;
  --surface-sunk: #edf1ec;
  --ink: #19342b;
  --ink-soft: #40584f;
  --muted: #607169;
  --line: #d9dfd8;
  --line-strong: #c6d0c8;
  --accent: #9c4528;
  --accent-ink: #71301e;
  --accent-wash: #f7e8df;
  --caution: #7d6320;
  --caution-wash: #f8f1dd;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 26, 24, 0.05), 0 1px 8px rgba(28, 26, 24, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #122019;
    --surface: #192a22;
    --surface-sunk: #22372d;
    --ink: #f0f3ed;
    --ink-soft: #c8d2ca;
    --muted: #aab7ad;
    --line: #30463b;
    --line-strong: #415c4d;
    --accent: #e2a27d;
    --accent-ink: #f0bc9d;
    --accent-wash: #3a2922;
    --caution: #d3b573;
    --caution-wash: #2b2619;
    --shadow: none;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 system-ui, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

main, .masthead, .site-footer {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.15rem;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 0.75rem; top: 0.75rem; z-index: 10;
  background: var(--surface); padding: 0.6rem 0.9rem;
  border: 2px solid var(--accent); border-radius: var(--radius-sm);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Room around a focused control scrolled into view, so its ring is never
   clipped at the viewport edge (FB9-17 U03). */
html { scroll-padding-block: 1rem; }
:focus-visible { scroll-margin-block: 1rem; }
[data-choice-focus]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  scroll-margin-block: 1rem;
}

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

.masthead {
  padding-top: 1.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.wordmark a { color: var(--ink); text-decoration: none; }
.masthead .scope {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.site-footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.site-footer p { margin: 0.3rem 0; }

/* --- typography ---------------------------------------------------------- */

h1 {
  overflow-wrap: anywhere;
  font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 0.85rem;
  font-weight: 680;
}
h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 0.3rem;
  font-weight: 650;
}
h3 {
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  margin: 1.6rem 0 0.7rem;
  font-weight: 650;
}
h4 { font-size: 1.05rem; margin: 0; font-weight: 620; letter-spacing: -0.008em; }
h5 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 1rem 0 0.4rem; font-weight: 650;
}

p { margin: 0.5rem 0; }
.lede { color: var(--ink-soft); margin-top: 0; font-size: 1.02rem; }
.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.secondary { color: var(--muted); font-size: 0.86rem; }
.caveat { color: var(--caution); font-size: 0.88rem; }
.optional { color: var(--muted); font-weight: 400; }
.help { color: var(--muted); font-size: 0.84rem; margin: 0.4rem 0 0; }

a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* --- forms --------------------------------------------------------------- */

.search, .intake {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem;
  margin-bottom: 1.75rem;
}
main > .search { max-width: 48rem; }
.field { margin-bottom: 1rem; }
.field:last-of-type { margin-bottom: 0.9rem; }
.field label {
  display: block;
  font-weight: 620;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
input[type="text"], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  transition: border-color 0.12s ease;
}
input[type="text"]:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; }

button, .button {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 620;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.62rem 1.1rem;
  min-height: 44px;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  button, .button { color: #1d1613; }
}
button:hover, .button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.button.ghost {
  color: var(--accent-ink);
  background: transparent;
  border-color: var(--line-strong);
}
.button.ghost:hover { background: var(--accent-wash); border-color: var(--accent); }

/* Compact results-page search: present, editable, out of the way. */
.search.compact {
  padding: 0.75rem 0.85rem;
  margin-bottom: 1.5rem;
  background: var(--surface-sunk);
  box-shadow: none;
}
.search.compact .field { margin-bottom: 0.6rem; }
.search.compact label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 0.2rem;
}
.search.compact input[type="text"] {
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  background: var(--surface);
}
.search.compact button {
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  font-size: 0.9rem;
  width: 100%;
}

/* FB9-17V: ingredient and Update share one row at every width; the optional
   dish field is a second, full-width row (behind a disclosure when empty). */
.compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.6rem;
  align-items: end;
}
.compact-row .field-q { grid-column: 1; grid-row: 1; }
.compact-row > button { grid-column: 2; grid-row: 1; width: auto; }
.compact-row .field-context,
.compact-row .compact-context { grid-column: 1 / -1; grid-row: 2; margin-top: 0.4rem; }
.search.compact .field { margin-bottom: 0; }
.search.compact button { width: auto; }
.compact-context summary {
  font-size: 0.85rem;
  color: var(--accent-ink);
  cursor: pointer;
  padding: 0.25rem 0;
}
.compact-context[open] summary { margin-bottom: 0.3rem; }
.about-results { margin: 1.5rem 0 0.5rem; font-size: 0.92rem; }
.about-results summary { cursor: pointer; color: var(--accent-ink); }
.scope-note { font-size: 0.9rem; color: var(--muted); }

/* --- panels -------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin: 1.5rem 0;
}
.panel h2 { margin-top: 0; }

/* 6V Market Guide: a task-first home and quiet explanatory pages. */
.hero { max-width: 50rem; margin: 1.5rem 0 1.7rem; }
.hero .lede { max-width: 46rem; font-size: 1.12rem; }
.home-intro { position: relative; }
.home-portrait { pointer-events: none; }
.home-portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) {
  .home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.82fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .home-intro > .hero,
  .home-intro > .search,
  .home-intro > .location-helper { grid-column: 1; }
  .home-intro > .hero { margin-bottom: 1.2rem; }
  .home-intro > .home-portrait {
    grid-column: 2; grid-row: 1 / 4;
    align-self: center;
    margin: 0;
  }
}
@media (max-width: 47.999rem) {
  .home-intro > .hero { padding-right: 8.3rem; margin: 0.6rem 0 1.05rem; min-height: 9.1rem; }
  .home-intro > .hero .lede { margin-right: -8.3rem; font-size: 1rem; }
  .home-intro > .home-portrait {
    position: absolute; top: 0; right: 0;
    width: 8.1rem; height: 8.1rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-sunk);
  }
  .home-intro > .home-portrait img {
    position: absolute; width: 10.8rem; max-width: none;
    top: -0.45rem; left: -1.35rem;
  }
}
@media (max-width: 23rem) {
  .home-intro > .hero { padding-right: 7.1rem; }
  .home-intro > .hero .lede { margin-right: -7.1rem; }
  .home-intro > .home-portrait { width: 7rem; height: 7rem; }
  .home-intro > .home-portrait img { width: 9.4rem; left: -1.2rem; }
}
/* At intermediate widths the heading is short enough that the lede starts
   beside the portrait. Keep that text in the padded column until the desktop
   grid takes over; the full-width lede remains useful on narrow phones. */
@media (min-width: 30rem) and (max-width: 47.999rem) {
  .home-intro > .hero .lede { margin-right: 0; }
}
@media (min-width: 34rem) and (max-width: 47.999rem) {
  .home-intro > .hero .lede { margin-top: 1rem; }
}
.location-helper { max-width: 48rem; margin: -1rem 0 1.75rem; color: var(--muted); }
.task-card {
  max-width: 48rem; margin: 1.5rem 0; padding: 1.25rem 1.35rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-sunk);
}
.task-card h2 { font-size: 1.2rem; }
.scope-trust {
  max-width: 52rem; margin: 2rem 0; padding: 0.9rem 1rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft);
}
.how-strip { margin: 2.5rem 0; }
.how-strip ol, .guide-steps {
  list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.85rem;
}
.how-strip li, .guide-steps > li {
  padding: 1rem 1.05rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.how-strip li strong, .how-strip li span { display: block; }
.how-strip li span { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.92rem; }
.guide-steps h2 { font-size: 1.08rem; }
.prose-section { max-width: 48rem; margin: 2rem 0; }
.browse-links { margin: 2.25rem 0; }
.privacy-note {
  max-width: 52rem; margin: 2rem 0; padding-top: 1.25rem;
  border-top: 1px solid var(--line); color: var(--ink-soft);
}
.privacy-note h2 { font-size: 1rem; }

/* --- track --------------------------------------------------------------- */

.track { margin: 0 0 3rem; }
.track + .track { border-top: 1px solid var(--line); padding-top: 2rem; }

.track-head { margin-bottom: 1.25rem; }
.track-index {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 650;
  margin: 0 0 0.3rem;
}
.track-form {
  margin: 0 0 0.6rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.guidance {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  font-size: 0.96rem;
}
.not-line {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.not-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caution);
  border: 1px solid var(--caution);
  border-radius: 4px;
  padding: 0 0.32rem;
  margin-right: 0.35rem;
  vertical-align: 1px;
}
.multi-note {
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}
.section-title {
  font-weight: 650;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 1.75rem 0 0.5rem;
}

/* --- buckets ------------------------------------------------------------- */

.bucket { margin: 0 0 1.5rem; }
.bucket h3 {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Non-local buckets read as secondary, never as a local result. */
.bucket-chain_listing, .bucket-online_fallback, .bucket-manufacturer_information {
  border-left: 2px solid var(--line-strong);
  padding-left: 0.9rem;
}
.bucket-manufacturer_information .source-card {
  background: var(--surface-sunk);
  border-style: dashed;
}

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

.source-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.1rem;
  margin-bottom: 0.85rem;
  min-width: 0;
}
.source-card .card-head h4 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.source-card .product-line .card-item { font-size: 1.02rem; }
.source-card .availability { margin-top: 0.35rem; font-size: 0.91rem; }
.source-card .call-ahead, .source-card .action { margin-top: 0.4rem; }
.vendor-group h3 { font-size: 1.12rem; line-height: 1.35; }
.vendor-group .vendor-count { font-size: 0.84rem; color: var(--ink-soft); }
.recipe-source-details > summary { font-weight: 650; color: var(--accent-ink); }
.row-restrictions { margin-top: 0.45rem; }
.row-restrictions > summary { font-size: 0.83rem; min-height: 36px; }
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
}
.source-card h4 a { color: var(--ink); text-decoration: none; }
.source-card h4 a:hover { text-decoration: underline; }
.source-card .location { color: var(--muted); font-weight: 400; font-size: 0.92rem; }
.source-location { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.chips { margin: 0; display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.chip {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.16rem 0.44rem;
  border-radius: 4px;
  background: var(--surface-sunk);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chip-local { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-wash); }
.chip-rel { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

.card-item { margin: 0.5rem 0 0; font-size: 0.97rem; color: var(--ink-soft); }
.product-summary { margin: 0.55rem 0 0; font-size: 0.84rem; color: var(--muted); }
.product-lines {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
}
/* A product row that carries its own claims is a card within the card: its
   own stock line, its own action and its own evidence. The rule below is what
   keeps two such rows from reading as one run-on paragraph. A row that carries
   no claims — the group agreed and the shell said it once — is unaffected,
   because it has nothing but its name inside it. */
.product-line {
  margin: 0 0 0.4rem;
}
.product-line:has(.availability) {
  padding: 0.55rem 0 0.2rem;
  border-top: 1px solid var(--line);
  margin: 0.35rem 0 0;
}
.product-line:first-child:has(.availability) { border-top: 0; padding-top: 0.2rem; }
.product-line .card-item { margin-top: 0; font-weight: 600; color: var(--ink); }
.product-line .availability { margin-top: 0.25rem; font-size: 0.92rem; }
.product-line .action { margin-top: 0.35rem; font-size: 0.9rem; }
.product-line .cta { margin-top: 0.45rem; }
.product-line .call-ahead { margin-top: 0.35rem; }
.product-line .chip-rel { margin-left: 0.4rem; }
.product-line .offering-evidence { margin-top: 0.45rem; }
.product-overflow summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.product-overflow summary .summary-open { display: none; }
.product-overflow[open] summary .summary-close { display: none; }
.product-overflow[open] summary .summary-open { display: inline; }

.address { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--muted); }
.address.regional-note { font-style: italic; }

.availability {
  margin: 0.7rem 0 0;
  font-size: 0.97rem;
  line-height: 1.5;
}
.source-scope { font-weight: 700; color: var(--ink); }
.availability time { color: var(--muted); font-variant-numeric: tabular-nums; }
.perishable-flag { display: block; margin-top: 0.25rem; color: var(--caution); font-weight: 600; }
.loc-out-of-area {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--caution-wash);
  color: var(--caution);
  font-size: 0.85rem;
}

.call-ahead {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  background: var(--caution-wash);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.action { margin: 0.7rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.cta { margin: 0.85rem 0 0; }

/* --- details ------------------------------------------------------------- */

details { margin: 0.9rem 0 0; }
summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 620;
  color: var(--muted);
  padding: 0.3rem 0;
  list-style-position: outside;
}
summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: 0.5rem; }

details.about {
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 0.3rem;
}

.dimensions {
  display: grid;
  gap: 0.2rem 1rem;
  margin: 0.5rem 0 0.9rem;
  font-size: 0.87rem;
}
.dimensions > div { display: flex; gap: 0.5rem; }
.dimensions dt { color: var(--muted); flex: 0 0 9.5rem; }
.dimensions dd { margin: 0; font-weight: 600; }

.uncertainty { font-size: 0.88rem; color: var(--ink-soft); margin: 0.6rem 0; }

.evidence-list, .product-information ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.evidence-list li {
  border-left: 2px solid var(--line-strong);
  padding-left: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}
.evidence-list p { margin: 0.2rem 0; }
.provenance { color: var(--muted); font-size: 0.82rem; }

/* Evidence and profile receipts may contain complete source URLs. Preserve the
   text and link while allowing the containing card to stay within a phone. */
.source-card details.evidence,
.source-card .evidence-list,
.profile { min-width: 0; }
.source-card .provenance,
.source-card .evidence-list p,
.profile-sources { overflow-wrap: anywhere; }

.product-information {
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin: 0.9rem 0;
}
.product-information h5 { margin-top: 0; }
.product-information li { font-size: 0.87rem; margin-bottom: 0.45rem; }

.last-reviewed { margin: 0.9rem 0 0; }

/* --- bounded negative and asides ----------------------------------------- */

.bounded-negative {
  background: var(--caution-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem;
  margin: 0 0 1.5rem;
}
/* Block headings carry their level from the document structure — h2 under a
   single-ingredient page heading, h3 under a multi-ingredient one — so they
   are styled by role rather than by tag. */
.bounded-negative .block-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: -0.008em;
  font-weight: 650;
  color: var(--ink);
}
.bounded-negative .scope-line { font-size: 0.85rem; color: var(--muted); }

.aside-block {
  background: var(--surface-sunk);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  margin: 1.5rem 0;
}
.aside-block .block-title,
.what-to-do .block-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  color: var(--muted);
}
.option-list, .form-list { padding-left: 1.15rem; margin: 0.6rem 0 0; }
/* Store-or-brand choices are buttons, not a bulleted list (FB9-17V). */
.commercial-role .option-list { list-style: none; padding-left: 0; }
.option-list li, .form-list li { margin-bottom: 0.6rem; font-size: 0.93rem; }

.what-to-do ul { padding-left: 1.15rem; }
.what-to-do li { margin-bottom: 0.45rem; font-size: 0.95rem; }

.no-result { margin-top: 0.5rem; }

/* Search Intelligence surfaces. A near-match question and a dish's recorded
   context are ordinary page sections, deliberately styled like the rest: the
   cook should be able to see what the directory thinks they meant, not be
   shown something that looks like a different kind of answer. */
.did-you-mean { margin-top: 0.5rem; }
.did-you-mean + .no-result { margin-top: 2rem; }

/* Deliberately NOT a sunk panel: the multi-ingredient note directly below it
   is one, and two identical boxes in a row read as two separate claims when
   this is only the reason for the one under it. */
.dish-entry {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 46rem;
}

.panel.dish-also { margin-top: 2rem; }
.panel.dish-also > .secondary { margin: 0 0 0.2rem; }
.correction-link { font-size: 0.84rem; margin-top: 1.5rem; }
.correction-link a { color: var(--muted); }

.ingredient-index { list-style: none; padding: 0; margin: 0; }
.ingredient-index li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.ingredient-index li:last-child { border-bottom: 0; }
.ingredient-index a { text-decoration: none; font-weight: 550; }
.ingredient-index a:hover { text-decoration: underline; }
.ingredient-index.detailed .secondary { display: block; margin-top: 0.15rem; }

.checklist { padding-left: 1.15rem; }
.checklist li { margin-bottom: 0.45rem; font-size: 0.93rem; }

.profile .caveat { margin-bottom: 0; }

code {
  background: var(--surface-sunk);
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- founder marking and the private-use journal -------------------------- */
/* Marking is deliberately quiet on a result page: collapsed, at the foot, and
   never competing with the answer. In the journal it is the point, so it sits
   inside each entry instead. */

.mark-block {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.mark-block > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  padding: 0.35rem 0;
  min-height: 30px;
}
.mark-block > summary::-webkit-details-marker { display: none; }
.mark-block > summary::before { content: "+ "; }
.mark-block[open] > summary::before { content: "− "; }
.mark-block.marked > summary { color: var(--accent-ink); }
.mark-block .help { margin-bottom: 0.6rem; }

.mark-form { margin: 0.6rem 0 0; }
.mark-form .field { margin-bottom: 0.55rem; }
.mark-form label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
}
.mark-form input[type="text"] { padding: 0.5rem 0.6rem; font-size: 0.95rem; }

.mark-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-button {
  flex: 1 1 auto;
  min-width: 8.5rem;
  color: var(--accent-ink);
  background: transparent;
  border-color: var(--line-strong);
  font-weight: 550;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  min-height: 44px;
}
.tag-button:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  .tag-button { color: var(--accent-ink); }
  .tag-button:hover { color: var(--accent-ink); }
}

.mark-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.mark-list li { margin-bottom: 0.35rem; font-size: 0.9rem; }
.chip-mark {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.mark-note { color: var(--ink-soft); font-style: italic; }

.flash {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.journal-summary { padding: 0.9rem 1.15rem; }
.journal-summary p { margin: 0 0 0.35rem; font-size: 0.93rem; }
.journal-summary p:last-child { margin-bottom: 0; }

.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.2rem 0 1.6rem;
}
.chip-filter {
  display: inline-block;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  min-height: 38px;
  line-height: 1.5;
}
.chip-filter:hover { border-color: var(--accent); }
.chip-filter.active {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 620;
}

.journal-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.journal-entry[data-marked="true"] { border-color: var(--line-strong); }
.journal-entry[data-just-marked="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.journal-entry { scroll-margin-top: 1rem; }
.entry-when { margin: 0; font-size: 0.78rem; color: var(--muted); }
.entry-query { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; line-height: 1.35; }
.entry-context { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
.entry-kind { margin: 0 0 0.6rem; }
.chip-kind {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chip-kind[data-kind="unsupported"] { background: var(--caution-wash); color: var(--caution); }

.entry-facts { margin: 0 0 0.6rem; font-size: 0.9rem; }
.entry-facts > div { display: flex; gap: 0.5rem; padding: 0.12rem 0; }
.entry-facts dt { flex: 0 0 6.5rem; color: var(--muted); font-size: 0.82rem; margin: 0; }
.entry-facts dd { margin: 0; color: var(--ink-soft); }

.entry-flags { margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip-flag {
  font-size: 0.74rem;
  color: var(--muted);
  background: var(--surface-sunk);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
}

.entry-marks { margin: 0.7rem 0; }
.entry-marks h4 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.entry-marks .mark-list { border-left: 2px solid var(--accent-wash); padding-left: 0.7rem; }

.journal-entry .mark-block { margin-top: 0.8rem; padding-top: 0.7rem; }
.entry-actions { margin: 0.7rem 0 0; font-size: 0.86rem; }

.repeats li { margin-bottom: 0.8rem; }
.repeats .secondary { display: block; margin: 0.15rem 0 0; }

/* --- wider screens ------------------------------------------------------- */

@media (min-width: 34rem) {
  body { font-size: 17px; }
  .dimensions { grid-template-columns: 1fr 1fr; }
  .dimensions dt { flex: 0 0 8.5rem; }
  .source-card { padding: 1.15rem 1.25rem; }
}

/* --- experience pass: navigation, specificity, comfortable targets -------- */

/* Masthead is real navigation now, so its links need real targets. The
   wordmark alone was an 18px line and the only way out of a detail page. */
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}
.masthead-nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 7px;
}
.masthead-nav a:hover { color: var(--ink); background: var(--surface-sunk); }

/* The route back to the search a detail page was reached from. */
.crumb { margin: 0 0 1rem; font-size: 0.88rem; }
.crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface-sunk);
}
.crumb a:hover { color: var(--ink); border-color: var(--accent); }

/* Large-catalog pagination: real links, no JS. Sits under a bucket section
   whose group count exceeded the page's DOM budget. */
.pagination { margin: 1.5rem 0; }
.pagination-status { color: var(--muted); font-size: 0.86rem; margin: 0 0 0.5rem; }
.pagination-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.pagination-links .page-status { color: var(--ink-soft); font-size: 0.9rem; }
.pagination-links a.button { min-width: 44px; }

/* Store-name and ingredient-name links inside a card head are the primary
   route deeper into the product; at 18px they were the hardest thing on the
   page to hit on a phone. */
.source-card h4 { margin: 0; }
.source-card h4 a {
  display: inline-block;
  min-height: 32px;
  padding: 0.3rem 0;
  line-height: 1.35;
}

/* Disclosures are how evidence is reached. They were 31px. */
summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mark-block > summary { min-height: 44px; }

/* Definition list for the recorded identity notes on an Ingredient page. */
.facts { margin: 0; display: grid; gap: 0.7rem; }
.facts > div { display: grid; gap: 0.15rem; }
.facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
}
.facts dd { margin: 0; }

/* Which form a bare request lands on. */
.chip-default {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-color: var(--accent-wash);
  margin-left: 0.4rem;
  vertical-align: 0.1em;
}

/* A brand page must not read as a shop before the reader reaches the cards. */
.brand-note {
  border-left: 3px solid var(--line-strong);
  padding: 0.6rem 0 0.6rem 0.85rem;
  margin-bottom: 1.5rem;
}

.form-list .phone a,
.form-list .address { display: block; }
.form-list .phone a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.form-list .dish-search { margin-top: 0.6rem; }
.form-list .cta { margin-top: 0.6rem; }

/* Bucket headings repeat inside store/ingredient panels; keep them quiet. */
.panel .bucket > h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.25rem 0 0.6rem;
}
.panel .bucket:first-of-type > h3 { margin-top: 0.85rem; }

/* Footer and correction links were 16px tap targets. */
.site-footer p a,
.correction-link a {
  display: inline-block;
  padding: 0.55rem 0;
  min-height: 30px;
}
.site-footer p:first-child a { padding: 0.55rem 0.5rem 0.55rem 0; }

/* Results-page refine form: on a phone it filled the first screen, so the
   answer began below the fold on every search. */
@media (max-width: 33.999rem) {
  .search.compact { padding: 0.55rem 0.65rem; margin-bottom: 1.1rem; }
  .search.compact label { font-size: 0.66rem; margin-bottom: 0.1rem; }
  .search.compact input[type="text"] { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
  .search.compact button { min-height: 38px; padding: 0.3rem 0.8rem; }
  .masthead { padding-top: 0.9rem; padding-bottom: 0.6rem; margin-bottom: 1.1rem; }
}

/* Remaining small targets. Inline links inside prose keep their line box —
   the padding grows the hit area, the negative margin stops it reflowing the
   sentence around it. */
.wordmark a,
.about a,
.journal-link a,
.provenance a,
.evidence-list a,
.option-list li a,
.no-result .secondary a {
  display: inline-block;
  padding: 0.4rem 0.25rem;
  margin: -0.4rem -0.25rem;
}

.keeping {
  margin: -0.4rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- private v1.0 completion pass ---------------------------------------- */

/* A multi-ingredient answer has no single subject, so the page names the whole
   request. A single-ingredient answer promotes its ingredient name instead. */
.answer-title { margin-bottom: 1.25rem; }

/* Aside rows carry an identity, a scope chip and a relationship. The chip has
   to sit on its own line box so a wrapped row stays readable on a phone. */
.option-list li .chip { margin-right: 0.15rem; vertical-align: 0.08em; }
.option-list li > .secondary { display: inline; }
.option-list li .secondary + .chip { margin-left: 0.15rem; }

/* The skip link was the one control left under a comfortable target size. */
.skip:focus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Unsupported queries: the way back to searching comes before the way to file
   a request, and reads as an action rather than as a sentence. */
.recovery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1.5rem;
}
.recovery .button { flex: 0 1 auto; }
.request-invite {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.request-invite h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 0.35rem;
}

/* --- form/product-scoped sourcing ---------------------------------------- */
/* The Ingredient page shows two kinds of record and they make two different
   claims: one recorded against the ingredient itself, one recorded against a
   single form or product. The class existed and styled nothing, so both read
   as one list. The distinction is a sunk, inset panel — quiet on purpose. This
   is a narrower claim, not a worse one, so nothing here is a warning colour. */
.panel.by-form {
  background: var(--surface-sunk);
  border-left: 3px solid var(--line-strong);
}
.panel.by-form > h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
}
/* Each card inside is one scoped record, so it is banded rather than floated:
   the reader should see a set of narrow claims, not a second shelf of answers. */
.panel.by-form .source-card {
  background: var(--surface);
  border-style: dashed;
}

/* --- review queue -------------------------------------------------------- */

.review-item .chip-status {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  margin-left: 0.35rem;
}
.review-item .chip-status[data-status="open"] {
  background: var(--caution-wash);
  color: var(--caution);
  border-color: var(--caution);
}
.review-item .chip-status[data-status="accepted_for_research"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.review-item[data-just-triaged="true"] { border-color: var(--accent); }

.triage { margin-top: 0.9rem; }
.triage .field { margin-bottom: 0.6rem; }
.triage-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.triage-buttons button {
  width: auto;
  flex: 0 1 auto;
  min-height: 44px;
}
.triage-buttons button.current {
  background: var(--surface-sunk);
  color: var(--muted);
  border-color: var(--line);
  cursor: default;
}

/* ==========================================================================
   FB4 — location, browsing and recipe surfaces.
   Same restraint as above: no stock colours, no success green, and nothing
   that reads as certainty the evidence does not carry.
   ========================================================================== */

/* --- touch targets ------------------------------------------------------ */
/* Every control a finger has to hit is at least 44px tall. */
button, .button, .link-button, input[type="text"], input[type="checkbox"],
input[type="radio"], select, textarea {
  min-height: 44px;
}
input[type="checkbox"], input[type="radio"] {
  min-width: 24px; width: 24px; height: 24px; min-height: 24px;
  accent-color: var(--accent);
}
.link-button {
  background: none; border: 0; padding: 0.5rem 0.35rem;
  color: var(--accent-ink); font: inherit; font-size: 0.88rem;
  text-decoration: underline; cursor: pointer;
}
/* A link-button is a link in a form, not a filled button: the generic
   button:hover fill must not reach it, or --ink text lands on --accent-ink
   (1.37:1 on the selected sort control, FB9-17AF F-04). */
.link-button:hover { color: var(--ink); background: none; }

/* Private journey navigation is an ordinary POST form. Keep its button in the
   same visual and layout role as the link it replaces; the form remains fully
   usable with scripts blocked. */
.contextual-nav { display: inline; margin: 0; }
.contextual-nav.card-heading { display: block; }
.card-heading-button, .card-nav, .detail-nav, .shop-store-nav,
.dish-search-button {
  appearance: none;
  min-height: 32px;
  padding: 0.3rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-weight: inherit;
  line-height: 1.35;
  text-align: left;
  text-decoration: underline;
}
.card-heading-button:hover, .card-nav:hover, .detail-nav:hover,
.shop-store-nav:hover, .dish-search-button:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.pagination-links .contextual-nav { display: inline-block; }

/* --- masthead location bar ---------------------------------------------- */

.loc-bar {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.loc-bar a { color: var(--accent-ink); }
.loc-bar .loc-label { color: var(--ink-soft); }
.masthead-nav { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- home entry points --------------------------------------------------- */

.recipe-invite, .browse-invite { margin-top: 1.5rem; }
.entry-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.entry-list li {
  padding: 0.7rem 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.entry-list li:first-child { border-top: 0; }
.entry-list a { font-weight: 600; }

/* --- browse facets ------------------------------------------------------- */

.facets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.75rem; }
.facet {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.8rem; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  text-decoration: none; font-size: 0.85rem;
}
.facet:hover { border-color: var(--accent); color: var(--ink); }
.facet[aria-current="page"] {
  background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.facet-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-note {
  margin: 0 0 0.75rem; padding: 0.7rem 0.9rem;
  background: var(--surface-sunk); border-radius: var(--radius-sm);
  font-size: 0.88rem; color: var(--ink-soft);
}
.grouping { display: flex; gap: 1rem; font-size: 0.88rem; margin: 0.25rem 0 0.75rem; }
.grouping a { padding: 0.5rem 0; }
.grouping a[aria-current="page"] { font-weight: 650; color: var(--ink); }
.result-count { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.75rem; }
.group h2 { margin-top: 1.75rem; font-size: 1.05rem; }

/* --- distance ------------------------------------------------------------ */

.sort-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline;
  margin: 0 0 0.85rem; padding: 0.6rem 0.8rem;
  background: var(--surface-sunk); border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.sort-bar .sort-label { color: var(--muted); }
.sort-bar a { padding: 0.35rem 0.15rem; }
.sort-bar a[aria-current="true"] { font-weight: 650; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); }
/* The sort controls are form buttons, not links: mark the current one by
   weight, underline and a check mark — never by colour alone (FB9-17 U03). */
.sort-bar [aria-current="true"] { font-weight: 650; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); }
.sort-bar [aria-current="true"]::before { content: "✓ "; }
.distance {
  margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.distance-unknown {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-strong);
}
.distance-unknown .sub-title { margin: 0 0 0.3rem; font-size: 0.95rem; }
.distance-unknown > .secondary { margin: 0 0 0.8rem; font-size: 0.85rem; }
.local-worth-checking {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-strong);
}
.local-worth-checking .sub-title { margin: 0 0 0.3rem; font-size: 0.95rem; }
.local-worth-checking > .secondary { margin: 0 0 0.8rem; font-size: 0.85rem; }

/* --- notices ------------------------------------------------------------- */

.notice {
  margin: 1rem 0; padding: 0.85rem 1rem;
  background: var(--surface-sunk); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.notice.error { background: var(--caution-wash); border-left-color: var(--caution); }
.notice p { margin: 0; }
.notice form.inline { margin-top: 0.6rem; }

/* --- location pages ------------------------------------------------------ */

.loc-form { margin-top: 0.75rem; }
.loc-form button + .button { margin-left: 0.6rem; }
.disclosure {
  margin: 0.75rem 0 1rem; padding: 0.9rem 1rem;
  background: var(--caution-wash); border: 1px solid var(--caution);
  border-radius: var(--radius-sm); font-size: 0.92rem;
}
.disclosure p { margin: 0 0 0.6rem; }
.disclosure p:last-child { margin-bottom: 0; }
.match-detail { margin: 0.75rem 0; }
.match-detail > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem;
  padding: 0.45rem 0; border-top: 1px solid var(--line);
}
.match-detail dt { color: var(--muted); font-size: 0.85rem; margin: 0; }
.match-detail dd { margin: 0; font-size: 0.9rem; }
.matched-address { font-size: 1.05rem; margin: 0 0 0.5rem; }
.panel.quiet { background: var(--surface-sunk); }
ul.plain { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.plain li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }

/* --- recipe entry -------------------------------------------------------- */

.recipe-entry textarea {
  width: 100%; padding: 0.7rem 0.8rem; font: inherit; font-size: 0.95rem;
  line-height: 1.55; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  resize: vertical;
}
.char-count { min-height: 1.2em; }

/* --- recipe review ------------------------------------------------------- */

.review-count { font-size: 0.9rem; color: var(--ink-soft); margin: 0.75rem 0 0.25rem; }
.bulk-tools { display: flex; gap: 1rem; margin: 0 0 0.5rem; }
.uncertain-note {
  margin: 0.75rem 0; padding: 0.8rem 1rem;
  background: var(--caution-wash); border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.review-list { list-style: none; padding: 0; margin: 0.5rem 0 0; counter-reset: row; }
.review-row {
  padding: 0.9rem 0.95rem; margin-bottom: 0.7rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.review-row.uncertain { border-style: dashed; border-color: var(--caution); }
.row-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.keep { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
.keep-label { font-size: 0.85rem; color: var(--ink-soft); }
.row-amount {
  font-variant-numeric: tabular-nums; font-size: 0.92rem; color: var(--ink-soft);
  white-space: nowrap; min-width: 4.5rem;
}
.row-text {
  flex: 1 1 12rem; min-width: 0; padding: 0.55rem 0.7rem; font: inherit;
  font-size: 0.95rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.row-original, .row-note, .row-reason {
  margin: 0.5rem 0 0; font-size: 0.83rem; color: var(--ink-soft);
}
.row-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.flag {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.76rem; background: var(--surface-sunk); color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.flag-uncertain, .flag-alt { background: var(--caution-wash); border-color: var(--caution); }
.row-tools { display: flex; gap: 1rem; margin: 0.35rem 0 0; }
.alt-group {
  margin: 0.6rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.alt-group legend { font-size: 0.83rem; color: var(--ink-soft); padding: 0 0.35rem; }
.alt { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.92rem; }
.other-lines { margin: 1.25rem 0; }
.other-lines summary { cursor: pointer; padding: 0.6rem 0; font-size: 0.9rem; }
.other-kind {
  display: inline-block; min-width: 6.5rem; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.review-actions { margin: 1.5rem 0 0.5rem; }
.row-add { margin: 0.25rem 0 0; }
.review-status {
  display: inline-block; margin: 0.25rem 0 0.5rem; padding: 0.18rem 0.55rem;
  border-radius: 999px; background: var(--surface-sunk); color: var(--ink-soft);
  font-size: 0.76rem; font-weight: 700;
}
.review-status[data-review-status="choose-a-form"],
.review-status[data-review-status="needs-review"] {
  background: var(--caution-wash); color: var(--caution);
}

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

.recipe-summary {
  margin: 0 0 1.5rem; padding: 0.9rem 1rem;
  background: var(--surface-sunk); border-radius: var(--radius);
}
.recipe-summary .tally { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; }
.recipe-summary .secondary { margin: 0; font-size: 0.86rem; }
.recipe-row-result {
  margin-bottom: 1.75rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.recipe-row-head h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.row-as-written, .row-searched { margin: 0.15rem 0; font-size: 0.83rem; }
.recipe-row-result.pending .pending-body,
.recipe-row-result.none .nothing-body {
  margin-top: 0.7rem; padding: 0.85rem 1rem;
  background: var(--surface-sunk); border-radius: var(--radius-sm);
}
.pending-question { margin: 0 0 0.4rem; }
.recognised-as { margin: 0.6rem 0 0.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.recipe-track .bucket { margin-top: 0.75rem; }
.more { margin: 0.4rem 0 0; font-size: 0.86rem; }

/* --- dish and store indexes ---------------------------------------------- */

.dish-index { list-style: none; padding: 0; margin: 1rem 0 0; }
.dish-entry {
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.dish-entry h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.dish-description { margin: 0 0 0.35rem; font-size: 0.93rem; color: var(--ink-soft); }
.dish-region { margin: 0 0 0.35rem; font-size: 0.83rem; }
.dish-needs { margin: 0; font-size: 0.9rem; }
.store-group { margin-top: 1.75rem; }
.store-group h2 {
  font-size: 1rem; display: flex; gap: 0.5rem; align-items: baseline;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--line);
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 30rem) {
  main, .masthead, .site-footer { padding: 0 0.9rem; }
  .row-top { align-items: flex-start; }
  .row-text { flex-basis: 100%; }
  .match-detail > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .facet { font-size: 0.82rem; padding: 0.5rem 0.7rem; }
  .sort-bar { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

@media (max-width: 33.999rem) {
  .search.compact .compact-context summary { margin-bottom: 0.35rem; }
  .vendor-browse > .lede { margin: 0.2rem 0 0.55rem; font-size: 0.92rem; }
  .vendor-browse > .sort-bar { margin: 0 0 0.65rem; padding: 0.35rem 0.55rem; }
  .vendor-scope { margin: 1rem 0 1.3rem; }
  .vendor-group { padding: 0.72rem 0.82rem; }
  .vendor-group .chips { gap: 0.25rem; }
  .vendor-group .provenance { margin-bottom: 0.25rem; }
  .review-row { padding: 0.65rem 0.72rem; margin-bottom: 0.5rem; }
  .review-row .row-top {
    display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    gap: 0.3rem 0.5rem;
  }
  .review-row .keep { grid-column: 1 / -1; min-height: 36px; }
  .review-row .row-amount-field { grid-column: 1; }
  .review-row .row-text-field { grid-column: 2; }
  .review-row .row-amount, .review-row .row-text { width: 100%; min-width: 0; }
  .review-row .row-original { margin-top: 0.22rem; }
  .review-row .row-flags { margin-top: 0.25rem; }
  .review-row .disposition-group {
    display: flex; flex-wrap: wrap; gap: 0 0.55rem;
    margin: 0.35rem 0 0; padding: 0; border: 0;
  }
  .review-row .disposition-group legend {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .review-row .disposition-option { min-height: 38px; margin-right: 0; font-size: 0.82rem; }
  .review-row .row-tools { margin-top: 0.1rem; }
  .recipe-summary { padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; }
  .recipe-row-result { margin-bottom: 0.85rem; padding-bottom: 0.7rem; }
  .recipe-row-head h2 { font-size: 1.06rem; }
  .recipe-row-head .row-as-written, .recipe-row-head .row-amount,
  .recipe-row-result .row-searched { margin: 0.1rem 0; }
  .recipe-source-details { margin: 0.35rem 0; }
  .recipe-source-details > summary { padding: 0.3rem 0; }
  .shop-stop { padding: 0.72rem 0.82rem; margin-bottom: 0.8rem; }
  .shop-stop-head .might-help, .shop-stop-head .tally { margin: 0.3rem 0; }
}

/* The masthead clear control is a form so it can POST, but it must sit on the
   line with the rest of the bar rather than breaking it. */
.loc-bar form.inline { display: inline; margin: 0; }
.loc-bar .link-button { padding: 0.2rem 0.1rem; min-height: 0; }

/* Reviewed continuations retain long wording without widening phone layouts. */
.recipe-row-result, .clarification { overflow-wrap: anywhere; }
.recipe-batch > button { margin-block: 1rem; }
.recipe-row-result .row-amount { display: block; }

/* --- disposition (find a source / already have / buy elsewhere) --------- */

.disposition-group {
  margin: 0.6rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.disposition-group legend { font-size: 0.83rem; color: var(--ink-soft); padding: 0 0.35rem; }
.disposition-option {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-size: 0.9rem; margin-right: 1rem;
}
.recipe-toplevel-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }

/* --- needs-you summary, row states, row actions, collapsed sources ------- */

.needs-you {
  margin: 0 0 1.25rem; padding: 0.85rem 1rem;
  background: var(--caution-wash); border-left: 3px solid var(--caution);
  border-radius: var(--radius-sm);
}
.needs-you h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ink); }
.needs-you ul { margin: 0; padding-left: 1.1rem; }
.needs-you li { margin: 0.35rem 0; overflow-wrap: anywhere; }
/* The plan's own edit links sit in running text; give them a finger-sized target. */
.decide-first .link-button, .master-checklist .link-button {
  min-width: 44px; padding: 0.6rem 0.6rem; margin: 0.1rem 0;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.row-actions .button { min-height: 44px; }
.review-row:target, .recipe-row-result:target {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* One vocabulary of row states on the review and sourcing pages: a state that
   needs the cook is amber, a state with a source to check is the accent tone,
   and a row the cook set aside or left unsearched stays quiet. */
.review-status[data-review-status="enter-an-ingredient"],
.review-status[data-review-status="assign-an-amount"],
.review-status[data-review-status="reassign-the-earlier-choice"],
.review-status[data-review-status="choice-needed"],
.review-status[data-review-status="maker-not-recorded"],
.review-status[data-review-status="assign-amounts-before-sourcing"],
.review-status[data-review-status="reassign-the-earlier-choice-before-sourcing"],
.review-status[data-review-status="enter-an-ingredient-before-sourcing"],
.review-status[data-review-status="choose-one-alternative"],
.review-status[data-review-status="part-not-recognized"],
.review-status[data-review-status="not-supported-yet"],
.review-status[data-review-status="no-suitable-source-recorded"] {
  background: var(--caution-wash); color: var(--caution);
}
.review-status[data-review-status="local-record-to-check"],
.review-status[data-review-status="chain,-online-or-maker-record"],
.review-status[data-review-status="lead-to-confirm"] {
  background: var(--accent-wash); color: var(--accent-ink);
}
.recipe-source-details > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  overflow-wrap: anywhere;
}
@media (max-width: 47.999rem) {
  /* The action that moves the review forward stays reachable on a long list. */
  .review-actions {
    position: sticky; bottom: 0; z-index: 5; margin: 1rem 0 0; padding: 0.6rem 0;
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .row-actions .button { flex: 1 1 9rem; }
}

/* --- plan this shop ------------------------------------------------------- */

.shop-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.shop-stops h2 { font-size: 1.15rem; margin: 1.25rem 0 0.75rem; }
.shop-stop {
  margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.shop-stop-head h3, .shop-stop-head h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.shop-stop-head .address,
.shop-stop-head .phone,
.shop-stop-head .distance { margin: 0.15rem 0; font-size: 0.88rem; color: var(--ink-soft); }
.shop-stop-head .phone[data-phone="not-recorded"] { color: var(--muted); font-style: italic; }
.shop-stop-head .tally { margin: 0.5rem 0 0; font-weight: 600; font-size: 0.95rem; }
.shop-rows { list-style: none; padding: 0; margin: 0.85rem 0 0; }
.shop-row { margin: 0 0 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.shop-row .row-query { margin: 0 0 0.35rem; font-size: 0.98rem; }
.shop-aside { margin-top: 1.5rem; }
.shop-aside ul { list-style: none; padding: 0; }
.shop-aside li { margin: 0 0 1rem; }
.call-ahead[data-phone="not-recorded"] strong { color: var(--caution); }

/* --- print ----------------------------------------------------------------
   Every non-content control disappears; source cards and shop stops stay
   readable and avoid splitting mid-record where a printer allows it. Nothing
   here changes what is shown on screen. */

@media print {
  .masthead, .site-footer, .skip, .loc-bar,
  .review-actions, .row-tools, .row-actions, .recipe-toplevel-actions, .shop-actions,
  .sort-bar, .cta, .correction-link, form button, form input[type="submit"],
  .row-add { display: none !important; }
  /* `.cta` is two different things wearing one class name: page-level
     navigation ("Start another recipe", "Paste a recipe") that print
     correctly hides above, and each source card's own call/check action,
     which names the one URL or phone a printed page has no other copy of
     and must survive onto paper. Higher specificity wins the cascade even
     between two `!important` rules, so this un-hides only the card's own. */
  .source-card .cta { display: block !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .shop-stop, .source-card, .recipe-row-result {
    box-shadow: none; border: 1px solid #999; break-inside: avoid;
  }
  .bucket-manufacturer_information .source-card { background: #fff; }
}

/* Complete review state remains readable in screen and native JS-off print. */
.master-checklist li { border-top: 1px solid var(--line, #d8d5cc); padding: 1rem 0; }
.master-checklist h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.master-checklist p { margin: .25rem 0; overflow-wrap: anywhere; }
.print-evidence { display: none; }
@media print {
  @page { margin: 14mm; }
  body { font-size: 10pt; }
  details.evidence { display: none !important; }
  .print-evidence { display: block !important; font-size: 9pt; }
  .print-evidence p, .print-evidence li { overflow-wrap: anywhere; }
  .source-card, .shop-stop, .shop-aside, .shop-rows > li { break-inside: auto !important; }
  .master-checklist li, .print-evidence li, .dimensions > div { break-inside: avoid; }
  /* Rows that carry their own evidence print it themselves, so a grouped card
     prints each offering's evidence beside that offering. */
  .product-line { break-inside: auto; }
  h2, h3, h4, h5 { break-after: avoid; }
  a[href^="https:"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 8pt; overflow-wrap: anywhere; }
  .shop-actions, .shop-sort, button { display: none !important; }
}

@media print {
  .master-checklist li { padding: 6pt 0; margin: 0; }
  .master-checklist p { font-size: 9pt; line-height: 1.3; margin: 2pt 0; }
  .master-checklist h3 { font-size: 10pt; margin: 2pt 0; }
  .shop-stop-head, .card-head, .product-information, .panel:has([data-contact-key]) { break-inside: avoid; }
  .shop-stop-head, .card-head { break-after: avoid; }
  .source-card p, .print-evidence li { line-height: 1.35; }
  .source-card { padding: 8pt; }
  .print-evidence .last-reviewed { break-before: avoid; }
}

@media print {
  .source-card { break-inside: avoid !important; break-after: avoid; }
  .print-evidence { padding: 0 8pt 8pt; border-bottom: 1px solid #aaa; }
  .print-evidence p { line-height: 1.35; }
}

/* 6S generic ingredient exploration: compact vendor summaries first, with
   actual offering cards on the bounded next page. */
.vendor-groups {
  list-style: none; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: minmax(0, 1fr);
}
.vendor-scope { margin: 2rem 0 2.5rem; }
.vendor-scope > h2 { font-size: 1.18rem; }
.vendor-group {
  padding: 1.05rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); min-width: 0;
  overflow-wrap: anywhere;
}
.vendor-group h3, .vendor-group p { margin: 0 0 .45rem; }
.vendor-group .chips { flex-wrap: wrap; }
.vendor-group form, .pagination form { display: inline-block; margin: 0 .4rem 0 0; }
.coordinate-note, [data-coordinate-state="missing"],
[data-coordinate-state="ambiguous"] { color: var(--ink-soft); }
.directions .secondary { margin-left: .25rem; }
.choice-button { display: flex; width: 100%; flex-direction: column; align-items: flex-start; }
.choice-action { margin-top: 0.15rem; font-size: 0.76rem; font-weight: 500; opacity: 0.82; }
.result-helper, .browse-state { max-width: 48rem; color: var(--ink-soft); }

@media (min-width: 48rem) {
  .how-strip ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vendor-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  /* At native 200% zoom this band is the effective content width. Give the
     nav its own bounded row; a 100% flex item with a negative margin could
     extend beyond the visible edge without creating usable page scrolling. */
  .masthead-row { min-width: 0; }
  .masthead-nav {
    flex: 1 1 100%; width: auto; min-width: 0; max-width: 100%;
    margin-left: 0; gap: 0.1rem 0.5rem; flex-wrap: wrap;
  }
  .masthead-nav a {
    min-width: 0; min-height: 40px; padding-inline: 0.35rem;
    white-space: normal; overflow-wrap: anywhere;
  }
  .masthead .scope, .loc-bar, .loc-label { min-width: 0; overflow-wrap: anywhere; }
  .nav-secondary { color: var(--ink-soft); }
  .directions .secondary { display: block; margin: 0.3rem 0 0; }
}

@media (min-width: 34rem) and (max-width: 44rem) {
  .masthead { padding-top: 0.75rem; padding-bottom: 0.55rem; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* --- cook continuity: requested form, selected listing ------------------- */

/* An explicit form is part of the request, so it reads as primary, directly
   under the ingredient name — never as a secondary footnote. */
.requested-form { margin: 0.25rem 0 0.4rem; font-size: 1rem; color: var(--ink); }
.requested-form .requested-form-label { color: var(--ink-soft); font-weight: 500; margin-right: 0.3rem; }
.requested-form strong {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 650;
}
.track-product { margin: 0.2rem 0; font-weight: 600; }
.selection-back { margin: 0.2rem 0 0.5rem; font-size: 0.9rem; }

/* --- compact narrow header ------------------------------------------------ */

/* Short nav labels exist only for narrow screens; wide screens keep the full
   wording. Both spans are plain text inside one link, so the link's name is
   whichever one is displayed. */
.nav-short { display: none; }

@media (max-width: 33.999rem) {
  .masthead { padding-top: 0.45rem; padding-bottom: 0.4rem; margin-bottom: 0.8rem; }
  .masthead-row { align-items: center; gap: 0 0.4rem; }
  .masthead-nav { flex: 0 1 auto; width: auto; margin-left: auto; gap: 0; flex-wrap: wrap; }
  .masthead-nav a { min-height: 40px; padding-inline: 0.38rem; font-size: 0.82rem; }
  .masthead-nav .nav-secondary { display: none; }
  .nav-full { display: none; }
  .nav-short { display: inline; }
  .masthead .scope { margin: 0; font-size: 0.72rem; line-height: 1.35; }
  .loc-bar { margin-top: 0.15rem; font-size: 0.8rem; gap: 0.1rem 0.45rem; line-height: 1.35; }
  .loc-out-of-area { font-size: 0.8rem; margin: 0.2rem 0 0; }
}

/* The location controls are POST forms. A form cannot live inside the
   paragraph that states the location, so the parser places each one after it;
   keep them on the location line instead of stacking one per row. */
.masthead > form.contextual-nav,
.masthead > form.inline { display: inline-block; margin: 0.1rem 0.9rem 0 0; font-size: 0.85rem; }
.masthead > p:empty { display: none; }
.masthead > .secondary { font-size: 0.85rem; }