/* Order Online (batcheats.com/order/). Owner: P6 (Design). Loaded only by order/index.html,
so every token below is scoped to /order/.
Hooks app.mjs and ui.mjs rely on (never rename): #back, [data-tab], [data-cart-count],
#message, #sheet, .sheet, [data-form-summary], .form-summary, [data-error-for],
.field-error, .blocked-hint, --keyboard-room (and --visible-viewport), :root[data-theme].
CSP: the page runs under style-src 'self'. No style= attributes and no element.style writes;
app.mjs only sets the custom properties --keyboard-room and --visible-viewport.
Class vocabulary for screen modules (all optional; plain markup is styled too):
Layout .stack (vertical rhythm) · .cluster (wrapping row) · .section-head (h2 + link)
.card · .card.flat · .food-grid (cards; automatic for 2+ .food-card siblings)
.rail (sideways chip/shop scroller that never scrolls the page)
Content .lead · .hint · .muted · .visually-hidden · .meta (small muted line)
.badge / .pill (+ .success .warning .danger .neutral) · .price
.banner (+ .success .warning .danger) · .notice · .form-error
Food ui.foodCard() · .shop-card (same look, 16:9 photo, stretched link)
.shop-hero (big shop photo + name) · .food-photo (fixed-ratio photo box)
Controls ui.button kinds .primary .secondary .quiet .danger · .button (links)
.chip ([aria-pressed=true] / [aria-current] / .selected) · .stepper (− 2 +)
.choice-list > label.choice (radio or checkbox cards) · .switch (role=switch)
.actions (button row; .actions.stack for full-width stacked buttons)
Forms keep a 640 px reading width on desktop; form.wide opts out.
Lists ul.list > li > a|button (menu rows with a chevron) · .row (one tappable row)
dl.totals (receipt lines, last pair is the total) · ol.stages > li.done / [aria-current=step]
.table-wrap > table
States ui.emptyState / errorState / loadingState / placeholder (one look everywhere)
*/
/* ---------- Tokens ---------- */
:root{
--orange:#fd681b; /* brand fill: primary buttons, indicators, badges */
--orange-hover:#f25a0c;
--orange-text:#8c370e; /* orange for text, links and focus rings (7.9:1 on white) */
--on-orange:#1f1915; /* text on --orange (5.3:1) */
--ink:#29231f;--muted:#6c6158;
--line:#e8ded5; /* dividers and card edges (decorative) */
--control-line:#8a7d72; /* input and button edges: 3:1 or more against the page */
--canvas:#fffaf7;--surface:#ffffff;--soft:#fff0e4;--soft-line:#f3d3bd;
--green:#2c7351;--green-soft:#e8f3ec;--amber:#8a5a00;--amber-soft:#fff4d6;--red:#b42318;--red-soft:#fdecea;
--focus:#8c370e;
--scrim:#29231f80;
--shadow-sm:0 1px 2px #29231f0f;
--shadow:0 1px 2px #29231f0f,0 6px 20px #29231f0f;
--shadow-lg:0 -4px 40px #29231f26;
--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6158' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--radius-sm:10px;--radius:14px;--radius-lg:20px;
--gutter:16px;--content-max:1080px;--reading-max:640px;
--header-h:56px;--tab-h:64px;
--keyboard-room:0px; /* set by app.mjs from visualViewport while the keyboard is open */
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color-scheme:light;
font:16px/1.5 var(--font);
color:var(--ink);background:var(--canvas);
-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--orange:#fd681b;--orange-hover:#ff7a33;--orange-text:#ffb184;--on-orange:#1f1915;
--ink:#f6efe9;--muted:#c7bab0;--line:#40362f;--control-line:#8f8278;
--canvas:#1b1613;--surface:#26201c;--soft:#3a2a20;--soft-line:#5a3d2b;
--green:#7fd1a6;--green-soft:#1d3327;--amber:#f2c36b;--amber-soft:#3a2f17;--red:#ff9b8f;--red-soft:#3d201c;
--focus:#ffb184;--scrim:#000000a6;
--shadow-sm:none;--shadow:0 0 0 1px #ffffff08;--shadow-lg:0 -4px 40px #00000080;
--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7bab0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--orange:#fd681b;--orange-hover:#ff7a33;--orange-text:#ffb184;--on-orange:#1f1915;
--ink:#f6efe9;--muted:#c7bab0;--line:#40362f;--control-line:#8f8278;
--canvas:#1b1613;--surface:#26201c;--soft:#3a2a20;--soft-line:#5a3d2b;
--green:#7fd1a6;--green-soft:#1d3327;--amber:#f2c36b;--amber-soft:#3a2f17;--red:#ff9b8f;--red-soft:#3d201c;
--focus:#ffb184;--scrim:#000000a6;
--shadow-sm:none;--shadow:0 0 0 1px #ffffff08;--shadow-lg:0 -4px 40px #00000080;
--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7bab0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
color-scheme:dark;
}
@media (min-width:768px){:root{--gutter:32px;--header-h:68px;--tab-h:0px}}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{
/* Focus and scrollIntoView keep clear of the sticky header, the tab bar and the keyboard. */
scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 16px);
scroll-padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--keyboard-room) + 16px);
}
body{
margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
background:var(--canvas);color:var(--ink);
padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--keyboard-room));
}
img,svg,video,canvas,iframe{max-width:100%}
img{height:auto}
a{color:var(--orange-text);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 12px}
h1,h2,h3,h4{line-height:1.25;margin:0;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:780;letter-spacing:-.02em}
h2{font-size:1.25rem;font-weight:720}
h3{font-size:1.05rem;font-weight:700}
h4{font-size:1rem;font-weight:700}
small,.meta{font-size:.875rem;color:var(--muted)}
.muted,.hint,.loading{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Visible focus everywhere (3 px, 7.9:1 in light, 10:1 in dark). */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
h1[tabindex="-1"]:focus,main:focus,[data-form-summary]:focus:not(:focus-visible){outline:none}
/* ---------- Skip link ---------- */
.skip{position:fixed;left:12px;top:-120px;z-index:100;padding:12px 16px;border-radius:var(--radius-sm);background:var(--surface);color:var(--orange-text);font-weight:700;box-shadow:var(--shadow);text-decoration:none}
.skip:focus,.skip:focus-visible{top:calc(env(safe-area-inset-top) + 8px)}
/* ---------- Header, Back and the tab bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.topbar-inner{height:var(--header-h);max-width:var(--content-max);margin:0 auto;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.back-slot{justify-self:start;min-width:44px}
.back{gap:2px;padding:0 14px 0 6px;color:var(--orange-text);font-weight:700}
.back .icon{width:22px;height:22px;stroke-width:2.4}
.brand{justify-self:center;display:flex;align-items:center;min-height:44px;padding:0 6px;border-radius:var(--radius-sm);color:var(--orange)}
.wordmark{display:block;width:auto;height:24px;fill:currentColor}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background:var(--surface);border-top:1px solid var(--line)}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;
color:var(--muted);font-size:12px;font-weight:650;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tabs a[aria-current="page"]{color:var(--orange-text)}
/* The bar uses the deeper orange: 3.4:1 on white (brand --orange is 2.9:1), so the current tab is not shown by colour alone. */
.tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--orange-hover)}
.tabs a[aria-current="page"] .icon{stroke-width:2.4}
.tabs a:focus-visible{outline-offset:-4px;border-radius:12px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--orange);color:var(--on-orange);font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tabs .badge{position:absolute;top:6px;left:calc(50% + 4px);border:2px solid var(--surface);height:22px;min-width:22px}
.tabs .badge.bump{animation:badge-bump .35s ease-out}
@keyframes badge-bump{40%{transform:scale(1.25)}}
@media (max-width:767.98px) and (pointer:coarse){
/* While the keyboard is up the bar would float over the field; it comes back on blur. */
:root:has(:is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="button"],[type="submit"],[type="reset"],[type="file"]),textarea,select,[contenteditable="true"]):focus) .tabs{display:none}
}
@media (min-width:768px){
.topbar-inner{display:flex;padding:0 var(--gutter);gap:12px}
.back-slot:not(:has(> :not([hidden]))){display:none}
.back-slot{min-width:0}
.brand{padding:0 4px}
.wordmark{height:28px}
.tabs{position:static;height:auto;margin-left:auto;display:flex;gap:4px;padding:0;border:0;background:none}
.tabs a{flex-direction:row;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-size:15px;color:var(--ink)}
.tabs a .icon{display:none}
.tabs a:hover{background:var(--soft)}
.tabs a[aria-current="page"]{background:var(--soft);color:var(--orange-text)}
/* The pale pill alone is 1.1:1 against the header, so the current tab is also underlined. */
.tabs a[aria-current="page"] > span:not(.badge){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tabs a[aria-current="page"]::before{display:none}
.tabs a:focus-visible{outline-offset:2px}
.tabs .badge{position:static;border:0;height:20px;min-width:20px}
}
/* ---------- Message line (#message, ui.flash) ---------- */
/* Always rendered so screen readers hear changes; it takes no space while empty and stays in
view under the header while the customer scrolls. */
#message{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top) + 8px);z-index:35;width:min(var(--content-max) - 2 * var(--gutter),100% - 2 * var(--gutter));margin:0 auto}
#message:empty{height:0;margin:0 auto;padding:0;border:0}
#message:not(:empty){margin:12px auto 0;padding:12px 16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-line);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
#message.error{background:var(--red-soft);border-color:var(--red);color:var(--red)}
/* ---------- Page frame ---------- */
main{display:block;flex:1 0 auto;width:100%;max-width:var(--content-max);margin:0 auto;padding:20px var(--gutter) 40px;overflow-wrap:anywhere}
main > h1{margin:4px 0 16px}
main > h1 + .lead{margin-top:-8px}
.lead{max-width:62ch;font-size:1.0625rem;color:var(--muted);margin:0 0 20px}
main h2{margin:32px 0 12px}
main h3{margin:20px 0 8px}
main :is(section,article,form,div,li,dialog,fieldset) > :is(h2,h3,.section-head):first-child{margin-top:0}
main > h1 + :is(h2,section,.section-head){margin-top:8px}
main ul,main ol{padding-left:1.25rem;margin:0 0 16px}
main li + li{margin-top:4px}
main section + section{margin-top:32px}
@media (min-width:768px){main{padding-top:28px}h1{font-size:2rem}}
.stack > * + *{margin-top:var(--stack-gap,16px)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 12px}
.section-head :is(h2,h3){margin:0}
.section-head a{font-weight:650;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
/* ---------- Buttons ---------- */
button,.button{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;min-width:44px;padding:10px 18px;margin:0;border-radius:12px;border:1px solid var(--control-line);
background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:650;line-height:1.25;text-align:center;
text-decoration:none;cursor:pointer;overflow-wrap:normal;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover:not(:disabled),.button:hover{background:var(--soft)}
button.primary,.button.primary{background:var(--orange);border-color:var(--orange);color:var(--on-orange);font-weight:720}
button.primary:hover:not(:disabled),.button.primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
button.secondary,.button.secondary{border-color:var(--orange-text);color:var(--orange-text)}
button.quiet,.button.quiet{background:transparent;border-color:transparent;color:var(--orange-text)}
button.quiet:hover:not(:disabled),.button.quiet:hover{background:var(--soft)}
button.danger,.button.danger{border-color:var(--red);color:var(--red);background:var(--surface)}
button.danger:hover:not(:disabled){background:var(--red-soft)}
button:disabled,.button[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
button[aria-busy="true"]{cursor:progress;opacity:.75}
button[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
button.primary:focus-visible,.button.primary:focus-visible{outline-offset:3px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 0}
.actions:first-child{margin-top:0}
.actions.stack{flex-direction:column;align-items:stretch}
.actions.stack > *{width:100%}
main form{margin:0 0 28px;max-width:var(--reading-max)}
main form.wide{max-width:none}
main form:last-child{margin-bottom:0}
form .actions{max-width:var(--reading-max)}
@media (min-width:768px){form .actions > .primary{min-width:200px}}
@media (max-width:767.98px){
/* One clear primary action: full width on phones, easy to reach with a thumb. */
form .actions > .primary,.actions > .primary.wide,.actions.stack > *{flex:1 1 100%}
}
/* ---------- Fields and forms ---------- */
.field{display:grid;gap:6px;margin:0 0 20px;max-width:var(--reading-max)}
.field > label,main label{font-weight:650}
.field > label{justify-self:start}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink)}
:where(input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="image"],[type="hidden"])),:where(select,textarea){
display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--control-line);border-radius:12px;background:var(--surface);
font-size:16px;line-height:1.35;color:var(--ink);box-shadow:none}
label > :is(input:not([type="checkbox"],[type="radio"]),select,textarea){margin-top:6px;font-weight:400}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:44px;background:var(--surface) var(--select-arrow) no-repeat right 14px center/18px}
textarea{min-height:120px;resize:vertical}
::placeholder{color:var(--muted);opacity:.85}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[readonly],textarea[readonly]{background:var(--canvas);color:var(--muted)}
[aria-invalid="true"]{border-color:var(--red);border-width:2px}
input[type="checkbox"],input[type="radio"]{width:24px;height:24px;margin:0;flex:none;accent-color:var(--orange-text);cursor:pointer}
.field-error{display:flex;gap:6px;align-items:flex-start;margin:0;color:var(--red);font-weight:600;font-size:.95rem}
.field-error::before,.blocked-hint::before,.form-summary > p:first-child::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat}
.field .hint,.hint{font-size:.925rem;margin:0}
.field.check{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px;row-gap:4px;min-height:44px}
.field.check > input{margin-top:10px}
.field.check > label{font-weight:500;padding:9px 0;min-height:44px;cursor:pointer}
/* A checkbox's hint and error run under the box and its label (ui.checkbox links the hint). */
.field.check .field-error,.field.check .hint{grid-column:1/-1}
fieldset{border:0;padding:0;margin:0 0 24px;min-width:0;max-width:var(--reading-max)}
label.check{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 4px;font-weight:500;cursor:pointer}
fieldset > :last-child{margin-bottom:0}
legend{padding:0;margin:0 0 10px;font-weight:700;font-size:1.05rem}
/* Error summary (ui.showFormProblem): sits right above the submit row and links to fields. */
.form-summary{display:grid;gap:6px;margin:4px 0 0;padding:14px 16px;border-radius:var(--radius);background:var(--red-soft);border:1px solid var(--red);color:var(--red);max-width:var(--reading-max)}
.form-summary > p{margin:0;font-weight:700;display:flex;gap:8px;align-items:flex-start}
.form-summary ul{margin:0;padding-left:26px;list-style:none}
.form-summary li + li{margin-top:4px}
.form-summary a{color:var(--red);font-weight:600;display:inline-block;padding:2px 0}
.form-summary .blocked-hint{margin:0}
.form-summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* A confirmation under the button that asked (ui.confirmMarkup: Remove shop): the question,
then Keep and the danger button in a row of their own. */
.confirm{margin:12px 0 0;padding:14px 16px;border:1px solid var(--red);border-radius:var(--radius);background:var(--red-soft);color:var(--ink);max-width:var(--reading-max)}
.confirm > p{margin:0}
.confirm > .actions{margin-top:12px}
/* One plain line next to a blocked button (ui.blockedHint). Inside a button row it takes its
own line under the buttons. */
.blocked-hint{display:flex;gap:6px;align-items:flex-start;flex-basis:100%;margin:8px 0 0;color:var(--red);font-weight:600;font-size:.95rem}
.blocked-hint:empty{display:none}
.actions > .blocked-hint{margin:0}
/* Switch: ,
or the field form
(Settings, the waitlist's "Also email me"): the label on the left, the switch at the right edge. */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;max-width:var(--reading-max);font-weight:600;cursor:pointer}
.switch > input[role="switch"]{order:1;flex:none}
input[type="checkbox"][role="switch"]{appearance:none;-webkit-appearance:none;position:relative;width:52px;height:32px;border-radius:999px;background:var(--control-line);border:0;transition:background .15s}
input[type="checkbox"][role="switch"]::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .15s}
input[type="checkbox"][role="switch"]:checked{background:var(--orange-text)}
input[type="checkbox"][role="switch"]:checked::before{transform:translateX(20px);background:var(--surface)}
.field.check.switch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:56px}
.field.check.switch > label{grid-column:1;grid-row:1;font-weight:600}
.field.check.switch > input[role="switch"]{grid-column:2;grid-row:1;margin:0}
.switch-setting{max-width:var(--reading-max);margin:0 0 20px}
.switch-setting > .field.check.switch{margin-bottom:4px}
/* Password field (auth-views passwordField): the eye sits inside the field at its right edge. */
.password-entry{position:relative}
.password-entry > input{padding-right:56px}
.password-eye{position:absolute;top:2px;right:2px;bottom:2px;min-height:0;height:auto;min-width:48px;padding:0 10px;border-radius:10px;color:var(--muted)}
.password-eye:hover:not(:disabled){color:var(--orange-text)}
.password-eye svg{width:22px;height:22px}
.password-checklist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:.925rem;color:var(--muted)}
.password-checklist li{margin:0;display:flex;gap:6px;align-items:baseline}
.password-checklist li[data-met="true"]{color:var(--green)}
.rule-mark{flex:none;width:1.1em;text-align:center;font-weight:800}
.password-status:empty{display:none}
.password-status{font-weight:600}
/* Radio or checkbox cards: campus picker, pickup windows, tip choices. */
.choice-list{display:grid;gap:10px;margin:0 0 20px;padding:0;list-style:none;max-width:var(--reading-max)}
.choice-list > li{margin:0}
.choice{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--surface);font-weight:600;cursor:pointer}
.choice:hover{background:var(--soft)}
.choice:has(input:checked),.choice.selected{border-color:var(--orange-text);background:var(--soft);box-shadow:inset 0 0 0 1px var(--orange-text)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.choice input:focus-visible{outline:none}
.choice .meta{display:block;font-weight:400}
.choice:has(input:disabled){opacity:.55;cursor:not-allowed}
/* Chips: categories, tips, filters. */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--control-line);background:var(--surface);color:var(--ink);font-weight:600;white-space:nowrap;text-decoration:none}
.chip:hover{background:var(--soft)}
.chip[aria-pressed="true"],.chip[aria-current]:not([aria-current="false"]),.chip.selected{background:var(--orange-text);border-color:var(--orange-text);color:var(--surface)}
/* A selected chip keeps its colours on hover and focus: button:hover:not(:disabled) is more specific than the rule above and laid the pale --soft under its white text. */
.chip:is([aria-pressed="true"],[aria-current]:not([aria-current="false"]),.selected):is(:hover,:focus,:active){background:var(--orange-text);border-color:var(--orange-text);color:var(--surface)}
/* The category picker sheet: the same chips, spaced and lined up. */
.category-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.rail{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;
margin:0 calc(-1 * var(--gutter)) 16px;padding:4px var(--gutter) 8px;list-style:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:none;scroll-snap-align:start;margin:0}
.rail > .shop-card,.rail > .food-card,.rail > li > :is(.shop-card,.food-card){width:min(280px,78vw)}
.rail + :is(h2,h3,.section-head){margin-top:12px}
/* Quantity stepper: */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--control-line);border-radius:999px;background:var(--surface);overflow:hidden}
.stepper button{min-width:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--orange-text);font-size:1.3rem;font-weight:700}
.stepper :is(output,span,strong){min-width:2.5ch;text-align:center;font-weight:750;font-variant-numeric:tabular-nums}
/* ---------- Surfaces ---------- */
/* Screen modules' cards and banners (v2.32 integration): one card look and one banner look. */
:is(.profile-card,.program-card,.waitlist-status,.status-card,.pickup-card,.settings-section,.logout-card,.auth-notice,.application-status,.application-summary,.program-section){
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;margin:0 0 16px;box-shadow:var(--shadow-sm);max-width:var(--reading-max)}
:is(.profile-card,.program-card,.waitlist-status,.status-card,.pickup-card,.settings-section,.logout-card,.auth-notice,.application-status,.application-summary,.program-section) > :last-child{margin-bottom:0}
main :is(.profile-card,.program-card,.waitlist-status,.settings-section,.logout-card,.application-summary,.program-section) + :is(.profile-card,.program-card,.waitlist-status,.settings-section,.logout-card,.application-summary,.program-section,.link-section){margin-top:16px}
.pickup-card,.settings-section{max-width:none}
.waitlist-status,.auth-notice,.application-status{background:var(--soft);border-color:var(--soft-line)}
.auth-notice h2,.waitlist-status h2{font-size:1.15rem;margin:0 0 8px}
.logout-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:32px}
.status-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.status-list > li{margin:0}
:is(.browsing-banner,.campus-prompt,.pickup-banner,.refresh-notice,.campus-notice,.campus-open){
display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 16px;margin:0 0 16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-line);color:var(--ink)}
:is(.browsing-banner,.campus-prompt,.pickup-banner,.campus-open) > :is(p,h2){flex:1 1 220px;margin:0}
:is(.browsing-banner,.campus-prompt,.pickup-banner) > :is(.actions,.button,a){flex:none;margin:0}
.campus-prompt,.pickup-banner{flex-direction:column;align-items:flex-start}
/* :is(p,h2) above outranks a bare '*': name p too, or its 220px flex basis becomes a 220px-tall gap in the column. */
.campus-prompt > :is(*,p),.pickup-banner > :is(*,p){flex:none;max-width:100%}
main [role="search"]{margin:0 0 16px}
.campus-prompt h2,.pickup-banner h2{font-size:1.15rem;flex:none}
.pickup-banner{background:var(--green-soft);border-color:var(--green)}
.browsing-banner a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.refresh-notice button{margin-left:auto}
.campus-open > p{flex-basis:100%}
.order-banner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:12px 16px;margin:0 0 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--orange-text);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.order-banner:hover{background:var(--soft)}
.order-banner-go{margin-left:auto;color:var(--orange-text);font-weight:700}
/* Order details (orders-views): progress, label–value pairs, dish and refund lines. */
ol.order-stages,ol.timeline,ul.order-lines,ul.refund-lines,ul.refund-list{list-style:none;padding-left:0}
ol.order-stages{display:grid;gap:4px;margin:0 0 16px}
main ol.order-stages > li{margin:0;color:var(--muted)}
ol.order-stages > li.done{color:var(--ink)}
ol.order-stages > li.done > span{color:var(--green);font-weight:800}
ol.order-stages > li.current{color:var(--orange-text);font-weight:750}
dl.details{display:grid;grid-template-columns:minmax(7rem,max-content) minmax(0,1fr);gap:6px 16px;margin:0 0 16px;max-width:var(--reading-max)}
dl.details dt{color:var(--muted)}
dl.details dd{margin:0;font-variant-numeric:tabular-nums}
:is(.order-live,.order-pickup,.order-items,.order-payment,.order-timeline,.order-help){max-width:var(--reading-max)}
/* Lists of cards (saved cards, cart items, Help requests, promotions, conversations). */
:is(ul.card-list,ul.cart-items,ul.help-list,ul.promo-list,ul.conversation-list){list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;max-width:var(--reading-max)}
main :is(.card-list,.cart-items,.help-list,.promo-list,.conversation-list) > li{margin:0}
:is(.saved-card,.help-request,.promo){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
:is(.saved-card,.help-request,.promo) > :last-child{margin-bottom:0}
:is(.saved-card,.help-request,.promo) .actions{margin-top:12px}
.card-default{color:var(--green)}
.cart-shop{max-width:var(--reading-max)}
/* The Cart's status line keeps its one line of room while empty, so "Saving your cart…" coming
and going never moves the dishes under a finger. */
[data-cart-status]{min-height:1.5em;margin:0 0 8px}
/* The row wraps only for the one-line reason under it (a blocked + at 20): the body grows from
zero, so the photo, name and − 2 + always share the first line. */
.cart-item{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:0 0 12px}
.cart-item > img{flex:none;width:64px;height:64px;object-fit:cover;border-radius:12px}
.cart-item > .food-photo{flex:none;width:64px;height:64px;aspect-ratio:auto;border-radius:12px}
.cart-item > .food-photo:empty::after{width:28px;height:28px}
.cart-item-body{flex:1 1 0;min-width:0}
.cart-item-body > *{margin:0}
.cart-item > :is(.stepper,button){flex:none}
.cart-item > .blocked-hint{margin:0}
.cart-item:last-child{border-bottom:0}
div.receipt{display:grid;gap:6px;margin:0 0 16px;max-width:var(--reading-max)}
.receipt-row{display:flex;justify-content:space-between;gap:16px;margin:0}
.receipt-row .amount{font-variant-numeric:tabular-nums;text-align:right}
.receipt-row.receipt-total{padding-top:10px;border-top:1px solid var(--line);font-weight:780;font-size:1.1rem}
.tip-options{display:flex;flex-wrap:wrap;gap:4px 16px}
.tip-options > .field.check{margin:0}
/* Notifications (notifications-views): one card per update, text, then its time, then its buttons. */
.notice-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;max-width:var(--reading-max)}
main .notice-list > li{margin:0}
.notice-list > .notice{display:block;background:var(--surface);border-color:var(--line)}
.notice-list > .notice.unread{background:var(--soft);border-color:var(--soft-line)}
.notice-list > .notice > p + p{margin-top:2px}
.notice-list > .notice > .actions{margin-top:8px}
/* Profile's link lists (profile-views): one tappable row per screen, with a chevron. */
.link-section{max-width:var(--reading-max)}
.link-list{list-style:none;margin:0 0 16px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
main .link-list > li{margin:0}
.link-list > li + li{border-top:1px solid var(--line)}
.link-row{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:12px;align-items:center;min-height:56px;padding:12px 16px;color:var(--ink);text-decoration:none}
.link-row:hover{background:var(--soft)}
.link-row:focus-visible{outline-offset:-3px}
.link-row > *{grid-column:1}
.link-label{font-weight:650}
.link-row > .hint{font-size:.875rem}
.link-row::after{content:"";grid-column:2;grid-row:1 / span 2;width:20px;height:20px;background:var(--muted);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* Campus lists (campus step, Browse a campus, P2's picker): each campus is a radio card. */
.campus-list > .field.check{padding:4px 14px;margin:0 0 10px;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--surface)}
.campus-list > .field.check:hover{background:var(--soft)}
.campus-list > .field.check:has(input:checked){border-color:var(--orange-text);background:var(--soft);box-shadow:inset 0 0 0 1px var(--orange-text)}
.campus-list > .field.check > label{font-weight:600}
.choice-group > .field.check{margin:0}
.actions > :is(.coupon-line,.pay-hint,.hint){flex-basis:100%;margin:0}
.signed-in-as{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:16px}
.fine-print,.checkout-policy{font-size:.875rem;color:var(--muted)}
/* Sign-in (auth-views): Google and Apple, and the How Batch works guide. */
.auth-providers{margin-top:12px}
@media (max-width:767.98px){.auth-providers{flex-direction:column;align-items:stretch}.auth-providers > *{width:100%}}
.guide{max-width:var(--reading-max)}
.guide + .guide{margin-top:28px}
.guide h2{font-size:1.15rem;margin:0 0 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;margin:0 0 16px;box-shadow:var(--shadow-sm)}
.card.flat{box-shadow:none}
.card > :last-child{margin-bottom:0}
.banner,.notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 16px;margin:0 0 16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-line);color:var(--ink)}
.banner > :is(p,div):first-child{flex:1 1 220px;margin:0}
.banner p,.notice p{margin:0}
.banner.success{background:var(--green-soft);border-color:var(--green)}
.banner.warning{background:var(--amber-soft);border-color:var(--amber)}
.banner.danger,.form-error{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.form-error{display:block;padding:12px 16px;margin:0 0 16px;border:1px solid var(--red);border-radius:var(--radius);font-weight:600}
.notice:empty,.form-error:empty{display:none}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--orange-text);font-size:.85rem;font-weight:700;line-height:1.3}
:is(.pill,.badge).success{background:var(--green-soft);color:var(--green)}
:is(.pill,.badge).warning{background:var(--amber-soft);color:var(--amber)}
:is(.pill,.badge).danger{background:var(--red-soft);color:var(--red)}
:is(.pill,.badge).neutral{background:var(--canvas);color:var(--muted);border:1px solid var(--line)}
main .badge:not([data-cart-count]){height:auto;min-height:24px;padding:2px 10px;background:var(--soft);color:var(--orange-text);font-size:.85rem;font-weight:700}
.price{font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink);margin:0}
.price s{color:var(--muted);font-weight:500;font-size:.9em;margin-right:4px}
/* ---------- Food cards, shop cards and the shop page ---------- */
.food-grid,
main :where(div,section,ul,ol):not(.rail):has(> .food-card + .food-card),
main :where(div,section,ul,ol):not(.rail):has(> .shop-card + .shop-card),
main :where(ul,ol):not(.rail):has(> li + li > :is(.food-card,.shop-card)){
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;margin:0 0 24px;padding:0;list-style:none}
main :where(ul,ol):has(> li > :is(.food-card,.shop-card)) > li{margin:0}
.food-grid > li,.food-grid > li > *,.food-grid > .dish,.food-grid > .dish > .food-card{height:100%}
.food-grid > .dish{min-width:0;border-radius:var(--radius-lg)}
.food-grid > .dish:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* The shop menu: each dish takes two grid rows, its card and under it the row for its one-line
reason (ui.blockedHint's [data-hint-slot], such as the 20 limit). Both rows are shared by the
cards side by side (subgrid), so a line under one card never moves any card's − count +
control, at 375 px or on a wide screen. The dish's margin is the space between rows. */
.menu-section .food-grid{row-gap:0}
.menu-section .food-grid > .dish{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;height:auto;margin-bottom:16px}
.dish-hint{min-width:0}
.dish-hint > .blocked-hint{margin:8px 4px 0}
.section-rail{margin-bottom:20px}
.food-card,.shop-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.food-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.shop-card .food-photo,.shop-photo{aspect-ratio:16/9}
.food-photo img,.shop-photo img,.shop-card > img,.food-card > img{display:block;width:100%;height:100%;aspect-ratio:inherit;object-fit:cover}
.food-card > img{aspect-ratio:4/3}
.shop-card > img{aspect-ratio:16/9}
.food-photo:empty::after{content:"";position:absolute;inset:0;margin:auto;width:44px;height:44px;background:var(--orange-text);opacity:.45;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17.5 3c-2 1.4-3 4-3 7.5h3V21M17.5 3v18'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17.5 3c-2 1.4-3 4-3 7.5h3V21M17.5 3v18'/%3E%3C/svg%3E") center/contain no-repeat}
.food-card-body,.shop-card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.food-card :is(h3,h2),.shop-card :is(h3,h2){margin:0;font-size:1.1rem;line-height:1.3}
.food-card :is(h3,h2) a,.shop-card :is(h3,h2) a{color:var(--ink);text-decoration:none}
/* The dish name is the card's link; its hit area covers the whole card. */
.food-card :is(h3,h2) a::after,.shop-card :is(h3,h2) a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.food-card :is(h3,h2) a:focus-visible,.shop-card :is(h3,h2) a:focus-visible{outline:none}
.food-card :is(h3,h2) a:focus-visible::after,.shop-card :is(h3,h2) a:focus-visible::after{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--radius-lg)}
.food-card :is(button,.button,input,select,label,.stepper,.actions),.shop-card :is(button,.button,input,select,label,.stepper,.actions){position:relative;z-index:2}
.food-description,.food-card-body > p:not([class]){margin:0;color:var(--muted);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.food-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto;padding-top:8px}
.food-card-foot > .price{font-size:1.1rem}
.food-card-foot .actions{margin:0}
.sheet-body .food-photo,main > .food-photo{border-radius:var(--radius);margin:0 0 16px}
.sold-out-note{position:absolute;top:12px;left:12px;z-index:2;margin:0;padding:4px 12px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:.85rem;font-weight:750;box-shadow:var(--shadow)}
.food-card.sold-out .food-photo img{filter:grayscale(1);opacity:.65}
.food-card.sold-out .price{color:var(--muted)}
@media (hover:hover){
.food-card,.shop-card{transition:box-shadow .15s,border-color .15s,transform .15s}
.food-card:has(:is(h3,h2) a):hover,.shop-card:has(:is(h3,h2) a):hover{border-color:var(--soft-line);box-shadow:var(--shadow);transform:translateY(-1px)}
}
.food-card.highlight,.food-card:target{border-color:var(--orange-text);box-shadow:0 0 0 2px var(--orange-text)}
.shop-hero{position:relative;margin:0 0 20px;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft)}
.shop-hero img,.shop-hero .food-photo{display:block;width:100%;aspect-ratio:16/9;max-height:360px;object-fit:cover}
.shop-hero-body,.shop-hero > :is(div,header):not(.food-photo){padding:16px 20px}
.shop-hero :is(h2,h3){margin:0 0 4px}
@media (max-width:767.98px){.shop-hero{margin-inline:calc(-1 * var(--gutter));border-radius:0}.shop-hero-body,.shop-hero > :is(div,header):not(.food-photo){padding:16px var(--gutter)}}
/* ---------- Lists, rows, totals, stages, tables ---------- */
ul.list,ol.list{list-style:none;margin:0 0 20px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.list > li{margin:0}
.list > li + li{border-top:1px solid var(--line)}
.list > li > :is(a,button),.row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;margin:0;border:0;border-radius:0;background:none;color:var(--ink);font-weight:600;text-align:left;text-decoration:none;justify-content:flex-start}
.row-text strong{font-weight:700}
.row-text .meta{font-weight:400}
.list .row,.row:has(> .row-text){font-weight:500}
.list > li > :is(a,button):hover,a.row:hover{background:var(--soft)}
.list > li > :is(a,button):focus-visible,.row:focus-visible{outline-offset:-3px}
.list > li > a::after,a.row::after{content:"";flex:none;width:20px;height:20px;margin-left:auto;background:var(--muted);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.list > li > :is(a,button) > :is(.meta,.pill,.badge,.stepper),.row > :is(.meta,.pill,.badge,.stepper){margin-left:auto;font-weight:500;flex:none}
.list > li > :is(a,button) > :is(.meta,.pill,.badge) + :is(.meta,.pill,.badge){margin-left:0}
.list > li > button.danger{color:var(--red)}
.list .row-text,.row .row-text{display:grid;gap:2px;min-width:0}
dl.totals{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 0;margin:0 0 16px}
dl.totals dt{font-weight:400;color:var(--ink)}
dl.totals dd{margin:0;padding-left:16px;text-align:right;font-variant-numeric:tabular-nums}
dl.totals dt:last-of-type,dl.totals dd:last-of-type{padding-top:10px;border-top:1px solid var(--line);font-weight:780;font-size:1.1rem}
ol.stages{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:0}
ol.stages > li{position:relative;margin:0;padding:0 0 18px 36px;color:var(--muted);min-height:28px}
ol.stages > li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;border:2px solid var(--control-line);background:var(--surface)}
ol.stages > li:not(:last-child)::after{content:"";position:absolute;left:10px;top:26px;bottom:0;width:2px;background:var(--line)}
ol.stages > li.done{color:var(--ink)}
ol.stages > li.done::before{background:var(--green);border-color:var(--green)}
ol.stages > li.done::after{background:var(--green)}
ol.stages > li[aria-current]:not([aria-current="false"]){color:var(--orange-text);font-weight:750}
ol.stages > li[aria-current]:not([aria-current="false"])::before{border-color:var(--orange-text);background:var(--soft);box-shadow:0 0 0 4px var(--soft)}
.table-wrap{max-width:100%;overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:break-word}
th{font-weight:700;color:var(--muted);font-size:.875rem}
tr:last-child > td{border-bottom:0}
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0 0 12px}
summary{display:flex;align-items:center;min-height:52px;padding:12px 16px;font-weight:650;cursor:pointer}
details > :not(summary){padding:0 16px}
details > :last-child:not(summary){padding-bottom:16px}
/* Reused Partner helpers (customerReceiptMarkup, conversationMarkup). */
.customer-receipt{max-width:100%;min-width:0}
.customer-receipt h3{margin:0 0 12px}
.customer-receipt dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 0;margin:16px 0}
.customer-receipt dd{margin:0;padding-left:16px;text-align:right;font-variant-numeric:tabular-nums}
.customer-receipt dt:last-of-type,.customer-receipt dd:last-of-type{font-weight:780;padding-top:10px;border-top:1px solid var(--line)}
.message-list{padding:0;display:grid}
.message-row{display:grid;gap:3px;width:100%;min-height:64px;padding:14px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:left;justify-content:stretch}
.message-row:last-child{border-bottom:0}
.message-row-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.message-row-order,.conversation-order{font-size:.85rem;color:var(--orange-text);font-weight:650;margin:0}
.message-row-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.message-thread{list-style:none;margin:0 0 14px;padding:12px;display:grid;gap:10px;max-height:min(55dvh,480px);overflow-y:auto;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius)}
.message{max-width:86%;margin:0;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.message.sent{justify-self:end;background:var(--soft);border-color:var(--soft-line)}
.message.received{justify-self:start}
.message-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.8rem}
.message-text{margin:6px 0 0;white-space:pre-wrap}
.message-hidden{margin:6px 0 0;color:var(--muted);font-style:italic}
.message-photo{display:block;max-width:100%;max-height:240px;border-radius:12px;margin-top:8px;object-fit:contain}
.message-menu{position:relative;margin-left:auto}
.message-menu summary{min-height:44px;min-width:44px;justify-content:center;padding:0 10px;border:0;list-style:none}
.message-menu summary::-webkit-details-marker{display:none}
.message-menu-items{position:absolute;right:0;z-index:5;display:grid;min-width:160px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.message-menu-items button{border:0;justify-content:flex-start}
.message-menu{border:0;background:none}
.message-composer textarea{min-height:88px}
[data-hosted],[data-payment-element],[data-address-element]{min-height:44px;margin:0 0 16px}
/* ---------- Empty, loading, error and placeholder states (one look) ---------- */
.empty-state,.error-state,.placeholder,.loading{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
margin:8px 0 24px;padding:104px 20px 32px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line)}
.empty-state > *,.error-state > *,.placeholder > *{margin:0;max-width:44ch}
.empty-state h2{margin:0;font-size:1.2rem}
.empty-state > :is(.button,button,a.button),.error-state > button{margin-top:12px}
.empty-state::before,.error-state::before,.placeholder::before{content:"";position:absolute;top:32px;left:50%;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:var(--soft)}
.empty-state::after,.error-state::after,.placeholder::after{content:"";position:absolute;top:46px;left:50%;width:28px;height:28px;margin-left:-14px;background:var(--orange-text);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17.5 3c-2 1.4-3 4-3 7.5h3V21M17.5 3v18'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17.5 3c-2 1.4-3 4-3 7.5h3V21M17.5 3v18'/%3E%3C/svg%3E") center/contain no-repeat}
.error-state::before{background:var(--red-soft)}
.error-state::after{background:var(--red);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E")}
.error-state > p{font-weight:600}
.error-state > p.hint{font-weight:400}
.placeholder{border-style:dashed;background:transparent}
.placeholder .hint{font-size:.875rem}
.loading{padding:88px 20px 32px;border-color:transparent;background:transparent;font-weight:500}
.loading::before{content:"";position:absolute;top:32px;left:50%;width:36px;height:36px;margin-left:-18px;border-radius:50%;border:4px solid var(--soft);border-top-color:var(--orange);animation:spin .8s linear infinite}
.loading > p{margin:0}
.loading.compact{padding:12px 0 12px 36px;margin:0;display:block;text-align:left}
.loading.compact::before{top:12px;left:0;margin:0;width:22px;height:22px;border-width:3px}
.card.empty{text-align:center;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
/* The startup screen (index.html); startup.js turns it into an .error-state when loading fails. */
.startup{margin-top:24px}
.startup h1{font-size:1.4rem;margin:0}
.startup .actions{justify-content:center;margin-top:12px}
.startup .actions > *{flex:0 1 auto}
.noscript{max-width:var(--reading-max);margin:8px 0 24px}
@media (scripting:none){[data-order-startup],.tabs{display:none}}
.noscript h1{font-size:1.4rem;margin:0 0 8px}
/* ---------- Sheets (