/* ══════════════════════════════════════════════════════════════════
   GREENSTAN · "Evergreen Ledger" design system
   One-file ERP · calm paper-green canvas · deep forest rail ·
   emerald action colour · tabular numerals for money.
   Tokens first — change the brand here, everything follows.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* ink & text */
  --ink:#16211A; --sub:#54635A; --muted:#8A958D;
  /* brand */
  --primary:#239E60; --primary-dk:#1B7C4B; --primary-bg:#E5F5EC;
  --grad-primary:linear-gradient(135deg,#2BAE6A 0%,#1C8A50 100%);
  /* semantics */
  --success:#0C7C59; --success-bg:#E1F2EA;
  --warning:#B0741C; --warning-bg:#FBF0DA;
  --danger:#C2402F;  --danger-bg:#FCE9E5;
  /* surfaces & lines */
  --border:#DFE7E0; --line:#EDF2ED; --surface:#F2F6F2; --white:#FFFFFF;
  /* --card and --text were used by the home cards, the top bar and its
     menus before they were ever defined, so those surfaces had no
     background at all: the account menu was a list of words with the page
     showing through it. They are aliases of what the rest of the sheet
     already uses. */
  --card:#FFFFFF; --text:#16211A;
  --side:#0D2016;
  /* what a lit tab throws onto the bar. Overridden per project, because a
     hardcoded green halo under a brown project's buttons is the same bug
     as a green tab in a brown project. */
  --sb-cast:rgba(43,174,106,.9);
  /* accents rotated across stat tiles (echoes the KPI dots of the reference dashboards) */
  --acc-1:#239E60; --acc-2:#4C8BF5; --acc-3:#C98A1B; --acc-4:#D96A57; --acc-5:#7A5CC6; --acc-6:#1E9E9A;
  /* shape & depth */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(20,32,24,.05);
  --shadow-card:0 1px 2px rgba(20,32,24,.04),0 14px 34px -28px rgba(20,32,24,.55);
  --shadow-pop:0 18px 50px -12px rgba(20,32,24,.30);
  --ring:0 0 0 3px rgba(35,158,96,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(35,158,96,.22)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C7D3C9;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#AABBAF;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

/* ---------- sidebar rail ---------- */
aside{position:fixed;left:0;top:0;bottom:0;width:232px;color:#fff;display:flex;flex-direction:column;z-index:60;
  transition:width .18s cubic-bezier(.3,.8,.4,1),box-shadow .18s;
  background:linear-gradient(180deg,var(--sb-1,#11291C) 0%,var(--sb-2,#0D2016) 55%,var(--sb-3,#0B1B13) 100%)}
aside::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(430px 280px at -20% -8%,var(--sb-glow-1,#30B46C) 0%,transparent 62%),
             radial-gradient(520px 420px at 125% 112%,var(--sb-glow-2,#166A3F) 0%,transparent 62%);
  opacity:.3}
aside>*{position:relative;z-index:1}
.sb-brand{padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;gap:11px;align-items:center}
.sb-brand .logo{width:38px;height:38px;flex:none;border-radius:12px;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px var(--sb-cast),inset 0 1px 0 rgba(255,255,255,.25)}
.sb-brand .logo svg{display:block}
/* a counter's name can be long where GREENSTAN ERP never was: one line,
   clipped, with the whole of it on hover */
.sb-brand>div:not(.logo){min-width:0}
.sb-brand .n{font-weight:750;font-size:14px;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Every colour in this bar used to be a green tint — #8FB49C, #AEC3B5,
   #5E7F6C — which read as "green" long before it read as "quieter". The
   bar now speaks in white and greys: the type is white where it matters,
   dimmed where it does not, and only the lit tab carries the project's
   colour. That also means these rules stay honest in a brown project. */
.sb-brand .s{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px}
.sb-nav{padding:10px 10px 12px;flex:1;overflow-y:auto}
.sb-grp{padding:16px 10px 6px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.sb-grp:first-child{padding-top:6px}
.sb-proj+.sb-grp{padding-top:12px}
/* the second line of a heading: what the section means, in words rather
   than in the reader having to switch counter to find out */
.sb-grp .s{display:block;margin-top:3px;font-size:9.5px;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:rgba(255,255,255,.5)}
.sb-nav button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:rgba(255,255,255,.72);
  padding:9px 11px;border-radius:10px;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left;margin-bottom:2px;
  transition:background .15s,color .15s;position:relative}
.sb-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-nav button.active{background:var(--grad-primary);color:#fff;font-weight:650;
  box-shadow:0 8px 20px -10px var(--sb-cast),inset 0 1px 0 rgba(255,255,255,.18)}
.sb-nav .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;opacity:.9}
.sb-nav button.active .ico{opacity:1}
.sb-nav .ico svg{display:block}
/* ---------- collapsible side nav: icon rail, hover to peek ---------- */
body.navmini aside{width:64px}
body.navmini .wrap{margin-left:64px}
/* peeking widens the rail OVER the page — the content never jumps */
body.navmini aside.peek{width:232px;box-shadow:14px 0 44px -14px rgba(5,14,9,.75)}
body.navmini aside:not(.peek) .sb-brand>div:not(.logo){display:none}
body.navmini aside:not(.peek) .sb-brand{justify-content:center;padding:18px 0 16px}
body.navmini aside:not(.peek) .sb-grp{height:0;padding:6px 0 0;overflow:hidden;color:transparent}
/* the rail is icons only; which counter you are in comes back on peek */
body.navmini aside:not(.peek) .sb-proj{display:none}
body.navmini aside:not(.peek) .sb-nav{padding:10px 8px 12px}
body.navmini aside:not(.peek) .sb-nav button{justify-content:center;padding:10px 0}
body.navmini aside:not(.peek) .sb-nav .lbl{display:none}

/* ---------- page shell ---------- */
.wrap{margin-left:232px;padding:24px 30px;max-width:1500px}
.pagehead{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.pagehead h1{font-size:21px;font-weight:750;letter-spacing:-.01em}
.pagehead .d{color:var(--muted);font-size:13px}
@media(max-width:760px){
  /* On a phone the bar is a DRAWER: the whole desktop sidebar, accordion
     and all, slid off the left edge and brought in by the ☰ in the top
     bar. The old design squeezed it into a row of unlabelled icons across
     the top — sections half-visible, the rest run off the edge. A drawer
     costs one tap and loses nothing. */
  aside,body.navmini aside{position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);height:auto;
    flex-direction:column;transform:translateX(-104%);
    transition:transform .22s cubic-bezier(.3,.8,.4,1);z-index:130}
  body.gs-navopen aside,body.gs-navopen.navmini aside{transform:none;box-shadow:18px 0 50px -10px rgba(5,14,9,.65)}
  /* inside a drawer the icon-rail overrides make no sense: it is always
     the full bar — brand, labels, lids */
  body.navmini aside:not(.peek) .sb-brand>div:not(.logo){display:block}
  body.navmini aside:not(.peek) .sb-brand{justify-content:flex-start;padding:18px 16px 16px}
  body.navmini aside:not(.peek) .sb-grp{height:auto;padding:13px 10px 7px;overflow:visible;color:#fff}
  body.navmini aside:not(.peek) .sb-proj{display:flex}
  body.navmini aside:not(.peek) .sb-nav{padding:10px 10px 12px}
  body.navmini aside:not(.peek) .sb-nav button{justify-content:flex-start;padding:9px 11px}
  body.navmini aside:not(.peek) .sb-nav button.sb-grp{padding:13px 10px 7px}
  body.navmini aside:not(.peek) .sb-nav .lbl{display:inline}
  .wrap,body.navmini .wrap{margin-left:0;padding:14px}
  /* the page behind the open drawer: dimmed, and a tap on it closes */
  #gsNavVeil{display:none;position:fixed;inset:0;background:rgba(8,14,10,.45);z-index:120}
  body.gs-navopen #gsNavVeil{display:block}
}

/* ---------- large screens: stop the layout stretching across a 4K monitor ---------- */
@media(min-width:1600px){ .wrap{max-width:1720px;padding:32px 42px} .dash-grid{grid-template-columns:repeat(3,1fr)} .card.full{grid-column:1/-1} }
@media(min-width:2200px){ .dash-grid{grid-template-columns:repeat(4,1fr)} }

/* ---------- tablet ---------- */
@media(max-width:1100px){ .stat-row{gap:10px} .stat{flex:1 1 150px} }

/* ---------- phone ---------- */
@media(max-width:760px){
  .pagehead h1{font-size:19px}
  .pagehead{gap:6px}
  /* wide tables scroll inside their card instead of breaking the page */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .mini-tbl{white-space:normal}
  .card{overflow-x:auto}
  /* drawers take the full screen — Esc or the close button dismisses them */
  .panel{width:100%;max-width:100%;right:-100%;border-radius:0}
  .panel.open{right:0}
  /* stacked form rows regardless of inline grid definitions */
  .row2,.row3{grid-template-columns:1fr!important}
  .rline,.rline-head{grid-template-columns:1fr 1fr!important;row-gap:6px}
  .rline-head{display:none}
  /* tab strips and toolbars scroll rather than wrap into a tall block */
  .pmethod{overflow-x:auto;flex-wrap:nowrap}
  .pmethod label{white-space:nowrap}
  .toolbar input[type=search]{flex:1 1 100%}
  .stat{flex:1 1 calc(50% - 12px);min-width:0}
  .stat .v{font-size:16px}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .login-card{padding:26px 20px}
}
@media(max-width:420px){ .stat{flex:1 1 100%} .sb-brand .n{font-size:12px} }
/* respect a phone's software keyboard: keep the sticky footer visible */
@media(max-height:520px){ .panel-foot{position:static} }

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input[type=search]{flex:1;min-width:180px;padding:9px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:var(--white);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.toolbar input[type=search]:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.toolbar select{padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--white);font-size:13px;box-shadow:var(--shadow-sm)}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--border);background:var(--white);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
.btn:hover{border-color:#B9C8BC;transform:translateY(-1px);box-shadow:0 4px 12px -6px rgba(20,32,24,.25)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--grad-primary);border-color:transparent;color:#fff;font-weight:650;
  box-shadow:0 6px 16px -8px rgba(35,158,96,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 8px 20px -8px rgba(35,158,96,.8)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);background:var(--danger-bg)}
.btn.small{padding:5px 11px;font-size:12px;border-radius:8px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--border);background:#F8FBF8}
th.sort{cursor:pointer;user-select:none;white-space:nowrap}
th.sort:hover{color:var(--primary-dk)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F5FAF6}
.rowlink,.plink{color:var(--primary-dk);font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(35,158,96,.35);text-underline-offset:3px}
.rowlink:hover,.plink:hover{color:var(--primary);text-decoration-color:var(--primary)}

/* ---------- login gate ---------- */
#loginGate{position:fixed;inset:0;z-index:99999;background:#0B1D13;display:flex;align-items:center;justify-content:center;overflow:hidden}
#loginGate::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;top:-180px;right:-140px;
  background:radial-gradient(circle at 35% 35%,rgba(52,196,120,.45),rgba(52,196,120,0) 66%)}
#loginGate::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;bottom:-200px;left:-160px;
  background:radial-gradient(circle at 60% 40%,rgba(30,158,154,.30),rgba(30,158,154,0) 66%)}
.login-card{position:relative;z-index:1;background:#fff;border-radius:20px;padding:38px 34px;width:min(380px,92vw);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.login-logo{width:54px;height:54px;border-radius:16px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;box-shadow:0 12px 26px -10px rgba(35,158,96,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.login-card h1{font-size:19px;letter-spacing:.06em;color:#12261B;margin-bottom:3px;text-align:center;font-weight:800}
.login-card .sub{font-size:12px;color:var(--muted);margin-bottom:24px;text-align:center}
.login-card label{display:block;font-size:12px;font-weight:650;color:var(--sub);margin:12px 0 5px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:14px;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.login-card button{width:100%;margin-top:20px;padding:12px;background:var(--grad-primary);color:#fff;border:0;border-radius:10px;font-size:14px;font-weight:650;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(35,158,96,.7);transition:filter .12s,transform .12s}
.login-card button:hover{filter:brightness(1.06);transform:translateY(-1px)}
#loginErr{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:16px;text-align:center}

/* ---------- chips & badges ---------- */
.chip{display:inline-block;font-size:11px;font-weight:550;padding:2px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--sub);margin:1px 2px 1px 0}
.chip.allergen{background:var(--warning-bg);border-color:transparent;color:var(--warning)}
.chip.ok{background:var(--success-bg);border-color:transparent;color:var(--success)}
.chip.bad{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.chip.brand{background:var(--primary-bg);border-color:transparent;color:var(--primary-dk)}
.cost{font-weight:650}
/* the small measure, kept under the big one — the recipes still cost in it,
   so it has to stay readable, just not first */
.subcost{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.nocost{color:var(--danger);font-size:12px;background:var(--danger-bg);padding:2px 9px;border-radius:999px}
.warncost{color:var(--warning);font-size:12px;background:var(--warning-bg);padding:2px 9px;border-radius:999px}
.rtype{display:inline-block;font-size:10px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap}
.rtype.prep{background:#E3F2FD;color:#1B5E9B}
.rtype.core{background:#EDE7F6;color:#5B3E9B}
.rtype.prod{background:var(--primary-bg);color:var(--primary-dk)}
.rtype.comp{background:#FFF3E0;color:#9A6212}

/* ---------- empty states ---------- */
.empty{background:var(--white);border:1.5px dashed #CBD8CD;border-radius:var(--r-lg);padding:48px 24px;text-align:center;color:var(--sub)}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:16px}
.empty p{margin-bottom:16px}

/* ---------- stat tiles ---------- */
.stat-row{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.stat{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:13px 18px 13px 21px;min-width:132px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.stat::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3.5px;border-radius:0 4px 4px 0;background:var(--acc-1)}
.stat:nth-child(2)::before{background:var(--acc-2)}
.stat:nth-child(3)::before{background:var(--acc-3)}
.stat:nth-child(4)::before{background:var(--acc-4)}
.stat:nth-child(5)::before{background:var(--acc-5)}
.stat:nth-child(6)::before{background:var(--acc-6)}
.stat .v{font-size:21px;font-weight:750;letter-spacing:-.01em}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:650;margin-top:1px}

/* ---------- drawers & overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,20,14,.42);backdrop-filter:blur(2px);display:none;z-index:90}
.overlay.open{display:block}
/* editors open full screen — a large form deserves the whole window.
   Head, tab strip, body and footer share one centred content column. */
.panel{--pgut:max(20px,calc((100vw - 1120px)/2));
  position:fixed;inset:0;width:auto;max-width:none;height:100vh;background:var(--surface);z-index:100;
  display:none;flex-direction:column;border-radius:0;box-shadow:none;
  opacity:0;transform:translateY(10px) scale(.995);transition:opacity .16s ease,transform .18s cubic-bezier(.3,.8,.4,1)}
.panel.open{display:flex;opacity:1;transform:none}
.panel-head{padding:14px var(--pgut);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;background:var(--white);gap:14px}
.panel-head h2{font-size:17px;font-weight:750;letter-spacing:-.01em}
.panel-head .phk{font-size:11.5px;color:var(--muted);font-weight:500}
.panel-body{padding:22px var(--pgut) 30px;overflow-y:auto;flex:1;scroll-behavior:smooth}
.panel-foot{padding:13px var(--pgut);border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;
  background:var(--white);border-radius:0;box-shadow:0 -6px 18px -14px rgba(10,20,14,.5)}
.panel-foot .fspace{margin-right:auto;font-size:12px;color:var(--muted);align-self:center}
/* tab strip built from the form's own section headings */
.ptabs{display:flex;gap:2px;overflow-x:auto;padding:0 var(--pgut);background:var(--white);
  border-bottom:1px solid var(--border);scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:10px 13px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s,border-color .12s}
.ptabs button:hover{color:var(--text)}
.ptabs button.on{color:var(--primary-dk);border-bottom-color:var(--primary)}
.ptabs button .pnum{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;
  margin-inline-start:6px;border-radius:999px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:800;vertical-align:1px}
.ptab-pane{display:none;animation:panefade .16s ease}
.ptab-pane.on{display:block}
@keyframes panefade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---------- AI waiter: profile, messages, automation flow ---------- */
.wp-card{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.wp-av{width:96px;height:96px;border-radius:50%;flex:none;background:var(--surface);border:1px solid var(--border);
  background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;
  font-size:38px;color:var(--muted);overflow:hidden}
.wp-prev{display:flex;gap:11px;align-items:center;background:var(--white);border:1px solid var(--border);
  border-radius:14px;padding:12px 14px;max-width:420px}
.wp-prev .av{width:46px;height:46px;border-radius:50%;flex:none;background-size:cover;background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:20px}
.msg-row{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--white)}
.msg-row.off{opacity:.55}
.msg-row .mh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.msg-row .mh .nm{font-weight:700;font-size:13.5px}
.msg-row .mh .w{font-size:11.5px;color:var(--muted);flex:1;min-width:140px}
.msg-row textarea{min-height:72px;font-size:12.5px;line-height:1.5}
.msg-row .cnt{font-size:11px;color:var(--muted);margin-top:3px}
.tokchip{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;font-family:ui-monospace,monospace;font-size:11px;color:var(--primary-dk);margin-inline-end:5px}
.flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.flow .node{border:1px solid var(--border);border-radius:12px;background:var(--white);padding:11px 14px}
.flow .node.trig{background:var(--surface);border-style:dashed}
.flow .node.ai{border-color:#BFE3CE;background:linear-gradient(135deg,#F2FBF5,#EAF6EF)}
.flow .arw{align-self:center;display:flex;flex-direction:column;align-items:center;color:var(--muted);
  font-size:11px;font-weight:600;padding:2px 0}
.flow .arw i{display:block;width:1px;height:12px;background:var(--border)}
.flow .arw .lbl{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 9px;font-size:10.5px}
.auto-row{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--white)}
.auto-row.off{opacity:.55}
.auto-row .ah{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.chatlog{display:flex;flex-direction:column;gap:6px}
.cturn{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:10px;background:var(--surface)}
.cturn.wait{background:var(--primary-bg,#EDF7F0)}
.cturn .who{flex:none;width:64px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding-top:2px}
.cturn.wait .who{color:var(--primary-dk)}
.cturn .txt{flex:1;min-width:0;font-size:13px;line-height:1.55;white-space:pre-wrap}
.rule-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;
  padding:11px 13px;margin-bottom:9px;background:var(--white)}
.rule-row.off{opacity:.55}
.rule-row .num{width:22px;height:22px;border-radius:6px;background:var(--surface);color:var(--sub);font-size:11px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:5px}
.rule-row textarea{width:100%;min-height:52px;font-size:13px;line-height:1.5;resize:vertical}
.rule-row .rtools{display:flex;flex-direction:column;gap:4px;flex:none}
.rule-cat{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--primary-bg,#E9F7EF);color:var(--primary-dk);margin-bottom:6px}
.rule-cat.never{background:var(--danger-bg,#FBEAE7);color:var(--danger)}
.ex-row{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--sub);padding:7px 0;border-top:1px solid var(--line)}
.ex-row:first-of-type{border-top:0}
/* ── the guide: one document, so the editor is the page ── */
.gdoc{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.75;
  resize:vertical;tab-size:2}
.gtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.gtools .ghint{margin-inline-start:auto;font-size:11.5px;color:var(--muted)}
.gdrop{position:relative;display:inline-block}
.gdrop .gmenu{display:none;position:absolute;z-index:40;top:100%;inset-inline-start:0;margin-top:4px;min-width:250px;
  max-height:320px;overflow:auto;background:var(--white);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 14px 40px rgba(10,20,14,.18);padding:5px}
.gdrop:hover .gmenu,.gdrop:focus-within .gmenu{display:block}
.gdrop .gmenu button{display:block;width:100%;text-align:start;border:0;background:transparent;font-family:inherit;
  font-size:12.5px;color:var(--text);padding:6px 9px;border-radius:7px;cursor:pointer}
.gdrop .gmenu button:hover{background:var(--surface)}
.gdrop .gmenu button strong{display:block;font-weight:700}
.gdrop .gmenu button em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.gmeter{height:4px;border-radius:999px;background:var(--surface);overflow:hidden;margin-top:8px}
.gmeter span{display:block;height:100%;background:var(--primary);border-radius:999px}
/* ── ratings and written feedback ── */
.rbar{display:block;height:8px;border-radius:999px;background:var(--surface);overflow:hidden;min-width:80px}
.rbar span{display:block;height:100%;background:#F0A93B;border-radius:999px}
.fbk{border:1px solid var(--border);border-left-width:3px;border-radius:11px;padding:10px 12px;margin-top:9px}
.fbk.good{border-left-color:var(--primary)}
.fbk.bad{border-left-color:var(--danger)}
.fbk .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px}
.fbk .h .s{color:#F0A93B;letter-spacing:1px}
.fbk .h .d{color:var(--muted);font-size:11.5px}
.fbk .t{font-size:13.5px;line-height:1.6;margin-top:5px;white-space:pre-wrap}
.fbk .a{margin-top:7px}
.acc-tbl td:first-child{text-align:center}
.acc-tbl .accdot{color:var(--muted)}
.acc-tbl tr.no .accdot{color:var(--danger)}
.acc-tbl tr.no td:nth-child(2){color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.auto-row .num{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.field.badfield input,.field.badfield select,.field.badfield textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(194,64,47,.14)}
/* large-form readability: a lone field never stretches the whole window,
   and a tick box stays a tick box instead of a full-width control */
.panel-body .ptab-pane>.field{max-width:780px}
.field label.ck{display:flex;align-items:flex-start;gap:8px;margin-bottom:0;font-size:13px;font-weight:500;
  color:var(--text);line-height:1.5;cursor:pointer;text-transform:none;letter-spacing:0}
.field input[type=checkbox],.field input[type=radio]{width:auto;flex:none;margin-top:2px}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:650;color:var(--sub);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;background:var(--white);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.field input:disabled{background:var(--surface);color:var(--muted)}
/* a price input carries its own currency, chosen right beside it */
.curwrap{display:flex;align-items:stretch}
.curwrap input{flex:1;min-width:0;border-start-end-radius:0;border-end-end-radius:0}
.curwrap .curpick,select.curpick{width:auto;flex:none;border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;
  background:var(--surface);color:var(--sub);font-weight:750;font-size:12px;letter-spacing:.02em;padding:9px 6px;cursor:pointer}
.curwrap .curpick:focus{position:relative;z-index:1}
.curpick.mini{padding:7px 4px;font-size:11px;border-radius:6px;border:1px solid var(--border);border-inline-start:0;
  border-start-start-radius:0;border-end-start-radius:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.flavsrc{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.flavsrc .ft{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-dk);margin-bottom:6px}
.flavsrc .fr{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:5px}
.flavsrc .fw{font-size:11.5px;color:var(--muted);min-width:96px}
.flavsrc .fc{font-family:inherit;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--white);
  color:var(--sub);border-radius:999px;padding:3px 11px;cursor:pointer}
.flavsrc .fc.on{background:var(--primary-bg,#E9F7EF);border-color:var(--primary);color:var(--primary-dk);cursor:default}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary-dk);font-weight:750;margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.section-label:first-child{margin-top:0;border-top:0;padding-top:0}
.unitcost{background:linear-gradient(135deg,#E9F7EF 0%,#DFF2E8 100%);border:1px solid #BFE3CE;border-radius:12px;padding:13px 15px;display:flex;align-items:baseline;gap:10px;margin-top:4px;flex-wrap:wrap}
.unitcost .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-dk);font-weight:750}
.unitcost .val{font-size:21px;font-weight:750;color:var(--primary-dk)}
.unitcost .per{font-size:12px;color:var(--sub)}
.unitcost.na .val{font-size:14px;color:var(--muted);font-weight:500}
.allergen-grid{display:flex;flex-wrap:wrap;gap:6px}
.allergen-grid label{display:flex;gap:5px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--sub);transition:border-color .12s,background .12s}
.allergen-grid label:hover{border-color:#B9C8BC}
.allergen-grid label.on{background:var(--warning-bg);border-color:var(--warning);color:var(--warning);font-weight:600}
.allergen-grid input{display:none}
#s_catGrid label.on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dk);font-weight:600}
#s_catGrid label.locked{opacity:.9;cursor:not-allowed;background:var(--surface);border-color:var(--primary);color:var(--primary-dk)}
#s_catGrid label.on::before{content:"✓ ";font-weight:700}

/* ---------- library grid ---------- */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.lib-card{border:1px solid var(--border);border-radius:12px;padding:11px;cursor:pointer;background:var(--white);position:relative;transition:border-color .12s,background .12s,transform .12s;box-shadow:var(--shadow-sm)}
.lib-card:hover{border-color:var(--primary);background:var(--primary-bg);transform:translateY(-1px)}
.lib-card .n{font-weight:600;font-size:13px}
.lib-card .c{font-size:11px;color:var(--muted)}
.lib-card .ic{font-size:20px;margin-bottom:2px}
.lib-card .hide{position:absolute;top:4px;right:6px;color:var(--muted);font-size:12px;display:none;cursor:pointer}
.lib-card:hover .hide{display:block}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.card.narrow{max-width:640px}
.card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.card p.desc{color:var(--sub);font-size:13px;margin-bottom:14px}
.backup-note{font-size:12.5px;color:var(--sub);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 12px;margin-top:10px}
.backup-note.warn{background:var(--warning-bg);color:var(--warning);border-color:transparent;font-weight:600}

/* ---------- toast ---------- */
/* ---------- first-run publish connect ---------- */
.gh-steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:st}
.gh-steps li{position:relative;padding:0 0 10px 26px;font-size:12.5px;color:var(--sub);line-height:1.55;counter-increment:st}
.gh-steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:var(--primary-bg,#E9F7EF);color:var(--primary-dk);font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
/* ---------- publish from wherever you are ---------- */
/* There is no floating prompt any more. Each view that can change what a
   customer sees carries its own Publish button, where the change was made —
   so nothing follows you around the system asking to be published. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--sb-1,#132B1D);color:#fff;padding:11px 22px;border-radius:999px;font-size:13.5px;
  transition:transform .28s cubic-bezier(.3,.8,.4,1);z-index:300;box-shadow:0 14px 40px -10px rgba(10,20,14,.55)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- recipe / item editor lines ---------- */
.rline{display:grid;grid-template-columns:1.7fr .6fr .8fr .7fr 1fr 28px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.rline select,.rline input{padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:13px;width:100%;background:var(--white)}
.rline select:focus,.rline input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.rline .lcost{font-size:13px;font-weight:650;text-align:right}
.rline .lcost .err{color:var(--danger);font-weight:500;font-size:11.5px}
.rline .rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;border-radius:6px}
.rline .rm:hover{color:var(--danger)}
.rline-head{display:grid;grid-template-columns:1.7fr .6fr .8fr .7fr 1fr 28px;gap:8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding-bottom:4px}
.addline{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ---------- segmented tabs ---------- */
.pmethod{display:inline-flex;gap:3px;flex-wrap:wrap;margin-bottom:12px;background:#E7EEE8;border-radius:12px;padding:3px}
.pmethod label{border:1px solid transparent;border-radius:9px;padding:7px 14px;font-size:13px;cursor:pointer;color:var(--sub);font-weight:550;transition:background .12s,color .12s,box-shadow .12s}
.pmethod label:hover{color:var(--ink)}
.pmethod label.on{background:var(--white);color:var(--primary-dk);font-weight:650;box-shadow:0 1px 4px rgba(20,32,24,.12)}
/* a choice that is paused rather than removed: visible, so you know it exists
   and could come back, but plainly not something you can pick today */
.pmethod label.off{opacity:.4;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.pmethod label.off:hover{color:var(--sub)}

/* ---------- profit grid ---------- */
.profit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.pg{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;text-align:center}
.pg .v{font-size:16px;font-weight:750}
.pg .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:650}
.pg.good .v{color:var(--success)}
.pg.bad{background:var(--danger-bg);border-color:transparent}
.pg.bad .v{color:var(--danger)}

/* ---------- modals ---------- */
.qmodal{position:fixed;inset:0;display:none;z-index:150;align-items:center;justify-content:center;background:rgba(10,20,14,.45);backdrop-filter:blur(2px)}
.qmodal.open{display:flex}
.qbox{background:var(--white);border-radius:var(--r-lg);width:440px;max-width:94vw;padding:22px;box-shadow:var(--shadow-pop)}
.qbox h3{font-size:15px;font-weight:700;margin-bottom:12px}

/* ---------- dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-grid .card.full{grid-column:1/-1}
.dash-grid .full{grid-column:1/-1}
.alert-row{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.alert-row:last-child{border-bottom:0}
.alert-row .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(20,32,24,.05)}
.mini-tbl{width:100%;border-collapse:collapse;font-size:13px;border:0;box-shadow:none;border-radius:0}
.mini-tbl td,.mini-tbl th{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.mini-tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:transparent}
.mini-tbl tr:last-child td{border-bottom:0}
@media(max-width:900px){ .dash-grid{grid-template-columns:1fr} .row2,.row3{grid-template-columns:1fr} .profit-grid{grid-template-columns:1fr 1fr} }

/* ---- library autocomplete ---- */
.ac-list{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:0 0 10px 10px;box-shadow:var(--shadow-pop);z-index:30;max-height:230px;overflow-y:auto;display:none}
.ac-list.open{display:block}
.ac-item{padding:8px 11px;cursor:pointer;display:flex;gap:8px;align-items:center;font-size:13px}
.ac-item:hover{background:var(--primary-bg)}
.ac-item .c{color:var(--muted);font-size:11px;margin-left:auto}

/* searchable grouped picker (ingredients, recipes, items) */
.pick{position:relative}
.pick-in{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--white);font-family:inherit}
.pick-in:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.pick-in.empty{color:var(--muted)}
.pick-list{max-height:280px}
.pick-grp{padding:5px 11px;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--primary-dk);background:var(--surface);border-bottom:1px solid var(--border)}
.pick-item{padding:7px 11px;cursor:pointer;display:flex;gap:7px;align-items:center;font-size:13px}
.pick-item:hover,.pick-item.sel{background:var(--primary-bg)}
.pick-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-item .rt{font-size:12px;color:var(--muted);white-space:nowrap}
.pick-empty{padding:12px 11px;color:var(--muted);font-size:12.5px}
.pick-hint{padding:6px 11px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);background:var(--surface)}

/* ---------- footer strips ---------- */
.app-foot{margin-top:28px;padding:16px 2px 8px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.about-strip{margin-top:20px;padding:14px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}

/* ---------- icon & colour pickers ---------- */
.icon-grid{display:flex;flex-wrap:wrap;gap:5px}
.icon-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .12s,background .12s}
.icon-btn:hover{border-color:var(--primary);background:var(--primary-bg)}
.icon-btn.on{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 0 0 2px var(--primary-bg)}
.sw{width:22px;height:22px;border-radius:7px;border:1px solid rgba(0,0,0,.15);cursor:pointer;position:relative;display:inline-block;transition:transform .1s}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--primary)}
.sw.none{background:var(--surface);color:var(--muted);font-size:11px;text-align:center;line-height:22px}
.swn{position:absolute;bottom:-3px;right:-3px;background:var(--ink);color:#fff;font-size:8px;font-weight:700;border-radius:6px;padding:0 3px}
.color-pop{position:absolute;z-index:45;margin-top:6px;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);padding:5px;width:250px;max-height:260px;overflow-y:auto}
.crow{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:6px 9px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink);text-align:left}
.crow:hover{background:var(--primary-bg)}
.crow.on{background:var(--primary-bg);font-weight:600}
.crow .cn{flex:1}
.crow .ck{color:var(--primary)}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}

/* ---------- row menus ---------- */
.row-menu{position:fixed;z-index:120;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);padding:5px;min-width:186px}
.row-menu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;padding:8px 11px;border-radius:8px;font-size:13px;font-family:inherit;color:var(--ink);cursor:pointer}
.row-menu button:hover{background:var(--primary-bg)}
.row-menu button.danger{color:var(--danger)}
.row-menu button.danger:hover{background:var(--danger-bg)}
.row-menu .sep{height:1px;background:var(--border);margin:4px 2px}
.row-menu .k{margin-left:auto;font-size:10.5px;color:var(--muted)}
.dots{background:none;border:0;color:var(--sub);font-size:17px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:7px}
.dots:hover{background:var(--surface);color:var(--ink)}
.icon-pop{position:absolute;z-index:40;top:100%;left:0;margin-top:4px;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);padding:10px;width:330px;max-height:260px;overflow-y:auto}


/* ---------- digital menu builder ---------- */
.mb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:18px;align-items:start}
@media(max-width:1100px){ .mb-wrap{grid-template-columns:1fr} .mb-phonecol{order:-1} }
.mb-phone{width:406px;max-width:100%;margin:0 auto;background:#0D2016;border-radius:34px;padding:8px;box-shadow:var(--shadow-pop)}
.mb-phone>div{background:#fff;border-radius:26px;overflow:hidden;height:640px;overflow-y:auto}
.mbb{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.mbb .mbb-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mbb .mbb-type{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-dk);background:var(--primary-bg);padding:2px 8px;border-radius:999px}
.mbb .mbb-tools{margin-left:auto;display:flex;gap:4px}
.mbb .mbb-tools button{border:1px solid var(--border);background:var(--white);border-radius:7px;width:26px;height:26px;font-size:12px;cursor:pointer;color:var(--sub);line-height:1}
.mbb .mbb-tools button:hover{border-color:var(--primary);color:var(--primary-dk)}
.mbb input[type=text],.mbb select,.mbb input[type=number]{padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--white);font-family:inherit}
.mbb input[type=color]{width:32px;height:28px;border:1px solid var(--border);border-radius:7px;padding:2px;background:var(--white);cursor:pointer}
.mbb .mbrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.mbb .mbrow:last-child{margin-bottom:0}
.mbb .mblbl{font-size:11px;color:var(--muted);font-weight:650}
.mb-addonpick{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.mb-addonpick label{display:flex;gap:5px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--sub)}
.mb-addonpick label.on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dk);font-weight:600}
.mb-addonpick input{display:none}
.qr-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.qr-tile{border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;background:var(--white)}
.qr-tile .nm{font-weight:700;font-size:13px;margin-bottom:8px}
.qr-tile svg{display:block;margin:0 auto}
.qr-tile .lk{font-size:10.5px;color:var(--muted);margin:8px 0;word-break:break-all;max-width:180px}


/* ---------- builder v3: three-panel layout (elements+layers | canvas | inspector) ---------- */
.mb3{display:grid;grid-template-columns:216px minmax(0,1fr) 306px;gap:14px;align-items:start}
@media(max-width:1250px){ .mb3{grid-template-columns:190px minmax(0,1fr) 270px} }
@media(max-width:1000px){ .mb3{grid-template-columns:1fr} }
.mb-pal{display:flex;flex-direction:column;gap:4px}
.mb-pal button{display:flex;align-items:center;gap:9px;border:1px solid transparent;background:none;border-radius:9px;padding:8px 10px;font-size:13px;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;font-weight:550}
.mb-pal button:hover{background:var(--primary-bg);border-color:var(--primary)}
#mbPagesBar{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
#mbPagesBar .pgt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--white);border-radius:9px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-weight:550;color:var(--sub)}
#mbPagesBar .pgt.on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dk);font-weight:700}
#mbPagesBar .pgt .mini{border:0;background:none;cursor:pointer;font-size:11px;color:var(--muted);padding:0 2px}
#mbPagesBar .pgt .mini:hover{color:var(--ink)}
#mbCanvasWrap{background:#D9E1DA;border:1px solid var(--border);border-radius:14px;overflow:auto;max-height:calc(100vh - 260px);min-height:420px;padding:34px;
  background-image:radial-gradient(rgba(20,32,24,.10) 1px,transparent 1px);background-size:22px 22px}
#mbScale{margin:0 auto;position:relative}
#mbCanvas{position:relative;transform-origin:0 0;box-shadow:0 14px 44px rgba(10,20,14,.28)}
#mbCanvas::before,#mbCanvas::after{content:"";position:absolute;top:-20px;bottom:-20px;width:0;border-left:1.5px dashed rgba(228,87,46,.5);pointer-events:none;z-index:35}
#mbCanvas::before{left:0}#mbCanvas::after{left:390px}
.mbe{position:absolute;user-select:none;-webkit-user-select:none}
.mbe:not(.locked){cursor:move}
.mbe.sel{outline:1.5px solid #239E60}
.mbe.ghost{opacity:.25}
.mbh{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid #239E60;border-radius:50%;z-index:40}
.mbh[data-h=nw]{left:-6px;top:-6px;cursor:nwse-resize}.mbh[data-h=n]{left:calc(50% - 6px);top:-6px;cursor:ns-resize}
.mbh[data-h=ne]{right:-6px;top:-6px;cursor:nesw-resize}.mbh[data-h=e]{right:-6px;top:calc(50% - 6px);cursor:ew-resize}
.mbh[data-h=se]{right:-6px;bottom:-6px;cursor:nwse-resize}.mbh[data-h=s]{left:calc(50% - 6px);bottom:-6px;cursor:ns-resize}
.mbh[data-h=sw]{left:-6px;bottom:-6px;cursor:nesw-resize}.mbh[data-h=w]{left:-6px;top:calc(50% - 6px);cursor:ew-resize}
.mbh[data-h=rot]{left:calc(50% - 6px);top:-30px;cursor:grab}
.mbrotstem{position:absolute;left:calc(50% - .75px);top:-19px;width:1.5px;height:14px;background:#239E60;z-index:39}
.mbguide{position:absolute;background:#E4572E;pointer-events:none;z-index:60}
.mbguide.v{width:1px;top:0;bottom:0}.mbguide.h{height:1px;left:0;right:0}
.mruler{position:absolute;background:#E4572E;pointer-events:none;z-index:70}
.mlabel{position:absolute;background:#E4572E;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;transform:translate(-50%,-50%);pointer-events:none;z-index:71;white-space:nowrap}
.mb-side-hide{display:none}
/* ---------- brand kit ---------- */
#mbBrand .bkgrp{border-bottom:1px solid var(--line)}
#mbBrand .bkgrp:last-child{border-bottom:0}
#mbBrand .bkh{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:750;color:var(--ink);padding:8px 4px;text-align:left}
#mbBrand .bkh:hover{color:var(--primary-dk)}
#mbBrand .bkn{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--muted)}
#mbBrand .bkh .acc-c{transition:transform .15s;font-size:10px}
#mbBrand .bkgrp.open .bkh{color:var(--primary-dk)}
#mbBrand .bkgrp.open .bkh .acc-c{transform:rotate(180deg)}
#mbBrand .bkb{display:none;padding:0 2px 10px}
#mbBrand .bkgrp.open .bkb{display:block}
#mbBrand .bkd{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 7px}
#mbBrand .bktiles{display:flex;flex-wrap:wrap;gap:6px}
#mbBrand .bktile{position:relative;width:52px;height:52px;border:1px solid var(--border);border-radius:9px;background:
  linear-gradient(45deg,#F3F5F3 25%,transparent 25%,transparent 75%,#F3F5F3 75%) 0 0/10px 10px,
  linear-gradient(45deg,#F3F5F3 25%,transparent 25%,transparent 75%,#F3F5F3 75%) 5px 5px/10px 10px,#fff;
  cursor:grab;overflow:visible;flex:none}
#mbBrand .bktile:active{cursor:grabbing}
#mbBrand .bktile img{width:100%;height:100%;object-fit:contain;border-radius:8px;pointer-events:none}
#mbBrand .bktile:hover{border-color:var(--primary)}
#mbBrand .bkx{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;border:0;background:var(--danger);
  color:#fff;font-size:9px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
#mbBrand .bktile:hover .bkx{display:flex}
#mbBrand .bkl{position:absolute;left:0;right:0;bottom:-13px;font-size:9px;color:var(--muted);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mbBrand .bktiles{padding-bottom:14px}
#mbBrand .bkadd{width:52px;height:52px;border:1px dashed var(--border);border-radius:9px;background:none;color:var(--muted);
  font-size:18px;cursor:pointer;flex:none}
#mbBrand .bkadd:hover{border-color:var(--primary);color:var(--primary-dk)}
#mbBrand .bkfont{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid var(--line)}
#mbBrand .bkfont .fn{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mbBrand .bkfont .fk{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#mbBrand .bkx2{border:0;background:none;color:var(--danger);cursor:pointer;font-size:10px;padding:2px 3px}
#mbBrand .bksel{font-family:inherit;font-size:11.5px;padding:5px 7px;border:1px solid var(--border);border-radius:7px;background:var(--white);max-width:100%}
#mbBrand .bkpal{border:1px solid var(--line);border-radius:9px;padding:7px;margin-bottom:6px}
#mbBrand .bkph{display:flex;align-items:center;gap:5px;margin-bottom:6px}
#mbBrand .bkph input{flex:1;min-width:0;font-family:inherit;font-size:11.5px;font-weight:700;border:0;background:none;padding:2px;color:var(--ink)}
#mbBrand .bkcols{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
#mbBrand .bkcol{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:grab}
#mbBrand .bkcoladd input{width:74px;font-family:inherit;font-size:10.5px;padding:3px 6px;border:1px dashed var(--border);border-radius:6px;background:none}
#mbCanvas.dropping{outline:2px dashed var(--primary);outline-offset:3px}
.cctl .swd.brand{box-shadow:0 0 0 1.5px var(--primary-dk)}
.color-pop .crow-h{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 8px 3px}
#mbLayers .lyr{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:12.5px;cursor:grab;border:1px solid transparent}
#mbLayers .lyr:hover{background:var(--surface)}
#mbLayers .lyr.sel{background:var(--primary-bg);border-color:var(--primary)}
#mbLayers .lyr.dragover{border-top:2px solid var(--primary)}
#mbLayers .lyr .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mbLayers .lyr button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:2px 3px;border-radius:5px}
#mbLayers .lyr button:hover{color:var(--ink);background:rgba(0,0,0,.05)}
#mbLayers .lyr .tag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-dk);background:var(--primary-bg);padding:1px 6px;border-radius:999px}
#mbProps .prow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
#mbProps .prow label{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#mbProps .prow label.ck{display:flex;gap:4px;align-items:center;text-transform:none;font-size:12px;color:var(--sub);font-weight:550;letter-spacing:0}
#mbProps input[type=number]{width:60px;padding:6px 7px;border:1px solid var(--border);border-radius:7px;font-size:12.5px}
#mbProps input[type=text],#mbProps textarea,#mbProps select{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit}
#mbProps textarea{resize:vertical;min-height:54px}
#mbProps input[type=color]{width:32px;height:28px;border:1px solid var(--border);border-radius:7px;padding:2px;background:var(--white);cursor:pointer}
#mbProps input[type=range]{flex:1;min-width:80px}
#mbProps .phead{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-dk);margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
#mbProps .phead:first-child{margin-top:0;border-top:0;padding-top:0}
/* Figma-style property groups — one open at a time */
#mbProps .acc{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--white)}
#mbProps .acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border:0;background:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
#mbProps .acc-h:hover{background:var(--surface)}
#mbProps .acc.open .acc-h{color:var(--primary-dk)}
#mbProps .acc-c{transition:transform .15s;font-size:10px;color:var(--muted);flex:none}
#mbProps .acc.open .acc-c{transform:rotate(180deg)}
#mbProps .acc-b{display:none;padding:6px 11px 4px}
#mbProps .acc.open .acc-b{display:block}
.mb-pal .palgrp-h{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:7px 10px;border-radius:8px;text-align:left}
.mb-pal .palgrp-h:hover{background:var(--surface)}
.mb-pal .palgrp.open .palgrp-h{color:var(--primary-dk)}
.mb-pal .palgrp-h .acc-c{transition:transform .15s;font-size:10px}
.mb-pal .palgrp.open .palgrp-h .acc-c{transform:rotate(180deg)}
.mb-pal .palgrp-b{display:none;flex-direction:column;gap:4px;padding-left:6px}
.mb-pal .palgrp.open .palgrp-b{display:flex}


/* ---------- builder v4 additions ---------- */
.vsep{width:1px;height:24px;background:var(--border);flex:none}
.tgrp{display:inline-flex;align-items:center;gap:6px}
.mb-bbox{position:absolute;border:1.5px dashed #239E60;pointer-events:none;z-index:38}
.mb-bbox .bbh{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;background:#fff;border:1.5px solid #239E60;border-radius:3px;cursor:nwse-resize;pointer-events:auto}
.mbe.msel{outline:1.5px solid rgba(35,158,96,.55)}
.mbe.focusmode{outline:2px solid #4C8BF5;cursor:grab!important}
.focus-drag{position:relative;width:100%;height:92px;border:1px solid var(--border);border-radius:9px;overflow:hidden;cursor:grab;background-size:cover}
.focus-drag .fd-hint{position:absolute;inset:auto 0 0 0;background:rgba(10,20,14,.55);color:#fff;font-size:10px;text-align:center;padding:2px}
.icon-pick-row{display:flex;flex-wrap:wrap;gap:4px}
.icon-pick-row button{width:30px;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;padding:0}
.icon-pick-row button.on{border-color:var(--primary);background:var(--primary-bg)}
.icon-pick-row button svg{width:16px;height:16px}


/* ---------- v4.1: marquee + colour controls ---------- */
.mb-marquee{position:absolute;border:1.5px dashed #239E60;background:rgba(35,158,96,.08);z-index:80;pointer-events:none;display:none}
.cctl{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.cctl input[type=color]{width:30px;height:26px;flex:none}
.cctl .chex{width:72px!important;padding:5px 6px!important;font-size:11.5px!important;font-family:ui-monospace,monospace!important;text-transform:lowercase}
.cctl .swsave{border:1px solid var(--border);background:var(--white);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:11px;color:var(--warning);padding:0}
.cctl .swsave:hover{border-color:var(--warning)}
.cctl .calpha{width:56px;flex:none}
.cctl .swd{width:17px;height:17px;border-radius:5px;border:1px solid rgba(0,0,0,.2);cursor:pointer;padding:0;flex:none}
.cctl .swd:hover{transform:scale(1.15)}

/* ---- cooking book / print ---- */
@page{margin:0}
#printArea{display:none}
body.printing aside,body.printing .wrap,body.printing .panel,body.printing .overlay,body.printing .qmodal,body.printing .toast{display:none!important}
body.printing #printArea{display:block;padding:12mm 14mm;background:#fff}
#printArea .pr-copy{margin-top:16px;padding-top:8px;border-top:1px solid #ddd;font-size:9.5px;color:#888;text-align:center;letter-spacing:.02em}
.pr-recipe{page-break-after:always;padding:10mm 0 6mm;font-size:14px;color:#17211B}
.pr-brand{font-size:11px;letter-spacing:.15em;color:#2E9E64;font-weight:700}
.pr-recipe h1{font-size:26px;margin:4px 0 2px}
.pr-meta{color:#666;font-size:12.5px;margin-bottom:12px;border-bottom:2px solid #2E9E64;padding-bottom:8px}
.pr-recipe h2{font-size:14px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:.06em;color:#237A4D}
.pr-tbl{width:100%;border-collapse:collapse;border:0}
.pr-tbl td{padding:6px 4px;border-bottom:1px solid #E3E8E4;font-size:14px}
.pr-tbl td:last-child{text-align:right;font-weight:600;white-space:nowrap}
/* the drawer sheet: boxes somebody writes in with a pen, and the same rows
   in the same order as the screen — every difference between the two is a
   transcription error, and one of those is indistinguishable from a
   shortfall */
.pr-tbl th{padding:6px 4px;border-bottom:2px solid #237A4D;font-size:11px;text-align:left;
  text-transform:uppercase;letter-spacing:.06em;color:#237A4D}
.pr-tbl th:not(:first-child),.pr-tbl td:not(:first-child){border-left:1px solid #E3E8E4}
.pr-tbl tbody td{height:26px}
/* the two currency tables sit side by side on paper, and the boxes are big
   enough to write a number in with a pen — a form whose columns are 8mm wide
   gets filled in over the lines, and then transcribed wrong */
.pr-cash{flex:1 1 45%;width:auto}
.pr-cash th:first-child,.pr-cash td:first-child{width:38%;text-align:right}
.pr-cash th:not(:first-child),.pr-cash td:not(:first-child){width:31%}
.pr-other td:first-child,.pr-other th:first-child{width:40%}
.pr-steps{padding-left:20px;margin:4px 0}
.pr-steps li{margin-bottom:9px;line-height:1.55}
.pr-foot{margin-top:10mm;font-size:11px;color:#999}

/* ---------- the store is full ----------
   Deliberately impossible to miss and impossible to dismiss: the data on
   screen is real and the copy on disk is not, and only the owner can fix it. */
#storeFull{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;gap:14px;align-items:center;flex-wrap:wrap;
  background:#FBEAE7;border-top:2px solid var(--danger);padding:14px 22px;font-size:13px;line-height:1.55;color:#7A2A1C}
#storeFull.on{display:flex}
#storeFull strong{display:block;font-size:13.5px;color:#8B2C1B}
#storeFull span{flex:1;min-width:220px}
#storeFull .acts{flex:none;display:flex;gap:8px;min-width:0}

/* ---------- the classic-list organiser ----------
   Two columns: what it looks like, and what order it is in. The order half is
   the wide one, because that is the work. */
.cl3{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){ .cl3{grid-template-columns:1fr} }
.cl-side,.cl-main{padding:16px}
.clsec{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--white)}
.clsec.over{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-bg)}
.clsec.dragging{opacity:.45}
.clsec.off{opacity:.55;background:var(--surface)}
.clsh{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:8px}
.clsh .chip{flex:none}
.clitems{display:flex;flex-direction:column;gap:5px}
.clit{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid transparent;border-radius:9px;background:var(--surface)}
.clit.over{border-color:var(--primary);background:var(--primary-bg)}
.clit.dragging{opacity:.45}
.clit img{width:34px;height:34px;object-fit:cover;border-radius:7px;flex:none}
.clit .noimg{width:34px;height:34px;border-radius:7px;flex:none;border:1px dashed var(--border);display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:11px}
.clit .nm{flex:1;min-width:0;font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.clit .nm .pr{color:var(--muted);font-size:11.5px}
.clit .clnudge{flex:none;display:flex;gap:3px}
.grip{cursor:grab;color:var(--muted);font-size:14px;flex:none;line-height:1}
.grip:active{cursor:grabbing}
.clflags{display:flex;flex-wrap:wrap;gap:3px;flex:none}
.clf{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.02em;border:1px solid var(--border);
  background:var(--white);color:var(--muted);border-radius:999px;padding:2px 8px;cursor:pointer;text-transform:lowercase}
.clf.on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dk)}
.clf.rst{color:var(--primary-dk);border-style:dashed}

/* ---------- the classic organiser: rows open into their own drawer ---------- */
.clsh .secnm{flex:1;min-width:80px;font-family:inherit;font-size:13.5px;font-weight:700;border:1px solid transparent;
  background:none;border-radius:7px;padding:4px 7px;color:var(--ink)}
.clsh .secnm:hover{border-color:var(--border);background:var(--white)}
.clsh .secnm:focus{border-color:var(--primary);background:var(--white);outline:none}
.clsh .secnm.ar{flex:0 1 130px;font-weight:600;font-size:12.5px;color:var(--sub)}
.clit .clbody{flex:1;min-width:0;display:flex;align-items:center;gap:9px;cursor:pointer}
.clit.open{background:var(--primary-bg);border-color:var(--primary)}
.clit .chev{flex:none;color:var(--muted);font-size:10px}
.clplus{width:100%;border:1px dashed var(--border);background:none;border-radius:9px;padding:8px;margin-top:2px;
  font-family:inherit;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer}
.clplus:hover{border-color:var(--primary);color:var(--primary-dk);background:var(--primary-bg)}
.cldrawer{border:1px solid var(--primary);border-top:0;border-radius:0 0 10px 10px;padding:12px;margin:-3px 0 6px;background:var(--white)}
.cldh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13.5px}
.cldrawer .field{margin-bottom:10px}
/* the picker */
.clpick{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.clpg{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 6px 4px}
.clpr{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:8px;cursor:pointer;font-size:13px}
.clpr:hover{background:var(--surface)}
.clpr.on{background:var(--primary-bg)}
.clpr input{width:auto;flex:none}
.clpr img{width:30px;height:30px;object-fit:cover;border-radius:6px;flex:none}
.clpr .noimg{width:30px;height:30px;border-radius:6px;flex:none;border:1px dashed var(--border)}
.clpr .nm{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clpr .pr{flex:none;color:var(--muted);font-size:12px}

/* ---------- which menu customers get ---------- */
.mtwrap{display:flex;flex-direction:column;gap:8px}
.mtopt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;
  padding:11px 13px;cursor:pointer;background:var(--white)}
.mtopt:hover{border-color:var(--primary)}
.mtopt.on{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 0 0 1px var(--primary)}
.mtopt .r{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--border);margin-top:2px}
.mtopt.on .r{border-color:var(--primary-dk);background:radial-gradient(circle,var(--primary-dk) 0 4px,transparent 5px)}
.mtopt .b{display:flex;flex-direction:column;gap:2px;min-width:0}
.mtopt .b strong{font-size:13.5px}
.mtopt .b .d{font-size:12px;color:var(--sub);line-height:1.5}
.mtopt .b .s{font-size:11px;color:var(--muted);font-weight:650;margin-top:2px}

/* ---------- searchable dropdowns (app/js/19-picker.js) ----------
   One panel, reused by every select on the page. It sits above the login gate's
   layer because a dropdown inside a full-screen form must not open behind it. */
#gsPick{position:fixed;z-index:100000;display:none;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(16,28,20,.20);overflow:hidden}
#gsPick.on{display:flex}
#gsPickQ{border:0;border-bottom:1px solid var(--border);padding:10px 13px;font-size:13.5px;font-family:inherit;
  outline:none;background:var(--surface);color:var(--ink)}
#gsPickList{max-height:290px;overflow-y:auto;padding:4px}
#gsPick .pkrow{padding:8px 11px;border-radius:8px;font-size:13.5px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#gsPick .pkrow.hot{background:var(--primary-bg);color:var(--primary-dk)}
#gsPick .pkrow.sel{font-weight:700}
#gsPick .pkrow.sel::after{content:" ✓";color:var(--primary-dk)}
#gsPick .pkrow.off{color:var(--muted);cursor:default}
#gsPick .pkgrp{padding:8px 11px 3px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
#gsPick .pkadd{padding:9px 11px;border-radius:8px;font-size:13px;font-weight:650;cursor:pointer;
  color:var(--primary-dk);border-top:1px dashed var(--border);margin-top:3px}
#gsPick .pkadd.hot,#gsPick .pkadd:hover{background:var(--primary-bg)}
#gsPick .pknone{padding:12px 11px;font-size:12.5px;color:var(--muted)}

/* ---------- staff, the rota and the review sheet (21/22) ----------
   The board is a grid because a rota is a shape: seven columns you can read
   across, one row per person you can read down, and every empty cell visible
   as a gap rather than as an absence of a row. */
.stav{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid var(--border);background:var(--surface)}
.stav.ini{color:#fff;font-weight:750;letter-spacing:.02em;border:0}
.stprof .sthead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.stprof .stid{flex:1;min-width:220px}
.stprof .stid h2{font-size:22px;font-weight:750;margin:0 0 3px}
.stprof .stid .rl{font-size:13.5px;color:var(--sub);margin-bottom:8px}
.stprof .stid .mt{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.stprof .stnums{display:flex;gap:22px;flex-wrap:wrap}
.stprof .stnums>div{text-align:right}
.stprof .stnums b{display:block;font-size:15px;font-weight:750}
.stprof .stnums span{font-size:11px;color:var(--muted)}
.stbars{display:flex;gap:8px;align-items:flex-end;height:120px}
.stbars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.stbars .fill{width:100%;background:var(--primary);border-radius:4px 4px 0 0;min-height:2px}
.stbars span{font-size:10.5px;color:var(--muted);margin-top:4px}
.stscore{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.stscore .v{font-size:30px;font-weight:800;color:var(--primary-dk)}
.stscore .l{font-size:12.5px;color:var(--sub)}
.stscore.sm .v{font-size:20px}
.strev .rvhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rvgrid{display:flex;flex-direction:column;gap:2px}
.rvrow{display:grid;grid-template-columns:1fr 160px 1fr;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.rvrow .nm{color:var(--ink)}
.rvrow .stars{display:flex;gap:2px}
.rvrow .stars button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:#D8DFD8;padding:0 1px}
.rvrow .stars button.on{color:#E0A32E}
.rvrow .sug{font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.rvnote{width:100%;margin-top:10px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px}

/* The team strip: wide, above the board, so the whole cast is one row of
   names you drag from rather than a column you scroll. */
/* it stays put as the week scrolls past: the names have to be reachable from
   Sunday as easily as from Monday, or a long rota means scrolling up to fetch
   every person and back down to place them */
.rpool{position:sticky;top:0;z-index:25;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;
  margin-bottom:14px;box-shadow:0 4px 14px rgba(16,28,20,.10)}
.rpool .lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:750;
  margin-inline-end:6px}
.rpool .gp{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-dk);font-weight:750;
  margin-inline-start:10px;padding-inline-end:2px}
.rpool .gp:first-of-type{margin-inline-start:0}
.pchip{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 6px;border:1px solid var(--border);
  border-radius:999px;cursor:grab;background:var(--white);font-size:12.5px}
.pchip:hover{border-color:var(--primary);background:var(--primary-bg)}
.pchip:active{cursor:grabbing}
.pchip .nm{font-weight:650;white-space:nowrap}
.pchip .hh{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--surface);color:var(--sub)}
.pchip .hh.over{background:var(--warning-bg);color:var(--warning)}
.pchip .hh.under{background:var(--danger-bg);color:var(--danger)}
.pchip .hh.ok{background:var(--success-bg);color:var(--success)}

/* The board: days down, the clock across. Each department inside a day gets its
   own lane, and a shift is a card placed on the lane by where its hours fall. */
/* No overflow clipping here: an overflow box becomes the scrollport that the
   ruler's sticky offset is measured against, which pinned the clock 74px INSIDE
   the board instead of 74px below the top of the screen. The corners are
   rounded on the first and last rows instead. */
.rboard{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card)}
.rruler{display:flex;position:sticky;top:var(--poolh,74px);z-index:15;background:var(--surface);
  border-bottom:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0}
.rlabel{flex:0 0 118px;padding:6px 10px;font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rruler .rtrack{position:relative;flex:1;height:26px}
.rruler .tk{position:absolute;top:6px;font-size:10px;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
/* midnight at either end would hang half off the strip and read as "12" */
.rruler .tk.first{transform:none;padding-inline-start:2px}
.rruler .tk.last{transform:translateX(-100%);padding-inline-end:2px}
.rday{border-bottom:1px solid var(--border)}
.rday:last-child{border-bottom:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.rday.today{background:#FAFDFA}
.rdayhd{display:flex;align-items:baseline;gap:10px;padding:6px 12px;background:var(--surface)}
.rday.today .rdayhd{background:var(--primary-bg)}
.rdayhd .nm{font-size:13px;font-weight:650;color:var(--ink)}
.rdayhd .nm strong{font-size:15px}
.rdayhd .mo{font-size:11px;color:var(--muted);font-weight:500}
.rdayhd .sm{font-size:11.5px;color:var(--sub)}
.rrow{display:flex;border-top:1px solid var(--line)}
.rrow .rlabel{flex:0 0 118px;font-size:10.5px;display:flex;align-items:center}
.rlane{position:relative;flex:1;min-height:50px;cursor:copy;border-inline-start:1px solid var(--line)}
.rlane.hot{background:var(--primary-bg);box-shadow:inset 0 0 0 2px var(--primary)}
.rlane .gl{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.45}
.rlane .gl.hr{opacity:1}
.rlane .nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);opacity:.5;z-index:2}
.rshift{position:absolute;top:4px;bottom:4px;background:var(--white);border:1px solid var(--border);
  border-inline-start:3px solid var(--c,#2E7D5B);border-radius:7px;overflow:hidden;cursor:grab;
  box-shadow:0 1px 3px rgba(20,30,20,.10);user-select:none;z-index:1}
.rshift:hover{z-index:4;box-shadow:0 2px 8px rgba(20,30,20,.18)}
.rshift:active{cursor:grabbing}
.rshift .bd{display:block;padding:5px 8px;line-height:1.25;pointer-events:none;overflow:hidden;white-space:nowrap}
.rshift .nm{display:block;font-size:12px;line-height:1.25;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.rshift .cont{color:var(--primary-dk);font-weight:800;font-size:10px;margin:0 2px}
/* a day that does not add up to the person's normal one says so on the card,
   in colour and in a mark, because a rota is read at a glance or not at all */
.rshift.short{background:#FFF8EC;border-color:#F0DCB6}
.rshift.long{background:#EEF4FD;border-color:#C9DBF5}
.rshift .fit{font-size:9.5px;font-weight:800;margin-inline-start:3px;vertical-align:1px}
.rshift .fit.short{color:#9A6212}
.rshift .fit.long{color:#2C5DA8}
.rshift .t{font-size:10px;line-height:1.2;color:var(--sub)}
.rshift .h{font-size:10px;line-height:1.2;color:var(--muted);margin-inline-start:5px}
.rshift .grip{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:3}
.rshift .grip.l{inset-inline-start:0}
.rshift .grip.r{inset-inline-end:0}
.rshift .grip:hover{background:var(--primary);opacity:.3}
.rshift .ops{display:none;position:absolute;top:3px;inset-inline-end:10px;gap:2px;z-index:4}
.rshift:hover .ops{display:flex}
.rshift .ops button{border:1px solid var(--border);background:var(--white);border-radius:5px;width:18px;height:18px;
  font-size:11px;line-height:1;cursor:pointer;padding:0;color:var(--sub)}
.rshift .ops button:hover{border-color:var(--primary);color:var(--primary-dk)}
body.rota-sizing{cursor:ew-resize;user-select:none}

/* press an empty spot on a lane: who starts here? */
#rotaPick{position:fixed;z-index:100000;display:none;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(16,28,20,.22);overflow:hidden}
#rotaPick.on{display:flex}
#rotaPick .hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 11px;background:var(--surface);
  border-bottom:1px solid var(--border);font-size:12px;color:var(--sub)}
#rotaPick .hd input{padding:3px 6px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:12px}
#rotaPick .hd .x{margin-inline-start:auto;border:0;background:none;font-size:13px;cursor:pointer;color:var(--muted)}
#rotaPick .ls{max-height:280px;overflow-y:auto;padding:4px}
#rotaPick .pr{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px}
#rotaPick .pr:hover{background:var(--primary-bg)}
#rotaPick .pr .nm{flex:1;min-width:0;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rotaPick .pr .dp{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
#rotaPick .pr .hh{font-size:11px;color:var(--sub)}
@media(max-width:900px){ .rlabel,.rrow .rlabel{flex-basis:82px} .rshift .t,.rshift .h{display:none} }
/* ── cost history: what moved a recipe's or an item's cost ────────────── */
.whydrv{display:inline-flex;align-items:baseline;gap:4px;padding:1px 7px;margin:1px 0;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-size:11.5px;line-height:1.7;white-space:nowrap;max-width:100%}
.whydrv[onclick]{cursor:pointer}
.whydrv[onclick]:hover{border-color:var(--primary);background:var(--primary-bg)}

/* ── the system guide, in Settings ────────────────────────────────────── */
.gbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.gbar input[type=search]{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--border);
  border-radius:9px;font-family:inherit;font-size:13.5px}
.grole{display:flex;gap:5px;flex-wrap:wrap}
.grole label{font-size:12px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;
  cursor:pointer;color:var(--sub);background:var(--white)}
.grole label.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:650}
.gsplit{display:flex;gap:16px;align-items:flex-start}
.gindex{flex:0 0 208px;position:sticky;top:12px;display:flex;flex-direction:column;gap:1px;
  background:var(--white);border:1px solid var(--border);border-radius:12px;padding:6px;max-height:78vh;overflow-y:auto}
.gindex a{font-size:12.5px;padding:7px 9px;border-radius:7px;cursor:pointer;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gindex a:hover{background:var(--surface);color:var(--ink)}
.gindex a.on{background:var(--primary-bg);color:var(--primary-dk);font-weight:650}
.gbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.gch h4{font-size:13px;margin:14px 0 6px;color:var(--primary-dk);text-transform:uppercase;letter-spacing:.4px}
.gch p{font-size:13.5px;line-height:1.65}
.gch code{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12px}
.glist{margin:0;padding-inline-start:20px;font-size:13.5px;line-height:1.7}
.glist li{margin-bottom:5px}
.gtech{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--sub);margin:0}
.ghint{font-size:11px;color:var(--muted)}
@media(max-width:900px){ .gsplit{flex-direction:column} .gindex{position:static;flex:1;width:100%;
  flex-direction:row;flex-wrap:wrap;max-height:none} }

/* ── the tour: a spotlight, and a card that explains what is in it ─────── */
#tourMask{position:fixed;z-index:100010;display:none;pointer-events:none;border-radius:10px;
  box-shadow:0 0 0 3px var(--primary),0 0 0 9999px rgba(14,26,18,.55);transition:all .18s ease}
#tourBub{position:fixed;z-index:100011;display:none;background:var(--white);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 46px rgba(16,28,20,.3);padding:14px 16px;transition:all .18s ease}
#tourBub .th{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:var(--primary-dk);margin-bottom:6px}
#tourBub .tn{margin-inline-start:auto;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none}
#tourBub .tb{font-size:13.5px;line-height:1.6;color:var(--ink)}
#tourBub .tb strong{font-weight:700}
#tourBub .tf{display:flex;align-items:center;gap:7px;margin-top:12px}

/* ── which project you are working in: the first line of the nav ─────────
   Inside .sb-nav rather than above it, so the switch and the list it
   governs read as one bar. */
.sb-proj{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:7px 9px;margin-bottom:2px}
.sb-proj .l{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.5);width:100%}
.sb-proj select{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-family:inherit;
  font-size:13px;font-weight:650;padding:0;cursor:pointer}
.sb-proj select option{color:var(--ink)}
.sb-proj strong{flex:1;min-width:0;color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-proj .r{font-size:10.5px;color:rgba(255,255,255,.55);white-space:nowrap}

/* ── can counting tell them apart? (39-identify.js) ──────────────────────
   A warning that has to be readable in a hurry and honest at leisure: the
   headline is a count, each group is a chip row somebody recognises, and the
   fix is a sentence rather than a link to a document nobody opens. */
.id-card{margin-bottom:14px}
.id-grp{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px;background:var(--surface)}
.id-names{margin-bottom:6px}
.id-why{font-size:13px;color:var(--ink);line-height:1.5}
.id-fix{font-size:12.5px;color:var(--sub);margin-top:5px;line-height:1.5}
.id-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 7px;border-radius:999px;background:var(--warning-bg);color:var(--warning);
  vertical-align:middle;margin-inline-start:6px;cursor:help}
.id-counted{margin-top:12px}
.id-flags{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.id-flag{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);
  min-width:150px;cursor:pointer}
.id-flag input{margin:0}

/* ── the count (41-count.js) ─────────────────────────────────────────────
   Built for a cold room, one hand and a phone: the name readable at arm's
   length, the keypad a thumb's width, and the progress bar because a
   countdown is what gets somebody to line three hundred. */
.cnt{max-width:520px}
.cnt-top{margin-bottom:14px}
.cnt-prog{height:6px;border-radius:999px;background:var(--surface);overflow:hidden}
.cnt-prog div{height:100%;background:var(--primary);transition:width .18s ease}
.cnt-pos{font-size:12px;color:var(--muted);margin-top:6px}
.cnt-line{margin-bottom:10px}
.cnt-name{font-size:22px;font-weight:700;line-height:1.25}
.cnt-unit{font-size:13px;color:var(--sub);margin-top:3px}
.cnt-was{font-size:12.5px;color:var(--muted);margin-top:4px}
.cnt-read{font-variant-numeric:tabular-nums;font-size:38px;font-weight:700;min-height:52px;
  padding:4px 10px;border-bottom:2px solid var(--border);margin-bottom:14px;overflow:hidden}
.cnt-read .car{display:inline-block;width:2px;height:32px;background:var(--primary);
  vertical-align:-4px;animation:cntBlink 1s steps(2) infinite}
@keyframes cntBlink{50%{opacity:0}}
.cnt-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cnt-pad button{font-size:24px;font-weight:600;padding:16px 0;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
.cnt-pad button:active{background:var(--primary);color:#fff}
.cnt-pad button.del{font-size:20px}
.cnt-act{display:flex;gap:8px;align-items:center;margin-top:14px}
.cnt-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--border)}
.cnt-why{cursor:pointer}
.cnt-why.on{background:var(--primary);color:#fff;border-color:var(--primary)}
@media (max-width:760px){ .cnt-pad button{padding:20px 0} }

/* ── the drawer (42-cash.js) ─────────────────────────────────────────────
   Two grids side by side because the two currencies are counted together
   and read together; the row totals are the check somebody does in their
   head as they go. */
/* a grid rather than a flex row: as flex items the two tables each took a
   whole line, and the point of the screen is that both currencies are in
   front of you at once */
.cash-grids{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:10px 26px;margin-top:14px;align-items:start}
.cash-tbl{border-collapse:collapse;width:100%}
.cash-tbl th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--border)}
.cash-tbl td{padding:4px 8px;border-bottom:1px solid var(--border);font-size:14px}
.cash-tbl td.dn{font-variant-numeric:tabular-nums;font-weight:650;text-align:right;width:90px}
.cash-tbl td.num{font-variant-numeric:tabular-nums;text-align:right;color:var(--sub)}
.cash-tbl input{width:100%;max-width:90px;padding:5px 7px;font-size:15px;text-align:right;
  font-variant-numeric:tabular-nums}
.cash-tbl tr.tot td{font-weight:700;color:var(--ink);border-bottom:0;padding-top:8px}
.cash-pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.cash-pay input{max-width:170px}
.cash-sum{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border)}
.cash-sum .l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cash-sum strong{font-size:26px;font-variant-numeric:tabular-nums}
@media (max-width:760px){ .cash-grids{gap:14px} .cash-tbl{min-width:0;width:100%} }

/* ── what was sold (43-solve.js) ─────────────────────────────────────────*/
.solve-when{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.solve-when label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.solve-when input{padding:7px 9px}
tr.solve-grp{background:var(--surface)}
tr.solve-grp .hint{margin:2px 0 0}

/* ── closing the period (44-review.js) ───────────────────────────────────
   The three numbers read first, and the two that matter are deliberately
   never adjacent to a total that adds them together. */
.cyc-new{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.cyc-new label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.rev-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.rev-top .l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rev-top strong{display:block;font-size:26px;font-variant-numeric:tabular-nums;margin:2px 0}
.rev-top .hint{margin:0}
.rev-who{margin-top:14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);font-size:13.5px;line-height:1.5}
.rev-who .hint{margin-top:4px}
.rev-drift{margin-top:12px}
.rev-drift>div{padding:10px 12px;border:1px solid var(--warning);border-radius:10px;
  background:var(--warning-bg);font-size:13.5px;line-height:1.5;margin-bottom:8px}
.rev-why{background:var(--surface);padding:8px 12px}
.rev-moves{width:100%;border-collapse:collapse;font-size:12.5px}
.rev-moves td{padding:3px 8px;border-bottom:1px solid var(--border);color:var(--sub)}
.rev-moves td.num{font-variant-numeric:tabular-nums;text-align:right}

/* ── used at, and sold as it is bought (02-ingredients.js) ───────────────*/
.ing-use{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.ing-use label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink);cursor:pointer}
.ing-use input{margin:0}
.chip.ing-at{background:var(--surface);color:var(--sub)}
.chip.ing-at.all{color:var(--muted);font-style:italic}
.chip.ing-sell{background:var(--primary);color:#fff;border-color:var(--primary)}
.ing-sellrow{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.ing-sellrow input{margin:0}

/* ── barcodes (45-barcode.js) ────────────────────────────────────────────*/
.bc-wrap{display:flex;flex-direction:column;gap:6px}
.bc-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bc-row input.bc-code{max-width:180px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bc-row select{max-width:170px}
.bc-msg{font-size:12px;flex:1;min-width:120px}
.bc-ok{color:var(--primary)}
.bc-bad{color:var(--danger)}
.bc-note{color:var(--muted)}
.bc-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.chip.ing-bc{background:var(--surface);color:var(--sub);font-variant-numeric:tabular-nums;cursor:help}

/* ── the camera scanner (46-scan.js) ─────────────────────────────────────
   Full screen on a phone, because it is used at arm's length in a cold room
   and a small viewfinder is a scanner nobody can aim. */
.scan-wrap{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.86);
  display:flex;align-items:center;justify-content:center;padding:12px}
.scan-box{width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--card);border-radius:14px;overflow:hidden}
.scan-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.scan-view{position:relative;background:#000;aspect-ratio:4/3;overflow:hidden;cursor:crosshair}
.scan-view video{width:100%;height:100%;object-fit:cover;display:block}
/* The aim box is placed from JavaScript, in the video's own pixels, because
   it is not decoration: nothing outside it is read. Drawing it from CSS
   percentages would put the rectangle somebody aims with in a different
   place from the rectangle the reader is handed, which is worse than having
   no box at all. */
.scan-aim{position:absolute;left:15%;top:30%;width:70%;height:40%;
  border:2px solid rgba(255,255,255,.9);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.45)}
.scan-aim::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;
  background:var(--danger);opacity:.9}
/* where the last tap asked the camera to focus */
.scan-tap{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  border:2px solid var(--warning);opacity:0;pointer-events:none}
.scan-tap.go{animation:scanTap .9s ease-out}
@keyframes scanTap{0%{opacity:1;transform:scale(1.5)}70%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* how sharp the picture in the box is. A person holding a phone cannot tell
   "too blurred to read" from "not a barcode", and guesses wrong: the instinct
   is to move closer, which is the one thing that makes it worse. */
.scan-meter{display:flex;align-items:center;gap:8px}
.scan-meter .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scan-bar{flex:1;height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.scan-sharp{display:block;height:100%;width:0;border-radius:3px;background:var(--success);
  transition:width .18s linear}
.scan-sharp.mid{background:var(--warning)}
.scan-sharp.bad{background:var(--danger)}
.scan-hint{font-size:13px;line-height:1.5;color:var(--warning)}
.scan-ctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.scan-zoom,.scan-cam{display:flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scan-zoom input[type=range]{width:150px}
.scan-zoom span{font-variant-numeric:tabular-nums;color:var(--sub);text-transform:none;font-size:12px}
.scan-cam select{max-width:190px;font-size:12px}
.scan-foot{padding:12px;display:flex;flex-direction:column;gap:8px}
.scan-found{font-size:15px;font-variant-numeric:tabular-nums}
.scan-new{color:var(--warning);font-size:12.5px}
/* what is printed under the bars, and which symbology it was — a UPC-A keeps
   thirteen digits and prints twelve, and somebody comparing the screen with
   the box needs to see the number that is on the box */
.scan-sym{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.scan-err{color:var(--danger);font-size:13px;line-height:1.5}
.scan-manual{display:flex;gap:8px}
.scan-manual input{flex:1;font-variant-numeric:tabular-nums}
body.scanning{overflow:hidden}
@media (max-width:760px){ .scan-box{width:100%;height:100%;border-radius:0}
  .scan-view{flex:1;aspect-ratio:auto} }

/* ── opening stock (47-open.js) ──────────────────────────────────────────
   Three hundred rows of one input each, so the row has to be short and the
   numbers have to line up down the page. */
.op-top{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.op-top label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.op-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.op-cat{margin-top:16px}
.op-cat h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-cat h4 span{color:var(--sub);letter-spacing:0;text-transform:none;font-weight:500}
.op-tbl{width:100%;border-collapse:collapse}
.op-tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--border);font-weight:600}
.op-tbl td{padding:4px 8px;border-bottom:1px solid var(--border);font-size:13.5px}
.op-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--sub)}
.op-tbl td.u{color:var(--muted);font-size:12.5px}
.op-tbl input{width:100%;padding:5px 7px;text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.op-none{color:var(--warning);font-size:12px}
.op-bc{margin-inline-start:6px;color:var(--muted);cursor:help}
tr.op-hit{background:var(--warning-bg)}
tr.op-hit input{border-color:var(--warning)}
.op-sum{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.op-sum .l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-sum strong{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin:2px 0}
.op-sum .hint{margin:0}

/* ── sessions (48-sessions.js) ───────────────────────────────────────────
   A list of periods and a form that writes into one of them. The only part
   with any weight is the line that says which session a record is about to
   land in: it is the difference between a correction and a number quietly
   in the wrong fortnight. */
.se-new{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.se-new label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.se-tbl{width:100%;border-collapse:collapse}
.se-tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--border);font-weight:600}
.se-tbl td{padding:6px 8px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:top}
.se-tbl td.num,.se-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.se-note{display:block;font-size:12px;color:var(--muted)}
.se-state{font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;
  border-radius:999px;background:var(--surface);color:var(--sub)}
.se-state.approved{background:var(--success-bg);color:var(--success)}
.se-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.se-tabs{display:flex;gap:8px;margin-top:10px}
.se-kinds{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.se-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.se-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.se-form input,.se-form select{min-width:150px}
.se-pick{display:flex;gap:6px;align-items:center}
.se-unit{color:var(--muted);text-transform:none;letter-spacing:0}
/* the sentence that has to be read before the button is pressed, so it sits
   between the form and the button rather than under everything */
.se-lands{margin-top:12px;font-size:13.5px;line-height:1.5}
.se-land.ok{color:var(--success)}
.se-land.warn{color:var(--warning)}
.se-land.bad{color:var(--danger)}
.se-land.none,.se-land{color:var(--muted)}
.se-why{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.se-dim{color:var(--muted)}
.se-late{color:var(--warning)}
/* the cash check: four figures side by side, and the gap coloured by which
   way it points — short is the one that matters */
.se-check{display:flex;gap:26px;flex-wrap:wrap}
.se-check>div{display:flex;flex-direction:column;gap:2px}
.se-check .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.se-check strong{font-size:18px;font-variant-numeric:tabular-nums}
.se-even{color:var(--success)}
.se-short{color:var(--danger)}
.se-over{color:var(--warning)}
/* what went cheap, said beside the two columns without joining them */
.rev-disc{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--sub)}
/* a closed period whose ground moved: loud, and one button */
.se-stale{border-color:var(--warning)}
.se-st-stale{background:var(--warning);color:#fff;margin-left:6px}

/* ── the check page (49-check.js) ────────────────────────────────────────
   A phone page for one job at eleven at night. Big rows, one thumb. */
body.chk-mode{background:var(--bg)}
.chk-wrap{max-width:560px;margin:0 auto;padding:0 12px 60px}
.chk-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 2px 10px;border-bottom:1px solid var(--border)}
.chk-head div{display:flex;flex-direction:column;gap:2px}
.chk-head span{font-size:12.5px;color:var(--muted)}
.chk-saved{color:var(--success);font-size:13px}
.chk-err{margin:10px 0;padding:10px 12px;border-radius:8px;background:var(--danger);color:#fff;font-size:13.5px}
.chk-tools{display:flex;gap:8px;margin:12px 0}
.chk-tools input{flex:1;font-size:16px;padding:10px 12px}
.chk-btn{padding:10px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;cursor:pointer}
.chk-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.chk-cat{margin:14px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chk-item{border:1px solid var(--border);border-radius:10px;margin-bottom:6px;background:var(--card);overflow:hidden}
.chk-item.open{border-color:var(--primary)}
.chk-row{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:13px 14px;background:none;border:none;color:var(--text);font-size:15.5px;cursor:pointer;text-align:left}
.chk-meta{font-size:12.5px;color:var(--success);font-variant-numeric:tabular-nums}
.chk-panel{padding:0 14px 14px;border-top:1px solid var(--border)}
.chk-recs{margin-top:10px}
.chk-rec{display:flex;justify-content:space-between;width:100%;padding:8px 10px;margin-bottom:4px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);
  font-size:14px;cursor:pointer}
.chk-sum{font-size:13px;color:var(--sub);padding:4px 2px}
.chk-form{display:flex;gap:8px;margin-top:10px}
.chk-form input{min-width:0;font-size:16px;padding:10px 12px}
#chkPlace{flex:1.2}
#chkQty{flex:1;font-variant-numeric:tabular-nums}
.chk-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.chk-dead{max-width:420px;margin:18vh auto 0;text-align:center;padding:0 20px;color:var(--sub)}
.chk-foot{margin-top:26px;text-align:center;font-size:12px;color:var(--muted);line-height:1.6}
.se-freshlink{border:1px solid var(--success);border-radius:10px;padding:12px;margin-top:8px}
.se-linkrow{display:flex;gap:8px;margin-top:8px}
.se-linkrow input{flex:1;font-size:12.5px;font-family:monospace}
.se-revoked td{opacity:.5}

/* ── cross-sector reports (49b-reports.js) ───────────────────────────────
   A money table: sectors across, the money's own order down. */
.rp-top{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.rp-top label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub)}
.rp-tbl{width:100%;border-collapse:collapse}
.rp-tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);font-weight:600}
.rp-tbl td{padding:6px 10px;border-bottom:1px solid var(--border);font-size:13.5px}
.rp-tbl td.num,.rp-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.rp-sum{border-left:1px solid var(--border);font-weight:600}
.rp-none{color:var(--muted)}
.rp-meta td{color:var(--muted);font-size:12.5px}

/* ── home (05b-home.js): the business as cards ───────────────────────────*/
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.hm-card{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:16px 16px 14px;border:1px solid var(--border);border-radius:14px;
  background:var(--card);color:var(--text);cursor:pointer;overflow:hidden;
  transition:transform .12s ease,border-color .12s ease}
.hm-card:hover{transform:translateY(-2px);border-color:var(--hm)}
.hm-bar{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--hm)}
.hm-name{font-size:17px;font-weight:700;margin-left:6px}
.hm-kind{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.hm-facts{display:flex;gap:12px;font-size:12.5px;color:var(--sub);margin:4px 0 0 6px}
.hm-pulse{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-left:6px}
.hm-stale{color:var(--warning)}
.hm-new{cursor:default}
.hm-new label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--sub);
  margin-left:6px;width:calc(100% - 12px)}
.hm-new input,.hm-new select{width:100%}
.hm-colrow{display:flex;align-items:center;gap:8px}
.hm-colrow input[type=color]{width:44px;height:30px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--card)}
.hm-colhex{font-family:monospace;font-size:12px;color:var(--muted)}
.hm-new .btn{margin-left:6px;margin-top:6px}

/* ── the top bar ─────────────────────────────────────────────────────────
   It was two pills floating in the corner over whatever was underneath
   them. It is a bar now, the width of the page, tinted with the project's
   own light shade — the same tint the profile card's header wears, so the
   two read as one surface — and it carries the name of the screen, which
   used to be a heading in the page and scrolled away with it.

   It sits above the page and below anything that deliberately covers the
   page: the editing panels (100), the dimmer behind them (90) and the
   modals (150) all own the screen while they are up, and a bar floating
   over a dimmed page would say they do not. */
#gsTopbar{position:fixed;top:0;left:232px;right:0;height:58px;z-index:80;
  display:flex;gap:10px;align-items:center;padding:0 18px;
  background:var(--primary-bg);border-bottom:1px solid var(--border)}
body.gs-home #gsTopbar{left:0}
body.navmini #gsTopbar{left:64px}
.tb-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;justify-content:center}
.tb-title strong{font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-title span{font-size:12px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* each menu hangs off its own button rather than off the bar, or both would
   open in the same corner */
.tb-pop{position:relative;flex:none}
.tb-bell,.tb-acct{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
.tb-bell.has{border-color:var(--warning)}
.tb-n{background:var(--warning);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;font-weight:700}
.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.tb-drop{position:absolute;top:calc(100% + 9px);right:0;min-width:250px;max-height:70vh;overflow-y:auto;
  background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.tb-item{display:block;width:100%;text-align:left;padding:9px 11px;border:none;background:none;
  color:var(--text);font-size:13.5px;border-radius:8px;cursor:pointer}
.tb-item:hover{background:var(--surface)}
.tb-item span{display:block;font-size:12px;color:var(--muted)}
.tb-me{padding:9px 11px;font-size:13px;border-bottom:1px solid var(--border);margin-bottom:4px}
.tb-me span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.tb-quiet{padding:10px;color:var(--muted);font-size:13px}

/* the bar is fixed, so the page has to start below it */
.wrap{padding-top:82px}
@media(min-width:1600px){ .wrap{padding-top:90px} }
/* and the name is in the bar, so the page must not repeat it. Only the
   heading and its line go: a pagehead that also holds a control — Fast
   update, "← Recipes" — keeps the control. */
.wrap .pagehead>h1,.wrap .pagehead>.d{display:none}
.wrap .pagehead{margin-bottom:0}
.wrap .pagehead:has(>.btn),.wrap .pagehead:has(>button){margin-bottom:14px}
/* the ☰ that brings the drawer in — a phone-only control */
.tb-burger{display:none;align-items:center;justify-content:center;flex:none;width:38px;height:38px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer}
@media(max-width:760px){
  #gsTopbar,body.navmini #gsTopbar{left:0;gap:8px}
  body{padding-top:58px}
  .wrap,body.gs-home .wrap{padding-top:14px}
  .tb-burger{display:flex}
  body.gs-home .tb-burger{display:none}   /* home has no sidebar to open */
  .tb-title{min-width:0}
  .tb-title span{display:none}            /* the subtitle has no room on a phone */
}

/* home is the whole screen: no sidebar, no project footer, no shell */
body.gs-home aside{display:none}
body.gs-home .wrap{margin-left:0;max-width:1200px;margin-right:auto;margin-left:auto}
body.gs-home .app-foot{display:none}
/* currency inside the account menu */
.tb-cur{display:flex;align-items:center;gap:6px;padding:8px 11px;font-size:12px;color:var(--muted)}
.tb-cur span{flex:1}
.tb-cur button{padding:4px 10px;border-radius:7px;border:1px solid var(--border);background:var(--card);
  color:var(--text);font-size:12px;cursor:pointer}
.tb-cur button.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* the profile card */
.pf-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.pf-row .l,.pf-proj .l{width:110px;flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-lvl{font-size:11px;background:var(--primary-bg);color:var(--primary-dk);border-radius:999px;padding:2px 8px}
.pf-proj{display:flex;gap:10px;padding:10px 0 0;align-items:flex-start}
.pf-p{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:3px 0}
.pf-p span:last-child{color:var(--muted);font-size:12px}
.pf-dot{width:10px;height:10px;border-radius:3px;flex:none}

/* ── the bar is one scrolling column of lids ──────────────────────────────
   Pinning the shared screens above the footer only moved the problem: with
   sixteen screens in one counter and ten shared, no arrangement of two open
   lists fits a laptop. Each heading is a lid instead — opening one closes
   the others, and the whole bar scrolls as one column. */
.sb-nav{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.sb-sec{flex:none}
.sb-sec+.sb-sec{border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
/* the heading is the control, so it has to look pressable without becoming
   another button competing with the screens under it */
.sb-nav button.sb-grp{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  width:100%;border:0;background:none;cursor:pointer;text-align:left;margin:0;border-radius:8px;
  padding:13px 10px 7px;font-size:9.5px;font-weight:800;color:#fff}
.sb-nav button.sb-grp:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-grp .t{display:block;min-width:0}
.sb-grp .cv{flex:none;font-size:11px;line-height:1;margin-top:2px;opacity:.6;
  transition:transform .16s ease}
.sb-sec.open .sb-grp .cv{transform:rotate(180deg)}
/* shut is shut: a collapsed section must take no height, or "one open at a
   time" buys nothing */
.sb-sec .sb-list{display:none}
.sb-sec.open .sb-list{display:block;padding-bottom:6px}
/* The icon rail has no headings to open, so a shut lid there would simply
   lose screens: collapsed, every list is showing. Peeking too — the rail is
   one flat column of icons and hovering it only adds the labels; hiding
   most of what you were just looking at because the pointer arrived would
   be a worse trade than a long list. */
body.navmini aside .sb-sec .sb-list{display:block}
@media(max-width:760px){
  /* in the drawer the accordion is itself again, whatever the desktop
     rail was set to — lids open one at a time, like on a laptop */
  body.navmini aside .sb-sec .sb-list{display:none}
  body.navmini aside .sb-sec.open .sb-list{display:block}
}

/* what the cups say: the inferred split at the close */
.rev-cups{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:10px;font-size:13px;line-height:1.6;background:var(--surface)}
.cup-split{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.cup-split label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600}
.cup-split input{width:90px;padding:7px 9px;border:1px solid var(--border);border-radius:8px}

/* the opening sheet's two halves: what is sold, and the double-check */
.op-grp{margin:18px 0 4px;font-size:14px;font-weight:750}
.op-grp .hint{display:block;margin-top:2px;max-width:640px}

/* ── the assistant ────────────────────────────────────────────────────────
   A chat, a pending-change card, and an input that stays put. */
.as-box{display:flex;flex-direction:column;max-width:860px;min-height:60vh}
.as-log{flex:1;overflow-y:auto;max-height:calc(100vh - 320px);padding:4px 2px;display:flex;flex-direction:column;gap:10px}
.as-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;white-space:normal}
.as-msg.me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.as-msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.as-busy{color:var(--muted);font-style:italic}
.as-card{align-self:stretch;border:1.5px solid var(--warning);border-radius:12px;padding:12px 14px;background:var(--warning-bg)}
.as-card p{margin:6px 0 10px;font-size:13.5px}
.as-act{display:flex;gap:8px}
.as-hints{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.as-in{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.as-in textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  font-family:inherit;font-size:13.5px;background:var(--card);color:var(--text)}
@media(max-width:760px){ .as-log{max-height:calc(100vh - 300px)} .as-msg{max-width:96%} }

/* ── the profile card ────────────────────────────────────────────────────
   A person, then their two identities, then where they work. The first
   version laid the projects out in a row and they ran off the edge of the
   card on the second one. */
#gsProfile .qbox{width:min(440px,94vw);padding:0;overflow:hidden}
.pf-head{display:flex;align-items:center;gap:13px;padding:18px 20px;
  background:var(--primary-bg);border-bottom:1px solid var(--border)}
.pf-av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--grad-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
  letter-spacing:.02em}
.pf-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-id strong{font-size:16.5px;line-height:1.25}
.pf-id span{font-size:12.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-body{padding:6px 20px 4px}
.pf-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.pf-row .l{width:118px;flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-row strong{font-size:13.5px;font-weight:600}
.pf-lvl{font-size:10.5px;background:var(--primary-bg);color:var(--primary-dk);border-radius:999px;
  padding:2px 9px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.pf-sec{padding:14px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-p{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.pf-p b{flex:1;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-p span{font-size:12px;color:var(--muted);flex:none}
.pf-dot{width:10px;height:26px;border-radius:4px;flex:none}
.pf-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 18px;
  border-top:1px solid var(--border);background:var(--surface)}

/* the brand is the way home */
.sb-brand{cursor:pointer}
.sb-brand:hover .logo{filter:brightness(1.12)}
/* projects inside the account menu */
.tb-sec{padding:8px 11px 3px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tb-proj{display:flex;align-items:center;gap:9px}
.tb-proj i{width:9px;height:18px;border-radius:3px;flex:none}
.tb-proj.cur{opacity:.65;cursor:default}
.tb-proj span{margin-left:auto;font-size:11px;color:var(--muted)}

/* ── Home wears business blue ─────────────────────────────────────────────
   The business screen is nobody's counter, so it has its own suit: set on
   the body class, which sits closer than the root where the project theme
   lives, so Home is blue whatever counter was last open. */
body.gs-home{--primary:#2E5AAC;--primary-dk:#24478A;--primary-bg:#E8EEF9;
  --grad-primary:linear-gradient(135deg,#3E6EC2 0%,#24478A 100%)}
.hm-head h1{letter-spacing:.01em}
/* a sector that is coming: a card, not a door */
.hm-soon{cursor:default;opacity:.75}
.hm-soon:hover{transform:none;border-color:var(--border)}
.hm-soon .hm-bar{opacity:.55}
/* the splash while a refresh works out which screen you are on. Opaque, not
   a blur: there is nothing behind it worth showing yet, and half-drawn is
   exactly what it exists to hide. Below the sign-in gate, which owns the
   screen outright when nobody has signed in. */
#gsBoot{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  background:var(--surface)}
/* the veil while a counter opens */
#gsVeil{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:rgba(12,16,24,.45);backdrop-filter:blur(2px)}
.veil-card{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px 22px;font-size:14.5px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.veil-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--primary-bg);
  border-top-color:var(--primary);animation:veilspin .7s linear infinite}
@keyframes veilspin{to{transform:rotate(360deg)}}

/* a business-wide screen still showing one counter's figures, saying so */
.gs-scopewarn{margin:-4px 0 14px;color:var(--warning);font-size:12.5px}
.gs-scopewarn:empty{display:none}

/* a project's own mark where the system's leaf sits on the home screen */
.sb-brand .logo.has-mark{background:rgba(255,255,255,.10);box-shadow:none;overflow:hidden}
.sb-brand .logo .mk{font-size:19px;line-height:1}
.sb-brand .logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ── a project's own look, previewed while it is chosen ──────────────────
   Picking a colour from a swatch and seeing a sidebar wear it are not the
   same experience — the brown came out muddy the first time because nobody
   saw it until it shipped. */
.pl-live{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:12px;margin:6px 0 14px;
  background:linear-gradient(180deg,var(--pl) 0%,color-mix(in srgb,var(--pl) 70%,#000) 100%);color:#fff}
.pl-mark{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:19px;overflow:hidden}
.pl-mark img{width:100%;height:100%;object-fit:cover;display:block}
.pl-name{font-weight:750;font-size:14px;letter-spacing:.04em}

/* the way back to the session that sent you to a count or a close */
.se-return{margin:-4px 0 12px}
.se-return:empty{display:none}
/* a counter's own mark on its card */
.hm-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;margin-right:7px;vertical-align:-4px;background:var(--surface);
  font-size:14px;overflow:hidden}
img.hm-mark{object-fit:cover}

/* the first row of the settings tree: whose settings, before which of them */
.set-scopes label{font-weight:650}
.set-scopes{border-bottom:1px solid var(--border);padding-bottom:10px}

/* ── the small check: picking the few lines it covers ── */
.ck-picked{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ck-chip{cursor:pointer;border:1px solid var(--primary);background:var(--primary-bg);
  color:var(--primary-dk);font-weight:600}
.ck-hits{display:flex;flex-direction:column;gap:2px;margin-top:8px;max-height:260px;
  overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:6px}
.ck-hit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;
  background:none;color:var(--ink);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.ck-hit:hover{background:var(--surface)}
.ck-hit.on{background:var(--primary-bg);color:var(--primary-dk);font-weight:650}

/* ── ingredients, all at once (02b-ing-fast.js) ──────────────────────────
   Wider than any screen on purpose: the record has twenty honest fields and
   hiding half of them is what sent people back to a spreadsheet. It scrolls
   sideways, and the tick-box and the name stay against the left edge so
   nobody loses their row halfway across. */
/* The pane scrolls both ways, and that is what makes the header row hold:
   position:sticky pins a cell against the nearest scrolling ancestor, so a
   header in a pane that only scrolls sideways slides away with the page the
   moment the list is longer than a screen — which a real catalogue always
   is. Capped against the viewport so the sheet is its own room, with the
   header and the pinned names framing it from both edges. */
.ifu-scroll{overflow:auto;max-height:calc(100vh - 260px);min-height:200px;
  border:1px solid var(--border);border-radius:12px;background:var(--card)}
/* the sheet's own head: what this is, the one rule that matters, the way out */
.ifu-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ifu-head strong{font-size:14px}
/* the row selects dress like the inputs beside them — a bare browser select
   in a sheet of styled cells reads as a broken cell */
table.ifu tbody select{padding:5px 7px;border:1px solid var(--border);border-radius:5px;
  background:var(--card);color:var(--ink);font-size:13px}
/* overflow:hidden on the app's tables (it rounds their corners) puts a
   scroll container between a sticky cell and the pane that actually
   scrolls, so the cell sticks to the table — which never moves — and
   looks exactly like sticky being ignored. The rounding lives on the
   pane here instead. */
table.ifu{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-size:13px;overflow:visible;border-radius:0}
table.ifu th,table.ifu td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
  vertical-align:middle;background:var(--card)}
table.ifu thead th{position:sticky;top:0;z-index:3;background:var(--surface);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border)}
table.ifu tbody tr:hover td{background:var(--primary-bg)}
/* the two that do not scroll away */
table.ifu .ifu-pin{position:sticky;z-index:2}
table.ifu .ifu-pin1{left:0;width:34px;text-align:center}
table.ifu .ifu-pin2{left:34px;box-shadow:1px 0 0 var(--border)}
table.ifu thead .ifu-pin{z-index:4}
table.ifu tbody tr:hover .ifu-pin{background:var(--primary-bg)}
.ifu-calc{color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums}
.ifu-fixed{color:var(--muted);font-size:12px}
.ifu-off input{opacity:.45}
.ifu-bar{gap:10px;align-items:center;flex-wrap:wrap;background:var(--primary-bg);
  border:1px solid var(--primary);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.ifu-grp{display:flex;gap:6px;align-items:center}
.ifu-bar select,.ifu-bar input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--ink);font-size:13px}

/* ── who was on: the session's own window onto the rota ── */
.sw-scroll{overflow-x:auto}
.sw-tbl{min-width:0;width:max-content}
.sw-tbl .sw-name{position:sticky;left:0;background:var(--card);min-width:140px}
.sw-tbl td input{width:52px;padding:4px 6px;border:1px solid var(--border);border-radius:5px;
  text-align:right;font-variant-numeric:tabular-nums;background:var(--card);color:var(--ink)}
/* a corrected cell is frozen, and looks it */
.sw-tbl td.sw-fix input{border-color:var(--primary);background:var(--primary-bg);font-weight:650}

/* ── in & out: the daily doors ── */
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){ .io-grid{grid-template-columns:1fr} }
.io-door{display:block;width:100%;text-align:left;margin-bottom:8px;padding:12px 14px}
.io-door span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.io-form{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.io-row{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.io-row input,.io-row select{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text)}
.io-row input[inputmode=decimal]{width:110px}

/* labelled strip fields, and the waste-cost chip */
.io-f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);font-weight:600}
.io-f input,.io-f select{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-size:13px}
.io-strip{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.io-cost{background:var(--warning-bg);color:var(--warning);font-weight:700;align-self:center}

/* ── sessions: cards, main table, checks tab ── */
.se-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.se-card{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
.se-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
.se-off{opacity:.55}
.se-ckmake{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:8px}
.se-ckopt{border:1px solid var(--border);border-radius:12px;padding:14px}
.se-ckopt h4{margin:0 0 6px}
.se-ckgrp{margin-top:10px}
.se-ckgh{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.se-ckln{display:inline-flex;gap:6px;align-items:center;margin:4px 8px 0 0;padding:4px 10px;
  border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:13px}
.se-ckln.on{border-color:var(--primary);background:var(--primary-bg)}
.se-ckh{margin:16px 0 8px}
.se-ckcard{margin-top:10px}
.se-ckcov{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.se-row{cursor:pointer}
.se-row:hover td{background:var(--primary-bg)}
.se-ckin{padding:4px 0 6px}
.se-ckopenrow>td{background:var(--surface)}
.se-ckst{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.se-ckst.ok{background:var(--primary-bg);color:var(--primary-dk)}
.se-ckst.warn{background:#f6ead2;color:#8a6100}
.se-ckst.bad{background:#f7dede;color:var(--danger)}
.se-ckgrph td{font-weight:700;background:var(--surface);padding-top:12px}
/* the check's fields dress like every other field in the system — the
   owner asked for it by name after the first cut left them bare */
.se-ckqty{width:110px;text-align:right;padding:8px 10px;border:1px solid var(--border);
  border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px}
.se-ckqty:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.se-ckqty::placeholder{color:var(--muted)}

/* ── check page v2: cards, filters, sticky bar, keypad ── */
.chk-wrap{padding-bottom:86px}
.chk-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;align-items:center}
.chk-chip{border:1px solid var(--border);background:var(--card);border-radius:999px;
  padding:6px 12px;font-size:13px;white-space:nowrap;cursor:pointer}
.chk-chip.on{background:var(--primary);color:var(--white);border-color:var(--primary)}
.chk-catsel{border:1px solid var(--border);border-radius:999px;padding:5px 8px;font-size:13px;background:var(--card)}
.chk-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.chk-thumb{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none}
.chk-thumb0{display:flex;align-items:center;justify-content:center;background:var(--primary-bg);
  color:var(--primary-dk);font-weight:700;font-size:18px}
.chk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chk-name{font-weight:600}
.chk-trk{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--border);
  border-radius:999px;padding:1px 7px;margin-left:4px}
.chk-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chk-got{flex:none;font-size:12.5px;color:var(--muted)}
.chk-got.on{color:var(--primary-dk);font-weight:700}
.chk-keys{display:flex;gap:6px;margin-top:8px}
.chk-key{flex:1;border:1px solid var(--border);border-radius:8px;background:var(--card);
  padding:9px 0;font-size:16px;cursor:pointer}
.chk-key:active{background:var(--primary-bg)}
.chk-over{color:var(--danger);font-weight:600}
.chk-bar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--card);
  border-top:1px solid var(--border);box-shadow:0 -4px 14px rgba(0,0,0,.06);z-index:50}
.chk-scanbtn{flex:1;font-size:16px;padding:12px}
.chk-prog{font-size:13px;color:var(--muted);white-space:nowrap}
.chk-groupsrow{margin-top:-4px}
.chk-cur{margin-left:auto;font-weight:700}
.chk-big{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.chk-det{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.chk-recs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.chk-rec{border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:13px;display:inline-flex;gap:6px;align-items:center}
.chk-rec em{font-style:normal;font-size:11px;color:var(--muted)}
.chk-rec a{color:var(--danger);text-decoration:none;font-weight:700}
.chk-rsum{font-size:13px;color:var(--primary-dk)}
/* v4: compact top, colour signals */
.chk-wrap{padding-top:0}
.chk-head{padding:8px 0 6px;margin-bottom:2px}
.chk-tools{margin:0 0 6px}
.chk-tools input{padding:8px 12px}
.chk-filters{padding:0 0 6px;margin:0}
.chk-chip{padding:5px 11px;font-size:12.5px}
.chk-cat{margin:8px 0 4px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chk-item{border-left:3px solid var(--border)}
.chk-item.is-done{border-left-color:#2f9e63;background:#f4faf6}
.chk-item.is-over{border-left-color:var(--danger);background:#fdf4f4}
.chk-got.over{color:var(--danger);font-weight:700}
.chk-foot{display:none}
/* v5: the pinned counting sheet, sticky header, back-trap */
.chk-head{position:sticky;top:0;background:#faf7f2;z-index:45}
.chk-fixed{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;
  z-index:60;background:var(--card);border-bottom:2px solid var(--primary);
  box-shadow:0 8px 22px rgba(0,0,0,.14);padding:10px 12px 8px;border-radius:0 0 14px 14px}
.chk-fixhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.chk-x{padding:6px 12px;flex:none}
.chk-fixed .chk-recs{flex-wrap:nowrap;overflow-x:auto;margin-bottom:6px;padding-bottom:2px}
.chk-fixed .chk-rec{flex:none}
.chk-list.under-panel{padding-top:210px}
.chk-resume{position:fixed;left:0;right:0;bottom:18px;display:flex;flex-direction:column;
  align-items:center;gap:6px;z-index:80}
.chk-resume .chk-btn{padding:12px 22px;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.chk-resume a{font-size:12px;color:var(--muted)}

/* ── the row menu: one ⋯ per actions column, one popup for all ── */
.gs-dots{border:0;background:none;cursor:pointer;font-weight:800;font-size:15px;
  padding:1px 8px;border-radius:7px;color:var(--sub);line-height:1.2}
.gs-dots:hover{background:var(--surface);color:var(--ink)}
#gsRowMenu{position:absolute;z-index:1200;background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 10px 28px rgba(10,20,14,.16);padding:4px;min-width:150px}
#gsRowMenu .gs-mi{display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 12px;border-radius:7px;cursor:pointer;font:inherit;color:var(--ink)}
#gsRowMenu .gs-mi:hover{background:var(--surface)}
#gsRowMenu .gs-mi.danger{color:var(--danger)}
#gsRowMenu .gs-mi.danger:hover{background:var(--danger-bg)}
.io-editbar{background:var(--warning-bg);border:1px solid var(--warning);border-radius:9px;
  padding:7px 12px;margin-bottom:10px;font-size:13px}
.io-editbar a{margin-left:6px}

/* ── the session's item journey and the small check's pick step ── */
.se-journey{flex-wrap:wrap}
.se-journey>div{min-width:90px}
.se-pickcat h4{margin:12px 0 4px;font-size:13px;color:var(--sub)}
.se-pickrow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer}
.se-pickrow:hover{background:var(--surface)}
.se-pickrow span:first-of-type{flex:1}
.se-cknewp{border-color:var(--primary);background:var(--primary-bg)}

/* Money columns hold lira as well as dollars — "8,900,000 LBP" needs room
   a "$1.50" column never asked for, and wrapping a price is how a number
   gets misread. Wide enough for the biggest note, never wrapping. */
.se-tbl .se-money{min-width:120px;width:130px}
.se-main td.num{white-space:nowrap}
.se-ckoldp{border-color:var(--warning)}

/* the gap, explained rather than announced */
.se-gapbox{margin-top:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.se-gapbox.is-short{border-color:var(--danger);background:var(--danger-bg)}
.se-gapbox.is-over{border-color:var(--warning);background:var(--warning-bg)}
.se-gapbox ul{margin:4px 0 6px 18px;padding:0;font-size:12.5px;color:var(--sub)}
.se-gapbox li{margin:2px 0}

/* the shape of what is loading — never the shape of what was there before */
.gs-skel{height:14px;border-radius:7px;margin:8px 0;
  background:linear-gradient(90deg,var(--line) 25%,var(--surface) 37%,var(--line) 63%);
  background-size:400% 100%;animation:gs-shim 1.3s ease infinite}
.gs-skel-h{height:20px;width:45%;margin-bottom:14px}
.gs-skel.short{width:60%}
@keyframes gs-shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.gs-skel{animation:none}}

/* ── the close's dashboard: tiles, and parts against a whole ── */
.gs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.gs-kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.gs-kpi .k{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.gs-kpi strong{display:block;font-size:20px;line-height:1.25;margin-top:3px;font-variant-numeric:tabular-nums}
.gs-kpi.big strong{font-size:26px}
.gs-kpi .s{display:block;font-size:11.5px;color:var(--sub);margin-top:2px}
.gs-kpi.good{border-color:var(--success);background:var(--success-bg)}
.gs-kpi.good strong{color:var(--success)}
.gs-kpi.bad{border-color:var(--danger);background:var(--danger-bg)}
.gs-kpi.bad strong{color:var(--danger)}
.gs-bar-strip{margin:10px 0 2px}
.gs-bar{display:grid;grid-template-columns:130px 1fr 110px;align-items:center;gap:10px;margin:5px 0;font-size:12.5px}
.gs-bar .l{color:var(--sub)}
.gs-bar .t{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.gs-bar .f{display:block;height:100%;border-radius:999px;background:var(--muted)}
.gs-bar .f.good{background:var(--success)}
.gs-bar .f.bad{background:var(--danger)}
.gs-bar .f.warn{background:var(--warning)}
.gs-bar .f.neutral{background:var(--primary)}
.gs-bar .v{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:620px){.gs-bar{grid-template-columns:100px 1fr 90px;font-size:12px}}

/* ── the pitch: the diary, and the strip that sells one hour ──
   The table is read down a column — hour, price, status — so the eye
   should find a free hour without reading any words. That is what the
   tinted row is for; the chips carry the rest. */
.pi-daybar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pi-daybar input[type=date]{padding:7px 10px}
.pi-span{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.pi-span label{padding:6px 14px;cursor:pointer;font-size:13px}
.pi-span label.on{background:var(--primary);color:#fff}
.pi-tbl td{vertical-align:middle}
.pi-tbl td.num,.pi-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.pi-time strong{font-variant-numeric:tabular-nums;font-size:15px}
.pi-time .d{display:block;font-size:11.5px;color:var(--muted)}
.pi-isfree{background:var(--success-bg)}
.pi-owed{color:var(--danger);font-weight:700}
.pi-act{white-space:nowrap;text-align:right}
.pi-act .btn{padding:5px 10px;font-size:13px}
.pi-daysep td{background:var(--surface);font-weight:700;letter-spacing:.03em}
.chip.pi-free{background:var(--success-bg);color:var(--success)}
.chip.pi-held{background:var(--warning-bg);color:var(--warning)}
.chip.pi-req{background:var(--primary-bg);color:var(--primary)}
.chip.pi-taken{background:var(--surface)}
.chip.pi-played{background:var(--success-bg);color:var(--success)}
.chip.pi-miss{background:var(--danger-bg);color:var(--danger)}
.chip.pi-shut{opacity:.6}
.chip.pi-prem{background:var(--warning-bg);color:var(--warning);font-weight:700;margin-left:6px}
.chip.pi-lvl{background:var(--primary-bg);color:var(--primary);font-weight:700}
/* two people want the same match: the desk chooses, so the contest has to
   be visible on the row rather than discovered by scrolling */
.chip.pi-wait{background:var(--warning-bg);color:var(--warning);font-weight:700;margin-left:6px}
/* a level is recognisable before it is read, and it reads the same colour
   here as it does in the player's own app */
.chip.pi-lvl{margin-left:6px}
.chip.pi-lv-standard{background:var(--success-bg);color:var(--success)}
.chip.pi-lv-pro{background:#E8EDFD;color:#2E4BC7}
.chip.pi-lv-premium{background:#F0E9FD;color:#5B2FBF}
.chip.pi-block{background:var(--danger-bg);color:var(--danger);font-weight:700;margin-left:6px}
.pi-wide{display:block;font-size:11.5px;color:var(--muted);margin-top:10px}
.pi-wide textarea{width:100%;margin-top:4px}
.pi-caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.pi-caps{grid-template-columns:1fr}}
.pi-contest td{background:var(--warning-bg)}
.pi-sell{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px;
  border:1px solid var(--primary);border-radius:12px;background:var(--surface)}
.pi-sell label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)}
.pi-sell strong{align-self:center}
.pi-selling td{padding:8px 4px}
/* the public address as a square, beside what it is for */
.pi-qr{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.pi-qr .qrbox{flex:0 0 auto;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:8px;line-height:0}
.pi-qr .qrsay{flex:1 1 260px;min-width:0}
.pi-webshow{display:block;font-size:12px;padding:9px 10px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--primary)}
/* one tick box that sits in a field like an input does */
.pi-tick{display:flex;gap:8px;align-items:center;font-size:13px;padding:9px 0}
.pi-ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin:12px 0}
.pi-ticks label{display:flex;gap:8px;align-items:center;font-size:13.5px}

/* ── the pitch: the face a player sees ── */
.pi-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pi-pair label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)}
.pi-pair textarea{resize:vertical;font:inherit;padding:8px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);color:var(--text)}
.pi-amen{display:flex;flex-wrap:wrap;gap:8px}
.pi-amen label{display:inline-flex;gap:6px;align-items:center;padding:7px 13px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;font-size:13.5px}
.pi-amen label.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary)}
.pi-cover{height:64px;border-radius:10px;border:1px solid var(--border);object-fit:cover}
/* one rung of the level scheme, boxed so three of them do not read as nine
   fields in a row */
.pi-lvlbox{border:1px solid var(--border);border-radius:12px;padding:12px 12px 4px;
  margin-bottom:12px;background:var(--surface-2,transparent)}
.pi-lvlbox h4{margin:0 0 10px;font-size:13px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap}
@media (max-width:640px){.pi-pair{grid-template-columns:1fr}}

/* ── the pitch: setup, as the rest of the app looks ── */
.pi-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);flex-wrap:wrap}
.pi-link .lk{opacity:.6}
.pi-link code{flex:1;min-width:180px;font-size:12.5px;color:var(--sub);overflow-x:auto;
  white-space:nowrap;user-select:all}
.pi-hours{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.pi-hrow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid var(--border);
  flex-wrap:wrap}
.pi-hrow:first-child{border-top:0}
.pi-hrow.on{background:var(--surface)}
.pi-hday{display:flex;align-items:center;gap:8px;min-width:132px;font-size:13.5px;font-weight:600;cursor:pointer}
.pi-htime{display:flex;align-items:center;gap:6px}
.pi-htime input{padding:7px 9px;border:1px solid var(--border);border-radius:8px;font:inherit;
  font-size:13px;background:var(--white)}
.pi-htime .to{color:var(--muted);font-size:12px}
.pi-hshut{color:var(--muted);font-size:12.5px}
.pi-hcopy{margin-inline-start:auto;padding:5px 10px;font-size:12px}
.pi-rulebox{margin-top:12px;padding:14px;border:1px solid var(--primary);border-radius:12px;
  background:var(--surface)}
.pi-rulebox h4{margin:0 0 10px;font-size:13.5px}
.pi-rulebox .field{margin-bottom:10px}
tr.pi-editing{background:var(--primary-bg)}
.pi-marks{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.pi-marks figure{margin:0;text-align:center}
.pi-marks figcaption{font-size:11.5px;color:var(--muted);margin-top:4px}
.pi-marks .none{opacity:.5}
.pi-cover{height:72px;width:150px;object-fit:cover;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);display:block}
.pi-logo{height:72px;width:72px;object-fit:contain;border-radius:14px;border:1px solid var(--border);
  background:var(--white);display:block}
/* one-of-these choices. Its own class rather than borrowing the amenity
   chips: two things that look alike and mean different things are two
   things a selector will one day confuse, which is exactly what happened. */
.pi-choice{display:flex;flex-wrap:wrap;gap:8px}
.pi-choice label{display:inline-flex;gap:6px;align-items:center;padding:8px 15px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;font-size:13.5px;font-weight:600}
.pi-choice label.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary)}
.pi-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:800;
  letter-spacing:.14em;color:var(--primary)}