.purp-workspace-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  background: rgba(24, 14, 42, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.purp-confirm-backdrop {
  position: fixed;
  inset: 0;
  /* Confirm is the final decision surface: above sheets (2000), centered
     modals (3000), and their portaled selects (3100), while global loaders,
     toasts, and update-progress surfaces retain system-layer authority. */
  z-index: 3200;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--purp-confirm-edge, 16px), env(safe-area-inset-top, 0px)) max(var(--purp-confirm-edge, 16px), env(safe-area-inset-right, 0px)) max(var(--purp-confirm-edge, 16px), env(safe-area-inset-bottom, 0px)) max(var(--purp-confirm-edge, 16px), env(safe-area-inset-left, 0px));
  background: rgba(24, 14, 42, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.purp-workspace-sheet {
  --purp-sheet-gutter: clamp(12px, 1.6vw, 20px);
  box-sizing: border-box;
  --purp-sheet-gap: 14px;
  --purp-sheet-section-padding: 18px;
  --purp-sheet-section-radius: 18px;
  --purp-sheet-field-padding: 14px 16px;
  --purp-sheet-field-min-height: 76px;
  --purp-sheet-field-radius: 14px;
  width: clamp(520px, 48vw, 760px);
  max-inline-size: 100%;
  min-inline-size: 0;
  height: 100dvh;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, #fdfbff 100%);
  color: var(--ink, #21152f);
  border-left: 1px solid rgba(98, 40, 156, 0.16);
  border-radius: 22px 0 0 22px;
  box-shadow: -28px 0 80px rgba(24, 14, 42, 0.28);
  outline: none;
  overflow: hidden;
  animation: purpWorkspaceIn 160ms ease-out;
}

/* Compact creation forms keep a stable desktop width; the shared mobile
   geometry below still owns full-width presentation on phones. */
.purp-workspace-sheet.purp-workspace-sheet--form {
  width: min(680px, 100%);
}

.purp-workspace-sheet--wide {
  width: clamp(720px, 64vw, 1080px);
}

.purp-workspace-sheet--workflow {
  width: clamp(820px, 72vw, 1240px);
}

/* Opt-in full-workspace presentation. Behaviour still belongs to the sheet;
 * other drawers retain their existing geometry and action placement. */
.purp-workspace-backdrop--workspace { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.purp-workspace-sheet.purp-workspace-sheet--workspace {
  width: 100%; border-radius: 0; border-left: 0; box-shadow: none; animation: none;
}
.purp-workspace-sheet--workspace .purp-workspace-sheet__header { align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 16px 20px; gap: 16px; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__heading { margin-right: auto; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__header-center {
  position: absolute;
  left: 50%;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
}
.purp-workspace-sheet--workspace .purp-workspace-sheet__title { font-size: 22px; margin: 0; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__subtitle { font-size: 12px; margin-top: 4px; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__tabs { padding: 0; border: 0; box-shadow: none; margin-inline: auto; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__actions { gap: 8px; }
.purp-workspace-sheet--workspace .purp-workspace-sheet__actions-spacer { display: none; }
.purp-workspace-sheet__back { border: 1px solid var(--pdb-border-subtle); border-radius: var(--pdb-radius-md); background: var(--pdb-bg-surface); color: var(--pdb-text-primary); padding: 10px 14px; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; }
@media (max-width: 1100px) {
  .purp-workspace-sheet--workspace .purp-workspace-sheet__header-center {
    position: static;
    order: 4;
    width: 100%;
    transform: none;
  }
  .purp-workspace-sheet--workspace .purp-workspace-sheet__tabs { order: 4; width: 100%; }
  .purp-workspace-sheet--workspace .purp-workspace-sheet__actions { margin-left: auto; flex-wrap: wrap; }
}

.purp-workspace-sheet__header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--purp-sheet-gap);
  padding: 14px calc(var(--purp-sheet-gutter) + 4px);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(98, 40, 156, 0.12);
}

.purp-workspace-sheet__heading {
  min-width: 0;
}

.pdb-workspace-shell__header--brand {
  background: linear-gradient(120deg, var(--pdb-purp-royal), var(--pdb-bg-surface-brand));
  color: var(--pdb-text-on-brand);
  border-bottom: 3px solid var(--pdb-purp-violet);
}
.pdb-workspace-shell__header--brand .purp-workspace-sheet__title { color: var(--pdb-text-on-brand); }
.pdb-workspace-shell__header--brand :is(.purp-workspace-sheet__eyebrow, .purp-workspace-sheet__subtitle) { color: var(--pdb-purp-orchid); }
.pdb-workspace-shell__header--brand .purp-workspace-sheet__close {
  color: var(--pdb-text-on-brand);
  background: rgba(var(--pdb-on-brand-rgb), .08);
  border-color: rgba(var(--pdb-on-brand-rgb), .24);
}
.pdb-workspace-shell__header--brand .purp-workspace-sheet__close:hover { background: rgba(var(--pdb-on-brand-rgb), .16); }
/* An entity header (avatar, name, badges, meta) placed in a brand sheet header. */
.pdb-workspace-shell__header--brand .pdb-entity-header__title { color: var(--pdb-text-on-brand); }
.pdb-workspace-shell__header--brand .pdb-entity-header__meta { color: var(--pdb-text-on-brand-muted); }
.pdb-workspace-shell__header--brand .pdb-entity-header__avatar { box-shadow: 0 0 0 2px var(--pdb-champagne-accent); }

.purp-workspace-sheet__eyebrow {
  color: var(--accent, #6420aa);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.purp-workspace-sheet__title {
  margin: 5px 0 0;
  font-size: clamp(1.45rem, 1.72vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.purp-workspace-sheet__subtitle {
  margin-top: 7px;
  max-width: 760px;
  color: var(--muted, #6d637b);
  font-size: 0.94rem;
  line-height: 1.45;
}

.purp-workspace-sheet__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(98, 40, 156, 0.18);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #21152f);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.purp-workspace-sheet__close:hover {
  border-color: rgba(98, 40, 156, 0.38);
  background: rgba(98, 40, 156, 0.06);
}

.purp-workspace-sheet__tabs {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px calc(var(--purp-sheet-gutter) + 8px) 14px;
  border-bottom: 1px solid rgba(98, 40, 156, 0.1);
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 10px 22px rgba(24, 14, 42, 0.035);
}

.purp-workspace-sheet__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(98, 40, 156, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #6d637b);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.purp-workspace-sheet__tab.active {
  color: var(--accent, #6420aa);
  background: rgba(98, 40, 156, 0.1);
  border-color: rgba(98, 40, 156, 0.34);
}

.purp-workspace-sheet__body {
  --purp-sheet-body-left: calc(var(--purp-sheet-gutter) + 4px);
  --purp-sheet-body-right: calc(var(--purp-sheet-gutter) + 4px);
  --purp-sheet-body-bottom: var(--purp-sheet-gutter);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Sheets re-render while the operator types; scroll anchoring re-pinning the focused
     field rewrites scrollTop mid-scroll. Position is owned by the operator (and the
     explicit clamp), never by the anchor heuristic. */
  overflow-anchor: none;
  padding: var(--purp-sheet-gutter) var(--purp-sheet-body-right) var(--purp-sheet-body-bottom) var(--purp-sheet-body-left);
}

/* ── PurpScrollArea / .pdb-scroll — THE universal scroll region ──────────────────
   Enterprise-grade defaults for every scroll container (see PurpScrollArea.tsx):
   correct flex-scroll (min-height:0), momentum, overscroll containment, one thin
   themed scrollbar. Deliberately NO content-visibility / contain:paint by default —
   those pop content in during scroll or clip escaping children; opt in per region
   via the --isolate / --gpu modifiers only. */
.pdb-scroll {
  min-height: 0;
  /* Sister footgun to min-height:0 — without it a wide flex child (carousel, table,
     long token) forces horizontal overflow inside the scroller. */
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pdb-scroll-thumb, var(--pdb-border-strong)) transparent;
}
.pdb-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.pdb-scroll::-webkit-scrollbar-track { background: transparent; }
.pdb-scroll::-webkit-scrollbar-thumb {
  background: var(--pdb-scroll-thumb, var(--pdb-border-strong));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.pdb-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--pdb-scroll-thumb-hover, var(--pdb-purp-action));
  background-clip: padding-box;
}
.pdb-scroll--y { overflow-x: hidden; overflow-y: auto; }
.pdb-scroll--x { overflow-x: auto; overflow-y: hidden; }
.pdb-scroll--both { overflow: auto; }
.pdb-scroll--flex { flex: 1 1 auto; }
.pdb-scroll--chain { overscroll-behavior: auto; scrollbar-gutter: stable; }
.pdb-scroll--gpu { will-change: scroll-position; }
.pdb-scroll--isolate { contain: layout paint; }

/* Sheet bodies opt OUT of Safari's self-rubber-band (`none`, not the .pdb-scroll
   default `contain` — the compound selector outranks it). A desktop-Safari bounce
   interrupted by a React re-render (content swap / loader inserted above the
   scrolled content) cancels WebKit's snap-back and strands scrollTop out of range
   on blank space. The sheet body is a LEAF scroller inside a modal whose
   document scroll is already locked (useBodyScrollLock), so no surface relies on
   chaining past it — killing the self-bounce here cannot break scroll chaining.
   .pdb-scroll itself stays `contain` platform-wide; do NOT change it globally. */
.purp-workspace-sheet__body.pdb-scroll {
  overscroll-behavior: none;
}

.purp-workspace-sheet__footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 10px calc(var(--purp-sheet-gutter) + 4px);
  border-top: 1px solid rgba(98, 40, 156, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.purp-workspace-sheet__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.purp-workspace-sheet__actions-spacer {
  flex: 1 1 auto;
}

/* Leading slot in the action row (left of Cancel/Save) — holds the compact,
 * specific validation-error list. Muted, small, wraps gracefully; never crowds
 * the buttons (the spacer to its right always keeps the buttons right-aligned). */
.purp-workspace-sheet__actions-lead {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(58%, 560px);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted, #6d637b);
}

.purp-workspace-button {
  min-height: 42px;
  max-width: 100%;
  padding: 8px 16px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(98, 40, 156, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #21152f);
  font-weight: 850;
  cursor: pointer;
}

.purp-workspace-button--primary {
  border-color: transparent;
  background: var(--accent, #6420aa);
  color: #fff;
}

.purp-workspace-button--secondary {
  background: #fff;
}

.purp-workspace-button--danger {
  border-color: rgba(186, 42, 54, 0.24);
  color: #9f1f2e;
  background: rgba(255, 235, 238, 0.84);
}

.purp-workspace-button--rose {
  border-color: var(--pdb-status-rose-border);
  color: var(--pdb-status-rose-text);
  background: var(--pdb-status-rose-bg);
}

.purp-workspace-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.purp-workspace-button[aria-disabled="true"]:not(:disabled) {
  cursor: help;
  opacity: 0.48;
}

.purp-workspace-confirm {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(98, 40, 156, 0.18);
  background: #fff;
  box-shadow: 0 24px 70px rgba(24, 14, 42, 0.24);
  outline: none;
}

.purp-workspace-confirm h3 {
  margin: 0;
  font-size: 1.15rem;
}

.purp-workspace-confirm p {
  margin: 8px 0 0;
  color: var(--muted, #6d637b);
}

.purp-workspace-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.purp-field-shell input,
.purp-field-shell select,
.purp-field-shell textarea,
.purp-workspace-sheet input.inside-shell,
.purp-workspace-sheet select.inside-shell,
.purp-workspace-sheet textarea.inside-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.purp-workspace-sheet :focus-visible,
.purp-workspace-confirm :focus-visible {
  outline: 3px solid rgba(98, 40, 156, 0.28);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .purp-workspace-sheet,
  .purp-workspace-sheet--wide,
  .purp-workspace-sheet--workflow {
    width: min(calc(100vw - 24px), 920px);
  }
}

/* One mobile overlay geometry contract, including narrow host panels and phone rotation. */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .pdb-workspace-sheet.purp-workspace-sheet.purp-workspace-sheet--mobile-full {
    --purp-sheet-gutter: 12px;
    --purp-sheet-gap: 8px;
    --purp-sheet-chrome-block: 12px;
    --purp-sheet-body-block: 12px;
    --purp-sheet-inline: 12px;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__header {
    padding: max(var(--purp-sheet-chrome-block), env(safe-area-inset-top, 0px)) max(var(--purp-sheet-inline), env(safe-area-inset-right, 0px)) var(--purp-sheet-chrome-block) max(var(--purp-sheet-inline), env(safe-area-inset-left, 0px));
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__body {
    --purp-sheet-body-left: max(var(--purp-sheet-inline), env(safe-area-inset-left, 0px));
    --purp-sheet-body-right: max(var(--purp-sheet-inline), env(safe-area-inset-right, 0px));
    --purp-sheet-body-bottom: max(var(--purp-sheet-body-block), env(safe-area-inset-bottom, 0px));
    padding: var(--purp-sheet-body-block) var(--purp-sheet-body-right) var(--purp-sheet-body-bottom) var(--purp-sheet-body-left);
    scroll-padding-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__footer {
    padding: var(--purp-sheet-chrome-block) max(var(--purp-sheet-inline), env(safe-area-inset-right, 0px)) max(var(--purp-sheet-chrome-block), env(safe-area-inset-bottom, 0px)) max(var(--purp-sheet-inline), env(safe-area-inset-left, 0px));
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__tabs {
    padding: 6px max(var(--purp-sheet-inline), env(safe-area-inset-right, 0px)) 6px max(var(--purp-sheet-inline), env(safe-area-inset-left, 0px));
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__close,
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__tab {
    min-width: 44px;
    min-height: 44px;
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__actions-spacer { display: none; }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__actions-lead {
    flex: 1 0 100%;
    max-width: 100%;
    order: -1;
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-button { flex: 0 1 auto; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .pdb-workspace-sheet.purp-workspace-sheet.purp-workspace-sheet--mobile-full {
    --purp-sheet-chrome-block: 6px;
    --purp-sheet-body-block: 8px;
  }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__title { margin-top: 2px; font-size: 18px; line-height: 1.15; }
  .purp-workspace-sheet--mobile-full .purp-workspace-sheet__subtitle { margin-top: 3px; font-size: 12px; line-height: 1.25; }
}

/* Docked companion (presentation="docked"): an inline, non-modal panel the
 * host lays out beside its content. The host sets --purp-companion-inset to
 * the panel's width while it is open so navigation-aware drawers slide in
 * LEFT of it and never cover it; --purp-companion-width sizes the panel. */
.purp-workspace-backdrop--navigation-aware {
  /* The host may cap the inset (for example to what a full-width drawer still
     leaves free) so a companion never squeezes a drawer below its design width. */
  right: min(var(--purp-companion-inset, 0px), var(--purp-companion-inset-max, var(--purp-companion-inset, 0px)));
}
.purp-workspace-sheet.purp-workspace-sheet--docked {
  position: relative;
  flex: 0 0 var(--purp-companion-width, 420px);
  width: var(--purp-companion-width, 420px);
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  border-left: 1px solid rgba(98, 40, 156, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .purp-workspace-sheet.purp-workspace-sheet--docked { transition: none; }
}

@keyframes purpWorkspaceIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   PURP Design Brain — design-system layer (single source).
   Lives in @purp/ui/styles.css so every page/tab/drawer that
   imports @purp/ui/styles.css gets it. Change here = everywhere.
   ============================================================ */
/* ============================================================
   PURP Design Brain v1 — runtime tokens + component layer
   ------------------------------------------------------------
   Imported AFTER styles.css so it can build on the existing brand
   tokens (--primary, --muted, --text, --surface, --border, --green,
   --red, --orange, --radius, --shadow-panel, --focus-ring). We do
   NOT redefine the brand palette — only add a `--pdb-*` layer and
   the design-system component classes.
   ============================================================ */

:root {
  /* One fluid page rhythm for legacy screens and Design Brain pages. */
  --pdb-page-padding-inline: clamp(12px, 2.4vw, 32px);
  --pdb-page-padding-block: clamp(12px, 2.4vmin, 28px) clamp(24px, 4vmin, 40px);
  --pdb-page-gap: clamp(12px, 1.8vmin, 20px);
  /* Spacing scale (mirrors tokens.ts SPACE) */
  --pdb-space-xs: 4px;
  --pdb-space-sm: 6px;
  --pdb-space-md: 8px;
  --pdb-space-lg: 12px;
  --pdb-space-xl: 16px;
  --pdb-space-2xl: 20px;
  --pdb-space-3xl: 28px;

  --pdb-radius-sm: 6px;
  --pdb-radius-md: 8px;
  --pdb-radius-lg: 12px;
  --pdb-radius-xl: 14px;

  --pdb-panel-pad: 16px;
  --pdb-section-gap: 14px;
  --pdb-field-pad: 10px 12px;

  --pdb-modal-width: clamp(560px, 60vw, 920px);

  /* Field-scope color contract (paired with catalogFieldScopes tones) */
  --pdb-scope-canonical-fg: #6420aa;
  --pdb-scope-canonical-bg: rgba(102, 14, 174, .10);
  --pdb-scope-canonical-line: rgba(102, 14, 174, .28);

  /* 3e: de-greened. Location scope is PURP periwinkle / soft indigo —
     visually distinct from canonical violet & external blue, never teal/green. */
  --pdb-scope-location-fg: #4432a8;
  --pdb-scope-location-bg: rgba(79, 65, 190, .12);
  --pdb-scope-location-line: rgba(79, 65, 190, .30);

  --pdb-scope-provider-fg: #9a6212;
  --pdb-scope-provider-bg: rgba(214, 158, 18, .15);
  --pdb-scope-provider-line: rgba(214, 158, 18, .34);

  --pdb-scope-external-fg: #1f5fae;
  --pdb-scope-external-bg: rgba(33, 110, 200, .12);
  --pdb-scope-external-line: rgba(33, 110, 200, .30);

  --pdb-scope-derived-fg: #5a5566;
  --pdb-scope-derived-bg: rgba(90, 85, 102, .12);
  --pdb-scope-derived-line: rgba(90, 85, 102, .26);

  --pdb-scope-custom-fg: #a8338a;
  --pdb-scope-custom-bg: rgba(168, 51, 138, .12);
  --pdb-scope-custom-line: rgba(168, 51, 138, .30);

  /* Status tones. 3e: the legacy positive tone now resolves through the
     de-greened PURP status-positive system (lavender/plum), so the older
     PurpBadge / .pdb-badge--positive path can never render green again.
     CSS custom properties resolve at use-time, so the forward reference to
     --pdb-status-positive-* (defined later in :root) is correct. */
  --pdb-tone-positive-fg: var(--pdb-status-positive-text);
  --pdb-tone-positive-bg: var(--pdb-status-positive-bg);
  /* ROSE — the brand pink. Carries operator obligation ("Required") without the
     alarm reading of attention-amber or critical-red. */
  --pdb-tone-rose-fg: var(--pdb-status-rose-text);
  --pdb-tone-rose-bg: var(--pdb-status-rose-bg);
  --pdb-tone-attention-fg: var(--orange, #b86a14);
  --pdb-tone-attention-bg: rgba(184, 106, 20, .14);
  --pdb-tone-critical-fg: var(--red, #c64539);
  --pdb-tone-critical-bg: rgba(198, 69, 57, .12);
  --pdb-tone-info-fg: var(--primary, #6420aa);
  --pdb-tone-info-bg: rgba(102, 14, 174, .12);
  --pdb-tone-muted-fg: var(--muted, #62586f);
  --pdb-tone-muted-bg: #f3f2f7;
  --pdb-tone-neutral-fg: var(--text, #21172b);
  --pdb-tone-neutral-bg: rgba(33, 23, 43, .06);
}

/* ---------- Workspace shell ---------- */
.pdb-workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pdb-workspace__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdb-space-lg);
  padding: 14px 0 12px;
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
}

.pdb-workspace__heading { min-width: 0; }

.pdb-workspace__eyebrow {
  color: var(--primary, #6420aa);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pdb-workspace__title {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 1.5vw, 1.65rem);
  line-height: 1.12;
}

.pdb-workspace__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pdb-workspace__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---------- Summary strip ---------- */
.pdb-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 var(--pdb-section-gap);
}

.pdb-summary-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border, #e6e2ec);
  border-left: 3px solid var(--pdb-scope-line, var(--border));
  border-radius: var(--pdb-radius-md);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(33, 23, 43, .04));
}

.pdb-summary-card__label {
  display: block;
  color: var(--muted, #62586f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pdb-summary-card__value {
  display: block;
  margin-top: 5px;
  font-size: 21px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--text, #21172b);
}

.pdb-summary-card__detail {
  display: block;
  margin-top: 3px;
  color: var(--muted, #62586f);
  font-size: 11px;
}

/* ---------- Scope legend ---------- */
.pdb-scope-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: var(--pdb-section-gap);
  border: 1px dashed var(--border, #e6e2ec);
  border-radius: var(--pdb-radius-md);
  background: var(--surface-soft, #f3eefb);
}

.pdb-scope-legend__title {
  color: var(--muted, #62586f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Tabs ---------- */
/* 3f: tabs live in NORMAL document flow. PurpTabs is now the shared tab
   component for Company top tabs, Locations sub-tabs and Integrations
   diagnostics — multiple sticky bars at the same offset clipped headings
   and floated over content. Reserved space + a clean separator instead of
   sticky/z-index/gradient. Sticky is opt-in (.pdb-tabs--sticky) for a
   single, offset-controlled rail only. */
.pdb-tabs {
  display: flex;
  gap: var(--pdb-space-xs);
  flex-wrap: wrap;
  padding-bottom: var(--pdb-space-sm);
  margin-bottom: var(--pdb-space-md);
  border-bottom: 1px solid var(--pdb-border-subtle);
}
/* opt-in only — requires a known shell offset; not used by Company/Locations. */
.pdb-tabs--sticky {
  position: sticky;
  top: var(--pdb-shell-offset, 64px);
  z-index: 2;
  background: var(--pdb-bg-page);
}

.pdb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border, #e6e2ec);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--pdb-status-gold-text);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pdb-tab:hover { color: var(--primary, #6420aa); border-color: rgba(102, 14, 174, .24); background: #fff; }

.pdb-tab.active {
  color: var(--primary-strong, #4e0a85);
  background: var(--primary-soft, #f1e9ff);
  border-color: rgba(102, 14, 174, .30);
}

.pdb-tab__count {
  min-width: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(102, 14, 174, .12);
  color: var(--primary-strong, #4e0a85);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.pdb-tab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

/* Review tabs: purple selection, champagne counters, rose attention. */
.pdb-tabs--segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--pdb-border-subtle);
  border-radius: 14px;
  background: var(--pdb-bg-surface-tinted);
}
.pdb-tabs--segmented .pdb-tab {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  border-radius: 10px;
  border-color: transparent;
  color: var(--pdb-purp-primary);
  background: transparent;
  white-space: normal;
}
.pdb-tabs--segmented .pdb-tab.active {
  background: var(--pdb-purp-primary);
  color: var(--pdb-button-primary-text, #fff);
}
.pdb-tabs--segmented .pdb-tab__count {
  flex-shrink: 0;
  background: var(--pdb-status-gold-bg);
  color: var(--pdb-status-gold-text);
  border-radius: 999px;
}
.pdb-tabs--segmented .pdb-tab--tone-rose .pdb-tab__count {
  background: var(--pdb-status-rose-bg);
  color: var(--pdb-status-rose-text);
}
.pdb-tabs--segmented .pdb-tab { gap: 6px; padding-inline: 8px; }
.pdb-tabs--segmented .pdb-tab__label { min-width: 0; text-wrap: balance; overflow-wrap: anywhere; line-height: 1.15; }

/* Ordered, three-step operator workflows. This is a PurpTabs variant, not app-local
   chrome: the same pill, status, focus and responsive language travels with the Design Brain. */
.pdb-tabs--lifecycle {
  align-items: center;
  justify-content: center;
  gap: var(--pdb-space-sm);
  padding: var(--pdb-space-xs) 0;
  margin-bottom: var(--pdb-space-lg);
  border-bottom: 0;
  flex-wrap: nowrap;
}
.pdb-tabs--lifecycle .pdb-tab {
  min-height: 40px;
  padding-inline: var(--pdb-space-lg);
  justify-content: center;
  white-space: nowrap;
}
.pdb-tabs--lifecycle .pdb-tab--tone-positive {
  color: var(--pdb-status-positive-text);
  background: var(--pdb-status-positive-bg);
  border-color: var(--pdb-status-positive-border);
}
.pdb-tabs--lifecycle .pdb-tab--tone-gold {
  color: var(--pdb-status-gold-text);
  background: var(--pdb-status-gold-bg);
  border-color: var(--pdb-status-gold-border);
}
.pdb-tabs--lifecycle .pdb-tab--tone-gold.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-status-gold-dot) 10%, transparent);
}
.pdb-tabs--lifecycle .pdb-tab--tone-rose {
  color: var(--pdb-status-rose-text);
  background: var(--pdb-status-rose-bg);
  border-color: var(--pdb-status-rose-border);
}
.pdb-tabs--lifecycle .pdb-tab--tone-rose.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-status-rose-dot) 9%, transparent);
}
.pdb-tab__connector {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--pdb-purple-400);
  font-weight: var(--pdb-font-weight-bold);
}
@media (max-width: 680px) {
  .pdb-tabs--lifecycle {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .pdb-tabs--lifecycle .pdb-tab { flex: 0 0 auto; }
}

/* ---------- Panel + Section ---------- */
.pdb-panel {
  padding: var(--pdb-panel-pad);
  border: 1px solid var(--border, #e6e2ec);
  border-radius: var(--pdb-radius-xl);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(33, 23, 43, .04));
}

.pdb-section { display: grid; gap: 12px; }

/* The head actions share the section width with the title. When a phone or a narrow drawer has
   no room for both, the whole action group moves under the title and its buttons wrap inside the
   section, never past its edge (the saved product drawer's Variants head at 390px). */
.pdb-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdb-space-lg);
}
.pdb-section__head > * { min-width: 0; max-width: 100%; }

.pdb-section__kicker {
  color: var(--muted, #62586f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pdb-section__title {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.2;
}

.pdb-section__desc {
  margin: 5px 0 0;
  max-width: 70ch;
  color: var(--muted, #62586f);
  font-size: 12.5px;
  line-height: 1.45;
}

/* inlineDescription: title + description share ONE baseline-aligned row (wraps only when forced). */
.pdb-section__title-row {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.pdb-section__desc--inline { margin: 0; }

.pdb-section__head-actions { display: flex; flex-wrap: wrap; gap: var(--pdb-space-sm); flex: 0 0 auto; }

/* Scope-tinted left rail on a section */
.pdb-section--scoped {
  padding-left: 14px;
  border-left: 3px solid var(--pdb-scope-line, var(--border));
}

/* Section surface variants — 'plain' stays flat (default); 'card' is a bordered
   surface; 'feature' is the highlighted primary section. Token-driven only. */
.pdb-section--card,
.pdb-section--feature {
  background: var(--pdb-bg-surface-raised);
  border: 1px solid var(--pdb-border-default);
  border-radius: var(--pdb-radius-xl);
  padding: var(--pdb-panel-pad);
}
.pdb-section--feature {
  border-color: var(--pdb-scope-canonical-line);
  box-shadow: var(--pdb-card-shadow-hover);
}

/* ---------- Entity header (avatar + title + badges + meta line) ---------- */
.pdb-entity-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--pdb-section-gap);
  align-items: center;
  width: 100%;
  min-width: 0;
}
.pdb-entity-header__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--pdb-radius-xl);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--pdb-text-on-brand);
  background: linear-gradient(135deg, var(--pdb-purp-violet) 0%, var(--pdb-purp-royal) 100%);
  overflow: hidden;
}
.pdb-entity-header__body { min-width: 0; display: flex; flex-direction: column; gap: var(--pdb-space-sm); }
.pdb-entity-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pdb-space-md) var(--pdb-space-lg);
  min-width: 0;
}
.pdb-entity-header__title {
  font-size: clamp(1.3rem, 1.4vw, 1.7rem);
  font-weight: 800;
  line-height: var(--pdb-line-height-tight);
  letter-spacing: -0.01em;
  color: var(--pdb-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pdb-entity-header__badges { display: inline-flex; flex-wrap: wrap; gap: var(--pdb-space-sm); }
.pdb-entity-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pdb-space-sm) var(--pdb-section-gap);
  font-size: 13.5px;
  color: var(--pdb-text-muted);
  min-width: 0;
}
.pdb-entity-header__meta > [aria-hidden="true"] { opacity: .5; }

/* ---------- Progress bar (server-reported progress only) ---------- */
.pdb-progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--pdb-radius-pill);
  background: var(--pdb-status-info-bg);
  border: 1px solid var(--pdb-status-info-border);
}
.pdb-progress--sm { height: 5px; }
.pdb-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pdb-purp-violet);
  transition: width .4s ease;
}
.pdb-progress--gold { background: var(--pdb-status-gold-bg); border-color: var(--pdb-status-gold-border); }
.pdb-progress--gold .pdb-progress__fill { background: var(--pdb-status-gold-dot); }
.pdb-progress--rose { background: var(--pdb-status-rose-bg); border-color: var(--pdb-status-rose-border); }
.pdb-progress--rose .pdb-progress__fill { background: var(--pdb-status-rose-dot); }
.pdb-progress--indeterminate .pdb-progress__fill {
  width: 35%;
  animation: pdb-progress-travel 1.6s ease-in-out infinite alternate;
}
@keyframes pdb-progress-travel { from { transform: translateX(0); } to { transform: translateX(185%); } }
@media (prefers-reduced-motion: reduce) {
  .pdb-progress__fill { transition: none; }
  .pdb-progress--indeterminate .pdb-progress__fill { animation: none; width: 100%; opacity: .55; }
}

/* ---------- Report bars: bar list, share bar, inline bars, flow steps ----------
   Single-line everywhere (nowrap + ellipsis; full text lives in `title`).
   --pdb-share-1…8 is the one segment sequence: royal, violet, orchid,
   lavender, champagne accent, gold antique, plum, mist border. Dark surfaces
   swap to lighter steps so no segment disappears into the plum/royal ground. */
:root, [data-pdb-appearance="light"] {
  --pdb-share-1: var(--pdb-purp-royal);
  --pdb-share-2: var(--pdb-purp-violet);
  --pdb-share-3: var(--pdb-purp-orchid);
  --pdb-share-4: var(--pdb-purp-lavender);
  --pdb-share-5: var(--pdb-champagne-accent);
  --pdb-share-6: var(--pdb-gold-antique);
  --pdb-share-7: var(--pdb-purp-plum);
  --pdb-share-8: var(--pdb-border-default);
}
[data-pdb-appearance="dark"], [data-pdb-surface="commandDark"], [data-pdb-surface="driver"]:not([data-pdb-appearance="light"]) {
  --pdb-share-1: var(--pdb-purp-orchid);
  --pdb-share-2: var(--pdb-purp-violet);
  --pdb-share-3: var(--pdb-orchid-300);
  --pdb-share-4: var(--pdb-purp-lavender);
  --pdb-share-5: var(--pdb-champagne-accent);
  --pdb-share-6: var(--pdb-gold-antique);
  --pdb-share-7: var(--pdb-purp-primary);
  --pdb-share-8: var(--pdb-border-default);
}

.pdb-barlist { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.pdb-barlist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-barlist__item { min-width: 0; }
.pdb-barlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) auto;
  align-items: center;
  column-gap: var(--pdb-space-md);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 4px var(--pdb-space-sm);
  border: 1px solid transparent;
  border-radius: var(--pdb-radius-sm);
  background: transparent;
  color: var(--pdb-text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
}
.pdb-barlist__row--plain { grid-template-columns: minmax(0, 1fr) auto; }
button.pdb-barlist__row { cursor: pointer; }
button.pdb-barlist__row:hover:not(:disabled) { background: var(--pdb-bg-surface-tinted); }
button.pdb-barlist__row:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }
.pdb-barlist__row--selected { background: var(--pdb-bg-surface-tinted); border-color: var(--pdb-border-default); }
.pdb-barlist__row--disabled, .pdb-barlist__row:disabled { opacity: .55; cursor: not-allowed; }
.pdb-barlist__label { display: flex; align-items: baseline; gap: var(--pdb-space-sm); min-width: 0; overflow: hidden; }
.pdb-barlist__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-barlist__meta { flex: 0 0 auto; color: var(--pdb-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pdb-barlist__track { display: block; height: 6px; min-width: 0; overflow: hidden; border-radius: var(--pdb-radius-pill, 999px); background: var(--pdb-bg-surface-tinted); }
.pdb-barlist__fill { display: block; height: 100%; border-radius: inherit; background: var(--pdb-purp-violet); transition: width .25s ease; }
.pdb-barlist__fill--gold { background: var(--pdb-status-gold-dot); }
.pdb-barlist__fill--rose { background: var(--pdb-status-rose-dot); }
.pdb-barlist__fill--positive { background: var(--pdb-status-positive-dot); }
.pdb-barlist__fill--neutral { background: var(--pdb-border-default); }
.pdb-barlist__fill--info { background: var(--pdb-status-info-dot); }
.pdb-barlist__value { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; white-space: nowrap; }
.pdb-barlist__toggle {
  align-self: flex-start;
  margin: 0;
  padding: 2px var(--pdb-space-sm);
  border: 0;
  border-radius: var(--pdb-radius-sm);
  background: transparent;
  color: var(--pdb-purp-action);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.pdb-barlist__toggle:hover { text-decoration: underline; }
.pdb-barlist__toggle:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pdb-barlist__fill { transition: none; } }
/* Compact labels: a bounded name column, so a wide card's bars start right after the names. */
.pdb-barlist--compact-labels .pdb-barlist__row { grid-template-columns: minmax(0, 9.5rem) minmax(40px, 1fr) auto; }
/* Meta column: the meta gets its own cell beside the value, so it never narrows the name. The list owns the four
   tracks and every row takes them as a subgrid, so bars, metas and values line up whatever each row's text width. */
.pdb-barlist--meta-column .pdb-barlist__list { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) auto auto; column-gap: var(--pdb-space-md); row-gap: 2px; }
.pdb-barlist--meta-column.pdb-barlist--compact-labels .pdb-barlist__list { grid-template-columns: minmax(0, 9.5rem) minmax(40px, 1fr) auto auto; }
.pdb-barlist--meta-column .pdb-barlist__item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.pdb-barlist--meta-column .pdb-barlist__row,
.pdb-barlist--meta-column.pdb-barlist--compact-labels .pdb-barlist__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
.pdb-barlist--meta-column .pdb-barlist__meta { text-align: right; }
/* Tiles: a few headline counts, each a bordered tile (tone dot · label · large value). The tiles share the
   card's height evenly, so a short list still reads full beside taller neighbours. */
.pdb-barlist--tiles { flex: 1 1 auto; }
.pdb-barlist--tiles .pdb-barlist__list { flex: 1 1 auto; gap: var(--pdb-space-sm); }
.pdb-barlist--tiles .pdb-barlist__item { display: flex; flex: 1 1 0; }
.pdb-barlist--tiles .pdb-barlist__row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--pdb-space-sm);
  min-height: 40px;
  padding: var(--pdb-space-xs) var(--pdb-space-md);
  border-color: var(--pdb-border-subtle);
  border-radius: var(--pdb-radius-md);
  background: var(--pdb-bg-surface-raised);
}
.pdb-barlist--tiles .pdb-barlist__row--selected { border-color: var(--pdb-purp-violet); background: var(--pdb-bg-surface-tinted); }
.pdb-barlist--tiles .pdb-barlist__value { font-size: 20px; font-weight: 750; line-height: 1.1; }
.pdb-barlist__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--pdb-purp-violet); }
.pdb-barlist__dot--gold { background: var(--pdb-status-gold-dot); }
.pdb-barlist__dot--rose { background: var(--pdb-status-rose-dot); }
.pdb-barlist__dot--positive { background: var(--pdb-status-positive-dot); }
.pdb-barlist__dot--info { background: var(--pdb-status-info-dot); }
.pdb-barlist__dot--neutral { background: var(--pdb-border-default); }

.pdb-sharebar { display: flex; flex-direction: column; gap: var(--pdb-space-md); min-width: 0; max-width: 100%; }
.pdb-sharebar__bar { display: flex; height: 10px; min-width: 0; overflow: hidden; gap: 1px; border-radius: var(--pdb-radius-pill, 999px); background: var(--pdb-bg-surface-tinted); }
.pdb-sharebar__segment { display: block; flex: 0 1 0; min-width: 2px; height: 100%; }
.pdb-sharebar__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-sharebar__legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--pdb-space-md);
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}
.pdb-sharebar__swatch { display: block; width: 10px; height: 10px; border-radius: 3px; }
.pdb-sharebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-sharebar__value { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.pdb-sharebar__meta { color: var(--pdb-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.pdb-sharebar__c1 { background: var(--pdb-share-1); }
.pdb-sharebar__c2 { background: var(--pdb-share-2); }
.pdb-sharebar__c3 { background: var(--pdb-share-3); }
.pdb-sharebar__c4 { background: var(--pdb-share-4); }
.pdb-sharebar__c5 { background: var(--pdb-share-5); }
.pdb-sharebar__c6 { background: var(--pdb-share-6); }
.pdb-sharebar__c7 { background: var(--pdb-share-7); }
.pdb-sharebar__c8 { background: var(--pdb-share-8); }

.pdb-inlinebars { display: inline-flex; align-items: flex-end; gap: 2px; width: 64px; max-width: 100%; height: 18px; vertical-align: middle; white-space: nowrap; }
.pdb-inlinebars__slot { display: flex; align-items: flex-end; flex: 1 1 0; min-width: 2px; height: 100%; border-bottom: 1px solid var(--pdb-border-subtle); }
.pdb-inlinebars__slot--unknown { border-bottom-style: dotted; border-bottom-color: var(--pdb-text-muted); }
.pdb-inlinebars__bar { display: block; width: 100%; border-radius: 2px 2px 0 0; background: var(--pdb-purp-violet); }

.pdb-compact-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--pdb-space-xs); padding-block: var(--pdb-space-xs); color: var(--pdb-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pdb-flow { container-type: inline-size; min-width: 0; max-width: 100%; }
.pdb-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--pdb-flow-count, 4), minmax(0, 1fr));
  gap: var(--pdb-space-lg);
  min-width: 0;
}
.pdb-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--pdb-space-md) var(--pdb-space-lg);
  border: 1px solid var(--pdb-border-subtle);
  border-top: 3px solid var(--pdb-border-default);
  border-radius: var(--pdb-radius-md);
  background: var(--pdb-bg-surface-raised);
  white-space: nowrap;
}
.pdb-flow__step--brand { border-top-color: var(--pdb-purp-violet); }
.pdb-flow__step--positive { border-top-color: var(--pdb-status-positive-dot); }
.pdb-flow__step--rose { border-top-color: var(--pdb-status-rose-dot); }
.pdb-flow__operator {
  position: absolute;
  top: 50%;
  left: calc(var(--pdb-space-lg) / -2);
  transform: translate(-50%, -50%);
  color: var(--pdb-text-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.pdb-flow__label, .pdb-flow__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pdb-text-muted); font-size: 12px; }
.pdb-flow__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pdb-text-primary); font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pdb-flow__step--rose .pdb-flow__value { color: var(--pdb-status-rose-text); }
@container (max-width: 520px) {
  .pdb-flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdb-flow__operator { display: none; }
}

/* ---------- Stat card + grid ---------- */
.pdb-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--pdb-stat-min-width, 180px), 100%), 1fr));
  gap: var(--pdb-space-lg);
}
/* Balanced (opt-in `balanced`, useBalancedStatGrid): the grid measures itself and writes the column count
   that keeps rows even (--pdb-stat-cols-fit); only a card that would sit alone under a full row spans the
   row (--pdb-stat-last-span). The card minimum below is the single home the hook reads. */
.pdb-stat-grid--balanced {
  --pdb-stat-balanced-min: 192px;
  grid-template-columns: repeat(var(--pdb-stat-cols-fit, 3), minmax(0, 1fr));
}
.pdb-stat-grid--balanced > :last-child { grid-column: span var(--pdb-stat-last-span, 1); }
.pdb-stat-card {
  background: var(--pdb-bg-surface-tinted);
  border: 1px solid var(--pdb-border-subtle);
  border-radius: var(--pdb-radius-xl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--pdb-space-xs);
  min-width: 0;
}
.pdb-stat-card--accent {
  background: linear-gradient(135deg, var(--pdb-purp-mist) 0%, var(--pdb-bg-surface-raised) 100%);
  border-color: var(--pdb-scope-canonical-line);
}
.pdb-stat-card--warning {
  background: var(--pdb-status-warning-bg);
  border-color: var(--pdb-status-warning-border);
}
.pdb-stat-card--warning .pdb-stat-card__value { color: var(--pdb-status-warning-text); }
.pdb-stat-card__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pdb-text-muted);
}
.pdb-stat-card__value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pdb-text-primary);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
}
.pdb-stat-card__value--sm { font-size: 18px; }
.pdb-stat-card__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--pdb-space-sm);
  font-size: 12px;
  color: var(--pdb-text-muted);
  min-width: 0;
}

/* PurpLoyaltyCard — faithful port of the PURP wallet HERO card: glassmorphic
   dark-purple panel, animated shine glare, gradient-text amount, divider, points
   row, glass pill. Exact colours from the wallet card (accent 107,47,160 /
   accent-light 201,160,255 / bg 18,6,36). --plc-accent ("r,g,b" triplet) + --plc-bg
   are overridable per-tenant when the wallet add-on supplies custom branding. */
.pdb-loyalty-card {
  /* All colours come from design tokens (defined once in :root). The accent is
     an "r,g,b" triplet so per-tenant wallet branding can override --plc-accent. */
  --plc-accent: var(--pdb-wallet-accent-light-rgb);
  --plc-bg:
    radial-gradient(ellipse at 30% 0%, rgba(var(--pdb-wallet-accent-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--pdb-wallet-deepglow-rgb), 0.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--pdb-wallet-hero-deep) 0%, var(--pdb-wallet-hero-rise) 100%);
  perspective: 1600px;
  border-radius: 20px;
  min-width: 0; /* as a grid item: let the recent-purchase rail clip+scroll, never widen the card */
  content-visibility: auto;
  contain-intrinsic-size: 0 220px;
}
/* Flip mechanics — front face sets the height; back face overlays it. Tap the
   front to reveal the transaction-history carousel, contained in the card size. */
.pdb-loyalty-card__flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}
.pdb-loyalty-card.is-flipped .pdb-loyalty-card__flipper { transform: rotateY(180deg); }
.pdb-loyalty-card__face {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 20px 20px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(var(--pdb-wallet-accent-rgb), 0.20) 0%, rgba(var(--pdb-on-brand-rgb), 0.04) 50%, rgba(var(--pdb-wallet-accent-rgb), 0.10) 100%),
    var(--plc-bg);
  border: 1.5px solid rgba(var(--plc-accent), 0.18);
  box-shadow: 0 12px 32px rgba(var(--pdb-shadow-rgb), 0.28), 0 0 30px rgba(var(--pdb-wallet-accent-rgb), 0.15), inset 0 0 0 1px rgba(var(--pdb-on-brand-rgb), 0.04);
  color: var(--pdb-text-on-brand);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pdb-loyalty-card__face--front { text-align: center; }
.pdb-loyalty-card--flippable .pdb-loyalty-card__face--front,
.pdb-loyalty-card--openable .pdb-loyalty-card__face--front { cursor: pointer; }
/* Expiry "valid thru" mark — top-left, balancing the flip button top-right. */
.pdb-loyalty-card__expiry {
  position: absolute; top: 14px; left: 16px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  pointer-events: none;
}
.pdb-loyalty-card__expiry-label {
  font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--plc-accent), 0.6);
}
.pdb-loyalty-card__expiry-value {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(var(--pdb-on-brand-rgb), 0.82); font-variant-numeric: tabular-nums;
}
.pdb-loyalty-card__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
/* Glass shine — a light streak that sweeps across the front face */
.pdb-loyalty-card__face--front::before {
  content: '';
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(var(--pdb-on-brand-rgb), 0.03) 30%, rgba(var(--pdb-on-brand-rgb), 0.08) 50%,
    rgba(var(--pdb-on-brand-rgb), 0.03) 70%, transparent 100%);
  transform: skewX(-15deg);
  animation: pdb-loyalty-shine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.pdb-loyalty-card__face--front > * { position: relative; z-index: 2; }
/* Flip affordance — small round button, top-right of the front face */
.pdb-loyalty-card__flip {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--pdb-on-brand-rgb), 0.08); border: 1px solid rgba(var(--plc-accent), 0.25);
  color: rgb(var(--plc-accent)); cursor: pointer; font-size: 13px; line-height: 1;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pdb-loyalty-card__flip:hover { background: rgba(var(--pdb-on-brand-rgb), 0.14); }
/* Back side — transaction-history carousel */
.pdb-loyalty-card__back-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--plc-accent), 0.85);
}
.pdb-loyalty-card__back-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(var(--plc-accent), 0.25); background: rgba(var(--pdb-on-brand-rgb), 0.06);
  color: rgb(var(--plc-accent)); cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdb-loyalty-card__ledger {
  flex: 1; display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 2px;
}
.pdb-loyalty-card__ledger::-webkit-scrollbar { height: 4px; }
.pdb-loyalty-card__ledger::-webkit-scrollbar-thumb { background: rgba(var(--plc-accent), .4); border-radius: 999px; }
.pdb-loyalty-card__txn {
  flex: 0 0 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--pdb-on-brand-rgb), 0.05); border: 1px solid rgba(var(--plc-accent), 0.12);
}
.pdb-loyalty-card__txn-amount { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pdb-loyalty-card__txn-amount--pos { color: var(--pdb-tone-positive-on-brand); }
.pdb-loyalty-card__txn-amount--neg { color: var(--pdb-tone-negative-on-brand); }
.pdb-loyalty-card__txn-amount--neu { color: var(--pdb-text-on-brand); }
.pdb-loyalty-card__txn-label { font-size: 12px; font-weight: 600; color: var(--pdb-text-on-brand); }
.pdb-loyalty-card__txn-sub { font-size: 10px; color: rgba(var(--pdb-on-brand-rgb), 0.6); }
.pdb-loyalty-card__txn-bal { font-size: 10px; color: rgba(var(--plc-accent), 0.85); margin-top: 1px; }
.pdb-loyalty-card__ledger-empty { flex: 1; display: flex; align-items: center; color: rgba(var(--pdb-on-brand-rgb), 0.62); font-size: 12px; }
.pdb-loyalty-card__eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(var(--plc-accent), 0.7); margin: 0 0 8px;
}
.pdb-loyalty-card__amount {
  font-size: 44px; font-weight: 700; margin: 0; line-height: 1;
  background: linear-gradient(135deg, rgb(var(--pdb-on-brand-rgb)) 0%, var(--pdb-wallet-amount-mid) 50%, rgb(var(--pdb-on-brand-rgb)) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pdb-loyalty-gradient-text 4s ease infinite;
  filter: drop-shadow(0 2px 8px rgba(var(--pdb-wallet-accent-rgb), 0.3));
}
.pdb-loyalty-card__stale { font-size: 11px; color: rgba(var(--pdb-on-brand-rgb), 0.6); margin: 4px 0 0; }
.pdb-loyalty-card__divider {
  height: 1px; margin: 16px 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--plc-accent), 0.2) 50%, transparent 100%);
}
.pdb-loyalty-card__points-row { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.pdb-loyalty-card__points-left { display: flex; flex-direction: column; gap: 2px; }
.pdb-loyalty-card__points-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pdb-loyalty-card__value { font-size: 26px; font-weight: 700; line-height: 1; color: var(--pdb-text-on-brand); }
.pdb-loyalty-card__label { font-size: 11px; color: rgba(var(--pdb-on-brand-rgb), 0.8); }
.pdb-loyalty-card__equiv { font-size: 16px; font-weight: 600; color: rgba(var(--pdb-on-brand-rgb), 0.7); }
.pdb-loyalty-card__pill {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(var(--plc-accent)); background: rgba(var(--plc-accent), 0.1);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(var(--plc-accent), 0.15);
}
@keyframes pdb-loyalty-shine { 0% { left: -120%; } 40% { left: 120%; } 100% { left: 120%; } }
@keyframes pdb-loyalty-gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .pdb-loyalty-card__face--front::before, .pdb-loyalty-card__amount { animation: none; }
  .pdb-loyalty-card__flipper { transition: none; }
}

/* ── Directory mode: holder header (customer name + contact, above the eyebrow) ── */
.pdb-loyalty-card__holder {
  display: flex; flex-direction: column; gap: 3px; margin: 0 0 9px; text-align: center; min-width: 0;
}
.pdb-loyalty-card__holder-name {
  font-size: 16px; font-weight: 760; line-height: 1.15; color: var(--pdb-text-on-brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdb-loyalty-card__holder-contact {
  font-size: 11px; color: rgba(var(--pdb-on-brand-rgb), 0.62); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdb-loyalty-card__signals {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-width: 0; margin-top: 2px;
}
.pdb-loyalty-card__signal {
  display: inline-flex; align-items: center; min-height: 18px; max-width: 100%;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(var(--plc-accent), .16);
  background: rgba(var(--pdb-on-brand-rgb), .055);
  color: rgba(var(--pdb-on-brand-rgb), .72);
  font-size: 9.5px; font-weight: 740; line-height: 1; white-space: nowrap;
}
.pdb-loyalty-card__signal--positive {
  border-color: rgba(92, 214, 143, .2);
  color: var(--pdb-tone-positive-on-brand);
}
.pdb-loyalty-card__signal--warning {
  border-color: rgba(255, 211, 115, .24);
  color: var(--pdb-tone-warning-on-brand);
}
.pdb-loyalty-card__signal--danger {
  border-color: rgba(255, 128, 140, .28);
  color: var(--pdb-tone-negative-on-brand);
}

/* ── Directory grid — one content-driven card design at every available width.
   Equal rows and a stretched front face align credit, points and history below
   holder headers with any number of signal badges. No fixed height clips content. ── */
.pdb-loyalty-card-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.pdb-loyalty-card-grid:not(.pdb-loyalty-card-grid--compact) { grid-auto-rows: 1fr; }
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact),
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact) > .pdb-loyalty-card__flipper,
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact) .pdb-loyalty-card__face--front {
  display: flex; flex-direction: column;
}
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact) > .pdb-loyalty-card__flipper,
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact) .pdb-loyalty-card__face--front,
.pdb-loyalty-card-grid > .pdb-loyalty-card--directory:not(.pdb-loyalty-card--compact) .pdb-loyalty-card__holder {
  flex: 1 0 auto;
}
/* Compact mode → one dense column of branded rows on every width. */
.pdb-loyalty-card-grid--compact { grid-template-columns: 1fr; gap: 10px; }

/* ── Compact variant — flatten the hero card into a dense branded ROW (desktop "scan 50") ── */
.pdb-loyalty-card--compact { border-radius: 14px; perspective: none; contain-intrinsic-size: 0 84px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__face--front {
  min-height: 58px; padding: 10px 14px; border-radius: 14px; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(86px, auto) minmax(74px, auto) minmax(122px, .9fr); align-items: center; column-gap: 16px;
}
.pdb-loyalty-card--compact .pdb-loyalty-card__face--front::before { display: none; }   /* drop the sweeping shine in row mode */
.pdb-loyalty-card--compact .pdb-loyalty-card__holder { margin: 0; text-align: left; grid-row: 1; grid-column: 1; gap: 1px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__holder-name { font-size: 14px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__holder-contact { font-size: 10.5px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__signals { justify-content: flex-start; gap: 4px; margin-top: 3px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__signal { min-height: 17px; padding: 2px 6px; font-size: 9px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__eyebrow { display: none; }
.pdb-loyalty-card--compact .pdb-loyalty-card__amount { font-size: 18px; grid-row: 1; grid-column: 2; justify-self: end; animation: none; filter: none; }
.pdb-loyalty-card--compact .pdb-loyalty-card__stale,
.pdb-loyalty-card--compact .pdb-loyalty-card__divider,
.pdb-loyalty-card--compact .pdb-loyalty-card__expiry { display: none; }
.pdb-loyalty-card--compact .pdb-loyalty-card__points-row { grid-row: 1; grid-column: 3; justify-self: end; flex-direction: row; align-items: center; gap: 12px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__points-left { flex-direction: row; align-items: baseline; gap: 5px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__value { font-size: 16px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__label { font-size: 10.5px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__flip { top: 50%; transform: translateY(-50%); right: 14px; }

/* ── Directory variant — holder header · points BESIDE credit · recent-purchase carousel ── */
/* Push the front content below the top-left program badge + top-right flip so the centred
   holder name never collides with them. */
.pdb-loyalty-card--directory .pdb-loyalty-card__face--front {
  min-height: 176px;
  padding: 36px 16px 14px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(var(--pdb-shadow-rgb), .22), 0 0 18px rgba(var(--pdb-wallet-accent-rgb), .1), inset 0 0 0 1px rgba(var(--pdb-on-brand-rgb), .035);
}
/* Program badge — top-left, balancing the flip top-right. */
.pdb-loyalty-card__program {
  position: absolute; top: 12px; left: 14px; z-index: 3; max-width: 52%;
  display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 8.5px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em;
  color: rgb(var(--plc-accent)); background: rgba(var(--plc-accent), .1);
  padding: 3px 9px; border-radius: 100px; border: 1px solid rgba(var(--plc-accent), .15);
}
/* Middle — credit amount BESIDE the points (no $-value: the credit IS the dollar figure). */
.pdb-loyalty-card__midrow { display: flex; align-items: center; justify-content: center; gap: 15px; }
.pdb-loyalty-card__midrow .pdb-loyalty-card__amount { font-size: 28px; margin: 0; filter: none; }
.pdb-loyalty-card__midpoints {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding-left: 14px; border-left: 1px solid rgba(var(--plc-accent), .22);
}
.pdb-loyalty-card__midpoints .pdb-loyalty-card__value { font-size: 28px; }
.pdb-loyalty-card__history-line {
  margin-top: 8px;
  color: rgba(var(--pdb-on-brand-rgb), .66);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Compact directory row keeps only the single history line (the flip still has full history). */
.pdb-loyalty-card--compact.pdb-loyalty-card--directory .pdb-loyalty-card__face--front {
  min-height: 58px;
  padding: 10px 14px;
}
.pdb-loyalty-card--compact .pdb-loyalty-card__program { display: none; }
.pdb-loyalty-card--compact .pdb-loyalty-card__midrow { grid-row: 1; grid-column: 2 / span 2; justify-self: end; gap: 12px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__midrow .pdb-loyalty-card__amount,
.pdb-loyalty-card--compact .pdb-loyalty-card__midpoints .pdb-loyalty-card__value { font-size: 18px; }
.pdb-loyalty-card--compact .pdb-loyalty-card__history-line {
  display: block;
  grid-row: 1;
  grid-column: 4;
  justify-self: end;
  max-width: 100%;
  margin-top: 0;
  text-align: right;
  color: rgba(var(--pdb-on-brand-rgb), .6);
}

@media (max-width: 680px) {
  .pdb-loyalty-card--compact .pdb-loyalty-card__face--front {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
  }
  .pdb-loyalty-card--compact .pdb-loyalty-card__holder { grid-column: 1 / -1; }
  .pdb-loyalty-card--compact .pdb-loyalty-card__midrow { grid-row: 2; grid-column: 1; justify-self: start; }
  .pdb-loyalty-card--compact .pdb-loyalty-card__points-row { grid-row: 2; grid-column: 2; }
  .pdb-loyalty-card--compact .pdb-loyalty-card__history-line {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

/* PurpInsightsPanel — premium customer purchase-insights surface: elevated card
   with a connected metric strip (hairline dividers), preference badges, and
   labelled chip groups. Light counterpart to the loyalty hero card. */
.pdb-insights {
  border-radius: 20px;
  padding: 18px 20px 20px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--pdb-brand-primary-rgb), 0.06) 0%, transparent 55%),
    var(--pdb-bg-surface-raised);
  border: 1px solid var(--pdb-border-subtle);
  box-shadow: 0 6px 20px rgba(var(--pdb-shadow-rgb), 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdb-insights__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pdb-insights__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pdb-text-primary);
}
.pdb-insights__eyebrow { font-size: 12px; color: var(--pdb-text-muted); }
/* Connected metric strip — internal hairline dividers, subtle purple-tinted wash */
.pdb-insights__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  border: 1px solid var(--pdb-border-subtle);
  border-radius: var(--pdb-radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--pdb-brand-primary-rgb), 0.045) 0%, rgba(var(--pdb-brand-primary-rgb), 0.015) 100%);
}
.pdb-insights__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border-left: 1px solid var(--pdb-border-subtle);
}
.pdb-insights__metric:first-child { border-left: none; }
.pdb-insights__metric-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdb-text-muted);
}
.pdb-insights__metric-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pdb-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdb-insights__metric-meta {
  font-size: 12px;
  color: var(--pdb-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Preference badges — dot + label glass pill */
.pdb-insights__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdb-insights__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pdb-tone-info-fg);
  background: var(--pdb-tone-info-bg);
  padding: 5px 12px;
  border-radius: 100px;
}
.pdb-insights__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
/* Labelled chip groups — brands, categories, formats */
.pdb-insights__group { display: flex; flex-direction: column; gap: 8px; }
.pdb-insights__group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdb-text-muted);
}
.pdb-insights__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdb-insights__chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--pdb-text-primary);
  background: var(--pdb-bg-surface-tinted);
  border: 1px solid var(--pdb-border-subtle);
  padding: 6px 12px;
  border-radius: 10px;
}
@media (max-width: 560px) {
  .pdb-insights__metric { border-left: none; border-top: 1px solid var(--pdb-border-subtle); }
  .pdb-insights__metric:first-child { border-top: none; }
}

/* PurpSalesCarousel — the one shared horizontal purchase-history strip (POS
   register bar + admin customer drawer). Snap-scroll slides; design-brain tokens. */
/* min-width:0 + max-width:100% are load-bearing: this carousel is dropped into
   grid/flex hosts (the customer drawer's PurpSection grid, the POS register bar).
   A grid/flex child defaults to min-width:auto = its CONTENT width, so the fixed
   248px×N strip would push the whole carousel WIDER than its track and clip at the
   drawer edge instead of scrolling. Constraining it here makes the strip's own
   overflow-x actually engage — the cards scroll BEFORE they overflow. */
.pdb-sales-carousel { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.pdb-sales-carousel__empty { color: var(--pdb-text-muted); font-size: 12px; }
.pdb-sales-carousel__strip {
  display: flex;
  align-items: flex-start; /* each card sizes to its own content — no stretch-to-tallest */
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pdb-wallet-accent-rgb), .45) transparent;
}
.pdb-sales-carousel__strip::-webkit-scrollbar { height: 5px; }
.pdb-sales-carousel__strip::-webkit-scrollbar-thumb { background: rgba(var(--pdb-wallet-accent-rgb), .45); border-radius: 999px; }
.pdb-sales-slide {
  /* 2–3 slides visible, then the strip scrolls (snap). UNIFORM compact height —
     every card is a calm light-lavender card that blends into the customer bar
     (dark purp type, no dark surface): one head line + ~2 pill rows; extra pills
     scroll inside (below). The WHOLE card is the tap target. */
  flex: 0 0 248px;
  height: 104px;
  scroll-snap-align: start;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--pdb-purp-lavender);
  background: var(--pdb-purp-mist);
  color: var(--pdb-purp-plum);
  font: inherit;
}
button.pdb-sales-slide { cursor: pointer; }
button.pdb-sales-slide:hover,
button.pdb-sales-slide:focus-visible { border-color: var(--pdb-purp-orchid); }
/* ONE head line: sale number · date · time · total. Never wraps — the meta
   flexes and ellipsizes in the middle so the number + total always show. */
.pdb-sales-slide__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}
.pdb-sales-slide__sale-number { font-weight: 700; font-size: .85rem; color: var(--pdb-purp-plum); font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Source badge (e.g. "Greenline" on imported legacy history) — quiet outline chip. */
.pdb-sales-slide__badge {
  flex: 0 0 auto;
  border: 1px solid var(--pdb-purp-orchid);
  color: var(--pdb-purp-primary);
  border-radius: 999px;
  padding: 0 5px;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.5;
}
.pdb-sales-slide__total { font-weight: 700; font-size: .85rem; color: var(--pdb-purp-plum); white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; margin-left: auto; }
.pdb-sales-slide__meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pdb-purp-primary); opacity: .75; font-size: .72rem; font-weight: 500; }
.pdb-sales-slide__meta span + span::before { content: '·'; margin: 0 5px; }
/* Item pills: white chip on the lavender card, dark purp writing, full
   "Product - Variant" name (wraps inside the pill, never ellipsizes).
   Overflowing pills scroll inside the fixed-size card. */
.pdb-sales-slide__pills {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-right: 2px;
  /* The scroll viewport runs ALL THE WAY to the card's bottom edge (eat the
     card's bottom padding, restore it inside), and a row cut by the fixed
     height FADES out at that edge instead of clipping mid-line — reads as
     "scroll for more", never as a pill overlapping the card border. Cards
     whose pills fit pack to the top and show no fade. */
  margin-bottom: -11px;
  padding-bottom: 11px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pdb-wallet-accent-rgb), .45) transparent;
}
.pdb-sales-slide__pills::-webkit-scrollbar { width: 5px; }
.pdb-sales-slide__pills::-webkit-scrollbar-thumb { background: rgba(var(--pdb-wallet-accent-rgb), .45); border-radius: 999px; }
.pdb-sales-slide__pill {
  background: rgb(var(--pdb-on-brand-rgb));
  color: var(--pdb-purp-primary);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.pdb-sales-slide__empty-lines { color: var(--pdb-purp-primary); opacity: .6; font-style: italic; font-size: .74rem; }
.pdb-sales-slide--note { align-items: flex-start; justify-content: center; color: var(--pdb-text-muted); background: var(--pdb-bg-surface-tinted); border-style: dashed; }

/* ---------- Record / transaction card ---------- */
.pdb-record-card {
  display: grid;
  gap: var(--pdb-space-lg);
  padding: var(--pdb-panel-pad);
  border: 1px solid var(--pdb-border-default);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-bg-surface-raised);
  width: 100%;
  text-align: left;
}
.pdb-record-card--interactive { cursor: pointer; }
.pdb-record-card--interactive:hover { border-color: var(--pdb-scope-canonical-line); }
.pdb-record-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdb-space-lg);
}
.pdb-record-card__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-record-card__title { font-size: 14px; font-weight: 800; color: var(--pdb-text-primary); }
.pdb-record-card__subtitle { font-size: 12px; color: var(--pdb-text-muted); }
.pdb-record-card__side { display: flex; align-items: center; gap: var(--pdb-space-md); flex: 0 0 auto; }
.pdb-record-card__amount { font-size: 14px; font-weight: 800; color: var(--pdb-text-primary); }

/* Product identity — ONE hierarchy and ONE interaction contract for every
   Admin/POS browser surface. Brand is the compact PURP-purple eyebrow and the
   product name is dark primary copy at rest. Identity text is never
   underlined. A directly actionable brand lifts into Design-Brain rose while
   the product name moves to PURP purple on interaction. */
.pdb-product-identity {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.pdb-product-identity__brand {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--pdb-purp-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pdb-product-identity__brand :is(button, a),
.pdb-product-identity__name :is(button, a) {
  color: inherit;
  text-decoration: none;
}

.pdb-product-identity__brand :is(button, a) {
  display: inline-block;
  transition: color 140ms ease, transform 140ms ease;
}

.pdb-product-identity:is(button, a, [role='button']) .pdb-product-identity__brand,
.pdb-product-identity:is(button, a, [role='button']) .pdb-product-identity__name,
:is(button, a, [role='button']) .pdb-product-identity__brand,
:is(button, a, [role='button']) .pdb-product-identity__name {
  text-decoration: none;
}

:is(button, a, [role='button']):hover .pdb-product-identity__brand,
:is(button, a, [role='button']):focus .pdb-product-identity__brand,
:is(button, a, [role='button']):focus-visible .pdb-product-identity__brand,
:is(button, a, [role='button']):active .pdb-product-identity__brand {
  color: var(--pdb-purp-primary);
  text-decoration: none;
}

.pdb-product-identity .pdb-product-identity__brand :is(button, a):hover,
.pdb-product-identity .pdb-product-identity__brand :is(button, a):focus-visible {
  color: var(--pdb-status-rose-text);
  text-decoration: none;
  transform: translateY(-1px);
}

.pdb-product-identity .pdb-product-identity__brand :is(button, a):active {
  color: var(--pdb-status-rose-text);
  text-decoration: none;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pdb-product-identity__brand :is(button, a) {
    transition: none;
  }

  .pdb-product-identity__brand :is(button, a):hover,
  .pdb-product-identity__brand :is(button, a):focus-visible,
  .pdb-product-identity__brand :is(button, a):active {
    transform: none;
  }
}

.pdb-product-identity__name-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.pdb-product-identity__name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--pdb-text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Compact table names share this bounded owner; exact codes use mono cells. */
.pdb-product-identity--single-line { width: 100%; max-width: 280px; }
.pdb-product-identity--single-line .pdb-product-identity__name-row { width: 100%; }
.pdb-product-identity--single-line .pdb-product-identity__name,
.pdb-product-identity--single-line .pdb-product-identity__name :is(button, a) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  -webkit-line-clamp: unset;
}

.pdb-product-identity__name :is(button, a):hover,
.pdb-product-identity__name :is(button, a):focus,
.pdb-product-identity__name :is(button, a):focus-visible,
.pdb-product-identity__name :is(button, a):active,
:is(button, a, [role='button']):hover .pdb-product-identity__name,
:is(button, a, [role='button']):focus .pdb-product-identity__name,
:is(button, a, [role='button']):focus-visible .pdb-product-identity__name,
:is(button, a, [role='button']):active .pdb-product-identity__name {
  color: var(--pdb-purp-primary);
  text-decoration: none;
}

.pdb-product-identity__after-name {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.pdb-product-identity__meta {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--pdb-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdb-product-identity--sm { gap: 1px; }
.pdb-product-identity--sm .pdb-product-identity__brand { font-size: 10px; }
.pdb-product-identity--sm .pdb-product-identity__name { font-size: 12px; }
/* Data-grid identity is shared by Products and Inventory. Keep this semantic
   size here so neither page can silently drift from the other again. */
.pdb-product-identity--grid .pdb-product-identity__brand { font-size: 11.5px; }
.pdb-product-identity--grid .pdb-product-identity__name { font-size: 14px; line-height: 1.3; }
.pdb-product-identity--lg { gap: 3px; }
.pdb-product-identity--lg .pdb-product-identity__brand { font-size: 12px; }
.pdb-product-identity--lg .pdb-product-identity__name { font-size: 18px; line-height: 1.2; }

/* One PURP Atlas lockup for search panels and compact provenance marks. */
.pdb-atlas-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pdb-purp-primary);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}

.pdb-atlas-wordmark__logo {
  width: auto;
  flex: 0 0 auto;
}

.pdb-atlas-wordmark--compact {
  gap: 4px;
  font-size: 9px;
  letter-spacing: .05em;
}
.pdb-atlas-wordmark--on-brand {
  color: var(--pdb-surface-brand-text, #fff);
}
.pdb-record-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdb-space-md) var(--pdb-space-lg);
  font-size: 12px;
  color: var(--pdb-text-muted);
}

/* ---------- Field grid + Field ---------- */
.pdb-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 8px;
}

.pdb-field-grid--cozy { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }

.pdb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--pdb-field-pad);
  border-radius: var(--pdb-radius-md);
  background: linear-gradient(180deg, #fbf8ff 0%, var(--surface-soft, #f3eefb) 100%);
}

.pdb-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdb-field__label {
  color: var(--muted, #62586f);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pdb-field__value {
  color: var(--text, #21172b);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.pdb-field__value.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12.5px; }

/* ---------- Badge (tone + scope) ---------- */
.pdb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--pdb-tone-neutral-bg);
  color: var(--pdb-tone-neutral-fg);
}

.pdb-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.pdb-badge__glyph { font-size: 11px; line-height: 1; }

.pdb-badge--positive { background: var(--pdb-tone-positive-bg); color: var(--pdb-tone-positive-fg); }
.pdb-badge--rose { background: var(--pdb-tone-rose-bg); color: var(--pdb-tone-rose-fg); }
.pdb-badge--attention { background: var(--pdb-tone-attention-bg); color: var(--pdb-tone-attention-fg); }
.pdb-badge--critical { background: var(--pdb-tone-critical-bg); color: var(--pdb-tone-critical-fg); }
.pdb-badge--info { background: var(--pdb-tone-info-bg); color: var(--pdb-tone-info-fg); }
.pdb-badge--muted { background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); }
.pdb-badge--neutral { background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); }

.pdb-badge--scope { border-style: solid; }
.pdb-badge--scope-canonical { background: var(--pdb-scope-canonical-bg); color: var(--pdb-scope-canonical-fg); border-color: var(--pdb-scope-canonical-line); }
.pdb-badge--scope-location { background: var(--pdb-scope-location-bg); color: var(--pdb-scope-location-fg); border-color: var(--pdb-scope-location-line); }
.pdb-badge--scope-provider { background: var(--pdb-scope-provider-bg); color: var(--pdb-scope-provider-fg); border-color: var(--pdb-scope-provider-line); }
.pdb-badge--scope-external { background: var(--pdb-scope-external-bg); color: var(--pdb-scope-external-fg); border-color: var(--pdb-scope-external-line); }
.pdb-badge--scope-derived { background: var(--pdb-scope-derived-bg); color: var(--pdb-scope-derived-fg); border-color: var(--pdb-scope-derived-line); }
.pdb-badge--scope-custom { background: var(--pdb-scope-custom-bg); color: var(--pdb-scope-custom-fg); border-color: var(--pdb-scope-custom-line); }

/* ---------- Data table ---------- */
.pdb-table-wrap {
  overflow: auto;
  border: 1px solid var(--border, #e6e2ec);
  border-radius: var(--pdb-radius-md);
  background: var(--surface, #fff);
}
/* Initial-load state: same framed surface as the table, pulsing PURP mark centered. */
.pdb-table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border: 1px solid var(--border, #e6e2ec);
  border-radius: var(--pdb-radius-md);
  background: var(--surface, #fff);
}

.pdb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.pdb-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  color: var(--muted, #62586f);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  background: #fbfafd;
  border-bottom: 1px solid var(--border, #e6e2ec);
}

.pdb-table td,
.pdb-table tbody th {
  position: static;
  z-index: auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft, #efedf4);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  vertical-align: top;
}

.pdb-table tbody tr:last-child > * { border-bottom: 0; }
.pdb-table tbody tr.clickable { cursor: pointer; }
.pdb-table tbody tr.clickable:hover { background: #fbf8ff; }
.pdb-table tbody tr.clickable:focus-within {
  outline: 2px solid var(--pdb-focus-ring-color, var(--pdb-action-primary, #5b16a3));
  outline-offset: -2px;
  background: var(--pdb-bg-selected, #fbf8ff);
}
.pdb-table__row-action {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* A chaining grid is framed by its own border: no empty scrollbar gutter beside the last column. */
.pdb-table-wrap.pdb-scroll--chain { scrollbar-gutter: auto; }
.pdb-table-wrap--comfortable { box-shadow: var(--shadow-panel, 0 8px 24px rgba(31, 18, 45, .06)); }
.pdb-table--comfortable { font-size: 13px; }
.pdb-table--comfortable thead th { padding: 11px 14px; letter-spacing: .11em; }
.pdb-table--comfortable :is(td, tbody th) { padding: 13px 14px; }
.pdb-table .mono { font-family: 'SF Mono', 'Fira Code', monospace; white-space: nowrap; overflow-wrap: normal; }
.pdb-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }

/* Sticky FIRST column (opt-in via PurpDataTable stickyFirstColumn) — freezes the
   row-label column while the remaining columns scroll horizontally (matrix/grid
   layouts). The existing sticky header (`.pdb-table th{position:sticky;top:0}`)
   still applies; here the first cell in every row also sticks to the left edge.
   Body cells get a solid token surface so scrolled cells never bleed through the
   frozen column, and a subtle right divider reads it as a fixed axis. */
.pdb-table--sticky-col tbody > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--pdb-bg-surface-raised, #fff);
  border-right: 1px solid var(--pdb-border-subtle, #e9e3f2);
}
/* The header corner keeps its header background but also freezes left, sitting
   above BOTH the sticky header row (z 1) and the frozen body column (z 1). */
.pdb-table--sticky-col thead th:first-child {
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--pdb-border-subtle, #e9e3f2);
}

/* A frozen 288px axis consumes almost the whole viewport on a phone and leaves
   the operator scrolling a postage-stamp-sized value column. Below the shared
   mobile breakpoint the first column rejoins normal table flow and is clamped
   to the visible viewport; horizontal scrolling still exposes every value. */
@media (max-width: 760px) {
  .pdb-table--sticky-col thead th:first-child,
  .pdb-table--sticky-col tbody > tr > :first-child {
    left: auto;
    width: min(72vw, 288px) !important;
    min-width: min(72vw, 288px);
    max-width: min(72vw, 288px);
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .pdb-table--sticky-col thead th:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .pdb-table--sticky-col tbody > tr > :first-child {
    position: static;
    z-index: auto;
  }
}

/* ---------- Empty state ---------- */
.pdb-empty {
  display: grid;
  gap: 4px;
  padding: 20px 16px;
  border: 1px dashed var(--border, #e6e2ec);
  border-radius: var(--pdb-radius-md);
  background: var(--surface-soft, #f3eefb);
  text-align: left;
}

.pdb-empty__title { font-size: 13px; font-weight: 750; color: var(--text, #21172b); }
.pdb-empty__body { font-size: 12px; color: var(--muted, #62586f); line-height: 1.45; }

/* ---------- Sticky actions ---------- */
.pdb-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  margin-top: 6px;
  background: linear-gradient(0deg, #fff 72%, rgba(255, 255, 255, 0));
}

.pdb-sticky-actions__spacer { flex: 1 1 auto; }
.pdb-sticky-actions--brand {
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-top: 16px;
  border: 1px solid var(--pdb-surface-brand-border);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-surface-brand-bg);
  color: var(--pdb-surface-brand-text);
  box-shadow: 0 -6px 24px rgba(var(--pdb-shadow-rgb), .16);
}

@media (max-width: 760px) {
  .pdb-summary-strip { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PURP ELEGANT PALETTE + SIGNATURE SURFACE SYSTEM
   Increment 3 / stage 3a — the single PURP colour + token system.
   ADDITIVE: all-new token names (no existing --pdb-* redefined),
   so live design-brain components are unchanged until they opt in.
   Palette first. Tokens second. Components/migration = 3b/3c.
   No green as a PURP status colour: positive = lavender/orchid.
   ============================================================ */
:root {
  /* ============================================================
     3j: the LOCKED, research-backed role-based PURP palette.
     Token NAMES are stable (every component consumes them) — only
     VALUES are the canonical spec. Purple is the dominant brand;
     champagne/gold is the muted premium complement (NOT green);
     positive = lavender/PURP; info/location = periwinkle/indigo;
     danger = rose-plum. No green anywhere.
     ============================================================ */
  /* ---- Primitive: Core PURP (Midnight→Pearl) ---- */
  --pdb-purple-50: #f8f5ff;  --pdb-purple-100: #eee7ff; --pdb-purple-200: #d9cbff;
  --pdb-purple-300: #a78bfa; --pdb-purple-400: #7c3aed; --pdb-purple-500: #6d28d9;
  --pdb-purple-600: #5b16a3; --pdb-purple-700: #3f0a6a; --pdb-purple-800: #210033;
  --pdb-purple-900: #210033; --pdb-purple-950: #15001f;
  /* named PURP roles (spec) */
  --pdb-purp-ink: #17121f;       --pdb-purp-midnight: #15001f;
  --pdb-purp-plum: #210033;      --pdb-purp-royal: #3f0a6a;
  --pdb-purp-primary: #5b16a3;   --pdb-purp-action: #6d28d9;
  --pdb-purp-violet: #7c3aed;    --pdb-purp-orchid: #a78bfa;
  --pdb-purp-lavender: #d9cbff;  --pdb-purp-mist: #eee7ff;
  --pdb-purp-pearl: #f8f5ff;
  /* ---- Primitive: orchid (kept for legacy scope chips) ---- */
  --pdb-orchid-50: #f8f5ff;  --pdb-orchid-100: #eee7ff; --pdb-orchid-200: #d9cbff;
  --pdb-orchid-300: #c4abf6; --pdb-orchid-400: #a78bfa; --pdb-orchid-500: #7c3aed;
  --pdb-orchid-600: #6d28d9; --pdb-orchid-700: #5b16a3;
  /* ---- Primitive: lavender / PURP-positive tints ---- */
  --pdb-lavender-25: #faf7ff; --pdb-lavender-50: #f6f1ff; --pdb-lavender-100: #efe8ff;
  --pdb-lavender-200: #d9cbff; --pdb-lavender-300: #cdbbff;
  /* ---- Primitive: ink (text/structure) ---- */
  --pdb-ink-950: #17121f; --pdb-ink-900: #17121f; --pdb-ink-800: #2d2438;
  --pdb-ink-700: #423a52; --pdb-ink-600: #5f536f; --pdb-ink-500: #746b82;
  /* ---- Primitive: mist (neutral surfaces) ---- */
  --pdb-mist-25: #fffcff; --pdb-mist-50: #f7f4fb; --pdb-mist-100: #f2eff7; --pdb-mist-200: #e9e3f2;
  /* ---- Primitive: champagne / gold — the muted premium complement ---- */
  --pdb-champagne-wash: #fff8e6; --pdb-champagne-bg: #fff4d6;
  --pdb-champagne-accent: #f3c969; --pdb-gold-antique: #b98218;
  --pdb-gold-text: #8b5a00; --pdb-bronze-plum: #6d4300;
  /* Deep antique gold — a darker, richer gold that complements the brand purple.
     Filled surface for the money/pay accent. */
  --pdb-gold-deep: #9a7a49;

  /* ---- Semantic ---- */
  --pdb-bg-app: var(--pdb-mist-50);
  --pdb-bg-page: var(--pdb-mist-50);
  --pdb-bg-surface: var(--pdb-mist-25);
  --pdb-bg-surface-raised: #ffffff;
  --pdb-bg-surface-tinted: var(--pdb-lavender-50);
  --pdb-bg-surface-brand: var(--pdb-purp-plum);
  --pdb-bg-surface-premium: var(--pdb-purp-midnight);
  --pdb-text-primary: var(--pdb-ink-900);
  --pdb-text-strong: var(--pdb-ink-800);
  --pdb-text-secondary: var(--pdb-ink-600);
  --pdb-text-muted: var(--pdb-ink-500);
  --pdb-text-on-brand: #ffffff;
  --pdb-text-on-brand-muted: rgba(255, 255, 255, 0.72);
  /* On-brand / wallet-hero presentation palette — the PURP wallet card colours,
     defined ONCE here as tokens so shared @purp/ui component CSS (the loyalty
     hero card, sales carousel) carries no raw colour literals, only var()s.
     rgb-triplets enable `rgba(var(--token), <alpha>)` at call sites. */
  --pdb-on-brand-rgb: 255, 255, 255;          /* white, for translucent on-dark overlays/text */
  --pdb-shadow-rgb: 0, 0, 0;                   /* shadow base */
  --pdb-wallet-hero-deep: #120624;             /* dark gradient base (was rgb(18,6,36)) */
  --pdb-wallet-hero-rise: #261048;             /* dark gradient rise (was rgba(38,16,72,1)) */
  --pdb-wallet-accent-rgb: 107, 47, 160;       /* brand violet glow */
  --pdb-wallet-deepglow-rgb: 75, 30, 130;      /* secondary deep glow */
  --pdb-wallet-accent-light-rgb: 201, 160, 255;/* accent-light (default --plc-accent) */
  --pdb-wallet-amount-mid: #d4b5ff;            /* gradient-text amount midpoint */
  --pdb-tone-credit-on-light: #2d7a52;          /* monetary credit/return, readable on light */
  --pdb-tone-positive-on-brand: #9be8b0;       /* ledger +, readable on dark */
  --pdb-tone-warning-on-brand: #ffd98f;        /* caution chip, readable on dark */
  --pdb-tone-negative-on-brand: #ff9db1;       /* ledger −, readable on dark */
  --pdb-brand-primary-rgb: 102, 14, 174;       /* PURP primary purple (insights tints) */

  /* ---- Cannabinoid + strain-type colours (ONE source of truth) ----
     Brand-accurate menu palette (mirrored in tokens.ts CANNABINOID_COLORS /
     STRAIN_TYPE_COLORS). A cannabinoid/strain TAG paints its BACKGROUND with one
     of these and its TEXT white (matching the approved strain-type tabs). THC and
     CBD are intentionally NOT here — they are potency values, never coloured tags.
     Keep CSS + TS in sync. */
  --pdb-cann-cbg:  #FF9500; /* orange */
  --pdb-cann-cbga: #FF9500; /* orange (acidic precursor) */
  --pdb-cann-cbn:  #8B4357; /* burgundy */
  --pdb-cann-thcv: #2ECC71; /* green */
  --pdb-cann-cbc:  #FF69B4; /* pink */
  --pdb-cann-terp: #E8445A; /* coral/red */
  --pdb-strain-sativa: #FF0000; /* red */
  --pdb-strain-indica: #00B346; /* theme-exact (smokeys_shopify global.js) */
  --pdb-strain-hybrid: #0072C7; /* theme-exact (smokeys_shopify global.js) */
  --pdb-border-subtle: #e9e3f2;
  --pdb-border-default: #ddd4ea;
  --pdb-border-strong: #cbbee6;
  --pdb-border-focus: var(--pdb-purp-action);
  /* Universal scroll (.pdb-scroll / PurpScrollArea) — thin themed scrollbar. Token-only so
     shared @purp/ui CSS carries no raw brand color and each surface can retint. */
  --pdb-scroll-thumb: var(--pdb-border-strong);
  --pdb-scroll-thumb-hover: var(--pdb-purp-action);
  --pdb-action-primary-bg: var(--pdb-purp-primary);
  --pdb-action-primary-bg-hover: var(--pdb-purp-royal);
  --pdb-action-primary-bg-active: #2e0850;
  --pdb-action-primary-text: #ffffff;
  --pdb-action-secondary-bg: #ffffff;
  --pdb-action-secondary-border: var(--pdb-border-strong);
  --pdb-action-secondary-text: var(--pdb-purp-primary);
  /* role aliases (Material/Polaris-style role tokens) */
  --pdb-role-primary: var(--pdb-purp-primary);
  --pdb-role-secondary: var(--pdb-purp-action);
  --pdb-role-surface: var(--pdb-bg-surface);
  --pdb-role-border: var(--pdb-border-default);
  --pdb-role-text: var(--pdb-text-primary);
  --pdb-role-premium: var(--pdb-champagne-accent);
  --pdb-role-on-brand: #ffffff;

  /* ---- Status (PURP-positive lavender · champagne warning ·
       rose-plum danger · periwinkle info — never green) ---- */
  --pdb-status-positive-bg: var(--pdb-lavender-100);
  --pdb-status-positive-bg-soft: var(--pdb-lavender-50);
  --pdb-status-positive-border: var(--pdb-lavender-300);
  --pdb-status-positive-text: #3b176a;
  --pdb-status-positive-dot: var(--pdb-purp-violet);
  /* Amber retired — `warning` now ALIASES neutral (no yellow in the palette).
     Real alerts use `danger`/`rose` (the shared brand-pink). */
  --pdb-status-warning-bg: var(--pdb-status-neutral-bg);
  --pdb-status-warning-border: var(--pdb-status-neutral-border);
  --pdb-status-warning-text: var(--pdb-status-neutral-text);
  --pdb-status-warning-dot: var(--pdb-status-neutral-dot);
  /* Gold — the muted champagne/premium tone; carries PAYMENT/tender meaning
     (cash), never green, never a warning. */
  --pdb-status-gold-bg: #fbf1d9;
  --pdb-status-gold-border: #eccf8a;
  --pdb-status-gold-text: var(--pdb-gold-text);
  --pdb-status-gold-dot: var(--pdb-gold-antique);
  --pdb-status-danger-bg: #fde7f1;
  --pdb-status-danger-border: #f5a9c8;
  --pdb-status-danger-text: #8e164d;
  --pdb-status-danger-dot: #c02666;
  /* ---- Role: SALE / promo price — the rose-plum family worn as merch
     excitement (savings), NOT danger. Same primitives, distinct semantic
     name so a sale price never reads as an error state in code. ---- */
  --pdb-sale-text: #c02666;
  --pdb-sale-text-strong: #8e164d;
  --pdb-sale-bg: #fde7f1;
  --pdb-sale-border: #f5a9c8;
  --pdb-status-critical: #9f1239;
  /* ---- Status: ROSE — the brand pink/rose family worn as a lifecycle stage
     (a freshly-placed order), NOT danger. Same rose-plum primitives as the
     sale tokens, distinct semantic name so a stage never reads as an error. */
  --pdb-status-rose-bg: var(--pdb-sale-bg);
  --pdb-status-rose-border: var(--pdb-sale-border);
  --pdb-status-rose-text: var(--pdb-sale-text-strong);
  --pdb-status-rose-dot: var(--pdb-sale-text);
  /* ---- Lifecycle: RETURN TO STORE — the rose family worn as an active
     route stage, never as an error/destructive action. Surfaces may remap
     contrast, but consumers must use this semantic role instead of danger. */
  --pdb-lifecycle-return-bg: var(--pdb-status-rose-bg);
  --pdb-lifecycle-return-border: var(--pdb-status-rose-border);
  --pdb-lifecycle-return-text: var(--pdb-status-rose-text);
  --pdb-lifecycle-return-dot: var(--pdb-status-rose-dot);
  --pdb-lifecycle-return-action: var(--pdb-status-rose-dot);
  /* ---- Status: BRAND — the filled dark-plum PURP badge for in-motion /
     terminal stages (Out for delivery / Completed). White text on plum. */
  --pdb-status-brand-bg: var(--pdb-purp-plum);
  --pdb-status-brand-border: var(--pdb-purp-royal);
  --pdb-status-brand-text: var(--pdb-text-on-brand);
  --pdb-status-brand-dot: var(--pdb-purp-orchid);
  --pdb-status-info-bg: #eaf0ff;
  --pdb-status-info-border: #b9c7ff;
  --pdb-status-info-text: #243b87;
  --pdb-status-info-dot: #4f46e5;
  --pdb-status-neutral-bg: var(--pdb-mist-100);
  --pdb-status-neutral-border: var(--pdb-border-default);
  --pdb-status-neutral-text: var(--pdb-ink-600);
  --pdb-status-neutral-dot: var(--pdb-ink-500);

  /* ---- Field ---- */
  --pdb-field-height-sm: 32px; --pdb-field-height-md: 34px; --pdb-field-height-lg: 44px;
  --pdb-field-padding-x: 12px; --pdb-field-padding-y: 7px;
  --pdb-field-radius: 9px; --pdb-field-border-width: 1px;
  --pdb-field-bg: #ffffff; --pdb-field-bg-hover: var(--pdb-mist-25); --pdb-field-bg-disabled: var(--pdb-mist-100);
  --pdb-field-border: var(--pdb-border-strong);
  --pdb-field-border-hover: var(--pdb-purple-300);
  --pdb-field-border-focus: var(--pdb-purple-500);
  --pdb-field-focus-ring: 0 0 0 3px rgba(123, 63, 206, 0.18);
  /* The one select chevron: PurpSelect and every select-like trigger (e.g. the report filter row's multi-select). */
  --pdb-field-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b3fa0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pdb-field-label-color: var(--pdb-ink-700);
  --pdb-field-label-size: 12px; --pdb-field-label-weight: 700;
  --pdb-field-help-color: var(--pdb-ink-500);
  --pdb-field-error-color: #b0273a;

  /* ---- Quantity control ----
     Dedicated geometry keeps THE platform stepper compact even on the roomier
     register surface. Coarse/touch input upgrades the hit target to 44px. */
  --pdb-stepper-size-fine: 38px;
  --pdb-stepper-size-coarse: 44px;
  --pdb-stepper-value-width: 44px;
  --pdb-stepper-compact-chrome-height: 34px;
  --pdb-stepper-compact-chrome-width: 108px;
  --pdb-icon-action-key-size: 32px;
  --pdb-icon-action-hit-size: 44px;

  /* ---- Button ---- */
  --pdb-button-height-sm: 32px; --pdb-button-height-md: 34px; --pdb-button-height-lg: 44px;
  --pdb-button-padding-x-sm: 12px; --pdb-button-padding-x-md: 18px; --pdb-button-padding-x-lg: 22px;
  --pdb-button-radius: 9px; --pdb-button-border-width: 1px;
  --pdb-button-font-size: 14px; --pdb-button-font-weight: 650; --pdb-button-gap: 8px;
  /* Export trigger: wide enough for both "Export" (icon + chevron) and the busy "Pushin P…" loader. */
  --pdb-export-trigger-min-width: 8rem;
  /* Reports filter row (PurpPageToolbar layout="report"): ONE compact width range for every field,
     and a slightly wider one for search and date fields. Pages never set their own widths. */
  --pdb-report-filter-min: 132px; --pdb-report-filter-max: 200px;
  --pdb-report-filter-wide-min: 168px; --pdb-report-filter-wide-max: 260px;
  --pdb-report-search-max: 240px;
  /* Reports scope bar (PurpPageActionHost variant="scope-bar"): 12px padding x2 + one 44px control (no label row). */
  --pdb-scope-bar-min-height: 68px;
  /* Auto-fit rows (useFitRow): the readable text floors. A fitting row squeezes padding, gaps and
     width first; its text never drops below these. The floor of the fit scale itself is
     --pdb-fit-floor, declared on the row (a filter control may shrink to ~104px: 132px x 0.79). */
  --pdb-fit-tab-font-min: 11px; --pdb-fit-control-font-min: 12px;
  --pdb-button-shadow: 0 1px 2px rgba(33, 23, 43, 0.06);
  --pdb-button-margin-inline: 0; --pdb-button-margin-block: 0;
  --pdb-button-on-brand-bg: rgba(255, 255, 255, 0.10);
  --pdb-button-on-brand-bg-hover: rgba(255, 255, 255, 0.16);
  --pdb-button-on-brand-border: rgba(255, 255, 255, 0.18);
  --pdb-button-on-brand-text: #ffffff;

  /* ---- Card ---- */
  --pdb-card-radius: 14px; --pdb-card-border-width: 1px;
  --pdb-card-padding-sm: 12px; --pdb-card-padding-md: 16px; --pdb-card-padding-lg: 20px;
  --pdb-card-gap: 12px;
  --pdb-card-border: var(--pdb-border-default);
  /* 3g: a hairline-soft shadow, not a heavy floating drop. Apple-calm. */
  --pdb-card-shadow: 0 1px 2px rgba(33, 23, 43, 0.04);
  --pdb-card-shadow-hover: 0 6px 14px rgba(33, 23, 43, 0.08), 0 22px 48px rgba(78, 10, 133, 0.10);

  /* ---- Typography ---- */
  --pdb-font-family: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  /* THE design-brain monospace token — code/identifier numerals (SKU, barcode,
     correlation ids). One stack everywhere; referenced via var(--pdb-mono). */
  --pdb-mono: 'SF Mono', ui-monospace, SFMono-Regular, 'Fira Code', Menlo, Consolas, monospace;
  --pdb-font-size-xs: 11px; --pdb-font-size-sm: 12.5px; --pdb-font-size-md: 14px;
  --pdb-font-size-lg: 16px; --pdb-font-size-xl: 20px; --pdb-font-size-2xl: 26px;
  --pdb-font-weight-regular: 450; --pdb-font-weight-medium: 600;
  --pdb-font-weight-semibold: 700; --pdb-font-weight-bold: 800; --pdb-font-weight-black: 850;
  --pdb-line-height-tight: 1.12; --pdb-line-height-normal: 1.45; --pdb-line-height-loose: 1.6;
  --pdb-letter-spacing-eyebrow: 0.14em; --pdb-letter-spacing-label: 0.06em;
  --pdb-premium-eyebrow-size: 11px; --pdb-premium-eyebrow-weight: 650;
  --pdb-premium-eyebrow-letter-spacing: 0.12em;
  /* 3g: large but Apple-light — restrained numerals, not shouty ultra-black. */
  --pdb-premium-value-size-sm: 22px; --pdb-premium-value-size-md: 30px; --pdb-premium-value-size-lg: 40px;
  --pdb-premium-value-weight: 600; --pdb-premium-value-line-height: 1.05;
  --pdb-premium-subtitle-size: 14px; --pdb-premium-subtitle-weight: 650;

  /* ---- Premium surface finishes (aurora / glass / shine) ---- */
  /* Shared Audit / Transfers command-header surface. */
  --pdb-surface-command-bg:
    radial-gradient(circle at 74% -80%, rgba(124, 58, 237, .13), transparent 42%),
    linear-gradient(120deg, var(--pdb-bg-surface-tinted, #f8f5ff), var(--pdb-bg-surface-raised, #fff) 36%, var(--pdb-bg-surface-raised, #fff));
  --pdb-surface-command-shadow: 0 8px 28px rgba(78, 10, 133, .12);
  --pdb-surface-brand-bg: linear-gradient(135deg, var(--pdb-purple-950) 0%, var(--pdb-purple-900) 48%, var(--pdb-purple-800) 100%);
  --pdb-surface-brand-text: #ffffff;
  --pdb-surface-brand-text-muted: rgba(255, 255, 255, 0.72);
  --pdb-surface-brand-border: rgba(222, 200, 255, 0.24);
  --pdb-surface-brand-border-strong: rgba(222, 200, 255, 0.38);
  --pdb-surface-aurora-bg:
    radial-gradient(circle at 18% 12%, rgba(156, 77, 255, 0.28), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(195, 155, 255, 0.16), transparent 32%),
    linear-gradient(135deg, #2a014d 0%, #1a0033 52%, #10001e 100%);
  --pdb-surface-aurora-border: rgba(222, 200, 255, 0.32);
  --pdb-surface-aurora-inner-border: rgba(255, 255, 255, 0.10);
  --pdb-surface-aurora-shadow: 0 24px 70px rgba(42, 1, 77, 0.28);
  --pdb-surface-aurora-glow: 0 0 44px rgba(123, 18, 217, 0.20);
  --pdb-surface-shine-color: rgba(255, 255, 255, 0.13);
  --pdb-surface-shine-soft: rgba(255, 255, 255, 0.07);
  --pdb-surface-shine-opacity: 1;
  --pdb-surface-shine-angle: 112deg;
  --pdb-glass-bg: rgba(42, 1, 77, 0.72);
  --pdb-glass-border: rgba(222, 200, 255, 0.28);
  --pdb-glass-highlight: rgba(255, 255, 255, 0.12);
  --pdb-glass-shadow: 0 26px 80px rgba(16, 0, 30, 0.36);
}

/* ---- Surface finish classes (consume the tokens; opt-in) ---- */
.pdb-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 3f: a bare PurpSurface (hero/category panel) must not run edge-to-edge.
     PurpCard declares its own padding later in source order, so cards with
     both classes are unaffected (no double padding). */
  padding: var(--pdb-card-padding-md);
  border-radius: var(--pdb-card-radius);
  border: var(--pdb-card-border-width) solid var(--pdb-card-border);
  background: var(--pdb-bg-surface);
  color: var(--pdb-text-primary);
}
.pdb-surface > * { position: relative; z-index: 1; }
.pdb-surface--plain { background: var(--pdb-bg-surface); }
.pdb-surface--tinted { background: var(--pdb-bg-surface-tinted); }
.pdb-surface--brand {
  background: var(--pdb-surface-brand-bg);
  border-color: var(--pdb-surface-brand-border);
  color: var(--pdb-surface-brand-text);
}
.pdb-surface--aurora {
  background: var(--pdb-surface-aurora-bg);
  border-color: var(--pdb-surface-aurora-border);
  box-shadow: var(--pdb-surface-aurora-shadow), inset 0 1px 0 var(--pdb-surface-aurora-inner-border);
  color: var(--pdb-surface-brand-text);
}
.pdb-surface--aurora::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    var(--pdb-surface-shine-angle),
    transparent 24%,
    var(--pdb-surface-shine-soft) 38%,
    var(--pdb-surface-shine-color) 48%,
    transparent 62%);
  transform: translateX(-18%) rotate(4deg);
  opacity: var(--pdb-surface-shine-opacity);
}
.pdb-surface--aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.10), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(195, 155, 255, 0.14), transparent 28%);
}
.pdb-surface--glass {
  background: var(--pdb-glass-bg);
  border-color: var(--pdb-glass-border);
  box-shadow: var(--pdb-glass-shadow), inset 0 1px 0 var(--pdb-glass-highlight);
  color: var(--pdb-surface-brand-text);
  backdrop-filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
  .pdb-surface--aurora::before { transition: none; }
}

/* ============================================================
   PURP Design Brain — Increment 3b: component classes.
   Real components consume these; every value is a 3a token.
   Additive: new class names only, no existing rule changed.
   ============================================================ */
.pdb-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pdb-button-gap);
  height: var(--pdb-button-height-md);
  padding: 0 var(--pdb-button-padding-x-md);
  border-radius: var(--pdb-button-radius);
  border: var(--pdb-button-border-width) solid transparent;
  font-family: var(--pdb-font-family);
  font-size: var(--pdb-button-font-size);
  font-weight: var(--pdb-button-font-weight);
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pdb-button:focus-visible { outline: none; box-shadow: var(--pdb-field-focus-ring); }
.pdb-button:disabled, .pdb-button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.pdb-button--sm { height: var(--pdb-button-height-sm); padding: 0 var(--pdb-button-padding-x-sm); font-size: var(--pdb-font-size-xs); }
.pdb-button--lg { height: var(--pdb-button-height-lg); padding: 0 var(--pdb-button-padding-x-lg); font-size: var(--pdb-font-size-md); }
.pdb-button--icon-only {
  width: var(--pdb-icon-action-key-size);
  min-width: var(--pdb-icon-action-key-size);
  height: var(--pdb-icon-action-key-size);
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.pdb-button__icon-key {
  width: var(--pdb-icon-action-key-size);
  height: var(--pdb-icon-action-key-size);
  border: var(--pdb-button-border-width) solid transparent;
  border-radius: var(--pdb-button-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.pdb-button--icon-only:focus-visible { box-shadow: none; }
.pdb-button--icon-only:focus-visible .pdb-button__icon-key { box-shadow: var(--pdb-field-focus-ring); }
.pdb-button--icon-only:active:not(:disabled) .pdb-button__icon-key { transform: scale(.94); }
.pdb-button--primary { background: var(--pdb-action-primary-bg); color: var(--pdb-action-primary-text); box-shadow: var(--pdb-button-shadow); }
.pdb-button--primary:hover:not(:disabled) { background: var(--pdb-action-primary-bg-hover); }
.pdb-button--primary:active:not(:disabled) { background: var(--pdb-action-primary-bg-active); }
.pdb-button--secondary { background: var(--pdb-action-secondary-bg); color: var(--pdb-action-secondary-text); border-color: var(--pdb-action-secondary-border); }
.pdb-button--secondary:hover:not(:disabled) { border-color: var(--pdb-purple-400); background: var(--pdb-lavender-25); }
.pdb-button--soft { background: var(--pdb-lavender-100); color: var(--pdb-purple-700); }
.pdb-button--soft:hover:not(:disabled) { background: var(--pdb-lavender-200); }
.pdb-button--soft:active:not(:disabled) { background: var(--pdb-lavender-300); }
.pdb-back-button .pdb-button__icon-key {
  background: var(--pdb-lavender-100);
  border-color: var(--pdb-lavender-300);
  color: var(--pdb-purple-700);
}
.pdb-back-button__icon { width: 18px; height: 18px; }
.pdb-button--tertiary { background: transparent; color: var(--pdb-purple-700); }
.pdb-button--tertiary:hover:not(:disabled) { background: var(--pdb-lavender-50); }
.pdb-button--ghost { background: transparent; color: var(--pdb-text-secondary); }
.pdb-button--ghost:hover:not(:disabled) { background: var(--pdb-mist-100); color: var(--pdb-text-primary); }
.pdb-button--danger { background: #fcecef; color: #8a1f3a; border-color: rgba(176,42,70,.30); }
.pdb-button--danger:hover:not(:disabled) { background: #f8dde3; }
/* rose — the money-attention pink family (--pdb-status-rose-*) as a button: deliberate,
   reversible order-shaping actions (PO-intake Exclude). Softer than danger, never destructive. */
/* Explicit gold actions reuse the existing light/dark status palette. */
.pdb-button--gold { background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); border-color: var(--pdb-status-gold-border); }
.pdb-button--gold:hover:not(:disabled) { background: color-mix(in srgb, var(--pdb-status-gold-dot) 14%, var(--pdb-status-gold-bg)); }
.pdb-button--gold:active:not(:disabled) { background: color-mix(in srgb, var(--pdb-status-gold-dot) 22%, var(--pdb-status-gold-bg)); }
.pdb-button--rose { background: var(--pdb-status-rose-bg); color: var(--pdb-status-rose-text); border-color: var(--pdb-status-rose-border); }
.pdb-button--rose:hover:not(:disabled) { background: color-mix(in srgb, var(--pdb-status-rose-dot) 14%, var(--pdb-status-rose-bg)); }
.pdb-button--rose:active:not(:disabled) { background: color-mix(in srgb, var(--pdb-status-rose-dot) 22%, var(--pdb-status-rose-bg)); }
.pdb-button--icon-only.pdb-button--rose { background: transparent; border-color: transparent; }
.pdb-button--icon-only.pdb-button--rose .pdb-button__icon-key {
  background: var(--pdb-status-rose-bg);
  border-color: var(--pdb-status-rose-border);
  color: var(--pdb-status-rose-text);
}
.pdb-button--icon-only.pdb-button--rose:hover:not(:disabled) { background: transparent; }
.pdb-button--icon-only.pdb-button--rose:hover:not(:disabled) .pdb-button__icon-key {
  background: color-mix(in srgb, var(--pdb-status-rose-dot) 14%, var(--pdb-status-rose-bg));
}
.pdb-button--icon-only.pdb-button--rose:active:not(:disabled) { background: transparent; }
.pdb-button--icon-only.pdb-button--rose:active:not(:disabled) .pdb-button__icon-key {
  background: color-mix(in srgb, var(--pdb-status-rose-dot) 22%, var(--pdb-status-rose-bg));
}
@media (pointer: coarse) {
  .pdb-button--icon-only {
    width: var(--pdb-icon-action-hit-size);
    min-width: var(--pdb-icon-action-hit-size);
    height: var(--pdb-icon-action-hit-size);
  }
}
.pdb-button--onBrand { background: var(--pdb-button-on-brand-bg); color: var(--pdb-button-on-brand-text); border-color: var(--pdb-button-on-brand-border); }
.pdb-button--onBrand:hover:not(:disabled) { background: var(--pdb-button-on-brand-bg-hover); }
/* V4.4 W0 — create variant: byte-equal token set to --primary (visually identical, surface-aware via --pdb-action-primary-*, no green, no page-local). Reserved for add/create affordances composed by PurpAddButton. */
.pdb-button--create { background: var(--pdb-action-primary-bg); color: var(--pdb-action-primary-text); box-shadow: var(--pdb-button-shadow); }
.pdb-button--create:hover:not(:disabled) { background: var(--pdb-action-primary-bg-hover); }
.pdb-button--create:active:not(:disabled) { background: var(--pdb-action-primary-bg-active); }
/* glass variant — the wallet HERO card's dark glassy-purple, on a button. The old
   rule was a FLAT translucent dark-purple (--pdb-glass-bg alone) so it never read as
   the wallet's violet glass. This now layers the SAME wallet accent (rgb(107,47,160)
   via --pdb-wallet-accent-rgb) violet glaze over the deep glass-bg that the loyalty
   card face uses (.pdb-loyalty-card__face) — one set of wallet tokens, so the button
   matches the wallet glass surface. Backdrop blur + glass border/shadow + a light
   accent label (--pdb-wallet-accent-light-rgb) keep it readable on a light header. */
.pdb-button--glass {
  /* OPAQUE deep-purple base (the Smoke Perks wallet card surface) so it reads DARK on a
     white drawer header — not a washed-out translucent glaze — with the wallet accent
     sheen + a glass highlight line on top. White label for contrast, like the wallet. */
  background:
    linear-gradient(135deg,
      rgba(var(--pdb-wallet-accent-rgb), 0.55) 0%,
      rgba(var(--pdb-wallet-accent-rgb), 0.30) 50%,
      rgba(var(--pdb-wallet-deepglow-rgb), 0.45) 100%),
    rgb(40, 8, 66);
  color: #ffffff;
  border-color: var(--pdb-glass-border);
  box-shadow:
    var(--pdb-glass-shadow),
    0 0 22px rgba(var(--pdb-wallet-accent-rgb), 0.32),
    inset 0 1px 0 var(--pdb-glass-highlight);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pdb-button--glass:hover:not(:disabled) {
  border-color: var(--pdb-surface-brand-border-strong);
  filter: brightness(1.08);
}
.pdb-button--glass:active:not(:disabled) { filter: brightness(0.96); }
.pdb-button__spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: pdb-spin .7s linear infinite; }
.pdb-button__loading-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes pdb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pdb-button__spinner { animation: none; } }

/* Pulsing PURP logo — the canonical loading indicator (Design Brain).
   <PurpLoader> uses this; the dispatch cockpit mirrors the same keyframes so
   loading looks identical everywhere. Keep timing in sync with the cockpit. */
/* THE canonical PURP pulse for app loading: full-opacity artwork with a gentle
   3% scale breath. Fading the signature violet over a light surface blended it
   into pale lavender and made the official mark look incorrectly recoloured. */
@keyframes pdb-logo-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(.97); } }
@keyframes pdb-logo-pulse-fade { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: none; } }
.pdb-logo-pulse { animation: pdb-logo-pulse 1.8s ease-in-out infinite; transform-origin: center; }
/* Connected/live badge — the dot radiates a soft halo (the ONE connected-pulse,
   same treatment the payments 'Connection verified' pill uses). */
.pdb-status-badge--pulse.pdb-status-badge--positive { --pdb-pulse-color: var(--pdb-status-positive-dot); }
.pdb-status-badge--pulse.pdb-status-badge--info { --pdb-pulse-color: var(--pdb-status-info-dot); }
.pdb-status-badge--pulse.pdb-status-badge--danger { --pdb-pulse-color: var(--pdb-status-danger-dot); }
.pdb-status-badge--pulse .pdb-status-badge__dot { animation: pdb-status-live-pulse 1.6s ease-out infinite; }
@keyframes pdb-status-live-pulse {
  0% { box-shadow: 0 0 0 0 var(--pdb-pulse-color, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pdb-status-badge--pulse .pdb-status-badge__dot { animation: none; } }
/* Loaders phase-lock the pulse to the shared page clock (--pdb-pulse-phase set by
   PurpLoader = -(time since navigation start) mod 1.8s) so consecutive loading
   screens continue ONE pulse instead of restarting it on every mount. */
.pdb-loader .pdb-logo-pulse, .pdb-loader__dots i { animation-delay: var(--pdb-pulse-phase, 0ms); }
.pdb-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
/* Fullscreen = the standard PURP loading screen: dark PURP backdrop + pulsing
   white wordmark, matching the embedded Delivery Dispatch gradient exactly. */
.pdb-loader--fullscreen { min-height: 100vh; width: 100%; padding: 48px 24px; background: linear-gradient(180deg, #0c0520 0%, #15001f 60%, #070213 100%); }
.pdb-loader__mark--light { display: none !important; }
[data-pdb-surface="driver"][data-pdb-appearance="light"] .pdb-loader--fullscreen {
  background: linear-gradient(180deg, #f8f5ff 0%, #f7f4fb 60%, #eee7ff 100%);
}
[data-pdb-surface="driver"][data-pdb-appearance="light"] .pdb-loader__mark--default { display: none !important; }
[data-pdb-surface="driver"][data-pdb-appearance="light"] .pdb-loader__mark--light { display: block !important; }
/* Overlay variant: the SAME boot splash, pinned over an already-mounted layout that
   isn't ready to reveal yet (POS register cold start — the wordmark pulses one more
   time and the page reveals fully formed). Above drawers/toasts (3000), below the
   update banner. */
.pdb-loader--overlay { position: fixed; inset: 0; z-index: 4000; min-height: 100vh; }
.pdb-loader__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pdb-text-muted, #6b6b78); }
.pdb-loader--fullscreen .pdb-loader__label { color: rgba(255, 255, 255, .56); }
/* Inline = the QUIET in-layout loading state: three soft pulsing dots + the
   label as plain text. NO brand mark inside loaded layouts (a pulsing logo
   mid-page reads as a glitchy "random logo" — locked 2026-06-10). */
.pdb-loader--inline { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 2px; }
.pdb-loader--inline .pdb-loader__label { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 13px; }
.pdb-loader__dots { display: inline-flex; gap: 4px; }
/* Six-pixel status dots need a visible pulse: the logo's 3% scale breath
   changes their size by only .18px. Keep the shared cadence and phase while
   giving these dots their own opacity/lift animation. */
@keyframes pdb-loader-dot-pulse {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.pdb-loader__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pdb-accent, #6b3fa0); transform-origin: center; animation: pdb-loader-dot-pulse 1.8s ease-in-out infinite; animation-delay: var(--pdb-pulse-phase, 0ms); }
.pdb-loader__dots i:nth-child(2) { animation-delay: calc(var(--pdb-pulse-phase, 0ms) + .3s - 1.8s); }
.pdb-loader__dots i:nth-child(3) { animation-delay: calc(var(--pdb-pulse-phase, 0ms) + .6s - 1.8s); }
/* Delayed reveal is inline-only. Fullscreen loaders always paint both their
   dark viewport cover and phase-locked wordmark immediately. */
@keyframes pdb-loader-appear { to { opacity: 1; } }
.pdb-loader--inline.pdb-loader--delayed { opacity: 0; animation: pdb-loader-appear .18s ease forwards; animation-delay: var(--pdb-loader-delay, 250ms); }
/* Reduce Motion: the official mark and dots stay static and fully opaque. */
@media (prefers-reduced-motion: reduce) { .pdb-logo-pulse, .pdb-loader__dots i { animation: none; opacity: 1; transform: none; } }

/* Update-waiting banner (reload-safety) — calm, branded, bottom-centre. Shown
   only while a deploy update is blocked by an active workflow; never a reload. */
.pdb-update-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2147483000; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 999px; background: linear-gradient(135deg, #2a0b4d, #4e0a85); color: #f3ecff; border: 1px solid rgba(196, 123, 255, .35); box-shadow: 0 14px 40px rgba(12, 0, 28, .55); font-size: 13px; font-weight: 600; }
.pdb-update-banner__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #c47bff; animation: pdb-update-dot 1.8s ease-in-out infinite; }
@keyframes pdb-update-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 123, 255, .55); } 50% { box-shadow: 0 0 0 6px rgba(196, 123, 255, 0); } }
.pdb-update-banner__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdb-update-banner__btn { flex: 0 0 auto; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 700; color: #2a0b4d; background: #fff; }
.pdb-update-banner__btn:hover { background: #f0e6ff; }
.pdb-update-banner__btn:disabled { cursor: not-allowed; opacity: .55; background: #e1d9e8; }
@media (prefers-reduced-motion: reduce) { .pdb-update-banner__dot { animation: none; } }
@media (max-width: 520px) { .pdb-update-banner { left: 12px; right: 12px; transform: none; } .pdb-update-banner__text { white-space: normal; } }
/* Update-level urgency: soft = purple (default above); required = amber; force = red. */
.pdb-update-banner[data-level="required"] { background: linear-gradient(135deg, #5a2a00, #8a4d00); border-color: rgba(255, 178, 90, .45); }
.pdb-update-banner[data-level="force"] { background: linear-gradient(135deg, #5e0b0b, #9a1414); border-color: rgba(255, 120, 120, .5); }
.pdb-update-banner__later { flex: 0 0 auto; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font: inherit; font-weight: 600; color: #f3ecff; background: rgba(255, 255, 255, .12); }
.pdb-update-banner__later:hover { background: rgba(255, 255, 255, .22); }
.pdb-update-banner__hint { flex: 0 0 auto; font-weight: 600; font-style: italic; opacity: .85; white-space: nowrap; }

/* Native app update progress. The native updater is the only phase authority;
   this shared surface never simulates progress or advances itself. */
.pdb-update-progress { position: fixed; inset: 0; z-index: 2147483100; min-height: 100vh; overflow: auto; background: #0c0520; color: #fff; }
.pdb-update-progress__loader { position: absolute; inset: 0; }
.pdb-update-progress__loader .pdb-loader--fullscreen { min-height: 100%; }
.pdb-update-progress[data-phase="failed"] .pdb-update-progress__loader .pdb-logo-pulse { animation: none; opacity: 1; transform: none; }
.pdb-update-progress__content { position: relative; z-index: 1; display: flex; min-height: 100vh; width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: max(58vh, 340px) 0 56px; flex-direction: column; align-items: center; text-align: center; }
.pdb-update-progress__eyebrow { margin: 0 0 10px; color: #cba9ec; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pdb-update-progress h1 { margin: 0; color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.pdb-update-progress__message { max-width: 590px; margin: 16px 0 0; color: rgba(255, 255, 255, .78); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; }
.pdb-update-progress__hint { max-width: 560px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid rgba(255, 190, 102, .38); border-radius: 12px; background: rgba(111, 58, 0, .34); color: #ffe1b7; font-size: 14px; font-weight: 700; }
.pdb-update-progress__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.pdb-update-progress__actions .pdb-button { min-width: 150px; }
.pdb-update-progress__bar { width: min(360px, 100%); height: 8px; margin-top: 24px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.pdb-update-progress__bar > span { display: block; width: 35%; height: 100%; border-radius: inherit; background: #cba9ec; animation: pdb-update-progress-travel 1.6s ease-in-out infinite alternate; }
@keyframes pdb-update-progress-travel { from { transform: translateX(0); } to { transform: translateX(186%); } }
@media (prefers-reduced-motion: reduce) { .pdb-update-progress__bar > span { animation: none; width: 100%; opacity: .65; } }
@media (max-width: 520px) { .pdb-update-progress__content { width: min(100% - 28px, 680px); padding-top: max(54vh, 290px); } .pdb-update-progress__actions { width: 100%; } .pdb-update-progress__actions .pdb-button { flex: 1 1 100%; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pdb-update-progress__loader .pdb-logo-pulse { animation-name: pdb-logo-pulse-fade; } }

.pdb-form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pdb-form-field--third { width: min(100%, clamp(140px, 33.333333%, 240px)); }
.pdb-form-field__label { color: var(--pdb-field-label-color); font-size: var(--pdb-field-label-size); font-weight: var(--pdb-field-label-weight); letter-spacing: var(--pdb-letter-spacing-label); }
.pdb-form-field__required { display: inline-block; flex: 0 0 auto; margin-inline-start: 4px; }
.pdb-form-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The product drawer and return fields share this exact Required marker. */
.pdb-required-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pdb-status-danger-bg);
  color: var(--pdb-status-danger-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pdb-form-field__help { color: var(--pdb-field-help-color); font-size: var(--pdb-font-size-xs); }
.pdb-form-field__error { color: var(--pdb-field-error-color); font-size: var(--pdb-font-size-xs); font-weight: 600; }
.pdb-input, .pdb-select, .pdb-textarea {
  width: 100%; min-height: var(--pdb-field-height-md);
  padding: var(--pdb-field-padding-y) var(--pdb-field-padding-x);
  border-radius: var(--pdb-field-radius);
  border: var(--pdb-field-border-width) solid var(--pdb-field-border);
  background: var(--pdb-field-bg);
  color: var(--pdb-text-primary);
  font-family: var(--pdb-font-family); font-size: var(--pdb-font-size-md);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pdb-textarea { min-height: calc(var(--pdb-field-height-md) * 2.2); resize: vertical; }
/* Placeholder text — darker, on-brand secondary (the browser default is a washed-out
   grey that reads as broken on our fields). Driven by --pdb-text-secondary, which each
   surface scope already flips (dark ink on light surfaces, light on dark), so ONE rule
   is correct everywhere. opacity:1 is required — Firefox lowers placeholder opacity by
   default, which would re-mute the color. */
@media (pointer: coarse) {
  /* Compact widths retain readable native entry without Safari focus zoom. */
  input.pdb-input, select.pdb-select, textarea.pdb-textarea { font-size: 16px !important; }
  .pdb-input, .pdb-select, .pdb-textarea, .pdb-daterange, .pdb-button { min-height: 44px !important; }
}
.pdb-input::placeholder, .pdb-textarea::placeholder { color: var(--pdb-text-secondary); opacity: 1; }
/* Design-brain select: drop the native OS double-chevron for a single brand chevron.
   (background-color, not the shorthand, on hover/disabled so the chevron image survives.) */
.pdb-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--pdb-field-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
.pdb-input:hover, .pdb-select:hover, .pdb-textarea:hover { border-color: var(--pdb-field-border-hover); background-color: var(--pdb-field-bg-hover); }
.pdb-input:focus, .pdb-select:focus, .pdb-textarea:focus { outline: none; border-color: var(--pdb-field-border-focus); box-shadow: var(--pdb-field-focus-ring); }
.pdb-input:disabled, .pdb-select:disabled, .pdb-textarea:disabled { background-color: var(--pdb-field-bg-disabled); cursor: not-allowed; opacity: .7; }

/* ── PurpSelect custom dropdown ──────────────────────────────────────────────
   The trigger is a <button> styled as a field (inherits .pdb-select's border/bg/chevron); the
   options render in a body portal (.pdb-select__menu) that opens downward, flips up when there's
   no room below, clamps to the viewport, and scrolls — consistent on every OS + screen size. */
.pdb-select--trigger {
  display: inline-flex; align-items: center; text-align: left; cursor: pointer;
}
.pdb-select--trigger:disabled { cursor: not-allowed; }
.pdb-select__value {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdb-select__menu {
  box-sizing: border-box;
  /* Opaque raised surface — must never be see-through (the field bg is the guaranteed-solid token;
     --pdb-surface isn't defined). Fall back to raised-surface then white. */
  background: var(--pdb-bg-surface-raised, var(--pdb-field-bg, #fff));
  border: var(--pdb-field-border-width) solid var(--pdb-field-border);
  border-radius: var(--pdb-radius-md);
  box-shadow: 0 12px 32px rgba(24, 10, 48, .22), 0 2px 8px rgba(24, 10, 48, .12);
  padding: 4px; overflow-y: auto; outline: none;
  animation: pdb-select-in .12s ease;
}
/* Deterministic row metrics — EVERY option is exactly the same height (fixed line-height inside a
   fixed vertical padding), so the menu's rows read perfectly even regardless of label length,
   weight (selected rows are bolder), or descenders. The selected ✓ is absolutely positioned
   (never floated) so it can't perturb row layout; its width is reserved via padding-right. */
.pdb-select__option {
  display: block; position: relative; padding: 9px 32px 9px 11px; line-height: 20px;
  border-radius: var(--pdb-radius-sm); cursor: pointer;
  font-family: var(--pdb-font-family); font-size: var(--pdb-font-size-md); color: var(--pdb-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdb-select__option.is-active { background: var(--pdb-field-bg-hover); }
.pdb-select__option.is-selected { font-weight: 600; }
.pdb-select__option.is-selected::after {
  content: '✓'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--pdb-accent); font-weight: 700;
}
.pdb-select__option.is-disabled { opacity: .5; cursor: not-allowed; }
.pdb-select__group {
  padding: 8px 11px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pdb-text-secondary);
}
@keyframes pdb-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pdb-select__menu { animation: none; } }
/* Signature purple glow — the ONE error-highlight for a flagged field (driven by
   the toast brain's field errors). Brand violet ring + aurora glow + a one-shot
   pulse so the eye lands on the cell the toast is talking about. */
@keyframes pdb-field-glow {
  0%   { box-shadow: 0 0 0 6px rgba(123,18,217,.30), 0 0 0 3px rgba(107,47,160,.45); }
  100% { box-shadow: 0 0 0 3px rgba(107,47,160,.30), 0 0 16px 2px rgba(123,18,217,.28); }
}
.pdb-form-field--invalid .pdb-input, .pdb-form-field--invalid .pdb-select, .pdb-form-field--invalid .pdb-textarea,
.pdb-input[aria-invalid="true"], .pdb-select[aria-invalid="true"], .pdb-textarea[aria-invalid="true"] {
  border-color: rgba(107,47,160,.85);
  box-shadow: 0 0 0 3px rgba(107,47,160,.30), 0 0 16px 2px rgba(123,18,217,.28);
  animation: pdb-field-glow 1.1s ease-out 1;
}
.pdb-colorpicker.is-invalid {
  border-radius: 10px; padding: 3px;
  box-shadow: 0 0 0 3px rgba(107,47,160,.34), 0 0 16px 2px rgba(123,18,217,.28);
  animation: pdb-field-glow 1.1s ease-out 1;
}
/* Required-value CUE — the brand pink/rose outline a field wears while a
   MANDATORY value is still missing (PurpFormField `requiredCue`). Distinct from
   the violet invalid glow above: the cue means "still to fill in", not "wrong".
   Tone comes from the ONE rose family (--pdb-status-rose-*) — never a local hex. */
.pdb-form-field--required-cue .pdb-input,
.pdb-form-field--required-cue .pdb-select,
.pdb-form-field--required-cue .inv-ms__trigger,
.pdb-form-field--required-cue .pdb-textarea {
  border-color: var(--pdb-status-rose-dot);
  box-shadow: 0 0 0 3px var(--pdb-status-rose-bg);
  animation: none; /* the cue stays rose even when the invalid glow co-applies */
}
.pdb-form-field--required-cue .pdb-form-field__label { color: var(--pdb-status-rose-text); }
.pdb-form-field--required-pulse :is(.pdb-input, .pdb-select, .inv-ms__trigger, .pdb-textarea) {
  animation: pdb-required-cue-pulse 1.8s ease-in-out infinite;
}
@keyframes pdb-required-cue-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--pdb-status-rose-bg); }
  50% { box-shadow: 0 0 0 4px var(--pdb-status-rose-bg), 0 0 14px var(--pdb-status-rose-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .pdb-form-field--required-pulse :is(.pdb-input, .pdb-select, .inv-ms__trigger, .pdb-textarea) { animation: none; }
}
/* Money/quantity fields use the design-brain input — never the browser's native
   number spinners (the up/down arrows). Hidden once here so every PurpInput is
   clean platform-wide; money fields prefer inputMode="decimal" over type=number. */
.pdb-input[type='number']::-webkit-outer-spin-button,
.pdb-input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdb-input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

/* ── Stepper (PurpStepper — THE −/value/＋ merchandise quantity control) ─
   One modern joined control everywhere: compact 38px geometry for fine-pointer
   workstations and 44px targets on touch/coarse-pointer devices. The numeric
   input stays real and keyboard-editable. Item removal remains a separate,
   host-supplied rose PurpButton — never fold deletion into quantity stepping.
   Absolute physical counts may reuse this control through their caller-owned
   count draft path; bulk/receiving grids and switches retain their own controls. */
.pdb-stepper {
  --pdb-stepper-control-size: var(--pdb-stepper-size-fine);
  --pdb-stepper-control-radius: var(--pdb-radius-lg);
  display: inline-grid;
  grid-template-columns:
    var(--pdb-stepper-control-size)
    var(--pdb-stepper-value-width)
    var(--pdb-stepper-control-size);
  align-items: stretch;
  height: var(--pdb-stepper-control-size);
  border: var(--pdb-field-border-width) solid var(--pdb-field-border);
  border-radius: var(--pdb-stepper-control-radius);
  background: var(--pdb-bg-surface-tinted);
  box-shadow: var(--pdb-button-shadow);
  overflow: hidden;
  transition: height .16s ease, border-radius .16s ease, box-shadow .16s ease;
}
/* A formatted read-only value (inches such as 31/32″) needs more room than a typed count. */
.pdb-stepper--display { --pdb-stepper-value-width: 76px; }
.pdb-stepper--display .pdb-stepper__value { cursor: default; text-overflow: clip; }
.pdb-stepper--compact {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.pdb-stepper--compact::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: var(--pdb-stepper-compact-chrome-width);
  height: var(--pdb-stepper-compact-chrome-height);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border: var(--pdb-field-border-width) solid var(--pdb-field-border);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-bg-surface-tinted);
  box-shadow: var(--pdb-button-shadow);
  pointer-events: none;
}
.pdb-stepper__btn {
  width: 100%; min-width: 0; height: 100%; min-height: 0;
  padding: 0;
  border: none; background: transparent;
  color: var(--pdb-action-secondary-text);
  font: inherit; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.pdb-stepper--compact .pdb-stepper__btn,
.pdb-stepper--compact .pdb-stepper__value {
  position: relative;
  z-index: 1;
}
.pdb-stepper--compact .pdb-stepper__btn { background: transparent; }
.pdb-stepper--compact .pdb-stepper__btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: var(--pdb-icon-action-key-size);
  height: var(--pdb-icon-action-key-size);
  border-radius: var(--pdb-radius-md);
  background: transparent;
  transition: background .12s ease, box-shadow .12s ease;
}
.pdb-stepper--compact .pdb-stepper__btn:hover:not(:disabled) { background: transparent; }
.pdb-stepper--compact .pdb-stepper__btn:hover:not(:disabled)::before { background: var(--pdb-field-bg-hover); }
.pdb-stepper--compact .pdb-stepper__btn:active:not(:disabled) {
  background: transparent;
  color: var(--pdb-action-primary-text);
  transform: scale(.96);
}
.pdb-stepper--compact .pdb-stepper__btn:active:not(:disabled)::before {
  background: var(--pdb-action-primary-bg);
  box-shadow: var(--pdb-field-focus-ring);
}
.pdb-stepper--compact .pdb-stepper__btn:focus-visible { box-shadow: none; }
.pdb-stepper--compact .pdb-stepper__btn:focus-visible::before { box-shadow: var(--pdb-field-focus-ring); }
.pdb-stepper__btn:hover:not(:disabled) { background: var(--pdb-field-bg-hover); }
.pdb-stepper__btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--pdb-action-primary-bg) 12%, transparent);
  transform: scale(.9);
}
.pdb-stepper__btn:disabled { color: var(--pdb-text-muted); opacity: .58; cursor: not-allowed; }
.pdb-stepper__btn:focus-visible { outline: none; box-shadow: inset var(--pdb-field-focus-ring); }
.pdb-stepper__icon {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.pdb-stepper__value {
  width: 100%; min-width: 0; height: 100%; min-height: 0;
  box-sizing: border-box; padding: 0;
  border: none; border-inline: var(--pdb-field-border-width) solid var(--pdb-border-subtle);
  background: var(--pdb-field-bg);
  color: var(--pdb-text-primary);
  font: inherit; font-size: var(--pdb-font-size-md); font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.pdb-stepper__value::-webkit-outer-spin-button,
.pdb-stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdb-stepper__value:focus-visible { outline: none; background: var(--pdb-field-bg-hover); box-shadow: inset var(--pdb-field-focus-ring); }
.pdb-stepper__value:disabled { background: var(--pdb-field-bg-disabled); cursor: not-allowed; opacity: .7; }
.pdb-stepper--compact .pdb-stepper__value {
  border-inline: none;
  background: transparent;
}
.pdb-stepper--compact .pdb-stepper__value:focus-visible {
  background: var(--pdb-action-primary-bg);
  color: var(--pdb-action-primary-text);
  box-shadow: var(--pdb-field-focus-ring);
  border-radius: var(--pdb-radius-md);
}
.pdb-stepper--compact .pdb-stepper__value:disabled { background: transparent; }
@media (pointer: coarse) {
  .pdb-stepper {
    --pdb-stepper-control-size: var(--pdb-stepper-size-coarse);
    --pdb-stepper-control-radius: var(--pdb-radius-xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdb-stepper,
  .pdb-stepper__btn { transition: none; }
  .pdb-stepper__btn:active:not(:disabled) { transform: none; }
}

/* ── Notice tones — the Design-Brain colour skins an inline notice/banner
   wears (layout stays the host pattern; the TONE lives here, one brain).
   `rose` is the brand-pink alert family (--pdb-status-rose-*): required cues
   and money-attention banners (e.g. "Exchange Credit to be applied"). */
.pdb-notice-tone--rose {
  background: var(--pdb-status-rose-bg);
  border: 1px solid var(--pdb-status-rose-border);
  color: var(--pdb-status-rose-text);
}

/* PurpNotice — THE high-signal inline operator notice. Tone variables keep the
   same structure and contrast across every app; domain screens provide copy and
   actions, never their own alert chrome. */
.pdb-notice {
  --pdb-notice-bg: var(--pdb-status-info-bg);
  --pdb-notice-border: var(--pdb-status-info-border);
  --pdb-notice-text: var(--pdb-status-info-text);
  --pdb-notice-accent: var(--pdb-status-info-dot);
  --pdb-notice-body: var(--pdb-text-primary);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--pdb-space-lg);
  padding: var(--pdb-card-padding-md);
  border: 1px solid var(--pdb-notice-border);
  border-inline-start: 4px solid var(--pdb-notice-accent);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-notice-bg);
  color: var(--pdb-notice-text);
  box-shadow: var(--pdb-card-shadow);
}
.pdb-notice--neutral {
  --pdb-notice-bg: var(--pdb-status-neutral-bg);
  --pdb-notice-border: var(--pdb-status-neutral-border);
  --pdb-notice-text: var(--pdb-status-neutral-text);
  --pdb-notice-accent: var(--pdb-status-neutral-dot);
}
.pdb-notice--positive {
  --pdb-notice-bg: var(--pdb-status-positive-bg);
  --pdb-notice-border: var(--pdb-status-positive-border);
  --pdb-notice-text: var(--pdb-status-positive-text);
  --pdb-notice-accent: var(--pdb-status-positive-dot);
}
.pdb-notice--brand {
  --pdb-notice-bg: var(--pdb-surface-brand-bg);
  --pdb-notice-border: var(--pdb-surface-brand-border);
  --pdb-notice-text: var(--pdb-surface-brand-text);
  --pdb-notice-accent: var(--pdb-purp-orchid);
  --pdb-notice-body: var(--pdb-surface-brand-text-muted);
}
.pdb-notice--danger {
  --pdb-notice-bg: var(--pdb-status-danger-bg);
  --pdb-notice-border: var(--pdb-status-danger-border);
  --pdb-notice-text: var(--pdb-status-danger-text);
  --pdb-notice-accent: var(--pdb-status-danger-dot);
}
.pdb-notice--rose {
  --pdb-notice-bg: var(--pdb-status-rose-bg);
  --pdb-notice-border: var(--pdb-status-rose-border);
  --pdb-notice-text: var(--pdb-status-rose-text);
  --pdb-notice-accent: var(--pdb-status-rose-dot);
}
.pdb-notice--gold {
  --pdb-notice-bg: var(--pdb-status-gold-bg);
  --pdb-notice-border: var(--pdb-status-gold-border);
  --pdb-notice-text: var(--pdb-status-gold-text);
  --pdb-notice-accent: var(--pdb-status-gold-dot);
}
.pdb-notice__icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pdb-notice-accent);
  color: var(--pdb-text-on-brand);
  font-size: var(--pdb-font-size-md);
  font-weight: var(--pdb-font-weight-bold);
  line-height: 1;
}
.pdb-notice__content,
.pdb-notice__titles { min-width: 0; }
.pdb-notice__content { display: grid; gap: var(--pdb-space-md); }
.pdb-notice__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdb-space-lg);
}
.pdb-notice__titles { display: grid; gap: 2px; }
.pdb-notice__eyebrow {
  font-size: var(--pdb-font-size-xs);
  font-weight: var(--pdb-font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pdb-notice__title {
  margin: 0;
  color: inherit;
  font-size: var(--pdb-font-size-lg);
  line-height: var(--pdb-line-height-tight);
}
.pdb-notice__body {
  display: grid;
  gap: var(--pdb-space-md);
  color: var(--pdb-notice-body);
  font-size: var(--pdb-font-size-sm);
  line-height: var(--pdb-line-height-normal);
}
.pdb-notice__body > :first-child { margin-top: 0; }
.pdb-notice__body > :last-child { margin-bottom: 0; }
.pdb-notice__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pdb-space-sm);
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .pdb-notice { grid-template-columns: 28px minmax(0, 1fr); }
  .pdb-notice__icon { width: 28px; height: 28px; }
  .pdb-notice__head { display: grid; }
  .pdb-notice__actions { justify-content: flex-start; }
}
.pdb-notice--compact {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--pdb-space-sm);
  padding: var(--pdb-space-sm) var(--pdb-space-md);
}
.pdb-notice--compact .pdb-notice__icon {
  width: 20px;
  height: 20px;
  font-size: var(--pdb-font-size-xs);
}
.pdb-notice--compact .pdb-notice__head {
  display: flex;
  align-items: center;
  gap: var(--pdb-space-sm);
}
.pdb-notice--compact .pdb-notice__titles { flex: 1 1 auto; }
.pdb-notice--compact .pdb-notice__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pdb-font-size-sm);
}
.pdb-notice--compact .pdb-notice__actions { justify-content: flex-end; }

/* ── Checkbox ─────────────────────────────────────────────────────────── */
.pdb-checkbox {
  width: 16px; height: 16px; flex: none; margin: 0;
  accent-color: var(--pdb-action-primary-bg, #5b16a3);
  cursor: pointer;
}
.pdb-checkbox:focus-visible { outline: none; box-shadow: var(--pdb-field-focus-ring); border-radius: 4px; }
.pdb-checkbox:disabled { cursor: not-allowed; opacity: .6; }
/* Labeled inline checkbox */
.pdb-checkbox-field {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--pdb-font-family); font-size: var(--pdb-font-size-md); color: var(--pdb-text-primary);
}
.pdb-checkbox-field.is-disabled { cursor: not-allowed; opacity: .6; }
.pdb-checkbox__label { line-height: 1.2; }
/* Selectable option pill (the onboarding-requirements look) */
.pdb-checkbox-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--pdb-radius-md, 8px);
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: var(--pdb-font-size-sm, 13px); font-weight: var(--pdb-font-weight-medium, 500);
  cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pdb-checkbox-pill:hover { border-color: var(--pdb-border-focus); }
.pdb-checkbox-pill.is-on {
  background: rgba(102, 14, 174, .10); border-color: rgba(102, 14, 174, .28);
  color: var(--pdb-action-primary, #5b16a3); font-weight: var(--pdb-font-weight-semibold, 600);
}
.pdb-checkbox-pill.is-disabled { cursor: not-allowed; opacity: .6; }
/* The PURP check (variant="onBrand") on the plum brand surface: unticked, a light outline; ticked, the
   P mark's violet tile with a white tick. The label keeps the bar's 34px control height. */
.pdb-checkbox--on-brand {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pdb-checkbox--on-brand:checked {
  border-color: rgba(222, 200, 255, 0.6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.8 9.7 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(135deg, var(--pdb-purple-400, #7c3aed) 0%, #660eae 55%, #4e0a85 100%);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
.pdb-checkbox--on-brand:focus-visible { border-color: #ffffff; box-shadow: 0 0 0 4px rgba(217, 203, 255, 0.55); border-radius: 5px; }
.pdb-checkbox--on-brand:disabled:not(:checked) { opacity: 1; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.pdb-checkbox--on-brand:checked:disabled { opacity: .7; box-shadow: none; }
.pdb-checkbox-field--on-brand {
  height: 34px; padding: 0 8px 0 4px; gap: 9px;
  color: var(--pdb-surface-brand-text, #ffffff); font-size: 13.5px; font-weight: var(--pdb-font-weight-semibold, 600); white-space: nowrap;
}
.pdb-checkbox-field--on-brand.is-disabled { opacity: 1; color: rgba(255, 255, 255, 0.55); }

/* ── Toggle (PurpToggle — the ONE boolean switch; add-on paid switches) ── */
.pdb-toggle {
  display: inline-flex; align-items: center; flex: none;
  border: none; background: none; padding: 0; margin: 0;
  cursor: pointer; border-radius: 999px;
}
.pdb-toggle:disabled { cursor: not-allowed; opacity: .5; }
.pdb-toggle:focus-visible { outline: none; box-shadow: var(--pdb-field-focus-ring); }
.pdb-toggle__track {
  display: inline-flex; align-items: center;
  width: 40px; height: 22px; padding: 2px; box-sizing: border-box;
  border-radius: 999px;
  background: var(--pdb-status-neutral-border);
  border: 1px solid var(--pdb-border-strong);
  transition: background .14s ease, border-color .14s ease;
}
.pdb-toggle__thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pdb-field-bg);
  box-shadow: 0 1px 2px rgba(33, 23, 43, 0.25);
  transition: transform .14s ease;
}
.pdb-toggle.is-on .pdb-toggle__track {
  background: var(--pdb-action-primary-bg);
  border-color: var(--pdb-action-primary-bg-active);
}
.pdb-toggle.is-on .pdb-toggle__thumb { transform: translateX(18px); }
.pdb-toggle:hover:not(:disabled):not(.is-on) .pdb-toggle__track { border-color: var(--pdb-border-focus); }
.pdb-toggle--sm .pdb-toggle__track { width: 32px; height: 18px; }
.pdb-toggle--sm .pdb-toggle__thumb { width: 12px; height: 12px; }
.pdb-toggle--sm.is-on .pdb-toggle__thumb { transform: translateX(14px); }
/* Labeled toggle row */
.pdb-toggle-field {
  display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-family: var(--pdb-font-family); font-size: var(--pdb-font-size-md); color: var(--pdb-text-primary);
}
.pdb-toggle-field.is-disabled { cursor: not-allowed; }
.pdb-toggle-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-toggle-field__label { line-height: 1.3; font-weight: var(--pdb-font-weight-medium, 500); }
.pdb-toggle-field__description { font-size: var(--pdb-font-size-sm, 13px); color: var(--pdb-field-help-color); line-height: 1.35; }

/* ── Gauge (THE slider control — single value or range) ───────────────── */
.pdb-gauge { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdb-gauge.is-disabled { opacity: 0.55; }
.pdb-gauge__track-wrap { position: relative; flex: 1 1 auto; height: 28px; min-width: 90px; display: flex; align-items: center; }
.pdb-gauge__track {
  position: absolute; inset: 12px 0; height: 4px; border-radius: 999px;
  background: var(--pdb-border-subtle);
}
.pdb-gauge__fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--pdb-accent); }
.pdb-gauge__input {
  position: absolute; inset: 0; width: 100%; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; height: 28px;
}
.pdb-gauge__input:focus-visible { outline: 2px solid var(--pdb-accent); outline-offset: 2px; border-radius: 6px; }
.pdb-gauge__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pdb-bg-surface); border: 2px solid var(--pdb-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.pdb-gauge__input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pdb-bg-surface); border: 2px solid var(--pdb-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); cursor: pointer;
}
/* Range mode stacks two native inputs over ONE track: the inputs are
 * click-transparent so the pair never fight; only their THUMBS take the
 * pointer. */
.pdb-gauge--range .pdb-gauge__input { pointer-events: none; }
.pdb-gauge--range .pdb-gauge__input::-webkit-slider-thumb { pointer-events: auto; }
.pdb-gauge--range .pdb-gauge__input::-moz-range-thumb { pointer-events: auto; }
.pdb-gauge__entry {
  flex: none; width: 64px; padding: 4px 6px; font: inherit; font-size: var(--pdb-font-size-sm, 13px);
  color: var(--pdb-text-primary); background: var(--pdb-field-bg);
  border: 1px solid var(--pdb-border-default); border-radius: 8px; text-align: center; min-width: 0;
}
.pdb-gauge__entry:focus-visible { outline: 2px solid var(--pdb-accent); outline-offset: 1px; }

/* ── Color picker ─────────────────────────────────────────────────────── */
.pdb-colorpicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdb-colorpicker__chip {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid var(--pdb-border-default); cursor: pointer; padding: 0;
}
.pdb-colorpicker__chip.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(102,14,174,.32); }
.pdb-colorpicker__grid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdb-colorpicker__swatch {
  width: 28px; height: 28px; flex: none; border-radius: 8px; padding: 0;
  border: 2px solid transparent; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdb-colorpicker__swatch:hover { transform: scale(1.05); }
.pdb-colorpicker__swatch.is-selected { border-color: var(--pdb-text-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(102,14,174,.32); }
.pdb-colorpicker__swatch--custom {
  background: var(--pdb-field-bg, #fff); border: 1px dashed var(--pdb-border-strong);
  color: var(--pdb-text-muted, #6b7280); font-weight: 700; font-size: 16px;
}
.pdb-colorpicker__swatch--custom input[type='color'] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0;
}
/* When a colour is set the well is painted with it (inline style) — drop the
   empty-state dashed border + "+" affordance so the chosen colour shows cleanly. */
.pdb-colorpicker__swatch--custom.has-value { border-style: solid; border-color: transparent; }
.pdb-colorpicker__swatch:disabled { opacity: .6; cursor: not-allowed; }
/* Typed hex/RGB field — pick with the wheel OR type a value, the field works with both. */
.pdb-colorpicker__hex {
  flex: 0 1 150px; min-width: 110px; max-width: 180px;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family, ui-monospace, monospace);
  font-size: var(--pdb-font-size-sm, 13px); line-height: 1.2;
}
.pdb-colorpicker__hex:focus { outline: none; border-color: var(--pdb-border-strong); box-shadow: 0 0 0 3px rgba(102,14,174,.18); }
.pdb-colorpicker__hex.is-invalid { border-color: rgba(107,47,160,.85); box-shadow: 0 0 0 3px rgba(123,18,217,.18); }
.pdb-colorpicker__hex:disabled { opacity: .6; cursor: not-allowed; }

/* ── Date field (touch-friendly Month / Day / Year) ───────────────────── */
.pdb-datefield { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.pdb-datefield__part {
  min-height: 48px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: 16px; line-height: 1.2; /* >=16px so iOS never zooms on focus */
}
.pdb-datefield__month { flex: 1 1 130px; min-width: 120px; }
.pdb-datefield__day { flex: 0 0 76px; width: 76px; text-align: center; }
.pdb-datefield__year { flex: 0 0 96px; width: 96px; text-align: center; }
/* Toolbar density: one coherent date control, never Month/Day above Year.
   Every segment remains at least 44px in both dimensions for Elo/touch use. */
.pdb-datefield--compact { gap: 4px; flex-wrap: nowrap; min-width: 0; }
.pdb-datefield--compact .pdb-datefield__part {
  min-height: var(--pdb-field-height-lg);
  padding: 8px;
  border-radius: var(--pdb-field-radius);
}
.pdb-datefield--compact .pdb-datefield__month { flex: 1 1 72px; min-width: 72px; }
.pdb-datefield--compact .pdb-datefield__day { flex: 0 0 48px; width: 48px; min-width: 48px; }
.pdb-datefield--compact .pdb-datefield__year { flex: 0 0 68px; width: 68px; min-width: 68px; }
.pdb-datefield__part:focus { outline: none; border-color: var(--pdb-border-strong); box-shadow: 0 0 0 3px rgba(102,14,174,.18); }
.pdb-datefield.is-invalid .pdb-datefield__part { border-color: rgba(107,47,160,.85); box-shadow: 0 0 0 3px rgba(123,18,217,.14); }
.pdb-datefield__part:disabled { opacity: .6; cursor: not-allowed; }

/* ── Date-RANGE field (one tappable summary + portaled calendar) ──────────
   The trigger reads 'Jun 15 – Jul 14' ('Any dates' when unset); the popover is
   a single-month grid whose day cells are real 44×44 buttons. Positioning
   follows PurpSelect's measured-flip discipline (downward first, flip only as
   a last resort); range styling reuses the datefield's exact focus rgba. */
.pdb-daterange {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: 16px; line-height: 1.2; /* >=16px so iOS never zooms on focus */
  text-align: left; cursor: pointer;
}
.pdb-daterange:focus { outline: none; border-color: var(--pdb-border-strong); box-shadow: 0 0 0 3px rgba(102,14,174,.18); }
.pdb-daterange:disabled { opacity: .6; cursor: not-allowed; }
/* Toolbar density: EXACTLY the .pdb-select field metrics — the range trigger must sit
   flush with its sibling Source/Status fields, never taller (retailer decision). The trigger is a
   <button>, so iOS never focus-zooms it and the md font size is safe. */
.pdb-daterange--compact {
  min-height: var(--pdb-field-height-md);
  padding: var(--pdb-field-padding-y) var(--pdb-field-padding-x);
  border-radius: var(--pdb-field-radius);
  font-size: var(--pdb-font-size-md);
}
/* Pill: the compact trigger at intrinsic width, like Shopify's "[calendar] 30 days". */
.pdb-daterange--pill { display: inline-flex; width: auto; max-width: 100%; }
.pdb-daterange--pill .pdb-daterange__value { flex: 0 1 auto; }
.pdb-daterange__glyph, .pdb-daterange__chevron { flex: none; }
.pdb-daterange__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-daterange--reporting .pdb-daterange__value { flex: 0 1 auto; }
.pdb-daterange--reporting .pdb-daterange__chevron { margin-left: auto; }
.pdb-daterange__value.is-placeholder { color: var(--pdb-text-secondary); }
.pdb-daterange__pop {
  box-sizing: border-box;
  container-type: inline-size;
  container-name: date-popover;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--pdb-bg-surface-raised, var(--pdb-field-bg, #fff));
  border: 1px solid var(--pdb-border-default);
  border-radius: var(--pdb-field-radius);
  box-shadow: 0 12px 32px rgba(24, 10, 48, .22), 0 2px 8px rgba(24, 10, 48, .12);
  padding: 10px; outline: none;
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
}
.pdb-daterange__pop--reporting { padding: 0; }
.pdb-daterange__body { min-width: 0; }
.pdb-daterange__pop--reporting .pdb-daterange__body { display: flex; align-items: stretch; }
.pdb-daterange__calendar { min-width: 0; }
/* Keyboard entry sits under the calendar as one quiet row: a small-caps label,
   a Design Brain field, and an error only when a typed date is refused. */
.pdb-daterange__typed {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--pdb-border-default);
  color: var(--pdb-text-secondary); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.pdb-daterange__typed--range > label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 90px; min-width: 0; }
.pdb-daterange__typed.pdb-daterange__typed--range input { width: 100%; flex: none; }
.pdb-daterange__typed--range > button { margin-left: auto; }
.pdb-daterange__typed small { flex: 1 0 100%; text-transform: none; letter-spacing: 0; }
.pdb-daterange__typed input {
  box-sizing: border-box; flex: 1 1 120px; min-width: 0; min-height: 44px; padding: 8px 10px;
  text-transform: none; letter-spacing: 0;
  border: 1px solid var(--pdb-border-default); border-radius: var(--pdb-field-radius);
  background: var(--pdb-field-bg, #fff); color: var(--pdb-text-primary);
  font: inherit; font-size: var(--pdb-font-size-md, 14px); font-weight: 500;
}
.pdb-daterange__typed input:focus { outline: none; border-color: var(--pdb-border-strong); box-shadow: 0 0 0 3px rgba(102,14,174,.18); }
.pdb-daterange__typed input[aria-invalid="true"] { border-color: var(--pdb-status-danger, #a62635); }
.pdb-daterange__typed small { color: var(--pdb-text-secondary); font-weight: 500; }
.pdb-daterange__typed small.is-error { color: var(--pdb-status-danger, #a62635); }
.pdb-daterange__pop--reporting .pdb-daterange__calendar { flex: 1 1 auto; padding: 10px; }
.pdb-daterange__quick {
  flex: 0 0 164px; padding: 12px 10px;
  border-right: 1px solid var(--pdb-border-default);
}
.pdb-daterange__quick > .pdb-daterange__clear { margin-top: 8px; font-size: var(--pdb-font-size-xs, 12px); font-weight: 500; }
.pdb-daterange__section-label {
  margin: 0 4px 6px; color: var(--pdb-text-secondary);
  font-size: var(--pdb-font-size-xs, 12px); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.pdb-daterange__choices { display: flex; flex-direction: column; gap: 2px; }
.pdb-daterange__choice {
  min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--pdb-field-radius);
  background: transparent; color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: var(--pdb-font-size-md, 14px); line-height: 1.2; text-align: left; cursor: pointer;
}
.pdb-daterange__choice:hover:not(:disabled) { background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
.pdb-daterange__choice.is-active {
  border-color: var(--pdb-border-strong); background: rgba(102,14,174,.10);
  color: var(--pdb-action-primary, #5b16a3); font-weight: 700;
}
.pdb-daterange__choice:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(102,14,174,.18);
}
.pdb-daterange__choice:disabled { opacity: .6; cursor: not-allowed; }
/* Compare, built into the Date popover again (owner, 2026-10-07): Off plus the consumer's comparisons, each with its
   window, as one segmented row above the calendar; the chosen one reads "vs <choice>" on the button. */
.pdb-daterange__compare {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pdb-border-default);
}
.pdb-daterange__compare > .pdb-daterange__section-label { margin: 0; }
.pdb-daterange__compare-choices {
  display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
  padding: 3px; border-radius: var(--pdb-field-radius); background: var(--pdb-bg-surface-tinted);
}
.pdb-daterange__compare .pdb-daterange__choice { flex: 1 1 auto; padding: 6px 7px; font-size: var(--pdb-font-size-xs, 12px); text-align: center; }
.pdb-daterange__compare .pdb-daterange__choice.is-active {
  background: var(--pdb-bg-surface-raised); border-color: var(--pdb-border-subtle);
  color: var(--pdb-action-primary); box-shadow: inset 0 -2px var(--pdb-champagne-accent);
}
.pdb-daterange__compare .pdb-daterange__comparison-clear:not(.is-active) { color: var(--pdb-text-primary); font-weight: 400; }
.pdb-daterange__comparison-summary {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--pdb-status-gold-text); font-size: var(--pdb-font-size-sm, 13px); font-weight: 600;
}
.pdb-daterange__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pdb-daterange__nav {
  min-width: 44px; min-height: 44px;
  border: none; background: transparent; border-radius: var(--pdb-field-radius);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.pdb-daterange__nav:hover:not(:disabled) { background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
.pdb-daterange__nav:disabled { opacity: .35; cursor: not-allowed; }
.pdb-daterange__month { min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 700; }
/* Header zoom-out button ("July 2026" -> months, "2026" -> years): a subtle lavender button so it
   reads as clickable. Lavender surface + purple text come from the shared PURP-positive status
   tokens, which already flip for dark surfaces; it keeps the 44px touch target (28px on a mouse). */
.pdb-daterange__zoomout {
  border: 1px solid var(--pdb-status-positive-border);
  background: var(--pdb-status-positive-bg);
  color: var(--pdb-status-positive-text);
  font-family: var(--pdb-font-family); cursor: pointer;
  min-height: 44px; padding: 0 12px; border-radius: 8px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pdb-daterange__zoomout:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pdb-status-positive-dot) 14%, var(--pdb-status-positive-bg));
}
.pdb-daterange__zoomout:active:not(:disabled) {
  background: color-mix(in srgb, var(--pdb-status-positive-dot) 24%, var(--pdb-status-positive-bg));
}
.pdb-daterange__zoomout:focus-visible { outline: none; box-shadow: var(--pdb-field-focus-ring); }
/* At real pinch zoom the visible viewport can be narrower than a phone's
   layout viewport. Keep the full month/year legible and both 44px arrows. */
@container date-popover (max-width: 240px) {
  .pdb-daterange__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdb-daterange__month { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}
/* Month / year zoom grids: 3-up tiles, every tile a >=44px touch target. */
.pdb-daterange__zoomgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
.pdb-daterange__cell {
  min-height: 52px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--pdb-text-primary);
  font-family: var(--pdb-font-family); font-size: 15px; cursor: pointer;
}
.pdb-daterange__cell:hover { background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
.pdb-daterange__cell.is-current { border-color: var(--pdb-border-strong); font-weight: 700; }
.pdb-daterange__cell:disabled { opacity: .4; cursor: not-allowed; }
.pdb-daterange__weekdays, .pdb-daterange__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.pdb-daterange__weekday {
  text-align: center; padding: 6px 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pdb-text-secondary);
}
.pdb-daterange__day {
  min-width: 0; min-height: 44px;
  border: none; background: transparent; border-radius: var(--pdb-field-radius);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.pdb-daterange__day:hover { background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
.pdb-daterange__day:disabled,
.pdb-daterange__day:disabled:hover {
  background: transparent;
  color: var(--pdb-text-muted);
  cursor: not-allowed;
  opacity: .5;
}
/* Range wash + endpoints: the datefield focus rgba for the in-range wash, the
   existing action-primary purple for the solid endpoints — no new brand hex. */
.pdb-daterange__day.is-inrange { background: rgba(102,14,174,.18); border-radius: 0; }
.pdb-daterange__day.is-endpoint { background: var(--pdb-action-primary, #5b16a3); color: #fff; font-weight: 700; }
/* Today: a quiet ring so an unselected calendar still has an anchor. */
.pdb-daterange__day.is-today:not(.is-endpoint) { box-shadow: inset 0 0 0 1px var(--pdb-border-strong); font-weight: 700; }
.pdb-daterange__blank { min-width: 0; min-height: 44px; }
.pdb-daterange__foot { display: flex; justify-content: flex-end; padding-top: 6px; }
.pdb-daterange__pop--reporting .pdb-daterange__foot {
  align-items: center; justify-content: flex-end;
  padding: 0 10px 4px;
}
.pdb-daterange__clear {
  min-height: 44px; padding: 0 12px;
  border: none; background: transparent; border-radius: var(--pdb-field-radius);
  color: var(--pdb-action-primary, #5b16a3); font-family: var(--pdb-font-family);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.pdb-daterange__clear:hover { background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
/* Store time footer of the reporting popover (gold replaces grey for this muted note). */
.pdb-daterange__zone { margin-top: 10px; color: var(--pdb-status-gold-text); font-size: var(--pdb-font-size-sm, 13px); font-weight: 600; }
/* ── Reports Date control (PurpDateRangeField variant="report") ──────────────
   ONE bordered 44px control: optional attached ‹ › step buttons around the value, which reads
   "<preset label> · <dates>" (label bold, dates secondary). The fixed variant is the same frame, tinted,
   with no controls. Tokens only, so every surface and dark mode follows. */
.pdb-datepill {
  box-sizing: border-box; display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%;
  height: var(--pdb-field-height-lg);
  border: var(--pdb-field-border-width) solid var(--pdb-field-border); border-radius: var(--pdb-field-radius);
  background: var(--pdb-field-bg); overflow: hidden;
}
.pdb-datepill:focus-within { border-color: var(--pdb-field-border-focus); box-shadow: var(--pdb-field-focus-ring); }
.pdb-datepill.is-disabled { opacity: .6; }
.pdb-datepill__main {
  display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0;
  padding: 0 var(--pdb-field-padding-x); border: 0; background: transparent; color: var(--pdb-text-primary);
  font-family: var(--pdb-font-family); font-size: var(--pdb-font-size-md); line-height: 1.2;
  white-space: nowrap; text-align: left; cursor: pointer;
}
.pdb-datepill__main:focus { outline: none; }
.pdb-datepill__main .pdb-daterange__chevron { margin-left: auto; color: var(--pdb-text-secondary); }
.pdb-datepill__main:disabled { cursor: not-allowed; }
.pdb-datepill .pdb-daterange__glyph { color: var(--pdb-action-primary-bg); }
.pdb-datepill__label { flex: none; font-weight: 700; }
.pdb-datepill__label.is-placeholder { font-weight: 400; color: var(--pdb-text-secondary); }
.pdb-datepill__detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pdb-text-secondary); }
.pdb-datepill__step {
  display: flex; flex: none; align-items: center; justify-content: center; width: 36px; padding: 0; border: 0;
  background: var(--pdb-bg-surface-tinted); color: var(--pdb-action-primary-bg); cursor: pointer;
}
.pdb-datepill__step--back { border-right: 1px solid var(--pdb-border-subtle); }
.pdb-datepill__step--forward { border-left: 1px solid var(--pdb-border-subtle); }
.pdb-datepill__step:hover:not(:disabled) { background: var(--pdb-field-bg-hover); }
.pdb-datepill__step:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: -2px; }
.pdb-datepill__step:disabled { opacity: .4; cursor: not-allowed; }
.pdb-datepill--fixed { background: var(--pdb-bg-surface-tinted); border-color: var(--pdb-border-subtle); }
.pdb-datepill--fixed .pdb-datepill__main { cursor: default; }
@media (pointer: coarse) { .pdb-datepill__step { width: 40px; } }
@container date-popover (max-width: 360px) {
  .pdb-daterange__pop--reporting .pdb-daterange__body { flex-direction: column; }
  .pdb-daterange__quick {
    flex: none; padding: 10px; border-right: 0; border-bottom: 1px solid var(--pdb-border-default);
  }
  .pdb-daterange__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
}

/* Touch calendars need seven 44px-wide days as well as 44px height. A
   phone-width reporting popover stacks its existing shortcuts above the grid. */
@media (pointer: coarse) {
  @container date-popover (max-width: 520px) {
    .pdb-daterange__pop--reporting .pdb-daterange__body { flex-direction: column; }
    .pdb-daterange__quick {
      flex: none; padding: 10px; border-right: 0; border-bottom: 1px solid var(--pdb-border-default);
    }
    .pdb-daterange__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  }
}

/* Mouse-driven screens get the compact popover — roughly half the touch
   footprint (30px days, 28px arrows, 148px quick column). The touch sizes
   above stay the base so phones and tablets keep 44px targets. */
@media (pointer: fine) {
  .pdb-daterange__pop { padding: 8px; }
  .pdb-daterange__pop--reporting { padding: 0; }
  .pdb-daterange__pop--reporting .pdb-daterange__calendar { padding: 8px; }
  .pdb-daterange__quick { flex-basis: 148px; padding: 8px 6px; }
  .pdb-daterange__section-label { margin: 0 4px 4px; font-size: 11px; }
  .pdb-daterange__choice { min-height: 30px; padding: 4px 8px; font-size: var(--pdb-font-size-sm, 13px); }
  .pdb-daterange__nav { min-width: 28px; min-height: 28px; font-size: 16px; }
  .pdb-daterange__zoomout { min-height: 28px; padding: 0 8px; }
  /* 252px mouse popovers have a 234px content box; keep their header inline.
     Only truly narrow visible viewports need the two-row fallback. */
  @container date-popover (min-width: 190px) {
    .pdb-daterange__head { display: flex; }
    .pdb-daterange__month { white-space: nowrap; overflow-wrap: normal; }
  }
  .pdb-daterange__month { font-size: var(--pdb-font-size-sm, 13px); }
  .pdb-daterange__weekday { padding: 4px 0 2px; font-size: 10px; }
  .pdb-daterange__day, .pdb-daterange__blank { min-height: 30px; }
  .pdb-daterange__day { font-size: var(--pdb-font-size-sm, 13px); }
  .pdb-daterange__cell { min-height: 36px; font-size: var(--pdb-font-size-sm, 13px); }
  .pdb-daterange__clear { min-height: 30px; padding: 0 8px; font-size: var(--pdb-font-size-sm, 13px); }
  .pdb-daterange__typed input { min-height: 30px; padding: 4px 8px; font-size: var(--pdb-font-size-sm, 13px); }
}

/* ── Chip ─────────────────────────────────────────────────────────────── */
.pdb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family);
  font-size: var(--pdb-font-size-sm, 13px); font-weight: var(--pdb-font-weight-medium, 500);
  line-height: 1; white-space: nowrap; max-width: 100%;
}
button.pdb-chip, .pdb-chip__body, .pdb-chip__x-btn { font: inherit; cursor: pointer; }
.pdb-chip--interactive { transition: border-color .12s ease, background .12s ease, color .12s ease; }
.pdb-chip--interactive:hover { border-color: var(--pdb-border-focus); background: var(--pdb-field-bg-hover, var(--pdb-field-bg)); }
.pdb-chip--selected {
  background: rgba(102, 14, 174, .10); border-color: rgba(102, 14, 174, .28);
  color: var(--pdb-action-primary, #5b16a3); font-weight: var(--pdb-font-weight-semibold, 600);
}
.pdb-chip:disabled, .pdb-chip__body:disabled, .pdb-chip__x-btn:disabled { opacity: .55; cursor: not-allowed; }
.pdb-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pdb-chip__x, .pdb-chip__x-btn { color: var(--pdb-text-muted, #6b7280); font-size: 14px; line-height: 1; }
/* split body+remove form: the body is a borderless inner button, the × its own */
.pdb-chip:has(.pdb-chip__x-btn) { padding-right: 4px; }
.pdb-chip__body { min-width: 0; flex: 1 1 auto; border: none; background: transparent; color: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.pdb-chip__x-btn { flex: 0 0 auto; border: none; background: transparent; padding: 0 4px; border-radius: 999px; }
.pdb-chip__x-btn:hover:not(:disabled) { color: var(--pdb-action-primary, #5b16a3); }

/* Every ordinary tag shares the purchase-order palette. Filters and status
   chips retain their own tones; strain/cannabinoid tags keep the solid palette. */
.pdb-chip.pdb-chip--tag:not(.pdb-chip--cann) {
  background: var(--pdb-status-gold-bg, #fbf1d9);
  border-color: var(--pdb-status-gold-border, #eccf8a);
  color: var(--pdb-status-gold-text, #6f4d0b);
}
.pdb-chip--tag:not(.pdb-chip--cann) .pdb-chip__body,
.pdb-chip--tag:not(.pdb-chip--cann) .pdb-chip__label,
.pdb-chip--tag:not(.pdb-chip--cann) .pdb-chip__x,
.pdb-chip--tag:not(.pdb-chip--cann) .pdb-chip__x-btn {
  color: inherit;
}
.pdb-chip--tag:not(.pdb-chip--cann).pdb-chip--interactive:is(:hover, :focus-within, :active) {
  background: var(--pdb-status-gold-bg, #fbf1d9);
  border-color: var(--pdb-status-gold-border, #eccf8a);
  filter: brightness(0.96);
}
.pdb-chip--tag.pdb-chip--selected { box-shadow: inset 0 0 0 1px currentColor; }
.pdb-chip.pdb-chip--tag.pdb-chip--cann {
  background: var(--pdb-chip-bg);
  border-color: transparent;
  color: #fff;
}

/* Cannabinoid / strain TAG — THE one coloured tag, matching the approved
   strain-type tabs (.pw-strain-tab): a SOLID colour pill with WHITE text. The
   colour is passed in via the --pdb-chip-bg custom property from the design-brain
   colour map (tokens.ts → tagColor/cannabinoidColor/strainTypeColor). No border
   (the solid fill carries it); semibold white reads on every brand colour incl.
   the burgundy CBN (#8B4357). Read + edit surfaces share this one rule. */
.pdb-chip--cann {
  background: var(--pdb-chip-bg, var(--pdb-field-bg, #fff));
  color: #fff;
  border-color: transparent;
  font-weight: var(--pdb-font-weight-semibold, 600);
}
/* Edit-mode (removable) coloured tags wrap the label in .pdb-chip__body
   (color: inherit). Hard-pin the label white at (0,2,0) so the solid colour pill
   reads identically to read mode — NO auto-contrast, the colour never wins a
   single-class rule over the inherited #fff. The label/body MUST always be white
   on a cannabinoid/strain fill, edit and read alike. */
.pdb-chip--cann .pdb-chip__body,
.pdb-chip--cann .pdb-chip__label {
  color: #fff;
}
/* A removable coloured tag is .pdb-chip--interactive, whose generic hover rule
   (.pdb-chip--interactive:hover, 0,2,0) would otherwise paint the chip the WHITE
   field-hover bg — winning over .pdb-chip--cann (0,1,0) and flashing the colour
   away on hover/tap. Pin the cann fill through every interactive state (hover,
   focus-within, active) so the colour NEVER goes white; deepen it a touch on
   hover/active purely for affordance, keeping the white text. */
.pdb-chip--cann.pdb-chip--interactive:hover,
.pdb-chip--cann.pdb-chip--interactive:focus-within,
.pdb-chip--cann.pdb-chip--interactive:active {
  background: var(--pdb-chip-bg, var(--pdb-field-bg, #fff));
  border-color: transparent;
  filter: brightness(0.94);
}
/* The trailing × on a removable coloured tag must read on the solid fill too. */
.pdb-chip--cann .pdb-chip__x,
.pdb-chip--cann .pdb-chip__x-btn {
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
}
.pdb-chip--cann .pdb-chip__x-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* ── Selectable card / list row ───────────────────────────────────────── */
.pdb-selectable-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--pdb-radius-md, 10px);
  border: 1px solid var(--pdb-border-default); background: var(--pdb-field-bg, #fff);
  color: var(--pdb-text-primary); font-family: var(--pdb-font-family); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pdb-selectable-card:hover:not(.is-disabled) { border-color: var(--pdb-border-focus); }
.pdb-selectable-card:focus-visible { outline: none; box-shadow: var(--pdb-field-focus-ring); }
.pdb-selectable-card.is-selected {
  border-color: var(--pdb-action-primary-bg); background: rgba(102, 14, 174, .06);
  box-shadow: 0 0 0 1px var(--pdb-action-primary-bg);
}
.pdb-selectable-card.is-disabled { opacity: .55; cursor: not-allowed; }
.pdb-selectable-card__leading { flex: none; display: inline-flex; align-items: center; }
.pdb-selectable-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pdb-selectable-card__title { font-size: var(--pdb-font-size-md, 14px); font-weight: var(--pdb-font-weight-semibold, 600); }
.pdb-selectable-card__desc { font-size: var(--pdb-font-size-sm, 13px); color: var(--pdb-text-muted, #6b7280); }
.pdb-selectable-card__trailing { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--pdb-text-muted, #6b7280); }

/* ── Modal (centered dialog) ──────────────────────────────────────────── */
.pdb-modal__backdrop {
  position: fixed; inset: 0; z-index: 3000;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: max(var(--pdb-modal-edge, 24px), env(safe-area-inset-top, 0px)) max(var(--pdb-modal-edge, 24px), env(safe-area-inset-right, 0px)) max(var(--pdb-modal-edge, 24px), env(safe-area-inset-bottom, 0px)) max(var(--pdb-modal-edge, 24px), env(safe-area-inset-left, 0px));
  background: rgba(15, 12, 24, 0.45); backdrop-filter: blur(2px);
}
.pdb-modal {
  box-sizing: border-box;
  min-width: 0;
  width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--pdb-bg-surface, #fff); color: var(--pdb-text-primary);
  border-radius: var(--pdb-radius-lg, 14px);
  box-shadow: 0 30px 60px rgba(15, 12, 24, .32), 0 4px 12px rgba(15, 12, 24, .18);
  /* Reserve edge room so focusing a field near the bottom doesn't yank the panel. */
  scroll-padding: 20px 0; overscroll-behavior: contain;
}
.pdb-modal--sm { max-width: 440px; }
.pdb-modal--md { max-width: 560px; }
.pdb-modal--lg { max-width: 640px; }
.pdb-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: var(--pdb-modal-header-block, 20px) var(--pdb-modal-inline, 24px) var(--pdb-modal-header-end, 14px); border-bottom: 1px solid var(--pdb-border-subtle);
  flex: none;
}
.pdb-modal__header > :first-child { min-width: 0; overflow-wrap: anywhere; }
.pdb-modal__kicker {
  font-size: var(--pdb-font-size-xs, 12px); font-weight: var(--pdb-font-weight-semibold, 650);
  letter-spacing: .06em; text-transform: uppercase; color: var(--pdb-action-primary, #5b16a3);
}
.pdb-modal__title { margin: 4px 0 0; font-size: 22px; letter-spacing: -.02em; }
.pdb-modal__header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Opt-in wide variant for management workbenches (e.g. the taxonomy manager) that need more than
   the standard centered-dialog width. Still a PurpModal — same chrome, scroll-lock, escape stack. */
.pdb-modal--wide { max-width: 1180px; }
.pdb-modal__body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: var(--pdb-modal-body-block, 20px) var(--pdb-modal-inline, 24px); }
.pdb-modal__body .pdb-input,
.pdb-modal__body .pdb-select,
.pdb-modal__body .pdb-textarea { scroll-margin-block: 20px; }
.pdb-modal__footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--pdb-modal-footer-block, 14px) var(--pdb-modal-inline, 24px) var(--pdb-modal-footer-end, 18px); border-top: 1px solid var(--pdb-border-subtle); flex: none;
}

/* Compact dialogs spend the available space on content; safe areas remain outside. */
@media (max-width: 480px), (max-height: 500px) and (pointer: coarse) {
  .pdb-modal__backdrop { --pdb-modal-edge: 8px; }
  .purp-confirm-backdrop { --purp-confirm-edge: 8px; }
  .pdb-modal {
    --pdb-modal-inline: 12px;
    --pdb-modal-header-block: 8px;
    --pdb-modal-header-end: 8px;
    --pdb-modal-body-block: 12px;
    --pdb-modal-footer-block: 8px;
    --pdb-modal-footer-end: 8px;
  }
  .pdb-modal__title { font-size: 18px; line-height: 1.2; }
  .purp-workspace-confirm { padding: 16px; }
}

/* 3g: a calm status chip — sentence case, medium weight, soft tint.
   Not a shouty uppercase-800 block. The dot carries the accent. */
.pdb-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: var(--pdb-font-size-xs); font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.pdb-status-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pdb-status-badge--positive { background: var(--pdb-status-positive-bg); border-color: var(--pdb-status-positive-border); color: var(--pdb-status-positive-text); }
.pdb-status-badge--positive .pdb-status-badge__dot { background: var(--pdb-status-positive-dot); }
.pdb-status-badge--warning { background: var(--pdb-status-gold-bg); border-color: var(--pdb-status-gold-border); color: var(--pdb-status-gold-text); }
.pdb-status-badge--warning .pdb-status-badge__dot { background: var(--pdb-status-gold-dot); }
.pdb-status-badge--danger { background: var(--pdb-status-danger-bg); border-color: var(--pdb-status-danger-border); color: var(--pdb-status-danger-text); }
.pdb-status-badge--danger .pdb-status-badge__dot { background: var(--pdb-status-danger-dot); }
.pdb-status-badge--info { background: var(--pdb-status-info-bg); border-color: var(--pdb-status-info-border); color: var(--pdb-status-info-text); }
.pdb-status-badge--info .pdb-status-badge__dot { background: var(--pdb-status-info-dot); }
.pdb-status-badge--neutral { background: var(--pdb-status-gold-bg); border-color: var(--pdb-status-gold-border); color: var(--pdb-status-gold-text); }
.pdb-status-badge--neutral .pdb-status-badge__dot { background: var(--pdb-status-gold-dot); }
.pdb-status-badge--rose { background: var(--pdb-status-rose-bg); border-color: var(--pdb-status-rose-border); color: var(--pdb-status-rose-text); }
.pdb-status-badge--rose .pdb-status-badge__dot { background: var(--pdb-status-rose-dot); }
.pdb-status-badge--brand { background: var(--pdb-status-brand-bg); border-color: var(--pdb-status-brand-border); color: var(--pdb-status-brand-text); }
/* brand-soft — the quiet brand chip: lavender ground, brand-purple text. Used for
   identity chips (variant, category) that sit beside a status chip and must read
   as the same object at the same size. */
.pdb-status-badge--brand-soft { background: var(--pdb-lavender-100); border-color: var(--pdb-lavender-200); color: var(--pdb-purple-700); }
.pdb-status-badge--brand-soft .pdb-status-badge__dot { background: var(--pdb-purp-primary); }
.pdb-status-badge--brand .pdb-status-badge__dot { background: var(--pdb-status-brand-dot); }
.pdb-status-badge--gold { background: var(--pdb-status-gold-bg); border-color: var(--pdb-status-gold-border); color: var(--pdb-status-gold-text); }
.pdb-status-badge--gold .pdb-status-badge__dot { background: var(--pdb-status-gold-dot); }

.pdb-card { padding: var(--pdb-card-padding-md); border-radius: var(--pdb-card-radius); border: var(--pdb-card-border-width) solid var(--pdb-card-border); background: var(--pdb-bg-surface); box-shadow: var(--pdb-card-shadow); }
/* PurpCard carries both .pdb-card and .pdb-surface--<finish>. The card base is
   declared after the surface finishes, so an equal-specificity background here
   used to flatten tinted/brand/aurora/glass cards back to white while leaving
   their inverse text in place. Reassert each requested finish on the combined
   component selector so finish="brand" cannot produce white-on-white content. */
.pdb-card.pdb-surface--plain { background: var(--pdb-bg-surface); }
.pdb-card.pdb-surface--tinted { background: var(--pdb-bg-surface-tinted); }
.pdb-card.pdb-surface--brand {
  background: var(--pdb-surface-brand-bg);
  border-color: var(--pdb-surface-brand-border);
  color: var(--pdb-surface-brand-text);
}
.pdb-card.pdb-surface--aurora {
  background: var(--pdb-surface-aurora-bg);
  border-color: var(--pdb-surface-aurora-border);
  box-shadow: var(--pdb-surface-aurora-shadow), inset 0 1px 0 var(--pdb-surface-aurora-inner-border);
  color: var(--pdb-surface-brand-text);
}
.pdb-card.pdb-surface--glass {
  background: var(--pdb-glass-bg);
  border-color: var(--pdb-glass-border);
  box-shadow: var(--pdb-glass-shadow), inset 0 1px 0 var(--pdb-glass-highlight);
  color: var(--pdb-surface-brand-text);
  backdrop-filter: blur(14px);
}
.pdb-card--compact { padding: var(--pdb-card-padding-sm); }
.pdb-card--comfortable { padding: var(--pdb-card-padding-lg); }
.pdb-card--interactive { transition: box-shadow .16s ease, transform .16s ease; cursor: pointer; }
.pdb-card--interactive:hover { box-shadow: var(--pdb-card-shadow-hover); transform: translateY(-1px); }

.pdb-metric-card { display: flex; flex-direction: column; gap: 8px; padding: var(--pdb-card-padding-lg); }
.pdb-metric-card__eyebrow { font-size: var(--pdb-premium-eyebrow-size); font-weight: var(--pdb-premium-eyebrow-weight); letter-spacing: var(--pdb-premium-eyebrow-letter-spacing); text-transform: uppercase; opacity: .82; }
.pdb-metric-card__value { font-size: var(--pdb-premium-value-size-md); font-weight: var(--pdb-premium-value-weight); line-height: var(--pdb-premium-value-line-height); font-variant-numeric: tabular-nums; }
.pdb-metric-card__subtitle { font-size: var(--pdb-premium-subtitle-size); font-weight: var(--pdb-premium-subtitle-weight); opacity: .78; }
.pdb-metric-card__secondary { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.pdb-metric-card__secondary-value { font-size: var(--pdb-premium-value-size-sm); font-weight: var(--pdb-premium-value-weight); font-variant-numeric: tabular-nums; }
.pdb-metric-card__secondary-label { font-size: var(--pdb-font-size-xs); opacity: .72; text-transform: uppercase; letter-spacing: .08em; }
.pdb-metric-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---- 3d: polymorphic surface tones, status tiles, disclosure, rich tabs ---- */
/* Card tone tint. positive = PURP LAVENDER (--pdb-status-positive-*), never green. */
.pdb-card--tone-positive { background: var(--pdb-status-positive-bg); border-color: var(--pdb-status-positive-border); color: var(--pdb-status-positive-text); }
.pdb-card--tone-warning { background: var(--pdb-status-warning-bg); border-color: var(--pdb-status-warning-border); }
.pdb-card--tone-danger { background: var(--pdb-status-danger-bg); border-color: var(--pdb-status-danger-border); }
.pdb-card--tone-info { background: var(--pdb-status-info-bg); border-color: var(--pdb-status-info-border); }
.pdb-card--tone-neutral { background: var(--pdb-status-neutral-bg); border-color: var(--pdb-status-neutral-border); }
.pdb-card--tone-brand { background: var(--pdb-surface-brand-bg); border-color: var(--pdb-surface-brand-border); color: var(--pdb-surface-brand-text); }

.pdb-status-tile { display: flex; flex-direction: column; gap: var(--pdb-space-sm); text-align: left; }
.pdb-status-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pdb-space-md); }
.pdb-status-tile__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-status-tile__eyebrow { font-size: var(--pdb-premium-eyebrow-size); font-weight: var(--pdb-premium-eyebrow-weight); letter-spacing: var(--pdb-premium-eyebrow-letter-spacing); text-transform: uppercase; opacity: .8; }
.pdb-status-tile__title { font-size: var(--pdb-font-size-md); font-weight: var(--pdb-font-weight-semibold); }
.pdb-status-tile__subtitle { font-size: var(--pdb-font-size-sm); color: var(--pdb-text-secondary); margin: 0; }

.pdb-disclosure { padding: 0; overflow: hidden; }
.pdb-disclosure > .pdb-disclosure__summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pdb-space-md); padding: var(--pdb-card-padding-md); }
.pdb-disclosure > .pdb-disclosure__summary::-webkit-details-marker { display: none; }
.pdb-disclosure__summary-main { display: flex; flex: 1 1 160px; flex-direction: column; gap: 4px; min-width: 0; }
.pdb-disclosure__meta { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pdb-disclosure[open] > .pdb-disclosure__summary { border-bottom: var(--pdb-card-border-width) solid var(--pdb-border-subtle); }
.pdb-disclosure__body { padding: var(--pdb-card-padding-md); display: flex; flex-direction: column; gap: var(--pdb-space-md); }

/* layout-only: a responsive strip of tiles/cards (no colour — tone lives on the tiles). */
.pdb-tile-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pdb-space-md); }
/* layout/text utilities so migrated pages need no local chrome classes. */
.pdb-stack { display: flex; flex-direction: column; gap: var(--pdb-space-sm); }
.pdb-inline-error { color: var(--pdb-status-danger-text); font-size: var(--pdb-font-size-sm); margin: 0; }

.pdb-tab__label { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.pdb-tab__sublabel { font-size: var(--pdb-font-size-xs); color: var(--pdb-status-gold-text); font-weight: var(--pdb-font-weight-regular); }
.pdb-tab__meta { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: var(--pdb-font-size-xs); font-weight: var(--pdb-font-weight-medium); background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); border: 1px solid var(--pdb-status-gold-border); }
.pdb-tab--tone-positive .pdb-tab__meta { background: var(--pdb-status-positive-bg); color: var(--pdb-status-positive-text); border-color: var(--pdb-status-positive-border); }
.pdb-tab--tone-gold .pdb-tab__meta { background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); border-color: var(--pdb-status-gold-border); }
.pdb-tab--tone-rose .pdb-tab__meta { background: var(--pdb-status-rose-bg); color: var(--pdb-status-rose-text); border-color: var(--pdb-status-rose-border); }
.pdb-tab--tone-warning .pdb-tab__meta { background: var(--pdb-status-gold-bg); color: var(--pdb-status-gold-text); border-color: var(--pdb-status-gold-border); }
.pdb-tab--tone-danger .pdb-tab__meta { background: var(--pdb-status-danger-bg); color: var(--pdb-status-danger-text); border-color: var(--pdb-status-danger-border); }
.pdb-tab--tone-info .pdb-tab__meta { background: var(--pdb-status-info-bg); color: var(--pdb-status-info-text); border-color: var(--pdb-status-info-border); }
.pdb-tab:disabled { opacity: .5; cursor: not-allowed; }

/* ---- 3f/3g: Company/Locations layout + elegance (shared, tokenized) ---- */

/* Metric tiles inside a TRUE brand surface (e.g. Integrations detail
   header) stay translucent glass on dark. The operator hero is NOT brand
   dark anymore (see .pdb-hero below) — restraint over flood. */
.pdb-surface--brand .pdb-metric-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--pdb-surface-brand-text);
  padding: var(--pdb-space-md) var(--pdb-space-lg);
}
.pdb-surface--brand .pdb-metric-card .pdb-metric-card__eyebrow { color: var(--pdb-surface-brand-text-muted); opacity: 1; }
.pdb-surface--brand .pdb-metric-card .pdb-metric-card__subtitle { color: var(--pdb-surface-brand-text-muted); opacity: 1; }

/* 3g: the operator hero is LIGHT, calm, Apple-restrained — a quiet panel,
   not a saturated dark-purple banner. PURP shows only as the small eyebrow
   accent. (.pdb-hero is declared after .pdb-surface--brand so it wins for
   the hero element while genuine brand surfaces elsewhere are untouched.) */
.pdb-hero {
  display: flex; flex-direction: column; gap: var(--pdb-space-md);
  padding: var(--pdb-space-lg) var(--pdb-space-xl);
  background: var(--pdb-bg-surface);
  color: var(--pdb-text-primary);
  border: 1px solid var(--pdb-border-subtle);
  box-shadow: none;
}
.pdb-hero h3 { margin: 0; font-size: var(--pdb-font-size-xl); font-weight: var(--pdb-font-weight-semibold); color: var(--pdb-text-primary); }
/* 3i: hero eyebrow is a quiet neutral label too — consistent with the
   site-wide calm; PURP is reserved for real actions, not micro-labels. */
.pdb-hero .section-kicker,
.pdb-hero .pdb-page-section__eyebrow { color: var(--pdb-text-muted); }
.pdb-hero p { margin: 0; color: var(--pdb-text-secondary); font-size: var(--pdb-font-size-sm); }

/* Hero metrics: flat, borderless, hairline-separated — number + label,
   nothing boxy. Calm by default; the value tokens were already softened. */
.pdb-hero .pdb-metric-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--pdb-space-sm) var(--pdb-space-lg);
  border-left: 1px solid var(--pdb-border-subtle);
  border-radius: 0;
}
.pdb-hero .pdb-tile-strip > :first-child .pdb-metric-card,
.pdb-hero .pdb-metric-card:first-child { border-left: none; }
.pdb-hero .pdb-metric-card .pdb-metric-card__value { color: var(--pdb-text-primary); }
.pdb-hero .pdb-metric-card .pdb-metric-card__eyebrow { color: var(--pdb-text-muted); opacity: 1; }
.pdb-hero .pdb-metric-card .pdb-metric-card__subtitle { color: var(--pdb-text-secondary); opacity: 1; }
.pdb-hero .pdb-metric-card.pdb-card--interactive:hover { background: var(--pdb-bg-surface-tinted); }

/* Hero metric row: even columns, one clean row on desktop, graceful wrap. */
.pdb-hero .pdb-tile-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }

/* Readiness grid: 6 tiles in EVEN rows — never the 5+1 hole. Compact,
   consistent height. 2 cols (narrow) → 3 cols → 6 cols (wide). */
.pdb-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pdb-space-sm); grid-auto-rows: 1fr; }
@media (min-width: 720px) { .pdb-readiness-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pdb-readiness-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 3g: minimal readiness tiles. NOT six filled lavender boxes — a quiet
   near-white cell with a hairline, and the status as a plain "● Ready"
   (no filled pill). The tone is carried by the small dot only. */
.pdb-readiness-grid .pdb-status-tile {
  gap: 6px;
  padding: var(--pdb-space-md);
  background: var(--pdb-bg-surface);
  border: 1px solid var(--pdb-border-subtle);
  box-shadow: none;
  color: var(--pdb-text-primary);
}
.pdb-readiness-grid .pdb-status-tile .pdb-status-tile__head { flex-direction: column; align-items: flex-start; gap: 6px; }
.pdb-readiness-grid .pdb-status-tile .pdb-status-tile__title { font-size: var(--pdb-font-size-sm); font-weight: var(--pdb-font-weight-semibold); }
.pdb-readiness-grid .pdb-status-tile .pdb-status-tile__subtitle { font-size: var(--pdb-font-size-xs); color: var(--pdb-text-muted); }
/* status reads as "● Ready" — flat, no filled pill, just dot + quiet text */
.pdb-readiness-grid .pdb-status-tile .pdb-status-badge {
  background: transparent;
  border-color: transparent;
  padding: 0;
  font-weight: var(--pdb-font-weight-semibold);
  color: var(--pdb-text-secondary);
}

/* ---- 4a: the shared Admin PAGE shell. Every page inherits this — no
   page-local page chrome (headers, toolbars, sections, grids, spacing). ---- */
.pdb-page { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: var(--pdb-page-gap, var(--pdb-space-xl)); width: 100%; max-width: 1200px; margin: 0 auto; padding-block: var(--pdb-page-padding-block, var(--pdb-space-xl)); padding-inline: var(--pdb-page-padding-inline, var(--pdb-space-lg)); background: var(--pdb-bg-page); color: var(--pdb-text-primary); font-family: var(--pdb-font-family); }
.pdb-page--compact { gap: var(--pdb-page-gap, var(--pdb-space-lg)); padding-block: var(--pdb-page-padding-block, var(--pdb-space-lg)); padding-inline: var(--pdb-page-padding-inline, var(--pdb-space-lg)); }
.pdb-page--comfortable { gap: var(--pdb-page-gap, var(--pdb-space-2xl)); padding-block: var(--pdb-page-padding-block, var(--pdb-space-2xl)); padding-inline: var(--pdb-page-padding-inline, var(--pdb-space-xl)); }
.pdb-page--full { max-width: none; }

.pdb-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pdb-space-lg); flex-wrap: wrap; }
.pdb-page-header--brand { padding: var(--pdb-card-padding-lg); border-radius: var(--pdb-card-radius); }
.pdb-page-header__lead { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdb-page-header__eyebrow { font-size: var(--pdb-premium-eyebrow-size); font-weight: var(--pdb-premium-eyebrow-weight); letter-spacing: var(--pdb-premium-eyebrow-letter-spacing); text-transform: uppercase; color: var(--pdb-text-secondary); }
.pdb-page-header__title-row { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }
.pdb-page-header__lead, .pdb-page-header__status { min-width: 0; max-width: 100%; }
.pdb-page-header__title, .pdb-page-header__subtitle, .pdb-page-section__title, .pdb-page-section__desc { overflow-wrap: anywhere; }
.pdb-page-header__title { font-size: var(--pdb-font-size-2xl); font-weight: var(--pdb-font-weight-bold); margin: 0; color: var(--pdb-text-primary); }
.pdb-page-header__subtitle { font-size: var(--pdb-font-size-sm); color: var(--pdb-text-secondary); margin: 4px 0 0; max-width: 70ch; }
.pdb-page-header__actions { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }

.pdb-page-toolbar { display: flex; align-items: center; gap: var(--pdb-space-md); flex-wrap: wrap; }
.pdb-page-toolbar__search { flex: 0 1 280px; min-width: min(100%, 160px); }
.pdb-page-toolbar__filters { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }
.pdb-page-toolbar__filters > :is(.pdb-select, .pdb-input, .pdb-form-field) { flex: 0 1 160px; width: min(100%, 160px); min-width: 0; }
.pdb-page-toolbar__spacer { flex: 1 1 auto; }
.pdb-page-toolbar__view, .pdb-page-toolbar__actions { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }
.pdb-page-toolbar > *, .pdb-page-header__actions { min-width: 0; max-width: 100%; }
/* Reports keep primary actions in one position regardless of filter count. */
.pdb-page-toolbar--report { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pdb-space-sm); min-width: 0; min-height: var(--pdb-button-height-md); }
.pdb-page-toolbar--report .pdb-page-toolbar__status { grid-column: 1; grid-row: 1; min-width: 0; color: var(--pdb-text-secondary); font-size: var(--pdb-font-size-sm); display: flex; align-items: center; gap: var(--pdb-space-sm); }
.pdb-page-toolbar--report .pdb-page-toolbar__status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-page-toolbar--report .pdb-page-toolbar__status > .pdb-button { flex: none; }
.pdb-page-toolbar--report .pdb-page-toolbar__spacer { display: none; }
.pdb-page-toolbar--report .pdb-page-toolbar__actions { grid-column: 2; grid-row: 1; justify-self: end; flex-wrap: nowrap; align-items: center; }
.pdb-page-toolbar--report .pdb-page-toolbar__actions > * { flex: 0 0 auto; }
.pdb-page-toolbar--report .pdb-page-toolbar__actions :is(.pdb-button, .pdb-action-menu__trigger) { height: var(--pdb-button-height-md); min-height: var(--pdb-button-height-md); white-space: nowrap; }
/* Report filter row: ONE line, always (useFitRow). Controls and their text scale down together through
   --pdb-fit-scale until the row fits; a control never gets narrower than its token minimum x --pdb-fit-floor
   (132px x 0.79 ~ 104px) and its text never smaller than --pdb-fit-control-font-min. Below that the row stays
   one line and scrolls inside itself (data-fit="scroll"), fading only the edge with more. The 4px padding,
   cancelled by the margin, keeps the controls' focus rings inside the scroll box. Heights never change. */
.pdb-page-toolbar--report .pdb-page-toolbar__filters {
  grid-column: 1 / -1; grid-row: 2; align-items: end; min-width: 0;
  --pdb-fit-floor: 0.79;
  flex-wrap: nowrap; gap: calc(var(--pdb-space-sm) * var(--pdb-fit-scale, 1));
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  padding: 4px; margin: -4px;
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters[data-fit='scroll'] {
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, black 0 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, black 0 calc(100% - 34px), transparent 100%);
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters[data-fit='scroll']::-webkit-scrollbar { display: none; }
.pdb-page-toolbar--report .pdb-page-toolbar__filters[data-fit-edge='middle'] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 34px calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 34px calc(100% - 34px), transparent 100%);
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters[data-fit-edge='end'] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 34px 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 34px 100%);
}
.pdb-page-toolbar--report:not(:has(.pdb-page-toolbar__actions, .pdb-page-toolbar__status)) { min-height: 0; }
.pdb-page-toolbar--report:not(:has(.pdb-page-toolbar__actions, .pdb-page-toolbar__status)) .pdb-page-toolbar__filters { grid-row: 1; }
/* Every field sits between the shared min/max tokens (search and date fields a little wider) and grows
   evenly while there is room; its minimum follows the fit scale. Labels and values stay on one line. */
.pdb-page-toolbar--report .pdb-page-toolbar__filters > :is(.pdb-form-field, .inv-ms) {
  flex: 1 1 calc(var(--pdb-report-filter-min) * var(--pdb-fit-scale, 1)); width: auto;
  min-width: calc(var(--pdb-report-filter-min) * var(--pdb-fit-scale, 1)); max-width: var(--pdb-report-filter-max);
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters > :is(.inv-filter-bar__search, .pdb-form-field:has(.pdb-daterange)) {
  flex: 1.25 1 calc(var(--pdb-report-filter-wide-min) * var(--pdb-fit-scale, 1)); width: auto;
  min-width: calc(var(--pdb-report-filter-wide-min) * var(--pdb-fit-scale, 1)); max-width: var(--pdb-report-filter-wide-max);
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters .pdb-form-field__label { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-page-toolbar--report .pdb-page-toolbar__filters :is(.pdb-select, .pdb-input) { text-overflow: ellipsis; }
.pdb-page-toolbar--report .pdb-page-toolbar__filters :is(.pdb-select, .pdb-input, .pdb-daterange, .inv-ms__trigger) {
  font-size: max(var(--pdb-fit-control-font-min), calc(var(--pdb-font-size-md) * var(--pdb-fit-scale, 1)));
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-filter-bar__search input {
  font-size: max(var(--pdb-fit-control-font-min), calc(13px * var(--pdb-fit-scale, 1)));
}
/* The multi-select trigger (Category, Brand…) wears the select field's exact frame: border, radius, height,
   weight, chevron and focus ring all come from the same field tokens as .pdb-select. Scoped to the report
   filter row, so every other multi-select keeps its own look. */
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms__trigger {
  min-height: var(--pdb-field-height-md);
  padding: var(--pdb-field-padding-y) 36px var(--pdb-field-padding-y) var(--pdb-field-padding-x);
  border: var(--pdb-field-border-width) solid var(--pdb-field-border);
  border-radius: var(--pdb-field-radius);
  background-color: var(--pdb-field-bg);
  background-image: var(--pdb-field-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  color: var(--pdb-text-primary);
  font-family: var(--pdb-font-family);
  font-weight: 400;
}
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms__chevron { display: none; }
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms__trigger:hover:not(:disabled) { border-color: var(--pdb-field-border-hover); background-color: var(--pdb-field-bg-hover); }
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms__trigger:focus,
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms.is-open .inv-ms__trigger { outline: none; border-color: var(--pdb-field-border-focus); box-shadow: var(--pdb-field-focus-ring); }
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms.has-selection .inv-ms__trigger { border-color: var(--pdb-field-border); background-color: var(--pdb-field-bg); color: var(--pdb-text-primary); }
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms.has-selection .inv-ms__trigger:hover:not(:disabled) { border-color: var(--pdb-field-border-hover); background-color: var(--pdb-field-bg-hover); }
.pdb-page-toolbar--report .pdb-page-toolbar__filters .inv-ms__trigger:disabled { background-color: var(--pdb-field-bg-disabled); opacity: .7; }
@media (pointer: coarse) {
  .pdb-page-toolbar--report .pdb-page-toolbar__actions > .pdb-button,
  .pdb-page-toolbar--report .pdb-page-toolbar__actions .pdb-action-menu__trigger,
  .pdb-page-toolbar--report .pdb-page-toolbar__filters :is(.pdb-select, .pdb-input, .inv-ms__trigger, .inv-filter-bar__search input, .pdb-daterange) { min-height: var(--pdb-button-height-lg); }
  .pdb-page-toolbar--report > .pdb-page-toolbar__search .inv-filter-bar__search input { min-height: var(--pdb-button-height-lg); }
}
@media (max-width: 600px) {
  .pdb-page-toolbar--report .pdb-page-toolbar__status { grid-column: 1 / -1; grid-row: 2; }
  .pdb-page-toolbar--report:has(.pdb-page-toolbar__status) .pdb-page-toolbar__filters { grid-row: 3; }
}
/* Report search slot (a toolbar with filters and no inline status/actions, e.g. Reports › Inventory): on desktops and
   tablets the search leads the filter row on the SAME line at a compact width and the filter row fits the rest; on a
   phone the search takes its own full-width line above the one-line filter row, so the filters keep their readable
   size instead of scrolling. */
.pdb-page-toolbar--report:has(> .pdb-page-toolbar__search):not(:has(> .pdb-page-toolbar__status, > .pdb-page-toolbar__actions)) {
  grid-template-columns: minmax(0, var(--pdb-report-search-max)) minmax(0, 1fr);
}
.pdb-page-toolbar--report:not(:has(> .pdb-page-toolbar__status, > .pdb-page-toolbar__actions)) > .pdb-page-toolbar__search { grid-column: 1; grid-row: 1; min-width: 0; }
.pdb-page-toolbar--report:has(> .pdb-page-toolbar__search):not(:has(> .pdb-page-toolbar__status, > .pdb-page-toolbar__actions)) > .pdb-page-toolbar__filters { grid-column: 2; grid-row: 1; }
.pdb-page-toolbar--report > .pdb-page-toolbar__search > * { width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .pdb-page-toolbar--report:has(> .pdb-page-toolbar__search):not(:has(> .pdb-page-toolbar__status, > .pdb-page-toolbar__actions)) { grid-template-columns: minmax(0, 1fr); }
  .pdb-page-toolbar--report:has(> .pdb-page-toolbar__search):not(:has(> .pdb-page-toolbar__status, > .pdb-page-toolbar__actions)) > .pdb-page-toolbar__filters { grid-column: 1; grid-row: 2; }
}
/* Page-action host (PurpPageActionHost): ONE fixed, right-aligned row for a page's primary status and
   actions (Export…), portaled from toolbars that opt in with placement="page-actions". Its
   height is reserved with the shared button tokens so lazy panels cannot shift the page. Status always
   precedes actions across toolbars (order), and actions use the same 34px / 44px-touch sizing as the
   inline report toolbar. On phones the status drops to its own row below the actions. */
.pdb-page-action-host {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--pdb-space-sm); width: 100%; min-width: 0; min-height: var(--pdb-button-height-md);
}
.pdb-page-action-host__status {
  order: 0; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--pdb-space-sm);
  color: var(--pdb-text-secondary); font-size: var(--pdb-font-size-sm);
}
.pdb-page-action-host__status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-page-action-host__status > .pdb-button { flex: none; }
.pdb-page-action-host__actions { order: 1; flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--pdb-space-sm); }
/* The status + actions wrapper is layout-neutral in the plain host (its children stay the host's flex items);
   the scope bar below makes it the right-hand group. */
.pdb-page-action-host__end { display: contents; }
.pdb-page-action-host__actions > * { flex: 0 0 auto; }
.pdb-page-action-host__actions :is(.pdb-button, .pdb-action-menu__trigger) { height: var(--pdb-button-height-md); min-height: var(--pdb-button-height-md); white-space: nowrap; }
@media (pointer: coarse) {
  .pdb-page-action-host { min-height: var(--pdb-button-height-lg); }
  .pdb-page-action-host__actions > .pdb-button,
  .pdb-page-action-host__actions .pdb-action-menu__trigger { min-height: var(--pdb-button-height-lg); }
}
@media (max-width: 600px) {
  .pdb-page-action-host__status { order: 2; flex: 1 1 100%; }
}
/* Scope bar (variant="scope-bar", owner 2026-10-07): ONE bar for every Reports surface. Scope controls (Store, then
   Date with Compare built in) on the left with no visible labels; "Updated <time>" and the icon-only Export
   right-aligned in the same row via margin-left:auto. No Refresh: pages update themselves. The height is reserved, so a loading panel never
   shifts the page. Controls are the 44px touch size at every pointer, matching the approved boards. It NEVER wraps or
   stacks, at any width (owner, 2026-10-07): scopeBarFit.ts measures it and applies the compaction levels below. */
.pdb-page-action-host--scope-bar {
  flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px 14px; padding: 12px 14px;
  min-height: var(--pdb-scope-bar-min-height);
  border: 1px solid var(--pdb-border-default); border-radius: var(--pdb-card-radius);
  background: var(--pdb-bg-surface-raised); box-shadow: 0 8px 28px rgba(var(--pdb-shadow-rgb), .08);
}
.pdb-page-action-host--optional:empty { display: none; }
.pdb-page-action-host__scope { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; min-width: 0; max-width: 100%; }
/* The scope group takes the remaining width on the one row; Updated · actions stay right-aligned beside it. */
.pdb-page-action-host--scope-bar .pdb-page-action-host__scope { flex: 1 1 0%; flex-wrap: nowrap; align-items: center; }
.pdb-page-action-host--scope-bar .pdb-page-action-host__scope > * { flex: 0 0 auto; }
.pdb-page-action-host--scope-bar .pdb-page-action-host__end {
  display: flex; flex: 0 0 auto; align-items: center; gap: var(--pdb-space-md); margin-left: auto;
  min-height: var(--pdb-field-height-lg);
}
.pdb-page-action-host--scope-bar .pdb-page-action-host__actions { gap: var(--pdb-space-md); }
.pdb-page-action-host--scope-bar .pdb-page-action-host__status {
  order: 0; flex: 0 1 auto; justify-content: flex-start; color: var(--pdb-status-gold-text); font-weight: 600; white-space: nowrap;
}
.pdb-page-action-host--scope-bar .pdb-page-action-host__actions :is(.pdb-button, .pdb-action-menu__trigger) {
  height: var(--pdb-button-height-lg); min-height: var(--pdb-button-height-lg);
}
.pdb-page-toolbar__scope { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; min-width: 0; max-width: 100%; }
.pdb-page-toolbar--report:has(.pdb-page-toolbar__scope) .pdb-page-toolbar__scope { grid-column: 1 / -1; grid-row: 1; }
.pdb-page-toolbar--report:has(.pdb-page-toolbar__scope) .pdb-page-toolbar__status,
.pdb-page-toolbar--report:has(.pdb-page-toolbar__scope) .pdb-page-toolbar__actions { grid-row: 2; }
.pdb-page-toolbar--report:has(.pdb-page-toolbar__scope) .pdb-page-toolbar__filters { grid-row: 3; }
/* A scope field: ONE control. Its name stays for assistive technology only (owner, 2026-10-07: no STORE / DATE /
   COMPARE labels); an addon such as the "Added by P" badge stays visible above the control. */
.pdb-scope-field { position: relative; gap: 6px; min-width: 0; }
.pdb-scope-field__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pdb-scope-field__addon { display: flex; align-items: center; min-width: 0; }
.pdb-page-action-host__scope :is(.pdb-select, .pdb-input) { min-height: var(--pdb-field-height-lg); }
.pdb-page-action-host__scope .pdb-select { min-width: 190px; }
.pdb-updated-stamp { font-size: var(--pdb-font-size-sm); font-weight: 600; color: var(--pdb-status-gold-text); white-space: nowrap; }
/* A server-retained Command Center card: its value stays, labelled with when it was true. */
.pdb-observation-stamp { display: block; font-size: var(--pdb-font-size-sm); font-weight: 600; color: var(--pdb-status-gold-text); }
/* Compaction levels (scopeBarFit.ts), applied only as far as the measured row needs; each level keeps the ones before.
   A control's compact form is hidden until level 4. Visually hidden text stays in the accessible name. */
[data-scope-variant="compact"] { display: none; }
.pdb-scope-bar--c1 :is(.pdb-datepill__detail, .pdb-daterange__comparison-summary) { display: none; }
.pdb-scope-bar--c2 .pdb-page-action-host__status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pdb-scope-bar--c3 .pdb-scope-action-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pdb-scope-bar--c3 .pdb-page-action-host__actions :is(.pdb-button, .pdb-action-menu__trigger) { padding-inline: 10px; }
/* Level 4 outranks a control's own layout of its forms (for example .store-filter__full). */
.pdb-page-action-host--scope-bar.pdb-scope-bar--c4 [data-scope-variant="full"] { display: none; }
.pdb-page-action-host--scope-bar.pdb-scope-bar--c4 [data-scope-variant="compact"] { display: inline-flex; }
.pdb-scope-bar--c5 :is(.pdb-datepill__label, .pdb-datepill__step) { display: none; }
.pdb-scope-bar--c5 :is(.pdb-views-menu__trigger > svg:last-child, .pdb-export-menu__chevron, .pdb-datepill__main .pdb-daterange__chevron) { display: none; }
.pdb-scope-bar--c5 .pdb-page-action-host__scope > :first-child { flex: 0 1 auto; min-width: 64px; }
.pdb-scope-bar--c6 .pdb-page-action-host__scope { overflow-x: auto; scrollbar-width: none; }
/* Phones: the same one row, a little tighter. */
@media (max-width: 700px) {
  .pdb-page-action-host--scope-bar { min-height: 0; padding: 10px; gap: 8px; }
  .pdb-page-action-host--scope-bar :is(.pdb-page-action-host__scope, .pdb-page-action-host__end, .pdb-page-action-host__actions) { gap: 8px; }
}
.pdb-page-toolbar--desktop-single-row { flex-wrap: nowrap; }
.pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__search { min-width: 0; }
.pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters { flex-wrap: nowrap; min-width: 0; }
.pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters > .pdb-select {
  flex: 0 1 130px;
  width: auto;
  min-width: 105px;
  max-width: 160px;
}
.pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters > .pdb-input {
  flex: 0 1 155px;
  width: auto;
  min-width: 140px;
}
@media (max-width: 900px) {
  .pdb-page-toolbar--desktop-single-row { flex-wrap: wrap; }
  .pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__search { min-width: 200px; }
  .pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters { flex-wrap: wrap; }
  .pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters > .pdb-select,
  .pdb-page-toolbar--desktop-single-row .pdb-page-toolbar__filters > .pdb-input {
    flex: 1 1 150px;
    width: 100%;
    max-width: none;
  }
}

/* Touch-first filter row — compact segmented dates stay intact. A real Elo /
   desktop viewport gets one aligned row; smaller screens wrap whole controls. */
.pdb-page-toolbar--touch-filter-row { align-items: flex-end; gap: var(--pdb-space-sm); }
.pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__search { flex: 0 1 280px; max-width: 280px; }
.pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters {
  align-items: flex-end;
  flex: 0 1 auto;
}
.pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters > .pdb-form-field {
  flex: 0 0 196px;
  min-width: 0;
}
.pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__spacer { display: none; }

@media (max-width: 900px) {
  .pdb-page-toolbar--touch-filter-row { flex-wrap: wrap; }
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__search {
    flex: 0 1 280px;
    min-width: min(100%, 160px);
  }
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters > .pdb-select,
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters > .pdb-input {
    flex: 1 1 140px;
    width: auto;
    max-width: none;
  }
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters > .pdb-form-field {
    flex: 1 1 196px;
  }
}

@media (max-width: 520px) {
  .pdb-page-toolbar--touch-filter-row .pdb-page-toolbar__filters > .pdb-form-field {
    flex: 1 1 100%;
    width: 100%;
  }
}

.pdb-page-body { display: flex; flex-direction: column; min-width: 0; gap: var(--pdb-space-xl); }

.pdb-page-section { display: flex; flex-direction: column; gap: var(--pdb-space-md); }
.pdb-page-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pdb-space-md); flex-wrap: wrap; }
.pdb-page-section__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdb-page-section__eyebrow { font-size: var(--pdb-premium-eyebrow-size); font-weight: var(--pdb-premium-eyebrow-weight); letter-spacing: var(--pdb-premium-eyebrow-letter-spacing); text-transform: uppercase; color: var(--pdb-text-secondary); }
.pdb-page-section__title { font-size: var(--pdb-font-size-lg); font-weight: var(--pdb-font-weight-semibold); margin: 0; }
.pdb-page-section__desc { font-size: var(--pdb-font-size-sm); color: var(--pdb-text-secondary); margin: 2px 0 0; max-width: 70ch; }
.pdb-page-section__actions { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }
.pdb-page-section__card { display: flex; flex-direction: column; gap: var(--pdb-space-md); }

.pdb-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pdb-page-grid-min, 240px)), 1fr)); gap: var(--pdb-space-md); }
.pdb-page-grid > * { min-width: 0; }

.pdb-page-actions { display: flex; align-items: center; gap: var(--pdb-space-sm); flex-wrap: wrap; }

/* ===== V4: shared brand lockup (moved out of admin-web) ===== */
.pdb-brand { display: flex; flex-direction: column; gap: 4px; }
.pdb-brand__logo { display: block; width: 150px; height: auto; }
/* The wordmark is a full-colour SVG (PurpLogo darkPremium on dark surfaces);
   do NOT brightness/invert it — that flattens it to a white silhouette. */
/* Admin sidebar: the wordmark is the hero — make it large + glowing; the
   "Pushin POS" slogan below stays small and subordinate. */
.pdb-brand--sidebar .pdb-brand__logo { width: 180px; filter: drop-shadow(0 0 16px rgba(196, 123, 255, .38)) drop-shadow(0 8px 18px rgba(102, 14, 174, .30)); }
.pdb-brand__descriptor {
  padding-left: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pdb-text-muted);
}
.pdb-brand--sidebar .pdb-brand__descriptor { color: var(--pdb-purp-lavender, #d9cbff); }
.pdb-brand__sub { padding-left: 4px; }
.pdb-brand--sidebar .pdb-brand__sub { padding-left: 62px; }
.pdb-brand--light .pdb-brand__sub,
.pdb-brand--brand .pdb-brand__sub,
.pdb-brand--dark .pdb-brand__sub { padding-left: 60px; }
.pdb-brand--compact .pdb-brand__sub { padding-left: 0; }

.pdb-slogan {
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 650; font-size: 14px; font-style: normal;
  letter-spacing: .01em; line-height: 1; white-space: nowrap;
}
.pdb-slogan__word { display: inline-block; }
.pdb-slogan__word:first-child { margin-right: .4em; }
.pdb-slogan__mark {
  width: 22px; height: 22px; flex: 0 0 22px; display: block;
  margin-right: 2px;
  /* premium violet glow so the gradient P-mark lifts off the dark sidebar */
  filter: drop-shadow(0 1px 2px rgba(20, 0, 40, .45)) drop-shadow(0 0 9px rgba(124, 58, 237, .6));
}
.pdb-pmark { display: block; width: 100%; height: 100%; }
/* Brand P-mark = brand violet→plum GRADIENT tile (SVG #pdbPmarkGrad) with the
   white wordmark serif P knocked on top — premium, glows on dark chrome. */
.pdb-pmark__tile { fill: url(#pdbPmarkGrad); stroke: none; }
.pdb-pmark__glyph { fill: #ffffff; }
/* Bare wordmark "P" glyph (no tile) — inherits colour via currentColor.
   Size it with height on the parent chip; width follows the P's aspect. */
.pdb-pglyph { display: block; height: 100%; width: auto; }
.pdb-brand--sidebar .pdb-slogan { color: #cdbbff; }
.pdb-brand--sidebar .pdb-slogan__word { color: #d9cbff; }
.pdb-brand--light .pdb-slogan,
.pdb-brand--light .pdb-slogan__word { color: var(--pdb-purp-primary, #5b16a3); }
/* hero = the sidebar treatment, centered + larger — the login / marketing /
   wallet brand moment on dark backdrops (same glow, same slogan colours). */
.pdb-brand--hero { align-items: center; gap: 10px; }
.pdb-brand--hero .pdb-brand__logo { width: 230px; filter: drop-shadow(0 0 16px rgba(196, 123, 255, .38)) drop-shadow(0 8px 18px rgba(102, 14, 174, .30)); }
.pdb-brand--hero .pdb-brand__sub { padding-left: 0; }
.pdb-brand--hero .pdb-slogan { color: #cdbbff; font-size: 17px; }
.pdb-brand--hero .pdb-slogan__word { color: #d9cbff; }
.pdb-brand--hero .pdb-slogan__mark { width: 27px; height: 27px; flex-basis: 27px; }

/* ===== V4.1: surface modes — all 8 modes remap the SAME token families
   (never per-page colours). Surfaces stay visually distinct (light admin
   vs dark command vs premium wallet) but speak one PURP language. */

/* adminLight — light/calm admin (the default; declared explicitly so the
   mode is provable and self-documenting). */
[data-pdb-surface="adminLight"] {
  --pdb-bg-app: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-page: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-surface: var(--pdb-mist-25, #fffcff);
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
  --pdb-action-primary-text: #ffffff;
}
/* adminBrand — light admin with deep-PURP brand panels (Integrations,
   hero areas); same light shell, brand surface available via .pdb-surface--brand. */
[data-pdb-surface="adminBrand"] {
  --pdb-bg-app: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-page: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-surface: var(--pdb-mist-25, #fffcff);
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
}
/* commandDark — Delivery Dispatch / dispatch console. Dark, but PURP-branded:
   plum/midnight surfaces, lavender/violet status, never raw green/red/teal. */
[data-pdb-surface="commandDark"] {
  --pdb-bg-app: var(--pdb-purp-midnight, #15001f);
  --pdb-bg-page: var(--pdb-purp-midnight, #15001f);
  --pdb-bg-surface: var(--pdb-purp-plum, #210033);
  --pdb-bg-surface-raised: var(--pdb-purp-royal, #3f0a6a);
  --pdb-bg-surface-tinted: var(--pdb-purp-royal, #3f0a6a);
  --pdb-text-primary: #ffffff;
  --pdb-text-secondary: rgba(255, 255, 255, .76);
  --pdb-text-muted: rgba(255, 255, 255, .56);
  --pdb-border-subtle: rgba(217, 203, 255, .14);
  --pdb-border-default: rgba(217, 203, 255, .20);
  --pdb-card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --pdb-action-primary-bg: var(--pdb-purp-action, #6d28d9);
  --pdb-action-primary-text: #ffffff;
  --pdb-status-positive-bg: rgba(124, 58, 237, .22);
  --pdb-status-positive-text: var(--pdb-purp-lavender, #d9cbff);
  --pdb-status-positive-border: rgba(217, 203, 255, .30);
  --pdb-status-positive-dot: var(--pdb-purp-violet, #7c3aed);
  /* Amber retired — `warning` aliases neutral (dark). */
  --pdb-status-warning-bg: var(--pdb-status-neutral-bg);
  --pdb-status-warning-text: var(--pdb-status-neutral-text);
  --pdb-status-warning-border: var(--pdb-status-neutral-border);
  /* Gold — payment/tender tone (dark). */
  --pdb-status-gold-bg: rgba(185, 130, 24, .18);
  --pdb-status-gold-text: #f3c969;
  --pdb-status-gold-border: rgba(243, 201, 105, .32);
  --pdb-status-gold-dot: #f3c969;
  --pdb-status-danger-bg: rgba(192, 38, 102, .20);
  --pdb-status-danger-text: #f5a9c8;
  --pdb-status-danger-border: rgba(245, 169, 200, .34);
  --pdb-lifecycle-return-bg: rgba(192, 38, 102, .20);
  --pdb-lifecycle-return-text: #f5a9c8;
  --pdb-lifecycle-return-border: rgba(245, 169, 200, .34);
  --pdb-lifecycle-return-dot: #c02666;
  --pdb-lifecycle-return-action: #c02666;
  --pdb-status-info-bg: rgba(79, 70, 229, .22);
  --pdb-status-info-text: #b9c7ff;
  --pdb-status-info-border: rgba(185, 199, 255, .34);
  --pdb-status-neutral-bg: rgba(255, 255, 255, .07);
  --pdb-status-neutral-text: rgba(255, 255, 255, .76);
}
/* register — POS/register: light, dense, touch-safe (bigger hit targets). */
[data-pdb-surface="register"] {
  --pdb-bg-app: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-surface: #ffffff;
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
  --pdb-button-height-sm: 38px; --pdb-button-height-md: 46px; --pdb-button-height-lg: 54px;
  --pdb-field-height-sm: 38px; --pdb-field-height-md: 46px; --pdb-field-height-lg: 54px;
  --pdb-card-padding-md: 14px;
}
/* driver — driver PWA: high contrast, low cognitive load. Neutral grey is not
   part of this surface. Dark uses the PURP lavender/orchid text family over
   midnight/plum, while champagne remains a deliberate border/status accent. */
[data-pdb-surface="driver"] {
  --pdb-bg-app: var(--pdb-purp-midnight, #15001f);
  --pdb-bg-page: var(--pdb-purp-midnight, #15001f);
  --pdb-bg-surface: var(--pdb-purp-plum, #210033);
  --pdb-bg-surface-raised: var(--pdb-purp-royal, #3f0a6a);
  --pdb-bg-surface-tinted: var(--pdb-purp-royal, #3f0a6a);
  --pdb-text-primary: #ffffff;
  --pdb-text-secondary: var(--pdb-purp-lavender, #d9cbff);
  --pdb-text-muted: var(--pdb-purp-orchid, #a78bfa);
  --pdb-border-subtle: rgba(243, 201, 105, .18);
  --pdb-border-default: rgba(243, 201, 105, .32);
  --pdb-action-primary-bg: var(--pdb-purp-violet, #7c3aed);
  --pdb-action-primary-text: #ffffff;
  --pdb-status-positive-bg: rgba(124, 58, 237, .22);
  --pdb-status-positive-text: var(--pdb-purp-lavender, #d9cbff);
  --pdb-status-positive-border: rgba(217, 203, 255, .30);
  --pdb-status-positive-dot: var(--pdb-purp-violet, #7c3aed);
  --pdb-status-danger-bg: rgba(192, 38, 102, .20);
  --pdb-status-danger-text: #f5a9c8;
  --pdb-status-danger-border: rgba(245, 169, 200, .34);
  --pdb-status-warning-bg: rgba(243, 201, 105, .12);
  --pdb-status-warning-text: #f3c969;
  --pdb-status-warning-border: rgba(243, 201, 105, .26);
  --pdb-status-warning-dot: #f3c969;
  /* Driver information is PURP orchid/violet. It is deliberately not the
     inherited commandDark periwinkle/indigo pair, which caused Android and
     the hosted iOS surface to render different status colours. */
  --pdb-status-info-bg: rgba(124, 58, 237, .22);
  --pdb-status-info-text: var(--pdb-purp-orchid, #a78bfa);
  --pdb-status-info-border: rgba(167, 139, 250, .34);
  --pdb-status-info-dot: var(--pdb-purp-violet, #7c3aed);
  --pdb-lifecycle-return-bg: rgba(192, 38, 102, .20);
  --pdb-lifecycle-return-text: #f5a9c8;
  --pdb-lifecycle-return-border: rgba(245, 169, 200, .34);
  --pdb-lifecycle-return-dot: #c02666;
  --pdb-lifecycle-return-action: #c02666;
  --pdb-button-height-md: 50px;
  /* Fullscreen "Pushin P" loader stops + dot for THIS surface (also mirrored
     natively). Dark keeps the locked midnight gradient. */
  --pdb-driver-loader-top: #0c0520;
  --pdb-driver-loader-middle: #15001f;
  --pdb-driver-loader-bottom: #070213;
  --pdb-driver-loader-dot: #6b3fa0;
  /* Signature brand purple — employee avatar + live-location pulse. Identical
     in both appearances so the driver's identity mark never changes tone. */
  --pdb-driver-brand: var(--pdb-purp-violet, #7c3aed);
  color-scheme: dark;
}
/* driver · LIGHT appearance — the SAME driver token family remapped onto the
   locked mist/pearl PURP palette with gold chrome. Selected by the resolved whole-app
   appearance attribute `data-pdb-appearance="light"` (System-following-OS or an
   explicit Light choice). Values are the canonical roles mirrored by
   services/delivery-core/src/config/driverAppearance.ts, the Driver PWA
   styles.css, Android Color.kt and the iOS shell — change them together. */
[data-pdb-surface="driver"][data-pdb-appearance="light"] {
  --pdb-bg-app: var(--pdb-purp-mist, #eee7ff);
  --pdb-bg-page: var(--pdb-purp-mist, #eee7ff);
  --pdb-bg-surface: var(--pdb-purp-pearl, #f8f5ff);
  --pdb-bg-surface-raised: #ffffff;
  --pdb-bg-surface-tinted: #ffffff;
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-text-secondary: var(--pdb-gold-text, #8b5a00);
  --pdb-text-muted: var(--pdb-gold-text, #8b5a00);
  --pdb-border-subtle: #eccf8a;
  --pdb-border-default: #eccf8a;
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
  --pdb-action-primary-text: #ffffff;
  --pdb-status-positive-bg: #efe8ff;
  --pdb-status-positive-text: #3b176a;
  --pdb-status-positive-border: #cdbbff;
  --pdb-status-positive-dot: var(--pdb-purp-violet, #7c3aed);
  --pdb-status-danger-bg: #fde7f1;
  --pdb-status-danger-text: #8e164d;
  --pdb-status-danger-border: #f5a9c8;
  --pdb-status-danger-dot: #c02666;
  --pdb-status-warning-bg: #fbf1d9;
  --pdb-status-warning-text: #8b5a00;
  --pdb-status-warning-border: #eccf8a;
  --pdb-status-warning-dot: #b98218;
  --pdb-status-info-bg: #efe8ff;
  --pdb-status-info-text: var(--pdb-purp-primary, #5b16a3);
  --pdb-status-info-border: #cdbbff;
  --pdb-status-info-dot: var(--pdb-purp-violet, #7c3aed);
  --pdb-lifecycle-return-bg: #fde7f1;
  --pdb-lifecycle-return-text: #8e164d;
  --pdb-lifecycle-return-border: #f5a9c8;
  --pdb-lifecycle-return-dot: #c02666;
  --pdb-lifecycle-return-action: #c02666;
  --pdb-driver-loader-top: #f8f5ff;
  --pdb-driver-loader-middle: #eee7ff;
  --pdb-driver-loader-bottom: #e6d9ff;
  --pdb-driver-loader-dot: #6d28d9;
  color-scheme: light;
}
/* customer — polished, trust-first customer account surfaces. */
[data-pdb-surface="customer"] {
  --pdb-bg-app: var(--pdb-mist-50, #f7f4fb);
  --pdb-bg-surface: var(--pdb-mist-25, #fffcff);
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
}
/* public — lightweight branded tracking/status pages. */
[data-pdb-surface="public"] {
  --pdb-bg-app: var(--pdb-mist-25, #fffcff);
  --pdb-bg-surface: #ffffff;
  --pdb-text-primary: var(--pdb-ink-900, #17121f);
  --pdb-action-primary-bg: var(--pdb-purp-primary, #5b16a3);
}
/* walletPremium — aurora/glass loyalty/wallet (premium moment only). */
[data-pdb-surface="walletPremium"] {
  --pdb-bg-app: var(--pdb-purp-midnight, #15001f);
  --pdb-bg-surface: var(--pdb-purp-plum, #210033);
  --pdb-text-primary: #ffffff;
  --pdb-text-secondary: rgba(255, 255, 255, .78);
  --pdb-border-default: rgba(217, 203, 255, .24);
  --pdb-action-primary-bg: var(--pdb-purp-violet, #7c3aed);
}
.pdb-surface-mode { min-height: 0; }

/* ===== V4.3 W1: PurpSwitch — the one compact segmented page/section
   switch. NORMAL document flow, no sticky/z-index. Pearl/mist track, 1px
   lavender-gray border, no giant outline pills, no per-segment dividers,
   obvious-but-quiet active state. TOKENS ONLY — it consumes the
   surface-remapped --pdb-* families above, so it auto-adapts to every
   [data-pdb-surface] (light admin, command-dark, wallet, …) with no
   hardcoded light/dark assumptions. Horizontal-scroll (never wrap) on
   narrow screens so segments never overlap. ===== */
.pdb-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--pdb-border-default);
  border-radius: 11px;
  background: var(--pdb-bg-surface-tinted);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Overflowed, the switch is a carousel: no scrollbar furniture, and the trailing
   edge fades so a reader can see the row continues. The flag is set by the
   component, because CSS cannot ask whether a box overflows. */
.pdb-switch[data-overflowing='true'] {
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, black 0 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, black 0 calc(100% - 34px), transparent 100%);
}
.pdb-switch[data-overflowing='true']::-webkit-scrollbar { display: none; }
.pdb-switch[data-overflowing='true'] .pdb-switch__seg { scroll-snap-align: start; }
.pdb-switch--page { padding: 4px; min-height: 38px; }
.pdb-switch--section {
  padding: 3px;
  min-height: 33px;
  gap: 2px;
  border-color: var(--pdb-border-subtle);
  border-radius: 9px;
}
@media (pointer: coarse) {
  /* Keep the 44px segment targets without oversized padding around the rail. */
  .pdb-switch--page, .pdb-switch--section { padding: 2px; }
}

.pdb-switch__seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pdb-text-secondary);
  font-family: inherit;
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: var(--pdb-font-weight-semibold, 650);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pdb-switch--page .pdb-switch__seg { height: 32px; padding: 0 14px; }
.pdb-switch--section .pdb-switch__seg {
  height: 27px;
  padding: 0 10px;
  font-size: var(--pdb-font-size-xs, 12px);
}
.pdb-switch__seg:hover:not(.pdb-switch__seg--active):not(.pdb-switch__seg--disabled) {
  color: var(--pdb-text-primary);
  background: var(--pdb-bg-surface);
}
.pdb-switch__seg:focus-visible {
  outline: none;
  box-shadow: var(--pdb-field-focus-ring);
  position: relative;
  z-index: 1;
}
.pdb-switch__seg--active {
  color: var(--pdb-action-primary-text);
  background: var(--pdb-action-primary-bg);
  border-color: var(--pdb-action-primary-bg);
}
/* the quieter secondary level: a crisp WHITE "lifted" segment with brand-purple
   text on the tinted track — high-contrast + clearly selected (not muddy purple-
   on-purple). */
.pdb-switch--section .pdb-switch__seg--active {
  /* --pdb-action-primary was a PHANTOM token (never defined) — it fell back to
     inherited color, which on dark heroes rendered the label white-on-white.
     Use the REAL brand token with the signature purple as a hard fallback. */
  color: var(--pdb-action-primary-bg);
  background: var(--pdb-bg-surface);
  border-color: var(--pdb-action-primary-bg);
  box-shadow: 0 1px 2px rgba(33, 23, 43, .12);
}
/* Unanswered switch (no active segment): each option is a lifted white chip with
   primary text so "No / Yes" reads as a decision to make, not two muted labels.
   Once one is chosen it keeps the active treatment and the rest go quiet again. */
.pdb-switch--unset .pdb-switch__seg:not(:disabled):not([aria-disabled="true"]) {
  color: var(--pdb-text-primary);
  background: var(--pdb-bg-surface);
  border-color: var(--pdb-border-strong);
}
.pdb-switch--unset .pdb-switch__seg:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--pdb-action-primary-bg);
  border-color: var(--pdb-action-primary-bg);
}
.pdb-switch__seg--disabled,
.pdb-switch__seg[aria-disabled="true"],
.pdb-switch__seg:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.pdb-switch__icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
}
.pdb-switch__label { display: inline-block; }
.pdb-switch__count,
.pdb-switch__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pdb-bg-surface-tinted);
  color: var(--pdb-status-positive-text);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: var(--pdb-font-weight-bold, 800);
  line-height: 1;
}
.pdb-switch--section .pdb-switch__count,
.pdb-switch--section .pdb-switch__meta {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
}
/* Overflow "More" menu (overflow="menu"): the row fills its room, tabs on the left, one measured trigger after them.
   The hidden meter holds an unclipped copy of every segment + the trigger so the fit is MEASURED, never guessed.
   The trigger is a real PurpActionMenu button wearing the segment look, selected when the active item moved into it. */
.pdb-switch--overflow-menu { display: flex; width: 100%; overflow: visible; position: relative; gap: var(--pdb-switch-gap, 3px); }
.pdb-switch--section.pdb-switch--overflow-menu { --pdb-switch-gap: 2px; }
.pdb-switch__tablist { display: flex; flex: 0 1 auto; align-items: center; gap: var(--pdb-switch-gap, 3px); min-width: 0; }
.pdb-switch__meter {
  position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
  display: flex; gap: var(--pdb-switch-gap, 3px);
}
.pdb-switch__meter > * { flex: 0 0 auto; }
.pdb-switch__more-menu { flex: 0 0 auto; }
.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg {
  width: auto; height: 30px; padding: 0 13px; gap: 6px;
  border: 1px solid transparent; background: transparent; color: var(--pdb-text-secondary);
  font-size: var(--pdb-font-size-sm, 13px); font-weight: var(--pdb-font-weight-semibold, 650);
}
.pdb-switch--page.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg { height: 32px; padding: 0 14px; }
.pdb-switch--section.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg {
  height: 27px; padding: 0 10px; font-size: var(--pdb-font-size-xs, 12px);
}
.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg:hover:not(.pdb-switch__seg--active),
.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg[aria-expanded="true"]:not(.pdb-switch__seg--active) {
  color: var(--pdb-text-primary); background: var(--pdb-bg-surface); border-color: transparent;
}
.pdb-switch--page.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg--active {
  color: var(--pdb-action-primary-text); background: var(--pdb-action-primary-bg); border-color: var(--pdb-action-primary-bg);
}
.pdb-switch--section.pdb-switch--overflow-menu .pdb-action-menu--labelled .pdb-action-menu__trigger.pdb-switch__seg--active {
  color: var(--pdb-action-primary-bg); background: var(--pdb-bg-surface); border-color: var(--pdb-action-primary-bg);
  box-shadow: 0 1px 2px rgba(33, 23, 43, .12);
}
.pdb-switch__more-chevron { flex: none; }
.pdb-switch__more-item { justify-content: space-between; gap: 10px; }
.pdb-switch__more-item.is-active { background: var(--pdb-bg-surface-tinted); color: var(--pdb-action-primary-bg); font-weight: 800; }
/* on the active primary segment the chip flips to read on the fill */
.pdb-switch__seg--active .pdb-switch__count,
.pdb-switch__seg--active .pdb-switch__meta {
  background: var(--pdb-bg-surface);
  color: var(--pdb-action-primary-bg);
}
.pdb-switch--section .pdb-switch__seg--active .pdb-switch__count,
.pdb-switch--section .pdb-switch__seg--active .pdb-switch__meta {
  background: var(--pdb-bg-surface);
  color: var(--pdb-status-positive-text);
}
/* Auto-fit (opt-in `fit`, useFitRow): a row of tabs/pills never wraps and never clips. The hook finds the
   largest scale that fits and writes --pdb-fit-scale (1 = natural); font size, horizontal padding and gaps
   follow it through calc() on the tokens above, and text stops at the readable floor. Heights never change.
   Below the floor the row stays ONE line and scrolls inside itself (data-fit="scroll"), fading only the edge
   that still has more (data-fit-edge). */
.pdb-switch--fit {
  --pdb-fit-floor: 0.5;
  gap: calc(3px * var(--pdb-fit-scale, 1));
}
.pdb-switch--fit.pdb-switch--section { gap: calc(2px * var(--pdb-fit-scale, 1)); }
.pdb-switch--fit .pdb-switch__seg {
  gap: calc(6px * var(--pdb-fit-scale, 1));
  padding-inline: calc(13px * var(--pdb-fit-scale, 1));
  font-size: max(var(--pdb-fit-tab-font-min), calc(var(--pdb-font-size-sm, 12.5px) * var(--pdb-fit-scale, 1)));
}
.pdb-switch--fit.pdb-switch--page .pdb-switch__seg { padding-inline: calc(14px * var(--pdb-fit-scale, 1)); }
.pdb-switch--fit.pdb-switch--section .pdb-switch__seg {
  padding-inline: calc(10px * var(--pdb-fit-scale, 1));
  font-size: max(var(--pdb-fit-tab-font-min), calc(var(--pdb-font-size-xs, 11px) * var(--pdb-fit-scale, 1)));
}
.pdb-switch--fit :is(.pdb-switch__count, .pdb-switch__meta) { padding-inline: calc(6px * var(--pdb-fit-scale, 1)); }
.pdb-switch--fit.pdb-switch--section :is(.pdb-switch__count, .pdb-switch__meta) { padding-inline: calc(5px * var(--pdb-fit-scale, 1)); }
.pdb-switch--fit[data-fit-edge='middle'] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 34px calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 34px calc(100% - 34px), transparent 100%);
}
.pdb-switch--fit[data-fit-edge='end'] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 34px 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 34px 100%);
}
@media (prefers-reduced-motion: reduce) {
  .pdb-switch__seg { transition: none; }
}

/* ===== V4.3 W1: PurpAddButton — the one universal add/create action.
   Composes PurpButton internals (so height/padding/radius/weight/border +
   hover/active/focus/disabled all come from the locked --pdb-button-*
   token system). These rules only carry add-specific layout + the
   on-brand surface treatment; colours stay TOKEN-ONLY so light surfaces
   get the PURP primary fill and dark/command/wallet get the on-brand
   lavender/translucent treatment (no neon/glow, no off-brand hues)
   automatically via the surface remap. ===== */
.pdb-add-btn { flex: 0 0 auto; }
.pdb-add-btn--sm { /* size handled by .pdb-button--sm token height */ }
.pdb-add-btn--md { /* size handled by .pdb-button token height */ }
.pdb-add-btn--lg { /* size handled by .pdb-button--lg token height */ }
.pdb-add-btn__plus {
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
}
.pdb-add-btn--icon-only {
  padding-left: 0;
  padding-right: 0;
  width: var(--pdb-button-height-md);
}
.pdb-add-btn--icon-only.pdb-button--sm { width: var(--pdb-button-height-sm); }
.pdb-add-btn--icon-only.pdb-button--lg { width: var(--pdb-button-height-lg); }
.pdb-add-btn--icon-only .pdb-add-btn__plus { margin: 0; }
/* light surfaces: PURP primary fill + controlled shadow (inherited from
   .pdb-button--primary). dark/command: on-brand translucent lavender
   (inherited from .pdb-button--onBrand). customer/wallet: restrained, no
   local shine — uses the shared surface tokens, adds no extra shadow. */
.pdb-add-btn--dark { box-shadow: none; }
[data-pdb-surface="customer"] .pdb-add-btn,
[data-pdb-surface="walletPremium"] .pdb-add-btn { box-shadow: none; }

/* ── PurpToast — the one notification brain (errors graceful + clear) ──────── */
[data-purp-toast-portal] {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  pointer-events: none;
}
.pdb-toast-viewport {
  position: fixed;
  z-index: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--pdb-space-md);
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.pdb-toast-viewport--bottom-right { right: 16px; bottom: 16px; align-items: flex-end; }
.pdb-toast-viewport--bottom-center { left: 50%; bottom: 16px; transform: translateX(-50%); align-items: center; }
.pdb-toast-viewport--top-center { left: 50%; top: 16px; transform: translateX(-50%); align-items: center; }
.pdb-toast-viewport--top-right { right: 16px; top: 16px; align-items: flex-end; }

.pdb-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--pdb-space-md);
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--pdb-card-radius);
  border: 1px solid var(--pdb-status-info-border);
  background: var(--pdb-status-info-bg);
  color: var(--pdb-status-info-text, #1f2a44);
  box-shadow: 0 10px 30px rgba(20, 6, 40, 0.18);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.4;
  animation: pdb-toast-in 160ms ease-out;
}
@keyframes pdb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.pdb-toast--error { background: var(--pdb-status-danger-bg); border-color: var(--pdb-status-danger-border); color: var(--pdb-status-danger-text); }
.pdb-toast--warning { background: var(--pdb-status-warning-bg); border-color: var(--pdb-status-warning-border); color: var(--pdb-status-warning-text); }
.pdb-toast--success { background: var(--pdb-status-positive-bg); border-color: var(--pdb-status-positive-border); color: var(--pdb-status-positive-text); }
.pdb-toast--info { background: var(--pdb-status-info-bg); border-color: var(--pdb-status-info-border); color: var(--pdb-status-info-text, #1f2a44); }

.pdb-toast__body { flex: 1 1 auto; min-width: 0; }
.pdb-toast__title { font-weight: 700; margin-bottom: 2px; }
.pdb-toast__message { word-break: break-word; }
.pdb-toast__link { display: inline-block; margin-top: 8px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pdb-toast__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.pdb-toast__dismiss {
  pointer-events: auto;
  flex: none;
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 0 2px;
}
.pdb-toast__dismiss:hover { opacity: 1; }

/* ── PurpImageFrame + PurpEditPencil (Design Brain picture frame + the ONE pencil) ── */
.pdb-image-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 28%, transparent); background: linear-gradient(180deg, #fbf8ff 0%, #f3eefa 100%); overflow: visible; padding: 0; }
/* 2× picture icons (decision 2026-06-10) — product photos read at a glance. */
.pdb-image-frame--sm { width: 68px; height: 68px; border-radius: 12px; }
.pdb-image-frame--md { width: 96px; height: 96px; border-radius: 14px; }
.pdb-image-frame--lg { width: 144px; height: 144px; border-radius: 16px; }
.pdb-image-frame--clickable { cursor: pointer; transition: box-shadow 120ms ease, border-color 120ms ease; }
.pdb-image-frame--clickable:hover { border-color: var(--pdb-accent, #6b3fa0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-accent, #6b3fa0) 18%, transparent); }
.pdb-image-frame--attention { animation: pdb-image-frame-attention 1.8s ease-in-out infinite; }
@keyframes pdb-image-frame-attention {
  0%, 100% { border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 38%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pdb-accent, #6b3fa0) 0%, transparent); }
  50% { border-color: var(--pdb-accent, #6b3fa0); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pdb-accent, #6b3fa0) 16%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pdb-image-frame--attention { animation: none; border-color: var(--pdb-accent, #6b3fa0); }
}
.pdb-image-frame__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #fff; }
/* Product photography fit: the WHOLE image, letterboxed — cropping packaging reads as "not scaled". */
.pdb-image-frame--contain .pdb-image-frame__img { object-fit: contain; }
.pdb-image-frame__initials { font-weight: 700; font-size: 12px; color: var(--pdb-accent, #6b3fa0); letter-spacing: 0.02em; }
.pdb-image-frame__add { font-size: 15px; color: var(--pdb-accent, #6b3fa0); font-weight: 600; }

/* PurpImageCarousel — Shopify-style compact picture strip (each frame is a
   PurpImageFrame). Scroll-snap horizontal strip + edge-fading prev/next nav. */
/* ── PurpCarousel (generic content carousel; vertical by default) ─────────── */
.pdb-carousel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pdb-carousel__nav { display: flex; align-items: center; gap: 8px; }
.pdb-carousel__counter { font-size: 12px; font-weight: 600; color: var(--pdb-text-muted, #6b7280); margin-right: auto; }
.pdb-carousel__btn {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid var(--pdb-border-default, rgba(102,14,174,.16));
  background: var(--pdb-field-bg, #fff); color: var(--pdb-primary, #660EAE);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pdb-carousel__btn:disabled { opacity: .4; cursor: not-allowed; }
.pdb-carousel__track { scrollbar-width: none; min-width: 0; }
.pdb-carousel__track::-webkit-scrollbar { display: none; }
.pdb-carousel--vertical .pdb-carousel__track {
  display: grid; grid-auto-flow: row; gap: 10px; max-height: 188px;
  overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; padding: 2px;
}
.pdb-carousel--horizontal .pdb-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px;
}
.pdb-carousel__slide {
  scroll-snap-align: start; min-width: 0;
  border: 1px solid var(--pdb-border-default, rgba(102,14,174,.16)); border-radius: 10px;
  padding: 12px; background: var(--pdb-field-bg, #fff);
  display: flex; flex-direction: column; gap: 8px;
}
.pdb-carousel__footer { display: flex; }
/* THUMB STRIP — the PDF-viewer page picker: several small slides visible at
 * once, each its own target, the strip scrolling under them. */
.pdb-carousel--thumb.pdb-carousel { gap: 8px; }
.pdb-carousel--thumb .pdb-carousel__track { grid-auto-columns: max-content; gap: 8px; scroll-snap-type: none; }
.pdb-carousel--thumb .pdb-carousel__slide { padding: 0; border: 0; background: none; border-radius: 0; }

.pdb-image-carousel { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pdb-image-carousel--single { gap: 0; }
.pdb-image-carousel__strip {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* 4px padding: the frame hover/selection ring (3px box-shadow) must not clip against the
     strip's own scroll box (overflow-x:auto also clips vertically). */
  scroll-behavior: smooth; min-width: 0; padding: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.pdb-image-carousel__strip::-webkit-scrollbar { display: none; }
.pdb-image-carousel__item { scroll-snap-align: start; flex: none; }
.pdb-image-carousel__nav {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 28%, transparent);
  background: linear-gradient(180deg, #fbf8ff 0%, #f3eefa 100%);
  color: var(--pdb-accent, #6b3fa0);
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.pdb-image-carousel__nav:hover:not(:disabled) { border-color: var(--pdb-accent, #6b3fa0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-accent, #6b3fa0) 16%, transparent); }
.pdb-image-carousel__nav:disabled { opacity: 0; pointer-events: none; }

/* ── PurpCategoryNavigator — the ONE parent -> subcategory navigation bar ──
   Labels keep the platform's normal type size. The rail assigns honest space
   to each item and scrolls dense sets instead of shrinking text: a tile or
   pill is never narrower than its complete one-line label and arrow
   (`min-width: max-content`, even past the growth cap), so a long name can
   never run under its arrow or past its border on any screen. */
.register-subfilters {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
  /* Centre the row's content (pills + count). `safe` falls back to flex-start when pills overflow so
     the first pill is always reachable by scroll (a centred overflow would clip the start). */
  justify-content: safe center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 28%, transparent) transparent;
  padding: 8px 6px 10px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 12px;
}
.register-subfilters::-webkit-scrollbar { height: 6px; }
.register-subfilters::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 26%, transparent); border-radius: 6px; }
.register-subfilters > .register-filter-pill {
  /* 136px floor (basis, never shrinks), growth up to 240px, and never less
     than the whole label + arrow. */
  flex: 1 0 136px;
  min-width: max-content;
  max-width: 240px;
}
.register-subfilters > .register-filter-pill--back {
  display: inline-flex;
  flex: 0 1 auto;
  justify-content: center;
  min-width: 136px;
  padding-inline: 18px;
}
.register-subfilters > .register-result-count { flex: 0 0 auto; margin-left: 2px; }
.register-result-count {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 5px;
  color: var(--muted);
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  white-space: nowrap;
}
.register-result-count svg { display: block; height: 17px; width: auto; }
.register-filter-pill {
  position: relative;
  display: inline-grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; column-gap: 10px;
  height: 42px; padding: 0 12px 0 18px;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 999px;
  background: #fff;
  color: #3f1d6b;
  font-size: 13px; font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--primary) 18%, transparent),
    0 5px 14px color-mix(in srgb, var(--primary) 12%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.pdb-category-nav__arrow {
  display: inline-grid;
  place-items: center;
  justify-self: end;
  width: 18px;
  color: currentColor;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.register-filter-pill__label,
.pdb-category-nav__label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
  line-height: 1.15;
}
.register-filter-pill:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 42%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent); }
.register-filter-pill:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.register-filter-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, #fff);
  outline-offset: 2px;
}
.register-filter-pill--colored { background: var(--pill-accent); border-color: transparent; color: #fff; }
.register-filter-pill.is-active {
  background: linear-gradient(135deg, var(--pdb-purp-violet, var(--primary)) 0%, var(--pdb-purp-primary, var(--primary-strong)) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(109,40,217,.42);
}
.register-filter-pill--strain.is-hybrid.is-active { background: rgba(0,112,192,.10); border-color: rgba(0,112,192,.34); color: var(--pdb-strain-hybrid, #0072C7); }
.register-filter-pill--strain.is-indica.is-active { background: rgba(29,131,72,.10); border-color: rgba(29,131,72,.34); color: var(--pdb-strain-indica, #00B346); }
.register-filter-pill--strain.is-sativa.is-active { background: rgba(255,0,0,.08); border-color: rgba(255,0,0,.30); color: var(--pdb-strain-sativa, #FF0000); }
.register-filter-pill--strain.is-blend.is-active { background: rgba(138,106,69,.12); border-color: rgba(138,106,69,.34); color: #8a6a45; }

.category-tiles {
  display: flex;
  flex-wrap: nowrap;
  /* One shared navigation brain: centre normal category sets, while `safe`
     preserves a reachable left edge when a small screen must scroll. */
  justify-content: safe center;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(107,47,160,.3) transparent;
  padding: 6px 3px 10px;
}
.category-tiles::-webkit-scrollbar { height: 6px; }
.category-tiles::-webkit-scrollbar-thumb { background: rgba(107,47,160,.28); border-radius: 6px; }
.category-tiles::-webkit-scrollbar-track { background: transparent; }
.category-tiles > .category-tile {
  /* 148px floor (basis, never shrinks), growth up to 260px, and never less
     than the whole label + arrow. The All tile keeps its fixed footprint. */
  flex: 1 0 148px;
  width: auto;
  min-width: max-content;
  max-width: 260px;
  scroll-snap-align: start;
}
.category-tiles > .category-tile--all {
  /* Fixed original All-products footprint. Never let neighbouring categories
     squeeze it into a lopsided partial pill. */
  flex: 0 0 116px;
  width: 116px;
  min-width: 116px;
  max-width: 116px;
}
.category-tile {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 10px;
  flex: 0 0 max-content;
  min-height: 42px;
  padding: 0 12px 0 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  background: #fff;
  color: #3f1d6b;
  text-align: center;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--primary) 18%, transparent),
    0 5px 14px color-mix(in srgb, var(--primary) 12%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.category-tile::before { display: none; }
.category-tile--colored {
  background: var(--category-tile-accent, var(--primary));
  border-color: transparent;
  color: #fff;
}
.category-tile--colored .category-tile__name,
.category-tile--colored .pdb-category-nav__label { color: #fff; }
.category-tile--colored .category-tile__count {
  background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff;
}
.category-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 42%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent); }
.category-tile:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.category-tile:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, #fff);
  outline-offset: 2px;
}
.category-tile.is-active {
  background: linear-gradient(135deg, var(--pdb-purp-violet, var(--primary)) 0%, var(--pdb-purp-primary, var(--primary-strong)) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(109,40,217,.42);
}
.category-tile.is-active .category-tile__count {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.36);
  color: #fff;
}
.category-tile__name,
.category-tile .pdb-category-nav__label {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.category-tile__name { font-size: 13px; }
.category-tile__count {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  font-size: 11px; font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--pdb-radius-pill, var(--radius-pill, 999px));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-strong);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.category-tile__count--branded { display: inline-flex; align-items: center; gap: 4px; }
.category-tile__count--branded .purp-count-mark {
  width: 14px; height: 14px;
  flex: 0 0 auto;
}
.category-tile--all {
  display: inline-grid;
  /* The base category tile reserves a second grid track for a chevron. The All
     tile has no chevron, so collapse to one track or its content is centred in
     only the first track and visibly drifts left when a host widens the pill. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 0 8px;
  background: #f6f2ff;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  text-align: center;
}
.category-tile__all-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
@media (pointer: coarse) {
  .category-tile,
  .register-filter-pill {
    min-height: 44px;
  }
}

/* ── PurpChipCarousel — the ONE non-wrapping horizontal chip track ────────────
   A single line of chips that scrolls instead of wrapping, so a variable-length
   chip list can never grow a table row's height. The scroll box itself is a
   PurpScrollArea (.pdb-scroll--x) — this only adds the single-line layout, the
   measured edge fade. Token-only: no raw brand colour here. */
.pdb-chip-carousel {
  display: flex;
  align-items: center;
  gap: var(--pdb-space-sm);
  /* min-width:0 lets this shrink inside a flex/grid/table cell — without it the
     track's content sets the floor and the PAGE scrolls sideways instead. */
  min-width: 0;
  max-width: 100%;
}
.pdb-chip-carousel__track {
  display: flex;
  align-items: center;
  /* The whole point: one line, always. */
  flex-wrap: nowrap;
  gap: var(--pdb-space-sm);
  flex: 1 1 auto;
  min-width: 0;
  scroll-behavior: smooth;
  /* Contain the HORIZONTAL fling only (no chaining to browser back-nav). The
     y-axis stays `auto` so a vertical wheel over the row still scrolls the page —
     .pdb-scroll's blanket `overscroll-behavior: contain` must not trap it. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  /* A visible h-scrollbar would add height and break the row rhythm this exists
     to protect (same call as .pdb-image-carousel__strip). The measured fade is
     the affordance; trackpad, touch, and keyboard movement stay native. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdb-chip-carousel__track::-webkit-scrollbar { display: none; }
/* Children never shrink or wrap — they scroll. */
.pdb-chip-carousel__track > * { flex: 0 0 auto; }
.pdb-chip-carousel__track:focus-visible {
  outline: 2px solid var(--pdb-border-focus);
  outline-offset: 2px;
  border-radius: var(--pdb-radius-sm);
}
/* Edge fade — a mask, not a background gradient, so it fades to WHATEVER is
   behind (striped table rows, tinted surfaces) without knowing the surface colour.
   `black`/`transparent` here are mask ALPHA stops, not brand colours. */
.pdb-chip-carousel--fade-start .pdb-chip-carousel__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--pdb-chip-carousel-fade, 20px));
  mask-image: linear-gradient(to right, transparent 0, black var(--pdb-chip-carousel-fade, 20px));
}
.pdb-chip-carousel--fade-end .pdb-chip-carousel__track {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--pdb-chip-carousel-fade, 20px)), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - var(--pdb-chip-carousel-fade, 20px)), transparent 100%);
}
.pdb-chip-carousel--fade-start.pdb-chip-carousel--fade-end .pdb-chip-carousel__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--pdb-chip-carousel-fade, 20px), black calc(100% - var(--pdb-chip-carousel-fade, 20px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black var(--pdb-chip-carousel-fade, 20px), black calc(100% - var(--pdb-chip-carousel-fade, 20px)), transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .pdb-chip-carousel__track { scroll-behavior: auto; }
}

/* ── PurpInfoHint / PurpFieldInfo — the ONE info "i" popover ──────────────────
   Promoted out of admin-web so POS shares it. The popover is PORTALLED to
   <body> and positioned in viewport coords (see PurpInfoHint.tsx), hence
   position:fixed + the --pdb-info-hint-left/top custom properties the component
   feeds it. Token-only so it retints per surface. */
.pdb-field-info {
  display: inline-flex;
  align-items: center;
  gap: var(--pdb-space-sm);
  min-width: 0;
}
.pdb-info-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  outline: none;
  cursor: help;
  vertical-align: middle;
}
.pdb-info-hint__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pdb-purp-primary) 34%, transparent);
  background: var(--pdb-action-secondary-bg);
  color: var(--pdb-purp-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  /* The hint sits inside uppercase/tracked labels — never inherit their casing. */
  text-transform: none;
  letter-spacing: 0;
}
.pdb-info-hint__popover {
  position: fixed;
  left: var(--pdb-info-hint-left, 50vw);
  top: var(--pdb-info-hint-top, 0);
  z-index: 2147482900;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 9px 10px;
  border-radius: var(--pdb-radius-md);
  border: 1px solid color-mix(in srgb, var(--pdb-purp-primary) 18%, transparent);
  background: var(--pdb-purp-plum);
  color: var(--pdb-role-on-brand);
  box-shadow: 0 12px 28px rgba(var(--pdb-shadow-rgb), .2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  /* A hint may put each choice on its own line ("\n"); runs of spaces still collapse. */
  white-space: pre-line;
  /* Never intercept the pointer: it is portalled over the page and the trigger
     owns hover/focus. */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  /* -50% X centres it on the measured trigger point. */
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.pdb-info-hint__popover.has-heading {
  display: grid;
  gap: var(--pdb-space-xs);
}
.pdb-info-hint__heading {
  color: inherit;
  font: inherit;
  font-weight: 800;
}
.pdb-info-hint__body { font: inherit; }
.pdb-info-hint__popover.has-image {
  display: grid;
  gap: var(--pdb-space-sm);
  width: 420px;
  max-width: calc(100vw - 24px);
}
.pdb-info-hint__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(280px, 45vh);
  object-fit: contain;
  border-radius: var(--pdb-radius-sm);
}
/* Only reveal once MEASURED — otherwise it flashes at the un-positioned default. */
.pdb-info-hint__popover.is-positioned {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
.pdb-info-hint:focus-visible .pdb-info-hint__mark {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-purp-primary) 18%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .pdb-info-hint__popover { transition: none; }
}

/* PurpExternalRefsEditor — the ONE external-references editor (customer + product drawers share it). */
.pdb-external-refs { display: flex; flex-direction: column; gap: 8px; min-width: 0; container: pdb-external-refs / inline-size; }
.pdb-external-refs__row { display: grid; grid-template-columns: minmax(100px, 0.8fr) minmax(140px, 1fr) auto; gap: 8px; align-items: center; }
@container pdb-external-refs (max-width: 420px) {
  .pdb-external-refs__row { grid-template-columns: minmax(0, 1fr); }
  .pdb-external-refs__row > :last-child { justify-self: end; }
}
.pdb-external-refs__row input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--pdb-border-default, #e9e3f2); background: var(--pdb-bg-surface, #fffcff); color: var(--pdb-text-primary, #20132f); font-size: 13px; }
.pdb-external-refs__add { display: flex; }
.pdb-external-refs__muted { margin: 0; color: var(--pdb-text-muted, #6b7280); font-size: 13px; }
/* System-managed row marker (e.g. Shopify ids — edited via their own command, never inline). */
.pdb-external-refs__locked { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--pdb-text-muted, #6b7280); background: var(--pdb-bg-muted, #f3f4f6); white-space: nowrap; }
/* Rich read view — label + value + binding/scope/status chips (review item 2). */
.pdb-external-refs__read { display: flex; flex-direction: column; gap: 10px; }
.pdb-external-refs__read-row { display: flex; flex-direction: column; gap: 4px; }
.pdb-external-refs__read-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pdb-external-refs__read-label { font-size: 12px; font-weight: 600; color: var(--pdb-text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.pdb-external-refs__read-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--pdb-text-primary, #20132f); word-break: break-all; text-align: right; }
.pdb-external-refs__read-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pdb-external-refs__chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--pdb-text-muted, #6b7280); background: var(--pdb-bg-muted, #f3f4f6); }
.pdb-external-refs__chip--ok { color: #166534; background: #dcfce7; }
.pdb-external-refs__chip--warn { color: #9a3412; background: #ffedd5; }
/* PURP-branded change warning (same look the Atlas-search id warning should use — one brain). */
.pdb-external-refs__warning { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--pdb-warning-bg, #fff7ed); border: 1px solid var(--pdb-warning-border, #fed7aa); color: var(--pdb-warning-text, #9a3412); font-size: 12px; line-height: 1.4; }
.pdb-external-refs__warning-icon { font-size: 14px; line-height: 1; }
.pdb-pencil { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--pdb-surface, #fff); background: var(--pdb-accent, #6b3fa0); color: #fff; cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(17,24,39,0.25); }
.pdb-pencil:hover { filter: brightness(1.15); }
.pdb-pencil--overlay { position: absolute; right: -7px; bottom: -7px; }

/* PurpRemoveX — the ONE branded remove/close. */
.pdb-remove-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 12%, transparent); color: var(--pdb-accent, #6b3fa0); cursor: pointer; padding: 0; flex: none; }
.pdb-remove-x:hover { background: var(--pdb-accent, #6b3fa0); color: #fff; }
.pdb-remove-x--overlay { position: absolute; top: -6px; right: -6px; border: 2px solid var(--pdb-surface, #fff); box-shadow: 0 1px 4px rgba(17,24,39,0.25); background: var(--pdb-accent, #6b3fa0); color: #fff; }

/* PurpChip accent tone — the PURP-branded pill (family of the Active status pill). */
.pdb-chip--accent { background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, transparent); border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 35%, transparent); color: var(--pdb-accent, #6b3fa0); font-weight: 600; }
.pdb-chip--accent.pdb-chip--interactive:hover { background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 18%, transparent); border-color: var(--pdb-accent, #6b3fa0); }
/* Branded × inside chips (matches PurpRemoveX). */
.pdb-chip__x-btn { border-radius: 999px; background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 12%, transparent); color: var(--pdb-accent, #6b3fa0); border: none; }
.pdb-chip__x-btn:hover { background: var(--pdb-accent, #6b3fa0); color: #fff; }

.pdb-glyph { display: inline-block; vertical-align: -1px; margin-right: 3px; color: var(--pdb-text-muted, #6b7280); }

/* PurpCopyText — click-to-copy, flashes Copied. */
.pdb-copy-text { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.pdb-copy-text__icon { opacity: .45; flex: none; }
.pdb-copy-text:hover .pdb-copy-text__icon { opacity: 1; color: var(--pdb-accent, #6b3fa0); }
.pdb-copy-text:hover { color: var(--pdb-accent, #6b3fa0); }
.pdb-copy-text__hint { font-size: 10px; font-weight: 700; color: var(--pdb-accent, #6b3fa0); }
.pdb-copy-text--copied { color: var(--pdb-accent, #6b3fa0); }

.pdb-form-field__help { font-size: 11px; line-height: 1.35; margin-top: 3px; color: var(--pdb-text-muted, #6b7280); }

/* Standalone field hint (PurpFieldHint) — panel-level helper note, same look as form-field help. */
.pdb-field-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.35; color: var(--pdb-text-muted, #6b7280); }
.pdb-field-hint--compact { margin-top: 2px; }
.pdb-field-hint--danger { color: var(--pdb-status-danger-text, #8e164d); }

/* PurpInlineError — the ONE inline error block. */
.pdb-inline-error { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #dc2626 7%, transparent); border: 1px solid color-mix(in srgb, #dc2626 25%, transparent); color: #991b1b; font-size: 12.5px; }
.pdb-inline-error__text { flex: 1; }
.pdb-inline-error__retry { border: none; background: transparent; color: var(--pdb-accent, #6b3fa0); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 6px; }

/* ── PURP signature purple glow ────────────────────────────────────────────
 * Applied to a field after a failed Save scrolls it into view, so the operator's
 * eye lands on the EXACT offending input. Reads as PURP brand violet (the same
 * hue as the aurora glow, rgba(123,18,217,…)) — a soft ring that pulses a couple
 * of times then settles, never neon. Add the class, remove it after ~1.7s. */
.pdb-field-glow {
  border-radius: 12px;
  animation: pdb-field-glow-pulse 1.6s ease-out 1 both;
  /* Settled resting state once the animation ends keeps the ring readable. */
  box-shadow: 0 0 0 3px rgba(123, 18, 217, 0.22), 0 0 18px rgba(123, 18, 217, 0.20);
}
@keyframes pdb-field-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(123, 18, 217, 0.0),  0 0 0 0 rgba(123, 18, 217, 0.0); }
  14%  { box-shadow: 0 0 0 4px rgba(123, 18, 217, 0.42), 0 0 26px rgba(123, 18, 217, 0.34); }
  40%  { box-shadow: 0 0 0 2px rgba(123, 18, 217, 0.16), 0 0 10px rgba(123, 18, 217, 0.12); }
  60%  { box-shadow: 0 0 0 4px rgba(123, 18, 217, 0.38), 0 0 24px rgba(123, 18, 217, 0.30); }
  100% { box-shadow: 0 0 0 3px rgba(123, 18, 217, 0.22), 0 0 18px rgba(123, 18, 217, 0.20); }
}
@media (prefers-reduced-motion: reduce) {
  .pdb-field-glow {
    animation: none;
    /* Static brand-violet ring — same focus cue, no motion. */
    box-shadow: 0 0 0 3px rgba(123, 18, 217, 0.30), 0 0 16px rgba(123, 18, 217, 0.20);
  }
}

/* ── PurpNotificationBadge — the one attention-count bubble ─────────────── */
.pdb-notify {
  position: relative;
  display: inline-flex;
}
.pdb-notify__bubble {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pdb-status-danger-dot);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--pdb-surface, #fff);
  pointer-events: none;
}

/* PurpLoadMore — the one universal cursor-pagination footer (replaces every
   page-local "Load more" button + inline-styled footer div). */
.pdb-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pdb-space-md);
  padding: var(--pdb-space-2xl) 0 var(--pdb-space-lg);
}
.pdb-load-more--quiet {
  gap: 0;
  min-height: 1px;
  padding: 0;
}
.pdb-load-more__btn { min-width: 180px; }
.pdb-load-more__count {
  margin: 0;
  font-size: 13px;
  color: var(--pdb-text-muted);
  text-align: center;
}
/* Auto-load trigger — a thin target the IntersectionObserver watches. The
   visible loading copy lives only in the button so the footer never doubles it. */
.pdb-load-more__sentinel {
  min-height: 1px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Opt-in sticky streaming control — pinned to the bottom of the scroll area so the
   count + Load more stay reachable (fixes the classic "unreachable footer" of pure
   infinite scroll). */
.pdb-load-more--sticky {
  position: sticky;
  bottom: 0;
  background: var(--pdb-bg-surface-raised);
  border-top: 1px solid var(--pdb-border-subtle);
  z-index: 1;
}
.pdb-load-more--quiet.pdb-load-more--sticky {
  background: transparent;
  border-top: 0;
}

/* ── Design Brain filter dropdown (PurpFilterSelect / PurpFilterMultiSelect) — moved from admin for shared use ── */

.products-input-group--select .inv-ms {
  min-width: 0;
  width: 100%;
}

.products-input-group--select .inv-ms__trigger,
.pw-product-details .inv-ms__trigger {
  min-height: 46px;
  border-radius: 10px;
  border-color: rgba(102,14,174,.28);
  background: rgba(255,255,255,.94);
  font-size: 15px;
  font-weight: 650;
}

.products-input-group--select .inv-ms__summary,
.pw-product-details .inv-ms__summary {
  color: var(--text);
}

.products-input-group--select .inv-ms.is-required:not(.has-selection) .inv-ms__trigger {
  border-color: rgba(102,14,174,.42);
  background: #fff;
}
/* Roomier store picker trigger (decision: "widen this filter a bit"). */
.store-filter .inv-ms__trigger { min-width: 190px; }
/* The stock filter reuses the .inv-ms dropdown shell (single-select). */
.inv-ms__menu .inv-ms__option--single {
  width: 100%;
  justify-content: space-between;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.inv-ms__menu .inv-ms__option--single.is-selected {
  background: rgba(102, 14, 174, 0.08);
  color: var(--accent);
}
.inv-ms__check { color: var(--primary); font-weight: 800; }

/* ── Inventory multi-select dropdown ─────────────────────────────────────── */
.inv-ms { position: relative; }
.inv-ms__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(102, 14, 174, 0.16);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.inv-ms__trigger:hover:not(:disabled) { border-color: rgba(102, 14, 174, 0.34); }
.inv-ms__trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.inv-ms.is-open .inv-ms__trigger {
  border-color: rgba(102, 14, 174, 0.55);
  box-shadow: 0 0 0 3px rgba(102, 14, 174, 0.14);
}
.inv-ms.has-selection .inv-ms__trigger {
  border-color: rgba(102, 14, 174, 0.5);
  background: rgba(102, 14, 174, 0.07);
  color: var(--accent);
}
.inv-ms__trigger--chips {
  min-height: 46px;
  padding-block: 7px;
}
.inv-ms__selected-values {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.inv-ms__selected-chip {
  min-width: 0;
  max-width: min(180px, 100%);
  padding: 5px 9px;
  font-size: 12px;
}
.inv-ms__selected-chip .pdb-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-ms__selected-chip--overflow { flex: 0 0 auto; }
.inv-ms__summary { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-ms__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.inv-ms__chevron { color: rgba(78, 10, 133, 0.6); font-size: 10px; }
.inv-ms__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 200px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(102, 14, 174, 0.16);
  background: #fff;
  box-shadow: 0 18px 44px rgba(33, 8, 61, 0.18);
}
.inv-ms__search {
  width: 100%;
  /* Touch-friendly: ≥44px tap target; 16px font stops iOS Safari auto-zooming (and jolting the
     layout) when the field focuses on a tablet. */
  min-height: 44px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(102, 14, 174, 0.16);
  font-size: 16px;
}
.inv-ms__search:focus-visible {
  outline: none;
  border-color: rgba(102, 14, 174, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 14, 174, 0.12);
}
/* Scroll behaviour (min-height:0, overflow, themed thin scrollbar) is owned by the Design Brain
   .pdb-scroll / .pdb-scroll--y classes on this element — do NOT re-declare it here. */
.inv-ms__options { display: flex; flex-direction: column; gap: 4px; }
.inv-ms__option {
  display: flex;
  align-items: center;
  gap: 11px;
  /* Touch-friendly: ≥44px row with generous padding + spacing so a fat-finger tap on a tablet lands
     on ONE option, not the neighbour. */
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.inv-ms__option:hover { background: rgba(102, 14, 174, 0.07); }
.inv-ms__option input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); cursor: pointer; }
.inv-ms__empty { margin: 0; padding: 10px; color: var(--muted); font-size: 13px; }
.inv-ms__clear {
  margin-top: 6px;
  padding: 8px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.inv-ms__clear:hover { text-decoration: underline; }

/* ── PurpTrendBars — slim report bars, signed scale and exact point details ── */
.pdb-trendbars { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.pdb-trendbars__viewport { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.pdb-trendbars__viewport:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 2px; }
.pdb-trendbars__plot { --pdb-trendbars-pitch: 22px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; width: 100%; min-width: calc(var(--pdb-trendbars-count) * var(--pdb-trendbars-pitch) + 70px); padding-top: 16px; }
.pdb-trendbars__axis, .pdb-trendbars__body { position: relative; }
.pdb-trendbars__axis { min-width: 54px; color: var(--pdb-text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }
.pdb-trendbars__axis-sizer { display: grid; visibility: hidden; white-space: nowrap; }
.pdb-trendbars__axis-sizer > span { grid-area: 1 / 1; }
.pdb-trendbars__tick { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.pdb-trendbars__tick--first { transform: none; }
.pdb-trendbars__tick--last { transform: translateY(-100%); }
.pdb-trendbars__series { min-width: 0; }
.pdb-trendbars__body { display: flex; margin-bottom: 16px; }
.pdb-trendbars__gridline, .pdb-trendbars__zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--pdb-border-subtle); pointer-events: none; }
.pdb-trendbars__zero { border-color: var(--pdb-border-strong); }
.pdb-trendbars__slot { position: relative; z-index: 1; flex: 1 1 0; min-width: 18px; height: 100%; cursor: pointer; }
.pdb-trendbars__bar { position: absolute; left: calc(50% - 3px); width: 6px; border-radius: 3px 3px 0 0; background: var(--pdb-accent, var(--pdb-purp-primary)); min-height: 0; pointer-events: none; }
.pdb-trendbars__slot--compared .pdb-trendbars__bar:not(.pdb-trendbars__bar--ghost) { left: calc(50% - 7px); }
.pdb-trendbars__bar--ghost { left: calc(50% + 1px); background: var(--pdb-border-strong); opacity: .75; }
.pdb-trendbars__bar--negative { background: var(--pdb-status-danger-dot); border-radius: 0 0 3px 3px; }
.pdb-trendbars__value { position: absolute; left: 50%; transform: translate(-50%, calc(-100% - 3px)); color: var(--pdb-text-primary); font-size: 10px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.pdb-trendbars__value--negative { transform: translate(-50%, 3px); }
.pdb-trendbars__labels { display: flex; }
.pdb-trendbars__label { position: relative; flex: 1 1 0; min-width: 18px; height: 1.35em; font-size: 10px; line-height: 1.35; color: var(--pdb-text-secondary); }
.pdb-trendbars__label > span { position: absolute; left: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pdb-trendbars__labels--dense .pdb-trendbars__label > span { width: calc(8 * var(--pdb-trendbars-pitch)); text-align: left; }
.pdb-trendbars__label--last > span { left: auto; right: 0; text-align: right; }
.pdb-trendbars__detail { min-height: 1.4em; font-size: 12px; color: var(--pdb-text-primary); font-variant-numeric: tabular-nums; }
.pdb-trendbars__footer { font-size: 12px; color: var(--pdb-text-secondary); }

/* ── PurpDrillPane — canvas beside ONE drill-in drawer column ─────────────
   The list level and the detail level share one drawer-width column; detail
   slides over the list (the site's drawer pattern, not a second rail). The
   canvas owns its overflow so wide previews never scroll the page. */
.pdb-drillpane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--pdb-space-md, 16px);
  align-items: stretch;
  min-height: 0;
  height: 100%;
}
.pdb-drillpane__canvas { display: flex; flex-direction: column; gap: var(--pdb-space-sm, 10px); min-width: 0; min-height: 0; }
.pdb-drillpane__drawer { position: relative; overflow: hidden; min-height: 0; border-left: 1px solid var(--pdb-border-subtle); padding-left: var(--pdb-space-md, 16px); }
.pdb-drillpane__track { display: flex; width: 200%; height: 100%; min-height: 0; transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
.pdb-drillpane__drawer--detail .pdb-drillpane__track { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .pdb-drillpane__track { transition: none; } }
.pdb-drillpane__panel { width: 50%; flex: none; min-height: 0; display: flex; flex-direction: column; gap: var(--pdb-space-sm, 10px); padding-right: 2px; }
/* Safari will otherwise shrink tall disclosure cards to the panel height instead of
   growing scrollHeight, which makes lower controls appear clipped and unreachable. */
.pdb-drillpane__panel > * { flex-shrink: 0; }

/* List rows: full-width name over a muted type line, chevron promising depth. */
.pdb-drillrow {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 10px; background: transparent;
  font: inherit; text-align: left; cursor: pointer; color: var(--pdb-text-primary);
}
.pdb-drillrow:hover { background: var(--pdb-bg-surface-tinted); }
.pdb-drillrow:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }
.pdb-drillrow__text { min-width: 0; flex: 1 1 auto; }
.pdb-drillrow__name { display: block; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdb-drillrow__type { display: block; font-size: 11px; color: var(--pdb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdb-drillrow__chev { flex: none; color: var(--pdb-text-secondary); font-size: 15px; font-weight: 600; }

/* Back affordance at the top of a detail level. */
.pdb-drillback {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border: none; background: transparent; padding: 4px 8px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--pdb-purp-action); cursor: pointer;
}
.pdb-drillback:hover { background: var(--pdb-bg-surface-tinted); }
.pdb-drillback:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }

/* Quiet actions at the foot of a detail level — the section's own verbs. */
.pdb-quiet-actions { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--pdb-border-subtle); padding-top: 10px; margin-top: 6px; }
.pdb-quiet-action {
  text-align: left; border: none; background: transparent; font: inherit;
  font-size: 13px; font-weight: 620; color: var(--pdb-text-primary);
  padding: 8px 8px; border-radius: 8px; cursor: pointer;
}
.pdb-quiet-action:hover:not(:disabled) { background: var(--pdb-bg-surface-tinted); }
.pdb-quiet-action:focus-visible { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }
.pdb-quiet-action:disabled { opacity: .5; cursor: not-allowed; }
.pdb-quiet-action--danger { color: var(--pdb-status-critical, #b3261e); }

/* Field rows shared by builder forms (renamed from the retired tri-pane's
   row family): main content + compact trailing controls. */
.pdb-formrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* A BUTTON is a flex container, so `text-overflow` on it is inert and a
   centred label clips at BOTH ends ("r — Product colle"). Truncation must
   live on a child span (.pdb-formrow-label); the button itself only pins the
   label left so the distinguishing start of the name survives. */
.pdb-formrow-main { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-align: left; justify-content: flex-start; }
.pdb-formrow-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-formrow-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* ── PurpActionMenu — shared portaled overflow actions ───────────────────
   The portal escapes clipped rows and drawers; fixed positioning is supplied
   by the component after viewport collision measurement. */
.pdb-action-menu { display: inline-flex; flex: 0 0 auto; }
.pdb-action-menu__trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pdb-radius-md);
  background: transparent;
  color: var(--pdb-text-secondary);
  cursor: pointer;
}
.pdb-action-menu__trigger:hover:not(:disabled),
.pdb-action-menu__trigger[aria-expanded="true"] {
  border-color: var(--pdb-border-subtle);
  background: var(--pdb-bg-surface-tinted);
  color: var(--pdb-purp-action);
}
.pdb-action-menu__trigger:focus-visible {
  outline: 2px solid var(--pdb-border-focus);
  outline-offset: 1px;
}
.pdb-action-menu__trigger:disabled { cursor: not-allowed; opacity: .5; }
.pdb-action-menu__glyph { display: block; }
.pdb-action-menu--labelled .pdb-action-menu__trigger {
  display: inline-flex;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-color: var(--pdb-border-default);
  background: var(--pdb-bg-surface-raised);
  color: var(--pdb-purp-action);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}
/* ONE export trigger for the configurable (PurpButton) and plain (PurpActionMenu) flows: the same
   height, padding, typography and footprint, so every Reports toolbar shows identical Export
   buttons. Scoped to .pdb-export-menu__trigger; other PurpActionMenu triggers keep their 32px key. */
.pdb-views-menu__trigger.pdb-action-menu__trigger,
.pdb-export-menu__trigger,
.pdb-export-menu__trigger.pdb-action-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  min-width: var(--pdb-export-trigger-min-width);
  height: var(--pdb-button-height-md);
  padding: 0 var(--pdb-button-padding-x-md);
  border: var(--pdb-button-border-width) solid var(--pdb-action-secondary-border);
  border-radius: var(--pdb-button-radius);
  background: var(--pdb-action-secondary-bg);
  color: var(--pdb-action-secondary-text);
  font-family: var(--pdb-font-family);
  font-size: var(--pdb-button-font-size);
  font-weight: var(--pdb-button-font-weight);
  line-height: 1;
  white-space: nowrap;
}
/* Icon-only Export (owner, 2026-10-07): just the download glyph and the down arrow; "Export" stays the accessible
   name and tooltip. */
.pdb-export-menu__trigger.pdb-export-menu--icon,
.pdb-export-menu--icon .pdb-export-menu__trigger.pdb-action-menu__trigger {
  min-width: 0; gap: 2px; padding: 0 10px;
}
.pdb-export-menu__trigger:hover:not(:disabled),
.pdb-export-menu__trigger.pdb-action-menu__trigger:hover:not(:disabled),
.pdb-export-menu__trigger.pdb-action-menu__trigger[aria-expanded="true"],
.pdb-views-menu__trigger.pdb-action-menu__trigger:hover:not(:disabled),
.pdb-views-menu__trigger.pdb-action-menu__trigger[aria-expanded="true"] {
  border-color: var(--pdb-purple-400);
  background: var(--pdb-lavender-25);
  color: var(--pdb-action-secondary-text);
}
.pdb-export-menu__trigger:focus-visible,
.pdb-export-menu__trigger.pdb-action-menu__trigger:focus-visible,
.pdb-views-menu__trigger.pdb-action-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--pdb-field-focus-ring);
}
.pdb-views-menu__trigger.pdb-action-menu__trigger { min-width: 0; }
@media (pointer: coarse) { .pdb-views-menu__trigger.pdb-action-menu__trigger { height: var(--pdb-button-height-lg); } }
.pdb-views-menu__view { justify-content: space-between; gap: 12px; }
.pdb-views-menu__view.is-active { background: var(--pdb-bg-surface-tinted); color: var(--pdb-action-primary-bg); font-weight: 800; }
.pdb-views-menu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pdb-views-menu__empty { color: var(--pdb-status-gold-text); }
.pdb-views-menu__save { margin-top: 4px; border-top: 1px solid var(--pdb-border-subtle); border-radius: 0 0 var(--pdb-radius-md) var(--pdb-radius-md); color: var(--pdb-action-primary-bg); }
.pdb-export-menu__icon, .pdb-export-menu__chevron { flex: none; display: block; }
.pdb-export-menu__label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pdb-export-config__intro {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--pdb-border-default);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-bg-surface-raised);
  color: var(--pdb-text-primary);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.42;
}
.pdb-export-config__intro strong { color: var(--pdb-text-primary); font-size: var(--pdb-font-size-md, 14px); }
.pdb-export-config__sorting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--pdb-text-primary);
}
.pdb-export-config__sorting > strong { font-size: var(--pdb-font-size-sm, 13px); }
.pdb-export-config__product-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--pdb-font-weight-bold, 700);
}
.pdb-export-config__product-count .purp-count-mark { width: 16px; height: 16px; }
.pdb-export-config__sort {
  min-width: 0;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--pdb-border-subtle);
}
.pdb-export-config__sort > legend {
  padding: 0;
  color: var(--pdb-text-secondary);
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: var(--pdb-font-weight-bold, 700);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.pdb-export-config__sort-rules {
  display: grid;
  gap: 10px;
  margin: 8px 0 6px;
}
.pdb-export-config__sort-rule {
  display: grid;
  grid-template-columns: 70px minmax(150px, 1fr) minmax(150px, 1fr) 34px;
  align-items: end;
  gap: 10px;
  min-width: 0;
}
.pdb-export-config__sort-level {
  align-self: center;
  color: var(--pdb-text-secondary);
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: var(--pdb-font-weight-semibold, 600);
}
.pdb-export-config__sort-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--pdb-text-muted);
  font-size: var(--pdb-font-size-xs, 12px);
}
.pdb-export-config__sort-field .pdb-select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}
.pdb-export-config__sort-remove,
.pdb-export-config__sort-remove-spacer {
  width: 34px;
  min-width: 34px;
  height: 40px;
}
.pdb-export-config__sort-remove {
  align-self: end;
  padding: 0;
  font-size: var(--pdb-font-size-lg, 16px);
}
.pdb-export-config__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pdb-space-sm, 10px);
  margin: 16px 0 10px;
  color: var(--pdb-text-muted);
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: var(--pdb-font-weight-semibold, 600);
}
.pdb-export-config__toolbar-actions { display: inline-flex; align-items: center; gap: 4px; }
.pdb-export-config__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pdb-export-config__column {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--pdb-border-subtle);
  border-radius: var(--pdb-radius-pill);
  background: var(--pdb-bg-surface-raised);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(var(--pdb-shadow-rgb), .05);
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.pdb-export-config__column:hover { border-color: var(--pdb-border-focus); background: var(--pdb-bg-surface-tinted); transform: translateY(-1px); }
.pdb-export-config__column:has(input:checked) {
  border-color: var(--pdb-status-positive-border);
  background: var(--pdb-status-positive-bg-soft);
  color: var(--pdb-status-positive-text);
  box-shadow: 0 2px 0 rgba(var(--pdb-shadow-rgb), .08), 0 5px 12px rgba(var(--pdb-shadow-rgb), .10);
}
.pdb-export-config__column:has(input:focus-visible) { outline: 2px solid var(--pdb-border-focus); outline-offset: 1px; }
.pdb-export-config__column input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; accent-color: var(--pdb-action-primary-bg); }
.pdb-export-config__column > span { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.pdb-export-config__column strong { color: inherit; font-size: var(--pdb-font-size-sm, 13px); line-height: 1.25; white-space: nowrap; }
.pdb-export-config__column small { color: var(--pdb-text-muted); font-size: var(--pdb-font-size-xs, 12px); line-height: 1.3; }
.pdb-export-config__validation { margin: 10px 0 0; color: var(--pdb-status-danger-text); font-size: var(--pdb-font-size-sm, 13px); }
.pdb-export-config__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
@media (max-width: 640px) {
  .pdb-export-config__sort-rule {
    grid-template-columns: 64px minmax(0, 1fr) 34px;
  }
  .pdb-export-config__sort-field { grid-column: 2; }
  .pdb-export-config__sort-remove,
  .pdb-export-config__sort-remove-spacer {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .pdb-export-config__toolbar { align-items: flex-start; flex-direction: column; }
  .pdb-export-config__columns { align-items: stretch; flex-direction: column; }
  .pdb-export-config__column { width: 100%; }
  .pdb-export-config__footer > * { flex: 1 1 128px; }
}
.pdb-action-menu__menu {
  z-index: 2400;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  width: max-content;
  padding: var(--pdb-space-xs);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--pdb-border-default);
  border-radius: var(--pdb-radius-lg);
  background: var(--pdb-bg-surface-raised);
  box-shadow: 0 14px 34px rgba(var(--pdb-shadow-rgb), .18);
  outline: none;
}
.pdb-action-menu__panel { box-sizing: border-box; min-width: 0; padding: 16px; }
.pdb-action-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: var(--pdb-radius-md);
  background: transparent;
  color: var(--pdb-text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.pdb-action-menu__item:hover:not(:disabled),
.pdb-action-menu__item:focus-visible {
  background: var(--pdb-bg-surface-tinted);
  outline: none;
}
.pdb-action-menu__item--danger { color: var(--pdb-status-critical); }
.pdb-action-menu__item:disabled,
.pdb-action-menu__item[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .pdb-action-menu__menu.is-positioned { animation: pdbActionMenuIn 110ms ease-out; }
  @keyframes pdbActionMenuIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 1080px) {
  .pdb-drillpane { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pdb-drillpane__drawer { border-left: none; padding-left: 0; border-top: 1px solid var(--pdb-border-subtle); padding-top: var(--pdb-space-sm, 10px); min-height: 360px; }
}

/* ── Menus zones — one page, two jobs ─────────────────────────────────────
   Printing is a per-store daily job; designing is an occasional authoring job.
   They stack as titled zones so a role that can only print sees a page of
   stores rather than an authoring surface with everything disabled. Tokens
   only: this must retheme with the rest of the Design Brain. */
.menus-zone { display: flex; flex-direction: column; gap: var(--pdb-space-lg, 12px); }
/* Stores tile rather than stack: a four-store retailer should see all four at
   once, which is the whole point of a store-first print surface. */
.menus-zone__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--pdb-space-md, 8px); align-items: start; }
/* The location scope sits between a zone's title and its rows, never in the
   page header — each zone scopes independently. */
.menus-location-switch { align-self: flex-start; }

/* ── Sheet stage — a printed document previewed as a physical page ────────
   The page is a SCALED live render at the sheet's real print geometry (never
   reflowed); the stage provides the desk — sunken backdrop, centred page,
   soft paper shadow. The wallet-pass treatment, for paper. */
/* FRAMELESS: the sheet's own drop shadow already tells you where the page
 * is, so a second border around it just ate room the page could use. The
 * backdrop is a step DARKER than the surface it sits on — a white page on a
 * near-white pane has no visible edge at all. */
.pdb-sheet-stage {
  display: block;
  overflow: auto;
  background: var(--pdb-mist-200);
  border-radius: var(--pdb-radius-md);
  padding: 0;
}
.pdb-sheet-stage__page {
  margin: 0 auto;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(var(--pdb-shadow-rgb), .14), 0 10px 28px rgba(var(--pdb-shadow-rgb), .16);
}

/* ── PurpSwatchStrip — data-driven colour swatches (theme tokens) ─────────
   Colour arrives per-swatch via --pdb-swatch-color (DATA, never a literal). */
.pdb-swatch-strip { display: inline-flex; align-items: center; gap: 4px; }
.pdb-swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--pdb-border-subtle, #d7d2e6);
  background: var(--pdb-swatch-color, transparent);
  display: inline-block;
  box-sizing: border-box;
}
.pdb-swatch-strip--md .pdb-swatch { width: 24px; height: 24px; border-radius: 7px; }
button.pdb-swatch { cursor: pointer; }
button.pdb-swatch:disabled { cursor: not-allowed; opacity: 0.5; }
.pdb-swatch--selected { outline: 2px solid var(--pdb-accent, #6b4fd8); outline-offset: 1px; }

/* ── Shared Product Details — the one POS/Admin product presentation ───── */
.product-image-tile__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; font-size: 20px; letter-spacing: 0.04em; color: var(--pdb-accent, #6b3fa0); opacity: 0.55; }
/* A single plum product card, with quiet facts and a persistent purchase row. */
.product-details-sheet { background: var(--pdb-bg-surface); }
.product-details-sheet .purp-workspace-sheet__header { align-items: center; padding: 14px 24px; background: var(--pdb-bg-surface-raised); border-color: var(--pdb-border-subtle); }
.product-details-sheet .purp-workspace-sheet__title { margin: 0; }
.product-details-sheet__lockup { display: flex; align-items: center; gap: 14px; }
.product-details-sheet__lockup > span { padding-left: 14px; border-left: 1px solid var(--pdb-border-subtle); color: var(--pdb-text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.product-details-sheet__body { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px; }
.product-details-sheet__body > * { flex-shrink: 0; }
.product-details-sheet__hero { overflow: hidden; border: 1px solid var(--pdb-purp-royal); border-radius: var(--pdb-radius-lg); background: linear-gradient(120deg, var(--pdb-purp-royal), var(--pdb-purp-midnight)); color: var(--pdb-text-on-brand); }
.product-details-sheet__hero-main { display: contents; }
.product-details-sheet__photo.pdb-image-frame { width: 100%; height: clamp(200px, 28dvh, 320px); border-radius: var(--pdb-radius-md); background: var(--pdb-bg-surface-raised); border-color: var(--pdb-purp-lavender); padding: 10px; box-shadow: none; }
.product-details-sheet__photo .pdb-image-frame__img { object-fit: contain; }
.product-details-sheet__gallery { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.product-details-sheet__gallery-count { color: var(--pdb-purp-lavender); font-size: 11px; font-variant-numeric: tabular-nums; }
.product-details-sheet__gallery-carousel { display: flex; justify-content: center; align-self: center; width: auto; max-width: calc(100% - 48px); margin: 0 24px 16px; }
.product-details-sheet__gallery-carousel .pdb-image-carousel__strip { flex: 0 1 auto; }
.product-details-sheet__gallery-carousel .pdb-image-carousel__nav { width: 44px; height: 44px; flex-shrink: 0; }
.product-details-sheet__gallery-carousel .pdb-image-frame { width: 48px; height: 48px; }
.product-details-sheet__identity { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.product-details-sheet__identity .pdb-product-identity { gap: 7px; }
.product-details-sheet__identity .pdb-product-identity__brand { color: var(--pdb-champagne-accent); font-size: 11px; letter-spacing: .12em; }
.product-details-sheet__identity .pdb-product-identity__name { color: var(--pdb-text-on-brand); font-size: 26px; font-weight: 750; line-height: 1.16; letter-spacing: -.025em; overflow-wrap: anywhere; }
.product-details-sheet__classification { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--pdb-purp-lavender); font-size: 12px; }
.product-details-sheet__classification .pdb-chip { font-size: 11px; }
.product-details-sheet__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-details-sheet__price { color: var(--pdb-text-on-brand); font-size: 30px; font-weight: 750; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.product-details-sheet__compare { color: var(--pdb-purp-lavender); font-size: 14px; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.product-details-sheet__stock { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.product-details-sheet__weight { color: var(--pdb-purp-lavender); font-size: 12px; }
.product-details-sheet__potency { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin: 0 24px; padding: 16px 0; row-gap: 16px; border-top: 1px solid color-mix(in srgb, var(--pdb-purp-lavender) 25%, transparent); }
.product-details-sheet__potency > div { min-width: 0; padding: 0 16px; border-left: 1px solid color-mix(in srgb, var(--pdb-purp-lavender) 25%, transparent); }
.product-details-sheet__potency > div:first-child { padding-left: 0; border-left: 0; }
.product-details-sheet__potency dt { margin-bottom: 5px; color: var(--pdb-purp-lavender); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .1em; }
.product-details-sheet__potency dd { margin: 0; color: var(--pdb-text-on-brand); font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.product-details-sheet__review-entry.pdb-button { justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 24px; gap: 10px; flex-wrap: wrap; border: 0; border-radius: 0; border-top: 1px solid color-mix(in srgb, var(--pdb-purp-lavender) 25%, transparent); background: color-mix(in srgb, var(--pdb-purp-lavender) 8%, transparent); color: var(--pdb-text-on-brand); font-size: 12px; }
.product-details-sheet__review-entry.pdb-button:hover:not(:disabled) { color: var(--pdb-text-on-brand); background: color-mix(in srgb, var(--pdb-purp-lavender) 16%, transparent); }
.product-details-sheet__rating { color: var(--pdb-champagne-accent); font-variant-numeric: tabular-nums; }
.product-details-sheet__rating > span { margin-left: 8px; }
.product-details-sheet__tabs { align-self: flex-start; }
.product-details-sheet__tabs .pdb-switch__seg { gap: 4px; }
.product-details-sheet__tabs .pdb-switch__count { min-width: 0; padding-inline: 2px; }
.product-details-sheet__information { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.product-details-sheet__content { display: flex; flex-direction: column; gap: 20px; }
.product-details-sheet__content[hidden] { display: none; }
.product-details-sheet__about h3, .product-details-sheet__terps-label { margin: 0 0 9px; color: var(--pdb-text-primary); font-size: 13px; font-weight: 750; }
.product-details-sheet__description { margin: 0; color: var(--pdb-text-secondary); font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.product-details-sheet__atlas .pdb-disclosure__summary { flex-wrap: nowrap; min-height: 52px; gap: 10px; }
.product-details-sheet__atlas .pdb-disclosure__summary::after { content: '+'; flex: 0 0 auto; color: var(--pdb-accent); font-size: 18px; }
.product-details-sheet__atlas .pdb-disclosure[open] > .pdb-disclosure__summary::after { content: '−'; }
.product-details-sheet__atlas .pdb-disclosure__summary-main { flex: 1 1 0; overflow-wrap: anywhere; }
.product-details-sheet__atlas > .pdb-disclosure > .pdb-disclosure__summary > .pdb-disclosure__meta { flex: 0 0 auto; color: var(--pdb-gold-text); font-size: 14px; font-weight: 800; }
.product-details-sheet__atlas-sources { gap: 8px; margin-top: 2px; }
.product-details-sheet__atlas-sources .pdb-carousel__slide { padding: 0; border: 0; background: none; }
.product-details-sheet__atlas-sources .pdb-carousel__btn { width: 36px; height: 36px; }
.pdb-carousel__page { display: flex; flex-direction: column; gap: 8px; animation: pdb-carousel-page-in .18s ease-out; }
@keyframes pdb-carousel-page-in { from { transform: translateY(8px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pdb-carousel__page { animation: none; } }
.product-details-sheet__atlas .pdb-input { margin-bottom: 12px; }
.product-details-sheet__atlas-source { flex: 0 0 auto; }
.product-details-sheet__atlas-source > .pdb-disclosure__summary { font-size: 12px; font-weight: 650; }
.product-details-sheet__atlas-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; margin: 0; }
.product-details-sheet__atlas-facts > div { min-width: 0; }
.product-details-sheet__atlas-facts dt { color: var(--pdb-text-secondary); font-size: 11px; margin-bottom: 5px; }
.product-details-sheet__atlas-facts dd { margin: 0; color: var(--pdb-text-primary); font-size: 13px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.product-details-sheet__atlas-facts dd + dd { margin-top: 8px; }
.product-details-sheet__atlas-description { grid-column: 1 / -1; }
.product-details-sheet__atlas-description dd { font-weight: 400; line-height: 1.65; }
.product-details-sheet__terps-list { display: flex; flex-wrap: wrap; gap: 7px; }
.product-details-sheet__terp { padding: 6px 10px; border-radius: var(--pdb-radius-sm); background: var(--pdb-bg-surface-tinted); border: 1px solid var(--pdb-border-subtle); color: var(--pdb-accent); font-size: 11px; font-weight: 650; }
.product-details-sheet__review-preview { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--pdb-border-subtle); border-radius: var(--pdb-radius-md); background: var(--pdb-bg-surface-tinted); color: var(--pdb-text-primary); text-align: left; font: inherit; cursor: pointer; }
.product-details-sheet__review-preview:hover { border-color: var(--pdb-accent); }
.product-details-sheet__review-preview:focus-visible { outline: 2px solid var(--pdb-accent); outline-offset: 3px; }
.product-details-sheet__preview-heading, .product-details-sheet__preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.product-details-sheet__preview-stars { color: var(--pdb-gold-text); letter-spacing: 2px; }
.product-details-sheet__review-preview > strong { font-size: 14px; }
.product-details-sheet__preview-quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--pdb-text-secondary); font-size: 13px; line-height: 1.6; }
.product-details-sheet__preview-footer { padding-top: 3px; font-size: 11px; color: var(--pdb-gold-text); }
.product-details-sheet__preview-footer > span:last-child { color: var(--pdb-accent); font-weight: 700; }
.product-details-sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.product-details-sheet .purp-workspace-sheet__footer { padding: 16px 24px; background: var(--pdb-bg-surface-raised); border-color: var(--pdb-border-subtle); }
.product-details-sheet .purp-workspace-sheet__actions { flex-wrap: nowrap; gap: 14px; }
.product-details-sheet .purp-workspace-sheet__actions-lead { flex: 0 0 auto; max-width: none; }
.product-details-sheet .purp-workspace-sheet__actions-spacer { display: none; }
.product-details-sheet .purp-workspace-sheet__actions > .purp-workspace-button { flex: 1; min-height: 48px; }
.product-details-sheet__quantity { display: flex; align-items: center; border: 1px solid var(--pdb-border-subtle); border-radius: var(--pdb-radius-md); background: var(--pdb-bg-surface-tinted); }
.product-details-sheet__quantity .pdb-button { min-width: 40px; min-height: 46px; padding-inline: 8px; }
.product-details-sheet__quantity output { min-width: 30px; text-align: center; color: var(--pdb-text-primary); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.product-review-list { display: flex; flex-direction: column; gap: 16px; }
.product-review-list header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-review-list header > span { margin-left: auto; color: var(--pdb-gold-text); font-size: 13px; }
.product-review-list article { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--pdb-border-subtle); border-radius: var(--pdb-radius-md); padding: 18px; background: var(--pdb-bg-surface-raised); }
.product-review-list p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.65; color: var(--pdb-text-secondary); }
.product-review-list footer { color: var(--pdb-gold-text); font-size: 11px; }
.product-review-list__rating { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.product-review-list__rating > span:first-child { color: var(--pdb-gold-text); letter-spacing: 2px; }
.product-details-sheet__hero { display: flex; flex-direction: column; }
.product-details-sheet__gallery { margin: 24px 24px 12px; }
.product-details-sheet__gallery-carousel { order: 1; }
.product-details-sheet__identity { order: 2; margin: 0 24px 20px; }
.product-details-sheet__potency { order: 3; }
.product-details-sheet__review-entry { order: 4; }
@media (min-width: 1100px) {
  .product-details-sheet__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; align-content: start; }
}
@media (max-width: 600px) {
  .product-details-sheet .purp-workspace-sheet__header { padding: 12px 16px; }
  .product-details-sheet__body { padding: 16px; gap: 16px; }
  .product-details-sheet__gallery-carousel { margin-inline: 18px; max-width: calc(100% - 36px); }
  .product-details-sheet__gallery { margin-inline: 18px; }
  .product-details-sheet__identity { margin-inline: 18px; }
  .product-details-sheet__atlas > .pdb-disclosure > .pdb-disclosure__summary { flex-wrap: wrap; }
  .product-details-sheet__identity { gap: 10px; }
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 22px; }
  .product-details-sheet__price { font-size: 27px; }
  .product-details-sheet__potency { margin-inline: 18px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .product-details-sheet__potency > div { padding-inline: 12px; }
  .product-details-sheet__potency dd { font-size: 19px; }
  .product-details-sheet__review-entry.pdb-button { padding: 12px 18px; }
  .product-details-sheet .purp-workspace-sheet__footer { padding: 12px 16px; }
  .product-details-sheet .purp-workspace-sheet__actions { gap: 10px; }
}
@media (max-width: 360px) {
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 20px; }
  .product-details-sheet__potency { margin-inline: 14px; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
  .product-details-sheet .purp-workspace-sheet__actions { gap: 6px; }
  .product-details-sheet__quantity .pdb-button { min-width: 34px; }
}

/* The drawer owns a fixed viewport; only its content regions can scroll. */
.product-details-sheet__body.purp-workspace-sheet__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch;
  overflow: hidden; min-height: 0; gap: 20px; padding: 12px 24px;
}
.product-details-sheet__hero, .product-details-sheet__information { min-height: 0; }
.product-details-sheet__hero > * { flex-shrink: 0; }
.product-details-sheet__gallery { flex: 1 1 0; min-height: 40px; margin: 20px 24px 10px; }
.product-details-sheet__photo.pdb-image-frame { height: 100%; min-height: 0; flex: 1 1 0; }
.product-details-sheet__gallery-count { flex-shrink: 0; }
.product-details-sheet__identity { gap: 9px; margin-bottom: 16px; }
.product-details-sheet__information { gap: 16px; overflow: hidden; }
.product-details-sheet__tabs { flex: 0 0 auto; }
.product-details-sheet__tabs .pdb-switch__seg .pdb-switch__count {
  background: transparent; color: inherit; font: inherit; line-height: inherit;
  height: auto; min-width: 0; padding: 0; border-radius: 0; align-self: center;
}
.product-details-sheet__content { flex: 1 1 0; min-height: 0; padding: 2px; }
.product-details-sheet__content > * { flex-shrink: 0; }
.product-details-sheet__potency { display: flex; gap: 0; padding: 12px 0; }
.product-details-sheet__potency > .product-details-sheet__cannabinoids { flex: 1 1 0; min-width: 0; padding: 0; border: 0; }
.product-details-sheet__potency dl { margin: 0; min-width: 0; }
.product-details-sheet__potency > .product-details-sheet__terp-total { flex: 0 0 33.333%; box-sizing: border-box; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--pdb-purp-lavender) 25%, transparent); }
.pdb-carousel--horizontal .pdb-carousel__track { grid-auto-columns: calc((100% - (var(--pdb-carousel-visible-items, 1) - 1) * 10px) / var(--pdb-carousel-visible-items, 1)); }
.product-details-sheet__cannabinoids { gap: 4px; }
.product-details-sheet__cannabinoids .pdb-carousel__track { padding: 0; scrollbar-width: thin; }
.product-details-sheet__cannabinoids .pdb-carousel__slide { padding: 0 8px 0 0; border: 0; background: none; border-radius: 0; }
.product-details-sheet__cannabinoids .pdb-carousel__nav { order: 1; color: var(--pdb-purp-lavender); }
.product-details-sheet__cannabinoids .pdb-carousel__counter { color: inherit; }
.product-details-sheet__cannabinoids .pdb-carousel__btn { width: 28px; height: 28px; background: transparent; color: white; }
.product-review-list--fit { flex: 1 1 0; min-height: 0; overflow: hidden; }
.product-review-list--fit > header, .product-review-list--fit > p, .product-review-list--fit > button { flex-shrink: 0; }
.product-review-list__viewport { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.product-review-list__viewport > article { flex-shrink: 0; }
.product-review-list--fit .product-review-list__viewport { flex: 1 1 0; }
.product-review-list--fit article { min-height: 0; }
.product-review-list--fit article > * { flex-shrink: 0; }
@media (max-height: 800px) {
  .product-details-sheet__gallery { margin: 12px 16px 8px; }
  .product-details-sheet__identity { margin: 0 16px 10px; gap: 6px; }
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 22px; }
  .product-details-sheet__price { font-size: 26px; }
  .product-details-sheet__gallery-carousel { margin-bottom: 8px; }
  .product-details-sheet__potency { margin-inline: 16px; padding-block: 8px; }
  .product-details-sheet__review-entry.pdb-button { padding: 8px 16px; min-height: 40px; }
}
@media (max-width: 700px) {
  .product-details-sheet__body.purp-workspace-sheet__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .product-details-sheet__hero { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto; }
  .product-details-sheet__gallery { grid-column: 1; grid-row: 1; margin: 10px 8px 6px; height: clamp(72px, 15dvh, 140px); }
  .product-details-sheet__identity { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 10px 10px 10px 4px; gap: 5px; max-height: 23dvh; overflow: auto; }
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 17px; }
  .product-details-sheet__identity .pdb-product-identity__brand { font-size: 9px; }
  .product-details-sheet__classification { gap: 5px; font-size: 10px; }
  .product-details-sheet__price { font-size: 22px; }
  .product-details-sheet__stock { gap: 4px; }
  .product-details-sheet__gallery-carousel { grid-column: 1; grid-row: 2; max-width: calc(100% - 12px); margin: 0 6px 6px; }
  .product-details-sheet__gallery-carousel .pdb-image-frame { width: 32px; height: 32px; }
  .product-details-sheet__gallery-carousel .pdb-image-carousel__nav { width: 28px; height: 32px; }
  .product-details-sheet__potency { grid-column: 1 / -1; margin-inline: 12px; padding-block: 6px; }
  .product-details-sheet__potency dd { font-size: 17px; }
  .product-details-sheet__potency dt { font-size: 9px; margin-bottom: 3px; }
  .product-details-sheet__review-entry.pdb-button { grid-column: 1 / -1; padding: 6px 12px; min-height: 32px; font-size: 10px; gap: 4px; }
  .product-details-sheet__information { gap: 8px; }
  .product-review-list--fit { gap: 8px; }
  .product-review-list--fit article { padding: 12px; }
}
@media (max-height: 650px) and (min-aspect-ratio: 1/1) {
  .product-details-sheet__body.purp-workspace-sheet__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 6px 12px; }
  .product-details-sheet__hero { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  .product-details-sheet__gallery { grid-column: 1; grid-row: 1; margin: 8px; height: auto; }
  .product-details-sheet__identity { grid-column: 2; grid-row: 1; margin: 8px; overflow: auto; min-height: 0; }
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 17px; }
  .product-details-sheet__gallery-carousel { grid-column: 1 / -1; margin: 0 auto 4px; }
  .product-details-sheet__gallery-carousel .pdb-image-frame { width: 28px; height: 28px; }
  .product-details-sheet__gallery-carousel .pdb-image-carousel__nav { height: 28px; }
  .product-details-sheet__potency { grid-column: 1 / -1; padding: 4px 0; }
  .product-details-sheet__potency dd { font-size: 16px; }
  .product-details-sheet__review-entry.pdb-button { grid-column: 1 / -1; min-height: 28px; padding: 4px 12px; font-size: 10px; }
  .product-details-sheet .purp-workspace-sheet__header { padding-block: 6px; }
  .product-details-sheet .purp-workspace-sheet__footer { padding-block: 6px; }
}

@media (max-height: 650px) and (max-width: 700px) and (max-aspect-ratio: 1/1) {
  /* Reviews get reading space; Product restores the full potency overview. */
  .product-details-sheet--reviews .product-details-sheet__gallery { height: 62px; }
  .product-details-sheet--reviews .product-details-sheet__potency,
  .product-details-sheet--reviews .product-details-sheet__review-entry { display: none; }
  .product-details-sheet--reviews .product-details-sheet__identity { max-height: 116px; }
  .product-details-sheet--reviews .product-details-sheet__gallery-carousel { margin-bottom: 6px; }
  .product-details-sheet .purp-workspace-sheet__header { padding-block: 6px; }
  .product-details-sheet .purp-workspace-sheet__footer { padding-block: 6px; }
}

@media (max-height: 450px) and (min-aspect-ratio: 1/1) {
  .product-details-sheet__information, .product-review-list--fit { gap: 6px; }
  .product-review-list--fit header { gap: 5px; font-size: 11px; }
  .product-review-list--fit header > span { font-size: 10px; }
  .product-review-list--fit > p { font-size: 10px; line-height: 1.3; }
  .product-review-list--fit article { padding: 10px; }
  .product-details-sheet__potency { padding-block: 4px; }
  .product-details-sheet__potency dt { font-size: 8px; line-height: 10px; margin-bottom: 2px; }
  .product-details-sheet__potency dd { font-size: 16px; line-height: 18px; }
  .product-details-sheet__cannabinoids { gap: 2px; }
  .product-details-sheet__cannabinoids .pdb-carousel__btn { height: 22px; }
  .product-details-sheet__cannabinoids .pdb-carousel__counter { font-size: 9px; }
  .product-details-sheet__gallery { min-height: 0; gap: 2px; }
}

@media (max-height: 350px) and (min-aspect-ratio: 1/1) {
  .product-details-sheet__identity { gap: 3px; margin: 6px; }
  .product-details-sheet__identity .pdb-product-identity__name { font-size: 14px; line-height: 1.1; }
  .product-details-sheet__identity .pdb-product-identity__brand { font-size: 8px; }
  .product-details-sheet__price { font-size: 19px; }
  .product-details-sheet__classification, .product-details-sheet__classification .pdb-chip { font-size: 9px; }
  /* The focusable shared track retains swipe and arrow-key scrolling. */
  .product-details-sheet__cannabinoids .pdb-carousel__nav { display: none; }
  .product-details-sheet__review-entry.pdb-button { min-height: 24px; font-size: 9px; }
}

/* Canonical tracking-link attribution. The full artwork is one immutable
   Design Brain raster so browsers, themes and mail clients cannot drift. */
.pdb-brand-endorsement {
  display: inline-flex;
  flex: 0 0 auto;
  width: 236px;
  max-width: 100%;
  border-radius: var(--pdb-button-radius, 9px);
  box-shadow:
    var(--pdb-glass-shadow, 0 26px 80px rgba(16, 0, 30, .36)),
    var(--pdb-button-glass-glow, 0 0 22px rgba(107, 47, 160, .32));
  text-decoration: none;
  transition: filter .16s ease, transform .16s ease;
}

.pdb-brand-endorsement:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.pdb-brand-endorsement:focus-visible {
  outline: 2px solid var(--pdb-border-focus, #6d28d9);
  outline-offset: 2px;
  box-shadow: var(--pdb-field-focus-ring, 0 0 0 3px rgba(123, 63, 206, .18));
}

.pdb-brand-endorsement__artwork {
  display: block;
  width: 236px;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: inherit;
}

/* In-app PURP Intelligence badge: the endorsement artwork's pill (purp-intelligence-badge.master.svg colours)
   with the white wordmark and "Intelligence", without "Powered by". */
.pdb-intelligence-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(222, 200, 255, .28);
  background: linear-gradient(135deg, rgba(107, 47, 160, .55), rgba(107, 47, 160, .30) 50%, rgba(75, 30, 130, .45)), #280842;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.pdb-intelligence-badge__wordmark { display: block; }

.pdb-intelligence-badge__label {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* ── PURP Intelligence — one conversational workspace for every surface ── */
.pdb-intelligence__body {
  padding: 0;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pdb-accent, #6b3fa0) 9%, transparent), transparent 34%),
    var(--pdb-bg-canvas, #f8f7fb);
}
/* The docked companion's body lays itself out by its own width, not the
 * viewport's. The overlay sheet keeps its viewport-driven rules so no host
 * that never docks P sees a different layout. */
.purp-workspace-sheet--docked .purp-workspace-sheet__body.pdb-intelligence__body {
  container: purp-intelligence / inline-size;
}
/* Companion header: icon actions sit right of the title, before ×. On a narrow
 * panel the heading and the action group may wrap onto two rows. */
.purp-intelligence-dock__actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.purp-workspace-sheet--docked .purp-workspace-sheet__header {
  flex-wrap: wrap;
  gap: 8px;
}
.pdb-intelligence {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--pdb-space-xl, 20px);
  padding: var(--pdb-space-xl, 20px);
  box-sizing: border-box;
}
.pdb-intelligence__trust {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pdb-space-lg, 16px);
  padding: var(--pdb-space-lg, 16px);
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-lg, 16px);
  background: var(--pdb-bg-surface-raised, #fff);
  box-shadow: var(--pdb-card-shadow, 0 8px 30px rgba(40, 22, 68, .07));
}
.pdb-intelligence__mark {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 10px;
}

@keyframes pdb-p-invite-arrive {
  0%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-5px) scale(1.04); }
  54% { transform: translateY(0) scale(1); }
  72% { transform: translateY(-2px) scale(1.02); }
}

@keyframes pdb-p-invite-nudge {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: no-preference) {
  .pdb-p-invite .pdb-pmark {
    transform-origin: center;
    animation: pdb-p-invite-arrive 720ms cubic-bezier(.22, 1, .36, 1) 220ms both;
  }
  .pdb-p-invite:hover .pdb-pmark,
  .pdb-p-invite:focus-visible .pdb-pmark {
    animation: pdb-p-invite-nudge 340ms ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdb-p-invite .pdb-pmark { animation: none; transform: none; }
}

.pdb-intelligence__trust strong { color: var(--pdb-text-strong, #271d35); }
.pdb-intelligence__trust p {
  margin: 4px 0 0;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.45;
}
.pdb-intelligence__starter {
  display: grid;
  place-items: center;
  gap: var(--pdb-space-xl, 20px);
  margin: auto;
  width: min(920px, 100%);
  padding: var(--pdb-space-3xl, 36px) 0;
  text-align: center;
}
.pdb-intelligence__starter h3 {
  margin: 0;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-2xl, 24px);
}
.pdb-intelligence__starter-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pdb-intelligence__starter-heading > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(77, 25, 135, .16);
}
.pdb-intelligence__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pdb-space-sm, 8px);
}
.pdb-intelligence__starter > p {
  margin: -8px 0 0;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
}
.pdb-intelligence__capability-guide {
  display: grid;
  gap: var(--pdb-space-sm, 8px);
  width: 100%;
  text-align: left;
}
.pdb-intelligence__suggestions--page {
  justify-content: flex-start;
}
.pdb-intelligence__topic-options button:hover,
.pdb-intelligence__topic-options button:focus-visible {
  border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 62%, transparent);
  box-shadow: 0 10px 24px rgba(60, 26, 97, .12);
  transform: translateY(-1px);
  outline: none;
}
.pdb-intelligence__topic-options button:disabled { cursor: default; opacity: .6; }
.pdb-intelligence__capability-directory {
  display: grid;
  gap: 8px;
}
.pdb-intelligence__capability-browser {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  height: clamp(320px, 42vh, 380px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 35%, var(--pdb-border-subtle, #ded9e8));
  border-radius: var(--pdb-radius-lg, 16px);
  background: linear-gradient(145deg, #f7f1ff 0%, var(--pdb-bg-canvas, #f8f7fb) 52%, #fff 100%);
  box-shadow: 0 20px 54px -38px rgba(64, 15, 116, .58);
}
.pdb-intelligence__topic-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--pdb-border-subtle, #ded9e8);
  background: linear-gradient(180deg, #f7f0ff 0%, #fcfaff 100%);
}
.pdb-intelligence__topic-tabs .pdb-tab {
  width: 100%;
  min-height: 47px;
  justify-content: space-between;
  padding: 8px 10px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}
.pdb-intelligence__topic-tabs .pdb-tab:hover,
.pdb-intelligence__topic-tabs .pdb-tab:focus-visible {
  border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 20%, transparent);
  background: #fff;
  outline: none;
}
.pdb-intelligence__topic-tabs .pdb-tab.active {
  border-color: var(--pdb-purp-primary, #5b16a3);
  background: linear-gradient(135deg, var(--pdb-purp-deep, #2b073f), var(--pdb-purp-primary, #5b16a3));
  color: #fff;
  box-shadow: 0 10px 24px rgba(60, 16, 104, .22);
}
.pdb-intelligence__topic-tabs .pdb-tab.active .pdb-tab__label { color: #fff; }
.pdb-intelligence__topic-tabs .pdb-tab__label {
  min-width: 0;
  line-height: 1.25;
}
.pdb-intelligence__topic-tabs .pdb-tab__count {
  flex: 0 0 auto;
  border-radius: 999px;
}
.pdb-intelligence__topic-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__topic-panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 0;
  background: linear-gradient(115deg, var(--pdb-purp-deep, #2b073f), var(--pdb-purp-primary, #5b16a3) 70%, #7c3aed);
  color: #fff;
}
.pdb-intelligence__topic-panel > header > span {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 8px;
}
.pdb-intelligence__topic-panel > header h5 {
  margin: 0;
  color: #fff;
  font-size: var(--pdb-font-size-lg, 16px);
  font-weight: 800;
}
.pdb-intelligence__topic-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}
.pdb-intelligence__topic-options button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 38px 12px 14px;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: 12px;
  background: #fff;
  color: var(--pdb-text-strong, #271d35);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pdb-intelligence__topic-options button strong {
  line-height: 1.3;
}
.pdb-intelligence__topic-options button::after {
  position: absolute;
  right: 14px;
  color: var(--pdb-purp-primary, #5b16a3);
  content: '→';
  font-size: 16px;
  font-weight: 900;
}
.pdb-intelligence__directory-footnote {
  margin: 0 4px;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}

@media (max-width: 760px) {
  .pdb-intelligence__capability-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: min(430px, 52vh);
  }
  .pdb-intelligence__topic-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--pdb-border-subtle, #ded9e8);
    scrollbar-width: thin;
  }
  .pdb-intelligence__topic-tabs .pdb-tab {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .pdb-intelligence__topic-options { grid-template-columns: minmax(0, 1fr); }
  .pdb-intelligence__topic-panel > header { padding: 12px; }
  .pdb-intelligence__topic-panel > header > span { display: none; }
}

/* Container twins of the viewport rules above: a docked companion is narrow on
 * a wide screen, so the directory stacks by the body's own width. */
@container purp-intelligence (max-width: 760px) {
  .pdb-intelligence__capability-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: min(430px, 52vh);
  }
  .pdb-intelligence__topic-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--pdb-border-subtle, #ded9e8);
    scrollbar-width: thin;
  }
  .pdb-intelligence__topic-tabs .pdb-tab {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    white-space: nowrap;
  }
}

@container purp-intelligence (max-width: 560px) {
  .pdb-intelligence__topic-options { grid-template-columns: minmax(0, 1fr); }
  .pdb-intelligence__topic-panel > header { padding: 12px; }
  .pdb-intelligence__topic-panel > header > span { display: none; }
}
.pdb-intelligence__turns {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pdb-space-lg, 16px);
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 0 var(--pdb-space-xl, 20px);
  list-style: none;
}
.pdb-intelligence__turn {
  display: grid;
  gap: var(--pdb-space-sm, 8px);
  max-width: min(760px, 92%);
}
.pdb-intelligence__turn > span:first-child {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pdb-intelligence__assistant-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  letter-spacing: 0;
}
.pdb-intelligence__turn > p,
.pdb-intelligence__answer {
  margin: 0;
  padding: var(--pdb-space-lg, 16px);
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-lg, 16px);
  background: var(--pdb-bg-surface-raised, #fff);
  color: var(--pdb-text-strong, #271d35);
  line-height: 1.58;
  white-space: pre-wrap;
}
.pdb-intelligence__answer {
  display: grid;
  gap: var(--pdb-space-md, 12px);
  width: 100%;
}
.pdb-intelligence__answer--lead {
  gap: 6px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-md, 14px);
  line-height: 1.5;
}
.pdb-intelligence__answer > p,
.pdb-intelligence__answer section,
.pdb-intelligence__answer section > p {
  margin: 0;
}
.pdb-intelligence__answer section {
  display: grid;
  gap: 6px;
}
.pdb-intelligence__answer section > strong {
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-sm, 13px);
}
.pdb-intelligence__answer ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
}
.pdb-intelligence__answer li::marker {
  color: var(--pdb-accent, #6b3fa0);
}
.pdb-intelligence__turn--user {
  align-self: flex-end;
  justify-items: end;
}
.pdb-intelligence__turn--user > p {
  border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 35%, transparent);
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 9%, #fff);
}
.pdb-intelligence__turn-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.pdb-intelligence__turn-attachments > span {
  padding: 5px 9px;
  border-radius: var(--pdb-radius-pill, 999px);
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
}
.pdb-intelligence__turn--assistant { align-self: flex-start; }
.pdb-intelligence__turn--rich {
  width: 100%;
  max-width: 100%;
}
.pdb-intelligence__turn--assistant.is-thinking > p {
  color: var(--pdb-text-secondary, #625a70);
  animation: pdb-intelligence-thinking 1.3s ease-in-out infinite;
}
@keyframes pdb-intelligence-thinking {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}
.pdb-intelligence__progress {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: var(--pdb-space-md, 12px) var(--pdb-space-lg, 16px);
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-lg, 16px);
  background: var(--pdb-bg-surface-raised, #fff);
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
  list-style: none;
}
.pdb-intelligence__progress > li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdb-intelligence__progress > li > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}
.pdb-intelligence__progress > li.is-done > span {
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  color: var(--pdb-accent, #6b3fa0);
}
.pdb-intelligence__progress > li.is-active {
  color: var(--pdb-text-strong, #271d35);
  font-weight: 600;
}
.pdb-intelligence__progress > li.is-active > span {
  border: 2px solid var(--pdb-accent, #6b3fa0);
  border-right-color: transparent;
  animation: pdb-spin .7s linear infinite;
}
.pdb-intelligence__proposal-draft {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 12%, #fff);
  color: var(--pdb-accent, #6b3fa0);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
}
.pdb-intelligence__thread-confirm {
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
}
.pdb-intelligence__visually-hidden,
.pdb-intelligence__progress-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pdb-intelligence__turn--assistant.is-thinking > p { animation: none; opacity: 1; }
  .pdb-intelligence__progress > li.is-active > span {
    animation: none;
    border-right-color: var(--pdb-accent, #6b3fa0);
    opacity: .55;
  }
}
.pdb-intelligence__turn--note {
  align-self: center;
  max-width: 100%;
  text-align: center;
}
.pdb-intelligence__turn--note > .pdb-intelligence__note {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
/* The owning page's result for the employee's own Save on a P draft. */
.pdb-intelligence__turn--receipt {
  align-self: stretch;
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--pdb-border-subtle, #e6e1ec);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-surface, #fff);
}
.pdb-intelligence__receipt--committed {
  border-color: var(--pdb-status-positive-border, #bfe3cc);
  background: var(--pdb-status-positive-bg-soft, #f3fbf6);
}
.pdb-intelligence__receipt--not_committed {
  border-color: var(--pdb-status-danger-border, #f1c4c4);
  background: var(--pdb-status-danger-bg, #fdf3f3);
}
.pdb-intelligence__receipt--unknown {
  border-color: var(--pdb-status-warning-border, #f0dcae);
  background: var(--pdb-status-warning-bg, #fdf8ec);
}
/* A report export: the file was prepared (and, when asked, handed to the browser) — never a saved record. */
.pdb-intelligence__receipt--prepared {
  border-color: var(--pdb-status-info-border, #c9d8f0);
  background: var(--pdb-status-info-bg, #f3f7fd);
}
.pdb-intelligence__receipt--not_prepared {
  border-color: var(--pdb-status-danger-border, #f1c4c4);
  background: var(--pdb-status-danger-bg, #fdf3f3);
}
.pdb-intelligence__receipt-summary {
  margin: 0;
  color: var(--pdb-text-primary, #231b2e);
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: 700;
  line-height: 1.45;
}
.pdb-intelligence__receipt-detail {
  margin: 0;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.45;
}
.pdb-intelligence__refusal-reason {
  margin: 0;
  padding: 0 4px;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.45;
}
.pdb-intelligence__follow-ups,
.pdb-intelligence__clarification-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdb-space-2, 8px);
  padding: 0 4px;
}
.pdb-intelligence__answer code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--pdb-bg-canvas, #f8f7fb);
  color: var(--pdb-text-strong, #271d35);
  font-size: .92em;
}
.pdb-intelligence__web-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0 4px;
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__web-sources a {
  color: var(--pdb-accent, #6b3fa0);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdb-intelligence__investigation {
  display: grid;
  gap: 12px;
}
.pdb-intelligence__investigation > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.pdb-intelligence__investigation > header > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-sm, 13px);
}
.pdb-intelligence__investigation > header > strong > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pdb-accent, #6b3fa0);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pdb-accent, #6b3fa0) 11%, transparent);
}
.pdb-intelligence__investigation > header > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__report-card {
  display: grid;
  gap: 12px;
  padding: var(--pdb-space-lg, 16px);
  border: 1px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 22%, var(--pdb-border-subtle, #ded9e8));
  border-radius: var(--pdb-radius-lg, 16px);
  background: var(--pdb-bg-surface-raised, #fff);
  box-shadow: 0 10px 30px rgba(39, 29, 53, .055);
}
.pdb-intelligence__report-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.pdb-intelligence__report-head > div {
  display: grid;
  gap: 2px;
}
.pdb-intelligence__report-head > div > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  text-transform: capitalize;
}
.pdb-intelligence__report-head > strong:last-child {
  color: var(--pdb-accent, #6b3fa0);
  font-size: var(--pdb-font-size-lg, 18px);
  white-space: nowrap;
}
.pdb-intelligence__velocity-empty {
  margin: 0;
  color: var(--pdb-text-secondary, #625a70);
  line-height: 1.45;
}
.pdb-intelligence__velocity-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 28%, var(--pdb-border-subtle, #ded9e8));
}
.pdb-intelligence__velocity-hero {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pdb-space-lg, 16px);
  padding: var(--pdb-space-xl, 20px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pdb-accent, #6b3fa0) 8%, #fff), #fff 66%);
}
.pdb-intelligence__velocity-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.pdb-intelligence__velocity-heading > span:first-child {
  color: var(--pdb-accent, #6b3fa0);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pdb-intelligence__velocity-heading > h3 {
  margin: 0;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-lg, 18px);
  line-height: 1.25;
}
.pdb-intelligence__velocity-scope,
.pdb-intelligence__velocity-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pdb-intelligence__velocity-scope .pdb-chip,
.pdb-intelligence__velocity-location-chip {
  min-height: 22px;
  padding: 3px 8px;
  font-size: var(--pdb-font-size-xs, 11px);
  line-height: 1;
}
.pdb-intelligence__velocity-primary {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 1px;
  min-width: 116px;
}
.pdb-intelligence__velocity-primary > strong {
  color: var(--pdb-accent, #6b3fa0);
  font-size: 32px;
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pdb-intelligence__velocity-primary > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
  text-align: right;
}
.pdb-intelligence__velocity-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-bottom: 1px solid var(--pdb-border-subtle, #ded9e8);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__velocity-metrics > div {
  display: grid;
  gap: 1px;
  padding: 11px var(--pdb-space-lg, 16px);
  border-left: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__velocity-metrics > div:first-child { border-left: 0; }
.pdb-intelligence__velocity-metrics dd {
  margin: 0;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-md, 14px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.pdb-intelligence__velocity-metrics dt {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__velocity-sections {
  display: grid;
  gap: var(--pdb-space-lg, 16px);
  padding: var(--pdb-space-xl, 20px);
}
.pdb-intelligence__velocity-section {
  display: grid;
  gap: var(--pdb-space-sm, 8px);
  min-width: 0;
}
.pdb-intelligence__velocity-section h4 {
  margin: 0;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-md, 14px);
}
.pdb-intelligence__velocity-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__velocity-table {
  width: 100%;
  min-width: 760px;
  font-variant-numeric: tabular-nums;
}
.pdb-intelligence__velocity-table caption {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 5%, #fff);
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  text-align: left;
}
.pdb-intelligence__velocity-table th,
.pdb-intelligence__velocity-table td {
  padding: 12px;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
  text-align: left;
  vertical-align: top;
}
.pdb-intelligence__velocity-table thead th {
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 4%, #fff);
  color: var(--pdb-text-strong, #271d35);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pdb-intelligence__velocity-table tbody th {
  color: var(--pdb-text-strong, #271d35);
  font-weight: 700;
}
.pdb-intelligence__velocity-table .pdb-product-identity {
  min-width: 190px;
}
.pdb-intelligence__velocity-rank > span {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  color: var(--pdb-accent, #6b3fa0);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 800;
}
.pdb-intelligence__velocity-number strong,
.pdb-intelligence__velocity-price strong {
  color: var(--pdb-text-strong, #271d35);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.pdb-intelligence__velocity-number--sold strong {
  color: var(--pdb-accent, #6b3fa0);
}
.pdb-intelligence__velocity-table th:nth-child(n+4),
.pdb-intelligence__velocity-table td:nth-child(n+4) {
  text-align: right;
  white-space: nowrap;
}
.pdb-intelligence__velocity-card > .pdb-intelligence__report-quality {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--pdb-space-xl, 20px) var(--pdb-space-lg, 16px);
}
.pdb-intelligence__velocity-card > .pdb-intelligence__report-quality > span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  color: var(--pdb-accent, #6b3fa0);
  font-size: 10px;
  font-weight: 900;
}
.pdb-intelligence__query-receipt {
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
  padding-top: 8px;
}
.pdb-intelligence__query-receipt > summary {
  width: fit-content;
  color: var(--pdb-accent, #6b3fa0);
  cursor: pointer;
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 800;
}
.pdb-intelligence__query-receipt code {
  display: block;
  margin-top: 8px;
  padding: 10px;
  overflow-x: auto;
  border-radius: var(--pdb-radius-sm, 8px);
  background: var(--pdb-bg-canvas, #f8f7fb);
  color: var(--pdb-text-secondary, #625a70);
  font-size: 11px;
  white-space: pre-wrap;
}
.pdb-intelligence__report-quality {
  margin: 0;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__evidence {
  overflow: hidden;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__evidence > summary {
  padding: 10px 12px;
  color: var(--pdb-accent, #6b3fa0);
  cursor: pointer;
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: 800;
}
.pdb-intelligence__evidence ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}
.pdb-intelligence__evidence li {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__evidence li > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__evidence li p {
  margin: 0;
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-sm, 13px);
}
.pdb-intelligence__source-meta {
  margin-top: 4px;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__source-meta > summary {
  width: fit-content;
  padding: 2px 0;
  cursor: pointer;
  font-weight: 700;
}
.pdb-intelligence__source-meta dl {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 8px;
  border-radius: var(--pdb-radius-sm, 8px);
  background: var(--pdb-bg-canvas, #f8f7fb);
}
.pdb-intelligence__source-meta dl > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
}
.pdb-intelligence__source-meta dt { font-weight: 800; }
.pdb-intelligence__source-meta dd { margin: 0; overflow-wrap: anywhere; }
.pdb-intelligence__proposals {
  display: grid;
  gap: 10px;
  padding: var(--pdb-space-lg, 16px);
  border: 1px solid var(--pdb-status-warning-border, #ebc76f);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-status-warning-bg, #fff9e8);
}
.pdb-intelligence__proposals article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.pdb-intelligence__proposals article p { margin: 3px 0 0; color: var(--pdb-text-secondary, #625a70); font-size: var(--pdb-font-size-sm, 13px); }
.pdb-intelligence__proposal-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.pdb-intelligence__proposal-actions > span { color: var(--pdb-text-muted, #81778d); font-size: var(--pdb-font-size-xs, 11px); text-transform: capitalize; }
.pdb-intelligence__surface-actions {
  display: grid;
  gap: var(--pdb-space-2, 8px);
  padding: var(--pdb-space-md, 12px);
  border: 1px solid var(--pdb-border-subtle, #e2dbea);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-canvas, #f8f7fb);
}
.pdb-intelligence__surface-actions > strong {
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-xs, 11px);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pdb-intelligence__surface-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdb-space-2, 8px);
}

/* ── Verdict-first answers — one layout for every host (Admin, POS, later
 * surfaces) and every width, from a 320px phone to a wide sheet. The status
 * chip, one plain sentence, up to three short lines and the next step lead;
 * everything else folds behind one native "Details" disclosure. Mobile-first
 * sizing is fluid; the only breakpoint (chip beside vs. above the verdict)
 * has a viewport twin and a container twin further down. */
.pdb-intelligence__turn--brief {
  width: 100%;
}
.pdb-intelligence__brief {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--pdb-space-2, 8px) 14px;
  min-width: 0;
  padding: var(--pdb-space-lg, 16px) 18px;
  box-sizing: border-box;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-lg, 16px);
  background: var(--pdb-bg-surface-raised, #fff);
  color: var(--pdb-text-primary, #271d35);
}
.pdb-intelligence__brief > * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
.pdb-intelligence__brief > .pdb-intelligence__brief-chip {
  grid-column: 1;
  grid-row: 1;
  margin-top: 2px;
}
.pdb-intelligence__brief-chip.pdb-status-badge,
.pdb-intelligence__finding-chip.pdb-status-badge {
  justify-self: start;
  max-width: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pdb-intelligence__brief-chip.pdb-status-badge .pdb-status-badge__dot,
.pdb-intelligence__finding-chip.pdb-status-badge .pdb-status-badge__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
}
/* The shared pill's `neutral` is champagne, which already means "attention"
 * here; unknown and neutral verdicts wear the grey neutral status tokens. */
.pdb-intelligence__brief-chip--unknown.pdb-status-badge,
.pdb-intelligence__brief-chip--neutral.pdb-status-badge {
  border-color: var(--pdb-status-neutral-border, #ddd4ea);
  background: var(--pdb-status-neutral-bg, #f3f1f6);
  color: var(--pdb-status-neutral-text, #625a70);
}
.pdb-intelligence__brief-chip--unknown.pdb-status-badge .pdb-status-badge__dot,
.pdb-intelligence__brief-chip--neutral.pdb-status-badge .pdb-status-badge__dot {
  background: var(--pdb-status-neutral-dot, #81778d);
}
.pdb-intelligence__brief-verdict {
  color: var(--pdb-text-primary, #271d35);
  font-size: 20px;
  font-size: clamp(18px, calc(14px + 1.2cqi), 22px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.pdb-intelligence__brief-points {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}
.pdb-intelligence__brief-point {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  color: var(--pdb-text-secondary, #625a70);
  font-size: 15px;
  line-height: 1.45;
}
.pdb-intelligence__brief-point-text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: break-word;
}
/* A figure sits right-aligned beside its line and drops beneath it when the
 * row gets too narrow for both. */
.pdb-intelligence__brief-point-value {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  color: var(--pdb-text-primary, #271d35);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}
.pdb-intelligence__brief-point-value[data-tone="problem"] { color: var(--pdb-status-danger-text, #8e164d); }
.pdb-intelligence__brief-point-value[data-tone="attention"] { color: var(--pdb-status-gold-text, #8b5a00); }
.pdb-intelligence__brief-point-value[data-tone="good"] { color: var(--pdb-status-positive-text, #3b176a); }
.pdb-intelligence__brief-point-value[data-tone="unknown"],
.pdb-intelligence__brief-point-value[data-tone="neutral"] { color: var(--pdb-text-secondary, #625a70); }
/* The one question P asks back sits under the lines, set apart by a hairline:
 * quiet like the lines, but semibold so it reads as the cue to reply, and it
 * wraps on any width (min-width: 0 comes from the brief's child rule). */
.pdb-intelligence__brief-ask {
  padding-top: var(--pdb-space-2, 8px);
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
  color: var(--pdb-text-secondary, #625a70);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* A quiet line under the brief, never a second answer card. It is a <div> so
 * the `.pdb-intelligence__turn > p` bubble rule cannot reach it. */
.pdb-intelligence__brief-handoff {
  margin: 0;
  padding: 0 4px;
  color: var(--pdb-text-secondary, #625a70);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
/* Another cited check's own verdict, when P combines checks: one compact
 * card under the lead holding at most two rows (chip, sentence, lines, the
 * question it asks back), subordinate to the lead in size and never tappable.
 * The chip sits beside the sentence and moves above it on a narrow width,
 * exactly like the lead (see the twins below). */
.pdb-intelligence__findings {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-surface-raised, #fff);
  list-style: none;
}
.pdb-intelligence__finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  min-width: 0;
  padding: 12px 14px;
  box-sizing: border-box;
  color: var(--pdb-text-primary, #271d35);
}
.pdb-intelligence__finding + .pdb-intelligence__finding {
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__finding > * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
.pdb-intelligence__finding > .pdb-intelligence__finding-chip {
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}
.pdb-intelligence__finding-chip.pdb-status-badge {
  padding: 2px 8px;
  font-size: 11px;
}
.pdb-intelligence__finding-verdict {
  color: var(--pdb-text-primary, #271d35);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.pdb-intelligence__finding-points {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}
.pdb-intelligence__finding-points > .pdb-intelligence__brief-point {
  font-size: 14px;
}
.pdb-intelligence__finding-ask {
  color: var(--pdb-text-secondary, #625a70);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.pdb-intelligence__findings-more {
  margin: 0;
  padding: 0 4px;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-sm, 13px);
  line-height: 1.45;
}
/* A server notice ("What P couldn't check") stays in view: a quiet line with
 * a gold info mark, never a card and never folded. It is a <div> so the
 * `.pdb-intelligence__turn > p` bubble rule cannot reach it. */
.pdb-intelligence__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--pdb-space-2, 8px);
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  color: var(--pdb-text-secondary, #625a70);
  font-size: 14px;
  line-height: 1.45;
}
.pdb-intelligence__notice-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--pdb-status-gold-text, #8b5a00);
}
.pdb-intelligence__notice-text {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.pdb-intelligence__notice-text > strong {
  color: var(--pdb-text-primary, #271d35);
  font-weight: 700;
}
.pdb-intelligence__brief-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdb-space-2, 8px);
  margin-top: 4px;
}
.pdb-intelligence__next-step.pdb-button {
  height: auto;
  min-height: max(44px, var(--pdb-button-height-md, 38px));
  max-width: 100%;
  padding-block: 10px;
  line-height: 1.25;
  text-align: start;
  white-space: normal;
}
/* The label may shrink and break inside a long unbroken store name, so it
 * never spills past the button; the arrow keeps its size. */
.pdb-intelligence__next-step-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pdb-intelligence__next-step-arrow {
  flex: 0 0 auto;
}
.pdb-intelligence__details {
  min-width: 0;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--pdb-space-lg, 16px);
  box-sizing: border-box;
  border-radius: inherit;
  color: var(--pdb-accent, #6b3fa0);
  /* Brand purple pulled toward the themed text colour: deep plum on light
   * surfaces, lavender on dark ones, readable on both. */
  color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 55%, var(--pdb-text-primary, #271d35));
  cursor: pointer;
  font-size: var(--pdb-font-size-md, 14px);
  font-weight: 800;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.pdb-intelligence__details > summary::-webkit-details-marker { display: none; }
.pdb-intelligence__details > summary::marker { content: ''; }
.pdb-intelligence__details > summary:focus-visible {
  outline: 2px solid var(--pdb-accent, #6b3fa0);
  outline-offset: 2px;
}
.pdb-intelligence__details-chevron {
  flex: 0 0 auto;
  transition: transform .16s ease;
}
.pdb-intelligence__details[open] > summary .pdb-intelligence__details-chevron {
  transform: rotate(90deg);
}
.pdb-intelligence__details-body {
  display: grid;
  gap: var(--pdb-space-lg, 16px);
  min-width: 0;
  padding: var(--pdb-space-md, 12px) var(--pdb-space-lg, 16px) var(--pdb-space-lg, 16px);
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__details-body > .pdb-intelligence__answer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pdb-text-primary, #271d35);
  font-size: var(--pdb-font-size-md, 14px);
  line-height: 1.5;
}
.pdb-intelligence__details-body > .pdb-intelligence__answer section > strong {
  color: var(--pdb-text-primary, #271d35);
}
.pdb-intelligence__sources {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pdb-intelligence__details-body > .pdb-intelligence__sources:not(:first-child) {
  padding-top: var(--pdb-space-md, 12px);
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__sources > h4 {
  margin: 0;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pdb-intelligence__sources ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdb-intelligence__sources li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  line-height: 1.4;
}
.pdb-intelligence__sources li > strong {
  min-width: 0;
  color: var(--pdb-text-primary, #271d35);
  font-size: var(--pdb-font-size-sm, 13px);
  font-weight: 700;
  overflow-wrap: break-word;
}
.pdb-intelligence__sources li > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
/* A bullet list made only of "Label: figure" rows reads as two columns. Any
 * answer can carry one; a list with a single non-figure row stays bullets. */
.pdb-intelligence__facts {
  display: grid;
  min-width: 0;
  margin: 0;
}
.pdb-intelligence__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pdb-border-subtle, #ded9e8);
}
.pdb-intelligence__fact:last-child { border-bottom: 0; }
.pdb-intelligence__fact > dt {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--pdb-text-secondary, #625a70);
  overflow-wrap: break-word;
}
.pdb-intelligence__fact > dd {
  min-width: 0;
  margin: 0 0 0 auto;
  color: var(--pdb-text-primary, #271d35);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.pdb-intelligence__fact--total > dt,
.pdb-intelligence__fact--total > dd {
  color: var(--pdb-text-primary, #271d35);
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .pdb-intelligence__details-chevron { transition: none; }
}
/* Narrow: the chip sits above the verdict and the next step spans the row.
 * Viewport twin for the overlay sheet and phones; container twin for a
 * docked companion that is narrow on a wide screen. */
@media (max-width: 520px) {
  .pdb-intelligence__brief {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .pdb-intelligence__brief > *,
  .pdb-intelligence__brief > .pdb-intelligence__brief-chip {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .pdb-intelligence__finding {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdb-intelligence__finding > *,
  .pdb-intelligence__finding > .pdb-intelligence__finding-chip {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .pdb-intelligence__next-step.pdb-button {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}
@container purp-intelligence (max-width: 520px) {
  .pdb-intelligence__brief {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .pdb-intelligence__brief > *,
  .pdb-intelligence__brief > .pdb-intelligence__brief-chip {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .pdb-intelligence__finding {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdb-intelligence__finding > *,
  .pdb-intelligence__finding > .pdb-intelligence__finding-chip {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .pdb-intelligence__next-step.pdb-button {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}
.pdb-intelligence__feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pdb-space-2, 8px);
  margin-top: var(--pdb-space-2, 8px);
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__feedback > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pdb-space-1, 4px);
}
.pdb-intelligence__feedback .pdb-button { min-height: 30px; }
.pdb-intelligence__composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pdb-space-lg, 16px);
  width: 100%;
  padding: var(--pdb-space-lg, 16px) var(--pdb-space-xl, 20px);
  box-sizing: border-box;
  border-top: 1px solid var(--pdb-border-subtle, #ded9e8);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__composer.is-dragging {
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pdb-accent, #6b3fa0) 55%, transparent);
}
.pdb-intelligence__file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pdb-intelligence__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}
.pdb-intelligence__attachments > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 230px;
  padding: 5px 7px 5px 10px;
  overflow: hidden;
  border-radius: var(--pdb-radius-pill, 999px);
  background: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 10%, #fff);
  color: var(--pdb-text-secondary, #625a70);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdb-intelligence__attachments button {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pdb-text-secondary, #625a70);
  cursor: pointer;
}
.pdb-intelligence__attachments button:hover { background: rgba(60, 26, 97, .09); }
.pdb-intelligence__composer .pdb-form-field { margin: 0; }
.pdb-intelligence__composer > .pdb-button { align-self: center; }
.pdb-intelligence__composer textarea { min-height: 58px; max-height: 150px; resize: vertical; }
.pdb-intelligence__scope {
  display: block;
  margin-bottom: 6px;
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
  font-weight: 700;
}
.pdb-intelligence--threads {
  gap: var(--pdb-space-lg, 16px);
}
.pdb-intelligence__threads-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdb-intelligence__threads-head h3 {
  margin: 0;
  color: var(--pdb-text-strong, #271d35);
  font-size: var(--pdb-font-size-lg, 18px);
}
.pdb-intelligence__threads-empty {
  margin: 0;
  color: var(--pdb-text-secondary, #625a70);
  line-height: 1.5;
}
.pdb-intelligence__threads {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdb-intelligence__threads > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--pdb-border-subtle, #ded9e8);
  border-radius: var(--pdb-radius-md, 12px);
  background: var(--pdb-bg-surface-raised, #fff);
}
.pdb-intelligence__threads > li.is-active {
  border-color: color-mix(in srgb, var(--pdb-accent, #6b3fa0) 45%, var(--pdb-border-subtle, #ded9e8));
}
.pdb-intelligence__thread {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pdb-text-strong, #271d35);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pdb-intelligence__thread > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdb-intelligence__thread > span {
  color: var(--pdb-text-muted, #81778d);
  font-size: var(--pdb-font-size-xs, 11px);
}
.pdb-intelligence__thread-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
}
.pdb-intelligence__thread-rename {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pdb-intelligence__thread-rename .pdb-input {
  flex: 1 1 160px;
  min-width: 0;
}

@media (max-width: 760px) {
  .pdb-intelligence__turn,
  .pdb-intelligence__turn--rich { max-width: 100%; }
  .pdb-intelligence__velocity-hero {
    align-items: stretch;
  }
  .pdb-intelligence__velocity-primary {
    min-width: 96px;
  }
  .pdb-intelligence__velocity-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .pdb-intelligence__velocity-table {
    display: block;
    min-width: 0;
  }
  .pdb-intelligence__velocity-table caption {
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--pdb-border-subtle, #ded9e8);
    border-radius: var(--pdb-radius-sm, 8px);
  }
  .pdb-intelligence__velocity-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .pdb-intelligence__velocity-table tbody {
    display: grid;
    gap: 10px;
  }
  .pdb-intelligence__velocity-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 16%, var(--pdb-border-subtle, #ded9e8));
    border-radius: var(--pdb-radius-md, 12px);
    background: var(--pdb-bg-surface-raised, #fff);
    box-shadow: 0 5px 18px rgba(39, 29, 53, .045);
  }
  .pdb-intelligence__velocity-table th,
  .pdb-intelligence__velocity-table td,
  .pdb-intelligence__velocity-table th:nth-child(n+4),
  .pdb-intelligence__velocity-table td:nth-child(n+4) {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .pdb-intelligence__velocity-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .pdb-intelligence__velocity-table th:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .pdb-intelligence__velocity-table td:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  .pdb-intelligence__velocity-table td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(6) { grid-column: 3; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(n+4)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--pdb-text-muted, #81778d);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .pdb-intelligence__velocity-table td:nth-child(6),
  .pdb-intelligence__velocity-table td:nth-child(6)::before {
    text-align: right;
  }
}

@media (max-width: 680px) {
  .pdb-intelligence { padding: var(--pdb-space-lg, 16px); }
  .pdb-intelligence__trust { grid-template-columns: auto minmax(0, 1fr); }
  .pdb-intelligence__trust .pdb-button { grid-column: 1 / -1; }
  .pdb-intelligence__turn { max-width: 100%; }
  .pdb-intelligence__velocity-hero {
    display: grid;
    gap: 14px;
    padding: var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__velocity-primary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    justify-content: start;
    justify-items: start;
    gap: 7px;
  }
  .pdb-intelligence__velocity-primary > strong { font-size: 27px; }
  .pdb-intelligence__velocity-primary > span { text-align: left; }
  .pdb-intelligence__velocity-metrics > div {
    padding: 10px 9px;
  }
  .pdb-intelligence__velocity-sections {
    padding: var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__velocity-card > .pdb-intelligence__report-quality {
    padding: 0 var(--pdb-space-lg, 16px) var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__proposals article { grid-template-columns: 1fr; }
  .pdb-intelligence__proposal-actions { justify-items: start; }
  .pdb-intelligence__composer { grid-template-columns: 1fr; }
  .pdb-intelligence__composer > .pdb-button:last-child { width: 100%; }
}

/* Container twins of the conversation rules above. The ranked velocity table
 * must relax its 760px floor here too, or a docked companion would scroll
 * sideways on a wide screen. The composer lives in the footer, outside this
 * container, so its rules stay viewport-driven. */
@container purp-intelligence (max-width: 760px) {
  .pdb-intelligence__turn,
  .pdb-intelligence__turn--rich { max-width: 100%; }
  .pdb-intelligence__velocity-hero {
    align-items: stretch;
  }
  .pdb-intelligence__velocity-primary {
    min-width: 96px;
  }
  .pdb-intelligence__velocity-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .pdb-intelligence__velocity-table {
    display: block;
    min-width: 0;
  }
  .pdb-intelligence__velocity-table caption {
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--pdb-border-subtle, #ded9e8);
    border-radius: var(--pdb-radius-sm, 8px);
  }
  .pdb-intelligence__velocity-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .pdb-intelligence__velocity-table tbody {
    display: grid;
    gap: 10px;
  }
  .pdb-intelligence__velocity-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--pdb-accent, #6b3fa0) 16%, var(--pdb-border-subtle, #ded9e8));
    border-radius: var(--pdb-radius-md, 12px);
    background: var(--pdb-bg-surface-raised, #fff);
    box-shadow: 0 5px 18px rgba(39, 29, 53, .045);
  }
  .pdb-intelligence__velocity-table th,
  .pdb-intelligence__velocity-table td,
  .pdb-intelligence__velocity-table th:nth-child(n+4),
  .pdb-intelligence__velocity-table td:nth-child(n+4) {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .pdb-intelligence__velocity-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .pdb-intelligence__velocity-table th:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .pdb-intelligence__velocity-table td:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  .pdb-intelligence__velocity-table td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(6) { grid-column: 3; grid-row: 3; }
  .pdb-intelligence__velocity-table td:nth-child(n+4)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--pdb-text-muted, #81778d);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .pdb-intelligence__velocity-table td:nth-child(6),
  .pdb-intelligence__velocity-table td:nth-child(6)::before {
    text-align: right;
  }
}

@container purp-intelligence (max-width: 680px) {
  .pdb-intelligence { padding: var(--pdb-space-lg, 16px); }
  .pdb-intelligence__trust { grid-template-columns: auto minmax(0, 1fr); }
  .pdb-intelligence__trust .pdb-button { grid-column: 1 / -1; }
  .pdb-intelligence__turn { max-width: 100%; }
  .pdb-intelligence__velocity-hero {
    display: grid;
    gap: 14px;
    padding: var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__velocity-primary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    justify-content: start;
    justify-items: start;
    gap: 7px;
  }
  .pdb-intelligence__velocity-primary > strong { font-size: 27px; }
  .pdb-intelligence__velocity-primary > span { text-align: left; }
  .pdb-intelligence__velocity-metrics > div {
    padding: 10px 9px;
  }
  .pdb-intelligence__velocity-sections {
    padding: var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__velocity-card > .pdb-intelligence__report-quality {
    padding: 0 var(--pdb-space-lg, 16px) var(--pdb-space-lg, 16px);
  }
  .pdb-intelligence__proposals article { grid-template-columns: 1fr; }
  .pdb-intelligence__proposal-actions { justify-items: start; }
  .pdb-intelligence__threads > li { grid-template-columns: minmax(0, 1fr); }
  .pdb-intelligence__thread-actions { justify-content: flex-start; }
}

/* One customer Add to Wallet action; fallbacks remain in the same Design Brain. */
.pdb-add-to-wallet,
.pdb-add-to-wallet [role="group"] {
  display: grid;
  gap: var(--pdb-space-lg);
}
.pdb-add-to-wallet p { margin: 0; color: var(--pdb-text-secondary); }
.pdb-add-to-wallet [role="alert"] { color: var(--pdb-status-danger-text, var(--pdb-text-primary)); }

.pdb-employee-clock { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: 12px; border-top: 2px solid var(--pdb-role-premium); }
.pdb-employee-clock__heading, .pdb-employee-clock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdb-employee-clock__heading { align-items: flex-start; justify-content: space-between; }
.pdb-employee-clock__counter, .pdb-employee-clock__timeline { display: grid; gap: 4px; min-width: 0; }
.pdb-employee-clock__value { color: var(--pdb-surface-brand-text); font-size: clamp(28px, 8vw, 36px); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.pdb-employee-clock__label { color: var(--pdb-surface-brand-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pdb-employee-clock__status { color: var(--pdb-surface-brand-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pdb-employee-clock__detail, .pdb-employee-clock .pdb-form-field__label { color: var(--pdb-surface-brand-text-muted); }
.pdb-employee-clock__detail, .pdb-employee-clock__break-detail { font-size: 12px; }
.pdb-employee-clock__break-detail { color: var(--pdb-surface-brand-text); }
.pdb-employee-clock__actions > .pdb-button { flex: 1; }
.pdb-employee-clock__primary { --pdb-button-on-brand-bg: var(--pdb-surface-brand-text); --pdb-button-on-brand-text: var(--pdb-purp-plum); --pdb-button-on-brand-border: var(--pdb-surface-brand-text); --pdb-button-on-brand-bg-hover: var(--pdb-lavender-50); }
.pdb-employee-clock p { margin: 0; font-size: 13px; }
.pdb-employee-clock [role="alert"] { color: var(--pdb-tone-negative-on-brand); }

.product-details-sheet__community-label { display: inline-flex; align-items: center; gap: var(--pdb-space-xs); }
.pdb-verified-badge.pdb-status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-color: var(--pdb-surface-brand-border); background: var(--pdb-surface-brand-bg); color: var(--pdb-text-on-brand); box-shadow: var(--pdb-shadow-sm); white-space: nowrap; }
.pdb-verified-badge .pdb-logo { flex: 0 0 auto; }
.product-details-sheet__preview-footer > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Product image dialog (design brain). */
.pw-image-backdrop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17,24,39,0.45); }
.pw-image-dialog { width: 100%; max-width: 420px; background: var(--surface, #fff); border-radius: var(--pdb-radius-lg, 16px); padding: 20px; box-shadow: 0 24px 64px -24px rgba(17,24,39,0.5); display: flex; flex-direction: column; gap: 12px; }
.pw-image-dialog__head { display: flex; align-items: center; justify-content: space-between; }
.pw-image-dialog__head h3 { margin: 0; font-size: 16px; }
/* ≥44×44 touch target with a clearly visible design-brain X (~22px glyph). The base PurpRemoveX
   chip is only 18px with a 9px glyph — far too small for a phone/tablet close. We resize the hit
   area and glyph here (keeping the design-brain accent chip + hover fill); the 16px title is untouched. */
.pw-image-dialog__close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  flex: none; line-height: 0;
}
.pw-image-dialog__close svg { width: 22px; height: 22px; }
/* Preview bg = the dialog surface (white), NOT a grey box — a letterboxed product photo (white
   studio shot narrower than the square frame) showed grey bars beside itself while the variant
   dialog looked clean. One surface, no bespoke grey. */
.pw-image-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: min(100%, 240px); max-height: 240px; align-self: center; margin-inline: auto; border-radius: var(--pdb-radius-md, 12px); background: var(--pdb-bg-surface, #fff); overflow: hidden; }
.pw-image-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* overflow: visible so the remove-X (.pdb-remove-x--overlay, offset top/right -6px) can
   overhang the box CORNER instead of being clipped on top of the picture. The picture itself
   is clipped/rounded on the <img> below, so the box stays a clean rounded thumbnail. */
.pw-image-strip__item { position: relative; width: 52px; height: 52px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; overflow: visible; background: var(--surface-soft, #f3eefb); padding: 0; }
.pw-image-strip__item img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; background: #fff; }
/* The tile's pick button fills the item box (the item keeps the border, outline and overlays), and
   Set as main / remove are SIBLING buttons — never nested controls — so the tile looks as before. */
.pw-image-strip__pick { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.pw-image-strip__item--active { outline: 2px solid var(--accent, #6b3fa0); }
/* Keep the overhanging remove-X above neighbouring thumbnails (the strip wraps/flexes). */
.pw-image-strip__item .pdb-remove-x--overlay { z-index: 2; }
.pw-image-strip__upload-state { position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); z-index: 1; padding: 2px 3px; border-radius: 4px; background: rgba(17,24,39,0.74); color: #fff; font-size: 8px; font-weight: 700; line-height: 1.2; text-align: center; }
.pw-image-strip__upload-state--failed { background: rgba(153,27,27,0.88); }
/* A variant picture the product can use, shown in the same row but not yet in its gallery. */
.pw-image-strip__item--available { border-style: dashed; border-color: var(--pdb-orchid-300); }
.pw-image-strip__remove { position: absolute; top: 0; right: 0; background: rgba(17,24,39,0.55); color: #fff; border: none; border-radius: 0 0 0 8px; width: 18px; height: 18px; line-height: 1; font-size: 11px; cursor: pointer; }
.pw-image-strip__primary { position: absolute; left: 0; bottom: 0; background: var(--accent, #6b3fa0); color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 0 8px 0 0; }
/* "Set as main" — appears on non-main thumbnails (edit/gallery mode); reorders the picture to
   index 0 (the primary). A full-width footer pill so it never collides with the overhanging X. */
.pw-image-strip__setmain { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; box-sizing: border-box; width: 100%; margin: 0; border: 0; background: rgba(17,24,39,0.62); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; padding: 2px 0; text-align: center; cursor: pointer; border-radius: 0 0 7px 7px; opacity: 0; transition: opacity 0.12s; }
.pw-image-strip__item:hover .pw-image-strip__setmain,
.pw-image-strip__item:focus-within .pw-image-strip__setmain { opacity: 1; }
.pw-image-strip__setmain:hover { background: var(--accent, #6b3fa0); }
.pw-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.pw-image-initials { font-size: 48px; font-weight: 700; color: var(--accent, #6b3fa0); }
.pw-image-variant-sync { display: grid; gap: 8px; padding: 12px; border-radius: var(--pdb-radius-md, 12px); border: 1px solid rgba(102, 14, 174, 0.18); background: linear-gradient(180deg, rgba(102, 14, 174, 0.07), rgba(255,255,255,0.96)); }
.pw-image-variant-sync strong { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #6b3fa0); }
.pw-image-variant-sync span { font-size: 12px; color: var(--muted, #6b7280); }
.pw-image-variant-sync__option { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid rgba(102, 14, 174, 0.16); background: #fff; color: var(--text, #111827); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.pw-image-variant-sync__option span:last-child { color: inherit; font-size: inherit; }
.pw-image-variant-sync__option:hover { border-color: rgba(102, 14, 174, 0.38); box-shadow: 0 8px 20px -18px rgba(102, 14, 174, 0.55); }
.pw-image-variant-sync__option.is-selected { border-color: rgba(102, 14, 174, 0.58); background: rgba(102, 14, 174, 0.08); color: var(--accent, #6b3fa0); }
.pw-image-variant-sync__dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid currentColor; box-shadow: inset 0 0 0 3px #fff; flex: none; }
.pw-image-variant-sync__option.is-selected .pw-image-variant-sync__dot { background: currentColor; }
.pw-image-dialog__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-image-upload-error { display: flex; align-items: center; justify-content: center; gap: 8px; color: #991b1b; font-size: 12px; text-align: center; }

/* ProductImageUploadGate — the save gate names each failed picture where it is, with its
   thumbnail and Retry / Remove right there (Add Product, Add variant, product workspace). */
.pdb-upload-gate { display: grid; gap: 8px; width: 100%; padding: 10px 12px; border-radius: var(--pdb-radius-md, 12px); border: 1px solid rgba(153, 27, 27, 0.28); background: #fff7f7; color: var(--text, #111827); text-align: left; }
.pdb-upload-gate__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pdb-upload-gate__title { font-size: 13px; font-weight: 800; color: #991b1b; }
.pdb-upload-gate__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 40dvh; overflow-y: auto; }
.pdb-upload-gate__item { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pdb-upload-gate__thumb { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(153, 27, 27, 0.3); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.pdb-upload-gate__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdb-upload-gate__text { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.pdb-upload-gate__place { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.pdb-upload-gate__msg { font-size: 12px; color: #991b1b; overflow-wrap: anywhere; }
.pdb-upload-gate__actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.pdb-upload-gate__item--retrying .pdb-upload-gate__msg { color: var(--text-secondary, #4b5563); }

.pw-image-dialog > .pdb-modal__body { padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pw-image-dialog--viewer { max-width: 760px; }
.pw-image-dialog--viewer .pw-image-preview { width: 100%; height: min(60dvh, 600px); max-height: none; aspect-ratio: auto; }

/* Keep the main image stable while the exact gallery is prepared. */
.product-details-sheet__gallery-slot { order: 1; min-height: 76px; display: flex; justify-content: center; }
.product-details-sheet__gallery-slot > .product-details-sheet__gallery-carousel { margin-bottom: 16px; }
.product-details-sheet__atlas-pending { min-height: 61px; }
@media (max-height: 800px) { .product-details-sheet__gallery-slot { min-height: 68px; } .product-details-sheet__gallery-slot > .product-details-sheet__gallery-carousel { margin-bottom: 8px; } }
@media (max-width: 700px) { .product-details-sheet__gallery-slot { grid-column: 1; grid-row: 2; min-height: 50px; } .product-details-sheet__gallery-slot > .product-details-sheet__gallery-carousel { margin-bottom: 6px; } }
@media (max-height: 650px) and (min-aspect-ratio: 1/1) { .product-details-sheet__gallery-slot { grid-column: 1 / -1; min-height: 44px; } .product-details-sheet__gallery-slot > .product-details-sheet__gallery-carousel { margin-bottom: 4px; } }

/* Commerce badge roles: payment methods and outcomes have separate palettes.
   One CSS authority for Admin, POS and Reports. Existing general-purpose tones
   and badge geometry remain unchanged. */
:root, [data-pdb-appearance="light"] {
  --pdb-commerce-tender-cash-text: #6d4300; --pdb-commerce-tender-cash-bg: #f9e6b5; --pdb-commerce-tender-cash-border: #b89243;
  --pdb-commerce-tender-debit-text: #164d75; --pdb-commerce-tender-debit-bg: #d5ecfa; --pdb-commerce-tender-debit-border: #81b5d6;
  --pdb-commerce-tender-credit-text: #50258a; --pdb-commerce-tender-credit-bg: #e5d5fa; --pdb-commerce-tender-credit-border: #a687d0;
  --pdb-commerce-tender-gift-card-text: #733b8f; --pdb-commerce-tender-gift-card-bg: #f0d4f9; --pdb-commerce-tender-gift-card-border: #c190d4;
  --pdb-commerce-tender-store-credit-text: #fff4d6; --pdb-commerce-tender-store-credit-bg: #210033; --pdb-commerce-tender-store-credit-border: #13001d;
  --pdb-commerce-tender-exchange-credit-text: #884919; --pdb-commerce-tender-exchange-credit-bg: #ffe0c2; --pdb-commerce-tender-exchange-credit-border: #c79668;
  --pdb-commerce-tender-split-text: #edf5ff; --pdb-commerce-tender-split-bg: #2e4d74; --pdb-commerce-tender-split-border: #1d334f;
  --pdb-commerce-tender-other-text: #525b69; --pdb-commerce-tender-other-bg: #e5e9ef; --pdb-commerce-tender-other-border: #a9b3c0;
  --pdb-commerce-completed-text: #ffffff; --pdb-commerce-completed-bg: #5b16a3; --pdb-commerce-completed-border: #3f0a6a;
  --pdb-commerce-partially-refunded-text: #854033; --pdb-commerce-partially-refunded-bg: #f4dbd5; --pdb-commerce-partially-refunded-border: #c68f83;
  --pdb-commerce-refunded-text: #fff8f6; --pdb-commerce-refunded-bg: #8b302d; --pdb-commerce-refunded-border: #5e1d1b;
  --pdb-commerce-exchange-text: #fff7fc; --pdb-commerce-exchange-bg: #6e264c; --pdb-commerce-exchange-border: #491532;
  --pdb-commerce-cancelled-text: #fff7fb; --pdb-commerce-cancelled-bg: #a22262; --pdb-commerce-cancelled-border: #741444;
  --pdb-commerce-action-required-text: #ffffff; --pdb-commerce-action-required-bg: #b42318; --pdb-commerce-action-required-border: #80190e;
}
[data-pdb-appearance="dark"], [data-pdb-surface="commandDark"], [data-pdb-surface="driver"]:not([data-pdb-appearance="light"]) {
  --pdb-commerce-tender-cash-text: #f5d68a; --pdb-commerce-tender-cash-bg: #3a2b10; --pdb-commerce-tender-cash-border: #987335;
  --pdb-commerce-tender-debit-text: #c1e7ff; --pdb-commerce-tender-debit-bg: #122f44; --pdb-commerce-tender-debit-border: #447ca2;
  --pdb-commerce-tender-credit-text: #ddc5ff; --pdb-commerce-tender-credit-bg: #2a1544; --pdb-commerce-tender-credit-border: #8259ad;
  --pdb-commerce-tender-gift-card-text: #f1ceff; --pdb-commerce-tender-gift-card-bg: #361b42; --pdb-commerce-tender-gift-card-border: #9e6db1;
  --pdb-commerce-tender-store-credit-text: #fff4d6; --pdb-commerce-tender-store-credit-bg: #210033; --pdb-commerce-tender-store-credit-border: #6d4b81;
  --pdb-commerce-tender-exchange-credit-text: #ffdab5; --pdb-commerce-tender-exchange-credit-bg: #3c2815; --pdb-commerce-tender-exchange-credit-border: #a07850;
  --pdb-commerce-tender-split-text: #edf5ff; --pdb-commerce-tender-split-bg: #254367; --pdb-commerce-tender-split-border: #7495b9;
  --pdb-commerce-tender-other-text: #d8e1ef; --pdb-commerce-tender-other-bg: #29303d; --pdb-commerce-tender-other-border: #687488;
  --pdb-commerce-completed-text: #ffffff; --pdb-commerce-completed-bg: #5b16a3; --pdb-commerce-completed-border: #3f0a6a;
  --pdb-commerce-partially-refunded-text: #f5cec3; --pdb-commerce-partially-refunded-bg: #452720; --pdb-commerce-partially-refunded-border: #a46b5f;
  --pdb-commerce-refunded-text: #fff8f6; --pdb-commerce-refunded-bg: #8b302d; --pdb-commerce-refunded-border: #c26f69;
  --pdb-commerce-exchange-text: #fff7fc; --pdb-commerce-exchange-bg: #6e264c; --pdb-commerce-exchange-border: #a76687;
  --pdb-commerce-cancelled-text: #fff7fb; --pdb-commerce-cancelled-bg: #a22262; --pdb-commerce-cancelled-border: #db80ab;
  --pdb-commerce-action-required-text: #ffffff; --pdb-commerce-action-required-bg: #b42318; --pdb-commerce-action-required-border: #e7867e;
}
.pdb-status-badge--tender-cash { color: var(--pdb-commerce-tender-cash-text); background: var(--pdb-commerce-tender-cash-bg); border-color: var(--pdb-commerce-tender-cash-border); }
.pdb-status-badge--tender-debit { color: var(--pdb-commerce-tender-debit-text); background: var(--pdb-commerce-tender-debit-bg); border-color: var(--pdb-commerce-tender-debit-border); }
.pdb-status-badge--tender-credit { color: var(--pdb-commerce-tender-credit-text); background: var(--pdb-commerce-tender-credit-bg); border-color: var(--pdb-commerce-tender-credit-border); }
.pdb-status-badge--tender-gift-card { color: var(--pdb-commerce-tender-gift-card-text); background: var(--pdb-commerce-tender-gift-card-bg); border-color: var(--pdb-commerce-tender-gift-card-border); }
.pdb-status-badge--tender-store-credit { color: var(--pdb-commerce-tender-store-credit-text); background: var(--pdb-commerce-tender-store-credit-bg); border-color: var(--pdb-commerce-tender-store-credit-border); }
.pdb-status-badge--tender-exchange-credit { color: var(--pdb-commerce-tender-exchange-credit-text); background: var(--pdb-commerce-tender-exchange-credit-bg); border-color: var(--pdb-commerce-tender-exchange-credit-border); }
.pdb-status-badge--tender-split { color: var(--pdb-commerce-tender-split-text); background: var(--pdb-commerce-tender-split-bg); border-color: var(--pdb-commerce-tender-split-border); }
.pdb-status-badge--tender-other { color: var(--pdb-commerce-tender-other-text); background: var(--pdb-commerce-tender-other-bg); border-color: var(--pdb-commerce-tender-other-border); }
.pdb-status-badge--completed { color: var(--pdb-commerce-completed-text); background: var(--pdb-commerce-completed-bg); border-color: var(--pdb-commerce-completed-border); }
.pdb-status-badge--partially-refunded { color: var(--pdb-commerce-partially-refunded-text); background: var(--pdb-commerce-partially-refunded-bg); border-color: var(--pdb-commerce-partially-refunded-border); }
.pdb-status-badge--refunded { color: var(--pdb-commerce-refunded-text); background: var(--pdb-commerce-refunded-bg); border-color: var(--pdb-commerce-refunded-border); }
.pdb-status-badge--exchange { color: var(--pdb-commerce-exchange-text); background: var(--pdb-commerce-exchange-bg); border-color: var(--pdb-commerce-exchange-border); }
.pdb-status-badge--cancelled { color: var(--pdb-commerce-cancelled-text); background: var(--pdb-commerce-cancelled-bg); border-color: var(--pdb-commerce-cancelled-border); }
.pdb-status-badge--action-required { color: var(--pdb-commerce-action-required-text); background: var(--pdb-commerce-action-required-bg); border-color: var(--pdb-commerce-action-required-border); }
.pdb-status-badge--tender-store-credit .pdb-status-badge__dot { background: var(--pdb-champagne-accent); }

/* Continuous mode is opt-in; existing paged and scroll-snap carousels are unchanged. */
.pdb-carousel__loop-viewport{display:flex;position:relative;width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;overscroll-behavior-x:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch}
.pdb-carousel__loop-viewport::-webkit-scrollbar{display:none}
.pdb-carousel__loop-group{display:flex;flex:0 0 auto;align-items:flex-end;gap:var(--pdb-carousel-loop-gap,24px);padding-right:var(--pdb-carousel-loop-gap,24px);animation:pdb-carousel-drift var(--pdb-carousel-loop-duration,80s) linear infinite;animation-play-state:var(--pdb-carousel-loop-play,paused);will-change:transform}
@keyframes pdb-carousel-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){.pdb-carousel__loop-group{animation:none;will-change:auto}}
.pdb-carousel__loop-group>.pdb-carousel__slide{flex:0 0 auto}
.pdb-carousel--continuous>.pdb-carousel__nav{order:2}

/* Canonical tracking-link attribution. The full artwork is one immutable
   Design Brain raster so browsers, themes and mail clients cannot drift. */
.pdb-brand-endorsement {
  display: inline-flex;
  flex: 0 0 auto;
  width: 236px;
  max-width: 100%;
  border-radius: var(--pdb-button-radius, 9px);
  box-shadow:
    var(--pdb-glass-shadow, 0 26px 80px rgba(16, 0, 30, .36)),
    var(--pdb-button-glass-glow, 0 0 22px rgba(107, 47, 160, .32));
  text-decoration: none;
  transition: filter .16s ease, transform .16s ease;
}

a.pdb-brand-endorsement:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

a.pdb-brand-endorsement:focus-visible {
  outline: 2px solid var(--pdb-border-focus, #6d28d9);
  outline-offset: 2px;
  box-shadow: var(--pdb-field-focus-ring, 0 0 0 3px rgba(123, 63, 206, .18));
}

.pdb-brand-endorsement__artwork {
  display: block;
  width: 236px;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: inherit;
}