/* EBE shared styles. Brand colors are variables so Desmond's palette/logo drop
   in by editing this block only. Modern, warm, food-forward. Not cartoonish. */
:root{
  /* Sampled from Desmond's own logo (public/ebe-logo.png): the red is #ca261a and the
     mark sits on a near black. He asked on the 2026-07-27 review call for the app to
     match the symbol, and it was running on a lighter orange that did not. */
  --brand:#ca261a;         /* logo red */
  --brand-2:#e8562a;       /* warmer orange, secondary accent */
  --brand-ink:#ffffff;
  --bg:#faf6f1;            /* warm off-white */
  --surface:#ffffff;
  --ink:#1b1b1b;          /* logo black */
  --muted:#7a7168;
  --line:#eadfd3;
  --ok:#2e9e5b;
  --warn:#d1893a;
  --radius:16px;
  --shadow:0 6px 24px rgba(40,25,12,.08);
  /* 960 made every desktop screen a narrow phone column with two feet of empty warm beige
     either side. 1180 is wide enough for four kitchen cards, three order tickets, or the
     admin's two columns, and still short enough that a line of text is readable. */
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",-apple-system,system-ui,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.45;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* Header */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.5px;color:var(--ink)}
.logo .mark{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#1a1a1a;
  display:block;flex:none}
/* Desmond's own logo, sent 2026-07-27. It is artwork on a dark ground, so it sits on a
   dark tile rather than being knocked out onto the warm background. */
.brandlogo{max-width:260px;width:70%;height:auto;margin:0 auto 6px;border-radius:14px;display:block}
@media(max-width:430px){
  .logo{font-size:16px;gap:7px;white-space:nowrap}
  .logo .mark{width:32px;height:32px}
  .top nav a{padding:8px 9px;font-size:13px}
}
.top nav{margin-left:auto;display:flex;gap:6px}
.top nav a{padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px}
.top nav a:hover{background:var(--bg);color:var(--ink)}
.top nav a.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}

/* ==========================================================================
   The account corner.
   ==========================================================================
   Desmond, 2026-08-16: "for people who already signed up to be a driver or cook there is
   no login button." Every door into EBE was worded as joining it, so a cook coming back
   had nothing to tap, and nobody could sign out at all.

   Two shapes, one menu. Desktop: the nav stays inline and the corner is either the word
   Sign in or the person who is signed in, with a dropdown. Phone: the nav links move
   inside that menu and it opens as a full width sheet, because a fifth control in a 360px
   header is exactly how the cook tabs ended up off the right edge for two days. */
.acct{position:relative;flex:none;margin-left:10px}
.acctbtn{display:inline-flex;align-items:center;gap:8px;min-height:42px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px;cursor:pointer}
.acctbtn:hover{border-color:var(--brand);color:var(--brand)}
.acctbtn.in{padding:6px 12px 6px 6px}
.acctname{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--brand);color:#fff;font-weight:800;font-size:14px;line-height:1}
.avatar.lg{width:42px;height:42px;font-size:18px}
.chev{width:7px;height:7px;flex:none;opacity:.5;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
.burger{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:2px}
.burger::before{top:-6px}.burger::after{top:6px}

.acctmenu{position:absolute;right:0;top:calc(100% + 12px);width:296px;z-index:40;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 46px rgba(40,25,12,.18)}
.acctmenu[hidden]{display:none}
.mhead{display:flex;align-items:center;gap:11px;padding:8px 10px 12px}
.mhead strong{display:block;font-size:15.5px;line-height:1.25}
.msub{display:block;color:var(--muted);font-size:12.5px}
.msmall{font-size:12px;line-height:1.45;margin:9px 4px 3px}
.mgroup{border-top:1px solid var(--line);padding:7px 0 5px}
.mgroup:first-child{border-top:0;padding-top:2px}
.mgroup:empty{display:none}
.mitem{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
  color:var(--ink);padding:10px 11px;border-radius:12px;min-height:44px}
.mitem:hover{background:var(--bg)}
.mlabel{display:block;font-weight:700;font-size:14.5px}
.mitem.out .mlabel{color:var(--brand)}

/* Which corner control shows at which width. */
.acctbtn.mtop{display:none}
@media(max-width:759px){
  .top nav.mainnav{display:none}
  .acct{margin-left:auto}
  .acctbtn.dtop{display:none}
  .acctbtn.mtop{display:inline-flex;padding:10px 12px}
  .acctname{display:none}
  .acctbtn.in{padding:6px}
  /* Anchored to the viewport, not the button: a 296px card hanging off the corner of a
     360px screen is a thumb target with nowhere to miss. */
  .acctmenu{position:fixed;left:8px;right:8px;top:66px;width:auto;padding:12px;
    max-height:calc(100dvh - 80px);overflow-y:auto}
  .mitem{padding:13px 12px;min-height:52px}
  body.menuopen{overflow:hidden}
}

/* Hero */
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:34px 0 30px}
/* The hero is the only full bleed band on the site, so its own text gets a narrower measure
   than the 1180 grid behind it. A headline running the full width of a desktop monitor
   reads like a banner ad. */
.hero .wrap>h1,.hero .wrap>p,.hero .wrap>.search{max-width:640px}
/* Desmond's own line, his words, sent 2026-07-27. Sits under the headline as the
   brand promise rather than replacing the plain-English one below it. */
.hero .tagline{font-style:italic;font-size:18px;opacity:.95;margin:6px 0 2px;letter-spacing:.2px}
.hero h1{margin:0 0 6px;font-size:30px;letter-spacing:-.6px}
.hero p{margin:0;opacity:.95;font-size:16px}
.search{margin-top:18px;display:flex;gap:8px;background:#fff;padding:8px;border-radius:14px;box-shadow:var(--shadow)}
.search input{flex:1;border:0;font-size:16px;padding:10px 12px;outline:none;color:var(--ink);background:transparent}
.search button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:0 18px;border-radius:10px;cursor:pointer}

/* Layout bits */
section{padding:22px 0}
h2{font-size:19px;letter-spacing:-.3px;margin:0 0 14px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card .ph{aspect-ratio:16/10;background:#f0e7db center/cover no-repeat;display:grid;place-items:center;color:#c9b8a3;font-weight:700}
.card .body{padding:13px 14px}
.card h3{margin:0 0 3px;font-size:16px}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:999px;background:#f4ead9;color:#9a6b2c}
.badge.open{background:#e4f6ea;color:var(--ok)}
.badge.closed{background:#f6e4e4;color:#b23b3b}
.badge.tier{background:#efe7fb;color:#6b4bb0}
.price{font-weight:800;color:var(--ink)}

/* Buttons + forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;
  background:var(--brand);color:#fff;font-weight:700;font-size:15px;padding:12px 16px;border-radius:12px}
.btn:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.btn.sm{padding:8px 12px;font-size:14px;border-radius:10px}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.field{margin:0 0 12px}
.field label{display:block;font-weight:700;font-size:13px;margin:0 0 5px;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:11px;
  padding:11px 12px;font-size:15px;font-family:inherit;background:#fff;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin:0 0 16px}
.muted{color:var(--muted)}
.right{margin-left:auto}
.empty{text-align:center;color:var(--muted);padding:40px 10px}

/* Tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 18px;overflow-x:auto}
.tabs button{border:0;background:none;padding:11px 14px;font-weight:700;font-size:15px;color:var(--muted);
  cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}

/* Order/status pills */
.pill{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:capitalize}
.s-placed{background:#eef1f6;color:#5a6b86}
.s-accepted{background:#fff2df;color:#b47b25}
.s-ready{background:#e4f6ea;color:var(--ok)}
.s-delivering{background:#e7effd;color:#3a6fd1}
.s-completed{background:#eef7ee;color:#3a7a4a}
.s-cancelled{background:#f6e4e4;color:#b23b3b}

/* Cart */
.cart{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 0;box-shadow:0 -6px 24px rgba(40,25,12,.06)}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{border:0;background:#fff;width:32px;height:32px;font-size:18px;cursor:pointer;color:var(--brand)}
.stepper span{min-width:26px;text-align:center;font-weight:700}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1b1712;color:#fff;
  padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:var(--shadow);z-index:50;opacity:0;transition:.25s}
.toast.show{opacity:1}
.foot{padding:30px 0;text-align:center;color:var(--muted);font-size:13px}


/* Plan picker on cook signup. Big tap targets, the price and the cut on every one, so
   nobody picks a plan without seeing what EBE takes. */
.tierbtn{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:var(--surface);border:2px solid var(--line);border-radius:14px;
  padding:13px 15px;margin-bottom:9px;cursor:pointer;transition:border-color .12s,background .12s}
.tierbtn .tname{font-weight:700;font-size:16px;color:var(--ink)}
.tierbtn .tline{font-size:13.5px;color:var(--muted)}
.tierbtn.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.tierbtn.on .tname{color:var(--brand)}

/* Chef of the week. */
.featured{position:relative;border:2px solid var(--brand)}
.featured .crown{position:absolute;top:10px;left:10px;z-index:2;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.fhead{display:flex;align-items:baseline;gap:9px;margin:0 0 10px}
.fhead h2{margin:0}
.fhead .sub{font-size:13px;color:var(--muted)}

/* Cook gallery: meal photos and prep videos. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;margin:12px 0}
.gallery figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:var(--line);aspect-ratio:1}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover;display:block}
.gallery .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;color:#fff;font-size:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.gallery .del{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.62);color:#fff;border:none;
  width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.gallery .vtag{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.62);color:#fff;
  font-size:10px;padding:3px 7px;border-radius:99px;letter-spacing:.04em}

/* Join EBE band on the home page, and the food disclaimer. */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.join h2{margin:26px 0 12px}
a.card.join{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.card.join:hover{border-color:var(--brand);transform:translateY(-2px)}
a.card.join .body{padding:18px}
a.card.join .sub{margin-bottom:12px}
a.card.join .btn.sm{display:inline-block;pointer-events:none}
.disclaimer{font-size:12.5px;line-height:1.55;max-width:760px;margin:26px auto 0;text-align:center}
.disclaimer.compact{text-align:left;margin:14px 0;font-size:12px}

/* Tap-to-navigate on the driver screens. Big tap target on purpose: a driver is using
   this one-handed, often already moving, so it is a row rather than a small link. */
.navlink{display:flex;align-items:center;gap:10px;margin:6px 0;padding:12px 13px;
  border:1px solid var(--line,#e3e3e3);border-radius:10px;background:#fafafa;
  color:inherit;text-decoration:none;font-size:14px;line-height:1.35}
.navlink:active{background:#f0f0f0}
.navpin{flex:none;font-size:15px;opacity:.75;transform:rotate(-45deg)}
/* Pick up / Drop off, as a label above the address rather than "Pick up: 123 Main St" run
   together. A driver glancing at this at a kerb is looking for which of the two it is
   before they read a word of the address. */
.navlink .navlabel{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
/* The phone icon does not point anywhere, so it must not be rotated like the map arrow. */
.navlink[href^="tel:"] .navpin{transform:none}

/* Five tabs do not fit on a phone. The strip measures 443px inside a 358px viewport, and
   overflow-x:auto put "Profile" 85px off the right edge with no scrollbar on iOS or
   Android to hint it was there. Desmond spent two days unable to find where to add a
   profile photo because the tab holding it was off screen. Wrap instead of scroll. */
@media (max-width: 560px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 2px; }
  .tabs button { padding: 10px 11px; font-size: 14px; }
}

/* ==========================================================================
   The working screens: cook, driver, admin.
   ==========================================================================
   These three are not the shop window, they are somebody's job. A cook reads theirs
   one-handed with a pan going; a driver reads theirs at a kerb; Desmond reads his sitting
   down at a desk. Same markup, three jobs, so the rules below are about giving each screen
   size the shape that fits the hand or the desk it is being used from. */

.page{padding:20px 16px 40px}
@media (min-width:760px){ .page{padding:26px 16px 60px} }

/* The bar at the top of a cook's and a driver's screen: who they are on the left, the one
   switch that matters on the right. On a phone it sticks under the header, because "am I
   online" is the question a driver asks most and scrolling to find the answer is wrong. */
.statusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:60px;z-index:15;margin:0 -16px 14px;padding:12px 16px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.statusbar h2{font-size:20px;letter-spacing:-.3px}
.statusbar .btn{flex:none}
@media (min-width:760px){
  .statusbar{position:static;margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
}
/* Online / open. A word alone is a label; a word with a lit dot next to it is a state. */
.dot{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.45;flex:none}
.dot.live{opacity:1;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}

/* Count sitting on a tab: how many tickets are waiting, without opening it. */
.tabcount{display:none;min-width:18px;padding:0 5px;margin-left:5px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.tabs button.on .tabcount{background:var(--brand)}

/* Work cards. One per screen on a phone, then two and three across as the screen grows,
   because a driver comparing three available deliveries on a laptop should see all three. */
.grid.cards{grid-template-columns:1fr;gap:14px}
.grid.cards .panel{margin:0}
@media (min-width:700px){ .grid.cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} }

/* A job: one delivery, one ticket. Big money, big tap targets, nothing decorative. */
.job .price.big{font-size:20px;color:var(--brand)}
.job .btn.full{margin-top:10px;padding:14px 16px;font-size:16px}

/* Fact list, for "paid into / sent". A label and a value, aligned, rather than a sentence
   somebody has to read twice to find the last four digits of their bank account. */
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 14px;
  padding:12px 14px;background:var(--bg);border-radius:12px;font-size:14px}
.facts dt{color:var(--muted);margin:0}
.facts dd{margin:0;font-weight:700}

/* The alerts panel. Deliberately the first thing on a driver's Available tab: it is the
   difference between getting the work and missing it. */
.panel.alerts{border-left:4px solid var(--brand);max-width:720px}
.panel.alerts h3{margin:0 0 6px;font-size:16px}
.panel.alerts ol{line-height:1.6}

/* Admin on a desk. The page is a stack of independent sections, so on a wide screen they
   flow into two columns and Desmond stops scrolling past fifty states to reach his cooks.
   Columns rather than a grid on purpose: these sections are wildly different heights, and a
   grid would leave a hole beside every short one. break-inside keeps a section whole. */
@media (min-width:1000px){
  .admincols{column-count:2;column-gap:26px}
  .admincols>section{break-inside:avoid;padding:0 0 26px;display:block}
}
.statgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:22px}
.statgrid .card .body{padding:14px 15px}

/* iPhone home bar. Anything pinned to the bottom has to clear it or the last row of a
   sticky cart sits under the swipe strip. */
.cart{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.foot{padding-bottom:calc(30px + env(safe-area-inset-bottom))}

/* ==========================================================================
   Signing in, and the customer's account.
   ==========================================================================
   Both of these are read on a phone, standing up, by somebody who has already decided what
   they want and is being asked to prove who they are. So: one column, big targets, nothing
   to read twice. On a desktop they get a measure rather than a full width stretch, because
   a sign in form 1180px wide looks like a mistake. */
.signinpage{max-width:760px;margin:0 auto}
.signinhead{text-align:center;margin:10px 0 22px}
.signinhead h1{font-size:26px;letter-spacing:-.5px;margin:0 0 6px}
.signinhead p{margin:0 auto;max-width:460px;font-size:14.5px}
.signinfoot{text-align:center;font-size:12.5px;max-width:460px;margin:18px auto 0;line-height:1.5}
.signinback{text-align:center;margin:4px 0 0}
.livesess{max-width:520px;margin:0 auto 18px}

/* The three sides of EBE. Stacked rows on a phone so each is a full width target; on a
   desktop they stay rows rather than becoming three columns, because they are a choice
   from a list, not three products being compared. */
.rolegrid{display:grid;gap:12px;max-width:520px;margin:0 auto}
.rolecard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px 16px;font:inherit;color:inherit;box-shadow:var(--shadow);
  transition:border-color .14s,transform .14s}
.rolecard:hover{border-color:var(--brand);transform:translateY(-2px)}
/* The three sides of EBE, drawn rather than typed: 🍽 and 👨🏾‍🍳 are somebody else's artwork
   and they land differently on every phone. Brand tile, one mark, same everywhere. */
.ricon{line-height:1;flex:none;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 10%,var(--surface));
  color:var(--brand)}
.rbody{flex:1;min-width:0}
.rname{display:block;font-weight:800;font-size:16.5px;letter-spacing:-.2px}
.rblurb{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.rgo{font-size:24px;color:var(--brand);flex:none;line-height:1}

/* Signed out panels: the same shape on /orders and /account, so "you are not signed in"
   looks like one thing and not two different errors. */
.panel.signedout{max-width:480px;margin:24px auto;text-align:center}
.panel.signedout h2,.panel.signedout h3{letter-spacing:-.3px}
.panel.signedout p{max-width:380px;margin-left:auto;margin-right:auto}

/* The "already signed up" strip above a signup form. Deliberately quieter than the signup
   it sits on, but never smaller than a thumb. */
.panel.altauth{padding:14px 16px}
.panel.altauth .row{gap:12px}
.panel.altauth strong{display:block;font-size:14.5px}
.panel.altauth .btn{flex:none}

.acchead{display:flex;align-items:center;gap:14px;margin:6px 0 20px}
.acchead h1{font-size:23px;letter-spacing:-.5px;margin:0}
.acchead p{margin:1px 0 0;font-size:13.5px}
/* Two columns on a desk, one on a phone. Cards and details are independent, so a wide
   screen shows both at once instead of putting the address a scroll below the card. */
.acccols{display:grid;gap:0 20px;grid-template-columns:1fr}
@media(min-width:860px){ .acccols{grid-template-columns:1fr 1fr} }
.panel.dangerish{max-width:520px}
@media(min-width:860px){ .panel.dangerish{max-width:none} }

/* Cards on file. A brand, four digits and an expiry is everything EBE knows about a card
   and everything the person needs to recognise it. */
.cardlist{display:grid;gap:9px}
.cardrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1.5px solid var(--line);border-radius:13px;padding:12px 13px;background:var(--bg)}
.cardrow.isdef{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.cbrand{font-weight:800;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.cnum{font-weight:700;font-variant-numeric:tabular-nums}
.cexp{font-size:12.5px;margin-right:auto}
.cardrow .linkbtn.del{color:var(--muted)}
.cardrow .linkbtn.del:hover{color:var(--brand)}
.nocards{margin:0;padding:16px;border:1.5px dashed var(--line);border-radius:13px;
  color:var(--muted);font-size:13.5px;text-align:center}

/* Orders page. */
.orderhead{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 0 14px}
.listhead{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:20px 0 10px;font-weight:800}
.listhead:first-child{margin-top:0}
.panel.order.past{box-shadow:none;background:color-mix(in srgb,var(--surface) 70%,var(--bg))}
.btn.again{margin-top:10px}
@media(max-width:559px){ .btn.again{width:100%} }

/* Checkout copy: the sign in hint and the card-on-file line. Small, but they are the two
   sentences that stop a returning customer retyping everything. */
.ckhint{font-size:12.5px;line-height:1.5;margin:-6px 0 14px;padding:10px 12px;
  background:var(--bg);border-radius:11px}
.cksave{font-size:11.5px;line-height:1.5;margin:0 0 10px}

.joinhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.joinhead h2{margin:0}
.joinhead .btn{margin-left:auto}
@media(max-width:559px){ .joinhead .btn{margin-left:0;width:100%} }

/* A text-weight action that sits inside a row without pretending to be a button.
   Used for "Send it again" at checkout, which has to be findable the moment a code
   lapses but must never compete with Place order. */
.linkbtn {
  background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--brand, #c0392b); cursor: pointer; text-decoration: underline;
}
.linkbtn:disabled { color: #9a9a9a; text-decoration: none; cursor: default; }
.linkbtn.nudge { animation: nudge 1.4s ease 2; }
@keyframes nudge {
  0%, 100% { transform: none; }
  20% { transform: scale(1.12); }
  40% { transform: scale(1); }
}

/* Reporting. The flag sits on anything a cook uploaded, and has to be findable without
   being the loudest thing on a photo of someone's food. Bottom-right, because the top
   corners already carry the VIDEO tag and the cook's own remove button. */
.flag{position:absolute;bottom:5px;right:5px;background:rgba(0,0,0,.55);color:#fff;border:none;
  width:26px;height:26px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;opacity:.75}
.flag:hover{opacity:1;background:rgba(0,0,0,.8)}
.card .flag{position:static;background:none;color:var(--muted);width:auto;height:auto;
  border-radius:8px;padding:4px 6px;font-size:14px}
.card .flag:hover{color:var(--brand);background:var(--bg)}
.reportlink{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;opacity:.85}

/* The report sheet. Centred on a desktop, bottom sheet on a phone. */
.sheetwrap{position:fixed;inset:0;z-index:60;background:rgba(20,12,6,.45);
  display:flex;align-items:center;justify-content:center;padding:16px}
.sheet{background:var(--surface);border-radius:var(--radius);padding:20px;width:100%;max-width:420px;
  box-shadow:0 18px 50px rgba(30,18,8,.3);max-height:90vh;overflow:auto}
@media (max-width:520px){
  .sheetwrap{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:18px 18px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   The shopfront, 2026-08-20.
   ==========================================================================
   David: "revise their app in full, plan out mobile and desktop." Everything below is the
   customer's half of that pass. The home page used to open on a column of names with a
   blank photo box the height of a phone screen above each one; a marketplace for food has
   to show food first, and a kitchen with no picture yet has to look designed rather than
   broken. */

/* The dish rail. One thumb-swipe on a phone, a row of four on a desk. Scroll snapping so a
   half-card never sits on the edge, and the scrollbar is hidden because on a phone the
   overhanging next card is the affordance. */
.dishrail{display:grid;grid-auto-flow:column;grid-auto-columns:232px;gap:14px;
  justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.dishrail::-webkit-scrollbar{display:none}
.dish{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);
  display:block;transition:transform .12s ease,border-color .12s ease}
.dish:hover{transform:translateY(-2px);border-color:var(--brand)}
.dishph{position:relative}
.dish .ph{aspect-ratio:4/3;background:#f0e7db center/cover no-repeat}
/* A kitchen that is shut still shows its food, said out loud rather than hidden. At 2am
   every kitchen on EBE is closed and an empty page sells nothing. */
.dish.off .ph{filter:saturate(.55) brightness(.92)}
.dish .shut{position:absolute;left:8px;top:8px;background:rgba(20,12,6,.78);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px}
.dish .body{padding:11px 12px 13px;display:grid;gap:1px}
.dish strong{font-size:15px;line-height:1.25;letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dish .sub{color:var(--muted);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dish .price{margin-top:5px;font-size:15px}
@media(max-width:559px){
  /* Wide enough to read the dish name, narrow enough that the next one shows and says
     "there is more, keep going". */
  .dishrail{grid-auto-columns:63vw}
  /* The section heading and its line of explanation stack on a phone. Side by side they
     each got half a screen and both wrapped to two lines. */
  .fhead{flex-direction:column;align-items:flex-start;gap:1px}
}

/* No photo yet. The brand behind their initial, not an empty grey plate. */
.ph.mono{background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:34px;letter-spacing:-1px}
.card.kitchen .ph.mono{font-size:46px}
.card.kitchen .ph.mono span{opacity:.92;text-shadow:0 2px 10px rgba(60,10,0,.28)}

/* What the kitchen actually sells, on the card, so the tap is an informed one. */
.menuline{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ink)}
.ways{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
@media(max-width:559px){ .ways{margin-left:0} }

/* Search. At 390px the placeholder ran off the end of its own box behind the button, so on
   a phone the button drops under a full width field instead. */
@media(max-width:559px){
  .search{flex-wrap:wrap}
  .search input{flex:1 0 100%}
  .search button{flex:1 0 100%;padding:13px 18px;font-size:15px}
}

/* The kitchen page header. Phone: the cook's photo behind their name, stacked. Desk: the
   same band, with the facts a customer wants before they scroll pulled into a card on the
   right, because a 1440px hero with one line of text in the corner reads unfinished. */
.kitchenhero{padding:26px 0;position:relative;overflow:hidden;isolation:isolate}
/* The cook's own photo as the colour of the band. Blurred and pushed back on purpose: it
   is the mood of the kitchen, not a picture anybody is meant to study. */
.kbg{position:absolute;inset:-30px;z-index:-1;background:center/cover no-repeat;
  filter:blur(22px) brightness(.5) saturate(1.05);transform:scale(1.06)}
.kshot{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin:0 0 14px}
.khead{display:grid;gap:20px;align-items:start}
.kinfo h1{margin:10px 0 6px;font-size:30px;letter-spacing:-.6px}
.kinfo>p{margin:0;opacity:.95;font-size:16px;max-width:640px}
.kinfo .kline{opacity:.88;font-size:14px;margin-top:4px}
.kback{color:#fff;font-weight:700;opacity:.9}
.kback:hover{opacity:1}
.kreport{opacity:.85;font-size:13px;margin:12px 0 0}
.kcard{background:rgba(255,255,255,.96);color:var(--ink);border-radius:var(--radius);
  padding:16px 18px;box-shadow:0 14px 40px rgba(30,12,4,.22)}
.kfacts{margin:0 0 14px;display:grid;gap:9px}
.kfact{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kfact dt{color:var(--muted);font-size:13px;margin:0}
.kfact dd{margin:0;font-weight:800;font-size:15px}
@media(min-width:760px){
  .khead{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
  .kitchenhero{padding:34px 0 32px}
}
@media(max-width:759px){
  /* The card is real information, not decoration, so it stays on a phone. It just sits
     under the name instead of beside it. */
  .kcard{padding:14px 16px}
  .kinfo h1{font-size:26px}
}

/* ==========================================================================
   The working screens: cook, driver, owner.
   ========================================================================== */

/* Today. Three facts, same shape on both screens, first thing under the tabs. A cook or a
   driver opening EBE is asking what today has been worth before anything else. */
.todaybar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;max-width:720px}
.tstat{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;box-shadow:var(--shadow);display:grid;gap:1px;min-width:0}
.tlabel{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tvalue{font-size:22px;letter-spacing:-.6px;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsub{font-size:12px;color:var(--muted)}
@media(max-width:430px){
  .todaybar{gap:8px}
  .tstat{padding:10px}
  .tvalue{font-size:19px}
  .tlabel{font-size:10.5px;letter-spacing:.03em}
}

/* An empty screen with a way out of it. The old one was a grey sentence in the middle of
   nowhere, which on a laptop meant a metre of beige and no idea what to do next. */
.emptybox{max-width:520px;margin:0;padding:22px 20px;background:var(--surface);
  border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center}
.emptybox strong{display:block;font-size:16.5px;letter-spacing:-.2px}
.emptybox p{margin:6px auto 14px;max-width:400px;color:var(--muted);font-size:14px;line-height:1.5}
.emptybox .btn{text-decoration:none}

/* Deliveries already done, as a run of drops with the money on each. */
.donehead{font-size:14px;margin:22px 0 10px;letter-spacing:-.2px}
.donelist{max-width:720px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.donerow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-top:1px solid var(--line)}
.donerow:first-child{border-top:0}
.donerow strong{display:block;font-size:14.5px}
.donerow .muted{font-size:12.5px}

/* Icons are drawn, so they take the colour of whatever they sit in. */
.ic{display:block;flex:none}
.navpin .ic{opacity:.85}

/* EBE's week, on the admin screen. Seven bars, brand red, the money written on each one so
   the shape is a bonus rather than the only way to read it. */
.panel.week{max-width:720px}
.weekfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.weekfacts .tvalue{display:block}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px}
.bar{display:grid;grid-template-rows:auto 1fr auto;gap:5px;height:100%;text-align:center;min-width:0}
.bfill{align-self:end;width:100%;min-height:3px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.bval{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bday{font-size:11.5px;color:var(--muted);font-weight:700}
@media(max-width:430px){
  .bars{gap:5px;height:132px}
  .bval{font-size:9.5px}
  .weekfacts{gap:8px}
}

/* Share and the open switch sit together on the right of a cook's status bar. On a phone
   they take the row under the kitchen name rather than squeezing beside it. */
.statusbar .row.right{gap:8px}
@media(max-width:559px){
  .statusbar .row.right{width:100%;margin-left:0}
  .statusbar .row.right .btn{flex:1}
}
/* Nothing sold this week yet: the bars keep their line but not 150px of empty white above
   it. An empty chart should read as a quiet week, not as a broken panel. */
.bars.flat{height:64px}