/* ==========================================================================
   Kolkata Kitchen Bento — theme layer. Uses tokens.css only (no raw colours).
   One hero treatment for every section, with a kantha running-stitch motif.
   ========================================================================== */
:root{
  --kantha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='9 9'%3E%3Cpath d='M10 150 C 90 40, 170 40, 250 120 S 340 170, 350 60'/%3E%3Cpath d='M40 175 C 120 80, 190 90, 260 150'/%3E%3Ccircle cx='300' cy='45' r='26'/%3E%3Ccircle cx='300' cy='45' r='12'/%3E%3C/svg%3E");
}
body{background:var(--canvas);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-body)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:-.015em}
::selection{background:var(--lime);color:var(--night)}
:focus-visible{outline:2px solid var(--night);outline-offset:2px}

/* ---------- shell ---------- */
.app{grid-template-columns:252px 1fr}
.side{background:var(--night);margin:12px 0 12px 12px;border-radius:var(--r-xl);height:calc(100vh - 24px);top:12px;padding:20px 12px;gap:18px;overflow:auto;scrollbar-width:none}
.logo-mark{background:var(--lime);color:var(--night);border-radius:12px;transform:rotate(-4deg);box-shadow:0 6px 0 -2px var(--turmeric)}
.logo b{color:var(--on-night);font-size:var(--fs-md)}
.logo small,.side-sec,.side-foot small{color:var(--on-night-2);font-size:var(--fs-xs)}
.side-sec{padding:0 10px}
.menu{gap:3px}
.menu button{padding:7px 10px 7px 7px;border-radius:14px;color:var(--on-night-2);font-weight:var(--fw-medium);gap:11px;font-size:var(--fs-base)}
.menu button svg{box-sizing:content-box;padding:7px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--lime);opacity:1;width:16px;height:16px}
.menu button:hover{background:var(--night-2);color:var(--on-night)}
.menu button[aria-current="page"]{background:var(--surface);color:var(--night);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.menu button[aria-current="page"] svg{background:var(--lime);color:var(--night)}
.menu .badge{border-radius:8px;padding:1px 7px;background:var(--melon);color:var(--night);font-size:var(--fs-xs)}
.side-foot{background:var(--night-2);border-radius:18px}
.side-foot b{color:var(--on-night)}
.avatar{background:var(--turmeric);color:var(--night);border-radius:12px}
.topbar{background:color-mix(in srgb,var(--canvas) 82%,transparent);border-bottom:0;padding:16px 28px 10px}
.site{color:var(--text-2)}
.site .live{background:var(--lime-ink);box-shadow:0 0 0 3px var(--lime-soft)}
.search input{border-radius:14px;border-color:transparent;background:var(--surface);box-shadow:var(--lift-sm);height:42px}
.btn{border-radius:12px;font-weight:var(--fw-bold)}
.btn-primary{background:var(--night);color:var(--on-night)}
.btn-primary:hover{background:var(--night-3)}
.btn-line{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.chip{border-radius:var(--r-pill);border-color:transparent;background:var(--surface);box-shadow:0 1px 0 rgba(27,31,75,.06)}
.chip[aria-pressed="true"]{background:var(--night);color:var(--on-night)}
.chip em{opacity:.6}
.field{border-radius:12px;border-color:transparent;box-shadow:0 1px 0 rgba(27,31,75,.06)}
.seg{background:var(--night-soft);border-radius:14px}
.seg button{border-radius:11px}
.seg button[aria-pressed="true"]{box-shadow:0 4px 10px -6px rgba(27,31,75,.5)}

/* ---------- page hero (same treatment on every screen) ---------- */
.page{padding-top:8px}
.page-head{position:relative;overflow:hidden;isolation:isolate;background:var(--lime-soft);border-radius:var(--r-xl);padding:26px 28px;margin-bottom:22px;align-items:flex-end;min-height:132px}
.page-head::after{content:"";position:absolute;right:-30px;top:-20px;width:360px;height:180px;background:var(--lime-ink);-webkit-mask:var(--kantha) no-repeat center/contain;mask:var(--kantha) no-repeat center/contain;opacity:.35;z-index:-1}
.page-head::before{content:"";position:absolute;right:120px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:var(--lime);opacity:.45;z-index:-1}
.page-head h1{font-size:var(--fs-2xl);letter-spacing:-.03em;color:var(--night)}
.page-head p{color:var(--text-2);max-width:62ch;font-size:var(--fs-base)}

/* ---------- panels ---------- */
.panel{border:0;border-radius:var(--r-lg);box-shadow:var(--lift-sm);background:var(--surface)}
.panel-h h2{font-size:var(--fs-md)}
.panel-h p{font-size:var(--fs-sm);color:var(--text-3)}
.t th{background:transparent;color:var(--text-3);font-weight:var(--fw-medium);font-size:var(--fs-xs);border-bottom:1px solid var(--line)}
.t td{border-bottom:1px solid var(--line)}
.t tbody tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:var(--surface-2)}
.tag{border-radius:8px;font-size:var(--fs-xs)}
.empty{border-radius:var(--r-lg)}
.muted{color:var(--text-3)}

/* ---------- stickers & stamps ---------- */
.sticker{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:var(--fw-heavy);padding:4px 9px;border-radius:9px;transform:rotate(-3deg);box-shadow:0 3px 0 rgba(27,31,75,.18);white-space:nowrap}
.sticker.lime{background:var(--lime);color:var(--night)}
.sticker.turmeric{background:var(--turmeric);color:var(--night)}
.sticker.melon{background:var(--melon);color:var(--night)}
.sticker.night{background:var(--night);color:var(--on-night)}
.sticker.soft{background:var(--surface-2);color:var(--text-2);box-shadow:none;transform:none;font-weight:var(--fw-medium)}
.stamp{display:inline-block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);padding:5px 10px;border:2.5px solid currentColor;border-radius:8px;transform:rotate(-8deg);opacity:.9;white-space:nowrap}
.stamp.good{color:var(--lime-ink)} .stamp.warn{color:var(--turmeric-ink)} .stamp.bad{color:var(--melon-ink)}

/* ---------- bento tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:18px;background:var(--surface);box-shadow:var(--lift-sm);text-align:left;border:0;color:var(--night);display:flex;flex-direction:column;gap:6px;min-height:128px}
button.tile{cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
button.tile:hover{transform:translateY(-3px)}
.tile .lbl{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.tile .val{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2xl);line-height:1;letter-spacing:-.03em;margin-top:auto}
.tile .sub{font-size:var(--fs-xs);color:var(--text-2)}
.tile.good{background:var(--lime-soft)}
.tile.warn{background:var(--turmeric-soft)}
.tile.bad{background:var(--melon-soft)}
.tile.info{background:var(--night-soft)}
.tile.hero{grid-column:span 2;grid-row:span 2;background:var(--night);color:var(--on-night);padding:24px}
.tile.hero .val{font-size:var(--fs-3xl)}
.tile.hero .lbl,.tile.hero .sub{color:var(--on-night-2)}
.tile.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--lime) 0,transparent 65%);opacity:.35}
.tile .spark{display:block;width:100%;height:70px;margin-top:10px}
.spark .area{fill:var(--lime);opacity:.22}.spark .line{stroke:var(--lime)}

/* ---------- needs-action rail ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.chipcard{scroll-snap-align:start;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:10px;border-radius:18px;background:var(--surface-2);cursor:pointer;border:2px solid transparent;text-align:left;color:var(--text)}
.chipcard:hover,.chipcard:focus-visible{border-color:var(--night)}
.chipcard img,.chipcard .noimg{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--line)}
.chipcard b{display:block;font-size:var(--fs-base);line-height:1.2}
.chipcard small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.chipcard .sticker{margin-top:6px}

/* ---------- basket cards (replenishment) ---------- */
.baskets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:18px;align-items:start}
.basket{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden;display:flex;flex-direction:column}
.basket-h{display:flex;gap:12px;align-items:center;padding:16px 18px;background:var(--turmeric-soft)}
.mono{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);background:var(--night);color:var(--lime);flex:none}
.basket-h h3{font-size:var(--fs-md)}
.basket-h small{display:block;color:var(--text-2);font-size:var(--fs-xs);margin-top:2px}
.basket ul{list-style:none;margin:0;padding:6px 18px}
.basket li{display:grid;grid-template-columns:22px 40px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.basket li:last-child{border-bottom:0}
.basket li.off{opacity:.42}
.basket li img,.basket li .noimg{width:40px;height:40px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.basket li b{display:block;font-size:var(--fs-base);line-height:1.2}
.basket li small{font-size:var(--fs-xs);color:var(--text-3)}
.stepper{display:inline-flex;align-items:center;background:var(--surface-2);border-radius:12px;padding:3px}
.stepper button{width:28px;height:28px;border:0;border-radius:9px;background:var(--surface);font-weight:var(--fw-heavy);font-size:var(--fs-md);box-shadow:0 1px 2px rgba(27,31,75,.15);color:var(--night)}
.stepper input{width:52px;height:28px;border:0;background:transparent;text-align:center;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;padding:0}
.basket-f{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--night);color:var(--on-night);margin-top:auto}
.basket-f .total{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-right:auto;display:block}
.basket-f small{display:block;color:var(--on-night-2);font-size:var(--fs-xs)}
.basket-f .btn-primary{background:var(--lime);color:var(--night)}

/* ---------- activity feed ---------- */
.feed-day{margin-bottom:20px}
.feed-day h3{font-size:var(--fs-md);color:var(--text-2);margin:0 0 8px 4px}
.feed{display:grid;gap:8px}
.feed-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px 10px 10px;background:var(--surface);border-radius:18px;box-shadow:0 1px 0 rgba(27,31,75,.05);cursor:pointer}
.feed-row:hover{box-shadow:var(--lift-sm)}
.bubble{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:var(--fw-heavy);font-size:var(--fs-sm)}
.bubble.good{background:var(--lime-soft);color:var(--lime-ink)}
.bubble.warn{background:var(--turmeric-soft);color:var(--turmeric-ink)}
.bubble.bad{background:var(--melon-soft);color:var(--melon-ink)}
.bubble.info{background:var(--night-soft);color:var(--night)}
.feed-row b{font-size:var(--fs-base)}
.feed-row small{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.qty-pill{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);padding:6px 11px;border-radius:12px;background:var(--surface-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.qty-pill.in{background:var(--lime-soft);color:var(--lime-ink)}

/* ---------- menu cards ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px;margin-bottom:26px}
.menu-h{display:flex;align-items:center;gap:10px;margin:4px 4px 12px;flex-wrap:wrap}
.menu-h h2{font-size:var(--fs-xl);letter-spacing:-.02em}
.menu-h > span{color:var(--text-3);font-size:var(--fs-sm)}
.dish{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--lift-sm);cursor:pointer;display:grid;gap:12px;border:0;text-align:left;color:var(--text);overflow:hidden;align-content:start}
.dish:hover,.dish:focus-visible{box-shadow:var(--lift)}
.dish-top{display:flex;gap:14px;align-items:center}
.donut{--p:0;width:72px;height:72px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--dc,var(--lime-ink)) calc(var(--p)*1%),var(--surface-2) 0)}
.donut.bad{--dc:var(--melon)}.donut.prep{--dc:var(--turmeric)}
.donut::before{content:"";grid-area:1/1;width:54px;height:54px;border-radius:50%;background:var(--surface)}
.donut span{grid-area:1/1;position:relative;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1;text-align:center}
.donut small{display:block;font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:10px;color:var(--text-3)}
.dish h3{font-size:var(--fs-md)}
.dish .price{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.dish .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dish .warn{font-size:var(--fs-xs);color:var(--melon-ink)}
.dish.glass{background:linear-gradient(150deg,var(--lime-soft),var(--surface) 55%,var(--turmeric-soft))}
.dish.glass::after{content:"";position:absolute;right:-24px;top:-34px;width:120px;height:120px;border-radius:50%;background:var(--lime);opacity:.35}
.dish.jar{border-radius:40px 40px var(--r-lg) var(--r-lg);background:var(--turmeric-soft)}
.dish .leaf{position:absolute;right:14px;top:14px}

/* ---------- prep jars ---------- */
.jars{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px}
.jar-card{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--lift-sm);display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center}
.jar{position:relative;width:86px;height:110px;border-radius:18px 18px 22px 22px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 5px var(--line-2)}
.jar::before{content:"";position:absolute;left:10px;right:10px;top:-2px;height:14px;border-radius:0 0 6px 6px;background:var(--night);z-index:1}
.jar .fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--lvl)*1%);background:var(--jc,var(--turmeric));transition:height .6s cubic-bezier(.2,.8,.2,1)}
.jar .fill::before{content:"";position:absolute;left:-10%;right:-10%;top:-6px;height:12px;border-radius:50%;background:var(--jc,var(--turmeric));filter:brightness(1.12)}
.jar.lime{--jc:var(--lime)}
.jar-card h3{font-size:var(--fs-md)}
.jar-card .big{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1;margin:6px 0}
.timer{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:4px 9px;border-radius:9px;background:var(--surface-2);color:var(--text-2)}
.timer.soon{background:var(--melon-soft);color:var(--melon-ink)}
.waste-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.bigdonut{width:200px;height:200px;border-radius:50%;margin:8px auto;display:grid;place-items:center;position:relative}
.bigdonut::before{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--surface)}
.bigdonut div{position:relative;text-align:center}
.bigdonut b{display:block;font-family:var(--font-display);font-size:var(--fs-xl)}
.keys{display:grid;gap:6px;font-size:var(--fs-sm);margin-top:8px}
.keys span{display:flex;align-items:center;gap:8px}
.keys i{width:12px;height:12px;border-radius:4px;display:block}
.bars{display:grid;gap:10px}
.bars div{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px;align-items:center;font-size:var(--fs-sm)}
.bars em{grid-column:1/-1;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden;font-style:normal}
.bars em i{display:block;height:100%;border-radius:5px;background:var(--melon)}

/* ---------- supplier business cards ---------- */
.bizcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
.biz{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:20px;box-shadow:var(--lift-sm);overflow:hidden;display:grid;gap:14px;align-content:start}
.biz::before{content:"";position:absolute;left:0;top:0;right:0;height:64px;background:var(--night-soft)}
.biz-h{position:relative;display:flex;gap:12px;align-items:center}
.biz-h .mono{width:52px;height:52px;border-radius:16px;font-size:var(--fs-lg);box-shadow:0 0 0 4px var(--surface)}
.biz-h h3{font-size:var(--fs-md)}
.biz-h small{color:var(--text-3);font-size:var(--fs-xs)}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ring{--p:0;width:58px;height:58px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--rc,var(--lime-ink)) calc(var(--p)*1%),var(--surface-2) 0)}
.ring.bad{--rc:var(--melon)}.ring.none{--rc:var(--line-2)}
.ring::before{content:"";grid-area:1/1;width:44px;height:44px;border-radius:50%;background:var(--surface)}
.ring b{grid-area:1/1;position:relative;font-size:var(--fs-xs)}
.rings small{font-size:var(--fs-xs);color:var(--text-3)}
.biz details summary{cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.pricelist{display:grid;gap:4px;margin-top:8px;font-size:var(--fs-sm)}
.pricelist div{display:flex;justify-content:space-between;gap:8px}

/* ---------- Z-report receipts ---------- */
.zreports{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:22px 18px;align-items:start}
.zr{position:relative;background:var(--surface);padding:18px 18px 24px;border-radius:14px 14px 0 0;box-shadow:var(--lift-sm);display:grid;gap:8px}
.zr::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:linear-gradient(-45deg,transparent 7px,var(--surface) 0) 0 0/14px 10px repeat-x,linear-gradient(45deg,transparent 7px,var(--surface) 0) 0 0/14px 10px repeat-x}
.zr .amt{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.02em}
.zr dl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:0;font-size:var(--fs-sm);border-top:1px dashed var(--line-2);padding-top:8px}
.zr dt{color:var(--text-3)}
.zr dd{margin:0;font-weight:var(--fw-bold);text-align:right}
.zr.void{opacity:.55}
.zr.void .amt{text-decoration:line-through}
.zr .stamp{position:absolute;right:14px;top:16px}
.leader{display:grid;gap:12px}
.leader > div{display:grid;grid-template-columns:34px 1fr auto;gap:4px 10px;align-items:center}
.rank{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);background:var(--surface-2)}
.leader > div:nth-child(1) .rank{background:var(--turmeric)}
.leader > div:nth-child(2) .rank{background:var(--lime)}
.leader > div:nth-child(3) .rank{background:var(--melon-soft)}
.leader em{grid-column:2/-1;height:6px;border-radius:3px;background:var(--surface-2);font-style:normal;overflow:hidden}
.leader em i{display:block;height:100%;background:var(--night);border-radius:3px}

/* ---------- GRN receipt stubs ---------- */
.stubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding:14px 18px 20px}
.stub{position:relative;background:var(--surface-2);border-radius:14px;padding:14px 16px;display:grid;gap:4px;border-left:6px dotted var(--surface)}
.stub h4{font-size:var(--fs-md)}
.stub small{color:var(--text-3);font-size:var(--fs-xs)}
.stub .stamp{position:absolute;right:12px;top:12px}
.stub .pct{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-top:6px}
.stub .pct.bad{color:var(--melon-ink)}

/* ---------- setup ---------- */
.dropzone{display:grid;place-items:center;text-align:center;gap:8px;padding:30px;border:2.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);cursor:pointer;transition:border-color .2s,background .2s}
.dropzone.over,.dropzone:hover{border-color:var(--night);background:var(--lime-soft)}
.dropzone b{font-family:var(--font-display);font-size:var(--fs-lg)}

/* ---------- drawer, modal, toast ---------- */
.drawer{background:var(--canvas);border-radius:var(--r-xl) 0 0 var(--r-xl)}
.d-hero{height:300px;margin:12px;border-radius:var(--r-lg);overflow:hidden}
.d-stats div{border:0;border-radius:18px;box-shadow:var(--lift-sm);background:var(--surface)}
.d-stats div:nth-child(1){background:var(--lime-soft)}
.d-stats div:nth-child(4){background:var(--night);color:var(--on-night)}
.d-stats div:nth-child(4) small,.d-stats div:nth-child(4) b span{color:var(--on-night-2)}
.modal-box{border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 80px -30px rgba(27,31,75,.6)}
.modal-h{background:var(--lime-soft)}
.toast{border-radius:16px;background:var(--night);color:var(--on-night)}

/* ---------- sign-in ---------- */
.signin-brand{margin:-6px -20px 6px;padding:22px 20px;background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.signin-brand::after{content:"";position:absolute;right:-40px;top:-20px;width:280px;height:140px;background:var(--lime);-webkit-mask:var(--kantha) no-repeat center/contain;mask:var(--kantha) no-repeat center/contain;opacity:.8}
.signin-brand b{font-family:var(--font-display);font-size:var(--fs-xl);display:block;position:relative}
.signin-brand span{color:var(--on-night-2);font-size:var(--fs-sm);position:relative}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.hero{grid-row:auto}
  .tile.hero .val{font-size:var(--fs-2xl)}
  .waste-grid{grid-template-columns:1fr!important}
  .side{margin:0;border-radius:0;height:auto;top:0}
  .page-head{padding:22px 20px;min-height:0}
  .page-head h1{font-size:var(--fs-xl)}
  .page-head::after{width:240px;opacity:.25}
  .baskets,.bizcards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  button.tile,.jar .fill{transition:none}
}

/* keep wide rails from stretching grid tracks */
.grid-ov,.stack,.grid-ov > *,.stack > *,.panel,.panel-b{min-width:0}
.rail{max-width:100%}

input[type=checkbox]{accent-color:var(--night);width:18px;height:18px}

#v-setup .t td.r{white-space:nowrap}

/* phone and small tablet: sidebar becomes a top bar */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:20;margin:0;border-radius:0 0 var(--r-lg) var(--r-lg);height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:10px;overflow-x:auto}
  .menu{display:flex;gap:4px}
  .menu button{white-space:nowrap;padding:6px 10px 6px 6px}
  .topbar{position:static;padding:12px 16px}
  .tile.hero{grid-column:1/-1}
  .page-head p{font-size:var(--fs-sm)}
}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin:16px 2px 4px}
.pager .pg-info{margin-right:auto;font-size:var(--fs-sm);color:var(--text-3)}
.pager button{min-width:36px;height:36px;padding:0 10px;border:0;border-radius:12px;background:var(--surface);box-shadow:0 1px 0 rgba(27,31,75,.08);font-weight:var(--fw-bold);color:var(--text)}
.pager button:hover:not(:disabled){background:var(--night-soft)}
.pager button[aria-current="page"]{background:var(--night);color:var(--on-night)}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.pager .pg-gap{color:var(--text-3);padding:0 2px}

/* ---------- raw materials: stock cards ---------- */
.stock-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:16px}
.sc{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift-sm);padding:16px 16px 0;display:grid;gap:12px;cursor:pointer;overflow:hidden;transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1);outline:none}
.sc:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.sc:focus-visible{box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--night)}
.sc-h{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:start}
.sc-img{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--surface-2);display:block}
.sc-t h3{font-size:var(--fs-md);line-height:1.2;text-wrap:balance}
.sc-t small{display:block;color:var(--text-3);font-size:var(--fs-xs);margin-top:3px}
.sc-h .sticker{transform:rotate(3deg)}
.sc-m{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc-m b{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1}
.sc-m span{font-size:var(--fs-sm);color:var(--text-2);margin-left:4px;font-weight:var(--fw-medium)}
.sc-m small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:4px}
.sc-ring{width:62px;height:62px;margin:0;flex:none}
.sc-ring::before{width:48px;height:48px}
.sc-ring b{font-family:var(--font-display);font-size:var(--fs-sm)}
.ring.warn{--rc:var(--turmeric)}.ring.info{--rc:var(--night-3)}
.sc-k{display:flex;gap:14px;font-size:var(--fs-xs);color:var(--text-3)}
.sc-k b{color:var(--text);font-weight:var(--fw-bold)}
.sc-f{margin:0 -16px;padding:11px 16px;font-size:var(--fs-sm);font-weight:var(--fw-medium);background:var(--surface-2);color:var(--text-2)}
.sc-f.warn{background:var(--turmeric-soft);color:var(--turmeric-ink)}
.sc-f.info{background:var(--night-soft);color:var(--night)}
.stock-cards.deal .sc{animation:deal .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 30ms)}

/* ---------- needs action: paged grid ---------- */
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
@media (prefers-reduced-motion:reduce){.sc{transition:none}.stock-cards.deal .sc{animation:none}}

/* ==========================================================================
   Royal layer: peacock and gold over ivory, serif display type.
   ========================================================================== */
::selection{background:var(--gold-light);color:var(--espresso)}
h1,h2,h3,h4,.tile .val,.sc-m b,.price,.amt,.total,.big,.pct,.donut span,.bigdonut b,.rank,.mono,.qty-pill,.stamp{font-variant-numeric:lining-nums tabular-nums}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
/* shell */
.side{background:linear-gradient(180deg,var(--espresso) 0%,#0E2131 100%);box-shadow:var(--hairline),var(--lift)}
.logo-mark{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--espresso);transform:none;box-shadow:0 0 0 2px rgba(255,255,255,.08);font-family:var(--font-display);font-size:17px}
.logo b{font-family:var(--font-display);font-size:19px;letter-spacing:.01em}
.menu button svg{color:var(--gold-light);background:rgba(201,162,74,.10)}
.menu button[aria-current="page"]{background:var(--surface)}
.menu button[aria-current="page"] svg{background:var(--gold);color:var(--espresso)}
.menu .badge{background:var(--rust);color:var(--espresso)}
.side-foot{background:rgba(255,255,255,.06);box-shadow:var(--hairline)}
.avatar{background:var(--gold);color:var(--espresso)}
.btn-primary{background:var(--espresso);color:var(--on-dark)}
.btn-primary:hover{background:var(--espresso-2)}
/* hero: deep peacock with gold kantha line-work */
.page-head{background:radial-gradient(120% 140% at 85% 10%,var(--espresso-3) 0%,var(--espresso) 55%,#0E2131 100%);box-shadow:var(--hairline),var(--lift)}
.page-head h1{color:var(--on-dark);font-size:var(--fs-2xl)}
.page-head p{color:var(--on-dark-2)}
.page-head::after{background:var(--gold);opacity:.55}
.page-head::before{background:radial-gradient(circle,var(--gold) 0,transparent 70%);opacity:.25}
.page-head .btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--espresso)}
.page-head .btn-line{background:transparent;color:var(--on-dark);border-color:rgba(230,207,143,.5)}
.page-head .seg{background:rgba(255,255,255,.1)}
.page-head .seg button{color:var(--on-dark-2)}
.page-head .seg button[aria-pressed="true"]{background:var(--gold);color:var(--espresso)}
/* tiles */
.tile.hero{background:linear-gradient(150deg,var(--espresso-2),var(--espresso) 60%);box-shadow:var(--hairline),var(--lift)}
.tile.hero::after{background:radial-gradient(circle,var(--gold) 0,transparent 65%);opacity:.3}
.spark .area{fill:var(--gold)}.spark .line{stroke:var(--gold-light)}
.tile.good{background:var(--jade-soft)}.tile.warn{background:var(--gold-soft)}.tile.bad{background:var(--rust-soft)}.tile.info{background:var(--espresso-soft)}
/* accents */
.basket-h{background:var(--gold-soft)}
.basket-f{background:linear-gradient(135deg,var(--espresso-2),var(--espresso))}
.basket-f .btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--espresso)}
.mono{background:var(--espresso);color:var(--gold-light);font-size:var(--fs-lg)}
.biz-h .mono{box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--gold)}
.dish.glass{background:linear-gradient(150deg,var(--jade-soft),var(--surface) 55%,var(--gold-soft))}
.dish.glass::after{background:var(--gold);opacity:.18}
.dish.jar{background:var(--gold-soft)}
.leader > div:nth-child(1) .rank{background:linear-gradient(135deg,var(--gold-light),var(--gold))}
.leader > div:nth-child(2) .rank{background:#E4E6EA}
.leader > div:nth-child(3) .rank{background:var(--rust-soft)}
.modal-h{background:var(--gold-soft)}
.toast{background:var(--espresso);box-shadow:var(--hairline)}
.signin-brand{background:radial-gradient(120% 140% at 85% 10%,var(--espresso-3),var(--espresso) 60%)}
.signin-brand::after{background:var(--gold)}
.pass{background:linear-gradient(160deg,var(--espresso-2),var(--espresso) 55%,#0E2131);box-shadow:var(--hairline),var(--lift)}
.pass .btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--espresso)}
.docket::before{display:block}
.chip[aria-pressed="true"]{background:var(--espresso)}
.pager button[aria-current="page"]{background:var(--espresso);color:var(--gold-light)}
.d-stats div:nth-child(4){background:var(--espresso)}

body{font-variant-numeric:lining-nums}
.panel-h h2,.menu-h h2 + span{font-size:var(--fs-lg)}
.basket-h h3,.biz-h h3,.dish h3,.jar-card h3,.sc-t h3,.docket-h h3,.stub h4{font-size:var(--fs-lg)}

/* ==========================================================================
   Brand layer: the logo's copper on espresso.
   Gold stays for highlights and "needs attention"; copper is the brand.
   ========================================================================== */
.side{background:linear-gradient(180deg,var(--espresso) 0%,var(--espresso-deep) 100%)}
.logo{gap:12px}
.logo-img{width:44px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.logo b{font-family:var(--font-display);font-size:19px;color:var(--on-dark)}
.logo small{color:var(--copper-light);letter-spacing:.08em;font-size:11px}
.menu button svg{color:var(--copper-light);background:color-mix(in srgb,var(--copper-light) 12%,transparent)}
.menu button[aria-current="page"] svg{background:var(--copper);color:var(--on-dark)}
.menu .badge{background:var(--copper);color:var(--on-dark)}
.btn-primary{background:var(--copper);color:var(--on-dark)}
.btn-primary:hover{background:var(--copper-ink)}
.page-head{background:radial-gradient(120% 140% at 85% 10%,var(--espresso-3) 0%,var(--espresso) 55%,var(--espresso-deep) 100%)}
.page-head::after{background:var(--copper-light);opacity:.5}
.page-head::before{background:radial-gradient(circle,var(--copper) 0,transparent 70%);opacity:.35}
.page-head .btn-primary,.pass .btn-primary,.basket-f .btn-primary{background:linear-gradient(135deg,var(--copper-light),var(--copper));color:var(--on-dark)}
.page-head .btn-line{border-color:color-mix(in srgb,var(--copper-light) 55%,transparent)}
.page-head .seg button[aria-pressed="true"]{background:var(--copper);color:var(--on-dark)}
.tile.hero{background:linear-gradient(150deg,var(--espresso-2),var(--espresso) 60%)}
.tile.hero::after{background:radial-gradient(circle,var(--copper) 0,transparent 65%);opacity:.35}
.spark .area{fill:var(--copper-light)}.spark .line{stroke:var(--copper-light)}
.mono{background:var(--espresso);color:var(--copper-light)}
.biz-h .mono{box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--copper-light)}
.chip[aria-pressed="true"]{background:var(--espresso)}
.pager button[aria-current="page"]{background:var(--copper);color:var(--on-dark)}
.signin-brand{background:radial-gradient(120% 140% at 85% 10%,var(--espresso-3),var(--espresso) 60%);text-align:center}
.signin-brand::after{background:var(--copper-light);opacity:.45}
.signin-brand img{width:120px;position:relative;display:block;margin:0 auto 8px}
.modal-h{background:var(--copper-soft)}
::selection{background:var(--copper-soft);color:var(--espresso)}
:focus-visible{outline-color:var(--copper)}

/* ==========================================================================
   Account and administration screens
   ========================================================================== */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;align-items:start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
hr.soft{border:0;border-top:1px dashed var(--line-2);margin:4px 0}
.site{gap:10px}
.bell{position:relative;width:42px;height:42px;border-radius:14px;background:var(--surface);box-shadow:var(--lift-sm);display:grid;place-items:center;color:var(--espresso);border:0}
.bell .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--copper);color:var(--on-dark);font-size:11px;font-weight:700;display:grid;place-items:center}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;border:0;background:var(--surface);box-shadow:var(--lift-sm);border-radius:14px;padding:4px 12px 4px 4px;font-weight:600;color:var(--text)}
.acct-btn .avatar{width:34px;height:34px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--lift);padding:6px;z-index:30;display:grid}
.acct-menu[hidden]{display:none}
.acct-head{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acct-head b{display:block}.acct-head small{color:var(--text-3)}
.acct-menu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;font-weight:600;color:var(--text)}
.acct-menu button:hover{background:var(--copper-soft)}
@media (max-width:860px){.acct-name{display:none}.site{display:flex!important}}
.sticker.copper{background:var(--copper);color:var(--on-dark)}
.feed-row.unread{box-shadow:inset 4px 0 0 var(--copper),0 1px 0 color-mix(in srgb,var(--espresso) 5%,transparent)}
.qr{display:grid;place-items:center;background:#fff;border-radius:var(--r-md);padding:10px;width:max-content;margin:0 auto}
.qr svg{width:200px;height:200px}
.key{display:block;text-align:center;font-size:var(--fs-md);letter-spacing:.08em;background:var(--surface-2);padding:8px;border-radius:10px;word-break:break-all}
/* team */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.person{display:grid;grid-template-columns:48px 1fr;gap:12px;text-align:left;border:0;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--lift-sm);cursor:pointer;color:var(--text)}
.person:hover{box-shadow:var(--lift)}
.person .avatar{width:48px;height:48px;font-size:var(--fs-md);background:var(--espresso);color:var(--copper-light)}
.person-t b{display:block;font-size:var(--fs-md)}.person-t small{display:block;color:var(--text-3);font-size:var(--fs-xs)}
.person-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.person-s{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--line-2);padding-top:10px}
.person-s small{color:var(--text-3);font-size:var(--fs-xs)}
.checks{border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:flex;flex-direction:row;align-items:center;gap:6px;font-weight:600}
/* roles grid */
.role-chips{display:flex;flex-wrap:wrap;gap:8px}
.t.grid td.c,.t.grid th.c{text-align:center;width:72px}
.t.grid tr.grp td{background:var(--surface-2);font-weight:700;color:var(--text-2);font-size:var(--fs-xs)}
.t.grid input[type=checkbox]{accent-color:var(--copper)}
.t.grid select{border:1px solid var(--line-2);border-radius:8px;padding:4px 6px;background:var(--surface);font:inherit;font-size:var(--fs-sm)}
.risk{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:6px}
.risk.sensitive{background:var(--gold-soft);color:var(--gold-ink)}.risk.critical{background:var(--rust-soft);color:var(--rust-ink)}
select.ov{min-width:86px}select.ov.grant{background:var(--jade-soft);border-color:var(--jade)}select.ov.deny{background:var(--rust-soft);border-color:var(--rust)}
.modal-box.wide{max-width:min(980px,96vw);width:96vw}
/* preferences */
.pref-list{display:grid}
.pref-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.pref-row:last-child{border-bottom:0}
.switch{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked{background:var(--copper)}.switch input:checked::after{transform:translateX(16px)}
.switch input:disabled{opacity:.5;cursor:not-allowed}
/* audit */
.audit-row{background:var(--surface);border-radius:18px;box-shadow:0 1px 0 color-mix(in srgb,var(--espresso) 5%,transparent)}
.audit-row summary{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px 10px 10px;cursor:pointer;list-style:none}
.audit-row summary::-webkit-details-marker{display:none}
.audit-row small{display:block;color:var(--text-3);font-size:var(--fs-xs)}
.audit-d{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:0;padding:0 16px 14px 66px;font-size:var(--fs-sm)}
.audit-d dt{color:var(--text-3)}.audit-d dd{margin:0;word-break:break-word}
/* organisation */
.org-sum{display:flex;align-items:center;gap:18px}
.org-sum img{width:84px;height:84px;object-fit:contain;background:var(--surface-2);border-radius:var(--r-md);padding:6px}
.logo-edit{display:grid;gap:12px;justify-items:start}
.logo-edit img{width:160px;max-height:140px;object-fit:contain;background:var(--surface-2);border-radius:var(--r-md);padding:10px}
/* install */
.install-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:radial-gradient(120% 140% at 85% 10%,var(--espresso-3),var(--espresso) 60%);color:var(--on-dark);border-radius:var(--r-xl);padding:24px;box-shadow:var(--hairline),var(--lift)}
.install-hero img{width:84px;height:84px;border-radius:22px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.install-hero div{flex:1;min-width:220px}.install-hero h2{color:var(--on-dark);font-size:var(--fs-xl)}.install-hero p{color:var(--on-dark-2);margin:6px 0 0}
.install-hero .btn-primary{background:linear-gradient(135deg,var(--copper-light),var(--copper))}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.ticks.good li::before{content:"✓";background:var(--jade-soft);color:var(--jade-ink)}
.ticks.bad li::before{content:"✕";background:var(--rust-soft);color:var(--rust-ink)}
@media (max-width:600px){.two{grid-template-columns:1fr}.pref-row{grid-template-columns:1fr}.audit-d{padding-left:16px}}

#mform:has(.signin-brand){grid-template-columns:1fr}
#mform:has(.signin-brand) > *{grid-column:1/-1}
.signin-brand{border-radius:0}

.bell .dot[hidden]{display:none}

#mform:has(.qr){grid-template-columns:1fr}
#mform:has(.qr) > *{grid-column:1/-1;justify-self:stretch}
#mform .qr{justify-self:center}

/* stock levels & costing (levels.js) */
.lv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lv-grid.three{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:12px}
.lv{background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;display:grid;gap:2px}
.lv small{color:var(--text-3);font-size:var(--fs-xs);font-weight:600}
.lv b{font-size:var(--fs-lg);color:var(--text)}.lv b span{font-size:var(--fs-sm);color:var(--text-3);font-weight:600}
.lv em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3)}
.lv p{margin:4px 0 0;font-size:var(--fs-xs);color:var(--text-2)}
.lv.manual{box-shadow:inset 0 0 0 1.5px var(--copper)}.lv.manual em{color:var(--copper);font-weight:700}
.lv.chosen{background:var(--espresso);color:var(--on-dark)}.lv.chosen b,.lv.chosen small,.lv.chosen em{color:var(--on-dark)}
.lv-how{margin-top:12px;font-size:var(--fs-sm)}
.lv-how summary{cursor:pointer;font-weight:700;color:var(--copper)}
.lv-how dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;margin:10px 0 0}
.lv-how dt{color:var(--text-3)}.lv-how dd{margin:0}
.method-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.method{display:grid!important;gap:2px;border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:12px;cursor:pointer;position:relative}
.method input{position:absolute;opacity:0;pointer-events:none}
.method b{font-size:var(--fs-md)}.method small{color:var(--text-3)}.method p{margin:4px 0 0;font-size:var(--fs-xs);color:var(--text-2);font-weight:400}
.method.on{border-color:var(--copper);background:var(--copper-soft)}
.method:focus-within{outline:2px solid var(--copper);outline-offset:2px}
@media (max-width:600px){.method-pick,.lv-grid.three{grid-template-columns:1fr}.lv-how dl{grid-template-columns:1fr}}
#costF{grid-template-columns:1fr!important}#costF > *{grid-column:1/-1}

/* Sidebar: menu search, collapsible groups, My profile pinned to the foot */
.side{overflow:hidden}
.menu{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--espresso-3) transparent;align-content:start;margin:0 -4px;padding:0 4px}
.menu .side-sec{display:block;margin:2px 0 6px}
.menu-q{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--on-dark-2);box-shadow:var(--hairline)}
.menu-q input{all:unset;flex:1;min-width:0;font-size:var(--fs-sm);color:var(--on-dark)}
.menu-q input::placeholder{color:var(--on-dark-2);opacity:.8}
.menu-q:focus-within{outline:2px solid var(--copper-light);outline-offset:1px}
.nav-group{display:grid;gap:3px;margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--copper-light) 18%,transparent)}
.menu .nav-g-h{justify-content:flex-start;padding:9px 10px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--on-dark)}
.nav-g-h .chev{margin-left:auto;transition:transform .18s ease;opacity:.8}
.nav-g-n:empty{display:none}.nav-g-n .badge{margin-left:6px}
.nav-group.open .chev{transform:rotate(90deg)}
.nav-group.open .nav-g-n{display:none}
.nav-g-b{display:none;gap:3px}
.nav-group.open .nav-g-b,.menu.searching .nav-g-b{display:grid}
.menu.searching .nav-g-h{pointer-events:none}
.menu-none{margin:6px 10px;font-size:var(--fs-xs);color:var(--on-dark-2)}
.side-foot{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.06);box-shadow:var(--hairline);margin-top:0;flex:none}
.side-foot:hover{background:var(--espresso-2)}
.side-foot:focus-visible{outline:2px solid var(--copper-light);outline-offset:2px}
.side-foot[aria-current]{background:var(--surface)}
.side-foot[aria-current] b{color:var(--espresso)}.side-foot[aria-current] small{color:var(--text-3)}
.side-foot div{min-width:0}.side-foot small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.nav-g-h .chev{transition:none}}

/* Phones and small tablets: a slim bar with a menu button; the full sidebar slides in as a drawer */
.nav-toggle,.nav-scrim{display:none}
@media (max-width:860px){
  .side{position:fixed;top:0;left:0;right:0;z-index:40;height:60px;margin:0;border-radius:0;flex-direction:row;align-items:center;
    padding:8px 12px;gap:12px;overflow:hidden;box-shadow:var(--lift-sm)}
  .main{padding-top:60px}
  .side .logo{flex:1;min-width:0}.side .logo div{display:block;min-width:0}.side .logo-img{width:36px}
  .side .logo b{font-size:var(--fs-md);white-space:nowrap}.side .logo small{display:none}
  .menu-q,.menu,.side-foot{display:none!important}
  .side .nav-toggle{margin-left:auto}
  .topbar .search{order:9;flex:1 1 100%;max-width:none}
  .nav-toggle{all:unset;box-sizing:border-box;display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;cursor:pointer;
    color:var(--on-dark);background:rgba(255,255,255,.08);box-shadow:var(--hairline)}
  .nav-toggle:focus-visible{outline:2px solid var(--copper-light);outline-offset:2px}
  .nav-toggle .x,.side.open .nav-toggle .bars{display:none}.side.open .nav-toggle .x{display:block}
  .side.open{bottom:0;right:auto;height:auto;width:min(320px,88vw);flex-direction:column;align-items:stretch;padding:14px 12px 12px;gap:14px;
    border-radius:0 var(--r-xl) var(--r-xl) 0;box-shadow:var(--lift)}
  .side.open .logo{flex:none}.side.open .logo small{display:block}
  .side.open .menu-q,.side.open .side-foot{display:flex!important}
  .side.open .menu{display:grid!important;flex:1;min-height:0;overflow-y:auto}
  .side.open .menu button{white-space:normal;padding:7px 10px 7px 7px}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:39;background:color-mix(in srgb,var(--espresso-deep) 55%,transparent)}
  .nav-scrim[hidden]{display:none}
  body.nav-open{overflow:hidden}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .side.open{animation:navIn .2s ease-out}
  @keyframes navIn{from{transform:translateX(-24px);opacity:.6}to{transform:none;opacity:1}}
}

/* Colour palette picker (Organisation settings) */
.pal-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pal{position:relative;display:grid;gap:8px;padding:10px;border-radius:var(--r-md);background:var(--surface-2);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.pal input{position:absolute;opacity:0;pointer-events:none}
.pal.on{box-shadow:inset 0 0 0 2px var(--copper)}
.pal:focus-within{outline:2px solid var(--copper);outline-offset:2px}
.pal-sw{display:flex;height:44px;border-radius:10px;overflow:hidden}
.pal-sw i{flex:3}.pal-sw i + i{flex:1}
.pal b{font-size:var(--fs-sm)}.pal small{color:var(--text-3);font-size:var(--fs-xs)}
.pal-custom{display:none;gap:12px}.pal-custom.on{display:grid}
.pal-custom input[type=color]{width:100%;height:40px;padding:2px;border-radius:10px;cursor:pointer}
.pal-warn{margin:0;font-size:var(--fs-xs);color:var(--bad-ink)}
#themeF{grid-template-columns:1fr!important}#themeF > *{grid-column:1/-1}
.menu .nav-g-h svg.chev{box-sizing:border-box;padding:0;background:none;width:14px;height:14px;color:currentColor}
/* Settings forms sit in narrow panels: one column, never the calculator's two */
.admin-grid form.calc{grid-template-columns:1fr!important}.admin-grid form.calc > *{grid-column:1/-1}
.admin-grid .panel-h{flex-wrap:wrap;row-gap:2px}.admin-grid .panel-h h2{flex:none}

/* Cross-links: any name that opens its record */
a.xl{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--copper) 45%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;border-radius:3px}
a.xl:hover{color:var(--copper-ink);text-decoration-color:var(--copper)}
a.xl:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.page-head a.xl,.side a.xl,.tile.hero a.xl,.zr a.xl{color:inherit}
.focus-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;border-radius:var(--r-md);background:var(--copper-soft);color:var(--copper-ink);font-size:var(--fs-sm)}
.focus-bar b{color:var(--text)}
.peek-kind{display:block;color:var(--copper-ink);font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-bottom:2px}
.peek-b{padding:4px 20px 12px;display:grid;gap:16px;max-height:min(60vh,520px);overflow-y:auto}
.peek-s h3{margin:0 0 6px;font-size:var(--fs-sm);color:var(--text-3);font-family:var(--font-ui);font-weight:var(--fw-bold)}
.peek-list{display:grid}
.peek-list > div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.peek-list > div:last-child{border-bottom:0}
.peek-list > div > span:last-child{color:var(--text-2);text-align:right;display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.peek-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.peek-stats div{background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px;display:grid}
.peek-stats b{font-size:var(--fs-lg)}.peek-stats small{color:var(--text-3);font-size:var(--fs-xs)}
@media (max-width:600px){.peek-stats{grid-template-columns:repeat(2,1fr)}.peek-list > div{flex-direction:column;align-items:flex-start;gap:2px}.peek-list > div > span:last-child{justify-content:flex-start;text-align:left}}
/* Reorder baskets: the price the supplier quoted, per unit */
.price-q{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-xs);color:var(--text-3)}
.price-q input{width:78px;height:28px;padding:0 8px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);font:inherit;font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums}
.price-q input:focus-visible{outline:2px solid var(--copper);outline-offset:1px}

/* Quantity with its unit */
.qty-unit{display:flex;gap:6px;align-items:center}
.qty-unit input{flex:1;min-width:0}
.qty-unit .unit-sel{width:auto;max-width:150px;flex:none}
.unit-fixed{font-size:var(--fs-sm);color:var(--text-3);padding:0 4px}
td .qty-unit{justify-content:flex-end}td .qty-unit .unit-sel{height:30px;font-size:var(--fs-xs)}
.unit-chips{display:flex;flex-wrap:wrap;gap:6px}
.urow{display:grid;grid-template-columns:1fr 120px 32px;gap:8px;align-items:end}

/* Usable share after trimming */
.yield-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.yield-row div{display:grid}.yield-row small{color:var(--text-3);font-size:var(--fs-xs)}.yield-row b{font-size:var(--fs-lg)}.yield-row span{font-size:var(--fs-xs)}
.yield-test{border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:8px}

/* Stock cards: one height for every card, every part of the card on the same line as its neighbours.
   Names get three lines and the code/area line two; longer text is trimmed and shown in full on hover. */
.stock-cards{grid-auto-rows:1fr;align-items:stretch}
.sc{height:100%;grid-template-rows:auto auto auto auto 1fr;align-content:stretch}
.sc-h .sticker{white-space:nowrap}
.sc-t h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.2;height:3.6em;text-wrap:balance}
.sc-t small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.45;height:2.9em;margin-top:4px}
.sc-m > div:first-child{min-width:0}
.sc-m small,.sc-k,.sc-f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-f{align-self:end}

/* ---------- Card alignment, every card family ----------
   Cards in one grid share a height; titles get a fixed number of lines (trimmed beyond, full text on hover);
   footers sit on the bottom edge; everything is left-aligned. */
.sc,.dish,.jar-card,.biz,.stub,.zr,.docket,.basket,.chipcard,.person,.tile,.lv{text-align:left}
.sc{grid-template-rows:auto auto auto auto auto 1fr}
.sc-t h3{line-height:1.25;height:3.75em;padding-bottom:1px}
.sc-t small{display:none}
.sc-code{display:block;font-size:var(--fs-xs);color:var(--text-3);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px}
.clamp1,.basket-h h3,.stub h4,.docket-h h3,.zr > b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dish h3,.jar-card h3,.biz-h h3,.chipcard b,.person-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.25;min-height:2.5em}
.basket-h > div,.biz-h > div,.docket-h > div,.person-t,.sc-t{min-width:0}
/* equal heights inside each grid */
.act-grid,.baskets,.bizcards,.menu-grid,.jars,.stubs,.dockets,.zreports,.people{grid-auto-rows:1fr;align-items:stretch}
.chipcard,.basket,.biz,.dish,.jar-card,.stub,.docket,.zr,.person{height:100%}
.biz{grid-template-rows:auto auto 1fr auto}
.dish{align-content:start;grid-template-rows:auto 1fr auto}
.docket{display:flex;flex-direction:column}.docket ol{flex:1}
.zr{align-content:start}
.person{align-content:start}.person-s{align-self:end}
.basket ul{flex:1}
.person{grid-template-rows:1fr auto}.person > .avatar,.person-t{align-self:start}

/* Stock-takes */
.takes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.take{position:relative;display:grid;gap:6px;align-content:start;text-align:left;border:0;cursor:pointer;background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--lift-sm);color:var(--text);height:100%}
.take:hover,.take:focus-visible{box-shadow:var(--lift)}
.take .sticker{justify-self:start}
.take h3{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.take small{color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.take-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}.take-bar i{display:block;height:100%;background:var(--copper)}
.take-v{font-size:var(--fs-lg);min-height:1.3em;align-self:end}
.st-sum .panel-b{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:end}
.st-sum small{display:block;color:var(--text-3);font-size:var(--fs-xs)}.st-sum b{font-size:var(--fs-lg)}
.st-find{margin-left:auto;min-width:220px}
.st-cat{margin-top:16px}
.st-t td{vertical-align:middle}.st-t .qty-unit{justify-content:flex-end}
.st-in{width:96px;height:34px;text-align:right}
.st-ok{font-size:var(--fs-xs);color:var(--text-3);width:70px}
.st-big td{background:color-mix(in srgb,var(--rust-soft) 55%,transparent)}
td.neg,b.neg{color:var(--bad-ink)}td.pos{color:var(--good-ink)}

/* Kitchen requests */
.reqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.req{display:grid;gap:6px;align-content:start;grid-template-rows:auto auto auto 1fr auto auto;text-align:left;border:0;cursor:pointer;background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--lift-sm);color:var(--text);height:100%}
.req:hover,.req:focus-visible{box-shadow:var(--lift)}
.req-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.req-top small{color:var(--text-3);font-size:var(--fs-xs)}
.req h3{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req small{color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req small.late{color:var(--bad-ink);font-weight:var(--fw-bold)}
.req ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;align-content:start}
.req li{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm)}.req li span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-more{align-self:end}
.reqrow{display:grid;grid-template-columns:1fr 90px 130px 32px;gap:8px;align-items:end}
.ri-q{width:84px;height:32px;text-align:right}.ri-done{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:var(--fs-xs);color:var(--text-3);margin-top:4px}
@media (max-width:600px){.reqrow{grid-template-columns:1fr 1fr}.reqrow .rdel{justify-self:end}}

/* Month-end close */
.mcloses{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;grid-auto-rows:1fr}
.mclose{display:grid;gap:6px;align-content:start;grid-template-rows:auto auto 1fr auto;text-align:left;border:0;cursor:pointer;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--lift-sm);color:var(--text);height:100%}
.mclose:hover,.mclose:focus-visible{box-shadow:var(--lift)}
.mclose[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--copper),var(--lift-sm)}
.mclose .sticker{justify-self:start}.mclose h3{font-size:var(--fs-lg)}
.mclose dl{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:0;font-size:var(--fs-sm)}.mclose dt{color:var(--text-3)}.mclose dd{margin:0;font-weight:var(--fw-bold);text-align:right}
.mclose small{color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr.total td{border-top:2px solid var(--line-2)}

/* Approvals */
.appr{display:grid;gap:6px;align-content:start;grid-template-rows:auto auto auto 1fr auto;background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--lift-sm);height:100%;text-align:left}
.appr-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.appr-top small{color:var(--text-3);font-size:var(--fs-xs)}
.appr h3{font-size:var(--fs-md);font-family:var(--font-ui);font-weight:var(--fw-bold);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.5em;line-height:1.25}
.appr .val{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.appr small{color:var(--text-3);font-size:var(--fs-xs)}
.appr-act{display:flex;gap:8px;align-self:end;margin-top:6px}
/* Two-up form rows wrap instead of spilling out of narrow panels */
.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.two > *,.calc > *{min-width:0}
.two input,.two select,.two textarea{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:980px){.admin-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Design pass: phones and tablets ---------- */
.formula-wrap{margin-bottom:16px}
.formula-wrap > summary{cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-bottom:10px;width:max-content}
@media (max-width:600px){
  /* one column: each card takes its own height, no empty space */
  .stock-cards,.act-grid,.baskets,.bizcards,.menu-grid,.jars,.stubs,.dockets,.zreports,.people,.takes,.reqs,.mcloses{grid-auto-rows:auto}
  .topbar{gap:8px}.topbar .site{margin-left:0!important;margin-right:auto}
  .topbar .btn{padding-left:12px;padding-right:12px}
  .wide-only{display:none}
  /* table action buttons wrap instead of being cut off */
  .t td.r:last-child:not(:has(.btn-row-ico)){white-space:normal}.t td.r:last-child .btn{margin:2px 0 2px 4px}
}
@media (max-width:600px){#v-setup .t td.r:last-child:not(:has(.btn-row-ico)){white-space:normal;min-width:96px}#v-setup .t td.r:last-child .btn{margin:2px 0}}

/* ---------- Modals: one system for every dialog ----------
   Header and buttons stay put while the body scrolls; forms are one column so each block uses the full width.
   Wide content opens as a right-hand side panel on wide screens; on phones every modal fills the screen. */
.modal{background:color-mix(in srgb,var(--espresso-deep) 55%,transparent);padding:20px}
.modal-box{width:min(620px,100%);max-height:min(90vh,920px);overflow:auto;overscroll-behavior:contain;display:block}
.modal-box.size-lg{width:min(960px,100%)}
.modal-h{position:sticky;top:0;z-index:2;gap:12px}
.modal-h > div{min-width:0}.modal-h h2{overflow-wrap:anywhere}
.modal-f{position:sticky;bottom:0;z-index:2;flex-wrap:wrap}
#mform{grid-template-columns:minmax(0,1fr)!important;padding:16px 20px 8px!important;gap:14px!important;align-content:start}
#mform > *{grid-column:1/-1!important;min-width:0}
#mform label{min-width:0}
#mform input,#mform select,#mform textarea{max-width:100%;min-width:0}
.modal-box .tablewrap{overflow-x:auto;max-width:100%}
.recv-t{padding:6px 0}.recv-t .qty-in{max-width:100%}
.modal-box > .calc{padding:12px 20px 16px}
/* side panel */
.modal.sheet{place-items:stretch end;padding:0}
.modal.sheet .modal-box{width:min(920px,94vw);height:100vh;max-height:none;border-radius:var(--r-xl) 0 0 var(--r-xl);display:flex;flex-direction:column}
.modal.sheet .modal-box > :not(.modal-h):not(.modal-f){flex:0 0 auto}
.modal.sheet .modal-f{margin-top:auto}
@media (prefers-reduced-motion:no-preference){
  .modal.on .modal-box{animation:modalIn .18s ease-out}
  .modal.sheet.on .modal-box{animation:sheetIn .22s ease-out}
  @keyframes modalIn{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
  @keyframes sheetIn{from{transform:translateX(48px);opacity:.6}to{transform:none;opacity:1}}
}
/* phones: full-screen sheet, fields one per row */
@media (max-width:600px){
  .modal,.modal.sheet{padding:0;place-items:stretch}
  .modal-box,.modal-box.size-lg,.modal.sheet .modal-box{width:100%;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column}
  .modal-box > :not(.modal-h):not(.modal-f){flex:0 0 auto}
  .modal-f{margin-top:auto}
  #mform [style*="1fr 1fr"],#mform .two,.modal-box > .calc{grid-template-columns:minmax(0,1fr)!important}
  #mform .reqrow,#mform .rline,#mform .urow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  #mform .reqrow > label:first-child,#mform .rline > label:first-child{grid-column:1/-1}
}

/* Receive goods: wide side panel; on smaller screens each line becomes a labelled card */
.modal.sheet .modal-box[data-size="wide"]{width:min(1140px,96vw)}
.recv-t .qty-in{height:34px}.recv-t .lot-in{width:110px}.recv-t input[type=date]{width:140px}
.recv-t .price-in{width:84px}.recv-t .qty-unit .qty-in{width:70px}
@media (max-width:1100px){
  .recv-t table,.recv-t tbody{display:block}.recv-t thead{display:none}
  .recv-t tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 14px;padding:14px 20px;border-bottom:1px solid var(--line)}
  .recv-t td{display:grid;gap:4px;padding:0;border:0;text-align:left!important;align-content:start}
  .recv-t td:first-child{grid-column:1/-1}
  .recv-t td[data-label]::before{content:attr(data-label);font-size:var(--fs-xs);color:var(--text-3);font-weight:var(--fw-medium)}
  .recv-t td .qty-unit{justify-content:flex-start}
  .recv-t .lot-in,.recv-t input[type=date],.recv-t .price-in{width:100%}.recv-t .qty-unit .qty-in{flex:1;width:auto}
}

/* Settings panels: placed into the shorter of two columns (see flowPanels in links.js) so neither runs half empty */
.admin-grid.flow{display:flex;gap:16px;align-items:flex-start}
.admin-grid.flow > .flow-col{flex:1 1 0;min-width:0;display:grid;gap:16px;align-content:start}
.admin-grid.flow .panel{margin:0!important}

/* ---------- Field alignment, every form ----------
   In any row of fields the labels start at the top (wrapping to two lines if needed) and the boxes sit on one
   shared line at the bottom of the row, whatever the label length. Same rule as the stock cards. */
label{align-self:stretch}
.calc label,.two > label,#mform label,.urow > label,.reqrow > label,.rline > label,.pal-custom > label{display:grid;grid-template-rows:1fr auto;align-items:start;gap:4px;min-width:0}
.calc label > :is(input,select,textarea,.qty-unit),.two > label > :is(input,select,textarea,.qty-unit){align-self:end}
/* checkbox and radio labels keep their one-line layout */
.calc label:not(.pal,.method):has(> input[type=checkbox]),.calc label:not(.pal,.method):has(> input[type=radio]),#mform label:not(.pal,.method):has(> input[type=checkbox]),#mform label:not(.pal,.method):has(> input[type=radio]),
.ri-done{display:flex;grid-template-rows:none}
/* choice cards are not field labels: title, subtitle and text each on the same line across the cards */
.calc label.pal{display:grid;grid-template-rows:auto auto 1fr;align-items:start;gap:6px}
.calc label.method{display:grid!important;grid-template-rows:auto auto 1fr;align-items:start;align-content:start;gap:2px}
.calc label:has(> input[type=checkbox]),#mform label:has(> input[type=checkbox]){align-items:center}
.two,.calc,.urow,.reqrow,.rline{align-items:stretch!important}

/* Info icons beside card titles; the note shows on hover, focus or tap */
.info-tip{all:unset;display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;vertical-align:middle;border-radius:50%;color:var(--text-3);cursor:help;flex:none}
.info-tip:hover,.info-tip:focus-visible{color:var(--copper);background:var(--copper-soft)}
.info-tip:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.page-head .info-tip,.side .info-tip{color:var(--on-dark-2)}
#tipBox{position:fixed;z-index:200;max-width:280px;padding:8px 11px;border-radius:10px;background:var(--espresso);color:var(--on-dark);font-size:var(--fs-xs);line-height:1.4;font-family:var(--font-ui);box-shadow:var(--lift);pointer-events:none;opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s}
#tipBox.on{opacity:1;transform:none}
.panel-h h2,.d-sec > h3,.menu-h h2{display:inline-flex;align-items:center}
.d-sec > h3{display:flex;align-items:center;justify-content:space-between}
.d-sec > h3 > .info-tip{margin-left:6px;margin-right:auto}

.btn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn-row > .info-tip{margin-left:2px}

/* WhatsApp ordering */
.btn-wa{background:#18794A;color:#fff;border:0;gap:6px}
.btn-wa:hover{background:#136339}
.btn-wa svg{flex:none}
.basket-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.docket-f .btn-wa{padding:0 9px}


/* Menu search results */
#mqBox,#gqBox{position:fixed;z-index:120;width:min(340px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;padding:6px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--lift),0 0 0 1px var(--line)}
#mqBox button,#gqBox button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;column-gap:8px;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer}
#mqBox button[aria-selected="true"],#mqBox button:hover,#gqBox button[aria-selected="true"],#gqBox button:hover{background:var(--copper-soft)}
#mqBox .mq-k,#gqBox .mq-k{grid-row:span 2;align-self:center;font-size:10.5px;font-weight:var(--fw-bold);color:var(--copper-ink);background:var(--surface-2);border-radius:6px;padding:2px 6px;min-width:52px;text-align:center}
#mqBox b,#gqBox b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#mqBox small,#gqBox small{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--copper),var(--lift-sm)}100%{box-shadow:var(--lift-sm)}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;box-shadow:0 0 0 3px var(--copper)}}
/* Remove-row buttons in row editors (recipe lines, units, request items) sit level with the input boxes */
.rline > .rdel,.urow > .udel,.reqrow > .rdel{align-self:end;justify-self:center;width:36px;height:36px;margin:0;display:grid;place-items:center;color:var(--text-2);background:var(--surface-2);border-radius:10px}
.rline > .rdel:hover,.urow > .udel:hover,.reqrow > .rdel:hover{color:var(--bad-ink);background:var(--rust-soft)}
.rline > .rdel:focus-visible,.urow > .udel:focus-visible,.reqrow > .rdel:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* Recipe and supplier photos */
.dish.has-photo{padding-top:0;overflow:hidden}
.dish-photo{display:block;width:calc(100% + 36px);margin:0 -18px 4px;height:140px;object-fit:cover;background:var(--surface-2)}
.dish.has-photo .leaf,.dish.has-photo .jain-tip{top:12px}
.biz-h img.mono.photo{object-fit:cover;padding:0;background:var(--surface-2)}
.photo-edit{display:flex;gap:14px;align-items:center}
.photo-prev{width:88px;height:88px;border-radius:var(--r-md);object-fit:cover;background:var(--surface-2);flex:none;display:block}
.photo-acts{display:grid;gap:4px}.photo-acts small{font-size:var(--fs-xs)}
.peek-photo{width:100%;max-height:220px;object-fit:cover;border-radius:var(--r-md);display:block}
.no-photo{background:var(--surface-2)}

.pl-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.pl-bar .field{min-width:min(220px,100%)}
/* unit pickers never shrink below what "kg" plus its arrow needs */
.qty-unit .unit-sel,#mform .qty-unit .unit-sel,#mform select[name$="Unit"],#mform select[name=ru],#mform select[name=lu],.modal-box .qty-unit .unit-sel{min-width:66px}

/* Jain-friendly dishes: green strip on the left edge and an info icon with the note */
.dish.jain{box-shadow:var(--lift-sm)}
.dish.jain:hover,.dish.jain:focus-visible{box-shadow:var(--lift)}
.dish .jain-tip{position:absolute;right:12px;top:12px;margin:0;color:var(--jade-ink);z-index:2}
.dish.jain h3{padding-right:20px}

/* Prep cards reuse the "jar" class; it must not inherit the 86x110 jar-icon sizing */
.dish.jar{width:auto;height:100%;position:relative;border-radius:var(--r-lg)}
.dish.jar::before{content:none}
.dish.jar.jain{box-shadow:inset 5px 0 0 var(--jade-ink),var(--lift-sm)}

.dish.jar.jain:hover,.dish.jar.jain:focus-visible{box-shadow:inset 5px 0 0 var(--jade-ink),var(--lift)}
.dish.jain:not(.jar){box-shadow:inset 5px 0 0 var(--jade-ink),var(--lift-sm)}
.dish.jain:not(.jar):hover,.dish.jain:not(.jar):focus-visible{box-shadow:inset 5px 0 0 var(--jade-ink),var(--lift)}

/* Supplier cards: chips and rings keep their natural size; only the space above the price list grows */
.biz{display:flex;flex-direction:column;gap:14px;grid-template-rows:none}
.biz > details{margin-top:auto}
.biz > *{flex:none}

.biz > .biz-pl{margin-top:auto;align-self:flex-start}

/* Stock cards: status shown as a coloured edge strip plus an info icon (the words appear on hover or tap) */
.sc{--edge:var(--line-2);box-shadow:inset 5px 0 0 var(--edge),var(--lift-sm)}
.sc:hover{box-shadow:inset 5px 0 0 var(--edge),var(--lift)}
.sc.sc-st-out,.sc.sc-st-crit{--edge:var(--rust)}
.sc.sc-st-reorder{--edge:var(--gold)}
.sc.sc-st-onorder{--edge:var(--espresso-3)}
.sc.sc-st-ok{--edge:var(--jade-ink)}
.sc.sc-st-over{--edge:var(--line-2)}
.sc-h .sc-tip{margin:0;width:22px;height:22px;color:var(--text-3)}
.sc.sc-st-out .sc-tip,.sc.sc-st-crit .sc-tip{color:var(--rust-ink)}
.sc.sc-st-reorder .sc-tip{color:var(--gold-ink)}
.sc.sc-st-ok .sc-tip{color:var(--jade-ink)}

/* One colour code for every card: strip on the left edge, words behind an info icon */
.edge{--edge:var(--line-2);border-left:5px solid var(--edge)!important}
.edge-ok{--edge:var(--jade-ink)}.edge-warn{--edge:var(--gold)}.edge-bad{--edge:var(--rust)}.edge-info{--edge:var(--espresso-3)}.edge-mute{--edge:var(--line-2)}
.edge-tip{margin:0;flex:none;color:var(--text-3)}
.edge.edge-ok .edge-tip{color:var(--jade-ink)}.edge.edge-warn .edge-tip{color:var(--gold-ink)}.edge.edge-bad .edge-tip{color:var(--rust-ink)}
.appr-top,.req-top{display:flex;align-items:center;gap:8px}
.stub .edge-tip,.zr .edge-tip{position:absolute;right:12px;top:12px}
.person-s{display:flex;align-items:center;gap:8px}
.mclose .edge-tip,.take .edge-tip{display:inline-grid}
.colour-guide{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:26px 0 8px;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift-sm);font-size:var(--fs-sm);color:var(--text-2)}
.colour-guide > b{color:var(--text);margin-right:4px}
.colour-guide span{display:inline-flex;align-items:center;gap:8px}
.colour-guide u{text-decoration:none;font-weight:var(--fw-bold);color:var(--text)}
.colour-guide .sw{width:5px;height:18px;border-radius:3px;background:var(--edge);flex:none}

/* Sort and filter icons, the sort menu and the filter dialog */
.fm-holder{display:none}
.toolbar:has(> .fm-holder:only-child){display:none}
.fm-btns{position:relative;display:inline-flex;gap:8px;align-items:center}
.fm-btns .icon-btn{position:relative;width:38px;height:38px;display:inline-grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text-2);cursor:pointer;padding:0;font-size:20px;line-height:1}
.fm-btns .icon-btn:hover,.fm-btns .icon-btn[aria-expanded=true]{background:var(--copper-soft);color:var(--copper-ink);border-color:var(--copper-light)}
.fm-btns .icon-btn.on{color:var(--copper-ink);border-color:var(--copper-light)}
.fm-badge{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--copper);color:#fff;font-style:normal;font-size:11px;font-weight:var(--fw-bold);display:grid;place-items:center}
.fm-badge[hidden]{display:none}
.fm-menu{position:absolute;right:0;top:44px;z-index:60;min-width:210px;padding:6px;border-radius:14px;background:var(--surface);box-shadow:var(--lift);border:1px solid var(--line);display:grid;gap:2px}
.fm-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:var(--fs-sm);color:var(--text)}
.fm-menu button:hover,.fm-menu button:focus-visible{background:var(--surface-2)}
.fm-menu button[aria-checked=true]{font-weight:var(--fw-bold)}
.fm-tick{width:16px;display:inline-grid;place-items:center;color:var(--copper)}
.fm-back{position:fixed;inset:0;z-index:150;background:rgba(30,15,10,.45);display:grid;place-items:center;padding:16px}
.fm-dialog{width:min(440px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border-radius:20px;background:var(--surface);box-shadow:var(--lift)}
.fm-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.fm-h h2{font-size:var(--fs-lg)}
.fm-dialog .fm-x{width:34px;height:34px;border:0;background:none;color:var(--text-3);font-size:24px;cursor:pointer}
.fm-body{padding:8px 20px;overflow:auto;display:grid;gap:16px}
.fm-group{display:grid;gap:6px}
.fm-group > b{font-size:var(--fs-sm);color:var(--text-2)}
.fm-group .field{display:block;padding:0;border:0;background:none;box-shadow:none;min-width:0}
.fm-group .field select{width:100%}
.fm-group .chips{display:flex;flex-wrap:wrap;gap:8px}
.fm-f{display:flex;justify-content:space-between;gap:10px;padding:14px 20px 18px}

/* Overview: both columns end level, no empty space under the shorter one */
.grid-ov{align-items:stretch}
.grid-ov > .stack{display:flex;flex-direction:column}
.grid-ov > .stack > .panel:last-child{flex:1}

/* Replenishment lines: the quantity stepper sits centred in its own column, level with the middle of the row */
.basket li{grid-template-columns:22px 40px minmax(0,1fr) 112px}
.basket li > .stepper{justify-self:center;align-self:center}

/* Sort and filter icons always sit at the right end of the toolbar */
.toolbar > .fm-btns{margin-left:auto}
.toolbar > .seg{margin-left:0}
.toolbar > .fm-btns + .seg{margin-left:4px}
.ck-hit{fill:transparent;cursor:pointer;outline:none}
.ck-hit:hover,.ck-hit:focus-visible{fill:rgba(180,66,14,.09)}
.ck-hit.sel{fill:rgba(180,66,14,.16)}
.ck-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.ck-bar .seg{margin-right:auto}
.ck-key{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-2);cursor:pointer}
.ck-key i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ck-key[aria-pressed=false]{opacity:.5;text-decoration:line-through}
.ck-key:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.ck-sum{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 6px}
.ck-detail{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surface-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:var(--fs-sm)}
.ck-detail b{font-family:var(--font-display);font-size:var(--fs-md)}
.ck-detail .btn{margin-left:auto}
#ckTip{position:fixed;z-index:210;max-width:240px;padding:8px 11px;border-radius:10px;background:var(--espresso);color:var(--on-dark);font-size:var(--fs-xs);line-height:1.45;box-shadow:var(--lift);pointer-events:none;opacity:0;transition:opacity .1s}
#ckTip.on{opacity:1}
#ckTip .muted{color:var(--on-dark-2)}
#health [data-hst]{cursor:pointer}
#health [data-hst]:hover{filter:brightness(1.1)}

/* Phones and small tablets: the top bar keeps search, Reorder and Receive; notifications and the profile live in the menu drawer */
.side-out{display:none}
@media (max-width:860px){
  .topbar .site{display:none!important}
  .side.open .side-out:not([hidden]){display:block;all:unset;box-sizing:border-box;display:block;text-align:center;padding:10px;border-radius:12px;cursor:pointer;color:var(--on-dark-2);box-shadow:var(--hairline);font-weight:var(--fw-medium)}
  .side.open .side-out[hidden]{display:none}
  .topbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px}
  /* search collapses to one button on the left of Reorder; it opens full width when tapped */
  .topbar .search{order:0;flex:none;width:42px;height:42px;max-width:none;padding:0;margin:0;background:var(--surface);box-shadow:var(--lift-sm);border-radius:14px;display:grid;place-items:center;cursor:pointer;position:relative}
  .topbar .search svg{pointer-events:none}
  .topbar .search kbd{display:none}
  .topbar .search input{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;cursor:pointer}
  .topbar .search:focus-within{position:fixed;z-index:45;left:12px;right:12px;top:68px;width:auto;height:48px;margin:0;display:flex;align-items:center;gap:10px;padding:0 14px;box-shadow:var(--lift);cursor:text;background:var(--surface)}
  .topbar .search:focus-within input{position:static;opacity:1;flex:1;height:100%;cursor:text}
  /* the banner keeps its look but shrinks to a heading with its action button */
  .page-head{padding:16px 18px;min-height:0;margin-bottom:14px;align-items:center!important}
  .page-head p{display:none}
  .page-head h1{font-size:var(--fs-xl)}
  .page-head::after{opacity:.35}
}
@media (max-width:860px){.topbar .search svg{position:static!important;flex:none;margin:0}.topbar .search:focus-within input{padding:0 0 0 2px}}

/* One row on phones and small tablets: heading, its action, then search, Reorder and Receive goods */
@media (max-width:860px){
  .page-head{position:relative;z-index:5;flex-wrap:wrap;gap:10px 12px}
  .page-head > div:first-child{flex:1 1 auto;min-width:0}
  .page-head > .head-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
  .page-head .topbar{position:static;display:contents;padding:0;background:none;box-shadow:none}
  .page-head .topbar > *{flex:none}
  .page-head .topbar .search{margin:0}
  .page-head .topbar .btn{white-space:nowrap}
  .page-head .topbar .wide-only{display:none}
}
@media (min-width:600px) and (max-width:860px){
  .page-head .topbar .wide-only{display:inline}
}
@media (max-width:860px){
  .page-head .topbar .search{background:transparent;box-shadow:none;border:1px solid rgba(230,207,143,.5);color:var(--on-dark)}
  .page-head .topbar .search:focus-within{background:var(--surface);color:var(--text);border-color:transparent;box-shadow:var(--lift)}
}
@media (max-width:860px){.page-head .topbar .search:not(:focus-within) svg{color:var(--on-dark);stroke:var(--on-dark)}}
/* Heading row on small screens: every button has the same height and the same gold border */
@media (max-width:860px){
  .page-head .btn,.page-head .topbar .search:not(:focus-within){box-sizing:border-box;height:40px;min-height:40px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(230,207,143,.5)!important}
  .page-head .topbar .search:not(:focus-within){width:40px;padding:0}
}

/* Profile and other two-column admin pages: cards in a row share one height; role tags start on their own line */
.admin-grid{align-items:stretch}
.admin-grid > .panel{height:100%}
.role-tags{display:flex;flex-wrap:wrap;gap:6px}

/* Phones: search, Reorder and Receive goods sit in the menu drawer, not on the page */
@media (max-width:600px){
  .side:not(.open) > .topbar{display:none}
  .side > .topbar{display:grid;gap:8px;padding:0;background:none;box-shadow:none;position:static}
  .side > .topbar .search{position:relative;order:0;width:100%;height:42px;margin:0;padding:0 12px;display:flex;align-items:center;gap:8px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none;color:var(--on-dark)}
  .side > .topbar .search svg{position:static!important;color:var(--on-dark-2);stroke:var(--on-dark-2)}
  .side > .topbar .search input{position:static;opacity:1;width:100%;height:100%;padding:0 0 0 2px;border:0;background:none;box-shadow:none;color:var(--on-dark);cursor:text}
  .side > .topbar .search input::placeholder{color:var(--on-dark-2)}
  .side > .topbar .search:focus-within{position:relative;left:auto;right:auto;top:auto;height:42px;width:100%;background:rgba(255,255,255,.12);border-color:var(--gold);box-shadow:none;color:var(--on-dark)}
  .side > .topbar .search kbd{display:none}
  .side > .topbar .btn{display:flex;width:100%;height:42px;justify-content:center;align-items:center}
  .side > .topbar .btn-line{background:transparent;color:var(--on-dark);border:1px solid rgba(230,207,143,.5)}
  .side > .topbar .wide-only{display:inline}
  .side > .topbar .site{display:none!important}
}
@media (max-width:600px){.side > .topbar{width:100%;margin:0;justify-content:stretch;justify-items:stretch;flex:none;box-sizing:border-box}}

/* Icon-only heading buttons (hamburger layouts) */
@media (max-width:860px){.page-head .btn.btn-ico{width:40px;padding:0;gap:0}.page-head .btn.btn-ico svg{flex:none}}

/* Install page: the single heading carries the app icon */
.page-head h1 .ph-logo{width:44px;height:44px;border-radius:12px;vertical-align:middle;margin-right:14px;background:rgba(255,255,255,.08);padding:4px;box-sizing:border-box}

/* Multi-line fields (addresses) look like every other field, and grow with the text */
.calc textarea,.two textarea,#mform textarea,label > textarea{width:100%;box-sizing:border-box;min-height:84px;padding:9px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:var(--fw-bold);line-height:1.45;resize:vertical}
.calc textarea::placeholder,#mform textarea::placeholder{color:var(--text-3);font-weight:var(--fw-medium)}
.calc textarea:focus,#mform textarea:focus{outline:2px solid var(--copper);outline-offset:1px}
.calc textarea:disabled{opacity:.7}

/* Address form: two full-width lines, then city, state, PIN code and country */
.addr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.addr-grid > label{display:grid;gap:4px;min-width:0}
.addr-grid > .addr-wide{grid-column:1/-1}
@media (max-width:760px){.addr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.addr-grid input{width:100%;min-width:0;box-sizing:border-box}

/* Row actions as icons on small screens */
@media (max-width:860px){
  .btn.btn-row-ico{width:34px;height:34px;min-width:34px;padding:0;display:inline-grid;place-items:center;border-radius:10px}
  .btn.btn-row-ico.is-delete{color:var(--rust-ink);border-color:color-mix(in srgb,var(--rust) 55%,transparent)}
  td.r .btn-row-ico + .btn-row-ico{margin-left:4px}
}

/* Audit history: entries grouped by day, in columns on wide screens */
.audit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:10px;align-items:start}
.audit-grid .audit-row{min-width:0}
.audit-grid .audit-row summary > div{min-width:0;overflow-wrap:anywhere}
.audit-grid .audit-d{padding-left:66px}
@media (max-width:480px){.audit-grid{grid-template-columns:minmax(0,1fr)}}

/* Six contact fields in a 3 x 2 grid */
.two.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.two.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.two.three{grid-template-columns:1fr}}

/* Quantity + unit pairs in table rows have one fixed width, so rows line up whatever the unit (L, kg, pcs) */
@media (min-width:861px){
  td .qty-unit{display:inline-flex;align-items:center;gap:6px;flex:none}
  td .qty-unit > input{width:76px;min-width:76px;flex:none;box-sizing:border-box}
  td .qty-unit > .unit-sel,td .qty-unit > select{width:76px;min-width:76px;max-width:76px;flex:none;box-sizing:border-box}
  .recv-t .qty-unit .qty-in{width:76px}
}
/* Phone drawer: Reorder and Receive goods share one row; the page search is not repeated here */
@media (max-width:600px){
  .side > .topbar{grid-template-columns:1fr 1fr}
  .side > .topbar .search{display:none}
  .side > .topbar .btn{padding:0 8px;white-space:nowrap}
}

/* Phones: the search button sits in the heading row, left of the + button */
@media (max-width:600px){
  .page-head .head-acts > .search{position:relative;flex:none;order:-1;width:40px;height:40px;min-height:40px;margin:0;padding:0;display:grid;place-items:center;box-sizing:border-box;border-radius:12px;background:transparent;box-shadow:none;border:1px solid rgba(230,207,143,.5);cursor:pointer;color:var(--on-dark)}
  .page-head .head-acts > .search svg{position:static!important;pointer-events:none;color:var(--on-dark);stroke:var(--on-dark)}
  .page-head .head-acts > .search kbd{display:none}
  .page-head .head-acts > .search input{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;cursor:pointer}
  .page-head .head-acts > .search:focus-within{position:fixed;z-index:45;left:12px;right:12px;top:68px;width:auto;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface);color:var(--text);border-color:transparent;box-shadow:var(--lift);cursor:text}
  .page-head .head-acts > .search:focus-within svg{color:var(--text-3);stroke:var(--text-3)}
  .page-head .head-acts > .search:focus-within input{position:static;opacity:1;flex:1;height:100%;padding:0 0 0 2px;cursor:text}
}

/* Hamburger layouts: item count on the left, then sort, filter, cards and table as icons on one row */
@media (max-width:860px){
  .toolbar:has(> .fm-btns){flex-wrap:nowrap;gap:8px}
  .toolbar:has(> .fm-btns) > .result-count{margin-right:auto;white-space:nowrap}
  .toolbar:has(> .fm-btns) > .grow{display:none}
  .toolbar > .fm-btns{margin-left:0}
  .toolbar > .seg[aria-label=Layout]{flex:none;margin-left:0}
  .seg[aria-label=Layout] button{font-size:0;gap:0;padding:0;width:34px;height:32px;display:inline-grid;place-items:center}
  .seg[aria-label=Layout] button svg{width:16px;height:16px;margin:0}
}
@media (max-width:860px){
  .toolbar:has(> .fm-btns){align-items:center}
  .toolbar > .seg[aria-label=Layout]{height:38px;box-sizing:border-box;display:inline-flex;align-items:center;align-self:center;margin:0}
  .toolbar > .fm-btns{align-self:center}
}
@media (max-width:860px){
  .toolbar > .fm-btns{margin-left:auto}
  .toolbar > .result-count ~ .fm-btns{margin-left:0}
}
/* Menu drawer: the whole drawer scrolls, so My profile and Sign out come last instead of floating at the bottom */
@media (max-width:860px){
  .side.open{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .side.open .menu{flex:none;overflow:visible;min-height:auto}
  .side.open .side-foot{margin-top:6px;flex:none}
  .side.open .side-out{flex:none}
}

/* Pager on small screens: count and page buttons share one row, buttons shrink to fit */
@media (max-width:860px){
  .pager{flex-wrap:nowrap;justify-content:space-between;gap:3px;box-sizing:border-box;width:100%;max-width:calc(100vw - 72px);position:sticky;left:0}
  .pager .pg-info{flex:1 1 auto;margin:0 4px 0 0;font-size:12px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pager button{flex:0 1 32px;min-width:26px;height:34px;padding:0 2px}
  .pager .pg-gap{flex:0 0 auto;padding:0}
}

/* Small screens: tables use the section's width and wrap their text instead of scrolling sideways */
@media (max-width:860px){
  .tablewrap{overflow-x:visible}
  .tablewrap table.t:not(.grid){width:100%;table-layout:auto}
  .tablewrap table.t:not(.grid) th,.tablewrap table.t:not(.grid) td{overflow-wrap:anywhere;padding-left:6px;padding-right:6px}
  .tablewrap table.t:not(.grid) td small{overflow-wrap:anywhere}
  .pager{max-width:none;position:static}
}
@media (max-width:860px){
  .t .pager{width:0;min-width:100%}
  .tablewrap .t .num{white-space:normal}
}
@media (max-width:860px){
  .tablewrap table.t:not(.grid) th,.tablewrap table.t:not(.grid) td{padding-left:4px;padding-right:4px;font-size:13px}
}
@media (max-width:860px){.tablewrap table.t:not(.grid) th{white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:auto}}
@media (max-width:860px){.tablewrap .t.grid{width:100%}.t.grid td.c,.t.grid th.c{width:auto;padding-left:2px;padding-right:2px;font-size:11px;white-space:normal;overflow-wrap:anywhere}.t.grid td,.t.grid th{padding-left:4px;padding-right:4px}}
@media (max-width:860px){.pager .pg-info{flex:0 0 auto}.pager button{flex:1 1 26px;max-width:34px}}

/* A heading with a logo: the logo stays beside the text, so a title that wraps keeps every line on one left edge */
.page-head h1:has(.ph-logo){display:flex;align-items:center;gap:14px}
.page-head h1 .ph-logo{flex:none;margin-right:0}
.page-head :has(> h1 .ph-logo) > p{margin-left:58px}

/* Photos attached to records */
.ph-btn{display:inline-flex;align-items:center;gap:5px;position:relative}
.ph-btn .ph-n{font-size:11px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--copper);color:var(--on-dark);display:inline-grid;place-items:center}
.ph-btn .ph-n[hidden]{display:none}
.ph-btn.has{border-color:var(--copper-light);color:var(--copper-ink)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.ph-item{margin:0;display:grid;gap:6px;justify-items:start}
.ph-item figcaption{font-size:var(--fs-xs);color:var(--text-3)}
.ph-open{all:unset;cursor:zoom-in;display:block;width:100%}
.ph-open img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);background:var(--surface-2);display:block}
.ph-view{position:fixed;inset:0;z-index:300;background:rgba(20,10,6,.86);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.ph-view img{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--lift)}
img.ph-cover{object-fit:cover;display:block}
.with-ph{display:flex;align-items:center;gap:10px}
.with-ph > span{min-width:0}
.row-ph{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface-2)}
.avatar.has-photo{padding:0;overflow:hidden}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pass-photo{width:100%;height:120px;object-fit:cover;border-radius:var(--r-md);display:block;margin-bottom:10px}
.pass-ph{margin:10px 0 0}
.photo-acts [hidden],.btn[hidden]{display:none!important}
@media (max-width:860px){.pager{justify-content:flex-end}.pager .pg-info{flex:1 1 auto;margin-right:auto}.pager button{flex:0 1 34px;max-width:none}}
/* Pagers never wrap, at any width: count on the left, page buttons on the right */
.pager{flex-wrap:nowrap;justify-content:flex-end;box-sizing:border-box;width:100%}
.pager .pg-info{flex:1 1 auto;margin-right:auto;white-space:nowrap;min-width:0}
.pager button{flex:0 1 36px;min-width:26px}
.pager .pg-gap{flex:0 0 auto}
.formula-wrap{margin-top:16px;margin-bottom:0}
.formula-wrap:not([open]) > summary{margin-bottom:0}

/* Stock movements: the filter icon shares the row of the first day heading ("Today") */
#v-moves .toolbar{height:0;min-height:0;margin:0;padding:0;overflow:visible;position:relative;z-index:3;justify-content:flex-end}
#v-moves .toolbar .fm-btns{position:relative;margin-right:2px}
#v-moves .feed-day:first-of-type > h3{min-height:38px;display:flex;align-items:center;margin-top:0;margin-bottom:6px}
/* Stock movements: more columns as the screen widens */
#feed .feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:8px 12px;align-items:stretch}
#feed .feed > .feed-row{margin:0;min-width:0}
@media (max-width:860px){#feed .feed{grid-template-columns:minmax(0,1fr)}}
.dockets{grid-auto-rows:auto;align-items:stretch}
.pager{width:auto;max-width:100%}

/* Setup: spreadsheet import and supplier price lists sit side by side on wide screens */
.setup-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;align-items:stretch}
@media (min-width:1100px){.setup-pair:has(> .panel + .panel){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.setup-pair > .panel{display:flex;flex-direction:column}
.setup-pair > .panel > .panel-b{flex:1}
.imp-foot{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.imp-foot > details{flex:1 1 220px;min-width:0}

/* Tables never scroll sideways at any width: they fill the card and wrap their text and buttons */
.tablewrap{overflow-x:visible}
.modal-box .tablewrap{overflow-x:visible}
.tablewrap table.t:not(.grid){width:100%;table-layout:auto}
.tablewrap table.t:not(.grid) th,.tablewrap table.t:not(.grid) td{overflow-wrap:anywhere}
.tablewrap table.t:not(.grid) th{white-space:normal}
.tablewrap table.t:not(.grid) td.r{white-space:normal}
.tablewrap table.t:not(.grid) td.r .btn{margin:2px 0}
.tablewrap .t .num{white-space:normal}

/* Feeds with a photo button keep it on the row, and recent batches, returns and wastage use columns like movements */
.feed-row:has(> .ph-btn){grid-template-columns:44px minmax(0,1fr) auto auto}
#v-prep .feed,#v-suppliers .feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:8px 12px;align-items:stretch}
#v-prep .feed > .feed-row,#v-suppliers .feed > .feed-row{margin:0;min-width:0}
@media (max-width:860px){#v-prep .feed,#v-suppliers .feed{grid-template-columns:minmax(0,1fr)}}
.rc-photo{width:100%;max-height:260px;object-fit:cover;border-radius:var(--r-md);display:block;margin-bottom:12px;background:var(--surface-2)}
.pl-bar .field{max-width:100%;box-sizing:border-box}.pl-bar .field select{min-width:0;flex:1 1 auto;max-width:100%;width:0}
/* headings never split mid-word; short numeric columns keep their title whole */
.tablewrap table.t:not(.grid) th{overflow-wrap:normal;word-break:normal;hyphens:manual}
.tablewrap table.t:not(.grid) th.r{white-space:nowrap}
.tablewrap table.t:not(.grid) td.r.num{white-space:nowrap;overflow-wrap:normal}
/* Supplier list on phones: the GSTIN moves under the supplier's details instead of breaking in a narrow column */
.gst-inline{display:none}
.tablewrap table.t:not(.grid) td.gst{white-space:nowrap;overflow-wrap:normal}
@media (max-width:600px){
  .t:has(td.gst) th:nth-child(2),.t:has(td.gst) td.gst{display:none}
  .gst-inline{display:block;margin-top:2px;white-space:nowrap;font-size:11.5px}
}

/* Hamburger layouts (phones and portrait tablets): cards keep only what matters; the rest is one tap away in the record itself */
@media (max-width:860px){
  .sc .sc-code,.sc .sc-ring{display:none}
  .sc .sc-m > div:first-child{display:flex;align-items:baseline;gap:6px}
  .sc .sc-m b{font-size:20px}
  .docket > ol{display:none}
  .req > ul,.req .req-more{display:none}
  .appr > small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .biz .rings{gap:4px}.biz .ring{width:46px;height:46px;margin-bottom:2px}.biz .ring::before{width:34px;height:34px}.biz .ring b{font-size:10.5px}
  .zr > dl{display:none}
  .person .person-roles,.person .person-s small{display:none}
  #v-setup .t td small,#v-setup .gst-inline{display:none}
  .feed-row > div > small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
}

/* Contrast: hover and disabled states stay readable (pager, links) */
.pager button{background:var(--surface);border:1px solid var(--line-2);color:var(--text);box-shadow:none}
.pager button:hover:not(:disabled):not([aria-current="page"]){background:var(--copper-soft);border-color:var(--copper-light);color:var(--copper-ink)}
.pager button[aria-current="page"],.pager button[aria-current="page"]:hover:not(:disabled){background:var(--copper);border-color:var(--copper);color:var(--on-dark)}
.pager button:disabled{opacity:1;color:var(--text-3);background:var(--surface-2);border-color:var(--line);cursor:not-allowed}
.pager button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
a.xl:hover{color:inherit;background:color-mix(in srgb,currentColor 10%,transparent);text-decoration-color:var(--copper);text-decoration-thickness:2px}

/* Small screens: row actions (edit, archive, delete) always share one line, as small icon buttons */
@media (max-width:860px){
  .tablewrap table.t td.r:has(.btn-row-ico){white-space:nowrap;display:table-cell}
  .tablewrap table.t td.r .btn-row-ico{margin:0 0 0 4px;width:34px;height:34px;min-width:34px;padding:0;display:inline-grid;vertical-align:middle}
  .tablewrap table.t td.r .btn-row-ico:first-child{margin-left:0}
}
@media (max-width:860px){.tablewrap table.t:not(.grid) td.r:has(.btn-row-ico){white-space:nowrap;width:1%}}

/* Hamburger layouts: every card type is compact (tighter padding, smaller figures, fewer decorations) */
@media (max-width:860px){
  .sc{padding:12px 14px 0;gap:8px}
  .sc .sc-h img,.sc .sc-h .noimg{width:44px;height:44px}
  .docket{padding:14px 14px 10px;gap:8px}
  .req,.appr,.take,.mclose,.dish,.jar-card,.person,.biz,.zr{padding:12px 14px;gap:6px}
  .biz{gap:8px}
  .zr{padding-bottom:14px}
  .appr .val{font-size:22px;line-height:1.1}
  .zr .amt{font-size:24px;line-height:1.1}
  .take .take-v{font-size:18px}
  .dish .jar,.dish .donut,.jar-card .jar{zoom:.7}
  .dish-top{gap:10px}
  .tile{padding:14px 16px}
  .tile.hero{grid-row:auto}
  .tile .val{font-size:30px}
  .pass{padding:20px 16px 14px}
  .pass .barcode,.pass .barcode-no{display:none}
  .pass dl{gap:2px 12px}
  .panel-h{padding:12px 14px 4px}
  .panel-b{padding-left:14px;padding-right:14px}
}
@media (max-width:860px){#v-setup .t td.r:last-child:has(.btn-row-ico),.tablewrap .t td.r:has(.btn-row-ico){white-space:nowrap;min-width:0;text-align:right}}

/* Form controls: borders clearly separate dropdowns and inputs from the card behind them (3:1 or better) */
:root{--field-line:#9C8370}
.field{border:1px solid var(--field-line);box-shadow:none}
select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]){border-color:var(--field-line)}
.field:focus-within,select:focus,textarea:focus,input:focus{border-color:var(--copper)}
/* Filter dialog: the dropdown carries its own clear border */
.fm-group .field{border:0;box-shadow:none}
.fm-group .field select{border:1px solid var(--field-line);border-radius:12px;padding:10px 12px;background:var(--surface);min-height:42px}
.fm-group .field select:focus{border-color:var(--copper)}

/* Wide screens: the top bar ends where the page content ends, so its right-hand buttons line up with the cards below */
@media (min-width:861px){.topbar{padding-right:max(28px,calc(100% - 1520px + 28px))}}
.calc input:not([type=checkbox]):not([type=radio]),.calc select,.calc textarea,#mform input:not([type=checkbox]):not([type=radio]),#mform select,#mform textarea,.two input,.two select{border-color:var(--field-line)}
.calc input:focus,.calc select:focus,.calc textarea:focus,#mform input:focus,#mform select:focus,#mform textarea:focus{border-color:var(--copper)}

/* Tables: only the first column (names, e-mails) may break inside a word; other columns wrap between words */
.tablewrap table.t:not(.grid) td:not(:first-child),.tablewrap table.t:not(.grid) th{overflow-wrap:normal;word-break:normal}
@media (max-width:860px){#v-items .tablewrap{padding:0 12px}#v-items .tablewrap table.t th:first-child,#v-items .tablewrap table.t td:first-child{padding-left:0}#v-items .tablewrap table.t th:last-child,#v-items .tablewrap table.t td:last-child{padding-right:0}}
@media (max-width:860px){#v-items .tablewrap table.t td.r,#v-items .tablewrap table.t td.r.num{white-space:normal}}
@media (max-width:600px){#v-items .tablewrap table.t th:nth-child(2),#v-items .tablewrap table.t td:nth-child(2){display:none}}

/* Hamburger layouts: the raw materials table keeps item, quantity and status; the rest is in the item itself */
@media (max-width:860px){
  #items-out table.t :is(th,td):is(:nth-child(2),:nth-child(n+4):nth-child(-n+10)){display:none}
  .itm small{display:none}
}
@media (max-width:860px){
  #v-events table.t:has(th:nth-child(6)) :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(6)){display:none}
  #v-closing table.t:has(th:nth-child(5)) :is(th,td):is(:nth-child(2),:nth-child(3)){display:none}
  #v-setup table.t:has(th:nth-child(4)) :is(th,td):nth-child(2){display:none}
}
@media (max-width:860px){
  #items-out table.t td.r small{display:none}
  #items-out table.t td:last-child .tag{font-size:11px;padding:3px 8px;white-space:nowrap}
  #items-out table.t th,#items-out table.t td{padding-left:6px;padding-right:6px}
}
@media (max-width:860px){
  #items-out table.t{table-layout:fixed;width:100%}
  #items-out table.t th:nth-child(3){width:74px}
  #items-out table.t th:nth-child(11){width:96px}
  #items-out table.t td:last-child{overflow:hidden}
}
/* Hamburger layouts: the grey detail line under a name in the first column of a list is dropped; open the record to see it */
@media (max-width:860px){.view:not(#v-stocktake):not(#v-replenish) .tablewrap table.t:not(.recv-t) td:first-child small{display:none}}

/* Hamburger layouts: the status is the coloured edge of the row (same colours as the stock cards), not a column */
@media (max-width:860px){
  #items-out table.t th:nth-child(11),#items-out table.t td:nth-child(11){display:none}
  #items-out table.t th:nth-child(3){width:90px}
  #items-out tr.row-st > td:first-child{box-shadow:inset 4px 0 0 var(--edge,var(--line-2));padding-left:12px}
  #items-out tr.row-st-out,#items-out tr.row-st-crit{--edge:var(--rust)}
  #items-out tr.row-st-reorder{--edge:var(--gold)}
  #items-out tr.row-st-onorder{--edge:var(--espresso-3)}
  #items-out tr.row-st-ok{--edge:var(--jade-ink)}
  #items-out tr.row-st-over{--edge:var(--line-2)}
}
@media (max-width:860px){#items-out table.t tr.row-st > td:first-child{padding-left:14px!important}}

/* Colour guide: a small heading on its own line, the colour codes start on the next line */
.colour-guide{padding:12px 18px 14px}
.colour-guide > b{flex:0 0 100%;margin:0;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--text-3)}
#v-moves .toolbar{align-items:flex-start}
/* segmented switches: buttons centre exactly inside their pill, at every size */
.seg{display:inline-flex;align-items:center}
.seg button{display:inline-flex;align-items:center;justify-content:center;line-height:1;min-height:32px}
#v-moves .toolbar .fm-btns{align-self:flex-start}

/* Phone dialogs: quantity, unit and the remove button share one row under the ingredient or item */
@media (max-width:600px){
  #mform .rline,#mform .reqrow,#mform .urow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important}
  #mform .rline > label:first-child,#mform .reqrow > label:first-child{grid-column:1/-1}
  #mform .rline > .rdel,#mform .reqrow > .rdel,#mform .urow > .udel{align-self:end;justify-self:end}
}
/* icon-only switch buttons: the icon sits exactly in the middle (their hidden label no longer takes a grid row) */
.seg button{display:flex!important;align-items:center;justify-content:center}
.seg button svg{display:block;flex:none}
/* Colour guide: the colour mark and its name line up with the first line of the description */
.colour-guide span{align-items:flex-start}
.colour-guide .sw{margin-top:1px}
.colour-guide u{line-height:1.4}
/* Supplier price lists on small screens: the dropdown and both buttons use the full width of the card */
@media (max-width:860px){
  .pl-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .pl-bar .field,.pl-bar .btn,.pl-bar label.btn{width:100%;max-width:none;box-sizing:border-box;justify-content:center;text-align:center}
  .pl-bar .field select{width:100%;flex:1 1 auto}
}
@media (max-width:860px){
  .pl-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pl-bar .field{grid-column:1/-1}
  .pl-bar .btn,.pl-bar label.btn{padding-left:10px;padding-right:10px;white-space:nowrap}
}

/* Hamburger layouts: the top bar runs edge to edge at the very top of the screen; the breathing room is inside it */
@media (max-width:860px){
  .side{top:0;left:0;right:0;height:68px;margin:0;border-radius:0;padding:14px 14px 8px}
  .side.open{bottom:0;right:auto;height:auto;padding:18px 14px 14px}
  .main{padding-top:68px}
}

/* Unread notifications: a small blinking red dot instead of a "New" label */
.unread-dot{width:10px;height:10px;border-radius:50%;background:#D12B3F;flex:none;justify-self:end;align-self:center;box-shadow:0 0 0 3px rgba(209,43,63,.18);animation:unreadBlink 1.4s ease-in-out infinite}
@keyframes unreadBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.unread-dot{animation:none}}

/* Access grid (roles and permissions): it scrolls sideways on small screens instead of squeezing, and its headings stay whole */
.tablewrap:has(> .t.grid){overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .t.grid{width:auto;min-width:100%}
.tablewrap .t.grid th,.tablewrap .t.grid td{white-space:nowrap;overflow-wrap:normal;word-break:normal;hyphens:manual}
.tablewrap .t.grid th.c,.tablewrap .t.grid td.c{min-width:64px;width:auto;padding-left:8px;padding-right:8px;font-size:var(--fs-xs)}
.tablewrap .t.grid td:first-child,.tablewrap .t.grid th:first-child{position:sticky;left:0;z-index:2;background:var(--surface);min-width:170px;white-space:normal;box-shadow:1px 0 0 var(--line)}
.tablewrap .t.grid tr.grp td:first-child{background:var(--surface-2)}
@media (max-width:860px){.tablewrap .t.grid{min-width:560px}}
.tablewrap .t.grid tr.grp td:first-child{position:static;box-shadow:none}
.t.grid .grp-l{position:sticky;left:12px;display:inline-block}

/* Roles: a dropdown on small screens, the chips on wide ones */
.role-select{display:none}
@media (max-width:860px){
  .role-chips{display:none}
  .role-select{display:flex;width:100%;box-sizing:border-box}
  .role-select select{width:100%;flex:1 1 auto}
}
@media (max-width:860px){.side,.side.open{border-radius:0}}


/* Replenishment cards: the footer is a deep shade of the card's own colour code (red, gold or brown) */
.basket.edge .basket-f{background:linear-gradient(135deg,color-mix(in srgb,var(--edge) 52%,#150b06),color-mix(in srgb,var(--edge) 66%,#000))}
.basket.edge .basket-f small{color:rgba(255,255,255,.92)}


/* Stock cards: the bottom strip is a light tint of the card's own colour code, matching its left edge */
.sc .sc-f{background:color-mix(in srgb,var(--edge,var(--line-2)) 17%,#fff);color:color-mix(in srgb,var(--edge,var(--line-2)) 52%,#150b06)}
.sc.sc-st-over .sc-f,.sc.edge-mute .sc-f{color:var(--text-2)}

/* Card action areas: buttons keep one look everywhere; the area behind them is a light tint of the card's colour code,
   the same as the strip at the bottom of the stock cards */
.docket{--cx:16px;--cy:14px}.appr{--cx:18px;--cy:18px}.zr{--cx:18px;--cy:24px}.biz{--cx:20px;--cy:20px}
@media (max-width:860px){.docket{--cx:14px;--cy:10px}.appr{--cx:14px;--cy:12px}.zr{--cx:14px;--cy:14px}.biz{--cx:14px;--cy:12px}}
.edge .card-f,.docket.edge .docket-f{margin:10px calc(var(--cx) * -1) calc(var(--cy) * -1);padding:12px var(--cx) 14px;background:color-mix(in srgb,var(--edge,var(--line-2)) 17%,#fff);border-radius:0 0 var(--r-lg,16px) var(--r-lg,16px)}
.card-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.docket.edge .docket-f{margin-top:6px}
.jar-card{--cx:18px;--cy:18px}.pass{--cx:20px;--cy:18px}
@media (max-width:860px){.jar-card{--cx:14px;--cy:12px}.pass{--cx:16px;--cy:14px}}
.pass .card-f{background:color-mix(in srgb,var(--edge,var(--line-2)) 30%,#150b06);margin-top:12px}
.biz .card-f,.jar-card .card-f{margin-top:10px}
.edge .card-f,.docket.edge .docket-f{margin-top:auto;align-self:end}
.pass .card-f{margin-top:auto}
.zr{display:flex;flex-direction:column;gap:8px}
.zr .card-f{margin-top:auto;align-self:stretch}

/* Cards keep their rounded corners; the colour strip inside simply fills the bottom of the card and follows its curve */
.edge .card-f,.docket.edge .docket-f,.pass .card-f{border-radius:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.basket.edge .basket-f{border-radius:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
/* The footer strip is square and the card clips it: a left colour edge makes the inner curve elliptical, so a copied radius never fits */
.edge:has(> .card-f,> .docket-f,> .basket-f){overflow:clip}
.edge > .card-f,.edge > .docket-f,.edge > .basket-f,.basket.edge .basket-f,.docket.edge .docket-f,.pass .card-f{border-radius:0}

/* Delivery cards: the price and all the buttons share one line; when the card is too narrow the whole button group drops to a second line together */
.docket-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.docket-f .total{margin-right:auto}
.docket-acts{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-left:auto;max-width:100%}
.docket-acts .btn{flex:none}
.docket-f > .docket-acts:only-child{margin-left:0}
.edge .card-f,.docket.edge .docket-f,.pass .card-f,.zr .card-f{align-self:stretch;width:auto}
/* Delivery cards: the price has its own line, the buttons sit together on the line below, on every card */
.docket-f{flex-direction:column;align-items:flex-start;gap:8px}
.docket-f .total{margin-right:0}
.docket-acts{flex-wrap:wrap;margin-left:0;width:100%}
.docket-acts{gap:6px;flex-wrap:nowrap}
.docket-acts .btn{padding-left:10px;padding-right:10px}
.docket-acts .ph-btn,.docket-acts .btn-wa{padding-left:9px;padding-right:9px;min-width:36px}
@media (max-width:330px){.docket-acts{flex-wrap:wrap}}

/* Replenishment footer: cream and outline buttons that sit well on the red, gold and brown footers alike */
.basket.edge .basket-f .btn-primary{background:#FFF8F0;color:#2B1A10;border:1.5px solid #FFF8F0;background-image:none}
.basket.edge .basket-f .btn-primary:hover:not(:disabled){background:#fff}
.basket.edge .basket-f .btn-wa{background:transparent;color:#FFF8F0;border:1.5px solid rgba(255,248,240,.85)}
.basket.edge .basket-f .btn-wa:hover:not(:disabled){background:rgba(255,248,240,.16)}
.basket.edge .basket-f .btn-wa svg{color:inherit;fill:currentColor}

/* Card action strips: every button in the row has the same height and sits on the same line */
.card-f > .appr-act{display:contents}
.card-f{align-items:center;gap:8px}
.card-f .btn,.docket-f .btn{height:34px;min-height:34px;box-sizing:border-box;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

/* One height for every button in the app (38 px), so rows of buttons always line up */
.btn,.btn-sm,.icon-btn,.btn-row-ico,.card-f .btn,.docket-f .btn,.docket-acts .btn,.tablewrap table.t td.r .btn-row-ico,.page-head .btn.btn-ico{height:38px;min-height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0}
.btn,.btn-sm{display:inline-flex;align-items:center;justify-content:center}
.icon-btn,.btn-row-ico,.docket-acts .ph-btn,.docket-acts .btn-wa,.card-f .ph-btn,.card-f .btn-wa{min-width:38px}
.btn-row-ico,.tablewrap table.t td.r .btn-row-ico{width:38px}
@media (max-width:860px){.page-head .btn,.page-head .topbar .search:not(:focus-within){height:38px;min-height:38px}.page-head .btn.btn-ico,.page-head .topbar .search:not(:focus-within){width:38px}}

/* One colour rule for the bottom of every card: the card's own edge colour at low opacity, so the strip is a light shade of its left border */
.sc .sc-f,.edge .card-f,.docket.edge .docket-f,.basket.edge .basket-f{background:color-mix(in srgb,var(--edge,var(--line-2)) 24%,transparent)}
.basket.edge .basket-f{color:var(--text)}
.basket.edge .basket-f small,.basket.edge .basket-f .total{color:var(--text)}
.basket.edge .basket-f small{color:var(--text-2)}
.basket.edge .basket-f .btn-primary{background:linear-gradient(135deg,var(--copper-light),var(--copper));color:var(--on-dark);border-color:transparent}
.basket.edge .basket-f .btn-primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(135deg,var(--copper-light),var(--copper))}
.basket.edge .basket-f .btn-wa{background:#18794A;color:#fff;border-color:transparent}
.basket.edge .basket-f .btn-wa:hover:not(:disabled){background:#136339}

/* Replenishment price row: the box takes all the room it is given, and the unit stays beside it on one line */
.baskets .price-q{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;flex-wrap:nowrap}
.baskets .price-q input{flex:1 1 auto;width:auto;min-width:0;height:34px}
.baskets .price-q span{white-space:nowrap;flex:none}

/* Replenishment lines: the item name uses the whole width; the price box and the quantity stepper share the row below */
.baskets li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px 10px;align-items:center}
.baskets li > div:not(.noimg){grid-column:3 / -1;min-width:0}
.baskets li > .noimg{grid-column:2;grid-row:1}   /* an item without a photo keeps its empty photo box in the photo place, with the name to its right */
.baskets li > .price-q{grid-column:1 / 4;grid-row:2;margin-top:0}
.baskets li > .stepper{grid-column:4;grid-row:2;justify-self:end}
.baskets li > .price-q:not(:nth-child(4)){grid-column:1 / 4}

/* Quantity boxes that already have − and + buttons do not also show the browser's own up/down arrows */
.stepper input[type=number]{-moz-appearance:textfield;appearance:textfield}
.stepper input[type=number]::-webkit-inner-spin-button,.stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Needs-action cards: colour-coded like every other card (edge, tooltip, tinted strip) instead of a status label */
.chipcard.edge{position:relative;grid-template-columns:56px minmax(0,1fr);--cx:10px;--cy:10px;padding:12px 12px 12px 14px;border-width:0;border-left:5px solid var(--edge)}
.chipcard.edge:hover,.chipcard.edge:focus-visible{box-shadow:var(--lift-sm);border-color:var(--edge)}
.chipcard .edge-tip{position:absolute;right:10px;top:10px}
.chipcard .chip-f{grid-column:1 / -1;margin:2px -12px -12px -14px;padding:10px 14px;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-2);background:color-mix(in srgb,var(--edge,var(--line-2)) 24%,transparent);border-radius:0 0 18px 18px;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}

/* Rows of cards: the same 16 px gap between a row and the next one as between neighbours in a row */
.admin-grid{margin-bottom:16px}
.admin-grid > .panel{margin-bottom:0}
.admin-grid + .panel{margin-top:0}

/* The device you are using right now: a small blinking green dot */
.live-dot{display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:var(--jade-ink,#1E5E47);vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--jade-ink,#1E5E47) 22%,transparent);animation:unreadBlink 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.feed-row.edge .edge-tip{justify-self:end}
.audit-row.edge > summary{align-items:center}
.audit-row.edge .edge-tip{justify-self:end;margin-right:6px}

/* Fraunces: sturdy strokes, so headings use a medium-bold weight with slightly easier spacing */
h1,h2,h3,h4,.tile .val,.sc-m b,.price,.amt,.total,.big,.pct,.donut span,.bigdonut b,.rank,.mono,.qty-pill,.stamp,.page-head h1{font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0}
h1,.page-head h1{font-weight:600;letter-spacing:-.02em}
h2,h3,.panel-h h2{font-weight:600;letter-spacing:-.01em}
/* the wordmark stays on one line with the wider serif */
#side .logo b{font-size:15.5px;white-space:nowrap;letter-spacing:-.01em}

/* Item drawer: the actions are a toolbar fixed at the top of the item, most useful first */
.d-bar{position:sticky;top:0;z-index:6;padding:12px 16px 12px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 10px 16px -14px rgba(27,15,8,.35)}
.d-bar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.d-bar-grid [hidden]{display:none}
.d-bar-grid:has(#dMore[hidden]){grid-template-columns:repeat(5,minmax(0,1fr))}
.d-act{display:grid;justify-items:center;align-content:center;gap:5px;min-height:64px;padding:8px 4px;border:1px solid var(--field-line,var(--line-2));border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.15;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.d-act svg{width:21px;height:21px;flex:none}
.d-act:hover{background:var(--copper-soft);border-color:var(--copper-light);color:var(--copper-ink)}
.d-act.primary{background:var(--copper);border-color:var(--copper);color:var(--on-dark)}
.d-act.primary:hover{background:color-mix(in srgb,var(--copper) 86%,#000);color:var(--on-dark)}
.d-act:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.d-more{position:absolute;right:16px;top:calc(100% - 4px);z-index:7;min-width:200px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--lift);display:grid;gap:2px}
.d-more[hidden]{display:none}
.d-more button{all:unset;box-sizing:border-box;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text)}
.d-more button:hover,.d-more button:focus-visible{background:var(--surface-2)}
.d-more button.danger{color:var(--rust-ink)}
.d-more hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
@media (max-width:560px){.d-bar-grid,.d-bar-grid:has(#dMore[hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}.d-act{min-height:60px}}

/* quick-view panels: actions sit under the heading, above the details */
.peek-bar{position:static;box-shadow:none;background:transparent;padding:12px 20px 4px;border-bottom:0}
.peek-bar .d-bar-grid,.peek-bar .d-bar-grid:has(#dMore[hidden]){grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (max-width:560px){.peek-bar .d-bar-grid,.peek-bar .d-bar-grid:has(#dMore[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* top search bar: icon, text and the "/" key hint share one centre line; the icon is a real button */
@media (min-width:861px){
  .topbar .search{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:14px;background:var(--surface);box-shadow:var(--lift-sm);cursor:text}
  .topbar .search > svg{position:static;flex:none;color:var(--text-3)}
  .topbar .search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:0;outline:none}
  .topbar .search:focus-within{box-shadow:var(--lift-sm),0 0 0 2px var(--copper)}
  .topbar .search kbd{position:static;flex:none;display:inline-grid;place-items:center;height:22px;min-width:22px;padding:0 6px;line-height:1}
  .topbar .search > svg{cursor:pointer}
}

/* page search in the list toolbar (desktop) */
.pg-search{display:flex;align-items:center;gap:8px;height:38px;min-width:220px;width:min(340px,30vw);padding:0 12px;border-radius:14px;background:var(--surface);box-shadow:var(--lift-sm);cursor:text}
.pg-search:focus-within{box-shadow:var(--lift-sm),0 0 0 2px var(--copper)}
.pg-search svg{flex:none;color:var(--text-3)}
.pg-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;box-shadow:none;outline:none;font:inherit;font-size:var(--fs-sm);-webkit-appearance:none;appearance:none}
.pg-search input::-webkit-search-cancel-button{display:none}
.pg-x{all:unset;cursor:pointer;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--text-3);font-size:18px;line-height:1}
.pg-x:hover{background:var(--surface-2);color:var(--text)}
.fm-btns .pg-search{margin-right:6px}

/* search row under the heading on list pages without a toolbar */
.pg-bar{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.pg-bar .pg-search{width:min(340px,100%)}
.pg-x[hidden]{display:none}

/* supplier cards: every card the same height; the header band holds the logo and the name, centred together; names take two lines and end in "…" beyond that */
.biz-alerts{display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;min-height:26px}
.biz-alerts .sticker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.biz .card-f{display:flex;gap:8px;flex-wrap:wrap}
.biz{--bh:72px}
.biz::before{height:calc(var(--cy,20px) + var(--bh) + 8px)}
.biz-h{height:var(--bh);align-items:center}
.biz-h > div{display:flex;flex-direction:column;justify-content:center;min-width:0}
.biz-h h3{min-height:0;height:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:0}
.biz-h small{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:861px){
  .biz{min-height:336px}
}
.biz .rings{margin-top:10px}
@media (max-width:860px){.biz{--bh:60px}}

@media (max-width:860px){.biz{min-height:280px}}

/* the middle of a supplier card: metrics (and any price moves) centred between the header band and the buttons */
.biz-mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
.biz-mid .rings{margin-top:0}
.biz-mid .biz-alerts{min-height:0}
.biz .card-f{margin-top:0}
.biz-mid{padding-top:9px}

/* a lone action (or an odd one out) takes the full width, icon and label on one line */
@media (max-width:560px){
  .peek-bar .d-act:last-child:nth-child(odd){grid-column:1/-1;display:flex;flex-direction:row;justify-content:center;gap:10px;min-height:48px}
}
.peek-bar .d-bar-grid[style*="--n:1"]{grid-template-columns:1fr}
.peek-bar .d-bar-grid[style*="--n:1"] .d-act{display:flex;flex-direction:row;justify-content:center;gap:10px;min-height:48px}
/* quick-view tiles on wider screens: icon and label side by side */
@media (min-width:561px){
  .peek-bar .d-act{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:8px 12px}
  .peek-bar .d-act span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.fm-btns .pg-search{margin-right:6px}

/* the page search shows as a box wherever the row has room and shrinks to an icon only where it would crowd the other buttons (phones, beside Sort and Filter) */
@media (max-width:860px){
  .page-head .search,.page-head .head-acts > .search{display:none!important}
  .pg-bar{justify-content:flex-end;margin:-6px 0 12px}
  .pg-bar .pg-search{width:min(340px,100%)}
  .fm-btns .pg-search{display:flex;width:210px;height:38px}
}
@media (max-width:600px){
  .fm-btns .pg-search{display:grid;place-items:center;position:relative;flex:none;width:38px;min-width:0;height:38px;padding:0;margin:0;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:none;cursor:pointer}
  .fm-btns .pg-search svg{pointer-events:none;color:var(--text-2)}
  .fm-btns .pg-search input{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;cursor:pointer}
  .fm-btns .pg-search .pg-x{display:none}
  .fm-btns .pg-search:focus-within{position:fixed;z-index:45;left:12px;right:12px;top:68px;width:auto;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface);border-color:transparent;box-shadow:var(--lift);cursor:text}
  .fm-btns .pg-search:focus-within input{position:static;opacity:1;flex:1;height:100%;cursor:text}
  .fm-btns .pg-search:focus-within .pg-x:not([hidden]){display:grid}
  .fm-btns .pg-search:has(input:not(:placeholder-shown)){border-color:var(--copper-light)}
}

/* Replenishment price box: compact (room for a price like 12,345.50), never stretched across the card; it shrinks only on very narrow phones */
.baskets .price-q{width:auto;justify-self:start}
.baskets .price-q input{flex:0 1 112px;width:112px;max-width:100%}

/* basket footer: the order value and the buttons share a row whenever they fit; the buttons drop below only when they cannot */
.basket-f{flex-wrap:wrap;row-gap:10px}
.basket-tot{display:flex;align-items:center;gap:6px;margin-right:auto;white-space:nowrap}
.basket-tot .total{margin-right:0}
.basket-acts{flex:1 1 auto;margin-left:auto}
.basket-acts .btn{flex:1 1 auto;justify-content:center}

/* a line reads left to right: price, then quantity, then the value of the line */
.baskets li{grid-template-columns:auto auto minmax(0,1fr) auto auto}
.baskets li > .lv{grid-column:5;grid-row:2;justify-self:end;min-width:76px;text-align:right;font-size:var(--fs-md);color:var(--text);white-space:nowrap}
.basket{container-type:inline-size}
/* the value only appears when the card itself is wide enough to hold price, quantity and value on one line */
@container (max-width:480px){.baskets li > .lv{display:none}.baskets li{grid-template-columns:auto auto minmax(0,1fr) auto}}

.baskets .price-q input{flex:0 1 84px;width:84px;height:32px;padding:0 8px;font-size:var(--fs-sm)}

/* narrow cards: price, quantity and value still share one line (smaller box, tighter gaps); a one-item basket then needs no second total in the footer */
.baskets li{column-gap:6px}
.baskets .price-q input{flex:0 1 68px;width:68px;padding:0 6px}
.baskets li > .lv{min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
@container (max-width:480px){.baskets li > .lv{display:block}.baskets li{grid-template-columns:auto auto minmax(0,1fr) auto auto}}
@container (max-width:299px){.baskets li > .lv{display:none}.baskets li{grid-template-columns:auto auto minmax(0,1fr) auto}}
@container (min-width:300px){.basket.one .basket-acts{flex-basis:100%}}

.baskets li > .lv{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.baskets li .stepper .qty-in{width:44px}
.baskets li .stepper button{width:26px}

/* the free room in the price row goes to the price box (up to a sensible size); the amount carries its own info icon */
.baskets .price-q input{flex:1 1 84px;width:auto;min-width:68px;max-width:130px}
.baskets li > .lv{display:inline-flex;align-items:center;gap:4px}
.baskets li > .lv .info-tip{display:inline-grid;color:var(--text-3)}
.baskets li.off > .lv{visibility:hidden}
@container (max-width:299px){.baskets li > .lv{display:none}}
.baskets li > .price-q{width:100%;min-width:0;justify-self:stretch}
.baskets .price-q input{flex:1 1 68px;min-width:60px}
/* price, quantity and value read as one set: same size, same weight, same height, same centre line */
.baskets li .price-q input,.baskets li .stepper .qty-in,.baskets li > .lv,.baskets li > .lv [data-lvt]{font-family:var(--font-ui);font-size:14px;font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums}
.baskets li .price-q input{height:32px}
.baskets li .stepper{height:32px;align-items:center}
.baskets li .stepper .qty-in{height:32px;padding:0}
.baskets li > .lv{height:32px}
.baskets li > .price-q,.baskets li > .stepper,.baskets li > .lv{align-self:center}
.baskets li .stepper .qty-in{width:40px}
.baskets li .stepper button{width:24px}
/* Replenishment cards a little wider on desktop, so price, quantity and value sit comfortably */
@media (min-width:861px){.baskets{grid-template-columns:repeat(auto-fill,minmax(min(410px,100%),440px));justify-content:start}}
/* Replenishment line sizes follow the card: a small price box, a roomy quantity and amount; anything too long ends in "…" */
.baskets li{--pw:72px;--qw:64px;--lw:110px}
@container (max-width:419px){.baskets li{--pw:60px;--qw:52px;--lw:92px}}
@container (max-width:349px){.baskets li{--pw:56px;--qw:46px;--lw:64px}.baskets li > .lv .info-tip{display:none}}
.baskets li .price-q input{flex:0 0 var(--pw);width:var(--pw);min-width:0;max-width:none}
.baskets li .price-q span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baskets li .stepper .qty-in{width:var(--qw);min-width:0;text-overflow:ellipsis}
.baskets li > .lv{width:var(--lw);min-width:0;justify-content:flex-end;overflow:hidden}
.baskets li > .lv [data-lvt]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.logo small[data-brand-tag]{text-transform:uppercase}
.logo small[hidden]{display:none}
.icon-prev{width:72px;height:72px;border-radius:18px;object-fit:cover;background:var(--espresso);padding:6px;box-sizing:border-box}

/* logo and app icon side by side */
.brand-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px 24px;align-items:start}
.brand-pair .be-t{font-size:var(--fs-sm);color:var(--text-3)}
.brand-pair .logo-edit img{max-width:100%}
.brand-pair{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:18px 16px}
.brand-pair .logo-edit img{width:128px;height:128px;max-width:100%;object-fit:contain;border-radius:var(--r-md)}
.brand-pair .logo-edit img.icon-prev{background:var(--espresso);padding:14px;box-sizing:border-box;object-fit:contain}


/* parts of the system: a grid of switches, one tile each */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.mod-tile{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:background .15s,border-color .15s}
.mod-tile:has(input:checked){border-color:var(--copper-light);background:color-mix(in srgb,var(--copper) 6%,var(--surface))}
.mod-tile:not(:has(input:checked)){opacity:.72}
.mod-tile span{display:grid;gap:2px;min-width:0}
.mod-tile b{font-size:var(--fs-sm)}
.mod-tile small{color:var(--text-3);font-size:var(--fs-xs);line-height:1.35}
.mod-tile .sw{appearance:none;-webkit-appearance:none;flex:none;width:36px;height:20px;margin:2px 0 0;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background .15s}
.mod-tile .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.mod-tile .sw:checked{background:var(--copper)}
.mod-tile .sw:checked::after{transform:translateX(16px)}
.mod-tile .sw:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.mod-save{display:flex;justify-content:flex-end}
.mod-grid{grid-auto-rows:1fr}

/* licences */
.lics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.lic{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.lic .lic-kind{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lic h3{font-size:var(--fs-lg);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.25}
.lic .lic-no{margin:0;color:var(--text-2);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lic .lic-when{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.lic .lic-when b{font-size:var(--fs-md)}
.lic .lic-when span{color:var(--text-3);font-size:var(--fs-xs)}
.lic .lic-scope{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--text-2);font-size:var(--fs-sm)}
.lic .lic-cond{margin:4px 0 0;color:var(--text-3);font-size:var(--fs-xs);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.lic .edge-tip,.lic .info-tip{position:absolute;top:14px;right:14px}
.lic-set{border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 14px 12px;margin:0;display:grid;gap:10px}
.lic-set legend{padding:0 6px;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.lic-checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.lic-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);cursor:pointer}
.lic-check input{width:18px;height:18px;accent-color:var(--copper);flex:none}

/* registers */
.reg-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin-bottom:16px}
.reg-bar .field{margin:0}
.reg-bar .chips{align-self:flex-end}
.reg-t td small{font-size:var(--fs-xs)}
@media (max-width:760px){
  .reg-t thead{display:none}
  .reg-t,.reg-t tbody{display:block}
  .reg-t tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
  .reg-t td{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border:0;padding:2px 0;text-align:right}
  .reg-t td::before{content:attr(data-label);color:var(--text-3);font-size:var(--fs-xs);text-align:left;flex:none}
  .reg-t td:first-child{grid-column:1/-1;text-align:left}
  .reg-t td:first-child::before{display:none}
}

/* setup guide */
body.wiz-open{overflow:hidden}
.wiz-back{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--espresso-deep) 70%,transparent);backdrop-filter:blur(3px)}
.wiz{width:min(780px,100%);max-height:min(92vh,880px);display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-xl);box-shadow:var(--lift);overflow:hidden}
#wizBody{display:flex;flex-direction:column;min-height:0;max-height:inherit}
.wiz-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 8px;background:var(--copper-soft)}
.wiz-h small{color:var(--copper-ink);font-weight:var(--fw-bold)}
.wiz-h h2{margin:2px 0 0;font-size:var(--fs-xl)}
.wiz-steps{list-style:none;margin:0;padding:10px 24px 14px;display:flex;gap:6px;background:var(--copper-soft);border-bottom:1px solid var(--line)}
.wiz-steps li{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--text-3);font-size:var(--fs-xs)}
.wiz-steps li i{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);font-style:normal;font-weight:var(--fw-bold);background:var(--surface)}
.wiz-steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiz-steps li.on{color:var(--text);font-weight:var(--fw-bold)}
.wiz-steps li.on i{background:var(--copper);border-color:var(--copper);color:var(--on-dark)}
.wiz-steps li.done i{background:var(--green);border-color:var(--green);color:#fff}
.wiz-main{padding:20px 24px;display:grid;gap:14px;overflow-y:auto;align-content:start}
.wiz-f{display:flex;gap:10px;align-items:center;padding:14px 24px;border-top:1px solid var(--line);background:var(--surface-2)}
.wiz-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:10px}
.wiz-pack{display:grid;gap:3px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;position:relative}
.wiz-pack input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wiz-pack small{color:var(--text-3);font-size:var(--fs-xs)}
.wiz-pack.on,.wiz-pack:has(input:checked){border-color:var(--copper);background:color-mix(in srgb,var(--copper) 7%,var(--surface));box-shadow:0 0 0 1px var(--copper)}
.wiz-pack:has(input:focus-visible){outline:2px solid var(--copper);outline-offset:2px}
.wiz-checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.wiz-sum{margin:0;display:grid;gap:0}
.wiz-sum > div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.wiz-sum dt{color:var(--text-3);font-size:var(--fs-sm)}
.wiz-sum dd{margin:0;overflow-wrap:anywhere}
@media (max-width:600px){
  .wiz-back{padding:0;place-items:stretch}
  .wiz{width:100%;max-height:none;height:100%;border-radius:0}
  .wiz-steps li span{display:none}.wiz-steps li{flex:none}.wiz-steps{justify-content:center}
  .wiz-sum > div{grid-template-columns:1fr;gap:2px}
  .wiz-h,.wiz-main,.wiz-f,.wiz-steps{padding-left:16px;padding-right:16px}
}
.wiz,#wizBody,.wiz-main,.wiz-main > *,.wiz .lic-set{min-width:0}
.wiz .lic-set input:not([type=checkbox]){width:100%}
.wiz{max-width:100vw}

/* bottle counting: sealed bottles and open bottles in tenths on one line */
.bt-in{display:inline-flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.bt-in label{display:grid;gap:2px;font-size:var(--fs-xs);color:var(--text-3)}
.bt-in input{width:78px;height:36px;text-align:right}
.bt-in .bt-t{min-width:96px;text-align:right;font-size:var(--fs-sm);padding-bottom:8px}

/* hookah sessions */
.hks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.hk{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.hk .hk-ref{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px}
.hk h3{margin:0;font-size:var(--fs-lg);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.hk .hk-time{margin:0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.hk .hk-time span{color:var(--text-3);font-size:var(--fs-xs)}
.hk .hk-uses{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--fs-sm)}
.hk .hk-uses li{display:flex;justify-content:space-between;gap:10px}
.hk .hk-log{margin:2px 0 0;color:var(--text-3);font-size:var(--fs-xs);line-height:1.4}
.hk .edge-tip,.hk .info-tip{position:absolute;top:14px;right:14px}
.hk-rows{display:grid;gap:10px}
.hk-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}
/* organisation summary: the logo, name and the setup guide button wrap instead of running off a narrow screen */
.org-sum{flex-wrap:wrap}
.org-sum > div{min-width:0;flex:1 1 180px}
.org-sum #runGuide{flex:none;margin-left:auto}
@media (max-width:600px){.org-sum #runGuide{width:100%;margin-left:0}}

/* outlets */
.outlet-box{padding:0 12px 10px}
.outlet-box .field{display:grid;gap:4px;margin:0;font-size:var(--fs-xs);color:var(--on-dark-2)}
.outlet-box .ol-sel{width:100%;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(230,207,143,.4);color:var(--on-dark)}
.outlet-box .ol-sel option{color:var(--text);background:var(--surface)}
.ols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.ol{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.ol .ol-kind{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px}
.ol h3{margin:0;font-size:var(--fs-lg)}
.ol .ol-addr{margin:0;color:var(--text-2);font-size:var(--fs-sm);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ol .ol-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ol .ol-stats div{display:grid;gap:2px;background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px}
.ol .ol-stats b{font-size:var(--fs-lg)}.ol .ol-stats small{color:var(--text-3);font-size:var(--fs-xs)}
.ol .ol-areas{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.ol .edge-tip,.ol .info-tip{position:absolute;top:14px;right:14px}
/* on phones the menu is a drawer: the outlet switcher lives inside it and stays out of the top bar */
@media (max-width:860px){.side:not(.open) > .outlet-box{display:none}.side.open > .outlet-box{width:100%;box-sizing:border-box;padding:0 0 10px}}

/* food safety */
.sfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.sf{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.sf .sf-kind{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px}
.sf h3{margin:0;font-size:var(--fs-lg);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.sf .sf-line{margin:0;font-size:var(--fs-sm)}
.sf .sf-count{color:var(--text-3);font-size:var(--fs-xs)}
.sf .edge-tip,.sf .info-tip{position:absolute;top:14px;right:14px}
.sf-steps{display:grid;gap:10px}

/* supplier bills */
.iv-sum{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-bottom:16px}
.iv-chip,.iv-owed{display:grid;gap:2px;text-align:left;padding:10px 14px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--lift-sm);border:1px solid transparent;color:var(--text);font:inherit;min-width:0}
.iv-chip{cursor:pointer}.iv-chip.on{border-color:var(--copper);background:var(--surface-2)}
.iv-chip span,.iv-owed span{font-size:var(--fs-xs);color:var(--text-3)}
.iv-chip b,.iv-owed b{font-size:var(--fs-lg)}
.iv-owed{margin-left:auto}
.ivs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.iv{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.iv .iv-kind{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv .amt{font-size:var(--fs-xl)}
.iv .iv-line{margin:0;font-size:var(--fs-sm)}
.iv .iv-match{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.iv .iv-matched{color:var(--green)}.iv .iv-over{color:var(--red)}.iv .iv-under{color:var(--amber)}
.iv .edge-tip,.iv .info-tip{position:absolute;top:14px;right:14px}
.iv-age{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.iv-age div{display:grid;gap:2px;background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px}
.iv-age small{color:var(--text-3);font-size:var(--fs-xs)}
.iv-sup{display:grid;gap:6px;margin-top:6px}
.iv-sup div{display:flex;justify-content:space-between;gap:10px;min-width:0}
.iv-sup span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* outlet comparison */
td.cmp-best{color:var(--green);font-weight:var(--fw-bold)}td.cmp-worst{color:var(--red);font-weight:var(--fw-bold)}

/* hookah blends and coal */
.hk .hk-blend{margin:0;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.hk .hk-coal{margin:0;font-size:var(--fs-xs);color:var(--text-3)}.hk .hk-coal.due{color:var(--amber);font-weight:var(--fw-bold)}

/* register layout form */
.reg-cols{display:grid;gap:8px}
.reg-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.reg-col input[type=text],.reg-col input:not([type]){min-width:0;width:100%}
@media (max-width:480px){.reg-col{grid-template-columns:1fr}}

/* photos at the dock */
.rcv-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.rcv-row .btn{margin-left:auto}
.rcv-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rcv-thumb{position:relative;margin:0;width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.rcv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcv-thumb button{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:12px;line-height:1;padding:0}

/* nutrition fields */
.nut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}

/* entries waiting to send */
.sync-pill{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:60;height:38px;padding:0 14px;border:0;border-radius:19px;background:var(--turmeric-ink,#8a6100);color:#fff;font:inherit;font-size:var(--fs-sm);box-shadow:var(--lift-sm);cursor:pointer}
.sync-pill.bad{background:var(--red)}
.sync-list{display:grid;gap:8px}
.sync-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm)}
.sync-row>div{min-width:0}.sync-err{color:var(--red);font-size:var(--fs-xs)}

/* guest list */
.gl-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gl-add{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;gap:8px;margin-top:12px}
.gl-add input{min-width:0;height:38px}

/* right-to-left reading */
html[dir="rtl"] .side{margin:12px 12px 12px 0}
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .sync-pill{left:auto;right:max(12px,env(safe-area-inset-right,0px))}
html[dir="rtl"] .rcv-row .btn,html[dir="rtl"] .iv-owed,html[dir="rtl"] .shown{margin-left:0;margin-right:auto}
html[dir="rtl"] .edge-tip,html[dir="rtl"] .info-tip{left:14px;right:auto}
html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}
html[dir="rtl"] th.r,html[dir="rtl"] td.r{text-align:left}

/* custom fields */
.cf-groups{display:grid;gap:18px}.cf-group{display:grid;gap:8px}.cf-group h3{margin:0;font-size:var(--fs-md,15px)}
.cf-set .cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cf-slot:empty{display:none}

/* transfers between outlets */
.trs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.tr{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.tr .tr-ref{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px}
.tr h3{margin:0;font-size:var(--fs-lg)}
.tr .tr-lines{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:var(--fs-sm)}
.tr .tr-lines li{display:flex;justify-content:space-between;gap:10px;min-width:0}.tr .tr-lines li span{min-width:0;overflow-wrap:anywhere}
.tr .tr-log{margin:2px 0 0;color:var(--text-3);font-size:var(--fs-xs);line-height:1.4}
.tr .edge-tip,.tr .info-tip{position:absolute;top:14px;right:14px}
.tr-fields{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tr-fields input{width:84px}.tr-fields select{max-width:150px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* rosters */
.rs-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:14px}
.rs-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rs-nav b{min-width:0}
.rs-out select{height:38px}.rs-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.rs-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.rs-sum div{display:grid;gap:2px;background:var(--surface);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--lift-sm)}.rs-sum small{color:var(--text-3);font-size:var(--fs-xs)}.rs-sum b{font-size:var(--fs-lg)}
.rs-t th small{display:block;font-weight:400;color:var(--text-3)}.rs-t td{vertical-align:top;min-width:92px}.rs-t .today{background:color-mix(in srgb,var(--copper) 7%,transparent)}
.rs-chip{display:grid;gap:0;width:100%;text-align:left;margin-bottom:4px;padding:4px 8px;border:1px solid var(--line-2,var(--line));border-left:3px solid var(--green);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.rs-chip.draft{border-style:dashed;border-left-color:var(--text-3)}.rs-chip small{color:var(--text-3)}
.rs-add{border:1px dashed var(--line);background:none;color:var(--text-3);border-radius:var(--r-sm);width:100%;height:24px;cursor:pointer;font:inherit;opacity:.55}.rs-add:hover,.rs-add:focus-visible{opacity:1}
.rs-rate{display:block;margin-top:2px;border:0;background:none;color:var(--text-3);font:inherit;font-size:var(--fs-xs);cursor:pointer;padding:0;text-decoration:underline dotted}

/* training */
.trns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px;grid-auto-rows:1fr}
.trn{--cx:18px;--cy:14px;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--lift-sm);text-align:left;height:100%}
.trn .trn-who{color:var(--text-3);font-size:var(--fs-xs);padding-right:26px}.trn h3{margin:0;font-size:var(--fs-lg)}
.trn .trn-line{margin:0;font-size:var(--fs-sm)}.trn .edge-tip,.trn .info-tip{position:absolute;top:14px;right:14px}

/* tasks and handover */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;align-items:start}
.tk-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-bottom:12px}.tk-bar i{display:block;height:100%;background:var(--green)}
.tk-list{display:grid;gap:6px}
.tk-task{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;min-width:0}
.tk-task input{width:20px;height:20px;accent-color:var(--green);flex:none}.tk-t{display:grid;min-width:0;flex:1}.tk-t b{font-weight:var(--fw-bold);overflow-wrap:anywhere}
.tk-task.done .tk-t b{text-decoration:line-through;color:var(--text-3)}
.tk-add{display:flex;gap:8px;margin-top:12px}.tk-add input{flex:1;min-width:0;height:38px}
.tk-notes{display:grid;gap:10px;margin-top:12px}
.tk-note{display:grid;gap:4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--line)}
.tk-note.new{border-left-color:var(--amber)}.tk-note.pinned{border-left-color:var(--copper);background:color-mix(in srgb,var(--copper) 7%,var(--surface-2))}
.tk-note p{margin:0;overflow-wrap:anywhere}.tk-na{display:flex;gap:6px;flex-wrap:wrap}

/* staff meals */
.sm-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px}
.sm-p{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--green);min-width:0}
.sm-p.over{border-left-color:var(--red)}.sm-p small{color:var(--red)}.sm-p .btn{justify-self:start;margin-top:4px}

/* profit and loss */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;margin-top:16px;align-items:start}
tr.fn-top td{border-bottom:2px solid var(--line)}
.pos{color:var(--green)}.neg{color:var(--red)}

/* menu engineering */
.me-chart{min-height:260px}.me-key{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-3);margin-top:6px}.me-key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.tag.me-tag-star{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}.tag.me-tag-plowhorse{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.tag.me-tag-puzzle{background:color-mix(in srgb,var(--copper) 18%,transparent);color:var(--copper)}.tag.me-tag-dog{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}

/* scanning */
.sc-view{border-radius:var(--r-md);overflow:hidden;background:#000;max-height:260px}.sc-view video{width:100%;max-height:260px;object-fit:cover;display:block}

/* forecast ordering */
.fc-spark{display:inline-flex;gap:2px;align-items:flex-end;height:24px}.fc-spark i{display:block;width:5px;background:var(--copper);border-radius:1px;opacity:.8}
.fc-pick{display:inline-flex;gap:8px;align-items:center;cursor:pointer}.fc-pick input{width:18px;height:18px;accent-color:var(--copper)}

/* summary tiles on the newer pages: the same tiles as everywhere else, filling the row by their own width */
.tiles.tiles-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));margin:0 0 16px}
.tiles-auto .tile{padding:14px 16px;gap:6px}
.tiles-auto .tile .val{font-size:var(--fs-xl);margin-top:0}

/* pickers that stay in the page bar (a recipe, a bar) are as tall as the buttons beside them */
.toolbar > label.field:not([data-filter]){min-height:38px;box-sizing:border-box}
.toolbar > label.field:not([data-filter]) select{height:100%;min-height:0;border:0;background:none}
@media (max-width:600px){
  .tiles.tiles-auto{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tiles-auto .tile{min-height:0;padding:10px 12px;gap:2px}
  .tiles-auto .tile .lbl{font-size:var(--fs-xs)}
  .tiles-auto .tile .val{font-size:var(--fs-lg)}
}
@media (min-width:601px){.tiles-auto .tile{min-height:0}}

/* tables on the newer pages: one small card per row on a phone */
@media (max-width:760px){
  .tablewrap:has(> table.kstack){overflow:visible}
  table.t.kstack,table.t.kstack tbody{display:block;width:100%;min-width:0}
  table.t.kstack thead{display:none}
  table.t.kstack tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
  table.t.kstack tr:last-child{border-bottom:0}
  table.t.kstack td{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border:0;padding:2px 0;text-align:right!important;min-width:0}
  table.t.kstack td::before{content:attr(data-label);color:var(--text-3);font-size:var(--fs-xs);text-align:left;flex:none}
  table.t.kstack td:first-child{display:block;grid-column:1/-1;text-align:left!important;font-weight:var(--fw-bold)}
  table.t.kstack td:first-child::before{display:none}
  table.t.kstack td:empty,table.t.kstack td:last-child:has(button:only-child){grid-column:1/-1;justify-content:flex-start}
  table.t.kstack td:last-child:has(button:only-child)::before,table.t.kstack td:empty{display:none}
}

/* panel headings with several buttons wrap instead of pushing the panel wider */
.panel-h{flex-wrap:wrap}
.panel-h > h2,.panel-h > div:first-child{min-width:0}
@media (max-width:760px){
  table.t.kstack td{flex-wrap:wrap}
  table.t.kstack td::before{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
  table.t.kstack td>*{min-width:0;max-width:100%}
}
.seg{flex-wrap:wrap}
.seg button{white-space:nowrap}

/* the card used across the newer pages: the Licences card, more compact, with its facts in two columns */
.trns.kcs{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px;grid-auto-rows:auto;align-items:stretch}
.trn.kc{padding:14px 14px 10px;--cx:14px;--cy:10px;gap:3px;height:auto}
.kc h3{font-size:var(--fs-md);line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;padding-right:0}
.kc h3 .kc-note{position:static;display:inline-flex;vertical-align:middle;margin-left:6px}
.kc .kc-sub{margin:0;font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin:4px 0 0}
.kc-rows>div{display:flex;flex-direction:column;min-width:0}
.kc-rows dt{font-size:var(--fs-xs);color:var(--text-3)}
.kc-rows dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-rows .neg dd{color:var(--red)}.kc-rows .pos dd{color:var(--green)}
.kc .card-f{margin-top:auto;padding-top:8px;gap:6px}
.kc .card-f .btn{padding-inline:10px}
/* tighter spacing on the newer pages' panels and tiles */
.view .tiles-auto{margin-bottom:12px}
.kc-list{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--line);display:grid;gap:2px}
.kc-list li{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);min-width:0}
.kc-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.kc-list li b{font-weight:var(--fw-medium);white-space:nowrap}
.kc-bar{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin:-4px 0 14px}
.kc-bar i{display:block;height:100%;border-radius:6px;background:var(--green)}.kc-bar i.bad{background:var(--red)}
.kc .kc-text{margin:0;font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.kc-empty{margin:0 0 6px;font-size:var(--fs-sm)}
.view .trns.kcs + .menu-h,.view .kc-empty + .menu-h,.view .tiles-auto + .menu-h{margin-top:22px}
.view .menu-h + .trns.kcs,.view .menu-h + .kc-empty{margin-top:8px}

/* every card keeps room for two lines above (the small line and the name) and for two rows of buttons, so cards in a row line up whatever they hold */
.kc .trn-who{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.3;min-height:2.6em}
.kc h3{min-height:2.5em;align-content:start}
.kc .card-f{min-height:80px;flex-wrap:wrap;align-content:flex-start}
/* nothing in a card spills over its neighbour: every block keeps its height, and text that does not fit ends in "..." after two lines */
.kc>*{flex-shrink:0}
.kc-rows dd{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;line-height:1.3;overflow-wrap:anywhere}
.kc-rows dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc .kc-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal}
.kc-list li span{overflow:hidden;text-overflow:ellipsis}
/* the button band always has room for two rows of buttons (2 x 34px, the gap, and the band's own padding), so every card in a grid ends at the same place */
.kc .card-f{min-height:104px;box-sizing:border-box;align-content:flex-start;max-height:104px;overflow:hidden}
.kc .card-f .btn{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the page bar of the newer pages sits on the right, like the older pages: search, sort and filter, then the range buttons, all centred on one line */
.toolbar[data-kit]{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.toolbar[data-kit] > .fm-btns,.toolbar[data-kit] > .seg,.toolbar[data-kit] > .result-count{margin-left:0;margin-right:0;align-self:center}
.toolbar[data-kit] > .result-count{display:inline-flex}
.toolbar[data-kit] .seg{align-items:center}
.toolbar[data-kit] .pg-search,.toolbar[data-kit] .icon-btn{height:38px;box-sizing:border-box}

/* the table view of the card pages */
.kc-table{margin:0 0 6px}
.kc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--line-2)}
.kc-dot-bad{background:var(--red)}.kc-dot-warn{background:var(--turmeric,#c9a24a)}.kc-dot-ok{background:var(--green)}
.kc-table th.r,.kc-table td.r{text-align:right}
.kc-table td .btn{margin-left:6px}
.toolbar[data-kit] .kc-view{height:38px;width:38px}
@media (max-width:760px){
  .kc-table td .btn{margin-left:0;margin-right:6px}
}
.kc .card-f .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* the button band is one row tall; when any card in a grid needs two rows, every card in that grid gets two, so they all end at the same place */
.kc .card-f{min-height:60px;max-height:none;overflow:visible;box-sizing:border-box;align-content:flex-start}
.trns.kcs.two-rows .card-f{min-height:104px}
@media (max-width:760px){
  .kc-table table.kstack tr{position:relative}
  .kc-table table.kstack td:first-child{padding-right:84px}
  .kc-table table.kstack td[data-label="Actions"]{position:absolute;top:6px;right:0;grid-column:auto;padding:0;gap:4px}
  .kc-table table.kstack td[data-label="Actions"]::before{display:none}
}
@media (max-width:760px){
  .kc-table table.kstack td[data-label="Actions"]{width:max-content;flex-wrap:nowrap}
  .kc-table table.kstack td[data-label="Actions"]>*{max-width:none;flex:none}
}
@media (max-width:760px){
  .kc-table table.kstack td[data-label="Actions"]{position:static;width:auto;grid-column:1/-1;justify-content:flex-start;padding:4px 0 0}
  .kc-table table.kstack td[data-label="Actions"]::before{display:none}
  .kc-table table.kstack td:first-child{padding-right:0}
}

/* the page bar of the card pages matches Raw Materials: the count on the left, then search, sort and filter, then the Cards or Table switch */
.toolbar[data-kit] > .grow{flex:1}
.toolbar[data-kit] > .result-count{align-self:center;margin-right:auto;display:inline-block}
.toolbar[data-kit] > [data-kit-layout]{margin-left:0}
/* the summary chips (Menu Engineering, Supplier Bills, Training) share one width, and the extra figure sits in the same row and grid as the chips */
.iv-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.iv-owed{margin-left:0}
html[dir="rtl"] .iv-owed{margin-right:0}
@media (max-width:600px){.iv-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* summary tiles on the newer pages: one slim row of small tiles */
.tiles.tiles-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin-bottom:12px}
.tiles-auto .tile{padding:9px 14px;gap:1px;border-radius:var(--r-md)}
.tiles-auto .tile .lbl{font-size:var(--fs-xs)}
.tiles-auto .tile .val{font-size:var(--fs-lg)}
.tiles-auto .tile .sub{font-size:var(--fs-xs)}
@media (max-width:600px){.tiles.tiles-auto{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the outlet switch in the side menu is one dark pill like the menu search: a shop icon and the outlet's name, no label box */
.outlet-box{padding:0 0 8px}
.outlet-q{cursor:pointer;position:relative}
.outlet-q svg{flex:none}
.outlet-q .ol-sel{all:unset;flex:1;min-width:0;font-size:var(--fs-sm);color:var(--on-dark);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d9c7b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center/12px no-repeat}
.outlet-q .ol-sel option{color:var(--text);background:var(--surface)}
.outlet-q:focus-within{outline:2px solid var(--copper-light);outline-offset:1px}
.kc{cursor:pointer}.kc .card-f,.kc .card-f *{cursor:auto}.kc .card-f button{cursor:pointer}.kc .card-f button:disabled{cursor:not-allowed}
.kc:hover{box-shadow:var(--lift)}

/* Registers: kind of licence, quick periods and own dates sit in one tidy row of equal-height controls */
.reg-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.reg-bar .field{height:38px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap}
.reg-kind{flex:0 1 300px;min-width:0}.reg-kind select{flex:1;min-width:0;border:0;background:none;height:100%;font-weight:600;text-overflow:ellipsis}
.reg-range span{color:var(--text-3)}.reg-range i{font-style:normal;color:var(--text-3)}
.reg-range input[type=date]{border:0;background:none;height:100%;padding:0;font:inherit;min-width:0;width:9.5em}
.reg-bar .seg{flex:0 0 auto}
@media (max-width:760px){.reg-bar{display:grid;grid-template-columns:1fr;gap:8px}.reg-kind{flex:none}.reg-bar .seg{display:grid;grid-template-columns:1fr 1fr}.reg-range{flex-wrap:nowrap}.reg-range input[type=date]{flex:1;width:auto}}


/* the outlet switcher in the top bar (wide screens): the same height as the search and the other top bar buttons, on the light bar */
.outlet-box.in-bar{padding:0;flex:0 1 240px;min-width:150px}
.outlet-box.in-bar .outlet-q{height:42px;box-sizing:border-box;padding:0 12px;border-radius:14px;background:var(--surface);box-shadow:var(--lift-sm);color:var(--text-2);border:0}
.outlet-box.in-bar .outlet-q .ol-sel{color:var(--text);font-weight:600}
.outlet-box.in-bar .outlet-q:focus-within{outline:2px solid var(--copper);outline-offset:1px}
.outlet-box.in-bar .outlet-q .ol-sel{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a6a60' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center/12px no-repeat}

/* Phones and tablets: the outlet switcher sits in the header between the name and the menu button.
   The name comes first; when the room runs out the switcher shrinks and its text ends in "…". */
@media (max-width:860px){
  .side .logo{display:flex;align-items:center;gap:10px;min-width:0}
  .side .logo > div:not(.outlet-box){flex:0 1 auto;min-width:0;max-width:62%}
  .side .logo b{overflow:hidden;text-overflow:ellipsis;display:block}
  .side .logo > .outlet-box{flex:1 1 0;min-width:48px;max-width:190px;width:auto;padding:0;margin-left:auto;display:block!important}
  .side .logo > .outlet-box .outlet-q{display:flex!important;height:38px;box-sizing:border-box;padding:0 10px;gap:6px;min-width:0;overflow:hidden}
  .side .logo > .outlet-box .outlet-q svg{width:14px;height:14px}
  .side .logo > .outlet-box .ol-sel{min-width:0;width:100%;font-size:var(--fs-xs)}
  .side .logo > .nav-toggle{margin-left:0;flex:none}
  .side .logo > .outlet-box + .nav-toggle{margin-left:0}
}

@media (max-width:860px){
  /* with the menu open the switcher drops to its own full-width line under the name */
  .side.open .logo{flex-wrap:wrap}
  .side.open .logo > div:not(.outlet-box){flex:1 1 0;max-width:none}
  .side.open .logo > .outlet-box{order:5;flex:1 1 100%;max-width:none;margin:2px 0 0}
  .side.open .logo > .nav-toggle{margin-left:auto}
}

/* Medium screens (small laptops, tablets on their side): the switcher in the top bar shrinks to an icon so every top bar button still fits.
   Tapping it opens the same list; a small dot says one outlet is chosen. */
@media (min-width:861px) and (max-width:1240px){
  .outlet-box.in-bar{flex:none;min-width:0;width:42px}
  .outlet-box.in-bar .outlet-q{width:42px;padding:0;justify-content:center;position:relative}
  .outlet-box.in-bar .outlet-q .ol-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;cursor:pointer}
  .outlet-box.in-bar.picked .outlet-q::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px var(--surface)}
}
@media (min-width:861px) and (max-width:1240px){
  .topbar{gap:8px;padding-left:20px;padding-right:20px}
  .topbar .btn{padding-left:12px;padding-right:12px}
  .topbar .site{min-width:0;max-width:140px;overflow:hidden}
  .topbar .site > *{min-width:0}
}

/* Medium screens: the account button shows only the photo or initials; hovering gives the name and the menu has it too */
@media (min-width:861px) and (max-width:1240px){
  .topbar .acct-name{display:none}
  .topbar .site{max-width:none}
}

/* Medium screens: Reorder, Scan and Receive goods become icon buttons, the same size as the search; hovering gives the name */
@media (min-width:861px) and (max-width:1240px){
  .topbar > .btn{width:42px;height:42px;padding:0;display:inline-grid;place-items:center;flex:none}
  .topbar > .btn .bt{display:none}
}

/* Phones: the switcher in the header is just an icon (a dot says one outlet is chosen); tapping it opens the list. In the open menu it is the full dropdown. */
@media (max-width:600px){
  .side:not(.open) .logo > .outlet-box{flex:none;width:42px;min-width:42px;max-width:42px;margin-left:auto}
  .side:not(.open) .logo > .outlet-box .outlet-q{width:42px;height:42px;padding:0;justify-content:center;position:relative;border-radius:12px}
  .side:not(.open) .logo > .outlet-box .outlet-q svg{display:block;width:18px;height:18px}
  .side:not(.open) .logo > .outlet-box .ol-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0}
  .side:not(.open) .logo > .outlet-box.picked .outlet-q::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 2px var(--espresso-deep,#2b1710)}
}
/* A long restaurant name takes up to two lines and a slightly smaller size in the phone and tablet header, and ends in "…" only after that. */
@media (max-width:860px){
  #side .logo b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.15;overflow-wrap:anywhere;font-size:clamp(12px,3.4vw,var(--fs-md))}
  #side .logo b.long{font-size:clamp(11px,3vw,13px)}
}

/* the outlet list: our own menu, in the house style */
.ol-sel{text-align:left}
.outlet-menu{position:fixed;z-index:80;box-sizing:border-box;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 44px rgba(43,23,16,.28),0 2px 6px rgba(43,23,16,.1);max-height:min(60vh,420px);overflow:auto;animation:olIn .14s ease-out}
.ol-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:6px 10px;border-radius:11px;cursor:pointer;color:var(--text);font-size:var(--fs-sm);font-weight:600}
.ol-opt:hover,.ol-opt:focus-visible{background:color-mix(in srgb,var(--copper) 10%,var(--surface))}
.ol-opt:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.ol-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--copper) 10%,var(--surface));color:var(--copper)}
.ol-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-tag{flex:none;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--copper) 14%,var(--surface));color:var(--copper);font-size:11px;font-weight:700}
.ol-tick{flex:none;color:var(--copper);opacity:0}
.ol-opt.on{background:color-mix(in srgb,var(--copper) 8%,var(--surface))}.ol-opt.on .ol-ico{background:var(--copper);color:#fff}.ol-opt.on .ol-tick{opacity:1}
@keyframes olIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.outlet-menu{animation:none}}

/* The open menu on phones and tablets: the outlet switcher, Reorder, Scan and Receive goods are four icon buttons in one row */
@media (max-width:860px){
  .side.open > .topbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .side.open > .topbar .search{display:none}
  .side.open > .topbar > .btn{width:100%;height:46px;padding:0;display:grid;place-items:center;border-radius:12px}
  .side.open > .topbar > .btn .bt{display:none}
  .side.open > .topbar > .outlet-box{display:block!important;width:100%;max-width:none;min-width:0;padding:0;margin:0;flex:none}
  .side.open > .topbar > .outlet-box .outlet-q{display:flex!important;width:100%;height:46px;padding:0;justify-content:center;position:relative;border-radius:12px;background:transparent;border:1px solid rgba(230,207,143,.5);box-sizing:border-box}
  .side.open > .topbar > .outlet-box .outlet-q svg{display:block;width:18px;height:18px;color:var(--on-dark)}
  .side.open > .topbar > .outlet-box .ol-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;background:none}
  .side.open > .topbar > .outlet-box.picked .outlet-q::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 2px var(--espresso-deep,#2b1710)}
}

/* the live dot beside the outlet switcher: a small, fully solid dot with a soft shadow. It stays solid; it breathes in size to show it is live. */
.live-dot{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;cursor:default}
.live-dot i{width:7px;height:7px;border-radius:50%;background:#8f8780;box-shadow:0 1px 3px rgba(43,23,16,.45)}
.live-dot[data-state=on] i{background:#17a34a;box-shadow:0 1px 4px rgba(23,163,74,.75);animation:liveBreath 1.5s ease-in-out infinite}
.live-dot[data-state=off] i{background:#dc2f21;box-shadow:0 1px 4px rgba(220,47,33,.7)}
@keyframes liveBreath{0%,100%{transform:scale(1)}50%{transform:scale(.62)}}
@media (prefers-reduced-motion:reduce){.live-dot[data-state=on] i{animation:none}}
.side .logo > .live-dot{margin-left:auto}.side .logo > .live-dot + .outlet-box{margin-left:0}

/* Store access: one card per person with a chip for each outlet */
.sa-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.sa-chip{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:var(--fs-sm);font-weight:600;cursor:pointer;max-width:100%;box-sizing:border-box}
.sa-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sa-chip span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-chip svg{display:none;flex:none}
.sa-chip.on{background:color-mix(in srgb,var(--copper) 12%,var(--surface));border-color:var(--copper);color:var(--copper)}.sa-chip.on svg{display:inline}
.sa-chip:focus-within{outline:2px solid var(--copper);outline-offset:2px}
.sa-chip.off{opacity:.65;cursor:not-allowed}.sa-chip.off input{cursor:not-allowed}
/* breathing room around the summary tiles: below the control panel above them, and above the heading that follows */
.panel + .tiles.tiles-auto{margin-top:16px}
.tiles.tiles-auto + .menu-h,.tiles.tiles-auto + .panel{margin-top:22px}
.toolbar + .tiles.tiles-auto{margin-top:14px}

/* every dropdown opens the app's own menu (selects.js) */
.sel-menu{z-index:300}
.sel-menu .ol-opt{min-height:40px}
.sel-menu .ol-opt[disabled]{opacity:.45;cursor:not-allowed}
.sel-group{padding:10px 10px 4px;font-size:var(--fs-xs);font-weight:700;color:var(--text-3)}
select[aria-expanded=true]{border-color:var(--copper)}

/* date and date-and-time fields: our own calendar (dates.js) and a calendar icon in place of the browser's */
input[type=date],input[type=datetime-local]{padding-right:36px;background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a4552b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none}
input[type=date][aria-expanded=true],input[type=datetime-local][aria-expanded=true]{border-color:var(--copper)}
.date-menu{z-index:300;padding:12px;max-height:none;overflow:visible}
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dp-title{all:unset;flex:1;text-align:center;font-weight:700;font-size:var(--fs-md);padding:6px 8px;border-radius:10px;cursor:pointer;color:var(--text)}
.dp-title:hover,.dp-title:focus-visible{background:color-mix(in srgb,var(--copper) 10%,var(--surface))}
.dp-nav{all:unset;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;cursor:pointer;color:var(--text-2)}
.dp-nav:hover,.dp-nav:focus-visible{background:color-mix(in srgb,var(--copper) 10%,var(--surface));color:var(--copper)}
.dp-week,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-week span{text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--text-3);padding:4px 0}
.dp-day{all:unset;box-sizing:border-box;display:grid;place-items:center;height:38px;border-radius:11px;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.dp-day.out{color:var(--text-3);opacity:.55}
.dp-day:hover{background:color-mix(in srgb,var(--copper) 12%,var(--surface))}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--copper)}
.dp-day.on{background:var(--copper);color:#fff;opacity:1}
.dp-day:focus-visible,.dp-cell:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.dp-day[disabled]{opacity:.28;cursor:not-allowed}
.dp-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dp-cell{all:unset;box-sizing:border-box;display:grid;place-items:center;height:44px;border-radius:12px;cursor:pointer;font-weight:600;color:var(--text)}
.dp-cell:hover{background:color-mix(in srgb,var(--copper) 12%,var(--surface))}.dp-cell.today{box-shadow:inset 0 0 0 1.5px var(--copper)}.dp-cell.on{background:var(--copper);color:#fff}
.dp-time{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-tl{margin-right:auto;font-weight:700;color:var(--text-2)}
.dp-spin{display:grid;justify-items:center;gap:2px}
.dp-spin button{all:unset;display:grid;place-items:center;width:44px;height:24px;border-radius:8px;cursor:pointer;color:var(--text-2)}
.dp-spin button:hover{background:color-mix(in srgb,var(--copper) 12%,var(--surface));color:var(--copper)}
.dp-n{width:44px;height:38px;box-sizing:border-box;text-align:center;font-size:var(--fs-lg,18px);font-weight:700;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.dp-foot{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.dp-foot .grow{flex:1}
.dp-link{all:unset;cursor:pointer;font-weight:700;font-size:var(--fs-sm);color:var(--copper);padding:6px 4px;border-radius:8px}
.dp-link:hover,.dp-link:focus-visible{text-decoration:underline}
/* the From to To field on Registers: both dates and the word between sit centred in one box, without a calendar icon in each (the calendar opens on click) */
.reg-range{justify-content:center;gap:10px}
.reg-range input[type=date]{padding:0;background-image:none;text-align:center;width:8.6em;cursor:pointer}
.reg-range input[type=date]::-webkit-datetime-edit{padding:0;text-align:center}
.reg-range input[type=date]:focus{outline:none;border:0}
.reg-range:focus-within{border-color:var(--copper)}
/* every date and date-and-time field looks the same: the text centred, the calendar icon on the right, equal room on both sides so the text stays truly central */
input[type=date],input[type=datetime-local]{text-align:center;padding-left:36px;padding-right:36px;min-width:0;box-sizing:border-box}
input[type=date]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit{padding:0;text-align:center}
input[type=date]::-webkit-datetime-edit-fields-wrapper,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type=date]:focus,input[type=datetime-local]:focus{outline:none}
.reg-range input[type=date]{padding:0}
/* a date-and-time needs more room than half a form row, so it takes the whole row */
.two > label:has(> input[type=datetime-local]){grid-column:1/-1}

/* Replenishment cards: two items show at a time and the rest scroll inside the card, so cards stay the same size; every card shows its order total */
.baskets .basket ul{max-height:226px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scrollbar-gutter:stable}
.baskets .basket ul::-webkit-scrollbar{width:6px}.baskets .basket ul::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.baskets .basket.one ul{flex:1}
.baskets .lv.long{font-size:var(--fs-sm)}

/* a card that holds little in a row of fuller cards keeps its own height (balance.js) instead of showing a blank bottom */
.panel.short{align-self:start;height:auto;flex:none}
.stack > .panel.short,.grid-ov > .stack > .panel{align-self:stretch;width:auto}   /* inside a column the card keeps its own height but always fills the column */
/* sections follow each other with the same breathing room, never touching */
.view .setup-pair,.view .grid-ov,.view .admin-grid{margin-bottom:16px}
.view * + .menu-h{margin-top:22px}
.view .menu-h:first-child{margin-top:4px}
.view .menu-grid + *,.view .kcs + .pager,.view .pager{margin-top:16px}
/* receipt (stub) cards: the tinted foot band runs edge to edge like the other cards, with room around its buttons */
.stub{--cx:16px;--cy:14px}
.stub .card-f{padding-top:10px;padding-bottom:12px}

/* Replenishment cards open in a side panel (a full screen sheet on phones) with every item showing */
.baskets .basket{cursor:pointer}
.baskets .basket input,.baskets .basket button,.baskets .basket label{cursor:auto}.baskets .basket button,.baskets .basket .stepper button{cursor:pointer}
.baskets .basket:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.basket-modal{padding:4px 18px 18px}
.basket.in-modal{box-shadow:none;background:transparent;border-radius:0;display:flex;flex-direction:column;cursor:auto;height:auto}
.basket.in-modal ul{max-height:none;overflow:visible;padding:0}
.basket.in-modal .basket-f{border-radius:var(--r-lg,16px);margin-top:12px}
.basket-modal.baskets{display:block}

/* in the side panel each line says in words what the colour strip said on the card */
.basket.in-modal{border-left:0!important;--edge:transparent}
.basket.in-modal::before,.basket.in-modal::after{display:none!important}
.basket.in-modal li > div > .lvl{display:inline-block;margin:4px 0 0;padding:2px 9px;border-radius:99px;font-size:var(--fs-xs);font-weight:700;background:var(--surface-2);color:var(--text-2)}
.basket.in-modal li > div > .lvl.s-out,.basket.in-modal li > div > .lvl.s-crit{background:#fbdcd8;color:#a3281a}
.basket.in-modal li > div > .lvl.s-reorder{background:#f6e7bd;color:#7a5a0a}
.basket.in-modal li > div > .lvl.s-onorder{background:#e4ecf7;color:#2f5586}
.basket.in-modal li > div > .lvl.s-ok{background:#dcefe2;color:#1d6a3a}
.basket.in-modal li > div > .lvl-d{display:block;margin-top:3px;color:var(--text-3);font-size:var(--fs-xs)}
/* side panel lines: room between the stock figures and the status chip, and between lines */
.basket.in-modal li > div > .lvl{margin:6px 0 0 10px;vertical-align:middle}
.basket.in-modal li > div > .lvl-d{margin-top:6px}
.basket.in-modal li{padding:16px 0;row-gap:12px}
.basket-modal{padding:8px 24px 24px}
.basket.in-modal .basket-f{margin-top:18px}
/* Store access: a grid of ticks, one row per person and one column per outlet; short cards on a phone */
.sa-t th.c,.sa-t td.c{text-align:center;width:1%;padding-left:6px;padding-right:6px}
.sa-t td.c{white-space:nowrap}
.sa-t th{vertical-align:bottom}
.sa-t th:first-child,.sa-t td:first-child{max-width:0;min-width:150px}   /* the name column gives way first; names end in … */
.sa-oh{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:72px;overflow:hidden;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.25;margin:0 auto}
.sa-t td{padding-top:10px;padding-bottom:10px}
.sa-t tbody tr:hover{background:color-mix(in srgb,var(--copper) 5%,var(--surface))}
.sa-who{display:flex;align-items:center;gap:12px;min-width:0}
.sa-who > div{min-width:0}
.sa-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-who small{display:block;color:var(--text-3);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-dot{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);color:transparent;cursor:pointer;transition:background .12s,border-color .12s}
.sa-dot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sa-dot:hover{border-color:var(--copper)}
.sa-dot.on{background:var(--copper);border-color:var(--copper);color:#fff}
.sa-dot.implied{background:color-mix(in srgb,var(--copper) 16%,var(--surface));border-color:transparent;color:var(--copper)}
.sa-dot:focus-within{outline:2px solid var(--copper);outline-offset:2px}
.sa-dot.off{opacity:.6;cursor:not-allowed}.sa-dot.off input{cursor:not-allowed}
.sa-cards{display:grid;gap:10px}
.sa-card{padding:14px;border-radius:var(--r-lg,16px);background:var(--surface);box-shadow:var(--lift-sm);display:grid;gap:12px}
.sa-card .sa-chips{gap:6px}
.sa-card .sa-chip{min-height:34px;padding:0 11px;font-size:var(--fs-xs)}
/* Needs-action cards: the name keeps clear of the info icon and takes at most two lines, then ends in … */
.chipcard.edge > span:not(.edge-tip):not(.chip-f){min-width:0;padding-right:26px}
.chipcard.edge b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* Needs-action cards: photo and text both start at the top of the card, so names line up across a row whatever their length */
.chipcard.edge{align-items:start}
/* Delivery cards: the items start at the top of their area and scroll after three, like the reorder cards */
.docket ol{align-content:start;max-height:112px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scrollbar-gutter:stable}
/* Overview chart: zoom, move and day-count controls share one row with the range buttons */
.ck-bar .seg{margin-right:0}
.fl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-right:auto}
.fl-days{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);color:var(--text-2)}
.fl-days input{width:56px;border:0;background:none;text-align:right;font:inherit;font-weight:var(--fw-bold);color:var(--text);outline:none;-moz-appearance:textfield}
.fl-days input::-webkit-outer-spin-button,.fl-days input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fl-days:focus-within{border-color:var(--copper)}
.fl-tools .icon-btn:disabled{opacity:.4;cursor:not-allowed}
/* Delivery cards: the supplier line uses the full width under the number and the due chip, on two lines for every card, then ends in … */
.docket-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:10px;row-gap:2px}
.docket-h > div{display:contents}
.docket-h h3{grid-column:1;grid-row:1}
.docket-h .docket-eta{grid-column:2;grid-row:1;align-self:start}
.docket-h small{grid-column:1 / -1;grid-row:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35;min-height:calc(2 * 1.35em)}
.fl-tools .icon-btn{width:38px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--r-md)}
.fl-tools .icon-btn:hover:not(:disabled){border-color:var(--copper);color:var(--copper)}
.fl-tools .icon-btn svg{width:16px;height:16px}
/* Outlet cards: only the name, the address and one line of figures; the rest is in the panel that opens on click */
.ol{cursor:pointer;gap:6px;transition:box-shadow .15s}
.ol:hover,.ol:focus-visible{box-shadow:var(--lift)}
.ol:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.ol h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-right:26px}
.ol .ol-addr{-webkit-line-clamp:1;line-clamp:1}
.ol .ol-line{margin:auto 0 0;padding-top:8px;font-size:var(--fs-sm);color:var(--text-2)}
.ol .ol-line b{color:var(--text);font-size:var(--fs-md)}
.ols{grid-auto-rows:auto}
/* Card footers: the coloured strip at the bottom is as tall as one row of buttons (38 px + padding), whether or not the card has buttons */
.edge .card-f{min-height:64px;box-sizing:border-box}
/* Outlet cards: the name always has a two-line slot, so address and figures line up across every card */
.ol h3{line-height:1.25;min-height:calc(2 * 1.25em)}
/* Transfer cards: the "from → to" title always has a three-line slot and ends in … if longer, so every card lines up */
.tr h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;line-height:1.25;min-height:calc(3 * 1.25em)}
/* Scrollbars, everywhere: slim, rounded, no arrow buttons, in the app's own muted brown instead of the system grey bar */
html,*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-3) 42%,transparent) transparent}
.outlet-menu,.sel-menu,.fm-menu,#mqBox,#gqBox,.peek-b,.modal-box,.drawer{overscroll-behavior:contain}
.outlet-menu,.sel-menu{scrollbar-gutter:stable;padding-right:3px}
/* pager under card lists and tables on the newer pages: count on the left, page buttons on the right, like every other pager */
.kc-pager{margin-top:14px}
.kc-pager .pager{margin:0}
/* Supplier cards: the name starts at the same height on every card (two-line slot, from the top), whatever its length */
.biz-h{align-items:flex-start}
.biz-h > div{justify-content:flex-start}
.biz-h h3{min-height:calc(2 * 1.25em);line-height:1.25}
/* Hookah cards: the blend line keeps its place when a session has none, so the lines below line up across the row */
.hk .hk-blend{min-height:calc(var(--fs-sm) * 1.45)}
.hk .hk-coal{min-height:calc(var(--fs-xs) * 1.45)}


/* ---- Security Center ---- */
.sec-hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:20px 22px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg,14px)}
.sec-hero h2{margin:0 0 4px;font-size:var(--fs-lg,1.15rem)}.sec-hero p{margin:0}
.sec-score{width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;border:6px solid currentColor}
.sec-score .num{font-size:2rem;font-weight:700;line-height:1}.sec-score small{font-size:var(--fs-xs);color:var(--text-3)}
.sec-ok{color:#1f7a4d}.sec-warn{color:#b86e00}.sec-bad{color:#b3261e}
.sec-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.sec-check{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.sec-check p{margin:2px 0 4px;color:var(--text-2)}.sec-dot{width:10px;height:10px;border-radius:50%;background:currentColor;margin-top:7px}
.sec-tag{font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);white-space:nowrap}
.sec-policy{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin-top:12px}
@media (max-width:760px){.sec-hero{grid-template-columns:1fr;justify-items:start}.sec-checks{grid-template-columns:1fr}}


/* ---- icon buttons on small screens (icons.js) and rows that must never push the page sideways ---- */
.btn.btn-ic{width:38px;min-width:38px;padding:0;gap:0;display:inline-flex;align-items:center;justify-content:center;position:relative}
.btn.btn-ic svg{flex:none}
.btn.btn-ic .ic-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--text);color:var(--surface);font-size:10px;line-height:17px;text-align:center}
.card-f .btn.btn-ic,.docket-f .btn.btn-ic{flex:1 1 0;max-width:none;min-width:38px}
.rs-out,.rs-out select,.rs-bar>*{max-width:100%;min-width:0}
.rs-bar{max-width:100%}
@media (max-width:860px){.rs-out{flex:1 1 100%}.rs-out select{width:100%}}
.card-f .btn.btn-row-ico,.docket-f .btn.btn-row-ico{flex:1 1 0;width:auto;min-width:38px}

/* one-line lot search: an icon and the box, no label word and no second outline */
.rc-find{display:flex;align-items:center;gap:8px;padding:0 12px}
.rc-find svg{flex:none;color:var(--text-3)}
.rc-find input{flex:1;min-width:0;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:none!important}

/* pictures that stand in for the round letter marks in feeds and on supplier cards */
.bubble.bubble-ph{overflow:hidden;padding:0;background:none}
.bubble.bubble-ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.bubble img.bubble-ph,.mono.photo.bubble-ph{object-fit:cover}
img.bubble{object-fit:cover;padding:0;display:block}

/* Inbound this week: the whole order opens its details, and long item lists fold behind "+N more" */
#tl .po{cursor:pointer;transition:box-shadow .15s,border-color .15s}
#tl .po:hover,#tl .po:focus-visible{border-color:var(--copper,var(--line));box-shadow:0 2px 10px rgba(0,0,0,.08)}
.po-items .po-more{font:inherit;font-size:12px;font-weight:600;color:var(--copper,var(--text-2));background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.po-items [hidden]{display:none}

/* side drawers: a narrow one for a record or a short form, the wide one for tables */
@media (min-width:900px){.modal.sheet .modal-box:not(.size-lg){width:min(560px,94vw)}}

.mod-tile .mod-need{display:block;margin-top:2px;color:var(--copper,var(--text-3));font-weight:600}

.ph-url{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.ph-url[hidden]{display:none}.ph-url input{flex:1 1 220px;min-width:0;height:38px}
.ph-url-btn svg{flex:none}
.ph-find{display:grid;gap:10px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--surface))}.ph-find[hidden]{display:none}
.ph-q{display:flex;gap:8px}.ph-q input{flex:1 1 auto;min-width:0;height:38px}
.ph-free{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ph-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;max-height:320px;overflow:auto}.ph-res:empty{display:none}.ph-res.busy{opacity:.55;pointer-events:none}
.ph-pick{display:grid;gap:4px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;overflow:hidden;text-align:left;font:inherit;color:inherit}
.ph-pick img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line)}.ph-pick small{padding:0 8px 6px;font-size:11px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.ph-pick:hover,.ph-pick:focus-visible,.ph-pick.on{border-color:var(--brand,var(--accent,currentColor));outline:2px solid var(--brand,var(--accent,currentColor));outline-offset:-1px}
.ph-more{grid-column:1/-1;justify-self:center}.ph-note{margin:0;font-size:12.5px}.ph-paste summary{cursor:pointer;font-size:13px;color:var(--muted)}.ph-paste .ph-url{margin-top:6px}

/* the pointing hand on everything that can be clicked */
.is-click,.is-click *,[data-peekpo],[data-peekpo] *,[data-peeksup],[data-peeksup] *,[data-olopen],[data-olopen] *,[role=button],[role=button] *,summary{cursor:pointer}
.is-click input,.is-click select,.is-click textarea,[data-peekpo] input,[data-peeksup] input{cursor:text}
.is-click :disabled,.is-click [disabled]{cursor:not-allowed}

/* a drawer is one scrolling surface: the body grows with its content and the drawer scrolls only when the content is taller than the screen */
.modal.sheet .peek-b{max-height:none;overflow:visible}
@media (max-width:899px){.peek-b{max-height:none;overflow:visible}}

/* every side drawer matches the item drawer: 640px on desktop, whatever it holds */
.modal.sheet .modal-box,.modal.sheet .modal-box.size-lg,.modal.sheet .modal-box[data-size="wide"]{width:min(640px,100%)}
@media (max-width:860px){.modal.sheet .modal-box,.modal.sheet .modal-box.size-lg,.modal.sheet .modal-box[data-size="wide"]{width:100%}}
.modal.sheet .modal-box table{max-width:100%}
.modal.sheet .modal-box .tbl-wrap,.modal.sheet .modal-box .table-wrap{overflow-x:auto}

.eq-hist{border:1px solid var(--line);border-radius:var(--r-md,12px);padding:0 12px;margin-top:8px;background:var(--surface,transparent)}
.eq-hist>summary{cursor:pointer;padding:11px 0;font-weight:600;list-style:none}
.eq-hist>summary::-webkit-details-marker{display:none}
.eq-hist>summary::after{content:'+';float:right;font-weight:400}
.eq-hist[open]>summary::after{content:'−'}
.eq-hist-b{padding:0 0 12px}
.eq-hist-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.eq-hist-l li{display:grid;gap:2px;padding-left:12px;border-left:2px solid var(--line)}
.eq-hist-l small{color:var(--muted)}
#drawer > details.hist{margin:12px 20px 20px}

/* the heading of a drawer or dialog scrolls away with its content (only the Save / Cancel row stays in view) */
.modal-h{position:static}

/* photo buttons: one row, one height, text centred in every button and the hint on the same line */
.ph-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ph-row .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;line-height:1}
.ph-row small{line-height:1.3;flex:1 1 180px;min-width:0}

/* inside a drawer the total and the buttons share one row whether the order has one item or many */
@container (min-width:300px){.basket.one.in-modal .basket-acts{flex-basis:auto}}
.basket.in-modal .basket-f{flex-wrap:nowrap}
.basket.in-modal .basket-acts{flex:1 1 auto;flex-wrap:nowrap}

/* stock-take count sheet: one search (the sheet's own), a progress line, and count boxes that line up with their unit pickers */
.st-find{margin-left:auto}
.st-sum .panel-b{align-items:center}
.st-prog{height:6px;border-radius:99px;background:var(--line-2,var(--line));margin:12px 0 0;overflow:hidden}
.st-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--copper-light),var(--copper));transition:width .3s}
.st-t td{padding-block:12px}
.st-t .qty-unit{gap:8px}
.st-in{width:112px;height:38px}
.st-t td .qty-unit .unit-sel{height:38px;font-size:var(--fs-sm);min-width:76px}
.st-ok{text-align:right;white-space:nowrap}
.st-ok:not(:empty){color:var(--green-ink,var(--text-3))}
#v-stocktake:has(.st-find) .pg-search:not(.st-find){display:none}
.st-prog{flex:1 0 100%;margin:4px 0 0}

/* ---------- help: the ? button and the guide overlay ---------- */
.help-btn{width:40px;min-width:40px;padding:0;justify-content:center;align-items:center;display:inline-flex}
.help-ov{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:3vh 2vw}
.help-ov.on{display:grid}
.help-bk{position:absolute;inset:0;background:color-mix(in srgb,var(--espresso-deep) 62%,transparent);backdrop-filter:blur(2px);animation:helpFade .18s ease-out}
.help-box{position:relative;display:flex;flex-direction:column;width:min(1240px,96vw);height:min(94vh,980px);background:var(--canvas);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,8,3,.7);animation:helpIn .22s ease-out}
.help-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 14px 24px;background:linear-gradient(135deg,var(--espresso-2),var(--espresso-deep));color:var(--on-dark);flex:none}
.help-h small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--copper-light)}
.help-h h2{font-size:22px;color:var(--on-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.help-tools{display:flex;gap:8px;align-items:center}
.help-tools button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,248,240,.4);background:rgba(255,248,240,.08);color:var(--on-dark);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.help-tools button:hover{background:rgba(255,248,240,.2)}
.help-tools .help-x{width:38px;padding:0;justify-content:center;font-size:15px}
.help-fr{flex:1;width:100%;border:0;background:var(--canvas)}
body.help-open{overflow:hidden}
@keyframes helpIn{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes helpFade{from{opacity:0}to{opacity:1}}
@media (max-width:860px){.help-ov{padding:0}.help-box{width:100%;height:100%;border-radius:0}.help-tools button span{display:none}.help-tools button{width:38px;padding:0;justify-content:center}.help-h h2{max-width:48vw}}
@media (prefers-reduced-motion:reduce){.help-box,.help-bk{animation:none}}


/* name guard: warns when an item or supplier is already named like this */
.nm-hint{border-radius:10px;padding:9px 12px;font-size:.92em;line-height:1.4}
.nm-hint[hidden]{display:none}
.nm-bad{background:var(--red-soft,#fbe9e7);color:var(--red)}
.nm-warn{background:var(--turmeric-soft,#fdf3dc);color:var(--ink)}
.nm-ok{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:6px;font-weight:600}
.nm-ok input{width:auto;margin:0}

/* duplicate finder */
.dup-set{display:grid;gap:6px}
.dup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.dup-row span{min-width:0;overflow-wrap:anywhere}

/* picture finder: tabs and the starter icon grid */
.ph-tabs{display:flex;gap:6px;margin-bottom:8px}
.ph-tab{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 12px;cursor:pointer}
.ph-tab.on{background:var(--accent-soft,var(--grey-soft));color:var(--ink);border-color:var(--copper,var(--line))}
.ph-ic{display:grid;gap:8px}
.ph-icgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:280px;overflow:auto}
.ph-ich{grid-column:1/-1;margin:6px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ph-ico{display:grid;justify-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel,transparent);cursor:pointer;min-width:0}
.ph-ico img,.ph-ico .no-photo{width:48px;height:48px;object-fit:contain}
.ph-ico small{font-size:11px;line-height:1.2;text-align:center;overflow-wrap:anywhere;color:var(--ink)}
.ph-ico:hover,.ph-ico:focus-visible{border-color:var(--copper,var(--ink))}
.ph-credit{display:block}
.ph-credit:empty{display:none}