/* DNCL Techzone wholesale — shared design system.
   Extracted from the receiving-station storefront prototype. Fonts are self-hosted or
   system: an authenticated portal must not depend on a third-party CDN being reachable
   (render-blocking stalls on restrictive networks) or leak buyer IPs to it on every load.

   To restore the original typefaces, drop public-sans.woff2 / ibm-plex-mono.woff2 into
   public/fonts/ and uncomment the two @font-face rules — the server already serves that
   path and the stacks below will pick them up. */

/*
@font-face { font-family:'Public Sans'; src:url('/fonts/public-sans.woff2') format('woff2');
             font-weight:400 800; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/ibm-plex-mono.woff2') format('woff2');
             font-weight:400 600; font-display:swap; }
*/

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --ink:#0f1729;
  --muted:#5b6472;
  --faint:#6a7280; /* 4.85:1 on white */
  --border:#e4e7ec;
  --border-dark:#cdd3dc;
  --accent:#1a56db;
  --accent-dark:#1240a8;
  --green-bg:#ecfdf3;--green-fg:#047857;--green-bd:#a7e3c9;
  --amber-bg:#fffaeb;--amber-fg:#b45309;--amber-bd:#f0d693;
  --red-bg:#fef3f2;--red-fg:#b42318;--red-bd:#f5c1bc;
  --blue-bg:#eff4ff;--blue-fg:#1a56db;--blue-bd:#c1d2f7;
  --grey-bg:#f2f4f7;--grey-fg:#475467;--grey-bd:#d7dce4;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --shadow:0 1px 2px rgba(15,23,41,.05);
  --shadow-lg:0 12px 40px -8px rgba(15,23,41,.18);
  --wrap:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);min-height:100vh;font-size:14px}
::selection{background:var(--accent);color:#fff}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent)}
.hidden{display:none !important}
/* Available to screen readers only — used for live-region announcements. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media (pointer:coarse){
  .qty button,.rm,.tab{min-width:44px;min-height:44px}
}

/* ---------- header ---------- */
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.mast{max-width:var(--wrap);margin:0 auto;padding:0 32px;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mark{width:34px;height:34px;background:var(--ink);color:#fff;display:grid;place-items:center;border-radius:7px;font-weight:800;font-size:15px;letter-spacing:-.02em;flex:none}
.brand .nm{line-height:1.15}
.brand .nm b{font-size:16px;font-weight:800;letter-spacing:-.01em;display:block}
.brand .nm span{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.mast-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.navlink{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:7px}
.navlink:hover{color:var(--ink);background:var(--bg)}
.navlink.on{color:var(--accent);background:var(--blue-bg)}
.stats{display:flex;gap:24px}
.stat{text-align:right}
.stat b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.01em}
.stat i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green-fg);background:var(--green-bg);border:1px solid var(--green-bd);padding:4px 10px;border-radius:99px}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--green-fg);animation:pulse 2.4s infinite}
.live.stale{color:var(--amber-fg);background:var(--amber-bg);border-color:var(--amber-bd)}
.live.stale .dot{background:var(--amber-fg);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.whoami{font-size:12px;color:var(--muted);text-align:right;line-height:1.3}
.whoami b{display:block;font-size:13px;color:var(--ink)}

.btn{font-weight:700;font-size:13px;background:var(--ink);color:#fff;border:none;padding:10px 18px;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;border-radius:8px;transition:background .15s;text-decoration:none}
.btn:hover{background:var(--accent)}
.btn .n{font-family:var(--mono);background:rgba(255,255,255,.18);min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;border-radius:5px;font-weight:600}
.btn-ghost{background:none;color:var(--muted);border:1px solid var(--border-dark)}
.btn-ghost:hover{background:var(--bg);color:var(--ink)}
.btn-sm{padding:7px 12px;font-size:12.5px}

/* ---------- toolbar ---------- */
.toolbar{max-width:var(--wrap);margin:0 auto;padding:20px 32px 4px;display:flex;flex-direction:column;gap:12px}
.tb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{flex:1;min-width:240px;max-width:420px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--border-dark);background:var(--surface);padding:9px 14px;border-radius:8px;box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.12)}
.search svg{flex:none;color:var(--faint)}
.search input{border:none;outline:none;background:none;font-size:14px;width:100%;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;border:1px solid var(--border-dark);background:var(--surface);
  color:var(--muted);padding:7px 14px;cursor:pointer;border-radius:99px;transition:all .12s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.chips-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-right:2px}

/* ---------- main / panels ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:16px 32px 80px}
main.narrow{max-width:920px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.panel+.panel{margin-top:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--border);background:#fafbfc}
.panel-head h2{font-size:14px;font-weight:800;letter-spacing:-.01em}
.cap{padding:10px 20px;background:var(--blue-bg);border-bottom:1px solid var(--blue-bd);color:var(--blue-fg);font-size:12.5px;font-weight:600}

/* ---------- catalog table ---------- */
.thead{display:grid;grid-template-columns:1fr 200px 110px 90px 140px 110px;gap:16px;
  padding:12px 20px;border-bottom:1px solid var(--border);background:#fafbfc;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700}
.thead span:nth-child(n+3){text-align:right}
.mfr-div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:14px 20px 10px;background:#fafbfc;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.mfr-div small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);text-transform:none}
.row{display:grid;grid-template-columns:1fr 200px 110px 90px 140px 110px;gap:16px;align-items:center;
  padding:13px 20px;border-bottom:1px solid var(--border);transition:background .1s}
.row:last-child{border-bottom:none}
.row:hover{background:#f8fafd}
.prod b{font-weight:600;font-size:14px;display:block;letter-spacing:-.005em}
.prod small{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.sku{font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.pill{justify-self:end;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid;white-space:nowrap}
.pill.A{background:var(--green-bg);color:var(--green-fg);border-color:var(--green-bd)}
.pill.B{background:var(--amber-bg);color:var(--amber-fg);border-color:var(--amber-bd)}
.pill.C,.pill.U{background:var(--red-bg);color:var(--red-fg);border-color:var(--red-bd)}
.pill.N,.pill.P{background:var(--blue-bg);color:var(--blue-fg);border-color:var(--blue-bd)}
.avail{text-align:right;font-family:var(--mono)}
.avail b{font-size:14px;font-weight:600}
.avail small{color:var(--faint);font-size:11px;margin-left:3px}
.offer{justify-self:end;display:flex;align-items:center;border:1px solid var(--border-dark);background:var(--surface);width:130px;border-radius:7px;transition:border-color .15s, box-shadow .15s}
.offer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.12)}
.offer.bad{border-color:var(--red-bd);background:var(--red-bg)}
.offer span{font-family:var(--mono);padding-left:10px;color:var(--faint);font-size:13px}
.offer input{width:100%;border:none;outline:none;background:none;padding:8px 10px 8px 4px;font-family:var(--mono);font-size:13px;text-align:right;color:var(--ink)}
.add{justify-self:end;font-weight:700;font-size:12.5px;border:1px solid var(--border-dark);background:var(--surface);
  color:var(--ink);padding:8px 18px;cursor:pointer;border-radius:7px;transition:all .12s}
.add:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)}
.add.added{background:var(--green-bg);border-color:var(--green-bd);color:var(--green-fg)}
.add:disabled{opacity:.45;cursor:not-allowed}

/* ---------- notices ---------- */
.notice{margin:70px auto;max-width:460px;text-align:center;padding:48px 32px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.notice h2{font-weight:800;font-size:17px;margin-bottom:8px;letter-spacing:-.01em}
.notice p{font-size:13px;color:var(--muted);line-height:1.7}
.notice .bar{height:5px;background:var(--border);margin-top:26px;overflow:hidden;border-radius:99px}
.notice .bar i{display:block;height:100%;width:38%;background:var(--accent);border-radius:99px;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.notice .btn{margin-top:20px}
.inline-note{padding:12px 20px;font-size:12.5px;color:var(--muted);background:#fafbfc;border-bottom:1px solid var(--border)}

/* ---------- banners ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:1px solid;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:12px}
.banner.red{background:var(--red-bg);color:var(--red-fg);border-color:var(--red-bd)}
.banner.amber{background:var(--amber-bg);color:var(--amber-fg);border-color:var(--amber-bd)}
.banner.green{background:var(--green-bg);color:var(--green-fg);border-color:var(--green-bd)}
.banner.blue{background:var(--blue-bg);color:var(--blue-fg);border-color:var(--blue-bd)}
.banner a{color:inherit}

/* ---------- drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,41,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--surface);z-index:100;
  box-shadow:var(--shadow-lg);transform:translateX(103%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{padding:20px 26px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{font-weight:800;font-size:16px;letter-spacing:-.01em}
.drawer-head button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--faint);line-height:1;padding:4px}
.drawer-head button:hover{color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 26px}
.drawer-foot{border-top:1px solid var(--border);padding:18px 26px 22px;background:#fafbfc}
.cline{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cline .info{flex:1;min-width:0}
.cline .info b{font-size:13px;font-weight:600;display:block}
.cline .info small{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.cline .qty{display:flex;align-items:center;border:1px solid var(--border-dark);border-radius:7px}
.cline .qty button{width:28px;height:30px;border:none;background:none;cursor:pointer;font-family:var(--mono);font-size:14px;color:var(--muted)}
.cline .qty button:hover{color:var(--accent)}
.cline .qty span{font-family:var(--mono);font-size:13px;min-width:28px;text-align:center}
.cline .lp{font-family:var(--mono);font-size:12px;min-width:68px;text-align:right;color:var(--muted)}
.cline .rm{background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;padding:4px}
.cline .rm:hover{color:var(--red-fg)}
.cline.bad{background:var(--red-bg);margin:0 -26px;padding-left:26px;padding-right:26px}
.cline .lineerr{flex-basis:100%;font-size:12px;color:var(--red-fg);font-weight:600}
.cline.clamped{background:var(--amber-bg);margin:0 -26px;padding-left:26px;padding-right:26px}
.cline .linewarn{flex-basis:100%;font-size:12px;color:var(--amber-fg);font-weight:600}
/* Empty-cart message and the post-submit confirmation panel. */
.success{padding:44px 8px;text-align:center}
.success h3{font-size:16px;font-weight:800;margin-bottom:10px}
.success p{font-size:13px;line-height:1.8;color:var(--muted)}
.success b{color:var(--ink);font-family:var(--mono);font-weight:600}
.check{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--green-bg);border:1px solid var(--green-bd);
  display:grid;place-items:center;animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.totline{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted);gap:12px}
.totline span:last-child{font-family:var(--mono);text-align:right}
.totline.big{font-size:15px;color:var(--ink);font-weight:700;padding-top:8px}

/* ---------- forms ---------- */
.field{margin-top:14px}
.field label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;font-weight:700}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border-dark);background:var(--surface);padding:10px 12px;
  font-size:13.5px;outline:none;color:var(--ink);border-radius:8px;transition:border-color .15s, box-shadow .15s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.12)}
.field input[aria-invalid="true"]{border-color:var(--red-bd);background:var(--red-bg)}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:5px;text-transform:none;letter-spacing:0;font-weight:400}
.field .fielderr{font-size:12px;color:var(--red-fg);margin-top:5px;font-weight:600}
.submit{width:100%;margin-top:18px;background:var(--accent);color:#fff;border:none;padding:13px;
  font-weight:700;font-size:14px;cursor:pointer;border-radius:8px;transition:background .15s}
.submit:hover{background:var(--accent-dark)}
.submit:disabled{background:var(--border-dark);cursor:wait}
.testnote{font-size:11px;color:var(--faint);text-align:center;margin-top:12px}
.err{font-size:12.5px;color:var(--red-fg);margin-top:12px;font-weight:600;white-space:pre-wrap}
.ok{font-size:12.5px;color:var(--green-fg);margin-top:12px;font-weight:600}

/* auth pages */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;gap:18px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:30px 28px}
.auth-card.wide{max-width:520px}
.auth-card h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.auth-card .lede{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:6px}
.auth-brand{display:flex;align-items:center;gap:12px;justify-content:center}
.auth-alt{font-size:12.5px;color:var(--muted);text-align:center}
.legal{font-size:11.5px;color:var(--faint);text-align:center;max-width:420px;line-height:1.6}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two-col .field{margin-top:0}

/* prose pages (privacy, terms) */
.prose{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;box-shadow:var(--shadow)}
.prose h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.prose h2{font-size:14px;font-weight:800;margin:24px 0 8px}
.prose p,.prose li{font-size:13.5px;color:var(--muted);line-height:1.75}
.prose ul{margin:8px 0 8px 20px}
.prose .updated{font-size:12px;color:var(--faint);margin-bottom:18px}

/* ---------- admin ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 32px;max-width:var(--wrap);margin:0 auto}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:12px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab .count{font-family:var(--mono);font-size:11px;background:var(--grey-bg);color:var(--grey-fg);border-radius:99px;padding:1px 7px;margin-left:6px}
.tab.on .count{background:var(--blue-bg);color:var(--accent)}

.card{border-bottom:1px solid var(--border);padding:16px 20px;display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.card:last-child{border-bottom:none}
.card .who b{font-size:14px;font-weight:700;display:block}
.card .who .em{font-family:var(--mono);font-size:13px;color:var(--ink);display:block;margin-top:3px;word-break:break-all}
.card .who small{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-approve{background:var(--green-fg);color:#fff;border:none;padding:9px 16px;border-radius:7px;font-weight:700;font-size:12.5px;cursor:pointer}
.btn-approve:hover{background:#036249}
.btn-reject{background:var(--surface);color:var(--red-fg);border:1px solid var(--red-bd);padding:9px 16px;border-radius:7px;font-weight:700;font-size:12.5px;cursor:pointer}
.btn-reject:hover{background:var(--red-bg)}
.btn-approve:disabled,.btn-reject:disabled{opacity:.5;cursor:wait}

.offer-row{border-bottom:1px solid var(--border);padding:14px 20px}
.offer-row:last-child{border-bottom:none}
.offer-top{display:flex;gap:14px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;cursor:pointer}
.offer-top .oid{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.offer-top .oco{font-weight:700;font-size:14px}
.offer-top .ometa{font-size:12px;color:var(--muted)}
.offer-top .ototal{font-family:var(--mono);font-size:14px;font-weight:600;white-space:nowrap}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;border:1px solid;white-space:nowrap}
.tag.green{background:var(--green-bg);color:var(--green-fg);border-color:var(--green-bd)}
.tag.red{background:var(--red-bg);color:var(--red-fg);border-color:var(--red-bd)}
.tag.amber{background:var(--amber-bg);color:var(--amber-fg);border-color:var(--amber-bd)}
.tag.grey{background:var(--grey-bg);color:var(--grey-fg);border-color:var(--grey-bd)}
.tag a{color:inherit}
.detail{margin-top:12px;border-top:1px dashed var(--border);padding-top:12px}
.wcerr{font-family:var(--mono);font-size:11.5px;color:var(--red-fg);background:var(--red-bg);border:1px solid var(--red-bd);
  border-radius:7px;padding:8px 10px;margin-bottom:10px;white-space:pre-wrap;word-break:break-word}
.tablewrap{overflow-x:auto}
table.lines{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
table.lines th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--border)}
table.lines td{padding:6px 8px;border-bottom:1px solid var(--border)}
table.lines td.num,table.lines th.num{text-align:right;font-family:var(--mono)}
table.lines .skucell{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Lines priced below list are the ones needing a decision — make them findable at a glance
   in a forty-line order sheet. */
table.lines tr.negotiated td{background:var(--amber-bg)}
.tag.blue{background:var(--blue-bg);color:var(--blue-fg);border-color:var(--blue-bd)}
.contact{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.7}
.contact b{color:var(--ink)}

footer{border-top:1px solid var(--border);background:var(--surface)}
footer .in{max-width:var(--wrap);margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}
footer a{color:var(--faint)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .thead{display:none}
  .row{grid-template-columns:1fr auto;grid-template-areas:"prod pill" "sku sku" "avail avail" "offer add";row-gap:10px}
  .prod{grid-area:prod}.pill{grid-area:pill}.sku{grid-area:sku}
  .avail{grid-area:avail;text-align:left}.offer{grid-area:offer;justify-self:start}.add{grid-area:add}
  .stats,.live{display:none}
  .mast{padding:0 20px}.toolbar{padding:16px 20px 0}main{padding:12px 20px 60px}
  .tabs{padding:0 20px}
  footer .in{padding:18px 20px}
}
/* The admin dashboard's entry point is a link in an email, opened on a phone. */
@media(max-width:760px){
  .two-col{grid-template-columns:1fr}
  .card{flex-direction:column;gap:12px}
  .card .actions{width:100%}
  .card .actions button{flex:1}
  .offer-top{flex-direction:column;gap:4px;align-items:stretch}
  .offer-top .ototal{text-align:left}
  .whoami{text-align:left}
  .mast{padding-top:10px;padding-bottom:10px;gap:12px}
  .mast-right{gap:12px}
}

/* Also last on purpose, and for the same reason as the focus rules below: iOS Safari zooms
   the viewport when a focused field is under 16px, and `.offer input` / `.field input` /
   `.search input` set 13-13.5px further up the sheet. A media query does not raise
   specificity, so at equal specificity this only wins by coming later. */
@media (max-width:760px){
  input,select,textarea,
  .offer input,.field input,.search input,.cline .qty span{font-size:16px}
}

/* Touch targets, also last on purpose. The components below set their own padding further up
   the sheet, so an earlier min-height would lose on source order. 44px is the smallest target
   a finger hits reliably — and on this page the offenders were the filter chips and the two
   buttons on every catalog row, which are the most-tapped controls in the product. */
@media (pointer:coarse){
  .chip,.btn,.btn-sm,.add,.navlink,.brand{min-height:44px}
  .search input,.field input,.field select,.field textarea{min-height:44px}
  .cline .rm,.cline .lnk{min-width:44px;min-height:44px}
  /* The ✕ on the order sheet and the offer dialog — small, and the only way out of a
     full-screen panel on a phone. */
  .drawer-head button,.modal-head button{min-width:44px;min-height:44px}
  /* Standalone links under the sign-in form ("Forgot password?", "Apply for an account") are
     real destinations, not prose. The padding grows the hit area and the negative margin
     keeps the layout exactly where it was. Links inside .legal are left alone — those are
     genuinely inline in a sentence, which the touch-target guidance exempts. */
  .auth-alt a{display:inline-block;padding:14px 8px;margin:-14px -8px}
  /* The health banner is the thing a rep taps to go and deal with stuck offers, and the
     mailto is how they reach the buyer — both were text-height targets. */
  .banner button{min-height:44px}
  .contact a{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* LAST in the sheet on purpose: several base rules set outline:none, and a focus ring that
   loses the cascade is the same as no focus ring at all. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible,
.chip:focus-visible,.add:focus-visible,.btn:focus-visible,.submit:focus-visible,
.rm:focus-visible,.tab:focus-visible,.qty button:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px;
}

/* per-line counter price input on the admin offer sheet */
.cinput{width:92px;padding:3px 6px;border:1px solid #cdd3dc;border-radius:5px;font:inherit;font-size:12px;text-align:right}
.cinput:focus{outline:none;border-color:#1a56db}