/* =========================================================================
   FLOOR MODE — phone-first operator surface (/floor, Hotwire Native shell)
   -------------------------------------------------------------------------
   Layout shell, translucent topbar, home (hero / rows / chips / today),
   landing screens, lookup, print, PIN sign-in, announcements, toasts.

   Loaded by `stylesheet_link_tag :app`, which links every file in this
   directory alphabetically — so this file always follows application.css
   and its rules keep the same precedence they had when they lived there.
   Design tokens (--pp-*) are defined in application.css.
   ========================================================================= */

/* ── Shell & viewport ─────────────────────────────────── */
body.pp-body.floor-body,
body.floor-body {
  background: var(--bg, #f6f7f9);
  color: var(--ink, #1f2933);
  min-height: 100dvh;
  min-height: 100vh;
}

.floor-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
}

/* In floor mode, .main fills the remaining height below the topbar
   and doesn't need the desktop border-radius / margin offset. It is a
   column so .content can stretch and pin its action bar to the bottom. */
.floor-body .main {
  border-radius: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.floor-body .main > .content {
  flex: 1;
  min-width: 0;
  /* Phone pages must never scroll sideways; `clip` (unlike hidden) keeps
     overflow-y visible so sticky action bars and pickers still work. */
  overflow-x: clip;
}
.floor-body .content--floor { padding: 0; gap: 0; }

/* ── Sticky chrome (brand bar + optional page header) ─── */
/* Stick as one block so the page header never drifts below the brand
   bar after scroll (hardcoded sticky `top` could not track safe-area /
   content height of the brand bar). */
.floor-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Topbar ───────────────────────────────────────────── */
/* Light, translucent utility bar — reads as a sibling of the iOS glass tab
   bar rather than a website navbar. Holds: brand · where-am-I chips ·
   offline / pending pills · scan shortcut · user menu. */
.floor-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(250, 250, 250, 0.84);
  background: color-mix(in srgb, var(--pp-page-bg, #fafafa) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--pp-border, #ebecef);
  min-height: 56px;
  overflow: visible;
}

/* Light bar → dark-ink logo lockup (the default header is dark). */
.floor-topbar .header-logo-mark--light { display: none; }
.floor-topbar .header-logo-mark--dark  { display: block; }

/* Where-am-I chips: quiet pills that match the page surfaces. */
.floor-topbar .location-chip,
.floor-topbar .station-chip {
  position: relative;
}
.floor-topbar .location-chip-pill,
.floor-topbar .station-chip-pill {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--pp-text, #18181b);
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border-strong, #dcdde1);
  box-shadow: var(--pp-shadow-sm);
}
.floor-topbar .location-chip-pill--unset,
.floor-topbar .station-chip-pill--unset {
  color: var(--pp-warning, #b45309);
  background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14));
  border-color: transparent;
}
/* The shared header collapses chips to icons on phones. The floor bar has
   room for the location name — it is the operator's primary context — so
   show it (station stays icon-only to keep the bar on one line). */
.floor-topbar .location-chip-label { display: inline-block; max-width: 120px; }
.floor-topbar .location-chip-icon,
.floor-topbar .station-chip-icon { width: 16px; height: 16px; }
.floor-topbar .location-chip-panel,
.floor-topbar .station-chip-panel {
  z-index: 300;
  right: auto;
  left: 0;
  border-radius: 14px;
  border-color: var(--pp-border, #ebecef);
  box-shadow: var(--pp-shadow-lg);
}

/* In floor mode the topbar sits directly below the dark nav bar,
   so it doesn't need the top-right radius from the desktop shell. */
.floor-body .topbar {
  border-top-right-radius: 0;
}

@media (display-mode: standalone) {
  .floor-topbar {
    padding-top: max(env(safe-area-inset-top, 0px), 10px);
  }
}

.floor-standalone .floor-topbar {
  padding-top: max(env(safe-area-inset-top, 0px), 10px);
}

/* Inside the native iOS shell (Hotwire Native) the web view owns all chrome
   and the page behaves like an app screen, not a document: no long-press
   link callouts, no accidental text selection on scan-first controls, and
   no rubber-band overscroll glow behind the topbar. Inputs keep
   selection so operators can still edit quantities. */
.hotwire-native {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  /* Floating tab bar (iOS 18+/26 liquid glass) overlays the WKWebView;
     safe-area-inset-bottom alone only covers the home indicator. Same
     clearance already used by .cam-fab / .cmp / .floor-toast. */
  --floor-tab-bar-clearance: 72px;
}
/* Engine screens (guided pick / put-away / replenish) run without the
   native tab bar — FloorWebViewController hides it on the same paths — so
   nothing needs to clear it there. */
.hotwire-native[data-native-tab-bar="hidden"] { --floor-tab-bar-clearance: 0px; }
.hotwire-native .floor-topbar,
.hotwire-native .floor-home,
.hotwire-native .pick-card {
  -webkit-user-select: none;
  user-select: none;
}
.hotwire-native input,
.hotwire-native textarea,
.hotwire-native [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Keep the last page controls (voice bar, route map, action rows) above
   the native tab bar so they stay visible and tappable. */
.hotwire-native.floor-body .floor-shell {
  padding-bottom: calc(var(--floor-tab-bar-clearance) + env(safe-area-inset-bottom, 0px));
}
/* Sticky CTAs already live in the content viewport (above the tab bar).
   Padding the bar with tab-bar clearance stacked a dead frosted zone under
   the button; only keep a tight pad + home-indicator inset. */
.hotwire-native.floor-body .floor-action-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.hotwire-native .picking-engine-error {
  bottom: calc(12px + var(--floor-tab-bar-clearance));
}
@media (max-width: 600px) {
  .hotwire-native.floor-body .adjust-form__actions {
    padding: 12px 16px calc(12px + var(--floor-tab-bar-clearance) + env(safe-area-inset-bottom, 0px));
  }
}

/* Legacy: kept for batch engine views that may still reference this class */
.floor-topbar--engine {
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--line, #e5e7eb);
}

/* Floor topbar reuses .header-brand + .header-logo-mark from shared/header_brand. */
.floor-topbar .header-brand { flex-shrink: 0; }
.floor-topbar .header-logo-mark { height: 22px; }

.floor-topbar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  /* No overflow: hidden here — the chip dropdown panels are position:absolute
     and need to be visible below the topbar. Use overflow: visible (default). */
}

.floor-topbar__network {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--pp-warning, #b45309);
  color: #fff;
  white-space: nowrap;
}

/* Offline outbox pill — actions queued by floor-outbox, tap to retry. */
.floor-topbar__pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: var(--pp-surface-3, #ececef);
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  cursor: pointer;
}

.floor-topbar__pending-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-warning, #b45309);
}

.floor-outbox--syncing .floor-topbar__pending-dot {
  animation: floor-outbox-pulse 1s ease-in-out infinite;
}

@keyframes floor-outbox-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── Scan barcode shortcut (floor topbar) ───────────────── */
.floor-topbar__lookup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--pp-text-muted, #71717a);
  transition: color 0.15s var(--pp-ease, ease), background 0.15s var(--pp-ease, ease);
  margin-left: auto;
  flex-shrink: 0;
}
.floor-topbar__lookup-btn svg { width: 20px; height: 20px; }
.floor-topbar__lookup-btn:hover,
.floor-topbar__lookup-btn:active {
  color: var(--pp-text, #18181b);
  background: var(--pp-surface-2, #f4f4f5);
}

/* ── User dropdown ────────────────────────────────────── */
.floor-topbar__user { position: relative; margin-left: 4px; }
.floor-topbar__user-trigger {
  list-style: none;
  cursor: pointer;
}
.floor-topbar__user-trigger::-webkit-details-marker { display: none; }

.floor-topbar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pp-accent, #0e45a5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  box-shadow: var(--pp-shadow-sm);
}

.floor-topbar__user-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 14px;
  min-width: 220px;
  box-shadow: var(--pp-shadow-lg);
  z-index: 200;
  padding: 6px;
}

.floor-topbar__user-name {
  padding: 8px 12px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text-muted, #71717a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floor-topbar__user-divider {
  border: none;
  border-top: 1px solid var(--pp-border, #ebecef);
  margin: 4px 0;
}

.floor-topbar__user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.floor-topbar__user-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--pp-text-muted, #71717a); }
.floor-topbar__user-item:hover,
.floor-topbar__user-item:active { background: var(--pp-surface-2, #f4f4f5); }
.floor-topbar__user-item--danger,
.floor-topbar__user-item--danger svg { color: var(--pp-danger, #b91c1c); }

/* ── Home screen ──────────────────────────────────────── */
/* Large title → (announcements) → one hero ("in progress" / "up next") →
   Work rows sorted by what's waiting → Tools chips → Today stats → map.
   Everything is token-driven; the only colours are the accent, the danger
   red for hot counts, and the warning amber for notices. */
.floor-home {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 16px 28px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.floor-home__hdr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px 0;
}
.floor-home__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text-muted, #71717a);
}
.floor-home__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--pp-text, #18181b);
}

/* Section = uppercase label + content. */
.floor-section { display: flex; flex-direction: column; gap: 10px; }
.floor-section__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #71717a);
}
.floor-section__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-accent, #0e45a5);
  text-decoration: none;
}

/* ── Hero card ───────────────────────────────────────── */
.floor-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  box-shadow: var(--pp-shadow-md);
  color: var(--pp-text, #18181b);
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--pp-ease, ease), box-shadow 0.14s var(--pp-ease, ease);
}
a.floor-hero:active { transform: scale(0.985); box-shadow: var(--pp-shadow-sm); }
.floor-hero__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-accent, #0e45a5);
}
.floor-hero__row { display: flex; align-items: center; gap: 14px; }
.floor-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.floor-hero__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-hero__meta { margin: 0; font-size: 15px; line-height: 1.35; color: var(--pp-text-muted, #71717a); }
.floor-hero__meta strong { color: var(--pp-text, #18181b); font-weight: 700; }
.floor-hero__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--pp-accent-soft, #e8eefb);
  color: var(--pp-accent, #0e45a5);
}
.floor-hero__icon svg { width: 26px; height: 26px; }
.floor-hero__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: var(--pp-accent, #0e45a5);
  color: #fff;
}

/* In progress: filled accent gradient, white text. */
.floor-hero--active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--pp-accent, #0e45a5) 0%, var(--pp-accent-hover, #0a3580) 100%);
}
.floor-hero--active::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -70%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.floor-hero--active .floor-hero__eyebrow { color: rgba(255, 255, 255, 0.72); }
.floor-hero--active .floor-hero__meta { color: rgba(255, 255, 255, 0.82); }
.floor-hero--active .floor-hero__meta strong { color: #fff; }
.floor-hero--active .floor-hero__cta { background: #fff; color: var(--pp-accent, #0e45a5); }
.floor-hero--active .floor-progress { background: rgba(255, 255, 255, 0.24); }
.floor-hero--active .floor-progress__fill { background: #fff; }

/* Nothing waiting: quiet, no CTA. */
.floor-hero--clear { box-shadow: none; background: var(--pp-surface-2, #f4f4f5); border-color: transparent; }
.floor-hero--clear .floor-hero__icon { background: var(--pp-success-soft, rgba(22, 163, 74, 0.12)); color: var(--pp-success, #15803d); }
.floor-hero--clear .floor-hero__title { white-space: normal; }

/* ── Rows (work queues, extra in-progress work) ──────── */
.floor-rows { display: flex; flex-direction: column; gap: 8px; }
.floor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px 12px 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 18px;
  box-shadow: var(--pp-shadow-sm);
  color: var(--pp-text, #18181b);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.14s var(--pp-ease, ease), background 0.14s var(--pp-ease, ease);
}
.floor-row:active { transform: scale(0.985); background: var(--pp-surface-2, #f4f4f5); }
.floor-row:focus-visible { outline: 2px solid var(--pp-accent, #0e45a5); outline-offset: 2px; }
.floor-row__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--pp-accent-soft, #e8eefb);
  color: var(--pp-accent, #0e45a5);
}
.floor-row__icon svg { width: 24px; height: 24px; }
.floor-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.floor-row__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-row__meta { font-size: 14px; color: var(--pp-text-muted, #71717a); }
.floor-row__count {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.floor-row__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pp-text-subtle, #a1a1aa); }
.floor-row__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  background: var(--pp-accent-soft, #e8eefb);
  color: var(--pp-accent, #0e45a5);
}

/* Idle queues step back; hot ones (assigned counts) step forward. */
.floor-row--idle .floor-row__icon { background: var(--pp-surface-2, #f4f4f5); color: var(--pp-text-muted, #71717a); }
.floor-row--idle .floor-row__title { color: var(--pp-text, #18181b); }
.floor-row--hot .floor-row__icon  { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: var(--pp-danger, #b91c1c); }
.floor-row--hot .floor-row__count { color: var(--pp-danger, #b91c1c); }

/* ── Tools chips ─────────────────────────────────────── */
.floor-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  box-shadow: var(--pp-shadow-sm);
  color: var(--pp-text, #18181b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--pp-ease, ease), background 0.14s var(--pp-ease, ease);
}
.floor-chip svg { width: 20px; height: 20px; color: var(--pp-accent, #0e45a5); }
.floor-chip:active { transform: scale(0.97); background: var(--pp-surface-2, #f4f4f5); }

/* ── Today stats (reuses .floor-work__stat from the landing screens) ── */
.floor-today .floor-work__stat { border-radius: 16px; box-shadow: var(--pp-shadow-sm); padding: 14px; }
.floor-today .floor-work__stat-value { font-size: 26px; letter-spacing: -0.02em; }
.floor-today .floor-work__stat-label { font-size: 12px; }

/* ── Tiles (kept for the Print screen's label-type buttons) ─────────── */
.floor-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
  padding: 16px 10px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 18px;
  box-shadow: var(--pp-shadow-sm);
  text-decoration: none;
  color: var(--pp-text, #18181b);
  cursor: pointer;
  transition: background 0.14s var(--pp-ease, ease), transform 0.14s var(--pp-ease, ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.floor-tile:hover { background: var(--pp-surface-2, #f4f4f5); }
.floor-tile:focus-visible { outline: 2px solid var(--pp-accent, #0e45a5); outline-offset: 2px; }
.floor-tile:active { transform: scale(0.97); }
.floor-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--pp-accent-soft, #e8eefb);
  color: var(--pp-accent, #0e45a5);
}
.floor-tile__icon svg { width: 24px; height: 24px; }
.floor-tile__label {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* Thin progress track shared by the hero and the landing screens. */
.floor-progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--pp-accent-soft, #e8eefb);
  overflow: hidden;
}
.floor-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--pp-accent, #0e45a5);
  transition: width 0.3s var(--pp-ease, ease);
}

/* ── Compact floor page header ────────────────────────── */
/* Replaces the desktop .topbar on phone-first floor pages:
   back chevron · title + live count · one optional action.
   Sticks with the brand bar via `.floor-chrome` (not independently). */
.floor-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px 6px 6px;
  background: rgba(250, 250, 250, 0.84);
  background: color-mix(in srgb, var(--pp-page-bg, #fafafa) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--pp-border, #ebecef);
}
.floor-hdr__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--pp-accent, #2563eb);
  flex: 0 0 auto;
}
.floor-hdr__back svg { width: 22px; height: 22px; }
.floor-hdr__back:active { background: var(--pp-accent-soft, #eff6ff); }
.floor-hdr__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.floor-hdr__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-hdr__meta { font-size: 12px; color: var(--pp-text-muted, #6b7280); }
.floor-hdr__action { flex: 0 0 auto; }
.floor-hdr__action .btn { min-height: 36px; }

/* Desktop pages that leak into floor mode (dashboards, settings) get the
   same compact treatment without touching their markup. */
.floor-body .topbar { padding: 10px 16px; gap: 8px; }
.floor-body .topbar .toolbar-row { gap: 8px; }
.floor-body .topbar .topbar-title { display: block; min-width: 0; }
.floor-body .topbar .topbar-title h1 {
  display: block;
  max-width: 100%;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-body .topbar .eyebrow { font-size: 11px; }
@media (max-width: 600px) {
  .floor-body .topbar .topbar-actions .btn { padding: 8px 12px; font-size: 13px; }
  .floor-body .content:not(.content--floor) { padding: 16px; gap: 16px; min-width: 0; }
  .floor-body .adjust-form {
    margin: 0;
    max-width: 100%;
    min-width: 0;
  }
  .floor-body .adjust-form__panel {
    padding: 16px;
    min-width: 0;
  }
}

/* ── Workflow landing screens ─────────────────────────── */
.floor-work {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 24px;
}

.floor-work__hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}
.floor-work__hero--active {
  background: var(--pp-accent-soft, #e8eefb);
  border-color: transparent;
}
.floor-work__hero--empty { align-items: center; text-align: center; padding: 28px 20px; }
.floor-work__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #6b7280);
}
.floor-work__hero--active .floor-work__eyebrow { color: var(--pp-accent, #2563eb); }
.floor-work__headline {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.floor-work__headline strong { color: var(--pp-accent, #2563eb); }
.floor-work__copy { margin: 0; font-size: 14px; color: var(--pp-text-muted, #6b7280); line-height: 1.4; }
.floor-work__hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pp-surface-2, #f1f5f9);
  color: var(--pp-text-muted, #6b7280);
}
.floor-work__hero-icon svg { width: 26px; height: 26px; }

/* Quick numbers row: today's work for this operator. */
.floor-work__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.floor-work__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
}
.floor-work__stat-value { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.floor-work__stat-label { font-size: 11px; color: var(--pp-text-muted, #6b7280); font-weight: 500; }

/* Sectioned lists (recent batches, expected shipments…). */
.floor-work__section { display: flex; flex-direction: column; gap: 8px; }
.floor-work__section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.floor-work__section-title a { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; }
.floor-work__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.floor-work__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.floor-work__item:active { background: var(--pp-surface-2, #f1f5f9); }
.floor-work__item-thumbs {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.floor-work__thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--pp-surface, #fff);
  background: var(--pp-surface-2, #f1f5f9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  position: relative;
  flex-shrink: 0;
}
.floor-work__thumb:first-child { margin-left: 0; }
.floor-work__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floor-work__thumb--fallback,
.floor-work__thumb--overflow {
  font-size: 10px;
  font-weight: 700;
  color: var(--pp-text-muted, #6b7280);
}
.floor-work__thumb--overflow { background: var(--pp-border, #e5e7eb); }
.floor-work__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.floor-work__item-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-work__item-meta { font-size: 12px; color: var(--pp-text-muted, #6b7280); }
.floor-work__item-aside { flex: 0 0 auto; font-size: 12px; color: var(--pp-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.floor-work__item-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pp-text-subtle, #9ca3af); }
.floor-work__empty-line { margin: 0; padding: 14px; font-size: 13px; color: var(--pp-text-muted, #6b7280); text-align: center; }

/* The put-away scan card brings its own page gutters; inside a landing
   screen the .floor-work column already provides them. */
.floor-work .putaway-scan-entry { margin: 0; padding: 0; max-width: none; }

/* ── Bottom-anchored primary action ───────────────────── */
/* One thumb-reach bar per workflow screen, pinned above the home indicator. */
.floor-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--pp-border, #e5e7eb);
}
.floor-action-bar > form { flex: 1; display: flex; }
.floor-action-bar .btn {
  flex: 1;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}
.floor-action-bar .btn-light { flex: 0 0 auto; padding: 0 18px; }
.floor-action-bar__inner { display: flex; gap: 10px; width: 100%; max-width: 600px; margin: 0 auto; }
.floor-action-bar__inner > form { flex: 1; display: flex; }

/* Quick Start reuses the pick-list creating overlay, pinned over the
   whole screen instead of inside a modal. */
.floor-count-start__overlay.picking-creating-overlay {
  position: fixed;
  z-index: 80;
  border-radius: 0;
}

/* Existing engines already stick their confirm row; give it the same
   safe-area clearance so the button isn't under the home indicator.
   Count actions stay in document flow, under the keypad — a sticky row
   was covering the number keys and the camera button. */
.floor-body .pick-card__actions,
.floor-body .adjust-form__actions {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.floor-body .count-engine__actions {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px calc(12px + var(--floor-tab-bar-clearance, 0px) + env(safe-area-inset-bottom, 0px));
}
.floor-body .count-engine__actions .count-engine__confirm-btn,
.floor-body .count-engine__actions .count-engine__skip-btn,
.floor-body .count-engine__actions .pick-card__camera-btn {
  flex: none;
  width: 100%;
}
@media (max-width: 600px) {
  .floor-body .adjust-form__actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--pp-border, #e5e7eb);
    margin: 0;
    /* Keep horizontal gutters — padding: 12px 0 was clipping Cancel
       against the screen edge on phones. */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  .floor-body .adjust-form__actions-submit {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    font-size: 16px;
  }
  .floor-body .adjust-form__actions-cancel {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* Cycle-count route map is opened from the header menu, not a strip
   under the keypad. The dialog itself is a top-layer modal. */
.count-route-map.pick-route-map-panel {
  background: transparent;
  border: 0;
  margin: 0;
  height: 0;
  overflow: visible;
}
.count-route-map > .pick-route-map-panel__header { display: none; }

/* ── Me screen ────────────────────────────────────────── */
.floor-me__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}
.floor-me__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  flex: 0 0 auto;
}
.floor-me__name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.floor-me__role { font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.floor-me__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-me__chips .location-chip-panel,
.floor-me__chips .station-chip-panel { left: 0; right: auto; }
/* The topbar collapses chips to icons on phones; here there is room for
   the name, which is the whole point of the section. */
.floor-me__chips .location-chip-label,
.floor-me__chips .location-chip-caret,
.floor-me__chips .station-chip-label,
.floor-me__chips .station-chip-caret { display: inline-block; }
.floor-me__chips .location-chip-pill,
.floor-me__chips .station-chip-pill { min-height: 44px; padding: 0 14px; font-size: 14px; }
.floor-me__item--danger { color: var(--pp-danger, #dc2626); }
.floor-me__item--danger .floor-work__item-title { color: inherit; }

/* ── Shift timeline (Me → Today) ───────────────────────────────────────── */
.floor-work__stat--hot .floor-work__stat-value { color: var(--pp-danger, #b91c1c); }
.floor-shift__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
}
.floor-shift__event {
  position: relative;
  display: grid;
  grid-template-columns: 52px 16px 1fr;
  align-items: start;
  gap: 0 8px;
  padding: 8px 0;
}
/* Rail through the dots. */
.floor-shift__event::before {
  content: "";
  position: absolute;
  left: calc(52px + 8px + 7px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pp-border, #e5e7eb);
}
.floor-shift__event:first-child::before { top: 18px; }
.floor-shift__event:last-child::before  { bottom: calc(100% - 18px); }
.floor-shift__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  text-align: right;
}
.floor-shift__time small { font-size: 10px; margin-left: 1px; }
.floor-shift__dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 1px var(--pp-border, #e5e7eb);
}
.floor-shift__event--putaway   .floor-shift__dot { background: #7c3aed; }
.floor-shift__event--replenish .floor-shift__dot { background: #0d9488; }
.floor-shift__event--count     .floor-shift__dot { background: #d97706; }
.floor-shift__event--receive   .floor-shift__dot { background: #16a34a; }
.floor-shift__event--exception .floor-shift__dot { background: var(--pp-danger, #b91c1c); }
.floor-shift__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
a.floor-shift__body:active { background: var(--pp-page-bg, #f6f7f9); }
.floor-shift__event--exception .floor-shift__body { border-color: rgba(185, 28, 28, 0.25); }
.floor-shift__title { font-size: 14px; font-weight: 600; }
.floor-shift__meta  { font-size: 12px; color: var(--pp-text-muted, #6b7280); }
.floor-shift__open-list { margin: 8px 0 12px; padding-left: 20px; font-size: 14px; }
.floor-shift__open-list li { margin: 2px 0; }

/* "This device" toggles — same rows as the pick screen's Display & sound
   dialog, framed like the other Me sections. */
.floor-me__prefs {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
}
.floor-me__prefs .pick-display__row { padding: 14px 0; }
.floor-me__prefs .pick-display__text { font-size: 14px; }
.floor-me__prefs .pick-display__text .muted { font-size: 12px; }

/* Voice output (app only): three options don't fit beside the label on a
   phone, so this row stacks and the segmented control spans the width. */
.floor-me__pref--stacked { flex-direction: column; align-items: stretch; gap: 10px; cursor: default; }
.floor-voice-output__segmented { width: 100%; display: flex; }
.floor-voice-output__segmented .segmented__option {
  flex: 1;
  justify-content: center;
  min-height: 40px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}

/* Quick sign-in PIN card on Me */
.floor-pin__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floor-pin__status { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.floor-pin__status .muted { font-size: 12px; line-height: 1.4; }
.floor-pin__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.floor-pin__actions form { display: inline; }
.floor-pin__remove { color: var(--pp-danger, #b91c1c); }
.floor-pin__input { font-size: 20px; letter-spacing: 4px; text-align: center; }

/* ── Camera scanning (iOS app) ─────────────────────────────────────────
   camera_scan_controller.js. The sheet itself is native; these are the
   web-side affordances. */
.pick-card__camera-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
}
.pick-card__camera-btn.is-active { opacity: 0.6; }
/* When the camera button is the primary affordance, the passive "waiting
   for a scan" line beneath it is noise. */
.pick-card__actions:has(.pick-card__camera-btn.btn-primary) .pick-card__scan-wait-hint { display: none; }

.cam-fab {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}
.cam-fab svg { width: 20px; height: 20px; }
.cam-fab--active { background: var(--pp-text, #0f172a); }
body:not(.hotwire-native) .cam-fab { display: none; }

/* Sit above the native tab bar; when a sticky Confirm/actions stack is
   present, clear that too so Camera no longer covers Confirm. */
.hotwire-native .cam-fab {
  bottom: calc(var(--floor-tab-bar-clearance) + 16px + env(safe-area-inset-bottom, 0px));
}
.hotwire-native:has(.pick-card__actions) .cam-fab {
  bottom: calc(var(--floor-tab-bar-clearance) + 148px + env(safe-area-inset-bottom, 0px));
}

/* Sticky put-away / pick confirm rows also need tab-bar clearance. */
.hotwire-native.floor-body .pick-card__actions {
  padding-bottom: calc(14px + var(--floor-tab-bar-clearance) + env(safe-area-inset-bottom, 0px));
}

/* Two-button nudge ("Using a handheld scanner?"), anchored above the tab bar. */
.floor-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--pp-text, #0f172a);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.floor-toast--in { transform: none; opacity: 1; }
.floor-toast__text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.floor-toast__actions { display: flex; gap: 8px; justify-content: flex-end; }
.floor-toast__actions .btn { min-height: 40px; }
.floor-toast__actions .btn-light { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
@media (min-width: 600px) {
  .floor-toast { left: auto; right: 16px; max-width: 420px; }
}

/* ── Floor quick sign-in (PIN) ────────────────────────── */
.auth-form .form-actions { flex-direction: column; gap: 10px; }
.auth-form .form-actions .btn-full { width: 100%; }
.pinin-empty { text-align: center; }
.pinin-empty p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #6b7280; }

.pinin__users {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pinin__user {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  text-align: left;
  cursor: pointer;
}
.pinin__user:active { background: #f3f4f6; }
.pinin__user-name { flex: 1; }
.pinin__chevron { color: #9ca3af; font-size: 22px; line-height: 1; }
.pinin__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}
.pinin__avatar--lg { width: 60px; height: 60px; font-size: 22px; margin: 0 auto 10px; }

.pinin__back {
  border: 0;
  background: none;
  padding: 0 0 12px;
  font: inherit;
  font-size: 14px;
  color: #6366f1;
  cursor: pointer;
}
.pinin__who { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pinin__who .auth-subtitle { margin-bottom: 14px; }
.pinin__name { margin-bottom: 2px; }

.pinin__dots { display: flex; justify-content: center; gap: 14px; min-height: 18px; margin: 4px 0 8px; }
.pinin__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c7cbd4;
  transition: background 0.1s, border-color 0.1s;
}
.pinin__dot.is-filled { background: var(--pp-accent, #2563eb); border-color: var(--pp-accent, #2563eb); }
.pinin__dots.is-shaking { animation: pinin-shake 0.4s ease-in-out; }
@keyframes pinin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.pinin__error { min-height: 20px; margin: 0 0 8px; text-align: center; font-size: 13px; font-weight: 600; color: #b91c1c; }

.pinin__keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 300px;
  margin: 8px auto 0;
}
.pinin__keys.is-busy { opacity: 0.5; pointer-events: none; }
.pinin__key {
  height: 60px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  font: inherit;
  font-size: 26px;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pinin__key:active { background: #e5e7eb; transform: scale(0.97); }
.pinin__key--blank { visibility: hidden; }
.pinin__key--icon { font-size: 22px; background: transparent; border-color: transparent; }

/* Keep the whole keypad on one phone screen. */
@media (max-width: 480px) {
  .auth-card:has(.pinin) { padding: 24px 20px; }
  .auth-shell:has(.pinin) { padding: 16px; }
  .pinin .auth-links { margin-top: 14px; }
  .pinin__avatar--lg { width: 52px; height: 52px; font-size: 20px; margin-bottom: 6px; }
}

/* Inside the native app the Me tab replaces the avatar menu and the Scan tab
   replaces the topbar shortcut — drop both so the header isn't doubled. */
.hotwire-native .floor-topbar__user,
.hotwire-native .floor-topbar__lookup-btn { display: none; }

/* ── Floor FBA queue ──────────────────────────────────── */
.floor-fba__header { margin-bottom: 12px; }

.floor-fba__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.floor-fba__subtitle {
  margin: 2px 0 0;
  font-size: 13px;
}

.floor-fba__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floor-fba__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Full-width tap target sized for gloved hands. */
  min-height: 64px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.floor-fba__row:active { background: #f9fafb; }

.floor-fba__row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.floor-fba__action {
  font-size: 16px;
  font-weight: 600;
}

.floor-fba__meta {
  font-size: 12px;
  color: var(--pp-text-muted, #6b7280);
}

.floor-fba__badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 600;
}

.floor-fba__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--pp-text-muted, #9ca3af);
}

.floor-fba__empty {
  padding: 28px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 10px;
}

.floor-fba__empty-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.floor-fba__empty-sub {
  margin: 4px 0 0;
  font-size: 12px;
}

.floor-fba__blocked {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
}

/* ── Floor order lists (/floor/pick/orders, /floor/ship/orders) ─────── */
/* A stat tile that opens a list: same box, tappable. */
a.floor-work__stat { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.floor-work__stat:active { background: var(--pp-surface-2, #f1f5f9); }
.floor-work__stat--link .floor-work__stat-label::after { content: " ›"; color: var(--pp-text-subtle, #9ca3af); }

.floor-orders__note {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-warning-text, #b45309);
  background: var(--pp-warning-soft, #fffbeb);
  border: 1px solid var(--pp-warning-border, #fcd34d);
  border-radius: 12px;
}

/* Search → status chips → selects. Chips scroll sideways as one rail so
   five states fit a phone without wrapping into a wall of pills. */
.floor-filter { display: flex; flex-direction: column; gap: 10px; }
.floor-filter__search { position: relative; display: flex; align-items: center; }
.floor-filter__search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--pp-text-muted, #6b7280);
  pointer-events: none;
}
.floor-filter__input.input {
  width: 100%;
  min-height: 48px;
  padding-left: 42px;
  padding-right: 44px;
  font-size: 16px;
  border-radius: 12px;
}
.floor-filter__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.floor-filter__clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--pp-text-muted, #6b7280);
}
.floor-filter__clear svg { width: 16px; height: 16px; }
.floor-filter__clear:active { background: var(--pp-surface-2, #f1f5f9); }

.floor-filter__chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.floor-filter__chips::-webkit-scrollbar { display: none; }
.floor-filter__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  color: var(--pp-text, #18181b);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.floor-filter__chip:active { background: var(--pp-surface-2, #f1f5f9); }
.floor-filter__chip--active {
  background: var(--pp-accent, #0e45a5);
  border-color: var(--pp-accent, #0e45a5);
  color: #fff;
}
.floor-filter__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  color: var(--pp-text-muted, #6b7280);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.floor-filter__chip--active .floor-filter__chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.floor-filter__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.floor-filter__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.floor-filter__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #6b7280);
}
.floor-filter__select.input { min-height: 44px; font-size: 15px; border-radius: 10px; }
.floor-filter__summary { margin: 0; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.floor-filter__summary .link { font-weight: 600; }

/* ── Floor pick exceptions (/floor/exceptions) ────────── */
/* Index reuses the landing-screen vocabulary (.floor-work__hero, __stats,
   __list). The show page stacks two cards: what happened, then the same
   resolve form the desktop queue uses. */
.floor-exc__hero { border-color: var(--pp-warning-border, #fcd34d); background: var(--pp-warning-soft, #fffbeb); }
.floor-exc__hero .floor-work__eyebrow { color: var(--pp-warning-text, #b45309); }

.floor-exc__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}
.floor-exc__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.floor-exc__item-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.floor-exc__heading { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.floor-exc__qty .floor-work__stat { background: var(--pp-surface-2, #f8fafc); }
.floor-exc__stat-code { font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* Receive exceptions: photos strip + one-tap resolution tiles */
.floor-exc__photos { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.floor-exc__photo { flex: none; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--pp-border, #e5e7eb); }
.floor-exc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floor-rexc__form { display: flex; flex-direction: column; gap: 12px; }
.floor-rexc__options { display: flex; flex-direction: column; gap: 8px; }
.floor-rexc__option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 12px 14px; text-align: left;
  background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); border-radius: 12px;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.floor-rexc__option:active { background: var(--pp-surface-2, #f1f5f9); }
.floor-rexc__option--danger { border-color: var(--pp-danger, #ef4444); }
.floor-rexc__option--danger .floor-rexc__option-title { color: var(--pp-danger, #ef4444); }
.floor-rexc__option-title { font-size: 16px; font-weight: 700; }
.floor-rexc__option-copy { font-size: 13px; color: var(--pp-text-muted, #6b7280); line-height: 1.35; }

.floor-exc__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.floor-exc__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--pp-border, #e5e7eb);
}
.floor-exc__facts dt { flex: 0 0 auto; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.floor-exc__facts dd { margin: 0; flex: 1; min-width: 0; text-align: right; font-size: 14px; font-weight: 500; }
.floor-exc__facts dd .status-badge { margin-left: 6px; vertical-align: middle; }
.floor-exc__facts dd p { margin: 0; }
.floor-exc__order-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Facts with a sentence under the value stack instead of sitting on one line. */
.floor-exc__facts > .floor-exc__fact--stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.floor-exc__facts > .floor-exc__fact--stacked dd { text-align: left; }
.floor-exc__facts > .floor-exc__fact--stacked dd .status-badge { margin-left: 0; }
.floor-exc__fact-copy { margin: 6px 0 0 !important; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--pp-text-muted, #6b7280); }

.floor-exc__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.floor-exc__actions .btn { width: 100%; min-height: 48px; }
.floor-exc__actions form { display: contents; }
/* Count exception decide form / investigation on a phone. */
.floor-cx .cx-resolve { max-width: none; }
.floor-cx .cx-resolve .input, .floor-cx .cx-resolve select.input { min-height: 48px; font-size: 16px; }
.floor-cx .cx-investigate__grid { grid-template-columns: 1fr; }
.floor-cx .cx-investigate__block { padding: 10px 12px; }

.floor-exc__resolved { margin: 0; font-size: 14px; line-height: 1.4; }
.floor-exc__resolved-meta { margin: 0; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.floor-exc__resolved-meta p { margin: 0; }

/* The shared resolve form was laid out for a desktop sidebar; on the floor
   give its controls thumb-sized targets and a full-width submit. */
.floor-exc .resolve-exception-form .input,
.floor-exc .resolve-exception-form select.input { min-height: 48px; font-size: 16px; }
.floor-exc .resolve-exception-form textarea.input { min-height: 72px; }
.floor-exc .resolve-exception-form .radio-label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.floor-exc .resolve-actions { display: flex; }
.floor-exc .resolve-actions .btn { flex: 1; min-height: 56px; font-size: 16px; }

/* ── Announcements ────────────────────────────────────── */
.floor-announcements { gap: 8px; }
.floor-announcements__extra { display: flex; flex-direction: column; gap: 8px; }
.floor-announcements__manage {
  align-self: flex-end;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-accent, #0e45a5);
  text-decoration: none;
}

.floor-announcement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14));
  color: var(--pp-text, #18181b);
}
.floor-announcement__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--pp-surface, #fff);
  color: var(--pp-warning, #b45309);
}
.floor-announcement__icon svg { width: 20px; height: 20px; }
.floor-announcement__body { flex: 1; min-width: 0; padding-top: 2px; }
.floor-announcement__message { font-size: 15px; font-weight: 500; line-height: 1.35; margin: 0 0 2px; }
.floor-announcement__meta { font-size: 13px; color: var(--pp-warning, #b45309); }
.floor-announcement__dismiss {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--pp-warning, #b45309);
  flex-shrink: 0;
}
.floor-announcement__dismiss svg { width: 18px; height: 18px; }
.floor-announcement__dismiss:active { background: var(--pp-surface, #fff); }
.floor-announcement__more-btn {
  appearance: none;
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  box-shadow: var(--pp-shadow-sm);
  color: var(--pp-text, #18181b);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.floor-announcement__more-btn:active { background: var(--pp-surface-2, #f4f4f5); }

/* ── Announcements form spacing ──────────────────────── */
.ann-form > .panel + .panel { margin-top: 20px; }
.ann-form > .form-actions    { margin-top: 24px; }

/* ── Live map embed ───────────────────────────────────── */
.floor-home__map {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 18px;
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
}
.floor-home__map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}
.floor-home__map-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.floor-home__map-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-success, #15803d);
  animation: floor-live-pulse 2s var(--pp-ease, ease) infinite;
}
@keyframes floor-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pp-success-soft, rgba(22, 163, 74, 0.12)); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-home__map-live { animation: none; }
}
.floor-home__map-link { font-size: 14px; font-weight: 600; color: var(--pp-accent, #0e45a5); text-decoration: none; }
.floor-home__map-canvas { height: 200px; overflow: hidden; border-top: 1px solid var(--pp-border, #ebecef); pointer-events: none; }

/* ── Station prompt ───────────────────────────────────── */
/* Pin to the top of the content area — vertical centering in a
   min-height:100dvh box sat the card mid-screen under the floor
   topbar and looked like the page started scrolled down. */
.floor-station-prompt {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 16px 24px;
}
.floor-station-prompt__card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 28px 20px 20px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.hotwire-native .floor-station-prompt {
  /* Clear the floating tab bar so "Skip for now" stays tappable. */
  padding-bottom: calc(24px + var(--floor-tab-bar-clearance, 72px) + env(safe-area-inset-bottom, 0px));
}
.floor-station-prompt__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-weak, #e0e7ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.floor-station-prompt__icon svg { width: 24px; height: 24px; color: var(--accent, #2563eb); }
.floor-station-prompt__title { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 6px; }
.floor-station-prompt__sub { font-size: 13px; color: var(--muted, #6b7280); text-align: center; margin: 0 0 20px; }
.floor-station-prompt__list { display: flex; flex-direction: column; gap: 16px; }
.floor-station-prompt__group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
  margin-bottom: 6px;
}
/* One continuous rounded surface per kind — rows share edges instead of
   stacking separate pills with clefts between them. */
.floor-station-prompt__group-list {
  display: flex;
  flex-direction: column;
  background: var(--soft, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}
.floor-station-prompt__station-form {
  margin: 0;
  display: block;
}
.floor-station-prompt__station-form + .floor-station-prompt__station-form {
  border-top: 1px solid var(--line, #e5e7eb);
}
.floor-station-prompt__station-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink, #1f2933);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.12s var(--pp-ease, ease), opacity 0.12s var(--pp-ease, ease);
}
.floor-station-prompt__station-btn:hover { background: var(--line, #e5e7eb); }
.floor-station-prompt__station-btn:active { background: var(--pp-accent-soft, #eff6ff); }
.floor-station-prompt__station-btn.is-pending {
  background: var(--pp-accent-soft, #eff6ff);
  color: var(--pp-accent, #2563eb);
}
.floor-station-prompt__station-btn.is-pending .floor-station-prompt__station-kind {
  color: var(--pp-accent, #2563eb);
  opacity: 0.72;
}
.floor-station-prompt__station-btn.is-dimmed,
.floor-station-prompt__station-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.floor-station-prompt__station-name { flex: 1; font-size: 14px; font-weight: 600; }
.floor-station-prompt__station-kind { font-size: 12px; color: var(--muted, #6b7280); }
.floor-station-prompt__station-arrow { width: 16px; height: 16px; color: var(--muted, #6b7280); flex-shrink: 0; }
.floor-station-prompt__station-spinner {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--pp-accent, #2563eb);
  border-top-color: transparent;
  border-radius: 50%;
  animation: floor-station-spin 0.6s linear infinite;
}
.floor-station-prompt__station-btn.is-pending .floor-station-prompt__station-arrow { display: none; }
.floor-station-prompt__station-btn.is-pending .floor-station-prompt__station-spinner { display: block; }
@keyframes floor-station-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .floor-station-prompt__station-spinner { animation: none; opacity: 0.7; }
}
.floor-station-prompt.is-choosing .floor-station-prompt__skip {
  pointer-events: none;
  opacity: 0.4;
}
.floor-station-prompt__skip {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted, #6b7280);
  text-decoration: none;
}
.floor-station-prompt__skip:hover { color: var(--ink, #1f2933); }

/* ── Lookup ───────────────────────────────────────────── */
.floor-lookup { padding: 20px 16px; max-width: 560px; margin: 0 auto; }
.floor-lookup__scan-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.floor-lookup__scan-first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(460px, 58vh);
  padding: 18px 4px;
}
.floor-lookup__scan-first[hidden] {
  display: none !important;
}
.floor-lookup__scan-art {
  width: 128px;
  height: 128px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  color: var(--accent, #2563eb);
  background:
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.18), transparent 34%),
    var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
.floor-lookup__scan-art svg {
  width: 84px;
  height: 84px;
}
/* "Choose your location" state — same card, warning-tinted pin instead of the
   barcode art, and the location chip / one-tap button as the only action. */
.floor-lookup__scan-art--location {
  color: var(--pp-warning, #b45309);
  background:
    radial-gradient(circle at 30% 20%, rgba(245, 158, 11, 0.18), transparent 34%),
    var(--soft, #f8fafc);
}
.floor-lookup__scan-art--location svg {
  width: 64px;
  height: 64px;
}
.floor-lookup__scan-first--location .floor-lookup__scan-actions {
  justify-items: center;
}
.floor-lookup__scan-first--location .location-chip-pill {
  min-height: 48px;
  padding: 0 18px;
  font-size: 15px;
}
.floor-lookup__location-form { width: 100%; }
.floor-lookup__location-form .btn { width: 100%; }
.floor-lookup__scan-title {
  margin: 18px 0 8px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ink, #1f2933);
}
.floor-lookup__scan-copy {
  max-width: 360px;
  margin: 0;
  color: var(--muted, #6b7280);
  font-size: 14px;
  line-height: 1.45;
}
.floor-lookup__scan-copy strong {
  color: var(--ink, #1f2933);
}
.floor-lookup__scan-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.floor-lookup__scan-actions .btn {
  min-height: 48px;
  justify-content: center;
}
.floor-lookup__scan-hint {
  margin: 12px 0 0;
  font-size: 12px;
}

/* ── Ask by voice (floor_voice_lookup_controller) ─────────────────────── */
.floor-voice { width: 100%; margin-top: 14px; text-align: center; }
.floor-voice__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px 0 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #1f2933);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.floor-voice__mic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pp-accent, #2563eb);
  color: #fff;
}
.floor-voice__mic svg { width: 18px; height: 18px; }
.floor-voice--listening .floor-voice__btn { border-color: var(--pp-accent, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.floor-voice--listening .floor-voice__mic { animation: floor-voice-pulse 1.1s ease-in-out infinite; }
@keyframes floor-voice-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.floor-voice__transcript {
  margin: 10px auto 0;
  max-width: 360px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1f2933);
}
.floor-voice__transcript--interim { color: var(--muted, #6b7280); font-weight: 500; }
.floor-voice__status { margin: 6px 0 0; font-size: 13px; }
.floor-voice__examples { margin: 8px 0 0; font-size: 12px; }
.floor-voice__choices { padding: 0 16px; }
.floor-lookup__manual-search {
  width: 100%;
}
.floor-lookup__manual-search--scan-first {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.floor-lookup__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.floor-lookup__title-icon { display: inline-flex; align-items: center; }
.floor-lookup__title-icon svg { width: 22px; height: 22px; color: #db2777; }
.floor-lookup__hint { font-size: 13px; margin: 10px 0 0; }

/* Barcode form — general lookup input */
.floor-lookup__barcode-form { width: 100%; }
.floor-lookup__barcode-field {
  display: flex;
  gap: 8px;
}
.floor-lookup__barcode-input {
  flex: 1;
  font-size: 16px;
  padding: 10px 14px;
}
.floor-lookup__barcode-submit { flex-shrink: 0; }

.floor-lookup__or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--pp-text-muted, #94a3b8);
  font-size: 13px;
}
.floor-lookup__or-divider::before,
.floor-lookup__or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pp-border, #e2e8f0);
}

.floor-lookup__product-search {
  width: 100%;
}
.floor-lookup__product-search-toggle {
  cursor: pointer;
  font-size: 14px;
  color: var(--pp-text-secondary, #64748b);
  list-style: none;
}
.floor-lookup__product-search-toggle::-webkit-details-marker { display: none; }
.floor-lookup__product-search-toggle::before {
  content: "▸ ";
  font-size: 11px;
}
.floor-lookup__product-search[open] > .floor-lookup__product-search-toggle::before {
  content: "▾ ";
}
.floor-lookup__product-search-toggle:hover { color: var(--pp-text-primary, #1e293b); }
.floor-lookup__product-search-body { margin-top: 12px; }

.floor-lookup__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.floor-lookup__back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.floor-lookup__back svg { width: 18px; height: 18px; }

/* ── Lookup detail (scanned item / bin) ───────────────── */
/* Lives inside a .floor-work column under floor/page_header, so it shares
   the stats / section / list vocabulary of the other floor screens. */
.floor-lookup-detail__card {
  padding: 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}

/* Item card: image on the left, title + SKU on the right. */
.floor-lookup-detail__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.floor-lookup-detail__img {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 1px solid var(--pp-border, #e5e7eb);
  background: var(--pp-surface-2, #f1f5f9);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--pp-text-subtle, #9ca3af);
}
.floor-lookup-detail__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floor-lookup-detail__img svg { width: 32px; height: 32px; }
.floor-lookup-detail__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floor-lookup-detail__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.floor-lookup-detail__options {
  margin: 0;
  font-size: 13px;
  color: var(--pp-text-muted, #6b7280);
  line-height: 1.35;
}
.floor-lookup-detail__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.floor-lookup-detail__code {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--pp-surface-2, #f1f5f9);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #1f2933);
  overflow-wrap: anywhere;
}
.floor-lookup-detail__code--muted { font-weight: 500; color: var(--pp-text-muted, #6b7280); }
.floor-lookup-detail__code-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-subtle, #9ca3af);
}

/* Stock numbers reuse .floor-work__stats; only the accent colours are ours. */
.floor-lookup-detail__stat--available .floor-work__stat-value { color: var(--pp-success, #15803d); }
.floor-lookup-detail__stat--committed .floor-work__stat-value { color: var(--pp-warning, #b45309); }

/* Per-bin breakdown with a share-of-on-hand bar. */
.floor-lookup-detail__bins { padding: 4px 16px; }
.floor-lookup-detail__bins .floor-work__empty-line { padding: 10px 0; }
.floor-lookup-detail__bin {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--pp-border, #e5e7eb);
}
.floor-lookup-detail__bin:first-child { border-top: 0; }
.floor-lookup-detail__bin-code {
  flex: 0 0 auto;
  min-width: 72px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
}
.floor-lookup-detail__bin-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  overflow: hidden;
}
.floor-lookup-detail__bin-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pp-accent, #2563eb);
}
.floor-lookup-detail__bin-qty {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Three equal thumb-sized tiles. */
.floor-lookup-detail__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.floor-lookup-detail__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 12px 8px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  color: var(--pp-text, #1f2933);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.floor-lookup-detail__action svg { width: 22px; height: 22px; color: var(--pp-accent, #2563eb); }
.floor-lookup-detail__action:active { background: var(--pp-surface-2, #f1f5f9); }
.floor-lookup-detail__action:disabled { opacity: .45; cursor: not-allowed; }
.floor-lookup-detail__actions--2 { grid-template-columns: repeat(2, 1fr); }
.floor-lookup-detail__actions form { display: contents; }
.floor-lookup-detail__notice { border-color: var(--pp-warning, #f59e0b); background: var(--pp-warning-soft, #fffbeb); }

/* License plate (pallet / tote) screens */
.floor-lpn__actions { display: flex; flex-direction: column; gap: 8px; }
.floor-lpn__actions > .btn, .floor-lpn__actions > form > .btn { width: 100%; min-height: 48px; }
.floor-lpn__actions > form { display: block; }
.floor-lpn__actions .floor-lookup-detail__actions { margin-top: 4px; }
.floor-lpn__actions .floor-lookup-detail__actions .btn { width: 100%; min-height: 44px; }
.floor-lpn .floor-sheet { margin-top: 12px; }

/* Bin screen rows: the row link plus a trailing "Move" button */
.floor-bin-row { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.floor-bin-row__link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.floor-bin-row__move { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.floor-bin-row__move svg { width: 16px; height: 16px; }

/* Inline action sheet (Move / Adjust / Transfer) — sits in the page flow so
   it survives the native web view; no overlay to fight the tab bar. */
.floor-sheet {
  margin-top: 12px;
  padding: 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-accent, #2563eb);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.floor-sheet__form { display: flex; flex-direction: column; gap: 14px; }
.floor-sheet__hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.floor-sheet__title { margin: 0; font-size: 17px; font-weight: 700; }
.floor-sheet__sub { margin: 2px 0 0; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.floor-sheet__close {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface-2, #f1f5f9);
  font-size: 20px; line-height: 1; color: var(--pp-text-muted, #6b7280); cursor: pointer;
}
.floor-sheet__actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.floor-sheet__actions .btn { min-height: 48px; }
.floor-sheet .fship-field__label small { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Quantity stepper: big touch targets either side of a number input */
.floor-stepper { display: flex; align-items: stretch; gap: 8px; }
.floor-stepper__btn {
  flex: none; width: 48px; border-radius: 10px;
  border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface-2, #f1f5f9);
  font-size: 22px; font-weight: 600; color: var(--pp-text, #1f2933); cursor: pointer;
}
.floor-stepper__btn:active { background: var(--pp-border, #e5e7eb); }
.floor-stepper__input { flex: 1; min-width: 0; text-align: center; font-size: 20px; font-weight: 700; min-height: 48px; -moz-appearance: textfield; }
.floor-stepper__input::-webkit-outer-spin-button,
.floor-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Segmented radio (Add / Remove / Set to) */
.floor-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--pp-surface-2, #f1f5f9); }
.floor-seg__opt { position: relative; }
.floor-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.floor-seg__opt span { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; font-weight: 600; color: var(--pp-text-muted, #6b7280); }
.floor-seg__opt input:checked + span { background: var(--pp-surface, #fff); color: var(--pp-text, #1f2933); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Signed quantity on a movement row. */
.floor-lookup-detail__delta {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--pp-surface-2, #f1f5f9);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pp-text-muted, #6b7280);
}
.floor-lookup-detail__delta--in  { background: var(--pp-success-soft, #ecfdf5); color: var(--pp-success, #15803d); }
.floor-lookup-detail__delta--out { background: var(--pp-danger-soft, #fef2f2);  color: var(--pp-danger, #b91c1c); }

/* Recent lookups rail */
.floor-lookup__recents { margin-top: 16px; }
.floor-lookup__recents-heading { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); margin: 0 0 8px; }
.floor-lookup__recents-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-lookup__recent-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink, #1f2933);
  font-size: 12px;
  transition: background 0.1s;
}
.floor-lookup__recent-chip:hover { background: var(--soft, #f1f5f9); }
.floor-lookup__recent-chip--active { border-color: var(--accent, #2563eb); }
.floor-lookup__chip-sku { font-weight: 700; font-family: ui-monospace, monospace; }
.floor-lookup__chip-name { color: var(--muted, #6b7280); }

/* Recent lookups on the SKU screen: full-width rows with a thumbnail. */
.floor-lookup__recent-row { text-decoration: none; color: inherit; }
.floor-lookup__recent-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--pp-border, #e5e7eb);
  background: var(--pp-surface-2, #f1f5f9);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-text-muted, #6b7280);
}
.floor-lookup__recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floor-lookup__recent-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }

/* ── Print page ───────────────────────────────────────── */
.floor-print { padding: 20px 16px; max-width: 480px; margin: 0 auto; }
.floor-print__header { margin-bottom: 20px; }
.floor-print__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
.floor-print__title svg { width: 22px; height: 22px; color: var(--muted, #6b7280); }
.floor-print__station { font-size: 13px; margin: 0; }
.floor-print__body { }
.floor-print__hint { font-size: 13px; margin: 0 0 16px; }
.floor-print__types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.floor-print__type-btn { min-height: 100px; border: none; cursor: pointer; font-family: inherit; }
.floor-print__no-station,
.floor-print__no-location { margin-bottom: 16px; }

/* ── Input font-size: prevents iOS auto-zoom on focus ── */
/* iOS zooms when an input has font-size < 16px. Floor inputs
   must be ≥16px so the viewport doesn't jump. */
.floor-body input,
.floor-body textarea,
.floor-body select {
  font-size: max(16px, 1em);
}

/* ── Offline indicator (body class) ──────────────────── */
.floor-offline .floor-topbar {
  border-bottom-color: #f59e0b;
}

/* ── Safe-area padding (iOS notch) ───────────────────── */
@media (display-mode: standalone) {
  .floor-body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* =========================================================================
   PICK ENGINE — guided picking (picking/batches#show and its streams).
   Also the shared header/interstitial/tote pieces put-away and replenish
   reuse. Moved from application.css; tokens (--pp-*) live there.
   ========================================================================= */

/* ── Pick Engine (fullscreen) ───────────────────────────────────────── */
/* Header: always visible, never collapses. "Pick N of M" is the largest
   text in it because that is the question a picker asks most. */
.picking-engine-topbar { flex-direction: column !important; padding: 0; }

/* Shared visual vocabulary for the card, the tote step and the list. The
   card is one rounded surface (20px, same as the floor hero) with soft
   separators inside it; only the location header and the instruction row
   carry color. */
.picking-engine,
.pick-card,
.tote-assignment,
.pick-list {
  --pick-radius: 20px;
  --pick-line: var(--pp-border, #ebecef);
}

/* ── Picking header (.pick-hdr) ──────────────────────────────────────────
   One calm row: where am I (left) · how do I want to see it (center) ·
   pause / more (right). Everything is quiet except the progress text; the
   hairline bar at the bottom edge is the only color. Put-away and
   replenish batches render the same header. */
.pick-hdr { flex-direction: column !important; padding: 0; gap: 0; }
.pick-hdr__row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 10px 20px; min-height: 60px;
}
.pick-hdr__title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick-hdr__progress {
  font-size: 17px; font-weight: 700; color: var(--pp-text, #18181b); line-height: 1.2;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pick-hdr__of { font-weight: 500; color: var(--pp-text-muted, #71717a); }
.pick-hdr__meta {
  font-size: 13px; color: var(--pp-text-muted, #71717a); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-hdr__timer { font-variant-numeric: tabular-nums; }

/* Segmented view switch — a single quiet control, not two buttons. */
.pick-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--pp-surface-2, var(--soft));
  border-radius: 10px; flex: 0 0 auto;
}
.pick-seg__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: color .15s, background .15s, box-shadow .15s;
}
.pick-seg__item:hover { color: var(--text); }
.pick-seg__item.is-active {
  background: var(--panel); color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 0 0 1px rgba(15, 23, 42, .05);
}
.pick-seg__icon { flex-shrink: 0; opacity: .85; }

/* Ghost actions — visible but never competing with the card. */
.pick-hdr__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pick-hdr__form { display: inline; margin: 0; }
.pick-hdr__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 10px;
  background: transparent; border: none; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.pick-hdr__btn:hover { background: var(--soft); }
.pick-hdr__btn:active { background: var(--pp-surface-2, var(--soft)); }
.pick-hdr__btn--icon { padding: 0; color: var(--muted); }
.pick-hdr__btn--icon:hover { color: var(--text); }
.pick-hdr__btn.dropdown-toggle::after { display: none; }
.pick-hdr__menu-info { display: none; }

/* Hairline progress is the header's bottom edge. */
.pick-hdr__bar { height: 3px; background: var(--pp-border, #ebecef); width: 100%; }
.pick-hdr__bar-fill { height: 100%; background: var(--pp-accent, #0e45a5); transition: width .5s ease; }
body[data-picking-engine] .topbar:has(.pick-hdr) { border-bottom: none; }

.picking-engine { width: 100%; max-width: 720px; margin: 0 auto; padding: 20px 16px 32px; overflow: visible; }
#pick-engine { overflow: visible; }

/* Voice bar directly under #pick-engine (no floor plan — no route panel). */
#pick-engine + .voice-control-bar,
.picking-engine-error + .voice-control-bar {
  margin-top: 12px;
  border-radius: 10px;
  border-top: 1px solid var(--pp-border, #e4e4e7);
}

/* Errors sit right under the card and stick to the bottom of the viewport
   on small screens, so they are next to the thumb rather than at the top. */
.picking-engine-error {
  display: flex; align-items: center; gap: 14px;
  background: var(--pp-danger, #b91c1c); color: #fff; padding: 18px 20px; border-radius: 16px;
  font-size: 17px; font-weight: 700; margin-top: 12px;
  border: none;
  box-shadow: 0 0 0 4px var(--pp-danger-soft, rgba(220, 38, 38, 0.10)), var(--pp-shadow-lg, 0 4px 24px rgba(15, 23, 42, 0.08));
  line-height: 1.35;
  position: sticky; bottom: 12px; z-index: 60;
  overflow: hidden;
}
.picking-engine-error::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 8px,
    rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 16px
  );
  pointer-events: none;
}
.picking-engine-error--shake { animation: picking-shake 0.5s ease; }
.pick-engine-error__icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.85); }
.pick-engine-error__close {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.pick-engine-error__close:hover { background: rgba(255,255,255,0.3); }
@keyframes picking-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90%  { transform: translateX(-6px); }
  30%, 70%  { transform: translateX(6px); }
}
.pick-engine-scanner-input {
  position: fixed; opacity: 0; width: 1px; height: 1px;
  left: -9999px; top: -9999px;
}

/* ── Pick Card ────────────────────────────────────────────────────────── */
.pick-card {
  background: var(--pp-surface, #fff); border-radius: var(--pick-radius); border: 1px solid var(--pick-line);
  /* overflow must stay visible: any overflow value other than visible turns
     the card into a scroll container and breaks the sticky action bar.
     Rounded top corners are reproduced on the location header instead. */
  overflow: visible;
  box-shadow: var(--pp-shadow-md, 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04));
}
@keyframes pick-card-confirm {
  0%   { background: var(--pp-surface, #fff); }
  35%  { background: var(--pp-success-soft, rgba(22, 163, 74, 0.12)); }
  100% { background: var(--pp-surface, #fff); }
}
.pick-card--confirming { animation: pick-card-confirm 0.5s ease-out; }

/* Optimistic confirm (pick_engine_controller#_beginOptimistic): the pick is
   counted the moment the last unit is scanned. The card reads as finished
   while the server's replacement card is on its way, and the passive
   "waiting for a scan" line turns into what happens to a scan made now. */
.pick-card--confirmed .pick-card__scan-wait,
.pick-card__actions:has(.pick-card__confirm-btn--hidden) .pick-card--confirmed .pick-card__scan-wait {
  color: var(--pp-success, #047857);
}
.pick-card--confirmed .pick-card__scan-wait-dot { background: var(--pp-success, #047857); animation: none; }
.pick-card--confirmed .pick-card__camera-btn,
.pick-card--confirmed .pick-card__confirm-btn { visibility: hidden; }
.pick-card--confirmed .pick-card__actions::before {
  content: "Picked — next one's on its way";
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-success, #047857);
  padding: 4px 0 8px;
}

/* ── Go · Take · Place stepper ──────────────────────────────────────────
   Policy "show_pick_steps". Three chips; exactly one reads as "you are
   here" except when there is no bin scan, where Go and Take share it. */
.pick-steps {
  display: flex; align-items: stretch; gap: 6px; margin: 0;
  padding: 12px 14px; list-style: none;
  background: var(--pp-surface, #fff);
  border-bottom: 1px solid var(--pick-line);
  border-radius: var(--pick-radius) var(--pick-radius) 0 0;
}
.pick-steps__step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--pp-text-muted, #71717a);
  background: var(--pp-surface-2, #f4f4f5);
  border: 1.5px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pick-steps__num {
  position: relative; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  background: var(--pp-border, #e4e4e7); color: var(--pp-text, #18181b);
}
.pick-steps__check { display: none; }
.pick-steps__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pick-steps__step--active {
  color: var(--pp-accent, #2563eb);
  background: var(--pp-accent-soft, #eff6ff);
  border-color: var(--pp-accent, #2563eb);
}
.pick-steps__step--active .pick-steps__num { background: var(--pp-accent, #2563eb); color: #fff; }

.pick-steps__step--done { color: var(--pp-success, #16a34a); background: var(--pp-success-soft, #f0fdf4); }
.pick-steps__step--done .pick-steps__num { background: var(--pp-success, #16a34a); color: #fff; }
.pick-steps__step--done .pick-steps__num-digit { display: none; }
.pick-steps__step--done .pick-steps__check { display: block; }

/* Bin still needs scanning: rewind to step 1 without a re-render. */
.pick-card--awaiting-bin .pick-steps__step[data-step="go"] {
  color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #eff6ff); border-color: var(--pp-accent, #2563eb);
}
.pick-card--awaiting-bin .pick-steps__step[data-step="go"] .pick-steps__num { background: var(--pp-accent, #2563eb); color: #fff; }
.pick-card--awaiting-bin .pick-steps__step[data-step="go"] .pick-steps__num-digit { display: inline; }
.pick-card--awaiting-bin .pick-steps__step[data-step="go"] .pick-steps__check { display: none; }
.pick-card--awaiting-bin .pick-steps__step[data-step="take"] {
  color: var(--pp-text-muted, #71717a); background: var(--pp-surface-2, #f4f4f5); border-color: transparent;
}
.pick-card--awaiting-bin .pick-steps__step[data-step="take"] .pick-steps__num { background: var(--pp-border, #e4e4e7); color: var(--pp-text, #18181b); }

/* The stepper takes over the card's rounded top from the location header. */
.pick-steps + .pick-card__location { border-radius: 0; }

/* Where to go — accent header (same gradient as the floor home hero), bin
   code as the hero. Follows the workspace accent theme. */
.pick-card__location {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--pp-accent, #0e45a5) 0%, var(--pp-accent-hover, #0a3580) 100%);
  color: #fff; padding: 14px 20px 16px;
  border-radius: var(--pick-radius) var(--pick-radius) 0 0;
}
.pick-card__location::after {
  content: ""; position: absolute; right: -14%; bottom: -90%;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.pick-card__location > * { position: relative; z-index: 1; }
.pick-card__step-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 4px;
}
.pick-card__step-label svg { color: #fff; }
.pick-card__bin-code {
  font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1;
  font-family: ui-monospace, monospace; letter-spacing: 0.01em;
}
.pick-card__bin-name { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78); font-family: inherit; }
.pick-card__bin-code--unknown {
  display: inline-block; color: #fff; font-size: 16px; font-weight: 600; font-family: inherit;
  padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.16);
}

/* What to do now — the single instruction a picker reads */
.pick-card__now {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 20px; border-bottom: 1px solid var(--pick-line);
  background: var(--pp-surface, #fff);
}
/* A pending bin scan is a blocker, so that variant keeps a soft accent wash. */
.pick-card__now--bin { background: var(--pp-accent-soft, #e8eefb); }
.pick-card__now-step {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pp-accent, #2563eb);
}
.pick-card__now-text {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pp-text, #18181b);
  overflow-wrap: break-word;
}
.pick-card__now-text svg { flex-shrink: 0; color: var(--pp-accent, #2563eb); }
.pick-card__now-hint { font-size: 13px; color: var(--pp-text-muted, #71717a); }
/* Trainee mode (policy): a second, plainer sentence under the instruction
   that says *how* — where the barcode is, what the count means, which
   button to press. Body attribute set in picking/batches/show. */
.pick-card__now-hint--trainee { font-size: 14px; line-height: 1.4; color: var(--pp-text, #18181b); }
.pick-card__now-warning {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 4px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--pp-warning-soft, #fef3c7); color: var(--pp-warning, #b45309);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.pick-card__now-warning svg { flex-shrink: 0; margin-top: 1px; color: var(--pp-warning, #f59e0b); }
/* Only one instruction at a time: while the bin still needs scanning,
   the item instruction waits its turn. */
.pick-card--awaiting-bin .pick-card__now--item { display: none; }

/* Product section — stacked hero image + SKU */
.pick-card__product {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  border-bottom: 1px solid var(--pick-line);
}
.pick-card__product-hero-image {
  width: 100%; aspect-ratio: 4/3; max-height: 220px; overflow: hidden;
  background: var(--pp-surface-2, #f4f4f5); display: flex; align-items: center; justify-content: center;
}
.pick-card__hero-img { width: 100%; height: 100%; object-fit: contain; }
.pick-card__hero-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pick-card__product-info { min-width: 0; padding: 16px 20px; }
.pick-card__sku {
  font-size: 32px; font-family: ui-monospace, monospace;
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}
.pick-card__product-title { font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 5px; color: var(--pp-text-muted, #71717a); }
.pick-card__variant-title { font-size: 13px; margin-top: 2px; }
.pick-card__barcode { font-size: 13px; margin-top: 6px; }
.pick-card__barcode-value { font-family: ui-monospace, monospace; font-size: 13px; color: var(--pp-text, #18181b); }

/* Quantities */
.pick-card__quantities {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 20px;
  align-items: center; justify-content: center; border-bottom: 1px solid var(--pick-line);
}
.pick-card__qty-separator {
  font-size: 32px; font-weight: 300; color: var(--pp-text-subtle, #a1a1aa); line-height: 1;
}
.pick-card__qty-block { text-align: center; }
.pick-card__qty-block--scanned .pick-card__qty-value {
  font-size: 56px; color: var(--pp-accent, #0e45a5); font-feature-settings: "tnum";
  transition: transform 0.15s ease;
}
.pick-card__qty-value--bump {
  transform: scale(1.15);
}
.pick-card__qty-block--primary .pick-card__qty-value {
  font-size: 56px; color: var(--pp-text, #18181b); font-feature-settings: "tnum";
}
.pick-card__qty-value { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pick-card__qty-label {
  font-size: 12px; color: var(--pp-text-muted, #71717a); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
/* Stock in the bin, inline under "To pick" so the picker never has to
   open the details to learn the shelf is short. */
.pick-card__stock-row { flex: 0 0 100%; display: flex; justify-content: center; margin-top: -2px; }
.pick-card__stock {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  background: var(--pp-surface-2, #f4f4f5); color: var(--pp-text-muted, #71717a);
}
.pick-card__stock--low   { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: var(--pp-danger, #b91c1c); }
.pick-card__stock--exact { background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14)); color: var(--pp-warning, #b45309); }
/* No scan policy: the "Scanned" counter stays in the DOM (the engine keys
   off it) but has nothing to say, so hide it and let "To pick" stand alone. */
.pick-card--no-scan .pick-card__qty-block--scanned,
.pick-card--no-scan .pick-card__qty-separator { display: none; }
.pick-card__qty-input-wrap {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 0 12px;
}
.pick-card__qty-input-label { font-size: 14px; font-weight: 600; }
.pick-card__qty-input { font-size: 24px; text-align: center; max-width: 100px; min-height: 52px; }

/* Tappable "Needed" qty — opens the on-screen keypad for large picks. */
button.pick-card__qty-block--tappable {
  appearance: none; background: transparent; border: 0; padding: 4px 8px;
  margin: -4px -8px; border-radius: 8px; cursor: pointer; color: inherit;
  font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button.pick-card__qty-block--tappable:active {
  background: var(--pp-accent-soft, rgba(14, 69, 165, 0.10));
}
button.pick-card__qty-block--tappable .pick-card__qty-label {
  color: var(--pp-accent, #0e45a5);
}

/* On-screen pick quantity keypad (Bluetooth-scanner safe — no text field). */
.pick-qty-keypad__sheet { max-width: 360px; width: min(100%, 360px); }
.pick-qty-keypad__body {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 4px;
}
.pick-qty-keypad__display {
  font-size: 48px; font-weight: 700; font-feature-settings: "tnum";
  letter-spacing: -0.02em; line-height: 1; min-height: 56px;
  color: var(--pp-text, #18181b);
}
.pick-qty-keypad__keys {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; width: 100%; max-width: 300px;
}
.pick-qty-keypad__key {
  height: 56px; border: 1px solid var(--pp-border, #e5e7eb); border-radius: 12px;
  background: var(--pp-surface-2, #f4f4f5); font: inherit; font-size: 22px;
  font-weight: 600; color: var(--pp-text, #18181b); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pick-qty-keypad__key:active { background: var(--pp-border, #e5e7eb); }
.pick-qty-keypad__key--action { font-size: 18px; color: var(--pp-text-muted, #71717a); }
.pick-qty-keypad__key--confirm {
  background: var(--pp-accent, #0e45a5); border-color: var(--pp-accent, #0e45a5);
  color: #fff; font-size: 16px; font-weight: 700;
}
.pick-qty-keypad__key--confirm:active { filter: brightness(0.92); }
.pick-qty-keypad__backspace {
  width: 100%; max-width: 300px; min-height: 44px;
}

/* Details — a quiet chip row (barcode · variant · order) in place of the
   old "More details" disclosure. Stock now sits under the quantity, so
   nothing a picker needs is hidden behind a tap. */
.pick-card__chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 12px;
  border-bottom: 1px solid var(--pick-line);
}
.pick-card__chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  padding: 0 10px; border-radius: 999px;
  background: var(--pp-surface-2, #f4f4f5); color: var(--pp-text-muted, #71717a);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; max-width: 100%;
}
.pick-card__chip strong { color: var(--pp-text, #18181b); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pick-card__chip--mono strong { font-family: ui-monospace, monospace; letter-spacing: 0.01em; }

/* Scan cart tote (batch mode — bind before pick) */
.pick-card__cart-tote-scan {
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--pick-line);
  background: var(--pp-accent-soft, #e8eefb);
  border-left: 4px solid var(--pp-accent, #0e45a5);
}
.pick-card__cart-tote-scan-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--pp-accent, #0e45a5); margin-bottom: 6px;
}
.pick-card__cart-tote-scan-body {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--pp-text, #18181b);
}
.pick-card__cart-tote-scan-body strong { color: var(--pp-text, #18181b); }

/* Cart bin destination row */
.pick-card__cart-destination {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--pick-line);
  border-left: 4px solid currentColor;
}
.pick-card__cart-destination-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pp-text-muted, #71717a); white-space: nowrap; flex-shrink: 0;
}
.pick-card__cart-bin-chip {
  font-size: 20px; font-weight: 800; padding: 4px 12px;
  border-radius: 10px; letter-spacing: -0.01em; white-space: nowrap;
}
.pick-card__order-name { font-size: 13px; }

/* Actions */
.pick-card__scan-step { background: var(--surface); color: var(--muted); transition: background 0.15s, color 0.15s; }
.pick-card__scan-step--active { background: var(--accent-subtle, #eef4ff); color: var(--accent, #2563eb) !important; font-weight: 600; }
.pick-card__scan-step--done { background: var(--success-subtle, #f0fdf4); color: var(--success, #16a34a) !important; }
.pick-card__scan-step--done::after { content: " ✓"; }
/* Action bar — sticks to the bottom of the viewport while the card is
   taller than the screen, so Confirm / Something's wrong never scroll away. */
.pick-card__actions {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pick-line);
  position: sticky; bottom: 0; z-index: 5;
  /* Translucent like the floor topbar: when the bar is stuck over a long
     card, the product beneath shows through instead of a hard white slab. */
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-radius: 0 0 var(--pick-radius) var(--pick-radius);
  box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, 0.25);
}
.pick-card__actions > form { display: block; }
.pick-card__confirm-btn {
  width: 100%; min-height: 60px; padding: 16px 20px; font-size: 19px; font-weight: 700;
  border-radius: 16px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}
.pick-card__confirm-btn:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}
.pick-card__confirm-btn[disabled],
.pick-card__confirm-btn.is-submitting {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}
.pick-card__confirm-btn--hidden {
  display: none;
}
/* When the policy hides Confirm until a scan, say so in its place instead
   of leaving a gap. Appears only while the button is hidden. */
.pick-card__scan-wait { display: none; }
.pick-card__actions:has(.pick-card__confirm-btn--hidden) .pick-card__scan-wait {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  min-height: 60px; padding: 10px 16px; border-radius: 16px;
  border: 2px dashed var(--pp-border-strong, #dcdde1); color: var(--pp-text, #18181b);
  font-size: 16px; font-weight: 700;
}
.pick-card__scan-wait-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--pp-accent, #2563eb);
  animation: pick-scan-wait-pulse 1.2s ease-in-out infinite;
}
.pick-card__scan-wait-hint {
  flex-basis: 100%; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--pp-text-muted, #71717a);
}
@keyframes pick-scan-wait-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* Pick card text overflow — prevent voice transcript from widening the card */
.pick-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.pick-card__sku,
.pick-card__product-title,
.pick-card__bin-name {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.pick-card__secondary-actions {
  display: flex; align-items: stretch; gap: 8px; margin-top: 10px;
}
.pick-card__problem-btn {
  flex: 1; min-height: 48px; font-size: 16px; font-weight: 600; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pick-card__undo-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px;
  font-size: 14px; font-weight: 500; color: var(--pp-text-muted, #71717a);
  padding: 6px 12px; border-radius: 14px;
}
.pick-card__undo-btn:hover { color: var(--pp-text, #18181b); background: var(--pp-surface-2, #f4f4f5); }

/* ── Two-column card (policy "pick_card_layout") ────────────────────────
   `body.pick-layout--wide` is set by the engine: always for two_column,
   for auto only when ≥900px wide and landscape. Left column is "what and
   where" (bin, product, details); right column is "do" (instruction,
   counts, destination, actions). The DOM order is untouched — this is a
   grid over the same children — so scanning and voice behave identically. */
body.pick-layout--wide .picking-engine { max-width: 1120px; }
body.pick-layout--wide .pick-card:not(.tote-assignment) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "steps    steps"
    "location now"
    "product  qty"
    "product  dest"
    "details  ."
    "actions  actions";
  align-items: stretch;
}
body.pick-layout--wide .pick-steps                { grid-area: steps; }
body.pick-layout--wide .pick-card__location       { grid-area: location; display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
body.pick-layout--wide .pick-steps + .pick-card__location { border-radius: 0; }
body.pick-layout--wide .pick-card:not(:has(.pick-steps)) .pick-card__location { border-top-left-radius: var(--pick-radius); }
body.pick-layout--wide .pick-card__now            { grid-area: now; justify-content: center; }
body.pick-layout--wide .pick-card__product        { grid-area: product; border-bottom: none; border-right: 1px solid var(--pick-line); }
body.pick-layout--wide .pick-card__product-hero-image { max-height: 240px; aspect-ratio: auto; flex: 1 1 auto; min-height: 140px; }
body.pick-layout--wide .pick-card__quantities     { grid-area: qty; gap: 24px; padding: 20px; border-bottom: 1px solid var(--pick-line); }
body.pick-layout--wide .pick-card__chips          { grid-area: details; border-bottom: none; border-top: 1px solid var(--pick-line); border-right: 1px solid var(--pick-line); }
body.pick-layout--wide .pick-card__cart-destination { grid-area: dest; border-bottom: none; align-self: start; }
body.pick-layout--wide .pick-card__actions        { grid-area: actions; border-top: 1px solid var(--pick-line); }
/* Product info sits under the image even when the row is tall. */
body.pick-layout--wide .pick-card__product-info   { padding: 14px 20px 16px; }
body.pick-layout--wide .pick-card__sku            { font-size: 28px; }
body.pick-layout--wide .pick-card__qty-block--primary .pick-card__qty-value,
body.pick-layout--wide .pick-card__qty-block--scanned .pick-card__qty-value { font-size: 64px; }

/* "Something's wrong" sheet — one large tile per situation */
.pick-problem-sheet .modal-content { max-width: 520px; }
.pick-problem-sheet__options { display: flex; flex-direction: column; gap: 8px; }
.pick-problem-sheet__form { display: contents; }
.pick-problem-sheet__option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 64px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--pp-border, #e4e4e7); border-radius: var(--radius);
  background: var(--pp-surface, #fff); color: var(--pp-text, #18181b);
  font: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pick-problem-sheet__option:hover {
  background: var(--pp-surface-2, #f4f4f5); border-color: var(--pp-border-strong, #d4d4d8);
}
.pick-problem-sheet__option:active { background: var(--pp-accent-soft, #eff6ff); }
.pick-problem-sheet__option--danger { border-color: var(--pp-danger, #ef4444); }
.pick-problem-sheet__option--danger .pick-problem-sheet__option-title { color: var(--pp-danger, #ef4444); }
.pick-problem-sheet__option-title { font-size: 16px; font-weight: 700; }
.pick-problem-sheet__option-hint { font-size: 13px; color: var(--pp-text-muted, #71717a); line-height: 1.4; }
/* Second step (policy "confirm_problem_actions"): consequence + one big yes. */
.pick-problem-sheet__confirm {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding-top: 8px;
}
.pick-problem-sheet__confirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-accent-soft, #eff6ff); color: var(--pp-accent, #2563eb);
}
.pick-problem-sheet__confirm-icon--danger { background: var(--pp-danger-soft, #fee2e2); color: var(--pp-danger, #ef4444); }
.pick-problem-sheet__confirm-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.pick-problem-sheet__confirm-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pp-text-muted, #71717a); max-width: 38ch; }
.pick-problem-sheet__confirm-text strong { color: var(--pp-text, #18181b); }
.pick-problem-sheet__confirm-actions {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; width: 100%; margin-top: 8px;
}
.pick-problem-sheet__confirm-actions form { display: contents; }
.pick-problem-sheet__confirm-back,
.pick-problem-sheet__confirm-yes { min-height: 56px; font-size: 16px; font-weight: 700; width: 100%; }

/* Undo confirmation (batch pick) — slim preview + off-screen execute form */
.pick-undo-execute-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pick-undo-confirm__thumb {
  position: relative;
  overflow: hidden;
}
.pick-undo-confirm__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pick-undo-confirm__thumb-fallback {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.pick-undo-confirm__loading { padding: 8px 0 4px; }
.pick-undo-confirm__error { margin: 0; padding: 8px 0; }
.pick-undo-confirm__hint { margin: 0 0 12px; }
.pick-undo-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pick-undo-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.pick-undo-preview__row--bin {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pick-undo-preview__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.pick-undo-preview__value {
  text-align: right;
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}
.pick-undo-preview__product { min-width: 0; }
.pick-undo-preview__sku {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pick-undo-preview__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 4px;
  color: var(--text);
}

/* ── Alternate bin modal ─────────────────────────────────────────────── */
.pick-alt-bin-modal__loading,
.pick-alt-bin-modal__empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.pick-alt-bin-modal__hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  padding: 0 4px;
}
.pick-alt-bin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--surface, #f8fafc);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.pick-alt-bin-card:hover { background: var(--soft, #f1f5f9); border-color: var(--primary, #2563eb); }
.pick-alt-bin-card:active { background: #dbeafe; border-color: var(--primary, #2563eb); }
.pick-alt-bin-card--loading { opacity: 0.5; cursor: wait; }
.pick-alt-bin-card__code {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 80px;
}
.pick-alt-bin-card__name {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-alt-bin-card__qty {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-success, #15803d);
  background: var(--pp-success-soft, rgba(22, 163, 74, 0.12));
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  margin-left: auto;
}

/* Success overlay */
.pick-card__success-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21, 128, 61, 0.88); border-radius: var(--pick-radius);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.pick-card__success-overlay--visible {
  opacity: 1;
  animation: success-pop 0.4s ease;
}
@keyframes success-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Tote assignment (post-confirm) ──────────────────────────────────── */
.tote-assignment {
  background: var(--pp-surface, #fff); border-radius: var(--pick-radius); border: 1px solid var(--pick-line);
  box-shadow: var(--pp-shadow-md, 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04)); overflow: hidden;
}
/* The tote step is the "done, now place it" moment: success green in the
   same gradient shape as the accent location header. */
.tote-assignment__header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, #16a34a 0%, var(--pp-success, #15803d) 100%);
  border-radius: var(--pick-radius) var(--pick-radius) 0 0;
}
.tote-assignment__title { font-size: 18px; font-weight: 700; color: #fff; }
.tote-assignment__subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 2px; font-family: ui-monospace, monospace; }
.tote-assignment__prompt {
  padding: 20px; text-align: center; border-bottom: 1px solid var(--pick-line);
}
.tote-assignment__prompt-label {
  font-size: 13px; color: var(--pp-text-muted, #71717a); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 6px;
}
.tote-assignment__order-name { font-size: 22px; font-weight: 800; }
.tote-assignment__existing { padding: 16px 20px 0; }
.tote-assignment__existing-label {
  font-size: 13px; color: var(--pp-text-muted, #71717a); font-weight: 500; margin-bottom: 10px;
}
.tote-assignment__existing-totes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tote-assignment__tote-btn {
  padding: 10px 18px; font-size: 16px; font-weight: 700;
  background: var(--pp-surface-2, #f4f4f5); border: 2px solid var(--pick-line); border-radius: 14px;
  cursor: pointer; font-family: ui-monospace, monospace;
  transition: border-color 0.15s, background 0.15s;
}
.tote-assignment__tote-btn:hover {
  border-color: var(--pp-accent, #0e45a5); background: var(--pp-accent-soft, #e8eefb);
}
.tote-assignment__tote-btn--required {
  border-color: var(--pp-accent, #0e45a5); background: var(--pp-accent-soft, #e8eefb);
  font-size: 20px; padding: 14px 24px;
}
.tote-assignment__divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  font-size: 13px; color: var(--pp-text-muted, #71717a); text-transform: uppercase; letter-spacing: 0.05em;
}
.tote-assignment__divider::before,
.tote-assignment__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--pick-line);
}
.tote-assignment__hint {
  padding: 14px 20px; font-size: 14px; line-height: 1.4; margin: 0;
}
.tote-assignment__hint strong { color: var(--pp-text, #18181b); }
.tote-assignment__tote-btn--loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.tote-assignment__tote-btn--loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border: 2px solid var(--pp-accent, #0e45a5); border-top-color: transparent;
  border-radius: 50%;
  animation: tote-btn-spin 0.6s linear infinite;
}
@keyframes tote-btn-spin { to { transform: rotate(360deg); } }
.tote-assignment--submitting {
  position: relative; pointer-events: none;
}
.tote-assignment--submitting::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--pick-radius);
  display: flex; align-items: center; justify-content: center;
  animation: tote-submit-fade 0.15s ease;
}
@keyframes tote-submit-fade { from { opacity: 0; } to { opacity: 1; } }
.tote-assignment--submitting .tote-assignment__header {
  opacity: 0.7; transition: opacity 0.15s;
}

/* In-card tote step (policy "tote_step_display" = in_card): same card
   chrome the picker was just looking at, with step 3 lit. */
.tote-assignment--in-card { overflow: visible; }
.tote-assignment__picked {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--pick-line);
  background: var(--pp-success-soft, #f0fdf4);
}
.tote-assignment__picked-check {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pp-success, #16a34a); color: #fff;
}
.tote-assignment__picked-thumb {
  flex-shrink: 0; width: 44px; height: 44px; object-fit: contain;
  border-radius: 10px; background: #fff; border: 1px solid var(--pick-line);
}
.tote-assignment__picked-text { display: flex; flex-direction: column; min-width: 0; }
.tote-assignment__picked-sku {
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 18px; line-height: 1.1;
  overflow-wrap: anywhere;
}
.tote-assignment__picked-qty { font-size: 13px; color: var(--pp-success, #15803d); font-weight: 600; }
.pick-card__now--tote .pick-card__now-text { font-size: 22px; }
.tote-assignment__existing--in-card { padding: 16px 20px 20px; }
.tote-assignment__existing--in-card .tote-assignment__tote-btn--required {
  flex: 1 1 auto; min-height: 72px; font-size: 26px; padding: 14px 24px;
  border-width: 3px; border-color: currentColor;
}
.tote-assignment__scan-wait {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 16px 20px 20px; min-height: 60px; padding: 10px 16px; border-radius: 16px;
  border: 2px dashed var(--pp-border-strong, #dcdde1); color: var(--pp-text, #18181b);
  font-size: 16px; font-weight: 700;
}

/* ── Navigation interstitial ─────────────────────────────────────────── */

/* Card mode (no floor plan) */
.nav-interstitial {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px 40px; text-align: center;
  background: var(--pp-surface, #fff); border-radius: 20px; border: 1px solid var(--pp-border, #ebecef);
  box-shadow: var(--pp-shadow-md, 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04));
  animation: interstitial-in 0.3s ease;
}
@keyframes interstitial-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-interstitial__icon {
  color: var(--accent); margin-bottom: 12px;
  animation: interstitial-bounce 1.2s ease infinite;
}
@keyframes interstitial-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}
.nav-interstitial__label {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.nav-interstitial__destination {
  font-size: 48px; font-weight: 900; letter-spacing: -0.02em;
  font-family: ui-monospace, monospace; color: var(--text); line-height: 1.1;
}
.nav-interstitial__sublabel {
  font-size: 15px; color: var(--muted); margin-top: 6px;
  font-weight: 500;
}
.nav-interstitial__aisle-hero {
  font-size: 44px; font-weight: 900; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.1;
}
.nav-interstitial__rack-sub {
  font-size: 24px; font-weight: 700; color: var(--muted);
  font-family: ui-monospace, monospace; margin-top: 6px;
}
.nav-interstitial--aisle-change:not(.nav-interstitial--fullscreen) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), var(--shadow);
}
.nav-interstitial--aisle-change .nav-interstitial__icon {
  color: #f59e0b;
  animation: interstitial-bounce-wide 1.2s ease infinite;
}
@keyframes interstitial-bounce-wide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(12px); }
}
.nav-interstitial__countdown {
  font-size: 16px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav-interstitial:not(.nav-interstitial--fullscreen) .nav-interstitial__countdown {
  margin-top: 16px;
}
.nav-interstitial__card-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px;
}
.nav-interstitial__card-actions .nav-interstitial__skip {
  margin-top: 0;
}
.nav-interstitial__pause {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); background: transparent;
}
.nav-interstitial__pause:hover { background: var(--soft); color: var(--text); }
.nav-interstitial__pause[aria-pressed="true"] {
  background: var(--soft); color: var(--text); border-color: var(--muted);
}
.nav-interstitial__countdown--paused {
  color: var(--accent); font-weight: 600;
}
.nav-interstitial__skip {
  margin-top: 24px; font-size: 13px;
}
.nav-interstitial__map {
  width: 100%; max-width: 360px; height: 180px;
  margin-top: 16px; border-radius: 16px;
  border: 1px solid var(--pp-border, #ebecef); overflow: hidden;
  background: var(--surface-2, var(--bg));
}
.nav-interstitial__scene-host {
  width: 100%; height: 100%; position: relative;
}
.nav-interstitial__stage {
  width: 100%; height: 100%;
}

/* Full-screen map mode (with floor plan) */
.nav-interstitial--fullscreen {
  position: fixed; inset: 0; z-index: 200;
  padding: 0; border: none; border-radius: 0; box-shadow: none;
  background: var(--surface-2, #f1f5f9);
  animation: interstitial-in 0.25s ease;
}
.nav-interstitial__fullscreen-map {
  position: absolute; inset: 0;
  overflow: hidden;
}
.nav-interstitial__fullscreen-scene-host {
  width: 100%; height: 100%; position: relative;
}
.nav-interstitial__fullscreen-stage {
  width: 100%; height: 100%;
}

.nav-interstitial__bottom-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 20px 24px 28px;
  z-index: 10;
  animation: interstitial-overlay-in 0.35s ease;
}
@keyframes interstitial-overlay-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-interstitial__bottom-overlay-content {
  text-align: center;
  max-width: 480px; margin: 0 auto;
}
.nav-interstitial__bottom-label {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 600; margin-bottom: 2px;
}
.nav-interstitial__bottom-hero {
  font-size: 52px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.1;
}
.nav-interstitial--aisle-change .nav-interstitial__bottom-hero {
  color: #b45309;
}
.nav-interstitial__bottom-sub {
  font-size: 26px; font-weight: 800; color: var(--text);
  font-family: ui-monospace, monospace; margin-top: 4px;
}
.nav-interstitial__bottom-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 14px;
}
.nav-interstitial--fullscreen .nav-interstitial__skip {
  margin-top: 0; font-size: 13px;
}
.nav-interstitial--fullscreen .nav-interstitial__pause {
  margin-top: 0;
}
.nav-interstitial--fullscreen .nav-interstitial__countdown {
  font-size: 15px; color: var(--muted);
}
.nav-interstitial__next-card { display: none; }

/* Cart tote colors — 8 distinguishable pairs, exposed as tokens so the
   pick card, the list chips and the tote step all agree (and a dark theme
   can retune them in one place). */
:root {
  --pp-tote-0-bg: #dbeafe; --pp-tote-0-fg: #1d4ed8;
  --pp-tote-1-bg: #dcfce7; --pp-tote-1-fg: #15803d;
  --pp-tote-2-bg: #fef3c7; --pp-tote-2-fg: #b45309;
  --pp-tote-3-bg: #fce7f3; --pp-tote-3-fg: #be185d;
  --pp-tote-4-bg: #ede9fe; --pp-tote-4-fg: #6d28d9;
  --pp-tote-5-bg: #cffafe; --pp-tote-5-fg: #0e7490;
  --pp-tote-6-bg: #fee2e2; --pp-tote-6-fg: #b91c1c;
  --pp-tote-7-bg: #ecfccb; --pp-tote-7-fg: #3f6212;
}
.pick-cart-bin-color-0 { background: var(--pp-tote-0-bg); color: var(--pp-tote-0-fg); }
.pick-cart-bin-color-1 { background: var(--pp-tote-1-bg); color: var(--pp-tote-1-fg); }
.pick-cart-bin-color-2 { background: var(--pp-tote-2-bg); color: var(--pp-tote-2-fg); }
.pick-cart-bin-color-3 { background: var(--pp-tote-3-bg); color: var(--pp-tote-3-fg); }
.pick-cart-bin-color-4 { background: var(--pp-tote-4-bg); color: var(--pp-tote-4-fg); }
.pick-cart-bin-color-5 { background: var(--pp-tote-5-bg); color: var(--pp-tote-5-fg); }
.pick-cart-bin-color-6 { background: var(--pp-tote-6-bg); color: var(--pp-tote-6-fg); }
.pick-cart-bin-color-7 { background: var(--pp-tote-7-bg); color: var(--pp-tote-7-fg); }

/* ── Pick List (ShipHero-style rows) ──────────────────────────────────── */
/* One card, rows inside it, bin headers sticky under the batch header. */
.pick-list {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pick-line);
  border-radius: var(--pick-radius);
  box-shadow: var(--pp-shadow-md, 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04));
}
.pick-list > :first-child { border-radius: var(--pick-radius) var(--pick-radius) 0 0; }
.pick-list > :last-child  { border-radius: 0 0 var(--pick-radius) var(--pick-radius); border-bottom: none; }
.pick-list__bin-header {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--pp-text-muted, #71717a);
  background: var(--pp-surface-2, #f4f4f5);
  border-bottom: 1px solid var(--pick-line);
  border-top: 1px solid var(--pick-line);
  user-select: none;
  /* Sits just under the sticky batch header (see --pick-topbar-h on .picking-engine). */
  position: sticky; top: var(--pick-topbar-h, 0px); z-index: 5;
}
.pick-list__bin-header:first-child { border-top: none; }
.pick-list__bin-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 14px; color: var(--pp-text, #18181b); }
.pick-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pick-line);
  transition: background 0.1s;
}
.pick-list__item--picked { opacity: 0.45; }
.pick-list__item--short { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); }
.pick-list__item { position: relative; }
.pick-list__item--current {
  background: var(--pp-surface, #fff);
  scroll-margin-top: 80px;
}
/* "You are here" indicator: a short accent bar that stays clear of the
   card's rounded corners. */
.pick-list__item--current::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--pp-accent, #0e45a5);
}
.pick-list__pick-qty {
  display: flex; flex-direction: column; align-items: center;
  min-width: 42px; flex-shrink: 0;
}
.pick-list__pick-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--pp-text-muted, #71717a); line-height: 1;
}
.pick-list__pick-value {
  font-size: 22px; font-weight: 800; line-height: 1.1;
  color: var(--pp-text, #18181b); font-variant-numeric: tabular-nums;
}
.pick-list__thumb {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--pp-surface-2, #f4f4f5);
  display: flex; align-items: center; justify-content: center;
}
.pick-list__thumb-img {
  width: 100%; height: 100%; object-fit: cover;
}
.pick-list__thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pick-list__info { flex: 1; min-width: 0; }
.pick-list__sku {
  font-family: ui-monospace, monospace; font-size: 13px;
  font-weight: 600; color: var(--pp-text-muted, #71717a); line-height: 1.2;
  letter-spacing: 0.01em;
}
.pick-list__product-name {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--pp-text, #18181b);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.pick-list__variant-name { font-weight: 400; color: var(--pp-text-muted, #71717a); }
.pick-list__meta {
  font-size: 13px; line-height: 1.3; margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pick-list__cart-chip {
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
}
.pick-list__status {
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; min-width: 36px;
}
.pick-list__check { flex-shrink: 0; color: var(--pp-success, #15803d); }
.pick-list__status-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap;
}
.pick-list__status-badge--short { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: var(--pp-danger, #b91c1c); }
.pick-list__status-badge--skipped { background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14)); color: var(--pp-warning, #b45309); }
.pick-list__status-badge--cancelled { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: var(--pp-danger, #b91c1c); }
.pick-list__go-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pp-accent, #0e45a5); color: #fff;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.pick-list__go-btn:hover { background: var(--pp-accent-hover, #0a3580); }
.pick-list__go-btn:active { transform: scale(0.93); }
.pick-list__item--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
}
.pick-list__item--clickable:hover { background: var(--pp-surface-2, #f4f4f5); }
.pick-list__item--clickable:active { background: var(--pp-surface-3, #ececef); }
.pick-list__scan-required {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; color: var(--pp-text-muted, #71717a);
  flex-shrink: 0;
}
.pick-list__scan-required-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pick-list__go-hint {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--pp-text-muted, #71717a); flex-shrink: 0;
}
.pick-list__hint {
  padding: 10px 16px; font-size: 14px; line-height: 1.4;
  color: var(--pp-text, #18181b); background: var(--pp-accent-soft, #e8eefb);
  border-bottom: 1px solid var(--pick-line);
}
.pick-list__footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 16px 4px 0;
}

/* ── All Done screen ─────────────────────────────────────────────────── */
.pick-all-done {
  text-align: center; padding: 40px 24px 28px;
  background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #ebecef);
  border-radius: 20px;
  box-shadow: var(--pp-shadow-md, 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04));
}
.pick-all-done__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; margin-bottom: 16px; border-radius: 50%;
  background: var(--pp-success-soft, rgba(22, 163, 74, 0.12)); color: var(--pp-success, #15803d);
}
.pick-all-done__icon svg { width: 44px; height: 44px; }
.pick-all-done h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.pick-all-done__next { max-width: 360px; margin: 4px auto 20px; font-size: 14px; line-height: 1.45; }
.pick-all-done__finish { width: 100%; max-width: 360px; min-height: 56px; padding: 14px 32px; font-size: 18px; font-weight: 700; border-radius: 16px; }

/* ── Scanner shortcuts table (More → Scanner shortcuts) ───────────────── */
.pick-action-barcodes__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pick-action-barcodes__table th {
  text-align: left; padding: 4px 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.pick-action-barcodes__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pick-action-barcodes__table tr:last-child td { border-bottom: none; }
.pick-action-barcodes__table code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--soft); padding: 2px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.04em;
}

/* ── Picking Engine — Immersive mode (hide app chrome) ──────────────────
   Same full-bleed treatment as workflow-builder: hide rail/sidebar/header
   and clear the 56px rail offset + shell gutters so body black doesn't
   show as an empty left strip. Also flatten turbo-frame#main so existing
   `.main > .topbar` rules match application-layout pages (FBA → View batch). */
body[data-picking-engine] {
  background: var(--pp-page-bg, #f6f7f9) !important;
  padding: 0 !important;
  --shell-gutter: 0px;
  /* Rendered height of the sticky batch header. Anything else that sticks
     to the top (pick-list bin headers) offsets by this so it doesn't slide
     underneath. pick_engine_controller measures the real value; this is
     the no-JS fallback (60px row + 3px bar). */
  --pick-topbar-h: 63px;
}
@media (max-width: 768px) {
  body[data-picking-engine] { --pick-topbar-h: 55px; }
}
body[data-picking-engine] .header-bar { display: none !important; }
body[data-picking-engine] .sidebar { display: none !important; }
body[data-picking-engine] .sidebar-corner { display: none !important; }
body[data-picking-engine] .sidebar-hover-zone { display: none !important; }
body[data-picking-engine] .app-sidebar-toggle { display: none !important; }
body[data-picking-engine] .app-rail { display: none !important; }
body[data-picking-engine] .ai-chatbar,
body[data-picking-engine] [data-ai-chatbar-toggle] { display: none !important; }
/* Rail is hidden — drop the 56px offset so the page sits flush. */
body[data-picking-engine] .super-shell .app-shell,
body[data-picking-engine] .app-shell {
  margin-left: 0 !important;
  padding: 0 !important;
  background: var(--pp-page-bg, #f6f7f9);
}
body[data-picking-engine] .main {
  border-radius: 0 !important;
  min-height: 100vh;
  background: var(--pp-page-bg, #f6f7f9);
}
/* Application layout wraps topbar+content in turbo-frame#main. Flatten it
   so `.main > .topbar` / `.main > .content` selectors keep working. */
body[data-picking-engine] turbo-frame#main {
  display: contents;
}
/* ── Always-visible header in picking engine ───────────────────────────
   The header is the picker's only fixed reference point (progress, pause,
   help). It stays pinned to the top of the viewport and never collapses.
   `:has(.picking-engine-topbar)` avoids depending on `.main > .topbar`
   (turbo-frame#main sits between them; display:contents does not fix
   child-combinator matching).

   Also beat `#main > header.topbar { top: 48px }` (index sticky under the
   fixed `.header-bar`). That ID rule wins over a class-only selector and
   leaves a blank 48px band once immersive mode hides the header — same
   trap workflow-builder already handles. */
body[data-picking-engine] .topbar:has(.picking-engine-topbar),
body[data-picking-engine] #main > header.topbar:has(.picking-engine-topbar) {
  position: sticky;
  top: 0;
  z-index: 40;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  /* Immersive mode is full-bleed — no shell radii to mirror. */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom: 1px solid var(--pp-border, var(--line));
}
body[data-picking-engine] .topbar:has(.picking-engine-topbar) > *,
body[data-picking-engine] #main > header.topbar:has(.picking-engine-topbar) > * {
  flex: 0 0 auto;
  width: 100%;
}
body[data-picking-engine] .content {
  padding-top: 0;
}

body[data-picking-engine] .floor-topbar { display: none !important; }
/* Engine pages replace chrome with their own sticky pick header; hide the
   empty wrapper so it can't reserve sticky space. */
body[data-picking-engine] .floor-chrome { display: none !important; }

/* Inside the iOS app (and an installed PWA) the web view runs under the
   status bar. With the dark floor bar hidden, the batch header is the
   topmost element and has to clear the status bar itself, otherwise the
   clock and battery sit on top of "Pick 1 of 12" and the view toggle. */
.floor-standalone[data-picking-engine] .topbar:has(.picking-engine-topbar),
.floor-standalone[data-picking-engine] #main > header.topbar:has(.picking-engine-topbar) {
  padding-top: env(safe-area-inset-top, 0px);
}
@media (display-mode: standalone) {
  body[data-picking-engine] .topbar:has(.picking-engine-topbar),
  body[data-picking-engine] #main > header.topbar:has(.picking-engine-topbar) {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ── Picking Engine — slim header on phones and small tablets ──────────
   One row: "Pick N of M" · assignee avatar · pause · ⋯. The view switch
   and the batch meta move into the ⋯ menu so the progress text — the one
   thing a picker reads up here — is never the element that gets clipped. */
.pick-hdr__menu-view { display: none; }
@media (max-width: 768px) {
  .pick-hdr__row { padding: 8px 12px; gap: 8px; min-height: 52px; }
  .pick-hdr__progress { font-size: 16px; }
  .pick-hdr__meta { display: none; }
  .pick-hdr__menu-info { display: block; }
  .pick-hdr__menu-info.dropdown-item { font-size: 13px; font-weight: 600; color: var(--text); pointer-events: none; }
  .pick-hdr .pick-seg { display: none; }
  .pick-hdr__menu-view { display: block; }
  .pick-hdr__menu-view.is-active { font-weight: 700; }
  .pick-hdr__menu-view.is-active::before { content: "✓ "; }
  .pick-hdr .asg-chip__name { display: none; }
  .pick-hdr .asg-chip { min-width: 40px; min-height: 40px; padding: 0 10px; border-radius: 10px; }
  .pick-hdr__btn { padding: 0; min-width: 40px; }
  .pick-hdr__btn-label { display: none; }
}

/* ── Picking Engine — Phone card ──────────────────────────────────────
   700px, not 768: an iPad mini is 744pt wide in portrait and must get the
   tablet tier below (stacked hero image, big numbers), not the phone grid. */
@media (max-width: 700px) {
  /* Phone: the card floats in the same 12px gutter as the floor home so the
     two screens read as one app. Width is explicitly set so the container
     does not reflow when internal content (qty counter etc.) changes size. */
  .picking-engine {
    width: 100%;
    max-width: 100%;
    padding: 12px 12px 24px;
  }
  body[data-picking-engine] .content { padding-left: 0; padding-right: 0; }
  .picking-engine > #pick-engine-error {
    margin: 8px 0 0; border-radius: 16px; bottom: 8px;
  }
  .picking-engine > .voice-unlock-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 88px;
    z-index: 99;
    margin: 0;
  }

  .pick-card__secondary-actions {
    flex-wrap: wrap;
  }
  .pick-card__secondary-actions > .btn,
  .pick-card__secondary-actions > form {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .pick-card__secondary-actions > form .btn {
    width: 100%;
  }

  /* ── Phone card: everything a picker reads sits above the fold ─────────
     Same trick as the two-column layout: a grid over the card's existing
     children, so DOM order and Stimulus targets are untouched. Every block
     spans the row except product + quantities, which share one. Budget on
     an 844pt iPhone: header 52 · steps 40 · location 64 · product row 104
     · now 48 · destination 44 · chips 36 · actions ~104. */
  body:not(.pick-layout--wide) .pick-card:not(.tote-assignment) {
    display: grid;
    /* Fixed share for the count: a wrapping flex box has a huge max-content
       width, so `auto` here would starve the SKU column. 36% fits "12 / 100"
       at the phone number size and leaves the SKU ~140px on a 390pt phone;
       the min-content floor keeps the stock pill from being clipped. */
    grid-template-columns: minmax(0, 1fr) minmax(min-content, 36%);
    align-items: stretch;
  }
  body:not(.pick-layout--wide) .pick-card:not(.tote-assignment) > * { grid-column: 1 / -1; }
  body:not(.pick-layout--wide) .pick-card:not(.tote-assignment) > .pick-card__product    { grid-column: 1; }
  body:not(.pick-layout--wide) .pick-card:not(.tote-assignment) > .pick-card__quantities { grid-column: 2; }

  /* Stepper: a slim strip, not a row of pills. */
  .pick-steps { padding: 8px 12px; gap: 6px; }
  .pick-steps__step { min-height: 28px; font-size: 12px; padding: 3px 8px; gap: 5px; border-width: 1px; }
  .pick-steps__num { width: 16px; height: 16px; font-size: 10px; }

  /* Location: one line — "GO TO · B-05-04", map as a compact pill on the
     right. The pill's phone sizing lives with the base .pick-card__map-btn
     rule further down (it has to come after it in source order to win). */
  .pick-card__location { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 64px; }
  .pick-card__step-label { margin: 0; flex-shrink: 0; font-size: 11px; }
  .pick-card__bin-code {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
    font-size: 28px;
  }
  .pick-card__bin-code > strong { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pick-card__bin-name { grid-column: 1; display: block; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pick-card__bin-code--unknown { display: inline-block; font-size: 14px; }

  /* Now: a single line. The low-stock sentence is covered by the stock pill
     in the product row, so it only shows when there is no count to show. */
  .pick-card__now { padding: 10px 16px; gap: 4px; min-height: 48px; justify-content: center; }
  .pick-card__now-step { font-size: 11px; }
  .pick-card__now-text { font-size: 16px; gap: 8px; }
  .pick-card__now-text svg { width: 18px; height: 18px; }
  .pick-card__now-warning { padding: 6px 8px; font-size: 12px; }
  .pick-card:has(.pick-card__stock) .pick-card__now-warning { display: none; }

  /* Product row: thumbnail · SKU / title on the left, count on the right. */
  .pick-card__product {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 12px 0 12px 16px; min-height: 96px;
  }
  /* A smaller thumbnail buys the SKU ~30px: a 15-char SKU now fits on two
     lines instead of four on a 390pt phone. */
  .pick-card__product-hero-image {
    flex: 0 0 64px; width: 64px; height: 64px; max-height: none; aspect-ratio: 1;
    border-radius: 12px; border: 1px solid var(--pick-line);
  }
  .pick-card__hero-img-placeholder svg { width: 28px; height: 28px; }
  .pick-card__product-info { padding: 0; min-width: 0; }
  .pick-card__sku {
    font-size: 20px; letter-spacing: -0.01em; line-height: 1.15;
    /* Break at hyphens where possible; only split mid-token when a segment
       is wider than the column (no orphaned characters, no overflow). */
    overflow-wrap: anywhere; word-break: normal; hyphens: manual;
  }
  .pick-card__product-title {
    font-size: 13px; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Quantities: "0 / 19" with one label under it, right-aligned. A grid,
     not a wrapping flexbox: the number row is a single grid row, so it can
     never break into "12 /" + "100", and its min-content widens the count
     column (see the card grid above) only when a count is that wide. */
  .pick-card__quantities {
    display: grid; grid-template-columns: auto auto auto; grid-auto-rows: min-content;
    justify-content: end; align-items: baseline; align-content: center;
    column-gap: 6px; row-gap: 0; padding: 12px 16px 12px 10px;
  }
  .pick-card__qty-block { display: contents; }
  /* Tappable qty must keep a real box — display:contents breaks hit-testing. */
  button.pick-card__qty-block--tappable {
    display: flex; flex-direction: column; align-items: flex-end;
    grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: start;
    margin: 0; padding: 0; text-align: right;
  }
  button.pick-card__qty-block--tappable .pick-card__qty-value {
    grid-column: unset; grid-row: unset;
  }
  button.pick-card__qty-block--tappable .pick-card__qty-label {
    grid-column: unset; grid-row: unset; text-align: right; margin-top: 2px; font-size: 11px;
  }
  .pick-card__qty-block--scanned .pick-card__qty-value { grid-column: 1; grid-row: 1; }
  .pick-card__qty-separator { grid-column: 2; grid-row: 1; font-size: 22px; }
  .pick-card__qty-block--primary .pick-card__qty-value { grid-column: 3; grid-row: 1; }
  .pick-card__qty-block--primary .pick-card__qty-label { grid-column: 1 / -1; grid-row: 2; text-align: right; margin-top: 2px; font-size: 11px; }
  .pick-card__qty-block--scanned .pick-card__qty-label { display: none; }
  .pick-card__stock-row { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; margin-top: 6px; }
  /* No scan step: only the count. Collapse the two empty tracks. */
  .pick-card--no-scan .pick-card__quantities { grid-template-columns: auto; }
  .pick-card--no-scan .pick-card__qty-block--primary .pick-card__qty-value { grid-column: 1; }
  .pick-card__stock { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
  .pick-card__qty-block--scanned .pick-card__qty-value,
  .pick-card__qty-block--primary .pick-card__qty-value { font-size: 30px; }

  /* Cart tote row */
  .pick-card__cart-destination { padding: 8px 16px; font-size: 13px; gap: 8px; border-left-width: 4px; min-height: 44px; }
  .pick-card__cart-bin-chip { font-size: 16px; padding: 2px 8px; }
  .pick-card__chips { padding: 8px 16px 10px; }

  /* Actions: one primary, then a single row of text buttons. On the phone
     the camera is the scanner, so the passive "waiting for a scan" box is
     redundant next to the camera button — its pulse moves up to the count. */
  .pick-card__actions { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pick-card__confirm-btn { padding: 14px 16px; font-size: 18px; min-height: 56px; }
  .pick-card__camera-btn { min-height: 56px; }
  .pick-card__actions:has(.pick-card__camera-btn) .pick-card__scan-wait { display: none; }
  /* Without a camera button (PWA + Bluetooth scanner) the box stays, but as one line. */
  .pick-card__actions:has(.pick-card__confirm-btn--hidden) .pick-card__scan-wait { min-height: 48px; padding: 8px 14px; font-size: 15px; }
  .pick-card__scan-wait-hint { display: none; }
  /* Trainees keep the "what happens next" line even on a phone. */
  body[data-pick-trainee] .pick-card__scan-wait-hint { display: block; }
  .pick-card__secondary-actions { margin-top: 6px; gap: 4px; flex-wrap: nowrap; }
  .pick-card__secondary-actions .btn { white-space: nowrap; }
  .pick-card__secondary-actions > .btn,
  .pick-card__secondary-actions > form { flex: 1 1 auto; }
  .pick-card__secondary-actions .pick-card__problem-btn,
  .pick-card__secondary-actions .pick-card__undo-btn {
    min-height: 40px; padding: 6px 10px; font-size: 14px; font-weight: 600; border-radius: 10px;
    background: transparent; border-color: transparent; box-shadow: none; color: var(--pp-text-muted, #71717a);
  }
  .pick-card__secondary-actions .pick-card__problem-btn { color: var(--pp-text, #18181b); }
  .pick-card__secondary-actions .pick-card__problem-btn:hover, .pick-card__secondary-actions .pick-card__problem-btn:active,
  .pick-card__secondary-actions .pick-card__undo-btn:hover, .pick-card__secondary-actions .pick-card__undo-btn:active { background: var(--pp-surface-2, #f4f4f5); }
  .pick-card__problem-btn svg { width: 16px; height: 16px; }
  .pick-card__undo-label { display: inline; }
  .pick-card__secondary-actions > .pick-card__undo-btn { flex: 0 0 auto; min-width: 0; }
  .pick-card__undo-btn svg { width: 16px; height: 16px; }

  /* The "waiting for a scan" pulse, now beside the count. */
  .pick-card:has(.pick-card__camera-btn):has(.pick-card__confirm-btn--hidden) .pick-card__qty-block--primary .pick-card__qty-label::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px;
    background: var(--pp-accent, #0e45a5);
    animation: pick-scan-wait-pulse 1.2s ease-in-out infinite;
  }
  .pick-card--confirmed:has(.pick-card__camera-btn) .pick-card__qty-block--primary .pick-card__qty-label::before {
    background: var(--pp-success, #15803d); animation: none;
  }

  /* Pick list: tighter rows */
  .pick-list__item { padding: 10px 12px; gap: 10px; }
  .pick-list__bin-header { padding: 6px 12px; }
  .pick-list__thumb { width: 44px; height: 44px; }
  .pick-list__pick-value { font-size: 20px; }
  .pick-list__product-name { font-size: 13px; }

  /* Navigation interstitial: tighter (card mode only) */
  .nav-interstitial:not(.nav-interstitial--fullscreen) { padding: 40px 16px 30px; }
  .nav-interstitial__map { max-width: 100%; height: 150px; }
  .nav-interstitial__bottom-overlay { padding: 16px 16px 24px; }
  .nav-interstitial__bottom-hero { font-size: 42px; }
  .nav-interstitial__bottom-sub { font-size: 22px; }

  /* Voice bar stays in flow under the card (a floating mic used to cover
     the action bar's Undo button) — just tighter, with the label dropped. */
  .voice-control-bar { padding: 8px 12px; min-height: 72px; gap: 8px; }
  #pick-engine + .voice-control-bar,
  .picking-engine-error + .voice-control-bar { margin: 8px; }
  .voice-mic-btn { width: 56px; height: 56px; }
  .voice-repeat-btn span { display: none; }
  .voice-repeat-btn { padding: 0 12px; }
}

/* Tablet (iPad mini / iPad portrait) — touch-first, wider card. Starts at
   701px so a 744pt iPad mini lands here rather than in the phone grid. */
@media (min-width: 701px) and (max-width: 1024px) and (pointer: coarse) {
  .picking-engine { max-width: min(90vw, 800px); padding: 12px; }
  .pick-card__product-hero-image { max-height: 240px; }
  .pick-card__qty-block--scanned .pick-card__qty-value,
  .pick-card__qty-block--primary .pick-card__qty-value {
    font-size: 48px;
  }
}

/* ── Picking: first-30-seconds, feedback, motion, accessibility ───────── */

/* Card-to-card motion. Turbo replaces #pick-engine's child, so the new card
   animates in on insert. Direction says "forward"; undo has its own cue. */
@keyframes pick-card-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
#pick-engine > .pick-card,
#pick-engine > .tote-assignment,
#pick-engine > .pick-all-done {
  animation: pick-card-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #pick-engine > .pick-card,
  #pick-engine > .tote-assignment,
  #pick-engine > .pick-all-done,
  .pick-brief, .pick-brief__card, .pick-toast, .pick-flash { animation: none !important; transition: none !important; }
}

/* In-flight: the card dims and the primary action shows it is working, so a
   tap on a slow network is never repeated out of doubt. */
.pick-card.is-submitting,
.tote-assignment.is-submitting { pointer-events: none; }
.pick-card.is-submitting > *:not(.pick-card__actions) { opacity: 0.55; transition: opacity 0.15s; }
.pick-card.is-submitting .pick-card__confirm-btn,
.pick-card.is-submitting .pick-card__scan-wait { position: relative; color: transparent !important; }
.pick-card.is-submitting .pick-card__confirm-btn::after,
.pick-card.is-submitting .pick-card__scan-wait::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: pick-spin 0.7s linear infinite;
}
.pick-card.is-submitting .pick-card__scan-wait::after { border-color: var(--line); border-top-color: var(--primary, #2563eb); }
@keyframes pick-spin { to { transform: rotate(360deg); } }

/* Full-screen scan flash — colour the whole screen for a beat so the result
   registers in peripheral vision while the picker looks at the shelf. */
.pick-flash {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0;
}
.pick-flash--ok   { animation: pick-flash 0.35s ease-out; background: rgba(22, 163, 74, 0.28); }
.pick-flash--done { animation: pick-flash 0.55s ease-out; background: rgba(22, 163, 74, 0.42); }
.pick-flash--bad  { animation: pick-flash-bad 0.7s ease-out; background: rgba(220, 38, 38, 0.38); }
@keyframes pick-flash     { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pick-flash-bad { 0% { opacity: 1; } 35% { opacity: 0.2; } 55% { opacity: 1; } 100% { opacity: 0; } }

/* Connection banner. Pinned just under the header so it is visible no matter
   how far down the card the picker has scrolled. */
.pick-offline {
  position: fixed; left: 12px; right: 12px;
  top: calc(var(--pick-topbar-h, 56px) + 8px); z-index: 150;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 14px;
  background: #fffbeb; border: 1px solid var(--pp-warning, #b45309); color: var(--pp-warning, #b45309);
  border-radius: 14px; font-size: 14px; font-weight: 600;
  box-shadow: var(--pp-shadow-lg, 0 4px 24px rgba(15, 23, 42, 0.08));
  max-width: 720px; margin-inline: auto;
}
.pick-offline svg { flex-shrink: 0; }
body.pick-offline-mode .pick-hdr__bar-fill { background: var(--pp-warning, #b45309); }

/* "Picked X — Undo" toast: floats above the sticky action bar. */
.pick-toast-slot { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 202; pointer-events: none; display: flex; justify-content: center; padding: 0 12px; }
/* While the full-screen walking map is up, the toast moves to the top so it
   never covers the "Aisle E / Rack 01" cue. */
body:has(.nav-interstitial--fullscreen) .pick-toast-slot { bottom: auto; top: 52px; }
.pick-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; width: 100%;
  padding: 12px 12px 12px 14px;
  background: #0f172a; color: #fff; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
  animation: pick-toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pick-toast.is-leaving { animation: pick-toast-out 0.2s ease-in forwards; }
@keyframes pick-toast-in  { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pick-toast-out { to { opacity: 0; transform: translateY(12px); } }
.pick-toast__check { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: #16a34a; align-items: center; justify-content: center; flex-shrink: 0; }
.pick-toast__text { flex: 1; font-size: 15px; line-height: 1.3; min-width: 0; }
.pick-toast__text strong { font-weight: 700; }
.pick-toast__dest { color: #93c5fd; margin-left: 4px; font-weight: 600; }
.pick-toast__form { margin: 0; flex-shrink: 0; }
.pick-toast__undo {
  appearance: none; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  padding: 10px 16px; border-radius: 10px; min-height: 44px; cursor: pointer;
}
.pick-toast__undo:hover { background: rgba(255,255,255,0.16); }
.pick-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; background: #60a5fa; width: 100%; transform-origin: left; animation: pick-toast-bar linear forwards; }
@keyframes pick-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Batch briefing — one full-screen card before the first pick.
   `margin: auto` on the card centers it when it fits and still lets
   the overlay scroll to the top when the card is taller than the
   viewport (flex align-items:center would clip the top). */
.pick-brief {
  position: fixed; inset: 0; z-index: 210;
  display: flex;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface-2, #f1f5f9);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: interstitial-in 0.25s ease;
}
.pick-brief.is-leaving { animation: pick-brief-out 0.18s ease-in forwards; }
@keyframes pick-brief-out { to { opacity: 0; transform: translateX(-24px); } }
body.pick-brief-open { overflow: hidden; }
.pick-brief__card {
  width: 100%; max-width: 560px;
  margin: auto;
  flex-shrink: 0;
  background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 28px 24px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}
.pick-brief__eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pick-brief__title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.pick-brief__sub { margin: 8px 0 0; font-size: 17px; color: var(--muted); line-height: 1.4; }
.pick-brief__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pick-brief__item { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--text); padding: 12px 14px; background: var(--soft, #f8fafc); border-radius: 12px; }
.pick-brief__icon { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: #e0f2fe; color: #0369a1; align-items: center; justify-content: center; flex-shrink: 0; }
.pick-brief__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.pick-brief__start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; font-size: 20px; font-weight: 700; border-radius: 14px; }
.pick-brief__later-form { margin: 0; display: flex; justify-content: center; }
.pick-brief__later { min-height: 44px; color: var(--muted); }

/* Coach marks — dim everything, ring the anchor, one tip at a time. */
.pick-coach { position: fixed; inset: 0; z-index: 205; }
.pick-coach__spot {
  position: fixed; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 3px #60a5fa, 0 0 0 7px rgba(96, 165, 250, 0.35);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.pick-coach__tip {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  background: #fff; color: var(--text); border-radius: 14px;
  padding: 16px 18px 14px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.35);
  transition: top 0.25s ease;
}
/* The tip is centred on the viewport; the arrow sits at the anchor's x. In
   `left`, 50% is half the tip's own width, so (50vw - 50%) is the tip's left
   edge in viewport pixels. */
.pick-coach__tip::before {
  content: ""; position: absolute; top: -8px;
  left: calc(var(--pick-coach-arrow-x, 50vw) - 50vw + 50%);
  width: 16px; height: 16px; background: #fff;
  transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.pick-coach__tip--above::before { top: auto; bottom: -8px; }
.pick-coach__tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pick-coach__tip-title { font-size: 17px; font-weight: 800; }
.pick-coach__tip-count { font-size: 12px; }
.pick-coach__tip-body { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.pick-coach__tip-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.pick-coach__tip-actions .btn { min-height: 44px; }
body.pick-coach-open { overflow: hidden; }

/* Interstitial: direction cue + map legend */
.nav-interstitial__cue { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
.nav-interstitial__cue-arrow {
  display: inline-flex; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--pp-accent, #0e45a5); color: #fff; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-interstitial--aisle-change .nav-interstitial__cue-arrow { background: #b45309; box-shadow: 0 6px 18px rgba(180, 83, 9, 0.35); }
.nav-interstitial__cue-text { min-width: 0; }
.nav-interstitial__distance { font-family: inherit; font-weight: 600; color: var(--muted); font-size: 18px; margin-left: 6px; white-space: nowrap; }
.nav-interstitial__legend {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.nav-interstitial__legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.92); color: var(--text); box-shadow: 0 1px 4px rgba(15,23,42,0.15);
}
.nav-interstitial__legend-item::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; }
.nav-interstitial__legend-item--from::before { background: #bfdbfe; border-color: #3b82f6; }
.nav-interstitial__legend-item--to::before   { background: #bbf7d0; border-color: #16a34a; }

/* "Show me on the map" — quiet link-button in the location block */
.pick-card__map-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; vertical-align: middle;
  appearance: none; border: none; background: rgba(255, 255, 255, 0.16); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; min-height: 36px; cursor: pointer;
  transition: background 0.15s;
}
.pick-card__map-btn:hover { background: rgba(255, 255, 255, 0.26); }
.pick-card__map-btn-label--short { display: none; }

/* Alternate bins: plain language rows */
.pick-alt-bin-card { align-items: center; }
.pick-alt-bin-card__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pick-alt-bin-card__main .pick-alt-bin-card__code { min-width: 0; }
.pick-alt-bin-card__where { font-size: 13px; color: var(--muted); }
.pick-alt-bin-card__qty--partial { color: var(--pp-warning, #b45309); background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14)); }

/* Display & sound dialog rows */
.pick-display__body { display: flex; flex-direction: column; gap: 4px; }
.pick-display__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-display__row:last-child { border-bottom: none; }
.pick-display__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.pick-display__text .muted { font-size: 13px; }
.pick-display__toggle { width: 26px; height: 26px; flex-shrink: 0; accent-color: var(--primary, #2563eb); }

/* Large text (per device). Scales the things a picker reads from arm's length.
   Trainee mode (policy, `body[data-pick-trainee]`) shares the bumps that fit
   on every width — the instruction, the buttons, the stepper, the tote
   prompt. Bin code / SKU / count sizes stay with the device toggle because
   they crowd the phone's product row. */
body.pick-display--large .pick-card__bin-code { font-size: 44px; }
:is(body.pick-display--large, body[data-pick-trainee]) .pick-card__now-text { font-size: 22px; }
body.pick-display--large .pick-card__sku { font-size: 34px; }
body.pick-display--large .pick-card__product-title { font-size: 18px; }
body.pick-display--large .pick-card__qty-value { font-size: 64px; }
:is(body.pick-display--large, body[data-pick-trainee]) .pick-card__confirm-btn { font-size: 24px; min-height: 72px; }
:is(body.pick-display--large, body[data-pick-trainee]) .pick-card__problem-btn { font-size: 18px; min-height: 56px; }
:is(body.pick-display--large, body[data-pick-trainee]) .pick-card__cart-bin-chip { font-size: 24px; }
body.pick-display--large .pick-card__stock,
body.pick-display--large .pick-card__chip { font-size: 15px; }
:is(body.pick-display--large, body[data-pick-trainee]) .pick-steps__step { font-size: 16px; }
body.pick-display--large .pick-hdr__progress { font-size: 20px; }
body.pick-display--large .pick-list__sku { font-size: 18px; }
body.pick-display--large .pick-list__pick-value { font-size: 30px; }
:is(body.pick-display--large, body[data-pick-trainee]) .tote-assignment__prompt { font-size: 24px; }
:is(body.pick-display--large, body[data-pick-trainee]) .tote-assignment__picked-sku { font-size: 26px; }

/* High contrast (per device): pure black on white, heavier borders, no soft
   greys, no gradients or translucency. Retunes the tokens the card reads. */
body.pick-display--contrast {
  --text: #000; --muted: #1f2937; --line: #111827;
  --pp-text: #000; --pp-text-muted: #1f2937; --pp-text-subtle: #374151;
  --pp-border: #111827; --pp-border-strong: #111827; --pick-line: #111827;
  --pp-surface-2: #fff;
}
body.pick-display--contrast .pick-card,
body.pick-display--contrast .tote-assignment,
body.pick-display--contrast .pick-list,
body.pick-display--contrast .pick-all-done { border: 2px solid #111827; box-shadow: none; }
body.pick-display--contrast .pick-card__location { background: #000; color: #fff; }
body.pick-display--contrast .pick-card__location::after { display: none; }
body.pick-display--contrast .pick-card__step-label,
body.pick-display--contrast .pick-card__bin-name { color: #fff; }
body.pick-display--contrast .pick-card__now,
body.pick-display--contrast .pick-card__now--bin { background: #fff; }
body.pick-display--contrast .pick-card__now-step { color: #000; }
body.pick-display--contrast .pick-card__actions { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.pick-display--contrast .pick-card__confirm-btn { background: #000; border-color: #000; color: #fff; }
body.pick-display--contrast .btn-light,
body.pick-display--contrast .pick-card__problem-btn { border: 2px solid #111827; color: #000; background: #fff; }
body.pick-display--contrast .pick-card__stock,
body.pick-display--contrast .pick-card__chip { border: 1.5px solid #111827; color: #000; background: #fff; }
body.pick-display--contrast .pick-steps__step { border: 1.5px solid #111827; color: #000; background: #fff; }
body.pick-display--contrast .pick-steps__step--active { background: #000; color: #fff; }
body.pick-display--contrast .pick-hdr__bar { background: #cbd5e1; }
body.pick-display--contrast .pick-hdr__bar-fill { background: #000; }
body.pick-display--contrast .pick-seg__item.is-active { background: #000; color: #fff; }
body.pick-display--contrast .tote-assignment__header { background: #000; color: #fff; }

/* Live map: pickers who have gone quiet */
.live-map-needs-help {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; margin-bottom: 10px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius);
  font-size: 13px; color: #991b1b;
}
.live-map-needs-help__title { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.live-map-needs-help a { color: #991b1b; font-weight: 700; text-decoration: underline; }
.live-map-picker-chip--stuck { outline: 2px solid #dc2626; outline-offset: 1px; background: #fef2f2; }
.live-map-picker-chip__stuck { font-size: 11px; font-weight: 800; color: #dc2626; }

/* End of batch: how it went, and the picker's trend */
.pick-summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 16px 20px; }
.pick-summary__kpi { display: flex; flex-direction: column; gap: 2px; }
.pick-summary__kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.pick-summary__kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pick-summary__kpi-value small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.pick-summary__kpi-delta { font-size: 13px; font-weight: 600; }
.pick-summary__kpi-delta--up { color: #15803d; }
.pick-summary__kpi-delta--down { color: #b45309; }
.pick-summary__trend { display: flex; align-items: center; gap: 16px; padding: 0 20px 16px; flex-wrap: wrap; }
.pick-summary__spark { display: block; width: 220px; height: 48px; }
.pick-summary__spark-line { fill: none; stroke: #2563eb; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pick-summary__spark-dot { fill: #2563eb; }
.pick-summary__spark-dot--last { fill: #16a34a; r: 4; }
.pick-summary__spark-avg { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; }
.pick-summary__trend-text { font-size: 14px; color: var(--text); line-height: 1.45; flex: 1; min-width: 200px; }

/* Full list on a phone: each pick is a card, not a table row */
@media (max-width: 768px) {
  .pick-list__item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "thumb info status" "thumb qty qty";
    align-items: start; row-gap: 6px;
    padding: 12px 12px 12px 12px; min-height: 76px;
  }
  .pick-list__thumb { grid-area: thumb; }
  .pick-list__info  { grid-area: info; }
  .pick-list__status { grid-area: status; align-self: start; }
  .pick-list__pick-qty {
    grid-area: qty; flex-direction: row; align-items: baseline; gap: 6px;
    justify-content: flex-start; min-width: 0;
  }
  .pick-list__pick-label { font-size: 12px; }
  .pick-list__pick-value { font-size: 22px; }
  .pick-list__product-name { white-space: normal; }
  .pick-list__bin-header { font-size: 14px; }
  .pick-list__footer {
    position: sticky; bottom: 0; margin: 12px -12px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--pp-surface, #fff); border-top: 1px solid var(--pp-border, #ebecef);
  }

  .pick-toast-slot { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  /* Keep vertical centering on phones/iPad mini (≤768) — the old
     flex-start + 18px top pad left the briefing flush under the
     status bar with no breathing room above the card. */
  .pick-brief {
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      10px
      max(16px, env(safe-area-inset-bottom, 0px));
  }
  .pick-brief__card { padding: 22px 18px 18px; border-radius: 16px; }
  .pick-brief__title { font-size: 28px; }
  .pick-brief__sub { font-size: 15px; }
  .pick-brief__item { font-size: 15px; padding: 10px 12px; }
  /* Phone: the map button is a compact "Map" pill in the second column of
     the location grid, so the bin code keeps the width. Must stay after the
     base .pick-card__map-btn rule above — same specificity, source order wins. */
  .pick-card__map-btn {
    grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center;
    padding: 0 12px 0 10px; min-height: 36px; height: 36px; font-size: 13px; gap: 5px; flex-shrink: 0;
  }
  .pick-card__map-btn svg { width: 16px; height: 16px; }
  .pick-card__map-btn-label { display: none; }
  .pick-card__map-btn-label--short { display: inline; }
  .nav-interstitial__cue { gap: 12px; }
  .nav-interstitial__cue-arrow { width: 52px; height: 52px; }
  .nav-interstitial__cue-arrow svg { width: 32px; height: 32px; }
  .nav-interstitial__distance { font-size: 15px; display: block; margin: 2px 0 0; }
  .nav-interstitial__legend { top: 8px; left: 8px; }
}

/* ── Responsive / iPad layout ────────────────────────────────────────── */

/* Tablet portrait: fill the available width with a small gutter each side.
   On a phone-sized tablet or large phone in landscape this gives close to
   full-screen width while remaining readable on wider tablets. */
@media (min-width: 640px) and (max-width: 1023px) {
  .picking-engine {
    max-width: min(92vw, 800px);
    padding: 24px 20px;
  }
}

/* Large screens: keep a single centered column; pick card stays readable. */
@media (min-width: 1024px) {
  .picking-engine {
    max-width: 640px;
    padding: 28px 24px;
  }

  .pick-card__confirm-btn { font-size: 19px; padding: 18px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHIP STATION (fship-*) — /floor/ship
   Phone-first pack + label screen. Lives inside .floor-work for gutters.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Landing: scan card ───────────────────────────────── */
.fship-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 18px;
  text-align: center;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
  transition: opacity 0.15s ease;
}
.fship-scan.is-busy { opacity: 0.55; pointer-events: none; }
.fship-scan__art { width: 72px; height: 72px; color: var(--pp-accent, #2563eb); }
.fship-scan__art svg { width: 100%; height: 100%; }
.fship-scan__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.fship-scan__copy { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pp-text-muted, #6b7280); max-width: 34ch; }
.fship-scan__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.fship-scan__actions .btn { min-height: 48px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.fship-scan__manual { display: flex; gap: 8px; width: 100%; }
.fship-scan__manual .input { flex: 1; min-height: 48px; font-size: 16px; }
.fship-scan__manual .btn { min-height: 48px; padding: 0 18px; }
.fship-scan__hint { margin: 0; font-size: 12px; }

/* ── Landing: station devices ─────────────────────────── */
.fship-station { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fship-station__device {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  min-width: 0;
}
.fship-station__device--missing { border-style: dashed; }
.fship-station__k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pp-text-muted, #6b7280); }
.fship-station__v { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fship-station__device--missing .fship-station__v { color: var(--pp-warning, #b45309); }
.fship-station__note { margin: -6px 0 0; font-size: 12px; line-height: 1.4; }

/* ── Pack screen: cards ───────────────────────────────── */
.fship-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}
.fship-card__hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fship-card__title { margin: 0; font-size: 15px; font-weight: 700; }
.fship-card__aside { font-size: 12px; color: var(--pp-text-muted, #6b7280); text-align: right; }

/* Order status hero (shipped / cancelled). */
.fship-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.fship-status--shipped   { background: var(--pp-success-soft, rgba(22, 163, 74, 0.12)); }
.fship-status--cancelled { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); }
.fship-status--shipped .floor-work__eyebrow   { color: var(--pp-success, #15803d); }
.fship-status--cancelled .floor-work__eyebrow { color: var(--pp-danger, #b91c1c); }
.fship-status .floor-work__headline { font-size: 20px; word-break: break-all; font-variant-numeric: tabular-nums; }
.fship-status__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 13px; }
.fship-status__facts div { display: contents; }
.fship-status__facts dt { color: var(--pp-text-muted, #6b7280); }
.fship-status__facts dd { margin: 0; font-weight: 600; }
.fship-status__actions { display: flex; gap: 8px; margin-top: 8px; }
.fship-status__actions form { flex: 1; display: flex; }
.fship-status__actions .btn { flex: 1; min-height: 48px; font-weight: 700; border-radius: 12px; }
.fship-status__void { color: var(--pp-danger, #b91c1c); }

/* Items in the box. */
.fship-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fship-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--pp-border, #f1f1f3); }
.fship-item:first-child { border-top: 0; }
.fship-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin: -8px -4px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.fship-item--link:active .fship-item__link,
.fship-item__link:active { background: var(--pp-surface-2, #f1f5f9); }
.fship-item__qty {
  flex: 0 0 auto;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--pp-accent-soft, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fship-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fship-item__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.fship-item__meta { font-size: 12px; color: var(--pp-text-muted, #6b7280); }
.fship-item__meta code { font-size: 12px; }
.fship-item__thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pp-surface-2, #f1f5f9);
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fship-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fship-item__thumb-fallback {
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-text-muted, #6b7280);
}

/* Scan-to-verify checklist. */
.fship-verify__progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--pp-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.fship-verify__progress.is-done { color: var(--pp-success, #15803d); }
.fship-verify__scan { display: flex; gap: 8px; margin: 4px 0 6px; }
.fship-verify__input { flex: 1; min-height: 44px; font-size: 16px; }
.fship-verify__reset { flex: 0 0 auto; min-height: 44px; }
.fship-verify__hint { font-size: 12px; margin: 0 0 6px; }
.fship-item__qty-sep { opacity: .5; margin: 0 1px; }
.fship-item__check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--pp-border, #e5e7eb);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.fship-item__check svg { width: 15px; height: 15px; }
.fship-item--verified .fship-item__check {
  background: var(--pp-success, #15803d);
  border-color: var(--pp-success, #15803d);
  color: #fff;
}
.fship-item--verified .fship-item__qty { background: var(--pp-success-soft, #dcfce7); color: var(--pp-success, #15803d); }
.fship-item--verified .fship-item__title { color: var(--pp-text-muted, #6b7280); }
.fship-item.is-hit   { background: var(--pp-success-soft, #dcfce7); border-radius: 8px; }
.fship-item.is-error { background: var(--pp-danger-soft, #fee2e2); border-radius: 8px; }
.fship-verify--complete .fship-card__title::after { content: " · verified"; color: var(--pp-success, #15803d); font-weight: 700; }

/* Notes the packer must read (gift message stands out most). */
.fship-notes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fship-note { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface-2, #f8fafc); }
.fship-note--gift     { background: var(--pp-warning-soft, #fef3c7); border-color: var(--pp-warning, #f59e0b); }
.fship-note--customer { background: var(--pp-accent-soft, #eff6ff); border-color: var(--pp-accent, #2563eb); }
.fship-note__label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-text-muted, #6b7280); margin-bottom: 2px; }
.fship-note--gift .fship-note__label { color: #92400e; }
.fship-note__body { margin: 0; font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.fship-note--gift .fship-note__body { font-size: 16px; font-weight: 600; }

/* Inserts: tap the checkbox as each one goes in. */
.fship-insert__check { display: inline-flex; align-items: center; gap: 8px; }
.fship-insert__check input { width: 22px; height: 22px; accent-color: var(--pp-success, #15803d); }

/* Boxes on the pack form. */
.fship-boxes { display: flex; flex-direction: column; gap: 10px; }
.fship-box { margin: 0; padding: 10px 12px 4px; border: 1px solid var(--pp-border, #e5e7eb); border-radius: 12px; min-width: 0; }
.fship-box:only-child { border: 0; padding: 0; }
.fship-box:only-child .fship-box__legend { display: none; }
.fship-box__legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; font-size: 13px; font-weight: 800; color: var(--pp-text-muted, #6b7280); }
.fship-box__remove { border: 0; background: none; color: var(--pp-danger, #b91c1c); font-size: 13px; font-weight: 600; padding: 4px 6px; }
.fship-boxes__add { width: 100%; min-height: 44px; margin-top: 8px; }
.fship-done__packages { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fship-done__packages li { display: flex; justify-content: space-between; gap: 8px; }
.fship-done__packages code { font-size: 12px; }

.fship-address { display: flex; flex-direction: column; gap: 1px; font-style: normal; font-size: 14px; line-height: 1.4; }
.fship-address strong { font-size: 15px; }

/* ── Readiness card ───────────────────────────────────── */
.fship-ready {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.fship-ready--blocked { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: #7f1d1d; }
.fship-ready--warn    { background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14)); color: #78350f; }
.fship-ready__hdr { display: flex; align-items: center; gap: 10px; }
.fship-ready__icon { flex: 0 0 auto; width: 28px; height: 28px; }
.fship-ready__icon svg { width: 100%; height: 100%; }
.fship-ready--blocked .fship-ready__icon { color: var(--pp-danger, #b91c1c); }
.fship-ready--warn .fship-ready__icon    { color: var(--pp-warning, #b45309); }
.fship-ready__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fship-ready__title { margin: 0; font-size: 16px; font-weight: 800; }
.fship-ready__sub { margin: 0; font-size: 12px; opacity: 0.85; }
.fship-ready__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fship-ready__item { display: flex; align-items: flex-start; gap: 10px; }
.fship-ready__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.fship-ready__item--block .fship-ready__dot { background: var(--pp-danger, #b91c1c); opacity: 1; }
.fship-ready__item--warn  .fship-ready__dot { background: var(--pp-warning, #b45309); opacity: 1; }
.fship-ready__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fship-ready__item-title { font-size: 14px; font-weight: 600; }
.fship-ready__item-detail { font-size: 12px; opacity: 0.85; line-height: 1.4; }
.fship-ready__fix { flex: 0 0 auto; }
.fship-ready__ack {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
}
.fship-ready__ack input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--pp-warning, #b45309); }

/* ── Pack form ────────────────────────────────────────── */
.fship-form { gap: 14px; }
.fship-form .input { min-height: 48px; font-size: 16px; } /* ≥16px stops iOS zooming on focus */
.fship-field { display: flex; flex-direction: column; gap: 6px; }
.fship-field__label { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pp-text-muted, #6b7280); }
.fship-field__select { width: 100%; }
.fship-field__hint { margin: 0; font-size: 12px; line-height: 1.4; }

.fship-dims__inputs { display: flex; align-items: center; gap: 6px; }
.fship-dims__inputs .input { flex: 1; min-width: 0; text-align: center; padding-left: 6px; padding-right: 6px; }
.fship-dims__x { color: var(--pp-text-subtle, #9ca3af); font-weight: 600; }
.fship-dims__unit { flex: 0 0 64px; }

.fship-weight__inputs { display: flex; gap: 8px; }
.fship-weight__value { flex: 1; min-width: 0; font-size: 20px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.fship-weight__unit { flex: 0 0 72px; }
.fship-weight__scale { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; font-weight: 700; border-radius: 12px; }
.fship-weight__scale svg { width: 18px; height: 18px; }
.fship-weight__scale[aria-busy="true"] { opacity: 0.7; }
.fship-weight__est { font-weight: 500; text-transform: none; letter-spacing: 0; }

.fship-money { position: relative; display: flex; }
.fship-money__sym { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pp-text-muted, #6b7280); font-weight: 600; pointer-events: none; }
.fship-money .input { flex: 1; padding-left: 26px; }

.fship-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-height: 32px; }
.fship-toggle input { width: 22px; height: 22px; accent-color: var(--pp-accent, #2563eb); }

.fship-form__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10));
  color: var(--pp-danger, #b91c1c);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Rates */
.fship-rates { display: flex; flex-direction: column; gap: 8px; }
.fship-rates__bar { display: flex; gap: 8px; }
.fship-rates__profile { flex: 1; min-width: 0; }
.fship-rates__btn { flex: 1; min-height: 44px; font-weight: 700; border-radius: 12px; }
.fship-rates__bar .fship-rates__profile + .fship-rates__btn { flex: 0 0 auto; padding: 0 16px; }
.fship-rates__quoted { margin: 0; font-size: 13px; }
.fship-rates__errors { margin: 0; font-size: 12px; line-height: 1.4; }
.fship-rates__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fship-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  text-align: left;
  background: var(--pp-surface-2, #f8fafc);
  border: 1.5px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.fship-rate:active { background: var(--pp-accent-soft, #eff6ff); }
.fship-rate--winner { border-color: var(--pp-success, #15803d); }
.fship-rate.is-selected { border-color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #eff6ff); }
.fship-rate__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fship-rate__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fship-rate__meta { font-size: 12px; color: var(--pp-text-muted, #6b7280); }
.fship-rate__price { flex: 0 0 auto; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* CTA states */
.fship-cta:disabled { opacity: 0.55; }
.fship-cta--blocked:disabled { background: var(--pp-danger-soft, rgba(220, 38, 38, 0.10)); color: var(--pp-danger, #b91c1c); border-color: transparent; opacity: 1; }

/* ── Done overlay ─────────────────────────────────────── */
.fship-done {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fship-done__card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 360px; text-align: center; }
.fship-done__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--pp-success, #15803d);
  color: #fff;
  animation: fship-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.fship-done__check svg { width: 36px; height: 36px; }
.fship-done__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-success, #15803d); }
.fship-done__tracking { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; word-break: break-all; }
.fship-done__note { margin: 0; font-size: 13px; line-height: 1.4; }
.fship-done__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 16px; }
.fship-done__actions .btn { min-height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; }
@keyframes fship-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Floor feedback (worker side) — .ffb-* ─────────────────────────────── */
.ffb-form { display: flex; flex-direction: column; gap: 20px; padding-bottom: 96px; }
.ffb-subject { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.ffb-subject__label { font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.ffb-subject__value { font-size: 14px; font-weight: 600; text-align: right; }

.ffb-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ffb-category {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ffb-category input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ffb-category__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ffb-category__title { font-size: 14px; font-weight: 700; }
.ffb-category__hint { font-size: 12px; line-height: 1.35; color: var(--pp-text-muted, #6b7280); }
.ffb-category:has(input:checked) { border-color: var(--pp-accent, #0e45a5); box-shadow: 0 0 0 2px var(--pp-accent-soft, rgba(14, 69, 165, 0.15)); }
.ffb-category--safety:has(input:checked)  { border-color: var(--pp-danger, #dc2626);  box-shadow: 0 0 0 2px var(--pp-danger-soft, rgba(220, 38, 38, 0.15)); }
.ffb-category--kudos:has(input:checked)   { border-color: var(--pp-success, #15803d); box-shadow: 0 0 0 2px var(--pp-success-soft, rgba(22, 163, 74, 0.15)); }
.ffb-category:active { transform: scale(0.98); }
.ffb-categories .ffb-category:last-child:nth-child(odd) { grid-column: 1 / -1; }

.ffb-body { font-size: 16px; line-height: 1.5; }
.ffb-body p { margin: 0 0 8px; }
.ffb-body p:last-child { margin-bottom: 0; }
textarea.ffb-body { min-height: 120px; font-size: 16px; }

.ffb-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--pp-surface, #fff);
  border: 1px dashed var(--pp-border-strong, #cbd5e1);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-accent, #0e45a5);
  cursor: pointer;
  width: max-content;
}
.ffb-photo-btn svg { width: 20px; height: 20px; }
.ffb-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ffb-photo-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.ffb-photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--pp-border, #e5e7eb); }

.ffb-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ffb-photos__item { display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--pp-border, #e5e7eb); }
.ffb-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ffb-thread { display: flex; flex-direction: column; gap: 12px; }
.ffb-thread__empty { margin: 0; }
.ffb-thread__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ffb-thread__msg { padding: 10px 12px; border-radius: 12px; background: var(--pp-surface-2, #f4f4f5); }
.ffb-thread__msg--submitter { background: var(--pp-accent-soft, rgba(14, 69, 165, 0.08)); }
.ffb-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.ffb-thread__body { font-size: 14px; line-height: 1.45; }
.ffb-thread__body p { margin: 0 0 6px; }
.ffb-thread__body p:last-child { margin-bottom: 0; }
.ffb-thread__form { display: flex; flex-direction: column; gap: 8px; }
.ffb-thread__actions { display: flex; justify-content: flex-end; }

.floor-chip--feedback svg { color: var(--pp-success, #15803d); }
.sop-page__feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--pp-border, #e5e7eb); }
.sop-page__feedback .btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* ── Floor pick fulfillment glance (.fpick) ───────────────────────────
   Phone-first detail for one fulfillment from /floor/pick/orders. Reuses
   .fship-card / .fship-item chrome; only the status chips are pick-specific. */
.fpick { padding-bottom: 88px; }
.fpick-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: var(--pp-surface-2, #f8fafc);
}
.fpick-status--ready {
  background: var(--pp-accent-soft, rgba(37, 99, 235, 0.10));
}
.fpick-status--ready .floor-work__eyebrow { color: var(--pp-accent, #2563eb); }
.fpick-status--blocked {
  background: var(--pp-warning-soft, rgba(180, 83, 9, 0.12));
}
.fpick-status--blocked .floor-work__eyebrow { color: var(--pp-warning-text, #b45309); }
.fpick-status .floor-work__headline { font-size: 20px; }
.fpick-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
.fpick-facts div { display: contents; }
.fpick-facts dt { color: var(--pp-text-muted, #6b7280); }
.fpick-facts dd { margin: 0; font-weight: 600; }
.fpick-item__status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pp-text-muted, #6b7280);
}
.fpick-item__status--pending { color: var(--pp-text-muted, #6b7280); }
.fpick-item__status--picked { color: var(--pp-success, #15803d); }
.fpick-item__status--short { color: var(--pp-danger, #b91c1c); }
.fpick-item__status--picking { color: var(--pp-warning-text, #b45309); }

/* ═══════════════════════════════════════════════════════════════════════
   Returns on the floor (.rtnf-*) — floor/returns/*
   Find → receive by tap or scan into a scanned bin → flag issues → finish.
   ═══════════════════════════════════════════════════════════════════════ */

/* Controller wrapper — no box of its own so the layout's flex column and
   the sticky action bar behave exactly as on other floor pages. */
.rtnf-root { display: contents; }
/* A request is in flight: dim the tap targets so a slow round-trip reads
   as "working", not "ignored". Double-taps are already dropped in JS. */
.rtnf-root[aria-busy] .rtnf-card__step,
.rtnf-root[aria-busy] .rtnf-card__issue,
.rtnf-root[aria-busy] .rtnf-feedback { opacity: 0.55; transition: opacity 0.15s var(--pp-ease, ease); }
.rtnf-root[aria-busy] .rtnf-feedback::after { content: " …"; }

/* ── Find: scan-first card ─────────────────────────────── */
.rtnf-scan__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 16px;
  text-align: left;
  color: #fff;
  background: var(--pp-accent, #2563eb);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--pp-shadow-md, 0 6px 18px rgba(37, 99, 235, 0.25));
  cursor: pointer;
}
.rtnf-scan__btn:active { background: var(--pp-accent-hover, #1d4ed8); }
.rtnf-scan__icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.rtnf-scan__icon svg { width: 32px; height: 32px; }
.rtnf-scan__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtnf-scan__text strong { font-size: 16px; font-weight: 800; line-height: 1.2; }
.rtnf-scan__text span { font-size: 13px; opacity: 0.85; line-height: 1.3; }

/* ── Receive: progress header ──────────────────────────── */
.rtnf-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
}
.rtnf-progress--done { background: var(--pp-success-soft, #dcfce7); border-color: transparent; }
.rtnf-progress--closed { background: var(--pp-surface-2, #f4f4f5); border-color: transparent; }
.rtnf-progress__row { display: flex; align-items: center; gap: 12px; }
.rtnf-progress__body { flex: 1; min-width: 0; }
.rtnf-progress__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted, #6b7280);
}
.rtnf-progress__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rtnf-progress__title strong { font-weight: 800; }
.rtnf-progress__check {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--pp-success, #16a34a);
  border-radius: 50%;
}
.rtnf-progress__check svg { width: 20px; height: 20px; }
.rtnf-progress__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.rtnf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pp-text-muted, #6b7280);
  background: var(--pp-surface-2, #f4f4f5);
  border-radius: 999px;
  max-width: 100%;
}
.rtnf-pill--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtnf-pill--info { color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #e8eefb); }
.rtnf-pill--warn { color: var(--pp-warning, #b45309); background: var(--pp-warning-soft, #fef3c7); }
.rtnf-pill--muted { color: var(--pp-text-muted, #6b7280); }
.rtnf-pill--quote { font-weight: 500; font-style: italic; white-space: normal; }

/* ── Receive: active bin chip ──────────────────────────── */
.rtnf-bin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  background: var(--pp-accent-soft, #e8eefb);
  border: 1px solid transparent;
  border-radius: 12px;
}
.rtnf-bin--unset { background: var(--pp-warning-soft, #fef3c7); }
.rtnf-bin__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--pp-accent, #2563eb); }
.rtnf-bin--unset .rtnf-bin__icon { color: var(--pp-warning, #b45309); }
.rtnf-bin__icon svg { width: 24px; height: 24px; }
.rtnf-bin__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rtnf-bin__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-text-muted, #6b7280); }
.rtnf-bin__code { font-size: 18px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtnf-bin--unset .rtnf-bin__code { font-size: 14px; font-weight: 600; color: var(--pp-warning, #b45309); }
.rtnf-bin__name { font-size: 13px; font-weight: 500; color: var(--pp-text-muted, #6b7280); }
.rtnf-bin__change { flex: 0 0 auto; min-height: 40px; }

/* ── Receive: feedback strip ───────────────────────────── */
.rtnf-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 12px;
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text, #18181b);
}
.rtnf-feedback[hidden] { display: none !important; }
.rtnf-feedback--ok    { background: var(--pp-success-soft, #dcfce7); color: var(--pp-success, #166534); }
.rtnf-feedback--error { background: var(--pp-danger-soft, #fee2e2); color: var(--pp-danger, #991b1b); }
.rtnf-feedback--warn  { background: var(--pp-warning-soft, #fef3c7); color: var(--pp-warning, #b45309); }
.rtnf-feedback--info  { background: var(--pp-accent-soft, #e8eefb); color: var(--pp-accent, #2563eb); }
.rtnf-feedback__text { flex: 1; min-width: 0; }
.rtnf-feedback__btn { flex: 0 0 auto; min-height: 36px; }
.rtnf-feedback__form { display: contents; }
.rtnf-feedback--shake { animation: rtnf-shake 0.3s var(--pp-ease, ease); }
@keyframes rtnf-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Receive: typed code form ──────────────────────────── */
.rtnf-code { display: flex; gap: 8px; }
.rtnf-code__input.input { flex: 1; min-height: 48px; font-size: 16px; border-radius: 12px; }
.rtnf-code .btn { min-height: 48px; border-radius: 12px; }

/* ── Receive: line cards ───────────────────────────────── */
.rtnf-lines { display: flex; flex-direction: column; gap: 10px; }
.rtnf-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 14px;
  transition: border-color 0.2s var(--pp-ease, ease), background 0.2s var(--pp-ease, ease);
}
.rtnf-card--started { border-color: var(--pp-accent, #2563eb); }
.rtnf-card--done { background: var(--pp-surface-2, #f4f4f5); border-color: transparent; }
.rtnf-card--done .rtnf-card__title { color: var(--pp-text-muted, #6b7280); }
.rtnf-card__top { display: flex; align-items: flex-start; gap: 12px; }
.rtnf-card__thumb { width: 52px; height: 52px; border-radius: 12px; }
.rtnf-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rtnf-card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.rtnf-card__meta { margin: 0; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.rtnf-card__sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--pp-text, #18181b); }
.rtnf-card__quote { margin: 0; font-size: 13px; font-style: italic; color: var(--pp-text-muted, #6b7280); }
.rtnf-card__flags { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rtnf-card__count {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 13px;
  color: var(--pp-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.rtnf-card__count strong { font-size: 22px; font-weight: 800; color: var(--pp-text, #18181b); line-height: 1; }
.rtnf-card__count--done strong { color: var(--pp-success, #16a34a); }

.rtnf-card__controls { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; }
.rtnf-card__form { display: contents; }
.rtnf-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  font-size: 22px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--pp-border, #e5e7eb);
  background: var(--pp-surface, #fff);
  color: var(--pp-text, #18181b);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rtnf-card__step:disabled { opacity: 0.4; cursor: default; }
.rtnf-card__step--minus:active:not(:disabled) { background: var(--pp-surface-2, #f4f4f5); }
.rtnf-card__step--plus {
  color: #fff;
  background: var(--pp-success, #16a34a);
  border-color: transparent;
}
.rtnf-card__step--plus:active:not(:disabled) { filter: brightness(0.92); }
.rtnf-card--done .rtnf-card__step--plus { background: var(--pp-surface-2, #f4f4f5); color: var(--pp-text-muted, #6b7280); }
.rtnf-card__step-text { font-size: 16px; font-weight: 700; }
.rtnf-card__issue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-warning, #b45309);
  background: var(--pp-warning-soft, #fef3c7);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.rtnf-card__issue:disabled { opacity: 0.4; cursor: default; }
.rtnf-card__issue svg { width: 18px; height: 18px; }
.rtnf-card__controls--pick { grid-template-columns: 1fr; }

/* ── Stepper (issue sheet, blind-return composer) ──────── */
.rtnf-stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.rtnf-stepper__btn {
  min-height: 52px;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 12px;
  background: var(--pp-surface, #fff);
  color: var(--pp-text, #18181b);
  cursor: pointer;
}
.rtnf-stepper__btn:active { background: var(--pp-surface-2, #f4f4f5); }
.rtnf-stepper__input.input {
  min-height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 12px;
  -moz-appearance: textfield;
}
.rtnf-stepper__input::-webkit-outer-spin-button,
.rtnf-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Issue sheet ───────────────────────────────────────── */
.rtnf-issue .modal-content,
.rtnf-binsheet .modal-content { max-width: 520px; }
.rtnf-issue__form { display: contents; }
.rtnf-issue__subtitle { margin: 2px 0 0; font-size: 13px; }
.rtnf-issue__body { display: flex; flex-direction: column; gap: 16px; }
.rtnf-issue__group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rtnf-issue__row { display: flex; flex-direction: column; gap: 8px; }
.rtnf-issue__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, #6b7280);
}
.rtnf-issue__bin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rtnf-issue__photo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; }

.rtnf-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rtnf-seg__opt { position: relative; display: block; cursor: pointer; }
.rtnf-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.rtnf-seg__opt span,
.rtnf-seg__opt small { display: block; }
.rtnf-seg__opt > span {
  padding: 12px 10px 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--pp-border, #e5e7eb);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.rtnf-seg__opt > small {
  padding: 0 10px 10px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--pp-text-muted, #6b7280);
  border: 2px solid var(--pp-border, #e5e7eb);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.rtnf-seg__opt input:checked ~ span,
.rtnf-seg__opt input:checked ~ small { border-color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #e8eefb); }
.rtnf-seg__opt input:checked ~ span { color: var(--pp-accent, #2563eb); }
.rtnf-seg__opt input:focus-visible ~ span { outline: 2px solid var(--pp-accent, #2563eb); outline-offset: 2px; }

.rtnf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rtnf-chips__opt { position: relative; cursor: pointer; }
.rtnf-chips__opt input { position: absolute; opacity: 0; pointer-events: none; }
.rtnf-chips__opt span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 999px;
  background: var(--pp-surface, #fff);
}
.rtnf-chips__opt input:checked + span { color: #fff; background: var(--pp-accent, #2563eb); border-color: transparent; }
.rtnf-chips__opt input:focus-visible + span { outline: 2px solid var(--pp-accent, #2563eb); outline-offset: 2px; }

.rtnf-binsheet__scan { width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; }
.rtnf-binsheet__scan svg { width: 22px; height: 22px; }

/* ── Return note ───────────────────────────────────────── */
.rtnf-note { display: flex; flex-direction: column; gap: 8px; }
.rtnf-note__office {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--pp-surface-2, #f4f4f5);
  border-radius: 10px;
}
.rtnf-note__office-label { font-weight: 700; color: var(--pp-text-muted, #6b7280); }
.rtnf-note__form { display: flex; flex-direction: column; gap: 8px; }
.rtnf-note__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-text-muted, #6b7280); }
.rtnf-note__input.input { font-size: 15px; border-radius: 12px; }
.rtnf-note__row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rtnf-note__hint { font-size: 12px; font-weight: 600; color: var(--pp-success, #16a34a); }
.rtnf-note__saved { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.4; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); border-radius: 10px; }
.rtnf-note__saved p { margin: 0; }

/* ── Action bar variants ───────────────────────────────── */
.rtnf-actions__scan { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; }
.rtnf-actions__scan svg { width: 22px; height: 22px; }
.rtnf-actions__finish { flex: 1; display: inline-flex; align-items: center; justify-content: center; }
.rtnf-actions__finish--idle { opacity: 0.7; }
.rtnf-actions__wide { flex: 1; display: inline-flex; align-items: center; justify-content: center; }
.rtnf-actions__form { flex: 1; display: flex; }
.rtnf-actions__form .btn { flex: 1; }

/* ── Finish ────────────────────────────────────────────── */
.rtnf-finish__issue .floor-work__item-title { display: flex; align-items: center; gap: 8px; white-space: normal; }
.rtnf-finish__photos { display: flex; gap: 6px; margin-top: 6px; }
.rtnf-finish__photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.rtnf-finish__refund { margin: 0; font-size: 13px; text-align: center; }

/* ── Blind-return composer ─────────────────────────────── */
.rtnf-new__form { display: flex; flex-direction: column; gap: 16px; }
.rtnf-card--pick .rtnf-card__controls { grid-template-columns: 1fr; }

@media (max-width: 420px) {
  .rtnf-seg { grid-template-columns: 1fr; }
  .rtnf-seg__opt > span { padding: 10px 10px 2px; }
  .rtnf-card__step-text { display: none; }
}