/* ==========================================================================
   pulse-7.css — BUYING › PLANNER › PLAN REVIEW (2026-07-26)

   A new stylesheet rather than an edit to pulse-1..6, same reason as app-11:
   the surface extends the shell without touching files every other tab shares.
   All colour comes from the :root tokens in pulse-1.css.

   This screen is a WORKING surface, not a reading one — a buyer sits in it and
   types quantities across eight stores for dozens of styles. So the inputs are
   the loudest thing on the card and everything else recedes.
   ========================================================================== */

/* Crumbs are styled per SUBVIEW ID in Pulse (pulse-2.css lists each one), so a
   new subview inherits nothing and its crumb renders as a raw browser button.
   Learned on #sv-new-arrivals the same day. */
#sv-plan-review .sv-title {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: #8a6940; line-height: 1.5; margin: -4px 0 10px;
}
#sv-plan-review .po-cr-link {
  background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: #8a6940; cursor: pointer;
}
#sv-plan-review .po-cr-link:hover { color: #4a2c17; }
#sv-plan-review .po-cr-sep  { color: #c5a572; }
#sv-plan-review .crumb-leaf { color: #4a2c17; }

.pr-sub  { font-family: 'Jost', sans-serif; font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.pr-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-btn {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; transition: border-color .15s, color .15s;
}
.pr-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.pr-empty { font-style: italic; color: var(--text-dim); padding: 26px 0; font-family: 'Jost', sans-serif; font-size: 13px; }

/* ---------- plan list ---------- */
.pr-list { display: flex; flex-direction: column; gap: 6px; }
.pr-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, background .15s; font-family: 'Inter', sans-serif;
}
.pr-row:hover { border-color: var(--gold); background: var(--bg-3); }
.pr-row::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: #c8a98a; transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease;
}
.pr-row:hover::after { transform: scaleY(1); }
.pr-row-main { flex: 1 1 auto; min-width: 0; }
.pr-vendor { font-size: 14px; font-weight: 600; color: #4a2c17; }
.pr-show   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.pr-go     { flex: none; color: var(--gold); font-size: 18px; line-height: 1; }

.pr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pr-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line);
  color: var(--text-dim); background: var(--bg-3);
}
.pr-chip.warn     { color: #a8763a; border-color: #e6d3b4; background: #fdf7ee; }
.pr-chip.info     { color: #6e5a3f; border-color: #e2d8c6; }
.pr-chip.prospect { color: var(--gold-bright); border-color: var(--gold); background: var(--bg-3); }

/* ---------- plan detail ---------- */
.pr-head { margin-bottom: 16px; }
.pr-h-title { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 500; color: #4a2c17; line-height: 1.15; }
.pr-h-sub   { font-family: 'Jost', sans-serif; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.pr-note {
  margin-top: 12px; padding: 11px 14px; border-radius: 9px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.5; color: #4a2c17;
  background: var(--bg-3); border: 1px solid var(--line);
}
.pr-note.prospect { border-color: var(--gold); background: #fffaf1; }

.pr-lines { display: flex; flex-direction: column; gap: 10px; }
.pr-line {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-family: 'Inter', sans-serif;
}
.pr-l-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pr-l-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pr-style  { font-size: 14px; font-weight: 700; color: #4a2c17; letter-spacing: .01em; }
.pr-colour { font-size: 12px; color: var(--gold-bright); }
.pr-l-desc { font-size: 12px; color: var(--text-dim); min-width: 0; }
.pr-size   { font-variant-numeric: lining-nums tabular-nums; }

/* tags on the line (89th) — the style's sku tags as chips; tap opens the Forecaster's popup, written sku by sku */
.pr-l-tags { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; cursor: pointer; }
.pr-l-tags .pr-k { margin-right: 4px; }
.pr-l-tags-none { cursor: default; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
/* prices + running total */
.pr-l-prices { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; align-items: flex-start; }
.pr-l-price, .pr-l-total { display: flex; flex-direction: column; gap: 4px; }
/* capture imagery — small expandable thumbs: style photos, then sheet/cat pages */
.pr-l-imgs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; scrollbar-width: thin; }
.pr-l-imgs:empty { display: none; }
.pr-img { position: relative; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line, #e8ddd0);
  border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--paper, #fffdfa); }
.pr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-img:hover { border-color: var(--gold, #c5a572); }
.pr-img.sheet { border-style: dashed; }
.pr-img-l { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 1px 0;
  background: rgba(20,15,12,.55); color: #fdf8f3; }
/* the buyer's tally — active store, then company-wide, then colours */
.pr-l-tally { display: flex; flex-direction: column; gap: 3px; justify-content: flex-end;
  margin-left: auto; text-align: right; font-size: 12.5px; color: var(--ink-muted); min-width: 0; }
.pr-tally-row.strong { color: var(--ink); font-weight: 600; }
.pr-tally-store { font-weight: 600; letter-spacing: .02em; margin-right: 6px; }
.pr-tally-row .fx-num { font-variant-numeric: lining-nums tabular-nums; }
.pr-tally-row.colours { font-size: 11.5px; }
@media (max-width: 720px) { .pr-l-tally { margin-left: 0; text-align: left; flex-basis: 100%; } }
.pr-k {
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* "yours" marks a price the buyer set, so a later sheet price never silently
   replaces it — it lands underneath as the previous value instead. */
.pr-src { color: var(--gold-bright); letter-spacing: .06em; }
.pr-price-in {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  transition: border-color .15s;
}
.pr-price-in:focus-within { border-color: var(--gold); }
.pr-cur { font-size: 12px; color: var(--ink-muted); }
.pr-price-in input {
  width: 84px; border: 0; background: none; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: #4a2c17;
  font-variant-numeric: lining-nums tabular-nums;
}
.pr-price-in input::placeholder { color: var(--ink-muted); font-style: italic; font-size: 12.5px; }
.pr-prev { font-size: 11px; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
/* The Lightspeed category — a new style's one extra field (2026-09-08). Same box as a price;
   the select is the only control, dressed as the inputs are. */
.pr-cat-in select {
  border: 0; background: none; outline: none; min-width: 200px; max-width: 320px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #4a2c17;
}
.pr-total-n { font-size: 18px; font-weight: 600; color: #4a2c17; }

/* ---------- store tabs — the plan-wide view (2026-08-01) ----------
   Peter: "Store tabs should run across the draft PO… If I'm in the Brookfield
   tab, Brookfield is my view." One selector for the whole plan; every line's
   matrix below shows that store's boxes. Totals on the tabs derive from the
   size runs — the per-store number row is RETIRED (a quantity is the sum of
   its size cells, stated once, where the PO is minted from). */
.pr-storetabs {
  display: flex; flex-wrap: wrap; gap: 7px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 10px 0 12px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.pr-stab {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; color: var(--text-dim); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pr-stab:hover { border-color: var(--gold); color: var(--gold-bright); }
.pr-stab.active { background: #3d2417; border-color: #3d2417; color: #fdf8f3; }
.pr-stab-n { font-size: 10.5px; color: var(--ink-muted); font-weight: 500; }
.pr-stab.active .pr-stab-n { color: #e8d9c5; }
/* A dot marks a store that has units somewhere in this plan. */
.pr-stab.sized:not(.active)::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-bright); align-self: center; flex: none;
}

/* ---------- size run ----------
   The Create-PO matrix's grammar, reused: pills pick the axis, cells take the
   quantity, the total sits under the grid. There it is colours across a
   band x cup grid; here it is STORES across the sizes the sheet printed.
   Kept visually quieter than that modal because this one is inline — it is a
   detail of the line it sits in, not a screen of its own. */
.pr-l-run { margin-top: 12px; }
.pr-run-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}

.pr-run-body {
  margin-top: 10px; padding: 12px 13px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px;
}
.pr-run-empty {
  font-family: 'Jost', sans-serif; font-size: 12.5px; font-style: italic;
  color: var(--ink-muted); line-height: 1.5;
}


.pr-run-scroll { overflow-x: auto; margin: 0 -2px; }
.pr-run-grid { border-collapse: separate; border-spacing: 4px; font-family: 'Inter', sans-serif; }
.pr-run-grid th {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); text-align: center; padding: 0 2px; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.pr-run-grid thead th:first-child { text-align: left; letter-spacing: .04em; }
.pr-run-grid tbody th { text-align: right; padding-right: 6px; }
.pr-run-grid td { padding: 0; }

.pr-run-flat { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.pr-run-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-run-flat .pr-run-sz {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-run-grid .pr-run-sz { display: none; }   /* row + column headers already say it */
.pr-run-cell input {
  width: 100%; min-width: 54px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 8px; font-family: 'Inter', sans-serif; font-size: 13px;
  color: #4a2c17; font-variant-numeric: lining-nums tabular-nums; outline: none;
  text-align: center; transition: border-color .15s;
}
.pr-run-cell input:focus { border-color: var(--gold); }
.pr-run-cell input::-webkit-outer-spin-button,
.pr-run-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-run-cell input[type=number] { -moz-appearance: textfield; }

.pr-run-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 11px; flex-wrap: wrap;
}
.pr-run-tot { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--text-dim); }
/* All Stores aggregate cells: numbers on view, visibly not-for-typing. */
.pr-run-cell.agg input { background: var(--bg-3); color: #6e5a47; border-style: dashed; cursor: default; }

.pr-sub-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pr-sub-go.ghost {
  background: transparent; color: #6e5a47; border: 1px solid var(--line);
}
.pr-sub-go.ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: transparent; }

/* "+ size" adder retired 2026-08-01 — the matrix offers the crossed range;
   an unreadable range is fixed on the capture in Trades, never invented here. */

/* A store whose run is filled reads as derived, not typed — its number comes
   back from the server as the column total. */
.pr-store.sized .pr-qty { background: var(--bg); border-style: dashed; cursor: default; }
.pr-store.sized .pr-store-n { color: var(--gold-bright); }

.pr-l-note { margin-top: 12px; }
.pr-note-in {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--text);
  outline: none; transition: border-color .15s;
}
.pr-note-in:focus { border-color: var(--gold); }
.pr-note-in::placeholder { color: var(--ink-muted); }

.pr-l-state { min-height: 15px; margin-top: 7px; font-size: 11px; }
.pr-l-state .saving { color: var(--ink-muted); }
.pr-l-state .saved  { color: var(--green-cream); }
.pr-l-state .err    { color: var(--red); font-weight: 600; }

.pr-foot { font-family: 'Jost', sans-serif; font-size: 12px; color: var(--ink-muted); margin-top: 18px; line-height: 1.6; }

@media (max-width: 820px) {
  .pr-l-stores { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .pr-l-prices { gap: 14px; }
  .pr-price-in input { width: 68px; }
  .pr-h-title { font-size: 21px; }
}

/* expected delivery date — Plan Review is where it is CEMENTED (2026-08-01).
   Sits in the plan HEAD, not the submit block: the buyer answers it while
   reviewing, and it must not read as a last-gasp field at the send button.
   --empty borrows the amber of .pr-sub-to--none deliberately, because it is the
   same kind of thing — a submit precondition nobody has answered yet. */
.pr-exp { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line, #e8ddd0);
  border-radius: 10px; background: #fffcf8; }
.pr-exp--empty { border-color: #d4bfa8; background: #fff5e8; }
.pr-exp-lab { display: block; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: #8a6940; font-weight: 600; margin-bottom: 6px; }
.pr-exp-in { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; color: var(--text); outline: none; transition: border-color .15s; }
.pr-exp-in:focus { border-color: var(--gold); }
.pr-exp-hint { font-family: 'Jost', sans-serif; font-size: 12px; color: var(--ink-muted); margin-top: 7px; line-height: 1.5; }
.pr-exp--empty .pr-exp-hint { color: #8a6940; }
.pr-exp-state { min-height: 15px; margin-top: 5px; font-size: 11px; }
.pr-exp-state.saving { color: var(--ink-muted); }
.pr-exp-state.err    { color: var(--red); font-weight: 600; }
.pr-exp--done { margin-top: 14px; font-family: 'Jost', sans-serif; font-size: 13px; color: #6e5a3f; }
.pr-exp--done b { color: #4a2c17; font-weight: 600; }

/* submit — the order becomes real */
.pr-submit { margin-top: 22px; padding: 18px; border: 1px solid var(--line, #e8ddd0); border-radius: 12px; background: #fdf8f3; }
.pr-submit.approved { border-color: #9db98a; }
.pr-sub-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; color: #8a6940; }
.pr-sub-d { font-size: 13px; color: var(--ink-muted); margin: 6px 0 10px; }
.pr-sub-gate ul { margin: 6px 0 10px 18px; padding: 0; font-size: 12.5px; color: #a05a2c; }
/* .pr-sub-lab / .pr-sub-contacts retired 2026-07-30: the free-text order-contact
   box is gone. Where a PO goes is a checkbox in the Vendor Master List, and the
   Submit sheet now STATES the answer instead of asking for it. */
.pr-sub-to { font-family: 'Jost', sans-serif; font-size: 13px; line-height: 1.5; color: #6e5a3f;
  background: #fffcf8; border: 1px solid var(--line, #e8ddd0); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; }
.pr-sub-to b { color: #4a2c17; font-weight: 600; }
.pr-sub-to--none { border-color: #d4bfa8; background: #fff5e8; color: #8a6940; }
.pr-sub-to--none b { color: #8a6940; }
.pr-sub-go { margin-top: 12px; padding: 12px 22px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; letter-spacing: .03em; background: linear-gradient(180deg, #a8865c 0%, #8a6940 100%); color: #fdf8f3; }
.pr-sub-go.ghost { background: none; border: 1px solid #c5a572; color: #8a6940; }
.pr-sub-go:disabled { opacity: .55; cursor: default; }
.pr-sub-state { margin-top: 10px; font-size: 12.5px; color: #4a6b3a; }
.pr-sub-state.err { color: #a03a2c; }

/* ── Document tiles + page viewer (2026-08-07, Curve follow-up lane 4) ──
   One tile per line sheet / catalogue instead of every page as its own thumb:
   a 60-page catalogue used to dump 60 thumbs onto EVERY line's imagery strip.
   The tile opens a scrollable viewer whose pages load lazily as you reach
   them — big documents render at the cost of the pages you actually read. */
.pr-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pr-doc-n { font-size: 15px; font-weight: 700; color: var(--ink, #2b2118); font-variant-numeric: lining-nums tabular-nums; }
.pr-doc-pp { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted, #8a7a66); }
.pr-docview { position: fixed; inset: 0; z-index: 1200; display: none; background: rgba(20, 15, 12, .78); }
.pr-docview.open { display: flex; align-items: center; justify-content: center; }
.pr-docview-panel { width: min(760px, 94vw); height: min(92vh, 1000px); display: flex; flex-direction: column;
  background: var(--paper, #fffdfa); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(20,15,12,.45); }
.pr-docview-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e8ddd0); }
.pr-docview-title { font-weight: 600; font-size: 14px; color: var(--ink, #2b2118); }
.pr-docview-count { font-size: 12px; color: var(--ink-muted, #8a7a66); font-variant-numeric: lining-nums tabular-nums; }
.pr-docview-x { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--ink-muted, #8a7a66); padding: 4px 8px; }
.pr-docview-x:hover { color: var(--ink, #2b2118); }
.pr-docview-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: flex;
  flex-direction: column; gap: 12px; background: var(--cream, #faf5ec); }
.pr-docview-body img { width: 100%; height: auto; display: block;
  /* auto 3/4 = placeholder ratio before load, natural ratio after — without
     it, 0px-tall lazy pages all "intersect the viewport" and an 81-page
     catalogue fires 81 requests at once (2026-08-08, measured). */
  aspect-ratio: auto 3 / 4; border: 1px solid var(--line, #e8ddd0);
  border-radius: 8px; background: #fff;
  /* flex: none is load-bearing (2026-08-08, Peter: "the captures are stretched
     out visually"): the body is a fixed-height flex column, and default
     flex-shrink squashed every page into a wide strip to fit the panel. A page
     must keep its own aspect ratio; min-height removed for the same reason. */
  flex: none; }
.pr-docview-pn { flex: none; }
.pr-docview-pn { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: center;
  color: var(--ink-muted, #8a7a66); margin-top: -6px; }