/* purchasing.css - the Distributors module's own styles (app/purchasing.js).
   Everything else is the console's kit: system.css tokens, board.css (.lfd-*,
   .lfb-*), staff.html's .fchip, .btn, .tag, .search, label/input. No colour
   here that is not a token, so light, dark and all four skins work without a
   rule of their own. Figures are mono and tabular (DESIGN.md); the book
   spreads to the window edges on a 27-inch monitor and folds to two columns
   on a phone. */

/* ---- bars and chips -------------------------------------------------- */
.pu-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;align-items:center}
.pu-chips.pu-sub{margin-top:-2px;margin-bottom:10px}
.pu-chips .fchip{min-height:34px}
.pu-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.pu-bar .search{flex:1;min-width:220px;margin:0}
.pu-hint{font-size:12.5px;color:var(--ink3)}
.pu-note{margin:6px 0}
.pu-empty{font-size:13px;color:var(--ink3);padding:14px 2px}
.pu-warn{color:var(--clay)}
.pu-good{color:var(--jade)}
.pu-wrap{white-space:normal;overflow-wrap:anywhere;text-align:right}
.pu-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3)}

/* Status tags reuse the console's .tag; only the tint is ours. */
.tag.pu-t-good{background:var(--jadebg);color:var(--jade)}
.tag.pu-t-warn{background:var(--claybg);color:var(--clay)}
.tag.pu-t-mute{background:var(--surface2);color:var(--ink3)}
.fchip.pu-danger{color:var(--clay);border-color:var(--claybg)}

.pu-acts-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
.pu-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start;margin:0 0 14px}

/* ---- the book -------------------------------------------------------- */
.pu-group{margin:0 0 18px}
.pu-grouph{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.pu-grouph span{font-family:var(--mono);font-size:11px;color:var(--ink3)}

.pu-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.pu-tr{display:grid;
  grid-template-columns:minmax(0,2.4fr) 84px repeat(5,minmax(78px,.8fr)) minmax(120px,1fr) 44px;
  gap:6px 10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line2)}
.pu-tr:last-child{border-bottom:0}
.pu-tr:not(.pu-th):hover{background:var(--surface2)}
.pu-th{background:var(--surface2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pu-th .n,.pu-tr .n{text-align:right}

.pu-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.pu-item b{font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pu-item i,.pu-line-n i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.pu-item i + i::before,.pu-line-n i + i::before{content:"\00b7";margin:0 5px;color:var(--line)}
.pu-rel{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:nowrap}

/* A quantity reads twice: the supplier's own unit, then eaches under it. */
.pu-q{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.pu-q b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;color:var(--ink)}
.pu-q i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink3);white-space:nowrap}
.pu-acts{display:flex;justify-content:flex-end}
.pu-acts .x{min-width:30px;min-height:30px}
.pu-link{white-space:nowrap}
.pu-pick{margin:0;padding:5px 8px;font-size:12.5px;max-width:230px}

/* ---- The Received tick on the book (ACD follow-ups, Oct 20 2026) ---- */
/* A book row's Received cell carries the card's own tick and count box
   (.pu-tick, .pu-count, in .pu-recv's row) for a line no paper is counted
   against. On a desktop the book's Received column is wide enough for the
   two side by side (the On order book only, #pubook; the Reorder table keeps
   its own grid), and the tick is a 34 px target; on a phone the cell is a
   row of its own and both are a finger's size (44 px), as on a touch
   screen. A line on an invoice says to count it there, in the second ink
   (it is an instruction: 4.5 to 1 at its size). The row's own error line
   spans the row. Every rule here outranks the card's by its selector, so
   its place in the file does not matter. Tokens only. */
@media (min-width:1181px){
  #pubook .pu-tr{grid-template-columns:minmax(0,2.4fr) 84px repeat(3,minmax(78px,.8fr)) minmax(150px,1fr) minmax(78px,.8fr) minmax(120px,1fr) 44px}
}
.pu-tr .pu-brecv{min-width:0}
.pu-tr .pu-brecv .pu-tick{min-height:34px;white-space:nowrap}
.pu-tr .pu-brecv .pu-count{width:56px}
.pu-tr .pu-brecv-h{font-size:11.5px;text-align:right;line-height:1.3;color:var(--ink2)}
.pu-tr .pu-rowerr{grid-column:1 / -1;margin:2px 0 0}
@media (max-width:860px){
  .pu-tr .pu-brecv{grid-column:1 / -1;justify-content:flex-start;gap:10px}
  .pu-tr .pu-brecv .pu-tick{min-height:44px}
  .pu-tr .pu-brecv .pu-count{width:88px;min-height:44px}
  .pu-tr .pu-brecv-h{text-align:left}
}
@media (pointer:coarse){
  .pu-tr .pu-brecv .pu-tick,.pu-tr .pu-brecv .pu-count{min-height:44px}
}

/* ---- supplier cards -------------------------------------------------- */
.pu-sups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin:0 0 14px}
.pu-sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;text-align:left;font:inherit;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer}
.pu-sup:hover{border-color:var(--accent)}
.pu-sup:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pu-sup-t{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pu-sup-t b{font-family:var(--display);font-weight:600;font-size:15px}
.pu-sup-t .tag{margin:0}
.pu-sup-n{display:flex;flex-direction:column;gap:2px}
.pu-sup-n i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pu-sup-n b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.pu-sup-m{grid-column:1 / -1;font-size:12px;color:var(--ink2)}
.pu-off{margin:0 0 14px;font-size:13px}
.pu-off summary{cursor:pointer;color:var(--ink2);padding:6px 0}

/* ---- documents ------------------------------------------------------- */
.pu-docs{display:flex;flex-direction:column}
.pu-doc{display:grid;grid-template-columns:auto minmax(0,1.2fr) 110px 110px minmax(0,1.4fr);gap:6px 10px;
  align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.pu-doc:last-child{border-bottom:0}
.pu-doc[data-pdoc]{cursor:pointer}
.pu-doc[data-pdoc]:hover{background:var(--surface2)}
.pu-doc .tag{margin:0}
/* The reference, and under it where the document came from (its email). */
.pu-doc-r{display:flex;flex-direction:column;gap:2px;min-width:0}
.pu-doc-rt{font-family:var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-doc-r .pu-src{font-size:12px;color:var(--ink3)}
.pu-src{overflow-wrap:anywhere}
/* A copy link that names a long mailbox wraps at phone width instead of
   pushing the row wider than the screen. */
.pu-src a.pu-link{white-space:normal}
.pu-src a.pu-link + a.pu-link{margin-left:8px}
a.pu-link{color:var(--gold);font-weight:600;text-decoration:none;border-radius:2px}
a.pu-link:hover{text-decoration:underline}
a.pu-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pu-doc-d{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.pu-doc-m{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.pu-doc-s{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
/* An import fee (1.9.127) is titled by the shipper's printed name, which runs
   long (a full legal name, "CO.,LTD" and all): it wraps rather than being cut. */
.pu-fee .pu-doc-rt{white-space:normal;overflow-wrap:anywhere}
.pu-fee-foot{margin-top:8px;border-top:1px solid var(--line2)}

/* ---- intake ---------------------------------------------------------- */
.pu-intake{padding:12px 0;border-bottom:1px solid var(--line)}
.pu-intake:last-child{border-bottom:0}
.pu-intake-t{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.pu-intake-t b{font-family:var(--display);font-weight:600;font-size:14px}
.pu-intake-t .tag{margin:0}
.pu-intake-t .pu-doc-m{margin-left:auto}

.pu-lines{display:flex;flex-direction:column;margin:8px 0 0}
.pu-scroll{max-height:420px;overflow:auto}
.pu-line{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(70px,.7fr)) minmax(120px,1.1fr);
  gap:4px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.pu-line:last-child{border-bottom:0}
.pu-line-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.pu-line-n b{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pu-line-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.pu-line-a .tag{margin:0}
.pu-notes{font-size:12.5px;color:var(--ink2);margin:10px 0 0}
.pu-notes summary{cursor:pointer;font-weight:600;color:var(--ink);padding:4px 0}
.pu-notes div{padding:4px 0;border-bottom:1px solid var(--line2);overflow-wrap:anywhere}
.pu-notes div:last-child{border-bottom:0}
.pu-warnbox{margin:10px 0 0;padding:10px 12px;border:1px solid var(--claybg);border-left:3px solid var(--clay);
  border-radius:var(--r);background:var(--claybg);color:var(--ink);font-size:12.5px}
.pu-warnbox div + div{margin-top:4px}

/* ---- forms ----------------------------------------------------------- */
.pu-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;margin:10px 0 0}
.pu-form .pu-wide{grid-column:1 / -1}
.pu-field{display:flex;flex-direction:column;min-width:0}
.pu-field[hidden]{display:none}
.pu-field label{margin:0 0 4px}
.pu-field input,.pu-field select,.pu-field textarea{margin:0;width:100%}
.pu-field textarea{font-family:var(--mono);font-size:13px;line-height:1.5;resize:vertical}
.pu-field input[type="file"]{padding:8px;font-family:var(--ui)}

.pu-askline{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) 80px 110px 100px 140px;
  gap:8px 10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line2)}
.pu-askline:last-child{border-bottom:0}
.pu-askline .pu-grow{min-width:0}
.pu-askline .pu-narrow input,.pu-askline .pu-narrow select{width:100%}

/* ---- phone and mid-width -------------------------------------------- */
@media (max-width:1180px){
  .pu-cols{grid-template-columns:minmax(0,1fr)}
  .pu-tr{grid-template-columns:minmax(0,2fr) 76px repeat(4,minmax(68px,.7fr)) minmax(110px,1fr) 40px}
  .pu-tr .pu-rel{font-size:11.5px}
  .pu-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pu-askline{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 76px 100px 96px 140px}
}
@media (max-width:860px){
  .pu-table{border:0;background:none}
  .pu-th{display:none}
  .pu-tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:12px;
    border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 8px}
  .pu-tr:last-child{border-bottom:1px solid var(--line)}
  .pu-item{grid-column:1 / -1}
  .pu-rel{grid-column:1 / -1;color:var(--ink3)}
  .pu-acts{grid-column:1 / -1;justify-content:flex-start}
  .pu-acts .x,.pu-acts .fchip{min-height:44px;min-width:44px}
  .pu-q{align-items:flex-start}
  .pu-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pu-line-n{grid-column:1 / -1}
  .pu-line-a{grid-column:1 / -1;justify-content:flex-start}
  .pu-doc{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .pu-doc-d,.pu-doc-m,.pu-doc-s{grid-column:1 / -1;justify-content:flex-start;text-align:left}
  .pu-src a.pu-link{display:inline-block;padding:8px 0}
  .pu-form,.pu-askline{grid-template-columns:minmax(0,1fr)}
  .pu-askline{align-items:stretch}
  .pu-sup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pu-chips .fchip,.pu-bar .search{min-height:44px}
  .pu-scroll{max-height:none}
}

/* ---- wave 2: On order (plan 4.2) ------------------------------------ */
.pu-lead{margin:0;font-size:13px;color:var(--ink3)}
.pu-strip{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13px;color:var(--ink2)}
.pu-strip-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pu-strip-l .tag{margin:0}
.pu-s-good{color:var(--jade)}
.pu-s-warn{color:var(--warn)}
.pu-s-crit{color:var(--clay);font-weight:600}
.pu-first{display:block}
.pu-first summary{cursor:pointer;font-weight:600;color:var(--ink);padding:2px 0}
.pu-sec{max-width:none}
.pu-cards{display:flex;flex-direction:column;gap:10px}
.pu-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.pu-card:focus{outline:none}
.pu-card:focus-visible,.pu-card.pu-hit{outline:2px solid var(--accent);outline-offset:2px}
.pu-card-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.pu-card-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0;flex:1 1 280px}
.pu-card-t b{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.pu-card-ref{font-family:var(--mono);font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.pu-card-d{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.pu-card-m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--ink);text-align:right}
.pu-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.pu-card-tags .tag{margin:0}
/* A foreign figure and its dollars may sit on two lines in a narrow column;
   "about $99.25" itself never breaks. */
.pu-money{white-space:normal;overflow-wrap:anywhere}
.pu-about{font-style:normal;font-weight:400;font-size:.88em;color:var(--ink3);white-space:nowrap}
.pu-norate{cursor:pointer;border:0;font:inherit}
/* A line the shop has named (an AliExpress title is a marketplace listing's):
   the invoice's own title beneath the name in small type, the field a name
   is typed in, the "not named yet" tag, and the box for what the card
   charged. */
.pu-item i.pu-title,.pu-line-n i.pu-title{font-family:var(--ui);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.pu-name{margin:0;width:100%;min-width:0;padding:5px 8px}
.pu-namerow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pu-namerow .pu-name{flex:1 1 200px;width:auto}
.pu-unnamed{align-self:flex-start;margin:2px 0 0}
button.pu-unnamed{cursor:pointer;border:0;font-family:inherit}
.pu-charged input{width:110px;font-family:var(--mono);text-align:right}
.pu-field .pu-usd{max-width:220px;font-family:var(--mono)}
.pu-paperline{display:flex;flex-wrap:wrap;gap:2px 14px}
.pu-oneof{display:block}
.pu-boxes{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.pu-box{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink2);background:var(--surface2);overflow-wrap:anywhere}
.pu-box i{font-style:normal;color:var(--ink3)}
.pu-b-good{border-color:var(--jadebg);background:var(--jadebg);color:var(--jade)}
.pu-b-warn{border-color:var(--claybg);background:var(--claybg);color:var(--clay)}
.pu-box a.pu-link{white-space:normal}
.pu-ledline{margin:0;font-size:12.5px;color:var(--ink2)}
.pu-cls{display:flex;flex-direction:column}
.pu-cl{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(84px,.7fr)) minmax(170px,1.2fr);
  gap:4px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--line2);font-size:12.5px}
.pu-recv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.pu-tick{display:inline-flex;gap:6px;align-items:center;margin:0;font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink2);cursor:pointer}
.pu-tick input{width:18px;height:18px;margin:0}
.pu-tick input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pu-count{width:72px;margin:0;padding:5px 8px;font-family:var(--mono);text-align:right}
.pu-lbox{grid-column:1 / -1;font-size:12px;color:var(--ink3)}
.pu-lbox summary{cursor:pointer}
.pu-lbox .pu-box{margin:4px 6px 0 0}
.pu-menu{border-top:1px solid var(--line2);padding-top:6px;font-size:13px}
.pu-menu summary{cursor:pointer;font-weight:600;color:var(--ink2);padding:4px 0;min-height:34px;display:flex;align-items:center}
.pu-menu-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0}
.pu-inline{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.pu-inline input{margin:0;width:auto;padding:5px 8px}
.pu-boxacts{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px;border-top:1px dashed var(--line2)}
.pu-boxrow{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.pu-boxrow > span{font-family:var(--mono);font-size:12px;color:var(--ink2);min-width:140px}
.pu-boxrow input,.pu-boxrow select{margin:0;width:auto;padding:5px 8px}
.pu-off-box > span{color:var(--ink3)}
.pu-mini{min-height:26px;padding:2px 8px;font-size:11.5px;align-self:flex-start;margin-top:3px}
.pu-item i.pu-placed{color:var(--ink2)}
.pu-item i.pu-placed.pu-warn{color:var(--clay)}
.pu-done{font-size:13px}
.pu-done > summary{cursor:pointer;font-weight:600;color:var(--ink2);padding:8px 0}
.pu-done .pu-cards{margin-top:6px}

/* Edit lines on a card: the paper's own numbers, fixed by hand. */
.pu-editor{display:flex;flex-direction:column;gap:8px;padding:8px 0 0;border-top:1px solid var(--line2)}
.pu-editor .pu-warnbox{margin:0}
.pu-elines{display:flex;flex-direction:column}
.pu-eline{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(80px,.7fr)) 100px;gap:6px 10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.pu-eline.pu-th{padding:4px 0}
.pu-eline input[type="number"]{margin:0;padding:5px 8px;font-family:var(--mono);text-align:right}

/* ---- AliExpress order mail (mail build B1, plan 6) ------------------ */
/* The orders the order emails name that have no invoice yet: a fold above
   On the way. The order number is all its digits, mono and tabular, picked
   whole by one press, and wraps rather than being cut. The card's lines
   about the order email use .pu-ledline; its two buttons and the list's
   take .pu-om-btn: 34px on a desktop, 44px on a phone or a touch screen. */
.pu-orders{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 12px;margin:0 0 12px;font-size:13px}
.pu-orders > summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:34px;display:flex;align-items:center;gap:8px}
.pu-orders > summary .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink3);font-weight:500}
.pu-orows{display:flex;flex-direction:column}
.pu-orow{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.pu-ono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;min-width:0}
.pu-ometa{font-size:12.5px;color:var(--ink2);min-width:0}
.pu-ometa b.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.pu-omtotal{grid-column:2 / 3;font-size:12.5px}
.pu-oact{display:flex;justify-content:flex-end}
.pu-orow-off .pu-ono,.pu-orow-off .pu-ometa{color:var(--ink3)}
.pu-om-btn{min-height:34px}
.pu-ono-in{font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (pointer:coarse){
  .pu-om-btn,.pu-orders > summary{min-height:44px}
}

/* ---- Secret Lair order mail (mail build B2, plan 6) ------------------ */
/* "Which order is this invoice for?": the open orders under a printed
   invoice's lines, on the Upload tab and in the Invoices importer. One
   radio a row, the order number whole and in tabular figures (.pu-ono),
   34px a row on a desktop, 44px on a phone or a touch screen. An order's
   card lines use .pu-ledline. Tokens only. */
.pu-ochoice{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:6px 12px 8px;margin:12px 0 0;min-width:0}
.pu-ochoice > legend{font-size:13px;font-weight:600;color:var(--ink);padding:0 4px;text-transform:none;letter-spacing:0;white-space:normal}
.pu-orad{display:flex;align-items:center;gap:10px;min-height:34px;margin:0;padding:2px 0;font-size:13px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer;border-top:1px solid var(--line2)}
.pu-orad:first-of-type{border-top:0}
.pu-orad input{width:18px;height:18px;margin:0;flex:none}
.pu-orad > span{min-width:0;overflow-wrap:anywhere}
.pu-orad .pu-ono{font-weight:600}
@media (pointer:coarse){
  .pu-orad{min-height:44px}
}

/* ---- Reorder (plan 4.3) --------------------------------------------- */
.pu-rtable .pu-tr{grid-template-columns:minmax(0,2.4fr) 90px minmax(110px,1fr) 70px 80px minmax(150px,1.1fr)}
.pu-wrapt{white-space:normal;overflow-wrap:anywhere}
.pu-note-slot{display:inline-flex}
.pu-note-slot input{margin:0;width:200px;padding:5px 8px}

/* ---- the supplier page's Reorder switch ----------------------------- */
.pu-switch{display:inline-flex;gap:8px;align-items:center;margin:0;font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;min-height:34px}
.pu-switch input{width:18px;height:18px;margin:0}

/* ---- Wave 4: a supplier offered to the trade shops (Oct 2026) ---- */
/* The WHOLESALE panel stacks under REORDER in the supplier page's first
   column; the counts are mono figures. Each pre-order line of the book
   carries the distributor's order-by and, for a supplier offered to the
   shops, the shops' order-by two days before it: tags that wrap under the
   line's name. Every state says its word; the tint only backs it. Tokens
   only, no shadow. */
.pu-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.pu-whole-n{margin:0;font-size:13px;color:var(--ink2)}
.pu-whole-n b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.pu-whole-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pu-item .pu-ob{display:flex;flex-wrap:wrap;gap:4px 6px;margin:3px 0 1px}
.pu-ob .tag{margin:0;white-space:nowrap;border:1px solid transparent}
.tag.pu-t-sky{background:var(--skybg);color:var(--sky)}
.tag.pu-t-line{background:none;color:var(--ink2);border-color:var(--line)}
@media (pointer:coarse),(max-width:860px){
  .pu-whole-acts .btn{min-height:44px}
}

/* ---- Intake: which call, and the calls matched by themselves --------- */
.pu-callc{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.pu-callrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px}
.pu-callrow:last-child{border-bottom:0}

/* ---- Upload: the server's preview, editable ------------------------- */
.pu-phead{grid-template-columns:repeat(4,minmax(0,1fr))}
.pu-fv{font-size:13.5px;padding:8px 0;color:var(--ink)}
.pu-plines{display:flex;flex-direction:column;margin:8px 0 0}
.pu-pline{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(84px,.7fr)) minmax(150px,1fr);
  gap:4px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.pu-pline:last-child{border-bottom:0}
.pu-cell{margin:0;width:100%;padding:5px 8px;font-family:var(--mono);text-align:right}

/* ---- Chat order: the order sheet (plan 4.5) ------------------------- */
.pu-sheet{display:flex;flex-direction:column}
.pu-sl{display:grid;grid-template-columns:minmax(0,2.4fr) 76px 110px 110px 120px 110px 40px;gap:6px 8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line2)}
.pu-sl.pu-th{padding:4px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pu-sl input,.pu-sl select,.pu-fl input{margin:0;width:100%;padding:6px 8px}
.pu-sl input[type="number"],.pu-fl input[type="number"]{font-family:var(--mono);text-align:right}
.pu-slnote{grid-column:1 / -1;font-style:normal;font-size:12px}
/* A cell's own caption: hidden beside a header row, shown on a phone. */
.pu-sc{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0;font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:0}
.pu-sc > span{display:none;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pu-fees{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.pu-fl{display:grid;grid-template-columns:minmax(0,2fr) 140px 40px;gap:6px 8px;align-items:center}
.pu-split{grid-template-columns:repeat(2,minmax(0,220px))}
.pu-mismatch{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
#pc-ratebox[hidden]{display:none}
/* Boxes in a case (Oct 19 2026): while some line is in cases the sheet has
   one more column, after Unit. A line in another unit keeps its place in it
   empty, and on a phone that place is not drawn, so its cells flow as before. */
.pu-sheet.pu-cases .pu-sl{grid-template-columns:minmax(0,2.4fr) 76px 110px 96px 110px 120px 110px 40px}

@media (max-width:1180px){
  .pu-cl{grid-template-columns:minmax(0,2fr) repeat(3,minmax(76px,.7fr)) minmax(160px,1.1fr)}
  .pu-sl{grid-template-columns:minmax(0,2fr) 70px 100px 100px 110px 100px 40px}
  .pu-sheet.pu-cases .pu-sl{grid-template-columns:minmax(0,2fr) 70px 100px 88px 100px 110px 100px 40px}
  .pu-phead{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .pu-strip{padding:10px}
  .pu-card{padding:12px}
  .pu-card-m{text-align:left}
  .pu-cl,.pu-pline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pu-cl .pu-line-n,.pu-pline .pu-line-n{grid-column:1 / -1}
  .pu-recv,.pu-pline .pu-line-a{grid-column:1 / -1;justify-content:flex-start}
  .pu-count{width:88px;min-height:44px}
  .pu-tick{min-height:44px}
  .pu-tick input{width:22px;height:22px}
  .pu-menu summary{min-height:44px}
  .pu-menu-b .fchip,.pu-boxrow .fchip,.pu-callrow .fchip,.pu-mini,.pu-strip-l .fchip{min-height:44px}
  .pu-boxrow > span{min-width:0;flex:1 1 100%}
  .pu-boxrow input{flex:1 1 160px}
  .pu-eline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pu-eline .pu-line-n{grid-column:1 / -1}
  .pu-eline.pu-th{display:none}
  .pu-rtable .pu-tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pu-phead,.pu-split{grid-template-columns:minmax(0,1fr)}
  .pu-sc > span{display:block}
  .pu-field select,.pu-sl select{min-height:44px}
  .pu-sl{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0;align-items:end}
  .pu-sheet.pu-cases .pu-sl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pu-sl > .pu-pc-none{display:none}
  .pu-sl > .pu-sc:first-child{grid-column:1 / -1}
  .pu-sl .x{justify-self:end}
  .pu-sl.pu-th{display:none}
  .pu-fl{grid-template-columns:minmax(0,1fr) 110px 44px;align-items:end}
  .pu-switch{min-height:44px}
  .pu-note-slot,.pu-note-slot input{width:100%}
  /* The kit's figure rows draw as many columns as they have figures; on a
     phone they go two to a row so a dollar figure is never cut. */
  #pupage .lfb-foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pu-pline .x,.pu-sl .x,.pu-fl .x{min-width:44px;min-height:44px}
  #pupage .pu-acts-row .btn,#pupage .pu-acts-row .fchip,#pupage .pu-doc-s .fchip{min-height:44px}
  .pu-name,.pu-charged input,.pu-namerow .fchip,button.pu-unnamed{min-height:44px}
  .pu-charged{width:100%}
}

/* AliExpress order mail on a phone: each order stacks, every button a finger's size. */
@media (max-width:860px){
  .pu-orow{grid-template-columns:minmax(0,1fr)}
  .pu-omtotal{grid-column:1 / -1}
  .pu-oact{justify-content:flex-start}
  .pu-om-btn,.pu-orders > summary{min-height:44px}
}
/* Secret Lair order mail on a phone: each order on offer a finger's size. */
@media (max-width:860px){
  .pu-orad{min-height:44px}
}

/* ---- A line's product picture (a Shopify store's order email keeps them on the paper) ---- */
.pu-line-n.pu-line-pic{flex-direction:row;align-items:center;gap:8px}
.pu-line-w{display:flex;flex-direction:column;gap:1px;min-width:0}
.pu-thumb{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r)}
.pu-thumb img{display:block;width:40px;height:40px;object-fit:contain;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface2)}
.pu-nopic{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3)}
@media (pointer:coarse),(max-width:860px){
  .pu-thumb{min-width:44px;min-height:44px}
}

/* ---- Received all lines: on the card, not only under Actions (Josh, Oct 19 2026) ---- */
/* An outlined chip in ink, so it reads as a press; once every line is
   counted, a status tag says so in its place. Tokens only. */
.pu-recvall-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0 0}
.pu-recvall-row .tag{margin:0}
.fchip.pu-recvall{min-height:34px;font-weight:600;color:var(--ink);border-color:var(--ink3)}
.fchip.pu-recvall:hover{border-color:var(--accent)}
@media (pointer:coarse),(max-width:860px){
  .fchip.pu-recvall{min-height:44px;padding-left:14px;padding-right:14px}
}

/* ---- Make Shopify CSV: a Shopify store's order card (Josh, Oct 19 2026) ---- */
/* The same outlined chip in ink as Received all lines, on its own row after
   it, on that store's cards only. Tokens only. */
.pu-csvrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0 0}
.fchip.pu-shopcsv{min-height:34px;font-weight:600;color:var(--ink);border-color:var(--ink3)}
.fchip.pu-shopcsv:hover{border-color:var(--accent)}
@media (pointer:coarse),(max-width:860px){
  .fchip.pu-shopcsv{min-height:44px;padding-left:14px;padding-right:14px}
}

/* ---- Intake's three steps and the store's page (Josh, Oct 19 2026) ---- */
/* A Shopify store's order on Intake from its first received line until it is
   received, listed and in Expenses: one numbered list, each step a status
   word (Done / To do) and its words, its door at the end. On the store's own
   page the same order keeps one line of state and its doors, under its row.
   Tokens only; a finger's size on a phone. */
.pu-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pu-step{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--ink2)}
.pu-step .tag{margin:0;min-width:52px;text-align:center}
.pu-step-w{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.pu-step-w b{color:var(--ink);font-weight:600}
.pu-three .pu-acts-row{margin-top:10px}
.pu-doc-x{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px;color:var(--ink2)}
.pu-doc-x .tag{margin:0}
.pu-doc-xw{min-width:0;overflow-wrap:anywhere}
.pu-doc-x .err{flex-basis:100%;margin:0}
.pu-step .fchip,.pu-doc-x .fchip,.pu-three .pu-acts-row .fchip{min-height:34px}
@media (pointer:coarse),(max-width:860px){
  .pu-step .fchip,.pu-doc-x .fchip,.pu-three .pu-acts-row .fchip{min-height:44px;padding-left:14px;padding-right:14px}
}

/* ---- Move on, invoice to find: the book and Intake (Josh, Oct 20 2026) ---- */
/* A line counted by hand in full with no invoice carries one press in its
   Status cell, under its status word: Move on, invoice to find (on the
   board) or Put back (on the Invoice to find list). The same outlined chip
   in ink as Received all lines; its words wrap inside the cell rather than
   push the row wider. A 34 px target on a desktop; on a phone the cell takes
   the row's width and the press a finger's size (44 px), as on a touch
   screen. Intake's short list is rows divided by rules (a list, not cards).
   Tokens only. */
.pu-movedoor{display:block;margin-top:6px}
.fchip.pu-move{min-height:34px;max-width:100%;font-weight:600;color:var(--ink);border-color:var(--ink3);
  white-space:normal;text-align:left;line-height:1.25}
.fchip.pu-move:hover{border-color:var(--accent)}
.pu-findlist{list-style:none;margin:8px 0 0;padding:0}
.pu-findlist li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line2)}
.pu-findlist li:last-child{border-bottom:0}
.pu-findlist b{font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pu-findlist .pu-hint{color:var(--ink2);overflow-wrap:anywhere}
.fchip.pu-findgo{min-height:34px;font-weight:600;color:var(--ink);border-color:var(--ink3)}
@media (max-width:860px){
  .pu-tr .pu-hasdoor{grid-column:1 / -1}
}
@media (pointer:coarse),(max-width:860px){
  .fchip.pu-move,.fchip.pu-findgo{min-height:44px;padding-left:14px;padding-right:14px}
}