/* phones and tablet portrait (0-899px): bottom tab bar, single-column selling screen with a cart bar, bottom sheets */
.shell{flex-direction:column}
.side,.only-desk{display:none!important}
.tabbar{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px 4px max(2px,calc(env(safe-area-inset-bottom) - 24px));background:var(--bar);border-top:.5px solid var(--sep);position:relative;z-index:20}
.tabbar button{flex-direction:column;justify-content:center;gap:2px;min-height:46px;font-size:12px;font-weight:500;position:relative;color:var(--label3)}
.tabbar button svg{color:inherit}
.tabbar button.on{color:var(--accent-text)}
.tabbar .badge{position:absolute;top:2px;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;line-height:18px;font-size:12px}
.navbar{padding-left:16px;padding-right:6px}

/* selling screen */
.body.fixed{display:flex;flex-direction:column;overflow:hidden}
.sell{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0}
.sell .cats-col,.sell .ticket-pane{display:none}
.sell .items-col{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0}
.sell .items-head{flex:none;display:grid;gap:10px;padding:12px 16px 8px}
.sell .items-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 16px}
.items{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.tile{min-height:84px}
.cart-bar{flex:none;display:flex;align-items:center;gap:10px;margin:0 12px 10px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--label);color:var(--bg);box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.cart-bar.empty{display:none}
.cart-bar .ct{flex:1 1 auto;min-width:0;display:grid;line-height:1.2}
.cart-bar .ct b{font-size:17px;font-variant-numeric:tabular-nums}
.cart-bar .ct span{font-size:13px;opacity:.7}
.cart-bar .btn{background:var(--accent);color:var(--on-accent);min-height:44px}
.cart-bar .btn.ghost{background:rgba(255,255,255,.14);color:inherit}

/* bottom sheets */
.ov{align-items:flex-end}
.md{width:100%;max-height:calc(100% - 44px - env(safe-area-inset-top));border-radius:14px 14px 0 0;animation:sheetUp .45s var(--ease)}
.md.full{height:calc(100% - 44px - env(safe-area-inset-top))}
.ov.closing .md{animation:sheetDown .25s var(--ease) forwards}
.md-h{position:relative;padding-top:14px}
.md-h::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--sep2)}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
.md .ticket{min-height:100%}

.page{padding:12px 16px 24px}
.page-head h1{font-size:28px}
.split2{display:grid;gap:16px}
.kds{grid-template-columns:1fr}
.tables{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.tbl-tile{min-height:100px}
.grid2.stack-phone{grid-template-columns:1fr}
.toast{bottom:calc(72px + env(safe-area-inset-bottom))}
@media (max-width:380px){.items{grid-template-columns:1fr 1fr}.tables{grid-template-columns:1fr 1fr}}
.md-f{flex-wrap:wrap}
.md-f>.btn{flex:1 1 100%}
.md-f>.btn.fill{order:-1}
/* more than four numbers: one swipeable row instead of a tall grid */
.kpis.strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;margin:0 -16px;padding:1px 16px}
.kpis.strip::-webkit-scrollbar{display:none}
.kpis.strip .kpi{flex:0 0 128px;scroll-snap-align:start}

/* medium (600-899px: tablet portrait, open foldables, split-screen windows): items and the order side by side,
   so the cart never hides behind a sheet; centred sheets instead of bottom sheets; bigger tiles */
@media (min-width:600px){
  .sell{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,44%)}
  .sell .ticket-pane{display:flex;flex-direction:column;min-height:0;border-left:.5px solid var(--sep);background:var(--card)}
  .sell .ticket-pane .ticket{flex:1 1 auto}
  .cart-bar{display:none}
  .items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tables{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .kds{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .split2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .grid2.stack-phone{grid-template-columns:1fr 1fr}
  .page{padding:16px 24px 28px}
  .ov{align-items:center;padding:24px}
  .md{width:560px;max-width:100%;max-height:min(88%,900px);border-radius:18px;animation:mdIn .4s var(--ease)}
  .md.full{height:auto}
  .md-h::before{display:none}
  .md.wide{width:720px}.md.narrow{width:420px}
  .ov.closing .md{animation:mdOut .22s var(--ease) forwards}
  .md-f{flex-wrap:nowrap}.md-f>.btn{flex:0 1 auto}.md-f>.btn.fill{order:0}
  .kpis.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .kpis.strip .kpi{flex:none}
  .tabbar button{flex-direction:row;gap:8px;font-size:13px;min-height:52px}
}
@keyframes mdIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes mdOut{to{opacity:0;transform:translateY(10px) scale(.98)}}

/* touch: even small buttons keep a 44pt target */
@media (pointer:coarse){.btn.sm{min-height:44px}}

/* phones: the large page title already names the screen, so the bar above it stays slim and only carries status */
@media (max-width:599px){.navbar{min-height:40px}.navbar .title{opacity:0;width:0;flex:0 0 0;overflow:hidden}.navbar .title.keep{opacity:1;width:auto;flex:1 1 auto}.page{padding-top:4px}}

/* More page on phones: sections in their original order, one column */
.more-grid{display:flex;flex-direction:column;gap:16px}
.more-col{display:contents}

/* Tables on a phone: light and minimal, nothing past the screen edge */
.page-head .eyebrow,.page-head .sub{display:none}
.page-head{align-items:center}
.page-head h1{font-size:24px}
.page-head .row{gap:6px;min-width:0}
.page-head .row .btn{height:36px;padding:0 11px;font-size:14px;gap:5px;white-space:nowrap}
.tbl-bar{gap:8px}
.tbl-bar .legend{gap:10px;font-size:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tbl-bar .legend::-webkit-scrollbar{display:none}
.tbl-bar .legend span{white-space:nowrap}
.tbl-chips{max-width:100%;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
.tbl-chips::-webkit-scrollbar{display:none}
.chipf{height:32px;padding:0 11px;font-size:13px;box-shadow:none;background:var(--fill)}
.chipf b{height:18px;min-width:18px;font-size:11.5px;background:transparent}
.tbl-main.card{padding:0;background:transparent;box-shadow:none;border-radius:0;gap:10px}
.tbl-main>.row.sp .sub{display:none}
.tables{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tbl-tile{min-height:0;padding:12px 12px 11px 16px;gap:6px;border-radius:var(--r3);box-shadow:none;background:var(--card)}
.tbl-tile::before{left:6px;top:12px;bottom:12px;width:3px}
.tbl-tile .tn{font-size:17px}
.tbl-tile .tchip{max-width:100%;font-size:11.5px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl-tile .tmeta{font-size:12px;flex-wrap:wrap;gap:2px 6px}
.tbl-tile .tmeta .ta{font-size:14px}
.tbl-side{display:none}
.tbl-tile.sel{box-shadow:none}

.tbl-tile{padding:11px 12px 10px 16px}
.tbl-tile .tmeta{padding-top:8px;flex-wrap:wrap}
.tbl-tile .tchip{font-size:12px;padding:0;max-width:none}
.tbl-tile .tinfo{gap:8px}

/* table tiles: a visible edge on phones */
.tbl-tile,.tbl-tile.st-dirty{box-shadow:0 0 0 1px var(--sep2),0 1px 3px rgba(0,0,0,.05)}
.tbl-tile.sel{box-shadow:0 0 0 2px var(--accent)}