/* expanded and wide (900px and up): always the full, labelled sidebar -- no icon-rail collapse, no fold
   toggle (the owner asked for a plain, always-expanded nav rather than the shared design system's
   auto-collapsing-below-1200px rail; this is POS's own override, other apps keep the rail). A touch wider
   than the shared --side-w token for a bit more breathing room. */
.side{flex:none;width:264px;display:flex;flex-direction:column;background:var(--chrome,var(--card));border-right:.5px solid var(--sep);padding:max(14px,env(safe-area-inset-top)) 12px 12px;gap:4px;min-height:0;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:8px;padding:2px 2px 14px 8px;min-height:48px}
.side .brand-logo{flex:1 1 auto;min-width:0;display:flex}.side .brand-logo img{height:42px;width:auto}
.side .brand-mark{display:none;width:34px;height:34px}
.nav a.navlink{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:10px;font-size:15px;font-weight:500;color:var(--label);text-decoration:none}
.nav a.navlink svg{color:var(--label2)}
@media (hover:hover){.nav a.navlink:hover{background:var(--fill2)}}
kbd{font:600 13px var(--font);padding:3px 8px;border-radius:6px;background:var(--fill);color:var(--label2);white-space:nowrap}
@media (pointer:coarse){.only-kb{display:none!important}}
.nav{display:grid;gap:2px}
.nav button{justify-content:flex-start;min-height:40px;padding:0 10px;border-radius:10px;font-size:15px;font-weight:500;color:var(--label)}
.nav button svg{color:var(--accent-text)}
.nav button.on{font-weight:600}
@media (hover:hover){.nav button:hover:not(.on){background:var(--fill2)}}
.nav .grp{margin-top:14px;padding:0 10px 4px;font-size:12px;font-weight:600;color:var(--label3);text-transform:uppercase;letter-spacing:.04em}
.side .foot{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:.5px solid var(--sep)}
.side .foot button{min-height:38px;padding:0 10px;border-radius:10px;font-size:14px;color:var(--label2);display:flex;align-items:center;gap:8px;text-align:left}
.side .foot button:hover{background:var(--fill2)}
.side .who{padding:6px 10px;font-size:13px;color:var(--label3)}
.tabbar,.only-phone{display:none!important}
.navbar{padding-left:20px;padding-right:12px}

/* selling screen: categories | items | ticket */
.body.fixed{overflow:hidden;display:flex}
.sell{flex:1 1 auto;display:grid;grid-template-columns:200px minmax(0,1fr) minmax(360px,400px);min-height:0;min-width:0}
@media (max-width:1199px){.sell{grid-template-columns:minmax(0,1fr) minmax(340px,38%)}.sell .cats-col{display:none}.sell .cat-chips{display:flex!important}}
.sell .cats-col{min-height:0;overflow-y:auto;padding:14px 10px;border-right:.5px solid var(--sep)}
.sell .items-col{min-height:0;display:flex;flex-direction:column;min-width:0}
.sell .items-head{flex:none;display:grid;gap:10px;padding:14px 16px 10px}
.sell .items-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 16px 20px}
.sell .ticket-pane{min-height:0;display:flex;flex-direction:column;border-left:.5px solid var(--sep);background:var(--card)}
.sell .ticket-pane .ticket{flex:1 1 auto}
.sell .cat-chips{display:none}
.items{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* sheets: centred cards */
.ov{padding:24px}
.md{width:520px;max-width:100%;max-height:min(86vh,860px);border-radius:18px;animation:mdIn .4s var(--ease)}
.md.wide{width:720px}
.md.narrow{width:400px}
.ov.closing .md{animation:mdOut .22s var(--ease) forwards}
@keyframes mdIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes mdOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
.toast{bottom:28px}

.page{padding:20px 24px 32px;max-width:1400px;width:100%}
.split2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
/* More page: three columns of about equal height (built in staff.js moreGrid), two on medium screens, one on phones */
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.more-col{display:grid;gap:16px;align-content:start;min-width:0}
.more-col>.sec{margin:0}
@media (max-width:1099px){
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more-col:nth-child(1){grid-row:span 2}
  .more-col:nth-child(3){grid-column:2}
}