/* FOODSlot's fonts, served from this site (Decision 044: no outside font host). Archivo, Archivo Black and DM Mono,
   SIL Open Font License 1.1, from Google Fonts (read 2026-10-06), latin and latin-ext only.
   Archivo is one variable file per subset for the weights 400 to 700. Docs/Tools/Fonts.md says how to fetch them again. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-v25-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-v25-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-v23-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-v23-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-v16-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-v16-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-v16-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-v16-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* The colours (Decision 059). Light is the default whatever the device says; dark only when picked with Switch theme.
   Each colour has one job (Research 006, rule 9): sear is act now, green is paid or ready, amber is the waiting list and
   waiting, red is errors (and the × that closes a box, the founder's pick). Two tones where text and fills differ:
   --sear fills a button (white on it 5.18:1) and --sear-text is sear as words; --gold fills, --gold-text and --gold-edge
   are its words and rings; --bad fills, --bad-text is red words. --edge is the edge of a box you type into (3:1 or more).
   Measured contrast, WCAG 2.2 (body text needs 4.5:1, large text and edges 3:1), light / dark:
     ink on ground, surface, surface-2         16.04 17.74 16.74 / 15.76 14.32 13.23
     ink-2 on ground, surface, surface-2        8.50  9.41  8.88 /  8.88  8.07  7.45
     ink-3 on ground, surface, surface-2        5.93  6.55  6.19 /  6.28  5.70  5.27
     sear-text on ground, surface, sear-tint    5.61  6.20  5.27 /  7.37  6.70  6.03
     sear-ink on sear (a solid button)          5.18 / 7.54
     go on go-tint, wait on wait-tint           5.62  5.27 /  6.54  7.34
     gone on gone-tint, bad-text on surface     5.36  6.54 /  5.27  6.03
     bad-ink on bad, gold-ink on gold           6.54  7.27 /  5.32 11.29
     gold-text on ground                        4.91 / 11.33
     edges: edge on surface and ground          3.60  3.25 /  3.78  4.16
            sear on surface, gold-edge on surface  5.18  3.58 /  6.70 10.29
   Re-measure after any change here, in both blocks. */
:root{
  --ground:#F7F3EC; --surface:#FFFFFF; --surface-2:#FBF8F3;
  --ink:#1A1813; --ink-2:#4A463C; --ink-3:#625D51;
  --line:#E7E0D3; --line-2:#D6CDBC; --edge:#8F8676;
  --sear:#C2410C; --sear-ink:#FFFFFF; --sear-text:#AD3A0B; --sear-tint:#FCE9DD;
  --go:#2B6642; --go-tint:#DEEDE2;
  --wait:#7F5A00; --wait-tint:#F8EBCB;
  --gone:#5C5E52; --gone-tint:#ECE7DC;
  --gold:#D19A0B; --gold-ink:#1B1400; --gold-text:#8A6300; --gold-edge:#AD8006;
  --bad:#B3261E; --bad-text:#B3261E; --bad-ink:#FFFFFF;
  --shadow:0 1px 2px rgb(26 24 19 / .06), 0 10px 26px -14px rgb(26 24 19 / .30);
  --r:10px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#131510; --surface:#1C1F17; --surface-2:#22261B;
  --ink:#EFEEE3; --ink-2:#B3B6A4; --ink-3:#959985;
  --line:#2E3225; --line-2:#3E4331; --edge:#767A68;
  --sear:#F9835A; --sear-ink:#1B0F05; --sear-text:#F9835A; --sear-tint:#3A2013;
  --go:#79C494; --go-tint:#1C3325;
  --wait:#E3B75E; --wait-tint:#362C11;
  --gone:#999D8A; --gone-tint:#262A1E;
  --gold:#F5C542; --gold-ink:#1B1400; --gold-text:#F5C542; --gold-edge:#F5C542;
  --bad:#C8322B; --bad-text:#F2766B; --bad-ink:#FFFFFF;
  --shadow:0 1px 2px rgb(0 0 0 / .45), 0 12px 30px -16px rgb(0 0 0 / .85);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:400}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; text-align:left}
a{color:var(--sear-text)}
:focus-visible{outline:2px solid var(--sear); outline-offset:2px; border-radius:5px}
section{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

.display{font-family:"Archivo Black","Archivo",Arial,sans-serif; letter-spacing:-.015em}
.mono{font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.tiny{font-size:12.5px; color:var(--ink-3)} /* words in the plain sans (Decision 059, rule 8); DM Mono is for times, prices and counts */
.hide{display:none !important}
[hidden]{display:none !important} /* hidden wins over any class that sets display, such as .src{display:flex} */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wrap{max-width:1280px; margin:0 auto; padding:0 18px} /* 1280 (batch M, Research 014: a column of 1200 to 1280 on a desk), so the header holds the drops strip beside the account */
@media (max-width:699px){.wrap{padding:0 16px}} /* rule 1: 16 px side margins on a phone (Decision 059) */

/* header */
/* The header (Decision 070): one shape on every page and at every size. A desk: one row 64 px tall, the mark and the slogan on
   the left, the drops strip in the middle, then Search, Orders and the account together on the right. Under 900 px: two rows,
   the mark and the account on the first, the drops strip and Search on the second, 104 px in all, signed in or out. Every
   control in it is the same height (--hh) and none is orange: the screen's one orange action is on the page, not up here. */
.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); --hh:38px}
.top-in{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"mark strip search acct"; align-items:center; column-gap:12px; height:64px}
.mark{grid-area:mark; display:flex; align-items:center; gap:12px; min-width:0}
.mark .n{font-size:19px; line-height:1; white-space:nowrap; display:inline-flex; flex-wrap:nowrap; align-items:center; gap:7px; width:max-content; color:inherit; text-decoration:none}
.mark .n .logo{flex:none; display:block}
.mark .word{display:inline-block; white-space:nowrap}
/* The slogan lines up with the wordmark (the founder's P3): the same middle line as the name, a hairline between them, one size. */
.mark .slogan{font-size:12.5px; line-height:1; color:var(--ink-2); white-space:nowrap; padding-left:12px; border-left:1px solid var(--line-2); height:18px; display:inline-flex; align-items:center}
.hbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--hh); padding:0 13px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer; text-decoration:none}
.hbtn:hover{border-color:var(--ink-3)} .hbtn:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.hbtn.ghost{background:transparent; border-color:transparent} .hbtn.ghost:hover{border-color:var(--line-2)}
.hbtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex:none}
/* Help, signed in (the founder, 2026-10-27: "make the help button big, red, and flashing when you log in"): the ×'s red,
   bigger and bolder words, and a ring that pulses three times when they sign in or open the page signed in. Red is not
   the screen's orange action, so the header keeps none. No pulse when the device asks for less motion. */
#helpBtn.loud{background:var(--bad); color:var(--bad-ink); border-color:var(--bad); font-size:15px; font-weight:800; padding:0 16px; letter-spacing:.01em}
#helpBtn.loud:hover{filter:brightness(1.12)}
#helpBtn.loud.pulse{animation:helpPulse 1.1s ease-out 3}
@keyframes helpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 75%,transparent); filter:brightness(1)} 20%{filter:brightness(1.3)} 45%{filter:brightness(1)} 100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--bad) 0%,transparent); filter:brightness(1)}} /* a flash and a ring, never a change of size, so nothing beside it moves */
@media (prefers-reduced-motion:reduce){#helpBtn.loud.pulse{animation:none}}
@media (max-width:479px){#helpBtn.loud{padding:0 11px; font-size:14px}} /* a phone: the same room as the plain button, so the mark keeps its clear space */
.top-mid{display:contents} /* a desk: the strip and Search take their own places in the header's grid */
.hsearch{grid-area:search; width:var(--hh); padding:0} /* the magnifier alone: the page's own search box is on the front page and the grid page; this is the way in from every page */
.acct-row{grid-area:acct; display:flex; align-items:center; gap:8px; min-width:0}
.acct-slot{display:flex; align-items:center; gap:8px; position:relative}
.top .acct{height:var(--hh); box-sizing:border-box} /* the chip is as tall as every other control in the header */
/* The drops strip: one line, as wide as the middle allows up to 480 px, centered between the mark and the tools. */
.dstrip{grid-area:strip; position:relative; min-width:0; justify-self:center; width:100%; max-width:480px}
.ds-btn{display:flex; align-items:center; gap:8px; width:100%; height:var(--hh); padding:0 10px 0 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer}
.ds-btn:hover{border-color:var(--ink-3)} .ds-btn:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.ds-btn .dot{width:8px; height:8px}
.ds-btn.live .dot{background:var(--go)} .ds-btn.soon .dot{background:var(--wait)} .ds-btn.none .dot{background:var(--ink-3)} .ds-btn.full .dot{background:var(--sear)}
.ds-text{flex:1; min-width:0; display:grid; line-height:1.2} /* two rows, each one thing: the vendor, then the count and the end; a row never wraps (2026-10-26) */
.ds-text b, .ds-text .ds-sub{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ds-text b{font-weight:700} .ds-text .ds-sub{font-size:12px; color:var(--ink-2)}
.ds-more{flex:none; font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:2px 7px}
.ds-car{flex:none; width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease}
.ds-btn[aria-expanded="true"] .ds-car{transform:rotate(180deg)}
.ds-panel{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:45; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:8px; max-height:min(70vh, 460px); overflow:auto}
.ds-panel ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.ds-panel li a{display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; padding:8px; border-radius:10px; color:inherit; text-decoration:none}
.ds-panel li a:hover, .ds-panel li a:focus-visible{background:var(--surface-2)}
.ds-panel .ds-logo{width:40px; height:40px; border-radius:10px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center}
.ds-panel .ds-logo img, .ds-panel .ds-logo svg{width:100%; height:100%; object-fit:cover; display:block} .ds-panel .ds-logo svg{padding:8px}
.ds-panel .ds-name{font-weight:700; font-size:14px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-panel .ds-line{font-size:12.5px; color:var(--ink-2); display:block}
.ds-panel .ds-line .k{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-right:6px}
.ds-panel .ds-line .k.live{color:var(--go)} .ds-panel .ds-line .k.soon{color:var(--wait)} .ds-panel .ds-line .k.full{color:var(--sear-text)}
.ds-panel .ds-none{padding:8px 8px 4px; font-size:14px; color:var(--ink-2); display:grid; gap:8px}
.ds-panel .ds-none b{color:var(--ink)}
.ds-panel .ds-foot{border-top:1px solid var(--line); margin-top:6px; padding:8px 8px 2px; font-size:13px}
/* The account menu (a phone): the chip opens it; the profile, Vendor desk and Sign out sit in it, with the name and phone. */
.acct-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:45; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:6px; display:grid; gap:2px}
.acct-menu[hidden]{display:none}
.acct-menu .am-who{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; display:grid; gap:4px}
.acct-menu .am-who b{font-size:14px} .acct-menu .am-who .ptag{justify-self:start}
.acct-menu button, .acct-menu a{display:flex; align-items:center; min-height:44px; padding:0 10px; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; font-size:14.5px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer}
.acct-menu button:hover, .acct-menu a:hover{background:var(--surface-2)}
/* The help menu (Decision 119): what Help opens, in the account menu's own shape, under Help's left edge (kept on screen
   by helpOpen). A tap anywhere else or Escape closes it. */
.help-slot{position:relative; display:flex}
.help-menu{right:auto; left:0; min-width:230px}
.acct .car{display:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; color:var(--ink-2)}
/* The mark: in reading order (left to right, the top row, the middle, the bottom), three waves each a row behind the last: a
   gold outline runs a row, then the green fill runs it while the outline runs the next, then the gold fill runs it while the
   green runs the next and the outline the one after. Then the middle square turns orange, swells once and holds for the rest
   of the loop. Nine seconds a loop; each square has its own keyframes. Still under reduced motion, the middle one orange. */
.logo rect{fill:var(--ink-3); stroke:transparent; stroke-width:1.3; animation:slot0 9s linear infinite; transform-box:fill-box; transform-origin:center}
@keyframes slot0{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} -1.33%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 0.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 9.78%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 11.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 20.89%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 22.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c0{animation-name:slot0}
@keyframes slot1{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 1.78%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 3.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 12.89%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 14.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 24.00%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 25.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c1{animation-name:slot1}
@keyframes slot2{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 4.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 6.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 16.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 17.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 27.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 28.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c2{animation-name:slot2}
@keyframes slot3{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 9.78%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 11.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 20.89%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 22.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 32.00%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 33.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c3{animation-name:slot3}
@keyframes slot4{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 12.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 14.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 24.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 25.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 35.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 36.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 58.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 60.00%{fill:var(--sear); stroke:var(--sear); transform:scale(1.3)} 63.89%{fill:var(--sear); stroke:var(--sear); transform:scale(1)} 97.22%{fill:var(--sear); stroke:var(--sear); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c4{animation-name:slot4}
@keyframes slot5{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 16.00%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 17.33%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 27.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 28.44%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 38.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 39.56%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c5{animation-name:slot5}
@keyframes slot6{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 20.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 22.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 32.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 33.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 43.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 44.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c6{animation-name:slot6}
@keyframes slot7{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 24.00%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 25.33%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 35.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 36.44%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 46.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 47.56%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c7{animation-name:slot7}
@keyframes slot8{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 27.11%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 28.44%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 38.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 39.56%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 49.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 50.67%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c8{animation-name:slot8}
@media (prefers-reduced-motion:reduce){.logo rect{animation:none} .logo .c4{fill:var(--sear)}}
.mark .n em{font-style:normal; color:var(--sear-text)}
/* The wordmark in a heading or a card (Decision 070): FOOD in ink, Slot in orange, in the heading's own font and size. In running
   text the name is plain FOODSlot, never coloured. */
.wm{white-space:nowrap} .wm em{font-style:normal; color:var(--sear-text)}
/* The slogan needs room: from 1180 px it stands beside the name; narrower, the foot carries it (it is the foot's first line on every page). */
@media (max-width:1179px){.mark .slogan{display:none}}
/* Under 900 px: two rows. The first holds the mark and the account, the second the drops strip and Search. The account on a
   phone is Orders and the chip (the initials and the first name, so a second person sees whose account is open, Decision 056;
   under 480 px the initials alone, the menu's top line names the account);
   the chip opens the account menu, where the phone, the profile, Vendor desk and Sign out are (the same things, in the same order
   as on a desk). */
@media (max-width:899px){
  .top{--hh:40px}
  .top-in{height:auto; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"mark acct" "mid mid"; row-gap:8px; column-gap:8px; padding-block:8px}
  .top-mid{grid-area:mid; display:flex; gap:8px; min-width:0} /* the strip and Search share the second row on their own, whatever the account's width */
  .dstrip{max-width:none; flex:1}
  .acct-slot .hdr-wide{display:none}
  #acctSlot .acct .ptag{display:none} #acctSlot .acct{padding:4px 6px 4px 4px; gap:7px}
  #acctSlot .acct .who{max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px} #acctSlot .acct .who .rest{display:none}
  .acct .car{display:block}
}
/* A phone (the founder, 2026-09-28: FOODSlot and Orders touched at 375 px): the chip is the initials alone, since the menu names
   the account at its top, and Orders carries its count in a small badge, 99+ at most. The mark keeps clear space on every width. */
#ordersBtn .oc{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; font-weight:700; line-height:1}
@media (max-width:479px){#acctSlot .acct .meta{display:none} #ordersBtn{padding:0 10px}}
@media (max-width:359px){.mark .n{font-size:17px} #ordersBtn .oc, .top .acct .car{display:none}} /* 320 px: the count waits on the Orders screen */

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap}
button.pill{font:inherit; font-size:12px; font-weight:600; cursor:pointer} button.pill:hover{filter:brightness(1.08)}
button.pill:disabled{cursor:default; filter:none}
.pill.live{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 30%,transparent)}
.pill.wait{background:var(--wait-tint); color:var(--wait); border-color:color-mix(in srgb,var(--wait) 32%,transparent)}
.pill.gone{background:var(--gone-tint); color:var(--gone); border-color:color-mix(in srgb,var(--gone) 30%,transparent)}
.pill.sear{background:var(--sear-tint); color:var(--sear-text); border-color:color-mix(in srgb,var(--sear) 30%,transparent)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
/* The live dot stays still (Decision 059, rule 14: nothing pulses); the pill's word says it is live. */

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 15px; border-radius:var(--r); font-weight:600; font-size:14px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); transition:transform .08s ease, background .15s ease}
a.btn{text-decoration:none} /* a link drawn as a button reads as a button: no underline (Search, Vendor desk; the founder, 2026-09-25) */
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sear); color:var(--sear-ink); border-color:transparent}
.btn.ghost{background:transparent}
.btn.soft{background:var(--sear-tint); color:var(--sear-text); border-color:color-mix(in srgb,var(--sear) 35%,transparent)}
.btn.sm{padding:7px 11px; font-size:13px}
/* Ink: a strong button that is not the screen's one orange action (Decision 069, the audit's F4): Search, Sign up to sell
   under the fold. Orange stays for the one thing to do on a screen. */
.btn.ink{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn.block{width:100%}
.mbpick{display:grid; gap:8px; margin:6px 0 4px; justify-items:start}
.mbpick .btn.block{text-align:left; white-space:normal}
.credit-row{padding:6px 0; border-bottom:1px solid var(--line)}
.credit-row:last-child{border-bottom:0}
/* Back, on every screen and every help page (the founder, 2026-10-27: "We need back buttons in red everywhere"): the ×'s own
   red, white words, so the way back is as easy to find as the way out. One class for every Back on the board. */
.btn.goback{background:var(--bad); color:var(--bad-ink); border-color:var(--bad); font-weight:700}
.btn.goback:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* The signed in chip (the founder, 2026-09-19: the phone inside a box with the name looked wrong): no box, an avatar with a
   seared ring, the name in bold, and the phone's last four as a small mono tag beside it. */
.acct{display:flex; align-items:center; gap:10px; padding:2px 4px 2px 2px; background:none; border:1px solid transparent; border-radius:10px; color:inherit; font:inherit; cursor:pointer; text-align:left}
.acct:hover{border-color:var(--line-2)} .acct:focus-visible{border-color:var(--line-2); outline:2px solid var(--sear); outline-offset:2px}
.av{width:30px; height:30px; border-radius:50%; background:var(--sear); color:var(--sear-ink); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; box-shadow:0 0 0 2px var(--ground), 0 0 0 3.5px color-mix(in srgb,var(--sear) 55%,transparent)}
.acct .meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.acct .who{font-size:14px; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.ptag{display:inline-flex; align-items:center; gap:4px; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-2); padding:2px 7px 2px 5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); line-height:1.3}
.ptag svg{width:11px; height:11px; display:block}
.ptag:empty{display:none}
/* Not you? Sign out (Decision 056): a small link under the Orders page's lede and on Your order while signed in. */
.notyou{background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.notyou:hover{color:var(--sear-text)}
#acctSlot .btn{white-space:nowrap} /* "Sign in" stays one line: the header row shrinks the brand (which may stack) instead of breaking the button */

/* the showcase: one card per vendor under the header, moving right to left (Decision 008).
   data-mode on the view: marquee (700 px and up with a pointer that hovers: a CSS keyframe at 30 px per second, paused on hover and
   focus, clones cover the view), snap (the phone rule, under 700 px or no hover, the same rule as Web/launch/index.html, so a touch
   tablet swipes too: a horizontal snap scroller, one copy, the card in view centered with a sliver of each neighbour, dots under
   the row, advanced one card every 2.5 s by script when the row has not been touched for 10 s), scroll (reduced motion: the same
   scroller, nothing moves by itself), still (everything fits: nothing moves, no clones).
   data-paused on the view: the customer pressed Pause (the button in the head, visible in marquee and snap mode); the marquee holds
   and the phone scroller stops advancing until Play. The choice is kept in localStorage 'fs.scPaused'.
   The phone geometry: the card is 78 percent of the viewport (260 to 340 px); --sc-pad, the track's side padding, is half of what
   is left, so the first and the last card center like the others and the gutters are equal; the gap is that gutter less 24 px, so
   24 px of the previous and of the next card show on either side of the one in view (the gap never goes under 12 px). */
.showcase{border-bottom:1px solid var(--line); background:var(--surface); padding:10px 0 6px; --sc-w:clamp(260px, 78vw, 340px); --sc-gap:clamp(12px, calc((100vw - var(--sc-w)) / 2 - 24px), 48px); --sc-pad:calc((100% - var(--sc-w)) / 2)}
@media (min-width:700px) and (hover:hover){.showcase{padding:12px 0 14px; --sc-w:280px; --sc-gap:14px; --sc-pad:max(18px, calc((100% - 1280px) / 2 + 18px))}}
.sc-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.sc-head .tiny{flex:1; min-width:200px}
.sc-h2{font-size:20px; font-family:"Archivo Black",Arial,sans-serif; letter-spacing:-.01em; margin:0}
.sc-all{margin-left:auto}
.sc-pause{min-height:44px; padding:0 14px; font-size:13px; border-radius:999px} /* 44 px tall: a tap target on a phone; the head is aligned to its middle */
@media (min-width:700px) and (hover:hover){.sc-head{align-items:baseline; margin-bottom:10px} .sc-pause{min-height:0; padding:3px 10px; font-size:12px}}
.sc-pause.off{display:none} /* nothing moves (still, scroll): no button; the head keeps its height from its own min-height on a phone */
@media (max-width:699px), (hover:none){.sc-head{min-height:44px}}
/* Pause is back (the founder's answer to Q19, 2026-09-24): small, and it holds the vendor row and the ticker line together */
.sc-foot{font-size:11.5px; color:var(--ink-3); margin:4px auto 2px; text-align:center}
@media (max-width:479px){.sc-head .tiny{flex-basis:100%; order:2}} /* the consent sentence is on the sign in form and in Your details; on a phone the eyebrow and Pause share the first line and the note takes the second */
.showcase{position:relative}
.sc-view{position:relative; overflow:clip}
.sc-arrow{position:absolute; top:50%; z-index:3; width:44px; height:44px; margin-top:-8px; border-radius:50%; border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--ink); font-size:30px; line-height:1; font-family:"Archivo Black",Arial,sans-serif; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; padding:0 0 4px}
.sc-arrow:hover{background:var(--surface); border-color:var(--sear); color:var(--sear-text)}
.sc-arrow.prev{left:calc(var(--sc-pad, 18px) - 22px)} .sc-arrow.next{right:calc(var(--sc-pad, 18px) - 22px)} /* centered on the column's edge, where the cards fade */
@media (min-width:700px) and (hover:hover){.sc-arrow:not([hidden]){display:flex}}
/* The marquee fades the cards out at the left edge of the page column and in at the right one. The fade must start left of the first
   card's place (the track keeps its left padding, --sc-pad, while it moves): at the end of a loop the tail of the first copy sits in that
   padding, and at the restart nothing does, so anything visible there would vanish at every loop. */
.sc-view[data-mode="marquee"]{-webkit-mask-image:linear-gradient(to right,transparent calc(var(--sc-pad) - var(--sc-gap)),#000 calc(var(--sc-pad) + 24px),#000 calc(100% - var(--sc-pad) - 24px),transparent calc(100% - var(--sc-pad) + var(--sc-gap))); mask-image:linear-gradient(to right,transparent calc(var(--sc-pad) - var(--sc-gap)),#000 calc(var(--sc-pad) + 24px),#000 calc(100% - var(--sc-pad) - 24px),transparent calc(100% - var(--sc-pad) + var(--sc-gap)))}
.sc-view[data-mode="snap"], .sc-view[data-mode="scroll"], .sc-view[data-mode="still"]{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--sc-pad); scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.sc-view::-webkit-scrollbar{display:none}
/* A mouse drag of a scroller turns the snapping off until the mouse lets go: with it on, the browser pulled the row back to the
   nearest card on every move and the drag stuttered (a drop's page, where the row is a scroller, not the marquee: 2026-09-19). */
.sc-view{user-select:none; -webkit-user-select:none} .sc-view.dragging{cursor:grabbing; scroll-snap-type:none} .sc-view.dragging *{cursor:grabbing} @media (hover:hover){.sc-view[data-mode="marquee"] .sc-link, .sc-view[data-mode="scroll"] .sc-link{cursor:grab}}
.sc-track{display:flex; width:max-content; padding:4px var(--sc-pad)} /* 4 px above and below: room for the focus ring around a card */
.sc-view[data-mode="marquee"] .sc-track{animation:sc-scroll var(--sc-dur,60s) linear infinite; will-change:transform}
.sc-view[data-mode="marquee"]:hover .sc-track, .sc-view[data-mode="marquee"]:focus-within .sc-track, .sc-view[data-paused] .sc-track{animation-play-state:paused}
@keyframes sc-scroll{from{transform:translateX(0)}to{transform:translateX(var(--sc-shift,-50%))}}
.sc-copy{display:flex; gap:var(--sc-gap); padding-right:var(--sc-gap); flex:none; align-items:stretch}
.findwrap{padding-top:16px}
.sc-skel{visibility:hidden} /* the blank card in the markup: it holds the row's height from the first paint until the vendors arrive */
.sc-card{width:var(--sc-w); flex:none; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease, box-shadow .15s ease}
.sc-card.cur{border-color:var(--sear); box-shadow:inset 0 0 0 1px var(--sear)}
.sc-card:has(:focus-visible){border-color:var(--sear); box-shadow:0 0 0 2px var(--sear)} /* the whole card shows a ring when its link or its button has keyboard focus */
.sc-card.cur:has(:focus-visible){box-shadow:0 0 0 2px var(--sear), inset 0 0 0 1px var(--sear)}
.sc-link{display:block; color:inherit; text-decoration:none; flex:1}
a.sc-link:hover .sc-name{color:var(--sear-text)}
a.sc-link:focus-visible{outline-offset:-3px}
.sc-photo{position:relative; aspect-ratio:4 / 3; background:var(--surface-2)}
.sc-photo > img, .sc-photo > .sc-ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.sc-photo > img.sc-logo{inset:12%; width:76%; height:76%; object-fit:contain} /* the logo sits in the middle of the plate, whole, never cropped */
.sc-ph text{font-family:"Archivo Black","Archivo",Arial,sans-serif; letter-spacing:-.02em}
.sc-rib{position:absolute; top:10px; right:0; padding:3px 9px 3px 10px; border-radius:4px 0 0 4px; background:var(--ink); color:var(--ground); font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.sc-item{position:absolute; left:12px; bottom:-20px; width:60px; height:60px; border-radius:50%; border:3px solid var(--surface); background:var(--surface-2); overflow:hidden; box-shadow:var(--shadow)}
.sc-item > img, .sc-item > svg{width:100%; height:100%; object-fit:cover; display:block}
.sc-body{padding:26px 12px 6px; display:grid; grid-template-columns:minmax(0,1fr); gap:3px} /* minmax(0,…) so a long word in the name never widens the column past the card */
.sc-name{font-size:16px; line-height:1.15; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; transition:color .15s ease} /* two lines at most, a long word wraps */
.sc-tag{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc-ig, .hero-ig{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sear-text); text-decoration:none; font-weight:600; border:1px solid color-mix(in srgb,var(--sear) 40%,transparent); border-radius:999px; padding:4px 10px; background:var(--sear-tint); width:max-content; max-width:100%}
.sc-ig::before, .hero-ig::before{content:""; width:12px; height:12px; border:2px solid currentColor; border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--sear-tint), inset 0 0 0 3.5px currentColor; flex:none}
.sc-ig:hover, .hero-ig:hover{background:var(--sear); color:var(--sear-ink)}
.hero-ig{margin:2px 0 10px; font-size:13.5px; padding:6px 13px}
/* The area and the follower count wrap to a second line rather than losing the count to an ellipsis. --ink-2, not --ink-3: the small text
   needs 4.5:1 on the card in the light theme. */
.sc-meta{font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.sc-next{font-size:13px; color:var(--ink-2); margin-top:3px}
/* The badges (Decision 082): a checked food safety certificate, a green pill with a shield. The home kitchen note: plain, never hidden. */
.sc-badges{display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:6px}
.badge{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; line-height:1.3; color:var(--go); background:var(--go-tint); border:1px solid color-mix(in srgb,var(--go) 35%,transparent); border-radius:999px; padding:2px 9px 2px 5px; max-width:100%} /* one line when it fits; a label wider than the card wraps inside its pill (the launch audit) */
.badge svg{width:14px; height:14px; flex:none}
.homenote{display:block; font-size:14px; line-height:1.4; color:var(--ink-2); margin:10px 0 0; padding:8px 12px; border:1px solid var(--line, color-mix(in srgb,var(--ink-2) 25%,transparent)); border-radius:10px}
.homenote b{color:var(--ink)}
.sc-next b{color:var(--ink); font-weight:700} /* rule 5: the pickup time in bold (Decision 059) */
.sc-sub{font-size:12px; color:var(--ink-2)}
.sc-act{padding:6px 12px 12px; margin-top:auto}
.sc-follow, .btn.sm.sc-follow{width:100%; border-radius:8px; white-space:nowrap; min-height:48px; font-size:15px}
.sc-follow[aria-pressed="true"]{background:var(--wait-tint); color:var(--wait); border-color:color-mix(in srgb,var(--wait) 40%,transparent)} /* amber is the waiting list (rule 9) */
.sc-follow.off[aria-pressed="true"]{background:var(--surface); color:var(--bad-text); border-color:var(--bad)} /* joined, but the texts box was never ticked: nothing will be sent (Decision 069) */
/* The chef finder (testing notes, 2026-09-19): a search box, the category chips, one row per vendor with the logo or the
   FOODSlot mark, the name, the tagline and a status tag; a tap opens the vendor's page. */
/* The finder (Decision 027, the founder's notes 2026-09-20): the head lines up with the box, the note is bigger with the count in
   colour, typed matches drop down from the box, the top five or a chip's list sit under the chips, Search opens the grid page. */
/* The founder's notes, 2026-09-20: the head sits on the bar's left edge and close to it with the note on the same line ending at
   the bar's right edge; Search sits inside the bar; the chips run in one line under the bar (they scroll sideways on a phone);
   a row's picture fills its whole left edge top to bottom and Follow sits inside the row. */
/* The finder is as wide as the vendor display's column (the founder, 2026-09-21): the chips and the Tabs share one width, .wrap's.
   The ticker that slid above the search bar is gone (Decision 070): the drops strip in the header says the same, and stays still. */
#findSec .sec-head{margin-bottom:6px; flex-wrap:nowrap; align-items:baseline}
#findSec .note{font-size:15px; color:var(--ink-2); text-align:right} #findSec .note b{color:var(--sear-text); font-size:17px}
@media (max-width:640px){#findSec .sec-head{flex-wrap:wrap} #findSec .note{text-align:left}}
#findSec .sec-head #findNote{margin-left:auto} /* See all at the head's right edge, at every size (batch M) */
.sc-head .sc-h2{flex:1 1 auto; min-width:0} .sc-head{flex-wrap:nowrap} /* the title, then See every vendor or Pause on the same line */
.find{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.find-row{display:flex; gap:8px; align-items:stretch}
.find-box{position:relative; flex:1}
.find-box .btn{position:absolute; right:5px; top:5px; bottom:5px; min-height:0; padding:0 16px; white-space:nowrap; border-radius:9px}
.find-drop{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; list-style:none; margin:0; padding:6px; background:var(--surface); border:1px solid var(--sear); border-radius:12px; box-shadow:var(--shadow); display:grid; gap:2px; max-height:320px; overflow:auto}
.find-drop li a{display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none}
.find-drop li a:hover, .find-drop li a:focus-visible{background:var(--surface-2); outline:none}
.find-drop .fl-logo{width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center}
.find-drop .fl-logo img, .find-drop .fl-logo svg{width:100%; height:100%; object-fit:cover} .find-drop .fl-logo svg{padding:7px}
.find-drop .fl-name{font-weight:700; font-size:14px} .find-drop .fl-sub{font-size:12px; color:var(--ink-2)}
.find-drop li.none{color:var(--ink-3); font-size:13px; padding:8px 10px}
.find-sort{font-size:13.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:8px; align-items:center} /* wraps: at 320 px Use my location goes under the sort */
.find-sort select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--edge); border-radius:8px; padding:6px 10px}
.findlist li{display:flex; gap:0; align-items:stretch; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; flex-wrap:wrap}
.findlist li:hover{border-color:var(--sear)}
.findlist li a{flex:1; min-width:0}
.findlist li .btn.sc-follow{width:88px; min-height:0; align-self:stretch; font-size:12.5px; line-height:1.15; padding:0 6px; margin:0; border-radius:0; border:0; border-left:1px solid var(--line); flex:none; white-space:normal; text-align:center; overflow-wrap:normal} /* the words fit on two lines, never cut (batch J 6) */
.findlist .fl-tag{display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis}
.findlist li.feat{border-color:color-mix(in srgb,var(--sear) 60%,var(--line))}
/* The grid page: every chef as one square, all the same size: the logo, the name, the category and area, the state. */
.findgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:1fr; gap:10px}
.findgrid a{display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; gap:6px; height:100%; padding:14px 8px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:inherit; text-decoration:none}
.findgrid a:hover{border-color:var(--sear)}
.findgrid .ft-logo{width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; border:2px solid var(--line)}
.findgrid .ft-logo img, .findgrid .ft-logo svg{width:100%; height:100%; object-fit:cover} .findgrid .ft-logo svg{padding:14px}
.findgrid .ft-name{font-weight:700; font-size:14px; line-height:1.2} .findgrid .ft-sub{font-size:12px; color:var(--ink-3); align-self:start}
.findgrid .fl-tag{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.findgrid .fl-tag.paid{color:var(--sear-text)} .findgrid .fl-tag.open{color:var(--go)} .findgrid .fl-tag.soon{color:var(--wait)} .findgrid .fl-tag.none{color:var(--ink-3)}
.findgrid li.none{color:var(--ink-3); font-size:13.5px; padding:8px 2px; grid-column:1 / -1} /* li.none: the No drop yet tag is .none too, and took this size (batch M) */
.find-box input[type=search]{width:100%; padding:12px 104px 12px 14px; border:1px solid var(--edge); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px}
.find-box input[type=search]:focus{outline:2px solid var(--sear); border-color:var(--sear)}
.find-box:has(> #findGo.hide) input[type=search]{padding-right:14px}
.chips{display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 24px 2px 0; scroll-snap-type:x proximity; scroll-padding-inline:0 24px; overscroll-behavior-x:contain} /* a phone: one line that slides, the last chip reachable in full (Research 015) */
.chips > button{scroll-snap-align:start}
/* The edge that has more to see fades (Research 015: a cut chip alone does not say the row slides): scrollHint() sets data-more. */
.chips[data-more~="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.chips[data-more~="l"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px); mask-image:linear-gradient(90deg,transparent,#000 40px)}
.chips[data-more~="l"][data-more~="r"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; flex:none} /* 40 px tall on a phone: a thumb's target (Research 015) */
.chips button:hover{border-color:var(--ink-3)}
.chips button[aria-pressed="true"], .chips-more button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
/* More (Decision 069, Research 011): the longer list of foods under the chips, in its groups. */
/* The line: the sliding chips, then More foods pinned at the right (Research 015). On a desk the chips wrap and More sits at the
   right end of their first row. */
.chipline{display:flex; gap:8px; align-items:flex-start; min-width:0}
.chipline .chips{flex:1 1 auto; min-width:0}
.chip-more{flex:none; min-height:40px; padding:0 14px; border-radius:999px; border:1px dashed var(--ink-3); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; margin-top:2px}
.chip-more[aria-expanded="true"]{border-style:solid; background:var(--surface-2)}
@media (min-width:700px){.chip-more{min-height:36px; font-size:13.5px}}
.chips-more{display:grid; gap:12px; padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface)}
.chips-more .cm-group{display:grid; gap:6px}
.chips-more .cm-row{display:flex; flex-wrap:wrap; gap:6px}
.chips-more button{padding:7px 11px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; white-space:nowrap}
@media (max-width:699px), (hover:none){.chips-more button{min-height:40px}}
/* A desk: the chips spread to the search bar's full length (the founder, 2026-09-21); a phone keeps the sliding line. */
/* A desk or a tablet (the founder, 2026-09-28: the chips were cut off at the right): every chip in view, on as many rows as they
   need, from the left; nothing slides, nothing is cut. */
@media (min-width:700px){.chips{flex-wrap:wrap; overflow:visible; padding-right:0; -webkit-mask-image:none !important; mask-image:none !important} .chips button{min-height:36px; padding:0 14px; font-size:13.5px}}
.findlist{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start} /* the Tabs start at the left and fill the row to the right (the founder, 2026-09-21) */
/* The finder keeps its space from the first paint (Decision 048: no layout shift): one row of chips, the three Tabs (one, two or
   three to a row by width) and the Sign in button, measured 2026-09-23 at 375, 800 and 1200 px. */
.chipline{min-height:44px}
/* With few vendors (Decision 069) the front page's finder is the Tabs alone under a short heading, or nothing when the one vendor
   is on the next drop card; the search bar, the chips and the ticker wait for FINDER_MIN vendors. */
#findSec.lean .chipline, #findSec.lean .chips-more{display:none !important}
#findSec.lean.empty{display:none}
#findSec.lean .sec-head{margin-bottom:10px}
#findSec.lean #findH2{font-size:17px}
/* The front hero shows from the first paint on the front page (Decision 048: no layout shift), and the next drop card keeps
   its height until the vendors land. */
html:not([data-boot="front"]) #frontHero{display:none}
html[data-boot="front"] #nextCard:empty{min-height:392px}
@media (min-width:860px){html[data-boot="front"] #nextCard:empty{min-height:440px}}
#acctSlot{min-width:66px; min-height:36px; justify-content:flex-end} /* the Sign in button's box before it is drawn: on a phone it sets the height of the header's first row */
/* A Tab is one fixed size on every screen (the founder's notes, 2026-09-20): 64 px tall, the picture 64 wide, Follow 88 wide, the
   words on one line each and cut with an ellipsis when long. Only the words change, never the box. */
.findlist li{height:64px; flex:1 1 340px; min-width:min(340px, 100%); max-width:100%; flex-wrap:nowrap; box-sizing:border-box} /* 340 wide at least; the Tabs on a row share its full width, the height and the pieces never change */
@media (min-width:724px){.findlist li{max-width:calc((100% - 8px) / 2)}} @media (min-width:1080px){.findlist li{max-width:calc((100% - 16px) / 3)}} /* a last Tab alone on its row keeps its share, it does not stretch across */
.findlist li a{display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; padding:0 10px 0 0; height:64px; color:inherit; text-decoration:none}
.findlist li a > span{min-width:0; display:grid; gap:1px}
.findlist li a > span > br{display:none}
.findlist .fl-name, .findlist .fl-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; line-height:1.25}
.findlist .fl-logo{align-self:stretch; margin:0; width:64px; height:64px; overflow:hidden; background:var(--surface-2); border-right:1px solid var(--line); display:grid; place-items:center}
.findlist .fl-logo img,.findlist .fl-logo svg{width:100%; height:100%; display:block; object-fit:cover}
.findlist .fl-logo svg{padding:13px}
.findlist .fl-name{font-weight:700; font-size:14px} .findlist .fl-sub{font-size:12px; color:var(--ink-2)}
.findlist .fl-tag{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.findlist .fl-tag.paid{color:var(--sear-text)} .findlist .fl-tag.open{color:var(--go)} .findlist .fl-tag.soon{color:var(--wait)} .findlist .fl-tag.none{color:var(--ink-3)}
.findlist li.none{color:var(--ink-3); font-size:13.5px; padding:8px 2px}
/* The empty category (Decision 069, L15): a picture, what is missing, and the invite to be the first to sell it. */
.findlist li.nocat, .findgrid li.nocat{height:auto; flex:1 1 100%; max-width:100%; min-width:0; grid-column:1 / -1; display:grid; justify-items:center; text-align:center; gap:8px; padding:20px 16px 18px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface)}
.findlist li.nocat:hover{border-color:var(--line-2)}
.nocat svg{width:132px; height:96px; display:block}
.nocat b{font-size:17px; line-height:1.25}
.nocat p{color:var(--ink-2); font-size:14px; max-width:42ch}
.nocat .row{display:flex; gap:10px 14px; flex-wrap:wrap; justify-content:center; align-items:center}
/* The dialogs: the request form and the flow sheet. One shell; the sheet slides up on a phone. */
dialog.dlg{border:0; padding:0; background:transparent; color:inherit; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto}
dialog.dlg::backdrop{background:rgb(0 0 0 / .62); backdrop-filter:blur(3px)}
dialog.dlg:not([open]){display:none}
/* Every box opens with a head row stuck to its top (Research 033 finding 7): the box's title (or the hold sheet's pickup bar) on
   the left, the × on the right. Words scroll under the row, never under the ×, so a long sheet never hides the way out. */
.dlg-head{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface); padding:2px 0 6px; margin:0}
.dlg-head > h3, .dlg-head > .flowwhen{flex:1; min-width:0; margin:0}
.dlg-head > .dlg-x{margin-left:auto}
.dlg-x{width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--bad); background:var(--bad); color:var(--bad-ink); font-size:22px; line-height:1; padding:0 0 3px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
.dlg-x:hover{filter:brightness(1.12)} /* a red circle, a white x: the one way to close a box (the founder, 2026-09-24) */
/* A box with no title of its own (the sign in, How it works, Follow): the x sits on the card's own top corner, in a row of no
   height, so no empty bar shows above the card (the founder, 2026-10-26). It stays in view while the box scrolls. */
.dlg-head.solo, .dlg-head:has(> .flowwhen.hide){position:sticky; top:0; height:0; padding:0; margin:0; background:none; overflow:visible; align-items:flex-start; justify-content:flex-end}
.dlg-head.solo > .dlg-x, .dlg-head:has(> .flowwhen.hide) > .dlg-x{transform:translate(-10px, 10px)}
.flowbox:has(> .dlg-head.solo), .flowbox:has(> .dlg-head > .flowwhen.hide){row-gap:0} /* no gap under the row of no height; the hold sheet's head is one too while its pickup bar is hidden */
.flowbox > .dlg-head{background:none} /* a box with no card of its own (the hold sheet): no white strip behind the pickup bar and its × (the founder's live look, 2026-10-27) */
.dlgbox > .dlg-head.solo > .dlg-x{transform:translate(8px, -8px)} /* 10px from the corner of a box with 18px padding */
#howDlg .dlg-head.solo > .dlg-x{transform:translate(6px, -6px)} /* its box has 16px padding */
#signBody .auth > h3, .fw-head{padding-right:48px}
.dlgbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; max-height:calc(100dvh - 24px); overflow:auto}
.dlgbox h3{font-size:18px; font-family:"Archivo Black",Arial,sans-serif}
.dlgbox .lede{color:var(--ink-2); font-size:13.5px; margin:6px 0 12px}
.dlgbox form{display:grid; gap:10px}
.field textarea{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--edge); border-radius:8px; padding:9px 11px; width:100%; min-height:70px; resize:vertical}
.field textarea:focus-visible{outline:2px solid var(--sear); outline-offset:1px; border-color:transparent}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.dlgrow{display:flex; gap:8px; justify-content:flex-end; margin-top:4px}
/* The waiting list screen (Decision 034): the vendor's logo and name up top, three rules under it, Leave the waiting list beside Got it. */
.fw-head{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.fw-logo{width:64px; height:64px; border-radius:16px; overflow:hidden; flex:none; background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center}
.fw-logo img{width:100%; height:100%; object-fit:cover; display:block}
.fw-av{width:44px; height:44px; font-size:16px; box-shadow:none}
.fw-titles{display:grid; gap:4px; justify-items:start} .fw-titles h3{margin:0} .fw-tag{margin:0; color:var(--ink-2); font-size:13px}
.fw-rules{border:1px solid var(--line); border-radius:12px; background:var(--surface-2); margin-bottom:10px}
.fw-rules .rule .v{display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.fw-rules .fw-warn{color:var(--bad-text)}
.fw-row{flex-wrap:wrap} .fw-row .sp{flex:1}
.fw-list{margin:0 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px} /* the separate yes to the vendor's own texts (Decision 058) */
/* The Orders dialog: one block per drop, one row per order with its QR while it is live. */
.orders{display:grid; gap:12px}
.orders .drop{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.orders .dh{padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; align-items:baseline}
.orders .dh b{font-family:"Archivo Black",Arial,sans-serif; font-size:14px}
.orders .dh .when{grid-column:1 / -1; display:grid; gap:2px; font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-2)} /* rows, each one thing: the drop, the day and the time, the place */
.orders .dh a{grid-column:2; grid-row:1; font-size:12.5px}
.orders .o{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:10px 12px; border-bottom:1px solid var(--line); align-items:center; font-size:13.5px}
.orders .o:last-child{border-bottom:0}
.orders .o .code{font-family:"DM Mono",monospace; font-weight:500}
.orders .o .it{color:var(--ink-2); font-size:12.5px; grid-column:1}
.orders .o .qrbox{grid-column:1 / -1; display:grid; justify-items:center; gap:4px; padding:6px 0}
.orders .o .qrbox svg{width:120px; height:120px}
.pcode{font-family:"DM Mono",monospace; font-size:18px; font-weight:600; letter-spacing:.06em}
.tkday{font-size:24px; line-height:1.15; font-weight:800; text-align:center} /* the pickup day over the QR (Research 029, finding 75) */
.tkby{margin-top:-2px; margin-bottom:6px}
/* the picture at Packed in the QR code's place once the order is picked up (Decision 114): a tap shows the QR, a tap on it the picture */
.packbox{display:grid; justify-items:center; gap:6px; padding:4px 0; cursor:pointer; border-radius:12px; -webkit-tap-highlight-color:transparent}
.packbox:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.packpics{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.packfig{margin:0; display:grid; gap:4px; justify-items:center}
.packfig img{display:block; width:min(240px, 70vw); aspect-ratio:3 / 4; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--line)}
.packcode{font-family:"DM Mono",monospace; font-size:15px}
.orders .o .packbox{grid-column:1 / -1}
/* The Orders page in two parts (Decision 067): the orders still to pick up, then the Order history with its search. */
.orders .osec{font-family:"Archivo Black",Arial,sans-serif; font-size:15px; margin:4px 0 0}
.orders .ofind{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--edge); border-radius:8px; padding:9px 11px; width:100%; min-height:44px}
.orders .o .why{grid-column:1 / -1; color:var(--ink-2); font-size:12.5px}
/* Report a problem (Decision 043): the line under an order, and its sheet. */
.problem{display:grid; gap:4px; font-size:12.5px; color:var(--ink-2); padding:4px 0}
.orders .o .problem{grid-column:1 / -1}
.problem .pk{font-weight:600; color:var(--ink)}
.problem .row{display:flex; gap:6px; flex-wrap:wrap}
/* The record (Decision 106, Research 035): the facts box, one status strip, the thread. One look on every record, and under
   an order never more than the card, the strip and one button. The strip's tone: red waits, green sorted for you, grey closed. */
.strip{display:block; padding:8px 10px; border-radius:8px; font-size:13.5px; line-height:1.35; border:1px solid transparent; margin:2px 0}
.strip b{font-weight:800}
.strip.red{background:color-mix(in srgb,var(--bad) 11%,var(--surface)); color:var(--bad-text); border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.strip.green{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 35%,transparent)}
.strip.grey{background:var(--gone-tint); color:var(--gone); border-color:var(--line-2)}
.strip .new{float:right; margin:0 0 4px 8px; font-family:"DM Mono",monospace; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
.orders .o .strip{grid-column:1 / -1}
.rec{display:grid; gap:8px}
.rec-facts{display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)}
.rec-facts .ln{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-2)}
.rec-facts .ln.top{font-size:14px; color:var(--ink)}
.rec-facts .code{font-family:"DM Mono",monospace; font-weight:700; letter-spacing:.04em}
.rec-facts .day b{color:var(--ink)}
.rec-tabs{display:flex; gap:6px}
.rec-tabs .btn.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.thread{height:240px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overscroll-behavior:contain}
@media (min-width:700px){.thread{height:320px}}
.thread.big{height:min(70vh, 640px)}
.thread .none{margin:auto; color:var(--ink-3); font-size:13px; text-align:center}
.bub{max-width:86%; padding:8px 11px; border-radius:14px 14px 14px 4px; font-size:14px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); color:var(--ink)}
.bub.mine{align-self:flex-end; border-radius:14px 14px 4px 14px; background:var(--sear-tint); border-color:color-mix(in srgb,var(--sear) 30%,transparent)}
.bub.fs{background:color-mix(in srgb,var(--gold) 16%,var(--surface)); border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
/* a foodslot.app link or a phone number in chat words (Decision 131): tappable, underlined, in the words' own color */
.bub a.mlink{color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}
.bub .who{display:block; font-weight:800; font-size:12.5px; margin-bottom:2px}
.bub .who .fsmark{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--gold); margin-right:5px; vertical-align:-1px}
/* the FOODSlot helper's words (Decision 117): the AI tag on every one, and the line while it writes */
.bub .who .aitag{display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--ink); color:var(--surface); font-size:10.5px; font-weight:800; line-height:16px; vertical-align:1px; letter-spacing:.04em}
.bub .who .handtag{display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); font-size:10.5px; font-weight:700; line-height:15px; vertical-align:1px}
.rec-writing{color:var(--ink-3); font-style:italic; margin:0}
/* the red note in a chat with the helper (Decision 126): short, always on screen */
.picok{margin:0 0 6px; padding-left:20px; display:grid; gap:5px; font-size:14.5px; line-height:1.4; color:var(--ink)} /* the picture box (Decision 126) */
.ai-note{margin:0; padding:6px 10px; border-radius:10px; border:1px solid color-mix(in srgb,var(--bad) 45%,transparent); background:color-mix(in srgb,var(--bad) 9%,var(--surface)); color:var(--bad-text); font-size:12.5px; font-weight:700; line-height:1.35}
.bub .when{display:block; font-size:11.5px; color:var(--ink-3); margin-top:4px; font-family:"DM Mono",monospace}
.bub.hid{color:var(--ink-3); font-style:italic}
/* a card in a chat (Decision 116): a slot or an order the vendor gave, with Claim */
.bub.hascard{max-width:min(92%, 360px); white-space:normal}
.ccard{display:grid; gap:4px; margin-top:4px; padding:9px 11px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); font-size:14px}
.ccard .cc-h{font-weight:800; font-size:15px} .ccard .cc-when b{font-weight:800}
.ccard .line{display:flex; justify-content:space-between; gap:10px} .ccard .line.tot{font-weight:800; border-top:1px solid var(--line-2); padding-top:4px}
.ccard .cc-st{font-size:13px; color:var(--ink-2)} .ccard .btn{justify-self:start; margin-top:2px}
/* the helper's action card (Decision 128): the server's own form, inside the chat */
.hact .hact-q{font-weight:700; font-size:13.5px; margin-top:4px} .hact .hact-ask{font-weight:800; font-size:15px}
.hact .hact-warn{color:var(--bad-text); font-size:13px; font-weight:700}
.hact .hact-btns, .hact .hact-pic{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px} .hact .hact-btns .btn, .hact .hact-pic .btn{margin-top:0}
.hact input:not([type=radio]):not([type=checkbox]):not([type=file]), .hact textarea{width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink)}
.bub .rep{background:none; border:0; padding:0 0 0 8px; font:inherit; font-family:inherit; font-size:11px; color:var(--ink-3); text-decoration:underline; cursor:pointer; min-height:0}
.swap{font-weight:800; color:var(--sear-text); display:inline-block} .bub.pop .swap{animation:swapbounce .6s ease-out 1} /* the bounce once, when the message lands */
@keyframes swapbounce{0%{transform:scale(1,1)} 30%{transform:scale(1.25,.75)} 55%{transform:scale(.85,1.2)} 75%{transform:scale(1.08,.95)} 100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){.swap{animation:none}}
.bub.pop{animation:bubin .28s ease-out 1; transform-origin:bottom left} .bub.mine.pop{transform-origin:bottom right} /* a message that just arrived lands, the same juice everywhere */
@keyframes bubin{0%{opacity:0; transform:translateY(8px) scale(.96)} 100%{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.bub.pop{animation:none}}
/* The send row (the founder's note S2, 2026-10-28): Send right beside the write box, the same height, always lined up. */
.rec-send{display:flex; gap:6px; align-items:stretch}
.rec-send > .btn{flex:none; min-height:44px; min-width:76px}
/* Under the box: Picture, Email me a copy and the sheet's own buttons in even columns, one size, the site's colours (a plain
   button wears the orange tint), nothing bunched. */
.rec-tools{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px}
.rec-tools > .btn{width:100%; min-height:40px; white-space:normal; text-align:center}
.rec-tools > .btn.ghost{background:var(--sear-tint); color:var(--sear-text); border-color:color-mix(in srgb,var(--sear) 35%,transparent)}
.rec-tools > .rec-note{grid-column:1 / -1}
/* the person hours line: two short lines from the server, never cut (the founder's note S3) */
.rec-help{white-space:pre-line; text-align:center; margin:0; line-height:1.45}
/* the live help box (Batch U4): the hours and the Connected to FOODSlot AI mark in a small box of their own under the thread */
.rec-helpbox{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; padding:7px 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2)}
.rec-helpbox .rec-help{flex:1 1 220px; text-align:left}
@media (max-width:700px){.rec-helpbox .rec-help{text-align:center}}
.ai-pill{display:inline-flex; align-items:center; gap:6px; flex:none; padding:3px 10px; border-radius:999px; border:1px solid color-mix(in srgb,var(--go) 45%,transparent); background:var(--go-tint); color:var(--ink); font-size:12px; font-weight:700; line-height:1.3}
.ai-dot{width:8px; height:8px; border-radius:50%; background:var(--go); flex:none}
.chatpic{display:block; margin-top:6px; padding:0; border:0; background:none; cursor:zoom-in; max-width:100%}
.chatpic img{display:block; max-width:min(240px,100%); max-height:240px; border-radius:8px; object-fit:cover}
.picbig{display:block; max-width:100%; max-height:70vh; margin:0 auto; border-radius:8px}
.rec-send textarea{flex:1; min-height:44px; max-height:120px; font:inherit; font-size:14px; color:var(--ink); background:var(--surface-2); border:1px solid var(--edge); border-radius:8px; padding:9px 11px; resize:none}
/* the focus ring drawn inside the box (Batch U1, 2026-10-29): the chat column scrolls (overflow:auto), so a ring outside
   the box was cut off at the column's left edge and the tapped box looked pushed off the screen to the left */
.rec-send textarea:focus-visible{outline:2px solid var(--sear); outline-offset:-2px; border-color:var(--sear)}
#recDlg .rec :is(input, textarea, select):focus-visible{outline-offset:-2px}
.rec-clean{font-size:12.5px; color:var(--ink-3); text-align:center; border-top:1px solid var(--line-2); padding-top:4px}
.rec-err{font-size:12.5px; color:var(--bad-text); text-align:center; font-weight:600} .rec-err.ok{color:var(--go)} .rec-err:empty{display:none}
.strip .yt{font-weight:400; color:var(--ink-3)}
.rec-acts{display:flex; gap:6px; flex-wrap:wrap}
.rec-note{font-size:12.5px; color:var(--ink-3)}
/* The page behind an open dialog stays put (Research 032 section 3.6): the body is pinned at its place and put back on close. */
body.dlg-lock{position:fixed; left:0; right:0; width:100%; overflow:hidden}
/* Rate stars (Decision 057): one small line under a picked up order, never above it. */
.rate{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); padding:2px 0}
.orders .o .rate{grid-column:1 / -1}
.rate .stars{display:inline-flex; gap:0}
.rate .star{background:none; border:0; padding:4px 3px; min-width:30px; min-height:30px; font-size:19px; line-height:1; color:var(--edge); cursor:pointer}
.rate .star.on{color:var(--gold-edge)} /* a star is an icon: 3:1 is its bar */
.rate .star:disabled{cursor:default}
.rate .star:focus-visible{outline:2px solid var(--sear); border-radius:6px}
.rate .star.zero{font-size:13px; font-weight:700; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:4px 9px; margin-right:4px} /* 0 stars: its own tap (Decision 068) */
.rate .star.zero.on{background:var(--ink); color:var(--ground); border-color:var(--ink)}
/* the rate prompt (Decision 068): a small card at the foot of the screen, over the page, under the toast */
.rprompt{position:fixed; left:50%; bottom:16px; translate:-50% 0; z-index:55; width:min(420px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); padding:10px 14px; display:grid; gap:4px}
.rprompt[hidden]{display:none}
.rprompt .rp-head{display:flex; gap:8px; align-items:center; justify-content:space-between; font-size:14px}
.rprompt .rp-x{background:none; border:0; padding:6px 2px; min-height:30px; font:inherit; font-size:12.5px; color:var(--ink-2); text-decoration:underline; cursor:pointer; white-space:nowrap}
.linkbtn{background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--sear-text); text-decoration:underline; cursor:pointer}
.sc-rate{color:var(--ink); font-weight:600}
.pbkinds{display:grid; gap:8px; margin:4px 0 6px}
.pbkind{display:flex; gap:8px; align-items:center; font-size:14px; cursor:pointer}
/* Report that you got sick (Decision 065): the two boxes for the day and its part side by side, and the yes or no rows. */
.hrwhen{display:flex; gap:8px; flex-wrap:wrap}
.hrwhen input,.hrwhen select{flex:1 1 140px}
/* the health department links one per line, the fridge note in full view, and the Add button on an extra (the founder's live test, 2026-10-23) */
.hrlinks{display:grid; gap:4px; font-size:13px; margin:2px 0 8px} .hrlinks b{font-weight:600} .hrlinks a{font-weight:600; text-decoration:underline} .hrlinks .tiny{margin-top:-2px}
.hrkeep{margin-top:6px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb,var(--gold) 28%,var(--surface)); border:1px solid color-mix(in srgb,var(--gold) 70%,var(--line)); color:var(--ink); font-size:14px; line-height:1.35}
.hrkeep[hidden]{display:none}
.field input[type=file],input[type=file]{font-size:16px} /* a phone zooms in on a box under 16 px (d9d413d); the photo pickers too (Decision 123) */
.xadd{min-height:36px; padding:0 16px; font-weight:800; letter-spacing:.03em; text-transform:uppercase}
.hryn{border:0; padding:0; margin:0; display:grid; gap:6px}
.hryn legend{font-size:14px; color:var(--ink); margin-bottom:4px}
.hryn .row{display:flex; gap:18px}
dialog.flow{width:min(760px, calc(100vw - 24px))}
/* the live test, 2026-10-20: the page behind an open box scrolled under the finger; while any box is open the page stays put,
   and a box's own scroll never runs on into the page */
html:has(dialog[open]:not(.corner)){overflow:hidden} /* the corner chat (Decision 131) lets the page scroll behind it */
dialog,.flowbox,.dlgbox{overscroll-behavior:contain}
.flowbox{display:grid; gap:10px; max-height:calc(100dvh - 24px); overflow:auto; padding:4px 4px 8px; scroll-padding-bottom:72px} /* a focused field scrolls clear of the sticky Hide this button (the launch audit) */
/* the founder's notes, 2026-09-20: on a phone the sheet ran past the bottom of the window; the button that closes it stays in view */
/* the live test, 2026-10-20: the button alone let the words behind it show on both sides (Done over "Not you? Sign out");
   the bar it sits in is the sheet's full width, so nothing shows beside it */
.flowfoot{position:sticky; bottom:0; display:grid; justify-items:center; padding:6px 0 2px; background:var(--surface); box-shadow:0 -8px 12px -8px rgba(0,0,0,.6)}
.flowclose{background:var(--surface)}
.flowbox .sec{margin:0}
/* The dialog is one card; the × sits in its head row, 16 px in from both edges (the founder's P6: the × floated half off the
   inner card's corner). */
#howDlg .flowbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
#howBody .sec{background:none; border:0; padding:0; box-shadow:none}
@media (max-width:700px){#howDlg .flowbox{border-radius:var(--r) var(--r) 0 0; padding:14px 12px 16px}} /* a phone: a sheet from the bottom, like every box */
@media (max-width:700px){dialog.dlg{width:100vw; max-width:100vw; margin:auto 0 0; max-height:94dvh} .dlgbox{border-radius:var(--r) var(--r) 0 0; max-height:94dvh; padding:14px 12px 16px} .flowbox{max-height:94dvh; padding:8px 8px 10px}}
/* The phone keyboard (the founder's iPhone, live test 2026-10-20): the sheet sat behind the keyboard and the phone box was
   covered. --kb is the keyboard's height and --vvh the part of the screen left above it (fitKeyboard()); the sheet rides
   on top of the keyboard and fits in what is left. */
@media (max-width:700px){dialog.dlg{margin-bottom:var(--kb,0px); max-height:min(94dvh, calc(var(--vvh,100dvh) - 8px))} .dlgbox,.flowbox{max-height:min(94dvh, calc(var(--vvh,100dvh) - 8px))}}
/* The chat window (the founder's note S1, 2026-10-28, Decision 125): every chat takes the whole page at every width, with
   only the red X in the top corner (Make bigger and Close are gone). It fills what the phone's keyboard and the browser's
   bar leave (--vvh and --vvt from fitKeyboard()), and the write box stays above the iPhone's home bar (the safe area). The
   thread fills what is left; while the keyboard is up the facts box steps aside so the thread and the box stay in view. */
#recDlg.full{position:fixed; inset:var(--vvt,0px) 0 auto 0; width:100%; max-width:100%; height:var(--vvh,100dvh); max-height:none; margin:0}
#recDlg.full > .dlgbox{height:100%; max-height:none; display:flex; flex-direction:column; gap:8px; border:0; border-radius:0; box-shadow:none; overflow:hidden;
  padding:12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
#recDlg.full .dlg-head{flex:none; width:100%; max-width:760px; margin:0 auto} /* the title and the X line up with the chat column's edges (Batch V5) */
#recDlg.full .rec{flex:1; min-height:0; width:100%; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:8px; overflow:auto; overscroll-behavior:contain}
#recDlg.full .rec > *{flex:none}
#recDlg.full .rec > .thread{flex:1 1 auto; height:auto; min-height:140px}
html.kb-up #recDlg.full .rec-facts{display:none}
/* The corner window (Decision 131, the founder's note V6): on 1280 wide and up a chat is a card docked in the bottom right
   corner, not a modal box, so the page scrolls behind it. The same card as every box (the surface, the line, the shadow, the
   red X); its head holds the title, Make bigger and the X; the thread fills what is left and the write box stays at its foot.
   It sits over the page's own bars and under the top layer, so a toast and every box open over it. */
#recDlg.corner{position:fixed; inset:auto 24px 24px auto; z-index:70; width:420px; max-width:calc(100vw - 48px); height:min(680px, calc(100dvh - 120px)); max-height:none; margin:0}
#recDlg.corner > .dlgbox{height:100%; max-height:none; display:flex; flex-direction:column; gap:8px; overflow:hidden; padding:12px 14px 14px; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.28)}
#recDlg.corner .dlg-head{flex:none; position:static}
#recDlg.corner .dlg-head h3{font-size:16px}
#recDlg.corner .rec{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:auto; overscroll-behavior:contain}
#recDlg.corner .rec > *{flex:none}
#recDlg.corner .rec > .thread{flex:1 1 auto; height:auto; min-height:120px}
/* the small chat's corner button minimizes it to the Chat button, a bar, not the red x (the founder, 2026-10-31) */
#recDlg.corner .dlg-x{font-size:0; padding:0; background:var(--sear-tint); color:var(--sear-text); border-color:color-mix(in srgb,var(--sear) 35%,transparent)}
#recDlg.corner .dlg-x{position:relative} /* the bar sits dead center: the hidden x is still a row of the grid, so the bar is placed on its own */
#recDlg.corner .dlg-x::before{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:3px; border-radius:2px; background:currentColor}
#recDlg .rec-size{flex:none; min-height:36px}
#recDlg .rec-size[hidden]{display:none}
/* the Chat button that brings the corner chat back, with its own small x to forget it */
.chatdock{position:fixed; right:24px; bottom:24px; z-index:70; display:flex; align-items:center; gap:6px}
.chatdock[hidden]{display:none}
.chatdock > .btn{min-height:44px; padding:0 18px; border-radius:999px; box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:8px; font-weight:700}
.chatdock .fsmark{display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--gold)}
.chatdock-x{width:32px; height:32px; border-radius:50%; border:1px solid var(--bad); background:var(--bad); color:var(--bad-ink); font-size:18px; line-height:1; padding:0 0 2px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
/* Chat with us or Send us a message from a help page (Decision 125): the board shows only the window over a plain page,
   and closing it goes back to the help page */
html.back body > :not(dialog):not(.toast){visibility:hidden}
/* The pill that brings the sheet back when the customer closed it while their hold is live. */
#ordersList .oagain{width:auto; min-height:40px; font-size:14px; margin:8px 0 2px; white-space:normal; text-align:left}
.flowpill{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60; background:var(--gold); color:var(--gold-ink); border-color:var(--gold); box-shadow:var(--shadow); font-weight:600; font-size:14px; min-height:44px; padding:0 14px 0 8px; display:inline-flex; align-items:center; gap:10px; width:236px; justify-content:space-between}
/* the pill's three fixed parts (Research 032 section 3.7): the timer box, what is next, Open */
.flowpill .fp-t{font-family:"DM Mono",monospace; font-weight:700; width:6ch; text-align:center; padding:4px 0; border-radius:7px; background:rgb(0 0 0 / .12); font-variant-numeric:tabular-nums}
.flowpill .fp-t.red{background:var(--bad); color:var(--bad-ink)}
.flowpill .fp-n{flex:1; text-align:center; font-weight:800; white-space:nowrap}
.flowpill .fp-o{text-decoration:underline; text-underline-offset:2px; font-weight:700}
@media (prefers-reduced-motion:reduce){.sc-view[data-mode="marquee"] .sc-track{animation:none}}
/* The dots under the phone row: one per card, the one in view filled. Each is a 44 px tap target when there is room and shrinks
   evenly to 24 px on a long row. The row keeps its 44 px on a phone from the first paint, empty until the vendors land and empty
   when a single card fits, so nothing below the showcase moves when the dots appear; a desktop never shows it. The idle dot is a
   ring in --ink-3 (5.8:1 on the card in the light theme since #63675A, 4.7:1 in the dark one, over the 3:1 WCAG 1.4.11 asks of a control's edge),
   the same ring as Web/launch/index.html; the one in view is filled with the sear. */
.sc-dots{display:flex; justify-content:center; flex-wrap:wrap; max-width:100%; padding:0 var(--sc-pad)}
.sc-dot{flex:0 1 44px; min-width:24px; height:44px; display:grid; place-items:center; padding:0; border-radius:999px}
.sc-dot::before{content:""; box-sizing:border-box; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-3); transition:transform .15s ease, background .15s ease, border-color .15s ease}
.sc-dot[aria-current="true"]::before{background:var(--sear); border-color:var(--sear); transform:scale(1.35)}
@media (min-width:700px) and (hover:hover){.sc-dots{display:none !important}}
/* The phone card (under 700 px, or no hover): one line each for the name, the tagline and the area, nothing under 13 px, the button
   48 px tall and the card's width. scroll-snap-stop keeps a fast swipe to one card at a time. The sign in fields and buttons meet the
   44 px tap rule here too, as on Web/launch/index.html. */
@media (max-width:699px), (hover:none){
  .sc-copy{padding-right:0}
  .sc-dots{min-height:44px}
  .sc-head .eyebrow, .sc-rib{font-size:13px; letter-spacing:.08em}
  .sc-card{scroll-snap-align:center; scroll-snap-stop:always}
  .sc-name{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:none; font-size:17px}
  .sc-tag, .sc-sub{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sc-meta{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:none; font-size:13px; letter-spacing:.06em}
  .sc-meta .sc-cnt{display:none} /* the area whole, the count only when there is no area */
  .sc-meta .sc-area:empty + .sc-cnt{display:inline}
  .sc-next{font-size:14px}
  .sc-body{padding:26px 14px 8px}
  .sc-act{padding:8px 14px 14px}
  .sc-card .sc-follow{min-height:48px; padding:0 12px; font-size:14px} /* .sc-card first: .btn.sm sets 13 px and outranks a lone class */
  .sc-head .tiny{font-size:13px}
  .field input{min-height:44px}
  #signupBtn, #verifyBtn{min-height:48px}
  .consent{min-height:44px; align-items:center} /* the checkbox row is one 44 px tap target; the label already toggles the box */
  .consent input{margin-top:0}
}

/* hero */
.hero{padding:24px 0 20px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(30px,6.6vw,50px); line-height:.98; margin:9px 0 12px}
.nodrop .cols{grid-template-columns:minmax(0,1fr)}
/* The front hero (Decision 069): one promise in the biggest words on the page, one line under it, and the next drop card
   beside it on a desk (under it on a phone, in thumb reach). One orange button on the screen: the card's for a customer,
   Sign up to sell on the vendor's view (/?sell=1). */
/* Batch M (Decision 070, Research 014): the words and the card start on the same line (top aligned, never centered, so the card
   never floats in a gap), the hero's height comes from what is in it, and the spacing is the 8 px scale: 16 inside a group, 24
   between groups, 40 to 48 between sections. The one search box lives here, under the line, so the way in to search and browse
   is on the first screen at every count of vendors (the founder's P2). */
.fhero{display:grid; gap:24px; align-items:start; padding:24px 0 32px}
@media (min-width:860px){.fhero{grid-template-columns:minmax(0,1fr) 360px; column-gap:48px; padding:40px 0 48px}}
.fh-text{display:grid; gap:16px; justify-items:start; align-content:start; min-width:0}
.fh-h1{font-size:clamp(38px,7.2vw,58px); line-height:1; letter-spacing:-.02em; max-width:13ch; margin:0}
.fh-sub{color:var(--ink-2); font-size:16.5px; line-height:1.45; max-width:44ch; margin:0}
.fh-find{width:100%; max-width:560px; margin-top:8px}
.fh-find .find-row{width:100%}
.fh-acts{display:flex; gap:8px 20px; align-items:center; flex-wrap:wrap}
.fh-browse{font-weight:700; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px; min-height:32px; font-size:14.5px} .fh-browse:hover{text-decoration:underline; text-underline-offset:3px}
.fh-acts:empty{display:none}
html:not([data-side="sell"]) .fh-pre[data-for="sell"], html[data-side="sell"] .fh-pre[data-for="eat"]{display:none} /* the first paint's links, the side it opens on */
.fh-btns{display:flex; flex-wrap:wrap; gap:10px; width:100%} /* the vendor's one door, Sign up to sell (the founder, 2026-09-28: one, not two side by side) */
.fh-btns .btn{font-size:16px; min-height:48px; padding:0 24px}
.fh-card{display:grid; gap:10px; align-content:start; min-width:0}
.vstatic{padding:24px 0} html[data-boot] .vstatic, .vstatic:empty{display:none} /* for readers that run no script (Decision 074) */
.nx-lab{margin:0}
/* The live meter under the next drop card (the founder, 2026-10-20: "the drop needs more juice"): a LIVE dot, how many are
   grabbed, a clock, and a bar the card's width that fills as slots go. The bar is one piece whatever the slot count; up to 40
   slots it is cut into one notch a slot. */
.nx-meter{margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); display:grid; gap:8px}
.nx-meter[hidden]{display:none}
.nxm-top{display:flex; align-items:center; gap:8px; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.nxm-live{display:inline-flex; align-items:center; gap:6px; color:var(--go); font-weight:700}
.nxm-live i{width:9px; height:9px; border-radius:50%; background:var(--go); box-shadow:0 0 0 0 color-mix(in srgb,var(--go) 60%,transparent); animation:nxpulse 1.6s infinite}
.nx-meter.soon .nxm-live{color:var(--sear-text)} .nx-meter.soon .nxm-live i{background:var(--sear); animation:none}
.nxm-clock{margin-left:auto; font-size:15px; letter-spacing:.02em; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.nxm-bar{position:relative; height:16px; border-radius:999px; background:var(--sear-tint); overflow:hidden}
.nxm-fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:repeating-linear-gradient(-45deg,var(--sear) 0 10px,color-mix(in srgb,var(--sear) 80%,#fff) 10px 20px); background-size:28px 28px; transition:width .8s cubic-bezier(.2,.8,.2,1); animation:nxstripe 1s linear infinite}
.nxm-notch{position:absolute; inset:0; pointer-events:none}
.nxm-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.nxm-count{font-family:"Archivo Black",Arial,sans-serif; font-size:20px; line-height:1}
.nxm-count.bump{animation:nxbump .5s ease-out}
.nxm-left{font-size:13.5px; color:var(--ink-2)}
@keyframes nxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--go) 60%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent}}
@keyframes nxstripe{to{background-position:28px 0}}
@keyframes nxbump{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.nxm-live i,.nxm-fill,.nxm-count.bump{animation:none} .nxm-fill{transition:none}}
html:not([data-side="sell"]) #nxLab, html[data-side="sell"] #fhFind{display:none} /* the page's first paint is already the side it opens on */
.fh-link{background:none; border:0; padding:0; font:inherit; font-size:14.5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px; display:inline-flex; align-items:center}
.fh-link:hover{color:var(--ink)}
.next{list-style:none; margin:0; padding:0; min-width:0}
.next .sc-card{width:100%; box-shadow:var(--shadow)}
.next .sc-act .btn{width:100%; min-height:48px; font-size:15px}
.next .nx-none{padding:18px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--ink-2); font-size:14.5px}
.next .nx-none b{display:block; color:var(--ink); font-size:16px; margin-bottom:2px}
.next .sc-photo{aspect-ratio:16 / 10} /* shorter than a row card's 4:3, so the card's height meets the words beside it */
@media (max-width:699px){.next .sc-photo{aspect-ratio:16 / 9}}
/* Who sells here (Decision 069, the audit's change 3): the invite cards' own words as one quiet strip, and one way in. */
.sec.who{padding-top:22px; border-top:1px solid var(--line)} /* .sec.who, not .who: the chip's name in the header is a .who too (it drew a line over the name, batch M) */
.who-list{list-style:none; margin:4px 0 16px; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 22px}
@media (min-width:600px){.who-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:960px){.who-list{grid-template-columns:repeat(3,minmax(0,1fr))}} /* six kinds of seller: 1, 2 or 3 across, never five and one alone (Research 015) */
/* Why cooks sell here (Research 015): four cards, 1, 2 or 4 across, then what you need and the door. */
.sec.why{padding-top:8px}
.why-list{list-style:none; margin:4px 0 16px; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media (min-width:600px){.why-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.why-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why-list li{display:grid; gap:6px; align-content:start; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.why-list b{font-size:16px}
.why-list span{font-size:14.5px; color:var(--ink-2); line-height:1.45}
.why-need{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; padding:16px; border:1px dashed var(--line-2); border-radius:12px}
.why-need p{margin:0; max-width:70ch; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.why-need p b{color:var(--ink)}
.why-need .need{margin:4px 0 8px; padding-left:20px; max-width:70ch; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.why-need .need li{margin:2px 0}
.why-need .btn{flex:none; min-height:44px}
.who-list li{display:grid; gap:1px; align-content:start; padding:10px 0; border-bottom:1px solid var(--line)} /* start: a short line sits at the top like its neighbours (batch M) */
.who-list b{font-size:15px}
.who-list span{font-size:13.5px; color:var(--ink-2)}
.who-acts{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center}
.hero .sub{color:var(--ink-2); max-width:60ch}
.facts{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:18px}
/* The pickup day (2026-10-01): the first and biggest thing on a drop, a button; the day on each window and across the hold. */
.whenbtn{display:flex; width:fit-content; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 12px; padding:12px 18px; border-radius:14px; border:2px solid var(--sear); background:var(--sear-tint); color:var(--ink); font:inherit; text-align:left; cursor:pointer; max-width:100%}
.whenbtn .whenk{width:100%; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--sear-text); font-weight:700}
.whenbtn b{font-size:26px; line-height:1.15; font-weight:800}
.whenbtn .whent{font-size:18px; font-weight:600}
.whenbtn:hover{background:color-mix(in srgb,var(--sear) 18%,var(--sear-tint))}
.whenmore{margin:-4px 0 12px; padding:10px 14px; border-radius:10px; background:var(--sear-tint); font-size:15px; line-height:1.45; max-width:640px}
.wday{font-weight:800; font-size:14px; color:var(--sear-text); margin-bottom:2px}
.flowwhen{margin:0; padding:8px 14px; border-radius:10px; border:2px solid var(--sear); background:var(--sear-tint); font-size:15px; line-height:1.35; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px}
.flowwhen .k{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--sear-text); font-weight:700}
.flowwhen b{font-size:17px; white-space:nowrap} /* the whole date on one row; on a phone it drops under the label */
.flowwhen .fw2{flex:1 0 100%}
@media (max-width:600px){.whenbtn b{font-size:22px} .whenbtn .whent{font-size:16px}}
.fact .v small{display:block; font-weight:500; font-size:12.5px; color:var(--ink-3); margin-top:1px}
/* The menu on a drop's page (Research 015): one card per item, the words on the left and the photo (or the food's own mark) on
   the right, the way DoorDash and Uber Eats lay out a menu row; one column on a phone, two from 700 px. Nothing is clamped: the
   whole description shows. */
.menu-sec .mh{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:16px 0 8px}
.menu-sec .mh:first-child{margin-top:0}
.menu-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:700px){.menu-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mi{display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:12px; align-items:start; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; min-height:84px}
.mi-name{font-weight:700; font-size:15.5px; line-height:1.25; overflow-wrap:anywhere}
.mi-desc{font-size:13.5px; color:var(--ink-2); margin-top:3px; overflow-wrap:anywhere}
.mi-price{font-weight:700; font-size:14.5px; margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.mi-left{font-size:12.5px; font-weight:600; color:var(--wait)}
.mi-left.out{color:var(--bad-text)}
.mi-pic{width:84px; height:84px; border-radius:10px; overflow:hidden; background:var(--surface-2)}
.mi-pic > img, .mi-pic > svg{width:100%; height:100%; object-fit:cover; display:block}
.mi.out .mi-pic, .mi.out .mi-name, .mi.out .mi-desc{opacity:.55}
/* Food allergies (Decision 088): what the vendor says an item contains, under its words; "Allergens not listed" muted while
   the vendor has not marked it. A red tag ("Has peanuts") on an item that has what the signed in customer avoids. */
.mi-alg{font-size:12.5px; color:var(--ink-2); margin-top:4px; overflow-wrap:anywhere}
.mi-alg.none{color:var(--ink-3)}
.alg-hits{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.alg-hit{display:inline-block; font-size:12px; font-weight:700; line-height:1.3; padding:2px 8px; border-radius:999px; background:var(--bad); color:var(--bad-ink)}
.alg-pick{border:0; padding:0; margin:0 0 10px; min-width:0}
.alg-pick legend{font-weight:600; font-size:13.5px; padding:0; margin-bottom:6px}
.alg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:2px 12px}
.alg-box{display:flex; gap:8px; align-items:center; font-size:14px; min-height:36px; cursor:pointer; color:var(--ink)}
.alg-box input{width:18px; height:18px; margin:0; flex:none}
@media (max-width:899px){.alg-box{min-height:44px}}
.alg-words{margin:4px 0 10px; color:var(--ink-2)}
.alg-btns{display:flex; gap:10px; flex-wrap:wrap}
.alg-mine{margin:0 0 8px; color:var(--ink-2)}
/* Sold out on the board: the line and the way back for the next drop (Research 015: Hotplate, Resy and Tock turn a sold out
   drop into a follow). */
.soldnext{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; margin:0 0 12px; padding:10px 12px; border:1px dashed var(--wait); border-radius:12px; background:var(--wait-tint); font-size:14px; color:var(--ink)}
.soldnext[hidden]{display:none}
/* The grab bar: a phone only, at the foot of the screen, over the safe area. */
/* the demo board's banner (N1): gold, under the header, with the way back; the header's drops, search and account step aside */
.demobar{background:var(--wait-tint); border-bottom:1px solid var(--wait); color:var(--ink)}
.demobar[hidden]{display:none}
.demobar-in{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding-block:10px}
.demobar-in p{flex:1 1 260px; margin:0; font-size:14px; line-height:1.4}
.demobar-in .btn{flex:none}
body.demo .top-mid, body.demo #ordersBtn, body.demo #acctSlot{visibility:hidden} /* Help stays: its chat and the Contact box answer in the page */
.grabbar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.grabbar[hidden]{display:none}
.grabbar .gb-txt{flex:1; min-width:0; display:grid; gap:1px; font-size:13.5px; font-weight:600; line-height:1.25} /* a phone: three rows, each one thing (the day, the window, how many open); a row never wraps */
.grabbar .gb-txt span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* The claim button with juice (the founder's live test, 2026-10-23: "it needs to stand out so people hit it fast"): bigger and
   bolder than the page's other buttons, a glow in the brand color and a slow pulse, on every screen width until the slots
   themselves are in view (it used to show only under 700 px). The pulse stops for people who asked for less motion. */
.grabbar .btn{flex:none; min-height:52px; padding:0 22px; font-size:16px; font-weight:800; letter-spacing:.01em; box-shadow:0 0 0 4px color-mix(in srgb,var(--sear) 22%,transparent), 0 8px 22px color-mix(in srgb,var(--sear) 35%,transparent); animation:grabpulse 1.8s ease-in-out infinite}
.grabbar .btn:disabled{animation:none; box-shadow:none}
@keyframes grabpulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.grabbar .btn{animation:none}}
@media (min-width:700px){.grabbar{justify-content:center} .grabbar .gb-txt{flex:0 1 auto; display:flex; gap:0; font-size:15px} .grabbar .gb-txt span + span::before{content:" · "; white-space:pre} .grabbar .btn{min-height:56px; padding:0 30px; font-size:17px}}
body.grabbing .foot, body:has(#flowPill:not(.hide)) .foot, body:has(#ratePrompt:not([hidden])) .foot{padding-bottom:84px} /* no bar fixed at the foot covers the last line of the page */
.fact .k{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.fact .v{font-size:16px; font-weight:700; margin-top:2px}

.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; padding:24px 0 50px; align-items:start} /* minmax(0,…) so the run sheet's min-width scrolls inside .scroller instead of widening main past a phone */
@media (min-width:1024px){.cols{grid-template-columns:minmax(0,1fr) 330px; gap:34px}}
.sec{margin-bottom:30px}
.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.sec-head h2{font-size:20px; font-family:"Archivo Black",Arial,sans-serif; letter-spacing:-.01em}
.sec-head .note{font-size:13px; color:var(--ink-3)} /* a heading's note sits beside it, never at the far edge of a wide screen (the founder, 2026-09-28); See all (#findNote) keeps the right edge */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.pad{padding:16px}

/* board */
.boardbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:11px}
.legend{display:flex; gap:13px; flex-wrap:wrap; margin-left:auto}
.lg{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2)}
.sw{width:11px; height:11px; border-radius:3px; border:1px solid var(--line-2); flex:none}
.sw.open{background:var(--surface); border-color:var(--sear)}
.sw.held{background:color-mix(in srgb,var(--sear) 10%,transparent); border-color:var(--sear); border-width:2px}
.sw.pend{background:var(--sear); border-color:var(--sear)}
.sw.sold{background:var(--go); border-color:var(--go)}
.sw.mine{background:var(--gold); border-color:var(--gold-edge)} /* the gold edge: gold alone is 2.52:1 on white, the edge 3.58:1 (the audit's F13, WCAG 1.4.11) */
.boardstate{font-size:12.5px; color:var(--ink-2); margin:-4px 0 10px; font-variant-numeric:tabular-nums} /* the same state in words, for a phone with no motion (Decision 033) */
.boardstate b{color:var(--ink); font-weight:700; font-family:"DM Mono",monospace}
#botCheck.on{margin:0 0 10px} /* Cloudflare Turnstile's box, shown only while it needs a tap (Decision 064) */
.gauge{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.gbar{flex:1; min-width:180px; height:8px; border-radius:999px; background:var(--gone-tint); overflow:hidden; display:flex}
.gbar i{height:100%; display:block; transition:width .25s ease}
.gbar i.sold{background:var(--go)}
.gbar i.held{background:var(--sear)} /* held is act now, the squares' own orange (rule 9) */

.windows{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)} /* every window a full row at every width (2026-10-26): on a desk the day, the time and the count on one line, the squares across it */
.win{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 13px 12px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease, box-shadow .15s ease}
/* The windows read like Resy's times (Decision 059, rule 6): a window you can claim has an orange edge; yours keeps the gold
   ring (Decision 033: yours is gold); a full one is a dashed amber card whose button is Next in line, never a dead grey box. */
.win:has(.claim.primary){border-color:var(--sear)}
.win.mine{border-color:var(--gold-edge); box-shadow:inset 0 0 0 1px var(--gold-edge)}
.win.full{border-style:dashed; border-color:var(--wait)}
.win.full .claim{border:1px dashed var(--wait); background:var(--wait-tint); color:var(--wait)}
.win .wh{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.win .wh .wday, .win .wt{white-space:nowrap}
@media (max-width:699px){.win .wh .wday{flex:1 0 100%}} /* a phone: the day on its own row, the time and the count under it */
@media (min-width:700px){.windows:not(.wide) .seats{grid-template-columns:repeat(auto-fill,26px)}} /* a desk: 26 px squares across the row */
.win .wt{font-family:"Archivo Black",Arial,sans-serif; font-size:18px; line-height:1.05; letter-spacing:-.01em}
.win .wt span{font-size:11px; font-family:"Archivo",sans-serif; font-weight:600; color:var(--ink-3); margin-left:3px}
.win .wc{margin-left:auto; font-family:"DM Mono",monospace; font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.win.full .wc{color:var(--wait)}
.seats{display:grid; grid-template-columns:repeat(10,1fr); gap:3px}
/* A big window (N8, 2026-09-29): every window a full row, its squares across the width, about 36 a row on a desk and 20 on a phone */
.windows.wide{grid-template-columns:minmax(0,1fr)}
.windows.wide .seats{grid-template-columns:repeat(auto-fill,minmax(18px,1fr))}
@media (max-width:699px){.windows.wide .seats{grid-template-columns:repeat(auto-fill,minmax(12px,1fr)); gap:2px}}
/* a tap on an open square claims one (N9): the hand shows where a tap does something */
.win:has(.claim.primary) .seat:not(.held):not(.pend):not(.sold):not(.locked):not(.closed):not(.mine){cursor:pointer}
/* A square shows the step the order is on (Decision 033): open is empty with a thin orange edge, held is an orange outline
   (the 30 seconds to say yes and the 5 minutes to build), paying is solid orange, paid is solid green, yours is gold. The
   feedback (the pop, the ripple, the pulse) is decoration: the colour is the state, and it changes with motion turned off too. */
.seat{position:relative; aspect-ratio:1; border-radius:2.5px; border:1px solid color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface); transition:background .2s ease, border-color .2s ease, transform .18s ease}
.seat.held{background:color-mix(in srgb,var(--sear) 10%,transparent); border-color:var(--sear); border-width:2px; animation:seat-pop .18s ease-out}
.seat.pend{background:var(--sear); border-color:var(--sear); border-width:1px}
.seat.sold{background:var(--go); border-color:var(--go)}
.seat.sold.just::after{content:""; position:absolute; inset:0; border-radius:3px; border:2px solid var(--go); animation:seat-ripple .2s ease-out forwards; pointer-events:none}
@keyframes seat-pop{0%{transform:scale(1)} 45%{transform:scale(1.15)} 100%{transform:scale(1)}}
@keyframes seat-ripple{0%{inset:0; opacity:.9} 100%{inset:-4px; opacity:0}}
/* Your own squares: gold with a still gold ring, so they are found at a glance (Decision 059, rule 14: nothing pulses). Paid ones
   keep the gold ring on green; a picked up one a wider gold ring, so a finished order is still yours on the board. */
.seat.mine{background:var(--gold); border-color:var(--gold-edge); box-shadow:0 0 0 2px color-mix(in srgb,var(--gold-edge) 55%,transparent)}
.seat.mine.sold{background:var(--go); border-color:var(--go); box-shadow:0 0 0 2px var(--gold-edge)}
.seat.mine.sold.done{box-shadow:0 0 0 3px var(--gold-edge)}
/* The last square: one wave across the grid, left to right, then SOLD OUT. */
.seats.wave .seat{animation:seat-wave .2s ease-out both; animation-delay:calc(var(--i, 0) * 7ms)}
@keyframes seat-wave{0%{transform:scale(1)} 40%{transform:scale(1.15)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.seats.wave .seat{animation:none} .seat.held{animation:none} .seat.sold.just::after{display:none} .seat, .win{transition:none}}
.seat.locked{background:transparent; border-style:dashed; border-color:var(--line-2)}
.seat.closed{background:transparent; border-style:dashed; border-color:var(--gone); opacity:.55} /* taken off the board by the vendor */
.win.locked{background:var(--surface-2); border-style:dashed}
.win.locked .wt{color:var(--ink-3)}
.win.locked .wc{color:var(--wait)}
.win.locked .qty{visibility:hidden}
.rel{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:13px}
.rel .k{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.rel .cd{font-family:"DM Mono",monospace; font-weight:500; color:var(--wait); margin-left:auto; font-variant-numeric:tabular-nums}
.rel .track{display:flex; gap:3px; width:100%}
.rel .track i{flex:1; height:5px; border-radius:999px; background:var(--gone-tint)}
.rel .track i.on{background:var(--go)}
.rel .track i.next{background:var(--wait)}
.win .wf{display:flex; align-items:center; gap:8px; margin-top:auto}
.qty{display:inline-flex; align-items:center; border:1px solid var(--edge); border-radius:8px; background:var(--surface-2); flex:none}
.qty button{width:28px; height:32px; display:grid; place-items:center; font-size:15px; color:var(--ink-2)}
.qty button:hover{color:var(--sear-text)}
.qty button:disabled{opacity:.35; cursor:default}
.qty .n{width:18px; text-align:center; font-family:"DM Mono",monospace; font-size:13px}
.win .claim{flex:1; padding:8px 10px; font-size:13px}
@media (min-width:700px){.win .claim{flex:0 1 360px}} /* a desk: Claim a normal width on the full row card */
/* Rule 11 (Decision 059): on a phone every tap target that moves an order along is 48 px tall with 8 px between: the stepper's
   minus and plus, Claim, Yes, Pay and the full size buttons. */
@media (max-width:699px), (hover:none){
  .qty button{width:48px; height:48px; font-size:18px}
  .qty .n{width:24px; font-size:15px}
  .win .claim{min-height:48px; font-size:14px}
  .btn:not(.sm){min-height:48px}
  .top .btn{min-height:0} /* the header keeps its own size */
  /* A button that sits inside a box takes the box's height, never 48 px: Search in the search bar (it hung out of the bar's
     bottom, the founder's phone, 2026-09-25) and the ticker's ask. The bar grows to 54 px instead, so Search is 44 px tall. */
  .find-box .btn{min-height:0}
  .find-box input[type=search]{min-height:54px}
  #buildGrow .btn, .pay .mains .btn{min-height:48px} /* Add 1 at while building, and the picks while building */
  .copyrow, #payActions{gap:8px}
}
.brk{grid-column:1 / -1; display:flex; align-items:center; gap:12px; color:var(--ink-3); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:2px 0}
.brk::before,.brk::after{content:""; flex:1; height:1px; background:var(--line-2)}

/* sign in */
.auth{padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
/* The sign in (Decision 069, the audit's change 6): the title, the phone and the button first; what went wrong on the line
   under them (read out as it lands); the disclosure right under the button, then the box; the quiet links last. */
.signerr{color:var(--bad-text); font-size:13.5px; font-weight:600; margin:8px 0 0}
.signerr:empty{display:none}
.authlinks{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.authlinks .linkish{color:var(--ink-2)}
.authlinks .linkish:hover{color:var(--ink)}
.consent-hint{display:block; margin:-6px 0 10px 25px; color:var(--wait); font-weight:600}
.auth h3{font-size:17px; font-weight:700; margin-bottom:4px}
.auth .lede{color:var(--ink-2); font-size:13.5px; margin-bottom:14px}
.otp{display:flex; gap:8px; align-items:end; flex-wrap:wrap; margin-top:12px; padding:12px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2)}
.otp .field{flex:1; min-width:150px}
/* the Google door (Decision 063): Google's own button, drawn by Google in its own frame, never restyled (its brand rules) */
.gdoor{margin-top:14px}
.gor{display:flex; align-items:center; gap:10px; margin:0 0 10px; color:var(--ink-3); font-size:12.5px}
.gor::before, .gor::after{content:""; flex:1; border-top:1px solid var(--line)}
#googleBtn{display:flex; justify-content:center; min-height:44px}
.otp input{letter-spacing:.3em; font-family:"DM Mono",monospace; font-size:18px; text-align:center}
/* the waiting line box (Decision 109): the place in line in the clock's juice while the code waits in our line */
.otp .cwait{width:100%; display:grid; gap:8px; justify-items:center; text-align:center}
.otp .cwait h4{margin:0; font-size:16px}
.otp .cwait .clock{width:min(260px,100%); padding:12px}
.otp .cwait .lede{margin:0}
.heldline{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:12.5px; color:var(--ink-2)}
.heldline .sw{margin:0}
.heldline .cd{font-family:"DM Mono",monospace; color:var(--wait); font-weight:500}
.seat.held{cursor:help}
.win .wh2{font-size:12.5px; color:var(--wait); margin-top:-4px}
.win .wh2:empty{display:none}
.win .wo{font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-2); margin-top:-4px; text-align:right}
.win .wo:empty{display:none}
.pre .seat{border-style:dashed; border-color:var(--line-2); background:transparent}
/* how it works: the self playing demo under the board, four steps on a loop; a tap on a step replays from that step (Decision 012) */
.howtabs{display:flex; gap:6px; justify-content:center; margin:0 auto 16px; max-width:760px}
.htab{padding:7px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.htab.on{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.htab:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.stage .frow{display:flex; gap:8px} .stage .fld.sm{flex:1; font-size:13px; min-height:34px; padding:7px 10px}
.stage .seats.big{grid-template-columns:repeat(10,1fr); gap:3px}
.how{display:grid; grid-template-columns:minmax(0,420px) 300px; gap:22px; align-items:start; justify-content:center; max-width:760px; margin:0 auto} /* the steps and the stage sit together in the middle, never stretched across the page */
#howSec > .how-head{display:grid; justify-items:center; text-align:center; gap:4px; max-width:760px; margin:0 auto 16px}
.how-lede{margin:0; color:var(--ink-2); font-size:14.5px}
.how-pause{margin-top:6px} /* Pause holds the demo on its step (WCAG 2.2.2) */
.how-promise{grid-column:1/-1; margin:0 0 4px; text-align:center; font-size:16px; color:var(--ink-2)} .how-promise b{color:var(--ink)}
/* In the dialog (a board's New here? See how it works): the head sits at the left, clear of the × in the card's own corner. */
#howBody .how-head{justify-items:start; text-align:left; padding-right:48px; margin-bottom:12px}
.how .hsteps{display:grid; gap:8px}
.how .hstep{display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink-2); transition:border-color .25s ease, background .25s ease; width:100%; text-align:left; font:inherit; line-height:inherit; cursor:pointer}
.how .hstep:hover{border-color:var(--line-2)} .how .hstep:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.how .hstep b{font-family:"Archivo Black",Arial,sans-serif; color:var(--ink-3); width:22px; flex:none; font-size:18px; line-height:1.1}
.how .hstep .t{font-weight:700; color:var(--ink)} .how .hstep .d{font-size:13px; margin-top:2px}
.how .hstep.on{border-color:var(--sear); background:var(--sear-tint)} .how .hstep.on b{color:var(--sear-text)}
.stage{position:relative; height:420px; border:1px solid var(--line-2); border-radius:22px; background:var(--ground); padding:16px; overflow:hidden; pointer-events:none; user-select:none; box-shadow:var(--shadow)}
.stage .hf{position:absolute; inset:16px; opacity:0; transition:opacity .35s ease; display:flex; flex-direction:column; gap:10px}
.stage .hf.on{opacity:1}
.stage:not(:has(.hf.on)) .hf[data-f="1"]{opacity:1} /* not playing (off screen, a hidden tab, before the first play): the first step stands, never an empty box (Research 015 sweep) */
.stage h4{font-size:14px; font-weight:700; line-height:1.3} .stage h4 b{font-family:"Archivo Black",Arial,sans-serif; color:var(--sear-text); margin-right:7px} .stage .hint{font-size:12.5px; color:var(--ink-2); min-height:18px}
.stage .fld{border:1px solid var(--line-2); border-radius:8px; background:var(--surface); padding:9px 11px; font-family:"DM Mono",monospace; font-size:15px; min-height:39px; transition:border-color .2s ease}
.stage .fld.on{border-color:var(--sear)}
.stage .hchk{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink-2)}
.stage .hchk i{width:15px; height:15px; margin-top:1px; border:1px solid var(--line-2); border-radius:4px; background:var(--surface); flex:none; display:inline-grid; place-items:center; font-size:11px; line-height:1; color:var(--sear-ink); font-style:normal; transition:background .2s ease}
.stage .hchk i.on{background:var(--sear); border-color:var(--sear)}
.stage .hhours{display:block; margin-top:3px}
.stage .btn{position:relative} .stage .btn.tap::after,.stage .seat.tap::after{content:""; position:absolute; inset:-6px; border-radius:14px; border:2px solid var(--sear); animation:tap .6s ease-out forwards}
.stage .seat.tap::after{inset:-5px; border-radius:6px}
@keyframes tap{from{opacity:1; transform:scale(.9)}to{opacity:0; transform:scale(1.12)}}
.stage .code{display:flex; gap:6px} .stage .code i{flex:1; height:40px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); display:grid; place-items:center; font-family:"DM Mono",monospace; font-size:18px; font-style:normal}
.stage .ok{display:none; align-items:center; gap:8px; color:var(--go); font-weight:700; font-size:14px} .stage .ok.on{display:flex}
.stage .mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px}
.stage .mini .wt{font-weight:700; font-size:13.5px; display:flex; justify-content:space-between} .stage .mini .wt span{font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-3); font-weight:400}
.stage .seats{margin-top:9px; grid-template-columns:repeat(5,1fr); gap:6px} .stage .seat{position:relative}
.pre .stage .seat{border-style:solid; border-color:color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface)}
/* the demo's squares read like the live board (Decision 033), on a page with no drop too */
.pre .stage .seat.held{background:color-mix(in srgb,var(--sear) 12%,transparent); border-color:var(--sear); border-width:2px}
.pre .stage .seat.pend{background:var(--sear); border-color:var(--sear)}
.pre .stage .seat.sold{background:var(--go); border-color:var(--go)}
.pre .stage .seat.mine{background:var(--gold); border-color:var(--gold-edge)}
.stage .finger{position:absolute; width:22px; height:22px; border-radius:50%; background:var(--ink); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.6); transition:opacity .2s ease, transform .2s ease}
.stage .finger.on{opacity:.55; transform:translate(-50%,-50%) scale(1)}
.stage #h2Seats{grid-template-columns:repeat(10,1fr); gap:3px} /* one row of ten, as the board draws a window */
.stage .hclaim{margin-top:9px; align-items:center} .stage .hqty{flex:0 0 auto; text-align:center; letter-spacing:.2em} .stage .hclaim .btn{flex:1; white-space:nowrap; font-size:12.5px}
.stage .hgot{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px}
.stage .rc{display:grid; gap:6px} .stage .rc .line{font-size:13px} .stage .rc .line.total{font-size:14px}
.stage .card4{display:flex; gap:8px; align-items:center; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); padding:8px 11px; font-family:"DM Mono",monospace; font-size:13px; min-height:37px; color:var(--ink-3); transition:border-color .2s ease}
.stage .card4.on{color:var(--ink); border-color:var(--sear)}
.stage .qr{width:128px; height:128px; margin:2px auto; padding:8px; background:#fff; border-radius:8px; box-sizing:border-box}
.stage .qr svg{display:block; width:100%; height:100%}
.stage .hpic{width:96px; height:128px; margin:2px auto; border-radius:8px; overflow:hidden; border:1px solid var(--line)} .stage .hpic svg{display:block; width:100%; height:100%} /* the picture at Packed in the QR's place (Decision 114) */
.stage .fld.tight{font-size:13px; min-height:34px; padding:7px 10px} .stage .halg{visibility:hidden} .stage .halg.on{visibility:visible} .stage .hadd{align-self:flex-start; font-size:12.5px}
.stage .big{font-family:"Archivo Black",Arial,sans-serif; font-size:22px; letter-spacing:.06em; text-align:center}
/* A phone: the stage first, then the four steps as a compact two column list (number and title only) so the whole thing is in view. */
@media (max-width:700px){.how{grid-template-columns:1fr} .stage{order:-1; margin:0 auto; width:min(300px,100%)} .how .hsteps{grid-template-columns:1fr 1fr; gap:6px} .how .hstep{padding:9px 10px; gap:8px; align-items:center} .how .hstep b{font-size:15px; width:14px} .how .hstep .t{font-size:13px} .how .hstep .d{display:none}}
@media (prefers-reduced-motion:reduce){.stage{height:auto; display:grid; gap:12px; pointer-events:none} .stage .hf{position:static; opacity:1; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)} .stage .btn.tap::after,.stage .seat.tap::after{display:none} .how .hstep.on{border-color:var(--line); background:var(--surface)} .how .hstep.on b{color:var(--ink-3)} .how .hstep{cursor:default} .stage .finger{display:none}}

.tag{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; border:1px solid transparent}
.tag.combined{background:var(--gone-tint); color:var(--gone)}
.stepper{display:grid; gap:6px; margin-top:4px}
.stepper .bars{display:grid; grid-template-columns:repeat(6,1fr); gap:4px}
.stepper .cap{font-size:13px; color:var(--ink-2)} .stepper .cap b{color:var(--ink); font-weight:700}
.stepper .st{display:block}
.stepper .st i{display:block; height:5px; border-radius:999px; background:var(--gone-tint)}
.stepper .st.on i{background:var(--go)}
.stepper .st.on{color:var(--go)}
.stepper .st.cur{color:var(--ink); font-weight:500}
.stepper .st.cur i{background:var(--sear)}
.livebadge{display:inline-flex; align-items:center; gap:5px; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--go)}
.linky{color:var(--sear-text); text-decoration:underline; padding:0}

/* forms */
/* A field's rows keep their own height (the founder, 2026-10-27: "Make sure that things are level in all menus, not offset").
   A row of fields (.two, .three) stretches each field to the tallest one; with the grid's default the spare height went
   into the label's and the box's rows, so a field beside a taller one (Name beside Email and its confirm line) sat lower
   and taller. Packed at the top, every label, box and hint in a row starts on the same line. */
.field{display:grid; gap:5px; align-content:start}
.field label{font-family:"DM Mono",monospace; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.ig{position:relative} .ig > span{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-weight:600; pointer-events:none} .ig > input{padding-left:30px !important; width:100%; box-sizing:border-box}
.slot{color:var(--sear-text); font-weight:700}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--sear-text); text-decoration:underline; cursor:pointer}
.phonerow{display:grid; gap:10px} @media (min-width:560px){.phonerow{grid-template-columns:1fr auto; align-items:end}}
#signupForm .disclose{margin:12px 0 10px}
.field input{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--edge); border-radius:8px; padding:9px 11px; width:100%}
.field select{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--edge); border-radius:8px; padding:9px 11px; min-height:44px}
.field input:focus-visible{outline:2px solid var(--sear); outline-offset:1px; border-color:transparent}
.field .hint{font-size:11.5px; color:var(--ink-3)}
.consent{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.4}
.consent input{width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--sear)}
.consent label{cursor:pointer}
.consent-note{display:block; margin:5px 0 12px 25px}
.consent-hours{display:block; margin:5px 0 0 25px} /* Decision 112: the texting hours, under the texts box */
.disclose{font-size:12.5px;color:var(--ink-3);margin:0 0 12px} /* the campaign's call to action, as on Web/launch/index.html; the bottom margin keeps it off the next field */
.disclose a{color:var(--sear-text)}
.ro{font-size:13px; color:var(--ink-2); margin:-4px 0 12px}
.two{display:grid; gap:10px}
/* the Contact box's two steps (Decision 130): the sign in inside the form, then the recent orders as tap choices */
.ct-sign{display:grid; gap:6px; padding:10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2)}
.ct-signline{margin:0; font-weight:700; color:var(--ink)}
#ctAuth > .sec{margin:0; padding:0; border:0; background:none; box-shadow:none}
.ct-orders{display:grid; gap:6px; margin:0; padding:0; border:0; min-width:0}
.ct-orders legend{font-family:"DM Mono",monospace; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:0; margin-bottom:5px}
.ct-olist{display:grid; gap:6px}
.ct-opt{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); cursor:pointer; font-size:15px; line-height:1.35}
.ct-opt:has(input:checked){border-color:var(--sear); box-shadow:inset 0 0 0 1px var(--sear); background:var(--sear-tint)}
.ct-opt input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--sear)}
.ct-opt span{min-width:0; overflow-wrap:anywhere}
.ct-opt b{display:block}
/* Which order? in a chat (Decision 130 point 7): one tap choice an order, the day and the vendor over the code and the food */
.hact-orders{display:grid; gap:6px}
.hact-orders > .btn{width:100%; min-height:44px; display:grid; justify-items:start; gap:2px; text-align:left; white-space:normal; padding:8px 12px}
.hact-orders > .btn span{font-weight:400}
#ctAuth #authTitle, #ctAuth #tryCustomer, #ctAuth #authVendor{display:none}
#ctAuth .auth{padding:0; border:0; background:none; box-shadow:none; max-width:none}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.three{display:grid; gap:10px} @media (min-width:560px){.three{grid-template-columns:2fr 1fr 1fr}}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--surface); flex-wrap:wrap}
.seg button{padding:6px 11px; font-size:12.5px; color:var(--ink-2); border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sear); color:var(--sear-ink); font-weight:600}

 /* Decision 027: the vendor's head (the card grown wide, with Back), the FEATURED FOODSlot head, the top five cards in the finder,
   the empty grid that fills by itself. */
.vhead{margin:18px 0 6px; display:grid; gap:10px}
/* Back, in the red of every Back (.goback): Join the waiting list under it stays the one solid orange button (Decision 059, rule 3). */
.vback{justify-self:start; min-height:44px; padding:0 16px}
.vhead-card{list-style:none; margin:0; padding:0}
.vhead-card .sc-card{width:100%; flex-direction:row; flex-wrap:wrap}
.vhead-card .sc-link{display:grid; grid-template-columns:minmax(0,1fr); flex:1 1 320px}
@media (min-width:700px){.vhead-card .sc-link{grid-template-columns:minmax(220px,38%) minmax(0,1fr); align-items:center}}
.vhead-card .sc-photo{aspect-ratio:16 / 9}
@media (min-width:700px){.vhead-card .sc-photo{aspect-ratio:4 / 3; width:100%; min-width:0}}
.vhead-card .sc-body{padding:16px 18px 10px; align-content:center}
.vhead-card .sc-name{font-size:30px; line-height:1.05}
.vhead-card .sc-act{flex:1 1 100%; padding:0 14px 14px}
@media (min-width:700px){.vhead-card .sc-item{bottom:12px}} /* on a desk the photo reaches the card's foot: the round badge sits inside it, never cut off */
@media (min-width:700px){.vhead-card .sc-act{flex:0 0 240px; align-self:center; padding:14px}}
.feat-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:22px 0 -6px; padding-top:18px; border-top:1px solid var(--line)}
.feat-word{font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--gold-text); font-weight:700}
.feat-brand{font-family:"Archivo Black",Arial,sans-serif; font-size:22px; letter-spacing:-.01em} .feat-brand em{font-style:normal; color:var(--sear-text)}
.feat-sub{font-size:13px; color:var(--ink-3); margin-left:auto}
.emptygrid{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.seats.big{grid-template-columns:repeat(10,1fr); gap:5px}
@media (min-width:560px){.seats.big{grid-template-columns:repeat(20,1fr); gap:4px}}
/* The founder's notes, 2026-09-20: the grid is the show, so nothing sits over it while it fills; SOLD OUT lands at the end. The
   empty grid reads the way the live board does (Decision 033): open is empty with a thin orange edge, held an orange outline,
   paying solid orange, paid solid green. */
.emptyover{position:absolute; inset:0; display:none; place-content:center; text-align:center; gap:4px; background:color-mix(in srgb,var(--ground) 35%,transparent); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border-radius:var(--r); pointer-events:none}
/* the line under the board, a pill that breathes (the founder's ask, 2026-09-21) */
.emptypill{margin:12px auto 0; width:max-content; max-width:100%; padding:10px 18px; border-radius:999px; background:var(--sear-tint); color:var(--sear-text); border:1px solid color-mix(in srgb,var(--sear) 45%,transparent); font-size:15px; font-weight:600; text-align:center; animation:pill-breathe 2.4s ease-in-out infinite}
.emptypill.sold{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 45%,transparent)}
@keyframes pill-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sear) 35%,transparent); opacity:.85}50%{box-shadow:0 0 0 8px transparent; opacity:1}}
@media (prefers-reduced-motion:reduce){.emptypill{animation:none}}
.emptyover.sold{display:grid}
/* the pretend board reads exactly like a live one (Decision 033): held is the orange outline, paying solid orange, paid green.
   The overrides are here because the page's .pre rule (no drop on the page) would dash and blank every square. */
#emptySeats .seat{border-style:solid; border-color:color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface)}
#emptySeats .seat.held{background:color-mix(in srgb,var(--sear) 12%,transparent); border-color:var(--sear); border-width:2px; border-style:solid} #emptySeats .seat.pend{background:var(--sear); border-color:var(--sear); border-style:solid} #emptySeats .seat.sold{background:var(--go); border-color:var(--go); border-style:solid}
.emptyover b{font-family:"Archivo Black",Arial,sans-serif; font-size:clamp(22px,6vw,40px); letter-spacing:-.01em}
.emptyover.sold b{color:var(--sear-text); font-size:clamp(34px,9vw,64px); letter-spacing:.02em}
.emptyover span{font-size:14px; color:var(--ink-2)}
.emptyover.sold span{display:none}

.mains{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px} .mains .btn{width:auto; min-height:0; padding:8px 12px; font-size:13px}
.kindh{margin-top:6px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11px}
/* the menu's photo, words and note box on an item while the order builds (Decision 066) */
.xpic{flex:none; width:48px; height:38px; object-fit:cover; border-radius:6px; border:1px solid var(--line)}
.xdesc{display:block; color:var(--ink-2); font-size:12px; line-height:1.35}
.xnotebox{padding:0 0 6px}
.xnote{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--edge); border-radius:8px; padding:8px 10px; width:100%; min-height:40px}
@media (max-width:899px){.xnote{font-size:16px; min-height:44px}}
/* hold panel */
.pay{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.pay .strip{height:3px; background:var(--sear)} /* a hold running: act now (rule 9) */
.pay.ok .strip{background:var(--go)}
.pay.dead .strip{background:var(--gone)}
.pay .body{padding:16px}
.paylogo{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex:none}
/* The hold screen (Research 033 section 2, the founder, 2026-10-21), top to bottom and centered: "Your slot is held.", the clock
   in the juice (a big 0:30, "to say yes", red under 10 seconds), one line (the vendor, the day and the time with ET), the vendor's
   picture with the count's minus and plus (N10), the green Yes, I want this slot, the outlined No thanks. The amount box, the
   order and the log wait for the next step. */
.pay .titlerow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pay .lede{color:var(--ink-2); font-size:14px; line-height:1.4; margin:6px 0 0}
.offerbox{display:grid; justify-items:center; gap:8px; text-align:center; padding:4px 0 6px}
.offerbox img{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--line); box-shadow:var(--shadow)}
.offerline{font-family:"DM Mono",monospace; font-size:18px; font-weight:500; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
/* the offer's minus and plus (N10): round, the stepper's colours, 48 px on a phone (rule 11) */
.ostep{width:40px; height:40px; border-radius:50%; border:1px solid var(--edge); background:var(--surface-2); color:var(--ink); font-size:20px; line-height:1; display:grid; place-items:center; flex:none; cursor:pointer}
.ostep:hover:not(:disabled){color:var(--sear-text); border-color:var(--sear)}
.ostep:disabled{opacity:.35; cursor:default}
.ostep[hidden]{display:none}
@media (max-width:699px), (hover:none){.ostep{width:48px; height:48px; font-size:22px}}
.pay.offer .body{display:grid; gap:12px; justify-items:center; text-align:center}
.pay.offer .titlerow{order:1; justify-content:center}
.pay.offer .titlerow .paylogo, .pay.offer #payPill, .pay.offer .sendbox, .pay.offer #payOrder, .pay.offer #payLog, .pay.offer #payItems, .pay.offer #payShow{display:none}
.pay.offer .titlerow h3{font-size:22px}
.pay.offer .paygrid{order:2; grid-template-columns:1fr; justify-items:center; gap:0; margin-top:0; width:100%}
.pay.offer #payLede{order:3; margin:0; font-size:15px; color:var(--ink)}
.pay.offer .offerbox{order:4}
.pay.offer .clock{width:min(260px,100%); padding:12px}
.pay.offer #payActions{order:5; display:grid; gap:8px; width:min(320px,100%); margin-top:4px}
.pay.offer #payActions .btn{font-size:17px; padding:13px 20px; width:100%}
.btn.go{background:var(--go); border-color:var(--go); color:#fff} /* say yes to a slot: green (Research 033 rule 1) */
.btn.go:hover{filter:brightness(1.08)}
.btn.danger{background:var(--bad); color:var(--bad-ink); border-color:var(--bad)}
.btn.danger.block{font-size:15px; padding:13px 15px}
/* In the hold sheet Yes (or Confirm, or Pay) is the one solid button; Cancel is a red outline beside it (Decision 059, rules 3 and 9). */
#payActions .btn.danger{background:transparent; color:var(--bad-text); border-color:var(--bad)}
/* The founder's live test, 2026-10-20: every button that sends a report is red (Report a problem, Report again, Reopen, Report
   that you got sick), and Withdraw, which ends one, is green. Both ask first. */
.btn.report{background:transparent; color:var(--bad-text); border-color:var(--bad)}
.btn.calm{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 45%,transparent)}
#payActions .btn.danger:hover{background:var(--bad); color:var(--bad-ink)}
/* A guest's hold while they sign in (a tester's note, 2026-10-27: "Sign in to continue needs to be the primary button. It is
   competing with the cancel"): Cancel this hold stays, as quiet red words under the order, so the sign in leads. */
.pay #payActions .btn.danger.quiet{background:transparent; border-color:transparent; color:var(--bad-text); text-decoration:underline; text-underline-offset:3px; font-size:14px; font-weight:600; min-width:0; padding:8px 12px}
.pay #payActions .btn.danger.quiet:hover{background:transparent; color:var(--bad-text); text-decoration-thickness:2px}
/* Building and confirmed: the total and the one button first and big, the order in a clear block, the log under its own title,
   Cancel 220 px and centered. */
.pay.build .sendbox .amt{font-size:38px}
.pay.build #payMain{font-size:17px; padding:13px 30px; min-width:240px}
.pay.build .sendbox.order{font-size:15px; padding:14px}
.pay.build .sendbox.order .to{font-size:15px; margin-top:0; margin-bottom:8px}
.pay.build .sendbox.order .line{font-size:15px; padding:4px 0}
.pay.build .sendbox.order .letgo{margin:0 0 8px} /* Let this slot go (Decision 115 amended 2026-11-02) */
.pay.build #payLog:not(:empty)::before{content:"Log"; display:block; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0; padding:12px 0 6px; position:sticky; top:0; background:var(--surface); box-shadow:0 7px 0 var(--surface)}
.pay.build #payLog{padding-top:0}
/* The log is a box of a set height that scrolls; the newest line is at the bottom and the view sits there (testing notes, 2026-09-19). */
#payLog{max-height:150px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
/* Paying: the amount and the order line, then the card form, then the one Pay button under it, full width; the clock keeps its own
   height beside them instead of stretching to the form (testing notes, 2026-09-19). */
.paygrid{align-items:start}
.pay.paying .sendbox{display:grid; gap:12px}
.pay.paying .sendbox .to{margin-top:-6px}
.pay.paying #payElement{margin-top:0}
.pay.paying .copyrow{order:3; margin:0}
.pay.paying #payMain{width:100%; font-size:18px; padding:14px 20px}
.pay.paying .clock{position:sticky; top:12px}
.pay.build #payActions{display:flex; justify-content:center}
.pay.build #payActions .btn{min-width:220px; padding:11px 34px; font-size:15px}
.clock .cap2{font-size:12px; color:var(--ink-3); text-align:center; margin-top:-2px}
.pay h3{font-size:18px; font-family:"Archivo Black",Arial,sans-serif}
.paygrid{display:grid; gap:14px; margin-top:14px}
@media (min-width:640px){.paygrid{grid-template-columns:1fr 194px}}
.sendbox{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:13px}
.sendbox .amt{font-family:"Archivo Black",Arial,sans-serif; font-size:30px; line-height:1}
.sendbox .to{margin-top:7px; font-size:13px; color:var(--ink-2)}
.sendbox .handle{font-family:"DM Mono",monospace; font-weight:500; color:var(--ink); font-size:13.5px}
.copyrow{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}
.clock{display:grid; place-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.clock .num{font-family:"DM Mono",monospace; font-size:32px; font-weight:500; line-height:1; letter-spacing:-.02em}
.clock.low .num, .clock.low .cap{color:var(--bad-text)} /* the last seconds (the audit's F12): the clock turns red, and the words say it once */
.clock .cap{font-size:13px; color:var(--ink-2); text-align:center}
.checks{display:flex; gap:6px; width:100%}
.chk{flex:1; height:5px; border-radius:999px; background:var(--gone-tint); overflow:hidden}
.chk i{display:block; height:100%; width:0; background:var(--wait)}
.chk.done i{width:100% !important; background:var(--gone)}
.chk.hit i{width:100% !important; background:var(--go)}
.log{margin-top:14px; border-top:1px solid var(--line); padding-top:12px; display:grid; gap:7px}
.logline{display:grid; gap:1px; font-size:12.5px} /* the clock on its own row (the day, the time and ET), the words under it */
.logline .ts{font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-3); white-space:nowrap}
.logline .tx{color:var(--ink-2)}
.logline.good .tx{color:var(--go); font-weight:600}
.logline.bad .tx{color:var(--gone); font-weight:600}

/* ticket */
.ticket{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.ticket .hd{padding:12px 14px; border-bottom:1px dashed var(--line-2); display:flex; align-items:center; gap:8px}
.ticket .hd .code{font-family:"DM Mono",monospace; font-size:12.5px; color:var(--ink-3); margin-left:auto}
/* the state at the top of the card in its colour (Research 033 rule 11): a band over the header and the pill beside the code;
   green is paid, gold is waiting on you, grey is over */
.ticket .hd .pill{flex:none}
.ticket[data-state="live"] .hd{border-top:4px solid var(--go)}
.ticket[data-state="wait"] .hd{border-top:4px solid var(--wait)}
.ticket[data-state="gone"] .hd{border-top:4px solid var(--gone)}
.ticket .bd2{padding:13px 14px; display:grid; gap:8px}
.line{display:flex; gap:10px; font-size:13.5px}
.line .l{flex:1}
.line .r{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums}
.line.total{border-top:1px solid var(--line); padding-top:9px; margin-top:2px; font-weight:700; font-size:15px}
.ticket .ft{padding:0 14px 14px; display:grid; gap:8px}
.empty{padding:22px 14px; text-align:center; color:var(--ink-3); font-size:13px}

/* pickup rules */
.rules{display:grid; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.rule{display:flex; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line); font-size:13.5px}
.rule:last-child{border-bottom:0}
.rule .k{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sear-text); flex:none; width:82px; padding-top:3px}
.rule .v{color:var(--ink-2)}
.rule .v strong{color:var(--ink); font-weight:600}


/* steps */

/* ads */
.ad{border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); display:grid; place-items:center; gap:3px; color:var(--ink-3); text-align:center; padding:12px}
.ad .lbl{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.ad .dim{font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-2)}
.ad.leader{min-height:96px}
@media (max-width:620px){.ad.leader{min-height:66px}}
.ad.rect{min-height:250px}
.ad-native{display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); margin-top:14px}
.ad-native .sq{width:46px; height:46px; border-radius:8px; background:var(--gone-tint); flex:none}
.ad-native .t{font-weight:600; font-size:14px}
.ad-native .d{font-size:12.5px; color:var(--ink-3)}

@media print{
  .top, .showcase, .hero, .foot, .toast, aside{display:none !important}
  .cols{display:block}
  .scroller{max-height:none; overflow:visible}
}

.foot .btn, #findNear{white-space:nowrap}
.foot-mark{display:inline-flex; align-items:center; gap:10px; color:var(--ink)} .foot-mark .wm{font-family:"Archivo Black",Arial,sans-serif; font-weight:400; font-size:14px} .foot-slogan{color:var(--ink-2)} /* the slogan on every page's foot (Decision 070): a phone's header has no room for it */
.foot{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--ink-3); font-size:12.5px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
/* A popover: it sits in the top layer, over any open dialog (the founder's notes, 2026-09-20: the Stripe error hid behind the sheet).
   At the top of the screen, as wide as a box, the surface color with a colored mark on the left (green check: done; red !: not done;
   black i: a plain note) and the red X every box has. The founder, 2026-10-24: the small dark pill at the foot was missed by everyone.
   It stays as long as the words take to read (4 to 9 seconds), waits while the pointer is on it, and a tap closes it. */
.toast{position:fixed; inset:auto; left:50%; top:calc(10px + env(safe-area-inset-top)); margin:0; translate:-50% -16px; width:min(560px, calc(100vw - 24px)); background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-left:7px solid var(--ink); border-radius:var(--r); padding:12px 12px 12px 14px; font-size:16px; font-weight:600; line-height:1.35; z-index:80; box-shadow:0 10px 30px rgba(0,0,0,.22); opacity:0; pointer-events:none; transition:opacity .2s ease, translate .2s ease; display:flex; align-items:flex-start; gap:10px; text-align:left; cursor:pointer}
.toast:popover-open{display:flex}
/* why the sign in sheet opened (Batch V1): the words of the toast that pointed to sign in, in the toast's own look */
.signwhy{margin:0 0 12px; padding:10px 12px 10px 14px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-left:7px solid var(--ink); border-radius:var(--r); font-size:16px; font-weight:600; line-height:1.35}
.signwhy[hidden]{display:none}
.toast.on{opacity:1; translate:-50% 0; pointer-events:auto}
.toast .tmark{flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:800; line-height:1; background:var(--ink); color:var(--ground)}
.toast .twords{flex:1 1 auto; min-width:0; padding-top:3px; overflow-wrap:anywhere}
.toast .btn{flex:0 0 auto; pointer-events:auto}
.toast .tx{flex:0 0 28px; width:28px; height:28px; border-radius:50%; border:1px solid var(--bad); background:var(--bad); color:var(--bad-ink); font-size:18px; line-height:1; padding:0 0 2px; display:grid; place-items:center; cursor:pointer; margin:-1px -2px 0 0}
.toast.good{border-left-color:var(--go)} .toast.good .tmark{background:var(--go); color:#FFFFFF}
.toast.bad{border-left-color:var(--bad)} .toast.bad .tmark{background:var(--bad); color:var(--bad-ink)}
/* The floor (Research 015, 2026-09-28, the founder: "everything must look properly, nothing cut off"): found by a sweep of every
   screen at 320, 375, 768, 1280 and 1440 px. Every tap target is 24 px or more (WCAG 2.2, 2.5.8), the header's mark 44 (Apple);
   no text is under 11 px; no words are cut with three dots or a hidden line: a line that does not fit wraps. */
.top a.n{min-height:44px}
.foot a{display:inline-flex; align-items:center; min-height:32px}
.linkish{min-height:32px; display:inline-flex; align-items:center}
.findlist .fl-tag, .fl-tag, .sc-area, .sc-meta, .fact .k, .rule .k, .find-drop .fl-tag{font-size:11px}
.sc-name, .sc-tag, .sc-sub, .sc-meta{display:block; -webkit-line-clamp:unset; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere}
.vhead-card .sc-name{line-height:1.15}
/* a Tab grows to fit its words (it was one fixed 64 px with the words cut, batch J): 64 px at least, the picture its full height */
.findlist li{height:auto; min-height:64px}
.findlist li a{height:auto; min-height:64px; padding:8px 10px 8px 0}
.findlist .fl-logo{height:auto; min-height:64px; align-self:stretch; margin:-8px 0}
.findlist .fl-name, .findlist .fl-sub{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere}
.findlist .fl-tag{white-space:normal; overflow:visible; text-overflow:clip}
/* the drops strip on a narrow phone: two short lines rather than a line cut with three dots */
input[type=checkbox]{width:20px; height:20px; flex:none}
.pay-or{text-align:center; margin:10px 0 0; color:var(--ink-3)} .linkbtn{min-height:32px} #dropPanel a, #ordersList .dh a, .notyou{display:inline-flex; align-items:center; min-height:32px} .fl-logo svg.fm, .ft-logo svg.fm{padding:0} .k.live, .ptag, .dp-list .k{font-size:11px}
/* The waiting line (Decision 096): the demo board blurred behind, the place in line on a card over it. */
body.inline > :not(#lineCover){filter:blur(6px); pointer-events:none; user-select:none}
.linecover{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb,var(--ground) 45%,transparent)}
.linecard{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px 20px; text-align:center}
.linecard h2{font-size:24px; margin:0 0 6px}
.linecard .lplace{font-size:44px; font-weight:800; line-height:1.1; margin:12px 0 2px; color:var(--sear-text)}
.linecard .lsub{color:var(--ink-2); margin:0 0 14px}
.linebar{height:12px; border-radius:6px; background:var(--gone-tint); overflow:hidden; margin:0 0 14px}
.linebar > i{display:block; height:100%; width:4%; background:var(--sear); border-radius:6px; transition:width .8s ease}
.linecard .ldrop{font-weight:600; margin:0 0 8px}
.linecard .lnote{font-size:14px; color:var(--ink-3); margin:0}
.linecard .lacts{display:flex; flex-direction:column; gap:10px; margin-top:16px}
/* A phone zooms the whole page in when a box under 16 px is tapped, and the sheet's X and Send end up past the edge (the founder's iPhone, 2026-10-28). Every box we type in is 16 px on a phone or any touch screen. */
@media (max-width:699px), (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]), select, textarea{font-size:16px !important}}