:root{
  --paper:#F2F4F6;
  --stock:#FFFFFF;
  --ink:#14181D;
  --ink-mid:#5E6975;
  --ink-soft:#8B95A1;
  --rule:#DDE2E7;
  --rule-hard:#C3CBD3;
  --cyan:#0084C8;
  --cyan-deep:#00618F;
  --magenta:#CE0F53;
  --amber:#C9820A;
  --green:#12805A;
  --shadow:0 1px 0 rgba(20,24,29,.04), 0 1px 3px rgba(20,24,29,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Archivo,system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}

.rail{
  width:212px;flex:0 0 212px;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand-mark{
  font-size:30px;font-weight:800;letter-spacing:.14em;line-height:1;
  display:flex;align-items:center;gap:9px;
}
.brand-dots{display:flex;gap:3px}
.brand-dots i{width:6px;height:6px;border-radius:50%;display:block}
.brand-sub{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:9px;font-weight:500;
}
.nav{padding:14px 10px;flex:1}
.nav-label{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.35);padding:12px 8px 6px;font-weight:600;
}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:5px;color:rgba(255,255,255,.72);
  text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .12s,color .12s;
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:var(--cyan);color:#fff;font-weight:600}
.nav .badge{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  background:rgba(255,255,255,.14);padding:1px 6px;border-radius:20px;
}
.nav a.on .badge{background:rgba(0,0,0,.22)}
.nav .badge.hot{background:var(--magenta);color:#fff}
.whoami{
  padding:13px 18px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:9px;
}
.avatar{
  width:27px;height:27px;border-radius:50%;background:var(--cyan);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:0 0 auto;
}
.whoami div{font-size:12px;line-height:1.3}
.whoami span{display:block;color:rgba(255,255,255,.45);font-size:10.5px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.screen{display:none;padding:22px 26px 60px}
.screen.on{display:block}

/* ---------- job header ---------- */
.jobhead{
  background:var(--stock);border:1px solid var(--rule);border-radius:8px;
  padding:16px 18px;box-shadow:var(--shadow);margin-bottom:14px;
}
.jobhead-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.jobno{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  color:var(--cyan-deep);letter-spacing:.06em;
}
.jobtitle{font-size:22px;font-weight:700;letter-spacing:-.015em;margin-top:1px}
.jobmeta{display:flex;gap:22px;flex-wrap:wrap;margin-top:11px}
.jm-k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.jm-v{font-size:13.5px;font-weight:600;margin-top:2px}
.jobhead-right{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}

.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.chip.rush{background:#FCE7EF;color:var(--magenta)}
.chip.norm{background:#EDF1F4;color:var(--ink-mid)}
.chip.ship{background:#E6F3FA;color:var(--cyan-deep)}
.chip.pick{background:#FDF3E0;color:var(--amber)}
.chip.hold{background:#FCE7EF;color:var(--magenta)}

/* progress ink bar */
.inkbar-wrap{margin-top:15px}
.inkbar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.inkbar-pct{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;letter-spacing:-.02em}
.inkbar-stage{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--cyan-deep)}
.inkbar{height:8px;background:#E4E9ED;border-radius:2px;overflow:hidden;display:flex}
.inkbar i{display:block;height:100%;transition:width .35s cubic-bezier(.2,.7,.3,1)}
.inkbar .done{background:var(--green)}
.inkbar .part{background:var(--cyan)}

/* ---------- layout columns ---------- */
.cols{display:grid;grid-template-columns:250px 1fr 232px;gap:14px;align-items:start}
.card{
  background:var(--stock);border:1px solid var(--rule);border-radius:8px;
  box-shadow:var(--shadow);overflow:hidden;
}
.card + .card{margin-top:14px}
.card-hd{
  padding:10px 14px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.card-hd h3{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink-mid)}
.card-bd{padding:13px 14px}

/* artwork */
.art{
  aspect-ratio:1;background:#111;position:relative;
  display:grid;place-items:center;border-bottom:1px solid var(--rule);
}
.art svg{width:76%;height:76%}
.art-tag{
  position:absolute;left:8px;bottom:8px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.5);
  padding:2px 6px;border-radius:3px;backdrop-filter:blur(4px);
}
.spec-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px}
.spec-row + .spec-row{border-top:1px dotted var(--rule)}
.spec-k{color:var(--ink-mid)}
.spec-v{font-weight:600;text-align:right}

.hit{padding:10px 14px;border-bottom:1px solid var(--rule)}
.hit:last-child{border-bottom:0}
.hit-top{display:flex;align-items:center;gap:8px}
.hit-dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.hit-name{font-size:13px;font-weight:700;flex:1}
.hit-file{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-soft);margin-top:3px;padding-left:17px;word-break:break-all}
.hit-place{
  font-size:11.5px;color:var(--ink-mid);margin-top:5px;padding-left:17px;
  display:flex;align-items:center;gap:5px;
}
.hit-place b{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-weight:600}

/* ---------- THE GRID ---------- */
.grid-scroll{overflow-x:auto}
table.grid{border-collapse:separate;border-spacing:0;width:100%;min-width:610px}
table.grid th,table.grid td{padding:0;text-align:center}
.grp-hd th{
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--ink-mid);padding:9px 0 6px;border-bottom:1px solid var(--rule);
}
.grp-hd th.gsep{border-left:1px solid var(--rule)}
.sub-hd th{
  font-size:10px;font-weight:700;color:var(--ink-soft);padding:6px 0;
  border-bottom:1px solid var(--rule-hard);letter-spacing:.06em;
}
.sub-hd th.gsep{border-left:1px solid var(--rule)}
.sz-cell{
  text-align:left !important;padding:0 12px !important;
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
.sz-name{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px}
.sz-qty{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft);margin-left:7px}
tr.row td{border-bottom:1px solid var(--rule);height:44px}
tr.row td.gsep{border-left:1px solid var(--rule)}
tr.row:hover td{background:#F8FAFB}
tr.row.short td.sz-cell{box-shadow:inset 3px 0 0 var(--magenta)}

.cell{
  width:100%;height:44px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:0;font-family:inherit;
  transition:background .12s;
}
.cell:hover{background:#EAF4FA}
.cell:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.box{
  width:26px;height:26px;border:1.5px solid var(--rule-hard);border-radius:4px;
  display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  color:transparent;background:var(--stock);
  transition:background .16s,border-color .16s,color .16s,transform .1s;
}
.cell:hover .box{border-color:var(--cyan)}
.cell.on .box{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.04)}
.cell.on.c-pull .box{background:var(--ink-mid);border-color:var(--ink-mid)}
.cell.on.c-print .box{background:var(--cyan);border-color:var(--cyan)}
.cell.on.c-press .box{background:var(--green);border-color:var(--green)}
.cell.locked{cursor:not-allowed;opacity:.34}
.cell.locked:hover{background:transparent}
.cell.locked:hover .box{border-color:var(--rule-hard)}

tr.totals td{
  padding:8px 0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  font-weight:600;color:var(--ink-mid);background:#F8FAFB;
}
tr.totals td.sz-cell{
  font-family:Archivo,sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:700;
}
tr.totals td.gsep{border-left:1px solid var(--rule)}

/* stage strip */
.stages{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.stage{
  flex:1 1 0;min-width:120px;padding:10px 12px;cursor:pointer;background:none;
  border:0;border-right:1px solid var(--rule);text-align:left;font-family:inherit;
  transition:background .12s;
}
.stage:last-child{border-right:0}
.stage:hover{background:#F8FAFB}
.stage:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.stage-n{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--ink-soft);
  letter-spacing:.06em;
}
.stage-t{font-size:12.5px;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:6px}
.stage-t::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--rule-hard);
}
.stage.done .stage-t::before{background:var(--green);border-color:var(--green)}
.stage.auto .stage-t::before{background:var(--cyan);border-color:var(--cyan)}
.stage.done .stage-t,.stage.auto .stage-t{color:var(--ink)}
.stage-w{font-size:10.5px;color:var(--ink-soft);margin-top:3px;padding-left:14px}
.stage.auto .stage-w{color:var(--cyan-deep);font-weight:600}

/* blanks panel */
.blank-row{padding:9px 14px;border-bottom:1px solid var(--rule)}
.blank-row:last-child{border-bottom:0}
.br-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.br-sz{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}
.br-need{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft)}
.br-bar{height:5px;background:#E4E9ED;border-radius:2px;margin-top:6px;overflow:hidden}
.br-bar i{display:block;height:100%;background:var(--green)}
.br-bar i.low{background:var(--magenta)}
.br-note{font-size:11px;margin-top:4px;font-weight:600}
.br-note.ok{color:var(--ink-soft);font-weight:500}
.br-note.bad{color:var(--magenta)}

.alert{
  background:#FDEDF3;border:1px solid #F5C2D5;border-radius:7px;padding:11px 13px;margin-bottom:14px;
}
.alert-t{font-size:12.5px;font-weight:700;color:var(--magenta);display:flex;align-items:center;gap:7px}
.alert-b{font-size:12px;color:#8C1140;margin-top:4px;line-height:1.5}
.alert-b b{font-family:"IBM Plex Mono",monospace}

.btn{
  font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:5px;
  border:1px solid var(--rule-hard);background:var(--stock);color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:#F1F5F8;border-color:var(--ink-soft)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#000}
.btn.danger{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn.danger:hover{background:#AC0B45}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* activity */
.act{padding:8px 14px;border-bottom:1px solid var(--rule);display:flex;gap:9px;align-items:flex-start}
.act:last-child{border-bottom:0}
.act-av{
  width:21px;height:21px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff;background:var(--ink-mid);margin-top:1px;
}
.act-b{font-size:11.5px;line-height:1.45;color:var(--ink-mid)}
.act-b b{color:var(--ink);font-weight:600}
.act-t{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-soft);margin-top:1px}

/* ---------- queue ---------- */
.page-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-hd h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.page-hd p{font-size:13px;color:var(--ink-mid);margin-top:3px}
.qtable{width:100%;border-collapse:collapse;background:var(--stock)}
.qtable th{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;text-align:left;padding:9px 13px;border-bottom:1px solid var(--rule-hard);
}
.qtable td{padding:11px 13px;border-bottom:1px solid var(--rule);font-size:13px;vertical-align:middle}
.qtable tr:last-child td{border-bottom:0}
.qtable tbody tr{cursor:pointer;transition:background .12s}
.qtable tbody tr:hover{background:#F8FAFB}
.q-job{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--cyan-deep)}
.q-name{font-weight:600;margin-top:1px}
.q-cust{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.q-bar{width:118px;height:6px;background:#E4E9ED;border-radius:2px;overflow:hidden;display:flex}
.q-bar i{height:100%;display:block}
.q-pct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-mid);margin-top:4px}
.q-due{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600}
.q-due.soon{color:var(--magenta)}
.q-days{font-size:10.5px;color:var(--ink-soft)}
.q-stage{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid)}

/* ---------- inventory ---------- */
.cotabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.cotab{
  font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:6px;
  border:1px solid var(--rule);background:var(--stock);color:var(--ink-mid);cursor:pointer;
  display:flex;align-items:center;gap:7px;transition:all .12s;
}
.cotab:hover{border-color:var(--ink-soft)}
.cotab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cotab i{width:8px;height:8px;border-radius:2px;display:block}
.cotab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.itable{width:100%;border-collapse:collapse;background:var(--stock)}
.itable th{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;padding:9px 12px;border-bottom:1px solid var(--rule-hard);text-align:right;
}
.itable th:first-child,.itable th:nth-child(2){text-align:left}
.itable td{padding:9px 12px;border-bottom:1px solid var(--rule);font-size:13px;text-align:right}
.itable td:first-child,.itable td:nth-child(2){text-align:left}
.itable tr:last-child td{border-bottom:0}
.itable tbody tr:hover{background:#F8FAFB}
.i-sku{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft)}
.i-name{font-weight:600;font-size:12.5px}
.i-num{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-variant-numeric:tabular-nums}
.i-num.res{color:var(--ink-soft)}
.i-num.avail{font-weight:600}
.i-num.neg{color:var(--magenta);font-weight:700}
.i-flag{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:3px;display:inline-block;
}
.i-flag.order{background:#FCE7EF;color:var(--magenta)}
.i-flag.low{background:#FDF3E0;color:var(--amber)}
.i-flag.ok{background:#E7F3EE;color:var(--green)}
.i-loan{font-size:10.5px;color:var(--cyan-deep);font-weight:600;margin-top:2px}

.split{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}

.consume{padding:11px 14px;border-bottom:1px solid var(--rule)}
.consume:last-child{border-bottom:0}
.cs-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cs-n{font-size:12.5px;font-weight:600}
.cs-v{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-mid)}
.cs-bar{height:6px;background:#E4E9ED;border-radius:2px;margin-top:6px;overflow:hidden}
.cs-bar i{display:block;height:100%;border-radius:2px}
.cs-run{font-size:11px;color:var(--ink-soft);margin-top:4px}
.cs-run b{font-weight:700}
.cs-run b.warn{color:var(--magenta)}

.note{
  font-size:11.5px;color:var(--ink-mid);background:#F8FAFB;border-top:1px solid var(--rule);
  padding:9px 14px;line-height:1.5;
}
.note b{color:var(--ink)}

.hint{
  display:flex;gap:9px;align-items:flex-start;background:#E9F4FA;border:1px solid #B8DCEE;
  border-radius:7px;padding:10px 13px;font-size:12px;color:var(--cyan-deep);
  line-height:1.5;margin-bottom:14px;
}
.hint b{font-weight:700}

@media (max-width:1180px){
  .cols{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:820px){
  .rail{position:fixed;bottom:0;top:auto;left:0;right:0;width:100%;height:auto;flex-direction:row;z-index:30}
  .brand,.whoami,.nav-label{display:none}
  .nav{display:flex;padding:6px;gap:4px;overflow-x:auto}
  .nav a{flex:1;justify-content:center;white-space:nowrap;font-size:12px}
  .main{padding-bottom:64px}
  .screen{padding:16px 14px 80px}
  .cell,tr.row td{height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- station filter ---------- */
.stations{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--rule);background:#F8FAFB}
.st-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-right:2px}
.stbtn{font-family:inherit;font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px;border:1px solid var(--rule-hard);background:var(--stock);color:var(--ink-mid);cursor:pointer;transition:all .12s}
.stbtn:hover{border-color:var(--ink-soft);color:var(--ink)}
.stbtn.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.stbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.st-hint{font-size:11.5px;color:var(--ink-soft);margin-left:auto}
.st-hint b{color:var(--cyan-deep);font-weight:600}
.hidecol{display:none !important}

/* ---------- form ---------- */
.form-wrap{max-width:1000px}
.fsec{background:var(--stock);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.fsec-hd{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.fsec-n{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:#fff;background:var(--ink);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.fsec-t{font-size:14px;font-weight:700}
.fsec-s{font-size:11.5px;color:var(--ink-soft);margin-left:auto;text-align:right}
.fsec-bd{padding:16px}
.frow{display:grid;gap:14px;margin-bottom:14px}
.frow:last-child{margin-bottom:0}
.f3{grid-template-columns:repeat(3,1fr)}
.f2{grid-template-columns:repeat(2,1fr)}
.f4{grid-template-columns:repeat(4,1fr)}
.fld label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-mid);margin-bottom:5px}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--rule-hard);
  border-radius:5px;background:var(--stock);color:var(--ink);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
.fld textarea{resize:vertical;min-height:64px;line-height:1.5}
.fld .req{color:var(--magenta);margin-left:2px}
.fhelp{font-size:11px;color:var(--ink-soft);margin-top:4px}

.seg{display:flex;gap:0;border:1px solid var(--rule-hard);border-radius:5px;overflow:hidden}
.seg button{
  flex:1;font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 6px;border:0;
  background:var(--stock);color:var(--ink-mid);cursor:pointer;border-right:1px solid var(--rule);transition:all .12s;
}
.seg button:last-child{border-right:0}
.seg button:hover{background:#F1F5F8}
.seg button.on{background:var(--ink);color:#fff}
.seg button.on.rushpick{background:var(--magenta)}
.seg button:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* size run */
.sizerun{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.szbox{border:1px solid var(--rule-hard);border-radius:6px;padding:9px;text-align:center;transition:border-color .14s,background .14s}
.szbox.filled{border-color:var(--cyan)}
.szbox.short{border-color:var(--magenta);background:#FDF4F7}
.szbox-t{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;margin-bottom:6px}
.szbox input{
  width:100%;font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;text-align:center;
  padding:5px 2px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);
}
.szbox input:focus{outline:2px solid var(--cyan);outline-offset:-1px;background:#fff}
.szbox-a{font-family:"IBM Plex Mono",monospace;font-size:10.5px;margin-top:5px;color:var(--ink-soft)}
.szbox.short .szbox-a{color:var(--magenta);font-weight:700}

/* hit rows */
.hitrow{border:1px solid var(--rule);border-radius:7px;padding:12px;margin-bottom:10px;background:#FBFCFD}
.hitrow-hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hitrow-hd .hit-dot{width:11px;height:11px;border-radius:3px}
.hitrow-hd select{
  font-family:inherit;font-size:13px;font-weight:700;padding:5px 9px;border:1px solid var(--rule-hard);
  border-radius:5px;background:var(--stock);color:var(--ink);
}
.rmhit{margin-left:auto;background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:16px;padding:2px 7px;border-radius:4px;line-height:1}
.rmhit:hover{background:#FCE7EF;color:var(--magenta)}
.drop{
  border:1.5px dashed var(--rule-hard);border-radius:6px;padding:14px 12px;text-align:center;cursor:pointer;
  background:var(--stock);transition:all .14s;
}
.drop:hover{border-color:var(--cyan);background:#F4FAFD}
.drop.has{border-style:solid;border-color:var(--green);background:#F2FAF6;text-align:left;display:flex;align-items:center;gap:10px;padding:9px 11px}
.drop-i{font-size:17px;color:var(--ink-soft)}
.drop-t{font-size:12px;font-weight:600;color:var(--ink-mid)}
.drop-s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-soft);margin-top:2px}
.drop.has .drop-t{color:var(--green)}
.thumb{width:36px;height:36px;border-radius:4px;background:#111;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:8px;font-family:"IBM Plex Mono",monospace}
.addhit{
  width:100%;font-family:inherit;font-size:12.5px;font-weight:600;padding:9px;border:1.5px dashed var(--rule-hard);
  border-radius:6px;background:none;color:var(--ink-mid);cursor:pointer;transition:all .12s;
}
.addhit:hover{border-color:var(--cyan);color:var(--cyan-deep);background:#F4FAFD}

/* sticky summary */
.sticky{
  position:sticky;bottom:0;background:var(--stock);border:1px solid var(--rule-hard);border-radius:8px;
  padding:13px 16px;box-shadow:0 -3px 14px rgba(20,24,29,.09);display:flex;align-items:center;gap:20px;flex-wrap:wrap;z-index:10;
}
.sm-k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.sm-v{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;margin-top:1px}
.sm-v.bad{color:var(--magenta)}
.sm-v.good{color:var(--green)}
.sm-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.sm-msg{font-size:12px;font-weight:600;max-width:290px;line-height:1.4}
.sm-msg.bad{color:var(--magenta)}
.sm-msg.good{color:var(--green)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(14px);bottom:26px;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:7px;font-size:13.5px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:100;display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .mono{color:var(--cyan);font-size:12.5px}

@media (max-width:900px){
  .f3,.f2,.f4{grid-template-columns:1fr}
  .sizerun{grid-template-columns:repeat(3,1fr)}
}


/* ---------- consumables ---------- */
.ctable{width:100%;border-collapse:collapse;background:var(--stock)}
.ctable th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--rule-hard);text-align:right}
.ctable th:first-child{text-align:left}
.ctable td{padding:10px 12px;border-bottom:1px solid var(--rule);font-size:13px;text-align:right}
.ctable td:first-child{text-align:left}
.ctable tr:last-child td{border-bottom:0}
.ctable tbody tr:hover{background:#F8FAFB}
.c-n{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:8px}
.c-n i{width:9px;height:9px;border-radius:2px;flex:0 0 auto;display:block}
.c-cat{font-size:10.5px;color:var(--ink-soft);margin-left:17px}
.c-days{font-family:"IBM Plex Mono",monospace;font-weight:600}
.c-days.warn{color:var(--magenta)}
.c-days.soon{color:var(--amber)}
.minibar{height:4px;background:#E4E9ED;border-radius:2px;margin-top:5px;overflow:hidden;width:74px;margin-left:auto}
.minibar i{display:block;height:100%}
.costcard{background:var(--ink);color:#fff;border-radius:8px;padding:15px 16px;margin-bottom:14px}
.costcard h4{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.costbig{font-family:"IBM Plex Mono",monospace;font-size:29px;font-weight:600;margin-top:5px;letter-spacing:-.02em}
.costbig span{font-size:14px;color:rgba(255,255,255,.55);font-weight:400}
.costbrk{margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:5px}
.cb-row{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.72)}
.cb-row b{font-family:"IBM Plex Mono",monospace;color:#fff;font-weight:500}
.hist{padding:9px 14px;border-bottom:1px solid var(--rule)}
.hist:last-child{border-bottom:0}
.hist-t{display:flex;justify-content:space-between;gap:9px;align-items:baseline}
.hist-n{font-size:12.5px;font-weight:600}
.hist-p{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600}
.hist-p.out{color:var(--magenta)}
.hist-s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-soft);margin-top:2px}

/* ---------- messages, PO screens, destructive actions ---------- */
.msgs{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.msg{
  padding:9px 12px;border-radius:7px;font-size:13px;font-weight:500;
  background:var(--stock);border:1px solid var(--rule);border-left:3px solid var(--cyan);
  box-shadow:var(--shadow);
}
.msg.success{border-left-color:var(--green)}
.msg.warning{border-left-color:var(--amber)}
.msg.error{border-left-color:var(--magenta)}

.alert.cancelled{border-color:var(--rule-hard);background:var(--paper)}
.alert.cancelled .alert-t{color:var(--ink-mid)}

.po-text{
  width:100%;border:1px solid var(--rule);border-radius:7px;padding:10px 12px;
  background:var(--paper);color:var(--ink);font-size:12.5px;line-height:1.5;resize:vertical;
}
.po-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.po-meta label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.po-meta select,.po-meta input{
  border:1px solid var(--rule-hard);border-radius:6px;padding:7px 9px;font:inherit;
  font-size:13px;color:var(--ink);background:var(--stock);min-height:38px;
}
.qty-in{
  width:96px;border:1px solid var(--rule-hard);border-radius:6px;padding:7px 8px;
  font-size:13px;text-align:right;background:var(--stock);color:var(--ink);min-height:38px;
}
.qty-in:focus,.po-meta select:focus,.po-meta input:focus{
  outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan);
}
.note.warn{color:var(--amber)}

/* ---------- brand / model grouping on Blanks ---------- */
.brandtabs{gap:6px;align-items:center;flex-wrap:wrap}
.cotab.add{border-style:dashed;color:var(--ink-soft)}
.brandgrp{border-bottom:1px solid var(--rule)}
.brandgrp:last-child{border-bottom:0}
.brandgrp-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:#F8FAFB;border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:5;
}
.bg-brand{font-weight:700;font-size:13px;color:var(--ink)}
.bg-model{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  color:var(--cyan-deep);background:#E8F3FA;border-radius:5px;padding:2px 7px;margin-left:7px;
}
.bg-desc{color:var(--ink-soft);font-size:12px;margin-left:8px}
.bg-tot{font-size:12px;color:var(--ink-mid)}
.swatch{
  display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;
  border:1px solid var(--rule-hard);vertical-align:baseline;
}

/* ---------- phones: one thumb, no horizontal page scroll ---------- */
@media (max-width:820px){
  .page-hd{flex-direction:column;align-items:stretch;gap:10px}
  .page-hd > div:last-child{display:flex;gap:7px}
  .page-hd .btn{flex:1;text-align:center}
  .split,.cols{gap:10px}
  .po-meta label{flex:1 1 100%}
  .qty-in{width:100%}
  .brandgrp-hd{position:static}

  /* grid items default to min-width:auto, so a wide table pushes its column
     past the viewport instead of scrolling inside it */
  .cols > div,.split > div{min-width:0}
  .sz-cell{padding:0 8px !important}
  .sz-qty{margin-left:5px}

  /* The grid is why a phone is in someone's hand. Put it first; the header
     and hit locations are reference, and can live underneath. */
  .cols > div:nth-child(2){order:1}
  .cols > div:nth-child(1){order:2}
  .cols > div:nth-child(3){order:3}

  /* a tighter header, so the grid is reachable without a long scroll */
  .jobhead{padding:12px 14px;margin-bottom:10px}
  .jobtitle{font-size:17px;line-height:1.25}
  .jobmeta{gap:10px 18px;margin-top:9px}
  .jobhead-top{flex-direction:column;gap:8px}
  .jobhead-right{margin-left:0;align-items:flex-start;text-align:left;
                 flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center}

}

/* Blanks: three tight lines per SKU beats nine labelled ones */
@media (max-width:820px){
  table.itable.stacky thead{display:none}
  table.itable.stacky,table.itable.stacky tbody{display:block;width:100%}
  table.itable.stacky tr{
    display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;
    border:1px solid var(--rule);border-radius:9px;margin:8px 12px;padding:9px 11px;
    background:var(--stock);
  }
  table.itable.stacky td{display:block;padding:0 !important;border:0 !important;text-align:left !important}
  table.itable.stacky td::before{content:none}
  /* 1 SKU | 2 colour | 3 size | 4 on hand | 5 reserved | 6 available | 7 cost | 8 status */
  table.itable.stacky td:nth-child(1){grid-column:1;order:1;font-size:11px}
  table.itable.stacky td:nth-child(6){grid-column:2;order:2;text-align:right !important;font-size:19px;font-weight:700}
  table.itable.stacky td:nth-child(2){grid-column:1;order:3}
  table.itable.stacky td:nth-child(8){grid-column:2;order:4;text-align:right !important}
  /* size / on hand / reserved / cost are separate grid items, so they cannot
     flow together as text. Render them as one line from data-meta instead. */
  table.itable.stacky td:nth-child(3),
  table.itable.stacky td:nth-child(4),
  table.itable.stacky td:nth-child(5),
  table.itable.stacky td:nth-child(7){display:none}
  table.itable.stacky tr::after{
    content:attr(data-meta);grid-column:1 / -1;order:5;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11.5px;color:var(--ink-mid);margin-top:3px;
  }
  table.itable.stacky td:nth-child(6)::before{content:"free";display:block;
    font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
  table.itable.stacky .q-cust{display:inline;margin-left:6px}
}

/* the progress grid keeps its shape, but the size column stays put */
@media (max-width:820px){
  .grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  table.grid{min-width:520px}
  .sz-cell{position:sticky;left:0;z-index:4;background:var(--stock);box-shadow:1px 0 0 var(--rule)}
  tr.row.short td.sz-cell{box-shadow:inset 3px 0 0 var(--magenta),1px 0 0 var(--rule)}
  tr.row:hover td.sz-cell{background:#F8FAFB}
  table.grid thead th:first-child{position:sticky;left:0;z-index:6;background:var(--stock)}
  .cell,tr.row td{height:56px}          /* comfortable thumb target */
  .cell .box{font-size:14px}
  .grid-scroll::after{
    content:"";position:sticky;right:0;top:0;float:right;width:16px;height:100%;
    background:linear-gradient(to right,transparent,rgba(20,24,29,.07));pointer-events:none;
  }
}

/* iPhone portrait */
@media (max-width:430px){
  .screen{padding:12px 10px 84px}
  h1{font-size:20px}
  .jobmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .cotabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .cotab{white-space:nowrap}
  .bg-desc{display:none}
  .brandgrp-hd{padding:9px 11px}
  table.grid{min-width:440px}
  .nav a{font-size:11px;padding:9px 6px}
}

/* iOS zooms any input under 16px on focus, which throws the layout */
@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    input,select,textarea,.qty-in,.po-meta input,.po-meta select{font-size:16px}
  }
}

/* a SKU is an identifier; never break it across lines */
.i-sku{white-space:nowrap}
@media (min-width:821px){
  .brandgrp .itable td:nth-child(2) .q-cust{white-space:nowrap}
}

/* ---------- prep stages are tickable from the strip ---------- */
.stage.prep .stage-t{margin-bottom:6px}
.stage-tick{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:32px;padding:5px 11px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule-hard);background:var(--stock);color:var(--ink-mid);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  transition:background .12s,border-color .12s,color .12s;
}
.stage-tick:hover{border-color:var(--cyan);color:var(--cyan-deep)}
.stage-tick.on{background:var(--green);border-color:var(--green);color:#fff}
.stage-tick:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.stage-hits{display:flex;gap:5px;flex-wrap:wrap}
.hitchip{
  min-width:34px;min-height:32px;padding:4px 8px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule-hard);background:var(--stock);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  color:var(--ink-mid);transition:background .12s,border-color .12s,color .12s;
}
.hitchip:hover{border-color:var(--hc,var(--cyan));color:var(--ink)}
.hitchip.on{background:var(--hc,var(--cyan));border-color:var(--hc,var(--cyan));color:#fff}
.hitchip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:820px){
  .stage-tick,.hitchip{min-height:40px}
}

/* ---------- dashboard ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.tile{
  background:var(--stock);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;box-shadow:var(--shadow);border-top:3px solid var(--cyan);
}
.tile.warn{border-top-color:var(--amber)}
.tile.bad{border-top-color:var(--magenta)}
.tile-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.tile-v{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1}
.tile-s{font-size:11.5px;color:var(--ink-mid);margin-top:5px}

.bucket{margin-bottom:12px}
.bucket.bad .card-hd{border-left:3px solid var(--magenta)}
.bucket.warn .card-hd{border-left:3px solid var(--amber)}
.bucket-n{font-size:12px;color:var(--ink-soft);font-weight:600}
.obrow{
  display:flex;align-items:center;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .12s;
}
.obrow:last-child{border-bottom:0}
.obrow:hover{background:#F8FAFB}
.obrow.empty{color:var(--ink-soft);font-size:12.5px;display:block}
.ob-main{flex:1;min-width:0}
.ob-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ob-code{font-size:11.5px;font-weight:600;color:var(--cyan-deep)}
.ob-name{font-size:14px;font-weight:700}
.ob-sub{font-size:11.5px;color:var(--ink-mid);margin-top:3px;display:flex;
        align-items:center;gap:6px;flex-wrap:wrap}
.routetag{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:#EDF1F4;color:var(--ink-mid);border-radius:4px;padding:2px 6px;
}
.routetag.out{background:#FDF3E0;color:var(--amber)}
.ob-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ob-bar{width:84px;height:6px;background:#E4E9ED;border-radius:3px;overflow:hidden}
.ob-bar i{display:block;height:100%;background:var(--cyan);transition:width .35s}
.ob-pct{font-size:12px;color:var(--ink-mid);width:38px;text-align:right}
.ob-due{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:#EDF1F4;color:var(--ink-mid);white-space:nowrap;
}
.ob-due.late{background:#FCE7EF;color:var(--magenta)}
.ob-due.soon{background:#FDF3E0;color:var(--amber)}
.ob-due.none{opacity:.6}

@media (max-width:1180px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .tile{padding:11px 12px}
  .tile-v{font-size:22px}
  .obrow{flex-direction:column;align-items:stretch;gap:8px}
  .ob-right{justify-content:space-between}
  .ob-bar{flex:1}
}

/* ---------- quote preview ---------- */
.qpreview{border-top:1px solid var(--rule);background:#F8FAFB}
.qp-hd{
  padding:10px 14px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink-mid);border-bottom:1px solid var(--rule);
}
.qp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 14px}
.fld{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;
     text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.fld input,.fld select,.fld textarea{
  border:1px solid var(--rule-hard);border-radius:6px;padding:7px 9px;font:inherit;
  font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);
  background:var(--stock);min-height:38px;font-weight:500;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
.fld-h{font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.fld-h.warn{color:var(--amber)}
@media (max-width:820px){.qp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:430px){.qp-grid{grid-template-columns:1fr}}
.routetag.need{background:#FCE7EF;color:var(--magenta)}

/* ---------- order intake: size run & hit picker ---------- */
.sizerun{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.szbox{
  border:1px solid var(--rule-hard);border-radius:6px;padding:9px;text-align:center;
  transition:border-color .14s,background .14s;
}
.szbox:focus-within{border-color:var(--cyan)}
.szbox-t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;margin-bottom:6px}
.szbox input{
  width:100%;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:19px;font-weight:600;
  text-align:center;padding:5px 2px;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper);color:var(--ink);
}
.szbox input:focus{outline:2px solid var(--cyan);outline-offset:-1px;background:#fff}
.szbox-a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;margin-top:5px;color:var(--ink-soft)}
.szbox.short{border-color:var(--magenta);background:#FDF4F7}
.szbox.short .szbox-a{color:var(--magenta);font-weight:700}

.hitpick{display:flex;gap:8px;flex-wrap:wrap}
.hitopt{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;min-height:40px;
  border:1px solid var(--rule-hard);border-radius:7px;background:var(--stock);
  font-size:13px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s;
}
.hitopt:hover{border-color:var(--cyan)}
.hitopt i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.hitopt:has(input:checked){border-color:var(--cyan);background:#E8F3FA}
.hitopt input{accent-color:var(--cyan);width:16px;height:16px}

@media (max-width:820px){
  .sizerun{grid-template-columns:repeat(3,1fr)}
  .szbox input{font-size:17px}
  .hitopt{flex:1 1 45%;min-height:46px}
}

/* ---------- per-row inventory tools ---------- */
.rowtools{display:inline-block;position:relative;margin-left:7px}
.rowtools summary{
  list-style:none;cursor:pointer;padding:2px 8px;border-radius:5px;
  color:var(--ink-soft);font-weight:700;letter-spacing:.06em;
}
.rowtools summary::-webkit-details-marker{display:none}
.rowtools summary:hover{background:var(--paper);color:var(--ink)}
.rowtools-menu{
  position:absolute;right:0;top:100%;z-index:20;width:252px;text-align:left;
  background:var(--stock);border:1px solid var(--rule-hard);border-radius:9px;
  box-shadow:0 6px 20px rgba(20,24,29,.14);padding:11px;display:flex;
  flex-direction:column;gap:9px;
}
.rt-form{display:flex;flex-direction:column;gap:6px}
.rt-lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.rt-reason{
  border:1px solid var(--rule-hard);border-radius:6px;padding:7px 9px;
  font:inherit;font-size:12.5px;min-height:36px;background:var(--stock);color:var(--ink);
}
.rt-note{font-size:10.5px;color:var(--ink-soft);line-height:1.4}
.rowtools .qty-in{width:100%}
@media (max-width:820px){
  .rowtools-menu{right:auto;left:0;width:min(280px,78vw)}
}

/* .card clips its children to keep the rounded corners, so a table wider than
   the card lost its last columns silently — the row tools were invisible at
   some widths. Wide tables scroll inside the card instead, at every size. */
.card table.itable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card table.itable > thead,
.card table.itable > tbody{display:table;width:100%;min-width:max-content}
.brandgrp{overflow:visible}
/* the row menu has to escape the scroller, so it anchors to the row instead */
.card table.itable:has(.rowtools[open]){overflow:visible}

@media (max-width:820px){
  /* the stacked layout has no columns to scroll, so put it back to blocks */
  .card table.itable.stacky{display:block;overflow:visible}
  .card table.itable.stacky > tbody{display:block;min-width:0}
}