/* ============================================================
   Mapper by COGW — design tokens (v6: Apple HIG dark system)
   SF Pro (system font) for UI text, SF Mono for barcodes / SKUs / bin
   codes. No custom webfonts — the OS ships San Francisco natively on
   every Apple device, so the system stack below resolves straight to
   real SF Pro / SF Mono with zero network cost and perfect Dynamic
   Type / accessibility-size behavior.
   ============================================================ */

:root {
  /* ---- HIG palette (deep, rich dark theme) ---- */
  --bg:          #0B0B0D;  /* near-black — premium depth */
  --surface:     #1C1C1E;  /* secondary background — headers, sheets, cards */
  --surface-2:   #2C2C2E;  /* tertiary background — nested chips, inputs, rows */
  --surface-3:   #3A3A3C;  /* quaternary — hover/active fill on surface-2 */
  --line:        color-mix(in srgb, #FFFFFF 12%, transparent); /* glass hairline */
  --text:        #FFFFFF;  /* label */
  --text-dim:    #A1A1A6;  /* secondary label */
  --text-tertiary: #98989D; /* tertiary label — readable on deep dark bg */

  /*
   * Logo accents (sampled from icons/logo-header.png / icon-512.png):
   *   periwinkle #7878B8 · lavender #B8B0F0 · lilac #D0D0F0 · pink #F088D8 · white #F8F8F8
   * Restraint: neutrals dominate; logo colors are accents only — no rainbow fills.
   */
  --logo-peri:   #7878B8;  /* deep periwinkle — secondary chrome */
  --logo-lav:    #B8B0F0;  /* soft lavender — primary interactive */
  --logo-lilac:  #D0D0F0;  /* light lilac — highlights / soft fills */
  --logo-pink:   #F088D8;  /* candy pink facet — rare CTA accent */
  --logo-white:  #F8F8F8;  /* crystal highlight */

  --accent:      var(--logo-lav);
  --accent-2:    var(--logo-peri);
  --accent-3:    var(--logo-lilac);
  --pink:        var(--logo-pink);
  --indigo:      var(--logo-peri);
  --purple:      var(--logo-lav);
  --accent-ink:  #14121A;  /* dark ink on filled lavender/pink */

  /* Semantic system colors (Apple dark-mode system palette) */
  --success:     #30D158;
  --warning:     #FF9F0A;
  --danger:      #FF453A;
  --amber:       var(--warning); /* legacy alias */
  --red:         var(--danger);  /* legacy alias */
  --green:       var(--success); /* legacy alias */

  /* Categorical shelf colors (T/B rack series — data identity, not UI chrome) */
  --fx-cyan:    #5CE1E6;
  --fx-cyan-2:  #5CE1E6;
  --fx-orange:  #DA702C;
  --fx-paper:   #FFFFFF;
  --fx-black:   var(--bg);
  --fx-850:     var(--surface-2);

  /* ---- Corner radius (16–20pt system) ---- */
  --radius:        16px;  /* cards / nested surfaces */
  --radius-card:   16px;
  --radius-sheet:  20px;  /* bottom sheets / slide-up panels */
  --radius-button: 16px;  /* primary controls — matches card radius */
  --radius-sm:     12px;  /* chips, segments, nested inputs */
  --radius-pill:   999px; /* pills / badges */

  /* ---- Motion: subtle spring (iOS-like, not bouncy) ---- */
  --ease-spring:         cubic-bezier(0.22, 1.15, 0.36, 1);
  --ease-spring-out:     cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring-snappy:  cubic-bezier(0.2, 0.9, 0.2, 1);

  --tap: 44px; /* HIG minimum tap target */

  /* ---- Typography: system SF Pro (text) + SF Mono (codes) ---- */
  --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          system-ui, "Segoe UI", Roboto, sans-serif;

  /* HIG type scale (Large Title → Caption 2), 4pt-aligned line-heights */
  --text-2xs:  11px; /* Caption 2 */
  --text-xs:   12px; /* Caption 1 */
  --text-sm:   13px; /* Footnote */
  --text-base: 16px; /* Body */
  --text-lg:   17px; /* Headline */
  --text-xl:   20px; /* Title 3 */
  --text-2xl:  22px; /* Title 2 */
  --text-3xl:  28px; /* Title 1 */
  --text-4xl:  34px; /* Large Title */
  --leading-tight:  1.15;
  --leading-normal: 1.4;

  /* ---- Spacing: strict 4pt grid ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;  /* standard gap between elements */
  --space-5: 20px;  /* standard edge padding */
  --space-6: 24px;  /* breathing room */
  --space-7: 32px;  /* generous breathing room on important screens */
  --space-8: 48px;
  --edge:    var(--space-5); /* 20pt from edges */
  --gap:     var(--space-4); /* 16pt between elements */

  /* Elevation — true-black tinted, soft and low-opacity (Apple-style) */
  --shadow-sm:
    0 1px 2px color-mix(in srgb, #000 35%, transparent),
    0 2px 6px color-mix(in srgb, #000 22%, transparent);
  --shadow-md:
    0 2px 8px color-mix(in srgb, #000 40%, transparent),
    0 8px 24px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg:
    0 4px 12px color-mix(in srgb, #000 45%, transparent),
    0 16px 40px color-mix(in srgb, #000 55%, transparent);

  /* ---- Materials (expensive frosted glass) ---- */
  --glass-fill: color-mix(in srgb, #2C2C2E 55%, transparent);
  --glass-fill-strong: color-mix(in srgb, #1C1C1E 72%, transparent);
  --glass-stroke: color-mix(in srgb, #FFFFFF 14%, transparent);
  --glass-stroke-soft: color-mix(in srgb, #FFFFFF 8%, transparent);
  --glass-highlight:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 16%, transparent);
  --material-thin: color-mix(in srgb, var(--surface) 55%, transparent);
  --material-regular: color-mix(in srgb, var(--surface) 70%, transparent);
  --material-blur: blur(28px) saturate(1.8);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button,
input,
select,
textarea {
  font-family: var(--sans);
}

/* ---------- top bar (iPhone 15 Pro: ~393pt wide) ---------- */
/* v6: slightly translucent + blurred (Apple nav-bar material). Respects
 * Dynamic Island via the safe-area-inset-top padding below. The bar's
 * own footprint is small relative to the screen, so the backdrop-filter
 * cost stays acceptable even while the camera runs behind it — unlike
 * the full-bleed overlays (.toast, .reconnect-banner) which stay blur-free
 * on tab-scan to protect decode FPS. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 8px;
  border-bottom: 1px solid var(--glass-stroke-soft);
  background: var(--material-thin);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  box-shadow: var(--glass-highlight);
  flex: none;
  min-height: 0;
  position: relative;
  z-index: 20;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: none;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.topbar-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.brand-mark { width: 22px; height: 22px; display: block; flex: none; border-radius: 5px; }
.brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
/* Clean SF Pro wordmark — no gradient text */
.brand-name {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: var(--text-base);
  color: var(--text);
}
.brand-by {
  font-size: var(--text-xs);
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}

.pill {
  font: 600 var(--text-xs)/1 var(--mono);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
/* Soft filled tint — more glanceable than border-only during fast scanning */
.pill-ok {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.pill-warn {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.pill-muted { color: var(--text-dim); }
/* Status dots on Online/Offline + Mock — Live pill is hidden (mobile space). */
#net-status,
#mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#mode-pill[hidden] {
  display: none !important;
}
#net-status::before,
#mode-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
/* v6: Online gets a steady glow (connectivity is binary); Live gets the
 * breathing animation — a deliberate, ongoing reminder that Apply writes
 * are real, not a mock-mode simulation. */
#net-status.pill-ok::before {
  color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}
#mode-pill.pill-ok::before {
  color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
  animation: status-pulse 2.6s ease-in-out infinite;
}
/* Right cluster: pills | actions (settings + Bin Map tools) */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: none;
  justify-content: flex-end;
}
.topbar-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding-left: 6px;
  border-left: 1px solid var(--line);
}
/* Bin Map: mute Online/Live pills — context, not scan-critical */
body.tab-report #net-status.pill-ok,
body.tab-report #net-status.pill-warn,
body.tab-report #mode-pill.pill-ok,
body.tab-report #mode-pill.pill-warn,
body.tab-orders #net-status.pill-ok,
body.tab-orders #net-status.pill-warn,
body.tab-orders #mode-pill.pill-ok,
body.tab-orders #mode-pill.pill-warn {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--line);
}
/* Bin Map CSV / Refresh — only when report tab is active */
.topbar-report-actions {
  display: none;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}
body.tab-report .topbar-report-actions {
  display: flex;
}
/* Orders refresh — only when Orders tab is active */
.topbar-orders-actions {
  display: none;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}
body.tab-orders .topbar-orders-actions {
  display: flex;
}
/* Bin Map / Orders always use the compact header because the app column is phone-width. */
body.tab-report .topbar,
body.tab-orders .topbar {
  gap: 6px;
  padding-inline: 10px;
}
body.tab-report .topbar-brand,
body.tab-orders .topbar-brand {
  gap: 6px;
}
body.tab-report .brand-mark,
body.tab-orders .brand-mark {
  width: 20px;
  height: 20px;
}
body.tab-report .topbar-end,
body.tab-orders .topbar-end {
  gap: 6px;
}
body.tab-report .topbar-pills,
body.tab-orders .topbar-pills {
  gap: 4px;
}
body.tab-report .topbar-actions,
body.tab-orders .topbar-actions {
  gap: 0;
  padding-left: 4px;
}
body.tab-report .topbar-report-actions,
body.tab-orders .topbar-orders-actions {
  gap: 0;
}
.topbar-report-actions .icon-btn:disabled,
.topbar-orders-actions .icon-btn:disabled {
  opacity: .35;
  cursor: default;
}
.topbar-report-actions .icon-btn svg,
.topbar-orders-actions .icon-btn svg {
  display: block;
}
/* Spin refresh glyph while loading (button disabled during fetch) */
#btn-report-refresh:disabled .ico-refresh,
#btn-orders-refresh:disabled .ico-refresh {
  animation: spin .8s linear infinite;
}
#btn-report-filters .ico-filter-toggle {
  transition: transform .18s ease;
}
#btn-report-filters[aria-expanded="false"] .ico-filter-toggle {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  #btn-report-refresh:disabled .ico-refresh,
  #btn-orders-refresh:disabled .ico-refresh { animation: none; }
}
.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-base);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { display: block; }
.topbar .icon-btn {
  position: relative;
  border: 0;
  background: transparent;
}
.topbar .icon-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
}
.topbar .icon-btn > svg {
  position: relative;
  z-index: 1;
}

/* ---------- views ---------- */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.view { display: none; flex: 1; flex-direction: column; min-height: 0; }
.view.is-active { display: flex; }

/* v6: Scan view — camera dominates; lock banner + sheet stack below */
#view-preview {
  background: var(--bg);
}
#view-preview .mode-header {
  flex: none;
}
#view-preview .preview-wrap {
  flex: 1;
  min-height: 0;
}

/* ---------- permission gate (fits iPhone 15 Pro above tab bar) ---------- */
#view-permission {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  align-items: center;
  /* Keep content clear of topbar chrome + home indicator when scrolling */
  padding:
    var(--space-4)
    max(var(--space-4), env(safe-area-inset-left, 0px))
    var(--space-4)
    max(var(--space-4), env(safe-area-inset-right, 0px));
}
.perm-card {
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.perm-hero {
  margin-bottom: var(--space-5);
}
.perm-icon-ring {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  color: var(--logo-lav);
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in srgb, var(--logo-pink) 22%, transparent),
      transparent 58%),
    radial-gradient(circle at 70% 75%,
      color-mix(in srgb, var(--logo-peri) 28%, transparent),
      transparent 55%),
    color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--logo-lav) 28%, transparent);
  box-shadow:
    var(--glass-highlight),
    0 0 0 10px color-mix(in srgb, var(--logo-peri) 7%, transparent),
    0 12px 40px color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
.perm-icon-ring svg {
  display: block;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, #FFF 18%, transparent));
}
.perm-title,
.perm-card h1 {
  /* Large Title — primary screen header */
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -.022em;
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
}
.perm-copy {
  color: var(--text-dim);
  font-size: var(--text-base); /* Body */
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
  max-width: 22em;
}
.perm-cta {
  max-width: 300px;
  min-height: 54px;
  font-size: var(--text-lg); /* Headline */
  font-weight: 650;
  letter-spacing: -.015em;
  box-shadow:
    var(--glass-highlight),
    var(--shadow-md);
}
.fallback-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin-top: var(--space-3);
}
.fallback-actions .btn {
  padding-inline: var(--space-4);
  min-height: 46px;
  font-size: var(--text-sm);
  font-weight: 550;
}
.fallback-status {
  width: 100%;
  max-width: 300px;
  margin: var(--space-2) 0 0;
  color: var(--text-dim);
  font-size: var(--text-xs);
}
.fallback-status.is-error {
  color: var(--red);
}
.perm-privacy {
  margin: var(--space-6) 0 0;
  max-width: 26em;
  color: var(--text-dim);
  font-size: var(--text-xs); /* Caption 1 */
  line-height: var(--leading-normal);
  letter-spacing: .01em;
}

/* ---------- unified empty states ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
}
.empty-state[hidden] { display: none !important; }
.empty-state-ico {
  display: block;
  color: var(--logo-lilac);
  opacity: .6;
}
.empty-state-copy {
  margin: 0;
  font: 600 var(--text-base)/var(--leading-normal) var(--sans);
  color: var(--text-dim);
  max-width: 18em;
}
.empty-state-hint {
  margin: 0;
  font: 500 var(--text-sm)/var(--leading-normal) var(--sans);
  color: var(--text-tertiary);
  max-width: 20em;
}
.empty-state.is-error .empty-state-ico {
  color: var(--danger);
  opacity: .85;
}
.empty-state.is-error .empty-state-copy {
  color: var(--text);
}

/* Smooth gate → live scan reveal (respects reduced motion) */
@keyframes preview-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#view-preview.is-entering {
  animation: preview-enter .42s var(--ease-spring) both;
}
@media (prefers-reduced-motion: reduce) {
  #view-preview.is-entering {
    animation: none;
  }
}

.perm-state {
  margin-top: var(--space-3);
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.perm-state-wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: auto;
}
.perm-state-error {
  text-align: left;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-card);
  padding: var(--space-3) 14px;
  color: var(--text);
}
.perm-error-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.perm-error-pill {
  font: 700 var(--text-xs)/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.perm-state-error strong {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 650;
}
.perm-state-error p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-dim);
}
.perm-steps {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  color: var(--text-dim);
  font-size: var(--text-xs);
}
.perm-steps li {
  margin-bottom: 6px;
  line-height: var(--leading-normal);
}
.perm-steps li:last-child { margin-bottom: 0; }

/* ---------- buttons (HIG 3-tier system) ----------
 * Primary   — large rounded rect (20pt radius), filled accent teal, dark ink.
 * Secondary — pill (999), subtle border + frosted material fill.
 * Tertiary  — text-only or a thin, low-chrome pill (see .btn-tertiary).
 * Existing .btn-pill / .btn-pill-sm size modifiers stay (width/height/type
 * scale); shape now comes from the tier class so Primary is never a pill.
 */
.btn {
  font: 600 var(--text-base)/1 var(--sans);
  letter-spacing: -.01em;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform .08s ease,
    filter .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}
.btn:active {
  transform: scale(.97);
  filter: brightness(.95);
  box-shadow: none;
}
.btn-lg { width: 100%; min-height: 52px; font-size: var(--text-lg); }
.btn-pill {
  width: 100%;
  max-width: 280px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: -.015em;
}
.btn-pill-sm {
  width: 100%;
  /* Apple HIG minimum tap target */
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  padding: 0 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: var(--text-sm); }

/* Primary — soft logo lavender fill, continuous corner */
.btn-primary,
.btn-primary.btn-pill,
.btn-primary.btn-pill-sm {
  background: color-mix(in srgb, var(--logo-lav) 88%, var(--logo-white));
  color: var(--accent-ink);
  border-radius: var(--radius-button);
  font-weight: 650;
  border: 1px solid color-mix(in srgb, #FFF 18%, transparent);
  box-shadow:
    var(--glass-highlight),
    var(--shadow-sm);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-sm);
}
.btn-primary:active {
  filter: brightness(.95);
  box-shadow: none;
}
.btn-primary:disabled {
  background: color-mix(in srgb, var(--accent) 55%, var(--surface-2));
}

/* Secondary — frosted glass pill */
.btn-secondary {
  background: var(--glass-fill);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  color: var(--text);
  border-color: var(--glass-stroke);
  font-weight: 550;
  letter-spacing: 0;
  box-shadow: var(--glass-highlight);
}
.btn-secondary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: var(--line);
}
.btn-secondary:active {
  filter: brightness(.95);
  background: var(--surface-2);
}
/* Scan tab sits over the live camera — skip blur to protect decode FPS
 * (same perf rule already applied to .preview-fab / .sw-update-banner). */
body.tab-scan .btn-secondary {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Tertiary — text-only or a thin, minimal-chrome pill (no fill, no border) */
.btn-tertiary {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: none;
  padding: 0 12px;
}
.btn-tertiary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-tertiary:active { filter: brightness(.9); }

.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-2) 55%, transparent); outline-offset: 2px; }
button:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-2) 68%, transparent);
  outline-offset: 2px;
}

/* ---------- camera preview ---------- */
.preview-wrap {
  position: relative;
  flex: 1;
  background: var(--bg);
  overflow: hidden;
}
#preview-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.preview-wrap.is-live #preview-video {
  opacity: 1;
}
/* v6: idle placeholder — no stale camera frame when stream is off */
.preview-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%,
      color-mix(in srgb, var(--logo-peri) 10%, transparent),
      transparent 55%),
    var(--bg);
  color: var(--text-dim);
  transition: opacity .35s ease, visibility .35s ease;
}
.preview-placeholder svg {
  display: block;
  color: var(--logo-lilac);
  opacity: .55;
  filter: none;
}
.preview-placeholder p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-dim);
  max-width: 280px;
  line-height: var(--leading-normal);
  letter-spacing: -.01em;
}
.preview-wrap.is-live .preview-placeholder {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preview-wrap:not(.is-live) .preview-overlay,
.preview-wrap:not(.is-live) .preview-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preview-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, #000 22%, transparent),
    transparent 18%);
}
.brackets {
  position: relative;
  width: min(78vw, 340px);
  aspect-ratio: 2.35 / 1;
  transform: translateY(-8%);
}
/* v6: thin teal guide brackets (was thick white) — calmer, more premium,
 * and reads as an accent-colored guide rather than camera-app chrome. */
/* Thin lavender guide brackets — quiet, premium */
.brackets i {
  position: absolute;
  width: 26px; height: 26px;
  border: 1.5px solid color-mix(in srgb, var(--logo-lav) 70%, transparent);
  border-radius: 2px;
  filter: none;
  opacity: .85;
  transition: border-color 80ms ease, opacity 80ms ease;
}
.brackets i:nth-child(1) { top: 0;    left: 0;    border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.brackets i:nth-child(2) { top: 0;    right: 0;   border-left: none;  border-bottom: none; border-top-right-radius: 10px; }
.brackets i:nth-child(3) { bottom: 0; left: 0;    border-right: none; border-top: none;    border-bottom-left-radius: 10px; }
.brackets i:nth-child(4) { bottom: 0; right: 0;   border-left: none;  border-top: none;    border-bottom-right-radius: 10px; }
.brackets.is-flash-ok i {
  border-color: var(--success);
  opacity: 1;
}
.brackets.is-flash-skip i {
  border-color: var(--warning);
  opacity: 1;
}

/* Thumb-reachable torch control.
 * v6: moved to top-right of the preview — Photo/Manual now live in the
 * sheet (see .sheet-fallbacks), which frees the bottom of the camera for
 * the persistent .lock-banner. Torch is a set-once-and-forget toggle, so
 * top placement doesn't hurt one-handed use in practice.
 * v5 perf note (still applies): no backdrop-filter while Scan is active —
 * blur + live camera decode compete for the same GPU pipeline on iOS
 * Safari. Solid/semi-opaque fill is enough; blur is restored only on Bin
 * Map (no camera). */
.preview-fab {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill-strong);
  color: var(--text);
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: var(--glass-highlight);
  -webkit-tap-highlight-color: transparent;
}
.preview-fab svg { display: block; }
/* Blur only when camera is not running (Bin Map tab). Torch is Scan-only
 * today; rule kept so any future glass UI on report can opt in safely. */
body.tab-report .preview-fab,
body.tab-orders .preview-fab {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.preview-fab.is-on {
  background: var(--amber);
  color: var(--accent-ink);
  border-color: var(--amber);
}

/* ---------- lock-bin banner — frosted glass chip ---------- */
.lock-banner {
  position: relative;
  z-index: 11;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin: calc(-1 * var(--space-2)) var(--space-3) var(--space-1);
  padding: 0 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.lock-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-tertiary);
}
.lock-banner-label {
  flex: 1;
  min-width: 0;
  font: 600 var(--text-sm)/1.2 var(--sans);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lock-banner-change {
  flex: none;
  font: 650 var(--text-xs)/1 var(--sans);
  letter-spacing: .01em;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--logo-lilac) 90%, transparent);
  padding: 6px 11px;
  border-radius: 999px;
}
/* Locked: soft lavender glass wash + pink accent dot (logo facet) */
.lock-banner.is-locked {
  border-color: color-mix(in srgb, var(--logo-lav) 35%, transparent);
  background: color-mix(in srgb, var(--logo-peri) 22%, var(--glass-fill-strong));
}
.lock-banner.is-locked .lock-banner-dot {
  background: var(--logo-pink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--logo-pink) 22%, transparent);
}
.lock-banner.is-locked .lock-banner-label {
  color: var(--text);
  font-weight: 650;
}
.lock-banner.chip-idle {
  border-color: var(--glass-stroke);
  background: var(--glass-fill-strong);
}
.lock-banner.chip-idle .lock-banner-dot {
  background: var(--logo-lilac);
  box-shadow: none;
  opacity: .7;
}
.lock-banner.chip-idle .lock-banner-label {
  color: var(--text);
  font-weight: 600;
}
.lock-banner:active { filter: brightness(1.06); }


.decode-rate {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  font: 600 var(--text-xs)/1 var(--mono);
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: var(--logo-lilac);
  pointer-events: none;
}

/* ---------- scan delight (v6) ----------
 * Soft green wash across the preview + a fading checkmark badge on an
 * accepted decode. Classes are toggled from scanner.js (same file that
 * already owns .brackets flash state) — purely visual, no scan logic. */
.scan-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--success) 30%, transparent),
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease-out;
}
.scan-flash.is-active {
  opacity: 1;
  transition: opacity .1s ease-in;
}
.scan-success {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--fx-paper);
  background: color-mix(in srgb, var(--success) 90%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 16%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.scan-success.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .1s ease-out, transform .1s cubic-bezier(0.25, 1, 0.5, 1);
}
.preview-footer {
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  text-align: center;
}
.preview-msg { margin: 0; color: var(--text-dim); font-size: var(--text-sm); }
.engine-line { font-size: var(--text-xs); color: var(--text-dim); }
.engine-line code { font-family: var(--mono); color: var(--indigo); }
.engine-sep { margin: 0 6px; opacity: .5; }
/* Compact engine badge — lives in sheet-head, not under action buttons */
.engine-pill {
  display: inline-flex;
  align-items: center;
  max-width: 80px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  opacity: .88;
}
.engine-pill code {
  font: 500 var(--text-xs)/1 var(--mono);
  color: var(--text-dim);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- scan result card ---------- */
.scan-result {
  min-height: 64px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
}
.scan-result.is-empty .scan-hint { color: var(--text-dim); font-size: var(--text-sm); }
.scan-value {
  font: 700 var(--text-xl)/var(--leading-tight) var(--mono);
  color: var(--text);
  word-break: break-all;
}
.scan-format {
  font: 600 var(--text-xs) var(--mono);
  color: var(--accent-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.scan-result.flash { animation: scanflash .5s ease-out; }
@keyframes scanflash {
  0% { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 45%, transparent); }
  100% { border-color: var(--line); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-result.flash { animation: none; border-color: var(--green); }
}

/* ---------- flow status strip ---------- */
.strip-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* v5: ghost the stop button — less prominent than the Lock bin action */
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.strip-close:active { color: var(--text); background: var(--fx-850); }

/* ---------- mode header (v6) ----------
 * Replaces the old pill-shaped status strip with a calm, typographic
 * Title 2 heading + subtle instruction line. #flow-status text/state is
 * still owned entirely by flow.js — this is presentation only. */
.mode-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-2);
  background: var(--bg);
  flex: none;
}
.mode-title {
  margin: 0;
  /* Title 2 */
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: var(--leading-tight);
  color: var(--text);
}
.mode-sub {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-normal);
}
.mode-header .strip-close {
  flex: none;
  margin-top: -2px;
}
/* ---------- overlay panels ---------- */
.panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 62%;
  background: var(--material-regular);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  border-top: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: var(--space-1) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--space-3);
  box-shadow:
    var(--glass-highlight),
    0 -8px 32px color-mix(in srgb, #000 35%, transparent);
  touch-action: none;
  transition: transform .28s var(--ease-spring-snappy);
  transform: translateZ(0);
}
.panel.is-entering {
  animation: panel-sheet-in .36s var(--ease-spring) both;
}
@keyframes panel-sheet-in {
  from { transform: translate3d(0, 100%, 0); opacity: .92; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
/* v5 perf: will-change only while dragging / settling — not permanently */
.panel.is-dragging {
  will-change: transform;
  transition: none;
}
#panel-bins {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.panel-handle {
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-dim) 55%, transparent);
  margin: var(--space-2) auto var(--space-1);
  flex: none;
  position: relative;
}
.panel-handle::before {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  top: -14px;
  bottom: -14px;
}
.sheet-toggle {
  appearance: none;
  width: 80px;
  min-height: 44px;
  margin: -12px auto -8px !important;
  padding: 0;
  border: 0;
  background: transparent !important;
  cursor: pointer;
}
.sheet-toggle::after {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  margin: auto;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-dim) 55%, transparent);
}
.panel-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-top: -4px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.lock-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.lock-label input { width: 18px; height: 18px; accent-color: var(--purple); }

/* ---------- bin picker (folder tabs + grid) ---------- */
.bin-picker {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0; /* tabs sit on the folder body */
  min-height: 0;
}
.bin-series-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 0 2px;
  align-items: end;
}
.bin-series-tab {
  appearance: none;
  position: relative;
  z-index: 0;
  min-height: 34px;
  margin-bottom: -1px; /* tuck under folder body border */
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font: 700 var(--text-sm)/1 var(--sans);
  letter-spacing: .05em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(2px);
  transition:
    transform .12s ease,
    background-color .12s ease,
    color .12s ease,
    opacity .12s ease;
}
/* Distinct shelf colors — T = cyan, B = orange, M = peri */
.bin-series-tab[data-series="T"] {
  color: color-mix(in srgb, var(--fx-cyan) 75%, var(--fx-paper));
  background: color-mix(in srgb, var(--fx-cyan) 18%, var(--surface-2));
  border-color: color-mix(in srgb, var(--fx-cyan) 35%, var(--line));
}
.bin-series-tab[data-series="B"] {
  color: color-mix(in srgb, var(--fx-orange) 80%, var(--fx-paper));
  background: color-mix(in srgb, var(--fx-orange) 18%, var(--surface-2));
  border-color: color-mix(in srgb, var(--fx-orange) 35%, var(--line));
}
.bin-series-tab[data-series="M"] {
  color: color-mix(in srgb, var(--logo-peri) 85%, var(--fx-paper));
  background: color-mix(in srgb, var(--logo-peri) 22%, var(--surface-2));
  border-color: color-mix(in srgb, var(--logo-peri) 40%, var(--line));
}
.bin-series-tab.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 12px;
}
.bin-series-tab[data-series="T"].is-active {
  color: var(--fx-black);
  background: color-mix(in srgb, var(--fx-cyan) 72%, var(--surface));
  border-color: color-mix(in srgb, var(--fx-cyan) 55%, var(--line));
}
.bin-series-tab[data-series="B"].is-active {
  color: var(--fx-black);
  background: color-mix(in srgb, var(--fx-orange) 72%, var(--surface));
  border-color: color-mix(in srgb, var(--fx-orange) 55%, var(--line));
}
.bin-series-tab[data-series="M"].is-active {
  color: var(--fx-black);
  background: color-mix(in srgb, var(--logo-peri) 72%, var(--surface));
  border-color: color-mix(in srgb, var(--logo-peri) 55%, var(--line));
}
.bin-series-tab:not(.is-active) { opacity: .78; }
.bin-series-tab:active { filter: brightness(.96); }
.bin-grid {
  display: grid;
  /* v5: 6 columns → ~30 bins = 5 rows, fits without scroll on iPhone 15 Pro.
   * Was 5 columns (6 rows) which overflowed the picker panel on-device. */
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;             /* grid itself scrolls normally */
  padding: 8px 6px 6px;
  min-height: 0;
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 0 10px var(--radius-sm) var(--radius-sm);
  background: var(--surface-2);
}
/* Folder body tint matches the active shelf tab */
.bin-picker[data-series="T"] .bin-grid {
  border-color: color-mix(in srgb, var(--fx-cyan) 40%, var(--line));
  background: color-mix(in srgb, var(--fx-cyan) 8%, var(--surface-2));
}
.bin-picker[data-series="B"] .bin-grid {
  border-color: color-mix(in srgb, var(--fx-orange) 40%, var(--line));
  background: color-mix(in srgb, var(--fx-orange) 8%, var(--surface-2));
}
.bin-picker[data-series="M"] .bin-grid {
  border-color: color-mix(in srgb, var(--logo-peri) 40%, var(--line));
  background: color-mix(in srgb, var(--logo-peri) 8%, var(--surface-2));
}
.bin-btn {
  /* v5: compacted for the 6-column no-scroll grid (was 44px / text-sm).
   * 40pt is 2pt under HIG but appropriate for a momentary dense picker;
   * one-handed thumb taps still land reliably on iPhone 15 Pro. */
  min-height: 40px;
  font: 700 var(--text-xs) var(--mono);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bin-btn:active {
  background: var(--purple);
  color: var(--fx-paper);
  border-color: transparent;
}
.bin-btn.is-locked-bin {
  border-color: color-mix(in srgb, var(--pink) 55%, transparent);
  background: color-mix(in srgb, var(--pink) 18%, var(--surface-2));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 35%, transparent);
}

.panel-bin-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.panel-bin-actions:has(#btn-unlock-bin:not([hidden])) {
  grid-template-columns: 1fr 1fr;
}
#panel-bins .panel-bin-actions .btn-secondary {
  border-radius: 999px;
  min-height: 44px;
  font-size: var(--text-sm);
  width: 100%;
}
#btn-unlock-bin {
  color: var(--pink);
  border-color: color-mix(in srgb, var(--pink) 40%, transparent);
}

/* ---------- confirm sheet ---------- */
.confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.confirm-label { color: var(--text-dim); font-size: var(--text-sm); font-weight: 600; }
.confirm-row code {
  font: 700 var(--text-lg) var(--mono);
  word-break: break-all;
  text-align: right;
}
#panel-bins .btn-secondary {
  border-radius: 999px;
  /* v5: Apple HIG minimum tap target (was 42 — under 44pt) */
  min-height: 44px;
  font-size: var(--text-sm);
}
.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

/* ---------- bottom sheet (session) ---------- */
/* v6: frosted blur material per redesign spec — a deliberate exception to
 * the "no blur while camera runs" rule used elsewhere (.toast,
 * .reconnect-banner, .sw-update-banner). The sheet is a fixed-height
 * region at the bottom of the screen (not a full-bleed overlay), so the
 * backdrop-filter cost is bounded; verify real-device FPS if this changes. */
.sheet {
  position: relative;
  background: var(--material-regular);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  border-top: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: var(--space-1) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--space-2);
  box-shadow:
    var(--glass-highlight),
    0 -8px 32px color-mix(in srgb, #000 35%, transparent);
  margin-top: 0;
  z-index: 10;
  touch-action: none;
  flex: none;
  transition: transform .28s var(--ease-spring-snappy);
  transform: translateZ(0);
}
.sheet.is-dragging {
  will-change: transform;
  transition: none;
}
.sheet .panel-handle {
  width: 36px;
  height: 5px;
  margin: var(--space-2) auto var(--space-1);
  background: color-mix(in srgb, var(--text-dim) 55%, transparent);
  position: relative;
}
.sheet .panel-handle::before {
  content: "";
  position: absolute;
  left: -36px;
  right: -36px;
  top: -16px;
  bottom: -12px;
}
.sheet .sheet-toggle {
  width: 80px;
  height: 44px;
  min-height: 44px;
  margin: -12px auto -8px;
  background: transparent;
}
.sheet .sheet-toggle::before {
  display: none;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 22px;
}
.sheet-head-primary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.sheet-head-primary .sheet-meta::before {
  content: "·";
  margin-right: 8px;
  color: var(--text-tertiary);
  font-weight: 400;
}
.sheet-head-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.sheet-title {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sheet-meta,
.pill-meta {
  font: 500 var(--text-xs)/1.3 var(--sans);
  color: var(--text-dim);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.pill-meta.is-active {
  color: var(--text-dim);
  font-weight: 600;
}

.last-scan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--logo-peri) 12%, var(--glass-fill));
  border: 1px solid color-mix(in srgb, var(--logo-lav) 22%, transparent);
  border-radius: var(--radius-card);
  padding: 10px var(--space-3);
  min-height: 0;
  box-shadow: var(--glass-highlight);
}
.sheet-empty {
  display: none !important; /* removed — lock banner + mode header cover this */
}

.scan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  gap: var(--space-2);
  min-height: 0;
}
.sheet-list-wrap {
  display: none;                     /* revealed when expanded */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.sheet.is-expanded .sheet-list-wrap { display: block; }
.sheet.is-expanded { max-height: 72dvh; grid-template-rows: auto auto minmax(0,1fr) auto; }
.sheet.is-expanded .last-scan { display: none; }
.sheet.is-expanded .sheet-title::after { content: " · session"; color: var(--text-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* v5: peek session sheet while picking a bin — meta-only strip, no actions */
.sheet.is-peek {
  gap: 0;
  padding: 4px 12px 6px;
  margin-top: 0;
}
.sheet.is-peek .panel-handle,
.sheet.is-peek .last-scan,
.sheet.is-peek .sheet-list-wrap,
.sheet.is-peek .sheet-actions,
.sheet.is-peek .btn-undo-text,
.sheet.is-peek .engine-pill {
  display: none !important;
}
.sheet.is-peek .sheet-head {
  min-height: 28px;
  padding: 0;
}
.sheet.is-peek .sheet-title::after {
  content: " · pick bin";
  color: var(--text-dim);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* While bin picker is open, keep lock banner fully out of the way */
#view-preview.is-bin-picking .lock-banner {
  display: none !important;
}

/* v5: engine pill is meta-only — hide in collapsed sheet, reveal when expanded.
 * Keeps the collapsed head focused on "Last scanned" + pending count. */
.sheet:not(.is-expanded) .engine-pill { display: none; }

/* v5: taller bin panel while session sheet is peeking */
#view-preview.is-bin-picking #panel-bins {
  max-height: 88%;
}

.scan-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}
.scan-row.is-error { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.scan-row.is-error .scan-row-sub,
.scan-row.is-error .scan-row-err-btn { color: var(--red); }
.scan-row.is-warn { border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.scan-row.is-applying {
  border-color: color-mix(in srgb, var(--indigo) 45%, transparent);
  opacity: 0.85;
}
.scan-row.is-applying .scan-row-sub { color: var(--indigo); }
.scan-row.is-applying .row-remove {
  opacity: 0.35;
  pointer-events: none;
}
.scan-row-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.scan-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.scan-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.scan-row-code {
  font: 600 var(--text-sm) var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--logo-lilac);
}
.scan-row-sub { font-size: var(--text-xs); color: var(--text-dim); }
.scan-row-err-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--red);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 28px; /* one-handed tap target */
}
.scan-row-detail {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text);
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  word-break: break-word;
}
.scan-row-warn {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font: 650 var(--text-xs)/var(--leading-tight) var(--mono);
  color: #5c3d00;
  background: color-mix(in srgb, var(--amber) 55%, #fff);
  border-radius: 999px;
  padding: 3px var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bin-badge {
  font: 700 var(--text-xs) var(--mono);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--logo-lav) 85%, var(--logo-white));
  border-radius: 999px;
  padding: 5px 9px;
  flex: 0 0 auto;
}
.row-remove {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: var(--text-sm);
  cursor: pointer;
  flex: 0 0 auto;
}
.row-remove:active { color: var(--red); }

/* Equal 2×2 frosted-glass actions — logo tints, not candy fills */
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.sheet-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-button);
  border: 1px solid var(--glass-stroke);
  font: 600 var(--text-sm)/1 var(--sans);
  letter-spacing: -.01em;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight);
  transition:
    filter .15s var(--ease-spring-out),
    transform .12s var(--ease-spring),
    opacity .15s ease,
    background-color .15s ease;
}
.sheet-action-btn svg {
  display: block;
  flex: none;
  opacity: .9;
}
.sheet-action-btn:active {
  transform: scale(.97);
  filter: brightness(1.08);
}
.sheet-action-btn:disabled {
  opacity: .38;
  filter: none;
  cursor: default;
  transform: none;
}
/* Review — soft periwinkle glass */
.sheet-action-review {
  background: color-mix(in srgb, var(--logo-peri) 28%, var(--glass-fill));
  border-color: color-mix(in srgb, var(--logo-peri) 40%, transparent);
  color: var(--logo-lilac);
}
/* Apply — logo pink as the single strong CTA */
.sheet-action-apply {
  background: color-mix(in srgb, var(--logo-pink) 78%, var(--logo-white));
  border-color: color-mix(in srgb, #FFF 20%, transparent);
  color: var(--accent-ink);
  font-weight: 700;
}
/* Photo / Manual — quiet glass, slight lavender wash */
.sheet-action-photo,
.sheet-action-manual {
  background: color-mix(in srgb, var(--logo-lav) 10%, var(--glass-fill));
  color: var(--text);
}
.sheet-action-manual {
  background: color-mix(in srgb, var(--logo-peri) 14%, var(--glass-fill));
}

/* Small text-only Undo, per spec ("Small 'Undo last apply' text button") —
 * intentionally the lowest-emphasis control in this stack. */
.btn-undo-text {
  justify-self: center;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--logo-lilac);
  font: 600 var(--text-sm)/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  min-height: 32px;
  opacity: .85;
  -webkit-tap-highlight-color: transparent;
}
.btn-undo-text:active { opacity: 1; filter: brightness(1.1); }
.btn-undo-text[hidden] { display: none; }
/* ---------- SW update banner (v5 — glass toast, matches app chrome) ---------- */
.sw-update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 496px;
  margin-inline: auto;
  padding: 10px 10px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--line));
  border-radius: var(--radius-card);
  background: var(--material-thin);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  box-shadow:
    0 1px 0 color-mix(in srgb, #FFF 7%, transparent) inset,
    0 12px 36px color-mix(in srgb, #000 38%, transparent);
  box-sizing: border-box;
}
.sw-update-banner[hidden] { display: none; }
.sw-update-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.sw-update-title {
  font: 650 var(--text-sm)/var(--leading-tight) var(--sans);
  color: var(--text);
  letter-spacing: .01em;
}
.sw-update-hint {
  font: 500 var(--text-xs)/var(--leading-tight) var(--sans);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-update-reload {
  flex: none;
  min-width: 84px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 650 var(--text-xs)/1 var(--sans);
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fx-black) 30%, transparent);
}
.sw-update-reload:active {
  filter: brightness(.95);
}
/* Scan tab: skip blur (camera + backdrop-filter fight on iOS) — keep translucent fill */
body.tab-scan .sw-update-banner {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Reconnect is informational and never performs a write. */
.reconnect-banner {
  position: fixed;
  /* v5: was +64px (overlapped the flow-strip / Lock bin); clear the strip */
  top: calc(env(safe-area-inset-top, 0px) + 128px);
  left: 12px;
  right: 12px;
  z-index: 59;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  max-width: 496px;
  margin-inline: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--line));
  border-radius: var(--radius-card);
  background: var(--material-regular);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  box-shadow: var(--shadow-sm);
}
/* Sits over the live camera on Scan — skip blur to protect decode FPS. */
body.tab-scan .reconnect-banner {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.reconnect-banner[hidden] { display: none; }
.reconnect-banner > div {
  display: grid;
  min-width: 0;
}
.reconnect-banner strong {
  font-size: var(--text-sm);
}
.reconnect-banner span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reconnect-banner .btn {
  width: auto;
  min-width: 88px;
  padding-inline: var(--space-3);
}
.banner-dismiss {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-lg);
  cursor: pointer;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 200px);
  transform: translate(-50%, 8px);
  max-width: min(88vw, 18rem);
  background: var(--material-regular);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font: 600 var(--text-xs) var(--sans);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  /* Subtle spring overshoot — polished without feeling bouncy */
  transition:
    opacity .18s var(--ease-spring),
    transform .22s var(--ease-spring);
  z-index: 50;
}
/* v5 perf: promote layer only while the slide/fade runs */
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  will-change: transform, opacity;
}
/* Sits over the live camera on Scan — skip blur to protect decode FPS. */
body.tab-scan .toast {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.toast-ok   { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.toast-err  { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.toast-warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }

/* ---------- tab bar ---------- */
/* v6: blur material, matching .topbar (same bounded-footprint trade-off —
 * see the comment above .topbar). */
.tabbar {
  display: flex;
  border-top: 1px solid var(--glass-stroke-soft);
  background: var(--material-thin);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  box-shadow: var(--glass-highlight);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex: none;
}
.tab {
  flex: 1;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--text-dim);
  font: 600 var(--text-xs) var(--sans);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s var(--ease-spring-out), transform .12s var(--ease-spring);
}
.tab:active { transform: scale(.96); }
.tab .tab-ico {
  font-size: var(--text-lg);
  line-height: 1;
  display: grid;
  place-items: center;
}
.tab .tab-ico svg { display: block; }
.tab.is-active { color: var(--logo-lav); }
.tab:disabled { opacity: .35; cursor: default; }

/* Short viewports (iPhone 15 Pro ~852pt with chrome) — keep gate above fold */
@media (max-height: 780px) {
  #view-permission { padding-block: var(--space-2); }
  .perm-card { padding: var(--space-3) var(--space-4) var(--space-4); }
  .perm-hero { margin-bottom: var(--space-4); }
  .perm-icon-ring {
    width: 80px;
    height: 80px;
    box-shadow:
      var(--glass-highlight),
      0 0 0 8px color-mix(in srgb, var(--logo-peri) 7%, transparent);
  }
  .perm-icon-ring svg { width: 38px; height: 38px; }
  .perm-title,
  .perm-card h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
  .perm-copy {
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
  }
  .perm-cta { min-height: 50px; }
  .fallback-actions { gap: 8px; margin-top: var(--space-2); }
  .perm-privacy { margin-top: var(--space-5); }
  .btn-pill { min-height: 44px; }
  .sheet { gap: 6px; padding: 2px var(--space-3) var(--space-2); }
  .sheet-action-btn { min-height: 44px; }
  .mode-header { padding: var(--space-3) var(--space-5) var(--space-1); }
  .mode-title { font-size: var(--text-xl); }
  /* v5: denser bin grid + tighter peek on short phones */
  .panel { gap: 8px; padding: 4px 12px 10px; }
  .bin-grid { gap: 5px; }
  .sheet.is-peek {
    gap: 0;
    padding: 0 10px 4px;
  }
  #view-preview.is-bin-picking #panel-bins {
    max-height: 90%;
  }
}
@media (max-width: 520px) {
  .topbar {
    gap: 6px;
    padding-inline: 10px;
  }
  /* Compact wordmark — keep "Mapper"; drop "by COGW" on narrow Scan */
  .brand-by { display: none; }
  .brand-name { font-size: var(--text-sm); }
  body.tab-report .brand-by,
  body.tab-orders .brand-by {
    display: inline;
    font-size: 10px;
  }
  body.tab-report .brand-name,
  body.tab-orders .brand-name {
    font-size: var(--text-sm);
  }
  body.tab-report .topbar-brand,
  body.tab-orders .topbar-brand {
    gap: 6px;
  }
  .topbar-brand { gap: 6px; }
  .brand-mark {
    width: 20px;
    height: 20px;
  }
  .topbar-end {
    gap: 6px;
  }
  .topbar-pills {
    gap: 4px;
  }
  .topbar-actions {
    padding-left: 4px;
  }
  .topbar-pills .pill {
    padding: 4px 7px;
  }
  body.tab-report .topbar-report-actions,
  body.tab-orders .topbar-orders-actions {
    gap: 0;
  }
  /* Keep Mock/Live labeled — never collapse to an unlabeled amber dot */
}

/* ---------- misc ---------- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes status-pulse {
  0%, 45% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, currentColor 14%, transparent),
      0 0 7px currentColor;
  }
  75%, 100% {
    box-shadow:
      0 0 0 6px transparent,
      0 0 2px currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .tab:active { transform: none; }
  .panel.is-entering,
  .dlg-sheet[open] { animation: none; }
  @media (min-width: 700px) {
    .dlg-sheet[open] { transform: translateX(-50%); }
  }
  .btn {
    transition:
      filter .12s ease,
      background-color .12s ease,
      border-color .12s ease,
      box-shadow .12s ease,
      color .12s ease;
  }
  .spinner,
  .settings-actions .btn-spinner,
  .settings-status-spinner { animation-duration: 1.6s; }
  #net-status.pill-ok::before { animation: none; }
  #mode-pill.pill-ok::before { animation: none; }
  .scan-flash,
  .scan-success {
    transition: opacity .12s ease;
  }
  .scan-success.is-active {
    transform: translate(-50%, -50%) scale(1);
  }
  #btn-report-filters .ico-filter-toggle { transition: none; }
  .report-skel-thumb,
  .report-skel-line,
  .report-skel-bin {
    animation: none;
    opacity: .55;
  }
  .report-card { transition: none; }
  .report-edit,
  .report-edit-inner { transition: none; }
  /* Toast: fade only — no slide / spring overshoot */
  .toast {
    transform: translate(-50%, 0);
    transition: opacity .12s ease;
  }
  .toast.is-visible {
    will-change: auto;
  }
}


/* ============ session sheet (legacy helpers; live sheet styles above) ============ */
.strip-x {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: var(--text-base);
  cursor: pointer;
  flex: none;
}
.chip-bin {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  font: 700 var(--text-sm) var(--mono);
  padding: 9px 14px;
}
.chip-bin.chip-set {
  background: var(--pink);
  color: var(--fx-paper);
  border-color: transparent;
}
.session-meta { font: 600 var(--text-xs) var(--mono); color: var(--text-dim); }

.sheet-grip { display: grid; gap: 8px; }
.ls-code { font: 700 var(--text-lg) var(--mono); word-break: break-all; }
.ls-empty { color: var(--text-dim); font-size: var(--text-sm); }

.bin-tag {
  font: 700 var(--text-xs) var(--mono);
  color: var(--fx-paper);
  background: var(--purple);
  border: none;
  border-radius: 999px;
  padding: 5px 9px;
  flex: none;
}
.bin-tag-btn { cursor: pointer; }

/* expanded body hidden until .is-expanded */
.sheet-body { display: none; }
.sheet.is-expanded .sheet-body { display: grid; gap: 10px; }

.sheet-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 650;
}
.linklike {
  background: none; border: none;
  color: var(--accent-2);
  font: 600 var(--text-sm) var(--sans);
  cursor: pointer;
  padding: 4px;
}
.session-list {
  max-height: 38dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: grid;
  gap: 6px;
}
.srow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 10px 10px 12px;
}
.srow-code { font: 650 var(--text-sm) var(--mono); flex: 1; word-break: break-all; }
.srow-x {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: var(--text-base);
  cursor: pointer;
  flex: none;
}
.srow-err { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.srow-msg { font-size: var(--text-xs); color: var(--red); flex: none; }

@media (min-width: 700px) {
  /* desktop sanity: keep the tool phone-shaped */
  #app, .tabbar, .topbar { max-width: 520px; margin-inline: auto; width: 100%; }
  .dlg-sheet {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(520px, 100%);
    max-width: 520px;
  }
  .dlg-sheet[open] {
    animation: dlg-sheet-in-desktop .38s var(--ease-spring) both;
  }
  @keyframes dlg-sheet-in-desktop {
    from { transform: translate(-50%, 100%); opacity: .9; }
    to { transform: translate(-50%, 0); opacity: 1; }
  }
}

/* ---------- settings dialog ---------- */
.dlg {
  /* Frosted ultraThinMaterial: modals are user-initiated pauses, not
   * layered over the live decode canvas, so blur is always safe here. */
  background: var(--material-regular);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: var(--radius-card);
  padding: 0;
  /* Keep margin:auto so <dialog> stays centered; gutters via max-width */
  margin: auto;
  width: min(calc(100vw - 32px), 360px);
  max-width: calc(
    100vw
    - 32px
    - env(safe-area-inset-left, 0px)
    - env(safe-area-inset-right, 0px)
  );
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
}
.dlg::backdrop {
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .22s ease;
}

/* v71 polish: iOS-style slide-up sheets with grabber handles */
.dlg-sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  border-bottom: none;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  max-height: min(92dvh, calc(100svh - env(safe-area-inset-top, 0px) - 12px));
  overflow: hidden;
  box-shadow:
    var(--glass-highlight),
    0 -12px 40px color-mix(in srgb, #000 50%, transparent);
}
.dlg-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: dlg-sheet-in .38s var(--ease-spring) both;
}
@keyframes dlg-sheet-in {
  from { transform: translate3d(0, 100%, 0); opacity: .9; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
.dlg-grabber {
  flex: none;
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-dim) 55%, transparent);
  margin: var(--space-3) auto var(--space-1);
}
.dlg-sheet .dlg-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-5) var(--space-5);
  gap: var(--space-4);
}
.dlg-sheet .dlg-actions {
  position: sticky;
  bottom: 0;
  padding-top: var(--space-2);
  background: linear-gradient(
    to top,
    var(--material-regular) 70%,
    color-mix(in srgb, var(--material-regular) 0%, transparent)
  );
}

.dlg-form { padding: var(--space-5); display: grid; gap: var(--space-4); }
.dlg h2 {
  margin: 0;
  font-size: var(--text-xl); /* Title 3 */
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: var(--leading-tight);
}
.dlg-copy {
  margin: 0;
  font-size: var(--text-base); /* Body */
  color: var(--text-dim);
  line-height: var(--leading-normal);
}

/*
 * Settings sheet — tabbed Connection / Tools / Activity.
 * Fits within the mobile viewport (no bottom clip under Safari chrome).
 * Head + tabs stay fixed; only the active panel scrolls.
 *
 * IMPORTANT: only apply display:flex when [open]. A bare display:flex on
 * <dialog> overrides the UA rule dialog:not([open]){display:none}, so the
 * sheet stays visible after close (and stacks under onboarding).
 */
.dlg-settings {
  --settings-blue: #0A84FF; /* Apple system blue (dark) */
  --settings-teal: #30B0C7; /* Apple system teal (dark) */
  width: 100%;
  max-width: 100%;
  /* Cap below browser chrome + home indicator so the sheet never clips */
  max-height: min(78dvh, calc(100svh - env(safe-area-inset-top, 0px) - 72px));
  margin: 0;
  overflow: hidden;
}
.dlg-settings[open] {
  display: flex;
  flex-direction: column;
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-4);
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}
.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
}
.settings-head-text { min-width: 0; display: grid; gap: 4px; }
.settings-eyebrow {
  margin: 0;
  font: 650 var(--text-xs)/var(--leading-tight) var(--sans);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
}
.settings-head h2 {
  font-size: var(--text-2xl); /* Title 2 */
  font-weight: 700;
  letter-spacing: -.02em;
}
.settings-close { color: var(--text-dim); }
.settings-close:hover { color: var(--text); }
.settings-close:active { filter: brightness(.92); }

/* ---- Settings tabs ---- */
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  flex: none;
  padding: 4px;
  border-radius: var(--radius-button);
  background: color-mix(in srgb, #FFFFFF 8%, transparent);
  border: 1px solid color-mix(in srgb, #FFFFFF 10%, transparent);
}
.settings-tab {
  appearance: none;
  border: 0;
  margin: 0;
  min-height: 40px;
  padding: 8px 6px;
  border-radius: calc(var(--radius-button) - 2px);
  background: transparent;
  color: var(--text-dim);
  font: 650 var(--text-sm)/1 var(--sans);
  letter-spacing: -.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-tab.is-active {
  background: color-mix(in srgb, var(--surface-2) 92%, #fff);
  color: var(--text);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 35%, transparent);
}
.settings-tab:focus-visible {
  outline: 2px solid var(--settings-blue);
  outline-offset: 1px;
}
.settings-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 2px;
}
.settings-panel.is-active {
  display: flex;
}
.settings-panel[hidden] {
  display: none !important;
}

/* ---- Grouped sections (iOS Settings cards) ---- */
.settings-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.settings-group-title {
  margin: 0;
  padding: 0 4px;
  font: 600 var(--text-xs)/var(--leading-tight) var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.settings-group-desc {
  margin: 0;
  padding: 0 4px;
  font: 400 var(--text-sm)/var(--leading-normal) var(--sans);
  color: var(--text-dim);
}
.settings-group-title + .settings-group-desc {
  margin-top: -4px;
}
.settings-card {
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--glass-highlight);
}
.settings-sep {
  height: 1px;
  margin-left: var(--space-4);
  background: color-mix(in srgb, #FFFFFF 8%, transparent);
}
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 10px var(--space-4);
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-row-field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  cursor: text;
}
.settings-row-label {
  font: 500 var(--text-sm)/var(--leading-tight) var(--sans);
  color: var(--text-dim);
}
.settings-row-input {
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 var(--text-base)/var(--leading-tight) var(--mono);
  letter-spacing: -.01em;
  outline: none;
  box-shadow: none;
}
.settings-row-input::placeholder { color: var(--text-tertiary); }
.settings-row-input[readonly] {
  color: var(--text-dim);
  cursor: default;
  opacity: 1;
}
.settings-row-input:focus-visible {
  outline: none;
  color: var(--text);
}

/* Connection status card — prominent trust signal after Test */
.settings-status-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: var(--leading-normal);
}
.settings-status-card.ok {
  color: var(--text);
  background: color-mix(in srgb, var(--green) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
.settings-status-card.err {
  color: var(--text);
  background: color-mix(in srgb, var(--red) 9%, var(--surface-2));
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
}
.settings-status-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.settings-status-card.ok .settings-status-icon {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--green);
}
.settings-status-card.err .settings-status-icon {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
}
.settings-status-card.pending {
  background: color-mix(in srgb, var(--settings-blue) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--settings-blue) 28%, transparent);
}
.settings-status-card.pending .settings-status-icon {
  background: color-mix(in srgb, var(--settings-blue) 18%, transparent);
  color: var(--settings-blue);
}
.settings-status-spinner {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.settings-status-text {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 var(--text-sm)/var(--leading-normal) var(--sans);
  letter-spacing: -.01em;
  color: var(--text);
}
.settings-status-card.ok .settings-status-text { color: #E8F8EC; }
.settings-status-card.err .settings-status-text { color: #FFE8E6; }
.settings-status-card.pending .settings-status-text { color: #D6E8FF; }

/* Test (blue) + Save (teal) — large side-by-side pair */
.settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.settings-actions .btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-button);
  font: 650 var(--text-base)/1 var(--sans);
  letter-spacing: -.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.btn-settings-test {
  background: var(--settings-blue);
  color: #FFFFFF;
  border-color: color-mix(in srgb, #FFFFFF 14%, transparent);
}
.btn-settings-test:hover { filter: brightness(1.06); }
.btn-settings-test:active { filter: brightness(.94); box-shadow: none; }
.btn-settings-save {
  background: var(--settings-teal);
  color: #0A1A1C;
  border-color: color-mix(in srgb, #FFFFFF 16%, transparent);
}
.btn-settings-save:hover { filter: brightness(1.05); }
.btn-settings-save:active { filter: brightness(.94); box-shadow: none; }
.btn-settings-test:disabled,
.btn-settings-save:disabled {
  opacity: .72;
  cursor: wait;
}
.settings-actions .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
.settings-actions .btn.is-busy .btn-spinner { display: inline-block; }
.settings-actions .btn.is-busy .btn-label { opacity: .88; }

/* Shared form fields (manual-entry dialog + legacy) */
.field { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.field input {
  font: 500 var(--text-base) var(--mono);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-height: var(--tap);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--purple) 55%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--purple) 45%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--purple) 25%, transparent),
    0 0 0 4px color-mix(in srgb, var(--purple) 10%, transparent);
}
.field input[readonly] {
  opacity: .85;
  color: var(--text-dim);
  cursor: default;
}
.field-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
}
.field-check input {
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}
.field-check.filter-switch {
  min-height: 0;
  gap: var(--space-2);
  font-weight: inherit;
}
.field-check.filter-switch > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Manual-entry status (reuses compact status chip) */
.settings-status {
  font: 600 var(--text-xs) var(--mono);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: var(--leading-normal);
}
.settings-status.ok {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.settings-status.err {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

/* ---- Recent Activity list ---- */
.settings-activity {
  gap: var(--space-3);
}
.settings-activity-status {
  margin: 0;
  padding: 0 4px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  flex: none;
}
.settings-activity-card {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, #FFFFFF 7%, transparent);
}
.activity-row:last-child { border-bottom: 0; }
.activity-row-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.activity-time {
  font: 500 var(--text-2xs)/var(--leading-tight) var(--sans);
  color: var(--text-tertiary);
  letter-spacing: .01em;
}
.activity-status-pill {
  font: 650 var(--text-2xs)/1 var(--sans);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.activity-status-pill.ok { color: var(--green); }
.activity-status-pill.err { color: var(--red); }
.activity-codes {
  grid-column: 1 / -1;
  font: 500 var(--text-sm)/var(--leading-tight) var(--mono);
  color: var(--text);
  letter-spacing: -.01em;
  word-break: break-all;
}
.activity-codes .activity-sku {
  color: var(--text-dim);
}
.activity-bin {
  grid-column: 1 / -1;
  font: 500 var(--text-xs)/var(--leading-tight) var(--mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.activity-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  color: var(--text-dim);
  text-align: center;
  font: 500 var(--text-sm)/var(--leading-normal) var(--sans);
  list-style: none;
}
.activity-empty::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--logo-lilac) 35%, transparent);
  opacity: .7;
}
.settings-see-all {
  justify-self: stretch;
  min-height: 44px;
  width: 100%;
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: none;
}
.settings-footer {
  margin: auto 0 0;
  padding: var(--space-2) 4px 0;
  text-align: center;
  font: 500 var(--text-2xs)/var(--leading-tight) var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex: none;
}

@media (max-width: 480px) {
  .dlg-sheet .dlg-form {
    padding: var(--space-2) var(--space-4) var(--space-4);
    gap: var(--space-3);
  }
  .settings-form {
    padding: var(--space-2) var(--space-3) var(--space-3);
    gap: var(--space-3);
  }
  .settings-activity-card {
    min-height: 100px;
  }
  .settings-actions {
    gap: var(--space-2);
  }
  .settings-head h2 {
    font-size: var(--text-xl);
  }
  .settings-tab {
    min-height: 38px;
    font-size: var(--text-xs);
  }
}

.dlg-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.dlg-actions .btn { width: 100%; }
/* Legacy accent used by manual-entry Test-style actions */
.btn-info {
  background: var(--accent-2);
  color: #FFFFFF;
  border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
  border-radius: var(--radius-pill);
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.btn-info:hover { filter: brightness(1.06); }
.btn-info:active { filter: brightness(.95); box-shadow: none; }
.btn-danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-2));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-pill);
  font-weight: 650;
  box-shadow: none;
}
.btn-danger:hover {
  color: #FFFFFF;
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger:active { filter: brightness(.95); }

/* ---------- onboarding dialog (v5) ---------- */
.dlg-onboarding { width: 100%; max-width: 100%; }
.dlg-manual { width: 100%; max-width: 100%; }
.onboard-form { gap: var(--space-4); }
.onboard-eyebrow {
  margin: 0;
  font: 650 var(--text-xs)/var(--leading-tight) var(--sans); /* Caption 1 */
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.onboard-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.onboard-dot.is-active { background: var(--accent); }
.onboard-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2);
}
.onboard-actions .btn { min-height: var(--tap); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ bin map report — premium inventory list ============ */
#view-report,
#view-orders {
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* Large title — Apple Music / Photos style */
.report-hero {
  flex: none;
  padding: var(--space-3) var(--space-5) var(--space-2);
}
.report-hero-text { min-width: 0; }
.report-title {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: var(--leading-tight);
  color: var(--text);
}
.report-refreshed {
  margin: 4px 0 0;
  font: 500 var(--text-xs)/var(--leading-tight) var(--sans);
  color: var(--text-tertiary);
}

/* Frosted search field */
.report-search-wrap {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-3);
  padding: 0 var(--space-3);
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke-soft);
  box-shadow: var(--glass-highlight);
}
.report-search-ico {
  flex: none;
  color: var(--text-tertiary);
}
.report-search {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.report-search input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 var(--text-base)/1.2 var(--sans);
  outline: none;
  -webkit-appearance: none;
}
.report-search input::placeholder { color: var(--text-tertiary); }
.report-search input::-webkit-search-cancel-button { display: none; }
.report-search-clear {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-search-clear[hidden] { display: none !important; }
.report-search-clear:active { filter: brightness(1.15); }

.report-toolbar {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-3);
  flex: none;
}
#view-report.is-toolbar-collapsed .report-toolbar {
  display: none;
}
.report-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.report-meta {
  flex: 1;
  min-width: 0;
  font: 500 var(--text-xs)/var(--leading-tight) var(--sans);
  color: var(--text-tertiary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact modern filter switches */
.filter-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 6px 12px 6px 8px;
  min-height: 36px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke-soft);
  box-shadow: var(--glass-highlight);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: border-color .2s ease, background .2s ease;
}
.filter-switch:has(input:checked) {
  border-color: color-mix(in srgb, var(--logo-lav) 40%, transparent);
  background: color-mix(in srgb, var(--logo-peri) 18%, var(--glass-fill));
}
.filter-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.filter-switch-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: background .2s ease;
}
.filter-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px color-mix(in srgb, #000 40%, transparent);
  transition: transform .2s ease, background .2s ease;
}
.filter-switch:has(input:checked) .filter-switch-track {
  background: var(--logo-lav);
}
.filter-switch:has(input:checked) .filter-switch-track::after {
  transform: translateX(14px);
  background: var(--fx-paper);
}
.filter-switch:focus-within {
  outline: 2px solid color-mix(in srgb, var(--logo-lav) 50%, transparent);
  outline-offset: 2px;
}
.filter-switch-label {
  font: 550 var(--text-xs)/var(--leading-tight) var(--sans);
  letter-spacing: .01em;
  color: var(--text-dim);
  white-space: nowrap;
}
.filter-switch:has(input:checked) .filter-switch-label {
  color: var(--text);
}

/* Segmented control — All | Unmapped | Shelf T | Shelf B | Shelf M */
.report-segments {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--glass-stroke-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.report-segments::-webkit-scrollbar { display: none; }
.report-seg {
  flex: 1 1 0;
  min-width: max-content;
  min-height: 36px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font: 600 var(--text-xs)/1 var(--sans);
  letter-spacing: .01em;
  padding: 0 var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background .15s var(--ease-spring-out),
    color .15s ease,
    box-shadow .15s ease,
    transform .1s var(--ease-spring);
}
.report-seg:active { transform: scale(.97); }
.report-seg.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--logo-peri) 32%, var(--surface-2));
  box-shadow:
    var(--glass-highlight),
    0 1px 3px color-mix(in srgb, #000 30%, transparent);
}
.report-filter-series.is-active {
  color: var(--logo-lilac);
}
.report-seg:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--logo-lav) 55%, transparent);
  outline-offset: 1px;
}

.report-bin-menu {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill-strong);
  box-shadow: var(--shadow-md);
}
.report-bin-menu[hidden] { display: none !important; }
.report-bin-menu[data-series="T"] {
  border-color: color-mix(in srgb, var(--fx-cyan) 35%, transparent);
}
.report-bin-menu[data-series="B"] {
  border-color: color-mix(in srgb, var(--fx-orange) 35%, transparent);
}
.report-bin-menu[data-series="M"] {
  border-color: color-mix(in srgb, var(--logo-peri) 35%, transparent);
}
.report-bin-option {
  min-height: 40px;
  appearance: none;
  border: 1px solid var(--glass-stroke-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text);
  font: 700 var(--text-xs) var(--mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-bin-option.is-selected {
  color: var(--accent-ink);
  border-color: transparent;
}
.report-bin-menu[data-series="T"] .report-bin-option.is-selected {
  background: color-mix(in srgb, var(--fx-cyan) 72%, var(--surface));
}
.report-bin-menu[data-series="B"] .report-bin-option.is-selected {
  background: color-mix(in srgb, var(--fx-orange) 72%, var(--surface));
}
.report-bin-menu[data-series="M"] .report-bin-option.is-selected {
  background: color-mix(in srgb, var(--logo-peri) 72%, var(--surface));
}
.report-bin-option:active { filter: brightness(1.08); }

.report-status {
  font: 500 var(--text-sm)/var(--leading-normal) var(--sans);
  color: var(--text-dim);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.report-status.is-loading { color: var(--text-dim); }
.report-status.is-error {
  color: var(--text);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.report-status.is-mock {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.report-status.is-cached { color: var(--text-dim); }
.report-truncated {
  font: 500 var(--text-xs)/var(--leading-normal) var(--sans);
  color: var(--amber);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

/* Scroll + pull-to-refresh */
.report-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.report-ptr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--text-tertiary);
  font: 500 var(--text-xs) var(--sans);
  transition: opacity .15s ease;
  pointer-events: none;
}
.report-ptr.is-visible {
  opacity: 1;
}
.report-ptr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--glass-stroke);
  border-top-color: var(--logo-lav);
  border-radius: 50%;
  opacity: 0;
}
.report-ptr.is-refreshing .report-ptr-spinner {
  opacity: 1;
  animation: spin .8s linear infinite;
}

.report-list {
  list-style: none;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  position: relative;
}

/* Premium row — ~92pt breathing room */
.report-card {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--glass-stroke-soft);
  -webkit-tap-highlight-color: transparent;
  overflow: visible; /* edit panel is a sibling; front clips swipe */
}
/* Isolates swipe chrome so it can never paint over the accordion */
.report-card-front {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.report-card-swipe {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  z-index: 0;
}
.report-card-swipe.is-active { pointer-events: auto; }
.report-card.is-expanded .report-card-swipe {
  display: none !important;
}
.report-swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 0 16px;
  border: 0;
  font: 650 var(--text-xs)/1.1 var(--sans);
  color: var(--fx-paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-swipe-map {
  background: color-mix(in srgb, var(--logo-peri) 85%, #000);
}
.report-swipe-unmap {
  background: color-mix(in srgb, var(--danger) 80%, #000);
}
.report-card-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  background: var(--bg);
  transition: transform .2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.report-card.is-expanded .report-card-front,
.report-card.is-expanded .report-card-row {
  transform: none !important;
  background: color-mix(in srgb, var(--logo-peri) 8%, var(--bg));
}
.report-card-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px var(--space-3) 14px var(--space-4);
  min-height: 92px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-shopify-link {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 92px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.report-shopify-link:hover,
.report-shopify-link:focus-visible {
  color: var(--logo-lav);
  outline: none;
}
.report-shopify-link svg { display: block; }
.report-card-hit:active {
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.report-card.is-expanded {
  background: color-mix(in srgb, var(--logo-peri) 8%, var(--bg));
  overflow: hidden;
}

.report-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--glass-stroke-soft);
  box-shadow: var(--shadow-sm);
}
.report-thumb.is-empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--logo-peri) 18%, var(--surface-2)),
      var(--surface-2));
  color: var(--logo-lilac);
  opacity: .7;
}
.report-thumb.is-empty::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: .55;
}
.report-card-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: center;
}
.report-card-title {
  font: 650 var(--text-base)/1.25 var(--sans);
  letter-spacing: -.015em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.report-card-sub {
  font: 500 var(--text-xs)/1.3 var(--sans);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-barcode {
  font-family: var(--mono);
  font-size: inherit;
  color: var(--logo-lilac);
  opacity: .85;
}
.report-barcode.is-missing {
  color: var(--text-tertiary);
  font-style: italic;
  font-family: var(--sans);
  opacity: .75;
}
.report-sku { color: var(--text-tertiary); }
.report-card-bin {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 2px;
}
.report-card-chevron {
  color: var(--text-tertiary);
  opacity: .55;
  flex: none;
}
.report-card .bin-badge {
  font: 700 var(--text-xs) var(--mono);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--logo-lav) 85%, var(--logo-white));
  border-radius: 999px;
  padding: 6px 10px;
}
.gap-badge {
  font: 650 var(--text-2xs)/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border: 1px solid var(--glass-stroke-soft);
  border-radius: 999px;
  padding: 6px 10px;
}
.report-card.is-gap .gap-badge {
  color: var(--logo-lilac);
  border-color: color-mix(in srgb, var(--logo-peri) 30%, transparent);
  background: color-mix(in srgb, var(--logo-peri) 14%, transparent);
}

/* Accordion edit panel */
.report-edit {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--bg);
  transition: grid-template-rows .22s cubic-bezier(0.25, 1, 0.5, 1);
}
.report-card.is-expanded .report-edit {
  grid-template-rows: 1fr;
  background: color-mix(in srgb, var(--logo-peri) 8%, var(--bg));
}
.report-edit-clip { overflow: hidden; min-height: 0; }
.report-edit-inner {
  padding: 4px var(--space-4) var(--space-4);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.report-card.is-expanded .report-edit-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Map accordion picker — frosted segmented control + glass cells (not folder tabs) */
.report-edit-grid.bin-picker {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.report-edit-grid .bin-series-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0;
  align-items: stretch;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--glass-stroke-soft);
  box-shadow: var(--glass-highlight);
}
.report-edit-grid .bin-series-tab {
  flex: 1;
  z-index: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  transform: none;
  font: 600 var(--text-xs)/1 var(--sans);
  letter-spacing: .01em;
  background: transparent;
  color: var(--text-dim);
  opacity: 1;
}
.report-edit-grid .bin-series-tab[data-series="T"],
.report-edit-grid .bin-series-tab[data-series="B"],
.report-edit-grid .bin-series-tab[data-series="M"] {
  color: var(--text-dim);
  background: transparent;
  border-color: transparent;
}
.report-edit-grid .bin-series-tab.is-active {
  transform: none;
  padding-bottom: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--logo-peri) 28%, var(--surface-2));
  box-shadow:
    var(--glass-highlight),
    0 1px 3px color-mix(in srgb, #000 28%, transparent);
}
.report-edit-grid .bin-series-tab[data-series="T"].is-active {
  color: color-mix(in srgb, var(--fx-cyan-2) 90%, var(--text));
  background: color-mix(in srgb, var(--fx-cyan) 16%, var(--surface-2));
}
.report-edit-grid .bin-series-tab[data-series="B"].is-active {
  color: color-mix(in srgb, var(--fx-orange) 85%, var(--text));
  background: color-mix(in srgb, var(--fx-orange) 16%, var(--surface-2));
}
.report-edit-grid .bin-series-tab[data-series="M"].is-active {
  color: color-mix(in srgb, var(--logo-peri) 90%, var(--text));
  background: color-mix(in srgb, var(--logo-peri) 18%, var(--surface-2));
}
.report-edit-grid .bin-series-tab:not(.is-active) { opacity: 1; }
.report-edit-grid .bin-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-stroke-soft);
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight);
}
.report-edit-grid.bin-picker[data-series="T"] .bin-grid,
.report-edit-grid.bin-picker[data-series="B"] .bin-grid,
.report-edit-grid.bin-picker[data-series="M"] .bin-grid {
  border-color: var(--glass-stroke-soft);
  background: var(--glass-fill);
}
.report-edit-grid .bin-btn {
  min-height: 44px;
  font: 650 var(--text-xs) var(--mono);
  border-radius: 12px;
  border: 1px solid var(--glass-stroke-soft);
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  color: var(--text);
  box-shadow: none;
}
.report-edit-grid .bin-btn:active {
  background: color-mix(in srgb, var(--logo-lav) 35%, var(--surface-2));
  color: var(--text);
  border-color: transparent;
}
.report-edit-grid .bin-btn.is-locked-bin {
  border-color: color-mix(in srgb, var(--logo-lav) 45%, transparent);
  background: color-mix(in srgb, var(--logo-lav) 22%, var(--surface-2));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo-lav) 25%, transparent);
}
.report-edit-status {
  margin: 0 0 var(--space-2);
  font: 500 var(--text-xs) var(--sans);
}
.report-edit-status:not([hidden]) { display: block; }
.report-edit-status.is-ok { color: var(--green); }
.report-edit-status.is-err { color: var(--red); }
.report-edit-status.is-pending { color: var(--text-dim); }
.report-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2);
}
.report-edit-actions .btn-pill-sm {
  width: 100%;
  max-width: none;
  min-height: 48px;
  border-radius: var(--radius-button);
}
.report-edit-actions .report-edit-cancel {
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  color: var(--text);
  box-shadow: var(--glass-highlight);
}
.report-edit-actions .report-edit-apply.is-assign {
  background: color-mix(in srgb, var(--logo-lav) 88%, var(--logo-white));
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, #FFF 16%, transparent);
  box-shadow: var(--glass-highlight);
}
.report-edit-actions .report-edit-apply.is-remove {
  background: color-mix(in srgb, var(--danger) 78%, transparent);
  color: var(--fx-paper);
  border-color: transparent;
}
.report-edit-actions .btn:disabled { opacity: .42; }

.report-more {
  padding: var(--space-4);
  text-align: center;
  font: 500 var(--text-xs) var(--sans);
  color: var(--text-tertiary);
}
.report-empty {
  min-height: 220px;
}
.report-empty .empty-state-ico {
  width: 40px;
  height: 40px;
}
.scan-list-empty {
  padding: var(--space-5) var(--space-4);
  min-height: var(--space-8);
}
.scan-list-empty .empty-state-ico {
  width: 28px;
  height: 28px;
}

/* Skeleton */
.report-skel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--glass-stroke-soft);
  min-height: 92px;
  pointer-events: none;
}
.report-skel-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--surface-3);
  animation: skel-pulse 1.2s ease-in-out infinite;
}
.report-skel-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}
.report-skel-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-3);
  animation: skel-pulse 1.2s ease-in-out infinite;
}
.report-skel-line.is-title { width: 62%; height: 14px; }
.report-skel-line.is-sub { width: 42%; height: 10px; opacity: .85; }
.report-skel-bin {
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-3);
  animation: skel-pulse 1.2s ease-in-out infinite;
}
.report-skel:nth-child(2) .report-skel-thumb,
.report-skel:nth-child(2) .report-skel-line,
.report-skel:nth-child(2) .report-skel-bin { animation-delay: .12s; }
.report-skel:nth-child(3) .report-skel-thumb,
.report-skel:nth-child(3) .report-skel-line,
.report-skel:nth-child(3) .report-skel-bin { animation-delay: .24s; }
.report-skel:nth-child(4) .report-skel-thumb,
.report-skel:nth-child(4) .report-skel-line,
.report-skel:nth-child(4) .report-skel-bin { animation-delay: .36s; }
.report-skel:nth-child(5) .report-skel-thumb,
.report-skel:nth-child(5) .report-skel-line,
.report-skel:nth-child(5) .report-skel-bin { animation-delay: .48s; }

@keyframes skel-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .85; }
}

/* ============ Orders tab — picker lookup (mock-first) ============ */
.orders-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--logo-peri) 12%, var(--surface-2));
  border: 1px solid var(--glass-stroke-soft);
}
.orders-card-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.orders-status {
  font: 650 var(--text-xs)/1.1 var(--sans);
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.orders-status.is-open {
  color: var(--amber, #c47a1a);
  background: color-mix(in srgb, var(--amber, #c47a1a) 16%, var(--surface-2));
}
.orders-status.is-partial {
  color: var(--logo-peri);
  background: color-mix(in srgb, var(--logo-peri) 18%, var(--surface-2));
}
.orders-status.is-fulfilled {
  color: var(--text-tertiary);
  background: var(--surface-2);
}
.orders-card.is-expanded .report-card-chevron {
  transform: rotate(90deg);
}
.orders-lines {
  padding: 0 var(--space-4) var(--space-3);
  background: color-mix(in srgb, var(--logo-peri) 6%, var(--bg));
  border-bottom: 1px solid var(--glass-stroke-soft);
}
.orders-line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orders-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--glass-stroke-soft);
}
.orders-line:first-child { border-top: 0; }
.orders-line-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--glass-stroke-soft);
}
.orders-line-thumb.is-empty {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface-3) 80%, transparent),
      var(--surface-2));
}
.orders-qty {
  flex: none;
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font: 700 var(--text-sm)/1 var(--sans);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--glass-stroke-soft);
}
.orders-line-main {
  flex: 1;
  min-width: 0;
}
.orders-line-title {
  font: 600 var(--text-sm)/var(--leading-tight) var(--sans);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-line-sub {
  margin-top: 2px;
  font: 500 var(--text-xs)/var(--leading-tight) var(--sans);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-line-bin {
  flex: none;
}

/* v90: Orders tab */