/* 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;
  --orange-bg:#fff1e5;--orange-fg:#c2410c;--orange-bd:#fb923c;
  --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}
img.mark{background:none;border-radius:0;object-fit:contain}
.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}
/* Catalog filter bar. Native <select> only: the mobile picker, desktop type-ahead, keyboard
   and screen-reader behaviour all come free, and there is no build step here to hang a custom
   combobox off. auto-fit does the responsive work alone — six tracks across the desktop
   toolbar, two at 375px — so this needs no breakpoint of its own. */
.facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.facet{display:flex;flex-direction:column;gap:5px;min-width:0}
.facet label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
/* Deliberately quieter than the label it sits beside: it answers a question the buyer may
   have, without competing with the control for attention. */
.facet-help{margin-left:6px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--accent)}
/* min-width:0 or the 128-option model list sizes its grid track to the widest option and blows
   the row out. No font-size here ON PURPOSE: .field select (0,1,1) pins 13.5px and would beat
   the iOS anti-zoom rule at the end of this sheet, which only reaches bare `select` (0,0,1).
   Leaving size unset lets that rule raise these to 16px under 760px. */
.facets select{width:100%;min-width:0;border:1px solid var(--border-dark);background:var(--surface);
  color:var(--ink);padding:9px 10px;border-radius:8px;cursor:pointer}
.fcount{margin-left:auto;font-size:12px;color:var(--muted)}

/* ---------- 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%);
  /* visibility rides the transition: without it, closing snaps while opening glides */
  transition:transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
  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:4px 0;color:var(--muted);gap:12px}
/* tabular-nums so the amounts line up digit for digit down the column — the whole point of
   showing a subtotal is that the arithmetic can be checked at a glance. */
.totline span:last-child{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.totline.big{font-size:16px;color:var(--ink);font-weight:700;padding-top:8px}
/* Separates who-and-how-many from what-it-costs, and the costs from their sum. */
.totrule{height:1px;background:var(--border);margin:7px 0}

/* Accounts. Same rule as the order queue: every track fixed or fractional, because each row is
   its own grid and a content-sized track lines up with nothing above it. */
.acct-tools{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border)}
.acct-tools input{flex:1;max-width:380px;font-family:inherit;font-size:13px;padding:8px 11px;
  border:1px solid var(--border-dark);border-radius:8px;background:var(--surface);color:var(--ink)}
.acct-count{font-size:12px;color:var(--muted);margin-left:auto}
.acct-head,.acct-row{display:grid;
  /* Every track fixed or fr, never auto: each row is its own grid, so an auto track sized to
     that row's buttons ("Reinstate" vs "Revoke access") knocked every column out of line. */
  grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) 78px 210px 78px 84px 140px;
  gap:14px;align-items:center}
.acct-head{padding:9px 20px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--border);background:var(--bg)}
.acct-row{padding:11px 20px;border-bottom:1px solid var(--border)}
.acct-row:last-child{border-bottom:none}
.acct-row:hover{background:var(--bg)}
.acompany,.acontact{min-width:0;display:flex;flex-direction:column;gap:1px}
.acompany b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acompany i,.acontact i{font-style:normal;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acontact{font-size:12.5px}
.arole,.awhen{font-size:12px;color:var(--muted);white-space:nowrap}
.aacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acct-row .err{grid-column:1/-1;margin-top:6px}
/* The company cell is the toggle for the account panel below the row. */
button.acompany{background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.acompany:hover b{color:var(--accent)}
button.acompany b::before{content:'▸ ';color:var(--faint);font-weight:400}
button.acompany[aria-expanded="true"] b::before{content:'▾ '}
.acct-detail{grid-column:1/-1;margin-top:10px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;font-size:12.5px;line-height:1.55}
.acct-detail h4{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 6px}
.acct-detail h4 .dim{text-transform:none;letter-spacing:0;font-weight:500}
.acct-detail .dim{color:var(--faint)}
.acct-detail td{white-space:nowrap}   /* the tables scroll sideways; "WS-/00002" split over two lines does not */
.acct-detail ul{list-style:none}
.acct-detail li + li{margin-top:6px}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px}
.acct-grid h4{margin-top:0}
.facts div{display:flex;gap:10px}
.facts dt{color:var(--muted);min-width:110px}
@media (max-width:1080px){
  .acct-head{display:none}
  .acct-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .acompany{grid-column:1;grid-row:1}
  .astate{grid-column:2;grid-row:1;justify-self:end}
  .acontact,.arole,.awhen{grid-column:1/-1}
  .alast::before{content:'Last login '}
  .arole,.awhen{display:inline}
  .aacts{grid-column:1/-1;justify-content:flex-start}
}

/* Cost coverage. Same grid discipline as the other two tables — every track fixed or
   fractional, because each row is its own grid and a content-sized one aligns with nothing. */
.price-summary{display:flex;flex-wrap:wrap;gap:8px 28px;padding:14px 20px;
  border-bottom:1px solid var(--border);background:var(--bg);font-size:13px;color:var(--muted)}
.price-summary b{color:var(--ink);font-family:var(--mono);font-weight:600}
.price-block{padding:0 0 6px}
.price-block h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;
  padding:18px 20px 6px;font-size:14.5px;font-weight:700}
.price-block h3 .dim{font-size:12px;font-weight:500}
.price-block .hint{margin:0;padding:0 20px 12px;font-size:12.5px;color:var(--muted);max-width:80ch}
.price-head,.price-row{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,2fr) 72px 72px 92px 104px;
  gap:14px;align-items:center;padding:9px 20px}
.price-head{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.price-row{border-bottom:1px solid var(--border-soft,var(--border))}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:var(--bg)}
.psku{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pdesc{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px}
.pdesc i{font-style:normal;font-size:11px;color:var(--muted)}
.pdesc,.psku{min-width:0}
/* The three numeric columns are the comparison, so they line up and use lining figures. */
.pstock,.pcost,.pprice{font-family:var(--mono);font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.price-head span:nth-child(3),.price-head span:nth-child(4),.price-head span:nth-child(6){text-align:right}
.pprice{font-weight:600}
.pcov{display:flex;justify-content:flex-end}
@media (max-width:1080px){
  .price-head{display:none}
  .price-row{grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
  .pdesc{grid-column:1;grid-row:1}
  .pprice{grid-column:2;grid-row:1}
  .psku{grid-column:1/-1;grid-row:2}
  .pstock,.pcost{grid-column:1/-1;text-align:left;display:inline}
  .pstock::after{content:' in stock'}
  .pcost::after{content:' costed'}
  .pcov{grid-column:1/-1;justify-content:flex-start}
}

/* The markup control. It sits at the top of Cost coverage because it is the number every row
   below it is derived from. */
.markup-box{padding:16px 20px;border-bottom:1px solid var(--border)}
.band-head,.band-row{display:grid;grid-template-columns:72px 120px 104px minmax(0,1fr) 74px;
  gap:10px;align-items:center;padding:4px 0}
.band-head{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding-bottom:6px}
.band-when{font-size:12px;color:var(--muted)}
.band-open{font-family:var(--mono);color:var(--faint)}
.band-money{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
/* Marker classes readRules() collects the inputs by; they inherit their look from
   .band-money input above. */
.bmax,.bpct,.goff{}
.band-money input{width:74px;border:1px solid var(--border-dark);border-radius:7px;
  background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:13.5px;
  padding:6px 8px;text-align:right}
.band-money input:focus{outline:none;border-color:var(--accent)}
.band-eg{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--border)}
.band-floor{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.band-floor label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .band-head{display:none}
  .band-row{grid-template-columns:64px 1fr 1fr;gap:6px}
  .band-eg{grid-column:1/-1}
  .band-floor{margin-left:0}
}
.grade-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.grade-head,.grade-row{display:grid;grid-template-columns:150px 116px 90px minmax(0,1fr);
  gap:10px;align-items:center;padding:3px 0}
.grade-head{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding-bottom:6px}
.gname{font-size:13px;font-weight:600}
.gstock{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .grade-head{display:none}
  .grade-row{grid-template-columns:1fr auto;gap:6px}
  .gstock,.grade-row .band-eg{grid-column:1/-1}
}
.markup-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.markup-form label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.markup-input{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-dark);
  border-radius:8px;padding:0 10px 0 0;background:var(--surface)}
.markup-input input{width:88px;border:0;background:none;color:var(--ink);font-family:var(--mono);
  font-size:15px;font-weight:600;padding:8px 10px;text-align:right}
.markup-input input:focus{outline:none}
.markup-input:focus-within{border-color:var(--accent)}
.markup-input span{font-size:13px;color:var(--muted)}
.markup-eg{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.markup-box .hint{margin:10px 0 0;font-size:12.5px;color:var(--muted);max-width:84ch}
.markup-box .err{margin-top:10px}

/* ---------- 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}
/* Feedback text speaks with one voice: 12px, 600, red for problems, green for confirmations.
   .fielderr (per-field), .err (per-form) and the account page's .savemsg all follow it. */
.err{font-size:12px;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}

/* One grid template shared by the header and every row, so a column starts at the same x all
   the way down. The previous flex + space-between spread each row to its own content: the buyer
   column wandered 62px between rows and the date blob 114px, which is what made a list of eight
   orders something you read rather than scanned. */
.offer-row{border-bottom:1px solid var(--border);padding:0}
.offer-row:last-child{border-bottom:none}
.offer-head,.offer-top{display:grid;
  grid-template-columns:96px minmax(0,2.1fr) 74px 62px 118px 150px minmax(0,1.5fr);
  gap:14px;align-items:center;text-align:left;width:100%}
.offer-head{padding:9px 20px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--border);background:var(--bg)}
.offer-top{padding:11px 20px;cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.offer-top:hover{background:var(--bg)}
.offer-top .oid{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
/* Company and the buyer's own PO in one cell: two lines would make every row taller for a
   reference most orders do not carry. min-width:0 lets the ellipsis actually happen. */
.offer-top .oco{min-width:0;display:flex;flex-direction:column;gap:1px}
.offer-top .oco b{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-top .oco i{font-style:normal;font-size:11px;color:var(--muted);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-top .owhen{font-size:12px;color:var(--muted);white-space:nowrap}
/* Right-aligned and tabular: these are the two columns anyone actually compares. */
.offer-top .ounits,.offer-head span:nth-child(4){text-align:right}
.offer-top .ototal,.offer-head span:nth-child(5){text-align:right}
.offer-top .ounits{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.offer-top .ototal{font-family:var(--mono);font-size:13.5px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.offer-top .ostatus,.offer-top .oflags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
@media (max-width:1080px){
  /* Below this the seven columns stop fitting, so the row goes back to stacking — but as a
     labelled two-column block rather than a wrapped run-on. */
  .offer-head{display:none}
  /* Three rows: who and how much, then when and how many, then where it stands. Everything
     still occupies a fixed cell, so the columns line up down the list here too. */
  /* A fixed third track, not auto: every .offer-top is its own grid, so a content-sized
     track lines up with nothing on the row above it. Same trap as the desktop template. */
  .offer-top{grid-template-columns:auto minmax(0,1fr) 104px;gap:3px 10px;padding:11px 16px}
  .offer-top .oid{grid-column:1;grid-row:1}
  .offer-top .oco{grid-column:2;grid-row:1}
  .offer-top .ototal{grid-column:3;grid-row:1;text-align:right}
  .offer-top .owhen{grid-column:1/3;grid-row:2}
  .offer-top .ounits{grid-column:3;grid-row:2;text-align:right}
  /* "250" on its own says nothing once the column header is gone. */
  .offer-top .ounits::after{content:' units'}
  .offer-top .ostatus{grid-column:1/3;grid-row:3}
  .offer-top .oflags{grid-column:3;grid-row:3;justify-content:flex-end}
}
.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.orange{background:var(--orange-bg);color:var(--orange-fg);border-color:var(--orange-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)}
/* Supplier stock (Mastertronics): admin-only, has to be bought in before it ships */
table.lines tr.supplier td{background:var(--orange-bg)}
table.lines tr.supplier td:first-child{box-shadow:inset 4px 0 var(--orange-bd)}
.row.supplier,.row.supplier:hover{background:var(--orange-bg);box-shadow:inset 4px 0 var(--orange-bd)}
.srcnote{display:block;font-size:12px;font-weight:600;color:var(--orange-fg)}
.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{display:none} /* .live stays: it is the only staleness warning the buyer gets */
  .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 .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,.facets select{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 var(--border-dark);border-radius:7px;
  font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink);background:var(--surface);
  transition:border-color .15s}
.cinput:focus{outline:none;border-color:var(--accent)}

/* payment instructions on the order-submitted panel */
.paybox{margin:14px 0;padding:12px 14px;background:#fdf6e7;border-left:4px solid #b45309;border-radius:0 6px 6px 0;font-size:13px;line-height:1.6;text-align:left;white-space:pre-line}
/* The post-submit payment panel. Everything below opts out of .paybox's pre-line, which
   exists for the plain-sentence boxes and would inject stray gaps into a grid. */
.pay-head,.pay-rows,.pay-note,.pay-warn{white-space:normal}
.pay-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-bottom:10px}
/* The amount is the one number the buyer has to act on, so it is the only large thing here. */
.pay-label{flex:0 0 100%;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--amber-fg)}
.pay-amt{font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pay-method{font-size:12.5px;color:var(--muted)}
/* Two columns: label, then value. Values are mono because they are transcribed by hand into
   a banking form, and a mis-read account number is a payment that goes nowhere. */
.pay-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:0 0 10px;
  padding-top:10px;border-top:1px solid var(--amber-bd)}
.pay-rows dt{font-size:12.5px;color:var(--muted)}
.pay-rows dd{margin:0;font-family:var(--mono);font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.pay-note{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.pay-warn{margin:0;font-weight:700}
@media (max-width:440px){
  /* Stacked, so a long beneficiary name is not squeezed into half the width. */
  .pay-rows{grid-template-columns:1fr;gap:0}
  .pay-rows dt{margin-top:6px}
}

/* buyer-facing order history */
.myorder{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border-dark);
  border-radius:10px;box-shadow:var(--shadow);margin-top:14px;overflow:hidden}
/* the left edge carries the status color, so the eye can sort the list without reading */
.myorder.t-amber{border-left-color:var(--amber-fg)}
.myorder.t-green{border-left-color:var(--green-fg)}
.myorder.t-red{border-left-color:var(--red-fg)}
.myorder.t-grey{border-left-color:var(--grey-bd)}
.myorder-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 20px;
  background:#fafbfc;border-bottom:1px solid var(--border)}
.myorder-head>b:first-child{font-size:15px}
.myorder-body{padding:10px 20px 14px}
.myorder-total{margin-left:auto;font-family:var(--mono);font-size:15px}

/* buyer order lines: content-hugging, reference prices dimmed */
.mylines{min-width:0}
.mylines td.dim{color:var(--faint)}
.mylines td b{font-weight:600}

/* order card: lines left, status rail right */
.myorder-body{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.myorder-lines{flex:1 1 400px;min-width:0}
.myorder-side{flex:1 1 260px;max-width:340px;border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.55;border:1px solid var(--border)}
.myorder-side.t-amber{background:var(--amber-bg);border-color:var(--amber-bd)}
.myorder-side.t-amber .oside-st{color:var(--amber-fg)}
.myorder-side.t-green{background:var(--green-bg);border-color:var(--green-bd)}
.myorder-side.t-green .oside-st{color:var(--green-fg)}
.myorder-side.t-red{background:var(--red-bg);border-color:var(--red-bd)}
.myorder-side.t-red .oside-st{color:var(--red-fg)}
.myorder-side.t-grey{background:var(--grey-bg);border-color:var(--grey-bd)}
.myorder-side.t-grey .oside-st{color:var(--grey-fg)}
.oside-st{display:block;font-size:13.5px;margin-bottom:4px}
.oside-break{margin-top:12px;padding-top:10px;border-top:1px solid rgba(15,23,41,.12)}
.oside-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.oside-row span:last-child{font-family:var(--mono)}
.oside-total{font-weight:700;margin-top:4px;padding-top:6px;border-top:1px solid rgba(15,23,41,.12);font-size:14px}
.oside-acts{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.oside-acts .btn{width:100%}
@media (max-width:760px){.myorder-side{max-width:none}}

/* clickable card head + order detail overview grid */
button.myorder-head{font:inherit;color:inherit;border:none;width:100%;text-align:left;cursor:pointer}
.ohead-btn:hover{background:var(--grey-bg)}
.ohead-more{color:var(--faint);font-size:17px;line-height:1;margin-left:2px}
.odetail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px;
  margin:2px 0 16px;padding:12px 14px;background:#fafbfc;border:1px solid var(--border);border-radius:8px}
.odetail-cell{font-size:13px}
.odetail-cell small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:2px}

/* dial-code dropdown: searchable, styled rows — country left, code right */
.dial-box{position:relative}
.dial-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--border-dark);background:var(--surface);
  padding:9px 12px;border-radius:8px;font-family:var(--mono);font-size:13px;color:var(--ink);cursor:pointer;min-width:78px;justify-content:center}
.dial-btn::after{content:'▾';font-size:10px;color:var(--faint)}
.dial-btn:hover{border-color:var(--ink)}
.dial-pop{position:absolute;z-index:80;top:calc(100% + 6px);left:0;width:290px;max-height:330px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);
  padding:8px;display:flex;flex-direction:column}
.dial-search{border:1px solid var(--border-dark);border-radius:7px;padding:8px 10px;font-size:13px;
  font-family:inherit;color:var(--ink);margin-bottom:6px;outline:none}
.dial-search:focus{border-color:var(--ink)}
.dial-list{overflow-y:auto}
.dial-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  background:none;border:none;padding:8px 10px;border-radius:7px;font:inherit;font-size:13px;
  color:var(--ink);cursor:pointer;text-align:left}
.dial-row:hover,.dial-row:focus{background:var(--grey-bg);outline:none}
.dial-row b{font-family:var(--mono);font-weight:500;color:var(--faint)}

/* text-link buttons/anchors used by page headers and panel titles */
.lnk{background:none;border:none;padding:0;color:var(--accent);font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* order detail: addresses as their own cards */
.odetail-addrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 16px}
.odetail-addr{padding:12px 14px;background:#fafbfc;border:1px solid var(--border);border-radius:8px;font-size:13px;line-height:1.55}
.odetail-addr small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:3px}
.odetail-addr .dim{color:var(--faint)}

/* orders list: one-line summary under the card head; detail owns the table */
.myorder-sum{padding:10px 20px 12px;font-size:13px;color:var(--ink)}
.myorder-sum .dim{color:var(--faint)}

/* ---------- interaction states the sheet was missing ---------- */
/* Ghost and standard buttons had no :disabled face, so in-flight disables were invisible. */
.btn:disabled,.btn-ghost:disabled{opacity:.55;cursor:wait}
/* Press states: every control invests in :hover but nothing acknowledged the actual press —
   on coarse pointers (three blocks of 44px targets above) hover does not even exist. */
.btn:active,.submit:active,.btn-approve:active,.btn-reject:active,.add:active{filter:brightness(.93)}
.chip:active,.st:active,.qty button:active,.ohead-btn:active,.lnk:active{filter:brightness(.9)}

/* Programmatic scrolls and focus land under the sticky header without this. */
[role="tabpanel"],.mfr-div,.panel-head{scroll-margin-top:84px}

@media (max-width:760px){
  /* The wrapped masthead pinned up to a third of a phone viewport. Static on phones:
     scrolling up to reach the cart costs less than losing 200px of every screen. */
  header{position:static}
  /* One scroll region for the drawer: the checkout footer alone can exceed a phone
     viewport, and with only .drawer-body scrolling, Submit could sit unreachable. */
  .drawer{display:block;overflow-y:auto}
  .drawer-head{position:sticky;top:0;background:var(--surface);z-index:1}
  .drawer-body{overflow:visible}
}

/* orders list groups: urgency reads before any text does — the hot group carries the same
   amber the status rails speak; the archive below drops to a whisper label */
.ghead-hot{display:flex;align-items:center;gap:10px;margin-top:16px;padding:11px 18px;
  background:var(--amber-bg);border:1px solid var(--amber-bd);border-left:4px solid var(--amber-fg);
  border-radius:10px}
.ghead-hot h2{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--amber-fg)}
.ghead-rest{margin:32px 4px 2px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}