/* ==========================================================================
   wh-theme.css — Warehouse V3 design system (Phase 4).

   Loaded LAST in every page's <head>, AFTER the page's inline <style> and
   the shared nav/phase3 sheets. Pages keep their inline styles untouched;
   this sheet wins ties by source order and re-skins the shared class
   vocabulary (.header, .card, .btn*, .steps, forms, .toast, .pill, tables,
   .info-box, .modal, .empty-state, …) with one consistent, token-driven
   look.

   Rules of engagement (see docs/superpowers/specs/2026-06-22-fe-design-system-design.md):
     • Light-only, near-monochrome GRAPHITE design system. Universal tokens
       (--bg/--card/--border/--text/--muted/--primary/--radius/--shadow/
       --success/--warning/--danger …) are defined here; pages reference them
       via var() and pick up the new values.
     • --primary is now graphite and IS defined here, so it overrides every
       per-page accent — the old per-page rainbow is gone.
     • Element-level form re-skins use :where() so page-specific
       specializations (.multi-row input, .wh-pal-input, sidebar fields)
       keep winning on specificity.
     • Everything is @media screen — decision-tree.html's print styles are
       untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@media screen {

/* ── 1. Design tokens ────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #fafafa;
  --card: #ffffff;
  --wh-surface-2: #f5f5f5;           /* nested panels, table heads, code */
  --wh-surface-3: #f0f0f0;           /* hovers on surface-2 */

  /* Lines — hairlines carry the layout, not shadows */
  --border: #ececec;
  --border-strong: #e0e0e0;

  /* Type */
  --text: #171717;
  --muted: #737373;
  --faint: #a3a3a3;

  /* Accent — graphite. Set here (sheet loads LAST) so it overrides every
     per-page --primary, collapsing the old per-page accent rainbow. */
  --primary: #171717;
  --primary-dark: #000000;
  --primary-fg: #ffffff;
  --primary-light: #f5f5f5;

  /* Semantics — desaturated, used for STATUS only (text/dot/badge, no fills) */
  --success: #16794a;
  --warning: #9a6700;
  --danger: #b4453a;
  --info: #44506b;

  /* Shape & depth — flat by default; hairline borders do the work */
  --radius: 7px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --shadow: none;
  --shadow-lg: var(--wh-shadow-2);

  --wh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wh-ring: rgba(23, 23, 23, .14);
  --wh-accent-tint: #f5f5f5;
  --wh-accent-border: var(--border-strong);

  /* Motion tokens */
  --wh-dur-1: .14s;
  --wh-dur-2: .24s;
  --wh-dur-3: .4s;
  --wh-ease-out: cubic-bezier(.22, 1, .36, 1);
  --wh-ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Quiet elevation ramp — only for hover / popovers / modals */
  --wh-shadow-1: 0 2px 8px -2px rgba(0, 0, 0, .08);
  --wh-shadow-2: 0 8px 28px -8px rgba(0, 0, 0, .14);
  --wh-shadow-3: 0 16px 44px -12px rgba(0, 0, 0, .18);
}


/* ── 2. Base ─────────────────────────────────────────────────────────────── */

body {
  font-family: var(--wh-font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Flat background — no decorative accent aura (graphite system stays quiet). */
body:not([data-page="decision-tree"]) {
  background: var(--bg);
}

/* v2: scanned / compared / counted numerals read in fixed-width digits.
   :where() keeps specificity at zero so page sheets always win. */
:where(table, .session-bar, .qty-chip, .wb-qty, .kpi, .countdown) {
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(23, 23, 23, .14); }

/* Shared line icons (WH.icon / WH.injectIconSprite in wh-ui.js) */
.wh-i {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none; vertical-align: -3px;
}

/* Custom scrollbars (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 32%, transparent);
  border-radius: 8px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 52%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Reduced motion: kill decorative animation globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 2b. Motion v2 — shared keyframes, attached to EXISTING state classes ── */

@keyframes wh-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wh-pop {
  from { transform: scale(.98); }
  to   { transform: scale(1); }
}
@keyframes wh-check-pop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes wh-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Panel reveals — fires when the page toggles .visible (one-shot) */
.verify-panel.visible,
.confirm-panel.visible,
.remainder-panel.visible,
.product-card.visible {
  animation: wh-rise var(--wh-dur-2) var(--wh-ease-out);
}
.modal { animation: wh-rise var(--wh-dur-2) var(--wh-ease-out); }
.verify-result.wrong { animation: wh-shake var(--wh-dur-3) var(--wh-ease-out); }

/* ── 3. Page header band ─────────────────────────────────────────────────── */
/* Quiet header: a white band with a hairline bottom and dark text — no gradient.
   decision-tree keeps its flat document header. */

.header {
  min-height: 60px;
  background: var(--card);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  position: relative;
}
body:not([data-page="decision-tree"]) .header {
  color: var(--text);
  background: var(--card);
}
.header h1 { font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.hbadge {
  backdrop-filter: none;
  background: var(--wh-surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ── 4. Tab bar ──────────────────────────────────────────────────────────── */

.tab-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 50;
}
.tab-btn {
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover:not(.active) { color: var(--text); background: var(--wh-surface-2); }
.tab-btn.active { color: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); }

/* ── 5. Cards ────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease;
}
.card-header {
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-header h2 { font-weight: 700; letter-spacing: -.01em; }

.config-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The sidebar owns warehouse selection, so a config-strip whose only content
   is the legacy (hidden) #warehouseId input renders as an empty box — drop it. */
body.has-sidebar .config-strip:has(#warehouseId):not(:has(button, select, textarea, input:not(#warehouseId))) {
  display: none;
}

/* ── 6. Step progress bar ────────────────────────────────────────────────── */

.steps {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.step {
  color: var(--muted);
  border-right: 1px solid var(--border);
  position: relative;
  transition: background .25s ease, color .25s ease;
}
.step.active {
  background: var(--primary);
  color: var(--primary-fg);
}
.step.done {
  background: color-mix(in srgb, var(--success) 12%, var(--card));
  color: color-mix(in srgb, var(--success) 80%, var(--text));
}
.step.done .step-num {
  background: var(--success);
  color: #fff;
  /* one-shot check pop — safe because setStep toggles classes idempotently (B0/C0) */
  animation: wh-check-pop var(--wh-dur-3) var(--wh-ease-spring);
}

/* ── 7. Forms ────────────────────────────────────────────────────────────── */

label { color: var(--muted); }

/* :where() keeps specificity at (0,0,1): page-level specializations
   (.multi-row input, .wh-pal-input, #wh-sidebar fields) still win. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])),
select:where(:not([multiple])),
textarea:where(*) {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]))::placeholder,
textarea:where(*)::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); }

input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])):focus,
select:where(:not([multiple])):focus,
textarea:where(*):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--wh-ring);
  outline: none;
}

input:where([type=checkbox]), input:where([type=radio]) {
  accent-color: var(--primary, #2563eb);
}

/* ── 8. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease,
              border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wh-ring);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  border: 1px solid var(--primary);
  box-shadow: none;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--wh-surface-2);
}
.btn-ghost { color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--wh-surface-2); border-radius: var(--radius); }

.btn-danger  { background: var(--danger); color: #fff; border: 1px solid var(--danger); box-shadow: none; }
.btn-danger:hover:not(:disabled)  { filter: brightness(.94); }
.btn-success { background: var(--success); color: #fff; border: 1px solid var(--success); box-shadow: none; }
.btn-success:hover:not(:disabled) { filter: brightness(.94); }

/* ── 9. Tables ───────────────────────────────────────────────────────────── */

thead th {
  background: var(--wh-surface-2);
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .12s ease; }
tbody tr:hover { background: var(--wh-surface-2); }

/* ── 10. Pills / badges / chips ──────────────────────────────────────────── */

.pill { border-radius: 999px; padding: 2.5px 10px; background: var(--wh-surface-2); color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.pill-active  { color: var(--text); }
.pill-done    { color: var(--success); }
.pill-expired { color: var(--warning); }
.pill-cancel  { color: var(--danger); }

.qty-chip { border-radius: 999px; }

/* ── 11. Info boxes / alerts (re-tokened so dark mode flows through) ─────── */

.info-box { border-radius: var(--radius); background: var(--wh-surface-2); border: 1px solid var(--border); color: var(--text); }
/* Non-semantic accents collapse to neutral in the graphite system. */
.info-box.blue,
.info-box.purple {
  background: var(--wh-surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.info-box.green {
  background: color-mix(in srgb, var(--success) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  color: color-mix(in srgb, var(--success) 70%, var(--text));
}
.info-box.yellow,
.info-box.amber {
  background: color-mix(in srgb, var(--warning) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: color-mix(in srgb, var(--warning) 64%, var(--text));
}
.info-box.red {
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: color-mix(in srgb, var(--danger) 66%, var(--text));
}
.info-banner {
  background: var(--wh-surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* ── 12. Toasts ──────────────────────────────────────────────────────────── */

.toast {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  animation: wh-rise var(--wh-dur-2) var(--wh-ease-out);
}
/* Exit path — wh-ui.js adds .toast-out, then removes the node after the fade */
.toast.toast-out {
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity var(--wh-dur-2) var(--wh-ease-out),
              transform var(--wh-dur-2) var(--wh-ease-out);
  pointer-events: none;
}
.toast-msg { color: var(--muted); }

/* Canonical WH.toast() structure (wh-ui.js) — every page renders this shape */
.toast { display: flex; align-items: flex-start; gap: 9px; }
.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; font-size: .88rem; }
.toast-msg { font-size: .78rem; margin-top: 1px; }
.toast-action {
  flex-shrink: 0;
  align-self: center;
  padding: 4px 12px;
  border: 1.5px solid var(--wh-accent-border);
  border-radius: 7px;
  background: var(--wh-accent-tint);
  color: var(--primary, #2563eb);
  font: 600 .76rem var(--wh-font);
  cursor: pointer;
}
.toast-action:hover { background: color-mix(in srgb, var(--primary, #2563eb) 16%, var(--card)); }
.toast-container {
  position: fixed; top: 76px; right: 20px;
  display: flex; flex-direction: column; gap: 8px; z-index: 99999;
}

/* WH.session() recovery banner */
.wh-resume-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0;
  padding: 11px 16px;
  background: var(--wh-accent-tint);
  border: 1.5px solid var(--wh-accent-border);
  border-radius: 10px;
  font-size: .85rem;
  color: var(--text);
  animation: wh-rise var(--wh-dur-2) var(--wh-ease-out);
}
@keyframes wh-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wh-resume-banner code {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; font-family: var(--wh-mono); font-size: .78rem;
}
.wh-resume-banner .rb-text { flex: 1; min-width: 0; }
.wh-resume-banner .rb-dismiss {
  background: transparent; border: none; color: var(--muted);
  font-size: .9rem; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.wh-resume-banner .rb-dismiss:hover { color: var(--text); background: var(--wh-surface-2); }

/* WH.attachLookup() empty/error row */
.lookup-empty { color: var(--muted); font-style: italic; cursor: default; }

/* ── 13. Modals ──────────────────────────────────────────────────────────── */

.modal-bg { backdrop-filter: blur(3px); }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

/* ── 14. Empty states & spinners ─────────────────────────────────────────── */

.empty-state { color: var(--muted); }

/* ── 15. Lookup dropdowns (master-table / stock-movement pattern) ────────── */

.lookup-item { transition: background .12s ease; }
.lookup-item:hover { background: var(--wh-accent-tint); }

/* ── 15b. Station strip (putaway / order-picking — accent-tinted banner) ─── */

.station-strip {
  background: var(--wh-accent-tint);
  border: 1.5px solid var(--wh-accent-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.station-strip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.station-strip-label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .86rem;
  color: color-mix(in srgb, var(--primary, #2563eb) 78%, var(--text));
}
.station-strip-select { flex: 1; min-width: 240px; padding: 7px 9px; font-size: .85rem; }
.station-strip-hint { flex: 1 1 100%; font-size: .74rem; color: var(--muted); margin-top: 4px; }

/* ── 15c. Phase-3 shared widgets (phase3-shared.css ships light literals) ── */

.p3-controls {
  background: var(--wh-surface-2);
  border: 1px dashed var(--border);
}
.p3-controls label { color: var(--muted); }
.p3-controls select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.p3-controls select:focus { outline: 2px solid var(--wh-ring); outline-offset: 1px; }


/* File inputs are excluded from the form re-skin; keep them surface-toned in dark */

/* Activity feed (concurrency dashboard) — literal white in the page sheet */
.activity-feed { background: var(--card); border-color: var(--border); }

/* Filter chips (stock-movement) — literal #f1f5f9 in the page sheet */
.chip:not(.active) {
  background: var(--wh-surface-2);
  border-color: var(--border);
  color: var(--text);
}
.chip:not(.active):hover { background: var(--wh-surface-3); }

/* ── 15d. v2 shared moment components (consumed by the flow pages) ───────── */
/* Markup contracts documented in .claude/tmp-maps/a-components.md — the page
   tracks (B/C) build these as NEW sibling nodes and only toggle classes. */

/* Generic hide-in-place utility — HIDE, never DETACH */
.wh-collapsed { display: none !important; }

/* One-shot attention ring. To replay: remove class, force reflow, re-add. */
.wh-attn { animation: wh-attn 1.1s var(--wh-ease-out); }
@keyframes wh-attn {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #2563eb) 50%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Stale-but-still-actionable dim (pointer-events untouched on purpose) */
.wh-stale {
  opacity: .55;
  filter: saturate(.6);
  transition: opacity var(--wh-dur-2) ease, filter var(--wh-dur-2) ease;
}

/* WH.flashOk(el) — one-shot success tint (class managed by wh-ui.js) */
.wh-flash-ok { animation: wh-flash-ok .9s var(--wh-ease-out); }
@keyframes wh-flash-ok {
  0%   { background-color: color-mix(in srgb, var(--success) 30%, transparent); }
  100% { background-color: transparent; }
}

/* WH.celebrate({intensity:'subtle', el}) — small one-shot check pop */
.wh-pop-once { animation: wh-check-pop var(--wh-dur-3) var(--wh-ease-spring); }

/* Completion summary card (B6 / C14) */
.wh-summary-card {
  text-align: center;
  padding: 28px 22px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--wh-shadow-2);
  animation: wh-rise var(--wh-dur-3) var(--wh-ease-out);
}
.wh-summary-card .wsc-check { width: 64px; height: 64px; margin: 0 auto 10px; }
.wh-summary-card .wsc-check svg { width: 100%; height: 100%; display: block; }
.wh-summary-card .wsc-circle {
  stroke: color-mix(in srgb, var(--success) 45%, transparent);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: wh-stroke-draw .6s var(--wh-ease-out) forwards;
}
.wh-summary-card .wsc-tick {
  stroke: var(--success);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: wh-stroke-draw .45s var(--wh-ease-out) .35s forwards;
}
@keyframes wh-stroke-draw { to { stroke-dashoffset: 0; } }
.wh-summary-card .wsc-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.wh-summary-card .wsc-sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.wh-summary-card .wsc-stats {
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  margin: 18px 0 20px;
}
.wh-summary-card .wsc-num {
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}
.wh-summary-card .wsc-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 2px;
}
.wh-summary-card .wsc-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Collapsed step-1 summary chip (B1 / C18) */
.wh-collapse-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--wh-accent-tint);
  border: 1.5px solid var(--wh-accent-border);
  border-radius: 10px;
  font-size: .85rem;
  color: var(--text);
  animation: wh-rise var(--wh-dur-2) var(--wh-ease-out);
}
.wh-collapse-chip .wcc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.wh-collapse-chip .wcc-item { white-space: nowrap; }
.wh-collapse-chip .wcc-item b { font-weight: 700; }
.wh-collapse-chip .wcc-item + .wcc-item::before { content: '·'; margin-right: 7px; color: var(--muted); }
.wh-collapse-chip .wcc-change {
  flex: 0 0 auto;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--wh-accent-border);
  border-radius: 7px;
  color: var(--primary, #2563eb);
  font: 600 .78rem var(--wh-font);
  cursor: pointer;
  transition: background var(--wh-dur-1) ease;
}
.wh-collapse-chip .wcc-change:hover { background: color-mix(in srgb, var(--primary, #2563eb) 14%, var(--card)); }

/* Sticky current-target strip (C1 / B7b) */
.wh-sticky-target {
  position: sticky;
  top: 10px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--wh-accent-border);
  border-radius: 10px;
  box-shadow: var(--wh-shadow-2);
  animation: wh-rise var(--wh-dur-2) var(--wh-ease-out);
}
.wh-sticky-target .wst-loc {
  font-family: var(--wh-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--primary, #2563eb);
  white-space: nowrap;
}
.wh-sticky-target .wst-meta {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wh-sticky-target .wst-count {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--primary, #2563eb) 75%, var(--text));
  background: var(--wh-accent-tint);
  border: 1px solid var(--wh-accent-border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Session-bar urgency states (pages toggle these inside renderSessionBar).
   .critical carries the ONE allowed infinite pulse (pulse budget). */
.session-bar.amber {
  background: color-mix(in srgb, var(--warning) 16%, var(--card));
  border-bottom-color: color-mix(in srgb, var(--warning) 50%, transparent);
}
.session-bar.critical {
  background: color-mix(in srgb, var(--danger) 16%, var(--card));
  border-bottom-color: color-mix(in srgb, var(--danger) 55%, transparent);
  animation: wh-critical-pulse 1.2s ease-in-out infinite;
}
@keyframes wh-critical-pulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 28%, transparent),
                    0 0 18px color-mix(in srgb, var(--danger) 35%, transparent); }
}
/* Re-stated under the dark root: §16's dark .session-bar rule out-ranks a
   bare two-class selector, and these color-mixes re-resolve against the dark
   --card anyway. */

/* Fixed recovery-banner variant — re-skins the page-injected
   #whSessionRecoveryBanner (B13 / C8): below the 64px header band,
   sidebar-aware, both themes via the .wh-resume-banner tokens. */
.wh-resume-banner.wh-banner-fixed {
  position: fixed;
  top: 72px;
  left: 16px;
  right: 16px;
  z-index: 990;
  margin: 0;
  background: color-mix(in srgb, var(--wh-accent-tint) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--wh-shadow-3);
}
body.has-sidebar .wh-resume-banner.wh-banner-fixed { left: 236px; }
@media (max-width: 768px) {
  body.has-sidebar .wh-resume-banner.wh-banner-fixed { left: 16px; }
}

/* ── 16. Dark-mode conversions of recurring hardcoded-pastel patterns ────── */
/* These class names repeat across putaway / picking / transfer / rma with
   literal light-only colors in the page sheets. Light mode keeps the page
   originals (these rules only exist under the dark root). */

/* v2: dark surfaces get an inset top hairline highlight (catch-light) */










/* KPI gradient tiles (index / task-board / master-table) read fine on dark;
   the skeleton shimmer does not — re-token it. */

/* Generic literal-white widgets that repeat across pages */

/* Decision-tree is a print-styled DOCUMENT full of pastel literals — dark
   theming it piecemeal reads as broken. Pin its token scope to light so it
   renders like a PDF view regardless of the app theme. */

/* ── 17. Density pass — Shelf Master (heaviest table page) ───────────────── */
/* The page styles its grid via `table.grid th/td` (0,1,2) — match it. */

table.grid th {
  background: var(--wh-surface-2);
  color: var(--muted);
}
table.grid td { padding: 7px 10px; }
table.grid tbody tr:hover td { background: var(--wh-surface-2); }

/* Sticky first column so shelf codes stay visible on horizontal scroll. */
table.grid th:first-child,
table.grid td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--wh-surface-2);
}
table.grid th:first-child { z-index: 4; }
table.grid td:first-child { background: var(--card); box-shadow: 1px 0 0 var(--border); }
table.grid tbody tr:hover td:first-child { background: var(--wh-surface-2); }

} /* end @media screen */
