/* Official Potato — site stylesheet (owner: FRONTEND). Tokens and components: docs/DESIGN.md.
   No web fonts, no inline styles anywhere (CSP style-src 'self'). Phone first: 360–430 px. */

/* ---------------------------------------------------------------- tokens (DESIGN §4.1) */
:root {
  color-scheme: light dark;
  --bg: #FBFAF6;
  --surface: #FFFFFF;
  --sunk: #F3F0E8;
  --ink: #2A2119;
  --ink-2: #5E5246;
  --line: #E5DFD3;
  --line-strong: #8B7E6F;
  --soil: #6B4A2F;
  --on-soil: #FFFFFF;
  --leaf: #2F6A3A;
  --leaf-tint: #E9F1E5;
  --ochre: #8A5900;
  --ochre-tint: #FBF1DD;
  --beet: #8A2D5C;
  --beet-tint: #F7E8EF;
  --radish: #A3261F;
  --radish-tint: #FAE9E7;
  --stone: #5D5952;
  --stone-tint: #EFEDE8;
  --slate: #4F5A66;
  --slate-tint: #ECEFF2;
  --focus: #1F5FBF;

  --e1: 0 1px 0 rgba(42, 33, 25, .03), 0 1px 3px rgba(42, 33, 25, .06);
  --e-press: inset 0 1px 0 rgba(42, 33, 25, .08);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --r-tag: 4px; --r-chip: 8px; --r-card: 12px; --r-disc: 50%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16120F;
    --surface: #201A15;
    --sunk: #1A1511;
    --ink: #F2ECE2;
    --ink-2: #BCB0A1;
    --line: #3A3129;
    --line-strong: #7F7263;
    --soil: #D3A67C;
    --on-soil: #201A15;
    --leaf: #8FC78A;
    --leaf-tint: #1F2B1D;
    --ochre: #E2B04E;
    --ochre-tint: #2E2414;
    --beet: #E78DBA;
    --beet-tint: #2E1A24;
    --radish: #F2907F;
    --radish-tint: #311B17;
    --stone: #B6AFA5;
    --stone-tint: #26211C;
    --slate: #A8B4C0;
    --slate-tint: #1D2227;
    --focus: #8AB4FF;
    --e1: none;
    --e-press: inset 0 1px 0 rgba(0, 0, 0, .4);
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16120F;
  --surface: #201A15;
  --sunk: #1A1511;
  --ink: #F2ECE2;
  --ink-2: #BCB0A1;
  --line: #3A3129;
  --line-strong: #7F7263;
  --soil: #D3A67C;
  --on-soil: #201A15;
  --leaf: #8FC78A;
  --leaf-tint: #1F2B1D;
  --ochre: #E2B04E;
  --ochre-tint: #2E2414;
  --beet: #E78DBA;
  --beet-tint: #2E1A24;
  --radish: #F2907F;
  --radish-tint: #311B17;
  --stone: #B6AFA5;
  --stone-tint: #26211C;
  --slate: #A8B4C0;
  --slate-tint: #1D2227;
  --focus: #8AB4FF;
  --e1: none;
  --e-press: inset 0 1px 0 rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); }
h1 { font-size: 1.875rem; line-height: 1.12; letter-spacing: -.005em; }
h2 { font-size: 1.3125rem; line-height: 1.2; }
h3 { font-size: 1.1875rem; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--soil); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: .875em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 640px; margin-inline: auto; padding-inline: 16px; }
main.wrap { padding-block: var(--s5) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -100px; z-index: 10; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--r-chip); border: 1px solid var(--line-strong); }
.skip:focus { top: 8px; }

/* JS / no-JS switches (app.js adds html.js) */
.js-only { display: none !important; }
html.js .js-only { display: revert !important; }
html.js .theme.js-only { display: flex !important; }
html.js .no-js-only { display: none !important; }

/* ---------------------------------------------------------------- icons (DESIGN §6) */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; color: inherit; }
.i-16 { width: 16px; height: 16px; }
.i-20 { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- type helpers */
.label {
  font: 600 .75rem/1.3 var(--font-mono);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
}
.meta { font: 400 .75rem/1.5 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.hint, .lede { font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.intro { font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.lede-plain { font-size: 1rem; color: var(--ink); }
.n { font-size: .875rem; color: var(--ink-2); white-space: nowrap; }
.dates { font: 400 .75rem/1.5 var(--font-mono); color: var(--ink-2); }
.dates b { color: var(--ink); font-weight: 600; }
.dates time { white-space: nowrap; }
.section-h, .bucket-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- header / footer (DESIGN §2) */
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); }
.head-row { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wordmark { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font: 600 1.25rem/1 var(--font-display); }
.wordmark img { width: 28px; height: 28px; }
.site-head nav { display: flex; gap: 2px; }
.site-head nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; color: var(--ink); text-decoration: none; font-size: .9375rem; border-radius: var(--r-chip); }
.site-head nav a:hover { text-decoration: underline; }
@media (max-width: 389px) {
  .wordmark { font-size: 1.0625rem; gap: 6px; }
  .wordmark img { width: 24px; height: 24px; }
  .site-head nav a { padding: 0 6px; font-size: .875rem; }
}
@media (max-width: 340px) {
  .wordmark { font-size: .9375rem; gap: 4px; min-width: 0; }
  .wordmark img { width: 22px; height: 22px; }
  .site-head nav a { padding: 0 4px; }
}

.site-foot { border-top: 1px solid var(--line); padding-block: var(--s5) var(--s6); font-size: .875rem; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-direction: column; gap: var(--s2); }
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding-inline: 2px; }
.credit { color: var(--ink-2); }
.plate-tag { font: 400 .75rem/1.5 var(--font-mono); color: var(--ink-2); }
.plate-tag i { font-family: var(--font-display); font-size: .875rem; }
.theme { align-items: center; gap: 4px; flex-wrap: wrap; }
.theme span { margin-right: 4px; }
.theme button {
  min-height: 44px; min-width: 44px; padding: 0 10px; background: transparent; border: 1px solid transparent;
  border-radius: var(--r-chip); color: var(--soil); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.theme button[aria-pressed="true"] { border-color: var(--line-strong); color: var(--ink); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- buttons (DESIGN §7.2) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-chip);
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
}
.btn-1 { background: var(--soil); color: var(--on-soil); border: 1px solid var(--soil); }
.btn-2 { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font-size: .9375rem; }
.btn-2:hover { border-color: var(--ink-2); text-decoration: none; }
.btn:active { box-shadow: var(--e-press); transform: translateY(1px); }
.btn-text {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0;
  color: var(--soil); font: 500 .9375rem/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------------------------------------------------------------- hero + bubble (DESIGN §9.1, G1) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: var(--s3); align-items: end; }
.hero-text { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.kicker { font: italic 400 .875rem/1.3 var(--font-display); color: var(--ink-2); }
.hero .lede { font-size: .9375rem; }
.hero-art { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hero-art img { width: 120px; height: 100px; transform-origin: 50% 100%; }
.bubble {
  position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip);
  padding: 6px 10px; font-size: .8125rem; line-height: 1.35; color: var(--ink); width: 128px;
}
.bubble::after {
  content: ""; position: absolute; right: 40px; bottom: -7px; width: 12px; height: 12px;
  background: var(--surface); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
@media (max-width: 359px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { align-items: flex-start; }
}
@media (min-width: 560px) {
  .hero { grid-template-columns: minmax(0, 1fr) 240px; }
  .hero-art { flex-direction: row; align-items: flex-end; }
  .bubble { width: 120px; margin-bottom: 40px; }
  .bubble::after { right: -7px; bottom: 14px; border-right: 1px solid var(--line-strong); border-bottom: 0; border-top: 1px solid var(--line-strong); transform: rotate(45deg); }
}

/* ---------------------------------------------------------------- allergen chips (DESIGN §7.1) */
.picker { display: flex; flex-direction: column; gap: var(--s3); scroll-margin-top: 16px; }
.picker fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Fixer (2026-10-11): the column minimum is in rem (150px and 136px at normal text), so at 200% text
   the chips drop to one column instead of scrolling the page sideways (WCAG 1.4.4 / 1.4.10). */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.375rem), 1fr)); gap: 8px; }
@media (max-width: 340px) { .chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); } }
.chip {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip);
  color: var(--ink); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.chip .box {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); border-radius: 4px; color: transparent;
}
.chip-word { font-size: 1rem; line-height: 1.2; }
.chip:hover { border-color: var(--ink-2); }
.chip:has(input:checked) { background: var(--soil); border-color: var(--soil); color: var(--on-soil); }
.chip:has(input:checked) .chip-word { font-weight: 600; }
.chip input:checked + .box { border-color: var(--on-soil); color: var(--on-soil); }
/* Round 8 (a11y audit): the tick is hidden by visibility, not by a transparent colour. Forced
   colours (Windows High Contrast) override colour and background, and every chip then showed a
   tick. Visibility survives forced colours, and the checked chip also gets a system-colour mark. */
.chip .box svg { visibility: hidden; }
.chip input:checked + .box svg { visibility: visible; }
@media (forced-colors: active) {
  .chip:has(input:checked) { outline: 3px solid CanvasText; outline-offset: -3px; }
  .chip input:checked + .box { background: Highlight; border-color: Highlight; }
  .chip input:checked + .box svg { color: HighlightText; }
  .chip:has(input:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; }
}
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip:active { box-shadow: var(--e-press); transform: translateY(1px); }
.picker-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; }
.ticked { font-size: .875rem; color: var(--ink-2); }
.picker .btn-1 { align-self: flex-start; }

/* ---------------------------------------------------------------- chain status tag (DESIGN §7.3, G6) */
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: var(--r-tag);
  font: 600 .8125rem/1.2 var(--font-body); white-space: nowrap; text-decoration: none;
  background: var(--surface); border: 1px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px currentColor;
}
.tag.on-bg { background: var(--bg); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px currentColor; }
/* The stamp stays 28px to look like a stamp; the LINK around it is a 44px box (Rule 9, round 3:
   a phone audit measures the link's own box, so a ::after hit area read as 28px). */
a.tag-hit { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
a.tag-hit:hover .tag { text-decoration: underline; }
.st-consistent .tag, .tag.st-consistent, .st-consistent > .card-head .tag { color: var(--leaf); }
.st-contra .tag { color: var(--beet); }
.st-paused .tag { color: var(--slate); }
.st-old .tag { color: var(--ochre); }
.tag.st-consistent { color: var(--leaf); }
.tag.st-contra { color: var(--beet); }
.tag.st-paused { color: var(--slate); }
.tag.st-old { color: var(--ochre); }

/* ---------------------------------------------------------------- chain cards (DESIGN §7.4) */
.chains { display: flex; flex-direction: column; gap: var(--s3); }
.cards { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  padding: 16px; display: flex; flex-direction: column; gap: var(--s3); min-width: 0;
}
.card.aside { background: var(--bg); border: 1.5px dashed var(--line-strong); box-shadow: none; }
.card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.card-head .badge { width: 40px; height: 40px; grid-row: span 2; align-self: start; }
.card-head .tag, .card-head .tag-hit { grid-column: 2; justify-self: start; }
.card-title { min-width: 0; }
.card-title h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.card-title h3 a:hover { text-decoration: underline; }
.card-title .label { margin-top: -2px; }
@media (min-width: 420px) {
  .card-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .card-head .badge { grid-row: auto; align-self: center; }
  .card-head .tag, .card-head .tag-hit { grid-column: 3; justify-self: end; }
}
.count-sub { font-size: .875rem; color: var(--ink-2); margin-top: calc(-1 * var(--s2)); }
.count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .9375rem; color: var(--ink); }
.count .num { font: 600 2.125rem/1 var(--font-display); color: var(--leaf); font-variant-numeric: tabular-nums; }
.nums { display: flex; flex-direction: column; gap: var(--s3); }
.bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-tag); overflow: hidden; }
.seg { display: block; height: 100%; flex: 0 1 0; min-width: 3px; }
.seg-free { background: var(--leaf); }
.seg-may { background: var(--ochre); }
.seg-unknown { background: var(--stone); }
.seg-conflict { background: var(--beet); }
.seg-contains { background: var(--radish-tint); }
.legend-line { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .875rem; }
.legend-line li { display: inline-flex; align-items: center; gap: 5px; }
.card-foot { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px dashed var(--line-strong); padding-top: var(--s3); }
.card-foot .btn-2 { align-self: flex-end; }
.card.aside .card-foot { border-top-color: var(--line-strong); }
.notice { font-size: .875rem; line-height: 1.45; color: var(--ink); }
.ext { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.ext .i { flex: none; }

/* while app.js fetches a re-sort, old numbers are hidden: a briefly wrong number is wrong */
.is-updating .nums, .is-updating .count, .is-updating .bar, .is-updating .legend-line,
.is-failed .nums { visibility: hidden; }
.is-updating { opacity: .55; }
/* ...unless the card already shows a count that is true for the new selection ("Up to N") */
.is-updating .has-estimate .nums, .is-updating .has-estimate .count { visibility: visible; }
.is-estimating { opacity: .8; }
.count.is-estimate .num { color: var(--ink-2); }

/* home: the top chains' counts, stuck to the bottom of a phone screen until the list scrolls in */
.top-strip {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  background: var(--bg); border-top: 1px solid var(--line-strong); padding: 4px 0 8px;
  margin-inline: -16px; padding-inline: 16px;
}
.top-strip .label { flex: 1 0 100%; }
.top-strip ul { list-style: none; display: flex; flex: 1; gap: 6px; min-width: 0; overflow: hidden; }
.top-strip li { min-width: 0; }
.top-strip ul a {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; align-items: center; padding: 0 10px; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-chip); background: var(--surface); color: var(--ink); text-decoration: none;
}
.top-strip ul a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.top-strip .num { font: 600 1.125rem/1 var(--font-display); color: var(--leaf); }
@media (max-width: 479px) { .top-strip li:nth-child(3) { display: none; } }
/* Post-launch polish (2026-10-13, site-sticky-strip): while the strip is stuck to the bottom of a short
   phone AND allergen chips are on screen, it steps aside (app.js watchStripOverChips). Visibility only:
   nothing on the page moves. The mark after the strip is how the script tells "stuck" from "in its place". */
body.strip-over-chips .top-strip { visibility: hidden; }
/* main.wrap is a flex column with gap --s5: the mark's own gap is taken back, so the page is exactly as tall as before. */
.strip-mark { display: block; height: 1px; margin-top: calc(-1 * var(--s5) - 1px); pointer-events: none; }
#results.is-updating .bucket { visibility: hidden; }

/* status colours for words and glyphs */
.s-free { color: var(--leaf); }
.s-may { color: var(--ochre); }
.s-unknown { color: var(--stone); }
.s-conflict { color: var(--beet); }
.s-contains { color: var(--radish); }

/* ---------------------------------------------------------------- callouts (DESIGN §7.8) */
.callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-chip);
  font-size: .875rem; line-height: 1.45; color: var(--ink); border-left: 3px solid var(--ink-2); background: var(--sunk);
}
.callout > .i { margin-top: 1px; }
.callout > div, .callout > span { min-width: 0; flex: 1; }
.callout q { font: italic 400 .9375rem/1.45 var(--font-display); quotes: "“" "”"; }
.c-note { background: var(--stone-tint); border-left-color: var(--stone); }
.c-note > .i { color: var(--stone); }
.c-aging { background: var(--ochre-tint); border-left-color: var(--ochre); }
.c-aging > .i { color: var(--ochre); }
.c-paused { background: var(--slate-tint); border-left-color: var(--slate); }
.c-paused > .i { color: var(--slate); }
.c-fact { background: var(--sunk); border-left-color: var(--soil); }
.c-fact > .i { color: var(--soil); }
.callout.big { font-size: .9375rem; }
.callout.big p + p { margin-top: 4px; }

/* ---------------------------------------------------------------- chain page (DESIGN §9.2) */
.back a { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.back { margin-bottom: calc(-1 * var(--s3)); }
/* E6 (round 3): one header line, name · status · dates, wrapping only where it must. */
.chain-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s3); align-items: center; }
.ch-one { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ch-one h1 { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.ch-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin-top: -6px; }
/* The dot only reads between two things on one line; a wrapped line starts clean. */
.ch-meta > .sep { color: var(--ink-2); }
body[data-page="chain"] .avoid-row { min-height: 44px; }
/* E6: the chain page's first screen is tighter than the other pages. */
body[data-page="chain"] main.wrap { padding-top: var(--s3); gap: var(--s4); }
body[data-page="chain"] .results { gap: var(--s4); }
/* E6: "nothing listed free" is one line with a small Russet, not a screen-tall scene. */
.b-free .empty { flex-direction: row; text-align: left; padding: 4px 0; gap: var(--s3); font-size: .875rem; }
.b-free .empty img { width: 48px; flex: none; }
.ch-dates { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.ch-dates b { color: var(--ink); font-weight: 600; }
.chain-head .face { width: 44px; height: 44px; }
/* E6: the cross-contact sentence, directly above the results. */
.xc { padding: 10px 14px; font-size: .8125rem; line-height: 1.4; }
.xc b { font-weight: 600; }
@media (max-width: 400px) { .ch-meta > .sep { display: none; } .ch-dates { font-size: .8125rem; } }
.chain-head { row-gap: 0; }
.chain-head > .back { margin: 0; }
.chain-head > .ch-one { grid-column: 1 / -1; }
.ch-meta { margin-top: 0; }
.specimen { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-tag); padding: 0 16px; }
.specimen[open] { padding-bottom: 12px; }
.specimen > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.specimen > summary .spec-one { flex: 1; min-width: 0; font-size: .875rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specimen[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.specimen dl { margin: 0; display: grid; gap: 6px; }
.specimen dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.specimen dt { font: 600 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.specimen dd { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--ink); }
.specimen .source { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.courtesy { margin-top: 4px; }

.results { display: flex; flex-direction: column; gap: var(--s5); }
.avoid-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 52px; font-size: .9375rem;
}
.bucket { display: flex; flex-direction: column; gap: var(--s3); }
.bucket .intro { color: var(--ink-2); font-size: .875rem; }
.course { display: flex; flex-direction: column; gap: 6px; }
.course-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: var(--s2);
  font: 600 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
}
.course-h .n { font: inherit; }
.course-name { display: inline-flex; align-items: center; gap: 6px; }
.loading { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-2); }
.loading img { width: 48px; height: 32px; }
.words-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.words-h img { width: 96px; height: auto; flex: none; }
.rows { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.rows > li + li { border-top: 1px solid var(--line); }

/* result row (DESIGN §7.5) */
.row > summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.row > summary::-webkit-details-marker { display: none; }
.row > summary::marker { content: ""; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.name { font-size: 1rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.variant { color: var(--ink-2); }
/* the chain's own section name, and a dish whose options are separate rows */
.sect, .base-note { font-size: .8125rem; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.sub .note { font-weight: 600; }
/* D1: the chain's own kitchen statement on the row, compact: Olive Garden: “…same pasta cooker”… */
.kq { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.35; font-weight: 400; color: var(--ink-2); }
.kq-q { font: italic 400 .875rem/1.35 var(--font-display); color: var(--ink); }
.print-only, .print-note { display: none; }
.rel-print { display: none; }
.sheet-link-row { margin: 0; }
.sub { font-size: .875rem; line-height: 1.35; font-weight: 600; }
.sub .sep { color: var(--ink-2); font-weight: 400; }
.disc { width: 28px; height: 28px; flex: none; border-radius: var(--r-disc); display: grid; place-items: center; }
.s-free > summary .disc { background: var(--leaf-tint); color: var(--leaf); }
.s-may > summary .disc { background: var(--ochre-tint); color: var(--ochre); }
.s-unknown > summary .disc { background: var(--stone-tint); color: var(--stone); }
.s-conflict > summary .disc { background: var(--beet-tint); color: var(--beet); }
.s-contains > summary .disc { background: var(--radish-tint); color: var(--radish); }
.row.s-conflict {
  background: repeating-linear-gradient(135deg, var(--beet-tint) 0 6px, transparent 6px 12px);
  box-shadow: inset 3px 0 0 var(--beet);
}
.row.s-conflict .sub { font-weight: 650; }
.chev { color: var(--ink-2); flex: none; }
details[open] > summary .chev { transform: rotate(180deg); }

.evidence {
  margin: 0 16px 14px; padding: 12px; background: var(--sunk); border-radius: var(--r-chip);
  display: flex; flex-direction: column; gap: 10px; font-size: .875rem;
}
.row.s-conflict .evidence { background: var(--sunk); }
.etags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.etag { font-size: .75rem; line-height: 1.3; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-tag); color: var(--ink); background: var(--surface); }
.etag.is-ticked { font-weight: 700; }
.etag.f-contains { color: var(--radish); }
.etag.f-may_contain { color: var(--ochre); }
.etag.f-unknown { color: var(--stone); border-style: dashed; }
.etag.f-free { color: var(--leaf); }
.components { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.why { color: var(--ink); }
.why a { white-space: nowrap; }
/* "See the quotes" / "see note": standalone links, 44px tall (inline in a sentence they were 19px) */
.why a.why-link, .item-notes a { display: inline-flex; align-items: center; min-height: 44px; }
.item-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: -6px; }
.locator { overflow-wrap: anywhere; }

/* the chain's own words (DESIGN §7.7 quote style) */
.quote { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.quote blockquote { margin: 0; }
.quote blockquote p, .quote-norm {
  font: italic 400 .9375rem/1.45 var(--font-display); color: var(--ink); overflow-wrap: anywhere;
}
.quote-norm { font: 400 .875rem/1.45 var(--font-body); }
.ingredients { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
html.js .ingredients:not(.is-open) blockquote p {
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* buckets: contains collapsed and quiet; legend; resolved */
details.b-contains, details.legend, details.resolved, details.coverage, details.more-findings, details.more-facts {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); padding: 0 12px;
}
details.b-contains > summary, details.legend > summary, details.resolved > summary,
details.coverage > summary, details.more-findings > summary, details.more-facts > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 600;
}
details.b-contains > summary > span:first-child, details.legend > summary > span:first-child,
details.resolved > summary > span:first-child, details.coverage > summary > span:first-child,
details.more-findings > summary > span:first-child, details.more-facts > summary > span:first-child { flex: 1; }
details.more-facts[open] { padding-bottom: 12px; display: flex; flex-direction: column; gap: var(--s3); }
details.coverage[open], details.more-findings[open] { padding-bottom: 12px; }
details.coverage > .finding, details.more-findings > .finding + .finding { margin-top: var(--s3); }
details.coverage .hint { margin-bottom: var(--s2); }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details.b-contains[open], details.legend[open], details.resolved[open] { padding-bottom: 12px; }
details.b-contains .rows { margin-bottom: 4px; }
.when-open { display: none; }
details[open] > summary .when-open { display: inline; }
details[open] > summary .when-closed { display: none; }
.legend-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.legend-list li { display: flex; gap: 12px; align-items: flex-start; }
.legend-list .disc { background: var(--sunk); }
.legend-list .s-free .disc { background: var(--leaf-tint); }
.legend-list .s-may .disc { background: var(--ochre-tint); }
.legend-list .s-unknown .disc { background: var(--stone-tint); }
.legend-list .s-conflict .disc { background: var(--beet-tint); }
.legend-list .s-contains .disc { background: var(--radish-tint); }
.legend-list b { display: block; }
.meaning { display: block; color: var(--ink); font-size: .875rem; }

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s4); font-size: .9375rem; }
.empty img { width: 120px; height: auto; }

/* ---------------------------------------------------------------- findings (DESIGN §7.7) */
.contradictions, .company { display: flex; flex-direction: column; gap: var(--s4); scroll-margin-top: 16px; }
.finding {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1), inset 3px 0 0 var(--beet);
  border-radius: var(--r-card); padding: 16px 16px 16px 19px; display: flex; flex-direction: column; gap: 10px;
  scroll-margin-top: 16px;
}
.finding:target { outline: 3px solid var(--focus); outline-offset: 2px; }
.finding .rule { color: var(--beet); display: flex; align-items: center; gap: 6px; }
.finding .sev { font-size: .875rem; font-weight: 600; }
.sev-under .sev, .sev-conflict .sev { color: var(--beet); }
.sev-over .sev { color: var(--ochre); }
.sev-gap .sev { color: var(--stone); }
.sev-gap { box-shadow: var(--e1), inset 3px 0 0 var(--stone); }
.sev-gap .rule { color: var(--stone); }
.finding .summary { font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.finding .quote { background: var(--sunk); border-radius: var(--r-chip); padding: 12px; }
.vs { text-align: center; font: 600 .75rem/24px var(--font-mono); letter-spacing: .1em; color: var(--ink-2); }
.finding .side { display: flex; flex-direction: column; gap: 6px; }
.finding .side .quote { padding: 8px 12px; }
.quote .src { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-block: -12px; padding-inline: 4px; }
.cut { font-style: normal; }

/* tiers (D3): headline contradictions (beet), notes that may be different recipes (ochre,
   dashed), coverage (stone, dashed). Only headline cards ever say "disagree". */
.finding.tier-variance { border-style: dashed; border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--ochre); }
.finding.tier-variance .rule, .finding.tier-variance .sev { color: var(--ochre); }
.finding.tier-note { border-style: dashed; border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--stone); }
.finding.tier-note .rule, .finding.tier-note .sev { color: var(--stone); }
.finding.tier-coverage { border-style: dashed; border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--stone); background: var(--bg); }
.finding.tier-coverage .rule, .finding.tier-coverage .sev { color: var(--stone); }
details.tier-variance-block { border-color: var(--ochre); }
.finding.is-resolved { background: var(--bg); border: 1.5px dashed var(--line-strong); box-shadow: inset 3px 0 0 var(--leaf); }
.finding.is-resolved .rule { color: var(--leaf); }
details.resolved > .finding + .finding, details.resolved > .hint + .finding { margin-top: var(--s3); }
details.resolved .hint { margin-bottom: var(--s3); }

.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jump a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r-chip); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.jump a .n { color: var(--beet); font-weight: 600; }
.jump a:hover { border-color: var(--ink-2); }
.company { padding-top: var(--s4); border-top: 1px solid var(--line); }
.company h2 a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.to-top a, .finding .tell a { display: inline-flex; align-items: center; min-height: 44px; }
.finding .tell { font-size: .875rem; }
.scene { display: flex; justify-content: center; }
.scene img { width: 160px; height: auto; }

/* ---------------------------------------------------------------- disclaimers (DESIGN §7.11) */
.disclaimers { background: var(--sunk); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.disclaimers h2 { font: 600 .75rem/1.3 var(--font-mono); }
.disclaimers ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; line-height: 1.45; }

/* ---------------------------------------------------------------- status page (DESIGN §9.5) */
.status-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.status-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.status-row.aside { background: var(--bg); border: 1.5px dashed var(--line-strong); }
.status-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.status-top h2 { font-size: 1.1875rem; }
.status-top h2 a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.err { font-size: .875rem; color: var(--ink); }
.runs-wrap { display: flex; align-items: center; gap: 10px; }
.runs { list-style: none; display: flex; gap: 4px; }
.run { width: 14px; height: 14px; border-radius: 3px; }
.run.ok { background: var(--leaf); }
.run.closed { background: var(--slate); }

/* ---------------------------------------------------------------- how page (DESIGN §9.4) */
.plate { margin: 0; }
.plate img { width: 100%; max-width: 480px; margin-inline: auto; }
.step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.step img { width: 96px; height: 96px; }
.step > div, .prose { display: flex; flex-direction: column; gap: var(--s2); }
.step p, .prose p, .prose li { font-size: 1rem; line-height: 1.55; }
.prose ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.prose ul.defs { list-style: none; padding: 0; }
.defs li { display: flex; gap: 10px; align-items: flex-start; }
.defs .i { margin-top: 3px; }
.prose p a, .prose li a, .step p a { padding-block: 10px; }
.ua { background: var(--sunk); border-radius: var(--r-chip); padding: 10px 12px; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .step { grid-template-columns: 1fr; }
  .step img { width: 80px; height: 80px; }
}

/* ---------------------------------------------------------------- 404 */
.lost { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding-top: var(--s5); }
.lost img { width: 180px; height: auto; }
.lost-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- motion (DESIGN §10): only when allowed */
@media (prefers-reduced-motion: no-preference) {
  .switch .track { transition: background .15s; }
  .switch .track::after { transition: transform .15s; }
  .chip { transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
  .chip:active, .btn:active { transition-duration: 60ms; }
  .chev { transition: transform 150ms ease-out; }
  .bubble p { transition: opacity 90ms linear; }
  .bubble p.fade { opacity: 0; }
  .hero-art img.hop { animation: hop 420ms cubic-bezier(.3, .7, .4, 1) 1; }
  @keyframes hop {
    0% { transform: translateY(0) scale(1, 1); }
    45% { transform: translateY(-8px) scale(1, 1); }
    85% { transform: translateY(0) scale(1.03, .97); }
    100% { transform: translateY(0) scale(1, 1); }
  }
}

/* ---------------------------------------------------------------- bar segment widths (flex-grow, 2% steps) */
.w2{flex-grow:2} .w4{flex-grow:4} .w6{flex-grow:6} .w8{flex-grow:8} .w10{flex-grow:10} .w12{flex-grow:12} .w14{flex-grow:14} .w16{flex-grow:16} .w18{flex-grow:18} .w20{flex-grow:20}
.w22{flex-grow:22} .w24{flex-grow:24} .w26{flex-grow:26} .w28{flex-grow:28} .w30{flex-grow:30} .w32{flex-grow:32} .w34{flex-grow:34} .w36{flex-grow:36} .w38{flex-grow:38} .w40{flex-grow:40}
.w42{flex-grow:42} .w44{flex-grow:44} .w46{flex-grow:46} .w48{flex-grow:48} .w50{flex-grow:50} .w52{flex-grow:52} .w54{flex-grow:54} .w56{flex-grow:56} .w58{flex-grow:58} .w60{flex-grow:60}
.w62{flex-grow:62} .w64{flex-grow:64} .w66{flex-grow:66} .w68{flex-grow:68} .w70{flex-grow:70} .w72{flex-grow:72} .w74{flex-grow:74} .w76{flex-grow:76} .w78{flex-grow:78} .w80{flex-grow:80}
.w82{flex-grow:82} .w84{flex-grow:84} .w86{flex-grow:86} .w88{flex-grow:88} .w90{flex-grow:90} .w92{flex-grow:92} .w94{flex-grow:94} .w96{flex-grow:96} .w98{flex-grow:98} .w100{flex-grow:100}

/* INTEGRATION 2026-10-10: first chain fact on a home card (DESIGN §7.4). */
.card .card-fact { margin-top: 10px; font-size: .8125rem; }
.card .card-fact q { font-size: .875rem; }

/* ---------------------------------------------------------------- round 3 (E2, E3, E6, E7) */
/* E2: our reading of a kitchen quote, outside the quotation marks, in our own (plain) type. */
.kq-ours { font-style: normal; color: var(--ink-2); }
/* E2: a chart's "listed free" chip on a row a kitchen statement moved to "may contain": muted. */
.etag.f-free:has(> .over) { color: var(--ink-2); font-weight: 400; border-style: dashed; }
.evidence .meta.reading { font: 400 .8125rem/1.4 var(--font-body); color: var(--ink-2); letter-spacing: normal; text-transform: none; }
/* E3: the chain's own cooking statement on a row, an info line (status unchanged). */
.kq-info { display: block; }
.kq-info .i { vertical-align: -3px; margin-right: 4px; color: var(--stone); }
/* E6: the facts line is one 44px line until opened. */
details.more-facts > summary { min-height: 44px; font-size: .8125rem; line-height: 1.3; }
.sum-short { display: none; }
/* E7: a card's anchors sit out of flow (no flex gap per merged member); the first pair, then the
   rest behind "Show all N sources". */
.finding { position: relative; }
.finding > .anchors { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
.finding .pair { display: flex; flex-direction: column; gap: 6px; }
details.more-sources { border-top: 1px dashed var(--line); }
details.more-sources > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: .875rem; font-weight: 600; }
details.more-sources > summary > span:first-child { flex: 1; }
details.more-sources[open] { display: flex; flex-direction: column; gap: var(--s3); padding-bottom: 4px; }
@media (max-width: 480px) {
  body[data-page="chain"] .bucket-h h2 { font-size: 1.25rem; }
  /* E6: on a phone the first screen holds the first result row: tighter callouts and gaps, and an
     empty "listed free" bucket is one line of text. */
  body[data-page="chain"] main.wrap, body[data-page="chain"] .results, body[data-page="chain"] .bucket { gap: var(--s3); }
  body[data-page="chain"] .callout { padding: 8px 12px; }
  .b-free .empty img { display: none; }
}
/* Round 3: a key the chain does not publish is said once, in the empty bucket it empties; the
   gluten pointer (wheat-only chains) sits with it. */
.empty-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.empty-words .np { margin: 0; }
/* E6 at 360x740 (round 3 phone pass): the first result row on the first screen of a small phone
   too. Status and dates share one line, the facts line stays one line, and the cross-contact
   sentence gets the icon's width back (the sentence itself is unchanged). */
@media (max-width: 400px) {
  body[data-page="chain"] .ch-meta .tag { font-size: .75rem; padding: 0 6px; gap: 4px; }
  body[data-page="chain"] .ch-dates { font-size: .75rem; }
  body[data-page="chain"] .ch-meta { column-gap: 8px; }
  details.more-facts > summary > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* Post-launch polish (2026-10-13, site-venue-ellipsis): the shorter wording replaces the long one here
     (only where :has works; elsewhere the long line stays, cut as before). */
  @supports selector(:has(+ *)) {
    details.more-facts > summary > span:first-child:has(+ .sum-short) { display: none; }
    details.more-facts > summary > .sum-short { display: block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  }
  body[data-page="chain"] .xc > .i { display: none; }
  body[data-page="chain"] main.wrap { padding-top: var(--s2); }
  body[data-page="chain"] .bucket .intro { font-size: .8125rem; }
  body[data-page="chain"] .b-free .empty { font-size: .8125rem; padding: 0; }
}
/* E6 at 360 (round 3): back arrow, name and face on one line (the words "All chains" stay for
   screen readers; the arrow is a 44px target); a quieter cross-contact sentence size. */
@media (max-width: 400px) {
  body[data-page="chain"] .chain-head { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 8px; }
  body[data-page="chain"] .chain-head > .back { grid-column: 1; grid-row: 1; }
  body[data-page="chain"] .chain-head > .back a { min-width: 44px; justify-content: center; }
  body[data-page="chain"] .chain-head > .back .back-words {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  body[data-page="chain"] .chain-head > .ch-one { grid-column: 2; grid-row: 1; }
  body[data-page="chain"] .chain-head > .face { grid-column: 3; grid-row: 1; }
  body[data-page="chain"] .ch-one h1 { font-size: 1.375rem; }
  body[data-page="chain"] .xc { font-size: .75rem; }
  body[data-page="chain"] .bucket-h h2 { font-size: 1.125rem; }
  body[data-page="chain"] .course-h { margin-top: 0; }
}
@media (max-width: 400px) {
  body[data-page="chain"] .empty-words .np { font-size: .8125rem; line-height: 1.4; }
  body[data-page="chain"] .bucket { gap: var(--s2); }
}
/* E7 (round 3 phone pass): the card's preamble is one paragraph: the severity line leads the
   polite summary on the same line ("… says yes — Bonefish Grill's spreadsheet does not mark …"),
   so label, severity and summary take about three lines of a phone instead of seven. */
.finding { padding-top: 12px; gap: 8px; }
.finding .lead { font-size: .875rem; line-height: 1.4; }
.finding .lead > p { display: inline; }
.finding .lead > .sev { font-size: inherit; }
.finding .lead > .sev::after { content: " — "; font-weight: 400; color: var(--ink-2); }
.finding .lead > .summary { font-weight: 400; font-size: inherit; line-height: inherit; }

/* ---------------------------------------------------------------- round 8: official theme, a little (DESIGN §15) */
/* Eyebrows: the home kicker's italic display line, above the h1 of the other pages. */
.eyebrow { letter-spacing: .01em; margin-bottom: calc(-1 * var(--s3)); }
/* Ledger rules: a thin double rule over a section, like a ruled ledger. Decorative (line colour, no text). */
.ledger, body[data-page="how"] .prose, body[data-page="contradictions"] .company {
  border-top: 3px double var(--line-strong); padding-top: var(--s4);
}
/* Footer lockup: one of two shown, by theme (Auto follows the OS; the footer control wins). */
.foot-logo { margin: 0 0 var(--s2); }
.foot-logo img { width: 271px; height: 64px; }
.foot-logo .brand-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-logo .brand-light { display: none; }
  :root:not([data-theme="light"]) .foot-logo .brand-dark { display: block; }
}
:root[data-theme="dark"] .foot-logo .brand-light { display: none; }
:root[data-theme="dark"] .foot-logo .brand-dark { display: block; }
.name-note { font-style: italic; }
/* Finding cards name their rule in plain sentence-case words (RULE_WORDING), not shouted mono. */
.finding .rule { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
/* /how: the rules, one per item. */
.rules-x { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.rule-x { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rule-x h3 { font-size: 1.0625rem; }
.rule-x p { font-size: .9375rem; line-height: 1.5; }

/* ---------------------------------------------------------------- round 8: at the restaurant (DESIGN §15.3) */
.venue { display: flex; flex-direction: column; gap: var(--s2); }
.venue h2, .more-facts .facts-h { font-size: 1.0625rem; }
.more-facts .facts-h { border-top: 1px dashed var(--line-strong); padding-top: var(--s3); }
.vfacts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.vfact { background: var(--sunk); border-left: 3px solid var(--soil); border-radius: var(--r-chip); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; font-size: .875rem; line-height: 1.45; }
.vfact.vf-none { border-left: 3px dashed var(--stone); background: var(--stone-tint); }
.vf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vf-quote q { font: italic 400 .9375rem/1.45 var(--font-display); quotes: "“" "”"; }
.vbadge {
  display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; line-height: 1.3; font-weight: 600;
  padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-tag); color: var(--ink); background: var(--bg);
}
.vbadge .i { color: var(--stone); }
.vf-names { font-size: .8125rem; color: var(--ink-2); }
.vf-src a { display: inline; padding-block: 12px; overflow-wrap: anywhere; }
.vf-src a .i { display: inline-block; vertical-align: -3px; margin-left: 4px; }
.vf-read { white-space: nowrap; }

/* ---------------------------------------------------------------- search (2026-10-11)
   The chain finder (home top, header, 404, /find) and the chain page's "Find a dish". Fields are
   48px tall (44px for the dish search); the suggestion list is an ARIA listbox under the field. */
.finder { display: flex; flex-direction: column; gap: var(--s2); }
.finder-label { font: 600 1.25rem/1.25 var(--font-display); color: var(--ink); }
.finder-compact .finder-label { font: 600 1rem/1.3 var(--font-body); }
.finder-row { display: flex; gap: var(--s2); align-items: stretch; }
.finder-box { position: relative; flex: 1; min-width: 0; }
.finder-input, .dish-input {
  width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-chip);
  background: var(--surface); color: var(--ink); font: 400 1rem/1.2 var(--font-body);
  -webkit-appearance: none; appearance: none;
}
.finder-input::placeholder, .dish-input::placeholder { color: var(--ink-2); opacity: 1; }
.finder-input:focus-visible, .dish-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.finder-go { min-height: 48px; flex: none; }
.finder-hint { font-size: .8125rem; }
.finder-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip); box-shadow: 0 6px 18px rgba(42, 33, 25, .16);
  max-height: min(60vh, 420px); overflow-y: auto;
}
.finder-list[hidden] { display: none; }
.finder-opt {
  display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 48px; padding: 6px 10px;
  border-radius: var(--r-tag); cursor: pointer; color: var(--ink);
}
.finder-opt + .finder-opt { border-top: 1px solid var(--line); }
.finder-opt .fo-name { font-weight: 600; overflow-wrap: anywhere; }
.finder-opt .fo-meta { font-size: .8125rem; color: var(--ink-2); }
.finder-opt.is-active, .finder-opt:hover { background: var(--sunk); outline: 2px solid var(--focus); outline-offset: -2px; }
.finder-opt.fo-dish .fo-name { font-weight: 500; }

/* Header: an icon button that opens the field under the header row. */
.site-head { position: relative; }
.head-find { flex: none; }
.head-find > summary { list-style: none; }
.head-find > summary::-webkit-details-marker { display: none; }
.head-find-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border-radius: var(--r-chip); color: var(--ink); cursor: pointer; border: 1px solid transparent;
}
.head-find-btn:hover { border-color: var(--line-strong); }
.head-find[open] > .head-find-btn { border-color: var(--line-strong); background: var(--sunk); }
/* The panel lies over the page under the header row (nothing below moves). */
.head-find-panel { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line-strong); box-shadow: 0 8px 18px rgba(42, 33, 25, .12); }
.head-find-panel > .finder { max-width: 640px; margin-inline: auto; padding: 12px 16px 16px; }
.site-head nav { margin-left: auto; }
/* The search button needs ~44px of the header row: on phones the row tightens (words unchanged).
   Fixer (2026-10-11): with large text (320px at 200%) the row WRAPS instead of pushing the button
   off screen (WCAG 1.4.4 / 1.4.10); the nav links may wrap too. At ordinary sizes it is one line. */
.head-row { flex-wrap: wrap; row-gap: 0; }
.wordmark { flex: none; }
.site-head nav { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 429px) {
  .head-row { gap: 4px; }
  .site-head nav a { padding: 0 5px; }
}
@media (max-width: 413px) {
  .wordmark { font-size: .9375rem; gap: 5px; }
  /* The 4px the 44px search button needs comes from the nav links' padding (DESIGN §4.7). */
  .site-head nav a { padding: 0 2px; }
}
/* Below 350px the glyph alone leads the header; the words stay in the link for screen readers. */
@media (max-width: 349px) {
  .wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Home: the finder leads the page. */
body[data-page="home"] main > .finder { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); }

/* Chain page: "Find a dish", one row (label, field). */
.dish-find { margin: 0; }
.dish-row { display: flex; align-items: center; gap: var(--s2); }
.dish-row label { flex: none; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.dish-input { min-height: 44px; flex: 1; min-width: 0; }
.dish-go { flex: none; }
.dish-status { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: .875rem; color: var(--ink); padding: 0 4px 0 12px; background: var(--sunk); border-radius: var(--r-chip); }
.dish-status > span { flex: 1; min-width: 0; padding-block: 6px; overflow-wrap: anywhere; }
.dish-status .btn-text { flex: none; }
.dish-none .btn { margin-top: var(--s2); }
.none-match { font-style: italic; }

/* /find */
.find-page { display: flex; flex-direction: column; gap: var(--s4); }
.find-page h1 { font: 600 1.75rem/1.2 var(--font-display); }
.find-art { display: block; }
.find-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.find-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--e1); display: flex; flex-direction: column; gap: 4px; }
.find-item.aside { background: var(--bg); border: 1.5px dashed var(--line-strong); box-shadow: none; }
.fi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.fi-name { font: 600 1.25rem/1.25 var(--font-display); }
.fi-name a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.fi-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fi-dishes { font-size: .9375rem; overflow-wrap: anywhere; }
.fi-links { display: flex; gap: var(--s3); flex-wrap: wrap; }
.find-all { list-style: none; margin: 0; padding: 0; columns: 1; }
.find-all li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 48px; border-bottom: 1px solid var(--line); }
.find-all li > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; margin-right: auto; }
.fa-varies { font-size: .8125rem; color: var(--ink-2); flex: 1 0 100%; margin-top: -8px; padding-bottom: 6px; }
.find-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; color: var(--soil); }
.find-all-sec h2 { font: 600 1.25rem/1.25 var(--font-display); margin-bottom: var(--s2); }
.lost .finder { text-align: left; margin-block: var(--s4); }

/* Search (2026-10-11), E6 kept: on a small phone the "Find a dish" row and the "Avoiding …" row
   read as one band (one rule between them, no gap), and the chain page's gaps tighten from 12px to
   8px, so the first result row stays on the first screen at 360x740 (tools/measure-fold.mjs). No
   words, sizes of type or targets change. */
@media (max-width: 400px) {
  body[data-page="chain"] main.wrap, body[data-page="chain"] .results { gap: var(--s2); }
  body[data-page="chain"] .dish-find { margin-bottom: calc(-1 * var(--s2)); padding-bottom: 4px; }
  body[data-page="chain"] .avoid-row { min-height: 44px; }
  /* The two one-line toggles above (source, statements) sit as one stack. */
  body[data-page="chain"] .specimen + details.more-facts { margin-top: calc(-1 * var(--s2) - 1px); }
  body[data-page="chain"] .xc { padding-block: 6px; }
}

/* ---------------------------------------------------------------- "Where are you eating?" (2026-10-11)
   A filter field over a tick list of every chain (Brian: "easy to find one but select multiple").
   The list folds into one 48px row so the first result row stays on the first phone screen. */
.places .picked { display: flex; flex-direction: column; gap: 6px; }
.places .picked[hidden] { display: none; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 12px; max-width: 100%;
  background: var(--soil); color: var(--on-soil); border: 1px solid var(--soil); border-radius: 999px;
  font: 600 .9375rem/1.2 var(--font-body); cursor: pointer; overflow-wrap: anywhere; text-align: left;
}
.pill:hover { filter: brightness(1.08); }
.pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details.places-list { border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 0 12px; background: var(--surface); }
details.places-list > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600;
}
details.places-list > summary > span:first-child { flex: 1; }
details.places-list > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-chip); }
details.places-list[open] { padding-bottom: 12px; }
details.places-list fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.place-group { display: flex; flex-direction: column; gap: 6px; }
.place-group[hidden], .places .chip[hidden], .places-none[hidden], .places-showing[hidden] { display: none; }
.places-none { margin-top: var(--s2); font-size: .9375rem; }
.places-list .no-js-only { margin-top: var(--s3); }
.places-showing { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; }
@media (forced-colors: active) {
  .pill { border: 2px solid CanvasText; }
}
/* Two columns of restaurants on a phone (names wrap inside the chip); one at large text. */
.places .chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
.places .chip-word { overflow-wrap: break-word; hyphens: manual; padding-block: 6px; font-size: .9375rem; }
.places .chip { padding: 0 10px; gap: 8px; }
.places-best { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.places-best[hidden] { display: none; }
.places .chip.is-best { outline: 3px solid var(--focus); outline-offset: 1px; }
.places .chip.is-best:has(input:focus-visible) { outline-offset: 3px; }
.places .place-group { order: 0; }
details.places-list[open] fieldset { display: flex; flex-direction: column; }
#chains-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a.pill { text-decoration: none; }
/* Remember my preferences? (2026-10-11): off until turned on; shown only with JavaScript. */
.remember[hidden] { display: none; }
.remember { margin-top: var(--s2); }
.remember .hint { margin-top: 2px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.switch .track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-2); }
.switch input:checked + .track { background: var(--soil); border-color: var(--soil); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--on-soil); }
.switch:has(input:focus-visible) .track { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .switch input:checked + .track { background: Highlight; } .switch .track::after { background: CanvasText; } }
.st-review .tag, .tag.st-review { color: var(--slate); }

/* ---------------------------------------------------------------- the printable sheet, featured (Brian, 2026-10-11)
   "Make the custom printed menu a little more highlighted": a paper-like card with Russet holding the
   sheet (home, after the picker), a compact one on each chain page, and "Sheet" first in the header. */
.sheet-promo {
  position: relative; display: flex; align-items: center; gap: var(--s4);
  margin-block: var(--s4); padding: var(--s4); background: var(--surface);
  border: 2px solid var(--soil); border-radius: var(--r-card);
  box-shadow: 4px 4px 0 -1px var(--sunk), 4px 4px 0 0 var(--line-strong);
  margin-inline-end: 4px; flex-wrap: wrap;
}
.sheet-promo .sp-art { width: 88px; height: 88px; flex: none; }
.sheet-promo .sp-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-width: 0; flex: 1 1 11em; }
.sheet-promo h2 { margin: 0; font: 600 1.25rem/1.2 var(--font-display); color: var(--ink); }
.sheet-promo .kicker { margin: 0; }
.sheet-promo .sp-lede { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.sheet-promo .btn { margin-top: var(--s1); max-width: 100%; text-align: center; padding-block: 8px; }
.sheet-promo.sp-compact { margin-top: var(--s5); padding: var(--s3) var(--s4); }
.sheet-promo.sp-compact .sp-art { width: 64px; height: 64px; }
@media (max-width: 359px) {
  .sheet-promo { align-items: flex-start; gap: var(--s3); padding: var(--s3); }
  .sheet-promo .sp-art { width: 56px; height: 56px; }
}
.site-head nav a.nav-sheet { font-weight: 600; color: var(--soil); }
/* On a phone the header row has no room for a fourth item (it would push the search button to a second
   row); there the card after the picker and the chain-page card carry the sheet. */
@media (max-width: 519px) { .site-head nav a.nav-sheet { display: none; } }
.site-head nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.foot-nav .fn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media print { .sheet-promo, .nav-sheet { display: none; } }