/* Manna Kitchen — lunch & dinner preorder.
   Two skins in one sheet: a warm "paper" public page, and the dark steel
   manager console. Breakpoint is 900px, per spec: below it the page is a single
   phone-width column, above it the menu goes to a grid and the kitchen board
   goes two-up. */

:root{
  /* public — warm paper */
  --paper:#FBF7F0; --card:#FFFFFF; --ink:#1E1B17; --ink-soft:#6B6257;
  --line:#EAE2D6; --line-soft:#F2ECE2;
  --curry:#B4531A;        /* primary action / accent */
  --curry-soft:#FCEFE4;
  --leaf:#3F7D33;         /* veg mark, success */
  --leaf-soft:#EDF5EA;
  --chilli:#B3261E;       /* non-veg mark, errors, cutoff */
  --chilli-soft:#FBEAE8;
  --gold:#A87A16; --gold-soft:#FBF2DC;

  /* admin — dark steel */
  --steel:#15181C; --steel-2:#1D2228; --steel-3:#262D35;
  --steel-line:#333C46; --steel-ink:#E8EDF2; --steel-soft:#93A1AF;

  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(30,27,23,.05), 0 8px 24px rgba(30,27,23,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.5; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Bricolage Grotesque','Karla',sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.15}

/* Focus is never removed, only restyled — the kitchen tablet and the ward PC
   are both keyboard-driven more often than anyone plans for. */
:focus-visible{outline:3px solid var(--curry);outline-offset:2px;border-radius:4px}
.loginpage :focus-visible,.adminpage :focus-visible{outline-color:#7FB2E5}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--curry)}
img{max-width:100%;display:block}
.hidden{display:none !important}
.muted{color:var(--ink-soft)}
.tiny{font-size:12.5px}
.center{text-align:center}

/* ---------------------------------------------------------------- shell */
.wrap{max-width:560px;margin:0 auto;padding:0 16px 120px}
@media(min-width:900px){ .wrap{max-width:1040px;padding-bottom:80px} }

/* --------------------------------------------------- hospital brand bar */
/* Deliberately white rather than the page's warm paper: the logo artwork was
   drawn for white, and a cream ground puts a faint square around its
   anti-aliased edges. */
.topbar{background:#FFFFFF;border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;padding-top:11px;padding-bottom:11px}
@media(min-width:900px){ .topbar-in{padding-top:15px;padding-bottom:15px} }
/* Sized off height, with width:auto, so the 500×135 artwork keeps its ratio
   whatever the viewport does. */
.hospital-logo{height:38px;width:auto}
@media(min-width:900px){ .hospital-logo{height:50px} }

/* ------------------------------------------------------ header board */
.board{
  background:linear-gradient(160deg,#241F19,#3A2E22);
  color:#F7F1E7; padding:22px 20px 22px; border-radius:0 0 22px 22px;
  margin-bottom:18px;
}

/* The kitchen's own name, set as a wordmark rather than a heading — this is the
   brand the customer is ordering from, and it has to hold its own on the same
   screen as the hospital's logo without competing with it. Two weights of one
   face: solid cream for "Manna", outlined gold for "Kitchen". */
.wordmark{
  font-family:'Bricolage Grotesque','Karla',sans-serif;
  font-weight:700;letter-spacing:-.022em;line-height:.98;
  font-size:38px;margin-top:5px;color:#FFF8EC;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.28em;
}
.wordmark span{font-weight:600;color:#E0B45C}
@media(min-width:900px){ .wordmark{font-size:52px} }

.serviceline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin-top:9px;font-size:15px;color:#D9CDB9;font-weight:600;
}
.serviceline .sep{opacity:.5}
@media(min-width:900px){ .serviceline{font-size:16.5px} }
@media(min-width:900px){ .board{border-radius:0 0 26px 26px;padding:34px 40px 30px} }
.board .kicker{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#C9B79B}
.board h1{font-size:27px;margin-top:6px;color:#FFF}
@media(min-width:900px){ .board h1{font-size:34px} }
.board .date{font-size:15px;color:#D9CDB9;margin-top:3px}
/* meal switcher — sits on the dark header board, above the status chips.
   Two full-width cards rather than a compact segmented pill: this is the first
   choice a customer makes, and on a phone in a corridor it has to read as two
   buttons at a glance. The earlier pill lost that — its unselected half was
   light text on a dark gradient, which reads as disabled, not tappable.
   Everything here is therefore sized as a tap target first: 1fr/1fr grid, a
   ~66px min height, and an unselected state with a real fill and border. */
.mealtabs{display:block;margin-top:16px}
.mealtabs .pick-lab{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#C9B79B;font-weight:700;margin-bottom:7px;
}
/* Two dated meal services side by side, then the always-on counter on its own
   full-width row beneath them. Not three equal columns: the counter is a
   different kind of thing — no date, no cutoff to miss — and the layout says so
   before the label does. "Juices & Snacks" also will not fit a third of a
   390 px phone without wrapping mid-word. */
/* All services share one row. On phones they wrap to a two-up grid; from 520px
   up they sit in a single equal-width row, however many services there are. */
.mealtabs .pick-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(min-width:520px){
  .mealtabs .pick-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}
@media(min-width:900px){ .mealtabs{max-width:680px} }

.mealtab{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-height:66px;padding:11px 13px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.10);
  /* .46, not a lower value that merely looks fine: the border is the thing that
     says "button", and WCAG 1.4.11 wants >=3:1 for a control boundary. Measured
     against the LIGHT end of the header gradient (#3A2E22, the worst case) this
     is 4.08:1; .30 gave only 2.59:1 there. */
  border:1.5px solid rgba(255,255,255,.46);
  color:#F7F1E7;
  transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.mealtab .nm{
  font-family:'Bricolage Grotesque','Karla',sans-serif;
  font-size:17.5px;font-weight:700;line-height:1.2;
}
.mealtab .ic{font-size:15px;line-height:1;margin-bottom:3px}
.mealtab .cut{font-size:12px;font-weight:600;opacity:.85;line-height:1.25}
.mealtab:active{transform:scale(.985)}
/* Three dated services across a small phone: trim so "Breakfast" and its cutoff
   line never overflow their third of the row. Desktop/tablet keep the roomier
   sizing above. */
@media(max-width:430px){
  .mealtab{padding:10px 10px}
  .mealtab .nm{font-size:15.5px}
  .mealtab .cut{font-size:11px}
  .mealtab .ic{font-size:14px}
  .mealtabs .pick-row{gap:7px}
}
@media(hover:hover){ .mealtab:hover{background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.64)} }

/* Selected: solid paper fill, so which menu you are reading is unmistakable
   against the dark board even in bright corridor light. */
.mealtab[aria-selected=true]{
  background:#FBF7F0;border-color:#FBF7F0;color:#241F19;
  box-shadow:0 3px 14px rgba(0,0,0,.28);
}
.mealtab[aria-selected=true] .cut{opacity:.72}
@media(hover:hover){ .mealtab[aria-selected=true]:hover{background:#FBF7F0;
  border-color:#FBF7F0} }

/* Closed, not disabled: the menu stays readable after the cutoff, exactly as a
   past-cutoff dinner did before lunch existed. Dimmed but still visibly a
   button, and it says so — "closed · view menu" rather than a struck-through
   time that reads as unavailable. */
.mealtab.closed{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.38);
  color:#C6B79E}
.mealtab.closed[aria-selected=true]{background:#EFE7DA;border-color:#EFE7DA;color:#4A4136}

/* The counter card sits inline as a peer tab, marked with the gold used for the
   "Kitchen" half of the wordmark so it still reads as the standing offer rather
   than a dated meal. Same vertical layout as the others. */
.mealtab.counter{
  border-color:rgba(224,180,92,.55);background:rgba(224,180,92,.12);
}
.mealtab.counter .cut{opacity:.9}
.mealtab.counter[aria-selected=true]{background:#FBF7F0;border-color:#FBF7F0;color:#241F19}
@media(hover:hover){ .mealtab.counter:hover{background:rgba(224,180,92,.2);
  border-color:rgba(224,180,92,.8)} }
@media(hover:hover){ .mealtab.counter[aria-selected=true]:hover{background:#FBF7F0} }
/* "Open now" — the whole point of the counter, so it gets a live badge. */
.mealtab .live-dot{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.mealtab .live-dot i{
  width:7px;height:7px;border-radius:50%;background:#7BD16A;
  box-shadow:0 0 0 3px rgba(123,209,106,.22);
}
.mealtab.closed .live-dot i{background:#AFA294;box-shadow:none}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.10);color:#F0E6D6;border:1px solid rgba(255,255,255,.14);
}
.chip.warn{background:rgba(179,38,30,.22);border-color:rgba(255,140,130,.35);color:#FFD6D2}
.chip.live{background:rgba(63,125,51,.24);border-color:rgba(140,220,120,.3);color:#DAF3D2}

/* serve bar */
.servebar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--gold-soft);border:1px solid #EDDCB4;border-radius:var(--r);
  padding:11px 14px;margin-bottom:18px;font-size:14px;
}
.servebar b{font-weight:700}
.servebar a{font-weight:700;text-decoration:none;white-space:nowrap}

/* --------------------------------------------------------- sections */
/* search + veg filter */
.filterbar{display:flex;gap:9px;align-items:stretch;margin:2px 0 4px}
.searchbox{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:0 12px;box-shadow:var(--shadow);
}
.searchbox .ic{font-size:14px;opacity:.6;flex:0 0 auto}
.searchbox input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:11px 0;font-size:15px;
}
/* The browser's own clear affordance, kept — removing it costs a tap. */
.searchbox input::-webkit-search-cancel-button{cursor:pointer}
.vegfilter{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:0 14px;border-radius:11px;font-size:14px;font-weight:700;
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:var(--shadow);
}
.vegfilter.on{background:var(--leaf-soft);border-color:#BFDDB6;color:var(--leaf)}
@media(hover:hover){ .vegfilter:hover{border-color:#BFDDB6} }

/* Section headings stick under the cart-free top edge while their section is on
   screen, so a long juice list never leaves you unsure what you are looking at. */
.sec-head{
  display:flex;align-items:baseline;gap:10px;margin:26px 4px 12px;
  position:sticky;top:0;z-index:5;
  background:var(--paper);padding:8px 0 6px;
}
/* A section that needs a line of explanation — "Always available" earns one,
   since a customer has no way to know those items are on every day. */
.sec-wrap .sec-head{margin-bottom:2px}
.sec-sub{margin:0 4px 12px;font-size:13px;color:var(--ink-soft)}
.sec-head h2{font-size:19px}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
.sec-head .count{font-size:12.5px;color:var(--ink-soft)}

/* Chef's specials. Always the first thing under the header — the band is what
   makes that placement read as deliberate rather than as "whatever sorted
   first". Loud enough to be seen before the rest of the menu, quiet enough that
   a 15-item list underneath it still looks like the main event. */
.special-band{
  background:var(--curry-soft);border:1px solid #F2DCC8;border-radius:var(--r);
  padding:4px 12px 14px;margin:0 0 18px;
  box-shadow:0 1px 2px rgba(180,83,26,.05), 0 10px 24px rgba(180,83,26,.07);
}
.special-band .sec-head{margin-top:14px;background:var(--curry-soft)}
.special-band .sec-head h2{color:var(--curry)}
/* A ribbon, so the section announces itself rather than relying on the tint. */
.special-band .sec-head h2::before{
  content:'★';margin-right:8px;font-size:15px;vertical-align:2px;
}
.special-band .rule{background:#EAC9AC}
.special-band .count{color:var(--curry);font-weight:700}
/* Cards inside the band pick up the accent border so they stay distinguishable
   once a photo fills the tile. */
.special-band .dish{border-color:#EFD6BE}

/* ------------------------------------------------------------ dishes */
/* Divider-separated rows rather than floating cards — the food-delivery idiom.
   A menu is a list you scan, and 17 juices as 17 shadowed cards is 17 things
   competing for attention instead of one legible list. */
.dishes{display:grid;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
@media(min-width:900px){
  .dishes{grid-template-columns:1fr 1fr;column-gap:0}
  /* On two columns the left rule separates the pair. */
  .dishes .dish:nth-child(even){border-left:1px solid var(--line-soft)}
}

.dish{
  background:var(--card);border-bottom:1px solid var(--line-soft);
  padding:15px 14px;display:flex;gap:14px;align-items:flex-start;
  transition:background .15s;
}
.dish.out{opacity:.62}
/* Image right, ADD button straddling its lower edge — the arrangement every
   Indian food-delivery app converged on. It puts the picture and the commit
   action in the same glance, and keeps the name/price column a clean left rail. */
.dish-media{position:relative;flex:0 0 106px;width:106px;align-self:flex-start;
  padding-bottom:16px}
.dish-photo{
  width:106px;height:98px;border-radius:12px;object-fit:cover;
  background:var(--line-soft);display:block;
}
.dish-media .addbtn,
.dish-media .stepper,
.dish-media .soldout{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:2;
}
.dish-media .addbtn{
  min-width:86px;justify-content:center;
  box-shadow:0 2px 8px rgba(30,27,23,.16);
}
.dish-media .stepper{box-shadow:0 2px 8px rgba(30,27,23,.16);background:#fff}
.dish-media .stepper button{width:32px;height:30px;font-size:17px}
.dish-media .stepper .n{min-width:24px;font-size:14px}
.dish-media .soldout{
  background:#EFEBE4;color:var(--ink-soft);border:1px solid var(--line);
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
}
/* Placeholder tile, used until a real photo is uploaded for a dish.
   Keyed to the kind of food (see dishArt() in app.js) rather than one generic
   pot for everything, so a 15-item menu reads as designed instead of broken.
   It is deliberately flat and illustrative — nobody should mistake it for a
   photograph of the plate they are about to be served. */
.dish-photo.ph{
  display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;position:relative;overflow:hidden;
  background:var(--ph-a,#F1E9DC);
  box-shadow:inset 0 0 0 1px rgba(30,27,23,.06);
}
.dish-photo.ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(150deg,var(--ph-a,#F1E9DC),var(--ph-b,#E4D8C4));
  z-index:0;
}
.dish-photo.ph .g{position:relative;z-index:1;filter:saturate(.95)}
/* Reading order down the left rail: veg mark, badges, name, price, description,
   availability. Mark first because it is the thing people filter on fastest. */
.dish-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dish-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dish-title h3{font-size:16px;line-height:1.25}
.dish-desc{font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.dish-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:5px}
.price{font-weight:700;font-size:15.5px}

/* Earned, never assigned: set only when real confirmed sales clear both the
   window minimum and the top-N cut. See _bestseller_dish_ids in main.py. */
.badge-best{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border-radius:5px;
  background:var(--gold-soft);color:var(--gold);border:1px solid #EDDCB4;
}

/* FSSAI veg / non-veg mark: square outline with a filled dot. Regulatory, and
   the single most-scanned thing on the card — never collapse it to a colour. */
.mark{width:15px;height:15px;flex:0 0 15px;border:1.8px solid var(--leaf);border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center}
.mark::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.mark.nonveg{border-color:var(--chilli)}
.mark.nonveg::after{background:var(--chilli);border-radius:0;
  width:0;height:0;background:transparent;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid var(--chilli)}

.limit{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:var(--gold-soft);color:var(--gold);border:1px solid #EDDCB4}
.limit.low{background:var(--chilli-soft);color:var(--chilli);border-color:#F2CFCB}
.limit.gone{background:#EFEBE4;color:var(--ink-soft);border-color:var(--line)}

/* Who is cooking this, and how to reach them. Quiet by design — a footer that
   shouts undermines the very thing it is there to establish. */
.sitefoot{
  margin-top:30px;padding:18px 4px 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-soft);line-height:1.6;
}
.sitefoot .nm{font-weight:700;color:var(--ink);font-size:13.5px}
.sitefoot .fssai{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sitefoot .note{margin-top:8px;color:var(--ink-soft)}
.sitefoot a{font-weight:700;text-decoration:none}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);
  border-radius:999px;overflow:hidden;background:#fff}
.stepper button{
  width:36px;height:34px;font-size:19px;line-height:1;color:var(--curry);
  display:flex;align-items:center;justify-content:center;font-weight:600;
}
.stepper button:disabled{color:#CFC6B8;cursor:not-allowed}
.stepper .n{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.stepper.zero .n{color:var(--ink-soft)}
.addbtn{
  padding:8px 18px;border-radius:999px;background:var(--curry);color:#fff;
  font-weight:700;font-size:14px;
}
.soldout{font-size:13px;font-weight:700;color:var(--chilli)}

/* ---------------------------------------------------------- cart bar */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;box-shadow:0 -6px 24px rgba(30,27,23,.08);
}
.cartbar .sum{flex:1;min-width:0}
.cartbar .sum b{display:block;font-size:17px}
.cartbar .sum span{font-size:12.5px;color:var(--ink-soft)}
@media(min-width:900px){
  .cartbar{max-width:1040px;margin:0 auto;border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:none}
}

/* ----------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:12px;background:var(--curry);color:#fff;
  font-weight:700;font-size:15.5px;border:1px solid transparent;
}
.btn:disabled{background:#D9CFC1;color:#fff;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.danger{background:#fff;color:var(--chilli);border-color:#F0CFCB}
.btn.wide{width:100%}
.btn.wa{background:#25D366;color:#0B2E17}

/* ------------------------------------------------------------ cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.card h2{font-size:19px;margin-bottom:4px}
.card .sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:14px}

/* ------------------------------------------------------------ forms */
label{display:block;font-size:13px;font-weight:700;margin:14px 0 5px;letter-spacing:.01em}
input[type=text],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-size:16px;   /* 16px: anything smaller zooms on iOS focus */
}
input:focus,select:focus{border-color:var(--curry)}
.err{background:var(--chilli-soft);border:1px solid #F0CFCB;color:#8A1F19;
  padding:11px 13px;border-radius:10px;font-size:14px;margin:12px 0;font-weight:600}
.ok{background:var(--leaf-soft);border:1px solid #CFE4C8;color:#2A5A22;
  padding:11px 13px;border-radius:10px;font-size:14px;margin:12px 0;font-weight:600}

/* segmented choice (who is ordering / pickup vs delivery) */
.choices{display:grid;gap:10px}
@media(min-width:900px){ .choices.three{grid-template-columns:1fr 1fr 1fr} .choices.two{grid-template-columns:1fr 1fr} }
.choice{
  display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;
  padding:15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
}
.choice[aria-pressed=true]{border-color:var(--curry);background:var(--curry-soft);box-shadow:inset 0 0 0 1px var(--curry)}
.choice .ic{font-size:22px;line-height:1.1}
.choice b{display:block;font-size:15.5px}
.choice span{font-size:13px;color:var(--ink-soft)}

/* --------------------------------------------------- confirmation */
.token{
  background:linear-gradient(160deg,#241F19,#3A2E22);color:#fff;border-radius:20px;
  padding:30px 20px;text-align:center;margin-bottom:16px;
}
.token .lab{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#C9B79B}
.token .no{font-family:'Bricolage Grotesque',sans-serif;font-size:56px;font-weight:700;
  letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.token .when{font-size:14px;color:#D9CDB9}
.paynote{background:var(--gold-soft);border:1px solid #EDDCB4;border-radius:12px;
  padding:13px 15px;font-size:14px;margin-bottom:14px}
.paynote b{display:block;font-size:19px;margin-top:3px}

.lines{border-top:1px solid var(--line-soft)}
.line{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.line .nm{flex:1;min-width:0}
.line .q{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.line .amt{font-weight:700;font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.totalrow{display:flex;justify-content:space-between;padding:13px 0 0;font-weight:700;font-size:16.5px}

/* ------------------------------------------------------ empty state */
.empty{text-align:center;padding:52px 24px;color:var(--ink-soft)}
.empty .big{font-size:44px;margin-bottom:12px;opacity:.5}
.empty h2{font-size:19px;color:var(--ink);margin-bottom:6px}

/* countdown */
.countdown{font-variant-numeric:tabular-nums;font-weight:700}

/* =================================================================== */
/*  ADMIN — dark steel                                                 */
/* =================================================================== */
body.adminpage{background:var(--steel);color:var(--steel-ink)}
body.adminpage a{color:#8FC0EE}

.ahead{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--steel-2);border-bottom:1px solid var(--steel-line);
  position:sticky;top:0;z-index:30;
}
.ahead .brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px}
.ahead .brand small{display:block;font-family:'Karla',sans-serif;font-weight:400;
  font-size:11.5px;color:var(--steel-soft);letter-spacing:.05em}
.ahead .spacer{flex:1}
.ahead .who{text-align:right;font-size:12.5px;color:var(--steel-soft);line-height:1.3}
.ahead .who b{display:block;color:var(--steel-ink);font-size:13.5px}
.ahead button{padding:8px 14px;border:1px solid var(--steel-line);border-radius:9px;
  color:var(--steel-ink);font-size:13.5px;font-weight:600;background:var(--steel-3)}

.atabs{display:flex;gap:6px;padding:12px 18px 0;background:var(--steel-2);
  border-bottom:1px solid var(--steel-line)}
.atab{padding:10px 16px;border-radius:10px 10px 0 0;font-size:14.5px;font-weight:600;
  color:var(--steel-soft);border:1px solid transparent;border-bottom:none}
.atab[aria-selected=true]{background:var(--steel);color:var(--steel-ink);
  border-color:var(--steel-line);margin-bottom:-1px}

/* meal switch — pushed to the right of the tabs, deliberately a different shape
   from them: the tabs choose a screen, this chooses which service that screen
   is about, and the two must not read as one row of four equal buttons.
   Sized generously anyway — the manager acts on whichever meal this says, so
   misreading it means publishing lunch onto dinner. */
.amealswitch{margin-left:auto;display:flex;gap:4px;align-self:center;margin-bottom:9px;
  padding:4px;border-radius:12px;background:var(--steel-3);
  border:1px solid var(--steel-line)}
.amealswitch .lab{display:none}
.amealbtn{display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:9px;font-size:14px;font-weight:700;
  color:var(--steel-ink);border:1.5px solid transparent;white-space:nowrap}
@media(hover:hover){ .amealbtn:hover{background:rgba(255,255,255,.07)} }
.amealbtn[aria-pressed=true]{background:var(--steel-ink);color:var(--steel);
  border-color:var(--steel-ink)}
@media(hover:hover){ .amealbtn[aria-pressed=true]:hover{background:var(--steel-ink)} }
.amealbtn .cut{font-size:11.5px;font-weight:600;opacity:.62}

/* Phones: the header tabs and the meal switch stop competing for one line. */
@media(max-width:640px){
  .atabs{flex-wrap:wrap;padding:10px 14px 0}
  .amealswitch{margin-left:0;width:100%;order:-1;margin-bottom:12px}
  .amealbtn{flex:1;justify-content:center}
}

.awrap{max-width:1100px;margin:0 auto;padding:20px 18px 90px}

.acard{background:var(--steel-2);border:1px solid var(--steel-line);
  border-radius:var(--r);padding:16px;margin-bottom:14px}
.acard h2{font-size:17px;margin-bottom:3px}
.acard .sub{font-size:13px;color:var(--steel-soft);margin-bottom:12px}

.syncbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--steel-soft);margin-bottom:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:0 0 8px}
.dot.stale{background:#C99A2E}
.dot.none{background:#6B7683}

/* production counters */
.prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.prodcell{background:var(--steel-3);border:1px solid var(--steel-line);border-radius:11px;padding:12px 13px}
.prodcell .n{font-family:'Bricolage Grotesque',sans-serif;font-size:31px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.prodcell .nm{font-size:13px;color:var(--steel-soft);margin-top:5px;display:flex;align-items:center;gap:6px}
.prodcell .cap{font-size:11.5px;color:#C99A2E;margin-top:3px}

.runs{display:grid;gap:14px}
@media(min-width:900px){ .runs{grid-template-columns:1fr 1fr;align-items:start} }

/* statistics tab: range picker + per-service stat lines */
.prodcell .statline{font-size:12.5px;color:var(--steel-soft);margin-top:4px}
.statsbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:14px}
.rangebtn{padding:8px 13px;border-radius:9px;font-size:13.5px;font-weight:600;
  background:var(--steel-3);border:1px solid var(--steel-line);color:var(--steel-ink);cursor:pointer}
.rangebtn:hover{border-color:var(--steel-soft)}
.rangebtn.on{background:var(--steel-ink);color:var(--steel-2);border-color:var(--steel-ink)}
.rangedate{padding:7px 9px;border-radius:9px;font-size:13px;background:var(--steel-3);
  border:1px solid var(--steel-line);color:var(--steel-ink)}
.rangesep{font-size:12.5px;color:var(--steel-soft)}

/* per-dish stats table */
.itemstats{width:100%;border-collapse:collapse;font-size:13.5px}
.itemstats th{text-align:left;color:var(--steel-soft);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:4px 8px;border-bottom:1px solid var(--steel-line)}
.itemstats td{padding:7px 8px;border-bottom:1px solid var(--steel-line)}
.itemstats .num{text-align:right;font-variant-numeric:tabular-nums}
.itemstats tr:last-child td{border-bottom:none}

/* dishes & photos library */
.photostat{font-size:12.5px;color:var(--steel-soft);margin-bottom:12px}
.dishlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.dishcell{background:var(--steel-3);border:1px solid var(--steel-line);border-radius:12px;
  padding:10px;display:flex;flex-direction:column;gap:9px}
.dishthumb{aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--steel-2);
  display:flex;align-items:center;justify-content:center}
.dishthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dishthumb.empty{border:1px dashed var(--steel-line)}
.dishthumb .ph{font-size:30px;opacity:.5}
.dishmeta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dishname{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.dishprice{font-size:13px;color:var(--steel-soft);font-variant-numeric:tabular-nums}

.ticket{background:var(--steel-3);border:1px solid var(--steel-line);border-radius:11px;
  padding:12px 13px;margin-bottom:9px}
.ticket .top{display:flex;align-items:center;gap:9px}
.ticket .tok{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;
  font-variant-numeric:tabular-nums}
.ticket .loc{margin-left:auto;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:#2E3946;color:#9FC6EC;border:1px solid #3C4C5D}
.ticket .idl{font-size:12.5px;color:var(--steel-soft);margin-top:2px}
.ticket .its{font-size:13.5px;margin-top:8px;line-height:1.6}
.ticket .collect{font-size:13.5px;font-weight:700;color:#8FD98A;margin-top:7px}

/* menu builder rows */
.mrow{display:grid;gap:9px;background:var(--steel-3);border:1px solid var(--steel-line);
  border-radius:11px;padding:12px;margin-bottom:9px}
@media(min-width:900px){
  .mrow{grid-template-columns:auto 2fr 88px 96px auto auto auto;align-items:center;gap:11px}
}
.mrow input[type=text],.mrow input[type=number]{
  background:var(--steel-2);border-color:var(--steel-line);color:var(--steel-ink);
  padding:9px 11px;font-size:14.5px}
.vegtoggle{width:34px;height:34px;border:1.5px solid var(--steel-line);border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:var(--steel-2)}
.vegtoggle .mark{width:17px;height:17px;flex:0 0 17px}
.mrow label.inline{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;
  color:var(--steel-soft);white-space:nowrap;font-weight:600}
.mrow input[type=checkbox]{width:17px;height:17px;accent-color:#C9782E}
/* Today's menu vs the always-available list. Two wide cards rather than a
   segmented pill, because picking the wrong one here means publishing tonight's
   fish curry as a permanent fixture — the distinction has to be legible, not
   compact. */
.kindswitch{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0 4px}
@media(max-width:640px){ .kindswitch{grid-template-columns:1fr} }
.kindbtn{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:11px 13px;border-radius:11px;
  background:var(--steel-3);border:1.5px solid var(--steel-line);color:var(--steel-soft);
}
.kindbtn b{font-size:14.5px;font-weight:700;color:var(--steel-ink)}
.kindbtn span{font-size:12px;line-height:1.35}
@media(hover:hover){ .kindbtn:hover{border-color:#7FB2E5} }
.kindbtn[aria-pressed=true]{background:var(--steel-ink);border-color:var(--steel-ink)}
.kindbtn[aria-pressed=true] b,
.kindbtn[aria-pressed=true] span{color:var(--steel)}

/* Marking a dish special promotes it to the band at the top of the customer's
   menu. As a bare checkbox that was easy to miss entirely, so it reads as a
   toggle whose on-state is unmistakable. */
.startoggle{font-size:12.5px;font-weight:700;white-space:nowrap;
  border:1px solid var(--steel-line);border-radius:9px;padding:8px 11px;
  background:var(--steel-2);color:var(--steel-soft)}
.startoggle.on{background:#4A3418;border-color:#C9782E;color:#F6C98A}
@media(hover:hover){ .startoggle:hover{border-color:#C9782E;color:#F6C98A} }
.photobtn{font-size:12.5px;color:#8FC0EE;font-weight:700;white-space:nowrap;
  border:1px solid var(--steel-line);border-radius:9px;padding:8px 11px;background:var(--steel-2)}
.photobtn.has{color:#8FD98A}
.rm{font-size:19px;color:#D98A84;padding:4px 9px;line-height:1}

.chipsrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.libchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:var(--steel-3);border:1px solid var(--steel-line);font-size:13.5px;font-weight:600;
  color:var(--steel-ink)}
.libchip .mark{width:13px;height:13px;flex:0 0 13px}
.libchip .p{color:var(--steel-soft);font-weight:400}

.abtn{padding:12px 20px;border-radius:11px;background:#C9782E;color:#160E06;
  font-weight:700;font-size:15px;border:1px solid transparent}
.abtn:disabled{background:#4A4238;color:#8B8073;cursor:not-allowed}
.abtn.ghost{background:var(--steel-3);color:var(--steel-ink);border-color:var(--steel-line)}

.publishbar{position:sticky;bottom:0;background:var(--steel-2);
  border-top:1px solid var(--steel-line);padding:13px 18px calc(13px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;margin:0 -18px -90px;flex-wrap:wrap}
.publishbar .meta{flex:1;min-width:180px;font-size:12.5px;color:var(--steel-soft);line-height:1.4}

.aerr{background:#3A1D1B;border:1px solid #6B322C;color:#F3C3BE;
  padding:11px 13px;border-radius:10px;font-size:14px;margin:11px 0;font-weight:600}
.aok{background:#1C3320;border:1px solid #2F5C36;color:#B9E5BC;
  padding:11px 13px;border-radius:10px;font-size:14px;margin:11px 0;font-weight:600}

/* =================================================================== */
/*  LOGIN                                                              */
/* =================================================================== */
body.loginpage{background:var(--steel);display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px}
.loginwrap{width:100%;max-width:392px;text-align:center}
.crest{width:56px;height:56px;border-radius:50%;background:#C9782E;color:#160E06;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.loginwrap h1{font-size:20px;color:var(--steel-ink)}
.loginwrap .sub{font-size:13px;color:var(--steel-soft);margin-top:4px}
.logincard{background:var(--steel-2);border:1px solid var(--steel-line);border-radius:16px;
  padding:22px;margin-top:22px;text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.logincard h2{font-size:16.5px;margin-bottom:16px;color:var(--steel-ink)}
.logincard label{color:var(--steel-soft)}
.logincard input{background:var(--steel-3);border-color:var(--steel-line);color:var(--steel-ink)}
.logincard input:focus{border-color:#7FB2E5}
.logincard .abtn{width:100%;margin-top:20px}
.foot{margin-top:18px;font-size:12px;color:var(--steel-soft)}