/* bead jm2: the web fonts arrive after the first paint (display=swap), and the fallbacks were wider (Georgia) or
   narrower (Arial) than Fraunces and Inter, so the headline and the text below re-wrapped (start page CLS 0.026 at
   1366, 0.14 at 390). These faces are the local fallbacks scaled to the web fonts' widths, measured in Chrome on
   the page's strings: Fraunces 650 = 0.939 x Georgia Bold at 28 px and 0.917 at 48 px (its optical size makes small
   text wider), so the large headline has its own face; Inter 400 = 1.065 x Arial; Inter 600 = 1.006 x Arial Bold.
   The line heights are set in numbers, so only the widths matter. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 500 900; size-adjust: 94%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 100 499; size-adjust: 94%; }
@font-face { font-family: "Fraunces Fallback Large"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 500 900; size-adjust: 91.7%; }
@font-face { font-family: "Fraunces Fallback Mid"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 500 900; size-adjust: 93%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 106.5%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 100.6%; }
/* Thai: Noto Sans Thai 400 = 0.949 x Thonburi (a Mac's and an iPhone's Thai), 600 = 0.984 x Thonburi Bold; the Thai
   popular chips re-wrapped when it came (Lighthouse, TH start page, CLS 0.037) */
@font-face { font-family: "Noto Sans Thai Fallback"; src: local("Thonburi"); font-weight: 100 549; size-adjust: 94.9%; }
@font-face { font-family: "Noto Sans Thai Fallback"; src: local("Thonburi Bold"), local("Thonburi-Bold"); font-weight: 550 900; size-adjust: 98.4%; }
:root {
  --paper: #f7f3ea;
  --card: #fffdf8;
  --ink: #1d2a24;
  --muted: #5d6a62;
  --line: #e4dccb;
  --green: #1f4d3a;
  --green-2: #2f6b52;
  --saffron: #e9a726;
  --saffron-soft: #fbefd2;
  --exact: #1f6b4a;
  --strong: #2a7d8a;
  --related: #b07a17;
  --not: #9b3b2f;
  --up: #1f7a4d;
  --down: #a8432f;
  --warn: #9a6a00;
  --shadow: 0 1px 0 rgba(29, 42, 36, 0.04), 0 6px 18px rgba(29, 42, 36, 0.06);
  --radius: 14px;
  --font: "Inter", "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif;
  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121815; --card: #1a221e; --ink: #e9efe9; --muted: #9fb0a6; --line: #2c3832;
    --green: #8fd1ad; --green-2: #6fbf94; --saffron: #f2b63d; --saffron-soft: #3a3020;
    --exact: #6fd1a0; --strong: #6cc5d2; --related: #e6b45a; --not: #ef8c7c; --up: #6fd1a0; --down: #ef8c7c; --warn: #f2c35d;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--font); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; margin: 0; }
button { font: inherit; color: inherit; }
input, select { font: inherit; color: var(--ink); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }

/* header */
.top { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent); position: sticky; top: 0; z-index: 6; backdrop-filter: blur(8px); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 18px; font-weight: 650; color: var(--green); white-space: nowrap; text-decoration: none; min-height: 44px; }
.brand em { color: var(--saffron); font-style: normal; }
.mark { width: 26px; height: 26px; border-radius: 8px; background: var(--green); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; inset: 6px 8px 8px 6px; border: 3px solid var(--saffron); border-radius: 50%; }
.top-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status { font-size: 12.5px; color: var(--muted); text-align: right; }
.status b { color: var(--green-2); font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-right: 6px; vertical-align: 1px; }
.lang { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 8px; font-size: 13px; max-width: 110px; }
.basket-btn { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.basket-btn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--saffron); color: #1d2a24; margin-left: 4px; font-size: 12px; }

/* hero */
.hero { padding: 32px 0 10px; }
/* max-width in em, not ch: ch is the width of the font's "0", which the fallback's differs from (jm2). Fraunces' 17ch
   is 11.5em at 48 px, 11.59em at 34 px and 11.61em at 28 px (its optical size): 11.6em keeps its wraps (Cursor's
   review of jm2: 11.5em wrapped the headline once more at 768 px) */
.hero h1 { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.06; max-width: 11.6em; color: var(--green); }
/* the headline's face by its size (4.4vw from 636 px): where its wrap flips, the fallback must match to within a
   pixel, so a sweep of 360-1440 px set these steps */
@media (min-width: 745px) { .hero h1 { font-family: "Fraunces", "Fraunces Fallback Mid", Georgia, serif; } }
@media (min-width: 760px) { .hero h1 { font-family: "Fraunces", "Fraunces Fallback Large", Georgia, serif; } }
.lede { color: var(--muted); max-width: 66ch; margin: 10px 0 18px; }
.search { display: flex; gap: 8px; max-width: 760px; }
.search input { flex: 1; min-width: 0; font-size: 17px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.search input:focus { outline: none; border-color: var(--saffron); }
.search button { font-weight: 600; font-size: 16px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--green); color: var(--paper); cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font-weight: 500; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.chip:hover { border-color: var(--saffron); }
.chips.small .chip { font-size: 12.5px; padding: 4px 10px; }
.chip[aria-pressed="true"] { background: var(--saffron-soft); border-color: var(--saffron); color: var(--warn); font-weight: 600; }
.stories { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.stories-h { align-self: center; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); flex: none; }
.story { flex: none; width: 214px; text-align: left; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--saffron); border-radius: 12px; padding: 8px 12px; cursor: pointer; scroll-snap-align: start; }
.story b { display: block; font-size: 13.5px; line-height: 1.3; }
.story span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.story:hover { border-color: var(--saffron); }

/* sections */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 22px 0 12px; }
.section-head h2 { font-size: 22px; }
.muted-h { font: 500 13px var(--font); color: var(--muted); margin-left: 6px; }
.section-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.muted { color: var(--muted); font-size: 13px; }

/* context */
.persona-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.persona { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; }
.persona[aria-checked="true"] { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 18%, transparent); }
.avatar { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--green-2); }
.persona .nm { font-weight: 600; }
.persona .tg { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.ctx-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.ctx-card h3 { font-size: 15.5px; color: var(--green); display: flex; align-items: center; gap: 8px; }
.auto { font: 600 11px var(--font); color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.auto.off { color: var(--warn); background: var(--saffron-soft); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctx-card label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 500; }
.ctx-card input, .ctx-card select { width: 100%; font-size: 14px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); }
.lbl { font-size: 12px; color: var(--muted); font-weight: 500; display: block; }
.safety-pick { display: grid; gap: 4px; }
.safety-pick .chips { margin-top: 0; margin-bottom: 4px; }
.list-field ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.list-field li { font-size: 12.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.list-field li span { overflow-wrap: anywhere; }
.list-field li button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 13px; line-height: 1; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button, .ghost { font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.quick button[aria-pressed="true"] { border-color: var(--green-2); color: var(--green-2); }
.ctx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--green-2); }
.sent summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--green-2); }
.sent pre { max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* pipeline */
.pipe-sec { margin-top: 22px; }
.pipeline { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); position: relative; }
.stage { position: relative; padding: 8px 6px 6px; text-align: center; min-width: 0; }
.stage::after { content: ""; position: absolute; top: 25px; right: -8px; width: 16px; height: 2px; background: var(--line); }
.stage:last-child::after { display: none; }
.node { width: 36px; height: 36px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--line); background: var(--paper); color: var(--muted); transition: all 0.35s ease; }
.stage .t { font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.stage .d { font-size: 11px; color: var(--muted); line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }
.stage .m { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.stage.active .node { border-color: var(--saffron); color: var(--warn); animation: pulse 1s ease-in-out infinite; }
.stage.done .node { background: var(--green); border-color: var(--green); color: var(--paper); }
.stage.done::after { background: linear-gradient(90deg, var(--green), var(--saffron)); }
.stage.flow::after { background: linear-gradient(90deg, var(--line) 0 30%, var(--saffron) 30% 60%, var(--line) 60%); background-size: 200% 100%; animation: flow 0.8s linear infinite; }
.stage.ctx .node { background: var(--saffron-soft); border-color: var(--saffron); color: var(--warn); }
@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--saffron) 25%, transparent); } }
@keyframes flow { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .stage.active .node, .stage.flow::after { animation: none; } .node { transition: none; } }

/* results */
.results { margin-top: 18px; scroll-margin-top: 70px; }
.reading { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.read-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.read-card h3 { font-size: 15px; margin-bottom: 6px; }
.shelf-row { display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.shelf-row .bar { height: 8px; }
.shelf-row .nm { overflow-wrap: anywhere; }
.shelf-row .new { color: var(--warn); font-weight: 600; }
.pillset { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.pill.hot { background: var(--saffron-soft); border-color: transparent; color: var(--warn); font-weight: 600; }
.group-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--green); color: var(--paper); }
.calls { font-size: 12px; color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 16px; }
.col { min-width: 0; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 2px 8px; }
.col-head h3 { font-size: 17px; }
.col-head small { color: var(--muted); font-size: 12px; text-align: right; }
.group-title { font: 600 12px var(--font); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 14px 2px 6px; display: flex; justify-content: space-between; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.cols.two .grid { grid-template-columns: 1fr; }
.item { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; box-shadow: var(--shadow); cursor: pointer; position: relative; animation: rise 0.35s ease both; }
.item:hover { border-color: var(--saffron); }
.item.sponsored { border-color: var(--saffron); background: linear-gradient(0deg, var(--saffron-soft), var(--card) 70%); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .item { animation: none; } }
.rank { position: absolute; top: 6px; left: 8px; font: 700 11px var(--font); color: var(--muted); background: var(--card); border-radius: 6px; padding: 0 4px; }
.thumb { width: 60px; height: 60px; border-radius: 10px; background: #fff center/contain no-repeat; border: 1px solid var(--line); }
.thumb.none { background: var(--paper); display: grid; place-items: center; font-size: 10.5px; color: var(--muted); }
.info { min-width: 0; }
.nm2 { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.th { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.meta { font-size: 12px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag { font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; border: 1px solid currentColor; }
.t-EXACT { color: var(--exact); } .t-STRONG { color: var(--strong); } .t-RELATED { color: var(--related); } .t-NOT { color: var(--not); }
.tag.oos, .tag.role { color: var(--muted); } .tag.promo { color: var(--warn); } .tag.spons { color: #1d2a24; background: var(--saffron); border-color: var(--saffron); }
.tag.added { color: var(--strong); border-style: dashed; }
.why { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.why li::before { display: inline-block; width: 15px; font-weight: 700; }
.why .up { color: var(--up); } .why .up::before { content: "↑"; }
.why .down { color: var(--down); } .why .down::before { content: "↓"; }
.why .keep { color: var(--green-2); } .why .keep::before { content: "★"; }
.why .warn, .why .spons { color: var(--warn); } .why .warn::before { content: "!"; } .why .spons::before { content: "$"; }
.add { margin-left: auto; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 1px 9px; cursor: pointer; font-weight: 700; font-size: 11.5px; color: var(--green-2); }
.add:hover { border-color: var(--green-2); }
.more { margin: 8px 0 4px; }
.note { margin: 10px 2px; font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--saffron); padding-left: 8px; }

/* recipe */
.recipe { background: var(--card); border: 1.5px solid var(--saffron); border-radius: 18px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; animation: rise 0.4s ease both; }
.recipe h3 { font-size: 22px; color: var(--green); }
.recipe .sub { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.ing { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ing li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: var(--paper); }
.ing .thumb { width: 44px; height: 44px; }
.ing .what { font-size: 12px; color: var(--muted); }
.ing .pick { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.ing .miss { color: var(--muted); font-style: italic; font-size: 13px; }
.steps { margin: 0; padding-left: 20px; font-size: 13.5px; display: grid; gap: 4px; }
.recipe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.primary { border: 0; background: var(--green); color: var(--paper); border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; }

/* hidden, drawer, toast, empty */
.hidden-box { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.hidden-box summary { cursor: pointer; font-weight: 600; }
.hidden-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; font-size: 13px; }
.hidden-list span { color: var(--down); display: block; font-size: 12.5px; }
.empty { margin: 22px 0; padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: var(--card); border-left: 1px solid var(--line); z-index: 10; padding: 16px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer-head button { border: 0; background: none; font-size: 18px; cursor: pointer; }
#basket-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
#basket-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
#basket-list .thumb { width: 40px; height: 40px; }
#basket-list button { border: 0; background: none; cursor: pointer; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--green); color: var(--paper); padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px; z-index: 12; box-shadow: var(--shadow); }

/* eval */
.evalsec { margin-top: 36px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.chart h3 { font-size: 16px; margin-bottom: 2px; }
.chart p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.bar-pair { display: grid; gap: 3px; }
.bar { position: relative; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.bar i.today { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.bar i.jev { background: var(--saffron); }
.bar i.ch { background: var(--green-2); }
.bar i.yn { background: var(--saffron); }
.bar span { position: absolute; right: 6px; top: 0; font: 600 11.5px/18px var(--font); color: var(--ink); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin: 6px 0; }
.stack div { display: grid; place-items: center; font: 600 11px var(--font); color: #fff; }

.rules { margin: 36px 0 12px; }
.rules h2 { font-size: 22px; margin-bottom: 12px; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.rule h3 { font-size: 15.5px; color: var(--green); margin-bottom: 4px; }
.rule p { margin: 0; font-size: 13.5px; color: var(--muted); }
.foot { color: var(--muted); font-size: 12.5px; padding: 18px 16px 36px; }

@media (max-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .stage:nth-child(4)::after { display: none; }
  .recipe { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr !important; }
  .status { display: none; }
}
@media (max-width: 480px) {
  /* 390 px phones: the brand, language menu and basket wrap instead of pushing the page sideways */
  .top-row { flex-wrap: wrap; row-gap: 6px; padding-block: 6px; }
  .brand { white-space: normal; min-width: 0; }
  .search { flex-direction: column; }
  .search button { padding: 12px; }
  .persona-row { grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  .stage .d { display: none; }
}

/* Simple / Advanced (nic, 2026-09-26: "so villa can test without getting very obstructed").
   Simple is a view over the same search: one box, the results as a shop shows them, TH | EN. */
body.mode-simple .adv, body.mode-advanced .simple-only, html[data-mode="simple"] .adv, html[data-mode="advanced"] .simple-only { display: none !important; }
.mode-switch, .lang2 { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--card); }
.mode-switch button, .lang2 button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; min-height: 44px; min-width: 44px; } /* 44 px tap targets (Grok's review of 3f60463) */
.mode-switch button[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.lang2 button[aria-pressed="true"] { background: var(--saffron-soft); color: var(--ink); }
.simple-hint { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.simple-hint a { color: var(--green-2); font-weight: 600; display: inline-block; padding: 12px 0; margin: -12px 0; white-space: nowrap; } /* a 44 px tap target on the same line */
#simple { padding: 8px 0 40px; }
.engine-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.engine-switch button { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 32px; }
.engine-switch button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.grid > .group-title.also { grid-column: 1 / -1; list-style: none; }
@media (max-width: 480px) {
  .mode-switch button, .lang2 button { padding: 6px 10px; }
}

/* ---- the smart Simple view (demo/public/simple.js) ---- */
#smart { display: grid; gap: 14px; min-width: 0; }
#smart button { font: inherit; }
.understood { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; max-width: 100%; }
.understood h2 { font-size: 21px; color: var(--green); margin: 0; }
.understood .facts { color: var(--muted); font-size: 14px; }
.understood .alts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* "Did you want:": one row of tappable searches; a phone scrolls it sideways, like the filter chips */
.dyw { flex-basis: 100%; min-width: 0; width: 100%; display: flex; align-items: center; gap: 8px; overflow-x: auto; max-width: 100%; padding: 6px 0 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.dyw-h { flex: none; color: var(--muted); font-size: 14px; }
.dyw-chip { flex: none; white-space: nowrap; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px dashed var(--green); background: var(--card); color: var(--green); cursor: pointer; font-size: 14px; }
.dyw-chip:hover { background: var(--paper); }
.dyw-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Advanced: the row leads the reading, across its columns */
.reading > .dyw { grid-column: 1 / -1; order: -1; }
.linky { border: 0; background: none; color: var(--green-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 600; font-size: 15px; text-align: left; }
#smart .note { border-left: 0; padding-left: 0; margin: 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
#smart .note.warn { background: var(--saffron-soft); color: var(--ink); padding: 8px 12px; border-radius: 10px; }
#smart .note.done { animation: fade-note 4s ease-in forwards; }
#smart .note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes fade-note { 0%, 70% { opacity: 1; max-height: 3em; } 99% { opacity: 0; max-height: 3em; } 100% { opacity: 0; max-height: 0; margin-top: -14px; overflow: hidden; } }
.fchips { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 2px 0 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fchips button { flex: none; white-space: nowrap; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px; }
.fchips button .n { color: var(--muted); font-size: 13px; margin-left: 2px; }
.fchips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.fchips button[aria-pressed="true"] .n { color: inherit; }

.hero-card { display: grid; grid-template-columns: 132px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.hero-card .pic { aspect-ratio: 1; border-radius: 12px; background: #fff center/contain no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.hero-card .body { display: grid; gap: 3px; align-content: start; min-width: 0; }
.hero-card .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-2); }
.hero-card .nm { font-size: 18px; font-weight: 650; line-height: 1.25; }
.hero-card .nm2 { color: var(--muted); font-size: 13.5px; font-weight: 400; }
.hero-card .meta { color: var(--muted); font-size: 13.5px; }
.hero-card .pr { font-size: 15px; }
.hero-card .pr b { font-size: 20px; color: var(--green); }
.hero-card .pr s, .sc .pr s { color: var(--muted); font-size: 13px; }
.hero-card .up, .sc .up { color: var(--muted); font-size: 12.5px; }
.hero-card .bs, .sc .bs { display: flex; flex-wrap: wrap; gap: 6px; }

.b { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1.3; }
.b.promo { background: var(--saffron); color: #1d2a24; }
.b.local { background: #2f6b52; color: #fff; }
.b.instock { background: color-mix(in srgb, #2f6b52 16%, var(--card)); color: var(--green); }
.b.oos { background: color-mix(in srgb, var(--muted) 18%, var(--card)); color: var(--ink); }

.sec { display: grid; gap: 8px; min-width: 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sec-h h3 { font-size: 16.5px; margin: 0; color: var(--ink); min-width: 0; }
.sec-h .linky { flex: none; white-space: nowrap; }
.sec-h h3 .n { color: var(--muted); font-weight: 500; font-size: 14px; }
.row-cards { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; max-width: 100%; }
.row-cards > li { scroll-snap-align: start; }
.grid-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.sc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.sc .pic { position: relative; aspect-ratio: 1; background: #fff center/contain no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.sc .pic .bs { position: absolute; top: 6px; left: 6px; right: 6px; }
.sc .body { padding: 8px 10px 10px; display: grid; gap: 2px; align-content: start; }
.sc .nm { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc .meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc .pr b { font-size: 15.5px; color: var(--green); }
.sc .oos { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sc.is-oos .pic { filter: grayscale(1); opacity: 0.55; } /* the image greys; the text keeps its contrast */

.empty, .weak { display: grid; gap: 8px; }
.empty p { margin: 0; font-size: 16px; }
.empty .sugs { justify-content: center; }
.sug-h { margin: 0; color: var(--muted); font-size: 14px; }
.sugs { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Load more": the rest of what the search found, a page at a time */
.load-more { display: flex; justify-content: center; margin: 18px 0 8px; }
.more-btn { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--green); background: var(--card); color: var(--green); font-size: 15px; cursor: pointer; }
.more-btn:hover { background: var(--paper); }
.more-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sug { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--green-2); background: var(--card); color: var(--green); cursor: pointer; font-weight: 600; }

/* skeletons at once (every large grocery app): the page is never blank while it searches */
.sk i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, var(--card)), var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; margin: 6px 0; }
.sk i.short { width: 55%; } .sk i.wide { width: 60%; height: 20px; }
.understood.sk { display: block; } .understood.sk i:not(.wide) { width: 35%; }
.sk .pic { background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, var(--card)), var(--line)) !important; background-size: 200% 100% !important; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk i, .sk .pic, #smart .note .dot, #smart .note.done { animation: none; } }

@media (min-width: 900px) {
  .hero-card { grid-template-columns: 220px 1fr; padding: 16px; max-width: 760px; }
  .sec-h .linky.few { display: none; } /* a desktop row already shows all six */
  .hero-card .nm { font-size: 22px; }
  .row-cards { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-columns: unset; overflow: visible; }
  .row-cards > li:nth-child(n + 7) { display: none; } /* one or two rows on desktop; "See all" shows the rest */
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* the decision tree's path in Advanced: one node a line, joined like a tree */
.read-card .tree { margin-top: 12px; }
.read-card .tree h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.read-card .tree ol { list-style: none; margin: 0; padding: 0 0 0 4px; }
.read-card .tree li { position: relative; padding: 3px 0 3px 18px; font-size: 13.5px; border-left: 2px solid var(--line); }
.read-card .tree li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; border-top: 2px solid var(--line); }
.read-card .tree li:last-child { border-left-color: transparent; }
.read-card .tree li:last-child::after { content: ""; position: absolute; left: -2px; top: 0; height: 12px; border-left: 2px solid var(--line); }
.read-card .tree .m { color: var(--muted); font-size: 12.5px; white-space: nowrap; }


/* ---- compare with today's search (simple.js): two columns on a desktop, two tabs on a phone ---- */
#smart .cmp-switch { justify-self: start; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--green-2); background: var(--card); color: var(--green); font-weight: 600; cursor: pointer; }
#smart .cmp-switch[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
#smart .cmp-switch[aria-pressed="true"]::before { content: "✓ "; }
.cmp-sum { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14.5px; line-height: 1.45; }
.cmp-tabs { display: inline-flex; justify-self: start; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--card); }
.cmp-tabs button { min-height: 44px; min-width: 96px; border: 0; background: transparent; border-radius: 999px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cmp-tabs button[aria-selected="true"] { background: var(--green); color: var(--paper); }
.cmp { display: grid; gap: 18px; min-width: 0; }
.cmp-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cmp[data-tab="today"] .cmp-col[data-col="new"], .cmp[data-tab="new"] .cmp-col[data-col="today"] { display: none; }
.cmp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.cmp-h h3 { margin: 0; font-size: 17px; }
.cmp-h .n { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.cmp-note { margin: 0; font-size: 13.5px; color: var(--ink); background: var(--saffron-soft); padding: 6px 10px; border-radius: 8px; }
.sc .rk { position: absolute; top: 6px; left: 6px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.b.nottoday { background: #1f5a8a; color: #fff; }
@media (min-width: 900px) {
  .cmp-tabs { display: none; }
  .cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  .cmp .cmp-col { display: grid !important; }
  .cmp .today-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- design1 (2026-09-27; Mobbin references in the plan: foodpanda, Woolworths, Instacart, Uber Eats, Gopuff,
   Yami, Swiggy, Vivino, Careem, TheFork) ---- */
/* the headline folds once a search is made, and the box stays at the top (foodpanda) */
html[data-mode="simple"][data-searched] .hero h1, html[data-mode="simple"][data-searched] .simple-hint { display: none; }
html[data-mode="simple"] .search { position: relative; }
/* (the whole search section sticks, not the form: the form had no room inside its 84 px section, Cursor's review) */
html[data-mode="simple"][data-searched] .hero { position: sticky; top: var(--top-h, 57px); z-index: 5; background: var(--paper); margin: 0 -16px; padding: 8px 16px; box-shadow: 0 6px 12px -10px rgba(29, 42, 36, 0.35); }
/* Thai needs the line height; English a little less */
:lang(th), [lang="th"] { line-height: 1.6; }
/* the understood line: the compare link and the spelling line are small and do not push the page */
.understood .cmp-link { font-size: 14px; padding: 12px 0; font-weight: 500; }
.understood .cmp-link[aria-pressed="true"]::before { content: "✓ "; }
.understood .spell { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.understood .spell b { color: var(--ink); }
.understood .spell .linky { font-size: 14px; font-weight: 500; }
.flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.fchips .pref { border-style: dashed; color: var(--green); }
/* cards: price first, then the name, then flag, brand and size (foodpanda); a soft lift */
.sc { box-shadow: 0 1px 2px rgba(29, 42, 36, 0.05); border-radius: 12px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sc .body { gap: 3px; }
.sc .pr { order: -1; }
.sc .pr b { color: var(--ink); font-size: 16px; font-weight: 650; }
.hero-card .pr b { color: var(--ink); }
.sc .pr .up { color: var(--muted); font-size: 12px; font-weight: 400; }
/* "Used in" under the best match */
.hero-card .uses { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.uses-h { font-size: 13px; color: var(--muted); margin-right: 2px; }
.uses .use { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--green); cursor: pointer; font-size: 13.5px; }
/* tap feedback, where there is a pointer to press */
.sc:active, .hero-card:active, .fchips button:active, .dyw-chip:active, .st-chip:active, .st-tile:active, .use:active, .ac-opt:active { transform: scale(0.97); }
@media (hover: hover) { .sc:hover { box-shadow: var(--shadow); } }
/* results land in a gentle stagger: the first card has no delay (the first result is never later), then 30 ms
   each up to the eighth */
@keyframes lift { from { opacity: 0; transform: translateY(8px); } }
/* (not the best match, and not the first card: the first result is never later, and it is the page's LCP) */
.grid-cards > li:nth-child(n + 2), .row-cards > li:nth-child(n + 2) { animation: lift 0.24s ease-out backwards; }
.grid-cards > li:nth-child(2), .row-cards > li:nth-child(2) { animation-delay: 30ms; }
.grid-cards > li:nth-child(3), .row-cards > li:nth-child(3) { animation-delay: 60ms; }
.grid-cards > li:nth-child(4), .row-cards > li:nth-child(4) { animation-delay: 90ms; }
.grid-cards > li:nth-child(5), .row-cards > li:nth-child(5) { animation-delay: 120ms; }
.grid-cards > li:nth-child(6), .row-cards > li:nth-child(6) { animation-delay: 150ms; }
.grid-cards > li:nth-child(7), .row-cards > li:nth-child(7) { animation-delay: 180ms; }
.grid-cards > li:nth-child(n + 8), .row-cards > li:nth-child(n + 8) { animation-delay: 210ms; }
/* chips slide in from the side, once */
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } }
.fchips, .dyw, .st-chips { animation: slide-in 0.22s ease-out backwards; }
/* the skeleton has the page's own geometry, so nothing jumps when the results land */
.sk.grid-cards > li, .sk-grid > li { animation: none; }
/* ---- auto-complete (simple.js attachSuggest) ---- */
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 6px 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(29, 42, 36, 0.14); max-height: min(70vh, 520px); overflow-y: auto; animation: ac-in 0.12s ease-out; }

@keyframes ac-in { from { opacity: 0; transform: translateY(-4px); } }
.ac-h { padding: 8px 14px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ac-opt { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px; cursor: pointer; }
.ac-opt[aria-selected="true"], .ac-opt:hover { background: var(--paper); }
.ac-opt .ac-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.ac-opt .ac-t b { font-weight: 650; }
.ac-opt .ac-n { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ac-opt .ac-i { text-align: center; }
.ac-pic { width: 28px; height: 28px; border-radius: 6px; background: #fff center/contain no-repeat; border: 1px solid var(--line); }
.ac-sk { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 14px; min-height: 44px; }
.ac-sk i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, var(--card)), var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; align-self: center; }
.ac-sk i:first-child { height: 28px; }
/* ---- the start page: recent, popular, use cases (Instacart, Uber Eats) ---- */
.start { display: grid; gap: 18px; }
.st { display: grid; gap: 8px; min-width: 0; }
.st-h { display: flex; align-items: center; justify-content: space-between; }
.st-h h2, .st-h h3 { font-size: 16.5px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 14.5px; }
.st-tiles { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.st-tiles > li { scroll-snap-align: start; animation: lift 0.24s ease-out backwards; }
.st-tile { width: 100%; height: 100%; min-height: 108px; display: grid; align-content: space-between; justify-items: start; gap: 6px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; box-shadow: 0 1px 2px rgba(29, 42, 36, 0.05); }
.st-ic { font-size: 22px; }
.st-nm { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.st-n { color: var(--muted); font-size: 12.5px; }
/* ---- the origin preference: a bottom sheet on a phone, a dialog on a desktop ---- */
dialog.sheet { border: 0; padding: 0; background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0; width: 100%; max-width: 520px; margin: auto auto 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); }
dialog.sheet::backdrop { background: rgba(29, 42, 36, 0.35); }
dialog.sheet[open] { animation: sheet-up 0.22s ease-out; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet-in { display: grid; gap: 10px; padding: 18px 16px 20px; }
.sheet-in h2 { font-size: 19px; color: var(--green); }
.sheet-in .muted { margin: 0; color: var(--muted); font-size: 14px; }
.pref-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pref-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pref-opt:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--card)); }
.sheet-done { min-height: 48px; border: 0; border-radius: 999px; background: var(--green); color: var(--paper); font-weight: 600; cursor: pointer; }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 18px; } }
@media (min-width: 900px) {
  .grid-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .st-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; }
}
/* motion is a help, never a need */
@media (prefers-reduced-motion: reduce) {
  .grid-cards > li, .row-cards > li, .hero-card, .fchips, .dyw, .st-chips, .st-tiles > li, .ac, dialog.sheet[open], .ac-sk i { animation: none !important; }
  .sc, .sc:active, .hero-card:active, .fchips button:active, .dyw-chip:active, .st-chip:active, .st-tile:active, .use:active, .ac-opt:active { transition: none; transform: none; }
}
.fchips.sk { animation: none; }
.fchips.sk i.chip { flex: none; width: 96px; height: 44px; border-radius: 999px; margin: 0; }
/* one row: the box and a compact button (Instacart, foodpanda), on a phone too */
html[data-mode="simple"] .search { flex-direction: row; }
html[data-mode="simple"] .search button[type="submit"] { padding: 0 16px; min-height: 52px; }
html[data-mode="simple"][data-searched] .search input { padding: 11px 14px; }
html[data-mode="simple"][data-searched] .search button[type="submit"] { min-height: 46px; }
/* the pictures are images, not CSS backgrounds: the browser finds them with the HTML, and the best match's comes
   first (fetchpriority), the others as they scroll in (design1's speed check: the LCP is now a product picture) */
.sc .pic img, .hero-card .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* INS-7: a tinted box of the picture's shape until it loads, then the picture fades in (simple.js fadeInPictures);
   the best match's picture shows at once (the LCP) */
.sc .pic, .hero-card .pic { background-color: color-mix(in srgb, var(--line) 45%, var(--card)); }
.sc .pic:has(img.in), .hero-card .pic:has(img.in) { background-color: #fff; }
.fadepics .sc .pic img { opacity: 0; transition: opacity 0.25s ease-out; }
.fadepics .sc .pic img.in { opacity: 1; }
.fadepics .sc .pic img.bad { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .fadepics .sc .pic img { transition: none; } }
/* a search keeps the results area at least a screen high, so the footer does not jump when the results
   replace the skeleton (the last layout shift Lighthouse found) */
html[data-mode="simple"][data-searched] #smart { min-height: 100vh; align-content: start; }
/* the start page too (jm2): its tiles come from an index fetched after the first paint, and pushed a footer that
   showed at the bottom of a desktop screen out of view (CLS 0.0165 at 1024x900) */
html[data-mode="simple"]:not([data-searched]) #smart { min-height: 100vh; align-content: start; } /* (start: the grid's rows
   would otherwise stretch to fill the screen: Cursor's review of jm2 found the Thai chips 53 px tall, not 44) */
@media (min-width: 900px) { .st-tiles > li:nth-child(n + 8) { display: none; } } /* one row of seven on a desktop */
/* the best match's picture is the largest on the first screen, so it is the LCP and the one asked for first */
@media (max-width: 899px) { .hero-card { grid-template-columns: 164px 1fr; } }
.st-img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; }
/* Cursor's review: "N in stock" was 3.7:1; the list's fixed-spelling line; the stuck box */
.st-n, .ac-n { color: var(--muted); opacity: 1; }
.ac-fixed { padding: 8px 14px 2px; font-size: 13px; color: var(--muted); }

/* INS-7: "Refined results ready · Show" in the sticky search bar (app.js holdRefined). The bar grows by the pill and
   gives the room back with a negative margin, so nothing below it moves; at the top of the page the pill covers the
   results' first 44 px (#simple's 8 px and the 36 px phase slot), elsewhere it is part of the bar cards scroll under */
.refined-pill { display: none; }
html[data-mode="simple"][data-searched][data-pending] .hero { padding-bottom: 52px; margin-bottom: -44px; }
html[data-mode="simple"][data-searched][data-pending] .refined-pill:not([hidden]) { display: block; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: calc(100% - 32px); height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--green); color: var(--paper); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); cursor: pointer; }
#smart .phase-slot { min-height: 36px; display: flex; align-items: center; }
/* the quick page keeps the count's place (a shimmer about as wide as "18 in stock · 4 groups"), so the line wraps as
   the full page's will and the best match's skeleton stays where the best match lands (INS-7) */
.understood .facts-sk { display: inline-block; width: 10em; height: 0.9em; vertical-align: middle; border-radius: 4px; background: var(--line); }

/* bead jm2: the page is written in English, and app.js puts in another language after the first paint (the Thai
   headline is two lines, not three; Thai lines are taller): the head script marks such a page, and it shows once
   app.js has applied the language (or after 3 s) */
html[data-lang-pending] body { visibility: hidden; }