/* ============================================================================
   Batch Production: module components only. Tokens only (no hex values),
   harness classes are consumed as-is (DESIGN.md rules 1-2).
   ============================================================================ */

/* ---- Header controls ------------------------------------------------------ */
.bp-ctl { display: inline-flex; align-items: center; gap: var(--space-2); }
.bp-ctl[hidden] { display: none; }
.bp-day { display: inline-flex; align-items: center; gap: 2px; }
.bp-day-label { min-width: 150px; justify-content: center; font-variant-numeric: tabular-nums; }

/* ---- Body + section head ---------------------------------------------------- */
.bp-body { padding-bottom: var(--space-8); }
.bp-area { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); }
.bp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.bp-head-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); letter-spacing: var(--tracking-tight); }
.bp-head-sub { font-size: var(--fs-sm); color: var(--color-label); margin-top: 2px; max-width: 720px; }
.bp-head-text { flex: 1 1 360px; min-width: 0; }
.bp-head-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.bp-loading { padding: var(--space-8) 0; }
.bp-hint { font-size: var(--fs-sm); color: var(--color-label); line-height: var(--lh-base); }
.bp-spacer { flex: 1; }
.bp-subhead { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-label); }
.bp-pills { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
.bp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--space-2); background: var(--color-border); box-shadow: inset 0 0 0 1px var(--color-border); vertical-align: middle; flex: none; }

/* ---- Label above value ------------------------------------------------------- */
.bp-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3) var(--space-4); }
.bp-kvs--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-kvs--summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bp-kv { min-width: 0; }
.bp-kv--wide { grid-column: span 2; }
.bp-kv-label { font-size: var(--fs-xs); color: var(--color-label); margin-bottom: 2px; }
.bp-kv-value { font-size: var(--fs-md); color: var(--color-text); font-weight: var(--fw-medium); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bp-kv-value .bp-pills { margin-left: 0; }

/* ---- MO screen ------------------------------------------------------------------ */
.bp-mo-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; }
.bp-sec-pad { padding: var(--space-2) 0; }
.bp-sec-actions { display: inline-flex; gap: var(--space-2); }
.bp-lines { display: flex; flex-direction: column; }
.bp-line {
  display: grid; grid-template-columns: minmax(170px, 1.3fr) 110px 110px minmax(220px, 1.4fr) minmax(200px, 1.3fr);
  gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-faint);
}
.bp-line--head { padding: var(--space-2) 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--color-border); }
.bp-line .num { text-align: right; font-variant-numeric: tabular-nums; }
.bp-line--err { background: var(--color-surface-cream); }
.bp-line-sku { font-weight: var(--fw-semibold); color: var(--color-text); display: flex; align-items: center; flex-wrap: wrap; }
.bp-line-sku .bp-pills { margin-left: var(--space-2); }
.bp-line-name { font-size: var(--fs-sm); color: var(--color-text); }
.bp-line-meta { font-size: var(--fs-xs); color: var(--color-label); margin-top: 2px; }
.bp-line-error { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-danger-text); font-weight: var(--fw-medium); }
.bp-line-error .icon { width: 14px; height: 14px; flex: none; }
.bp-dual-main { font-weight: var(--fw-medium); color: var(--color-text); }
.bp-dual-sub { font-size: var(--fs-xs); color: var(--color-label); }
.bp-actual { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bp-actual--wide { grid-column: 4 / -1; }
.bp-actual-row { display: flex; align-items: center; gap: var(--space-2); }
.bp-qty { width: 120px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.bp-unit-fixed { font-size: var(--fs-sm); color: var(--color-label); padding: 0 var(--space-2); }
.bp-preview { font-size: var(--fs-xs); color: var(--color-label); font-variant-numeric: tabular-nums; }
.bp-preview--bad { color: var(--color-danger-text); }
.bp-lot { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bp-reason { display: flex; flex-direction: column; gap: var(--space-2); }
.bp-plan-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.bp-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: var(--space-2); align-items: center; }
.bp-plan-row .bp-qty { width: 100%; }
.bp-cell-note { font-size: var(--fs-sm); color: var(--color-label); }
.bp-cell-bad { font-size: var(--fs-sm); color: var(--color-danger-text); font-weight: var(--fw-medium); }
.bp-log-foot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.bp-log-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.bp-static { display: flex; flex-direction: column; justify-content: center; min-height: var(--control-height); }
.bp-act-sub { font-size: var(--fs-xs); color: var(--color-label); }
.bp-act-failed { color: var(--color-danger-text); }

/* ---- Packout ---------------------------------------------------------------------- */
.bp-sku { display: inline-flex; align-items: center; white-space: nowrap; }
.bp-sku--thumb { gap: var(--space-3); }
/* Item photo (or a flavor-tinted tile with a bag icon until there is one). */
.bp-thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-input); overflow: hidden; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.bp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bp-thumb--ph { background: color-mix(in srgb, var(--thumb, var(--opt-gray)) 22%, var(--color-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--thumb, var(--opt-gray)) 45%, var(--color-bg)); }
.bp-thumb--ph .icon { width: 18px; height: 18px; color: color-mix(in srgb, var(--thumb, var(--opt-gray)) 60%, var(--color-text)); }
.bp-name-cell { display: inline-block; max-width: 280px; font-size: var(--fs-sm); color: var(--color-label); }
.bp-res { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 260px; }
.bp-step { display: inline-flex; align-items: center; gap: var(--space-1); }
.bp-step-btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); color: var(--color-text);
  cursor: pointer; box-shadow: var(--shadow-sm); font: inherit;
}
.bp-step-btn:hover { background: var(--color-hover); }
.bp-step-btn:active { background: var(--cream-100); }
.bp-step-btn .icon { width: 18px; height: 18px; }
.bp-step-input {
  width: 64px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg);
  color: var(--color-text); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: center; font-variant-numeric: tabular-nums;
}
.bp-step-input:focus { outline: none; box-shadow: var(--focus-ring); }
.bp-left-rows { display: flex; flex-direction: column; }
.bp-line-item { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.bp-line-text { min-width: 0; }
.bp-left-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bp-left-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-faint); }
.bp-left-row:last-child { border-bottom: 0; }
.bp-left-note { grid-column: 1 / -1; }
.bp-left-note .input { width: 100%; }

/* ---- Case MO panel (Packout row): head, stats strip, inputs, bag lots ------------------- */
.bp-pack-table tr.is-selected > td { background: var(--color-accent-soft); }
.bp-pk-head { display: flex; align-items: flex-start; gap: var(--space-4); }
.bp-pk-head > .bp-thumb { width: 64px; height: 64px; }
.bp-pk-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-pk-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-lg); }
.bp-pk-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 calc(-1 * var(--space-4)); border-top: 1px solid var(--color-border); }
.bp-pk-stat { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--color-border); }
.bp-pk-stat:first-child { border-left: 0; }
.bp-pk-stat-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); }
.bp-pk-stat-value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.bp-pk-units { display: flex; align-items: center; gap: var(--space-3); }
/* The inputs table runs to the panel edges; its first / last cells keep the panel's inset. */
.bp-pk-sec--table { padding-bottom: 0; }
.bp-pk-counts { margin: 0 calc(-1 * var(--space-4)); }
.bp-pk-table { width: 100%; }
.bp-pk-table th, .bp-pk-table td { vertical-align: middle; }
.bp-pk-table tr > :first-child { padding-left: var(--space-4); }
.bp-pk-table tr > :last-child { padding-right: var(--space-4); }
.bp-pk-table tbody td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.bp-pk-table tbody tr:last-child td { border-bottom: 0; }
.bp-pk-table .bp-qty { width: 96px; }
.bp-pk-table .bp-thumb { width: 36px; height: 36px; }
.bp-bag { display: flex; flex-direction: column; gap: var(--space-3); }
.bp-bag-list { display: flex; flex-direction: column; }
.bp-bag-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-faint); }
.bp-bag-row:first-child { padding-top: 0; }
.bp-bag-row .bp-qty { width: 96px; }
.bp-bag-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-input); background: var(--color-accent-soft); color: var(--color-accent); }
.bp-bag-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.bp-bag-acts { display: flex; gap: var(--space-1); }
.bp-bag-sum { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.bp-bag-pick, .bp-bag-logged, .bp-bag-form { display: flex; flex-direction: column; gap: var(--space-2); }
.bp-bag-pick-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-label); }
.bp-bag-reuse { display: flex; flex-direction: column; gap: var(--space-2); }
.bp-bag-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); color: var(--color-text); font: inherit; cursor: pointer; }
.bp-bag-opt:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.bp-bag-opt > .icon { color: var(--color-accent); }
.bp-bag-form .form-grid { margin-bottom: var(--space-1); }
.bp-cell-warn { color: var(--color-warn-text); }

/* ---- Material List ------------------------------------------------------------------- */
.bp-mat-intro { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.bp-mat-line { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-faint); display: flex; flex-direction: column; gap: var(--space-2); }
.bp-mat-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.bp-mat-table .bp-qty { width: 110px; }
.bp-row-off td { color: var(--color-muted); }

/* ---- Trace ----------------------------------------------------------------------------- */
.bp-trace-out { display: flex; flex-direction: column; gap: var(--space-4); }
.bp-trace-title { font-size: var(--fs-md); color: var(--color-text); }
.bp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); max-width: 640px; }

/* ---- Settings: floor units ---------------------------------------------------------------- */
.bp-fu-table { display: flex; flex-direction: column; }
.bp-fu { display: grid; grid-template-columns: minmax(160px, 1fr) 120px 100px 96px 124px; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-faint); }
.bp-fu--head { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); text-transform: uppercase; letter-spacing: .04em; }
.bp-fu-act { display: inline-flex; gap: var(--space-2); }

/* ---- Printed sheets (inside the harness print preview; black on white) --------------------- */
.bp-pd { font-size: 13px; }
.bp-pd .pd-table td, .bp-pd .pd-table th { padding: 5px 6px; }
.bp-pd-title { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bp-pd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bp-pd-line td { background: var(--cream-50); border-top: 1.5px solid currentColor; }
.bp-pd-picked td { font-size: 11px; opacity: .8; }
.bp-pd-blank { border-bottom: 1px solid currentColor; min-width: 90px; }
.bp-pd-warn { font-weight: 700; margin: 6px 0; }
.bp-pd-flag { font-weight: 700; text-align: right; }
.bp-pd-flag--bad, .bp-pd-flag--warn { text-decoration: underline; }
.bp-pd-summary { margin: 8px 0; font-weight: 600; }
.bp-pd-sechead { margin-top: 14px; }
.bp-pd-rev { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.bp-pd-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 30px; }
.bp-pd-line-blank { border-bottom: 1px solid currentColor; height: 26px; }
@media print {
  body.bp-printing .nml-top { display: none !important; }
  .bp-pd-line td { background: none; }
}

/* ---- 1.4: scan field ------------------------------------------------------------------- */
.bp-scan { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); margin-bottom: var(--space-2); border: 1px dashed var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-cream); }
.bp-scan > .icon { width: 18px; height: 18px; color: var(--color-label); flex: none; }
.bp-scan-input { width: 280px; flex: none; }
.bp-scan-msg { font-size: var(--fs-sm); color: var(--color-success-text); font-weight: var(--fw-medium); }
.bp-try { display: flex; flex-direction: column; gap: var(--space-3); }
.bp-try-code { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); color: var(--color-text); cursor: pointer; font: inherit; text-align: left; }
.bp-try-code:hover { background: var(--color-hover); }
.bp-try-code code { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---- 1.4: packout counts + groups --------------------------------------------------------- */
.bp-pack-wrap { overflow-x: auto; }
.bp-pack-group td { background: var(--color-surface-cream); }
.bp-pack-group-head { display: flex; align-items: baseline; gap: var(--space-3); }
.bp-counts-row > td { background: var(--color-bg); padding-top: 0; }
.bp-counts { padding: var(--space-2) 0 var(--space-3) var(--space-8); }
.bp-counts--shared { padding-left: 0; margin-top: var(--space-2); }
.bp-counts-table { border-collapse: collapse; margin-top: var(--space-1); }
.bp-counts-table th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); padding: var(--space-1) var(--space-3) var(--space-1) 0; }
.bp-counts-table td { padding: var(--space-1) var(--space-4) var(--space-1) 0; vertical-align: top; font-size: var(--fs-sm); border: 0; }
.bp-counts-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-var { font-variant-numeric: tabular-nums; color: var(--color-label); }
.bp-var--warn { color: var(--color-warn-text); font-weight: var(--fw-semibold); }

/* ---- Batch screen (single-MO redesign) ----------------------------------------------------- */
.bp-batch[hidden] { display: none; }
.bp-raw { display: flex; flex-direction: column; }

/* ---- Tablets: bigger touch targets ------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 1180px) {
  .bp-line { grid-template-columns: minmax(150px, 1fr) 96px 96px minmax(200px, 1.3fr); }
  .bp-line > .bp-lot, .bp-line > .bp-cell-note, .bp-line > .bp-cell-bad { grid-column: 4; }
  .bp-line--head > :nth-child(5) { display: none; }
}

/* ---- Batches list (10/29: smartTable views, like the Nutracom tables) ------------------------- */
@media (max-width: 900px) { .bp-kvs--summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-today { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0 var(--space-3); }
.bp-today-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bp-tstat { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); font-size: var(--fs-sm); color: var(--color-label); }
.bp-tstat .icon { width: 16px; height: 16px; }
.bp-tstat-n { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.bp-tstat--warn { background: var(--color-surface-cream); }
.bp-tstat--warn .bp-tstat-n { color: var(--color-warn-text); }
.bp-cell-no { display: inline-flex; align-items: center; }
.bp-prog { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bp-prog .meter { flex: 1; min-width: 50px; }
.bp-prog-text { font-size: var(--fs-xs); color: var(--color-label); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The stage tracker in a cell: four segments, the current one filled, then its name. */
.bp-track { display: flex; align-items: center; gap: 3px; min-width: 0; }
.bp-track-step { display: flex; flex-direction: column; gap: 4px; }
.bp-track:not(.bp-track--full) .bp-track-step { width: 18px; flex: none; }
.bp-track-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-alt); }
.bp-track-step.is-done .bp-track-bar { background: var(--color-text); opacity: .55; }
.bp-track-step.is-now .bp-track-bar { background: var(--color-accent); }
.bp-track-text { margin-left: var(--space-2); font-size: var(--fs-sm); color: var(--color-text); font-weight: var(--fw-medium); white-space: nowrap; }

/* Production calendar: a batch on its raw day and its pack day, in the flavor's label color. */
.bp-cal-chip { height: auto; min-height: 24px; padding: 3px 6px; }
.bp-cal-chip .icon { width: 12px; height: 12px; flex: none; color: var(--color-text); }
.bp-cal-chip .cv-chip-label { font-weight: var(--fw-regular); }
.bp-cal-chip--pack { background: color-mix(in srgb, var(--chip) 18%, var(--color-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 60%, var(--color-bg)); }
.bp-cal-chip.is-done { opacity: .55; }
.bp-cal-key { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-label); }
.bp-cal-key > span { display: inline-flex; align-items: center; gap: 4px; }
.bp-cal-key .icon { width: 12px; height: 12px; }

/* ---- Batch screen: gray left pane | rule | Raw / Packout / History ----------------------------- */
:root { --bp-pane-bg: #f9f9f9; }
/* --bp-stick (set by draw()) = the shell's sticky header height, where the tabs and pane stop. */
:root[data-theme="dark"], .theme-dark { --bp-pane-bg: var(--color-canvas); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bp-pane-bg: var(--color-canvas); } }
/* The page fills the module host edge to edge (no .content padding) so the pane and rule run full height. */
.nml-mod:has(> .bp-batch) { display: flex; flex-direction: column; padding: 0; min-height: 0; }
/* The page is exactly header + one viewport (the harness's 100vh .app under the header would leave it
   85px too tall, so a short tab scrolled the whole page, pane and all); taller tabs scroll beside the sticky pane. */
.app:has(> .nml-mod > .bp-batch) { min-height: 0; }
.bp-batch { flex: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr); padding-bottom: 0; min-height: calc(100vh - var(--bp-stick, 0px)); }
.bp-batch-side { background: var(--bp-pane-bg); border-right: 1px solid var(--color-border); }
/* The pane is one viewport tall and sticky: its sections scroll, the actions stay on its bottom. */
.bp-batch-side-in { display: flex; flex-direction: column; position: sticky; top: var(--bp-stick, 0px); height: calc(100vh - var(--bp-stick, 0px)); }
.bp-batch-side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-6) 0; }
/* Flat sections divided by a rule, no boxed cards. */
.bp-side-sec { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); }   /* rules bleed to the pane edges */
.bp-side-sec:first-child { padding-top: 0; border-top: 0; }
.bp-side-sec-head { display: flex; flex-direction: column; gap: 2px; }
.bp-side-sec-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.bp-side-sec-desc { font-size: var(--fs-sm); color: var(--color-label); }
.bp-batch-side .field-rows { gap: 0; }
.bp-batch-side .field-rows .field { min-height: 30px; }
.bp-batch-side .field-rows .field-label { width: 96px; }
.bp-side-head { display: flex; flex-direction: column; gap: 2px; }
.bp-side-title { display: flex; align-items: center; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); letter-spacing: var(--tracking-tight); }
.bp-side-sku { font-size: var(--fs-sm); color: var(--color-label); }
.bp-side-no { display: inline-flex; align-items: center; gap: var(--space-1); }
.bp-side-link { padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent); cursor: pointer; }
.bp-side-link:hover { text-decoration: underline; }
.bp-side-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--bp-pane-bg); }
.bp-side-actions .btn { flex: 1; justify-content: center; }
.bp-batch-main { min-width: 0; padding: 0 var(--space-8) var(--space-8) var(--space-6); }   /* no top padding: the tabs stick from the first pixel of scroll */
/* Tabs at the top with the actions on their right; the rule bleeds to both edges of the main area. */
.bp-batch-main > .bp-batch-tabs { position: sticky; top: var(--bp-stick, 0px); z-index: 5; background: var(--color-bg); margin: 0 calc(-1 * var(--space-8)) var(--space-4) calc(-1 * var(--space-6)); padding: 0 var(--space-8) 0 var(--space-6); }
.bp-batch-bar { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-1); }
.bp-batch-notice:not(:empty) { padding-top: var(--space-4); }
.bp-batch-main .bp-area { padding-top: var(--space-4); }
/* Packout table: rules bleed to both edges of the main area, first / last cells keep the inset. */
.bp-batch-main .bp-pack-wrap { margin: 0 calc(-1 * var(--space-8)) 0 calc(-1 * var(--space-6)); }
.bp-pack-table > .bp-pack-mo > tr:first-child > td { padding-top: var(--space-2); padding-bottom: var(--space-2); }   /* a little air around the thumbnails */
.bp-nowrap { white-space: nowrap; }
.bp-batch-main .bp-pack-table th:first-child, .bp-batch-main .bp-pack-table td:first-child { padding-left: var(--space-6); }
.bp-batch-main .bp-pack-table th:last-child, .bp-batch-main .bp-pack-table td:last-child { padding-right: var(--space-8); }
@media (max-width: 1100px) {
  .bp-batch { grid-template-columns: 1fr; }
  .bp-batch-side { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .bp-batch-side-in { position: static; height: auto; }
}

/* Raw: materials in (left) | rule | WIP output, rule, trim out (right). No cards: straight lines, edge to edge. */
.bp-raw-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); align-items: stretch; }
.bp-batch-main .bp-raw-split { margin: 0 calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) calc(-1 * var(--space-6)); border-top: 1px solid var(--color-border); }
.bp-raw-col { display: flex; flex-direction: column; min-width: 0; padding: var(--space-5) var(--space-6) var(--space-8); }
.bp-raw-col--0 { border-right: 1px solid var(--color-border); }
.bp-raw-col--1 { padding-right: var(--space-8); }
.bp-raw-col > .peek-sec { margin: 0; padding: 0; border: 0; background: none; }
.bp-raw-col > .peek-sec + .peek-sec { margin: var(--space-6) calc(-1 * var(--space-8)) 0 calc(-1 * var(--space-6)); padding: var(--space-5) var(--space-8) 0 var(--space-6); border-top: 1px solid var(--color-border); }
.bp-raw-col .peek-sec-title { font-size: var(--fs-md); }
.bp-raw-col .bp-line { grid-template-columns: minmax(0, 1fr) 96px 96px; row-gap: var(--space-2); }
.bp-raw-col .bp-line--head > :nth-child(n+4) { display: none; }
.bp-raw-col .bp-line > :nth-child(4) { grid-column: 1; }
.bp-raw-col .bp-line > :nth-child(5) { grid-column: 2 / -1; }
.bp-raw-col .bp-line > .bp-actual--wide, .bp-raw-col .bp-line > .bp-line-error { grid-column: 1 / -1; }
/* The scan field: a clear, roomy place at the top of Materials in. */
.bp-raw-col .bp-scan { flex-wrap: wrap; padding: var(--space-4); margin-bottom: var(--space-4); border: 1.5px dashed var(--color-accent); background: var(--color-accent-soft); }
.bp-raw-col .bp-scan > .icon { width: 22px; height: 22px; color: var(--color-accent); }
.bp-raw-col .bp-scan-input, .bp-raw-col .bp-scan > .input { flex: 1 1 260px; width: auto; max-width: none; height: 44px; font-size: var(--fs-md); }
.bp-raw-col .bp-scan.is-off { border-color: var(--color-border); background: var(--color-surface-cream); }
.bp-raw-col .bp-scan.is-off > .icon { color: var(--color-label); }
.bp-raw-col--1 .form-grid--3 { grid-template-columns: 1fr; }
.bp-raw-col .bp-log-row { flex-wrap: wrap; }
.bp-raw-col .bp-log-row > .btn { margin-left: auto; }
@media (max-width: 1200px) {
  .bp-raw-split { grid-template-columns: 1fr; }
  .bp-raw-col--0 { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .bp-raw-col--1 { padding-right: var(--space-6); }
}
.bp-complete { display: flex; flex-direction: column; gap: var(--space-4); }