/* Time Bomb HQ - Purchasing: the purchases list, Price watch, the shopping list.
   Tokens, buttons, tables, tiles, panels and badges come from styles.css: use them, and add
   here only what this section alone needs. Class names start with a short section prefix. */

/* ---------- the strip of totals above each list ---------- */
/* one even row of tiles at desktop widths (the shared auto-fit grid would strand the last one) */
.pu-tiles--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.pu-tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.pu-tiles--6,.pu-tiles--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pu-tiles--6,.pu-tiles--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a number that is still loading keeps the tile's height, so nothing jumps when it lands */
.pu-tiles .tile-value{min-height:1.5rem}
.pu-tiles .tile-label{white-space:nowrap}
.pu-tiles .tile-sub{min-height:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* six narrow tiles: the line under the number may take two lines, and every tile leaves room for two */
.pu-tiles--6 .tile-sub,.pu-tiles--5 .tile-sub{white-space:normal;min-height:2.2rem}
.pu-tiles .skel{display:inline-block;width:64%;height:1.05rem;vertical-align:middle}

/* ---------- filter bar extras ---------- */
/* a date in the filter bar: the same pill as the dropdowns beside it */
.pu-date{
  display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 6px 0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  font-size:var(--fs-sm);color:var(--muted);transition:border-color var(--t-fast),background var(--t-fast);
}
.pu-date:hover,.pu-date:focus-within{border-color:var(--gold)}
.pu-date input{
  width:128px;height:28px;padding:0 4px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--text);font:inherit;font-weight:500;color-scheme:dark;
}
.pu-date input:focus{outline:none}
.pu-date.is-set{background:var(--gold-tint);border-color:var(--gold)}
.pu-date.is-set input{color:var(--gold-2);font-weight:600}

/* the budget box on the shopping list */
.pu-budget{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--muted)}
.pu-budget .input-money{width:150px}
.pu-budget .input{border-radius:var(--r-pill);background:var(--surface)}
.pu-hint{font-size:var(--fs-xs);color:var(--faint)}
/* the link at the top of Price watch that goes to the wholesale list: a little air before the note beside it */
.link-btn[data-jump]{display:inline-flex;align-items:center;gap:6px;margin-right:var(--s-2);font-size:var(--fs-sm)}

/* ---------- table cells ---------- */
/* a cell that holds a state and the button that changes it */
.table td.pu-cell-act{overflow:visible}
.pu-act{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.pu-act .muted{font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis}
.pu-stock-link{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;color:var(--gold-2);font-weight:600;text-decoration:none;
}
.pu-stock-link span{overflow:hidden;text-overflow:ellipsis}
.pu-stock-link:hover span{text-decoration:underline}
.pu-stock-link .ico{flex:none;color:var(--ok)}
/* two lines in one cell: the figure, and what it is measured against */
.pu-two{display:grid;gap:2px;justify-items:end}
.pu-two--left{justify-items:start}
.pu-two .td-sub{max-width:100%}
/* a row whose price is at or under MSRP carries a gold edge, like a selected row */
.table tbody tr.pu-row-buy td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.table tbody tr.pu-row-out td{color:var(--muted)}
.pu-left-out{display:block;font-size:var(--fs-xs);color:var(--warn);overflow:hidden;text-overflow:ellipsis}
/* the group of a hand-added shopping line (supply / equipment / giveaway prize): a small
   badge in front of the line's second row */
.pu-group{
  display:inline-block;margin-right:var(--s-2);padding:0 6px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:var(--fs-2xs);font-weight:700;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);vertical-align:1px;
}
.pu-group--equipment{border-color:var(--blue);color:var(--blue-2);background:var(--blue-tint)}
.pu-group--prize{border-color:var(--gold);color:var(--gold-2);background:var(--gold-tint)}
/* a shopping line bought by the case: how many cases, and what is left over for stock. It is
   a sentence, so it may take a second line where the column is narrow */
.pu-case{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:1.4;color:var(--blue-2);white-space:normal}
.pu-spark{display:inline-block;height:28px;line-height:28px}

/* ---------- rating badges ---------- */
.pu-unrated{border-style:dashed;color:var(--faint)}
.pu-msrp{letter-spacing:.05em}

/* ---------- the Prices block (the item panel in Inventory, and Price watch's own panel) ---------- */
.pu-prices{
  margin-bottom:var(--s-4);padding:var(--s-4);min-height:176px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.pu-prices--plain{min-height:0;margin-bottom:0}
.pu-prices-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.pu-prices-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);
}
.pu-prices-now{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-3)}
.pu-prices-now>div{min-width:0}
.pu-price{font-family:var(--font-display);font-weight:700;font-size:1.6rem;line-height:1.15;font-variant-numeric:tabular-nums}
.pu-price-sub{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}
.pu-prices .kv{gap:6px var(--s-4);font-size:var(--fs-sm)}
.pu-prices .kv dd{color:var(--text)}
.pu-prices .skel{display:block;height:.9rem;margin:10px 0}

/* the purchases behind an item's cost */
.pu-mini{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.pu-mini th{
  padding:6px 8px;text-align:left;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.pu-mini td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.pu-mini tr:last-child td{border-bottom:0}
.pu-mini .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- the purchase panel ---------- */
.pu-status{
  display:grid;gap:var(--s-3);margin-top:var(--s-5);padding:var(--s-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.pu-status-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.pu-status-row>div:first-child{min-width:0;flex:1}
.pu-status-k{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pu-status-v{margin-top:2px;font-size:var(--fs-sm)}
.pu-status-row+.pu-status-row{padding-top:var(--s-3);border-top:1px solid var(--line)}
.pu-sum{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--muted)}
.pu-sum b{color:var(--gold-2);font-variant-numeric:tabular-nums}

/* what a purchase cost, at the top of Quick add when it was opened from a purchase */
.pu-intake{margin-bottom:var(--s-4)}

/* ---------- the wholesale supplier's price list (Price watch) ---------- */
/* the card: a panel whose table runs edge to edge, with the notes above it inside the padding */
.pu-wholesale .panel-title{display:flex;align-items:center;gap:var(--s-2)}
.pu-wholesale .panel-title .ico{flex:none;color:var(--gold)}
.pu-wholesale-notes{display:grid;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--line)}
/* where the numbers were read from: a quiet line of its own under the note's text */
.pu-wholesale-source{display:block;margin-top:6px;overflow-wrap:anywhere}
/* a row's second line: the HQ item it is linked to (a link) or its tier, then short facts.
   On one line: each part gives way with an ellipsis when the column is narrow, except how
   many are on hand, which is short and always shown whole */
.pu-offer-sub{display:flex;align-items:center;gap:6px;min-width:0}
.pu-offer-sub>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-offer-sub>.pu-fixed{flex:none}
.pu-offer-sub .pu-stock-link{font-weight:600}
/* the table fits the panel at 1280 wide; below that it scrolls sideways inside the card */
.pu-wholesale .table--fixed{min-width:940px}

/* a product bought by the case in a recommended wheel plan: the line under its name that says
   how many the board uses and how many are left over for stock */
.rec-list li.pu-case-note{align-items:center;margin:-1px 0 5px;font-size:var(--fs-xs);color:var(--muted)}
.rec-list li.pu-case-note .t{white-space:normal;line-height:1.4}
.rec-list li.pu-case-note b{color:var(--blue-2);font-weight:600}
.rec-list li.pu-case-note .badge{flex:none;height:18px}

/* ---------- the supplier card with no price list loaded yet ---------- */
.pu-supplier{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5);align-items:start;padding:var(--s-5);
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.pu-supplier-art{
  width:56px;height:56px;display:grid;place-items:center;border-radius:var(--r-lg);
  background:var(--gold-tint);border:1px solid var(--line-strong);color:var(--gold-2);
}
.pu-supplier-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.pu-supplier p{margin-top:var(--s-2);max-width:78ch;color:var(--muted);font-size:var(--fs-md);line-height:1.55}
.pu-supplier p b{color:var(--text);font-weight:600}

/* ---------- shopping list ---------- */
.pu-done{list-style:none;margin:0;padding:0}
.pu-done li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:10px var(--s-4);font-size:var(--fs-sm)}
.pu-done li+li{border-top:1px solid var(--line)}
.pu-done .t{min-width:0;color:var(--muted);text-decoration:line-through;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-done .when{color:var(--faint);font-size:var(--fs-xs);white-space:nowrap}