/* Parts page redesign — opt-in beta UI.
   All classes prefixed with .pb- to avoid colliding with app.css.
   Activated when body has class 'pb-mode'.
   Generated from _proofs/orders_redesign.html on 2026-05-17.
*/

/* ════════════════════════════════════════════════════════════════════════════
   Parts page redesign — proof for the manager Orders view.
   Aesthetic: warm cream paper + ink + single sapphire accent + hairlines.
   No drop shadows. Generous monospace data. Ledger-style alignment.
   Every datum from the current collapsed + expanded cards is preserved.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Aligned to the live app palette — cool grey surfaces, not warm cream. */
  --paper:        #EAEDED;       /* matches --bg in app.css */
  --paper-tint:   #DCE0E0;
  --surf:         #FFFFFF;       /* matches --surf */
  --ink:          #0F1111;       /* matches --txt */
  --ink-2:        #1F2937;
  --ink-3:        #565959;       /* matches --txt-dim */
  --ink-mute:     #767676;       /* matches --txt-muted */
  --hair:         rgba(15,17,17,.10);
  --hair-2:       rgba(15,17,17,.18);
  --hair-3:       rgba(15,17,17,.32);
  --sapphire:     #1E3A8A;
  --sapphire-2:   #14296B;
  --sapphire-bg:  rgba(30,58,138,.06);
  --sapphire-bg2: rgba(30,58,138,.12);
  --red:          #B12704;       /* matches --red (Amazon-inspired) */
  --red-bg:       rgba(177,39,4,.07);
  /* --amber / --amber-bg deliberately NOT defined here — they live in app.css
     (:root + body.dark) as the single source. Redeclaring them on this :root
     hijacked app.css's own amber in light mode (a cross-file collision). The
     rendered values are unchanged: burnt-orange in light, bright in dark. */
  --green:        #067D62;       /* matches --green */
  --green-bg:     rgba(6,125,98,.07);
  --purple:       #6655c0;       /* matches --purple, used for shipped */
  --purple-bg:    rgba(102,85,192,.08);
  --brown:        #8B4040;       /* matches --cancelled in app.css */
  --brown-bg:     rgba(139,64,64,.07);

  --fb: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter: 24px;
  --rail-w: 232px;
  --detail-w: 440px;
  --topbar-h: 108px; /* must equal the actual rendered height of .cmd */
}

/* Scope body styles only when the parts-beta mode is active.
   Production has its own body styling; we override only inside .pb-mode. */
body.pb-mode .pb-shell *,
body.pb-mode .pb-shell *::before,
body.pb-mode .pb-shell *::after { box-sizing: border-box; }

/* Page bg + ink color override applies to the orders tab body only
   while in beta mode; reverts when toggled off. */
body.pb-mode .pb-shell{
  color: var(--ink);
}

.pb-ledger-rule{ display: none; }

/* Table mode narrows the detail pane so all columns fit at 1440 widths */
body.pb-is-table-view.pb-mode .pb-shell{ --detail-w: 360px; }

/* ── Page shell — sidebar / main / detail pane ───────────────────────────── */
.pb-shell{
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--detail-w);
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Filter rail ─────────────────────────────────────────────────────────── */
.pb-rail{
  background: var(--surf);
  border-right: 1px solid var(--hair-2);
  padding: 28px 22px;
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.pb-rail-h{
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.pb-rail-h:not(:first-child){ margin-top: 28px; }
.pb-rail-list{ display:flex; flex-direction:column; }
.pb-rail-row{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  cursor: pointer;
  border-bottom: 1px dashed var(--hair);
  color: var(--ink-3);
}
.pb-rail-row:last-child{ border-bottom: 0; }
.pb-rail-row:hover{ background: var(--paper); color: var(--ink-2); }
.pb-rail-row.pb-is-on{ background: rgba(30,58,138,.07); color: var(--ink-2); }
.pb-rail-row.pb-is-on .pb-rail-mk{ background: var(--sapphire); border-color: var(--sapphire); }
.pb-rail-row.pb-is-warn .pb-rail-lbl{ color: var(--amber); font-weight: 600; }
.pb-rail-row.pb-is-warn .pb-rail-ct { color: var(--amber); }
.pb-rail-mk{
  width: 11px; height: 11px;
  border: 1.5px solid var(--ink-3);
  background: transparent;
  flex-shrink: 0;
}
.pb-rail-row.pb-is-on .pb-rail-mk::after{
  content:''; display:block; width:5px; height:5px;
  background: var(--paper);
  margin: 1px auto 0;
}
.pb-rail-lbl{ font-size: 13px; }
.pb-rail-ct{
  font-family: var(--fm); font-size: 11px; font-weight: 600;
  color: var(--ink-3);
}

/* ── Main column ─────────────────────────────────────────────────────────── */
.pb-main{
  position: relative;
  padding: 16px 28px 100px;
  overflow: hidden;
}

/* Day strip — bold typographic header above each cluster */
.pb-day{
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 22px;
  align-items: end;
  padding: 24px 0 12px;
  border-bottom: 1px solid var(--hair-2);
  margin-bottom: 4px;
}
.pb-day-num{
  font-family: var(--fm);
  font-weight: 700;
  font-size: 63px;
  line-height: 0.86;
  letter-spacing: -.03em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.pb-day-meta{
  padding-bottom: 6px;
}
.pb-day-dow{
  font-family: var(--fb);
  font-size: 13px;
  letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pb-day-ym{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: 2px;
}
.pb-day-stats{
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-top: 14px;
}
.pb-day-stats .sep{ color: var(--ink-mute); margin: 0 6px; }
.pb-day-stats b{ color: var(--ink); }

/* ── Order card (collapsed) ──────────────────────────────────────────────── */
.pb-cards{ display:flex; flex-direction:column; gap: 6px; }
.pb-card{
  position: relative;
  display: grid;
  grid-template-columns: 22px 96px 1fr 120px 22px;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 18px;
  background: var(--surf);
  border: 1px solid var(--hair-2);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  min-height: 0;
}
.pb-card:hover{
  border-color: var(--hair-3);
}
.pb-card.pb-is-open{
  border-color: var(--sapphire);
  box-shadow: inset 0 0 0 1px var(--sapphire);
}
.pb-card.pb-is-flagged::after{
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px;
  width: 3px; background: var(--red);
}
/* Vertical status bar — left edge, overlaps the border so it reads as
   the card's leading-edge indicator rather than a chip inside it. */
.pb-card .pb-bar{
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--sapphire);
}
.pb-card.pb-s-pending   .pb-bar{ background: var(--red);      height: 100%; opacity: 1; }
.pb-card.pb-s-ordered   .pb-bar{ background: var(--sapphire); height: 100%; opacity: 1; }
.pb-card.pb-s-shipped   .pb-bar{ background: var(--purple);   height: 100%; opacity: 1; }
.pb-card.pb-s-delivered .pb-bar{ background: var(--green);    height: 100%; opacity: 1; }
.pb-card.pb-s-fulfilled .pb-bar{ background: var(--ink-mute); height: 100%; opacity: 1; }
.pb-card.pb-s-fulfilled{ opacity: .55; }
.pb-card.pb-s-fulfilled:hover,
.pb-card.pb-s-fulfilled.pb-is-open,
.pb-card.pb-s-fulfilled.pb-is-selected{ opacity: 1; }
.pb-card.pb-s-cancelled .pb-bar{ background: var(--brown);    height: 100%; opacity: .55; }

.pb-col-chk{
  display:flex; align-items: flex-start; padding-top: 2px;
}
.pb-chk{
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-3);
  background: transparent;
  cursor: pointer;
}
.pb-chk.on{ background: var(--ink); border-color: var(--ink); }
.pb-chk.on::after{
  content:'✓'; color: var(--paper); font-size: 10px;
  font-weight: 700; display:block; line-height: 12px; text-align:center;
  margin-top: -1px;
}

/* Col 1: Time + ID */
.pb-col-stamp{ display:flex; flex-direction:column; gap: 4px; padding-top: 2px; }
.pb-stamp-time{
  font-family: var(--fm); font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: .01em;
  font-feature-settings: "tnum" 1;
}
.pb-stamp-id{
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .03em;
  word-break: break-all; line-height: 1.3;
}

/* Col 2: Account, sub, username, age, items, meta strip, flags */
.pb-col-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-body-head{
  display: flex; align-items: baseline; gap: 4px 10px;
  flex-wrap: nowrap; min-width: 0;
  white-space: nowrap;
}
.pb-body-acct{
  font-family: var(--fb); font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
  line-height: 1.2;
}
.pb-body-sub{
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
  font-weight: 400; white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
}
/* Underlined-caps status pill — matches .mt-wo-pill on the WO page.
   No pip, no enclosure; just word + 2px underline in the status color. */
.pb-body-status{
  font-family: var(--fb); font-weight: 700;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 2px solid currentColor;
  line-height: 1; white-space: nowrap;
  margin-left: auto; flex-shrink: 0;
}
.pb-s-pending   .pb-body-status{ color: var(--red);      }
.pb-s-ordered   .pb-body-status{ color: var(--sapphire); }
.pb-s-shipped   .pb-body-status{ color: var(--purple);   }
.pb-s-delivered .pb-body-status{ color: var(--green);    }
.pb-s-fulfilled .pb-body-status{ color: var(--ink-2);    }
.pb-s-cancelled .pb-body-status{ color: var(--brown); text-decoration: line-through; }

.pb-body-byline{
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-3);
  flex-shrink: 0;
}
.pb-body-byline b{
  font-family: var(--fm); font-weight: 600; color: var(--ink-2);
  font-size: 10.5px; letter-spacing: .04em;
}
.pb-body-byline .sep{ color: var(--ink-mute); margin: 0 5px; }
.pb-body-byline .old{
  background: var(--red-bg); color: var(--red);
  font-family: var(--fm); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; padding: 1px 5px; margin-left: 6px;
}

/* line2 — items + meta strip + pips on a single wrapping row */
.pb-body-line2{
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12px;
}
.pb-body-items{
  font-family: var(--fb); font-size: 12px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  max-width: 320px;
}
.pb-body-items .ico{ width:13px; height:13px; flex-shrink:0; color: var(--ink-3); }
.pb-body-items .first{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; color: var(--ink); flex: 1; min-width: 0;
}
.pb-body-items .more{
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  color: var(--ink-3); padding: 1px 6px; border:1px solid var(--hair-2);
  letter-spacing: .05em; flex-shrink: 0;
}

/* Meta strip — single horizontal line of PO / WO / ETA / INV */
.pb-body-meta{
  display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: nowrap;
}
.pb-bm{
  display: inline-flex; align-items: baseline; gap: 6px;
}
.pb-bm-l{
  font-family: var(--fm); font-size: 9px; font-weight: 700;
  letter-spacing: .2em; color: var(--ink-mute); text-transform: uppercase;
}
.pb-bm-v{
  font-family: var(--fm); font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: .02em;
  font-feature-settings: "tnum" 1;
}
.pb-bm-v.empty{ color: var(--ink-mute); font-weight: 400; }
.pb-bm-v.warn { color: var(--amber); font-weight: 700; }
.pb-bm-v.met  { color: var(--green); }
.pb-bm-v.has-inv{
  color: var(--sapphire);
  display: inline-flex; align-items: center; gap: 4px;
}
.pb-bm-v.req{
  color: var(--red); font-weight: 700;
  letter-spacing: .06em;
}
.pb-bm-v.has-inv::before{
  content:''; display:inline-block; width:6px; height:6px;
  background: var(--sapphire); flex-shrink: 0;
}

/* Flag pips strip */
.pb-body-flags{
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  min-height: 0;
}
.pb-body-flags:empty{ display: none; }
.pb-flag-pip{
  font-family: var(--fm); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; padding: 2px 6px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.pb-flag-pip.flag    { color: var(--red);      background: var(--red-bg); }
.pb-flag-pip.photo   { color: var(--ink-2);    background: rgba(11,15,26,.06); }
.pb-flag-pip.chat    { color: var(--ink-2);    background: rgba(11,15,26,.06); }
.pb-flag-pip.notes   { color: var(--ink-2);    background: rgba(11,15,26,.06); }
.pb-flag-pip.inv     { color: var(--sapphire); background: var(--sapphire-bg); }

/* Col 3 (was 4): Subtotal */
.pb-col-sum{
  display:flex; flex-direction:column; align-items:flex-end;
  justify-content: center;
  font-family: var(--fm);
}
.pb-sum-val{
  font-size: 18px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
  font-feature-settings: "tnum" 1;
}
.pb-sum-val .cur{ color: var(--ink-mute); font-size: 12px; margin-right: 2px; vertical-align: 2px; }
.pb-sum-val.zero{ color: var(--ink-mute); font-weight: 400; }
.pb-sum-cap{
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--ink-mute); text-transform: uppercase; margin-top: 2px;
}

/* Col 5: Chevron */
.pb-col-chev{
  display:grid; place-items:center; color: var(--ink-3);
  transition: color .15s;
}
.pb-card:hover .pb-col-chev{ color: var(--ink); }
.pb-col-chev svg{ width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   ROWS VIEW — LEDGER ENTRY redesign (pb-cx-*)

   Each card is one entry in the day's ledger. The card has a sub-grid
   layout so the PO/WO/ETA/INV/SUBTOTAL columns line up vertically
   across every row in the day. That vertical rhythm is the design's
   big move — it lets a manager scan a column down the page to see
   all WO numbers, all ETAs, etc. without losing the per-row context.
   ══════════════════════════════════════════════════════════════════════════ */

/* Container — one card group per day, with a column header at the top
   and rows below that share its grid for vertical alignment. */
.pb-cards-x {
  display: flex; flex-direction: column;
  gap: 0;
  background: var(--surf);
  border: 1px solid var(--hair-2);
  border-top: 3px solid var(--hair-3);
  overflow: hidden;
}
.pb-cx-head {
  display: grid;
  grid-template-columns:
    18px 64px minmax(0, 1fr) 70px 56px 46px 48px 84px 14px;
  align-items: end;
  gap: 10px;
  padding: 10px 18px 6px;
  background: color-mix(in srgb, var(--paper) 60%, var(--surf));
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pb-cx-head > div { line-height: 1; }
.pb-cx-head .cx-subtotal { text-align: right; }
.pb-cx-head .cx-inv      { text-align: center; }

.pb-cx-row {
  position: relative;
  display: grid;
  grid-template-columns:
    18px 64px minmax(0, 1fr) 70px 56px 46px 48px 84px 14px;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  transition: background .12s ease;
}
.pb-cx-row:first-of-type { border-top: 0; }
.pb-cx-row:hover { background: color-mix(in srgb, var(--paper) 40%, var(--surf)); }
.pb-cx-row.pb-is-open {
  background: color-mix(in srgb, var(--sapphire) 5%, var(--surf));
  box-shadow: inset 3px 0 0 var(--sapphire);
}
.pb-cx-row.pb-is-selected {
  outline: 1px dashed var(--sapphire);
  outline-offset: -2px;
}

/* Status edge — colored 3px band on the left */
.pb-cx-row::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink-mute);
  pointer-events: none;
}
.pb-cx-row.pb-s-pending::before   { background: var(--red);      }
.pb-cx-row.pb-s-ordered::before   { background: var(--sapphire); }
.pb-cx-row.pb-s-shipped::before   { background: var(--purple);   }
.pb-cx-row.pb-s-delivered::before { background: var(--green);    }
.pb-cx-row.pb-s-fulfilled::before { background: var(--ink-mute); }
.pb-cx-row.pb-s-cancelled::before { background: var(--brown); opacity:.55; }
.pb-cx-row.pb-s-fulfilled         { opacity: .55; }
.pb-cx-row.pb-s-fulfilled:hover,
.pb-cx-row.pb-s-fulfilled.pb-is-open,
.pb-cx-row.pb-s-fulfilled.pb-is-selected { opacity: 1; }
.pb-cx-row.pb-is-flagged::before { background: var(--red); width: 4px; }

/* Col: checkbox */
.cx-chk { display: flex; align-items: center; }

/* Col: time + short id stamp */
.cx-stamp {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cx-stamp-time {
  font-family: var(--fm);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  line-height: 1;
}
.cx-stamp-id {
  font-family: var(--fm);
  font-size: 9.5px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .04em;
  line-height: 1;
}

/* Col: identity — two rows, top is account+sub+status, bot is items+byline */
.cx-ident {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* Container context for the status-word query below. The identity grid
     track is minmax(0,1fr), so it absorbs ALL of the row's width loss — on
     narrow viewports (rail + detail pane flank the orders table) it can get
     small enough that the non-shrinking .cx-status-word overflowed its cell
     and collided with the Account name / spilled into the PO column. */
  container-type: inline-size;
}
.cx-ident-top {
  display: flex; align-items: baseline;
  gap: 8px;
  min-width: 0;
  /* Safety net: clip inside the cell rather than letting the status word
     overflow into the next (PO) column. */
  overflow: hidden;
}
.cx-acct {
  font-family: var(--fb);
  font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex-shrink: 1;
}
.cx-sub {
  font-family: var(--fm);
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .02em;
  white-space: nowrap; flex-shrink: 0;
}
.cx-status-word {
  margin-left: auto;
  font-family: var(--fm);
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.pb-cx-row.pb-s-pending   .cx-status-word { color: var(--red);      }
.pb-cx-row.pb-s-ordered   .cx-status-word { color: var(--sapphire); }
.pb-cx-row.pb-s-shipped   .cx-status-word { color: var(--purple);   }
.pb-cx-row.pb-s-delivered .cx-status-word { color: var(--green);    }
.pb-cx-row.pb-s-fulfilled .cx-status-word { color: var(--ink-2);    }
.pb-cx-row.pb-s-cancelled .cx-status-word { color: var(--brown); text-decoration: line-through; }

/* When the identity column gets too cramped to show the status WORD without
   crushing the Account name (narrow viewports / detail pane open), drop the
   word — status is still encoded by the colored left-edge band (and fulfilled
   /cancelled rows are dimmed + struck through). Keeps the Account readable and
   prevents the FULFILLED/DELIVERED/CANCELLED labels from overlapping it. */
@container (max-width: 140px) {
  .cx-status-word { display: none; }
}

.cx-ident-bot {
  display: flex; align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.cx-items {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; flex: 1;
}
.cx-items-ico {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--ink-mute);
}
.cx-items-name {
  font-family: var(--fb);
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.cx-items-more {
  font-family: var(--fm);
  font-size: 9px; font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .08em;
  padding: 1px 5px;
  border: 1px solid var(--hair-2);
  flex-shrink: 0;
}
.cx-byline {
  margin-left: auto;
  font-family: var(--fm);
  font-size: 9.5px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .06em; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.cx-byline b {
  font-weight: 700; color: var(--ink-3);
  letter-spacing: .08em;
}
.cx-byline .cx-flag { color: var(--red); font-weight: 700; }
.cx-byline .cx-old {
  background: var(--red-bg); color: var(--red);
  font-weight: 700; padding: 1px 4px; letter-spacing: .1em;
}

/* Data columns — namespaced classes so they can't collide with global
   .empty / .req rules. */
.cx-data {
  font-family: var(--fm);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-data.cx-empty { color: var(--ink-mute); font-weight: 400; padding: 0; }
.cx-data.cx-warn  { color: var(--amber);    font-weight: 700; letter-spacing: .08em; font-size: 10px; }
.cx-data.cx-met   { color: var(--green); }
.cx-data.cx-req   {
  color: var(--red); font-weight: 700; letter-spacing: .06em;
  font-size: 10px; text-transform: uppercase;
  padding: 0;
}
.cx-data.cx-pdf {
  color: var(--sapphire);
  display: inline-flex; align-items: center; gap: 5px;
}
.cx-data.cx-pdf::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; background: var(--sapphire);
  flex-shrink: 0;
}
.cx-inv-col { text-align: center; }
.cx-inv-col .cx-data { display: inline-block; }
.cx-inv-col .cx-data.cx-pdf { display: inline-flex; }

/* Subtotal column */
.cx-sum {
  font-family: var(--fm);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}
.cx-sum .cur { font-size: 10px; color: var(--ink-mute); margin-right: 2px; vertical-align: 2px; }
.cx-sum.cx-zero { color: var(--ink-mute); font-weight: 400; font-size: 13px; }

/* Chevron */
.cx-chev {
  display: grid; place-items: center;
  color: var(--ink-mute);
  transition: color .15s, transform .15s;
}
.pb-cx-row:hover .cx-chev { color: var(--ink); transform: translateX(2px); }
.cx-chev svg { width: 12px; height: 12px; }

/* Day header — refined version that pairs with the ledger container */
.pb-day-x {
  display: flex; align-items: baseline; gap: 18px;
  padding: 24px 0 10px;
  margin-top: 4px;
}
.pb-day-x-num {
  font-family: var(--fm);
  font-size: 42px; font-weight: 700;
  line-height: .85; letter-spacing: -.05em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.pb-day-x-meta {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 3px;
}
.pb-day-x-dow {
  font-family: var(--fm);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}
.pb-day-x-year {
  font-family: var(--fm);
  font-size: 9px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pb-day-x-stats {
  margin-left: auto;
  font-family: var(--fm);
  font-size: 10px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: .04em;
  padding-bottom: 6px;
}
.pb-day-x-stats b { color: var(--ink); font-weight: 700; margin-right: 1px; }
.pb-day-x-stats .pend { color: var(--red); }
.pb-day-x-stats .pend b { color: var(--red); }
.pb-day-x-stats .sep { color: var(--ink-mute); margin: 0 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLE VIEW — same aesthetic, different density.
   Sticky monospace header. Hairline row separators. Sapphire intensity bar
   on the left edge of every row. Two-line cells where it helps.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-tbl-wrap{
  position: relative;
  background: var(--surf);
  border: 1px solid var(--hair-2);
}
.pb-tbl{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fb);
  table-layout: fixed;
  background: var(--surf);
}
.pb-tbl thead th{
  /* sticky disabled — was creating an overlap with the first tbody row
     because the th's intrinsic offset within the table was less than
     the top constraint, so each th pinned individually and clipped
     into the first data row. */
  background: color-mix(in srgb, var(--paper) 60%, var(--surf));
  font-family: var(--fm);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  text-align: left;
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--hair-2);
  white-space: nowrap;
}
.pb-tbl thead th.right{ text-align: right; }
.pb-tbl thead th.center{ text-align: center; }
.pb-tbl thead th .sortable{
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.pb-tbl thead th .sortable:hover{ color: var(--ink); }
.pb-tbl thead th .sortable .arr{
  font-size: 9px; opacity: 0;
}
.pb-tbl thead th .sortable.is-sort .arr{ opacity: 1; }
.pb-tbl thead th .sortable.is-sort{ color: var(--ink); }

/* Body rows */
.pb-tbl tbody tr{
  position: relative;
  cursor: pointer;
  transition: background .12s ease;
  vertical-align: top;
}
.pb-tbl tbody tr:hover{ background: color-mix(in srgb, var(--paper) 40%, var(--surf)); }
.pb-tbl tbody tr.pb-is-open{
  background: color-mix(in srgb, var(--sapphire) 5%, var(--surf));
  outline: 1px solid var(--sapphire);
  outline-offset: -1px;
}
.pb-tbl tbody tr td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--fb); font-size: 13px;
  color: var(--ink-3);
  vertical-align: top;
  line-height: 1.32;
}
.pb-tbl tbody tr td.right{ text-align: right; }
.pb-tbl tbody tr td.center{ text-align: center; }
.pb-tbl tbody tr td.mono{ font-family: var(--fm); font-size: 12px; letter-spacing: .02em; }

/* Status-colored bar at the very leading edge of every row — sits BEFORE
   the checkbox cell so the two don't compete visually. Attached to the
   first td (.pb-tbl-chk-cell) via ::before; thead has no such class so no
   bar appears in the column-label row. */
.pb-tbl tbody tr td.pb-tbl-chk-cell{
  position: relative;
  padding-left: 16px;
}
.pb-tbl tbody tr td.pb-tbl-chk-cell::before{
  content:''; position:absolute;
  left: 4px; top: 10px; bottom: 10px;
  width: 3px; background: var(--ink-mute);
}
.pb-tbl tbody tr.pb-s-pending   td.pb-tbl-chk-cell::before{ background: var(--red);      }
.pb-tbl tbody tr.pb-s-ordered   td.pb-tbl-chk-cell::before{ background: var(--sapphire); }
.pb-tbl tbody tr.pb-s-shipped   td.pb-tbl-chk-cell::before{ background: var(--purple);   }
.pb-tbl tbody tr.pb-s-delivered td.pb-tbl-chk-cell::before{ background: var(--green);    }
.pb-tbl tbody tr.pb-s-fulfilled td.pb-tbl-chk-cell::before{ background: var(--ink-mute); }
.pb-tbl tbody tr.pb-s-fulfilled td{ opacity: .55; }
.pb-tbl tbody tr.pb-s-fulfilled:hover td,
.pb-tbl tbody tr.pb-s-fulfilled.pb-is-open td,
.pb-tbl tbody tr.pb-s-fulfilled.pb-is-selected td{ opacity: 1; }
.pb-tbl tbody tr.pb-s-cancelled td.pb-tbl-chk-cell::before{ background: var(--brown); opacity: .55; }
.pb-tbl tbody tr.pb-is-flagged  td.pb-tbl-chk-cell::before{ background: var(--red);      }

/* Specific cell types */
.pb-tbl-when{
  font-family: var(--fm);
}
.pb-tbl-when .t{
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em;
  font-feature-settings: "tnum" 1;
}
.pb-tbl-when .i{
  font-size: 9.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em; margin-top: 2px;
}
.pb-tbl-status{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  /* The Status column is fixed-width and the next column (Account) sits flush
     beside it, so the status WORD must stay inside its own cell. Clip-with-
     ellipsis guarantees it can never bleed into / overlap the Account name.
     (Dropped the leading status dot — redundant with the row's colored
     left-edge bar, and it was eating the width that pushed FULFILLED over.) */
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-s-pending   .pb-tbl-status{ color: var(--red);      }
.pb-s-ordered   .pb-tbl-status{ color: var(--sapphire); }
.pb-s-shipped   .pb-tbl-status{ color: var(--purple);   }
.pb-s-delivered .pb-tbl-status{ color: var(--green);    }
.pb-s-fulfilled .pb-tbl-status{ color: var(--ink-2);    }
.pb-s-cancelled .pb-tbl-status{ color: var(--brown); text-decoration: line-through; }
.pb-tbl-flag-mark{
  color: var(--red); font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; margin-top: 4px; display: block;
}

.pb-tbl-acct .n{
  font-family: var(--fb); font-size: 13.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-tbl-acct .s{
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-tbl-by{
  font-family: var(--fm); font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--ink);
}
.pb-tbl-by .age{
  display: block;
  font-family: var(--fb); font-size: 11px; font-weight: 400;
  color: var(--ink-3); letter-spacing: 0; margin-top: 2px;
  text-transform: none;
}
.pb-tbl-by .age.old{
  color: var(--red); font-weight: 700; letter-spacing: .08em;
  font-family: var(--fm); font-size: 10px;
}

.pb-tbl-items{
  font-family: var(--fb);
}
.pb-tbl-items .n{
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
  font-feature-settings: "tnum" 1;
}
.pb-tbl-items .p{
  display: block;
  font-family: var(--fb); font-size: 11px; color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-tbl-track{
  font-family: var(--fm); font-size: 11.5px;
}
.pb-tbl-track .row{
  display: flex; align-items: baseline; gap: 6px;
}
.pb-tbl-track .row + .row{ margin-top: 3px; }
.pb-tbl-track .l{
  font-size: 8.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-mute); text-transform: uppercase; min-width: 18px;
}
.pb-tbl-track .v{ color: var(--ink); font-weight: 600; }
.pb-tbl-track .v.pb-v-empty{ color: var(--ink-mute); font-weight: 400; }
.pb-tbl-track .v.warn { color: var(--amber); font-weight: 700; }

.pb-tbl-eta{
  font-family: var(--fm); font-size: 12.5px; font-weight: 600;
  color: var(--ink); letter-spacing: .02em;
}
.pb-tbl-eta.pb-met  { color: var(--green); }
.pb-tbl-eta.pb-empty{ color: var(--ink-mute); font-weight: 400; padding: 0; }

.pb-tbl-inv .dot{
  display: inline-block; width: 9px; height: 9px;
  background: var(--sapphire);
}
.pb-tbl-inv.pb-empty{ color: var(--ink-mute); font-family: var(--fm); font-size: 11px; padding: 0; }
.pb-tbl-inv.pb-req{
  color: var(--red); font-family: var(--fm); font-size: 10px;
  font-weight: 700; letter-spacing: .08em;
  padding: 0;
}

.pb-tbl-sub{
  font-family: var(--fm); font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; text-align: right;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.pb-tbl-sub .cur{ color: var(--ink-mute); font-size: 11px; vertical-align: 2px; margin-right: 1px; }
.pb-tbl-sub.zero{ color: var(--ink-mute); font-weight: 400; }

.pb-tbl-tags{
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pb-tbl-tag{
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--hair-2);
  font-family: var(--fm); font-size: 9.5px; font-weight: 700;
  color: var(--ink-2);
  position: relative;
}
.pb-tbl-tag.flag  { color: var(--red);      border-color: rgba(185,28,28,.4); }
.pb-tbl-tag.photo { color: var(--ink-2); }
.pb-tbl-tag.chat  { color: var(--ink-2); }
.pb-tbl-tag.notes { color: var(--ink-2); }
.pb-tbl-tag.inv   { color: var(--sapphire); border-color: rgba(30,58,138,.4); background: var(--sapphire-bg); }
.pb-tbl-tag .ct{
  position: absolute; right: -3px; top: -3px;
  font-size: 8px; font-weight: 700;
  background: var(--ink); color: var(--paper);
  padding: 0 3px; line-height: 11px;
  font-family: var(--fm); letter-spacing: 0;
}

.pb-tbl-chk-cell .pb-chk{ margin-top: 2px; }

/* Empty rendering when no rows match */
.pb-tbl-empty{
  padding: 60px 24px; text-align: center;
  font-family: var(--fb); color: var(--ink-mute);
  border-bottom: 1px solid var(--hair);
}

/* Toolbar above the table — no border; the thead's bottom rule is enough */
.pb-tbl-toolbar{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 14px;
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.pb-tbl-toolbar .count{ color: var(--ink); }
.pb-tbl-toolbar .spacer{ flex: 1; }
.pb-tbl-toolbar .grouped{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-mute);
}

/* ── Detail pane (the expanded order) ────────────────────────────────────── */
.pb-detail{
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  background: var(--surf);
  border-left: 1px solid var(--hair-2);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Pinned header (dt-head + dt-stat-strip) and pinned footer (dt-foot)
   stay visible; only the middle .pb-dt-scroll region scrolls. min-height:0
   is required for the flex child to honor overflow at small heights. */
.pb-dt-scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.pb-dt-head, .pb-dt-stat-strip, .pb-dt-foot{ flex-shrink: 0; }
/* Scroll-hint divider when content is taller than the pane */
.pb-dt-scroll{ scrollbar-gutter: stable; }
.pb-dt-head{
  position: relative;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--hair-2);
}
.pb-dt-head::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width: 4px; background: var(--sapphire);
}
.pb-dt-overline{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.pb-dt-overline .dot{
  width:6px; height:6px; background: currentColor;
}
.pb-dt-overline.pend{ color: var(--red); }
.pb-dt-overline.ord { color: var(--sapphire); }
.pb-dt-overline.shp { color: var(--purple); }
.pb-dt-overline.del { color: var(--green); }
.pb-dt-overline.can { color: var(--brown); }
.pb-dt-id{
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  margin-top: 6px;
}
.pb-dt-id .hash{ color: var(--ink-mute); }
.pb-dt-acct{
  font-family: var(--fb);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 10px 0 4px;
  letter-spacing: -.005em;
}
.pb-dt-byline{
  font-family: var(--fb); font-size: 13px; color: var(--ink-3);
}
.pb-dt-byline b{
  font-family: var(--fm); font-weight: 600; color: var(--ink-2);
  font-size: 12px; letter-spacing: .03em;
}
.pb-dt-byline .sep{ color: var(--ink-mute); margin: 0 6px; }

/* Stat strip below header — date submitted, subtotal, age */
.pb-dt-stat-strip{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; padding: 14px 24px;
  border-bottom: 1px solid var(--hair-2);
}
.pb-dt-stat .l{
  font-family: var(--fm); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
}
.pb-dt-stat .v{
  font-family: var(--fm); font-size: 14px; font-weight: 600;
  color: var(--ink); margin-top: 2px;
}

/* Body — items list + tabs */
.pb-dt-body{ display: grid; grid-template-columns: 1fr; }

/* Items list block */
.pb-dt-block{ padding: 18px 24px; border-bottom: 1px solid var(--hair-2); }
.pb-dt-block-h{
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.pb-dt-block-h .n{ color: var(--ink); }
.pb-dt-block-h .sub{
  margin-left: auto;
  font-family: var(--fm); font-size: 12px;
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.pb-dt-block-h .sub span{ color: var(--ink-mute); font-weight: 400; }

.pb-itm{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--hair);
}
.pb-itm:last-child{ border-bottom: 0; }
.pb-itm-nothumb{ grid-template-columns: 1fr auto; }
.pb-itm-thumb{
  width: 36px; height: 36px;
  border: 1px solid var(--hair-2);
  background: rgba(0,0,0,.04);
  display:grid; place-items:center;
  color: var(--ink-mute);
  overflow: hidden;
  flex-shrink: 0;
}
.pb-itm-thumb svg{ width: 14px; height: 14px; }
.pb-itm-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pb-itm-name{
  font-family: var(--fb); font-size: 13.5px; font-weight: 700;
  color: var(--ink); line-height: 1.25;
}
.pb-itm-meta{
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-3);
  margin-top: 2px;
}
.pb-itm-meta b{
  font-family: var(--fm); font-weight: 600; color: var(--ink-2);
  font-size: 10.5px; letter-spacing: .03em; padding: 0 3px;
}
.pb-itm-cost{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 8px; border: 1px solid var(--hair-2);
  background: var(--paper);
}
.pb-itm-cost > span{ font-size: 11px; color: var(--ink-mute); }
.pb-itm-cost > input{
  width: 80px; border: 0; outline: 0; background: transparent;
  font-family: var(--fm); font-size: 12.5px; font-weight: 600;
  color: var(--ink); text-align: right; padding: 0;
}
.pb-itm-cost-static{
  font-family: var(--fm); font-size: 12.5px; font-weight: 600;
  color: var(--ink); text-align: right; min-width: 92px;
}

/* Tabs */
.pb-dt-tabs{ display: flex; border-bottom: 1px solid var(--hair-2); padding: 0 24px; }
.pb-dt-tab{
  padding: 12px 16px 10px;
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; position: relative;
}
.pb-dt-tab:hover{ color: var(--ink); }
.pb-dt-tab.on{
  color: var(--ink);
  border-bottom-color: var(--sapphire);
}
.pb-dt-tab .badge{
  display:inline-block; min-width: 16px; padding: 1px 5px;
  background: var(--ink); color: var(--paper);
  font-family: var(--fm); font-size: 9.5px; font-weight: 700;
  margin-left: 6px; letter-spacing: .02em; text-align:center;
}
.pb-dt-tab.on .badge{ background: var(--sapphire); }

/* Details pane — field grid */
.pb-dt-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding: 18px 24px;
}
.pb-dt-fields .wide{ grid-column: 1 / -1; }
.pb-dt-f-l{
  font-family: var(--fm); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 4px;
}
.pb-dt-f-v, .pb-dt-f-input, .pb-dt-f-select{
  width: 100%;
  border: 0; outline: 0;
  border-bottom: 1px solid var(--hair-2);
  background: transparent;
  padding: 6px 0;
  font-family: var(--fb); font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.pb-dt-f-input.mono, .pb-dt-f-v.mono{
  font-family: var(--fm); font-size: 13px;
}
.pb-dt-f-input::placeholder{ color: var(--ink-mute); font-weight: 400; }
.pb-dt-f-input:focus, .pb-dt-f-select:focus{
  border-bottom-color: var(--sapphire);
}
.pb-dt-f-select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 12px;
}
.pb-dt-f-select:hover{
  border-bottom-color: var(--sapphire);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231e3a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
}
.pb-dt-f-ack{
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
  display:flex; align-items:center; gap: 6px; margin-top: 4px;
}
.pb-dt-inv{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--fb); font-size: 13px;
}
.pb-dt-inv .on{
  color: var(--sapphire); font-weight: 700;
  display:inline-flex; align-items:center; gap: 6px;
}
.pb-dt-inv .on::before{
  content:''; width: 6px; height: 6px; background: currentColor;
}
.pb-dt-inv a{
  color: var(--ink-2); text-decoration: underline; cursor: pointer;
  font-size: 12px;
}
.pb-dt-inv a:hover{ color: var(--sapphire); }
.pb-dt-inv a.del{ color: var(--red); }

/* Notes / Chat — message threads */
.pb-thread{
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 24px; max-height: 220px; overflow-y: auto;
}
.pb-msg{
  border-left: 2px solid var(--hair-2);
  padding: 4px 0 4px 10px;
}
.pb-msg.you{ border-left-color: var(--sapphire); }
.pb-msg .who{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase;
}
.pb-msg .when{
  font-family: var(--fm); font-size: 10px; color: var(--ink-mute);
  margin-left: 6px;
}
.pb-msg .body{
  font-family: var(--fb); font-size: 13px; color: var(--ink); margin-top: 2px;
}
.pb-thread-empty{
  padding: 26px 24px; color: var(--ink-mute);
  font-family: var(--fb); font-size: 13px; text-align: center;
  font-style: italic;
}
.pb-composer{
  padding: 14px 24px; border-top: 1px solid var(--hair-2);
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.pb-composer textarea{
  resize: none; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--hair-2); background: var(--paper);
  font-family: var(--fb); font-size: 13px; color: var(--ink);
  outline: 0;
}
.pb-composer textarea:focus{ border-color: var(--sapphire); }
.pb-composer button{
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 0 16px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
.pb-composer button:hover{ background: var(--sapphire); border-color: var(--sapphire); }

/* Activity timeline */
.pb-acty{ padding: 18px 24px; }
.pb-acty-row{
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hair);
  font-family: var(--fb); font-size: 12.5px;
}
.pb-acty-row:last-child{ border-bottom: 0; }
.pb-acty-ts{
  font-family: var(--fm); font-size: 10.5px; font-weight: 600;
  color: var(--ink-3);
}
.pb-acty-msg{ color: var(--ink-2); }
.pb-acty-msg b{ color: var(--ink); font-weight: 700; }

/* Footer in detail pane — pinned at bottom via flex layout above */
.pb-dt-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--hair-2);
  background: var(--surf);
}
.pb-dt-ful{
  display:flex; align-items:center; gap: 8px;
  font-family: var(--fb); font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.pb-dt-ful .pb-chk{
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-3);
}
.pb-dt-ful.on .pb-chk{ background: var(--green); border-color: var(--green); }
.pb-dt-ful.on .pb-chk::after{
  content:'✓'; color: var(--paper); font-size: 10px;
  display:block; line-height: 11px; text-align:center;
}
.pb-dt-actions{ display: flex; gap: 6px; }
.pb-btn{
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px; cursor: pointer;
  background: transparent;
  border: 1px solid var(--hair-2);
  color: var(--ink-2);
}
.pb-btn:hover{ border-color: var(--ink); color: var(--ink); }
.pb-btn.flag{ color: var(--amber); border-color: rgba(180,83,9,.4); }
.pb-btn.flag:hover{ background: var(--amber-bg); }
.pb-btn.del{ color: var(--red); border-color: rgba(185,28,28,.4); }
.pb-btn.del:hover{ background: var(--red-bg); }
.pb-btn.save{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.pb-btn.save:hover{ background: var(--sapphire); border-color: var(--sapphire); }

/* Page label at very top — meta dispatch banner */
.banner{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 28px 0;
  display: flex; align-items: center; gap: 10px;
}
.banner .swatch{ width: 22px; height: 6px; background: var(--sapphire); }

/* Page toolbar — count + chips + search + export, all one row. */
.pb-page-toolbar{
  display: flex; align-items: center;
  padding: 18px 0 14px;
  font-family: var(--fm);
  flex-wrap: nowrap; gap: 8px;
}
.pb-pt-l{
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.pb-pt-l .pb-pt-count b{ font-size: 13px; color: var(--ink); }
.pb-pt-l .pb-pt-of{ color: var(--ink-mute); font-size: 11px; margin-left: 1px; }
/* Inline status counts — match the .pb-pt-count typography (small,
   uppercase, letter-spaced) so they read as a continuation of the
   count text, just color-coded by status. No borders/buttons. */
.pb-pt-chips{
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-left: 2px; padding-left: 8px;
  border-left: 1px solid var(--hair-2);
  flex-wrap: nowrap;
}
.pb-pt-chip{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pb-pt-chip b{ font-size: 12px; font-weight: 700; color: var(--ink); margin-right: 2px; letter-spacing: 0; }
.pb-pt-chip-pending  { color: var(--red);      }
.pb-pt-chip-pending   b{ color: var(--red);      }
.pb-pt-chip-ordered  { color: var(--sapphire); }
.pb-pt-chip-ordered   b{ color: var(--sapphire); }
.pb-pt-chip-shipped  { color: var(--purple);   }
.pb-pt-chip-shipped   b{ color: var(--purple);   }
.pb-pt-chip-delivered{ color: var(--green);    }
.pb-pt-chip-delivered b{ color: var(--green);    }
.pb-pt-chip-fulfilled{ color: var(--ink-2);    }
.pb-pt-chip-fulfilled b{ color: var(--ink);    }
.pb-pt-chip-flagged  { color: var(--red);      }
.pb-pt-chip-flagged   b{ color: var(--red);    }
.pb-pt-r{ margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.pb-pt-btn{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 8px; cursor: pointer;
  background: var(--surf); color: var(--ink-2);
  border: 1px solid var(--hair-2);
  transition: border-color .12s, color .12s;
  white-space: nowrap;
}
.pb-pt-btn:hover{ border-color: var(--ink); color: var(--ink); }

/* Empty state */
.pb-empty-state{
  padding: 56px 24px; text-align: center;
  font-family: var(--fb); font-size: 14px; color: var(--ink-3);
  background: var(--surf); border: 1px dashed var(--hair-2);
  margin-top: 10px;
}
.pb-empty-state span{
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--ink-mute);
}

/* Pagination */
.pb-pgn{
  display: flex; align-items: center; gap: 14px;
  padding: 24px 0 60px;
  font-family: var(--fm);
}
.pb-pgn-range{
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3);
}
.pb-pgn-range b{ color: var(--ink); }
.pb-pgn-ctrl{
  margin-left: auto;
  display: inline-flex; gap: 4px;
}
.pb-pgn-btn{
  font-family: var(--fm); font-size: 11px; font-weight: 700;
  padding: 6px 10px; cursor: pointer;
  background: var(--surf); color: var(--ink-2);
  border: 1px solid var(--hair-2);
  min-width: 30px; text-align: center;
}
.pb-pgn-btn:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); }
.pb-pgn-btn.pb-is-on{
  background: var(--ink); color: var(--surf); border-color: var(--ink);
}
.pb-pgn-btn:disabled{ opacity: .35; cursor: not-allowed; }
.pb-pgn-gap{ padding: 0 4px; color: var(--ink-mute); }

/* Bulk-action floating bar — fixed at bottom when 1+ orders selected */
.pb-bulk-bar{
  position: fixed; left: var(--rail-w); right: var(--detail-w);
  bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  background: var(--ink); color: var(--surf);
  border-top: 1px solid var(--ink);
  transform: translateY(100%);
  transition: transform .18s ease;
  z-index: 40;
  font-family: var(--fb);
}
.pb-bulk-bar.pb-is-visible{ transform: translateY(0); }
.pb-bulk-bar .pb-bb-count{
  font-family: var(--fm); font-weight: 700; font-size: 12px;
  letter-spacing: .04em;
  padding: 3px 10px; background: var(--sapphire);
}
.pb-bulk-bar .pb-bb-controls{ display: flex; gap: 6px; margin-left: auto; }
.pb-bulk-bar select{
  font-family: var(--fb); font-size: 13px;
  padding: 6px 10px;
  background: rgba(255,255,255,.1); color: var(--surf);
  border: 1px solid rgba(255,255,255,.3); outline: 0;
}
.pb-bulk-bar select option{ background: var(--ink); color: var(--surf); }
.pb-bulk-bar .pb-bb-btn{
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px; cursor: pointer;
  background: var(--surf); color: var(--ink);
  border: 1px solid var(--surf);
}
.pb-bulk-bar .pb-bb-btn:hover{ background: var(--sapphire); border-color: var(--sapphire); color: var(--surf); }
.pb-bulk-bar .pb-bb-btn.danger{
  background: transparent; color: var(--surf);
  border-color: rgba(255,255,255,.4);
}
.pb-bulk-bar .pb-bb-btn.danger:hover{ background: var(--red); border-color: var(--red); }
.pb-bulk-bar .pb-bb-btn.ghost{
  background: transparent; color: var(--surf);
  border-color: rgba(255,255,255,.3);
}
.pb-bulk-bar .pb-bb-btn.ghost:hover{ border-color: var(--surf); }

/* Selected card / row visual cue */
.pb-card.pb-is-selected{ outline: 1px dashed var(--sapphire); outline-offset: -2px; }
.pb-tbl tbody tr.pb-is-selected{ background: var(--sapphire-bg); }



/* ══════════════════════════════════════════════════════════════════════════
   GRID VIEW — actual tile cards in an auto-fill grid.
   Same data points, same status encoding, but vertical layout.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-tile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* Stretch so every tile in a row is the same height — uneven heights
     within a row read as a layout bug even when the content explains
     them. The bottom-anchored meta strip (see .pb-tile-meta-line below)
     keeps the PO/WO/ETA/INV cluster pinned to the bottom of every card,
     so a row with one big card (lots of items) and several small cards
     (1 item) ends up with: items at the top of each tile, breathing
     space in the middle of the small tiles only, condensed meta+foot
     at the bottom of every tile. */
  align-items: stretch;
  gap: 8px;
  padding: 14px 0 28px;
}
.pb-tile{
  position: relative;
  background: var(--surf);
  border: 1px solid var(--hair-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 8px 4px;
  /* Floor so single-item tiles in a row of single-item tiles still
     have YEKWW-like proportions instead of collapsing to a stub.
     When a row contains a multi-item tile, stretch (above) handles
     the uniformity and this floor is moot. */
  min-height: 250px;
  transition: border-color .12s, transform .08s;
}
/* Breathing room between the top three sections. Tile flex-gap is 0
   so this is the only vertical spacing between siblings — kept tight
   on the bottom half (items / meta / foot have their own margin
   discipline) and generous on the top half. */
.pb-tile-head{ margin-bottom: 9px; padding-top: 4px; }
.pb-tile-acct{ margin-bottom: 9px; }
.pb-tile:hover{ border-color: var(--hair-3); }
.pb-tile.pb-is-open{
  border-color: var(--sapphire);
  box-shadow: inset 0 0 0 1px var(--sapphire);
}
.pb-tile.pb-is-flagged::after{
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px;
  width: 3px; background: var(--red);
}
/* Status bar — top edge of each tile (vertical card → bar runs horizontal) */
.pb-tile-bar{
  position: absolute; left:-1px; right:-1px; top:-1px;
  height: 3px;
  background: var(--ink-mute);
}
.pb-tile.pb-s-pending   .pb-tile-bar{ background: var(--red);      }
.pb-tile.pb-s-ordered   .pb-tile-bar{ background: var(--sapphire); }
.pb-tile.pb-s-shipped   .pb-tile-bar{ background: var(--purple);   }
.pb-tile.pb-s-delivered .pb-tile-bar{ background: var(--green);    }
.pb-tile.pb-s-fulfilled .pb-tile-bar{ background: var(--ink-mute); }
/* Dim fulfilled tiles — they're done, push them to the visual background.
   Hover lifts them back so they're still interactive at full clarity. */
.pb-tile.pb-s-fulfilled{ opacity: .55; }
.pb-tile.pb-s-fulfilled:hover,
.pb-tile.pb-s-fulfilled.pb-is-open,
.pb-tile.pb-s-fulfilled.pb-is-selected{ opacity: 1; }
.pb-tile.pb-s-cancelled .pb-tile-bar{ background: var(--brown); opacity:.55; }

/* Compact tile head: checkbox (left), status (center), time/id (right) */
.pb-tile-head{
  display: flex; align-items: center; gap: 8px;
  padding-top: 4px;
}
.pb-tile-head .bulk-chk{
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.pb-tile-status{
  font-family: var(--fb); font-weight: 700;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 2px solid currentColor;
  line-height: 1; white-space: nowrap;
}
.pb-s-pending   .pb-tile-status{ color: var(--red);      }
.pb-s-ordered   .pb-tile-status{ color: var(--sapphire); }
.pb-s-shipped   .pb-tile-status{ color: var(--purple);   }
.pb-s-delivered .pb-tile-status{ color: var(--green);    }
.pb-s-fulfilled .pb-tile-status{ color: var(--ink-2);    }
.pb-s-cancelled .pb-tile-status{ color: var(--brown); text-decoration: line-through; }
.pb-tile-time{
  margin-left: auto;
  font-family: var(--fm); font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .02em; white-space: nowrap;
}
.pb-tile-time .sep{ color: var(--ink-mute); }
.pb-tile-time .i{ color: var(--ink-mute); font-weight: 500; }

.pb-tile-acct{
  font-family: var(--fb); font-size: 13.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-tile-sub{
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
  font-weight: 400;
}

.pb-tile-items{
  display: flex; flex-direction: column; gap: 2px;
  /* Absorb any slack from the tile's min-height floor INSIDE the items
     section, so meta+foot stay glued to the bottom of items on every
     card — matching the YEKWW look regardless of item count. Without
     this, when items has only 1 row, the slack lands between items
     and meta and the PO/WO/ETA/INV strip drifts away from items. */
  flex-grow: 1;
}
.pb-tile-item{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
}
.pb-tile-item-nothumb{ grid-template-columns: 1fr; }
.pb-tile-item-more{
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .05em;
  padding-left: 32px;  /* align with thumb gutter */
}
.pb-tile-item-name .qty{
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  color: var(--ink-2); letter-spacing: .02em;
  margin-right: 2px;
}
.pb-tile-item-thumb{
  width: 24px; height: 24px;
  border: 1px solid var(--hair-2);
  background: rgba(0,0,0,.04);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-mute);
}
.pb-tile-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.pb-tile-item-thumb svg{ width: 11px; height: 11px; }

/* Order-level photo strip on the tile — these come from the order-form's
   bottom Take Photo / Gallery buttons (order.photos[]), not per-item. The
   per-item thumbs already render inline beside each item; this strip is
   for the cases where the tech captured photos that aren't tied to a
   specific line item. */
.pb-tile-order-photos{
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
  flex-grow: 0;
}
.pb-tile-op-thumb{
  width: 32px; height: 32px;
  border: 1px solid var(--hair-2);
  background: rgba(0,0,0,.04);
  overflow: hidden;
}
.pb-tile-op-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pb-tile-op-more{
  width: 32px; height: 32px;
  border: 1px dashed var(--hair-2);
  display: grid; place-items: center;
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  color: var(--ink-3); letter-spacing: .04em;
}
.pb-tile-item-name{
  font-family: var(--fb); font-size: 12.5px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-tile-item-name .more{
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .05em;
  margin-left: 4px;
}

/* Meta strip: PO/WO on top, ETA/INV below. 2x2 grid so each cell has
   room for its value without ellipsizing, and so a value in one
   column doesn't shove a neighboring "—" baseline upward (which
   happens with a tight 4-col strip when one cell's text is taller
   than another). Slack on short cards lives in .pb-tile-items
   (flex-grow:1), so meta sits immediately under the items list. */
.pb-tile-meta-line{
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0;
  column-gap: 8px;
  font-family: var(--fm); font-size: 10.5px;
  padding-top: 4px;
}
.pb-tile-bm{
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; min-width: 0;
  line-height: 1;
}
.pb-tile-bm .l{
  font-size: 8px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-mute); text-transform: uppercase;
  flex-shrink: 0;
  min-width: 22px;
  line-height: 1;
}
.pb-tile-bm .v{ line-height: 1; }
.pb-tile-bm .v{ overflow: hidden; text-overflow: ellipsis; }
.pb-tile-bm .v{ font-weight: 600; color: var(--ink); }
.pb-tile-bm .v.pb-v-empty{ color: var(--ink-mute); font-weight: 400; }
.pb-tile-bm .v.warn { color: var(--amber); font-weight: 700; }
.pb-tile-bm .v.met  { color: var(--green); }
.pb-tile-bm .v.has-inv{ color: var(--sapphire); }
.pb-tile-bm .v.has-inv::before{
  content:''; display:inline-block; width:5px; height:5px;
  background: var(--sapphire); margin-right: 3px; transform: translateY(-1px);
}
.pb-tile-bm .v.pb-v-req{ color: var(--red); font-weight: 700; letter-spacing: .04em; }

/* Footer line: by · pips · subtotal */
.pb-tile-foot{
  display: flex; align-items: baseline; gap: 6px;
  padding-top: 2px;
  border-top: 1px solid var(--hair);
  margin-top: 4px;
  flex-wrap: wrap;
}
.pb-tile-by{
  font-family: var(--fb); font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}
.pb-tile-by b{
  font-family: var(--fm); font-weight: 600; color: var(--ink-2);
  font-size: 10px; letter-spacing: .04em;
}
.pb-tile-by .sep{ color: var(--ink-mute); margin: 0 4px; }
.pb-tile-by .old{
  background: var(--red-bg); color: var(--red);
  font-family: var(--fm); font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; padding: 1px 4px; margin-left: 4px;
}
.pb-tile-pips{
  display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap;
}
.pb-tile-pip{
  font-family: var(--fm); font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; padding: 1px 4px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 3px;
}
.pb-tile-pip.flag { color: var(--red);      background: var(--red-bg); }
.pb-tile-pip.photo{ color: var(--ink-2);    background: rgba(11,15,26,.06); }
.pb-tile-pip.inv  { color: var(--sapphire); background: var(--sapphire-bg); }
.pb-tile-sub{
  margin-left: auto;
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.pb-tile-sub.zero{ color: var(--ink-mute); font-weight: 400; }
.pb-tile-sub .cur{ color: var(--ink-mute); font-size: 10px; vertical-align: 2px; margin-right: 1px; }

/* Selected (multi-select) — sapphire dashed outline like rows */
.pb-tile.pb-is-selected{ outline: 1px dashed var(--sapphire); outline-offset: -2px; }

/* Grid day header — same as row view but tighter */
.pb-tile-day{
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--hair-2);
  margin-top: 8px;
}
.pb-tile-day:first-child{ margin-top: 0; padding-top: 6px; }
.pb-tile-day-num{
  font-family: var(--fm); font-weight: 700; font-size: 36px;
  line-height: 1; letter-spacing: -.03em; color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.pb-tile-day-meta{ display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.pb-tile-day-dow{
  font-family: var(--fb); font-size: 11px; letter-spacing: .22em;
  font-weight: 700; text-transform: uppercase; color: var(--ink-2);
}
.pb-tile-day-stats{
  font-family: var(--fm); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-3);
}
.pb-tile-day-stats b{ color: var(--ink); }